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.

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.