Typography
Text styles, fonts, and headings used across the site.
Font Family
font-sans (Geist)
The quick brown fox jumps over the lazy dog
Variable font with weights 400-600. Used as our main font across the site.
font-mono (Geist Mono)
The quick brown fox jumps over the lazy dog
Used for code snippets and monospace text.
Font Weights
font-normal (400)
Normal weight text - Used for body text
font-medium (500)
Medium weight text - Used for headings and buttons
Headings
Hero (text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight)
Hero Heading
Section (text-2xl sm:text-3xl font-medium tracking-tight)
Section Heading
Subsection (text-xl font-medium tracking-tight)
Subsection Heading
Card (text-sm font-medium tracking-tight)
Card Heading
Body Text
Base (text-base - 16px)
The quick brown fox jumps over the lazy dog
Regular (text-sm - 14px)
The quick brown fox jumps over the lazy dog
Muted (text-sm text-muted-foreground)
The quick brown fox jumps over the lazy dog
Small (text-xs - 12px)
The quick brown fox jumps over the lazy dog
Balanced (text-balance max-w-[600px])
This is an example of balanced text with a maximum width. It's used for better readability in section descriptions and card content. The text-balance property ensures even line lengths.
Line Heights
Tight (leading-tight)
The quick brown fox jumps over the lazy dog. This text demonstrates tight line height spacing commonly used in headings.
Normal (leading-normal)
The quick brown fox jumps over the lazy dog. This text demonstrates normal line height spacing used in most body text.
Relaxed (leading-relaxed)
The quick brown fox jumps over the lazy dog. This text demonstrates relaxed line height spacing used in some body text for better readability.
Colors
Color system and theme variables used across the site.
Theme Colors
Background
bg-background
Foreground
bg-foreground
Muted
bg-muted
Primary
bg-primary
Secondary
bg-secondary
Accent
bg-accent
Opacity Variations
10% Opacity
bg-primary/10
50% Opacity
bg-primary/50
80% Opacity
bg-primary/80
Text Colors
Default Text
The quick brown fox jumps over the lazy dog
Muted Text (text-muted-foreground)
The quick brown fox jumps over the lazy dog
Primary Text (text-primary)
The quick brown fox jumps over the lazy dog
Secondary Text (text-secondary)
The quick brown fox jumps over the lazy dog
Components
Common UI components and patterns used across the site.
Badges
Cards
Blog Card Title
Blog card description text goes here, showing how we style blog post previews.
Doc Card Title
Documentation card description text goes here, showing how we style doc previews.
Section Headers
Centered Section Title
This is how we style centered section headers with descriptions, commonly used on the homepage.
Left-aligned Section Title
This is how we style left-aligned section headers with descriptions, commonly used in documentation.
Spacing
mt-2 (0.5rem) - Minimal spacing
mt-4 (1rem) - Standard spacing
mt-8 (2rem) - Section spacing
mt-12 (3rem) - Large section spacing
Tables & Lists
| Name | Role | Status |
|---|---|---|
| John Doe | Developer | Active |
| Jane Smith | Designer | Away |
Container
Default Container
Max Width Variations
Grid System
2 Columns (sm:grid-cols-2)
3 Columns (lg:grid-cols-3)
Sidebar Layout (md:grid-cols-[220px_1fr])
Transitions
Colors (transition-colors)
Transform (transition-transform)
Loading States
Skeleton Loading
Opacity Loading
Layout
Layout patterns, containers, and grid systems used across the site.
Container
Default Container
Max Width Variations
Grid System
2 Columns (sm:grid-cols-2)
3 Columns (lg:grid-cols-3)
Sidebar Layout (md:grid-cols-[220px_1fr])
Spacing
mt-2 (0.5rem) - Minimal spacing
mt-4 (1rem) - Standard spacing
mt-8 (2rem) - Section spacing
mt-12 (3rem) - Large section spacing
Animation
Transitions, animations, and loading states used across the site.
Transitions
Colors (transition-colors)
Transform (transition-transform)
Loading States
Skeleton Loading
Opacity Loading