A 4px base scale and the rhythm rules that keep sections breathing evenly.
Every gap, pad and margin is a multiple of 4px. One small scale, used everywhere, is what makes unrelated screens feel like one product. When whitespace can do the work, it does — a line is added only when spacing alone doesn't read as a break.
Page sections breathe on a fluid rhythm, measured against real reference sites so the cadence never feels cramped or empty.
| Token | Value | Role |
|---|---|---|
| --section-pad | clamp(64px, 8vh, 100px) | Vertical padding each side of a section |
| --section-statement | clamp(100px, 14vh, 156px) | Deliberate breathing room around a statement |
| --inline-pad | clamp(24px, 5vw, 64px) | Horizontal page gutter |
| --cta-pad | clamp(80px, 10vh, 128px) | A step up, for the closing call to action |
Reach for a token, not an arbitrary pixel. If a value isn't on the 4px grid, it's almost always the wrong value.
Separate content with whitespace first. A #1E1E1E hairline is a last resort, not a default.
Cards and controls own their padding; layouts own the gaps between them. Never fake spacing with empty elements.