Change once, spread everywhere: design tokens are the single source of truth

A design token is an intermediary layer that stores all visual decisions of the brand in the form of variables that can be referenced everywhere. When a change is needed, you update one place, and the entire system updates accordingly. This is how large organizations maintain consistency without manually controlling every touchpoint.

Why does the brand fall apart?

Most brands do not fade away due to attacks from competitors. They drift internally, through thousands of small decisions made by people who are not equipped with the right tools. Marty Neumeier calls this phenomenon "brand drift": no one intentionally destroys the brand, but the end result is still an identity system that is no longer consistent.

The issue is not a lack of guidelines. According to a Marq survey in 2021, 85% of organizations have brand guidelines, but only about 30% implement them consistently. The gap between having documentation and actually operating it is where most businesses stand.

As the team expands, when new communication channels are added, and when external partners participate in the content production process, the number of touchpoints increases but the ability to control them manually does not keep pace. This is when architecture becomes more important than will.

What is a design token really?

Tokens are not a new concept. Google uses them in Material Design 3 (the standard design system for Android and Google products). Salesforce built its entire Lightning Design System on tokens. Essentially, a token is a pair of name and value. color-brand-primary: #1A2B3C. Instead of each design file, each code page, and each document saving a specific color, all refer to a single variable name.

When you decide to change the primary brand color, you do not need to search for every file to edit. You change the value of the token, and everything using that token updates automatically. This principle applies to colors, font sizes, font weights, spacing, border radius, opacity, animation duration, and all visual parameters that can be digitized.

Consistency is not aesthetics. Consistency is a memory mechanism: distinctive assets only accumulate in customers' minds when repeated enough times and in a sufficiently similar manner.

Ehrenberg-Bass principles, How Brands Grow, Byron Sharp

The three-tier structure of the token system

A well-designed token system typically has three layers. The first layer is global tokens: this is the repository of the brand's raw values, such as the entire primary color palette with specific hex codes. The second layer is semantic tokens: assigning meaning to the values, for example. color-action-primary referring to the blue color in the global repository. The third layer is component tokens: applying semantic tokens to specific interface elements, for example, the background color of the primary button.

These three layers create controlled flexibility. You can change the entire product interface simply by adjusting the global layer, or customize for a specific market by overriding the semantic layer without touching the foundational structure.

Which touchpoints are protected?

The most practical question is not "what is a token" but "what does the token protect". The touchpoints that often go most astray are: websites and landing pages edited by many people, sales documents created by sales teams, social media templates used daily by marketing, and digital product screens built by developers based on their own understanding.

When tokens are integrated into design tools (Figma variables), into the codebase (CSS custom properties or design system), and into document templates, all these points receive the same value from the same source. Marketers do not need to remember hex color codes. Developers do not need to guess the font size of headings. The system reminds instead of the person.

Limits that tokens cannot solve

Tokens solve technical problems. But there are aspects of the brand that cannot be digitized into variables. Tone of voice. Image selection. How the service team responds to customers in difficult situations. This is the behavioral layer that Wally Olins places alongside the visual layer in defining a brand: Product, Environment, Communication, Behaviour.

Tokens are most powerful when placed within a fully operational system: with a strategy clearly defining what position the brand wants to occupy in the customer's mind, guidelines for non-digital aspects, and someone responsible for updates as the brand evolves. Technique cannot replace thinking, but the right technique frees thinking from the need to manually control every day.

The biggest enemy of a brand is not the competition. It is "internal drift": thousands of small decisions made by people who have not been taught brand logic.

Marty Neumeier, The Brand Gap

Where do we start practically?

Not every business needs to implement everything fully right away. However, there is a threshold after which continuing to use static files and manual control will be more costly than investing in the right structure. This threshold typically appears when the team exceeds 5 to 10 people creating brand content, or when the number of channels and touchpoints begins to exceed what one person can remember.

A practical starting point is a "system seed": defining the brand color palette as variables in Figma and CSS, establishing a type scale with semantic names instead of pure pixel sizes, and creating a core set of shared components. These three elements do not solve all problems, but they create a foundation for everything above to be consistent.