Design Tokens
Named design values that let every component use the same colors, spacing, type, and themes without copying raw numbers.
What it is
Design tokens give names to reusable design decisions: colors, spacing, type sizes, radii, shadows, and motion values. The term comes from Salesforce's Lightning Design System, where Jina Anne and Jon Levine needed one source of truth across web, iOS, and Android. Instead of scattering #6d5efc through components, code asks for a semantic token such as color.action.primary, which can resolve to a CSS custom property, a Figma variable, or a native platform value.
Reach for tokens when several components or platforms must speak the same visual language. A useful stack separates base values such as blue.600 from semantic roles such as color.text.link and, only when necessary, component tokens such as button.background.hover. Style Dictionary can transform one token source into platform-specific outputs.
The trap is making a token for every raw value without encoding intent. Names like gray2 and spacing17 force callers to remember appearances and make themes painful. Prefer stable role names, preserve references between semantic and base tokens, and treat renaming or removing a published token as an API change.
Ask AI for it
Create a Style Dictionary token pipeline with base, semantic, and component layers. Define color, spacing, typography, radius, shadow, and motion tokens in JSON, map semantic roles such as color.text.muted to base values, and generate typed TypeScript plus CSS custom properties. Add light and dark values under [data-theme="dark"], consume them with var(), and reject unresolved references or duplicate token names in CI.