Typography
Inter across the interface, Material Symbols Rounded for icons. Set size and weight from the scale below — never ad hoc.
Type scale
Nine steps cover every interface need; if a design needs a tenth, question the design first.
HealthMetrics — the quick brown fox
Display / H1
30px · weight 700 · text-3xl font-bold
Page titles
HealthMetrics — the quick brown fox
Heading / H2
24px · weight 600 · text-2xl font-semibold
Section headings
HealthMetrics — the quick brown fox
Heading / H3
20px · weight 600 · text-xl font-semibold
Sub-sections, card group titles
HealthMetrics — the quick brown fox
Title
18px · weight 600 · text-lg font-semibold
Card titles, dialog titles
HealthMetrics — the quick brown fox
Body / Base
16px · weight 500 · text-base font-medium
Long-form reading content
HealthMetrics — the quick brown fox
Body / Base Semibold
16px · weight 600 · text-base font-semibold
Emphasis within body copy
HealthMetrics — the quick brown fox
Body / Small
14px · weight 500 · text-sm font-medium
Default UI text — tables, descriptions
HealthMetrics — the quick brown fox
Label
14px · weight 600 · text-sm font-semibold
Form labels, buttons
HealthMetrics — the quick brown fox
Caption
12px · weight 500 · text-xs font-medium
Timestamps, helper text, badges
| Step | Size | Weight | Utility | Use |
|---|---|---|---|---|
| Display / H1 | 30px | 700 | text-3xl font-bold | Page titles |
| Heading / H2 | 24px | 600 | text-2xl font-semibold | Section headings |
| Heading / H3 | 20px | 600 | text-xl font-semibold | Sub-sections, card group titles |
| Title | 18px | 600 | text-lg font-semibold | Card titles, dialog titles |
| Body / Base | 16px | 500 | text-base font-medium | Long-form reading content |
| Body / Base Semibold | 16px | 600 | text-base font-semibold | Emphasis within body copy |
| Body / Small | 14px | 500 | text-sm font-medium | Default UI text — tables, descriptions |
| Label | 14px | 600 | text-sm font-semibold | Form labels, buttons |
| Caption | 12px | 500 | text-xs font-medium | Timestamps, helper text, badges |
Rules of thumb
- UI chrome defaults to Body / Small (14px); reading content to Body / Base (16px).
- One H1 per page. Heading levels step down without skipping.
- Colour for hierarchy comes from tokens (
text-foregroundvstext-muted-foreground) — never opacity on top of a token.
Background colour
Two background layers: chrome (top bars, side menus) sits on --background; product content regions sit on --canvas — a muted warm cream in light mode, deep navy-black in dark — with white cards floating on top.
Motion
Motion confirms cause and effect — fast, purposeful and always interruptible. Nothing in the system animates for decoration.