Design Token

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.

In practice

A company rebrands from blue to violet. Without tokens, that's a months-long hunt through hardcoded hex values across two apps and a marketing site. With tokens, color.primary changes once and propagates everywhere the token is referenced — the rebrand ships in days, and dark mode later becomes a second set of token values rather than a parallel codebase. Same story for spacing and type: one decision, one variable, every surface consistent.