Using designtoken.md with Claude Code

Generate your token file

Head to the designtoken.md generator and configure your design system:

• Pick your brand colors and let the generator build full color scales
• Configure typography: font families, sizes, and weights
• Set spacing and border-radius values
• Switch to the designtoken.md tab in the output panel
• Copy the output or download the file

Place it in your project root

Drop the file at the root of your project so Claude Code picks it up as context:

your-project/
├── designtoken.md    ← place it here
├── src/
├── package.json
└── ...

Claude Code reads files in your project root as context automatically. By placing designtoken.md at the top level, it becomes part of the context Claude sees when generating code for your project.

Start building with tokens

Claude Code reads project files as context automatically. Once designtoken.md is in your project root, Claude will discover it and apply the token values when writing UI code.

You can reference it explicitly in your prompts for even stronger results:

"Build a settings page using the tokens from designtoken.md for all styling."

"Create a card component. Use the color, spacing, and radius tokens from designtoken.md."

Claude Code will read the full file and apply the color scales, typography stack, spacing, radius, elevation, and component tokens consistently across every file it generates or modifies.

Reference your token file in CLAUDE.md for persistent context

Create or update a CLAUDE.md file in your project root to give Claude Code standing design instructions. Reference designtoken.md (or a tokens.json export) so Claude always applies your tokens without needing a prompt reminder:

# CLAUDE.md

## Design System
This project uses the design tokens defined in `designtoken.md` at the project root.
Always use these tokens for all styling decisions — colors, typography, spacing, radius, and elevation.

Do not use hardcoded hex values or arbitrary pixel sizes.
Use the token names as CSS custom properties (e.g. `var(--color-primary-500)`).

If your tokens are also exported as a tokens.json file, you can reference it directly in a CLAUDE.md skill block. This gives Claude Code structured, machine-readable token data alongside the markdown reference:

# CLAUDE.md

## Design Tokens (tokens.json)
Import the LESS token format from `tokens.json` for all design decisions.
The token structure follows the W3C Design Tokens Community Group format.

```json
// tokens.json excerpt (W3C format)
{
  "color": {
    "primary": {
      "500": { "$value": "#D97706", "$type": "color" },
      "700": { "$value": "#B45309", "$type": "color" }
    }
  },
  "spacing": {
    "sm": { "$value": "8px", "$type": "dimension" },
    "lg": { "$value": "24px", "$type": "dimension" }
  }
}
```

When generating LESS files, resolve token references as variables:
@color-primary-500: #D97706;
@color-primary-700: #B45309;
@spacing-sm: 8px;
@spacing-lg: 24px;

This pattern gives Claude Code context-aware design judgment rather than hardcoded values. It reads the token names, understands the semantic relationships (primary-500 is the default action color, primary-700 is the hover), and can compose new components that stay consistent with the rest of your design system.

Before & after

See the difference tokens make in what your agent outputs:

<button style="
  background: blue;
  color: white;
  padding: 10px 20px;
">
  Click me
</button>

<button style="
  background: var(--color-primary-500);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
">
  Click me
</button>

With tokens, every component Claude Code generates uses your actual design values instead of arbitrary defaults.