Someone asked me about the spacing scale in Braid and I thought I'd share my thoughts here. For reference this is what they were referring to: https://github.com/seek-oss/braid-design-system/blob/ecdd7f3060cab2a6675cde7dd45bcd510caa268b/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts#L166-L175
I could maybe have turned this into a blog post, but I'm just dropping my rough thoughts here instead.
In practice, the T-shirt size scale felt like indirection because our designers didn't think in those terms so it actually got in the way of developers and designers communicating.
The names also weren't really semantic in the sense that we couldn't confidently change them later without breaking a lot of layouts.
It also made it difficult to name new values to the scale, e.g. if we needed to add a value between "small" and "medium", what would we call it? I've seen things like "xmedium" in other systems before which shows how awkward this can get.
In terms of consuming the scale, I found that designers/developers would often just pick whatever value looked good in the context of their design rather than being guided by any sort of T-shirt size semantic. I don't feel this has any advantage over more explicitly picking a token with a very literal name like "8px".
The reason we needed a semantic layer at all is because of theming across multiple brands.
The challenge we ran into however is that our spacing values were picked arbitrarily for each brand rather than following any sort of predictable calculation, probably because the original non-themed scale was arbitrary. This meant that we couldn't predict whether a layout would look good when toggling themes since a small increase in spacing for one brand might be an unnaturally large jump for another brand.
If I were to have built Braid again I would have strongly suggested we drop the meaningless semantics of T-shirt sizes and used predictable steps on a scale instead (e.g. 1x, 2x, 3x, etc). This way the spacing would have been non-semantic (in a good way, for reasons described earlier) while being predictably themeable across brands.
We leaned heavily into TypeScript for both our UI code and our CSS (via Vanilla Extract) which would do the heavy lifting of displaying the list of token values to consumers and checking them at build time. I think historically the lack of static types is why we used names like "small" and "medium", simply because consumers could memorise them better than a bunch of numbers.
Thanks for reading 🙏