Phase 1 · Foundation
Design Tokens
Brand emerald
50
100
200
300
400
500
600
700
800
900
950
Porcelain
Light default
Obsidian
Dark mode
Champagne gold
Luxury accent
Cream
Warm neutral
Glassmorphism
.glass
.glass-dark
Motion DNA
✦fade-up
✦float
pulse-ring
Container queries
I turn brand-green when my container ≥ 300px (resize to test)
PWA shell (≤1024px)Immersive desktop (≥1025px)
desktop: variant switches at 1025px
Safe-area aware
.pt-safe / .pb-safe pad around notches and home indicators