Design System
A comprehensive collection of reusable components, patterns, and guidelines for building consistent user interfaces.
Typography
Display 1 - Hero Headlines
Display 2 - Section Headlines
Display 3 - Subsection Headlines
Heading 1 - Page Titles
Heading 2 - Section Titles
Heading 3 - Subsection Titles
Heading 4 - Card Titles
Heading 5 - Small Titles
Heading 6 - Labels
Body Large - Lead paragraphs with enhanced readability for important content.
Body Text - Standard paragraph text for general content and descriptions.
Body Small - Secondary text for captions, metadata, and less important information.
Caption - Tiny text for fine print, labels, and minimal information.
Buttons
Variants
Sizes
States
With Icons
Full Width
Form Components
Input Variants
This is a helper text
Input Sizes
Input with Icons
Search Bar
Cards
Card Variants
Default Card
Standard card with subtle background and border
Glass Card
Frosted glass effect with backdrop blur
Elevated Card
Enhanced shadow and depth effects
Outlined Card
Transparent background with prominent border
Interactive Cards
Interactive Card
Click me to see the interaction
Hover Effects
Hover to see scale and shadow effects
Static Card
Non-interactive card for display purposes
Project Cards
Project Card Examples
E-commerce Platform
Full-stack online store with payment integration and admin dashboard
Task Management App
Cross-platform mobile app for team collaboration and productivity
Color Palette
Primary Colors
Cyan #22d3ee
Fuchsia #d946ef
Violet #7c3aed
Background #0b1220
Semantic Colors
Success #10b981
Warning #f59e0b
Error #ef4444
Info #3b82f6