---
version: alpha
name: Sonos
description: Industrial black-and-white sound system where colossal aktiv-grotesk headlines run up to 96px, every button is a fully-rounded 80px pill outlined in 2px, and a deep reserve of jewel-tone accents waits beneath a strictly monochrome surface. Confident, product-photo-led, engineered.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # muted section bands, light cards
  surface-strong: "#bfbfbf"    # mid-gray dividers, disabled chrome
  surface-dark: "#000000"      # black hero/section canvas, solid CTA fill

  # Ink / text
  ink: "#000000"               # pure-black headings, body, CTA fill
  ink-soft: "#2e2e2e"          # secondary text on light, soft-dark chrome
  ink-secondary: "#333333"     # supporting copy
  ink-muted: "#737373"         # captions, metadata (--color-greyMedium)
  on-dark: "#ffffff"           # text on black surfaces

  # Accent reserve — used sparingly over the monochrome base
  accent-green: "#c0fd00"      # electric lime highlight (--color-greenMedium)
  accent-coral: "#ec5770"      # coral accent (--color-coral)
  accent-cobalt: "#1f30ca"     # deep cobalt (--color-cobaltDark)
  accent-orange: "#fb7522"     # warm orange (--color-orangeMedium)
  accent-walnut: "#947051"     # walnut neutral-warm (--color-walnut)

  # Borders
  border: "#e0e0e0"            # hairline dividers, light separators
  border-strong: "#000000"     # the 2px pill-button outline on light
  border-on-dark: "#ffffff"    # the 2px pill-button outline on black

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.2) — Google format requires hex

typography:
  display-mega:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  display-hero:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  display:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  title:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "aktiv-grotesk, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 56px
  4xl: 80px
  5xl: 112px
  6xl: 224px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 80px
  full: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 48px
  button-primary-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 48px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  button-outline-on-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 48px
  button-outline-on-dark-hover:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.md}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  input-underline-on-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 0px 0px 8px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-muted}"

  badge:
    backgroundColor: "{colors.accent-green}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 4px 12px
---

# Sonos Design System

## Overview

Sonos designs like the hardware: black, white, and engineered to disappear into the room until you want it. The single most distinctive move is scale of voice — display headlines run **enormous**, up to `{typography.display-mega}` at 96px in **aktiv-grotesk** medium (500), set in pure black (`{colors.ink}`) on white or reversed white on a black canvas. "Create your sound system" doesn't whisper; it fills the viewport. The grotesk is industrial and neutral, with near-zero letter-spacing, so the only personality in the type comes from sheer size and the confident medium weight. This is a brand that trusts its product photography and its typography to carry everything.

The second signature is the button: every call to action is a **fully-rounded 80px pill** (`{rounded.pill}`) outlined in a crisp **2px border** — black-on-white on light sections, white-on-black on dark ones, with solid-black fills reserved for the primary action. "Shop now", "Shop sets", "Explore products" all share this identical pill-and-2px-stroke vocabulary, hovering to an inverted fill. The consistency is total: the pill is to Sonos what the squared corner is to a brutalist site — one shape, applied everywhere, becoming a signature.

Then there's the secret palette. The visible surface is strictly monochrome (black, white, `{colors.ink-muted}` gray), but beneath it sits a deep reserve of jewel tones the brand keeps in its CSS variables — electric lime (`{colors.accent-green}` `#c0fd00`), coral (`{colors.accent-coral}`), deep cobalt, warm orange, walnut. These show up as occasional accent moments — a highlight, a category color, a product line's signature — never as the page's base register. The discipline is the message: a monochrome, photography-led canvas that can reach for a vivid accent exactly when a product story needs one, then return to black and white.

**Key Characteristics:**
- **Colossal display type** — aktiv-grotesk medium (500) running up to `{typography.display-mega}` at 96px; size is the personality, tracking stays near-zero
- Strictly monochrome surface — pure black (`{colors.ink}`), white (`{colors.background}`), and `{colors.ink-muted}` gray
- **The 80px pill button** (`{rounded.pill}`) outlined in **2px** — one button shape applied everywhere; hover inverts to a solid fill
- Reversible light/dark sections: black-on-white and white-on-black share identical type and button vocabulary
- A **reserve accent palette** (lime `#c0fd00`, coral, cobalt, orange, walnut) used sparingly for product-story highlights, never as the base register
- Solid-black primary CTA (`{button-primary}`) vs. outlined secondary — clear two-tier hierarchy in one pill shape
- aktiv-grotesk for everything — display, body, and buttons; one neutral industrial face
- Generous `16px 48px` button padding and big section rhythm (`{spacing.6xl}` = 224px) — confident, spacious
- Product photography of speakers and rooms carries the visual weight; chrome is minimal
- Body type stays modest (16px, weight 400) so the huge headlines have maximum contrast
- Soft 4–8px radius on the rare card/input; the pill is reserved for actions
- Hairline `{colors.border}` and mid-gray `{colors.surface-strong}` handle structural separation

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant light canvas.
- **Whisper Gray** (`{colors.surface}`): Muted section bands and light cards.
- **Mid Gray** (`{colors.surface-strong}`): Dividers, disabled chrome, secondary surfaces.
- **Black Canvas** (`{colors.surface-dark}`): The reversed dark sections and the solid CTA fill.

### Ink / Text
- **Pure Black** (`{colors.ink}`): Headings, body, and the primary CTA fill.
- **Soft Black** (`{colors.ink-soft}`): Secondary text and soft-dark chrome.
- **Graphite** (`{colors.ink-secondary}`): Supporting copy.
- **Gray** (`{colors.ink-muted}`): Captions, metadata, hover-dim (`--color-greyMedium`).

### Accent Reserve
- **Electric Lime** (`{colors.accent-green}`): The brightest highlight (`--color-greenMedium`), used for the rarest emphasis moment.
- **Coral / Cobalt / Orange / Walnut** (`{colors.accent-coral}`, `{colors.accent-cobalt}`, `{colors.accent-orange}`, `{colors.accent-walnut}`): Product-story accents drawn from the brand's deep CSS-variable palette. Used sparingly over the monochrome base.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Light dividers and separators.
- **Strong Border** (`{colors.border-strong}`) / **On-Dark Border** (`{colors.border-on-dark}`): The 2px pill-button outline on light and dark sections respectively.
- **Soft Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the rare overlay shadow (originally rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `aktiv-grotesk`, with fallbacks `Helvetica, Arial, sans-serif`. An industrial neo-grotesque carrying display, body, and buttons.
- **Weight strategy**: medium (500) for all display and buttons; regular (400) for body and titles. The system rarely goes lighter or heavier.
- **Tracking**: near-zero across the board — Sonos lets size, not letter-spacing, do the work.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-mega` | 96px / 500 — the viewport-filling marquee headline |
| `display-hero` | 72px / 500 — primary section heroes |
| `display` | 64px / 500 — large section titles |
| `heading` | 48px / 500 — feature headings |
| `heading-sub` | 42px / 500 — sub-section headings |
| `title` | 40px / 400 — lighter large titles |
| `body-large` | 24px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body and inputs |
| `button` | 18px / 500 — pill-button text |
| `caption` | 14px / 400 — metadata, helper text |

### Principles
- **Size is the personality**: aktiv-grotesk is deliberately neutral, so impact comes from running display type huge (up to 96px).
- **Medium for impact, regular for read**: 500 on display and buttons, 400 on body — a clean two-weight system.
- **Tracking stays flat**: near-zero letter-spacing everywhere keeps the grotesk industrial and unfussy.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Section rhythm is large and confident (`{spacing.6xl}` = 224px between major bands); component internals stay measured (`{spacing.lg}`–`{spacing.2xl}`).

### Grid & Container
- Max content width: ~1440px, with full-bleed photography and black sections breaking the container
- Common pattern: a colossal headline over or beside a full-bleed product photograph, with a single pill CTA
- Product galleries are horizontally-scrolling card rows on a light or dark band

### Whitespace Philosophy
- **Spacious and confident**: large section padding lets the huge headlines breathe
- **Photography-led**: speaker and room imagery carries the page; chrome recedes
- **Reversible canvas**: light and dark sections alternate, sharing the same type and button vocabulary

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | The default — most of the site |
| Hairline (Level 1) | `1px solid {colors.border}` | Card edges, dividers |
| Overlay (Level 2) | `0 0 30px` at ~20% black (`{colors.shadow-soft}`) | Floating chrome (e.g. live-chat launcher), modals |

**Shadow Philosophy**: Sonos is nearly flat. Separation comes from the alternating light/dark canvas and from whitespace, not from elevation. Shadows appear only on transient floating chrome and overlays, and even then they're a soft ambient glow rather than a hard drop. The flatness keeps the focus on the product photography and the scale of the type.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Inputs, small chips |
| `md` | 8px | Cards, image frames |
| `lg` | 12px | Larger containers |
| `pill` | 80px | **Every button** — the signature fully-rounded action shape |
| `full` | 9999px | Avatars, circular toggles, accent badges |

The geometric language is split: soft, modest 4–8px radii on containers and inputs, and the fully-rounded **80px pill** reserved exclusively for buttons. The pill is the signature — one shape for every action, outlined in 2px, inverting on hover.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Solid black (`{colors.ink}`) fill, white text, **80px pill** radius, `16px 48px` padding. The main CTA. Hover lifts to `{colors.ink-soft}`.
- **`button-outline`** — White fill, black text, **2px black** (`{colors.border-strong}`) outline, 80px pill. The "Shop now" pattern. Hover inverts to a solid black fill.
- **`button-outline-on-dark`** — Transparent on a black section, white text, **2px white** (`{colors.border-on-dark}`) outline, 80px pill. Hover inverts to a solid white fill.

### Cards
- **`card`** / **`card-dark`** — Light gray (`{colors.surface}`) or black (`{colors.surface-dark}`) surface, 8px radius, `24px` padding. Product and feature tiles.

### Inputs
- **`input`** — White fill, 4px radius, `12px 16px` padding. **`input-focus`** keeps the frame. **`input-underline-on-dark`** is the newsletter pattern: a bottom-border-only field on a black section.

### Navigation
- **`nav-bar`** — White (or transparent over a dark hero), black aktiv-grotesk labels, hairline bottom border. Clean and minimal.

### Links & Badges
- **`link`** — Black text, hover dims to `{colors.ink-muted}`.
- **`badge`** — The rare accent moment: electric-lime (`{colors.accent-green}`) fill, black text, full pill radius.

## Do's and Don'ts

### Do
- Run display headlines **huge** — aktiv-grotesk medium (500) up to `{typography.display-mega}` at 96px; let size carry the impact
- Make every button a **fully-rounded 80px pill** (`{rounded.pill}`) outlined in **2px**
- Keep the surface strictly monochrome — black (`{colors.ink}`), white (`{colors.background}`), gray (`{colors.ink-muted}`)
- Use the accent reserve (lime `{colors.accent-green}`, coral, cobalt) sparingly, for a single product-story highlight
- Invert button fills on hover (outline → solid) rather than just shifting opacity
- Alternate light and dark sections, keeping identical type and button vocabulary across both
- Reserve solid-black fill for the primary CTA; secondary actions stay outlined
- Keep body type modest (16px / 400) so the huge headlines have maximum contrast

### Don't
- Don't add letter-spacing to the grotesk — tracking stays near-zero; size does the work
- Don't square off buttons or give them small radii — the 80px pill is the signature
- Don't let the accent palette become the base register — the surface is monochrome by default
- Don't introduce a second typeface — aktiv-grotesk carries everything
- Don't shrink the display type into politeness — Sonos headlines fill the viewport
- Don't pile on shadows — the canvas is nearly flat; separation comes from light/dark bands
- Don't use a light button weight — buttons are medium (500), confident

---

## Responsive Behavior

### Breakpoints
*(Many breakpoints surfaced in extraction; the table below summarizes the meaningful stops.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Display type scales 96px → ~40px; single column; nav collapses to a menu; pill CTAs go full-width; galleries become swipeable |
| Tablet | 640–1023px | Two-column feature rows; headlines scale to ~64px |
| Desktop | 1024–1199px | Full layout; large headlines over full-bleed photography |
| Large | ≥1200px | Max ~1440px container; biggest display sizes; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run tall with `16px 48px` padding — large, thumb-friendly tap targets
- Body type holds at 16px; nav rows carry generous vertical padding

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; a persistent pill CTA
- **Hero**: headline and product photo go from side-by-side to stacked, image full-width
- **Type**: display drops dramatically (96px → ~40px) while keeping medium weight and flat tracking
- **Spacing**: section padding compresses from 224px toward ~80px

### Image Behavior
- Product and room photography is the hero — full-bleed on mobile, gridded/galleried on desktop, 8px radius on framed cards

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Pure Black (`{colors.ink}`)
- Brand accent: monochrome base; reach for Electric Lime (`{colors.accent-green}`) only for a highlight
- Secondary text: Gray (`{colors.ink-muted}`)
- Border: Hairline (`{colors.border}`), 2px black/white for pill buttons
- CTA: Solid Black (`{colors.ink}`) pill

### Example Component Prompts

- "Create a hero: 96px pure-black (`{colors.ink}`) headline in aktiv-grotesk medium (500) with near-zero letter-spacing on white (`{colors.background}`), beside a full-bleed product photo, with a single solid-black 80px-pill CTA (`16px 48px` padding, white text)"
- "Build a primary button: solid black (`{colors.ink}`) fill, white text, **80px pill** radius, `16px 48px` padding, 18px aktiv-grotesk medium; hover lifts to `{colors.ink-soft}`"
- "Build an outlined button: white fill, black text, **2px black** (`{colors.border-strong}`) border, **80px pill** radius, `16px 48px` padding; on hover invert to a solid black fill with white text"
- "Build the same outlined button for a black section: transparent fill, white text, **2px white** (`{colors.border-on-dark}`) border, 80px pill; hover inverts to a solid white fill with black text"
- "Create a newsletter input on a black section: bottom-border-only (`{colors.surface-strong}` 1px underline), white text, transparent fill, `0 0 8px` bottom padding — no box, just an underline"
- "Add an accent badge: electric-lime (`{colors.accent-green}`) fill, black text, full pill radius, `4px 12px` padding — used once, for a single product highlight"

### Iteration Guide

1. Start monochrome on white (`{colors.background}`) with pure-black (`{colors.ink}`) type. The base register is black and white.
2. Make headlines **huge** — aktiv-grotesk medium at display sizes (up to 96px). If your headline is polite, scale it up.
3. Every button is an **80px pill** outlined in 2px. If you drew a small-radius or squared button, fix it.
4. Hover inverts the fill (outline → solid), not just opacity.
5. Reach for an accent (lime `{colors.accent-green}`, coral, cobalt) only once, for a product-story highlight — never as the base.
6. Keep tracking near-zero and body type modest (16px / 400) so the huge headlines dominate.
7. Alternate light and dark sections; the type and button vocabulary stay identical on both.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Sonos. Brand names and trademarks belong to their respective owners.