A named, technology-agnostic variable that stores a single design decision — such as a color value, spacing unit, or type size. Tokens form the connective tissue of a design system, ensuring visual changes propagate consistently across platforms and codebases without requiring manual updates to every component.
Common contexts
- Implementing dark mode by swapping a single token set rather than updating hundreds of hardcoded hex values
- Syncing Figma variables to a React codebase so the same source-of-truth controls both design and production
- Rebranding a product where color and typography changes must propagate across iOS, Android, and web simultaneously
Use when
When a product ships across multiple platforms or themes, or when the design system needs to support brand changes without touching every component. Start with color and spacing tokens as the highest-leverage entries.
Avoid when
Don't build a token architecture before you have stable, recurring design decisions — over-tokenizing an unstable system creates maintenance debt faster than it solves consistency problems.
Tokens only deliver their promise when designers and engineers share the same token names — a Figma variable named 'Primary/500' that maps to a CSS variable named '--button-blue' is not a token system, it's two parallel systems with extra steps.
Real-world examples
- Salesforce pioneered the use of design tokens in their Lightning Design System, storing values for color, spacing, and typography as named variables synced across web, iOS, and Android.
- Figma's own design system uses tokens to allow theme switching between light and dark modes, with token values mapped to semantic names like 'color.background.default'.
- Adobe's Spectrum design system uses design tokens extensively to ensure visual consistency across Creative Cloud applications on different platforms and in different color themes.