Tokens turn design decisions into named, distributable values

What it is

A swatch, a type size, or a radius on the canvas is only an author’s choice until it can leave the file. Give it a stable name and emit it as a key–value pair that other surfaces can read, and the choice becomes a named distributable value. A design token is not a tidier palette; it is the unit of ship — a decision packaged so CSS, iOS, and Android can subscribe to the same address.

The question is how a decision keeps its identity once it leaves the design tool, not how names are layered, and not how themes swap. A local style that is never exported is still not a token.

Why it happens

Reuse across surfaces needs an address, not visual resemblance. A color chip in a design file has no address: an engineer copies a hex from a spec, and the copy is already forked from the source. The name is the address; the token file is the feed. The same color.bg.canvas can generate a CSS custom property, a Swift constant, and a Compose color. Later edits hit the token source, not three handwritten copies.

The shipped unit is name + value + type, not the swatch. Type keeps spacing from being used as a color; the name lets call sites ignore the raw number. Without a name, the decision cannot enter the pipeline and must be synced by hand — and hand sync misses items on the second edit.

Where it stops holding

A single-client internal demo that never exports gains little from distribution, though names may still help search inside the file. Illustration, photography, and one-off campaign pages that are deliberately off-pipeline should not be frozen into the system. OS-owned colors (window chrome that follows the platform) should not be disguised as product tokens — the consumer is the system, not your token file. Figma variables that never land in a build artifact still do not exist for engineering.

Applying it

• Promote only decisions that must be reused across files or platforms into variables, and export them as a build-readable token source (JSON or equivalent).
• Generate Web, iOS, and Android artifacts from that one source; do not keep a parallel palette inside components.
• Change a value in the token source and confirm the same name updates on all three platforms without touching component files.
• How to check: pick a high-traffic name, search the repo for its references, then change its value and regenerate. If the name cannot be found, or only one platform follows, it is not yet a shippable unit.

Related

• Same group: R1.01.2 Semantic tokens and primitive tokens need separate layers · R1.01.3 Using raw values directly bypasses the system · R1.01.4 Theme switching retargets the semantic layer, not raw values
• Nearby: R1.09 Token layers and semantic naming · R1.13 Versioning and migration cost
• Search terms: named distributable value · design token · token pipeline