Design tokens as your DNA

Defining design tokens is not just about representing a visual identity from a digital point of view; it is a whole new way for brands to get to know themselves fully.

Before jumping straight into this vast topic, it may be helpful to remind ourselves what design tokens are because we 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.

Design tokens are a relatively new concept in the world of design and development, but they have already made a big impact on how teams approach design systems and style guides. At their core, design tokens are variables that represent design decisions, such as colours, typography, spacing, and more. They are used to create a consistent, cohesive look and feel across a product or brand, and can be easily shared and implemented across different platforms and applications.

Salesforce/Jina Anne

In 2016, Salesforce's design team, led by Jina Anne, created the concept of "lightning design tokens".These tokens were used to create a consistent design language across the Salesforce platform, and have since become a key part of the company's design system.

Jine Anne and her team recognised the importance of creating a consistent look and feel across the Salesforce platform, as it is used by a wide range of customers in various industries. They also realised that this consistency could be achieved through the use of design tokens, which allowed them to represent design decisions as variables that could be easily shared and implemented across different products and applications.

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.

The introduction of lightning design tokens has had a significant impact on the way that Salesforce approaches design and development. By using these tokens, the company has been able to create a more cohesive and consistent user experience, and has made it easier for designers and developers to work together to create and maintain a consistent design system.

In addition to improving the user experience, the use of design tokens has also had practical benefits for Salesforce. By using a centralised system for managing design decisions, the company has been able to reduce the time and effort required to make design updates and changes. This has allowed them to be more agile and responsive to the needs of their customers, and has contributed to the overall success of the company.

Overall, the use of design tokens at Salesforce has been a major success, and has helped the company to create a consistent, cohesive design system that has had a positive impact on the user experience and the efficiency of the design and development process.

Material Design

Material is another example of a design system that relies heavily on design tokens. Material is as a set of guidelines for creating digital products created by Google that is based on the concept of materiality, which refers to the physical qualities of an object, such as its texture, depth, and motion. As Material was one of the first design systems, it makes sense to consider their definition of a design system. 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.

Design tokens are an integral part of the Material Design system, and are used to ensure consistency and cohesiveness across different products and applications. For example, the Material Design color palette is made up of a set of color tokens that represent different shades and hues, and these tokens are used to define the colors for various UI elements, such as buttons, headers, and text.

Google has also embraced the use of design tokens in other areas of its business. For example, the Google Marketing Platform uses design tokens to ensure consistency across its various products and services, and the Google Design team has developed a set of design tokens for use in its own design projects.

Overall, the use of design tokens at Google has allowed the company to create a consistent and cohesive user experience across its various products and platforms, and has made it easier for designers and developers to work together to create and maintain a consistent design system.

Designing with DNA: Using Design Tokens to Build a Strong Brand Foundation

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. Just as the four nucleotide bases of DNA (adenine, cytosine, guanine, and thymine) make up the building blocks of our genetic code, design tokens can be thought of as the building blocks of a brand's design DNA: Animation, Colors, Typography, and Grid. These 4 bases are not randomly selected, they represent both the brand and the design system documentation. Just as the combination of these bases in DNA determines the traits and characteristics of an organism, the combination of design tokens determines the visual characteristics of a brand.

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 colour 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. Design Tokens 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.

But design tokens don't just support consitency they can support teams to control development of the brand allowing it to mature.

One key aspect of design tokens is their ability to be inherited and overridden. Just as traits can be passed down from one generation to the next, design tokens can be inherited from one component to another within a design system. This allows teams to maintain consistency while still allowing for flexibility and customization.

For example, let's say a company has a set of design tokens for its primary color palette. These tokens might include variables for the primary brand colour, a secondary brand colour, and a tertiary brand colour. These tokens could then be used to define the colours for various UI elements, such as buttons, headers, and text.

However, let's say the company wants to create a special campaign or event, and they want to use a different colour palette for this specific occasion. They can easily override the original colour tokens and define new ones for the campaign, while still maintaining the overall consistency of the brand's design DNA.

In summary, design tokens are a powerful tool for creating and maintaining consistent, cohesive design systems. By representing design decisions as variables, teams can easily share and implement these decisions across different platforms and applications. Just like the ACTG bases of DNA, design tokens form the building blocks of a brand's design DNA, and can be inherited and overridden as needed to maintain consistency while still allowing for flexibility and customisation.

Closing Thoughts

As the use of design tokens becomes more widespread, it's clear that they will play a central role in the future of design systems. By representing design decisions as variables that can be easily shared and implemented across different platforms and applications, design tokens make it possible for teams to create and maintain cohesive, consistent design systems that enhance the user experience and improve the efficiency of the design and development process.

Brad Frost opened the design system path with his Atomic Design approach, which breaks down design elements into smaller, reusable components, and is closely related to the use of design tokens. By building a design system with a foundation of well-defined design tokens, teams can create a set of atomic components that can be easily assembled and customised to meet the needs of different projects and contexts.

As design systems continue to evolve, it's likely that we will see even more widespread adoption of design tokens and other tools and techniques that make it easier for teams to create and maintain consistent, cohesive designs. Whether you're a designer, developer, or product manager, understanding the role that design tokens play in the creation of design systems is crucial for anyone who wants to build strong, effective brands in the digital age.

---

WQA provides supercharged digital product development for growth driven companies around the world. Working with Startups, Scale-ups and Enterprise, we design, build and scale digital products, experiences and platforms used by millions of people.

If you want to learn more about how design tokens can improve the efficiency of your design process and reduce the time and effort required to make design updates you can chat to us or email us for a conversation and assessment of your unique digital context.