Semantic Tokens
Design tokens that assign meaning to raw values. Instead of referencing color-blue-500 directly, components reference color-primary, which resolves to the appropriate raw value.
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.
Learn more in our full guide: Read the article
Related Terms
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.