Design Token
A named, reusable variable for a design decision — a color, spacing, or type value — that keeps design and code in sync from one source.
A design token stores a single design decision as a named variable — color.primary, space.4, radius.lg — rather than a hard-coded value scattered across files. Because both the design tool and the codebase reference the same token, a change in one place updates everywhere consistently.
Tokens are the atoms of a design system: components are built from them, and theming (light/dark, white-label brands) becomes a matter of swapping token values rather than rewriting components. They are what makes large-scale visual consistency maintainable instead of heroic.
Learn more
Related terms
Design SystemA single source of truth for a product's UI — reusable components, tokens, patterns, and guidelines that keep design consistent and fast.Component LibraryA collection of reusable, pre-built UI elements — buttons, inputs, cards, modals — shared across a product to speed up and standardize design.Style GuideA reference document defining a brand or product's visual rules — colors, typography, logo usage, spacing, and tone — for consistent application.