Default Theme - Component Visualization

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