Design token

Design tokens are the smallest design values that make up a screen, such as colors, text sizes and margins, given names and collected in one place. For example, you name the color of the main button "primary accent" and define the actual color code only once. Then many screens can use the same name.

As design systems grew and several platforms began to share them, it became common to write the same colors and spacing separately for each screen. To reduce this problem, standardizing design values as tokens spread. More recently, there is also a trend of organizing tokens together with documentation so that AI can read the intent behind a design.

A token is usually stored as a pair of a name and a value. When you define tokens in a design tool, the file is converted into code variables or style files, and each component refers to the name instead of the value. So when you change one source token, everything that refers to it updates in the same way.

Tokens are usually split into layers. Basic tokens hold raw values such as color codes. On top of them sit tokens that carry meaning, such as an error color. Above those come tokens just for a specific part. With these steps, the meaning system stays the same even when the brand color changes.

If you bundle the colors and spacing of shared parts such as buttons, input fields and cards into tokens, many products can keep the same look. When you switch a theme, such as dark mode, you only replace the token values, so there is less to touch on each screen.

To use tokens, the team has to agree on naming rules, and the design tool and the code have to be connected so that they read the same source. Without that connection, tokens stay a promise on paper and easily drift from the real screen.

Having tokens does not make design quality better on its own. Tokens are only a tool for managing values consistently, so judging which color combinations look good is still up to people.

A common misunderstanding is to think of tokens as only a list of colors. In practice they can include spacing, fonts, shadows and even the speed of motion, and a badly built naming system can make things harder to manage.

It is like fixing standard units in a cookbook, such as "a spoonful" or "a pinch." Then anyone who cooks gets a similar taste. Once design tokens fix the reference values, every screen keeps the same look.

Knowing design tokens helps you understand why values drift when a screen made by AI is moved into a real service. Planners, designers and developers can talk using the same names, which helps cut rework.