What tokens actually are (and are not)
The inconsistency tax
Your product has fourteen shades of grey and three slightly different blues. Every new screen takes longer because design and development argue about which one is right.
A design token is just a named value: a color, a font size, a spacing unit, a border radius. The point is that every component references the token, not a hardcoded value. Change the token, and everything using it updates.
That is the entire idea. No Figma plugin required. No design-system RFC. A handful of CSS variables or a Tailwind theme extension is enough to get the real benefit.
Three layers of tokens
Most teams need only the first two layers. The third helps once you have a component library.
Primitive tokens
Raw values: every colour, size, and spacing step you allow.
Semantic tokens
What a value is for: action, danger, surface, text. Components use these.
Component tokens
Optional overrides for one component, pointing at semantic tokens.
Is your product UI getting inconsistent?
Get a free consultationWhen to set them up
Before you build any component. That is the short answer. The longer answer is that tokens set up before the first UI work is done tend to stick. Tokens added later tend to be ignored, because the components are already using hardcoded values and retrofitting them is unpleasant enough that it keeps getting deferred.
On a new project, the first PR that adds Tailwind or a CSS framework should also lock in the spacing scale, the four or five semantic colors, and the two or three font sizes that will carry the product.
Design tokens now have a standard format
In October 2025 the Design Tokens Community Group published the first stable version of its design token format (2025.10), backed by companies including Adobe, Figma, Google, Microsoft, and Shopify. Each token has a $value and a $type, and tokens can reference each other.
For small teams this means tokens can move between design tools and code without custom converters. Note that it is a community group specification, not a formal W3C standard.
Set up tokens in an afternoon
Audit what you have
Collect every colour, font size, and spacing value in use. Expect duplicates.
Pick a small scale
Five or six neutrals, one brand colour ramp, a spacing scale, three or four font sizes.
Name by purpose
Add semantic names such as action, danger, and surface on top of the raw values.
Wire them in
CSS variables or your Tailwind theme, so components use tokens, never raw hex codes.
Block new raw values
A lint rule or code review check stops hard-coded values creeping back.
Frequently Asked Questions
Written by
Sachin Patel
Design & Engineering
