Typography

A thoughtful type system built on three font families: Plus Jakarta Sans for display, Inter for body text, and JetBrains Mono for code.

Font Families

Display
Plus Jakarta Sans - The quick brown fox
Body
Inter - The quick brown fox jumps over the lazy dog. Perfect for longer reading.
Mono
JetBrains Mono - const greeting = "Hello, world!"; 
--font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

Type Scale

A modular scale for consistent text sizing across the UI.

text-6xl
3.75rem
Hero headline
text-5xl
3rem
Page title
text-4xl
2.25rem
Section heading
text-3xl
1.875rem
Subsection heading
text-2xl
1.5rem
Card title
text-xl
1.25rem
Lead paragraph or emphasized text
text-lg
1.125rem
Slightly larger body text
text-base
1rem
Default body text for paragraphs and UI elements
text-sm
0.875rem
Secondary text, labels, and captions
text-xs
0.75rem
Small labels, badges, and helper text

Line Heights

leading-tight
1.2
Tight line height for headlines and display text. Use sparingly for short text blocks.
leading-snug
1.375
Snug line height for subheadings and card titles where space is limited but readability matters.
leading-normal
1.5
Normal line height for body text. This is the default for paragraphs and most UI text.
leading-relaxed
1.625
Relaxed line height for long-form content, articles, and documentation where readability is paramount.

Usage

/* Headlines */
h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  font-weight: 700;
}

/* Body text */
p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* Code blocks */
pre, code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}