A warm-paper wellness system: a light high-contrast Editorial serif for the statements, a calm grotesque sans for reading, and full-bleed photography carrying the weight. Every surface rests on cream, the palette runs earth-toned through mustard, clay and olive, and a single decisive action blue drives every primary CTA.
Two families carry the system: Editorial New, a light high-contrast serif for display and section headlines (Fraunces shown as substitute), and AkkuratLL, a neutral grotesque for all reading text (Inter shown as substitute). Scale creates hierarchy; display weights stay thin.
White surface, warm hairline border, 24-pixel corners. The workhorse content tile on cream.
Cream clippings float on the near-black news & footer stage.
Cool grey surface, 40-pixel corners — the machined product-showcase frame.
8px base unit. Card interiors use lg (24px); section-to-section rhythm runs large, with long vertical silences of cream between blocks.
Fully-rounded pills (9999px) on every button, tab and stat badge; softly-rounded content cards (24px); large-radius product imagery (40px); inputs at 12px.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Single column; nav → hamburger; CTAs + pricing tiers stack full-width |
| Tablet | 768–1023px | Grids collapse toward 2-up / 1-up; nav condenses |
| Laptop | 1024–1279px | Tightened gutters; 3-col grids retained |
| Desktop | ≥ 1280px | Full multi-column grids; centred ~1200px column |
Touch targets: the pill CTAs and circular icon buttons clear 44×44 WCAG-AAA. Collapsing: nav → hamburger below the tablet breakpoint (blue CTA stays); multi-column pricing/feature grids reflow to a single stacked column; section padding compresses from section (128px) toward giant (64px); display serif scales down (110px → ~48px) while keeping its thin weight.