Note1 min read
Design Token Architecture in Scalable Design Systems
The bridge between Figma and production code: Primitive vs Semantic tokens and effortless theming.
As products scale, finding and updating hardcoded hex codes across hundreds of components becomes unsustainable. Design tokens solve this by establishing a single source of truth.
The 3-Tier Token Hierarchy
- Primitive Tokens: Raw aesthetic values (e.g.
--blue-500: #3b82f6,--space-4: 16px). - Semantic Tokens: Intent-driven variables (e.g.
--color-primary-action: var(--blue-500),--card-padding: var(--space-4)). - Component Tokens: Scoped to specific UI elements (e.g.
--button-bg: var(--color-primary-action)).
Theming or dark mode then becomes a simple 1-line remapping of the semantic layer.