Default Theme - Component Visualization

# Default Theme

Component Visualization & Design Token Reference

## Color Palette

### Core Colors

Primary
#0f172a
Secondary
#475569
Accent
#10b981
Neutral
#e2e8f0

### Semantic Colors

Success
#22c55e
Warning
#f59e0b
Error
#ef4444
Info
#3b82f6

### Neutral Scale (Slate)

Slate 50
#f8fafc
Slate 100
#f1f5f9
Slate 200
#e2e8f0
Slate 300
#cbd5e1
Slate 400
#94a3b8
Slate 500
#64748b
Slate 600
#475569
Slate 700
#334155
Slate 800
#1e293b
Slate 900
#0f172a

## Typography

text-4xl The quick brown fox
text-3xl The quick brown fox
text-2xl The quick brown fox
text-xl The quick brown fox
text-lg The quick brown fox jumps over the lazy dog
text-base The quick brown fox jumps over the lazy dog
text-sm The quick brown fox jumps over the lazy dog
text-xs The quick brown fox jumps over the lazy dog
mono const theme = 'default';

## Spacing Scale

4px
8px
12px
16px
24px
32px
48px
64px

## Border Radius

4px (sm)
8px (md)
12px (lg)
16px (xl)
full

## Shadows

shadow-sm
shadow-md
shadow-lg

## Components

### Buttons

### Card

#### Card Title

This is a sample card component with the default theme styling applied.

### Form Input

Email Address