Consistent styling across all components
Colors inspired by the animated echo bars in our logo, creating a cohesive brand identity
Echo Primary
#2563eb
Echo 500
#3b82f6
Echo 400
#60a5fa
Echo 300
#93c5fd
Echo 200
#bfdbfe
Primary Echo Gradient
Strong to medium echo effect
Soft Echo Gradient
Medium to light echo effect
Full Echo Spectrum
Complete echo bar gradient
Hero Echo Gradient
Subtle background gradient
Echo bars represent decreasing sound intensity
Echo Hero Gradient
Echo Card Gradient
Echo Subtle Gradient
Echo Pricing Gradient
Blue to Purple (Location-based)
Green to Emerald (Volume-based)
Gold to Amber (Highlights)
Slate to Blue (Subtle)
Blue Card Gradient
Green Card Gradient
Subtle echo-themed card with light blue accent
Premium echo card with gradient background
Bold gradient card matching echo colors
Standard white card with subtle border and hover effects
Gold-themed card for highlighting popular items
Standard card for location-based features
Blue-themed card for popular location plans
Standard card for volume-based features
Green-themed card for popular volume plans
Our button system consists of three types: Primary (gradient), Secondary (outline), and Alternative Primary (solid).
Main CTAs, most important actions
Echo gradient background
Supporting actions, less emphasis
Outline style with gray border
Secondary CTAs, important actions
Solid echo blue background
Normal
Hover (hover to see)
Disabled
$29/month
$99/month
Custom
This card uses a glass morphism effect with white opacity overlay
This card has a stronger glass effect with 20% opacity
$29/month
$99/month
Custom
$49/month
$149/month
Custom