Spacing that does not grow outward
- Forbidden
- The same gap between a card's heading and its body, between cards, and between page sections
- Instead
- An interface is rectangles inside rectangles. Spacing starts small at the innermost level and increases as you move outward:
What this rule looks like
Why this rule
| Level | Option |
|---|---|
| Text inside a component | XS (8) |
| Component padding, content within a section | M (24) |
| Between components, grid gutters | L (32) |
| Between page sections | XXL (80) |
--spacing-group → --spacing-card → --grid-gutter → --spacing-section already encode this per mode. When in doubt between two steps, take the larger one — tight spacing hides grouping and hierarchy, and generous spacing is the cheapest improvement available to any interface.
- Kind
- Rule
- Section
- Things to avoid
- Group
- Spacing and layout
- Bucket
- judgment
- Severity
- note
- Since
- v0.1.0