Typography

Type system

25 semantic tokens. 2 typefaces. Every text element maps to exactly one token. Raw Tailwind text modifiers are banned.

Typefaces

Headlines (h1–h4)

Plus Jakarta Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

--font-headline · 400/500/600/700/800

Display (hero only)

Raleway

ABCDEFGHIJKLMNOPQRSTUVWXYZ

--font-display · .t-display only · 800

Body + UI

DM Sans

abcdefghijklmnopqrstuvwxyz 0123456789

--font-sans · 400/500/700

Heading scale

Display

.t-displayh1 (Hero)48→80px · 800 · 0.95 · -0.04em · UPPERCASE

Page heading one

.t-h1h1 (Page)36→56px · 700 · 1.10 · -0.03em · Sentence case

Section heading two

.t-h2h228→40px · 700 · 1.20 · -0.02em · Sentence case

Card heading three

.t-h3h320→28px · 600 · 1.30 · -0.01em · Sentence case

Grid heading four

.t-h4h416→20px · 600 · 1.40 · -0.005em · Sentence case

Labels and UI

Eyebrow label

.t-eyebrow11.5px · 700 · +0.3em · UPPERCASE · Purple

Label text

.t-label11.5px · 700 · +0.18em · UPPERCASE

Large label text

.t-label-lg12.8px · 700 · +0.2em · UPPERCASE

Small label text

.t-label-sm11.2px · 700 · +0.15em · UPPERCASE

Meta text · April 10, 2026

.t-meta12.8px · 500 · +0.02em

Caption text for annotations

.t-caption13.1px · 400 · 1.50

Body scale

Lead paragraph for section introductions. Larger and more spacious than standard body.

.t-body-intro17.6→21.6px · 400 · 1.65 · max-width: 42ch

Extra-large body for prominent descriptions and page intros.

.t-body-xl19.2→23.2px · 400 · 1.60

Large body text for secondary content with generous reading width.

.t-body-lg18px · 400 · 1.70

Standard body text. Primary content typeface with generous line height for readability.

.t-body16.8px · 400 · 1.80

Small text for secondary information and supporting details.

.t-small14.4px · 400 · 1.60 · Gray 500

Special tokens

Testimonial or pull quote rendered in medium italic for editorial emphasis.

.t-quote17.6→22.4px · 500 · Italic · Gray 500

Metadata italic text

.t-metadata18px · 700 · Italic · Plus Jakarta Sans · Gray 900

Helper text for form fields

.t-helper12px · 500 · Gray 500

Error message text

.t-error12px · 700 · Crimson (#EB0045)

Button call to action

.t-cta12px · 700 · +0.15em · UPPERCASE · Used inside Button variant="cta"

Do / Don't

Use t-h2 on an h2 element

Use t-body for paragraph text

Use t-eyebrow for section labels

Use t-caption for annotations

Don't

Apply t-h2 to a div or span

Use text-3xl, text-lg, or text-sm

Add uppercase, italic, or tracking-*

Use text-[18px] or font-bold directly

Italic variants

Display, H1, H2, and H3 have italic variants. Append -italic to the token.

.t-display-italicSame specs + font-style: italic

.t-h1-italicSame specs + font-style: italic

.t-h2-italicSame specs + font-style: italic

.t-h3-italicSame specs + font-style: italic