System

Spacing / The 8px grid and its 4px exceptions.

8px Baseline Grid

All vertical spacing between block-level elements snaps to multiples of 8px. Horizontal and component-internal spacing may use 4px granularity.

gap-2 → gap-24

gap-2

8pxTight

gap-4

16pxDefault

gap-6

24pxComfortable

gap-8

32pxSpacious

gap-10

40pxSection

gap-12

48pxSection

gap-16

64pxLarge

gap-20

80pxXL

gap-24

96pxXXL

Content Group Coupling (4px)

Elements that form a single content group (a title and its lead paragraph, a label and its value) use 4px spacing to communicate visual association. This is distinct from the 8px grid, which governs gaps between groups.

4px within a group, 8px between

Title with 4px coupling

The paragraph sits close to its heading, reading as one unit. This uses gap-1 (4px).

Title with 8px spacing

The paragraph feels more separated, appropriate between groups, not within one.