Preview image. Unlock full-res
Midnight Command Center // A dark, immersive interface with pin-prick bright accents, like illuminated controls in a premium device.
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.
Use 'Midnight Ink' (#121212) as the default background for all primary page sections and modals to maintain the dark theme.
Prioritize 'Porcelain White' (#FFFFFF) for all body text, headings, and primary interactive elements on dark backgrounds to ensure high contrast.
Apply 'Electric Violet' (#4158EE) exclusively to key interactive elements like links, buttons, and active states to guide user focus.
Employ NeueMontreal weight 300 for display-sized headings (e.g., 64px, 115px) to achieve a sophisticated, whisper-like authority.
Utilize a 4px border-radius for all primary buttons and interactive inputs, and 12px for cards to establish a consistent shape language.
Maintain generous vertical spacing with sectionGap at 64px and component element spacing with elementGap at 16px.
Use text links that appear as 'Porcelain White' on dark backgrounds or 'Midnight Ink' on light backgrounds for standard interactions, reserving 'Electric Violet' for emphasis.
Avoid using multiple vibrant colors; restrict accent colors primarily to 'Electric Violet' (#4158EE) and its close variant 'Sky Blue' (#1862FF).
Do not use box shadows for general elevation; rely on background color changes or subtle outlines to indicate depth.
Do not use aggressive, heavy typography weights like 700 for large headings; the brand emphasizes subtlety through lighter weights.
Avoid circular or aggressively rounded elements other than specific small icons or carousel indicators (9999px radius).
Do not deviate from the NeueMontreal font family; it is central to the visual identity.
Do not use generic gray tones for primary text on dark backgrounds; always use 'Porcelain White' for high readability.
