What is a design token?
A design token is a name-value pair that stores a single design decision in a platform-agnostic format. Instead of hardcoding a specific color value like #0066CC wherever a primary blue is needed, a design token named color.primary.blue stores the value once and is referenced by that name throughout the codebase and design files. When the color needs to change, updating the token updates every instance simultaneously. Tokens can represent colors, typography values, spacing units, border radii, shadow definitions, animation durations, and any other repeating design decision.
How do design tokens support design systems?
Design tokens are the atomic foundation of design systems. They encode design decisions at the most granular level, enabling consistency across an entire product by ensuring that the same named value is used every time a decision is applied. They also enable theming: by changing token values rather than updating individual components, teams can implement dark mode, brand variations, white-label products, or accessibility-focused high-contrast modes without touching component-level code. This separation of design values from component implementations is what makes large design systems maintainable at scale.
What is the difference between global and semantic tokens?
Global tokens, sometimes called primitive or reference tokens, store raw values without communicating their intended use. A global token named blue-600 stores a specific blue hex value. Semantic tokens, sometimes called alias or decision tokens, store references to global tokens and communicate the intended use of that value. A semantic token named color.action.primary references blue-600 but communicates that this is the color for primary actions. Using semantic tokens throughout a product means that if the primary action color changes from blue to green, only the semantic token reference needs updating, not every individual component that uses it.