Typography
Typography guidelines and utilities for consistent text styling across your application.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text
Large - Perfect for introductory paragraphs and important content that needs emphasis.
Base - The default text size for body content. Readable and comfortable for longer passages.
Small - Used for secondary content, captions, and helper text.
Extra Small - For fine print, timestamps, and minimal UI elements.
Text Colors
text-foreground
Primary text color
text-muted-foreground
Secondary text color
text-primary
Brand/accent text
text-destructive
Error states
Font Weights
Normal (400) - Regular body text
Medium (500) - Slightly emphasized text
Semibold (600) - Headings and labels
Bold (700) - Strong emphasis
More Coming Soon 🚧
This page is a work in progress. More typography utilities and examples will be added soon.