Scale tokens take stepped values; arbitrary numbers break the rhythm

What it is

Spacing and type size are not arbitrary millimetres on an infinite axis. They are a named set of steps: 4, 8, 12, 16, or a modular type scale. Repeated steps are how a page reads as having rhythm — this gap and that gap are “the same grade”, not “roughly similar”. Insert 13 between 12 and 16 and locally it is “a little looser”; globally you have minted an unnamed step. Allow it once and 13.5 arrives next. Stepped scale tokens make scale-type tokens a closed set: to go larger, jump to the next step, rather than inventing a new number. Arbitrary values look like tweaks; they function as a private ruler that cannot be taught or checked.

Why it happens

Rhythm is perceived through repeating intervals: the same gap showing up again is what makes a layout feel intended. A closed set makes repetition the default — authors pick from steps, so the value is already in the set others use. An open set writes every “looks a bit off” as a new primitive, the set inflates, repetition becomes less likely, and the page starts to look like many rulers stacked. 13px has no step identity relative to 12 and 16; review cannot ask “why not the step above or below”, because 13 is not in the conversation. Type steps also bind line-height, weight, and measure; an arbitrary size drags an arbitrary line-height with it, and vertical rhythm collapses together. If the scale exists only in a token file while product code still writes raw numbers, the closed set never entered production — the file is a gallery. Stepping is not a taste preference. It collapses “a bit off” from an infinite set to two or three neighbors you can actually argue about.

Where it stops holding

Icon grids, 1px rules, hairlines are device-pixel constraints; they need not jump onto the spacing scale. They are strokes, not scale steps. When the user enlarges text, steps should scale as a whole or move to relative units, not open raw pixels to “still look like 13”. Axis ticks and map labels in visualization take their numbers from the data domain, not from the UI scale; forcing the spacing scale there lies. A type scale shared with print can be isomorphic, but print points and CSS pixels are not the same unit — do not paste values. Interpolation during motion will pass through off-step values; that is transition, not a license for static layout. Motion must land back on a step. In a very narrow container, “one more pixel less or it wraps” is an overflow problem: change copy, wrapping, or the container, rather than opening 13 for that one place.

Applying it

• Publish closed sets for spacing and type. Components and pages reference step names (space.200, type.size.sm), not raw pixels.
• Fail the build or lint on unregistered px/rem in styles. An exception list may hold strokes, hairlines, and media queries, each with a reason.
• Bind spacing and type controls in the design tool to the same closed set. Remove free input, or mark free input “will not ship”.
• Check: screenshot a main path, measure every vertical gap and type size, and test membership in the closed set. Neighbors like 13, 15, 17 mean rhythm is already broken. Scan the corpus for raw values by file; new raw numbers on product paths should trend to zero. Shift the whole type scale up one step: relative rhythm should hold. If the shift produces “nudge 1px” patches everywhere, those patches are evidence the closed set never actually constrained the work.

Related

• Same group: R1.09.1 Component tokens serve one component and are not reused outside it · R1.09.2 Name tokens by role and state, not by appearance · R1.09.3 Alias chains that run too deep make origin untraceable
• Adjacent: R1.01 Design tokens · R1.02 Component libraries and variants
• Search terms: stepped scale tokens · spacing scale · type scale