---
version: alpha
name: Eight Sleep
description: Sleep-fitness premium system built on a clean white-to-near-black duet — NeueMontreal at refined light weights with a periwinkle-indigo accent signal that technology lives beneath the calm surface.

colors:
  # Primary canvas — white-dominant with deep night sections
  background: "#ffffff"           # clean white primary canvas
  background-night: "#090b12"     # near-black night canvas — dark hero sections (rgba(9,11,18,1) from overlay var)
  surface: "#f1f2f4"              # soft off-white — elevated cards, tinted section bands
  surface-alt: "#f0f0f0"          # cool light gray — subtle background variation

  # Ink / text
  ink: "#101820"                  # near-black primary text (--color-ui-colors-text-100)
  ink-secondary: "#363636"        # dark gray — subheadings, secondary text
  ink-muted: "#636363"            # mid gray — captions, metadata, supporting copy
  ink-ghost: "#8e8d92"            # muted gray — deemphasized labels, footnotes
  on-dark: "#ffffff"              # white text on night canvas and dark sections

  # Brand accent — indigo signal
  primary: "#4158ee"              # periwinkle-indigo — primary CTAs (--color-accent)
  on-primary: "#ffffff"           # white text on indigo buttons
  primary-light: "#a8a9fc"        # light lavender — accent tint, subtle fills (--color-primary-light)
  primary-dark: "#2f2fc1"         # deep indigo — hover state (--color-primary-dark)
  primary-container: "#ccd7f5"    # pale blue — accent-light background tint (--color-accent-light)

  # Brand secondary — daytime warmth
  accent-warm: "#e0cfbb"          # warm sand/cream — daytime product accent (--color-daytime-legacy)

  # Semantic
  success: "#346a4a"              # forest green — border data for confirmation states; approx from rgb(52,110,74)
  error: "#c0392b"                # alert red                         /* estimated */
  warning: "#d97706"              # amber warning                     /* estimated */

  # Borders
  border: "#d1d1d1"               # light gray dividers (approx rgb(209,209,209) from border data)
  border-strong: "#2e2e2e"        # near-black border for dark card outlines (rgb(46,46,46))

  # Shadow tints
  shadow-soft: "#000000"          # deep shadow tint — rgba(0,0,0,0.05) diffused card shadow; hex floor

typography:
  display-hero:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.56px
  display:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.03
    letterSpacing: 0.72px
  heading-section:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1.31px
  heading:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.44px
  heading-sub:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.28px
  body-large:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0.22px
  body:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.16px
  body-medium:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.16px
  body-medium-strong:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.16px
  button-ui:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.14px
  nav-link:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label-upper:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1.5px
  caption:
    fontFamily: "NeueMontreal, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.12px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 112px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 20px
  pill: 9999px

components:
  # Primary CTA — indigo filled
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 15px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"

  # Secondary — white fill with indigo tint
  button-secondary:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 15px 24px
  button-secondary-hover:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.ink}"

  # Ghost — outlined dark pill (on white sections)
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 15px 24px
    border: "1px solid {colors.ink}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Dark — white fill on night canvas
  button-dark:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 15px 24px
  button-dark-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 24px

  # Standard feature card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.background-night}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: "1px solid {colors.border-strong}"

  # Product spec card — white surface with subtle shadow
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

  # Email / newsletter input (dark section)
  input:
    backgroundColor: "{colors.background-night}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px
    border: "0px none {colors.on-dark}"
  input-focus:
    backgroundColor: "{colors.background-night}"
    textColor: "{colors.on-dark}"
    border: "1px solid {colors.ink}"

  # Tag / category badge
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-accent:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-dark}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Eight Sleep Design System

## Overview

Eight Sleep operates in the discipline of sleep fitness — a category it largely invented — and the visual system positions the brand precisely at the seam between luxury consumer product and scientific instrument. The dominant canvas is clean white (`{colors.background}`), lit with the absence of clutter. Where comparable wearable brands reach for warm parchment or cold charcoal to signal their category, Eight Sleep stays closer to clinical precision without tipping into the antiseptic. The white is not empty; it holds the brand's photography — warm bedroom lifestyles, the matte black Pod cylinder, thermal data gradients — as the sole source of chromatic warmth. The UI itself withholds color almost entirely, saving it for exactly one moment: the periwinkle-indigo CTA (`{colors.primary}`), which arrives with the quality of a calibration signal from within an otherwise neutral instrument.

The typography system is built on NeueMontreal, a self-hosted geometric grotesque, used across all roles from 120px display down to 12px caption. This single-family commitment amplifies the sense of restraint: there is no editorial serif for emotional contrast, no display font switched in for campaign moments. Instead, the system generates variety entirely through scale — from the slow, wide-spaced 120px hero at weight 400 to the tight uppercase label at 12px with 1.5px tracking, weight 500. The results are precise without feeling engineered. At display scale, the letter-spacing is gently positive (0.5–0.7px), creating an airy spaciousness that few display systems use — most collapse tracking at large sizes. Here, openness at scale is the vocal character.

The night sections (`{colors.background-night}`) handle the brand's technology layer. Deep near-black fields support temperature gradient visualizations, biometric data readouts, and the Pod's technical specifications. These sections feel like looking at a device screen in a dark room — the technology becomes legible against the darkness rather than competing with daylight surfaces. The indigo (`{colors.primary}`) and its radial gradient relative (blue-lavender fading to dark navy) appear almost exclusively in this layer, reinforcing the distinction: daytime Eight Sleep is a bedroom brand; night-mode Eight Sleep is a data product.

**Key Characteristics:**
- White canvas (`{colors.background}`) with near-black night sections (`{colors.background-night}`) — two-mode palette, no warm intermediaries
- Single-family typography: NeueMontreal (self-hosted) from 120px display to 12px caption, no font switching
- Gently positive letter-spacing at display scale (0.5–0.7px) — rare open-tracking approach that reads as premium spaciousness
- Uppercase label system (`{typography.label-upper}`) at 12px / 500 / 1.5px tracking for overlines, tags, category callouts
- `{colors.primary}` periwinkle-indigo as the singular accent — exactly one CTA color across the entire experience
- Button shape: 12px radius (`{rounded.lg}`) — deliberately not pill, not square; a considered midpoint
- CSS variable accent system: `--color-accent` (#4158ee), `--color-accent-light`, `--color-primary-light`, `--color-primary-dark` form a coherent indigo ramp
- `{colors.accent-warm}` sand-cream from `--color-daytime-legacy` — reserved for product photography warmth, not UI chrome
- Card shadows are whisper-light (`rgba(0,0,0,0.05)`) — elevation through surface color shift, not shadow depth
- Motion defaults to `ease` at 0.1–0.3s — fast, direct, no theatrics
- Tailwind CSS with Headless UI for component primitives; 112px section spacing at desktop scale

## Colors

### Primary
- **Clean White** (`{colors.background}`): The dominant canvas. Pure white signals clinical precision and lets the product photography — warm bedrooms, lifestyle moments — carry all chromatic energy. Nothing competes with the Pod.
- **Night Black** (`{colors.background-night}`): The technology canvas. Deep near-black (`#090b12`) derived from the overlay CSS variable — just warm enough to avoid pure black, positioning the dark sections as sophisticated rather than stark.
- **Off-White Surface** (`{colors.surface}`): The elevated card and section-band surface. Slightly cool (`#f1f2f4`), not cream — maintains the clinical register while differentiating card from page.

### Brand Accent
- **Periwinkle Indigo** (`{colors.primary}`): The brand's one chromatic claim on the UI. `#4158ee` — a blue that leans toward violet, found in `--color-accent`. Every primary button, every CTA, uses this color. Its restraint is its power.
- **Deep Indigo** (`{colors.primary-dark}`): Hover state for primary buttons — `#2f2fc1`. The indigo deepens; it doesn't shift hue. Consistency of color temperature across states is precise.
- **Lavender Tint** (`{colors.primary-light}`): `#a8a9fc` — the light accent from `--color-primary-light`. Used for secondary button fills and tinted backgrounds; the indigo at low saturation.
- **Pale Blue Container** (`{colors.primary-container}`): `#ccd7f5` — the lightest accent layer from `--color-accent-light`. Secondary button surfaces and tinted highlights.

### Text
- **Near-Black** (`{colors.ink}`): Primary text at `#101820` — drawn from `--color-ui-colors-text-100`. Slightly desaturated, not pure black; reads as ink on paper rather than pixel black.
- **Dark Gray** (`{colors.ink-secondary}`): Subheadings and secondary hierarchy at `#363636`.
- **Mid Gray** (`{colors.ink-muted}`): Supporting copy and metadata at `#636363`. The midpoint of the gray ramp, legible but receding.
- **Ghost Gray** (`{colors.ink-ghost}`): `#8e8d92` — deeply muted labels, deemphasized tags; the gray at the boundary of legibility.

### Semantic & Accent Warmth
- **Forest Green** (`{colors.success}`): `#346a4a` — confirmation and success states, derived from border data (rgb(52,110,74)). An organic green that matches the brand's wellness register.
- **Daytime Sand** (`{colors.accent-warm}`): `#e0cfbb` — from `--color-daytime-legacy`. A warm desert-sand tone associated with the Pod's heat regulation marketing. Present in illustrations, not in UI chrome.

### Borders & Shadows
- **Light Border** (`{colors.border}`): `#d1d1d1` — hairline dividers in white sections. Cool and neutral.
- **Dark Border** (`{colors.border-strong}`): `#2e2e2e` — near-black outlines for cards on the night canvas.
- **Shadow Soft** (`{colors.shadow-soft}`): The dominant shadow is `rgba(0,0,0,0.05)` — hex floor at `#000000`. This near-transparent shadow creates only the suggestion of card lift.

## Typography

### Font Family
- **Primary**: `NeueMontreal` (self-hosted, 5 woff2/woff files), with fallbacks: `Helvetica Neue, Arial, sans-serif`
- Single-family system — no display serif, no monospace companion. NeueMontreal is a geometric grotesque with humanist warmth; it balances the brand's clinical-premium tension without the coldness of a pure geometric like Futura.
- No Google Fonts or Adobe Fonts detected; entirely self-hosted.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference.

| Token | Use |
|---|---|
| `display-hero` | Homepage hero, campaign section headlines — 120px / weight 400 / open tracking |
| `display` | Secondary hero moments, product feature headings — 72px / 400 |
| `heading-section` | Section-level headings with negative tracking — 64px / 400 / -1.31px |
| `heading` | Feature area titles, mid-page headlines — 44px / 400 |
| `heading-sub` | Card headings, sub-feature labels — 28px / 400 |
| `body-large` | Lead paragraphs, feature introductions — 22px / 400 |
| `body-medium` | Secondary body copy, product descriptions — 18px / 400 |
| `body-medium-strong` | Emphasized medium text, highlight copy — 18px / 500 |
| `body` | Standard reading text, UI interface copy — 16px / 400 |
| `button-ui` | All button labels — 14.4px / 700 / 0.14px tracking |
| `nav-link` | Navigation items — 14px / 400 |
| `label-upper` | Overline tags, category labels — 12px / 500 / 1.5px tracking / uppercase |
| `caption` | Fine print, legal, footnotes — 12px / 400 |

### Principles
- **Open display tracking**: At 120px and 72px, letter-spacing stays positive (0.5–0.7px) — the opposite of most high-end systems that condense at scale. This creates a deliberate air of spaciousness, matching the brand's "deep sleep" register.
- **Weight economy**: The system operates primarily at weight 400. Weight 500 appears only for uppercase labels and medium-strong body. Weight 700 surfaces exclusively at 14–16px button labels. Heavy display weight is absent by design.
- **Negative tracking is selective**: Only the 64px heading-section uses negative tracking (-1.31px). Elsewhere tracking is zero or gently positive — a considered exception rather than a default pattern.
- **Uppercase at scale belongs to labels, not headings**: Uppercase transform appears only on 12px label-upper tokens. Section headings and display text run in sentence case, which reads as editorial rather than promotional.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px; the scale extends to 112px for full-width section gaps on desktop. The 112px value is the signature Eight Sleep vertical rhythm — section-level breathing room that matches the pace of a brand asking you to slow down and sleep.

### Grid & Container
- Max content width: approximately 1440px (matching the widest detected breakpoint)
- Hero sections: full-viewport-width with lifestyle photography; centered typographic overlay
- Feature sections: 2-column side-by-side (product + copy) alternating with single-column
- Comparison/specs: structured grid with subtle card containment on white surface
- Nav: full-width transparent-to-white bar, wordmark centered, shop CTA right-aligned

### Whitespace Philosophy
- **Sleep pace**: Section gaps of 112px on desktop enforce a slow scroll rhythm — the visual equivalent of melatonin. Compression destroys this quality.
- **Photography as content**: Because product photography fills large sections, the layout does not manufacture busyness. White space is allowed to be white and still.
- **Alignment over decoration**: Components align on a clean grid; no decorative dividers, no background illustrations beyond the photography. The surface stays quiet.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, solid background | Nav bar, primary white sections |
| Whisper (Level 1) | `rgba(0,0,0,0.05) 2px 2px 12px 0px` | Standard feature cards on white canvas |
| Dramatic (Level 2) | `rgba(0,0,0,0.55) 2.8px 2.8px 90.7px 0px` | Full-screen modal overlays, product hero lift |
| Night Ring (Level 3) | `rgb(0,0,255) 0px 0px 10px 0px` | Debugging/interaction ring artifact (CSS artifact — not production design intent) |
| Focus Ring | `rgb(211,211,211) 0px 0px 0px 1px` | Keyboard focus outline on interactive elements |

**Shadow Philosophy**: Eight Sleep's elevation language is almost entirely flat. Cards sit on surfaces differentiated by color change (`{colors.background}` vs `{colors.surface}` vs `{colors.background-night}`), not shadow stacking. When shadows appear, they are so subtle — `rgba(0,0,0,0.05)` — as to be felt rather than seen; they simply prevent cards from blending imperceptibly into their background. The dramatic modal shadow (Level 2) exists only for full-screen overlay moments. This restraint is intentional: the product is sold as precision sleep science, and overly theatrical shadows would register as consumer-grade gloss.

## Shapes

The complete radius scale lives in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed hero images, video containers, section edges |
| `xs` | 2px | Micro UI elements, progress bar tracks |
| `sm` | 4px | Small input fields, tag chips |
| `md` | 8px | Standard interactive components |
| `lg` | 12px | Buttons (the signature shape), standard cards |
| `xl` | 20px | Larger product cards, modal panels |
| `pill` | 9999px | Tag badges, circular carousel navigation buttons (50% via CSS) |

The 12px button radius is a precise design decision — not pill-soft, not sharp-edged. It communicates engineered precision with a human edge. The pill shape is reserved for badges and status tags, where the distinction from interactive buttons matters. The 50% circle shape (navigational carousel arrows) uses CSS `border-radius: 50%` directly.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Periwinkle-indigo fill (`{colors.primary}`), white text, 12px radius, 15px/24px padding, weight 700 NeueMontreal at 14.4px. The one chromatic CTA across the entire site — "Shop now," "Explore the Pod," "Add to cart."
- **`button-secondary`** — Pale blue container fill (`{colors.primary-container}`), near-black text, same radius and padding. Used for secondary "Learn more" actions alongside primary CTAs where a second choice is needed but hierarchy must be preserved.
- **`button-ghost`** — White fill, 1px near-black border, same radius. Used on white sections where the indigo would over-compete with nearby photography.
- **`button-dark`** — White fill, near-black text, used on the night canvas sections. The inversion of the ghost — a white button on dark background reads as premium and accessible.

### Cards
- **`card`** — Off-white surface (`{colors.surface}`), 12px radius, 24px padding. Standard container for feature callouts, spec comparisons, and content modules on the white canvas.
- **`card-dark`** — Night canvas (`{colors.background-night}`) with near-black border outline, 12px radius. Used for technology and data metric presentations on dark sections.
- **`card-product`** — White surface with 20px radius and 32px padding. The signature container for pod product cards; slightly more rounded and more spacious than standard cards.

### Inputs
- **`input`** — Transparent background with white text, no border in default state; the underline treatment familiar from editorial forms. Focus state adds 1px solid black outline with a blue-tinted glow (`rgb(99,99,99) 0px 0px 5px 5px`).

### Badges
- **`badge`** — Off-white fill, pill-shaped, uppercase label-upper typography. Category and feature classification tags ("NEW," "BEST SELLER," "SCIENCE-BACKED").
- **`badge-accent`** — Pale blue container fill with deep indigo text. Technology-tier and premium-feature indicators.

### Navigation
**`nav-bar`** — White background, near-black link text at 14px / 400. Wordmark (64×27px SVG) centered in the header safe zone. Right-aligned "Shop" CTA in primary indigo. Nav transitions background-color on scroll over 0.3s ease-in-out. The bar stays lean — no mega-menu chrome, no visible border by default.

## Do's and Don'ts

### Do
- Use NeueMontreal exclusively across all type roles — no serif swap for display moments, no monospace for code contexts
- Apply positive letter-spacing at display scale (`{typography.display-hero}` 0.56px, `{typography.display}` 0.72px) — do not collapse tracking at large sizes
- Reserve `{colors.primary}` for exactly one CTA per section — its power comes from scarcity on an otherwise chromeless surface
- Use 12px radius (`{rounded.lg}`) on all buttons without exception — the shape is a deliberate non-pill, non-square commitment
- Apply `{typography.label-upper}` (uppercase, 1.5px tracking) only to overline tags and category labels, never to headings or body
- Alternate white (`{colors.background}`) and night (`{colors.background-night}`) sections for rhythm — the two-mode canvas is the layout heartbeat
- Let product photography provide chromatic warmth; keep UI chrome strictly in the neutral-to-indigo range
- Use section vertical gaps of at least 64px, ideally 112px on desktop; compressing them reduces the brand's fundamental pace

### Don't
- Don't introduce warm neutrals or cream as a primary canvas — Eight Sleep stays cooler than Oura; warmth lives in photography, not surface color
- Don't use `{colors.primary}` indigo for decorative borders, underlines, or hover states on non-CTA elements — it must retain its activation signal
- Don't add pill-shaped buttons (`{rounded.pill}`) to the button set — pill reads as consumer; the 12px radius is the precision language
- Don't apply negative letter-spacing at body scale — it creates illegibility without design payoff at small sizes
- Don't stack multiple box-shadows or introduce colored glow shadows — the shadow system is one whisper-level rule; excess shadow reads as lower-tier product
- Don't center-align paragraph text — body copy is left-aligned throughout; centering is reserved for display headlines in hero sections
- Don't use the `{colors.accent-warm}` sand (`#e0cfbb`) in UI chrome — it belongs to product illustration and lifestyle photography context only
- Don't increase NeueMontreal beyond weight 700 — the system's weight ceiling is 700, applied only at 14–16px; heavy display weight is not part of the voice

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, hero type reduces significantly, nav collapses |
| Mobile | 425–640px | Standard mobile; 1-column feature sections; hamburger nav |
| Tablet | 640–1024px | 2-column grids begin; hero headlines at ~56px |
| Desktop Small | 1024–1220px | Full nav; 2–3 column layouts; full display type scales |
| Desktop | 1220–1440px | Full-width containers; 120px hero display; 112px section gaps |
| Large Desktop | >1440px | Centered max-width (1440px); symmetric wide margins expand |

### Touch Targets
- All buttons: 15px/24px padding renders ≥44px height on all button variants
- Navigation links: collapse into a full-height overlay drawer with generous tap targets
- Carousel navigation arrows: circular pill-radius buttons at minimum 44×44px touch area
- Pinging dot interaction points (product annotations): 44px hit area surrounding the SVG dot

### Collapsing Strategy
- `{typography.display-hero}` (120px) scales to approximately 48–56px on mobile
- `{typography.display}` (72px) scales to approximately 36–44px on mobile
- Feature sections: 2-column → single-column stacked on mobile
- Section vertical padding collapses from 112px (desktop) to 32–48px (mobile)
- Navigation transitions from full horizontal bar to hamburger icon → full-screen dark overlay drawer

### Image Behavior
- Product photography (Pod cylinder) maintains aspect ratio; crops center-focus on narrow viewports
- Hero imagery is full-viewport-width at all breakpoints — the immersive surface is non-negotiable on mobile
- Thermal gradient illustrations (sleep data layer) scale proportionally within card containers
- Night-section radial gradient backgrounds persist at all sizes; the dark canvas is always full-bleed

---

## Agent Prompt Guide

### Quick Color Reference
- Background (day): `{colors.background}` — clean white
- Background (night): `{colors.background-night}` — deep near-black
- Primary text: `{colors.ink}` on light / `{colors.on-dark}` on dark
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Brand CTA: `{colors.primary}` — periwinkle-indigo
- Accent tint: `{colors.primary-container}` — pale blue
- Border: `{colors.border}` (light) / `{colors.border-strong}` (dark)

### Example Component Prompts

- "Build an Eight Sleep hero section on `{colors.background}` (white). Full-bleed lifestyle bedroom photography fills the left two-thirds. Right column: category overline — NeueMontreal 12px / 500 / uppercase / 1.5px tracking / `{colors.ink-muted}`. Headline: NeueMontreal 120px / weight 400 / line-height 1.0 / letter-spacing 0.56px / `{colors.ink}`. Subline: 22px / 400 / 1.27 line-height / `{colors.ink-secondary}`. Primary CTA: `{colors.primary}` fill, `{colors.on-primary}` text, NeueMontreal 14.4px / 700 / 0.14px tracking, border-radius `{rounded.lg}` (12px), padding 15px 24px."
- "Design an Eight Sleep feature card on `{colors.surface}`. Background: `{colors.surface}`. Radius: `{rounded.lg}`. Padding: 24px. Shadow: `rgba(0,0,0,0.05) 2px 2px 12px 0px`. Eyebrow: NeueMontreal 12px / 500 / uppercase / 1.5px tracking / `{colors.ink-muted}`. Headline: NeueMontreal 28px / 400 / 1.1 line-height / `{colors.ink}`. Body: 16px / 400 / 1.4 line-height / `{colors.ink-secondary}`. Bottom: badge tag `{colors.primary-container}` fill / `{colors.primary-dark}` text / pill / 4px 12px padding."
- "Create the Eight Sleep navigation bar. Background: `{colors.background}`. Height: 56px. Center: Eight Sleep wordmark SVG in black. Left: nav links — NeueMontreal 14px / 400 / `{colors.ink}`. Right: 'Shop' CTA button — `{colors.primary}` fill, `{colors.on-primary}` text, NeueMontreal 14.4px / 700, border-radius `{rounded.lg}`, padding 12px 20px. Nav background transitions to white over 0.3s ease-in-out on scroll."
- "Design a Pod technology data card for a night section. Background: `{colors.background-night}`. Radius: `{rounded.xl}`. Padding: 32px. Border: 1px solid `{colors.border-strong}`. Category overline: NeueMontreal 12px / 500 / uppercase / 1.5px tracking / `{colors.ink-ghost}`. Metric value: NeueMontreal 64px / 400 / line-height 1.2 / letter-spacing -1.31px / `{colors.on-dark}`. Metric label: 18px / 400 / `{colors.ink-ghost}`. Accent bar along the bottom using `{colors.primary}` at 2px height."
- "Build an Eight Sleep comparison table section on `{colors.background}`. Section overline: NeueMontreal 12px / 500 / uppercase / 1.5px tracking / `{colors.ink-muted}`. Section headline: NeueMontreal 44px / 400 / 1.1 line-height / 0.44px tracking / `{colors.ink}`. Table: 3 columns on white `{colors.background}` cards — each `{rounded.lg}` radius, 24px padding, 1px `{colors.border}` divider between rows. Tier highlight column: `{colors.primary-container}` background fill. CTA row at bottom: primary button (`{colors.primary}`) in highlight column; ghost buttons elsewhere."

### Iteration Guide

1. Start on `{colors.background}` — the white canvas is non-negotiable; resist warming it toward cream or darkening toward gray
2. Reserve `{colors.primary}` for exactly one primary CTA per section — its value depends on appearing alone against neutrals
3. Apply uppercase with 1.5px tracking only via `{typography.label-upper}` — never apply uppercase to headings, body, or navigation
4. All buttons use 12px radius (`{rounded.lg}`) — the shape is part of the brand voice; pill reads too soft, sharp reads too clinical
5. Display type stays at weight 400 with open positive tracking — never collapse tracking at 64px+ sizes
6. Night sections (`{colors.background-night}`) hold technology, data, and Pod specs — day sections hold lifestyle and benefit storytelling
7. Section vertical rhythm: minimum 64px gaps, target 112px on desktop — breathing room is not optional

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Eight Sleep. Brand names and trademarks belong to their respective owners.