Design System
A comprehensive design system built with shadcn/ui, Tailwind CSS v4, and Stripe-inspired aesthetics.
Color Palette
Vibrant, accessible colors inspired by Stripe
hsl(257 73% 55%)
Rich purple for primary actions
hsl(174 78% 45%)
Vibrant teal for highlights
hsl(142 71% 45%)
Green for success states
hsl(0 72% 51%)
Red for errors and warnings
Typography
Clear hierarchy with Inter font family
Heading 1
text-6xl font-bold
Heading 2
text-5xl font-bold
Heading 3
text-4xl font-semibold
Heading 4
text-2xl font-semibold
Body text with comfortable reading experience. The quick brown fox jumps over the lazy dog.
text-lg leading-relaxed
Small text for captions and metadata. Perfect for secondary information.
text-sm text-muted-foreground
Buttons
Variants and sizes for every use case
Variants
Sizes
With Rounded Corners
Cards
Flexible container component
Basic Card
Simple card with title and description
Content goes here with comfortable padding and spacing.
Interactive Card
Hover to see effects
This card has hover states with smooth transitions.
Highlighted Card
Primary border emphasis
Use for important or featured content.
Badges
Small labels and tags
Form Inputs
Interactive form elements
We'll never share your email.
Avatars
User profile images with fallbacks
Accordion
Collapsible content sections
Shadows
Soft, Stripe-inspired shadows
shadow-soft
Subtle elevation for cards
shadow-soft-lg
Medium elevation for modals
shadow-soft-xl
High elevation for popovers
Animations
Smooth CSS animations using View Transitions API
animate-fade-in
0.5s ease-out
animate-scale-in
0.4s ease-out