Eight Sleep

# Eight Sleep — Style Reference
> Midnight Command Center // A dark, immersive interface with pin-prick bright accents, like illuminated controls in a premium device.
Theme: dark

Eight Sleep's design evokes a sense of sophisticated, premium technology, akin to a high-end personal device, through its dominant dark surfaces and stark monochromatic palette. The experience is primarily dark, using a deep #121212 background, sharply contrasted by bright white typography and subtle gray accents. A singular vivid violet (#4158ee) serves as the primary accent, appearing sparingly on interactive elements to create precise visual cues without becoming distracting. The design prioritizes visual clarity and focused attention on product features, employing carefully structured dark surfaces rather than relying on heavy shadows or complex color schemes.

## Colors
| Name | Value | Role |
|------|-------|------|
| Midnight Ink | `#121212` | Primary page background, elevated surfaces, deep section backgrounds — sets a premium, immersive mood. |
| Porcelain White | `#FFFFFF` | Primary text color on dark backgrounds, interactive elements, button backgrounds – provides crisp contrast and highlights key information. |
| Silver Thread | `#808080` | Secondary text, subtle borders, inactive states — provides visual hierarchy without harsh contrast. |
| Ash Gray | `#8e8d92` | Desaturated text on dark backgrounds, secondary icons, subtle highlights. |
| Graphite | `#363636` | Darker accent text, subtle borders, internal component divisions. |
| Winter Frost | `#F9F8F7` | Light background for specific sections or cards within a dark theme to create subtle distinction. |
| Ghost Gray | `#F1F2F4` | Subtle background for UI elements like selected options in a pop-up. |
| Electric Violet | `#4158EE` | Primary interactive accent color for links, active states, and calls to action — provides a focused, high-tech glow against dark surfaces. |
| Sky Blue | `#1862FF` | Secondary accent for interactive elements or specific highlighted text — shares the energetic quality of Electric Violet. |
| Nightfall Gradient | `#1B263B` | Background for hero sections, creating a deep, enveloping atmosphere. |
| Ocean Blue | `#3f5975` | Subtle background on interactive elements, like selected regions in a modal. |

## Typography
| Family | Role |
|--------|------|
| NeueMontreal | Used universally across all text elements from headings to body, links, and buttons. The diverse weights and fine-tuned letter spacing allow for nuanced expression, particularly the subtle negative spacing at large sizes which keeps headlines feeling grounded despite their scale. |