Theme Preview

Preview your current theme configuration

Color Palette

Primary

#38bdf8

Accent

#22c55e

Surface

#111827

Background

#0b0f14

Muted

#64748b

Danger

#ef4444

Typography

Heading 1 - Large Display

Heading 2 - Section Header

Heading 3 - Subsection

Heading 4 - Component Title

Large body text for important content

Regular body text for standard content

Small muted text for secondary information

Extra small text for captions and metadata

Button Variations

Variants

Sizes

States

Form Elements

Text Input

Email Input

Password Input

Disabled Input

Textarea

Select

Cards and Surfaces

Basic Card

This is a basic card with standard padding and styling.

Highlighted Card

This card has special highlighting with gradient background.

Glass Effect Card

This card demonstrates the glass morphism effect.

Effects and Animations

Hover Effects

Hover to change background

Hover for lift effect

Hover for border highlight

Gradients

Primary to Accent Gradient

Purple to Pink Gradient

Surface Gradient

🎨 Customization Instructions

To customize your theme:

Edit colors in tailwind.config.ts
Update custom CSS in src/app.css
Modify component styles in src/lib/components/ui/
Run npm run dev to see changes live

Pro tip: Use this preview page to test your changes before deploying!