Design Token

You might say

Organize the main color, spacing, and radius as design tokens instead of repeating values in every component.

A design token is a named variable that centrally stores and reuses design values such as color, spacing, and typography.A primary button color can be named color.brand.primary and a common gap space.16; components reference those names rather than each hard-coding a color or pixel value. Tokens help a shared rule stay consistent across a site, component library, or other interfaces when themes or brands change. They are not a synonym for every CSS variable and do not replace the design decision itself.

Know first

Space Border Radius

Design Tokens

How one brand color flows from a token to several components

tokens.cssshared source

12 --color-action: #374151;

Destination

SelectedCoastal route

Three components read one named value.

How design tokens preserve consistency

Name stable design decisions first: Tokens should express a role or scale such as primary brand color, danger color, card radius, or spacing step. A name explains why a value exists better than one hex color or pixel count.

Components reference one source: Buttons, links, and selected states read a shared token, so theme or brand changes can update centrally. For a one-off exception, first decide whether it is truly a new reusable rule.

You can say this to an AI Agent

Organize repeatedly used primary-brand color, error color, spacing, and radius values as semantic design tokens, then have buttons, inputs, and cards reference them. Do not create tokens for every one-off temporary value. Afterward, change one brand-color token and check that related components and dark theme update together.

Learn next

1Component→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Primary buttons on three pages all need to change from blue to a new brand color. Which implementation is easier to maintain?

A. Have buttons reference one semantic primary-brand token, change that token's value once, and check every buttonB. Manually find and replace blue hex values in every componentC. Create a different color token for every button used once