Typography
Aurora provides three categories of typography utilities: headings, paragraphs, and captions. 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.
Captions
Captions are short, all-uppercase-feeling labels used for tags, chips, and table headers. Each caption is bold by default.
CAPTION-LG — section label
CAPTION-SM — table header
CAPTION-XS — micro-label
html
<span class="caption-sm text-secondary">Last updated</span>Font families
| Family | Usage |
|---|---|
font-inter | Default for headings, paragraphs, captions |
font-manrope | Marketing surfaces, special displays |
font-be-vietnam-pro | Brand-specific surfaces |
font-sans-marketing (Poppins) | Marketing surfaces |
The typography utilities (heading-*, paragraph-*, caption-*) bake in the right font family — you usually don't need to set it manually.