Preview image. Unlock full-res
Matte black and white studio backdrop. The design feels like a product photography studio, with stark contrasts and focused lighting. Surfaces are either stark white or deep black, with elements precisely placed.
Sonos's design is an exercise in measured minimalism, leveraging high contrast and precise spacing to create a cinematic and functional experience. The core aesthetic relies on a stark black and white palette, allowing content and product imagery to take center stage. Typography is unadorned, favoring legibility and directness, while subtle large radii on interactive elements introduce a soft touch to an otherwise sharp visual identity. This deliberate sparsity amplifies the perceived quality and focus on sound.
Prioritize high contrast between text (#000000, #ffffff) and background colors to ensure maximum readability and visual impact.
Utilize aktiv-grotesk exclusively across all content, varying only weight and size to establish clear typographic hierarchy.
Apply 80px or 9999px borderRadius to all primary interactive elements like buttons to maintain the signature pill-like shape.
Use 16px for vertical spacing between most content blocks and elements, with 48px as the horizontal padding for buttons to maintain consistent 'comfortable' density.
Confine body text and core content within a 1440px pageMaxWidth to ensure optimal reading width and a structured layout.
Implement Studio White (#ffffff) as the default page background and Absolute Zero (#000000) for text, inverting these for high-impact full-bleed dark sections.
Avoid introducing any additional fonts or decorative typography; maintain aktiv-grotesk for all text.
Do not use subtle changes in color for emphasis; rely on high contrast between Absolute Zero and Studio White or Soft Gray for visual differentiation.
Refrain from using complex shadow effects; stick to the sparse, minimal drops detected, focusing on flat design with strong color separation.
Do not deviate from the 80px or 9999px radius for interactive elements, as this is a strong brand identifier.
Avoid breaking content out of the 1440px pageMaxWidth unless it is a full-bleed visual section designed for immersive impact.
Do not introduce highly saturated or vibrant colors unless they are specific, approved branding elements not present in the current palette, as the system relies on achromatic contrast.
