What Are Design Tokens

At the center of every great design system are design tokens—small but mighty variables that store values like colors, spacing, and fonts. Think of tokens as the secret ingredients that help keep your designs consistent and let your team work faster. In this post, we'll explore what design tokens are, why they're useful, and how they help your design system grow smoothly.

So, what exactly are design tokens?

Imagine design tokens as little labels that hold design choices, like a specific color or font size. Instead of typing the same hex color or pixel value every single time, you use these friendly token names. That way, if you ever decide to change your main color from blue to purple, you only have to update it in one place—then voilà! Everything updates automatically. This saves you from a mountain of manual work and prevents sneaky mistakes from slipping in.

Tokens can even reference other tokens or do simple calculations, adding extra flexibility to your design magic.

Why should you care about design tokens?

Design tokens make life easier for teams working together by simplifying decisions and helping everyone stay on the same page. Here's why they're awesome:

• Everyone agrees on design choices
  Using tokens pushes teams to clearly decide things like colors, typography, and spacing early on. This means fewer disagreements, clearer communication, and a solid foundation for your designs.
  
  

• They keep your designs consistent
  Tokens ensure your designs look and feel the same everywhere—whether it’s on different pages, apps, or devices. This consistency helps users trust your brand and have a better experience overall.
  
  

• Easy to scale up
  Design tokens make updating your system quick and painless. Change a value once, and it magically updates everywhere. This is a huge time-saver for large teams managing many products.
  
  

• Quick theming and customization
  Tokens are perfect for quickly switching between themes, like going from light to dark mode or adjusting for different brands. Instead of redesigning everything, just tweak your tokens and watch your whole system adapt instantly.
  
  

• Connect designers and developers
  Tokens create a clear language that both designers and developers understand. This removes confusion, boosts teamwork, and ensures your designs look exactly how they're intended once they're built.

Types of Design Tokens

Tokens usually come in three tasty flavors: Global, Semantic, and Component.

Global Tokens

These are your basic, foundational values—things like brand colors, font sizes, and spacing. They're like your core ingredients, directly taken from your style guide. Every other token builds upon these global ones, making them essential for consistency across your whole system.

Semantic (Alias) Tokens

Semantic tokens give meaning to global tokens in specific contexts. For example, you might have a token like color.surface.background, which uses a global color token to define backgrounds for all your surfaces. If you decide to change the global color later, the semantic token automatically updates, keeping your design decisions consistent without extra work.

Semantic tokens make design choices straightforward. Designers don't need to worry about picking colors or sizes every time—they just pick from ready-made options.

Component Tokens

Component tokens describe the look of specific components, like cards or buttons. They usually reference semantic tokens but give you an "escape hatch" for customizing certain components when the defaults don't quite work. For example, if a button needs a special border radius, you create a component token for that unique case.

But remember, don't overdo it! If you're always creating new component tokens for tiny variations, it's probably a sign you need a better solution—maybe a new semantic token or improved component hierarchy.

Naming Tokens

Clear and consistent naming is key. A popular approach is naming tokens with categories like [system].[category].[concept].[component].[variant].[state].[scale]. This structure helps keep things tidy and understandable. Read more about how we named our tokens.

How Tokens Come to Life in a Real Project

From Brand Guides to Tokens

If you already have brand guidelines, fantastic! You map those values directly to global tokens. If you don’t, now's a perfect time to create one to guide your token creation. We already had a pretty robust brand guidelines for Base UI and Battlenet, so we skipped this step.

Auditing Existing Components

Most teams start with existing products. Auditing these helps identify all the style values you'll need to turn into tokens. When our team audited our components, we discovered plenty of variations that we simplified into tokens. From this audit, we were able to identify a slate of semantic tokens and exceptions.

CSS Variables & Code

Next, we replaced raw CSS values with tokens. This step showed inconsistencies we hadn't noticed, allowing us to fix issues and unify designs across the system. This alignment of discrepancies can be pretty gnarly and take time, so make sure you give enough time to do a thorough audit.

Figma Tokens

Designers updated Figma components using Figma Variables simultaneously, ensuring the design tool matched our live code.

Automating Tokens

Tools like Style Dictionary and Tokens Studio made generating and syncing tokens across platforms a breeze. We ended up using Tokens Studio to manage this pipeline workflow.

Documentation and Education

Clear documentation helps everyone understand how tokens are structured and used. Here are some example content that we needed to put together for users' consumption:

• A list of all tokens in Storybook: their raw values and how they are mapped to various levels of token

• Tokens annotation for each component in documentation

• Brief explanation of tokens naming conventions and guideline on how to create new ones

We also created educational resources, tutorials, and videos to help our team get comfortable with the new token system.

Final Thoughts

Design tokens are the secret sauce for making a scalable, consistent, and easy-to-maintain design system. Yes, tokens take effort to set up and learn, but they're totally worth it—especially for systems managing multiple brands and products. It’s a team effort, but once everyone’s on board, the payoff is huge!