Fluent Flex · Chapter 04
Spacing
Spacing started as three tiers of t-shirt sizes, atomic, component, and layout, that couldn't stretch to the values real layouts need. It was condensed to two purposeful categories on a scalar scale, where the value derives from the name and you can reach for any step the design calls for, even an odd 3px when optics demand it.
3 → 2
Spacing tiers: atomic, component, and layout condensed to component and layout
2
Base units: 4px for component, 8px for layout
any
Value the scalar scale can express, down to a 3px optical nudge
Why it matters
Spacing Clarifies Relationships
Good spacing doesn't just separate elements, it clarifies relationships. It helps people scan, understand what belongs together, and move through content without friction. Used well, it does more organizing work than borders or backgrounds ever could.
Background
Three Tiers of T-Shirt Sizes
Spacing started as three tiers, atomic, component, and layout, named in t-shirt sizes. The names carried a rough sense of scale but not a real one: small, medium, large, plus nudge values wedged in whenever a size didn't quite fit. When a layout needed a value the ladder skipped, there was no clean way to reach it, and choosing between three overlapping tiers was a judgment call every time.
It was also split by direction, with separate horizontal and vertical tokens for the same values, doubling the list for no benefit. Direction never changes whether 8px is the right amount; that is a job for the CSS property, not the token.
Before
- Three overlapping tiers, plus separate horizontal and vertical tokens
- T-shirt names, with nudge values wedged in between
- No clean way to reach a value the ladder skipped
- Choosing a tier was a judgment call every time
After
- Component (4px base) and layout (8px base), chosen by relationship
- One token for gap or padding, any direction; the CSS property decides how
- Scalar names, so any step derives from the name, down to a 3px optical nudge
- Component holds across platforms; layout compacts on mobile
The rebuild
Two Categories, Chosen by Relationship
The rebuild collapsed three tiers into two, chosen by relationship rather than size. Component spacing lives inside a control, an icon beside its label, the padding of a card, on a 4px base. Layout spacing sits between regions, a sidebar and the main content, one section above another, on an 8px base. If you'd say "inside this thing," it's component; "between this and that," it's layout. Direction stopped being the token's concern: one token applies as gap or padding, horizontal or vertical, because the CSS property decides how the space lands.
Both are scalar: a name like spacing-component-base-200 is simply two times the
base, so the pixel value derives from the name with no lookup. Dropping t-shirt names for a
scalar scale is what unlocked the real goal, using any value the design actually needs.
Sometimes that is a 3px nudge for optical balance, and the scale can express it without a
wonky name wedged into the set.
Two padding patterns cover most of it: squared padding with equal space all around, and cut-in-half, a horizontal value with the vertical set to half, which keeps dense rows tight without ad hoc pixels. And the categories know the platform: component spacing is identical everywhere, while layout spacing compacts on mobile so between-section rhythm stays proportional to the smaller screen.
Collaboration
How This Came Together
I owned spacing end to end. The move to two categories and a scalar scale took shape at an MAI workshop, and I still think it was one of the better calls we made.
Looking ahead
What's Next
- Scalar spacing feeds AI-generated layout: a model can pick component vs layout from the relationship and derive the value straight from the name.
- The two-category structure extends cleanly, so a new density need slots into the same scalar convention without restructuring the scale.
- Cross-platform parity holds: the same base logic maps to web, iOS, and Android, component steady and layout compacting on mobile.