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

# Shokz · Design System

> Open-ear audio, presented with athletic clarity.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://shokz.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._

Shokz pairs a clean white storefront with cinematic sports imagery and polished headphone product photography. A restrained interface keeps attention on product discovery, athlete stories, and high-contrast campaign moments.

## North star

Keep the storefront quiet and legible so full-bleed sports campaigns and product photography provide the visual impact.

## Overview

The page uses a white canvas as the quiet frame for a sequence of product, editorial, and community stories. Pale gray bands and cards separate content without competing with imagery; black is reserved for the footer and select inverse sections. Product and athlete photography carry most of the color, while the hero’s blue-to-night campaign image creates the strongest visual contrast. Shokz Sans Display gives headings a clean, open shape, and Shokz Sans Text handles navigation, descriptions, and commerce details in a consistent sans-serif voice. Layout alternates full-bleed campaign panels with centered product and benefit grids, leaving generous breathing room between major stories. Product cards remain light and restrained, with fine borders and subtle shadow rather than heavy framing. Warm and cool button fills appear as campaign accents, not as a site-wide color system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, open page areas, and light text on dark campaign photography. |
| Soft Graphite | `#a3a3a3` | `--color-soft-graphite` | neutral | Muted supporting text and subdued controls. |
| Mist Panel | `#f3f4f6` | `--color-mist-panel` | surface | Pale benefit cards and softly differentiated content bands. |
| Midnight Black | `#050505` | `--color-midnight-black` | neutral | Dark inverse section and solid black CTA backgrounds. |
| Near Black | `#0a0a0a` | `--color-near-black` | semantic | Primary headings and high-contrast body text. |
| Slate Gray | `#737373` | `--color-slate-gray` | neutral | Secondary copy and low-emphasis informational text. |
| Silver Haze | `#bababa` | `--color-silver-haze` | neutral | Quiet product-category links and supporting interface text. |
| Night Ink | `#131313` | `--color-night-ink` | neutral | Dark endpoint in the measured blue-black gradient. |
| Shokz Indigo | `#1f3273` | `--color-shokz-indigo` | brand | Blue endpoint in a measured gradient; also present within campaign imagery. |
| Warm Cream | `#ffefc7` | `--color-warm-cream` | accent | Warm highlight in a measured gradient and pale campaign button fill. |
| Sky Tint | `#cfe8ff` | `--color-sky-tint` | accent | Cool highlight in a measured gradient and pale campaign button fill. |
| Quiet Divider | `#d1d1d1` | `--color-quiet-divider` | semantic | Thin borders and section separators. |
| Charcoal Text | `#2f2f2f` | `--color-charcoal-text` | neutral | Navigation, card copy, and standard foreground text. |
| True Black | `#000000` | `--color-true-black` | neutral | Occasional solid button and deepest footer details. |
| Pale Line | `#e5e5e5` | `--color-pale-line` | semantic | Subtle card and interface outlines. |
| Mid Gray | `#666666` | `--color-mid-gray` | neutral | Measured outline and low-key interface detail. |
| Signal Orange | `#ff4d0a` | `--color-signal-orange` | accent | Small accent text, including warm promotional or campaign emphasis. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f4f6` (Mist Panel) · `--color-surface-2` → `#050505` (Midnight Black) · `--color-text` → `#0a0a0a` (Near Black) · `--color-text-muted` → `#a3a3a3` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d1d1d1` (Quiet Divider) · `--color-accent` → `#1f3273` (Shokz Indigo) · `--color-accent-2` → `#ff4d0a` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#0a0a0a` | `#f3f4f6` | 17.99:1 | AAA |
| `#0a0a0a` | `#050505` | 1.03:1 | fail |
| `#a3a3a3` | `#ffffff` | 2.52:1 | fail |
| `#a3a3a3` | `#f3f4f6` | 2.29:1 | fail |
| `#a3a3a3` | `#050505` | 8.08:1 | AAA |
| `#ffffff` | `#f3f4f6` | 1.1:1 | fail |
| `#ffffff` | `#050505` | 20.38:1 | AAA |
| `#1f3273` | `#ffffff` | 11.92:1 | AAA |
| `#1f3273` | `#f3f4f6` | 10.83:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(19, 19, 19) 0%, rgb(31, 50, 115) 100%)`
- `linear-gradient(104deg, rgb(255, 239, 199) 36.24%, rgb(207, 232, 255) 83.15%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Shokz Sans Text | `--font-body` | webfont | 400, 700, 300 | Navigation, body copy, captions, buttons, links, and commerce details. | Inter |
| Shokz Sans Display | `--font-display` | webfont | 400, 500 | Headings and selected display-style links or campaign controls. | Montserrat |

- **Shokz Sans Text:** Use regular weight for most UI, bold sparingly; natural case and untracked text.
- **Shokz Sans Display:** Mostly regular weight with occasional medium; clean mixed-case headings without added tracking.

### Type scale — Major Third (ratio ≈ 1.273, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1.05 | 0 | — | Shokz Sans Display | Campaign hero headline and major page-level titles. |
| h2 | 28px | 500 | 1.1 | 0 | — | Shokz Sans Display | Section titles and prominent story headings. |
| h3 | 22.5px | 400 | 0.72 | 0 | — | Shokz Sans Display | Product and feature card titles. |
| h4 | 20px | 400 | 1.2 | 0 | — | Shokz Sans Display | Secondary headings within editorial or service content. |
| body | 16px | 400 | 1.3 | 0 | — | Shokz Sans Text | Product descriptions, benefit details, and standard explanatory copy. |
| caption | 14px | 400 | 1.3 | 0 | — | Shokz Sans Text | Small labels and compact supporting information. |
| button | 18px | 400 | 1.3 | 0 | — | Shokz Sans Text | Primary and secondary calls to action. |
| nav | 16px | 400 | 1.3 | 0 | — | Shokz Sans Text | Header navigation and primary site links. |
| link | 14px | 400 | 1.5 | 0 | — | Shokz Sans Text | Inline actions, secondary destinations, and footer links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 48, 60 px.
- Section rhythm 80px · element gap 10px · card padding 24px · max content width 1200px.

The homepage alternates full-width campaign imagery with centered commerce and editorial content. The measured layout uses a 1200px maximum page width, a comfortable density, and a flexible multi-column grid: product cards, benefits, and stories align in tidy rows while some image-led sections span the viewport. Section spacing is generous, with tighter groupings inside cards and navigation. Most headings align to the start of their content; selected discovery and brand-stat blocks are centered. Keep the footer and newsletter visually distinct from the white shopping canvas.

## Shape & elevation

- Radius: button `4px` · card `6px` · link `4px` · xs `4px` · sm `6px` · pill `9999px`
- Shadow `md` (link): `rgba(17, 17, 26, 0.05) 0px 2px 12px 0px, rgba(17, 17, 26, 0.1) 0px 2px 12px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The page is predominantly flat: white backgrounds, pale gray cards, and fine separators do the structural work. Product cards have restrained borders and a subtle measured shadow rather than pronounced depth. Use dark overlays only where white campaign copy sits on photography, and reserve strong contrast for the black footer and hero.

## Imagery

Use large, cinematic sports and lifestyle photographs for campaign banners and athlete stories, with product photography isolated on bright, uncluttered card backgrounds. Hero imagery can be full bleed and high contrast, showing headphones clearly against a dramatic outdoor scene. Editorial sections mix wide photographs with compact cards; video is used as an immersive discovery feature. The measured palette includes illustration-like gradient colors, but the screenshots show photography—not decorative gradients—as the defining brand imagery.

## Components

### Campaign hero

Full-bleed sports campaign with white navigation and copy, product imagery, and paired filled and outlined CTAs.

### Product category tabs

Horizontal category navigation with a dark active underline and muted inactive labels.

### Product cards

Light cards with product images, compact names, descriptions, pricing, and occasional small promotional labels.

### Discovery feature

Large immersive image or video with centered copy, followed by smaller image-led technology and sport cards.

### Benefits row

Four pale gray service cards covering shipping, price matching, returns, and warranty.

### Community banner

Full-width group photograph with darkened treatment, centered white message, and two contrasting actions.

### Newsletter and footer

Compact signup area above a black footer with light logo, contact details, and grouped link columns.

### Measured component styles

- **Primary button** (“Learn More”): background #050505 · text #ffffff · radius 4px · padding 0px · 400 18px Shokz Sans Text
- **Secondary button** (“Learn More”): background #000000 · text #ffffff · radius 4px · padding 0px · 400 18px Shokz Sans Text
- **Link** (“Learn More”): transparent background · text #ffffff · radius 4px · padding 10px 20px · 400 16px Shokz Sans Display
- **Input**: transparent background · text #2f2f2f · radius 0px · padding 16px 40px · 400 16px Shokz Sans Text
- **Card** (“Fast & Free Shipping Reliable delivery o”): background #f3f4f6 · text #2f2f2f · radius 6px · padding 16px 24px 32px 24px · 400 16px Shokz Sans Text
- **Navigation item** (“Products Support Technology About Us Mem”): transparent background · text #2f2f2f · radius 0px · padding 0px · 400 16px Shokz Sans Text

## Do

- Use white space to separate shopping, editorial, and community content.
- Let full-bleed campaign photography carry the strongest visual color.
- Keep product imagery clean and clearly visible inside light cards.
- Use Shokz Sans Display for headings and Shokz Sans Text for interface copy.
- Build category navigation with a clear active underline and muted inactive labels.
- Keep borders and shadows subtle rather than adding heavy card depth.

## Don't

- Do not turn the entire storefront into a dark interface.
- Do not apply the campaign gradient as a default page background.
- Do not add strong shadows or thick borders to product cards.
- Do not let decorative color compete with headphone photography.
- Do not compress major sections into a dense continuous grid.
- Do not use all-caps typography or exaggerated letter spacing.

## Agent prompt

Build a responsive consumer-electronics storefront page in the Shokz visual style. Use Gallery White (#ffffff) as the main canvas, Mist Panel (#f3f4f6) for selected cards and bands, Charcoal Text (#2f2f2f) for UI copy, and Near Black (#0a0a0a) for primary headings. Use Shokz Sans Display or a close geometric sans for headings, with Inter-like text for navigation and body content. Structure the page as alternating full-bleed campaign imagery and centered commerce or editorial grids. Keep product cards light, orderly, and subtly outlined; use strong photography rather than decorative gradients for visual impact. Reserve Midnight Black (#050505) for inverse sections and the footer. Use warm cream and sky tint only as restrained campaign accents. Maintain generous section breathing room and clear active navigation states.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign banner with overlaid navigation, left-aligned campaign copy, product image, and paired actions. | Shop Now and Enter to Win actions, Carousel next-item cue | Full-bleed hero photography, White overlay typography, Filled and outlined buttons |
| 2 | product-grid | Tabbed category row above a multi-column product carousel and compact comparison links. | Browse by product category, View product details and prices, Compare products | Active underline, Light product cards, Promotional labels, Carousel controls |
| 3 | video | Wide immersive video or image with centered headline and supporting product-discovery links. | Explore product differences, Compare or view all products | Full-bleed media, Centered white text, Minimal overlay |
| 4 | feature-grid | Three image-led feature cards arranged in a horizontal row. | Open feature stories, Move between feature cards | Photography-led cards, Overlay titles, Small Learn More actions |
| 5 | feature-grid | Four evenly spaced benefit cards beneath a left-aligned section heading. | Review service benefits, Understand return and warranty terms | Pale gray cards, Small illustrative icons, Concise benefit copy |
| 6 | cta | Full-width community photograph with centered copy and two actions. | Join membership, Learn about benefits | Darkened photo overlay, Centered white text, Paired buttons |
| 7 | testimonials | Tabbed sports categories above a large athlete story panel with supporting carousel controls. | Browse sport categories, Read ambassador story, View featured product | Wide athlete photography, Text overlay, Product chip, Carousel indicators |
| 8 | stats | Centered brand introduction and a broad row of headline metrics. | Scan brand proof points | Centered heading, Large numerical claims, Subtle pale background |
| 9 | logo-cloud | Two-panel composition separating sports partners and awards from review content. | Scan partner marks, Browse review quotes | Pale section band, Logo row, Review carousel |
| 10 | content-feed | Text-led story and controls beside a large lifestyle photograph. | Browse stories, Navigate story entries | Asymmetric two-column layout, Lifestyle photography, Small profile thumbnails |
| 11 | newsletter | Single-column signup band with short introduction and email form. | Subscribe for launches and events | Muted band, Email input, Compact submit action |
| 12 | footer | Dark full-width footer with contact information and grouped navigation columns. | Browse shop and support links, Choose region and language, Access social channels | Black background, Light text and icons, Multi-column link groups |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-foreground: 47,47,47;
--color-background-contrast: 191,191,191;
--color-shadow: 18,18,18;
--color-button: 255,255,255;
--color-button-text: 255,122,61;
--color-secondary-button: 255,255,255;
--color-secondary-button-text: 255,255,255;
--color-link: 255,255,255;
--color-badge-foreground: 47,47,47;
--color-badge-background: 255,255,255;
--color-badge-border: 47,47,47;
--payment-terms-background-color: rgb(255 255 255);
--font-body-family: 'Shokz Sans Text';
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: 'Shokz Sans Display';
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
```

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