# Design tokens

> Design tokens name the roles of your visual identity — background, brand colour, typeface. Why without them a machine can only guess your brand.

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](https://btlabs.dev/en/posts/machine-readable-brand-design-tokens).

- [Machine Readability](https://btlabs.dev/en/glossary?tag=maschinenlesbarkeit)
- [Structured Data](https://btlabs.dev/en/glossary?tag=strukturierte-daten)
- [Web Design](https://btlabs.dev/en/glossary?tag=webdesign)

## Related terms

- [LLMs.txt](https://btlabs.dev/en/glossary/llms-txt)
- [Structured data](https://btlabs.dev/en/glossary/structured-data)

## 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.

---
Source: https://btlabs.dev/en/glossary/design-tokens
Languages: [de](https://btlabs.dev/llms/de/glossary/design-tokens) · [it](https://btlabs.dev/llms/it/glossary/design-token)
See also: [llms.txt](https://btlabs.dev/llms.txt) · [ai.txt (Policy)](https://btlabs.dev/ai.txt) · [identity.json](https://btlabs.dev/identity.json)