Design tokens
Design tokens are the named building blocks of a visual identity: colour roles such as background or brand colour and type roles such as heading and body. They make a design readable by machines.
Design tokens are the named building blocks of a visual identity. Instead of a colour value sitting somewhere in a stylesheet, it is recorded which role that value plays: background, foreground, brand colour, heading typeface.
The difference matters for machines. A person looking at a website sees immediately which green carries the brand. A program sees only a list of values without meaning — unless the roles are explicitly named.
There is a format for publishing them: the draft of the Design Tokens Community Group (DTCG). In it, a colour is not a hex string but an object with colour space and components. An agent can read such a file without interpreting the stylesheet.
For perspective: no search service scores these files today. Their value is that a system asked to represent a business has a reliable source for colour and type — instead of guessing.
What this looks like in practice — and what a probe across 18 design-system domains found — is in Why an AI cannot represent your brand.
Related terms
Frequently asked questions.
What are design tokens?
Design tokens are the named building blocks of a visual identity: colour roles such as background, foreground or brand colour, plus type roles such as heading and body. Instead of a colour value buried somewhere in a stylesheet, it states which ROLE that value plays — and that is exactly what a machine can read.
Does a design-token file improve rankings today?
No. No search engine scores it, and we know of no service that fetches it today. The benefit is a bet on the next step: once assistants start not merely naming businesses but representing them, they will need a source for colour and type. Whoever has one then gets represented correctly rather than guessed.
How do I tell whether my brand is machine-readable?
Open your stylesheet and ask whether a stranger could tell from it which colour is your brand colour — not which value sits where, but which role it plays. If your brand colour is called --colour-3 in the code, or sits unnamed beside two identical greys, a machine cannot find it.