Typography

Inter for everything, IBM Plex Mono only for small technical labels. Headlines are regular weight with tight tracking and a two-tone split: the first half primary, the second half grey. Sizes scale with the breakpoints (mobile, tablet from 768px, desktop from 1280px).

Headlines

Resize the window: each level has three sizes.

Two-tone headlines on every page. The second half always grey.

Hero · 34 / 48 / 64px · line 1.04 · tracking -0.03em

Built for the people who ship. Not for the slide deck.

Section · 26 / 32 / 48px · line 1.1 · tracking -0.025em

“We replaced three tools with one page and nobody noticed the switch.”

Quote / sub-section · 24 / 28 / 36px · line 1.2 · tracking -0.02em

A card title that can run to two lines

Card title · 19px · medium · line 1.3 · tracking -0.02em

Body and small text

Body copy sits in Inter at 16 to 18px with a 1.55 line height. Paragraphs stay under 560px wide so lines keep to about 70 characters.

Lead · 16 / 18px · line 1.55 · text-nav

Card copy and list descriptions use 14px. Never ship text under 12px, even on phones.

Body · 14px · line 1.55 · text-nav

A list item or step title

List item · 15 / 18px · medium

ProductCustomersPricing

Navigation link · 14px · medium · text-nav, active in text-primary

01 / 07 · Case study

Mono label · 12px · uppercase · tracking 0.08em · counters, tags and captions only (never above a headline)

Rules

Rule	Detail
Weights	400 for headlines and body, 500 for card titles, nav links and list items. Nothing bolder.
Two-tone	Split every headline with <TwoTone text muted>. The grey half uses text-muted (3:1 on the page, AA for large text).
Line height	Figma “normal” → leading-[normal]. Never leading-normal (that is 1.5).
Tracking	Convert px to em so it scales: -1.92px at 64px = -0.03em. Tighten a little instead of adding breaks.
Wrapping	text-balance for display lines, text-pretty for paragraphs, max-w for measure. No forced <br> in long text.
Minimum	12px. Mobile body 14 to 16px, card titles 18 to 19px.