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. Five Edition palettes (RED, CONCRETE, VELVET, VOID, STELLAR) extend the same base architecture — one import path, five 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.