Design Token

Every app and every website consists of thousands of small design decisions. What blue do the buttons have? How much space lies between two paragraphs? How rounded are the corners? A design token is such a decision, captured as a pair of name and value. Instead of entering the color code for blue in five hundred places, you write the name everywhere, for example “color-primary”. What this name actually means is defined in exactly one central place. You can think of it like a vocabulary list for the appearance of a product.

Why large products become messy without tokens

Dozens of people often work on a larger app at the same time. Without a shared list, everyone picks their own values. In the end, seven slightly different shades of blue exist, and nobody knows which one is the right one. Users don’t consciously notice this, but they perceive the product as sloppy and cheaply made.

The second reason is changeability. When a company refreshes its logo and brand color, the new color has to reach every corner. With tokens, you change a single entry, and all screens follow suit. Without tokens, this turns into a weeks-long search through the code, during which some spot is guaranteed to be forgotten.

There’s also a practical side effect: designers and developers finally talk about the same thing. Both use the name “spacing-large” instead of “24 pixels” or “about two centimeters”. Misunderstandings between the design and the finished product become noticeably rarer as a result.

From name to finished pixel

Technically, design tokens are usually a plain text file with a long list. It states, for example, that “color-primary” has the value #0057FF and “spacing-small” means eight pixels. This file is the single source of truth. A small helper program reads it and automatically generates the matching files for the website, for the iPhone app, and for the Android app. Each of these platforms needs its own format, but is guaranteed to receive the same values.

In practice, one works with several layers. The bottom layer contains only raw values with neutral names, such as “blue-500”. Above that lies a layer that gives these values meaning: “color-primary” points to “blue-500”. That sounds cumbersome, but it’s actually the real trick. You can reassign the meaning without touching the base colors.

This is exactly how the dark mode that many apps offer comes about. There are two sets of meanings: in light mode, “color-background” points to white, in dark mode to a very dark gray. The code stays unchanged, since it only ever contains the name anyway. A typical mistake, by the way, is creating tokens for individual components, such as “blue-for-the-login-button”. Names like that grow endlessly and no longer solve the problem.

Where tokens show up in everyday life

Design tokens are a fixed part of so-called design systems. These are toolkits of rules and ready-made building blocks that companies like Google, IBM, or Deutsche Bahn provide publicly. Anyone looking at Google’s Material Design will find exactly such lists of named colors and spacings there.

You also encounter them directly in tools. In the design program Figma, colors and font sizes can be set up as variables, which are then handed off to development teams. Since 2024, there has also been an official standard format so that tokens can move between different programs without being translated by hand.

A note on distinguishing the term: In AI, the term token means something entirely different. There, a token is a text fragment into which a language model breaks down sentences. This has nothing to do with design; the words are simply coincidentally the same. In job postings and product announcements from the user-interface field, the design-related meaning is almost always what’s intended.