Opens in a new tab

Choose numbered or t-shirt size names

Two identical sets of spacing bars. The left set is named space-sm to space-xl, labeled memorable. The right set is named space-4 to space-32, labeled extends easily.

Tokens are the reusable values in your design system, and each one needs a name. For sizes, there are two common approaches. T-shirt names, like sm, md and lg, are easy to remember and read almost like plain English. Numbered names, like space-4 and space-8, often match the actual value in pixels (sometimes converted from rem units).

Each approach has a trade-off. T-shirt names are harder to extend. If you need a size between md and lg, there’s no obvious name for it so you’ll have to update the sizing system to accommodate that. Numbers extend easily, since you can add space-12 between space-8 and space-16, but they say less about how a value is meant to be used. Either can work well, but understanding their tradeoffs is important before you decide to commit to one.

Get Free Design Lessons Every Monday Morning

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close