Remixes of conversion.framer.media
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Conversion
description: |
Conversion is a bold, results-driven digital marketing agency brand built on
high contrast and energetic motion. The design system favors deep blacks
against crisp whites and accents, with playful serif typography mixed into a
primarily sans-serif environment. Large conic gradients—rotating through warm
oranges, cool blues, and reds—create decorative depth behind hero sections,
suggesting dynamism and heat. The overall mood is professional yet
approachable: confident in execution, memorable in personality, never
corporate or sterile. Interactive elements pop with a vibrant orangish-red,
while generous negative space and typographic scale establish visual
hierarchy. This is a system built to convert: every color choice, every
button, every headline works toward action.
source:
url: "https://conversion.framer.media/?via=hxmzaehsan"
pagesAnalyzed: 6
extractedAt: 2026-11-06
tokensMeasured: true
colors:
primary: "#FF4533"
link: "#0000EE"
canvas: "#000000"
on-primary: "#FFFFFF"
ink: "#FFFFFF"
body: "#999999"
muted: "#262626"
typography:
display-xl:
fontFamily: "Instrument Serif"
fontSize: 80px
fontWeight: 400
lineHeight: 1.1
letterSpacing: 0px
display-xl-strong:
fontFamily: Satoshi
fontSize: 80px
fontWeight: 500
lineHeight: 1.1
letterSpacing: -3.2px
display-lg:
fontFamily: Satoshi
fontSize: 70px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -2.8px
display-md:
fontFamily: Satoshi
fontSize: 60px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -2.4px
display-sm:
fontFamily: Satoshi
fontSize: 48px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -1.92px
display-xs:
fontFamily: Satoshi
fontSize: 42px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -0.84px
heading-lg:
fontFamily: Satoshi
fontSize: 32px
fontWeight: 500
lineHeight: 1.1
letterSpacing: -1.6px
heading-lg-2:
fontFamily: Satoshi
fontSize: 32px
fontWeight: 500
lineHeight: 1.1
letterSpacing: -0.64px
heading-md:
fontFamily: Satoshi
fontSize: 28px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.56px
heading-md-loose:
fontFamily: Satoshi
fontSize: 28px
fontWeight: 500
lineHeight: 1.1
letterSpacing: -0.56px
heading-sm:
fontFamily: Satoshi
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: -0.32px
heading-xs:
fontFamily: Satoshi
fontSize: 14px
fontWeight: 500
lineHeight: 1.71
letterSpacing: -0.28px
body-xl:
fontFamily: Satoshi
fontSize: 20px
fontWeight: 500
lineHeight: 1.5
letterSpacing: -0.4px
body-lg:
fontFamily: Satoshi
fontSize: 18px
fontWeight: 500
lineHeight: 1.5
letterSpacing: -0.36px
body-md:
fontFamily: Satoshi
fontSize: 16px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -0.32px
body-sm:
fontFamily: Satoshi
fontSize: 14px
fontWeight: 400
lineHeight: 1.4
letterSpacing: -0.28px
body-sm-strong:
fontFamily: Satoshi
fontSize: 14px
fontWeight: 500
lineHeight: 1.5
letterSpacing: -0.28px
body-sm-tight:
fontFamily: Satoshi
fontSize: 14px
fontWeight: 500
lineHeight: 1.2
letterSpacing: -0.28px
caption:
fontFamily: Satoshi
fontSize: 12px
fontWeight: 400
lineHeight: 1.4
letterSpacing: -0.24px
rounded:
none: 0px
xs: 12px
sm: 24px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 32px
xxl: 40px
xxxl: 48px
section: 64px
band: 96px
borderWidths:
thin: 2px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FFF7F7"
surface: "#F5EDED"
surfaceRaised: "#EDE6E6"
text: "#1D1413"
textMuted: "#716969"
border: "#DBD4D4"
accent: "#E01400"
accentFg: "#FFFFFF"
focusRing: "#FF4533"
elevation: shadow
dark:
bg: "#000000"
surface: "#000000"
surfaceRaised: "#141414"
text: "#FFFFFF"
textMuted: "#999999"
border: "#1F1F1F"
accent: "#FF4533"
accentFg: "#0B0B0C"
focusRing: "#FF4533"
elevation: "border+surface"
gradients:
- context: section
kind: conic
value: "conic-gradient(rgb(255, 217, 173) 0deg, rgb(19, 156, 229) 180deg, rgb(253, 134, 77) 360deg)"
- context: section
kind: conic
value: "conic-gradient(rgb(255, 0, 0) 0deg, rgb(255, 0, 26) 54.8916deg, rgb(0, 166, 255) 106.699deg, rgb(71, 151, 255) 162deg, rgb(0, 68, 255) 252deg, rgb(255, 128, 0) 306deg, rgb(255, 0, 0) 360deg)"
components:
button-filled:
textColor: "{colors.link}"
height: 44px
padding: "12px 18px 12px 18px"
fontSize: 12px
boxShadow: "rgba(255, 255, 255, 0.08) 0px 0px 0px 1px"
fontFamily: sans-serif
fontWeight: 400
rounded: "{rounded.xs}"
backgroundColor: "rgb(10, 10, 10)"
button-primary:
textColor: "{colors.link}"
height: 44px
padding: "12px 18px 12px 18px"
fontSize: 12px
boxShadow: "rgba(255, 69, 51, 0.12) 0px 0px 0px 1px"
fontFamily: sans-serif
fontWeight: 400
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
button-primary-sm:
textColor: "{colors.link}"
height: 36px
padding: "9px 13px 9px 13px"
fontSize: 12px
boxShadow: "rgba(255, 69, 51, 0.12) 0px 0px 0px 1px"
fontFamily: sans-serif
fontWeight: 400
rounded: 10px
backgroundColor: "{colors.primary}"
button-icon:
textColor: "{colors.canvas}"
height: 40px
fontSize: 12px
fontFamily: sans-serif
fontWeight: 400
rounded: "{rounded.xs}"
backgroundColor: "rgb(255, 68, 51)"
navigation:
textColor: "{colors.canvas}"
padding: "24px 64px 24px 64px"
fontSize: 12px
fontFamily: sans-serif
fontWeight: 400
backgroundColor: "rgba(255, 255, 255, 0)"
footer:
textColor: "{colors.canvas}"
fontSize: 12px
fontFamily: sans-serif
fontWeight: 400
footer-sm:
textColor: "{colors.canvas}"
padding: "64px 64px 64px 64px"
fontSize: 12px
fontFamily: sans-serif
fontWeight: 400
backgroundColor: "rgba(0, 0, 0, 0.56)"
link:
textColor: "{colors.link}"
fontSize: 12px
fontFamily: sans-serif
fontWeight: 400
rounded: "{rounded.sm}"
link-sm:
textColor: "{colors.link}"
padding: "8px 14px 8px 14px"
fontSize: 12px
fontFamily: sans-serif
fontWeight: 400
rounded: 8px
backgroundColor: "rgba(255, 255, 255, 0)"
states:
input-focus-visible:
target: input
state: focus-visible
outline: none
breakpoints:
- width: 375
containerWidth: 327
gridColumns: 4
navLinksVisible: 9
menuToggleVisible: false
headingPx: 38
bodyPx: 12
sectionPaddingX: 0
- width: 768
containerWidth: 720
gridColumns: 8
navLinksVisible: 9
menuToggleVisible: false
headingPx: 38
bodyPx: 12
sectionPaddingX: 0
- width: 1024
containerWidth: 976
gridColumns: 4
navLinksVisible: 9
menuToggleVisible: false
headingPx: 60
bodyPx: 12
sectionPaddingX: 0
- width: 1280
containerWidth: 1152
gridColumns: 5
navLinksVisible: 7
menuToggleVisible: false
headingPx: 80
bodyPx: 12
sectionPaddingX: 0
- width: 1440
containerWidth: 1200
gridColumns: 4
navLinksVisible: 7
menuToggleVisible: false
headingPx: 80
bodyPx: 12
sectionPaddingX: 0
coverage:
statesFound: 13
gradientsFound: 2
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Conversion is a bold, results-driven digital marketing agency brand built on high contrast and energetic motion. The design system favors deep blacks against crisp whites and accents, with playful serif typography mixed into a primarily sans-serif environment. Large conic gradients—rotating through warm oranges, cool blues, and reds—create decorative depth behind hero sections, suggesting dynamism and heat. The overall mood is professional yet approachable: confident in execution, memorable in personality, never corporate or sterile. Interactive elements pop with a vibrant orangish-red, while generous negative space and typographic scale establish visual hierarchy. This is a system built to convert: every color choice, every button, every headline works toward action.
Key Characteristics:
#000000) with pure white typography for maximum contrast#FF4533) for all CTAs and emphasis{colors.primary} — #FF4533): Used for primary CTAs ("Book a call" buttons), brand accent marks, active states, and hero highlights. High energy, attention-grabbing.{colors.canvas} — #000000): Default page background throughout. Deep, immersive, high contrast.{colors.on-primary} — #FFFFFF): Main heading and body text on dark backgrounds; label and text on brand surfaces.{colors.body} — #999999): Standard body copy, secondary descriptions, and supplementary text. Readable but recessive.{colors.muted} — #262626): Captions, metadata, tertiary text, and decorative labels.{colors.link} — #0000EE): Inline hyperlinks. Maintains web convention and stands out against dark backgrounds.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Instrument Serif | 80px | 400 | 1.1 | 0px | Hero headline, ultra-large statements |
| Display XL Strong | Satoshi | 80px | 500 | 1.1 | −3.2px | Extra-bold display, tight tracking |
| Display LG | Satoshi | 70px | 500 | 1.2 | −2.8px | Large hero alternative, tight |
| Display MD | Satoshi | 60px | 500 | 1.2 | −2.4px | Section headers, major callouts |
| Display SM | Satoshi | 48px | 500 | 1.2 | −1.92px | Secondary display sizes |
| Display XS | Satoshi | 42px | 500 | 1.2 | −0.84px | Smaller display variant |
| Heading LG | Satoshi | 32px | 500 | 1.1 | −1.6px | Major section headings |
| Heading MD | Satoshi | 28px | 500 | 1.0 | −0.56px | Subsection headers |
| Heading MD Loose | Satoshi | 28px | 500 | 1.1 | −0.56px | Heading with increased line-height |
| Heading SM | Satoshi | 16px | 500 | 1.5 | −0.32px | Small heading, label-like |
| Heading XS | Satoshi | 14px | 500 | 1.71 | −0.28px | Minimal heading, metadata |
| Body XL | Satoshi | 20px | 500 | 1.5 | −0.4px | Large body text, emphasis |
| Body LG | Satoshi | 18px | 500 | 1.5 | −0.36px | Standard body, readable |
| Body MD | Satoshi | 16px | 500 | 1.2 | −0.32px | Default body, input, button text |
| Body SM Strong | Satoshi | 14px | 500 | 1.5 | −0.28px | Small strong text |
| Body SM Tight | Satoshi | 14px | 500 | 1.2 | −0.28px | Small text, compact lines |
| Body SM | Satoshi | 14px | 400 | 1.4 | −0.28px | Small body, secondary info |
| Caption | Satoshi | 12px | 400 | 1.4 | −0.24px | Metadata, captions, fine print |
{colors.primary} (#FF4533)#0000EE (link blue, inverted from norm for high contrast){spacing.md} 18px {spacing.md} 18px (12px 18px){rounded.xs} (12px)rgba(255, 69, 51, 0.12) 0px 0px 0px 1pxrgba(255, 69, 51, 0.12) 0px 0px 0px 1px{colors.primary} (#FF4533)#0000EErgba(255, 69, 51, 0.12) 0px 0px 0px 1pxrgba(10, 10, 10) (near-black)#0000EE{spacing.md} 18px {spacing.md} 18px{rounded.xs} (12px)rgba(255, 255, 255, 0.08) 0px 0px 0px 1px#FF4433 (approximate to primary)#000000{rounded.xs} (12px)rgba(255, 255, 255, 0) (transparent)#000000{spacing.lg} 64px {spacing.lg} 64px (24px 64px){rounded.none} (0px){colors.link} (#0000EE)rgba(255, 255, 255, 0) (transparent)rgba(255, 255, 255, 0) 0px 0px 0px 1px#0000EErgba(0, 0, 0, 0.98) (nearly opaque black, slightly transparent){colors.on-primary} (#FFFFFF){rounded.xs} (12px border-radius), thin (2px) border styling{spacing.md} 16px (inferred from form layout){typography.body-md} (16px, weight 500, letter-spacing −0.32px){colors.muted} (#262626)outline: none (no visible focus indicator in extraction)rgba(0, 0, 0, 0.98){colors.on-primary} (#FFFFFF){rounded.xs} (12px){spacing.md} 16px{typography.body-md} (16px, weight 500){colors.muted}Base unit: 4px ({spacing.xxs}). The system scales in multiples:
{spacing.xxs} = 4px{spacing.xs} = 8px{spacing.sm} = 12px{spacing.md} = 16px{spacing.lg} = 24px{spacing.xl} = 32px{spacing.xxl} = 40px{spacing.xxxl} = 48px{spacing.section} = 64px{spacing.band} = 96pxUsage Context:
{spacing.section} (64px) horizontal padding at desktop; measured as 0px at mobile, indicating full-bleed or adjusted padding.The design prioritizes breathing room over density. Large sections separate hero, value propositions, testimonials, and forms. Typography scales dramatically (80px display vs. 14px body), leveraging white space naturally. Form fields float with breathing room in their container. Testimonial images and logos sit isolated. This is high-end, unhurried design—whitespace is a design feature, not wasted space.
{rounded.none} = 0px (navigation, footer, structural elements){rounded.xs} = 12px (buttons, input fields, icon buttons){rounded.sm} = 24px (image containers, cards){rounded.full} = 9999px (pill-shaped elements; used for toggle or badge roles if present)Per Component:
{rounded.xs} (12px) or smaller (10px for sm variant){rounded.xs} (12px){rounded.sm} (24px){rounded.none} (0px)box-shadow inset borders (1px equivalent optical weight) rather than true border strokes.The design system eschews shadow-based elevation. Instead, depth emerges through color blocking, opacity shifts, and conic gradients.
| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow, solid background | Default buttons, text, sections |
| Lifted (Subtle) | 1px inset box-shadow: rgba(255, 255, 255, 0.08) or rgba(255, 69, 51, 0.12) | Button borders (optical lift) |
| Decorative | Conic gradient: conic-gradient(rgb(255, 217, 173) 0deg, rgb(19, 156, 229) 180deg, rgb(253, 134, 77) 360deg) or conic-gradient(rgb(255, 0, 0) 0deg, rgb(255, 0, 26) 54.89deg, rgb(0, 166, 255) 106.70deg, rgb(71, 151, 255) 162deg, rgb(0, 68, 255) 252deg, rgb(255, 128, 0) 306deg, rgb(255, 0, 0) 360deg) | Hero section backgrounds, visual warmth |
Shadow Philosophy:
No traditional drop shadows exist in this system. Depth comes from contrasting color (white on black, red on black), opacity gradients, and animated conic gradients. This keeps the design clean, modern, and GPU-friendly for animations. Input fields and buttons use inset box-shadows (1px) to hint at depth without introducing external shadows.
The system employs opacity for transparency and visual hierarchy:
1.00 (100%): Fully opaque; primary text, buttons, backgrounds0.99 (99%): Near-opaque; subtle transparency on form inputs (rgba(0, 0, 0, 0.99))0.98 (98%): Slightly transparent form fields, near-black surfaces0.97 (97%): Gradual fade; decorative or overlay elements0.80 (80%): Moderate transparency; footer overlays or secondary surfaces0.00 (0%): Fully transparent; transparent button backgrounds, link buttonsz-index: 1 (default content)z-index: 2 (slightly raised, e.g., cards on sections)z-index: 10 (nav dropdowns, small modals)z-index: 13 (higher dropdowns, above most UI)z-index: 2147483647 (maximum; floating notifications, always visible){colors.primary} (#FF4533) for all primary CTAs and interactive highlights. It draws attention without aggression.{colors.on-primary} (#FFFFFF) with {colors.canvas} (#000000) for maximum contrast and readability. This is the system's backbone.{spacing.section} (64px) and {spacing.band} (96px) to separate major content blocks. Breathing room is a feature.{rounded.xs} (12px); keep structural elements sharp ({rounded.none}).{colors.link} (#0000EE) for inline hyperlinks only. Maintain web convention.{colors.primary} to body text or non-interactive elements. Reserve it for CTAs, accent marks, and active states.| Breakpoint | Viewport | Content Column | Grid Cols | Nav Visible | Heading Size | Body Size | Section Padding X |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 327px | 4 | 9 links | 38px | 12px | 0px |
| Tablet | 768px | 720px | 8 | 9 links | 38px | 12px | 0px |
| Desktop MD | 1024px | 976px | 4 | 9 links | 60px | 12px | 0px |
| Desktop LG | 1280px | 1152px | 5 | 7 links | 80px | 12px | 0px |
| Desktop XL | 1440px | 1200px | 4 | 7 links | 80px | 12px | 0px |
Breakpoint Interpretation:
Minimum interactive size: 44px (observed on primary buttons at all sizes). Secondary buttons drop to 36px. Icon buttons hold 40px × 40px. Form inputs measure 44px–48px height. These meet mobile accessibility guidelines (48px recommended; this system is slightly below but acceptable for compact UI).
{colors.primary} — #FF4533){colors.canvas} — #000000){colors.on-primary} — #FFFFFF){colors.body} — #999999){colors.muted} — #262626){colors.link} — #0000EE)All CTAs are #FF4533 with {rounded.xs} (12px) corners. Primary button text is #0000EE (blue) for high contrast; secondary buttons are near-black (rgba(10, 10, 10)). Buttons include a 1px inset box-shadow (no external shadows).
Dark theme everywhere: Canvas is #000000. All text on dark is white (#FFFFFF) or gray (#999999 / #262626). Zero compromise on contrast.
Typography is Satoshi (sans-serif, weight 500 default) + Instrument Serif (display at 80px only, weight 400). Display sizes carry negative letter-spacing (−0.84px to −3.2px). Body is weight 400, 16px.
Spacing follows a 4px base unit scale: Use {spacing.md} (16px) for component padding, {spacing.lg} (24px) for gaps, {spacing.section} (64px) for major section breaks.
Border radius: Buttons and inputs are {rounded.xs} (12px). Images are {rounded.sm} (24px). Structural elements are {rounded.none} (0px / sharp).
Forms use rgba(0, 0, 0, 0.98) background with a 2px thin border and {rounded.xs} (12px) corners. Text is white. Placeholder is #262626 (muted gray).
No shadows. Depth comes from color blocking, opacity (0.98–1.0), and conic gradients. Gradients are: conic-gradient(rgb(255, 217, 173) 0deg, rgb(19, 156, 229) 180deg, rgb(253, 134, 77) 360deg) (warm) or the 6-stop multi-color gradient for hero backgrounds.
Responsive: Headings scale 38px → 80px, content columns 327px → 1200px. No hamburger observed; nav link visibility drops at 1280px. Always reflow, never hide content.
Z-index layers: 1–2 for base, 10–13 for dropdowns, 2147483647 for toasts. Keep modals below toasts.
Interaction states for links: Hover underlines and color changes to {colors.link}. Exact styles were not isolated in extraction; implement standard web link hover (e.g., underline, slightly lighter shade).
Semantic Status Colors: The site does not declare error, success, warning, or info states in its markup. No semantic color ramp exists. Only use the neutral grays and primary red; do not invent warning/error colors.
Interaction States (Buttons, Form Inputs): The extraction captured link hover behavior (generic Framer defaults) but did not isolate specific hover, active, focus, or disabled states for buttons, inputs, or other interactive components. Implement standard web patterns (opacity on disabled, underline/color shift on hover) but verify against live site.
Shadow / Elevation Detail: The system uses no traditional box-shadows. Depth relies entirely on color and opacity. Decorative conic gradients are present but their exact animation timing, angle, or blur parameters were not captured.
Dark Mode / Theme Variants: Only one theme (dark) was measured. No light mode, high-contrast mode, or theme switching logic was observed.
Interaction Motion / Animation: Transitions, duration, easing, and animation loops were not extracted. Use sensible defaults (200ms ease-out for UI, slower for decorative gradients).
Accessible Focus States: Focus indicators (outline, ring, or glow) were not measured. Implement standard :focus-visible patterns (e.g., 2px outline in accent color).
Component Hover States (Full Detail): Only button and input hover were partially captured. Cards, navigation items, form controls, and other interactive surfaces may have unmeasured hover behaviors.
Typography Kerning / Ligatures: No font feature settings (font-kerning, font-variant-ligatures) were extracted. Assume defaults unless explicitly observed.
Breakpoint Exact Behaviors: The responsive table shows viewport sizes and content column widths but does not detail per-component reflow (e.g., do form fields stack in a column grid on mobile, or do they remain full-width?). Infer from column counts and measured widths.
Footer & Lower Pages: 6 pages were analyzed; surfaces behind authentication, account dashboards, or unpublished drafts were not visited. Footer structure and depth may differ.
Gradient Animations: Conic gradients are decorative; their animation state (static vs. rotating) was not confirmed. Implement as static unless site demonstrates animation.
Border / Outline Styles: Only thin (2px) borders on inputs were measured. Other components may use different strokes; none were extracted.
Opacity Transitions: Opacity scale exists (0.8–1.0) but exact transition timing and trigger conditions were not captured.