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

# Bang & Olufsen · Design System

> Sculptural sound, presented with quiet restraint.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.bang-olufsen.com/en/us · **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 homepage pairing immersive lifestyle footage with spacious, editorial product storytelling. Warm monochrome neutrals define most of the page, while a saturated blue is reserved for the community and footer area.

## North star

Let the product imagery carry the emotion; keep typography, color, and interface chrome quiet and precise.

## Overview

The visual strategy is built around contrast between immersive imagery and an exceptionally quiet interface. A white canvas carries most of the page, leaving product photography and lifestyle video to supply warmth, texture, and color; the dark hero uses a subtle black overlay so centered white copy and navigation remain legible. Near-black ink anchors headings and interface text, while muted gray supports product names and links. A saturated blue marks the community and footer as a distinct closing band rather than a general-purpose accent. BeoSupreme is used throughout, with regular-weight editorial headings and slightly tracked body copy; uppercase, widely tracked eyebrow text provides a restrained label style. The page alternates full-bleed media with open two-column stories and a broad bestseller lineup. Generous section breathing room, minimal borders, and pill-shaped outlined or dark buttons keep the presentation refined rather than decorative.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant canvas across the homepage, product sections, cards, navigation, and footer contrast. |
| Soft Charcoal | `#191817` | `--color-soft-charcoal` | surface | Primary heading and interface ink; also the dark fill for the newsletter Subscribe button. |
| Veiled Silver | `#afaeae` | `--color-veiled-silver` | neutral | Subtle navigation gradient tone; a supporting detail, not a defining page surface. |
| Muted Graphite | `#555555` | `--color-muted-graphite` | semantic | Secondary copy and product links, including bestseller names and understated inline links. |
| Warm Porcelain | `#fcfaee` | `--color-warm-porcelain` | neutral | Soft warm text on dark elements, including the Subscribe button and footer copy. |
| Signal Cobalt | `#060daa` | `--color-signal-cobalt` | brand | Distinctive saturated blue background for the community signup and the multi-column footer. |
| Quiet Hairline | `#e5e5e5` | `--color-quiet-hairline` | semantic | Fine input border treatment; use sparingly rather than outlining content sections. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Small navigation and utility text; avoid using it as a broad page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#191817` (Soft Charcoal) · `--color-text` → `#191817` (Soft Charcoal) · `--color-text-muted` → `#555555` (Muted Graphite) · `--color-text-subtle` → `#fcfaee` (Warm Porcelain) · `--color-border` → `#e5e5e5` (Quiet Hairline) · `--color-accent` → `#060daa` (Signal Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#191817` | `#ffffff` | 17.73:1 | AAA |
| `#555555` | `#ffffff` | 7.46:1 | AAA |
| `#555555` | `#191817` | 2.38:1 | fail |
| `#fcfaee` | `#ffffff` | 1.05:1 | fail |
| `#fcfaee` | `#191817` | 16.93:1 | AAA |
| `#060daa` | `#ffffff` | 12.76:1 | AAA |
| `#060daa` | `#191817` | 1.39:1 | fail |

### Gradients

- `linear-gradient(rgba(25, 24, 23, 0.35) 0%, rgba(25, 24, 23, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BeoSupreme | `--font-body` | webfont | 400, 500, 700 | Site-wide font for headings, body copy, navigation, buttons, captions, links, and eyebrow labels. | Lexend Deca |

- **BeoSupreme:** Mostly regular weight; headings are calm and unforced, body copy is lightly tracked, and eyebrow labels use uppercase with conspicuous letter spacing.

### Type scale — Perfect Fifth (ratio ≈ 1.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 400 | 1.5 | -0.014em | — | BeoSupreme | Centered hero statement over lifestyle footage. |
| h2 | 24px | 400 | 1.5 | 0 | — | BeoSupreme | Section titles for bestsellers, editorial features, and promotions. |
| body | 16px | 400 | 1.63 | 0.013em | — | BeoSupreme | Product descriptions, supporting editorial copy, and newsletter text. |
| caption | 12px | 400 | 1.67 | 0.008em | — | BeoSupreme | Small supporting labels and compact secondary details. |
| button | 16px | 500 | 1.5 | 0.006em | — | BeoSupreme | Primary and secondary CTA labels, including outlined hero controls. |
| nav | 16px | 400 | 1.63 | 0.013em | — | BeoSupreme | Menu, search, and account or shopping utility labels. |
| link | 12px | 400 | 1.15 | 0 | — | BeoSupreme | Compact inline editorial or footer links. |
| eyebrow | 14px | 400 | 1.43 | 0.143em | uppercase | BeoSupreme | Uppercase section or campaign label with wide tracking. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 6, 8, 14, 16, 24, 32, 36, 40, 48, 50, 56, 60, 64 px.
- Section rhythm 60px · element gap 8px · card padding — · max content width 1392px.

The page uses a wide desktop composition, with a measured maximum content width of 1392px and a comfortable density. A full-bleed video leads, followed by an eight-item bestseller row and alternating two-column editorial features, then a blue community band and footer. Section boundaries are expressed through generous vertical breathing room rather than rules or card framing. Headings are often centered for campaign and grid sections, while story modules align text to the start. Preserve the shift from immersive, edge-to-edge media to spacious, contained product content.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The page is essentially flat: measured styles show no shadows, and most product cards have no visible border or radius. Separate content with whitespace and image composition rather than elevated panels. Reserve thin borders for controls when needed, and use pill-shaped CTA outlines or fills as explicit interaction affordances.

## Imagery

Lifestyle video and product photography are the primary visual content, showing speakers in considered interiors and highlighting sculptural silhouettes, materials, and color finishes. The hero image spans the viewport and receives a dark gradient for readable centered text. Product and editorial images sit in open layouts with little decorative framing. Treat imagery as the source of texture and mood; the palette data from photographed objects should not be mistaken for interface colors.

## Components

### Immersive hero

Full-bleed lifestyle video with a darkened lower image area, centered white campaign copy, and a white outlined pill CTA.

### Utility navigation

Minimal overlaid menu and search controls at left, centered wordmark, and compact account, location, and basket icons at right.

### Bestseller lineup

A centered section heading above eight open product entries, with product imagery, muted names, and pricing.

### Editorial feature

Open two-column storytelling pairs product or artwork imagery with a regular-weight title, short copy, and restrained link.

### Pill CTA

Rounded capsule action with measured 40px radius; use a thin white outline over media or a dark fill with warm-white text.

### Blue newsletter and footer

A strong cobalt closing band combines community messaging and signup inputs with compact service and policy link columns.

### Measured component styles

- **Primary button** (“Subscribe”): background #191817 · text #fcfaee · border 2px solid · radius 40px · padding 8px 32px · 500 16px BeoSupreme
- **Secondary button** (“Beosound A9 Sienna Brown”): transparent background · text #ffffff · border 2px solid #ffffff · radius 40px · padding 8px 32px · 500 16px BeoSupreme
- **Link** (“New Beosound A9 $5,100”): transparent background · text #555555 · radius 0px · padding 0px · 400 16px BeoSupreme
- **Input**: transparent background · text #191817 · radius 0px · padding 1px 2px 1px 0px · 400 16px BeoSupreme
- **Card** (“New Beosound A9 $5,100”): background #fafafa · text #555555 · radius 0px · padding 0px · 400 16px BeoSupreme
- **Navigation item** (“Skip to main content”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px BeoSupreme

## Do

- Use white as the default canvas.
- Give lifestyle media room to dominate the hero.
- Keep over-image copy centered and legible.
- Use BeoSupreme or a close sans-serif substitute.
- Set product names and links in muted graphite.
- Reserve cobalt for the community and footer band.
- Separate sections with whitespace rather than boxes.

## Don't

- Do not add generic colored section bands.
- Do not apply shadows to product cards.
- Do not crowd full-bleed imagery with interface chrome.
- Do not treat image colors as brand palette tokens.
- Do not use heavy display type or bold all-caps headings.
- Do not turn every link or button cobalt.
- Do not outline every content block.

## Agent prompt

Build a new premium product page in the Bang & Olufsen visual style. Use Gallery White (#ffffff) as the main canvas, Soft Charcoal (#191817) for primary text and dark controls, Muted Graphite (#555555) for secondary links, and Warm Porcelain (#fcfaee) for text on dark surfaces. Keep Signal Cobalt (#060daa) for a deliberate community or closing band. Use a BeoSupreme-like clean sans serif, regular-weight editorial headings, lightly tracked body copy, and widely tracked uppercase eyebrow labels. Create a spacious wide layout, alternating full-bleed lifestyle media with open two-column product storytelling and unboxed product listings. Keep imagery richly atmospheric but interface chrome minimal. Use subtle dark overlays behind white hero copy, flat surfaces, almost no borders, and rounded capsule CTAs. Avoid shadows, busy decoration, and extra palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with centered campaign copy and navigation overlaid. | Campaign CTA, Video pause control | Dark image overlay, White outlined pill button, Utility icon navigation |
| 2 | product-grid | Centered heading above an eight-item product lineup on white. | Product discovery, Price comparison | Open product cards, Muted product links, Product photography |
| 3 | feature-split | Two-column editorial feature with image and text aligned to the start. | Read the story | Artwork photography, Editorial heading, Text link |
| 4 | feature-split | Full-bleed lifestyle image with left-aligned supporting text. | Product discovery | Large lifestyle image, Editorial copy, Product link |
| 5 | gallery | Two-column gallery pairing product images with editorial text and links. | Explore related products | Sculptural product imagery, Open two-column layout, Text links |
| 6 | feature-split | Two-column promotional feature with image and supporting copy. | Promotion discovery | Campaign image, Editorial headline, Product-focused copy |
| 7 | newsletter | Two-column community section on a saturated blue background. | Email signup, Benefit preview | Cobalt surface, Multiple signup fields, Filled CTA |
| 8 | footer | Multi-column footer continuing the cobalt surface, with grouped links. | Service navigation, Policy navigation | Link columns, Compact footer controls, Brand imagery |

## Source CSS custom properties (selected)

```css
--gle-font-family: BeoSupreme,"Lexend Deca",Arial,Helvetica,sans-serif;
--gle-primary-yellow: hsl(39,100%,67%);
--gle-alternative-color: hsl(51,70%,96%);
--gle-border: 2px solid hsl(30,4%,9%);
--gle-alt-border: 2px solid hsl(30,13%,91%);
--main-color: #2C622C;
--link-color: #234923;
--text-color: #222;
--hover-color: #f6f6f6;
--decline-color: #f6f6f6;
--decline-text: #000;
--footer-background: #f6f6f6;
```

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