Design Tokens
Tokens are the primitive layer that makes a design system a system instead of a collection. Change a token and every component that references it updates automatically. Tokens operate in three levels: global tokens define raw values (color-blue-500), semantic tokens assign meaning (color-primary), and component tokens bind meanings to specific UI elements (button-bg). This layered approach means you can rebrand by changing semantic tokens without touching a single component definition.
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.
Typography Scale
A system of proportional text sizes that creates consistent visual order across headings, body text, captions, and labels. Usually based on a mathematical ratio.