Option 02 — RFB All directions
Foundations

Space, shape and motion

Spacing sits on a 4px grid, but the type does not: tracking is a flat 0.2em, which is why it lands on 2.9 and 3.3px, and the body measure is a half column at 617.5. Corners are square without exception.

Spacing scale
15
Button padding, vertical — 11 on the small size
16
Text-button padding, vertical · tag padding, horizontal
20
Inside the section opener — rule to label to heading
32
Large button padding, horizontal (small is 28) · heading to paragraph
40
Card padding
56
Between stacked blocks · grid gutter
80
Section padding on mobile
100
Page gutter on desktop
160
Section padding on desktop — the default rhythm
220
Around a hero or a full-bleed break

Section padding is large even by editorial standards. It has to be: a 120px heading with 60px of air around it reads as cramped, and the whole system depends on that heading being able to breathe.

Measures
1440 — full-bleed media and dark bands
1240 — the content frame, inside the 100px gutter
950 — a display heading at its widest
617.5 — half column, and the body measure everywhere
376 — one column of a three-up card row
320 — card copy at its narrowest

Breakpoints: 640 · 768 · 1024 · 1440. Below 768 the layout is one column, the gutter drops to 24, and the display scale roughly halves — 120 becomes 56, 110 becomes 52.

Shape
0 — everything
50% — avatars only
Strokes
50 × 2px ink — the section marker
20 × 2px slate — the sub-marker, inside columns
1px line — full-width dividers and card edges
1px flame — button outlines only
2px rubric — the underline on a field in error

There are no shadows anywhere in this system, on content or on chrome. Depth comes from full-bleed imagery and from the pitch-black bands, not from elevation.

Motion
The slow underline
750ms · ease

Text buttons draw a 1px rule left to right over three quarters of a second. It is unusually slow for a hover, and it is deliberate: the pace matches the reading, not the pointer.

Outline fill
200ms · ease

Outlined buttons fill with their own border color and flip the label to white. Border and background only — the button never lifts, scales or shadows.

Everything respects prefers-reduced-motion: the underline appears at once and scroll-triggered entrances are switched off.