Foundations

Typography

One system sans for every visible surface. Tight tracking on display, generous tracking on caps eyebrows, and tabular numerics anywhere precision matters.

Stacks

Sans · UI
Aa Bb 0123
ui-sans-serif, system-ui,
-apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial

Used for every visible text surface. Fast, native, no FOUT, renders predictably on every reviewer machine.

Tabular · Data
Aa 0123
font-variant-numeric: tabular-nums;
font-family: var(--font-sans);

Section refs, parcel IDs, coordinates, dates, and code blocks use the same sans family with tabular numerics.

Type scale

8 steps. Display sizes use tight tracking. Body sits at 14px (UI) and 15px (long-form). Mobile reduces display sizes via clamp.

6xl · 60
SkyCanvass forensics
Display
5xl · 48
SkyCanvass forensics
Hero h1
4xl · 36
SkyCanvass forensics
Page title
3xl · 30
SkyCanvass forensics
—
2xl · 24
SkyCanvass forensics
Section h2
xl · 20
SkyCanvass forensics
Card title h3
lg · 17
SkyCanvass forensics
Lede
md · 15
SkyCanvass forensics
Long-form body
base · 14
SkyCanvass forensics
UI body
sm · 13
SkyCanvass forensics
Labels, captions
xs · 12
SkyCanvass forensics
Eyebrow, helper text

Weights

Seven weights total. Most UI lives in 400-700 — 300 and 800-900 are reserved for editorial display, large hero numerals, and stat callouts. Skip 100/200 (too thin for our information density).

Aa
Light · 300
Editorial display only
Aa
Regular · 400
Body, defaults
Aa
Medium · 500
UI controls, labels
Aa
Semibold · 600
Titles, emphasis
Aa
Bold · 700
Display, page titles
Aa
Extrabold · 800
Stat callouts, big numerals
Aa
Black · 900
Hero display, marketing headlines

Tracking & numerics

Eyebrow tracking · 0.12em uppercase
Storm Event · Q3 2024
Tabular numerics
__BODY__nbsp;12,481.50
__BODY__nbsp; 3,902.00
__BODY__nbsp;   418.75

Usage

Do
Use tabular numerics for any number that could end up in evidence: measurements, coordinates, parcel IDs, dollar amounts, and dates.
Don't
Mix display sizes within a single hierarchy. Pick one h1 size per page; use h2 and h3 for descent.