---
title: "Sonos design system"
variant: extended
source: https://www.sonos.com/en-us/home
captured_at: 2026-10-12
theme: light
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/sonos-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Sonos · Design System

> Quiet monochrome, vivid listening moments

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.sonos.com/en-us/home · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious, editorial storefront pairs crisp monochrome UI with cinematic lifestyle imagery and sculptural product photography. Rounded, outlined controls and confident typography keep the shopping experience understated and approachable.

## North star

Keep the interface nearly monochrome and spacious so product imagery and human listening scenes provide the color and emotion.

## Overview

Sonos uses a restrained monochrome interface to let its sound products and lifestyle media carry the visual character. White is the primary canvas through the shopping and product-education sections; black anchors a long, immersive app-and-services sequence, while charcoal distinguishes the announcement strip and footer. Pale gray appears in restrained supporting surfaces, with fine gray borders defining product cards rather than heavy shadows. Aktiv Grotesk supplies a consistent voice: large, medium-weight headlines sit apart from compact, readable supporting copy, and navigation remains quiet. The layout alternates centered statements, split editorial features, product-led galleries, and full-bleed video. Generous whitespace gives individual products room to read clearly, while rounded cards and pill-shaped outlined controls soften the otherwise precise grid. Real home and listening scenes bring color and human context; imagery colors are content, not a competing UI palette. The page shifts from bright product discovery to a cinematic dark experience, then returns to a clean category grid and practical footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for navigation, product education, category cards, and other bright shopping sections. |
| Speaker Black | `#000000` | `--color-speaker-black` | brand | Primary text and the solid dark band behind app, streaming, and discovery content. |
| Charcoal Note | `#2e2e2e` | `--color-charcoal-note` | neutral | Announcement and footer surfaces; also muted text and secondary links. |
| Soft Mist | `#f5f5f5` | `--color-soft-mist` | surface | Subtle supporting surface and restrained control or section fill. |
| Quiet Line | `#e0e0e0` | `--color-quiet-line` | semantic | Fine product-card and navigation-divider borders. |
| Graphite Copy | `#333333` | `--color-graphite-copy` | neutral | Occasional supporting text; not a primary page background. |
| Silver Edge | `#cdcdcd` | `--color-silver-edge` | neutral | Subtle card outline in a small set of content panels. |
| Muted Caption | `#737373` | `--color-muted-caption` | neutral | Low-emphasis small text and captions. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Speaker Black) · `--color-surface-2` → `#2e2e2e` (Charcoal Note) · `--color-surface-3` → `#f5f5f5` (Soft Mist) · `--color-text` → `#000000` (Speaker Black) · `--color-text-muted` → `#2e2e2e` (Charcoal Note) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e0e0e0` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#2e2e2e` | 1.55:1 | fail |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#2e2e2e` | `#ffffff` | 13.58:1 | AAA |
| `#2e2e2e` | `#000000` | 1.55:1 | fail |
| `#2e2e2e` | `#f5f5f5` | 12.46:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#2e2e2e` | 13.58:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(255, 255, 255) 0px, rgba(255, 255, 255, 0))`
- `linear-gradient(270deg, rgb(255, 255, 255) 0px, rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| aktiv-grotesk | `--font-body` | webfont | 400, 500 | Display and headings, body copy, navigation, links, captions, and buttons throughout the page. | Inter |

- **aktiv-grotesk:** Use measured 400 and 500 weights. Headlines are large and regular in case; body and navigation stay clean, with no all-caps UI habit.

### Type scale — Augmented Fourth (ratio ≈ 1.398, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 500 | 1.2 | 0 | — | aktiv-grotesk | Oversized campaign headline over the opening lifestyle video. |
| h1 | 72px | 500 | 1.2 | 0 | — | aktiv-grotesk | Primary page or major campaign headline. |
| h2 | 64px | 500 | 1.2 | 0 | — | aktiv-grotesk | Section titles such as product education and category introductions. |
| h3 | 48px | 500 | 1.2 | 0 | — | aktiv-grotesk | Feature and editorial block headings. |
| h4 | 42px | 500 | 1 | 0 | — | aktiv-grotesk | Smaller prominent feature or card headings. |
| body | 18px | 400 | 1.4 | 0 | — | aktiv-grotesk | Standard explanatory copy alongside products and imagery. |
| caption | 14px | 400 | 1.43 | 0.014em | — | aktiv-grotesk | Compact product, testimonial, and card captions. |
| button | 18px | 500 | 1.3 | 0 | — | aktiv-grotesk | Pill CTA labels such as Shop new arrivals. |
| nav | 16px | 400 | 1.3 | 0 | — | aktiv-grotesk | Announcement and main navigation labels. |
| link | 18px | 400 | normal | 0 | — | aktiv-grotesk | Inline secondary actions such as Learn more. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 24, 32, 48, 53, 56, 80, 107, 112 px.
- Section rhythm 107px · element gap 6px · card padding 8px · max content width 1227px.

Use a spacious, responsive editorial grid, with content constrained to the measured 1227px maximum width and select media spanning the viewport. Alternate centered statements with two-column feature splits, image-led galleries, and immersive full-bleed media. The measured section rhythm is generous, with 107px section gaps and a sparse overall density; keep supporting copy short and visually subordinate. Align product and editorial content to clear edges, while centering headline-led moments and the category section.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `24px` · nav `9999px` · xs `10px` · sm `20px` · md `24px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.627) 0px 0px 3px 0px inset, rgb(0, 0, 0) 0px 0px 3px 0px`
- Shadow `inset-2` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(224, 224, 224) 0px -1px 0px 0px inset`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 1, 1)` on interactive elements.

The page is predominantly flat: white and black section bands do most of the grouping. Use measured hairline borders for cards and navigation separation rather than pronounced shadows. Card corners are rounded, media is softer still, and pill controls are outlined; retain only the subtle inset treatment where buttons require it.

## Imagery

Favor cinematic lifestyle video, candid home scenes, and high-quality photography of people listening or using the app. Set isolated speakers and soundbars against clean, pale backgrounds so their dark forms read clearly. Use rounded media frames for editorial cards and allow selected video and image bands to run full bleed. Keep product renderings and photography sharp, realistic, and uncluttered; their varied colors belong to the imagery rather than the interface palette.

## Components

### Announcement bar

Slim charcoal strip above the white navigation, with a centered launch message and a right-aligned Shop now link.

### Main navigation

White header with Sonos mark at left, centered category links, and compact account, search, and cart icons at right; use a fine lower divider.

### Outlined pill CTA

Transparent button with a 2px black or white outline, 9999px radius, 16px 48px padding, and 18px medium Aktiv Grotesk label.

### Feature split

Pair a product or lifestyle image with a concise heading, short explanatory copy, and optional secondary link or outlined CTA.

### Product card

Image-forward card with a white or pale setting, 20px corners, a 1px #e0e0e0 border, and restrained captioning.

### Immersive media band

Full-width lifestyle video or image, with readable white text placed over darker content where needed.

### Category tile

Four-column white product category grid with centered product image and compact category label.

### Newsletter footer

Charcoal footer block with signup headline, short description, email field, subscription action, and dense link groups.

### Measured component styles

- **Primary button** (“Subscribe”): background #f4f4f4 · text #2e2e2e · border 2px solid #f4f4f4 · radius 80px · padding 16px 48px · 500 18px aktiv-grotesk
- **Secondary button** (“Shop now”): transparent background · text #ffffff · border 2px solid #ffffff · radius 80px · padding 16px 48px · 500 18px aktiv-grotesk
- **Link** (“Shop now”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px aktiv-grotesk
- **Input**: transparent background · text #f5f5f5 · radius 0px · padding 0px 0px 8px 0px · 400 16px aktiv-grotesk
- **Card** (“Sets”): transparent background · text #000000 · border 1px solid #e0e0e0 · radius 20px · padding 0px 0px 32px 0px · 400 16px aktiv-grotesk
- **Navigation item** (“Sonos Beam Ultra is here. Shop now”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px aktiv-grotesk

## Do

- Keep the interface palette monochrome and measured.
- Let lifestyle photography supply most color.
- Use generous whitespace around products and headings.
- Alternate split editorial blocks with immersive media.
- Use outlined pill controls for primary actions.
- Keep copy concise beside product imagery.

## Don't

- Do not add bright UI accents absent from the measured palette.
- Do not crowd product photography with decorative elements.
- Do not use heavy drop shadows for ordinary cards.
- Do not make every section full bleed or dark.
- Do not replace the clean grid with dense dashboard layouts.
- Do not treat image colors as brand interface colors.

## Agent prompt

Build a new Sonos-style storefront page with a clean, spacious editorial rhythm. Use Gallery White (#ffffff) for the main shopping canvas, Speaker Black (#000000) for text and selected immersive bands, and Charcoal Note (#2e2e2e) for announcement or footer surfaces. Keep Soft Mist (#f5f5f5) and Quiet Line (#e0e0e0) subtle. Use Aktiv Grotesk or Inter, with confident medium-weight headlines and readable regular body copy. Compose alternating centered headlines, split feature blocks, product galleries, and occasional full-bleed lifestyle video. Product imagery should feel realistic and uncluttered; let it introduce color. Use fine borders, rounded media and cards, and outlined pill CTAs. Preserve generous whitespace, clear product hierarchy, restrained navigation, and concise action labels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Announcement strip above a white, horizontally aligned brand and category navigation. | Launch announcement, Primary category navigation, Account and cart access | Charcoal announcement strip, White header, Icon actions |
| 2 | feature-grid | Centered section heading followed by a spacious product-and-copy feature arrangement. | Product education, Innovation proof point | Centered headline, Isolated speaker image, Small bordered stat card |
| 3 | testimonials | Two-column editorial feature pairing a portrait or studio image with quote and copy. | Expert endorsement, Editorial product education | Image-and-copy split, Compact quote panel |
| 4 | feature-split | Single editorial row with heading and copy opposite a room or product media frame. | Technology explanation, Explore-products action | Split alignment, Rounded media, Outlined CTA |
| 5 | product-showcase | Two-column showcase with headline and action beside a broad product composition. | Shop sets, System discovery | Large product image, Minimal copy, White canvas |
| 6 | feature-grid | Three image-led columns with short explanatory captions beneath. | Use-case discovery, Cross-room benefits | Three-column image cards, Compact captions |
| 7 | video | Full-bleed video section with a centered headline overlay. | Lifestyle demonstration, Immersive brand storytelling | Edge-to-edge video, Centered white headline |
| 8 | feature-split | Black-band feature row with copy on one side and app or setup imagery on the other. | Setup reassurance, Learn more action | Black background, White copy, Outlined pill CTA |
| 9 | feature-split | Full-bleed lifestyle image with copy and a compact action overlaid to one side. | Service discovery, See all services | Darkened image treatment, White text overlay, Pill link |
| 10 | content-feed | Dark editorial section with a featured discovery message and a multi-image content collage. | Browse curated content, Learn more | Black background, Content collage, White text |
| 11 | category-nav | Centered title above four evenly arranged bordered product category tiles. | Browse by category, Direct category navigation | Four-column grid, Product thumbnails, Fine card borders |
| 12 | footer | Charcoal multi-column footer with newsletter form and dense navigation link groups. | Email signup, Policy and help navigation | Dark footer surface, Email input, Light pill button |

## Source CSS custom properties (selected)

```css
--color-current: currentColor;
--color-clearBase: transparent;
--color-clearMain: transparent;
--color-base: #FFFFFF;
--color-main: #000000;
--color-linen: #F9F5F1;
--color-greyLightest: #F5F5F5;
--color-greyLighter: #F4F4F4;
--color-greyLight: #E0E0E0;
--color-greyMediumLighter: #CCCCCC;
--color-greyMediumLight: #BFBFBF;
--color-greyMedium: #737373;
--color-greyDark: #333333;
--color-grayDarkest: #2E2E2E;
--color-greenLight: #cee7b6;
--color-greenMedium: #c0fd00;
--color-greenParakeet: #03c04a;
--color-greenGray: #626457;
--color-greenDark: #465c35;
--color-greenDarkest: #1C5F4A;
--color-orangeLight: #fec8a6;
--color-orangeMedium: #fb7522;
--color-orangeDark: #65303d;
--color-purpleLight: #d6c8ff;
--color-purpleMedium: #a76fff;
--color-purpleDark: #1f355a;
--color-accentRed: #de8579;
--color-accentGold: #c59c6e;
--color-coral: #ec5770;
--color-cobaltDark: #1f30ca;
--color-redDarkest: #B30911;
--color-redDarker: #D92F18;
--color-transparent: transparent;
--color-lunar-white: #cdced0;
--color-soft-white: #EEEEEE;
--color-shadow-black: #454749;
--color-black-and-soft-white: linear-gradient(135deg,#EEEEEE,#EEEEEE 50%,#000000 0,#000000);
--color-yellow: #DED298;
--color-grey: #BCBAB6;
--color-black: #000000;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/sonos-com