Build the token layer before the component library
Primitive, semantic, and component token layers are defined first, so theming, dark mode, and rebrands never require component surgery.
How to run it
- 01
Define primitive tokens - raw colour ramps, spacing scale, type scale - with no semantic meaning attached.
- 02
Map semantic tokens on top: surface, text-primary, border, accent, danger. Components only ever reference these.
- 03
Create modes in Figma variables for light and dark, then verify contrast at both ends of every pairing.
- 04
Generate the same token set in code so design and implementation share one source of truth.
- 05
Only then build components, binding every property to a token rather than a raw value.
Anti-pattern this prevents
Components built with hardcoded hex values, then a dark-mode request that forces a rewrite of every component in the library.