Design Tokens Are Not a Nice-to-Have
One developer uses #333. Another uses rgb(51,51,51). A third invents a CSS variable. Multiply by 200 components. That is why tokens exist.
Pull up any mature codebase without tokens and search for a single color — say, the primary text color. You will find #333, rgb(51,51,51), hsl(0,0%,20%), a custom CSS variable someone invented, and three shades that are "close enough." That is not a design system. That is a design suggestion.
Why Systems Fragment
Without tokens, every developer makes local decisions. Each one is reasonable in isolation. Together, they compound into drift — a system that looks consistent in the Figma file but behaves like chaos in production. The fix is not more documentation. The fix is a single source file that every component imports from, with typed constants that catch drift at compile time.
What a Token File Looks Like in Practice
Our token file is a single TypeScript file with const assertions. Change the accent from #C9A227 and every CTA, every eyebrow, every hover state, and every chart highlight updates in the next build. Four Edition palettes (RED, CONCRETE, VELVET, VOID) extend the same base architecture — one import path, four visual languages, zero duplication.
- Color — 40+ tokens: bg, surface, accent (with hover, dim, mid, glow variants), text at 5 contrast levels, diagnostic states
- Typography — 3 font stacks, 8 clamp() sizes, 4 weights
- Spacing — section padding (120px/80px mobile), container (1200px), fluid horizontal clamp()
- Motion — one easing curve, three durations (150/300/500ms), spring presets
- Depth — z-index stack, perspective distances, blur presets, shadow scale
If you grep your codebase for a color and get more than one result that is not an import, you do not have a token system. You have a to-do list.