---
title: "Casper Sleep design system"
variant: extended
source: https://casper.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/casper-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Casper Sleep · Design System

> Calm, confident commerce for better sleep

**Theme:** light · **Industry:** ecommerce · **Source:** https://casper.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Casper pairs a crisp navy-and-white storefront with soft blue campaign bands and warm, human sleep imagery. The long homepage balances product discovery with reviews, guarantees, educational content, and clear shopping prompts.

## North star

Use deep blue for confident navigation and actions, then let spacious white layouts and human sleep imagery make shopping feel calm.

## Overview

The visual system anchors the storefront in crisp white and deep Casper blues, using pale blue bands to distinguish promotions, review panels, and educational content without making the page feel heavy. Navy headlines and links provide strong, consistent wayfinding; a restrained red sale action is the clearest warm accent. Calibre supplies approachable, compact sans-serif navigation and body copy, while New Kansas adds a more editorial character to select headings and campaign typography. The page alternates broad, media-led sections with compact benefit rows and product cards, keeping shopping routes visible through a long scroll. Lifestyle photography shows real people resting in lived-in bedrooms, while mattress imagery communicates product differences directly. Soft corners, generous whitespace, thin separators, and subtle shadows keep cards and floating elements distinct but calm. The overall effect is friendly retail rather than clinical wellness.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Navy | `#012169` | `--color-midnight-navy` | brand | Deep brand blue for the top announcement strip, links, navigation, and selected buttons. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, card surfaces, white CTA fills, and reverse text on dark blue. |
| Casper Blue | `#1e306e` | `--color-casper-blue` | brand | Primary brand surface and text for headings, navigation, and prominent shopping buttons. |
| Deep Indigo | `#1e3063` | `--color-deep-indigo` | accent | Near-navy accent detected in gradient and navigation styling; use sparingly for brand transitions. |
| Cloud Blue | `#f3f6fd` | `--color-cloud-blue` | surface | Pale blue background for the long-form sleep-evidence section and selected cards or bands. |
| Denim Blue | `#3c619e` | `--color-denim-blue` | accent | Secondary blue accent appearing in button treatments and supporting interactive details. |
| Soft Gray | `#e6e6e6` | `--color-soft-gray` | surface | Muted background on promotional link treatments and understated supporting surfaces. |
| Soft Black | `#151515` | `--color-soft-black` | neutral | Dark body and navigation text where stronger contrast than blue is used. |
| Slate Periwinkle | `#526699` | `--color-slate-periwinkle` | accent | Supporting blue used in navigation, footer, and button details. |
| Mist Divider | `#d7ddeb` | `--color-mist-divider` | neutral | Fine separators and subtle borders between controls or content surfaces. |
| Muted Iris | `#899ac7` | `--color-muted-iris` | semantic | Input outline color, particularly around the footer email field. |
| Sale Red | `#cb372a` | `--color-sale-red` | semantic | Small, high-visibility sale CTA and promotional emphasis; reserve for sale actions. |
| Royal Blue | `#3159a6` | `--color-royal-blue` | accent | Minor button accent detected in interactive elements; not a dominant page color. |
| Dusk Blue | `#35457d` | `--color-dusk-blue` | accent | Subtle supporting button color detected in controls. |
| Sleep Sky | `#d7ecf7` | `--color-sleep-sky` | surface | Light blue campaign and feature-section background, especially behind sleep-related content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f6fd` (Cloud Blue) · `--color-surface-2` → `#e6e6e6` (Soft Gray) · `--color-surface-3` → `#1e306e` (Casper Blue) · `--color-surface-4` → `#d7ecf7` (Sleep Sky) · `--color-text` → `#151515` (Soft Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d7ddeb` (Mist Divider) · `--color-accent` → `#1e306e` (Casper Blue) · `--color-accent-2` → `#3c619e` (Denim Blue) · `--color-accent-3` → `#1e3063` (Deep Indigo) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151515` | `#ffffff` | 18.26:1 | AAA |
| `#151515` | `#f3f6fd` | 16.88:1 | AAA |
| `#151515` | `#e6e6e6` | 14.63:1 | AAA |
| `#151515` | `#1e306e` | 1.48:1 | fail |
| `#ffffff` | `#f3f6fd` | 1.08:1 | fail |
| `#ffffff` | `#e6e6e6` | 1.25:1 | fail |
| `#ffffff` | `#1e306e` | 12.33:1 | AAA |
| `#1e306e` | `#ffffff` | 12.33:1 | AAA |
| `#1e306e` | `#f3f6fd` | 11.4:1 | AAA |
| `#1e306e` | `#e6e6e6` | 9.88:1 | AAA |

### Gradients

- `linear-gradient(to right, rgb(30, 48, 99), rgb(30, 48, 99))`
- `linear-gradient(to right, rgb(1, 33, 105), rgb(1, 33, 105))`
- `linear-gradient(to right, rgb(203, 55, 42), rgb(203, 55, 42))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Calibre | `--font-body` | webfont | 400, 500, 300, 700, 800, 600 | Primary navigation, body copy, buttons, links, and most page headings. | Inter |
| Copyright Klim Type Foundry-Not Licensed for Desktop Use | `--font-copyright-klim-type-foundry-not-licensed` | webfont | 400, 700 | Display-style heading accent, including editorial titles and selected product or testimonial headings. | Lora |
| NewKansas-Medium | `--font-newkansas-medium` | webfont | 500, 600, 900 | Supporting editorial and display heading treatment. | Lora |
| New Kansas TRIAL | `--font-new-kansas-trial` | webfont | 600 | Secondary display heading variant in limited headline use. | Lora |

- **Calibre:** Friendly sans-serif with varied weights; use sentence case and keep body copy open and readable.
- **Copyright Klim Type Foundry-Not Licensed for Desktop Use:** Distinctive serif-like display treatment; retain measured weight contrast and generous, calm line spacing.
- **NewKansas-Medium:** Medium-weight serif display voice used sparingly to add warmth and a premium editorial note.
- **New Kansas TRIAL:** Use as a restrained serif accent; avoid allowing it to replace the primary sans-serif system.

### Type scale — Major Third (ratio ≈ 1.26, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 800 | 1 | 0.006em | — | Calibre | Primary campaign and hero titles, including sale and sleep-solution messages. |
| h2 | 32px | 500 | 1.2 | -0.01em | — | Calibre | Section headings introducing reviews, products, and educational content. |
| h3 | 24px | 400 | 1.5 | 0.06em | — | Copyright Klim Type Foundry-Not Licensed for Desktop Use | Editorial-style card and subsection headings. |
| body | 18px | 400 | 1.6 | 0 | — | Calibre | Product descriptions, explanatory copy, review text, and supporting content. |
| caption | 16px | 300 | 1.6 | 0.038em | — | Calibre | Fine print, image captions, footnotes, and compact supporting labels. |
| button | 14px | 500 | 1.6 | 0 | — | Calibre | Short shopping, quiz, and action labels. |
| nav | 18px | 500 | 1.6 | 0 | — | Calibre | Main product navigation and utility navigation labels. |
| link | 18px | 400 | 1.6 | 0 | — | Calibre | Inline shopping links, secondary actions, and footer navigation. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 12, 14, 16, 18, 20, 24, 32, 40, 48, 56 px.
- Section rhythm 32px · element gap 16px · card padding 40px · max content width 1344px.

A long, responsive storefront alternates full-width campaign or media bands with centered content and product groupings. The measured page maximum is 1344px, with comfortable density and a four-pixel base spacing rhythm. The header separates utility messaging from the main product navigation. Product cards use multi-column rows, while reviews and educational proof points shift to broad, spacious panels. Headings are commonly centered in campaign zones but align left in shopping and content sections. Keep sections distinct and avoid compressing the long-scroll rhythm.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `12px` · media `12px` · badge `4px` · nav `4px` · link `6px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `24px` · pill `9999px`
- Shadow `xl` (section): `rgba(30, 48, 110, 0.1) 0px 18px 50px 0px`
- Shadow `hairline` (button): `rgba(30, 48, 110, 0.12) 0px 0px 0px 1px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.15) 0px 2px 12px 0px`
- Shadow `md-2` (nav): `rgba(0, 0, 0, 0.15) 0px 8px 15px 0px`
- Shadow `md-3` (nav): `rgba(0, 0, 0, 0.106) 0px 0px 10px 0px`
- Shadow `md-4` (card): `rgba(0, 0, 0, 0.1) 0px 3px 16px 0px`
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

Most page sections sit flat on white or pale-blue backgrounds. Soft, restrained shadows lift the navigation, review card, and selected content cards; use them to clarify layering rather than decorate every block. Thin cool-blue borders define inputs and subtle separations. Rounded media and cards soften the otherwise clean grid.

## Imagery

Lifestyle photography leads: people sleeping, relaxing, and interacting with mattresses in warm, believable bedrooms. Product cards show mattresses and bedding clearly, often framed in full-room settings. Wide photographic panels use rounded corners and dark overlays where white text sits over imagery. Customer story videos appear as a horizontal gallery with play controls. Small navy line illustrations support the pale-blue sleep-proof section; they are decorative, not the core brand palette.

## Components

### Two-tier navigation

A dark navy utility announcement strip sits above a white product-navigation bar; use blue text, compact utility links, and understated elevation.

### Campaign banner

A pale blue, full-width sale band balances centered sale artwork with concise offers and rounded pill CTAs; use red only for the sale action.

### Media hero

Wide rounded lifestyle photography carries a large white heading and supporting text over a darkened image, with a contrasting white pill CTA.

### Trust benefits

Four compact icon-and-copy benefits communicate trial, warranty, delivery, and review proof in a calm horizontal row.

### Review panel

A review feature pairs a star rating and large navy score on a white card against a pale blue field, with a compact review action.

### Product category cards

Three bedroom product images sit above concise category names, descriptions, and starting-price links in a clean row.

### FAQ accordion

A centered heading introduces a compact pale panel of questions, each separated by fine rules and paired with a small disclosure control.

### Newsletter footer

A deep navy footer organizes link columns beside an exclusive-offers email field, with fine dividers and compact social links.

### Measured component styles

- **Primary button** (“Shop mattresses”): background #1e306e · text #ffffff · radius 32px · padding 12px 24px · 500 16px Calibre
- **Secondary button** (“Shop all”): background #012169 · text #ffffff · radius 32px · padding 12px 24px · 500 16px Calibre
- **Link** (“Save up to 25% on mattresses”): background #e6e6e6 · text #1e306e · radius 6px · padding 0px · 400 18px Calibre
- **Input**: background #ffffff · text #1e306e · border 2px solid #899ac7 · radius 8px · padding 16px 20px 0px 20px · 400 18px Calibre
- **Card** (“Over 110,000+ 5-star reviews See all rev”): background #ffffff · text #1e306e · radius 20px · padding 32px 48px · 400 18px Calibre · shadow rgba(0, 0, 0, 0.1) 0px 3px 16px 0px
- **Badge**: background #cfecd7 · text #1e306e · radius 4px · padding 5px 8px · 500 12px Calibre
- **Navigation item** (“Mattresses Bundles Pillows Furniture Bed”): transparent background · text #012169 · radius 0px · padding 0px · 400 18px Calibre

## Do

- Keep the main canvas white and use pale blue for selected section bands.
- Use Casper Blue for primary headings, links, and shopping actions.
- Make lifestyle photography feel warm, domestic, and human.
- Keep major CTAs pill-shaped and visually easy to find.
- Pair product imagery with concise names and useful shopping details.
- Use subtle shadows only to distinguish cards or floating navigation.
- Preserve generous whitespace between the long page’s content groups.

## Don't

- Do not turn the whole page into a dark interface.
- Do not use Sale Red as a general-purpose accent.
- Do not place dense text over photography without a dark overlay.
- Do not make every section a card with a shadow.
- Do not let decorative sleep illustrations overpower product photography.
- Do not replace the calm retail rhythm with tightly packed content.
- Do not invent additional palette colors for brand surfaces.

## Agent prompt

Build a new Casper-style retail page with a white canvas and a two-tier header: a deep Midnight Navy (#012169) utility strip above clean product navigation. Use Casper Blue (#1e306e) for headings, links, and main pill-shaped CTAs; reserve Sale Red (#cb372a) for a clear sale action. Introduce pale Sleep Sky (#d7ecf7) or Cloud Blue (#f3f6fd) bands to separate promotions, reviews, or educational proof. Use Calibre-like sans-serif typography for navigation and body, with restrained editorial serif headings. Organize content into spacious full-width imagery, compact benefits, product-card rows, trust panels, and clear shopping routes. Use warm bedroom lifestyle photos, rounded media, subtle shadows, and fine cool-blue dividers. Keep the long-page rhythm airy, practical, and reassuring.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Full-width pale-blue sale band with two offer blocks flanking central sale artwork. | Shop mattresses, Shop sale, Savings disclaimer | Pale blue band, Centered sale badge, Pill CTAs, Navy and red actions |
| 2 | hero | Wide rounded lifestyle video or image panel with left-aligned copy overlay. | Take the quiz, Short value proposition | Darkened photo, Large white heading, White pill CTA, Floating chat |
| 3 | feature-grid | Four evenly spaced benefit items in a compact horizontal row. | Trial reassurance, Warranty detail, Delivery info, Review proof | Small line icons, Short labels, Open white background |
| 4 | testimonials | Large review card centered within a pale blue horizontal panel. | See all reviews, Star-rating proof | White raised card, Large navy review count, Compact quote |
| 5 | product-grid | Centered section heading and actions above three product-category cards. | Shop all mattresses, Compare mattresses, Starting prices | Three image cards, Category titles, Compact descriptions |
| 6 | other | Slim full-width financing notice between product discovery and sale content. | Financing information, Eligibility footnote | Quiet pale band, Small partner mark, Inline text |
| 7 | product-showcase | Large featured product banner followed by a horizontally arranged sale-card gallery. | Shop all, Product sale links, Carousel browsing | Featured image-and-copy split, Campaign badge, Product tiles |
| 8 | cta | Wide rounded split panel with text and actions on one side, lifestyle photo on the other. | Mattress quiz, Pillow quiz | Pale blue copy panel, Pill buttons, Sleep photo |
| 9 | stats | Tall pale-blue evidence section with spaced metrics and small illustrations. | Customer recommendation proof, Consumer Reports proof, Improved sleep claim | Navy serif headings, Line-art accents, Underlined metrics |
| 10 | feature-grid | Centered explanatory heading followed by a row of four concise benefits. | Learn more, Warranty and trial details, Delivery reassurance | Small typography, Even columns, Minimal decoration |
| 11 | video | Centered title above a horizontal gallery of customer video tiles. | Play customer stories, Browse gallery | Rounded video thumbnails, Centered play icons, Carousel controls |
| 12 | testimonials | Centered editorial quote beneath a thin gallery divider and controls. | Browse testimonial slides | Centered quote, Subtle rule, Compact pagination |
| 13 | contact | Two-column image-and-copy cards for store visits and specialist support. | Find a store, Email or call a specialist | Wide retail photography, Short descriptions, Pill actions |
| 14 | faq | Centered heading above a narrow, pale accordion panel. | Expand questions, Read disclaimers | Fine row dividers, Disclosure icons, Compact panel |
| 15 | footer | Deep navy multi-column footer with product, support, about, and resource links plus signup form. | Newsletter signup, Social links, Footer navigation | White compact text, Fine column rules, Outlined email input, Secondary legal bar |

## Source CSS custom properties (selected)

```css
--spacing-0-5: 0.125rem;
--spacing-1: 0.25rem;
--spacing-1-5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-2-5: 0.625rem;
--spacing-3: 0.75rem;
--spacing-3-5: 0.875rem;
--spacing-4: 1rem;
--spacing-4-5: 1.125rem;
--spacing-5: 1.25rem;
--spacing-5-5: 1.375rem;
--spacing-6: 1.5rem;
--spacing-6-5: 1.625rem;
--spacing-7: 1.75rem;
--spacing-7-5: 1.875rem;
--spacing-8: 2rem;
--spacing-8-5: 2.125rem;
--spacing-9: 2.25rem;
--spacing-9-5: 2.375rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-18: 4.5rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/casper-com