Eight Sleep — design system & UI screens

Consumer · 1 screen · 11 sections · eightsleep.com

A consumer sleep-tech landing that opens with a full-screen "4TH JULY SALE / Unlock a surprise" quiz modal (sleep-challenge multiple choice) overlaid on a warm lifestyle bedroom photo, then drops into an interactive isometric 3D render of the Pod bed studded with circular hotspot markers as the signature hero. The page alternates light editorial typographic feature blocks (giant "Temperature / Elevation / Sound" stacked headings with a 61°/79° dual-zone app UI) against deep navy sections where animated sleep-improvement metrics (44%, 34%, 45%, 23%) float as cards on thin connecting stems. Distinctive touches include a dark bento proof grid (600M / 20+ / 14 stats with gauge and ruler motifs), video-testimonial cards with play buttons, a filterable quote carousel with sleeper-type pills, and a quiet Huberman/Walker expert-endorsement row before a cinematic product-hub CTA.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/eight-sleep.

Decoded design system

Eight Sleep's decoded design system: background #FFFFFF, text #000000, accent #E8EFFF, link #4158EE, primary #1862FF; type scale h1 115px / h2 56px / body 22px; 4px spacing base; 8px base radius. The single interactive/action color is #E8EFFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#EFEFEF`
border	`#D8D8D8`
text	`#000000`
text_muted	`#606060`
primary	`#1862FF`
accent	`#E8EFFF`
link	`#4158EE`
button_bg	`#E8EFFF`
button_text	`#000000`

Using these colors

Action color #E8EFFF — the single interactive color; only on things you click or must notice, never large fills.
accent, button_bg are all #E8EFFF — one role, not several (the action color).
accent #E8EFFF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #1862FF — a brand color — but the call-to-action uses #E8EFFF, not this.
link #4158EE — inline text links and link-styled controls.

Typography

Heading: PP Neue Montreal
Body: PP Neue Montreal
h1: 115px
h2: 56px
body: 22px

Spacing

base unit: 4px
scale: 2px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 45px

Radii

base: 8px
button: 4px

Shadows (elevation)

card: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px
overlay: rgba(0, 0, 0, 0.55) 2.836px 2.836px 90.745px 0px

Motion

Micro-interactions run at 100ms (dominant) with ease.

durations: 100ms · 200ms · 300ms
easings: ease · ease-out
animated properties: stroke, background-color, color, border-color

Native design tokens

Token	Value
`--color-red-900`	`oklch(39.6% .141 25.723)`
`--color-tertiary-bg`	`#f4f2f0`
`--color-blue-700`	`oklch(48.8% .243 264.376)`
`--color-amber-600`	`oklch(66.6% .179 58.318)`
`--color-secondary-stroke`	`#dedbd9`
`--color-grey-4`	`#696765`
`--color-green-100`	`oklch(96.2% .044 156.743)`
`--color-red-200`	`oklch(88.5% .062 18.334)`
`--color-blue-300`	`oklch(80.9% .105 251.813)`
`--color-gray-300`	`oklch(87.2% .01 258.338)`

…and 107 more measured on the page.

Layout (measured)

container max-width: 1440px
common grid: 2 columns

Motion choreography (measured)

Load order: div.LoadingSkeleton_skeleton → ul.DesktopHeaderNav_desktop → a.Button_base__NYfuD×2 → a.Button_base__NYfuD×2 → div.swiper-slide → div.PingingDot_dot_core__XlX×5

Scroll reveal: 14 elements rest at opacity 0, translateY(30px), animate in over 0.5s ease-in-out.

Stagger: div ×10 — 400ms apart.

Overlay recipe (measured)

dialog panel: #FFFFFF · radius 8px

Responsive (measured)

breakpoints: 600px · 640px · 768px · 1024px · 1280px · 1440px
mobile (390px): hero 38px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Eight Sleep Pod landing with interactive isometric bed render and floating sleep-metric cards