DESIGN SYSTEM

Luxury
Component Library

Glassmorphism • Shadow-free depth • Copper metallics

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

Copper

Warm metallic

Gold

Premium accent

Buttons

Luxury fill animations with refined timing

Copper accent • 350ms fill animation

Frosted glass with hover lift

Outline with opacity shift

Color Palette

Copper and gold automotive luxury

Copper
#B87333
Gold
#C29049
Luxury Black
#0D0D0D
Elevated
#1C1C1E

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