Skip to content

Glossary · Web, apps and product

Design tokens

Design tokens are a brand’s design decisions—colors, typefaces, spacing, radii, shadows—stored as named values shared by design and code.

Design tokens: the details

Instead of writing a color like #FF5A1F in a hundred places, you define it once with a name and everything else references it. The term originated in Salesforce’s design system in the mid-2010s. Tokens are usually organized in layers: primitive values (the palette), semantic tokens (what each value is for: background, text, border) and sometimes component tokens.

The benefit shows when things change. A dark mode, a sub-brand or a contrast fix for accessibility becomes a change of values, not a search through the whole codebase. Tokens also carry the same identity to web, iOS and Android from a single source. A W3C community group maintains a common format for exchanging them between tools.

Design tokens in a project

Every identity and design system we deliver includes its tokens in a format the code consumes directly, so that brand and product don’t drift apart over time.

On this site

Where we apply it

All services

Glossary

Related terms

See the whole glossary

Get started

Does this come up in your project?

Tell us which system you have and what is still done by hand. We’ll tell you where we would start and whether it fits.

Before you write, see how we price a project or our solutions by department.

Fig. 07Morse keyH · E · L · L · O