Design tokens that scale
What design tokens really are, why they save your team on the 5th project, and how we ship them with Figma + Tailwind.
Design tokens are not 'a table of colors and shadows'. They're a contract between design and engineering. When the contract is missing, you get nights of arguing about hex codes.
Levels of tokens
We split tokens into three levels. Primitive — raw values (#5159ff, 16px). Semantic — intent (color.brand, space.lg). Component — local rules (button.primary.bg). Without the hierarchy, tokens collapse into a junk drawer.
Where tokens live
Source of truth: Figma Variables. We export JSON from Figma and transform it through style-dictionary into CSS custom properties. Tailwind picks them up via config — engineers get t-shirt classes like `text-foreground` and never think about hexes.
Dark mode and a11y
Dark mode is not 'invert the values' — it's a separate set of semantic tokens. We check contrast in Figma and run axe-core in CI. AA contrast is a hard requirement, not a 'nice to have'.
Ownership
One human owner for tokens — usually the lead designer. Token changes are PRs that require an engineer review. It takes 10 minutes a week and saves weeks of chaos at scale.