Foundations

Typography

One family — Inter (400/500/600/700) — doing editorial work. Hierarchy is built from spacing, case and tracking rather than size escalation; that restraint is what makes Peri read as intelligent and mature instead of sporty or clinical.

The ramp, live

Display75%40px / 100% · 700 · −3px

Display MdCapability today30px / 100% · 600

H2Capability today24px / 100% · 700

H3Capability today20px / 25px · 700

InputCapability today18px / 28px · 700

H4Capability today16px / 100% · 600

Display SmCapability today16px / 24px · 600

BodyCapability today14px / 20px · 400

Body heavyCapability today14px / 20px · 500

LabelRecent Trends11px / 14.6px · 600 · +1.1px · caps

CaptionCapability today10px / 15px · 400

Token reference

Style	Size / line	Weight	Tracking	Usage
`Display`	40 / 100%	700	−3px	Hero numbers (capability %)
`Display Md`	30 / 100%	600	0	Large stat values
`H2`	24 / 100%	700	0	Screen titles, onboarding headlines
`H3`	20 / 25px	700	0	Top-bar title, sheet titles
`Input`	18 / 28px	700	0	Input field values
`H4`	16 / 100%	600	0	Card titles, recommendation titles
`Display Sm`	16 / 24px	600	0	Sub-stat values
`Body`	14 / 20px	400	0	Default copy
`Body heavy`	14 / 20px	500	0	Emphasised body, chip labels
`Label`	11 / 14.6px	600	+1.1px · caps	Section eyebrows (FUELLING, RECENT TRENDS)
`Caption`	10 / 15px	400	0	Sync label, timestamps, fine print

The eyebrow — the system's signature move

Every card opens with an 11px semibold uppercase label tracked at +1.1px in a muted brown. This lets card titles stay calm at 14–16px instead of shouting, and gives every surface the same scannable rhythm.

Fuelling

Protein emphasis today

Training load and short sleep both raise protein needs.

Eyebrow + title + body — the standard card opening

Numbers are content

Numeric emphasis (75%, 7.5h, ↓ 12) uses Display styles with tight tracking. Numbers carry meaning in Peri — they are never decorative dashboard ornaments, and they never appear without an interpretation sentence nearby.

Voice pairing

Type and copy work together: headlines are interpretations (“Train lighter”), numbers are evidence (62%), captions are provenance (“based on sleep + training load”). The ramp encodes that hierarchy.

Accessibility

—Body minimum is 14px; 10–11px styles are reserved for eyebrows and captions that never carry sole meaning.
—Uppercase eyebrows keep letter-spacing ≤1.1px — wider tracking at this size harms readability for dyslexic readers.
—Display's −3px tracking applies only at 40px; never apply negative tracking below 24px.
—Line-height 100% styles are single-line only; multi-line copy always uses Body (20px) leading.