Design token scales
004 of Minimal Musings, sharing on design systems and remote work —
When delivering a design system, design tokens ensure the style synchronization between design and development. A primary color in Figma is linked to color-primary in code. Same thing happens in text styles.
The abstract and text-based characteristics of tokens make the ease of understanding become one of the critical systems needed to tackle. Cristiano made a very good point — “Design tokens are not only a way to store information, but also a way to convey information.” Thus, for engineering consumers, a good naming convention introduces needed clarity and help them fully understand and use design tokens easily.
One part of the convention is token scales, where we tell the order of available options. I want to share some common conventions I learned with you. Please note, there is no silver bullet in scaling convention but the best one is the one you and your team use consistently, intentionally, and with consensus among stakeholders. When you just start building the token system, it might be easier to start the scaling with t-shirt size or sequential number. If your system is growing bigger, it might be a good time to consider building the scaling with less abstraction and more numbers.
T-shirt size 👕
“title-large and title-medium.” T-shirt sizes directly map to our living experience. Small, medium, large, and so on. Code example from Material Design.
The downside is that it becomes harder to maintain and use when the scale grows bigger. There is no place for adding a middle size between small and medium. Even when adding another min/max value, using XXXXSmall doesn’t seem to be sustainable in the long term.
Sequential number 🔢
“font-size-1 and font-size-2.” This uses numbers without particular meaning. They only represent the order. It’s clear because it doesn’t apply an extra abstraction layer on naming. It’s useful when you define the smallest value and anticipate there are only bigger values to add. Code examples from Polaris and Carbon.
Similar to t-shirt sizing, there is no way to add value in between or below the smallest one and the sequence might not make any sense when I insert one as “font-size-1.5.”
Hundredths numeric scale 💯
“100, 150, 200, 300.” This numeric scale acts similar to font weight numbers. You define the step value like 25, 50, or 100. The step then helps to create a scale and open up the room if you decide to add another scale. Also, the hundredth numeric scale makes the base value easier to read. You can use 100 as a general baseline, or follow the font weight scale by using 400. Examples from Spectrum’s website or Gusto’s article (from Derek).
However, sometimes it’s not intuitive at the beginning and conflicts with other conventions if I present a percentage in a token scale (like 100 means 100% instead of 100 as a baseline).
What-you-see-is-what-you-get numbers 🪞
Instead of applying meaning on numbers, this convention is literally about math. I couldn’t think of any issue with this convention because of its simplicity.
First use case is like its name, border-width-1 gives you a 1px stroke, and tracking-075 returns a letter spacing with 0.75px. The other use case serves as a multiplier. In Polaris spacing tokens, when they use 4px as a base size, space-2 is 8px, space-3 is 12px, and so on.
Not-so-good moment with Figma 🫠
One of the pains for maintaining a set of components is that I realize a component marked as modified and I don’t really know which part of it has been modified. And I could be right. There is actually no real “change” to the component.
Figma deals with the change in components very carefully. Except for x and y position on my canvas, it seems like anything else could be a change if edited. This deliberate manner is great, but sometimes it becomes annoying when the program tells me there is a change with no reason. And it happens very often when I inspect my components in Figma. Then I have to press the undo shortcut to find peace of mind.
Repeated song 🔂
Thank you for reading :) Please say hi on LinkedIn or via email. Btw, all statements here are my own and don’t reflect the opinions of my employer. Special shoutout to KuanJen (Kevin) Wang for helping proofread this article!
See you next time🍻
– Chien
