Luxury
Component Library
Glassmorphism • Shadow-free depth • Copper metallics • Material textures
Glassmorphism
Frosted glass effects with backdrop blur
Glass Panel
Static glassmorphism
.glass-panel
Hover State
Interactive glass effect
.glass-panel-hover
Elevated Card
Enhanced depth
.glass-card
Gradient Borders
Shadow-free depth through gradient edges
White
Subtle elegance
.gradient-border-card
Copper
Warm metallic
.copper-border-card
Gold
Premium accent
.gold-border-card
Buttons
Luxury fill animations with refined timing
Copper accent • 350ms fill animation
.btn-primary-luxury
Frosted glass with hover lift
.btn-glass
Outline with opacity shift
.btn-secondary
Cards
Glassmorphic containers with hover effects
Feature Card
Glass panel with hover lift
.card-feature
Info Card
Gradient border styling
.card-info
Product Card
Image scale on hover
.card-product
Typography
Light weights with refined tracking
Hero Headline
font-light • tracking-luxury (0.05em)
.text-hero
Section Title
font-light • tracking-luxury (0.05em)
.text-section
Copper Gradient
.text-gradient-copper
ALL-CAPS WITH PROPER TRACKING
uppercase • tracking-caps (0.12em)
.text-caps-luxury
Icons & Badges
Gradient backgrounds with proper spacing
Step Numbers
.step-number
Check Icons
.icon-check
Badges
.badge-copper • .badge-gold • .badge-red
Material Textures
CSS-based physical materials
Carbon Fiber
.carbon-fiber
Premium Grain
.premium-grain
Brushed Metal
.brushed-metal
Color Palette
Copper and gold automotive luxury
#B87333
#C29049
#0D0D0D
#1C1C1E
Glow Effects
Subtle luminosity replaces shadows
Copper Glow
Warm halo effect
.copper-glow
Gold Glow
Premium luminosity
.gold-glow
Red Glow
Accent glow for CTAs
.red-glow
Form Elements
Glassmorphic inputs with copper accents
Quick Reference
CSS custom properties for inline styling
Colors
var(--accent-copper)var(--accent-gold)var(--accent-red)var(--bg-luxury-black)var(--bg-elevated)
Letter Spacing
.tracking-luxury→ 0.05em.tracking-caps→ 0.12em