Typography Guidelines

The system uses two families from nextgen/tokens/tailwind.css:

Role	Face	Utility
Headings / display / quotes	Juana (serif)	`font-heading` (default on `h1`–`h6`)
Body / UI / eyebrows / Inter alt headings	Inter (sans)	`font-body` (default on `body`)

Browse live samples on Typography.

Scale (use token utilities)

Display / headings (Juana): text-display, text-display-2, text-h1 … text-h6

Body (Inter): text-body-1 … text-body-7

Supporting: text-caption-1, text-label-m, text-label-s, text-button-l, text-button-s

Eyebrows (Inter + uppercase in templates): text-eyebrow-3 → tablet:text-eyebrow-2 → desktop:text-eyebrow-1

Quotes (Juana italic in templates): text-quote-1, text-quote-2

Do not use raw Tailwind display sizes (text-3xl, text-4xl) on marketing headings when a text-h* / text-display* step exists.

Section header pattern

Reuse this structure rather than inventing new hierarchy:

Wrapper: <header class="flex flex-col gap-3">
Eyebrow: text-eyebrow-3 font-medium text-text-accent tablet:text-eyebrow-2 desktop:text-eyebrow-1
Headline (<h2>): text-h5 tablet:text-h4 desktop:text-h3 (step through tablet:)

Inter as heading

When a design uses Inter on a heading size, add font-body on the heading. That utility remaps letter-spacing to the Inter heading track automatically.

Rules

Don’t introduce third-party fonts without brand approval.
Don’t re-add font-body on plain body copy — body already sets it.
Prefer semantic text colors (text-text-primary, text-text-secondary, …).
Keep line length comfortable for long body (~50–75 characters where practical).
Use real heading tags (h1–h6) for hierarchy; style with tokens, don’t fake headings with oversized paragraphs.
Letter-spacing is owned by the tokens — don’t add one-off tracking-* utilities.

Accessibility

Maintain WCAG contrast for text on its background.
Don’t set important copy as an image of text.
Don’t rely on weight or color alone to convey meaning.