Spacing

Three spacing scales named by what sits on either side of the gap: layout between page regions, section between groups inside a region, component inside one part. Each step resolves per breakpoint, so a page tightens on tablet and mobile without new tokens.

Layout

Between page regions: the nav and the hero, one section and the next.

Section

Between groups inside a region: a heading and its grid, one row of cards and the next.

Component

Inside one part: an icon and its label, a field and its hint.