Design tokens as your DNA

If there is one thing I love about design systems, it is that they question the foundation of a brand. Building a design system forces you and your team to rationalize and ask the right questions: when our primary color should be applied? How should our icons be used? What do our fonts represent to us?

So, when defining design tokens, you know it is about expressing your brand’s DNA deep down. I have often seen communication and marketing teams face their brand, trying to define consistency rules so their visual identity makes more sense, especially for digital products. Design tokens not only represent a visual identity from a digital point of view, but it is also a way for brands to get to know themselves fully.

Design tokens definition

Before jumping straight into this vast topic, it may be helpful to remind ourselves what design tokens are because I know it’s not an easy topic.
So, let’s go back to the basics and look at some common definitions of Design Tokens, so we can all be on the same page.

Salesforce/Jina Anne

Design tokens were created by Salesforce’s design system team and more specifically with Jina Anne when she used to work there. I guess we could say Jina is like the mother of design tokens, so obviously, we couldn’t skip Salesforce’s definition:

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Jina also clarified on Twitter that design tokens should be considered as a methodology:

Design Tokens are a methodology. IMHO, saying “design tokens are just variables” is like saying “responsive design is just media queries”. It’s a technology-agnostic architecture and process for scaling design across multiple platforms and devices, including native, and more.

Material Design

As Material is one of the first design systems, it makes sense to consider their definition of design systems. It’s also interesting to see that they define design tokens more as design decisions:

Design tokens represent the small, repeated design decisions that make up a design system’s visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.

zeroheight

Finally, we, at zeroheight, like to define design tokens this way:

Let’s say a brand has a Primary Pink color. Designers and developers should refer to this color by the same name and identity, regardless of platform (design, web, mobile etc). If the color changes in design, it should also change on all development platforms automatically (and vice versa).

Design tokens enable this behavior by creating an abstract identity and centralizing the source of truth for this color. Because they help to establish a source of truth, they are often found in design systems. They can be used for colors, text styles, spacings, animation values etc.

ACTG bases of brand’s DNA

Design tokens can be about many things when you need to define what your brand foundations look like: colors, shadows, spacing, radius, borders, fonts… You can’t define a brand only by its logo anymore; it is so much more. Today, defining a brand’s personality, positioning, or differentiation means working on its experience.

Still, there are some recurrent patterns when it comes to specifying design tokens for a brand. According to our How We Document survey, we can observe 4 bases defining a brand’s DNA (the famous ACTG nucleotides, we could say): Animation, Colors, Typography, and Grid. These 4 bases are not randomly selected, they represent both the brand and the design system documentation. Indeed, we can see in our report a clear relationship between which design tokens are used and what a design system documentation includes. It is interesting to notice that both of these numbers are very close when we compare them. Could it be possible that these are the primary design tokens we focus on because it is our DNA’s foundation to our brand?

In one of our last blogpost about The Post Design System World, we say that today, a brand is more than its UI. But for a brand to break free from its UI, it must first succeed in industrializing it. That is why design systems are relevant today, even more with design tokens, so that brands can be fully dedicated to their experience. The question is, what happens next after automating a brand’s DNA?

Inheritance comes from your brand’s DNA

Automating a brand’s DNA is one way to ensure all the projects will inherit from this automation. It will help your brand to be both consistent and mature through time.

According to Forbes, consistent brand presentation across all platforms increases revenue by up to 23%.

“Branding is more than just a logo design. Every piece of collateral – from social media channels to website designs to product packaging – should maintain a similar color scheme, tone, overall aesthetic, and communicate a similar message that fits your brand identity and core values.”

That’s why design tokens are the perfect fit for this consistency need.
If we look at our survey, mature design system documentation has multiple hallmarks. One of these key numbers tells that 85% of mature design systems documentation use design tokens (compared to 59% as the average). So, working on your design tokens is one great way to upgrade your design system and increasing its maturity. Just as DNA passes on knowledge to future generations, your design tokens are also a way to pass on best practices, speak a common language with your teams and, above all, ensure that your brand’s DNA is passed on from one project to the next.

Building a design system is difficult, and design tokens are probably one the most difficult parts. I often say that design systems are not so much about tools, they are about people; design systems are made by humans, for humans.

As you start working on your design tokens, it implies substantial team involvement, especially between designers and developers. You could say this is how shit happens, but I prefer to say this is where the magic happens.
Start by naming your design tokens together; this will be a great way to force your teams to collaborate, speak the same language and share a common vision. Of course, it won’t be easy at first, but you will grow from it, and so does your design system.

Detach DNA ⌥⌘B

Today, design tokens are still primarily done by 71% in design tools and 55% in code. I believe we need to have these design tokens the closest to our habits and tools to ensure we define and apply them correctly. Just as our DNA is part of our cells, we need to have design tokens fully integrated into our tools. Also, I wouldn’t be surprised to see design tools like Figma with native design tokens solutions emerging. Besides, I don’t think I’m the only one who would have expected it as a significant feature release at 2022 Config.
But maybe we are looking in the wrong direction?
Could it be a different future for design tokens?

Looking at our How We Document report, we notice a growing number, with 18% of specific token management platforms (like zeroheight or Theo) used by people.
If design tokens grow and become more complex, having dedicated tools for design tokens could make sense. Moreover, I think we made a mistake with design systems by naming them “design” systems. It made people think it was a design thing for designers only, whereas it should be a thing for a whole organization. Let’s not repeat the same mistakes by letting design tokens be in design hands only. Designers or design tools shouldn’t own it; it should be a design and engineer shared space. Maybe design tools should focus on design stuff only and be synced with dedicated design tokens solutions?
Could this be the beginning of a new way of working for design systems?

Closing thoughts

Brad Frost opened the design system path with his Atomic Design approach. At this time, we thought atoms were the most undivided part of our system, except it’s not. Design tokens are what define the very beginning of design systems. So, if we keep with this atomic metaphor, design tokens should probably be electrons.
But I like to think it’s much deeper than that, actually. Design tokens are not at the atomic stage; they’re what truly define a brand: it is pure DNA.
Design tokens determine your brand’s appearance, pass on its knowledge and inheritance to future generations, and are the key to the design system’s evolution. Do not underestimate it.

The future of design systems lies in design tokens, so you better have your brand’s DNA ready before jumping into this world.