Section utilities + content container
The two layout primitives every page sits on: .u-section-base for vertical rhythm, --content-max for horizontal cap.
.u-section-base: 96px / 120px (md+) top + bottom padding.--content-max: 1280px, centred viamx-auto.- Adjacent matching surfaces collapse padding (avoids doubled rhythm).
The 8-point spacing scale, rendered
Every gap, padding, and margin in the system snaps to a multiple of 8. Bars below show each step at its real pixel width.
Content cap — 1280 px, centred
Every section's text + interactive content stays inside this cap. Decorative bleed (the hero monotile, CTA band) sits OUTSIDE it on purpose so the cap only governs what users read + click.
Max width 1280px, side gutters via px-6 lg:px-8. Anything wider is full-bleed by intent (hero monotile, CTA band).
Responsive breakpoints + what they unlock
The five breakpoints the system reaches for, in Tailwind units, with the layout shift each one triggers.
sm: 640pxmd: 768px (section padding lifts to 120px)lg: 1024px (hero heading hits its two-line target)xl: 1280px (content cap)2xl: 1536px (gutters widen, content stays capped)