Design Token

A design token is a named value that stores a single design decision, such as a specific color, a spacing size, a font family, or a corner radius, as a piece of data rather than a hardcoded value scattered through a codebase. Instead of writing a raw color code like a hex value directly into a button, a team defines a token such as color-primary and points the button at it. The token becomes the single source of truth for that decision, and every element that uses it stays consistent. When the decision changes, the team updates the token once and the change flows everywhere the token is referenced.

Mechanically, tokens are usually stored in a structured, platform-neutral format, often as JSON files organized by category. Tooling then translates that central definition into the specific formats each platform needs: CSS custom properties for the web, resource values for Android, or color assets for iOS. This translation step is what makes tokens powerful across a company that ships on multiple platforms, because a single defined value can generate consistent output for every product. Tokens are often layered as well. A base or primitive layer holds raw values like a specific blue, and a semantic layer gives those values meaning, so a token named background-surface might reference the raw blue-50. This separation lets teams change what a color means without touching every raw value.

The term gained currency around 2014, when designers at Salesforce described their approach to storing named design values as data that could feed multiple platforms. The word token borrows the ordinary sense of a small symbol that stands in for something larger, which fits precisely: a short, memorable name stands in for a concrete design choice. The idea built on older programming practices of avoiding magic numbers by naming constants, applied specifically to visual design decisions.

For a business, design tokens matter because they make a brand consistent and changeable at scale. A rebrand or a color adjustment that once required hunting through hundreds of files becomes a controlled edit to a small set of definitions. Tokens also make features like theming and dark mode practical, since a team can define alternate token sets and swap them cleanly. They speed up work by giving designers and developers a shared vocabulary, reducing the guesswork and back-and-forth that comes from ambiguous specifications.

Common mistakes include naming tokens after their literal appearance instead of their purpose. A token called color-blue becomes a problem the day the brand color turns green, whereas color-primary survives the change. Teams also sometimes create too many tokens too early, producing a sprawling system nobody can remember, or too few, which limits flexibility. Good token systems grow deliberately and use clear, predictable naming. Design tokens sit at the foundation of modern design systems and connect closely to component libraries, atomic design methods, and consistent brand identity, because they encode the small, repeated decisions that everything else is built upon.