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

# Eight Sleep · Design System

> Precision sleep technology in a calm, cinematic frame

**Theme:** light · **Industry:** health · **Source:** https://www.eightsleep.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._

Eight Sleep pairs a restrained monochrome interface with cinematic product imagery and softly atmospheric colour. The homepage moves from an immersive Pod 6 launch into product education, clinical proof, expert endorsements, and customer reviews.

## North star

Keep the interface quiet and spacious so cinematic product imagery and credible sleep-science evidence lead the story.

## Overview

The page uses a clean white canvas as a quiet frame for full-bleed visual moments: the opening blue-toned Pod 6 render, dark product film, warm sand-coloured interface feature, and black scientific-advisory section. Treat those image-led colours as section-specific atmosphere rather than a replacement for the measured neutral brand palette. NeueMontreal carries the interface, with compact uppercase navigation and restrained, medium-weight display headings; Bethany Elingston adds a rare serif accent. The composition alternates centered, cinematic panels with modular card layouts and split product explanations. Generous vertical breathing room keeps the long homepage from feeling like a dense catalogue, while tightly composed cards make technical benefits and evidence scannable. Use black for high-contrast controls and occasional inverse sections, soft greys for quiet content bands, and blue or warm beige chiefly where they support imagery and product storytelling.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and light text over dark or image-led sections. |
| Soft Ink | `#151514` | `--color-soft-ink` | brand | Main muted text, compact controls, and navigation details. |
| Deep Black | `#000000` | `--color-deep-black` | neutral | Primary text, dark CTA surfaces, and the black advisory-board section. |
| Cloud Grey | `#f7f7f7` | `--color-cloud-grey` | surface | Quiet card and section backgrounds between white content areas. |
| Slate Rule | `#66686e` | `--color-slate-rule` | neutral | Measured border and hairline colour for subtle interface separation. |
| Mist Grey | `#e8e8e8` | `--color-mist-grey` | surface | Pale alternate section surface and understated content background. |
| Warm Sand | `#e2b68f` | `--color-warm-sand` | accent | Warm section accent associated with the sleep-personalization feature imagery. |
| Frosted Grey | `#f0f0f0` | `--color-frosted-grey` | surface | Secondary light card surface; keep it subordinate to white and Cloud Grey. |
| Quiet Grey | `#8e8e8e` | `--color-quiet-grey` | neutral | Secondary muted text and subdued card details. |
| Sleep Blue | `#4f7fff` | `--color-sleep-blue` | accent | Small measured accent; reserve for minor interface or product-detail highlights. |
| Midnight Ink | `#00000c` | `--color-midnight-ink` | semantic | Near-black tone in a dark section gradient, not a general page canvas. |
| Signal Blue | `#1862ff` | `--color-signal-blue` | accent | Occasional link or textual accent rather than a dominant CTA colour. |
| Silver Haze | `#979797` | `--color-silver-haze` | neutral | Subtle tonal transition in measured gradient and supporting details. |
| Dusk Navy | `#1b315f` | `--color-dusk-navy` | semantic | Dark blue gradient tone appearing in atmospheric section treatments. |
| Device Graphite | `#595c62` | `--color-device-graphite` | neutral | Product-interface card detail, including the sleep-temperature display. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Cloud Grey) · `--color-surface-2` → `#000000` (Deep Black) · `--color-surface-3` → `#e8e8e8` (Mist Grey) · `--color-surface-4` → `#e2b68f` (Warm Sand) · `--color-text` → `#000000` (Deep Black) · `--color-text-muted` → `#151514` (Soft Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#66686e` (Slate Rule) · `--color-accent` → `#e2b68f` (Warm Sand) · `--color-accent-2` → `#4f7fff` (Sleep Blue) · `--color-accent-3` → `#1862ff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#e8e8e8` | 17.14:1 | AAA |
| `#151514` | `#ffffff` | 18.27:1 | AAA |
| `#151514` | `#f7f7f7` | 17.06:1 | AAA |
| `#151514` | `#000000` | 1.15:1 | fail |
| `#151514` | `#e8e8e8` | 14.91:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#e8e8e8` | 1.23:1 | fail |

### Gradients

- `linear-gradient(in oklab, rgb(246, 246, 246) 42.75%, rgb(255, 255, 255) 100%)`
- `linear-gradient(170deg, rgba(3, 3, 15, 0.99), rgb(0, 0, 12) 25%, rgba(0, 0, 18, 0.933) 50%, rgba(0, 6, 30, 0.84) 70%, rgba(0, 12, 33, 0.7) 85%, rgba(0, 21, 30, 0.408))`
- `radial-gradient(circle at 0px 0px, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 40%)`
- `linear-gradient(rgba(0, 0, 0, 0) 48.7%, oklab(0 0 0 / 0.3) 84.2%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NeueMontreal | `--font-body` | webfont | 400, 500, 700, 600 | Primary interface and display sans across headings, body, navigation, links, and controls. | Inter |
| Bethany Elingston | `--font-bethany-elingston` | webfont | 400 | Occasional expressive serif treatment for secondary display headings. | Cormorant Garamond |

- **NeueMontreal:** Mostly regular and medium weights; uppercase, tracked navigation and eyebrow labels contrast with sentence-case headings.
- **Bethany Elingston:** Use sparingly as a soft editorial contrast; measured at regular weight.

### Type scale — Perfect Fourth (ratio ≈ 1.356, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44px | 500 | 1.1 | 0.01em | — | NeueMontreal | Hero product name and principal launch headline. |
| h2 | 36px | 500 | 1.1 | 0.01em | — | NeueMontreal | Major feature, research, and section headings. |
| h3 | 28px | 400 | 1.1 | 0.01em | — | NeueMontreal | Product explanations and supporting feature titles. |
| h4 | 22px | 400 | 1.45 | 0.008em | — | Bethany Elingston | Occasional serif-led editorial or feature heading. |
| body | 13px | 400 | 1.2 | 0.011em | — | NeueMontreal | Compact explanatory copy and product descriptions. |
| caption | 12px | 400 | 1.2 | 0.01em | — | NeueMontreal | Small review, product, and image captions. |
| button | 44px | 500 | 1.1 | 0.01em | — | NeueMontreal | Prominent shop and section-action labels. |
| nav | 12px | 500 | 1.33 | 0.133em | uppercase | NeueMontreal | Uppercase header links with conspicuous letter spacing. |
| link | 18px | 400 | 1.33 | 0.01em | — | NeueMontreal | Inline calls to action such as Learn more. |
| eyebrow | 14.5px | 500 | 1.15 | 0.18em | uppercase | NeueMontreal | Uppercase section labels for research and product updates. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 6, 7, 8, 10, 11, 12, 14, 16, 18, 20, 24, 32, 40 px.
- Section rhythm 112px · element gap 4px · card padding 18px · max content width 1312px.

A spacious, long-form homepage with a measured 1312px maximum content width and a 4px base spacing unit. The hero and film sections are centered and full bleed; later content alternates between centered product cards, split feature layouts, and dense evidence grids. Major sections have generous separation, while compact text and controls keep cards readable. Preserve the wide white canvas and use image-led bands to establish changes in pace.

## Shape & elevation

- Radius: button `50%` · card `20px` · media `2px` · badge `9999px` · nav `10px` · link `8px` · xs `7px` · sm `8px` · md `9px` · lg `10px` · xl `12px` · 2xl `15px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.4) 0px 55.2px 110.4px -20.7px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.15) 0px 0px 0px 6px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.55) 1.30425px 1.30425px 41.7599px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.35) 0px 0px 5.03432px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.4) 0px 89.1495px 178.298px -33.4315px`
- Motion: standard transition `0.2s ease-out` on interactive elements.

The interface is mostly flat, with subtle hairlines and lightly differentiated grey surfaces instead of constant shadows. Use rounded card containers and restrained layering for media. Product and testimonial cards may receive a deep, soft shadow where measured, while navigation and text sections remain visually unraised.

## Imagery

Lead with oversized, cinematic 3D product imagery against a blue atmospheric backdrop, followed by full-bleed product video. Supporting sections use rounded lifestyle and product photographs, interface-like sleep data cards, and portraits of scientific advisors. Keep photos realistic and softly graded; reserve warm and dark colour treatments for the imagery or the specific section they belong to.

## Components

### Announcement strip

Slim dark-blue promotional band at the top with small, uppercase, widely tracked white offer text.

### Floating navigation

Translucent pale header panel over the hero; compact uppercase links, centered logo, account and cart actions, and a dark shop CTA.

### Hero product stage

Centered Pod 6 title and new badge over a full-bleed blue product render, followed by launch copy, price, shop action, and rating.

### Video feature panel

Full-width dark product film with centered white heading and a compact watch-film control.

### Feature cards

Rounded image-led cards combine product or lifestyle visuals with short overlay labels and a centered section action.

### Split product feature

Editorial text column with uppercase eyebrow, large heading, supporting copy, dark CTA, and a rounded product video or image.

### Evidence cards

Research and benefit modules pair sleep photography or dark blue cards with concise claims and study links.

### Expert and review panels

Portrait-led advisor cards sit on a black field; customer quotes appear in a horizontally browsable card group.

### Measured component styles

- **Primary button** (“Smaller than ever”): transparent background · text #151514 · radius 0px · padding 0px · 500 44px NeueMontreal
- **Link** (“Learn more”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px NeueMontreal
- **Card** (“Mark Zuckerberg @zuck 7-8 hours usually.”): background #f4f4f4 · text #000000 · radius 20px · padding 17.5px · 400 17px NeueMontreal
- **Badge** (“Run”): transparent background · text #ffffff · border 1px solid #ffffff · radius 3.35544e+07px · padding 0px 11.3px 0px 9px · 500 9.89886px NeueMontreal
- **Navigation item** (“SIGN UP FOR $100 OFF THE NEW POD 6 → HOW”): transparent background · text #000000 · radius 0px · padding 0px · 400 17px NeueMontreal

## Do

- Keep the base canvas white and let photography create the dramatic colour shifts.
- Use NeueMontreal for the interface and reserve the serif for occasional emphasis.
- Make hero and film sections wide, centered, and media-led.
- Use compact uppercase navigation and eyebrow labels with visible tracking.
- Alternate open editorial layouts with organized, rounded card groups.
- Use black controls for strong contrast against light surfaces.

## Don't

- Do not apply the hero's blue image palette as a site-wide interface colour.
- Do not fill every section with cards or decorative borders.
- Do not make the generous vertical rhythm feel like a dense product catalogue.
- Do not turn accent blue into the dominant button colour.
- Do not use the serif typeface throughout body copy or navigation.
- Do not add heavy shadows to otherwise flat sections.

## Agent prompt

Build a new Eight Sleep page as a quiet, premium sleep-tech storefront. Use Gallery White (#ffffff) as the principal canvas, Soft Ink (#151514) and Deep Black (#000000) for typography and strong actions, and Cloud Grey (#f7f7f7) or Mist Grey (#e8e8e8) for restrained content bands. Keep Sleep Blue (#4f7fff), Signal Blue (#1862ff), and Warm Sand (#e2b68f) occasional, and chiefly tied to product imagery or specific feature moments. Use NeueMontreal or Inter for compact, carefully tracked navigation and clean headings; introduce the serif only as a rare editorial accent. Build spacious, centered hero and film moments, then alternate split product explanations with rounded image cards and evidence modules. Keep controls crisp, borders subtle, and shadows limited to media or raised cards. Let realistic product imagery carry the drama; keep interface decoration minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered full-bleed product hero with overlaid title and centered launch details. | Shop product, Review rating | Floating navigation, New badge, Product render |
| 2 | video | Full-width dark film panel with centered heading and playback action. | Watch film | Dark video backdrop, Centered overlay copy, Compact media button |
| 3 | how-it-works | Three-column product explanation with image-led modules and centered section heading. | Explore product components, See how it works | Image cards, Short labels, Centered CTA |
| 4 | feature-split | Text and feature list on one side, large rounded product media on the other. | Cycle product benefits, See how it works | Uppercase eyebrow, Split layout, Rounded video |
| 5 | product-showcase | Wide centered storytelling sequence with image-led feature cards and a warm-toned product interface panel. | Explore sleep benefits, Browse feature slides | Sleep scenario cards, Temperature display, Warm gradient atmosphere |
| 6 | product-grid | Centered product heading above a two-column set of large lifestyle images. | Shop Solo sizes, Compare bed sizes | Two-column image grid, Text overlays, Lifestyle photography |
| 7 | stats | Centered research introduction followed by a three-column set of outcomes and study cards. | Read clinical studies, Explore sleep outcomes | Research eyebrow, Benefit cards, Study links |
| 8 | team | Centered introduction above a two-column advisor portrait grid on black. | Review expert credentials | Black section band, Portrait cards, Compact biographies |
| 9 | reviews | Centered review headline and rating above a horizontally arranged testimonial card feed. | Browse reviews, Read more reviews | Rating summary, Quote cards, Dark atmospheric backdrop |

## Source CSS custom properties (selected)

```css
--animate-duration: 1s;
--swiper-theme-color: #007aff;
--color-component-overlay-bg: rgba(25, 25, 37, 0.9);
--color-component-button-primary-bg-default-neutral-inverse-resting: #ffffff;
--color-component-button-primary-text-default-neutral-inverse-resting: #0c0c14;
--color-component-button-primary-bg-default-neutral-inverse-hover: #e5e5e9;
--color-component-button-primary-text-default-neutral-inverse-hover: #313142;
--color-component-button-secondary-icon-default-neutral-inverse-resting: #ffffff;
--color-component-button-secondary-text-default-neutral-inverse-resting: #ffffff;
--color-fill-brand-indigo: #4a4af4;
--components-spacing-xxxxs: 2px;
--components-spacing-lg: 24px;
--components-spacing-xxl: 40px;
--color-primary-light: #A8A9FC;
--color-primary-dark: #2F2FC1;
--color-greyscale-black-60: #6D6E71;
--color-ui-colors-background-neutral-2: #F0F5F7;
--color-ui-colors-text-100: #101820;
```

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