usestable.com

Stable dresses a deeply unglamorous product — virtual mail — in warm paper and a bookish serif, and the mismatch is the whole idea. The page sits on a cream ground (#F9F3EE) rather than white, so white is freed up to mean "card"; every panel is a single value step above the page with a #D9D5D2 hairline, and nothing needs a shadow to separate. Type carries the personality: Recoleta at 48px/500 with −1.2px tracking for the display line, Söhne for literally everything else, and a rust-orange uppercase eyebrow (14px/600, +0.56px tracking) as the only warm accent in a page whose actions are all cobalt blue (#3D66D3). The hero's right half is a composed proof shot rather than a screenshot: the product's inbox bleeds off the right edge with three small white cards — an AI summary, the mailing address, a completed deposit — floating at its corners, and a dashed hand-drawn arc in rust tucked behind the top-left of the stack. Below the fold the page alternates full-bleed navy (#232136) bands with the cream, reusing one dark palette for stats, features and testimonials; inside the dark the hairline lifts to a violet-navy (#514D75) and links go periwinkle. It reads calm and grown-up without going corporate-sterile, and the serif is doing most of that work.

Build on a warm paper ground, not white. Page #F9F3EE; surfaces #FBF9F7 with a 1px #D9D5D2 hairline and a 16–24px radius — a card is one value step up, never a shadow. Reserve pure #FFFFFF for the secondary button and for product imagery.

Type: a warm display serif (Recoleta, Tiempos Headline, GT Super) at 48px/500, line-height 1.2, letter-spacing −1.2px for hero lines and 24px/500 at −0.8px for section titles; a neutral grotesk (Söhne, Inter) for everything else — body 16px/400 at 1.55 line-height in #65615C, section subheads 32px/500 at −0.4px, buttons 16px/600. Never set the serif below 24px. Above each display line put an eyebrow: 14px/600, uppercase, +0.56px tracking, in a rust accent (#C63D24).

Color roles: ink #232136; primary action #3D66D3; warm accent #C63D24 used only for eyebrows and hand-drawn ornament — never for a button; muted text #65615C; hairline #D9D5D2. Inverted sections take #232136 full-bleed, white ink, hairline #514D75, and links in periwinkle #A8C3EE.

Two buttons and no more: primary solid #3D66D3, white label; secondary #FFFFFF with a 1px hairline and near-black label. Both 12px radius, 16px/20px padding, ~52px tall. Put the same pair in the header so the CTA never changes shape as the page scrolls.

Rhythm: alternate the cream ground with full-bleed navy bands roughly every two sections; inside a band, use the same card geometry as on light. Sections run ~120–160px of vertical padding on a 1440px frame with a max content width around 1280px. Lists use circled outline checkmarks at ~20px rather than bullets. Stats go in bordered, unfilled panels so the number is the only weight.

Imagery: never drop a flat screenshot. Let the product UI bleed past one edge and overlap it with two or three small white cards, each showing one concrete outcome (a summary, an address, a confirmed amount), at slightly different depths. Add at most one hand-drawn ornament — a dashed arc or motion mark in the rust accent — behind the stack. Photography is real people at desks, cropped tight, with a rounded label chip anchored in the bottom-left corner.

Motion stays under 200ms: hover darkens a solid button ~6% and lifts a card's hairline; nothing translates more than 2px.