Design tokens that make everyday changes easier

By Gyata Tabiri · Revised October 30, 2026

Shared colors and spacing are useful when the next person understands what they mean. I see design tokens as part of the communication between a visual system and the people implementing it.

Name the decision

A value such as --color-action communicates a role; --bloodwood communicates a particular brand color. Both can be useful at different levels. Keep the relationship clear so a brand update does not require guessing which values are meant to move together.

Start with recurring choices

Look for colors, spacing, type sizes, and radii that genuinely repeat. Define a small set and apply it to a representative component before expanding. A hundred variables with unclear responsibilities can be harder to maintain than a small, understandable stylesheet.

Respect local exceptions

A shared default should not prevent a component from meeting a real need. Scope an exception close to the component and explain why it exists. Changes to inherited variables can affect descendants, so inspect the resulting states instead of assuming the update is local.

Review the system through use

Try a longer label, a narrow screen, and a different content length. A token set earns its place when it helps the team make those changes consistently. The same concern appears in brand guides: a documented choice needs to work in the materials people actually produce.

For a team maintaining several pages or brands, the important question is which decisions can safely change together. A small, clearly named set of values helps make that relationship visible.

Brand and communication systems · Discuss a role or project

Reference: CSS custom properties.