Design System
A comprehensive guide to colors, typography, components, and layouts
Dynamic Theme Generator
How it works:
- Upload an image or provide a URL
- Click "Extract Colors" to see the dominant colors
- Click "Generate & Apply Theme" to create and activate a custom theme
- The theme will be saved and persist across sessions
Color Palette
Switch themes using the theme switcher in the header to see how all colors change dynamically.
bg-primary
Main brand color, used for primary actions
bg-secondary
Supporting color, for secondary actions
bg-accent
Highlight color, for emphasis
bg-muted
Subtle backgrounds and disabled states
bg-destructive
Errors and destructive actions
bg-card
Card containers and surfaces
bg-background
Page background color
bg-foreground
Main text color
border-border
Default border color
Colors in Action
Buttons
Tags & Badges
Cards with Color Accents
Alerts & Notifications
Primary Alert
Important information using primary color
Info Alert
Informational message using accent color
Error Alert
Error or warning using destructive color
Gradients
Gradient Text Heading
Typography
Heading Font: Michroma
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Font: Inter
Extra Large Text - Inter (20px)
Large Text - Inter (18px)
Regular Text - Inter (16px)
Small Text - Inter (14px)
Extra Small Text - Inter (12px)
Spacing Scale
Consistent spacing helps create visual hierarchy and rhythm