What are design tokens?

Design tokens are just spicy variables, right? Wrong! They are an extremely versatile way of sharing design properties and in this tutorial, you’ll learn how they work.


Design tokens are an extremely hot term that folks brandish around without much of an explanation. I am guilty of doing exactly that, so to hopefully remedy that, here is a tutorial on what they are, how they work and how they are really useful.

Design tokens, explained by the creator permalink

I always reference this quote by Jina, who created design tokens, while they were working on the legendary Lightning Design System:

“Design Tokens are the visual atoms of the design system – specifically, they are named entities that store visual design attributes. We use them in place of hard–coded values in order to maintain a scalable and consistent visual system.”

It was Jina’s work on this that enabled me to communicate to the team I was in at the time about how I wanted to work on our multi-platform system. I called it a “style guide” at the time—thanks to my background in more traditional print design—but Design System with Design Tokens made much more sense.

Design tokens, explained by me permalink

Let’s say your company has a website, an iPhone app and several printed brochures of information. For everything brand-related you use a style guide—that’s pretty darn standard, but that style guide is often a PDF with loads of information that doesn’t mean much to a developer.

That style guide will contain information such as brand colours, typography and how to use the logo—to name just a few examples—but getting that information to technical people who are not well versed in reading style guides could be very risky.

This is where design tokens become really useful because in essence, they are centralised data—almost like a database of design values—that could be consumed by anything that understands a standard, like JSON.

Here, let me show you how design tokens can look when they are in a standard data format, JSON:

Code language
json
{
  "colors": {
    "dark": "#121111",
    "light": "#f8f8f8",
    "primary": "#fdd110",
    "secondary": "#ea1c5c",
    "secondary-shade": "#da0044",
    "tertiary": "#55dde0"
  },
  "fonts": {
    "base": "Helvetica Neue",
    "serif": "Georgia"
  },
  "sizes": {
    "300": 10,
    "400": 16,
    "500": 20,
    "600": 25,
    "700": 31,
    "800": 39,
    "900": 48
  }
}

Here, the design tokens reference colours, fonts and a size scale. The colours are hex values and the size scale refers to pixel values.

This data would need to be translated per platform. For example: for print, you might need to translate those pixels into points and the hex values to CMYK values. For web, you would probably want to change the pixels to responsive units, like rems or ems, but that’s cool because there’s plenty of tools to do those sorts of translations. The important thing is that we have a centralised structure of definitions that can be used, cross-platform.

Here’s an example of the output if that JSON is converted into Sass:

Code language
scss
$colors: (
  'dark': #121111,
  'light': #f8f8f8,
  'primary': #fdd110,
  'secondary': #ea1c5c,
  'secondary-shade': #da0044,
  'tertiary': #55dde0
);

$fonts: (
  'base': '"Helvetica Neue"',
  'serif': 'Georgia'
);

$size-scale: (
  '300': 0.63rem,
  '400': 1rem,
  '500': 1.25rem,
  '600': 1.56rem,
  '700': 1.94rem,
  '800': 2.44rem,
  '900': 3rem
);

Maintaining tokens permalink

We’ve had a look at what the output of design tokens can be, but how are they maintained? As with anything in design and tech: it depends.

Tools such as Figma and Sketch offer a few options when it comes to design tokens. With Figma, there’s plugins such as Figgo which help convert static design tokens into more useful data that developers can use.

With Sketch, you can use plugins such as the handily named, Design Tokens Plugin.

More technical tools include Theo, by the Salesforce team, which is a popular choice amongst large design systems. There’s also tools such as Style Dictionary, which again, suits larger systems. Heck, you can even maintain design tokens with a handy Google Sheet and Theo.

There’s promising looking tools such as Arcade by the fine folks (and design systems experts) at SuperFriendly, too.

It would also be daft of me to not feature my own tools, Gorko and Goron which turn design token data into CSS and/or SCSS.

Wrapping up permalink

I hope this quick explainer of what design tokens are helps you to understand them more.

I’d also urge you to read this article on CSS-Tricks, look through this speaker deck by Stu Robson and finally, watch this video with the creator of design tokens themselves, Jina, and a colleague.

Until next time, Take it easy 👋


Comments

If you liked this post, you might like these ones, too

  1. Use transparent borders and outlines to assist with high contrast mode

    It’s tempting to use a sharp box shadow for focus styles to both remove the default focus ring and to get around sharp outline corners. With this method, you can create problems for Windows High Contrast users, so this quick tip will help you get the best of both worlds.

    Continue
  2. Container Queries are actually coming

    After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.

    Continue
  3. Get a CSS Custom Property value with JavaScript

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.