If you're using t-shirt sizing for variables, how do you introduct new sizes, let's say between L and XL

Hi, elcicneha.

My suggestion is instead of creating a variable for the new value between large and xlarge, just put the current xlarge as 2XL and then the new value as XL.

XS, S, M, L, XL, 2XL, 3XL… something like that

Second to that, we just add numbers

That’s what I thought, but from implementation perspective, we’ll need to go change it everywhere in the design/code.

I’m already using the number system @Pavel_Kiselev but let’s say I have L, XL, 2XL
L=16px
XL=24px
2XL=32px

Let’s say I wanna introduce 20px, how would/should I do that?

I see. That’s indeed a problem if you’re using primitives directly instead of semantics. Hmmm. You can try adding M which means Mid

XS, [MS], S, L, [MXL], XL, 2XL…

The idea is to add prefix M, which u can just define as Mid

XS = Extra Small
MS = Mid Small
S = Small
L = Large
MXL = Mid Extra Large
XL = Extra Large

In fact, you can use any string or whatever, just define it properly and tell everyone involved about the concept of it.

But, it will be another problem if you decided to add another value between MXL and L. 😅

Still the best concept is to stick with the defined variables as much as possible, but in my opinion, the most scalable concept is to use some string + value (e.g. fontSize: 20px = fs20 or something like that)

Oh, this is where T-shirt sizes screw you up 🙃

I’d take it in the hard way. I’d say, now XL is 20 and extend the scale.

To introduce a new size between large (L) and extra-large (XL) when using t-shirt sizing for variables, you can add an intermediate size like “radius-large-plus” or “radius-large-x” to maintain consistency and scale. This approach allows you to expand your sizing without disrupting the existing hierarchy of your variables. Keeping names clear and intuitive is essential, much like branding strategies used by companies like rexing sports to differentiate their product ranges effectively.