📏 Scale Experiements

When designing something there are a million choices. Many of those choices are a waste of time. A design system is valuable because it reduces those pointless choices. There are many areas where designer need to make choices, Typography, Color, Composition, Spacing, and more. Limiting spacing options saves time when finding the best size for an element.

An Example

Let's say you're dealing with an icon, and it looks good at 30, 31, and 32px. Which is the "right" size? Perhaps 30px feels right because it's a multiple of 10. Perhaps 32px feels right because it's a multiple of 8. Well, without a design system, any value is fine. Heck, 31.23px is totally fine. But in reality, You know what you prefer. A design system provides a rule for yourself and your team, that 31.23px, is a value that shouldn't be explicitly used.

But which values should be used?

Tachyons

Tachyons, (with inspiration from @stubbornella) uses an exponential scale. 2n. It's pretty nice! (1,2,4,8,16,32,64,128,256,512), It's great because you'll never question which unit works the best. There's a literal magnitude of difference between each unit. The downside is it lacks a lot of the smaller units which are handy for smaller elements. Think chips, these are much nicer when you have 2px-8px to fudge the areas between text, images, icons, and edges.

Tailwind

tailwindcss uses a bizzare linear system. Where each unit is 0.25rem or 4px. Yet, these units don't increment linearly. They increment in a nonsenical sort of way. Basically tailwindcss doesn't have a system for saying what's included and what isn't. 30 isn't a default, but 28 and 32 is. 40 is a default, but 38 and 42 are not. JIT, IDEs, and etc make this less of an issue, but it's still a strange, linear system which still expects fractions, especially at lower px values.

My Scale

The scale which I've been toying with is a hybrid of the two. At work, I evaluated all of the CSS being used, and I found that it doesn't really fit a linear scale well, nor does it fit an exponential scale super well. If you were to choose a range of values near the minimum and a range of values near the max. You'd see the gap between values is consistent, HOWEVER the size of that gap changes.

So I found a pattern which matches that pretty closely.

The scale will increment linearly in sets of 8. After a set of 8, the incrementing value is doubled. It sounds strange, but it works quite nicely. I'm not sure if I'm in love with 8. but designers do love 8. Perhaps 12 may work better? idk, overall the fusion of tachyons and tailwind scaling systems is pretty nice. I haven't been reaching for a value outside of the set, nor are there many values I'd never write by hand. Somehow, this scale scales very nicely.