Families
Three families: Sora for display, Manrope for body and UI, JetBrains Mono for code and token labels.
Aa
Sora
Display & headings
400 · 500 · 600 · 700
Aa
Manrope
Body & UI text
400 · 500 · 600 · 700
Aa
JetBrains Mono
Code & token labels
400 · 500
Type scale
The full scale rendered with real sample text and the utility class that produces it.
Design with intent
Displaytext-5xl font-bold tracking-tight
A calm, professional system
H1text-4xl font-bold tracking-tight
Form essentials, built to last
H2text-2xl font-semibold
Components in context
H3text-xl font-semibold
Sora sets the display voice; Manrope carries the body.
Body / lgtext-foreground
Every color, radius, and shadow comes from a design token.
Body / basetext-foreground
Secondary information reads quietly alongside the primary content.
Body / mutedtext-muted-foreground
Last updated · Sep 2026
Captionfont-medium text-muted-foreground uppercase tracking-wide
Code & token labels
import { Button } from "@/components/button";
<Button variant="primary" size="md">
Save changes
</Button>