Insights and news

Design tokens explained: a unified language that bridges design and code

Adriaan Steyn
Design

In the world of digital design, collaboration between design and development teams is the secret sauce to creating cohesive, visually appealing, and functional digital experiences. Speaking a unique language – via a design token system - is the bridge between the intricate world of code and the artistic domain of design.

What are design tokens?

Design tokens translate complex visions into cohesive, consistent, and user-friendly interfaces. At their core, design tokens are bite-sized pieces of styling information that are tech agnostic. They act as the building blocks for harmonious digital architectures, encompassing essential design elements such as colours, typography, sizes and spacing.

Design tokens are the key to a scalable, maintainable and consistent digital environment.

Think of it like this: LEGO bricks need a manual to transform into awe-inspiring structures. Digital designs need design tokens.

Design tokens are like a LEGO manual for building digital products like websites and apps.

Centralise design decisions with design tokens

One of the key advantages of design tokens is their ability to centralise design decisions. Imagine an organisation suddenly wants to change their brand's primary colour. With design tokens:

  • colour change is effortless

  • every user experiences the updated colour palette in their application.

This centralised approach guarantees uniformity across diverse platforms and devices, enhancing the user experience while simplifying the implementation process for developers.

Design tokens embody the 'design once, apply everywhere'' philosophy to save time and effort.

When design tokens are used, changes to design values can be made without affecting the code that uses them.

Gains through better collaboration

Design tokens improve collaboration between designers and developers. By creating a common language, tokens reduce errors and improve:

  • workflow speed

  • quality

  • consistency.

Tokens are technology agnostic and can be integrated into many of the popular development tools and frameworks.

Practical applications for design tokens

Salesforce and Atlassian have made their design systems publicly available. This enables them, for example, to ensure all the apps in their marketplaces behave in a consistent manner. But by using tokens, developers still have the flexibility to personalise the apps with their own colours.

Similarly, users of Google's open-source design system, Material 3, can use design tokens to easily create customised themes that leverage the breadth of the design system.

We see design tokens as the key to improving our workflow efficiency. Their use within our comprehensive design system means that our teams can create innovative, visually stunning, and user-centric applications much more quickly.

Tokens played an essential role in our recent rollout of 11 brand websites for Treasury Wine Estates. We used a set of common components to build the structure of each site. The tokens enabled us to align each site with its own unique brand style guide. Everything from colours to typography to imagery, line spacing and margins.

Design tokens in action at Treasury Wine Estates.

Are design tokens right for your business?

Design tokens can help if:

  • you plan to update your product's design or you're building a new product

  • your design system is applied across more than one product or platform

  • you want to easily maintain or update themes in the future.

Tokens may be less helpful if:

  • your existing product uses hard-coded values that will not change in the next 1-2 years

  • your product does not have a design system.

Contact us to find out whether a design system could benefit your business.