# Conversion design system

> Conversion design system measured from conversion.framer.media: Satoshi font, #FF4533 primary, 9 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/conversion.framer.media/

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.

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

- Satoshi (weights 500)
- sans-serif (weights 400)

## 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

## 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

## Questions and answers

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

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/conversion.framer.media/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Conversion.

## The DESIGN.md file

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

```