Design System Tokens
to DESIGN.md

---
version: alpha
name: copymarkdown.md
description: |
  copymarkdown.md's design system embodies a clean, minimalist aesthetic built for
  conversion and clarity. The visual identity prioritizes generous whitespace,
  progressive typography hierarchy, and a warm energetic amber-orange accent (#ed5f45)
  punctuating an otherwise restrained neutral palette.
source:
  url: "https://www.copymarkdown.md/"
  pagesAnalyzed: 1
  extractedAt: 2026-09-14
  tokensMeasured: true
colors:
  primary: "#ed5f45"
  secondary: "#333333"
  tertiary: "#fafafa"
  neutral: "#f4f4f5"
  surface: "#fafafa"
  on-surface: "#333333"
  ink: "#333333"
  body: "#808080"
  muted: "#999999"
  hairline: "#e1e7ea"
  accent-1: "#a145ed"
  accent-2: "#4583ed"
  error: "#ef4444"
typography:
  fontFamily: "Geist"
  display-xl:
    fontFamily: "Geist"
    fontSize: "54px"
    fontWeight: 450
    lineHeight: 1.1
    letterSpacing: "-2.7px"
  headline-lg:
    fontFamily: "Geist"
    fontSize: "40px"
    fontWeight: 450
    lineHeight: 1.2
    letterSpacing: "-2px"
  heading-md:
    fontFamily: "Geist"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "-0.5px"
  body-md:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
rounded:
  none: "0px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  full: "999px"
spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "20px"
  xl: "24px"
  section: "40px"
shadows:
  sm: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
  md: "rgba(237, 95, 69, 0.25) 0px 4px 14px 0px"
components:
  button-primary:
    backgroundColor: "#ed5f45"
    color: "#ffffff"
    borderRadius: "8px"
    padding: "10px 20px"
    fontSize: "15px"
    fontWeight: 500
---

# copymarkdown.md DESIGN.md

## 1. Visual Theme & Atmosphere
copymarkdown.md's design system embodies a clean, minimalist aesthetic built for conversion and clarity. The visual identity prioritizes generous whitespace, progressive typography hierarchy, and a warm energetic amber-orange accent (`#ed5f45`) punctuating an otherwise restrained neutral palette.

- **Primary Brand Accent:** `#ed5f45` used for primary calls to action, active badges, and focus rings.
- **Canvas & Surface Rhythm:** High-contrast canvas (`#ffffff`) paired with subtle surfaces (`#fafafa`) and hairline dividers (`#e1e7ea`).
- **Shape Language:** Structured modern rounded geometry (`8px`–`16px`) for interactive controls; rounded pill tags (`999px`).

## 2. Color Palette & Roles
### Primary & Accents
- **Primary / Brand** (`#ed5f45`): Primary call-to-action fill and brand highlights.
- **Accent 1** (`#a145ed`): Feature badge and secondary highlight.
- **Accent 2** (`#4583ed`): Link and indicator highlight.

### Neutral Scale
- **Canvas** (`#ffffff`): Page foundation and main content canvas.
- **Surface** (`#fafafa`): Card backgrounds, elevated preview, and code boxes.
- **On-Surface / Ink** (`#333333`): Primary text, headings, and high-contrast labels.
- **Body** (`#808080`): Description copy and list content.
- **Muted** (`#999999`): Secondary meta, helper text, and subtle icons.
- **Hairline** (`#e1e7ea`): 1px borders, container rules, and dividers.

## 3. Typography Rules
**Primary Font Family:** `Geist`

| Role | Family | Size | Weight | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| **display-xl** | `Geist` | `54px` | `450` | `1.1` | `-2.7px` |
| **headline-lg** | `Geist` | `40px` | `450` | `1.2` | `-2px` |
| **heading-md** | `Geist` | `24px` | `500` | `1.3` | `-0.5px` |
| **body-md** | `Geist` | `16px` | `400` | `1.5` | `0px` |

## 4. Component Stylings
### Primary Button
- Background: `#ed5f45`
- Text Color: `#ffffff`
- Border Radius: `8px`
- Padding: `10px 20px`
- Box Shadow: `rgba(237, 95, 69, 0.25) 0px 4px 14px 0px`

## 5. CSS Custom Properties (`:root`)
```css
:root {
  --color-primary: #ed5f45;
  --color-canvas: #ffffff;
  --color-surface: #fafafa;
  --color-ink: #333333;
  --color-body: #808080;
  --color-muted: #999999;
  --color-hairline: #e1e7ea;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --font-family: Geist;
}
```

---
Extracted with [Copy Markdown](https://www.copymarkdown.md)