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

# Edifier · Design System

> Immersive audio imagery on a clean, restrained canvas

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

Edifier’s homepage pairs cinematic speaker imagery with a bright, minimal storefront. Bold centered campaign messaging gives way to a spacious category grid and a compact, pale footer.

## North star

Let cinematic product photography carry the drama while keeping the storefront interface bright, monochrome, and quietly structured.

## Overview

The page uses white as its structural canvas, while dark, full-bleed speaker videos create dramatic contrast at the top. In the hero, white navigation and campaign copy sit directly over the photography; a slim orange-tinted highlight is part of the media treatment, not a general UI colour. The palette stays mostly monochrome: near-black text, restrained gray section surfaces, and fine pale-gray dividers. Inter carries the interface throughout, from compact uppercase navigation to large, heavy campaign headlines and readable card captions. The composition alternates immersive, centered product campaigns with a two-column category gallery. Rounded image corners and pill-shaped controls soften the otherwise sharp, editorial layout. Generous white space separates the campaign, category content, and lower-page modules, keeping product imagery dominant. Bright orange and green appear only in isolated controls and should not be expanded into broad brand bands.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, header text over dark media, and light campaign and card areas. |
| Speaker Black | `#171717` | `--color-speaker-black` | brand | Primary text, footer surfaces, navigation details, and dark button styling. |
| Signal Orange | `#ff9900` | `--color-signal-orange` | accent | Isolated orange CTA control; keep it confined to small interactive highlights. |
| Steel Gray | `#8b8b8b` | `--color-steel-gray` | surface | Measured inverse-gray section surface; secondary to the white canvas and dark campaign media. |
| Cloud Gray | `#f5f5f7` | `--color-cloud-gray` | surface | Pale footer and section background, providing a quiet contrast to white. |
| Soft Alloy | `#aeaeae` | `--color-soft-alloy` | surface | Secondary muted inverse surface in measured sections; not a dominant campaign colour. |
| Muted Graphite | `#747474` | `--color-muted-graphite` | neutral | Secondary text and low-emphasis supporting copy. |
| Divider Gray | `#dcdcde` | `--color-divider-gray` | neutral | Fine footer and interface hairlines. |
| Signal Green | `#14865f` | `--color-signal-green` | semantic | Isolated green circular control; not a broad brand or section colour. |
| True Black | `#000000` | `--color-true-black` | neutral | Small interface text and isolated button content; primary text is usually #171717. |
| Pale Line | `#e7e7e7` | `--color-pale-line` | neutral | Occasional faint border or separator detail. |
| Deep Gray | `#666666` | `--color-deep-gray` | surface | Minor inverse surface in measured details, not a dominant page band. |
| Warm Media Tint | `#e0a580` | `--color-warm-media-tint` | semantic | Warm gradient/text highlight within campaign media treatment, not a general UI accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#8b8b8b` (Steel Gray) · `--color-surface-2` → `#f5f5f7` (Cloud Gray) · `--color-surface-3` → `#aeaeae` (Soft Alloy) · `--color-surface-4` → `#666666` (Deep Gray) · `--color-text` → `#171717` (Speaker Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#747474` (Muted Graphite) · `--color-border` → `#dcdcde` (Divider Gray) · `--color-accent` → `#ff9900` (Signal Orange) · `--color-accent-2` → `#14865f` (Signal Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#8b8b8b` | 5.26:1 | AA |
| `#171717` | `#f5f5f7` | 16.47:1 | AAA |
| `#171717` | `#aeaeae` | 8.08:1 | AAA |
| `#ffffff` | `#8b8b8b` | 3.41:1 | AA-large |
| `#ffffff` | `#f5f5f7` | 1.09:1 | fail |
| `#ffffff` | `#aeaeae` | 2.22:1 | fail |
| `#747474` | `#ffffff` | 4.67:1 | AA |
| `#747474` | `#8b8b8b` | 1.37:1 | fail |
| `#747474` | `#f5f5f7` | 4.29:1 | AA-large |

### Gradients

- `linear-gradient(to right, rgb(23, 23, 23), rgb(23, 23, 23))`
- `linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255))`
- `linear-gradient(to right, rgb(224, 165, 128) 0px, rgb(23, 23, 23) 100%), linear-gradient(to right, rgb(224, 165, 128) 0px, rgb(23, 23, 23) 100%)`
- `linear-gradient(30deg, rgb(247, 208, 11) 10%, rgb(246, 14, 14), rgb(183, 0, 255) 94%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700, 900 | All measured interface and campaign typography, including headings, navigation, body copy, and links. | Inter |

- **Inter:** Use a restrained sans-serif system: heavy display headlines, mostly regular supporting text, uppercase navigation, and lightly tracked eyebrow copy.

### Type scale — Perfect Fourth (ratio ≈ 1.372, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 900 | 1 | -0.04em | — | Inter | Oversized campaign headline style for product launch moments. |
| h1 | 36.5px | 400 | 1 | -0.025em | — | Inter | Primary campaign and major section headings. |
| h2 | 25px | 700 | 1.25 | -0.05em | — | Inter | Category and feature section headings. |
| h3 | 22px | 400 | 1.25 | -0.025em | — | Inter | Secondary campaign and supporting content headings. |
| h4 | 21px | 400 | 1.6 | 0.004em | — | Inter | Supporting feature titles or compact content headings. |
| body | 14px | 400 | 1 | 0.006em | — | Inter | Product descriptions and standard storefront copy. |
| caption | 12px | 400 | 1.6 | 0.007em | — | Inter | Small metadata, card details, and helper text. |
| nav | 18px | 700 | normal | 0.004em | uppercase | Inter | Uppercase primary navigation labels. |
| link | 16px | 400 | normal | 0.005em | — | Inter | Category-card links and standard text links. |
| eyebrow | 21px | 400 | 1.25 | 0.1em | uppercase | Inter | Uppercase, widely tracked campaign subtitle. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 8, 10, 12, 16, 18, 20, 22, 24, 26, 30, 32, 48 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width —.

The top campaigns span the viewport, with centered copy layered over full-bleed video or photography. Below, the category section switches to a two-column image-led grid with captions and directional link cues. The page retains a single-column campaign rhythm before moving into denser lower-page product and content modules. The footer is divided into several navigation columns and a signup area. Keep the page comfortable rather than dense, with broad white intervals between major blocks; no measured maximum content width is available.

## Shape & elevation

- Radius: button `9999px` · card `15px` · media `5px` · nav `9999px` · link `9999px` · xs `5px` · sm `15px` · md `20px` · lg `23px` · pill `9999px`
- Shadow `hairline` (other, link, button): `rgba(168, 232, 226, 0.05) 0px 0px 0px 0px`
- Shadow `lg` (media): `rgba(23, 73, 77, 0.15) 0px 20px 30px 0px`
- Motion: standard transition `0.5s cubic-bezier(0.3, 1, 0.3, 1)` on interactive elements.

Most sections are flat, with separation coming from white space and occasional pale hairlines rather than card shadows. Category cards use rounded image framing; measured card radius is about 15px and media corners about 5px. A larger shadow is measured on media, but avoid adding conspicuous elevation to ordinary content cards.

## Imagery

Photography and video of speakers and listening spaces define the page. The first campaign uses a dark, close-up product shot as a full-bleed backdrop, with copy readable over the image; another campaign places a monitor product within a wide rounded media panel. Category cards use lifestyle and product photography, cropped to fill their image frames. Treat the orange warmth and saturated colours within images as photographic content, not interface palette.

## Components

### Campaign hero

Full-bleed product video or photography with centered white headline, uppercase eyebrow, and a pill-shaped CTA.

### Transparent header

Social and help strip above a navigation row, both rendered over dark hero imagery with white labels and icons.

### Campaign media panel

Wide rounded product image or video with centered copy and a small white pill CTA.

### Category cards

Two-column image-led grid with rounded photography, dark title and description, and a small directional link cue.

### Product module

Lower-page multi-column product presentation, measured at five columns, using images, compact controls, and purchase actions.

### Pale footer

Light gray footer with grouped navigation, signup prompt, social icons, payment marks, and a thin divider.

### Measured component styles

- **Primary button**: background #ff9900 · text #ffffff · radius 60px · padding 10px 16px · 500 14px Inter
- **Secondary button** (“Join our Discord”): background #ffffff · text #000000 · radius 60px · padding 18px 26px · 500 15.2693px Inter · shadow rgba(168, 232, 226, 0.05) 0px 0px 0px 0px
- **Link** (“Home Entertainment Rich sound and refine”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Home Entertainment Rich sound and refine”): background #fafafa · text #171717 · radius 15.1632px · padding 0px · 400 16px Inter
- **Navigation item** (“Facebook X (Twitter) Instagram YouTube T”): transparent background · text #fafafa · radius 0px · padding 0px · 400 13px Inter

## Do

- Use full-bleed product media to establish the campaign mood.
- Keep primary campaign copy centered and white over dark imagery.
- Use Inter throughout and reserve heavy weights for prominent headlines.
- Keep the main canvas white and supporting bands pale and restrained.
- Use pill-shaped controls and modestly rounded image cards.
- Give category imagery generous room and concise captions.

## Don't

- Do not turn the orange accent into a large page background.
- Do not add gradients or saturated colours to ordinary interface sections.
- Do not cover product photography with dense text or extra UI.
- Do not add heavy shadows to every card.
- Do not make the category grid feel tightly packed.
- Do not use decorative display fonts or excessive uppercase body copy.

## Agent prompt

Build a new Edifier-style storefront page with a bright #ffffff Gallery White canvas and cinematic, full-bleed product photography. Layer compact white navigation and centered campaign copy over dark media; use #171717 Speaker Black for ordinary text and only small, isolated #ff9900 Signal Orange or #14865f Signal Green controls. Set all typography in Inter, with bold campaign headlines, uppercase navigation, and restrained supporting copy. Follow campaign sections with spacious, image-led category cards in a two-column grid, rounded framing, concise captions, and directional link cues. Keep backgrounds flat and use #f5f5f7 Cloud Gray and #dcdcde Divider Gray sparingly in the footer. Avoid broad accent bands, decorative gradients, excessive shadows, and dense text over imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video hero with centered headline, eyebrow, and pill CTA. | Primary purchase CTA, Campaign-led entry | Dark product media, White centered copy, Transparent navigation |
| 2 | video | Wide rounded media panel with centered copy and purchase action. | Product discovery, Buy Now action | Lifestyle product video, Centered text overlay, Rounded media frame |
| 3 | category-nav | Two-column grid of large image cards with captions and link cues. | Browse by listening scenario, Category navigation | Lifestyle photography, Rounded image cards, Text and arrow links |
| 4 | other | Centered, single-column section with extensive surrounding white space. | Visual pacing | White canvas, Centered heading |
| 5 | product-grid | Five-column product presentation with images and purchase controls. | Product browsing, Purchase actions | Product imagery, Compact controls, Multi-column grid |
| 6 | content-feed | Two-column content section with image, text, and links. | Explore brand content, Related links | Two-column layout, Supporting imagery, Text links |
| 7 | other | Three-column grouped list section. | Quick information scanning | Grouped lists, White background |
| 8 | footer | Pale footer with four navigation groups and a separate signup column. | Browse site links, Join community, Social follow | Light gray surface, Thin divider, Payment and social icons |

## Source CSS custom properties (selected)

```css
--color-base-text: 23 23 23;
--color-base-highlight: 216 30 42;
--color-base-background: 255 255 255;
--color-base-button: 23 23 23;
--color-base-button-gradient: #171717;
--color-base-button-text: 255 255 255;
--color-keyboard-focus: 11 97 205;
--color-shadow: 168 232 226;
--color-price: 23 23 23;
--color-sale-price: 225 29 72;
--color-sale-tag: 225 29 72;
--color-sale-tag-text: 255 255 255;
--color-rating: 245 158 11;
--color-placeholder: 250 250 250;
--color-success-text: 77 124 15;
--color-success-background: 247 254 231;
--color-error-text: 190 18 60;
--color-error-background: 255 241 242;
--color-info-text: 180 83 9;
--color-info-background: 255 251 235;
--color-drawer-text: 23 23 23;
--color-drawer-background: 255 255 255;
--color-drawer-button-background: 23 23 23;
--color-drawer-button-gradient: #171717;
--color-drawer-button-text: 255 255 255;
--color-drawer-overlay: 23 23 23;
--card-radius: clamp(0.625rem, 1.053vw, 1.25rem);
--card-border-width: 0.5rem;
--card-border-opacity: 0.0;
--card-shadow-opacity: 0.1;
--card-shadow-horizontal-offset: 0.0rem;
--card-shadow-vertical-offset: 0.0rem;
--buttons-radius: 3.75rem;
--buttons-border-width: 2px;
--buttons-border-opacity: 1.0;
--buttons-shadow-opacity: 0.05;
--buttons-shadow-horizontal-offset: 0px;
--buttons-shadow-vertical-offset: 0px;
--inputs-radius: 0.375rem;
--inputs-border-width: 1px;
```

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