Typography
Three voices — an optical serif for display, Geist for the interface, Geist Mono for data.
Lumen speaks in three voices — the type equivalent of the brand's core tension, the warmth of care and the precision of an instrument.
The three voices
| Voice | Face | Carries | Where |
|---|---|---|---|
| Display | Fraunces (optical serif) | warmth, character, the human | hero, page & section titles |
| Interface | Geist (grotesque sans) | precision, calm, legibility | body, UI, labels, nav |
| Data | Geist Mono (tabular) | exactness | vitals, labs, doses, IDs, time |
Fraunces is a variable old-style serif with an optical-size axis — it adapts its contrast to the size, and that optical idea is the same one the whole brand comes from (the lens, the eye). It reads warm and editorial without tipping into clinical-cold or consumer-cute. Geist stays the workhorse — neutral and precise, it does the reading. The serif is the warmth; the sans is the instrument.
Restraint
The serif is spent on display only — hero, h1, h2. Smaller headings (h3+), UI, and all body stay Geist. Two faces, clear roles; never serif body text.
Type scale
Every role, rendered in its real face, size, and weight:
Tokens: --font-display (= --font-serif), --font-sans, --font-mono — or the Tailwind utilities
font-display, font-sans, font-mono from lumen/tailwind.css.
Numerals
Anything quantitative — vitals, labs, doses, gestational age — sets in Geist Mono with
font-variant-numeric: tabular-nums so columns stay aligned and digits never reflow as they tick.
Data spans three sizes: metric (30px) for the one featured number on a card, data (16px) for
standard readouts and tables, and data · sm (12px) for units, timestamps, IDs, and axis labels.