Foundations

Typography

System sans for UI plus a quieter technical sans for forensic data. Tight tracking on display, generous tracking on caps eyebrows, and tabular numerics everywhere a number could land in court.

Stacks

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

Used for most product and marketing UI. Fast, native, no FOUT, renders predictably on every device.

Technical · Forensic
Aa 0123
ui-sans-serif, system-ui,
-apple-system, "Segoe UI", sans-serif

Section refs, parcel IDs, coordinates, dates, code blocks, anywhere precision matters more than warmth.

Type scale

11 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

Aa
Regular · 400
Body, defaults
Aa
Medium · 500
UI controls, labels
Aa
Semibold · 600
Titles, emphasis
Aa
Bold · 700
Display, page titles

Tracking & numerics

Eyebrow tracking · 0.12em uppercase
Storm event · Q3 2024
Tabular numerics
$ 12,481.50
$  3,902.00
$    418.75

Usage

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