Design Token Extractor

Four output files from one URL

A single extraction run produces four ready-to-use files — each format serving a different workflow.

## Colors
- Primary:  #0F172A
- Accent:   #6366F1
- Surface:  #F8FAFC

## Typography
- Display: Inter 700, 48px / 1.1
- Body:    Inter 400, 16px / 1.6

## Spacing
- Base unit: 4px

{
  "color": {
    "primary": {
      "$value": "#0F172A",
      "$type": "color"
    },
    "accent": {
      "$value": "#6366F1",
      "$type": "color"
    }
  }
}

:root {
  --color-primary:   #0F172A;
  --color-accent:    #6366F1;
  --spacing-base:    4px;
  --radius-button:   8px;
  --font-sans: 'Inter', sans-serif;
}

@theme {
  --color-primary:   #0F172A;
  --color-accent:    #6366F1;
  --spacing-section: 80px;
  --radius-button:   8px;
  --font-sans: 'Inter', sans-serif;
}

What gets extracted

The extractor runs CSS parsing, DOM inspection, and visual analysis in parallel. It identifies intentional design decisions — values that repeat systematically across the page — and filters out one-off noise.

• Colors — full palette with semantic roles (primary, accent, surface, text, border, success, warning, danger)
• Typography — font families, every defined size/weight/line-height combination, type scale roles (display, heading, body, label, caption)
• Spacing — the base unit and every spacing increment in the scale
• Border radius — per-component radius values (button, card, modal, pill)
• Shadows — elevation levels with full box-shadow values

How it works

1. Paste any public URL — a marketing site, a product dashboard, a documentation page. Any page that loads publicly in a browser works.
2. Extraction runs automatically — CSS parsing, DOM traversal, font detection, and visual analysis run in parallel. Most sites complete in under 60 seconds.
3. Download your files — all four output formats are available immediately. Commit to your repo, import into Figma, or paste into an AI agent context.

What developers use it for

Loading design context into AI coding agents

The most common workflow: extract tokens from your live site, commit DESIGN.md to the project root, and reference it in your agent config. Claude Code reads it via CLAUDE.md, Codex via AGENTS.md, Cursor via .cursor/rules/, Copilot via .github/copilot-instructions.md, and Windsurf via .windsurfrules. Every subsequent AI-generated component uses your exact token values — not generic defaults.

Auditing a site's design system before a rebuild

Before a redesign or codebase migration, run an extraction to document what the current system actually is — not what the design files say it should be. The extraction reflects the live CSS, which is the ground truth.

Syncing extracted tokens into Figma

Import design-tokens.json (DTCG format) into Tokens Studio to create a Figma library that matches the live production site. Useful for teams inheriting a codebase with no design source of truth.

Competitive research

Extract the token set from a competitor or reference site to understand their visual system — spacing scale, type ramp, color palette structure — as a starting point for your own design decisions.

Frequently asked questions