Letters. A sterile white desk beneath a wash of soft blue, dotted with surgical-blue instruments.
- SaaS
- Light theme
- 9 colors
- 7 typefaces
Letters is a medical letterwriting tool that opens with an open-sky gradient hero — a soft blue atmospheric band that sets a calm, clinical tone before dropping into a clean white workspace. The system is 99% monochrome: pure white canvas, near-black text (#070709), pill-shaped dark CTAs, and 18px rounded cards floating on hairline shadows. One vivid blue (#2597d0) is reserved for functional punctuation — icons, micro-graphics, waveform players — never for buttons or large fills. Typography leans on Open Runde, a geometric humanist sans with aggressive negative tracking at display sizes (-0.04em at 80px) that tightens headlines into confident blocks. Components feel medical-instrument light: thin borders, generous card padding, pill buttons, and a reserved use of elevation that lets the sky hero do the emotional work.
Letters design system
Brand1
Icon strokes, mic glyph, waveform player, and small functional accents — the single chromatic note across the interface
Accent1
Hero background — vertical wash from medium blue to near-white that establishes the medical-aspirational mood
Neutrals7
Primary text, filled CTA buttons, and dark UI surfaces — near-black chosen over pure #000 to soften contrast against white canvas
Heading color and strong dividers — slightly lighter than Obsidian for less severe emphasis
Body text, secondary copy, and muted borders — the dominant neutral for non-heading content
Tertiary text and inactive border states — used for placeholder labels and disabled affordances
Card box-shadow tint and subtle blue-toned surface — keeps elevation feeling atmospheric rather than gray
Secondary card surfaces and section backgrounds — separates feature blocks from main canvas
Page background, card surfaces, and button text — the primary canvas across all sections below the hero
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Obsidian on Surgical Blue
6.15 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
