---
title: "Letters design system"
variant: extended
source: https://letters.app/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/letters-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Letters · Design System

> Calm clinical software, softened with sky-blue gradients.

**Theme:** light · **Industry:** health · **Source:** https://letters.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Letters presents its medical letter-writing and transcription tools in a bright, spacious interface with soft blue gradient feature panels. Rounded product cards, restrained typography, and generous white space make a complex clinical workflow feel approachable.

## North star

Keep the page calm and spacious, reserving soft blue gradients for high-impact moments and letting product UI explain the workflow.

## Overview

The page uses a white canvas as its primary visual field, interrupted by pale-gray product cards and large, softly rounded blue-gradient panels. The hero establishes the signature treatment: a blue sky-like gradient behind centered white copy and a black pill-shaped primary action. The gradient also returns in pricing and practice-onboarding content, while most feature sections stay white or very light gray so the product UI remains the focus. Open Runde carries the main interface, with compact, closely tracked headings and readable body copy; The Doctor FreeVersion adds a distinctive display voice in selected headings. Content is centered within a measured 658px page width, with spacious section breaks and occasional two- or three-column feature layouts. Product mockups, letter previews, and transcription controls appear as clean, softly layered illustrations rather than lifestyle photography. Rounded cards and subtle shadows provide separation without heavy borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, white hero copy, and light surfaces behind product mockups. |
| Slate Quiet | `#60606c` | `--color-slate-quiet` | semantic | Muted navigation and secondary explanatory text on the light canvas. |
| Cloud Surface | `#f5f5f5` | `--color-cloud-surface` | surface | Pale gray bands and feature-card backgrounds that separate product examples from the page canvas. |
| Soft Ink | `#070709` | `--color-soft-ink` | brand | Primary headings and the dark sign-up CTA against white or pale-gray surfaces. |
| Sky Signal | `#779bc1` | `--color-sky-signal` | accent | Leading blue in signature gradients, especially the hero and pricing panels. |
| Mist Blue | `#cbdfec` | `--color-mist-blue` | accent | Lightest blue endpoint in the signature gradient, creating a soft lower fade. |
| Horizon Blue | `#9abfda` | `--color-horizon-blue` | accent | Mid-gradient transition in blue feature panels; not a standalone UI emphasis color. |
| Cloud Lilac | `#bebecc` | `--color-cloud-lilac` | semantic | Minor subdued text detail; not a defining surface or brand color. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Occasional black text in measured components and small product-interface details. |
| Ash Caption | `#aeaeb7` | `--color-ash-caption` | semantic | Low-emphasis text and fine details within product mockups. |
| Charcoal Detail | `#151515` | `--color-charcoal-detail` | semantic | Occasional near-black heading detail; use sparingly alongside Soft Ink. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Cloud Surface) · `--color-text` → `#070709` (Soft Ink) · `--color-text-muted` → `#60606c` (Slate Quiet) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#779bc1` (Sky Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#070709` | `#ffffff` | 20.13:1 | AAA |
| `#070709` | `#f5f5f5` | 18.46:1 | AAA |
| `#60606c` | `#ffffff` | 6.2:1 | AA |
| `#60606c` | `#f5f5f5` | 5.69:1 | AA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#779bc1` | `#ffffff` | 2.9:1 | fail |
| `#779bc1` | `#f5f5f5` | 2.66:1 | fail |

### Gradients

- `linear-gradient(rgb(119, 155, 193) 0%, rgb(154, 191, 218) 58%, rgb(203, 223, 236) 100%)`
- `linear-gradient(rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.9) 25%, rgb(245, 245, 245) 100%)`
- `linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)`
- `linear-gradient(rgb(119, 155, 193) 0%, rgb(201, 220, 233) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Open Runde | `--font-body` | webfont | 400, 600, 500, 700, 900 | Primary display, headings, body, and navigation typography. | Nunito Sans |
| Open Runde Regular | `--font-open-runde-regular` | webfont | 400 | Regular-weight copy and secondary text. | Nunito Sans |
| The Doctor FreeVersion | `--font-display` | webfont | 400 | Distinctive decorative display headings, including selected section titles. | Instrument Serif |
| Open Runde Semibold | `--font-open-runde-semibold` | webfont | 400 | Navigation and emphasized labels. | Nunito Sans |
| Open Runde Medium | `--font-open-runde-medium` | webfont | 400 | Subheadings and medium-emphasis product labels. | Nunito Sans |
| inter | `--font-inter` | webfont | 400, 500 | Minor interface or embedded product UI text. | Inter |

- **Open Runde:** Use friendly rounded sans forms; headings are compact and tightly tracked, with regular-to-semibold weights.
- **Open Runde Regular:** Keep body copy calm and readable; avoid overly tight or condensed styling.
- **The Doctor FreeVersion:** Use as a restrained contrast voice rather than for long copy; measured heading is regular weight.
- **Open Runde Semibold:** Use moderate emphasis, preserving the soft rounded character and sentence case.
- **Open Runde Medium:** Use medium weight to distinguish feature labels without introducing heavy visual contrast.
- **inter:** Use sparingly for compact product-interface details; the page's primary voice remains Open Runde.

### Type scale — Augmented Fourth (ratio ≈ 1.452, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 0.9 | -0.04em | — | Open Runde | Oversized centered hero headline. |
| h1 | 44px | 600 | 1.1 | -0.04em | — | Open Runde | Primary page and major feature headlines. |
| h2 | 38px | 400 | 0.9 | -0.01em | — | The Doctor FreeVersion | Decorative section headings using the display serif-like face. |
| h3 | 28px | 500 | 1.2 | -0.03em | — | Open Runde | Feature-card titles and secondary section headings. |
| body | 18px | 400 | 1.4 | -0.01em | — | Open Runde | Explanatory paragraphs and supporting product descriptions. |
| caption | 16px | 400 | 1.4 | -0.01em | — | Open Runde | Small interface labels, notes, and supporting captions. |
| nav | 17px | 400 | 1.4 | -0.01em | — | Open Runde Semibold | Header navigation links and menu labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 9, 10, 12, 16, 18, 20, 24, 28, 32, 36, 40, 52, 100 px.
- Section rhythm 100px · element gap 10px · card padding 40px · max content width 658px.

Use a narrow centered content frame with a measured 658px maximum width for the core text and product storytelling. Arrange sections in a single vertical sequence with generous measured section spacing, then vary content between centered headings, two-column feature cards, and three-column supporting features. Keep the desktop header compact, align most headings centrally, and let the hero and pricing panels span broadly with rounded edges. The measured density is spacious; do not compress the long page into a tight dashboard.

## Shape & elevation

- Radius: button `9999px` · card `48px` · nav `9999px` · xs `10px` · sm `16px` · md `18px` · lg `30px` · xl `32px` · 2xl `36px` · pill `9999px`
- Shadow `md` (other, card): `rgba(22, 106, 196, 0.01) 0px 0.421531px 0.421531px 0px, rgba(22, 106, 196, 0.04) 0px 1.60197px 1.60197px 0px, rgba(22, 106, 196, 0.17) 0px 7px 7px 0px`
- Shadow `md-2` (card): `rgba(22, 107, 197, 0) 0px 0.421531px 0.421531px 0px, rgba(22, 107, 197, 0.01) 0px 1.60197px 1.60197px 0px, rgba(22, 107, 197, 0.05) 0px 7px 7px 0px`
- Shadow `md-3` (button): `rgba(36, 36, 40, 0.1) 0px 1px 2px 0px, rgba(36, 36, 40, 0.09) 0px 3px 3px 0px, rgba(36, 36, 40, 0.05) 0px 6px 4px 0px, rgba(36, 36, 40, 0.01) 0px 11px 4px 0px, rgba(36, 36, 40, 0) 0px 17px 5px 0px`
- Shadow `hairline` (other): `rgba(228, 229, 231, 0.24) 0px 1px 2px 0px`
- Shadow `md-4` (card): `rgba(9, 62, 119, 0.01) 0px 0.421531px 0.421531px 0px, rgba(9, 62, 119, 0.02) 0px 1.60197px 1.60197px 0px, rgba(9, 62, 119, 0.1) 0px 7px 7px 0px`
- Shadow `xl` (card): `rgba(16, 55, 132, 0) 0px 17px 37px 0px, rgba(16, 55, 132, 0) 0px 67px 67px 0px, rgba(16, 55, 132, 0) 0px 150px 90px 0px, rgba(16, 55, 132, 0) 0px 266px 106px 0px, rgba(16, 55, 132, 0) 0px 416px 116px `

Favor flat white and pale-gray surfaces, using very subtle shadows to lift cards and mockups from the canvas. Cards have strongly rounded corners, while buttons and navigation pills are fully rounded. Borders are not a defining separator; use surface contrast, whitespace, and delicate shadow layering instead.

## Imagery

Use product-focused interface mockups: letter previews, transcription controls, document upload examples, and device screens. Render them as clean, pale UI illustrations on white or soft-gray card surfaces, with occasional layered paper-like elements. The hero and pricing blocks use blue sky-like gradients as the backdrop. Avoid relying on lifestyle photography; the visual evidence is workflow and interface.

## Components

### Hero gradient panel

Large rounded blue-gradient field with centered white headline and supporting copy, a black pill CTA, and layered letter-preview artwork.

### Pill navigation

Compact header links in Open Runde, with rounded sign-up treatment and restrained dark or muted text.

### Feature cards

Two-column pale-gray cards with rounded corners, small labels, dark headings, and embedded product UI illustrations.

### Supporting feature tiles

Small, softly separated feature blocks with a compact icon, concise title, and short explanatory copy.

### Product workflow mockup

Letter, transcription, or upload UI presented as a clean illustration with subtle shadows and ample surrounding whitespace.

### Pricing panel

Broad rounded blue-gradient section containing three white plan cards, with the central paid plan and dark CTA emphasized.

### Trust and privacy cards

Light cards with small cyan-toned icons, concise reassurance headings, and muted supporting text.

### Measured component styles

- **Primary button** (“Sign up for free”): background #070709 · text #0000ee · radius 100px · padding 12px 24px · 400 12px sans-serif · shadow rgba(36, 36, 40, 0.1) 0px 1px 2px 0px, rgba(36, 36, 40, 0.09) 0px 3px 3px 0px, r
- **Secondary button** (“About Letters”): background #ffffff · text #000000 · radius 100px · padding 12px 14px 12px 24px · 400 12px sans-serif
- **Card** (“Request Edits Refine your letter by requ”): background #fafafa · text #000000 · radius 48px · padding 40px · 400 12px sans-serif
- **Navigation item** (“Use cases Features Pricing Our doctors”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use white as the dominant page canvas.
- Reserve blue gradients for hero and high-impact feature panels.
- Keep section layouts centered and generously spaced.
- Use rounded cards with subtle shadows, not heavy borders.
- Let product-interface illustrations explain the workflow.
- Use Open Runde for the primary typographic voice.

## Don't

- Do not turn the page into a dense admin dashboard.
- Do not apply gradients to every card or section.
- Do not introduce strong saturated colors absent from the measured palette.
- Do not use heavy outlines or harsh dividers.
- Do not use lifestyle photography as the main storytelling device.
- Do not replace the rounded, calm typography with sharp condensed styles.

## Agent prompt

Build a new page in the Letters visual style: a bright, spacious medical SaaS experience on Gallery White (#ffffff), with Soft Ink (#070709) headings and Cloud Surface (#f5f5f5) product cards. Use Sky Signal (#779bc1), Horizon Blue (#9abfda), and Mist Blue (#cbdfec) as a restrained gradient treatment for a prominent hero or pricing section. Set the main type in Open Runde or a close rounded sans substitute, reserving The Doctor FreeVersion-style display contrast for selected headings. Center the primary content, allow two- and three-column feature layouts, and preserve generous section rhythm. Use rounded cards, pill-shaped CTAs, subtle shadows, and clean product-interface illustrations. Keep copy concise, maintain strong contrast, and make the workflow—not decorative imagery—the focus.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy inside a large rounded blue-gradient panel, with CTA and layered letter artwork below. | Primary sign-up CTA, Before-and-after preview | Blue gradient, White headline, Black pill button, Layered document mockup |
| 2 | feature-grid | Centered section heading followed by two pale-gray feature cards in a two-column layout. | Choose product workflow, Explore feature details | Rounded gray cards, Product UI previews, Small category labels |
| 3 | how-it-works | Centered heading and compact Letters/Transcribe selector above a spacious two-column content area. | Switch workflow tab, Compare product modes | Centered selector, Minimal heading, Open white space |
| 4 | feature-grid | Centered title above two large feature cards and a row of three smaller supporting tiles. | Understand personalization, Review input sources, Scan supporting capabilities | Two-column cards, Three-column feature row, Product mockups |
| 5 | product-showcase | Single centered heading and explanatory copy above a sparse medical terminology illustration. | Show transcription accuracy, Explain medical vocabulary | Centered composition, Floating terminology labels, Large white margins |
| 6 | feature-grid | Centered section title, two large feature cards, then three compact supporting feature tiles. | Record consultations, Review transcription capabilities | Rounded pale cards, Timer UI, Compact icon tiles |
| 7 | timeline | Centered heading followed by a two-column onboarding presentation with numbered steps and an active blue panel. | Follow onboarding steps, Invite practice team | Numbered step markers, Blue gradient active card, Team interface illustrations |
| 8 | testimonials | Centered trust heading above a broad, softly shaded testimonial area with quote cards. | Read peer reviews, Browse testimonial cards | Light background band, White quote cards, Attribution details |
| 9 | other | Three horizontally aligned privacy assurances with small icons and short supporting copy. | Scan security assurances, Review data handling | Three-column cards, Small cyan-toned icons, Muted body copy |
| 10 | gallery | Full-bleed visual break featuring a wide, rounded blue-gradient product presentation. | Pause between content groups, View product visual | Full-bleed media, Rounded gradient panel, Product imagery |
| 11 | pricing | Centered pricing title over three plan cards within a large rounded blue-gradient panel. | Compare plan tiers, Choose billing cadence, Start a trial | Three pricing cards, Central plan emphasis, Black primary CTA |
| 12 | cta | Centered device-sync headline, short explanatory copy, sign-up CTA, and a product-device showcase below. | Sign up, Understand cross-device continuity | Centered copy, Pill CTA, Multi-device product imagery |
| 13 | gallery | A final row of three device and product-screen visuals on a white canvas. | View product across devices | Three product images, White background, Soft shadowing |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/letters-app