# Sonos · Design system migration spec

> Source: https://www.sonos.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in premium, minimalist brand presentation, using restraint and high-quality photography to create an aspirational consumer experience.

## 1. Identity DNA

The Sonos design system operates like a premium lifestyle magazine: a disciplined framework of neutrals and whitespace designed to make the content—the photography and the product—the only color in the room. Its identity is built on a strict high-contrast palette of black, white, and light gray, where rich, warm-toned lifestyle imagery provides all visual warmth. This is a system of deliberate restraint, prioritizing cinematic presentation over decorative flourish.

**One-liner:** A premium, cinematic, and clean brand for whole-home audio systems, focusing on lifestyle imagery and bold, legible typography.
**Keywords:** premium audio · lifestyle · whole-home sound · minimalist · premium hardware
**Analogy:** A premium lifestyle magazine meets a high-end consumer electronics catalog.

## 2. Color

The color system is one of deliberate absence, built on a strict high-contrast neutral palette. Black, white, and light gray form the entire canvas, allowing the rich, warm-toned photography to provide all visual color and warmth.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#2E2E2E` | secondary text |
| `--muted` | `#BFBFBF` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast neutrals with extensive use of black and white, relying on rich, warm-toned photography to provide color.

This principle ensures that the product and its context are never competing with the interface for attention.

## 3. Typography

Typography is a single, clean, modern grotesque sans-serif—Aktiv Grotesk—used with remarkable consistency. The voice is confident and direct, relying on a regular weight for most text to maintain a uniform, understated presence that defers to the imagery.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.2 | 400 | -1px | Main headline overlays |
| h1 | 48px | 1.1 | 400 | normal | Section headlines |
| body | 16px | 1.3 | 400 | normal | General body text and navigation |

**Type rules:**
- Use a clean, modern grotesque sans-serif (like the declared 'aktiv-grotesk') for all text.
- Maintain a regular weight (400) for most text, with a slight increase (500) for specific emphasis.
- Keep line heights tight but readable, around 1.2 for headlines and 1.3 for body text.

## 4. Spacing

Spacing follows a base-4 rhythm, creating a consistent internal grid that provides order without visual clutter.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A base-4 system providing consistent spacing, with significant vertical padding for large sections (e.g., 112px).

## 5. Surfaces

Surfaces are defined by minimal, almost invisible depth. Shadows are subtle (0 1px 3px) and borders are thin, using light neutral gray or solid black to define containers without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 20px · pill 9999px
- **Shadows:**
  - 0 1px 3px rgba(0,0,0,0.1)
- **Borders:** Thin, 1px borders in a light neutral gray (#BFBFBF) or solid black (#000000) for defined containers.

## 6. Layout

The layout skeleton is a wide, full-bleed canvas with centered content containers, designed to showcase large, cinematic imagery. Generous whitespace and significant vertical padding create a spacious, unhurried reading environment.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A wide, full-bleed layout with centered content containers, utilizing significant whitespace and large imagery.

## 7. Motion & Interaction

Motion is subtle and functional, serving clarity over spectacle. Transitions are smooth, quick fades and slides for content reveals, paired with immediate, low-intensity feedback for interactive states like hovers and clicks.

- **Durations:** micro 100ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 1, 1)`
- **Patterns:**
  - Fade and slide transitions for content revealing.
  - Smooth, quick opacity changes for hover states.

- **Hover:** Subtle opacity changes or slight color shifts on interactive elements.
- **Click:** Immediate visual feedback, often through a slight scale or opacity reduction.
- **Transition:** All interactive elements have a smooth 0.1s transition.
- **Keyboard:** Standard focus outlines, likely styled to match the minimalist aesthetic.

## 8. Voice & Don'ts

The editorial voice is confident, premium, and lifestyle-oriented. Headlines are direct and benefit-driven, while calls to action are simple, action-oriented, and clear.

- **Tone:** Confident, premium, and lifestyle-oriented.
- **Headline style:** Direct, benefit-driven, and concise.
- **CTA style:** Simple, action-oriented, and clear (e.g., 'Shop all').
- **Avoid:** Technical jargon / Excessive adjectives / Cluttered layouts

### Don'ts
- ❌ Don't use a cluttered or busy layout — screenshot shows generous whitespace and a single focal point.
- ❌ Don't use low-contrast text — screenshot shows high-contrast white text on dark images or black text on white backgrounds.
- ❌ Don't use sharp, square corners — screenshot shows highly rounded, pill-shaped buttons and some rounded containers.
- ❌ Don't use a wide variety of font weights — screenshot shows a heavy reliance on a single, regular weight (400).
- ❌ Don't use vibrant, neon accent colors — screenshot shows a palette driven by neutrals and the colors within lifestyle photography.
- ❌ Don't use complex, multi-element hero sections — screenshot shows a single, dominant image with a minimal text overlay.

The system deliberately avoids technical jargon, excessive adjectives, and cluttered layouts to preserve a singular, aspirational focus.

## System Prompt (paste into AI tool)

```
Sonos is a premium audio brand whose website emphasizes lifestyle photography and bold, clean typography. The core palette is high-contrast black (#000000) and white (#FFFFFF), with light grays (#F5F5F5) and a single accent of black on white or vice-versa; no dominant high-chroma accent exists. The typography is a clean, modern grotesque sans-serif, used primarily in a regular weight (400). Critical design rules: 1) Prioritize large, cinematic lifestyle imagery that fills the viewport. 2) Use highly rounded, pill-shaped buttons for all primary calls to action. 3) Maintain extreme minimalism with generous whitespace and a single, focused headline per section. 4) Avoid technical clutter, multiple font weights, and vibrant accent colors that would distract from the premium, aspirational feel.
```
