Design Token.

The core of the idea is the move from values to names. Design and code no longer contain 'this green' or '#ccff00', but a name behind which the value sits. That sounds like a technical detail, but it shifts responsibility: as long as every place uses a name, changing a colour is a single adjustment instead of a search across hundreds of occurrences. Tokens cover not only colours but every recurring quantity: spacing steps, font sizes and line heights, border widths, radii, shadow levels, stacking layers and the duration and easing of transitions.

Robust token systems have three levels. The bottom level contains raw values without meaning, such as a colour scale from light to dark. The middle level assigns roles: text colour for body copy, background for raised surfaces, colour for error states. The top level describes components: background of the primary button, border of an input field in the error state. The middle level is the decisive one, because only it allows the appearance to change without touching the components; a dark mode swaps roles, not buttons. Systems without this level break at the first request for theming.

A use case: a company runs a website and a customer portal and changes its accent colour. With tokens, two values are adjusted in one file, all buttons, links, focus rings and chart colours follow automatically, and the contrast check under WCAG can be traced in one place. Without tokens, a search begins across components, email templates and PDF outputs in which some places are reliably missed, usually exactly the states you rarely see: disabled buttons, error messages, loading states. Half a day of preparation here replaces recurring days of rework.

Technically, tokens today are usually created as CSS custom properties, as theme configuration in Tailwind CSS and in parallel as variables in the design tool. A W3C Community Group is working on a JSON format for exchanging them between the two worlds; it is not finished yet, and toolchains differ in practice. To be honest about the limits: for a single website maintained by one person, a three-level hierarchy brings more administration than benefit; two dozen CSS variables are enough there. The effort pays off from the second product onwards, with several people involved, or as soon as a second appearance is added. The framework for this is a design system.