letters.app

A medical-scribe SaaS that sells calm rather than capability. The whole document sits inside a rounded inset — a hairline of white around a page whose top corners are cut — and opens on a soft vertical sky, #8fb3d1 fading to near-white, dusted with 1px pale specks. Everything above the fold is that gradient plus two hard elements: an 80px headline set on a 72px line with -0.04em tracking in Open Runde, a rounded grotesque that reads as a friendlier Inter, and one black pill CTA at #070709. Below the fold the page turns white and stays there: #f6f8fa panels with no borders, 18px card radii, 48px section radii, 100px pills, and blue line icons in small white tiles. There is no rule, no divider and almost no border in the entire 12,000px scroll — separation is done entirely by tonal fill and generous vertical air. Two devices keep it from going bland: a small rounded app-icon chip seated inside each section headline, mid-sentence, so the heading reads as a picture-sentence; and one photographic break, a real sky, behind the pricing cards near the bottom. It is a healthcare product that has decided competence looks like quiet.

Build a light, borderless, softly-rounded product page whose separation comes from tone and air, never from lines.

Type. One rounded grotesque for everything (Open Runde, or Nunito Sans / Hanken Grotesk as substitutes); a neutral grotesque like Inter only for 14px/500 navigation. Scale: display 80px / line-height 72px / -0.04em / weight 600; section head 44px / 48px / -0.04em / 600; card title 16–18px / 600; body 18px / 25px / -0.01em / 400; small 13px / 19px. Keep the display line-height below 1 and the tracking tight — that pairing is what makes a friendly typeface read as confident. Body copy is gray; the two or three phrases that carry the claim are bolded to near-black inside the paragraph, and that is the only emphasis device.

Color. Page #ffffff. Surfaces #f6f8fa. Ink #020203 for headings, #48525a for body, #b2b2b6 for meta. Brand is a pale sky #8fb3d1 used only as gradient, never as a fill behind text: one hero gradient from #8fb3d1 to #f6f8fa over a full viewport, and one repeat of it lower down. Primary action is near-black #070709 with white text. Icons are a single mid blue line weight. Allow no other hue anywhere.

Shape and depth. Radii: 18px cards, 32–48px section panels, 100px pills and avatars. Inset the entire document in a ~24px rounded frame with a thin white gutter. Borders: none by default — if a card needs an edge it gets a lighter fill, not a stroke. Shadows: at most one very wide, very low-opacity ambient shadow under a floating screenshot or a pricing card; never on a button, never on a flat card.

Rhythm. 1200–1360px content width. 120–180px between sections, 48–64px inside a section panel, 24–32px card padding, 12–16px between a card's icon, title and body. Grids are uniform 2-up and 3-up with equal gaps — no mosaic. Center every section heading and its one-line subhead; left-align card content.

The two recognizable moves. (1) Seat a small rounded icon tile inline inside each section headline, mid-sentence, cap-height and baseline-aligned, so headings read as sentences with pictures in them. (2) Break the white exactly once, late in the page, with a full-bleed photograph — sky, paper, anything atmospheric — and float the white cards of your most important section on top of it.

Motion. Sections fade up 16–24px on scroll with a 400–600ms ease-out and a short stagger between siblings. Segmented pill toggles swap a section's screenshot with a cross-fade. Buttons: background lightens slightly on hover, no lift, no scale.