Style Guide
PayPerClosing Design System
Color Palette
Primary Gradients
from-orange-500 via-pink-500 to-violet-400
#f97316 → #ec4899 → #a78bfa
from-teal-400 to-blue-500
#2dd4bf → #3b82f6
from-gray-800 to-slate-600
#1f2937 → #475569
Accent Colors
orange-500
#f97316
pink-500
#ec4899
violet-400
#a78bfa
teal-400
#2dd4bf
emerald-400
#34d399
purple-500
#a855f7
Neutral Colors
gray-900
#111827
gray-800
#1f2937
gray-700
#374151
gray-600
#4b5563
gray-400
#9ca3af
gray-300
#d1d5db
slate-800
#1e293b
slate-700
#334155
slate-600
#475569
Status Colors
emerald-500 (Success)
#10b981
blue-500 (Info)
#3b82f6
orange-500 (Warning)
#f97316
red-500 (Error)
#ef4444
Typography
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Gradient Text Effects
Gradient 3D Text
.gradient-text-3d
Hero Gradient
.gradient-text-hero
Body Text
Large Body - text-2xl
XL Body - text-xl
Large Body - text-lg
Base Body - text-base
Small Body - text-sm
Extra Small - text-xs
Cards
Standard Card
Basic card with shadow and border
• bg-white
• rounded-2xl
• shadow-lg
• border border-gray-200
Glassmorphism
Frosted glass effect
• bg-white/15
• backdrop-blur-sm
• border-2 border-white/20
Gradient Card
Full gradient background
• from-orange-500
• via-pink-500
• to-violet-400
Form Elements
Badges & Pills
Shadows
Small
shadow-sm
Large
shadow-lg
Extra Large
shadow-2xl
Colored Shadow
shadow-xl shadow-purple-500/50
Pink Shadow
shadow-lg shadow-pink-500/30
Dark Shadow
shadow-gray-950/30
Border Radius
rounded
0.25rem
rounded-lg
0.5rem
rounded-xl
0.75rem
rounded-2xl
1rem
rounded-3xl
1.5rem
rounded-full
9999px
Animations
Float
animate-float
Fade In Up
animate-fade-in-up
Blob
animate-blob
Decorative Elements
Background Blobs
Animated gradient orbs for visual interest
Glow Effects
Content with glow
Content with glow