Typography

Inter for sans (and headings), Iowan Old Style for serif, and JetBrains Mono for mono. A 14px base with a ratio-based scale — headings stay proportional if the base changes; body line-height is relaxed (1.65).

Families

font-sansInter
font-serifIowan Old Style
font-monoJetBrains Mono

Sizes

Aatext-xs · 10px
Aatext-sm · 12px
Aatext-base · 14px
Aatext-lg · 17px
Aatext-xl · 20px
Aatext-2xl · 24px
Aatext-3xl · 30px
Aatext-4xl · 37px
Aatext-5xl · 45px
Aatext-6xl · 56px
Aatext-7xl · 67px
Aatext-8xl · 90px
Aatext-9xl · 119px

Weights

Three weights only: normal (400), medium (500), semibold (600).

The quick brown foxfont-normal · 400
The quick brown foxfont-medium · 500
The quick brown foxfont-semibold · 600

Text styles

Canonical pairings of size × leading × weight × font. Use these together — don't pair text-base with a different leading-* ad-hoc; if a use case needs a different combo, propose a new style here.

Use	Class	Size	Font	When to use	Sample
Body (default)	text-base font-normal	14 / 23	sans	Default for paragraphs, list items, prose. Uses the auto line-height from the fontSize token — no explicit leading-* needed.	The quick brown fox
Emphasis paragraph	text-base font-medium	14 / 23	sans	Bump a single paragraph or sentence that needs to stand out within prose. Don't use for titles.	The quick brown fox
Description / secondary	text-base font-normal text-foreground	14 / 23	sans	Field descriptions, captions under content, muted metadata. Same size as body, tonally quieter.	The quick brown fox
Caption / metadata	text-xs leading-4 font-normal	10 / 16	sans	Tiny labels, timestamps, badge text.	The quick brown fox
Subhead	text-lg leading-7 font-medium	17 / 24	sans	Subsection headers within a card or section.	The quick brown fox
Section heading	text-xl leading-7 font-medium tracking-tight	20 / 24	sans	Top of a page section.	The quick brown fox
Page heading	text-3xl leading-9 font-semibold tracking-tight	30 / 36	sans	Page title (PageHeader).	The quick brown fox
Display	text-5xl leading-none font-semibold tracking-tight	45 / 45	sans	Marketing hero copy. Use sparingly.	The quick brown fox
Code	text-sm leading-5 font-mono	12 / 18	mono	Inline code references, prop names, file paths.	The quick brown fox

Size column shows font-size / line-height in pixels.

Line heights

Unitless, so they scale with font-size. Rule of thumb: larger text → tighter leading; smaller body text → looser. Body defaults to leading-relaxed — you rarely set leading by hand.

Class	Value	Use for
leading-tight	1.25	Display & large headings (text-3xl and up) — big type reads better tight.
leading-snug	1.375	Headings & subheads (text-lg–2xl).
leading-normal	1.5	Dense UI — labels, table cells, menu rows, captions.
leading-relaxed	1.65	Body & prose — the readable default for paragraphs. A bare text-base already resolves to this.
leading-loose	2	Airy, sparse layouts (e.g. spaced-out lists). Use sparingly.