Foundations

Typography

One family, two weights, one scale. Light and regular only — hierarchy comes from size and colour, never from bold.

The scale

Every size in the system. Use the name, not the number.

Hero--t-hero · Calm numbers, clear words
Display--t-display · Calm numbers, clear words
Heading 1--t-h1 · Calm numbers, clear words
Heading 2--t-h2 · Calm numbers, clear words
Heading 3--t-h3 · Calm numbers, clear words
Title--t-title · Calm numbers, clear words
Lead--t-lead · Calm numbers, clear words
Label--t-label · Calm numbers, clear words
Body--t-body · Calm numbers, clear words
Small--t-small · Calm numbers, clear words
Caption--t-caption · Calm numbers, clear words
Micro--t-micro · Calm numbers, clear words

Roles

How the scale is used on a dashboard.

Page title · 46px · 400 · −0.035em

Financial Analytics

Card title · 15.5px · 400 · −0.01em

Income overview

Big figure · 40–72px · 400 · −0.045em · tabular

€384,567.45

Label · 13–14px · muted

vs 2025

Body · 14px · 1.5

Spending sits inside the safe range this period.

Numbers

Tabular figures keep columns straight. Big figures carry a small currency sign at 0.42em on the baseline.

Tabular

€207,666.42
€96,141.86
€80,759.17

Figure + small sign

€15,200.00

Light display

57.5%