Typography
Aurora provides two categories of typography utilities: headings and paragraphs. Apply them as Tailwind classes — they're plain CSS utilities, not components.
All typography classes inherit text-primary by default. Override with any text-* color when needed.
Headings
Headings ship in three sizes (heading-1, heading-2, heading-3) with four weight variants each (default, -medium, -semibold, -bold).
heading-1 — The quick brown fox
heading-1-medium — The quick brown fox
heading-1-semibold — The quick brown fox
heading-1-bold — The quick brown fox
heading-2 — The quick brown fox
heading-2-medium — The quick brown fox
heading-2-semibold — The quick brown fox
heading-2-bold — The quick brown fox
heading-3 — The quick brown fox
heading-3-medium — The quick brown fox
heading-3-semibold — The quick brown fox
heading-3-bold — The quick brown fox
html
<h1 class="heading-1-semibold">Page title</h1>
<h2 class="heading-2-medium">Section title</h2>
<h3 class="heading-3-bold">Subsection</h3>Paragraphs
Six sizes from xl down to 2xs, each with three weights (default, -medium, -bold).
paragraph-xl — The quick brown fox jumps over the lazy dog
paragraph-lg — The quick brown fox jumps over the lazy dog
paragraph-md — The quick brown fox jumps over the lazy dog
paragraph-sm — The quick brown fox jumps over the lazy dog
paragraph-xs — The quick brown fox jumps over the lazy dog
paragraph-2xs — The quick brown fox jumps over the lazy dog
| Size | Class | Weights |
|---|---|---|
| Extra Large | paragraph-xl | paragraph-xl, -medium, -bold |
| Large | paragraph-lg | paragraph-lg, -medium, -bold |
| Medium | paragraph-md | paragraph-md, -medium, -bold |
| Small | paragraph-sm | paragraph-sm, -medium, -bold |
| Extra Small | paragraph-xs | paragraph-xs, -medium, -bold |
| 2X Small | paragraph-2xs | paragraph-2xs, -medium, -bold |
paragraph-md and paragraph-sm also have -underline variants for inline links inside body copy.
Mono paragraphs
Each paragraph size has a monospace mirror (paragraph-xl-mono … paragraph-2xs-mono) rendered in Geist Mono — for codes, IDs, hashes, and numeric readouts. They share the font size, line-height, and letter-spacing of their non-mono counterpart, and have no weight variants.
Use these instead of stacking paragraph-* font-mono — the paragraph utilities bake in font-inter, so the stack doesn't reliably switch the family.
paragraph-xl — Quick fox 0123456789
paragraph-xl-mono — Quick fox 0123456789
paragraph-lg — Quick fox 0123456789
paragraph-lg-mono — Quick fox 0123456789
paragraph-md — Quick fox 0123456789
paragraph-md-mono — Quick fox 0123456789
paragraph-sm — Quick fox 0123456789
paragraph-sm-mono — Quick fox 0123456789
paragraph-xs — Quick fox 0123456789
paragraph-xs-mono — Quick fox 0123456789
paragraph-2xs — Quick fox 0123456789
paragraph-2xs-mono — Quick fox 0123456789
Inline mix: meter MTR-2041-XK reported 1,204.5 kWh on 2026-08-11
Inline mix: meter MTR-2041-XK reported 1,204.5 kWh on 2026-08-11
html
<span class="paragraph-sm-mono text-secondary">a1b2c3d</span>Font families
| Family | Usage |
|---|---|
font-inter | Default for headings and paragraphs |
font-mono (Geist Mono) | paragraph-*-mono — codes, IDs, numeric readouts |
font-manrope | Marketing surfaces, special displays |
font-be-vietnam-pro | Brand-specific surfaces |
font-sans-marketing (Poppins) | Marketing surfaces |
The typography utilities (heading-*, paragraph-*) bake in the right font family — you usually don't need to set it manually.