Foundations
Typography
Three typefaces, each with a job. Petrona brings warm, slightly offbeat character to headings, Libre Franklin keeps the interface crisp at small sizes, and IBM Plex Mono signals precision for data, IDs, and audit trails.
Typefaces
Display — Petrona
Compliance, handled.
UI / Body — Libre Franklin
The quick brown fox jumps over the lazy dog. 1234567890
Mono — IBM Plex Mono
RA-2026-0613 · model v4 · 14,208 rows · hash 9f3c…
Type scale
A golden scale: each rung is √φ (×1.272) from the last, anchored at 15px — so every other rung is an exact golden ratio (φ ≈ 1.618). Display sizes use Petrona; body down uses Libre Franklin.
Display · 50
Page title · 39
Heading · 31
Section · 24
Lede / large body · 19
Default UI text · 15
Small / secondary · 13
Caption / overline · 12
Tokens
| Token | Size | Typical use |
|---|---|---|
--text-4xl | 50px | Hero / landing display · 15×φ²√φ |
--text-3xl | 39px | Page titles · 15×φ² |
--text-2xl | 31px | Major headings · 15×φ√φ |
--text-xl | 24px | Section headings · 15×φ |
--text-lg | 19px | Lede, card titles · 15×√φ |
--text-md | 17px | Practical mid-step (off-ladder) |
--text-base | 15px | Default body / UI · anchor |
--text-sm | 13px | Secondary (practical) |
--text-xs | 12px | Captions (practical exception) |
Weights
Regular 400 — body copy
Medium 500 — emphasis, labels
Semibold 600 — buttons, headings
Bold 700 — sparingly, for weight