Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.

Back to Browse

Casper

E-commerce

Casper 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.

(0)
0
Visit Website
Screenshot of Casper website

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

dreamysophisticatedtranquilpremiumrestfulminimalisttwilight

Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.

Design System

Typography Scale

ElementFontSizeWeightLine Height
bodyCalibre18px40028.8px
h1NewKansas-Medium18px50028.8px
h2NewKansas-Medium32px50038.4px
h3Calibre16px40018px
h4Calibre28px50036.4px
h5Calibre22px50030.8px
pInter14px40019.6px
aInter14px60019.6px
buttonInter14px40019.6px
inputInter14px40019.6px

Color Palette

#2b2e35
#f7fafc
#4a5568
#2d3748
#edf2f7
#38a169
#ffffff
#e53e3e
#e2e8f0
#f7c2c2
#000000
#a0aec0

UI Elements

button
input
a
nav
button-primary
button-secondary

Similar Designs

Completely Different Designs

Discussion

Loading comments...