Design tokens are a project's core values stored as data rather than graphics: colours, type sizes, spacing, shadows, animation timing – a single source of truth shared by designers and developers.
Instead of "the button green is roughly like in the mock-up", a token states precisely: color.action.primary = #00624C. The same tokens feed Figma mock-ups and application code, so changing a value in one place updates everything consistently.
Tokens are the lowest layer of a design system. A typical structure: base tokens (raw palette values), semantic tokens (e.g. background.error) and component tokens. Semantics make theming possible – e.g. dark mode – without redesigning screens.
Why it matters: tokens eliminate the drift in which, after a year, a product has fourteen shades of grey and nobody knows which one is "the right one".