Spacing
Ten steps, doubling then easing. Every gap, pad, and margin in the system is one of these — an arbitrary value in a component is a defect, not a tweak.
The scale
Strict doubling through --s-6, then 1.5× steps so the large end stays usable without jumping from 2rem to 8rem.
--s-1 .25rem · 4px Hairline offsets, focus ring offset
--s-2 .5rem · 8px Label to field, icon to text
--s-3 .75rem · 12px Button padding block, inline gaps
--s-4 1rem · 16px Default gap; small-screen page gutter
--s-5 1.5rem · 24px Grid gap, card padding, page gutter
--s-6 2rem · 32px Card padding, section-internal spacing
--s-7 3rem · 48px Footer padding, block separation
--s-8 4rem · 64px Section-head margin, column gap
--s-9 6rem · 96px Band copy padding
--s-10 8rem · 128px Band padding block — the page rhythm
Page rhythm
Three values do almost all the work of the page. Get these right and a new section slots in without a judgement call.
| Where | Value | Note |
|---|---|---|
| Band padding block | --s-10 | Drops to 6rem under 43rem |
| Section head to content | --s-8 | Also the section head's own column gap |
| Page gutter | --s-5 | Drops to --s-4 under 43rem |
.shell resolves to min(100% - 2 × gutter, --content), so a component never sets its own max-width to line up with the page. Nest inside the shell instead.Fluid padding
Where a pad must respond, it clamps between two scale steps rather than using a bare vw. This keeps the extremes on the scale even though the middle is continuous.
| Pattern | Used by |
|---|---|
clamp(var(--s-5), 5vw, var(--s-9)) | Photo band copy, inline padding |
clamp(var(--s-6), 5vw, var(--s-9)) | Documentation content padding |
clamp(var(--s-7), 6vw, var(--s-10)) | Contact section column gap |
Breakpoints
Three, in rem, so they respond to the user's font size rather than the device's pixel count.
| Max-width | Equivalent | What changes |
|---|---|---|
74rem | 1184px | Four-across drops to two; service rows shed their description column |
62rem | 992px | Nav collapses; side-by-side layouts stack; photo bands go single column |
43rem | 688px | Everything single column; header and band rhythm shrink |