Paper · --bg-paper · #FAFBFC
The default body surface. Every section that doesn't pick a different recipe lands here. Live sample below renders a real heading + lede + body on the actual surface at production weights so the contrast is visible.
Section eyebrow
Heading on paper
Default body surface - every section that doesn't pick a different recipe lands here.
Body copy resolves at --fg-primary (#13192A). Lede + secondary copy step down to --fg-secondary (#475569). Contrast on paper hits ≈14.6:1 (AAA).
Paper cool · --bg-inset · #F4F6F9
A tinted variant of paper, used as a rhythm breaker between two paper sections. Sits ~6 lightness units below the default; the einstein-hats whisper texture lives on this surface.
Section eyebrow
Heading on cool
Tinted-section voice - used to break rhythm without going to navy.
Cool sits ≈6 lightness units below paper, so the surface registers as a tinted band without reading as a different background family.
Navy · --bg-inverse · #0F1F3D
The dark inverse surface - CTA bands, dark heroes, the dashboard nav strip. Heading goes pure white; body lifts to white at 0.72 alpha so the secondary voice stays present without competing.
Section eyebrow
Heading on navy
Used for CTA bands + dark heroes.
Headings render pure white (#FFFFFF · ≈16:1 against navy · AAA). Body lifts to rgba(255,255,255,0.72) for the lede. --border-strong lifts to #A8B0BD in this scope so the supporting outline voice stays present.
Section utility classes
The three section utilities that map onto the three surfaces, plus the rhythm rule the page enforces automatically.
.u-section→ paper..u-section-tinted→ cool, with whisper-texture pseudo..u-section-dark→ navy, lifts--border-strong.- Adjacent matching sections collapse padding automatically.