Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Casper
E-commerceCasper creates a dreamy, sophisticated sleep sanctuary through muted navy blues and gentle gradients that evoke twilight tranquility. The custom NewKansas typography feels crafted and premium, while playful hand-drawn elements like the '12' anniversary illustration add warmth to an otherwise minimalist, cloud-like aesthetic.
Design Identity
Signature Color
Casper Midnight
#2b2e35
sophisticated sleep expertise and premium rest experience
Visual Identity
The distinctive hand-drawn illustrative elements combined with gentle gradients and generous whitespace create an immediately recognizable 'sleep-focused luxury' aesthetic that balances premium positioning with approachable warmth.
Component Style
Softly rounded corners with 6px button radius and 12px container radius create a gentle, cloud-like feel. Buttons use subtle shadows (0 2px 8px with low opacity) and generous 24px padding, prioritizing comfort over efficiency. No harsh borders - everything floats with gentle depth.
Spacing Philosophy
Generous breathing room with 24px base padding creates a sense of calm spaciousness. Large sections use expansive whitespace to mirror the restful, uncluttered bedroom environment the brand promises.
Design Principles
- Border radius stays between 6-12px for soft, sleep-friendly edges
- Shadows use consistent navy blue (30 48 110) at 10% opacity for gentle depth
- Typography mixes custom NewKansas for headlines with clean Calibre for body text
- Base padding unit is 24px for generous, comfortable spacing
- Hand-drawn illustrations balance premium minimalism with human warmth
Target Audience
Urban millennials and Gen-Z who view sleep as self-care investment and prioritize design-forward home aesthetics over traditional mattress shopping
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 18px | 400 | 28.8px | |
| h1 | 18px | 500 | 28.8px | |
| h2 | 32px | 500 | 38.4px | |
| h3 | 16px | 400 | 18px | |
| h4 | 28px | 500 | 36.4px | |
| h5 | 22px | 500 | 30.8px | |
| p | 14px | 400 | 19.6px | |
| a | 14px | 600 | 19.6px | |
| button | 14px | 400 | 19.6px | |
| input | 14px | 400 | 19.6px |
Color Palette
#2b2e35#f7fafc#4a5568#2d3748#edf2f7#38a169#ffffff#e53e3e#e2e8f0#f7c2c2#000000#a0aec0
