design-tokens

name

design-tokens

description

Extract code-ready design tokens from a DESIGN.md file. Converts design system documentation into CSS custom properties, Tailwind CSS config, styled-components theme objects, CSS-in-JS themes, or W3C Design Tokens JSON. Use when the user wants to turn a design system into usable code tokens, generate a Tailwind config from a brand's design, create CSS variables from a DESIGN.md, bootstrap a theme file for their framework, or extract a color palette, typography scale, or spacing system as code. Also trigger when the user wants to "use Stripe's colors in my project" or "set up a theme based on Linear".

Extract Design Tokens

Convert a DESIGN.md file into code-ready design tokens in the user's preferred format. This bridges the gap between design documentation and actual code — instead of manually copying hex values and pixel sizes, this skill extracts a complete, structured token set.

What gets extracted

From each DESIGN.md, extract these token categories:

Category	Source Section	What's extracted
Colors	Section 2	All hex values with semantic names and roles
Typography	Section 3	Font families, size scale, weight scale, line-heights, letter-spacing
Spacing	Section 5	Base unit and full spacing scale
Shadows	Section 6	Shadow definitions at each elevation level
Radii	Section 5	Border-radius scale
Breakpoints	Section 8	Responsive breakpoint values

Available Designs

Read design-md/_index.md for the full catalog of 58 design systems.

Workflow

1. Identify the design

If the user names a brand, match it against the catalog. Read design-md/{directory}/DESIGN.md to load the full design system.

If the user has a DESIGN.md in their project root, use that instead.

2. Determine the output format

Ask which format the user needs (or infer from their project):

CSS Custom Properties — For vanilla CSS or any framework

:root {
  --color-primary: #533afd;
  --color-background: #ffffff;
  --font-display: 'sohne-var', sans-serif;
  --spacing-4: 1rem;
  --shadow-sm: 0px 1px 3px rgba(50,50,93,0.25);
}

Tailwind CSS Config — For Tailwind projects

module.exports = {
  theme: {
    colors: {
      primary: '#533afd',
      background: '#ffffff',
    },
    fontFamily: {
      display: ['sohne-var', 'sans-serif'],
    },
    spacing: { /* ... */ },
    boxShadow: { /* ... */ },
  }
}

Theme Object (JS/TS) — For styled-components, Emotion, Stitches, or Chakra UI

export const theme = {
  colors: {
    primary: '#533afd',
    background: '#ffffff',
  },
  fonts: {
    display: "'sohne-var', sans-serif",
  },
  space: [0, 4, 8, 16, 24, 32, 48, 64],
  shadows: { /* ... */ },
}

W3C Design Tokens JSON — For cross-platform token exchange

{
  "color": {
    "primary": { "$value": "#533afd", "$type": "color" },
    "background": { "$value": "#ffffff", "$type": "color" }
  }
}

SCSS Variables — For Sass projects

$color-primary: #533afd;
$color-background: #ffffff;
$font-display: 'sohne-var', sans-serif;

3. Extract tokens

Read the DESIGN.md and extract every design token into the chosen format.

Colors (from Section 2):

• Map every named color to a semantic token name
• Group by role: primary, accent, surface, text, border, interactive, status
• Include hover/active/focus variants from Section 4

Typography (from Section 3):

• Font families with full fallback stacks
• Font size scale mapped to named steps (xs, sm, base, lg, xl, 2xl, etc.)
• Font weight scale
• Line-height scale
• Letter-spacing values

Spacing (from Section 5):

• Full spacing scale from the base unit
• Container max-width
• Gutter sizes

Shadows (from Section 6):

• Each shadow level as a named token (sm, md, lg, xl)
• Include multi-layer shadow values exactly as documented

Border Radius (from Section 5):

• Radius scale (none, sm, md, lg, full/pill)

Breakpoints (from Section 8):

• Named breakpoints with pixel values

4. Naming conventions

Use consistent naming conventions per format:

Format	Convention	Example
CSS Custom Properties	--{category}-{name}	--color-primary, --shadow-lg
Tailwind	Tailwind's standard keys	colors.primary, boxShadow.lg
Theme Object	camelCase nested objects	theme.colors.primary
Design Tokens JSON	Nested with $value/$type	color.primary.$value
SCSS	${category}-{name}	$color-primary, $shadow-lg

5. Generate the output file

Write the token file to the appropriate location:

• CSS: tokens.css or variables.css
• Tailwind: tailwind.config.js or tailwind.config.ts
• Theme: theme.ts or theme.js
• Design Tokens: tokens.json
• SCSS: _tokens.scss or _variables.scss

Include a header comment noting which design system the tokens were extracted from.

6. Usage guidance

After generating tokens, briefly explain:

• How to import/use the tokens in their project
• Any font files or CDN links needed for the typography tokens
• Which tokens are most important to apply first for maximum visual impact (usually colors + font-family)

Partial extraction

If the user only needs specific categories (e.g., "just give me Stripe's color palette as CSS vars"), extract only what's requested. Don't generate the full token set unless asked.

Multiple designs

If the user wants tokens from multiple design systems (e.g., for a theme switcher), generate separate token sets with a shared structure so they can be swapped at runtime.