Typography
Three families: Fraunces for premium serif display moments, DM Sans for everything functional, JetBrains Mono for code. The scale is fluid-friendly — small inside compact UI, generous in marketing.
Families
Use sparingly — hero headlines, page openers, editorial. Sets at light weight (300).
Humanist sans. Default for all UI text, body copy and headings ≤ 2xl.
JetBrains Mono. Code, tokens, API snippets only.
Type scale
Use the lowest size that does the job. Every step is a CSS variable; the Tailwind utility maps to it directly.
| Token | Size | CSS variable | Sample |
|---|---|---|---|
| text-xs | 0.75rem · 12px | --text-xs | Linusite |
| text-sm | 0.875rem · 14px | --text-sm | Linusite |
| text-base | 1rem · 16px | --text-base | Linusite |
| text-lg | 1.125rem · 18px | --text-lg | Linusite |
| text-xl | 1.25rem · 20px | --text-xl | Linusite |
| text-2xl | 1.5rem · 24px | --text-2xl | Linusite |
| text-3xl | 1.875rem · 30px | --text-3xl | Linusite |
| text-4xl | 2.25rem · 36px | --text-4xl | Linusite |
| text-5xl | 3rem · 48px | --text-5xl | Linusite |
| text-6xl | 3.75rem · 60px | --text-6xl | Linusite |
| text-7xl | 4.5rem · 72px | --text-7xl | Linusite |
Leading
Line-height tokens. Tight for headlines, snug for sub-heads, normal for short body, relaxed for long-form.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox.