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

# SOUNDPEATS · Design System

> Quiet monochrome, with sound at center stage

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://soundpeats.com/ · **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 product-led audio storefront that pairs a cinematic campaign hero with clean, image-rich shopping sections. Monochrome UI and generous white space keep attention on the earbuds, category photography, and editorial proof.

## North star

Keep the interface quiet and monochrome so campaign imagery and product photography carry the visual emphasis.

## Overview

SOUNDPEATS uses a restrained monochrome interface as a quiet frame for expressive campaign and product imagery. White is the dominant canvas; pale gray panels distinguish product tiles and category cards, while near-black text and black controls provide crisp contrast. The opening hero is cinematic and full bleed, with dark space imagery and a prominent product campaign, then the page shifts into a spacious two-column product mosaic. Montserrat is used throughout: compact, bold uppercase buttons contrast with lighter, generously leading body copy and restrained headings. Product photography carries most of the color and visual texture, including dark earbuds against pale backgrounds and atmospheric category images. Sections alternate between white shopping areas, video-led brand storytelling, category tiles, media quotations, and a darker service/newsletter band before a black footer. Alignment is clean and grid-based, with broad gutters and little decorative chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, header, and open shopping sections; also appears as text and controls over dark hero imagery. |
| Soft Ink | `#1c1b1b` | `--color-soft-ink` | brand | Primary heading, body, navigation, and link text on light backgrounds. |
| Mist Gray | `#f0f0f0` | `--color-mist-gray` | surface | Product mosaic cards and pale section or navigation surfaces. |
| Deep Black | `#000000` | `--color-deep-black` | neutral | Primary CTA fill, footer, newsletter band, dark category text, and selected borders. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | semantic | Muted footer copy and secondary text. |
| Warm Charcoal | `#3e3a39` | `--color-warm-charcoal` | neutral | Subtle footer border detail; secondary structural tone rather than a dominant brand surface. |
| Graphite Text | `#333333` | `--color-graphite-text` | neutral | Occasional supporting text, not a primary interface color. |
| Silver Mist | `#c9caca` | `--color-silver-mist` | neutral | Muted input placeholder text, including the newsletter email field. |
| Pale Divider | `#d9d9d9` | `--color-pale-divider` | semantic | Fine border and divider detail; keep it secondary to the large unbordered surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f0f0` (Mist Gray) · `--color-surface-2` → `#000000` (Deep Black) · `--color-surface-3` → `#1c1b1b` (Soft Ink) · `--color-text` → `#1c1b1b` (Soft Ink) · `--color-text-muted` → `#808080` (Quiet Gray) · `--color-text-subtle` → `#000000` (Deep Black) · `--color-border` → `#000000` (Deep Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1b1b` | `#ffffff` | 17.19:1 | AAA |
| `#1c1b1b` | `#f0f0f0` | 15.08:1 | AAA |
| `#1c1b1b` | `#000000` | 1.22:1 | fail |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#f0f0f0` | 3.47:1 | AA-large |
| `#808080` | `#000000` | 5.32:1 | AA |
| `#808080` | `#1c1b1b` | 4.35:1 | AA-large |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |
| `#000000` | `#1c1b1b` | 1.22:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Montserrat-Light | `--font-body` | webfont | 500, 700 | Body copy, descriptive links, and longer editorial text. | Montserrat |
| Montserrat-Medium | `--font-display` | webfont | 500, 700 | Headings, navigation, captions, and product-card labels. | Montserrat |
| Montserrat | `--font-montserrat` | webfont | 500, 700 | Buttons and small uppercase action labels. | Montserrat |

- **Montserrat-Light:** Measured at medium weight; roomy line-height creates an airy reading texture.
- **Montserrat-Medium:** Use controlled medium-to-bold emphasis; keep headings compact and avoid heavy display styling.
- **Montserrat:** Bold uppercase CTAs; compact size and neutral tracking keep controls crisp.

### Type scale — Major Second (ratio ≈ 1.13, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 23px | 700 | 1 | -0.043em | — | Montserrat-Medium | Compact hero or primary campaign heading. |
| h2 | 22px | 500 | 1.65 | 0 | — | Montserrat-Medium | Centered section titles and brand-story headings. |
| body | 18px | 500 | 2 | 0 | — | Montserrat-Light | Long-form brand copy and explanatory text. |
| caption | 14px | 500 | 1 | 0 | — | Montserrat-Medium | Small product names and supporting labels. |
| button | 12px | 700 | normal | 0 | uppercase | Montserrat | Uppercase primary CTA labels. |
| nav | 14px | 500 | 1 | 0 | — | Montserrat-Medium | Header and navigation labels. |
| link | 18px | 500 | 2 | 0 | — | Montserrat-Light | Editorial links and product discovery text. |
| eyebrow | 12px | 500 | normal | 0.2em | uppercase | Montserrat | Small uppercase, widely tracked section cues. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 5, 6, 8, 12, 14, 15, 18, 20, 25, 28, 30, 35, 40, 50, 60 px.
- Section rhythm 40px · element gap — · card padding — · max content width 1360px.

The measured content max width is 1360px, with a comfortable density and a 40px section gap. The opening hero spans the viewport; below it, product tiles form a two-column mosaic, followed by full-width storytelling and a centered category area with paired image cards. Most sections sit on white with broad gutters and clear separation rather than enclosing borders. The lower service/newsletter band is divided into columns, then transitions into a multi-column black footer. Keep alignment deliberate and let imagery define each section's scale.

## Shape & elevation

- Radius: button `50%` · nav `2px` · xs `2px` · sm `5px`
- Shadow `md` (nav): `rgb(232, 232, 232) 5px 5px 10px 0px, rgb(232, 232, 232) -5px -5px 10px 0px`
- Shadow `md-2` (button): `rgba(54, 54, 54, 0.15) 0px 2px 10px 0px`
- Motion: standard transition `0.3s ease-in` on interactive elements.

Most surfaces are flat, with spacing and pale-gray panels doing the separation work instead of cards with visible outlines. The measured navigation has a soft, symmetric gray shadow; a button shadow is also present in the measured data, but the prominent shopping CTA reads primarily through its solid black fill and white text. Keep layering restrained.

## Imagery

Large campaign imagery sets the first impression, ranging from cinematic dark space scenes to bright lifestyle portraits. Product tiles use isolated earbud photography against pale gray or white, while category panels use moody close-ups with dark overlays for readable labels. Embedded video supports the brand story. The imagery is photographic and product-focused, not a decorative illustration system.

## Components

### Campaign hero

Full-bleed image or video with overlaid campaign copy, carousel dots, and a high-contrast white action.

### Product mosaic

Two-column product discovery area with pale #f0f0f0 tiles, product imagery, concise labels, and DISCOVER links.

### Category tiles

Paired photographic panels with darkened imagery, uppercase category labels, and compact MORE controls.

### Brand story video

Wide video-led section paired with centered introductory copy and restrained heading treatment.

### Service strip

Four concise customer-service benefits arranged in a horizontal band above the newsletter area.

### Newsletter signup

Dark band with a short invitation, email input, and simple light submit control.

### Footer

Black multi-column navigation with brand mark, support and account links, social icons, and fine-print details.

### Measured component styles

- **Primary button** (“SHOP ON AMAZON”): background #000000 · text #ffffff · border 1px solid #000000 · radius 0px · padding 14px 28px · 700 12px Montserrat · uppercase
- **Secondary button**: transparent background · text #000000 · border 1px solid · radius 0px · padding 14px 28px · 500 12px Montserrat · uppercase
- **Link** (“For most, the $70 price tag and great fi”): transparent background · text #1c1b1b · radius 0px · padding 0px · 500 18px Montserrat-Light
- **Input**: transparent background · text #c9caca · radius 0px · padding 14px · 500 16px Montserrat-Light
- **Card** (“UU2 (POP Clip2) Clip on, Experience the ”): background #f0f0f0 · text #000000 · radius 0px · padding 0px · 700 14px Montserrat-Medium
- **Navigation item** (“USD Auto Location Canadian Dollar (CAD) ”): transparent background · text #ffffff · radius 0px · padding 0px · 500 14px Montserrat-Medium

## Do

- Use white as the default canvas.
- Reserve black for high-contrast actions and dark lower-page bands.
- Give product photography generous space.
- Use pale-gray panels to group product tiles.
- Keep CTA labels short and uppercase.
- Build section rhythm with whitespace rather than heavy borders.

## Don't

- Do not add bright interface accents absent from the measured palette.
- Do not crowd the product mosaic with extra copy.
- Do not put every section inside a bordered card.
- Do not use oversized decorative typography.
- Do not let dark overlays obscure product details.
- Do not make the footer compete with the hero.

## Agent prompt

Build a new SOUNDPEATS-style storefront page with a calm monochrome interface and imagery-led hierarchy. Use Gallery White (#ffffff) as the main canvas, Soft Ink (#1c1b1b) for headings and copy, Mist Gray (#f0f0f0) for product panels, and Deep Black (#000000) for primary CTAs and dark footer or newsletter regions. Set typography in Montserrat: compact headings, light-feeling body copy with generous leading, and bold uppercase button labels. Organize content into broad, clearly separated sections with generous gutters; use product photography in a two-column mosaic and dark, readable category imagery. Keep decoration minimal, avoid invented accent colors, and rely on whitespace and tonal panels rather than outlines. Finish with a compact service strip and structured multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Viewport-wide campaign hero with navigation overlaid on the image. | campaign carousel, hero action, scroll cue | full-bleed imagery, overlay navigation, white CTA |
| 2 | product-grid | Two-column product mosaic with staggered tile heights. | product discovery, category links | pale-gray tiles, product cutouts, DISCOVER links |
| 3 | video | Centered brand copy followed by a full-bleed video area. | brand introduction, video playback | center alignment, wide media, minimal controls |
| 4 | category-nav | Centered section heading above a two-column photographic category grid. | category browsing, MORE links | darkened image tiles, uppercase labels, compact actions |
| 5 | testimonials | Broad pale editorial band with review text and publication marks. | third-party proof, review quotations | centered copy, logo row, light background |
| 6 | newsletter | Four-column service strip above a dark newsletter signup area. | service reassurance, email signup | benefit icons, dark band, light input |
| 7 | footer | Black footer with multiple link columns, brand marks, and a fine-print base row. | support navigation, social links, legal links | multi-column lists, light text, divider details |

## Source CSS custom properties (selected)

```css
--heading-font-family: Montserrat, sans-serif;
--heading-font-weight: 500;
--heading-font-style: normal;
--text-font-family: Montserrat, sans-serif;
--text-font-weight: 500;
--text-font-style: normal;
--base-text-font-size: 14px;
--default-text-font-size: 14px;
--background: #ffffff;
--background-rgb: 255, 255, 255;
--light-background: #ffffff;
--light-background-rgb: 255, 255, 255;
--heading-color: #1c1b1b;
--text-color: #000000;
--text-color-rgb: 0, 0, 0;
--text-color-light: #6a6a6a;
--text-color-light-rgb: 106, 106, 106;
--link-color: #6a6a6a;
--link-color-rgb: 106, 106, 106;
--border-color: #d9d9d9;
--border-color-rgb: 217, 217, 217;
--button-background: #000000;
--button-background-rgb: 0, 0, 0;
--button-text-color: #ffffff;
--header-background: #ffffff;
--header-heading-color: #1c1b1b;
--header-light-text-color: #6a6a6a;
--header-border-color: #dddddd;
--footer-background: #ffffff;
--footer-text-color: #6a6a6a;
--footer-heading-color: #4d4c4c;
--footer-border-color: #e9e9e9;
--navigation-background: #000000;
--navigation-background-rgb: 0, 0, 0;
--navigation-text-color: #ffffff;
--navigation-text-color-light: rgba(255, 255, 255, 0.5);
--navigation-border-color: rgba(255, 255, 255, 0.25);
--newsletter-popup-background: #1c1b1b;
--newsletter-popup-text-color: #ffffff;
--newsletter-popup-text-color-rgb: 255, 255, 255;
```

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