Use a Small Fixed Scale
Pick a handful of gap steps and reuse them everywhere. A consistent rhythm is easier to scan than custom values per section.
Interactive Spacing Control
Toggle gap presets and compare rhythm:
Separate Inside vs Outside Gaps
Use smaller spacing inside a group and larger spacing between groups. This keeps relationships obvious without extra borders.
Exercise
Audit one screen using only scale values 8, 16, and 24:
- Replace one odd gap like 13px or 19px.
- Tighten internal spacing inside a component.
- Increase one section-level outer gap.
Spacing Scale
A fixed set of spacing tokens used consistently to define rhythm and grouping.