Clarity on spaceX measurement design decision

[HartiganHM]

In general, I understand the benefit of having a common way of communicating "spacing" (e.g. maring, padding, width, etc.). However, in general, I find the spaceX method that Paste implements (in it's current form) unintuitive and hard to parse.

For instance, Paste mentions that their standard unit of measurement is 1 rem unit = 16 pixels, which is something I'm already familiar with from past work in design and development. When trying to match a mock from a designer, I can easily translate 32px to 2rem.

With the existing spaceX model, this isn't as intuitive:

• Using the above example, I come to find 16px === 1rem === space50
• Making some assumptions, I would guess that 32px === 2rem === space100
• However, to achieve a measurement of 32px/2rem I actually have to use space90

With all of this in mind, I was hoping to get insight as to whether or not there is a way I can approach this so it is more intuitive when using Paste (e.g. original insight into the decision making, some sort of conversion formula, etc.). If there isn't a simple answer, maybe this can serve to start a discussion about whether or not other developers/designers have the same confusion that I'm experiencing.

Also worth noting is that I did try to dive into the TS types to figure out exactly what spaceX corresponded to. However, it took me a long time to land on a tokens.common.js file which finally gave me a one-to-one translation of spaceX to rem. If this information was surfaced sooner, it may help to lessen confusion, but I would still like a more simplistic conversion if one is available.

Thanks for all of the hard work and discussion!

[richbachman]

Hi @HartiganHM. We're working on answer for this one, and will post soon.

[richbachman]

Hi @HartiganHM

Really great question. One thing we're going to be working on is a "foundations" documentation section where we go into more detail on decisions we've made about spacing, style, color, etc. So stay tuned for that.

Also instead of digging into the TS files to look for token values, you can also reference the tokens page on the docs site to find specific rem and px values: https://paste.twilio.design/tokens/#spacings

Ok now on to an actual explanation. In order to understand the spacing token values more, it's best to think of them as a scale. In Paste we use a 4px scale, with the exceptions of a 2px spacing token. Here's a small sample preview:

Token	Px	Rem
space0	0px	0rem
space10	2px	0.125rem
space20	4px	0.25rem
space30	8px	0.5rem
space40	12px	0.75rem
space50	16px	1rem
space60	20px	1.25rem

So if we consider your example of 16px === 1rem === space50, and need to figure out what token to use for 32px/2rem, we need to consider the number of 4px steps between 16px and 32px. That being 4 steps, so we can count up to space90 on the scale. If we need 48px/3rem, thats another 4 steps on the scale giving us space130. We understand it's a different way of thinking about using px/rem values. After working with it a bit, it'll become more intuitive.

We decided on the numbered naming system instead of a t-shirt naming system (small, medium, etc) because the numbers make it easier for consumers to guess the next larger or smaller option. It also helps us if we ever need an in between value, or if we ever need larger values.

Let us know if the explanation helps, or if you have any suggestions on how make this information more approachable.

[HartiganHM]

Hey, @richbachman, thanks for the detailed explanation. A few thoughts:

The numbered naming system makes perfect sense and is much better than t-shit sizing. Also, the method of adding 40 to get to the next rounded rem measurement is really helpful, so thanks for pointing that out. It's also good to know that the token conversions are available in the Paste docs, but when developing it would be nice to have them more accessible (not a big deal though).

Now seeing that the 2px stop gap is what throws things off, I think it would be more intuitive to have space05 === 2px and shift everything else down. It seems confusing that every other increment of space10 is 4px besides the intervals from 0px to 2px and 2px to 4px. If that were to change, your table would be updated to the below, which is much more intuitive, at least for me.

Token	Px	Rem
space0	0px	0rem
space05	2px	0.125rem
space10	4px	0.25rem
space20	8px	0.5rem
space30	12px	0.75rem
space40	16px	1rem
space50	20px	1.25rem

This allows for pretty straightforward conversion whether using px or `rem.

• I need 16px: 16 / 4 = 4 => space40
• I need 40px: 40 / 4 = 10 => space100
• I need 2.25rem: 2.25 * 4 = 9 => space90
• I need 4: 4 * 4 = 16 => space160

I imagine this would be a pretty heavy lift (and very breaking change), but it would make the mental gymnastics a little easier, in my opinion. Happy to discuss more if you see things a different way.

Thanks for the help and I appreciate the team being open to suggestions!

[richbachman]

Hi @HartiganHM. Thanks for the feedback. Looking at your example, having space05 would work. Unfortunately, you're right that is a pretty big breaking change, and in order to maintain trust among consumers, it's probably not one we'll make.

Thank you again for the suggestion. Keep them coming!