Font stacks

Four semantic tokens, one family

--font-body

IBM Plex Sans — body prose, the workhorse

--font-mono

IBM Plex Mono — code, labels, numerics, eyebrows

--font-ui

UI labels — same as body by default; sites can flip to mono

--font-display

Display headings — same as body by default; serif if a site overrides

Type scale

Fluid above body, fixed at and below body

--text-xs 0.72rem The quick brown fox
--text-sm 0.85rem The quick brown fox
--text-base 1rem The quick brown fox
--text-lg 1.2rem The quick brown fox
--text-xl clamp(1.35rem, 1.15rem + 0.4vw, 1.55rem) The quick brown fox
--text-2xl clamp(1.6rem, 1.25rem + 0.6vw, 1.85rem) The quick brown fox
--text-3xl clamp(1.9rem, 1.45rem + 0.8vw, 2.35rem) The quick brown fox
--text-4xl clamp(2.4rem, 1.8rem + 1.2vw, 3.2rem) The quick brown fox

Line heights

TokenValueUse
--lh-base 1.55 body prose
--lh-tight 1.3 meta, dense lists
--lh-hero 1.15 large display headings

Sample prose

How body, mono, and display work together

This is a section heading

Plex Sans handles body text without complaint. Reading column kept narrow keeps the line length within a comfortable range; lines that get too long force the eye to track too far between row returns and reading slows down.

Inline code references and emphasis sit naturally in the text. Links pick up the accent color and stay readable when the page flips to dark mode.

Subhead level

Sub-headings step down from the section title without disrupting the body grid. Numerics like 2026-04-28 or $48.27 align nicely when set in mono.

// Code blocks use --font-mono
const accent = getComputedStyle(root).getPropertyValue('--accent');
console.log(accent.trim());