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

# Symbol Audio · Design System

> Electric blue frames timeless audio furniture.

**Theme:** dark · **Industry:** ecommerce · **Source:** https://www.symbolaudio.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 vivid blue storefront pairs oversized typography with carefully arranged furniture and audio-product cards. The restrained interface gives the handcrafted products and lifestyle imagery room to stand out.

## North star

Let one continuous electric-blue canvas frame oversized pale typography and crisp, quiet product imagery.

## Overview

The homepage uses a saturated Signal Blue (#447cf0) canvas almost throughout, creating a distinctive, uninterrupted field behind pale text and product photography. Frosted Light (#dfe2e5) carries navigation, headings, body copy, and the enormous cropped Symbol wordmark; links reuse the blue, while warm Signal Red (#c72a00) appears sparingly in small product labels. Cards use a near-white surface (#fffffd), making the furniture images read clearly against the vivid page. Typography combines a heavy, rounded display face with lighter sans-serif copy: oversized, tight-tracked headlines establish an editorial rhythm, while compact product details remain legible. Sections are separated by fine horizontal rules and generous vertical pauses, then shift into multi-column product grids and a two-column about area. Photography is mostly isolated product imagery, complemented by upholstery details and a showroom exterior. The overall treatment is flat and graphic, not shadow-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Blue | `#447cf0` | `--color-signal-blue` | brand | Dominant page canvas, oversized hero backdrop, and product and appointment link color. |
| Frosted Light | `#dfe2e5` | `--color-frosted-light` | neutral | Primary headings, navigation, body copy, logo, footer content, and delicate section rules. |
| Gallery White | `#fffffd` | `--color-gallery-white` | surface | Product-card backgrounds, giving furniture photography a clean contrast against blue. |
| Kiln Red | `#c72a00` | `--color-kiln-red` | accent | Tiny product-card labels and occasional details; keep it subordinate to the blue identity. |
| Quiet Stone | `#7d7c78` | `--color-quiet-stone` | semantic | Measured border tone for subtle separators; use sparingly, as pale rules are more apparent in the screenshot. |

### Semantic aliases

`--color-canvas` → `#447cf0` (Signal Blue) · `--color-surface` → `#fffffd` (Gallery White) · `--color-text` → `#dfe2e5` (Frosted Light) · `--color-border` → `#7d7c78` (Quiet Stone) · `--color-accent` → `#447cf0` (Signal Blue) · `--color-accent-2` → `#c72a00` (Kiln Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#dfe2e5` | `#447cf0` | 3:1 | AA-large |
| `#dfe2e5` | `#fffffd` | 1.3:1 | fail |
| `#447cf0` | `#fffffd` | 3.89:1 | AA-large |

### Gradients

- `linear-gradient(rgb(223, 226, 229), rgb(223, 226, 229))`
- `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(223, 226, 229))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Chalet-LondonSixty | `--font-body` | webfont | 400 | Main body copy and some navigation and product-card text. | Inter |
| SupremeLL-Bold | `--font-display` | webfont | 400 | Display headings, section titles, navigation, and buttons. | League Spartan |
| Chalet-NewYorkSixty | `--font-chalet-newyorksixty` | webfont | 400 | Captions, product links, and selected secondary links. | DM Sans |

- **Chalet-LondonSixty:** Regular sans-serif with restrained tracking; use sentence case and compact line spacing.
- **SupremeLL-Bold:** Measured weight 400 despite the bold face; headlines are tightly tracked and can scale dramatically.
- **Chalet-NewYorkSixty:** Regular sans-serif; keep small labels crisp, light, and unornamented.

### Type scale — Golden Ratio (ratio ≈ 1.575, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.13 | -0.02em | — | SupremeLL-Bold | Oversized hero wordmark and high-impact display moments. |
| h1 | 52px | 400 | 1 | -0.02em | — | SupremeLL-Bold | Primary page headline or prominent opening statement. |
| h2 | 34px | 400 | 1.26 | -0.02em | — | SupremeLL-Bold | Large product-section and editorial headings. |
| h3 | 20px | 400 | 1.33 | -0.02em | — | SupremeLL-Bold | Product titles and smaller subsection headings. |
| body | 13px | 400 | 1.31 | 0 | — | Chalet-LondonSixty | Product descriptions, about copy, and supporting content. |
| caption | 11px | 400 | 1 | 0 | — | Chalet-NewYorkSixty | Small product labels and secondary metadata. |
| button | 14px | 400 | 1.33 | 0 | — | SupremeLL-Bold | Prominent calls to action, including newsletter submission. |
| nav | 14px | 400 | 1.33 | 0 | — | SupremeLL-Bold | Main navigation links and top-level menu labels. |
| link | 15px | 400 | 1.33 | 0 | — | Chalet-NewYorkSixty | Product names and appointment or informational links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 5, 8, 10, 15, 20, 40, 50 px.
- Section rhythm 200px · element gap 5px · card padding — · max content width 1400px.

The page uses a broad, centered content area with a measured maximum width of 1400px and a spacious overall density. The hero is a tall, full-width blue field with top-aligned navigation and a huge wordmark. Product sections use four-column grids where shown, with the McIntosh assortment arranged in three columns. Headings align to the left; an editorial about section pairs text with a large image. Generous vertical gaps and thin horizontal rules make each block feel distinct without introducing contrasting background bands.

## Shape & elevation

- Radius: xs `6px`
- Shadow `inset` (text): `rgb(68, 124, 240) 0px -0.8px 0px 0px inset, rgb(223, 226, 229) 0px -2.4px 0px 0px inset`
- Motion: standard transition `0.3s ease` on interactive elements.

The design is predominantly flat: no prominent card shadows or layered floating panels. Gallery White product cards separate themselves through surface contrast, while fine horizontal rules divide major sections. Keep borders and layering restrained; the content should feel printed onto a continuous blue canvas rather than stacked into an application dashboard.

## Imagery

Use crisp product photography, usually showing audio furniture against clean, pale backgrounds inside Gallery White cards. The catalog images are straightforward product views rather than decorative illustrations or 3D renders. Upholstery imagery uses close crops to show fabric and form, while the about block features a real exterior showroom photograph. Keep images rectangular and let their natural color provide contrast against the saturated blue canvas.

## Components

### Hero wordmark

An enormous Frosted Light brand mark spans the top of the Signal Blue hero, with compact navigation aligned along the upper edge.

### Product grid

Four-column catalog sections place furniture images on Gallery White cards, with small labels, product names, and prices kept secondary.

### Section divider

A fine, pale horizontal rule precedes major catalog and editorial blocks, preserving the single-color page field.

### Editorial intro

A spacious text-led brand statement introduces the furniture outlook without adding a new background color.

### Upholstery feature row

Four image-led category cards use close-cropped fabric and sofa photography beneath a prominent section heading.

### About split

A two-column block pairs a concise about heading and link with a large photograph of the showroom exterior.

### Newsletter footer

A compact signup area and footer links sit beneath a top rule, with pale text and a simple brand mark.

### Measured component styles

- **Primary button** (“Shop +”): transparent background · text #dfe2e5 · radius 0px · padding 0px · 400 14px SupremeLL-Bold
- **Link** (“USM x Symbol Record Stand 45"”): transparent background · text #447cf0 · radius 0px · padding 0px · 400 15px Chalet-NewYorkSixty
- **Input**: transparent background · text #447cf0 · radius 0px · padding 20px 0px 20px 43.8px · 400 34px SupremeLL-Bold
- **Card** (“Bestseller USM x Symbol Record Stand 45"”): background #fffffd · text #dfe2e5 · radius 0px · padding 0px · 400 16px Chalet-LondonSixty
- **Navigation item** (“Shop +”): transparent background · text #dfe2e5 · radius 0px · padding 0px · 400 14px SupremeLL-Bold

## Do

- Use Signal Blue (#447cf0) as the continuous page canvas.
- Set major headings in a bold, tightly tracked display sans-serif.
- Keep navigation compact and aligned near the top edge.
- Use Gallery White (#fffffd) behind product photography.
- Separate long sections with thin, pale horizontal rules.
- Preserve generous vertical breathing room between content blocks.

## Don't

- Do not introduce frequent background-color bands.
- Do not add heavy shadows or floating dashboard-style panels.
- Do not let warm accents compete with the blue canvas.
- Do not overcrowd product cards with prominent text.
- Do not use rounded, app-like cards where the measured cards are square.
- Do not replace the clean product views with decorative illustrations.

## Agent prompt

Build a new Symbol Audio page as a spacious, editorial ecommerce experience. Use Signal Blue (#447cf0) as the dominant continuous canvas and Frosted Light (#dfe2e5) for the wordmark, headings, navigation, and copy. Set large headings in a heavy, tightly tracked sans-serif; keep body and metadata quieter and compact. Arrange product photography in clean Gallery White (#fffffd) cards, with product titles and prices secondary and Kiln Red (#c72a00) reserved for tiny labels. Use broad content alignment, generous vertical pauses, and subtle horizontal dividers rather than colored section bands. Include a restrained top navigation, clear editorial heading, image-led product or category grid, and an optional text-and-photograph split. Keep surfaces flat, corners square, and visual hierarchy led by the products.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width blue field with compact top navigation and oversized wordmark. | top navigation, brand-first entry | electric-blue canvas, oversized pale wordmark, compact header |
| 2 | product-grid | Left-aligned heading followed by a multi-row, four-column product-card grid. | browse bestsellers, product links, price scanning | white product cards, small labels, thin top divider |
| 3 | product-grid | Collection heading above a four-column catalog grid on the same blue canvas. | collection discovery, product browsing, price scanning | white cards, editorial heading, subtle divider |
| 4 | product-grid | New-arrival heading with a three-column product grid arranged across multiple rows. | discover new arrivals, compare product options | white product cards, pale labels, thin top divider |
| 5 | other | Editorial statement on blue, with a heading and concise paragraph. | brand storytelling | large heading, open text area, no card container |
| 6 | category-nav | Section heading followed by four image-led categories in one row. | browse by category, visual category selection | close-cropped upholstery, four-column row, small category labels |
| 7 | feature-split | Two-column area pairing short brand copy with a large showroom photograph. | read about the brand, learn-more link | split layout, large exterior photo, subtle rule |
| 8 | footer | Compact newsletter and link columns grouped beneath a thin horizontal rule. | newsletter signup, footer navigation, social links | pale text, simple logo mark, minimal footer |

## Source CSS custom properties (selected)

```css
--button-bg: transparent;
--theme-color-background: #fffcda;
--theme-color-text: #000;
--theme-color-light-text: #00000080;
--theme-color-highlight: #000;
--theme-hr-color: #00000040;
--fab-bg-color: transparent;
--fab-color: currentcolor;
--progress-bar-color: currentcolor;
--fab-bg-color-hover: #fff;
--icon-color: --theme-color-text;
--chevron-color: --theme-color-text;
--item-gap: 10px;
--icon-bg-color: #fffcda;
--item-border-color-active: #000;
--item-border-color-hover: #00000040;
--chevron-bg-color-hover: transparent;
```

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