DESIGN.md · measured November 5, 2026

Conversion design system

Conversion’s website (conversion.framer.media) uses the Satoshi font and #FF4533 as its main color on a black background. Measured by Sitepeel on November 5, 2026.

#000000
#0A0A0A
#FFFFFF
#FF4533

Download DESIGN.md

From conversion.framer.media ↗ · 330 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Conversion

Conversion color palette

9 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Near Black#000000backgroundPage background · 1×

Near Black#0A0A0Asurface-container-lowRaised areas one step from the page · 1×

Charcoal#1C1C1Csurface-containerCards and panels · 1×

Near Black 56%#0000008FoverlayTranslucent fill for cards and controls · 1×

Near Black 48%#0A0A0A7Aoverlay-strongStronger translucent fill · 1×

Text

White#FFFFFFon-surfacePrimary text and headings · 77×

White#FFFFFFon-primaryText and icons on primary

Accents

Vivid Red#FF4533primaryPrimary buttons and calls to action · 18×

Borders

White 12%#FFFFFF1FoutlineBorders and dividers · 12×

Conversion fonts and type scale

2 families.

AaSatoshiWeights 500Satoshi, Satoshi Placeholder, sans-serif

Aasans-serifWeights 400sans-serif

headline-displayPage title (h1)Conversion60px · 500 · 1.2 · -0.04em
mobile 38px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog42px · 500 · 1.2 · -0.02em

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog32px · 500 · 1.1 · -0.05em

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog28px · 500 · 1.1 · -0.02em

body-mdBody textThe quick brown fox jumps over the lazy dog18px · 500 · 1.2 · -0.02em

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog20px · 500 · 1.5 · -0.02em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog12px · 400

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 500 · 1.4 · -0.02em

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 500 · 1 · -0.02em

Contrast

Text on #000000

AaAAA21.0:1

Spacing

No strict grid · 49% are multiples of 4px

sm8px

md10px

lg18px

xl64px

gutter10px

section64px

margin64px

container1100px

Breakpoints: 809px 809.98px 810px 1199px 1199.98px

Shapes

Corner radii, most used first.

xl24px · 48×

lg12px · 28×

sm8px · 20×

md10px · 4×

Depth

Ring

Inset

Conversion UI components

Rebuilt from the measured CSS.

Book a call

button-primaryFilled button · hover to see the measured hover state

Book a call

button-secondaryFilled button

Learn More

button-outlineOutlined button

Your Email Address

input-fieldInput field

Inline link

linkInline link

Motion

Interface transitions

0.3s

cubic-bezier(0.44, 0, 0.56, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #000000 for the page and lift surfaces in small steps: #0A0A0A, #1C1C1C.
Reserve #FF4533 for primary actions and key highlights.
Set headlines in Satoshi with tight tracking (-0.04em).
Reuse the measured spacing steps (8px, 10px, 18px).
Use 24px corners on most elements; larger surfaces also use 12px, 8px and 10px.
Add drop shadows for depth; use hairline rings and tonal surfaces.
Introduce new font families beyond Satoshi and sans-serif.
Use #FF4533 for large backgrounds or body text.
Make interface transitions slower than 0.3s.

Conversion DESIGN.md220 lines

---
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).

Fonts

What font does Conversion use?

Conversion uses Satoshi (weight 500) on conversion.framer.media. Page titles are 60px at weight 500 (38px on phones) and body text is 18px. Measured on November 5, 2026.

AaSatoshi · 500
Aasans-serif · 400

Find every font on conversion.framer.media with Font finder →

Colors

Conversion colors: palette and hex codes

Conversion’s main colors are #000000 (near black) for the background, #FFFFFF (white) for text and #FF4533 (vivid red) as the main accent. Measured on November 5, 2026.

#000000 · near black
#FFFFFF · white
#0A0A0A · near black
#1C1C1C · charcoal
#FF4533 · vivid red

Get conversion.framer.media’s palette as CSS or Tailwind with Colors →

Tech stack

What is Conversion built with?

Conversion’s website (conversion.framer.media) is built with Framer, React, Lenis, Bunny Stream and Lottie. Measured on November 5, 2026.

Site builder & CMS: Framer
JavaScript framework: React 18.2.0
Animation & 3D: Lenis 1.1.2, Lottie, Motion
Media: Bunny Stream
Fonts & icons: Google Fonts

Check conversion.framer.media live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

Neiden neiden.framer.media · Cal Sans

Ecommerce Website Templates themes.shopify.com · Inter var

VAYNEX vaynex.framer.website · General Sans

RaycastBrand raycast.com · Inter

RemixBrand remix.run · Inter

DatabricksBrand databricks.com · DM Sans

Another site? Make a DESIGN.md from any link.

FAQ

Conversion design system questions

What font does Conversion use?

Conversion’s website uses Satoshi (weight 500). Page titles are 60px at weight 500 (38px on phones) and body text is 18px. Measured on November 5, 2026.

What are the Conversion colors and hex codes?

On conversion.framer.media: #000000 (near black) for the background, #FFFFFF (white) for text and #FF4533 (vivid red) as the main accent. The color palette above lists all 9 colors with their hex codes and where each one is used.

What is the Conversion design system?

The design system on this page is conversion.framer.media’s, as measured on November 5, 2026: Satoshi type, #FF4533 as the main color and 24px corners, written down as a DESIGN.md. It is not Conversion’s own documentation.

What is Conversion built with?

Conversion’s website (conversion.framer.media) is built with Framer, React, Lenis, Bunny Stream and Lottie. The full tech stack Sitepeel found: Framer, React, Lenis, Bunny Stream, Lottie, Motion and Google Fonts. Measured on November 5, 2026.

What is the Conversion DESIGN.md?

A plain-text file with Conversion’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Conversion’s official design system?

No. Sitepeel measured it from conversion.framer.media’s public page on November 5, 2026. It is an independent analysis, not made or approved by Conversion.

Can I use Conversion’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Conversion’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.