Design tokens for React

From CSS variables to component props

React projects need design tokens at multiple levels: CSS custom properties for theming, component props for variants, and style objects for runtime decisions. A designtoken.md file gives your coding agent the full picture — color scales, typography hierarchies, spacing systems — so it generates consistent React components from the start.

Integration

How React consumes tokens

Design tokens flow into React at three levels. Your designtoken.md enables all three.

Level 1

CSS Custom Properties

The most common approach. Your designtoken.md color scales (50–900) map directly to CSS variables. Agent reads the token file and generates var(--color-primary-500) references in your JSX. Works with any styling approach.

Level 2

Styled-Components / Emotion

CSS-in-JS libraries access tokens as theme values. The agent reads designtoken.md and generates ${props => props.theme.color.primary[500]} or equivalent. Full type hierarchy maps to theme objects.

Level 3

Tailwind CSS

designtoken.md's generator outputs Tailwind-compatible config. Your agent reads the markdown for intent and relationships, then generates Tailwind utility classes that match your token definitions. bg-primary-500, text-heading-lg, etc.

Comparison

What designtoken.md gives React agents

Without designtoken.md, agents generate hardcoded values. With it, they generate semantic, maintainable components.

Without designtoken.md

<button style={{ backgroundColor: '#3B82F6', color: '#FFFFFF', padding: '12px 24px', borderRadius: '8px', fontSize: '14px' }}> Submit </button>

With designtoken.md

<button className={cn( 'bg-primary-500 text-white', 'px-6 py-3 rounded-lg', 'text-body-sm font-medium', 'hover:bg-primary-600' )}> Submit </button>

Stack

Works with your stack

Whether you use Next.js, Remix, Vite, or Create React App — designtoken.md works the same way.

Next.js

Server and client components both benefit
Token file in project root
Agent reads it for any route

Remix

Same approach as Next.js
designtoken.md sits alongside route files
Loaders and actions can reference tokens

Vite + React

Zero config required
Drop the file, agent reads it
No build plugins, no setup

Create React App

Works identically to Vite
Token file is project context, not a dependency
No ejection needed

FAQ

Common questions

Do I need to install anything to use designtoken.md with React?

No. designtoken.md is a markdown file your coding agent reads directly. There's no npm package, no build plugin, no config. Generate the file, drop it in your project root, and your agent uses it when generating React components.

Does designtoken.md work with TypeScript?

Yes. The structured token definitions in designtoken.md give agents enough context to generate properly typed theme objects, styled-component props, or CSS variable references — all type-safe.

Can I use designtoken.md alongside an existing design system like MUI or Chakra?

Yes. Your designtoken.md captures your brand's specific token values. Agents read it and map those values to whatever component library you use — MUI's sx prop, Chakra's theme tokens, or raw CSS variables.