Design Token

A design token is the atomic unit of a design system. Instead of embedding a raw hex, pixel, or font value inside a component, you reach for a token: `surface-raised`, `space-4`, `font-body-lg`, `radius-md`. The token resolves to whatever value the active theme defines, and a whole product can rebrand, go dark, or ship on a new platform by swapping the resolved values, not by editing components. Tokens are roles, not colors. `accent-primary` is a token. `purple-500` is not. If a token's name describes the raw value, it has not actually decoupled design from implementation, which is the entire point of tokens in the first place. Shipping design systems (Material 3, Radix, Polaris, Carbon, Fluent) are built on layered token tiers: surface, content, accent, state, semantic, plus parallel tiers for typography, spacing, and motion. Each tier holds role-based tokens that components reference by name. Dark mode, high-contrast mode, and white-label theming become token value swaps instead of redesigns. The hard part is discipline. If designers can reach past the tokens to raw values, the system collapses into decoration. Token systems earn their keep only when the rule is strict: components consume tokens, nothing else.