Base tokens

In my experience working with various design teams and spacing systems, I've found that thinking in pixels is often the most intuitive approach. We're familiar with how a 12-pixel font size or an 800-pixel wide image looks, making it easier to visualize and work with these measurements.

The abstraction to REMs (like 0.75rem for 12px or 50rem for 800px) can be less intuitive, and other systems like weights or the T-shirt model for spacings can be even more challenging to grasp and scale.

That's why Once UI adopts a practical approach. We use the absolute value of REMs calculated at a 16px base for our token names. This method keeps the abstraction in the scaling mechanism, not in the variable names. In Figma, you simply calculate the tablet (Desktop * 15 / 16) and mobile (Desktop * 14 / 16) values for your tokens.