Design tokens demystified

A beginner’s guide to understanding design tokens: types, benefits, and applications.

T.T.TRINKUSH
Bootcamp
Published in
8 min readAug 7, 2024

Hey there, designers and curious cats! Ever wondered how the pros keep their designs looking sharp across a bazillion screens without losing their minds? Well, buckle up, because we’re about to dive into the world of design tokens.

Now, I know what you’re thinking: “Oh great, another tech buzzword to make me feel inadequate.” But fear not! I promise to explain this in a way that won’t require a PhD in design or make you want to hurl your laptop out the window.

If you’ve ever Googled “design tokens,” you’ve probably been hit with a tsunami of fancy-schmancy definitions. “Single source of truth!” they proclaim. “Tools for storing design choices!” they declare. “Platform agnostic!” they… wait, what does that even mean? 🤔
Don’t worry, fellow design adventurers. I’m here to break it down for you without all the jargon that makes your brain feel like it’s been put through a blender.

Time to dive into the shallow end of the pool and talk about something as fundamental to UI design as coffee is to Monday mornings.

Component breakdown

Let’s break it down with a real-world example. You know how Airbnb’s website always looks so put-together like it just stepped out of a digital spa? Well, let’s dissect one of their UI components. The setup is illustrated in the image below.

Picture this: we’re opening up a UI component like it’s a fancy gift box. What do we find inside? All sorts of goodies! We’ve got colours, borders, curvy corners (that’s a border radius for you fancy folks), shadows, different text styles etc.

UI breakdown of Airbnb’s booking component.

Each of these bits has a specific raw value attached to them. For instance, The border? It’s as thin as a piece of paper at 1px. The border colour? A cool grey called #DDDDDD. The corners are nice and round at 12px. The “Reserve” button? It’s screaming for attention in bright #E71D54. And the card background? It’s keeping it simple in white #FFFFFF.

From these details, we can see that these raw values are essential for creating any component.

These raw values serve as the foundation for design tokens. Design tokens encapsulate these values and assign them meaningful names, making them more manageable and reusable across the design system.

Any entity that holds a raw UI value and an assigned name can be considered a design token.

Why bother with tokens?

Now, you might be thinking, “Can’t I just use the actual colour codes? Why complicate things?” Oh, my sweet summer child. Let me paint you a picture:

Say, you have meticulously crafted your product’s design, using the oh-so-trendy #E71D54 for your primary button. It’s everywhere, like glitter after a craft project gone wild. 🎨✨

But wait! Here come the stakeholders, armed with their secret weapon: last-minute changes. Their target? That beautiful button colour you’ve come to know and love. “Let’s switch it to #E11D53,” they declare, probably while sipping their evil-genius lattes.

Designer and stakeholder.

Now you’re faced with a designer’s nightmare. Updating the primary button across multiple screens with a new colour. And don’t forget about your poor developer friends, who have to hunt down every instance of that colour in the code as if they’re searching for the last cookie in the jar.

Tokens to the rescue

Here’s how our hero comes to the rescue:

  • Create a token (we’ll call it “colour.button.primary” for simplicity).
  • Assign it the original colour (#E71D54).
  • Use this token wherever you need that primary button colour.

Now, when stakeholders come back with a new colour change (and they will), simply update the token’s value with the new colour. Boom! 💥 It’s like magic — the new colour will automatically update everywhere the token is used.

The best part? This works for both designers and developers. No more endless search-and-replace missions.

Different types of tokens?

Great! Now that we’ve covered the basics of what a token is, let’s dive into the 3 different types of tokens. Understanding these types will help you use tokens more effectively in your design and development process.

For now, we’re putting on our colour goggles and focusing solely on colour tokens. Don’t worry, though — once you’ve got the hang of colour tokens, you’ll find that the same principles apply to other design elements like typography, shadows, borders etc.

1. Global tokens: The OG of tokens

Picture this: You’re the mastermind behind a shiny new design system, and you’ve just settled on the following red colour palette that would make even a stop sign jealous. 🙊

Raw values of the red colour palette.

As discussed earlier, we’ll create the first set of tokens from these raw values, naming them using a standard industry convention. These tokens are called global tokens.

Global tokens — created from the raw values of the Red colour palette

The first set of tokens we create from the raw values are global tokens. These tokens are also referred to as primitive, core, or base tokens.

A global colour token is created from the raw value.

These global tokens are the building blocks of the design system. We use global tokens as a reference to create new sets of tokens.

2. Semantic tokens: The context crusaders

Yay! We have created global tokens, which help achieve a basic level of consistency. Many companies stop here (like we at Internshala did when we started building our design system 🫣). However, global tokens come with a fair amount of ambiguity.

Ambiguity? Oh, you bet! Global tokens lack context and don’t always make it clear where each token should be used. For instance, if we don’t specify how and where RED500 should be used, designers might end up playing a colourful game of “Guess Who.” One designer might pick RED500 for alert text, while another might opt for RED600, creating a mishmash of colours for the same purpose. These seemingly small inconsistencies can become significant on a large scale.

To tackle this issue, we introduce a new set of tokens known as semantic tokens or alias tokens. These tokens come with names that reveal their intended use, putting an end to the guesswork and offering clear guidance on how they should be applied.

For example, if we choose RED600 as the text colour for an alert box, we create a new semantic token called colour.text.alertbox. The text.alertbox part provides context, indicating that this token is specifically for use in the alert box.

Semantic or Alias tokens.

👉 Important: To create semantic tokens, we do not use the raw values but instead refer to the global tokens. Creating a semantic token directly from the raw value is not a correct approach and undermines the purpose of tokenization.

Additionally, we can create multiple semantic tokens from a single global token.

3. Component-specific token: The specialist squad

As the name suggests, component-specific tokens are created for use within a particular component.

Let’s dive into an example to clarify this: Picture a brand with various UI cards, such as Blog, Pricing, and Testimonial cards. Initially, these cards all use the semantic token, say, colour.ui.card for their background colour. This setup is shown in the image below.

3 UI Cards — Blog, Pricing, and Testimonial.

Now, let’s say the brand wants to change the background colour of the Pricing card to GREY900. Here’s where the problem arises: if we update the colour.ui.card token to GREY900, it will change the background colour for all cards using this token, not just the Pricing card. This means the Blog and Testimonial cards would also switch to GREY900, which isn’t what we want.

To tackle this, the brand needs a solution that allows them to change the Pricing card’s background colour without affecting the other cards.

Enter component-specific tokens. By creating a new token specifically for the Pricing card, say, colour.pricing.ui.card and assigning it the GREY900 value, we achieve the desired result.

Component–specific token in use.

The Pricing card now has its unique background colour, while the Blog and Testimonial cards stick with the original colour.ui.card token, keeping their look unchanged.

This approach offers more flexibility in design, allowing for precise customization of individual components without altering the entire system.

However, introducing component-specific tokens also adds a layer of complexity. As the number of these tokens grows, managing and maintaining the system becomes more challenging. This added complexity requires careful consideration and organization to ensure that the benefits of customization don’t outweigh the costs of increased system intricacy.

Naming design tokens

As we conclude this discussion on design tokens, we arrive at the question of naming conventions. It’s important to note that there’s no universally correct approach to naming tokens. Each company develops its own strategy, tailored to facilitate clear communication between designers and engineers.

The key to an effective naming convention is scalability. It should be able to accommodate future expansions and iterations of the design system without becoming unwieldy. When developing your naming structure, consider your project’s long-term goals and potential growth. Aim for a system that can adapt to new requirements while maintaining clarity and consistency.

For those interested in diving deeper into token naming strategies, I recommend an insightful article on Damato.design.

Tokens Studio is the most popular Figma plugin for creating design tokens. While Figma variables can also achieve similar results, they still require further improvements. 📐
If you’re interested in experimenting with tokens, I’d suggest giving Token Studio a try.

With this, we conclude our exploration of the various types of design tokens. I hope this writing has provided you with a comprehensive understanding of how tokens function and their crucial role in creating cohesive, scalable design systems.

To recap, we’ve covered semantic tokens, component-specific tokens, global tokens, and aliased tokens, each serving a unique purpose in the design ecosystem.

Whether you’re a designer, developer, or product manager, understanding and implementing design tokens can significantly enhance your workflow and the overall quality of your digital products. As design systems continue to evolve, tokens will undoubtedly play an increasingly vital role in shaping the future of digital design.

Thank you for joining me on this exploration of design tokens. We’ll meet in the next writing to understand the coding aspects of design tokens. 🙂‍↕️

Happy designing! 🤓

💬 Please feel free to leave your comments or questions below!

👉 Connect with me on LinkedIn TwitterInstagram if you’d like to engage in a conversation or explore potential collaborations on design projects.

👋🏼 Till next time!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

T.T.TRINKUSH
T.T.TRINKUSH

Written by T.T.TRINKUSH

Product Designer ♠ User Research ♠ Design Systems ♠ Typography

Responses (2)