Typography
Urbanist for headings, Inter for body text.
Fonts
Urbanist
Headings and display type. Weights: 400, 500, 600, 700.
Inter
Body text and UI labels. Weights: 300, 400, 500, 600, 700.
Type scale
Display heading
display
font-heading text-5xl font-bold tracking-tight
Heading 1
h1
font-heading text-4xl font-bold tracking-tight
Heading 2
h2
font-heading text-3xl font-semibold tracking-tight
Heading 3
h3
font-heading text-2xl font-semibold tracking-tight
Heading 4
h4
font-heading text-xl font-semibold
Heading 5
h5
font-heading text-lg font-semibold
Heading 6
h6
font-heading text-base font-semibold
Body text is set in Inter at the default weight for long-form reading.
body
text-base
Small body text is used for captions, metadata, and secondary details.
body-small
text-sm text-muted-foreground
Lead text introduces a section with a larger, lighter body size.
lead
text-xl font-light text-muted-foreground
Rich text
A paragraph should be easy to scan. Use short sentences, clear hierarchy, and generous whitespace. A link draws attention to related content.
"Compliance is built into the architecture, not bolted on."
- Token-first values
- Accessible contrast
- Light and dark modes