Style Guide
Component Style Guide
A comprehensive collection of reusable UI components and design patterns.
Colors
Blue-500
#3b82f6
Green-500
#10b981
Red-500
#ef4444
Yellow-500
#eab308
Purple-500
#a855f7
Gray-500
#6b7280
Typography
text-xs - Extra small text
text-sm - Small text
text-base - Base text (default)
text-lg - Large text
text-xl - Extra large text
text-2xl - Double extra large
text-3xl - Triple extra large (bold)
Buttons
Form Elements
Cards
Basic Card
This is a simple card component with basic styling.
Elevated Card
This card has more elevation with a stronger shadow.
Colored Card
This card uses a gradient background for visual interest.
Loading States
Icons
🏠
Home
📧
⚙️
Settings
❤️
Heart
🔍
Search
🔔
Notification
📱
Mobile
💻
Desktop