Design tokens—the foundation of a scalable design system
Forte is focused on creating blockchain infrastructure for game developers. When I started working with them, there was no single source of truth for their consumer-facing UIs. As a decentralized organization, there was little communication between product teams. As a result, the user experience was inconsistent and disjointed, plus much of their software was white-label and needed to be themed to match their customers' brands.
This was an ideal scenario for design tokens. And thankfully, we had an enthusiastic design team and experienced developer on board. For me, it was a welcome opportunity to dive deep and learn the hidden mysteries of design tokens.
Typography and color tokens are the heart of the system.
What are design tokens?
In short, they are design values stored in a platform agnostic format. The main types of tokens are color, typography, layout, and styling.
“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.”
— Jina
Where to start?
When I'm learning something new, I start prototyping right away. This yields specific, actionable questions that lead me toward useful tools and frameworks. While looking for answers, I kept coming across Jan Six and his Figma Tokens plugin. I installed the plugin, joined his Slack channel, and peppered Jan with lots of questions. The plugin also creates and updates Figma Styles beautifully.
Using the plugin, I quickly recreated systems from Adobe, Material Design, and Salesforce. This allowed me to "try them on for size" and see which felt most appropriate for our system.
Global tokens
When building a system, I'm a believer in starting with a small set of essentials and growing incrementally over time. Some future-proofing will ensure you don't paint yourself into a corner. In this case, global tokens (aka reference tokens) provided extensibility. These are our source tokens—the core values that all color and typography tokens reference.
We didn't need to align with brand colors because Forte was still defining their brand and our products would be white-labeled. For our foundational global colors, we chose the Radix Color System. I love this elegant, flexible system. We saved a ton of time by starting with these values, that were already accessible and consistent.
Naming conventions
From the reference systems I collected, Adobe and Material naming systems were extremely robust. But, they felt overly cumbersome and unintuitive for our team's needs. We found Asana's semantic naming system had the best balance of consistency and efficiency. The names are driven by these semantic values:
usage-sentiment-prominence-interaction.
This is a powerful, simple, and flexible framework for naming. The names are shortened by removing redundant default values.
And it results in named pairs, like text-default and icon-default. This removes ambiguity about which tokens to use when building components.
Simplified naming by removing redundant default values
Testing the naming convention in a Notion database.
Typography
Our approach to typography was similar. We started by defining a superset of global values. And then cherry-picked a smaller set of essentials to start with. We also simplified by choosing a single font family.
With typography, we had to solve for the different sizing scales based on breakpoint and/or device type. We started simply with two scales—desktop and mobile. We optimized for consistency by using identical values wherever possible to minimize outliers. For our needs, this was the right compromise.
Nerding out on typography scales. Comparing reference systems and my own go-to values.
Only the headline styles required separate values for desktop and mobile
Typography tokens are much more complex than color. Each typography token refers to a set of at least 9 other tokens.
With this typographic token reference system, we could instantly change the typeface across all styles by updating a single global font family token. This made it incredibly easy to test different typefaces and other typographic properties across our early prototypes.
Implementation
We have just begun to experiment with implementation, but we're already seeing positive outcomes in efficiency, consistency, and quality. Designated members of the design team are now empowered to publish token updates to GitHub via the Figma Tokens plugin. And we are using Storybook to document and test components that utilize design tokens.
We still have many mistakes ahead of us. But, I'm sold on the value of design tokens and am excited to continue to experiment and learn.