Typography
Type scale from DESIGN.md. Primary: Inter, Mono: Geist Mono. Each level has a specific use case.
| Role | Size | Tailwind Class | When to use |
|---|---|---|---|
| display | 30px / 1.875rem | text-[1.875rem] font-bold leading-[1.2] | Page welcome heading |
| heading-lg | 24px / 1.5rem | text-2xl font-semibold leading-[1.3] | Section titles |
| heading-md | 18px / 1.125rem | text-lg font-semibold leading-[1.4] | Card titles, modal headers |
| body | 14px / 0.875rem | text-sm leading-relaxed | Default body text |
| body-sm | 13px / 0.8125rem | text-[0.8125rem] leading-normal | Secondary info, meta |
| label | 12px / 0.75rem | text-xs font-medium | Form labels, nav group labels |
| caption | 11px / 0.6875rem | text-[0.6875rem] | Timestamps, counts |
display
The quick brown fox
heading-lg
The quick brown fox
heading-md
The quick brown fox
body
The quick brown fox
body-sm
The quick brown fox
label
The quick brown fox
caption
The quick brown fox
mono
const score = calculateGrade(transcript)
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer