---
version: alpha
name: Eight Sleep
description: "A white room at first light, one blue line of data running through it."
colors:
  on-surface-variant: "#F4F2F0"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#A0A0A0"
  primary: "#1862FF"
  warm-paper: "#F9F8F7"
  card-grey: "#F4F4F4"
  review-grey: "#F1F2F4"
  lavender-chip: "#F1F3FE"
  indigo: "#4158EE"
  quiz-tint: "rgba(24, 98, 255, 0.1)"
  slate: "#3F5975"
  small-print: "#6F6F6F"
  body-grey: "#8E8D92"
  warm-stone: "#696765"
  nav-hairline: "#DEDBD9"
  card-hairline: "#EDEAE8"
typography:
  footnote-marker:
    fontFamily: NeueMontreal
    fontSize: 10.5px
    fontWeight: 400
    lineHeight: 10.5px
    letterSpacing: 0.14px
  mono-label:
    fontFamily: IBM Plex Mono
    fontSize: 10px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0em
  small-print:
    fontFamily: NeueMontreal
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: 0.12px
  nav-label:
    fontFamily: NeueMontreal
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 1.6px
  body-3:
    fontFamily: NeueMontreal
    fontSize: 13px
    fontWeight: 400
    lineHeight: 15.6px
    letterSpacing: 0.14px
  legal-footnote:
    fontFamily: NeueMontreal
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0.14px
  body-2:
    fontFamily: NeueMontreal
    fontSize: 15px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0.014px
  meta:
    fontFamily: NeueMontreal
    fontSize: 16px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0.12px
  body-1:
    fontFamily: NeueMontreal
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: 0.16px
  subheading:
    fontFamily: NeueMontreal
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: 0.16px
  headline-5:
    fontFamily: NeueMontreal
    fontSize: 22px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.18px
  headchapter:
    fontFamily: NeueMontreal
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0.22px
  headline-4:
    fontFamily: NeueMontreal
    fontSize: 28px
    fontWeight: 400
    lineHeight: 30.8px
    letterSpacing: 0.28px
  headline-2:
    fontFamily: NeueMontreal
    fontSize: 44px
    fontWeight: 400
    lineHeight: 48.4px
    letterSpacing: 0.44px
  headline-1:
    fontFamily: NeueMontreal
    fontSize: 56px
    fontWeight: 400
    lineHeight: 61.6px
    letterSpacing: 0.56px
  counter-numeral:
    fontFamily: NeueMontreal
    fontSize: 64px
    fontWeight: 400
    lineHeight: 70.4px
    letterSpacing: -1.30704px
  display-max:
    fontFamily: NeueMontreal
    fontSize: 120px
    fontWeight: 400
    lineHeight: 120px
    letterSpacing: 0.56px
rounded:
  flag-chip-modal-close-button: 2px
  badge-chip-quiz-answer: 4px
  inline-logo-image: 5px
  buttons-media-panels: 8px
  member-story-card: 8px
  review-card: 12px
  single-large-media-frame: 14.72px
  media-tile: 16px
  testimonial-card: 20px
  filter-pill: 51px
  pill-button-avatar-frame: 9999px
spacing:
  2xs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  5xl: 64px
  6xl: 80px
  7xl: 90px
  8xl: 112px
  9xl: 200px
---
# Eight Sleep — Style Reference
> A white room at first light, one blue line of data running through it.

**Theme:** light

The canvas is plain white, the ink plain black, and almost everything else a half-step of grey laid on top. Blue reads as an ink rather than a surface: where it does fill a control it comes in at a tenth of its opacity. Type is NeueMontreal across four weights — 300, 400, 500 and 700 — with 400 carrying display and body at every size, 500 arriving on labels and names at 12, 16, 18 and 28px, and 700 appearing once, at 12px on "Based on 30,215 reviews", with positive tracking of roughly 0.01em at nearly every size, so hierarchy is carried by scale and line-height rather than weight. Bands run the full width of the viewport and stack, with a 64px side inset doing the work a container max-width would do elsewhere. The same spine carries the storefront, the product page and the accessories grid; the testimonial wall trades the white canvas for pale grey cards, borrows a brighter blue for the social handles, and lets the black footer go.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#000000` | `--color-ink` | The system's text colour. As a fill it tends to land where a surface ends the page or a control is the primary action — `.Footer_footer__JauHh`, and the active filter pill "All". |
| Paper | `#FFFFFF` | `--color-paper` | The canvas, and the ink on every dark band. Also the review card's circular footer badge. |
| Warm Paper | `#F9F8F7` | `--color-paper-warm` | The off-white band and the product image plate — one luminance step down, separating a section without a line. |
| Card Grey | `#F4F4F4` | `--color-card` | The testimonial card `.WallOfLove_container__075og`, whose fill and `rgba(0, 0, 0, 0.05) 2px 2px 12px 0px` shadow always arrive together. |
| Review Grey | `#F1F2F4` | `--color-card-cool` | The review card fill, cooler than Card Grey. Shadowless; the radius separates. |
| Warm Panel | `#F4F2F0` | `--color-panel-warm` | A wide warm panel and the resting inactive filter pill. Not a text colour. |
| Lavender Chip | `#F1F3FE` | `--color-chip` | Badge and eyebrow fill, and the top stop of the home page's gradient. A tint, not a brand blue — pair with `--color-indigo`. |
| Signal Blue | `#1862FF` | `--color-blue` | Text on the testimonial handles. As a solid it behaves as ink; its 10% tint is the surface it makes, on `.ModalScreens_quiz_button__dOmar`. |
| Indigo | `#4158EE` | `--color-indigo` | Eyebrow and badge ink on Lavender Chip — "Requires Pod", "Couples", "App Store". Editorial labelling, not a CTA. |
| Quiz Tint | `rgba(24, 98, 255, 0.1)` | `--color-blue-tint` | The lead-capture answer fill — blue as surface, at a tenth of its strength. |
| Slate | `#3F5975` | `--color-slate` | The promo strip fill, on every captured page. The single mid-tone hue in the chrome. |
| Small Print | `#6F6F6F` | `--color-text-quiet` | The dominant small-print ink on the testimonial wall — attributions, dates, verification notes. |
| Body Grey | `#8E8D92` | `--color-text-muted` | Secondary body and the footer disclaimer. Cool; pairs with black, not the warm greys. |
| Warm Stone | `#696765` | `--color-text-stone` | Warm secondary ink on section descriptions, and the light tab pill's border. |
| Hairline | `#A0A0A0` | `--color-hairline` | Footnote text and the 1px border of the outlined circular icon buttons — a line colour and a legal-copy colour at once. |
| Nav Hairline | `#DEDBD9` | `--color-rule-nav` | The 1px rule under the desktop nav container. Warm, so it sits on white without going grey-blue. |
| Card Hairline | `#EDEAE8` | `--color-rule-card` | The 1px border of the accessory card shell, and the statement band's headline ink. |

## Tokens — Typography

### NeueMontreal — the whole voice: display, headings, body, labels, legal · `--font-sans`
- **Substitute:** Neue Haas Grotesk Display, Inter, Helvetica Now Display
- **Weights:** 300, 400, 500, 700
- **Sizes:** 10.5, 12, 13, 14, 15, 16, 17, 18, 20, 22, 28, 44, 56, 64, 120px
- **Line height:** 10.5px on 10.5px through 120px on 120px — display locks near 1.1, body near 1.4, small print near 1.2
- **Letter spacing:** positive and proportional at nearly every size (12px/0.12px, 44px/0.44px, 56px/0.56px). Two rows break it: `.NavBar_nav_bar_item__W48cu` at 1.6px on 12px, and `.SleepAnalyzedCard_card_text_number__ViJej` at −1.30704px on 64px.
- **Role:** The heading rows at 44px (`.ModalScreens_headline__fP5Dy`), 56px (`.type_base.Type_headline1__yu_26`) and 120px (`.TempElevationSound_nav_button_label__kzRKi`) are weight 400; 500 arrives at 18px and 28px, 700 at 12px on "Based on 30,215 reviews". Scale carries hierarchy.

### Oswald — condensed numerals for readouts and scores · `--font-numeral`
- **Substitute:** Oswald, Roboto Condensed, Barlow Condensed
- **Weights:** 400
- **Sizes:** 39.8089px, 56px
- **Line height:** 56px on 56px; the smaller readout is `normal`
- **Letter spacing:** 1.59027px at 39.8089px, 0.72px at 56px — wide for a condensed face, so digits breathe
- **Role:** The "27°" temperature readout on the product page and the "4.5" aggregate score. It appears where a number is the content.

### IBM Plex Mono — uppercase micro-labels · `--font-mono`
- **Substitute:** IBM Plex Mono, Roboto Mono, ui-monospace
- **Weights:** 400, 500
- **Sizes:** 10px, measured on the uppercase badge span
- **Line height:** 12px on 10px
- **Letter spacing:** normal
- **Role:** Platform tags on the testimonial wall — "App Store" — set in Indigo on Lavender Chip. Technical attribution, not prose.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Footnote marker | 10.5px | 10.5px | 0.14px | `--text-marker` |
| Mono label | 10px | 12px | normal | `--text-mono` |
| Small print | 12px | 14.4px | 0.12px | `--text-xs` |
| Nav label (500) | 12px | 16px | 1.6px | `--text-nav` |
| Body 3 | 13px | 15.6px | 0.14px | `--text-sm` |
| Legal / footnote | 14px | 19.6px | 0.14px | `--text-legal` |
| Body 2 | 15px | 19.6px | 0.014px | `--text-body-2` |
| Meta (500) | 16px | 15px | 0.12px | `--text-meta` |
| Body 1 | 18px | 25.2px | 0.16px | `--text-body-1` |
| Subheading (500) | 18px | 25.2px | 0.16px | `--text-subhead` |
| Headline 5 | 22px | 24px | 0.18px | `--text-h5` |
| Headchapter | 22px | 28px | 0.22px | `--text-headchapter` |
| Headline 4 (500) | 28px | 30.8px | 0.28px | `--text-h4` |
| Headline 2 | 44px | 48.4px | 0.44px | `--text-h2` |
| Headline 1 | 56px | 61.6px | 0.56px | `--text-h1` |
| Counter numeral | 64px | 70.4px | −1.30704px | `--text-counter` |
| Display max | 120px | 120px | 0.56px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--spacing-2xs` |
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 20px | `--spacing-xl` |
| 2xl | 24px | `--spacing-2xl` |
| 3xl | 32px | `--spacing-3xl` |
| 4xl | 48px | `--spacing-4xl` |
| 5xl | 64px | `--spacing-5xl` |
| 6xl | 80px | `--spacing-6xl` |
| 7xl | 90px | `--spacing-7xl` |
| 8xl | 112px | `--spacing-8xl` |
| 9xl | 200px | `--spacing-9xl` |

Painted values the 4px grid does not hold: 15px (quiz button vertical padding), 4.8px and 1.6px (review card inner gaps), 62.56px (review card side inset), 75px (footer side inset).

### Border Radius

| Element | Value |
|---------|-------|
| Flag chip, modal close button | 2px |
| Badge, chip, quiz answer | 4px |
| Inline logo image | 5px |
| Buttons, media, panels | 8px |
| Member story card (bottom only) | 0 0 8px 8px |
| Review card | 12px |
| Single large media frame | 14.72px |
| Media tile | 16px |
| Testimonial card | 20px |
| Filter pill | 51px |
| Pill button, avatar frame | 9999px |
| Dot, ring, circular icon button | 50% |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Card lift | `rgba(0, 0, 0, 0.05) 2px 2px 12px 0px` | `--shadow-card` |
| Input underline | `rgb(255, 255, 255) 0px 1px 0px 0px` | `--shadow-underline` |
| Focus halo | `rgba(255, 255, 255, 0.9) 0px 0px 0px 4px` | `--shadow-focus` |
| Glass drop | `rgba(0, 0, 0, 0.55) 1.42081px 1.42081px 45.4921px 0px` | `--shadow-glass` |

### Layout
- **Page max-width:** not measured — the widest section box is `.CardSwiper_outer_wrapper__OkVxV.outer_wrapper` at 1920×684–709px, the viewport itself; the site's variables declare `--size-component-button-minWidth-medium: 48px` *(declared, not painted)*
- **Section gap:** 112px of vertical padding is the dominant rhythm, 64px the secondary one; the footer pays 90px
- **Card padding:** 24px on the product image plate, 20px on the small white panel, 0px on the testimonial card, which pads its children instead
- **Element gap:** 8px is the default, 16px the next step, then 24px and 32px for nav and header rows

## Components

### Promo Bar
**Role:** The offer strip above the nav.
`.PromoBar_promo_bar__kYYJM.PromoBar_shown__Q8o0q`: a div filled `#3F5975`, 6px vertical padding, 0px side padding, radius 0px, no border, no shadow, four times across the captured pages. Its label `.PromoBar_promo_text__BLLJ2.PromoBar_promo_inner_text_clickable__4ESXz` sits in `#FFFFFF` — "SIGN UP FOR $100 OFF THE POD →" — uppercase, centred, an arrow standing in for a button; size and weight are `not measured`. The site declares `--promo-height: 42px` *(declared, not painted)*. Six pixels of padding keeps the strip from competing with the nav.

### Desktop Nav Bar
**Role:** The persistent header — wordmark centred, sections left, account and cart right.
`.DesktopHeaderNav_desktop_nav__container__mY4sC` closes with a 1px `#DEDBD9` border, three times across the product, accessories and testimonial pages. Items sit in `.DesktopHeaderNav_desktop_nav__items__GzvQE` on a 24px gap; `.DesktopHeaderNav_desktop_nav__right_content__3akfo` uses the same 24px. Each label is `.NavBar_nav_bar_item__W48cu` at 12px/500/16px with 1.6px tracking in `#000000` — the widest tracking in the census, and what lets 12px uppercase hold its own. The floating variant `.DesktopHeaderNav_desktop_nav__container_inner_wrapper_floating__RpV5K` fills `rgba(255, 255, 255, 0.3)` once, over video.

### Primary CTA Button
**Role:** The one action the chrome pushes — "Shop the Pod" in the nav, "Shop now" on every product card.
`.Button_base__NYfuD.Button_dark__hONrt.DesktopHeaderNav_desktop_nav__cta_button__ORcXl` carries radius 8px, a 14px gap between label and icon, and `#FFFFFF` ink; its fill is `not measured`. The measured dark fill belongs to `.Button_base__NYfuD.Button_primary__TmOxV.Pod5Hero_video_start_button__md3P_`: `#2A2A2A`, `#FFFFFF` text at 17px/400, padding 16px 32px, radius 8px, no border, no shadow. `.Button_button_span__owTS_` measures two ways and the census carries one — 18px/500/25.2px with 0.16px tracking in `#000000`, and that row is 52 headings and a single span, "Discover the Pod". The nav CTA's own label size, weight and line-height are `not measured`. Darkness is the signal; the action has no colour of its own.

### Accessory Product Card
**Role:** The shop unit.
The shell `.flex.flex-col.overflow-hidden.rounded-lg` is bordered 1px `#EDEAE8` four times on the accessories page; its radius, padding and fill are `not measured`. The plate inside, `.flex.aspect-square.items-center.justify-center`, is a div filled `#F9F8F7`, 24px padding all round, radius 0px, no border, no shadow. Depth comes from the product's own cast shadow in the photograph.

### Requirement Badge
**Role:** The compatibility tag beside a product name, or an eyebrow above a heading.
The rounded one, on the home page, is a div filled `#F1F3FE`, padding 2px 12px, radius 4px, no border, no shadow, boxing 73–139×23px six times, holding text like "Couples". `.Badge_discount__mC44G.Badge_transparent__yFTDf` carries `#4158EE` ink and its own label "Requires Pod"; the ink itself runs across the home, accessories and testimonial pages on three carriers — this badge, the eyebrow "Couples", and the mono tag. The mono variant is an uppercase span filled `#F1F3FE` with `#4158EE` ink at 10px/400/12px, padding 4px 8px, radius 0px, boxing 70–100×20px seven times on the testimonial wall; the census prints "App Store" as this row's exemplar, and the 70–100px box range means the seven do not all carry that label. Keep them apart: the mono is square, the chip rounded 4px.

### Region Selector
**Role:** The country switch in the header and again in the footer.
The flag is an img at radius 2px boxing exactly 21×16px, seven times across all captured pages, with no text of its own. The chevron beside it, its hit area, its fill and its menu are `not measured`. Two pixels on a 21×16 flag is the smallest corner in the vocabulary, and it exists so the flag reads as a chip rather than a sticker.

### Lead-Capture Modal
**Role:** The interstitial that asks one question before the page is read.
The headline `.type_base.Type_headline2__uHL7C.ModalScreens_headline__fP5Dy` sets 44px/400/48.4px with 0.44px tracking in `#000000`, one of the thirteen elements the 44px/400/48.4px `#000000` row covers across all four pages — the census samples that row on `.ModalScreens_break_word__i0FfM`, "Unlock a surprise", 2 of 13. The question beneath, `.ModalScreens_headchapter__OqWXC`, takes `#636363`; its size is `not measured`. Answers stack in `.ModalScreens_quiz__S0n36` on a 10px gap; `.ModalScreens_ecap_content_wrapper__xmcQF` pays 64px of vertical padding. The escape is a `button` styled as plain text: `.Button_button_reset__dX7RQ.ModalScreens_dismiss__OTWWa` renders "Skip" in `#767676`, with no fill, border or radius of its own. A 44px headline at weight 400 is the loudest thing here, and it still whispers.

### Quiz Answer Button
**Role:** The single choice control.
`.Button_base__NYfuD.Button_white__eeaTy.ModalScreens_quiz_button__dOmar` is a button filled `rgba(24, 98, 255, 0.1)`, `#000000` text at 18px/400/27px, padding 15px 24px, radius 4px, no border, no shadow, boxing 430×55px eight times, holding answers like "I feel hot or cold". Blue becomes a surface here at a tenth of its opacity — enough to read as tappable, not as a CTA. The 15px vertical padding is off the 4px grid; keep it, because it is what makes 55px with an 18px/27px label.

### Modal Close Button
**Role:** The dismiss affordance in the modal's top-right corner.
`.Button_base__NYfuD.Pod5Quiz_close_button__LAaGS` takes radius 2px and paints `rgba(255, 255, 255, 0.9) 0px 0px 0px 4px` — a white halo, twice. Its fill, size and padding are `not measured`. The resting state is an outlined square holding an X.

### Statement Band
**Role:** The full-bleed emotional beat between two shop sections.
`.ScrollSequenceStatic_subtitle__3x8ZP` sets 56px/400/61.6px with 0.56px tracking in `#EDEAE8` — "Life changed." — one element on the accessories page. The band's own fill is `not measured`.

### Footer
**Role:** The black endplate.
`.Footer_footer__JauHh` is a footer filled `#000000`, 90px vertical padding, 75px side inset, radius 0px, no border, no shadow, three times across the home, product and accessories pages. The 20px/400/24px `#FFFFFF` head row runs 15 h3s across the home, product and accessories pages. `.Footer_email_header__PyJRI` is 3 of those 15 — the newsletter header, one per page. The four link-column heads take the same metrics; their own class is `not measured`. Below `.Footer_contact_container__5I8E9`, `.Footer_copyright__4xz_d` sets "© 2026 Eight Sleep. All rights reserved." in `#D3D3D3`; `.Footer_asterisk__3aLuc.Footer_footnote_definition__0pSeU` runs 14px/400/19.6px with 0.14px tracking in `#A0A0A0`, its superscript markers at 10.5px/400/10.5px in the same ink. `.Footer_contact_container__5I8E9` carries `#363636` as text and border, and `.Footer_country_picker_container__3VRDm` repeats the 90px/75px frame.

### Email Capture Form
**Role:** The newsletter field in the footer.
`.EmailInput_form__GFJiL` paints `rgb(255, 255, 255) 0px 1px 0px 0px`, three times across the home, product and accessories pages: a box-shadow used as an underline. Its header `.Footer_email_header__PyJRI` runs 20px/400/24px in `#FFFFFF`, the helper line 16px/400/22.4px with `normal` tracking in `#FFFFFF` — "Sign up to stay updated on the newest in sleep t…" — and the consent copy `.Footer_disclaimer___b_Li` drops to `#8E8D92`. On black, a 1px white rule is the entire input.

## Do's and Don'ts

### Do
- Step surfaces by luminance: `#FFFFFF` canvas, `#F9F8F7` band, `#F4F4F4` or `#F1F2F4` card. `.ReviewCard_review_card__container__kMzNJ` fills `#F1F2F4` at radius 12px with shadow none — the step alone separates.
- Keep the primary action black. The filter control "All" paints `#000000` with `#FFFFFF` text at 16px/500, padding 12px 24px, radius 51px when active, `#F4F2F0` with `#000000` text at the same metrics when not.
- Track display type positively at about 0.01em: 44px carries 0.44px, 56px carries 0.56px, 28px carries 0.28px.
- Give a band 112px of vertical padding and a 64px side inset — the pairing `.Pod5Hero_container__NsAaG` and `.PodDoesNotReplaceBed_section__wTT6w` both use.
- Let blue be an ink. `#1862FF` is painted on the "@eightsleep" handles, `#4158EE` on "Requires Pod"; the blue surfaces in the census are the 10% quiz tint and three `pointer-events-none` layers on the product page, across two classes filled `#4F7FFF`.
- Reserve the mono face for uppercase micro-labels at 10px/400/12px, as the "App Store" tag does.

### Don't
- Don't reach for a shadow where a hairline or a luminance step will do. Of the four box-shadows the pages paint, one repeats at scale — `.WallOfLove_container__075og`'s `rgba(0, 0, 0, 0.05) 2px 2px 12px 0px`.
- Don't give the CTA a hue. The fills the controls census measures are `#000000`, `#2A2A2A`, `#FFFFFF`, `#F4F4F4`, `#F4F2F0`, `rgba(0, 0, 0, 0.45)`, `rgba(0, 0, 0, 0.1)` and the 10% blue tint.
- Don't set a headline heavier. The rows at 44px (`.ModalScreens_headline__fP5Dy`), 56px (`.type_base.Type_headline1__yu_26`) and 120px (`.TempElevationSound_nav_button_label__kzRKi`) are weight 400; 700 appears at 12px on "Based on 30,215 reviews".
- Don't standardise the radius. The vocabulary is plural on purpose, from 2px on a flag to 9999px on a pill.
- Don't uppercase prose. Uppercase is measured on `.NavBar_nav_bar_item__W48cu` at 1.6px tracking and on the "App Store" tag; body rows at 15px/19.6px and 18px/25.2px are sentence case.
- Don't fatten the promo strip. `.PromoBar_promo_bar__kYYJM.PromoBar_shown__Q8o0q` pays 6px of vertical padding, no side padding.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page ground and the fill of the widest section boxes. |
| 1 | Warm paper | `#F9F8F7` | Alternating band and product plate; one step down, still white to the eye. |
| 2 | Card grey | `#F4F4F4` | Testimonial card — the surface carrying the system's repeating shadow. |
| 2 | Review grey | `#F1F2F4` | Review card; the cooler of the two card greys. |
| 2 | Warm panel | `#F4F2F0` | Wide warm panel and the resting filter pill. |
| 3 | Chip | `#F1F3FE` | Badge and eyebrow ground; the tinted surface in daily use. |
| — | Slate | `#3F5975` | Promo strip; a chrome surface, not a content one. |
| Inverse | Near-black | `#121212` / `#111111` | Single dark feature sections on the home and product pages. |
| Inverse | Ink | `#000000` | The footer, and the end of the page. |

## Elevation

Depth is luminance and hairline. The ladder steps two or three points of luminance at a time — `#FFFFFF` to `#F9F8F7` to `#F4F4F4` — and structure is drawn with 1px lines in `#DEDBD9`, `#EDEAE8`, `#A0A0A0`, `#696765`, and `#2E2E2E` around three dark cards. The exception is the testimonial wall, where `rgba(0, 0, 0, 0.05) 2px 2px 12px 0px` repeats across every card, soft enough that the wall reads as paper on paper. The remaining two shadows are mechanisms, not depth.

## Imagery

Photography carries the brand: interior, warm-neutral, in situ. Bedroom scenes are linen and plaster and walnut in raking daylight, the product placed like furniture, no callouts, no diagram. Product-only shots are cutouts floated on the `#F9F8F7` square plate with their own contact shadow, which is why the card needs none. Full-bleed frames hold macro texture — knit fabric, the debossed 8 — at a scale where the material is the subject. No illustration appears in the tiles; the only drawn marks are the outline icons above the assurance copy, at stroke weights matched to body text. The wordmark is a stacked EIGHT / SLEEP lockup beside an 8 built from two slabs, centred rather than left, which makes the header read as a masthead.

## Layout

Bands stack full-bleed; the page is a vertical sequence, not a grid. The widest measured box is 1920px, and content is held in by a 64px side inset used by more than forty blocks across all four pages; the footer widens to 75px, and one carousel pushes to 240px to let cards bleed off the right edge. Vertical rhythm has two settings, 112px and 64px, then two standing frames — 90px on the footer and its country picker, six elements across the home, product and accessories pages, and 80px on the scroll-sequence headers and benefits container, five elements over the same three pages — with 88px, 104px and 150px as genuine one-offs, 60px twice, 48px once, and 200px on a double header. The accessories grid is four equal cards in a row. Nav is a three-part header over the slate promo strip, going floating and translucent over video. The testimonial wall trades bands for a masonry field of 300px-wide cards at 20px radius, and is where the black footer stops appearing.

## Typography Voice

Two modes, one face. Display runs NeueMontreal 400 at 44px, 56px and 120px with line-height near 1.1, so headlines set as tight blocks and break on their own punctuation ("Real people.Real results."). Reading mode runs the same weight at 15px and 18px near 1.4, loose enough that long legal paragraphs stay readable in `#A0A0A0` at 14px. Tracking is the through-line: nearly every row adds about 0.01em, keeping counters open at 12px and stopping 56px headlines from clotting. `.NavBar_nav_bar_item__W48cu` takes 1.6px on 12px because uppercase at that size needs the air; `.SleepAnalyzedCard_card_text_number__ViJej` takes −1.30704px on 64px, the only negative tracking measured, so numerals read as one ticking figure.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#000000`
- surface: `#F4F4F4`
- border: `#EDEAE8`
- accent: `#1862FF`
- primary action: `#000000`

## Example Component Prompts

1. **Promo Bar**: A full-width strip filled `#3F5975`, 6px vertical padding, no side padding, radius 0, no border, no shadow. Centre one line of uppercase `#FFFFFF` NeueMontreal text ending in a `→`, the strip clickable, above the header.
2. **Accessory Product Card**: A column card, 1px `#EDEAE8` border, hidden overflow. Top: a square plate filled `#F9F8F7`, 24px padding, radius 0, holding a cut-out product image. Below: a name at 18px/500/25.2px, 0.16px tracking, `#000000`; a 4px-radius badge filled `#F1F3FE` with `#4158EE` text beside it, padding `not measured`; a description at 15px/400/19.6px, 0.014px tracking; a price; a full-width dark button with `#FFFFFF` label at radius 8px, fill `not measured`.
3. **Lead-Capture Modal**: Split the viewport — photograph left, `#FFFFFF` panel right. In the panel: a 44px/400/48.4px headline, 0.44px tracking, `#000000`; a subhead in `#636363`; four stacked buttons filled `rgba(24, 98, 255, 0.1)` with `#000000` text at 18px/400/27px, padding 15px 24px, radius 4px, 430×55px, on a 10px gap; a plain "Skip" link in `#767676`. Close control top-right at radius 2px with a `rgba(255, 255, 255, 0.9) 0 0 0 4px` focus halo.
4. **Footer**: A `#000000` footer, 90px vertical and 75px horizontal padding. Left: a 20px/400/24px `#FFFFFF` header, a helper line at 16px/400/22.4px, an email field carrying `rgb(255, 255, 255) 0px 1px 0px 0px` as its underline with an arrow submit, consent copy in `#8E8D92`. Right: four link columns with 20px/400/24px `#FFFFFF` heads. Below the contact box: copyright in `#D3D3D3`, footnotes at 14px/400/19.6px, 0.14px tracking, `#A0A0A0`.
5. **Desktop Nav Bar**: A `#FFFFFF` header closed by a 1px `#DEDBD9` bottom border. Left: uppercase links at 12px/500/16px, 1.6px tracking, `#000000`, on a 24px gap. Centre: a stacked wordmark. Right, on a 24px gap: an uppercase account link, a 21×16px flag image at radius 2px with a chevron, a cart icon, and a dark CTA at radius 8px with a 14px gap between its `#FFFFFF` label and icon.

## Similar Brands

- **Oura** — another sleep-hardware system on a near-white canvas, holding one saturated colour back for data and links rather than buttons.
- **Bang & Olufsen** — the same insistence on photographing product as furniture in warm-neutral interiors, with hairlines instead of shadow.
- **Rimowa** — centred wordmark masthead, black-only actions, product cutouts floated on flat grey plates in an even grid.
- **Herman Miller** — full-bleed interior photography alternating with off-white bands, a grotesque set at weight 400 across the scale.
- **Aesop** — restraint as the brand: small tracked type, generous vertical rhythm, long legal copy treated as part of the composition.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-paper: #FFFFFF;
  --color-paper-warm: #F9F8F7;
  --color-card: #F4F4F4;
  --color-card-cool: #F1F2F4;
  --color-panel-warm: #F4F2F0;
  --color-chip: #F1F3FE;
  --color-blue: #1862FF;
  --color-blue-tint: rgba(24, 98, 255, 0.1);
  --color-blue-glow: #4F7FFF;
  --color-indigo: #4158EE;
  --color-slate: #3F5975;
  --color-text-quiet: #6F6F6F;
  --color-text-muted: #8E8D92;
  --color-text-grey: #636363;
  --color-text-stone: #696765;
  --color-text-skip: #767676;
  --color-hairline: #A0A0A0;
  --color-rule-nav: #DEDBD9;
  --color-rule-card: #EDEAE8;
  --color-rule-dark: #2E2E2E;
  --color-contact: #363636;
  --color-copyright: #D3D3D3;
  --color-counter: #F0F0F0;
  --color-small-print: #A6A6A6;
  --color-surface-dark: #121212;
  --color-surface-darker: #111111;
  --color-button-dark: #2A2A2A;
  --color-gradient-top: #F1F3FE;
  --color-gradient-mid: #1B263B;
  --color-gradient-deep: #090B12;
  --color-timeline-1: #879FB2;
  --color-timeline-2: #566D81;
  --color-timeline-3: #3C5267;
  --color-timeline-4: #203141;
  --color-alert: #B93737;
  --color-overlay-strong: rgba(0, 0, 0, 0.7);
  --color-overlay-mid: rgba(0, 0, 0, 0.5);
  --color-overlay-soft: rgba(0, 0, 0, 0.45);
  --color-overlay-tag: rgba(0, 0, 0, 0.25);
  --color-overlay-faint: rgba(0, 0, 0, 0.1);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-04: rgba(255, 255, 255, 0.04);
  --color-white-02: rgba(255, 255, 255, 0.02);

  /* Typography — Families */
  --font-sans: 'NeueMontreal', 'Neue Haas Grotesk Display', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-numeral: 'Oswald', 'Roboto Condensed', ui-sans-serif, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-mono: 10px;      --leading-mono: 12px;
  --text-marker: 10.5px;  --leading-marker: 10.5px;
  --text-xs: 12px;        --leading-xs: 14.4px;
  --text-nav: 12px;       --leading-nav: 16px;
  --text-sm: 13px;        --leading-sm: 15.6px;
  --text-legal: 14px;     --leading-legal: 19.6px;
  --text-body-2: 15px;    --leading-body-2: 19.6px;
  --text-meta: 16px;      --leading-meta: 15px;
  --text-body-1: 18px;    --leading-body-1: 25.2px;
  --text-subhead: 18px;   --leading-subhead: 25.2px;
  --text-h5: 22px;        --leading-h5: 24px;
  --text-headchapter: 22px; --leading-headchapter: 28px;
  --text-h4: 28px;        --leading-h4: 30.8px;
  --text-h2: 44px;        --leading-h2: 48.4px;
  --text-h1: 56px;        --leading-h1: 61.6px;
  --text-counter: 64px;   --leading-counter: 70.4px;
  --text-display: 120px;  --leading-display: 120px;
  --tracking-body: 0.16px;
  --tracking-h1: 0.56px;
  --tracking-nav: 1.6px;
  --tracking-counter: -1.30704px;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;
  --spacing-6xl: 80px;
  --spacing-7xl: 90px;
  --spacing-8xl: 112px;
  --spacing-9xl: 200px;
  --inset-page: 64px;
  --inset-footer: 75px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-logo: 5px;
  --radius-md: 8px;
  --radius-card: 12px;
  --radius-frame: 14.72px;
  --radius-tile: 16px;
  --radius-lg: 20px;
  --radius-pill: 51px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.05) 2px 2px 12px 0px;
  --shadow-underline: rgb(255, 255, 255) 0px 1px 0px 0px;
  --shadow-focus: rgba(255, 255, 255, 0.9) 0px 0px 0px 4px;
  --shadow-glass: rgba(0, 0, 0, 0.55) 1.42081px 1.42081px 45.4921px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-ink: #000000;
  --color-paper: #FFFFFF;
  --color-paper-warm: #F9F8F7;
  --color-card: #F4F4F4;
  --color-card-cool: #F1F2F4;
  --color-panel-warm: #F4F2F0;
  --color-chip: #F1F3FE;
  --color-blue: #1862FF;
  --color-blue-tint: rgba(24, 98, 255, 0.1);
  --color-blue-glow: #4F7FFF;
  --color-indigo: #4158EE;
  --color-slate: #3F5975;
  --color-text-quiet: #6F6F6F;
  --color-text-muted: #8E8D92;
  --color-text-grey: #636363;
  --color-text-stone: #696765;
  --color-text-skip: #767676;
  --color-hairline: #A0A0A0;
  --color-rule-nav: #DEDBD9;
  --color-rule-card: #EDEAE8;
  --color-rule-dark: #2E2E2E;
  --color-contact: #363636;
  --color-copyright: #D3D3D3;
  --color-counter: #F0F0F0;
  --color-small-print: #A6A6A6;
  --color-surface-dark: #121212;
  --color-surface-darker: #111111;
  --color-button-dark: #2A2A2A;
  --color-gradient-top: #F1F3FE;
  --color-gradient-mid: #1B263B;
  --color-gradient-deep: #090B12;
  --color-timeline-1: #879FB2;
  --color-timeline-2: #566D81;
  --color-timeline-3: #3C5267;
  --color-timeline-4: #203141;
  --color-alert: #B93737;

  --font-sans: 'NeueMontreal', 'Neue Haas Grotesk Display', Inter, ui-sans-serif, sans-serif;
  --font-numeral: 'Oswald', 'Roboto Condensed', ui-sans-serif, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Roboto Mono', ui-monospace, monospace;

  --text-mono: 10px;
  --text-marker: 10.5px;
  --text-xs: 12px;
  --text-nav: 12px;
  --text-sm: 13px;
  --text-legal: 14px;
  --text-body-2: 15px;
  --text-meta: 16px;
  --text-body-1: 18px;
  --text-h5: 22px;
  --text-headchapter: 22px;
  --text-h4: 28px;
  --text-h2: 44px;
  --text-h1: 56px;
  --text-counter: 64px;
  --text-display: 120px;

  --leading-mono: 12px;
  --leading-xs: 14.4px;
  --leading-nav: 16px;
  --leading-body-2: 19.6px;
  --leading-body-1: 25.2px;
  --leading-h1: 61.6px;
  --leading-display: 120px;

  --tracking-body: 0.16px;
  --tracking-h1: 0.56px;
  --tracking-nav: 1.6px;
  --tracking-counter: -1.30704px;

  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;
  --spacing-6xl: 80px;
  --spacing-7xl: 90px;
  --spacing-8xl: 112px;
  --spacing-9xl: 200px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-logo: 5px;
  --radius-md: 8px;
  --radius-card: 12px;
  --radius-frame: 14.72px;
  --radius-tile: 16px;
  --radius-lg: 20px;
  --radius-pill: 51px;
  --radius-full: 9999px;

  --shadow-card: rgba(0, 0, 0, 0.05) 2px 2px 12px 0px;
  --shadow-underline: rgb(255, 255, 255) 0px 1px 0px 0px;
  --shadow-focus: rgba(255, 255, 255, 0.9) 0px 0px 0px 4px;
  --shadow-glass: rgba(0, 0, 0, 0.55) 1.42081px 1.42081px 45.4921px 0px;
}
```