Semantic Tokens
Semantic tokens sit between global tokens (raw palette values) and component tokens (specific bindings). They translate raw values into meaning: color-primary, color-danger, color-surface. This layer of abstraction is what enables theming and rebranding. Swap what color-primary resolves to and every component that uses it changes automatically. Without semantic tokens, rebranding means finding and replacing hardcoded values across every component.
Read the full guide
Related terms
Keep exploring
Design Tokens
The atomic design values (colors, spacing, typography, shadows, motion) stored as platform-agnostic variables that every component in a design system references.
Component Library
A collection of reusable UI elements (buttons, inputs, cards, modals) built from design tokens and documented with usage guidelines. One layer of a design system, not the whole thing.