Typography
Text styles, headings, and paragraphs using Geist. A modern geometric sans-serif with variable weights, optimized for SaaS and enterprise interfaces.
Headings
Six heading levels using Geist
Heading 1 (5xl)
Heading 2 (4xl)
Heading 3 (3xl)
Heading 4 (2xl)
Heading 5 (xl)
Heading 6 (lg)
Paragraphs
Body text using Geist
This is a regular paragraph with bold text and italic text. Geist provides excellent readability for body content with its clean geometric letterforms and open counters.
This is a smaller paragraph, perfect for secondary content or descriptions. The font maintains clarity even at smaller sizes.
This is extra small text, useful for captions, labels, or fine print. Geist ensures legibility across all sizes.
Text Weights
Different font weights available
Light weight text (200)
Normal weight text (400)
Medium weight text (500)
Semibold weight text (600)
Bold weight text (700)
Text Colors
Color hierarchy for text content
Primary text color (slate-900)
Secondary text color (slate-700)
Subdued text color (slate-600)
Muted text color (slate-500)
Disabled text color (slate-400)
Lists
Ordered and unordered lists
Unordered List
- First list item
- Second list item
- Third list item
Ordered List
- First ordered item
- Second ordered item
- Third ordered item
Inline Text Elements
Links, code, and special formatting
This paragraph contains a link element and some inline code.
You can also use Ctrl +C keyboard shortcuts.
Text can be highlighted for emphasis.
Font Family
Geist by Vercel
Geist
Used for all text — headings, body, and UI elements. A neo-grotesk sans-serif inspired by Swiss typography, purpose-built for developer and designer tools.
font-family: "Geist", sans-serifVariable Font Weights
Supports variable weights from 100 to 900, allowing fine-tuned typography throughout your design.
Switchable Alternatives
The design system supports 4 font options with similar metrics: Geist (default), Manrope, Albert Sans, and Figtree. See docs/settings/variables/font-family.md for details.
Usage
Typography classes and examples
// Headings
<h1 className="text-5xl font-bold text-slate-900 dark:text-slate-50">Heading 1</h1>
<h2 className="text-4xl font-bold text-slate-900 dark:text-slate-50">Heading 2</h2>
<h3 className="text-3xl font-semibold text-slate-900 dark:text-slate-50">Heading 3</h3>
<h4 className="text-2xl font-semibold text-slate-900 dark:text-slate-50">Heading 4</h4>
<h5 className="text-xl font-medium text-slate-900 dark:text-slate-50">Heading 5</h5>
<h6 className="text-lg font-medium text-slate-900 dark:text-slate-50">Heading 6</h6>
// Paragraphs
<p className="text-base text-slate-900 dark:text-slate-50">Regular paragraph</p>
<p className="text-sm text-slate-700 dark:text-slate-300">Small paragraph</p>
<p className="text-xs text-slate-600 dark:text-slate-400">Extra small paragraph</p>
// Weights
<p className="font-light">Light (200)</p>
<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semibold (600)</p>
<p className="font-bold">Bold (700)</p>
// Text Colors
<p className="text-slate-900 dark:text-slate-50">Primary</p>
<p className="text-slate-700 dark:text-slate-300">Secondary</p>
<p className="text-slate-600 dark:text-slate-400">Subdued</p>
<p className="text-slate-500">Muted</p>
// Inline Elements
<a className="text-indigo-600 hover:text-indigo-700 underline">Link</a>
<code className="px-1.5 py-0.5 bg-slate-200 rounded">Inline code</code>
<kbd className="px-2 py-1 bg-slate-200 rounded border">Keyboard</kbd>
<mark className="bg-amber-200 px-1">Highlight</mark>Features
Typography system capabilities
- Single font family: Geist for all text, differentiated by weight
- Variable font weights: 100 to 900 across the full range
- Six heading levels: h1 through h6 with appropriate sizing
- Multiple text sizes: From xs to 5xl
- Semantic color scale: slate-900 to slate-400 for text hierarchy
- Inline elements: Links, code, kbd, and mark support
- Optical sizing: Auto-optimized for different sizes