process & strategy
Design tokens
What are design tokens?
Design tokens are named values for the small decisions a design repeats - colours, spacing, corner radius, type sizes - stored once and referenced everywhere. Change the token and everything built from it changes at once.
Also known as: design variables
Prefer to watch?
Watch the recap 0:37
The demo
Three controls, one card. Each control changes a single token - and watch how much of the card moves with it, because every part just points at the token.
The card is using the site's default tokens. Change one and the whole card follows.
What this demo shows (text version)
A mock product card - image, tag, title, text and an "add to basket" button - is styled entirely from three design tokens: an accent colour, a corner radius and a spacing value. Controls let you change each one.
Changing the accent recolours the tag, the button and the image tint together. Changing the radius rounds every corner at once. Changing the spacing loosens or tightens the whole card's padding and gaps. Nothing in the card holds its own copy of these values; each part references the shared token, so a single change ripples everywhere - which is exactly how a design system keeps a hundred screens consistent, and how this site itself is themed.
Design tokens are named values for the small decisions a design repeats - colours, spacing, corner radius, type sizes - stored once and referenced everywhere. Point everything at the token rather than hard-coding the value, and one change restyles the whole product at once instead of a hunt-and-replace across files.
You changed one value and the whole card restyled - accent, corners and density all moving together, because each is a token the card merely points to. That single source of truth is the point: design decisions live in one place, not copied into a hundred. This very site is themed exactly this way.
Tokens are only worth it if everything actually uses them. The failure mode is the stray hard-coded value - one button with a hand-typed colour that doesn't move when the token does - and now you have drift, the slow divergence a design system exists to prevent. A token nobody references is just a comment.
My rule: name tokens by intent, not by appearance. "--accent" survives a rebrand; "--green" becomes a lie the day the brand turns blue. The whole value is that one change ripples everywhere - so name them for the job they do, and the rename never has to happen.