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…