Tokens in design systems are useful to help systems scale across platforms. Designers need to easily adopt and understand how design decisions are being made. Here’s how my colleague, Katie Sylor-Miller, and I evolved, and implemented tokens throughout design, code, and collaboration.
From variables to tokens
Every style guide or toolkit offers choices. Those choices reside in hardcore values. For example, colors can range from black to white. The hardcore value is the HEX code like #FFF and can be stored into a variable like $white. Etsy’s primary core brand color was orange. Secondary colors were ranged from black to shades of grey to white. And there were other branded colors that one could use, reserved for marketing campaigns.
Understanding when and where to use tokens
A system’s strength comes from knowing how to apply options (like $color-primary) to contexts (like a dark background color). This helps designers understand what they need to use and why. Using orange as a variable for .btn-blue made it confusing for designers and developers to understand what choices they had when it came to colors.
Inspired by Salesforce’s Lightning Design Systems, design tokens are an abstraction for everything impacting the visual design of an app/platform. Tokens can become readable and intentional as it’s developed into the products. Before, teams arbitrarily decided on .btn-blue or .btn-green to denote primary. Now, designers can apply $text- or a $background-button–primary in a thoughtful, conventional manner.
A successful, enduring token architecture depends on grouping, ordering, classification and decision-making. It can be useful to start with a language concept teams are familiar with for how you want to add the decision making. An example of a tokens BEM-like structure would be ‘button_primary–background-color–hover”. While this is for colors, it should be used for everything.
The results
To be consistent with how the web toolkit is structured, we needed to create a token per component’s design property such as button states and text such as $button_primary– hover–background-color: $orange. The result was a beautiful page of over 500 tokenized design properties in code.
Role: Development