Ten steps. Rhythm, not uniformity.
A spacing scale is only useful if a designer reaches for the same step the next time, and a different step when the role changes. Ten named values from hairline to xxxl. Hero surfaces breathe; dense tables tighten; the rhythm between them is the personality.
From 1px to 48px, named and roled.
Tokens live in DESIGN.md and the Tailwind theme. Reach for the named step before reaching for a raw value.
Same padding everywhere is monotony.
Two stacks of three. Same colors, same type, same content. Left: every block at lg. Right: xl, lg, md interleaved. The right one is Insyte.
44 is the floor.
Operator-touchable targets are at least 44×44 in tap zones. Dense tables may drop to 36 internally, but the action sits inside a 44-tall row. The visible chrome can be smaller; the hit area cannot.
Inline icon-only inside a dense table row. The row itself is still 44.
Every primary button, ghost button, and switch. The floor.
Primary CTA on auth / onboarding. The brand-moment scale.
Four rules that decide the spacing for you.
Vary spacing for rhythm.
Hero surfaces breathe at xl and xxl. Dense tables tighten to sm and base. The interleave is the personality. Three sections at the same vertical rhythm reads as Tailwind UI.
Page rhythm is fixed.
page-x is 24px and page-y is 28px across the operator surface. The shell decides this; routes do not override. Consistency at the frame, variety inside it.
No uniform padding.
If a stack of cards all use the same padding, the layout has no opinion. Pick xl for the lead block and lg for its neighbors. Rhythm is the brand.
Touch target ≥ 44.
Every operator-touchable target is at least 44×44 in tap zones. Dense tables may drop to 36 internally, but the action stays inside a 44-tall row.