skip to content

For a design token scale such as spacing, when would you name steps numerically instead of t-shirt sizes, and what does each cost?

level: middleimportance: should knowfreq 44%

answer

  1. readable versus extensible
  2. what goes between md and lg
  3. gaps leave room: 100, 150, 200
  4. a step named after its value
  5. one style per category

basics

~20 s

T-shirt steps (sm, md, lg) read easily and suit short, stable ladders but have no room between steps; numeric steps with gaps (100, 200) extend and insert cleanly; steps named after their literal value break when that value is retuned.

solid answer

~50 s

The scale segment names a position on an ordered ladder. **T-shirt sizes** (`xs` to `2xl`) read naturally and suit short, curated sets such as headline sizes, but inserting a step between `md` and `lg` has no good name and extending past `3xl` gets unwieldy. **Numeric steps** come in several forms: plain ordinals (1, 2, 3) need renumbering to insert; **gapped ordinals** (100, 200, 300) leave room for a 150; **multipliers** of a base unit show the relation to the base; **value-literal** steps (`space-16` holding 16) show the value but lie as soon as that step is retuned or another mode gives it a different value. I pick t-shirt sizes for small, stable ladders, gapped numbers for long or growing ones, keep one style per category, and never let a literal value leak into a role token.

go deeper

for a junior

Recall the two families, t-shirt and numeric, and one weakness of each: no room between t-shirt steps, and literal numbers that stop matching their value.

for a middle

Explain the four numeric forms and the table of costs: insertion, extension and what happens after a retune. Know why a half step cannot contain a period.

for a senior

Show judgement about which categories need growth room, and how you would move an established ladder to a new style without surprising consuming teams.

for a principal

Weigh readability for designers against extensibility for a long-lived system, and decide which trade-off the organisation should accept per category.

## What the scale segment does A **scale** in a design system is an ordered ladder of values for one category: spacing steps, type sizes, corner radii, shadow depths, durations. The **scale segment** of a token name identifies which rung a token sits on. It tells the reader position, not purpose: `space-md` says medium, not where medium is used. Two naming families dominate, and each has variants. - **T-shirt sizes**: `2xs, xs, sm, md, lg, xl, 2xl`. - **Numeric steps**, in four common forms: 1. **Ordinal** - `1, 2, 3, 4`: shows order only. 2. **Gapped ordinal** - `100, 200, 300`: shows order and leaves room between steps. 3. **Multiplier** - `2` meaning twice the base unit: shows the relation to a base. 4. **Value-literal** - `16` meaning a value of 16 units: shows the value itself. ## What each style costs | Style | Reads at a glance | Inserting a step | Extending the ends | After a step is retuned | |---|---|---|---|---| | T-shirt | relative size is obvious | no natural name (`md-plus`) | `3xl`, `4xl` grow awkward | name still true | | Ordinal | order only | renumber everything above | easy at the top, awkward below 1 | name still true | | Gapped ordinal | order, with slack | `150` fits cleanly | easy | name still true | | Multiplier | ratio to the base | fractional steps need a spelling like `1-5` | easy | true only while the step stays an exact multiple | | Value-literal | exact value | natural | natural | name lies unless renamed | Two consequences deserve emphasis: - **Insertion is the real test.** Scales grow. A news site that adds a tighter spacing step for dense live-blog timelines, or a headline size between the section-front lead and the secondary stories, needs a name for it. Gapped numbers absorb that; t-shirt ladders and plain ordinals do not. - **Value-literal names are value-named tokens in disguise.** `space-16` is honest while the step is 16 and the system has one set of values. It stops being honest when the step is retuned, or when a compact mode or a second brand gives that same token a different value - the name still says 16 while something else renders. ## A format detail that affects scale names Half steps are often written with a decimal point in everyday speech. The Design Tokens Community Group format forbids a period anywhere in a token or group name, because periods join path segments in references. A half step between 1 and 2 therefore needs a spelling such as `1-5` or, on a gapped ladder, simply `150`. ## Choosing for a news product - **Headline sizes** on article pages and section fronts are a short, curated set that designers pick by feel and rarely extend: t-shirt names (`headline-sm` to `headline-xl`) read well there. - **Spacing** between list items, cards and article blocks is a longer ladder that tends to gain steps as new layouts arrive: gapped numbers (`space-100` to `space-800`) leave room to grow. - **Durations** for motion are few and stable; either style works if it is consistent. - **A value-literal ladder** is defensible for a raw scale that will never be retuned and never vary by mode or brand. That is a real choice, but it should be made knowingly, and literal values should never appear in role tokens that consumers apply directly. ## Rules regardless of style - **One style per category**, documented on the system's naming page. - **Never mix styles in one ladder**: `sm, md, 24, lg` forces every reader to learn two systems at once. - **Leave room at both ends**; the smallest step is the one teams most often discover they need below. - **Keep the scale segment last**, so all steps of one role sort together. - **Name position, not usage.** A step name says where it sits on the ladder; which step a given layout uses is a design decision documented with that layout. ## Why interviewers ask it The question separates candidates who have maintained a scale from those who have only used one. The first group talks about insertion, extension and the lie a literal name tells after a retune; the second argues about which spelling looks nicer. Both web and native teams meet the same trade-off, because the names reach every platform unchanged.

  • A design token spacing ladder named xs to xl suddenly needs a step between md and lg; what are your options?
    Invent an in-between name such as `md-plus`, which reads poorly and sets a precedent; shift every name above md, which is a breaking rename for all consumers; or move the category to gapped numbers when the next planned change allows it. The lesson is to pick a style with room to grow before the ladder is widely used.
  • Are multiplier-named design token steps safe when the base unit changes?
    Yes, as long as every step remains an exact multiple of the new base: `space-2` still means twice the base. They become misleading when a single step is tuned off the multiple for optical reasons, because the name then promises a ratio the value no longer has.

saying these in an interview costs you the question

  • T-shirt names can absorb any new step as easily as numbers can.
  • A value-literal step name stays accurate after the step is retuned.
  • Numbering in hundreds exists because the numbers match pixel values.
  • Mixing t-shirt and numeric names in one ladder is harmless.
  • The token format requires numeric scale names.