--- version: alpha name: Conversion description: "Dark interface measured from conversion.framer.media: Satoshi type with sans-serif, vivid red accents, tonal surfaces and 24px corners." colors: background: "#000000" surface: "#000000" on-surface: "#FFFFFF" on-background: "#FFFFFF" surface-container-low: "#0A0A0A" surface-container: "#1C1C1C" overlay: "#0000008F" overlay-strong: "#0A0A0A7A" outline: "#FFFFFF1F" primary: "#FF4533" on-primary: "#FFFFFF" typography: headline-display: fontFamily: Satoshi fontSize: 60px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.04em headline-lg: fontFamily: Satoshi fontSize: 42px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.02em headline-md: fontFamily: Satoshi fontSize: 32px fontWeight: 500 lineHeight: 1.1 letterSpacing: -0.05em headline-sm: fontFamily: Satoshi fontSize: 28px fontWeight: 500 lineHeight: 1.1 letterSpacing: -0.02em body-md: fontFamily: Satoshi fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.02em body-lg: fontFamily: Satoshi fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: -0.02em body-sm: fontFamily: sans-serif fontSize: 12px fontWeight: 400 label-md: fontFamily: Satoshi fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: -0.02em label-sm: fontFamily: Satoshi fontSize: 14px fontWeight: 500 lineHeight: 1 letterSpacing: -0.02em headline-display-mobile: fontFamily: Satoshi fontSize: 38px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.04em rounded: sm: 8px md: 10px lg: 12px xl: 24px spacing: sm: 8px md: 10px lg: 18px xl: 64px gutter: 10px section: 64px margin: 64px container: 1100px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 12px 18px height: 44px button-primary-hover: backgroundColor: "#FF230F" button-secondary: backgroundColor: "{colors.primary}" textColor: "#F9FAFB" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 9px 13px height: 36px button-outline: backgroundColor: "{colors.surface-container-low}" textColor: "{colors.on-surface}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 12px 18px height: 44px input-field: backgroundColor: "{colors.surface-container}" textColor: "{colors.on-surface}" typography: "{typography.label-md}" rounded: "{rounded.lg}" padding: 12px link: textColor: "{colors.on-surface}" --- # Conversion Design System ## Overview Conversion describes itself as: “The Conversion Framer template is perfect for digital marketing agencies and freelancers who want a clean, modern, and sleek website that will convert visitors into leads and clients.” The interface is dark, built on **Near Black (#000000)** with **White (#FFFFFF)** text, and **Vivid Red (#FF4533)** as the main accent. Type is set in **Satoshi** and **sans-serif**. Headlines run large with tight negative tracking; body text is 18px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 24px. Measured from [conversion.framer.media](https://conversion.framer.media/) on November 5, 2026 at 1440×900 and 390×844 from 330 rendered elements. Values are computed styles from the live page, not the original source files. ## Colors The palette has 9 roles. - **Near Black (#000000):** Page background, seen 1 time. Token `background`. - **White (#FFFFFF):** Primary text and headings, seen 77 times. Token `on-surface`. - **Near Black (#0A0A0A):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`. - **Charcoal (#1C1C1C):** Cards and panels, seen 1 time. Token `surface-container`. - **Near Black 56% (#0000008F):** Translucent fill for cards and controls, seen 1 time. Token `overlay`. - **Near Black 48% (#0A0A0A7A):** Stronger translucent fill, seen 1 time. Token `overlay-strong`. - **White 12% (#FFFFFF1F):** Borders and dividers, seen 12 times. Token `outline`. - **Vivid Red (#FF4533):** Primary buttons and calls to action, seen 18 times. Token `primary`. - **White (#FFFFFF):** Text and icons on primary. Token `on-primary`. ## Typography **Satoshi** and **sans-serif** share the interface. Fallback stack: `Satoshi, Satoshi Placeholder, sans-serif`. Other loaded fonts: Instrument Serif. - **headline-display:** Satoshi 60px at weight 500, line height 1.2, tracking -0.04em (38px on mobile). Page title (h1). - **headline-lg:** Satoshi 42px at weight 500, line height 1.2, tracking -0.02em. Section headings (h2). - **headline-md:** Satoshi 32px at weight 500, line height 1.1, tracking -0.05em. Sub-section headings. - **headline-sm:** Satoshi 28px at weight 500, line height 1.1, tracking -0.02em. Card and feature titles. - **body-md:** Satoshi 18px at weight 500, line height 1.2, tracking -0.02em. Body text. - **body-lg:** Satoshi 20px at weight 500, line height 1.5, tracking -0.02em. Lead paragraphs. - **body-sm:** sans-serif 12px at weight 400. Secondary and small text. - **label-md:** Satoshi 16px at weight 500, line height 1.4, tracking -0.02em. Buttons, navigation and labels. - **label-sm:** Satoshi 14px at weight 500, line height 1, tracking -0.02em. Small labels and badges. ## Layout Spacing does not follow a strict grid: 49% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid. - **Scale:** sm 8px, md 10px, lg 18px, xl 64px. - **Sections:** 64px vertical padding between major sections. - **Gaps:** 10px is the most common gap in flex and grid layouts. - **Container:** content is capped at 1100px. - **Page margin:** 64px on each side of full-width sections. - **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1199.98px. ## Elevation & Depth The design avoids drop shadows. Layers are separated by tonal surface steps (#0A0A0A → #1C1C1C) and hairline rings: - `rgba(255, 69, 51, 0.12) 0px 0px 0px 1px` - `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px` - `rgba(255, 255, 255, 0.1) 0px 0px 0px 0px inset` ## Shapes Most elements use 24px corners. Measured radii, most used first: - **xl (24px):** 48 elements. - **lg (12px):** 28 elements. - **sm (8px):** 20 elements. - **md (10px):** 4 elements. ## Components Measured from the rendered page. Token values reference the tokens above. - **button-primary (“Book a call”):** #FF4533 fill, #FFFFFF text, 12px/400, 12px radius, padding 12px 18px, shadow `rgba(255, 69, 51, 0.12) 0px 0px 0px 1px`. - **button-primary-hover:** background #FF230F, text #FFFFFF on hover. - **button-secondary (“Book a call”):** #FF4533 fill, #F9FAFB text, 12px/400, 10px radius, padding 9px 13px, shadow `rgba(255, 69, 51, 0.12) 0px 0px 0px 1px`. - **button-outline (“Learn More”):** #0A0A0A fill, #FFFFFF text, 12px/400, 12px radius, padding 12px 18px, shadow `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px`. - **input-field (“Your Email Address”):** #1C1C1C fill, #FFFFFF text, 16px/500, 12px radius, padding 12px, shadow `rgba(255, 255, 255, 0.1) 0px 0px 0px 0px inset`. - **link:** transparent fill, #FFFFFF text, padding 0px. ## Do's and Don'ts - Do use #000000 for the page and lift surfaces in small steps: #0A0A0A, #1C1C1C. - Do reserve #FF4533 for primary actions and key highlights. - Do set headlines in Satoshi with tight tracking (-0.04em). - Do reuse the measured spacing steps (8px, 10px, 18px). - Do use 24px corners on most elements; larger surfaces also use 12px, 8px and 10px. - Don't add drop shadows for depth; use hairline rings and tonal surfaces. - Don't introduce new font families beyond Satoshi and sans-serif. - Don't use #FF4533 for large backgrounds or body text. - Don't make interface transitions slower than 0.3s. ## Motion Interface transitions are quick: 0.3s. - **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`. Generated by [Sitepeel](https://sitepeel.dev/design-md/conversion.framer.media/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).