Typography
Font families, sizes, and weights for consistent text styling.
Font families
Sans (Satoshi)
font-sansUI text, headings, body copy
The quick brown fox jumps over the lazy dog
Mono (JetBrains Mono)
font-monoCode, technical values, data
const energy = 42.5 kWh
Font sizes
| Class | Size | Line height | Usage | Preview |
|---|---|---|---|---|
| text-xs | 12px | 16px | Captions, badges | Aa |
| text-sm | 14px | 20px | Secondary text, labels | Aa |
| text-base | 16px | 24px | Body text (default) | Aa |
| text-lg | 18px | 28px | Lead paragraphs | Aa |
| text-xl | 20px | 28px | Section titles | Aa |
| text-2xl | 24px | 32px | Card headings | Aa |
| text-3xl | 30px | 36px | Page sections | Aa |
| text-4xl | 36px | 40px | Page titles | Aa |
Font weights
| Class | Weight | Usage | Preview |
|---|---|---|---|
| font-normal | 400 | Body text | The quick brown fox |
| font-medium | 500 | Labels, emphasis | The quick brown fox |
| font-semibold | 600 | Headings, buttons | The quick brown fox |
| font-bold | 700 | Strong headings | The quick brown fox |
Heading scale
Heading 1 (text-4xl)
Heading 2 (text-3xl)
Heading 3 (text-2xl)
Heading 4 (text-xl)
Body text using default text-base size. This is how regular paragraph content appears in the design system with proper line height for readability.
Secondary text using text-sm with muted foreground color.
Usage
{/* Headings */}
<h1 className="text-4xl font-bold tracking-tight">Page Title</h1>
<h2 className="text-2xl font-semibold">Section</h2>
{/* Body text */}
<p className="leading-7">Paragraph content...</p>
<p className="text-sm text-muted-foreground">Secondary text</p>
{/* Code/technical */}
<code className="font-mono text-sm">42.5 kWh</code>