Design Tokens

Tiffinbox's brand orange is #E8590C in the customer app, #E85A0C in the partner dashboard, and simply orange in one corner of the rider app. Which one is right? Nobody knows, because the decision was never written down in one place. Tokens fix that.

The rule

A token is a design decision with a name, stored once and used everywhere.

A token pairs a name with a value. Anything designers decide can be a token: colours, font families and sizes, font weights, spacing steps, corner radii, shadows, animation durations. The tokens live in one neutral file, and a build step turns that file into CSS variables for the web and matching values for iOS and Android. One file, every platform.

Here is a pair of Thali tokens, written in the JSON style that a W3C community group has been standardising:

Notice that the second token points at the first. Most systems stack tokens in tiers:

• Primitive tokens list the raw options: orange-500 = #E8590C. They say what values exist.
• Semantic tokens give an option a job: color-action-primary = {orange-500}. They say what a value is for.
• Component tokens (optional) tie a job to one component: button-primary-background = {color-action-primary}.

Components should use semantic or component tokens, never raw hex codes. Then a rebrand, or a dark mode, changes which primitive each semantic token points to, and not a single component has to be edited.

The shortcut

Name the purpose, not the paint. A good semantic token says what the value is for (color-text-error), not what it looks like (red). The paint can change tomorrow; the purpose stays.

Drills

Answer fast — trust the rule.

Remember

• A token is a design decision with a name, stored once and used everywhere.
• Shortcut: name the purpose, not the paint. Primitive says what exists; semantic says what it is for.
• Trap: components that use raw hex codes, which no rebrand or dark mode can reach.