# letters.app

Source: https://letters.app/
Captured: 2026-09-20
Tags: saas, landing, light, both, minimal, corporate-clean, organic, calm, trustworthy, friendly, human
Colors: #8fb3d1, #b9d3e5, #f6f8fa, #6f95be, #48525a, #020203, #b2b2b6, #2b2c2f
Type (h1): Open Runde · 80px/72px · 600 · tracking -3.2px — "Patients, not paperwork"
Type (h2): Open Runde · 44px/48.4px · 600 · tracking -1.76px — "Save hours a week with Letters"
Type (h3): Inter · 14px/21px · 500 · tracking -0.14px — "Pricing"
Type (body): Open Runde · 18px/25.2px · 400 · tracking -0.18px — "Write letters instantly that sound like you. Enjoy unlimited, gold-standard tran"
Type (small): Open Runde Regular · 13px/18.9px · 400 · tracking -0.0756px — "Dear Dr Turner,"
Type (button): sans-serif · 12px/normal · 400 — "Sign up for free"
Button: "Sign up for free" — fill #070709, text #ffffff, radius 100px, border 0px, padding 12px 24px, height 48px, type 12px/400
Radii: 18px (17), 100px (12), 48px (9), 16px (5), 32px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/letters-app/hero.webp?v=a7ce0c39
- Page crop (mid-1): https://media.lvly.design/library/letters-app/mid-1.webp?v=8e763aef
- Page crop (mid-2): https://media.lvly.design/library/letters-app/mid-2.webp?v=19e5c80a
- Hero (mobile): https://media.lvly.design/library/letters-app/mobile-hero.webp?v=28b07797
- Full page (desktop): https://media.lvly.design/library/letters-app/full.jpg?v=db040363
- Full page (mobile): https://media.lvly.design/library/letters-app/mobile-full.jpg?v=fcd7f112
- Clip preview (mp4): https://media.lvly.design/library/letters-app/video-q1dfd5.preview.mp4?v=797f234d

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.

## Steal-worthy details

- The document is an inset card, not a page — a thin white margin wraps the whole viewport and the top corners are cut at ~24px — and the hero inside it is one vertical gradient from `#8fb3d1` to near-white over ~900px, dusted with 1–2px pale dots at low opacity. One gradient and some noise replaces an illustration entirely.
- Display type is compressed, not just large: 80px at a 72px line-height (0.9) with -3.2px tracking (-0.04em), weight 600. The h2 keeps the same ratio at 44px/48.4px/-1.76px, so the whole scale shares one optical signature.
- The only saturated element above the fold is the CTA: a `#070709` pill, 100px radius, 48px tall, 12px/24px padding, white label, no border and no shadow. Black against pale blue does the work a brand color usually does.
- The hero proof is the product's before and after, staged physically: a handwritten scrawl card behind a typed card, both rising out of an envelope, each tagged by a small white pill label with a line icon. The claim is demonstrated in one image instead of a screenshot.
- Section headings seat a small rounded icon tile inline, mid-sentence, and wrap around it ("Save [icon] hours a week with Letters"). The chip is roughly cap-height, aligned to the baseline, and turns a label into a sentence with a picture in it.
- Feature cards are fills, not boxes: `#f6f8fa` ground, zero border, 18px radius, a ~40px white rounded tile holding a blue line icon, then a 16px/600 title and 16px gray body. Tonal layering carries every grouping on the page; borders are essentially absent.
- Pricing breaks the white with the page's only photograph — a real cloud sky — and floats three white cards on it, the middle one featured by a dark header rather than by a badge or a scale-up. One photographic section is enough to reset the eye after 10,000px of white.
- A three-step radius ladder does all the shape work: 18px on cards and inner surfaces, 32–48px on full-width section panels, 100px on every pill and avatar. Nothing on the page has a 4px or 8px corner.

## Style recipe

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.