Where to Start with Design Tokens

If you’ve been researching design systems, you’ve probably come across the term “design tokens.” (If you haven’t, no worries! You can read about them here.) Even if you’ve heard the term, you might not really understand what they are or where to start.

Design tokens are an approach to storing style attributes like color, typography, and spacing in a pre-determined structure. They are an alternative to directly hard-coding style data that allow designers and developers to build consistent, pleasing layouts, quickly accomplish redesigns, and add a theming layer to their applications.

You can think of a design token as a variable that points to a primitive like a hex code or pixel value.

In my opinion, design tokens are a great way to dip your toes into the world of design systems. I like to think of a design system as having 5 layers to it. Design tokens are the smallest building block of that system (or the first layer). They’re also the key to unlocking multi-platform design systems.

Usually, when designers and developers start work on an app, they don’t create a centralized and structured way to organize style data like colors and fonts. This is totally fine for few years, but eventually, the team runs into one of the following issues:

• Marketing wants to redesign the site, but hard-coded colors across design files and codebase are too tricky to keep track of and to change
• The team wants to add dark mode but realizes it’s really difficult without centralized style data
• The team wants to start supporting multiple applications without building each one entirely from scratch

So once you find yourself in this situation, what do you do?

1. Decide to invest in design tokens

The first step is recognizing that design tokens are a great tool for addressing the three situations listed above. At this point, you’ll need to encourage your team to invest in researching and implementing design tokens.

2. Educate and socialize

It’s more than likely that some of your teammates will never have heard of design tokens. You’ll need to begin to educate them on the value of the tool and encourage them to do their own research. You can use Theme UI’s demo to help make your case, or you can create your own proof-of-concept.