Design System
A comprehensive collection of UI components built with bold orange aesthetics, modern styling, and smooth animations
Color Palette
Primary
hsl(24, 95%, 53%)Gradient
primary → orange-400Muted
hsl(30, 10%, 96%)Destructive
hsl(0, 84%, 60%)Typography
Display XL
text-display-xl (4rem / 64px)Display Large
text-display-lg (3rem / 48px)Display Medium
text-display-md (2.25rem / 36px)Body XL - The quick brown fox jumps over the lazy dog
text-xl (1.25rem / 20px)Body Base - The quick brown fox jumps over the lazy dog
text-base (1rem / 16px)Buttons
Variants
Sizes
With Icons
States
Inputs
Cards
Simple Card
A basic card with header and content
This is the card content area. You can place any content here.
With Icon
Card featuring an icon header
Icons help visually identify card purpose quickly.
With Footer
Card with action buttons
Footer area for CTAs and actions.
Badges & Tags
Primary
Primary Light
Muted
Success
Error
FeaturedProgress & Loading
Progress Bar75%
Loading States
Alerts & Messages
Success
Your changes have been saved successfully.
Information
New features are now available in your dashboard.
Error
Unable to process your request. Please try again.