Back to patterns
spacing-contract
Spacing Contract
Declare page gutters, section gaps, panel insets, stack gaps, and control gaps as separate relationships before component styling.
PatternsRecommended
Intent
Prevent content from touching borders, sibling items from sticking together, and responsive wrapping from collapsing the visual hierarchy.
Checks
- Give bordered, tinted, rounded, or elevated surfaces intentional inset on every occupied edge.
- Set explicit row and column gaps for sibling stacks, clusters, wraps, and grids.
- Use a smaller responsive spacing token instead of collapsing panel inset or sibling gaps to zero.
- Inspect longest labels, wrapped copy, validation messages, focus rings, and shadows for edge and sibling clearance.
Warnings
- Outer margin does not replace panel inset, and child padding does not create a reliable relationship between siblings.
Exceptions
- Zero gap is valid for an intentional seam such as table cells, segmented controls, tiled media, or a continuous divider.