Obsidian
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Sonos
sonos.comWebsite preview
The design language
Sonos operates in a deliberate visual void — pure achromatic black, white, and gray with zero chromatic accent. The interface is a frame for photography rather than a canvas of color; lifestyle imagery of people in warm-lit spaces does every emotional job that a brand color would normally carry. Typography is the only voice: aktiv-grotesk at dramatic scale, with display sizes reaching 96px and tight 1.0 line-height creating poster-like headlines that float over full-bleed photography. Components are reduced to their silhouettes — pill-shaped buttons (80px radius), minimal navigation, generous breathing room — letting product photography and large type carry the entire identity. The result is a luxury-electronics aesthetic where restraint signals premium, not austerity.
Color palette
neutral
Paper White
#ffffffLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Concrete
#f5f5f5Dominant page canvas, section backgrounds, elevated surface wash
Graphite
#2e2e2eDark surface panels, secondary dark fill, text on light cards
Mist
#e0e0e0Hairline borders, subtle separators, box-shadow tint on cards
Ash
#cdcdcdVisible borders, dividers between sections or card edges
Smoke
#bfbfbfButton hover borders, outline stroke, subtle elevation shadow base
Slate
#737373Muted secondary text, icon strokes on light surfaces, metadata labels
Charcoal
#5f5f5fSupporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Typography
Type scale
Minor Third (1.2) · 15px basedisplay-lg
96px · 500 · 1The quick brown fox jumps
text-72
72px · 500 · 1.2The quick brown fox jumps
display
64px · 500 · 1The quick brown fox jumps
heading-lg
48px · 500 · 1.2The quick brown fox jumps
heading
40px · 400 · 1.2The quick brown fox jumps
heading-sm
32px · 500 · 1.2The quick brown fox jumps
subheading
21px · 400 · 1.3The quick brown fox jumps
body-lg
18px · 500 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
aktiv-grotesk
- Weights
- 400, 500, 700
- Sizes
- 13px, 14px, 16px, 18px, 21px, 32px, 40px, 48px, 64px, 72px, 96px
- Line height
- 1.00–1.50 (tighter as size increases: 1.50 for body, 1.00 for display)
- Fallback
- Inter, Söhne, or Suisse Int'l
Sole typeface. Body text at 400 weight 16px with 1.5 line-height. Headlines scale dramatically to 64–96px at 400 weight with line-height 1.0 for poster-like impact. Nav and buttons use 500–700 at 14–16px. The dramatic size range and tight display leading are the signature — type is the only brand voice since color is absent.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1440px
- Section gap
- 80px
- Card padding
- 48px
- Element gap
- 16px
Border radius
nav
20pxcards
20pxpills
9999pxsmall
10pxbuttons
80pxSpacing scale
4px8px12px16px20px24px27px31px32px48px53px56px76px80px107px112px160px224pxGuidelines
Do
- Use 80px or 9999px border-radius on all buttons and interactive pills — pill shapes are the signature component geometry
- Set display headlines at 64–96px weight 400 with line-height 1.0 — let scale, not weight, carry authority
- Fill the viewport with photography at full bleed with no gradient overlay or scrim — contrast is created by the image itself
- Build the entire palette from #000000, #ffffff, #f5f5f5, and #2e2e2 — no chromatic accents in the UI system
- Use #ffffff for card surfaces on the #f5f5f5 canvas — the subtle off-white separation creates the surface hierarchy without borders
- Pad section content with 48–80px vertical gaps and 48px horizontal card padding — generous whitespace is structural, not decorative
- Use 14px weight 500 at 9999px radius for inline tags, status pills, and category labels
Don’t
- Never introduce a chromatic color — the 0% colorfulness is deliberate; photography carries all emotional color
- Don't bold headlines at 600–700 weight — the system uses 400 at massive size instead; bolding flattens the dramatic scale
- Don't add visible borders between most sections — use background color shifts from #f5f5f5 to #ffffff to #000000 to create separation
- Don't apply line-height above 1.2 to display sizes — the tight 1.0 leading is what makes 96px feel like a poster, not a paragraph
- Don't use box-shadow on cards for elevation — if depth is needed, use surface color layering (gray 50 → white → dark 900), not shadows
- Don't use sharp corners (0–4px radius) on primary UI elements — only on small utility elements or data tables; the system is built on soft curves
- Don't center-align body text or long-form copy — only display headlines center; body stays left-aligned with a 640px max-width
Components
Filled Dark Pill Button
Primary call-to-action on light backgroundsBackground #000000, text #ffffff, 80px border-radius (full pill), aktiv-grotesk 16px weight 500, padding 16px 32px. Inset dark shadow gives subtle bevel. Used for "Explorar todo" in hero.
Filled White Pill Button
Primary call-to-action on dark/photographic backgroundsBackground #ffffff, text #000000, 80px border-radius, 16px weight 500, padding 16px 32px. Sits on top of hero photography for high contrast.
Ghost Outlined Pill Button
Secondary action, information requestTransparent background, 1px border #ffffff (on dark) or #000000 (on light), 9999px radius, text matches border color. 16px weight 500, padding 16px 32px.
Hero Section
Full-bleed landing visualEdge-to-edge photographic background (no gradient overlay), centered text block with display headline 64–96px weight 400, line-height 1.0, white text, and two pill buttons stacked horizontally. Text sits at vertical center, no gradient or scrim — relies on photographic contrast.
Product Image Card
Showcase individual products or featuresFull-width photographic card, 20px border-radius, white text overlay positioned bottom-left, 48px padding, white ghost pill button. Image bleeds to card edges with rounded clipping.
Music Grid Section
Content discovery — radio stations, playlistsDark background #000000, dense grid of square thumbnail tiles (6–8 columns), each tile is a colorful album/playlist cover. Section headline 48px weight 400 in white, positioned left-aligned with ghost button below.
Display Heading
Section-defining statementaktiv-grotesk 64–96px weight 400, line-height 1.0, #000000 on light sections, #ffffff on dark. No font-weight bolding — the sheer size carries authority. Centered or left-aligned depending on context.
Top Announcement Bar
Promotional message stripFull-width #000000 bar, 40–48px height, white text 14px weight 400 centered, dismiss X icon left, text link right. Sits above navigation.
Primary Navigation
Site-wide navigationWhite #ffffff background, horizontal layout. SONOS wordmark left (16px weight 700, letter-spacing wide). Center: text links 14px weight 400 (#000000). Right: icon trio — account, search, cart — 24px outlined icons, #000000 stroke. No background fill on nav items.
Body Text Block
Standard paragraph content16–18px weight 400, line-height 1.5, #000000. Maximum width 640px for readability. No decorative treatment — pure clean paragraph.
Footer Link Group
Site footer navigation columnsMultiple columns of 14px text links, #000000, 16px row-gap. Section headers in 14px weight 700 uppercase or weight 500.
Scroll Indicator
Audio/video playback controlSmall circular button 32px, 1px border #ffffff or #000000, contains play/pause icon. Sits fixed in corner of media sections.
Surfaces & elevation
Level 0
Canvas
#f5f5f5Dominant page background across all sections
Level 1
Card
#ffffffElevated white surfaces — product cards, button fills, nav background
Level 2
Border
#e0e0e0Hairline separators and card edges
Level 3
Dark Surface
#2e2e2Dark panels and inverted section backgrounds
Level 4
Void
#000000Deepest surface — navigation, primary button fills, full-bleed dark sections
Filled Button
rgba(0, 0, 0, 0.627) 0px 0px 3px 0px inset, rgb(0, 0, 0) 0px 0px 3px 0px
Elevated Button
rgba(0, 0, 0, 0.25) 0px 0px 24px 0px
Layout & imagery
Layout
Max-width 1440px centered content with full-bleed photographic sections that break the container. The page model alternates between cinematic full-viewport moments and tight content sections: hero is full-bleed image with centered overlay text, followed by a white product image card section, then a dark music grid section. Section rhythm uses background color alternation (light → white → dark) rather than dividers or borders. Content is predominantly left-aligned in text blocks; product cards and hero text center. Grid usage is limited — single-column text stacks and 2-column image+text splits dominate, with a dense 6–8 column thumbnail grid only for content discovery (music/playlists). Navigation is a single white bar with no sticky behavior and no mega-menu — minimal horizontal text links. Vertical spacing between sections is generous (80px+) creating breathing room between photographic moments.
Imagery
Photography is the only color in the system. Lifestyle imagery dominates: warm-lit domestic interiors, people interacting with speakers in living rooms and on patios, golden-hour and ambient natural light. Shots are candid rather than staged, mid-action (hands placing a speaker, someone walking through a sunlit room). No studio product shots against white — products are always shown in context within lived-in spaces. The second layer is content imagery: colorful album artwork and playlist cover tiles in dense grids, which provide the only chromatic color on the entire site. No illustrations, no abstract graphics, no 3D renders. Iconography is minimal and outlined: 1px stroke, 24px size, monochrome black or white depending on surface.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 (on light) / #ffffff (on dark) - background: #f5f5f5 (page canvas) / #ffffff (cards) - border: #e0e0e0 (hairline) / #cdcdcd (visible) - primary action: no distinct CTA color - dark surface: #2e2e2e Example Component Prompts: 1. Create a hero section: full-bleed photographic background (no overlay/scrim). Centered headline at 72px aktiv-grotesk weight 400, line-height 1.0, color #ffffff. Below: a row of two pill buttons (80px radius, 16px weight 500, padding 16px 32px) — one filled #ffffff with #000000 text, one filled #000000 with #ffffff text. 2. Create a product feature card: full-width container, 20px border-radius, photographic background filling the card. Bottom-left overlay with a 32px subheading in #ffffff, a 48px heading in #ffffff, and a ghost pill button (1px border #ffffff, transparent fill, 9999px radius, #ffffff text). 3. Create a music discovery section: background #000000, full viewport. Left-aligned headline at 48px aktiv-grotesk weight 400 in #ffffff, a 16px body paragraph in #ffffff, and a ghost pill button (1px #ffffff border, 9999px radius). Right side: 6-column grid of 1:1 thumbnail tiles with 8px gaps. 4. Create a content section: #f5f5f5 background, centered display heading at 64px weight 400 line-height 1.0 in #000000, followed by a 2-column row of white #ffffff cards (20px radius, 48px padding) each containing a 21px subheading and 16px body text. 5. Create a top announcement bar: #000000 background, 44px height, full-width. Centered 14px text in #ffffff. Left: X dismiss icon in #ffffff. Right: text link in #ffffff.
Similar brands
Apple
Full-bleed lifestyle photography, massive-weight-400 display type, and a pure black/white/gray product UI with no chromatic accents
Bang & Olufsen
Premium audio with pure monochromatic palette, large minimal type, and product photography carrying all warmth and color
Teenage Engineering
Black/white/gray-only product design language with geometric sans-serif type and generous negative space
Nothing (tech)
Achromatic dot-matrix aesthetic with pill-shaped UI elements and high-contrast type-only hierarchy
Bose
Audio brand using full-bleed lifestyle imagery over near-white canvases with minimal type and pill-shaped CTAs
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
