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

# soundcore · Design System

> Quiet interface, immersive sound in full view

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.soundcore.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 pairs a restrained light interface with cinematic, edge-to-edge product imagery. Rounded shopping cards, bold compact headlines, and sparing cyan accents guide visitors from launches to categories, recommendations, and membership.

## North star

Keep the shopping interface quiet and consistent, then let large, immersive product imagery carry the visual impact.

## Overview

The page uses a cool, near-white canvas and near-black typography to keep a long retail homepage calm and legible. Bright cyan is reserved for selected links, announcement details, and the newsletter action rather than applied as a broad background. The hero banners break the neutral frame with full-bleed campaign photography: product renders sit against richly colored scenes, while lower sections return to pale surfaces and compact card grids. MontForAnker supplies a rounded geometric sans look; bold headings use tight tracking, with the same family carrying navigation, product labels, and controls. Layout alternates wide campaign panels with category tiles, product cards, editorial imagery, and service information. Generous separation between major groups offsets the denser shopping grids. Cards and buttons use soft rounded shapes; borders and shadows remain understated, letting imagery provide most of the depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f5f5f7` | `--color-gallery-mist` | brand | Main page canvas and pale button surface; provides the calm backdrop across the long storefront. |
| Midnight Ink | `#080a0f` | `--color-midnight-ink` | neutral | Primary measured text and link color, including dark filled Shop Now buttons with white labels. |
| Pure Display | `#ffffff` | `--color-pure-display` | surface | Cards, white button faces, and text on cyan or dark surfaces. |
| Soft Alloy | `#eaeaec` | `--color-soft-alloy` | surface | Card and input fills plus the subtle separators and hairline borders between interface elements. |
| Graphite Line | `#414141` | `--color-graphite-line` | neutral | Measured mainly in borders and miscellaneous interface details; not a defining page background. |
| Signal Cyan | `#17bbef` | `--color-signal-cyan` | accent | Selective link and Subscribe-button accent; also appears in small announcement and interface details. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Muted secondary text for supporting details and less prominent labels. |
| Carbon Panel | `#111111` | `--color-carbon-panel` | surface | Dark section surface, most visibly used for the newsletter and footer region. |
| Silver Fog | `#c4c4c6` | `--color-silver-fog` | surface | Secondary pale section surface; a supporting neutral rather than a primary brand color. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Navigation and other interface text where the measured styling resolves to black. |
| Slate Button | `#1e2024` | `--color-slate-button` | neutral | Text color on pale Shop Now buttons, distinguishing the button label from the page's main ink. |

### Semantic aliases

`--color-canvas` → `#f5f5f7` (Gallery Mist) · `--color-surface` → `#ffffff` (Pure Display) · `--color-surface-2` → `#eaeaec` (Soft Alloy) · `--color-surface-3` → `#111111` (Carbon Panel) · `--color-surface-4` → `#c4c4c6` (Silver Fog) · `--color-text` → `#080a0f` (Midnight Ink) · `--color-text-muted` → `#f5f5f7` (Gallery Mist) · `--color-text-subtle` → `#999999` (Quiet Gray) · `--color-border` → `#eaeaec` (Soft Alloy) · `--color-accent` → `#17bbef` (Signal Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080a0f` | `#f5f5f7` | 18.18:1 | AAA |
| `#080a0f` | `#ffffff` | 19.8:1 | AAA |
| `#080a0f` | `#eaeaec` | 16.48:1 | AAA |
| `#080a0f` | `#111111` | 1.05:1 | fail |
| `#f5f5f7` | `#ffffff` | 1.09:1 | fail |
| `#f5f5f7` | `#eaeaec` | 1.1:1 | fail |
| `#f5f5f7` | `#111111` | 17.34:1 | AAA |
| `#999999` | `#f5f5f7` | 2.62:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#eaeaec` | 2.37:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MontForAnker | `--font-body` | webfont | 700, 500 | Site-wide headings, body copy, navigation, product cards, links, and buttons. | Montserrat |

- **MontForAnker:** Use the measured bold and medium weights; headings have tight negative tracking, with natural case and no forced uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.1 | -0.04em | — | MontForAnker | Primary campaign headline in the large product hero. |
| h2 | 40px | 700 | 1 | -0.04em | — | MontForAnker | Major section headings for category and editorial groups. |
| h3 | 32px | 700 | 1.2 | -0.04em | — | MontForAnker | Product, feature, and card titles within shopping sections. |
| h4 | 24px | 700 | 1.5 | -0.02em | — | MontForAnker | Supporting headings in service and membership content. |
| body | 16px | 700 | 1.4 | -0.02em | — | MontForAnker | Descriptions, campaign supporting copy, and general storefront text. |
| caption | 14px | 700 | 1.5 | -0.02em | — | MontForAnker | Compact product notes, metadata, and secondary card details. |
| button | 14px | 700 | 1.2 | 0 | — | MontForAnker | Shop Now, Learn More, Subscribe, and other action labels. |
| nav | 14px | 700 | 1.4 | -0.02em | — | MontForAnker | Header navigation and product-category menu labels. |
| link | 12px | 700 | 1.5 | -0.02em | — | MontForAnker | Small supporting links and inline promotional references. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 11, 12, 16, 20, 24, 32, 40, 64 px.
- Section rhythm 72px · element gap 8px · card padding 24px · max content width 1312px.

A full-width storefront moves from a compact multi-row header into stacked, edge-to-edge campaign banners, then into centered content groups. The measured content reaches a 1312px maximum width, with flexible multi-column product and category grids. Headings are predominantly left-aligned. Large gaps between major sections create a comfortable rhythm, while card collections are denser and consistently aligned. The page alternates broad imagery, smaller shopping grids, editorial panels, and service or membership blocks.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · link `9999px` · xs `4px` · sm `16px` · pill `9999px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.15) 0px 0px 24px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: pale backgrounds, restrained borders, and clear surface changes do most of the separation. Rounded cards and buttons create soft silhouettes, with a measured medium shadow used sparingly on buttons. Hero depth comes from photographic lighting and layered product renders, not interface shadows.

## Imagery

Product renders and lifestyle photography dominate. Hero campaign images run edge to edge and use richly colored, sometimes cinematic backdrops, while shopping cards crop imagery to fit rounded panels. Lower editorial areas include lifestyle scenes, press references, and customer reviews; embedded video is also present. Keep product imagery prominent and avoid decorative effects that compete with it.

## Components

### Campaign hero

Full-bleed product campaign with left-aligned launch copy, supporting text, promotional links, and product imagery across a richly colored scene.

### Pill CTA

Rounded Shop Now and Subscribe controls; pale or dark Shop Now variants contrast with dark text or white labels, while Subscribe uses #17bbef.

### Category tiles

Compact image-led category cards arranged in a multi-column row on the pale canvas, using softly rounded surfaces.

### Product cards

Shopping cards combine product photography, concise product names and descriptions, pricing, and a rounded action button.

### Editorial feature cards

Large lifestyle or product image panels pair a short headline and supporting copy with a clear Learn More or Shop Now action.

### Service cards

White rounded information cards present warranty, shipping, rewards, and related purchase support details.

### Newsletter footer

A dark footer block centers a subscription message and email field, with a cyan Subscribe action and supporting store links below.

### Measured component styles

- **Primary button** (“Shop Now”): background #f5f6f7 · text #1e2024 · radius 24px · padding 11px 20px 10px 20px · 700 14px MontForAnker
- **Secondary button** (“Subscribe”): background #17bbef · text #ffffff · radius 24px · padding 11px 20px 10px 20px · 700 16px MontForAnker
- **Link** (“Anker Charging”): transparent background · text #b5b7bb · radius 0px · padding 0px · 700 14px MontForAnker
- **Input**: background #eaeaec · text #000000 · border 1px solid #e5e7eb · radius 8px · padding 8px 214px 8px 36px · 600 16px MontForAnker
- **Card** (“Projectors”): background #eaeaec · text #000000 · radius 16px · padding 24px · 500 16px MontForAnker
- **Navigation item** (“Headphones Earbuds Speakers Works Projec”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px MontForAnker

## Do

- Use #f5f5f7 as the dominant page canvas.
- Reserve #17bbef for selective actions and links.
- Let full-bleed campaign photography lead the hero.
- Use bold, tightly tracked MontForAnker-style headlines.
- Keep shopping cards rounded and image-forward.
- Separate major content groups with generous breathing room.

## Don't

- Do not turn the entire interface cyan.
- Do not add gradients to neutral interface surfaces.
- Do not crowd the hero with extra controls.
- Do not rely on heavy shadows for card separation.
- Do not force headings or navigation into uppercase.
- Do not confuse colors found inside campaign imagery with interface palette.

## Agent prompt

Build a new soundcore storefront page with a calm, product-first interface. Use Gallery Mist (#f5f5f7) as the main canvas, Midnight Ink (#080a0f) for primary text, Soft Alloy (#eaeaec) for subtle card and input surfaces, and Signal Cyan (#17bbef) sparingly for links and primary subscription actions. Set a MontForAnker-like geometric sans, with bold, tightly tracked headings and compact navigation. Start with a clear header and a wide, edge-to-edge product campaign image; follow with left-aligned section headings and orderly category or product grids. Keep buttons pill-shaped and cards softly rounded, with restrained borders and little shadow. Use real product and lifestyle imagery for impact, not decorative interface gradients. Maintain generous spacing between sections and denser, consistent alignment inside shopping grids.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign banner with left-aligned copy and large product imagery. | Launch messaging, Learn More link, Product promotion | Full-bleed image, Large bold headline, Pale CTA |
| 2 | hero | Full-width campaign banner repeating the previous section's image-led format. | New product introduction, Learn More link, Shopping path | Full-bleed image, Left-aligned copy, Campaign product render |
| 3 | hero | Full-width lifestyle campaign with copy positioned over a dark product scene. | Product discovery, Offer callout | Dark cinematic image, Light text, Promotional CTA |
| 4 | category-nav | Seven-column category area on the pale canvas. | Browse by category, Visual product cues | Image tiles, Compact labels, Aligned grid |
| 5 | product-showcase | Multi-column showcase with one prominent product panel and smaller image-led cards. | Product discovery, Category tabs, Direct shopping actions | Rounded image cards, Product headlines, Pill CTAs |
| 6 | feature-grid | Four-column content area pairing use-case imagery and feature headings. | Browse by listening occasion, Learn More links | Lifestyle photography, Editorial card grid, Short headings |
| 7 | product-grid | Full-width product content region with a single measured image element. | Product browsing | Large visual region |
| 8 | stats | Wide three-column section with a left-aligned brand statement. | Brand credibility | Large headline, Open space, Minimal decoration |
| 9 | feature-grid | Three-column service area with multiple informational card blocks. | Reassurance before purchase, Service information | White rounded cards, Short benefit headings, Compact descriptions |
| 10 | cta | Three-column membership section with an image-led promotional panel. | Membership invitation, Learn More, Join action | Soft blue campaign imagery, Short copy, Rounded buttons |
| 11 | gallery | Open full-width editorial region with image content and no measured text. | Brand exploration | Editorial imagery, Wide section |
| 12 | video | Wide video-focused content block. | Video viewing | Embedded video, Open layout |
| 13 | footer | Long closing section with a dark newsletter area and dense lower navigation. | Email subscription, Store support links, Site navigation | Dark footer surface, Cyan action, Grouped link columns |

## Source CSS custom properties (selected)

```css
--copilot-kit-primary-color: rgb(23,187,239);
--copilot-kit-contrast-color: #fff;
--copilot-kit-secondary-color: #f3f4f6;
--copilot-kit-secondary-contrast-color: #000;
--copilot-kit-background-color: #fff;
--copilot-kit-muted-color: #6a6a6a;
--copilot-kit-separator-color: rgba(0,0,0,.08);
--copilot-kit-scrollbar-color: rgba(0,0,0,.2);
--copilot-kit-response-button-color: #333;
--copilot-kit-response-button-background-color: #fff;
--btn-bg-active-color: rgb(72,207,250);
--btn-bg-disabled-color: #ccdfe850;
--btn-text-active-color: #fff;
--btn-bg-secondary-color: transparent;
--btn-bg-secondary-disabled-color: #f5f5f550;
--success-color-0: #30d158;
--success-color-1: #d6f4de;
--warning-color-0: #ffc24d;
--warning-color-1: #f6ead0;
--error-color-0: #ff4d4d;
--error-color-1: #f6dbd8;
--marketing-color-0: #ff6b35;
--marketing-color-1: #ff9741;
--info-primary-color: #080a0f;
--info-secondary-color: #2a2c32;
--info-tertiary-color: #4a4c56;
--info-quaternary-color: #767880;
--info-white-color: #fff;
--stroke-primary-color: #17bbef;
--container-primary-color: #eaeaec;
--container-secondary-color-0: #f5f6f7;
--container-secondary-color-1: #fff;
--bg-color-0: #f5f6f7;
--bg-color-1: #fff;
--masks-color-0: rgba(0,0,0,.2);
--masks-color-1: rgba(0,0,0,.6);
--secondary-brand-color-1: #042637;
--secondary-brand-color-2: #b3ecfb;
--badge-text-color: #fff;
--secondary-brand-color-3: #f8f7f6;
```

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