Type

One scale for every app. Size, leading, tracking and weight come as a set per role, so a heading can't end up with body leading by accident.

The roles

I make complicated products feel obvious.

How much of your time has gone missing?

A gallery of good taste

lead

Case studies, side projects and the design systems work. 12 years across fintech, broadcast and consumer apps.

body

A calculator and a field guide to the hours that policy, physics and space weather have taken from you. Daylight saving takes an hour each spring and gives most of it back each autumn. Relativity takes much less, and keeps it.

Rate this condiment

label

Best before

figures

Current streak 41 days, longest 118

Values

Role	Size	Leading	Tracking	Weight
h1	`var(--ds-text-h1)`	1.06	-0.03em	600
h2	`var(--ds-text-h2)`	1.1	-0.025em	600
h3	`var(--ds-text-h3)`	1.2	-0.015em	600
lead	`var(--ds-text-lead)`	1.5	0	400
body	`var(--ds-text-base)`	1.6	0	400
ui	`var(--ds-text-md)`	1.4	0	500
label	`var(--ds-text-sm)`	1.4	0	500
figures (mono)	`var(--ds-text-mono)`	1.4	0	400

Use the role, for example --ds-type-h2-size with --ds-type-h2-leading, rather than the loose sizes below.

Sizes

Token	Value
`--ds-text-micro`	11px
`--ds-text-mono`	12.5px
`--ds-text-xs`	13px
`--ds-text-sm`	14px
`--ds-text-md`	15px
`--ds-text-base`	17px
`--ds-text-lead`	clamp(16px, 1.7vw, 19px)
`--ds-text-h3`	clamp(20px, 2.4vw, 28px)
`--ds-text-h2`	clamp(30px, 4.4vw, 52px)
`--ds-text-h1`	clamp(34px, 6.6vw, 78px)

Faces

Each theme has a pair: --ds-font-display for headings and --ds-font-sans for everything else. There's no monospace. The mono slot points at the text face so old code still renders, and figures use font-variant-numeric: tabular-nums.

Labels are sentence case, in the text face, at the label role, with no tracking. Positive tracking is for real acronyms set in capitals.

Theme	Display	Text
Core	Bricolage Grotesque	IBM Plex Sans
Condimental	Young Serif	Figtree
Dissonance	Libre Baskerville	Libre Franklin
Household	SF Pro Rounded	SF Pro Text
Routine	Fraunces	Hanken Grotesk
Specimen	Source Serif 4	Source Sans 3
Parchment	IM Fell English	Instrument Sans