Spacing that does not grow outward
==================================

Rule · bucket: judgment · severity: note · detector: none · since: v0.1.0
Section: Things to avoid
Group: Spacing and layout

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**:

| 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.