# Bang & Olufsen · Design system migration spec

> Source: https://www.bang-olufsen.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a premium, dark-mode hardware product site that uses restraint and high-quality design to convey luxury and sophistication.

## 1. Identity DNA

The design system is the architectural blueprint for a premium Scandinavian audio brand showroom. Every element—from the deep charcoal walls to the precise spacing between products—is calculated to convey refined, understated luxury. The system is built on a foundation of high-contrast neutrals and restrained, purposeful interaction.

**One-liner:** A refined, dark-mode hardware product site that uses subtle, high-quality interactions and a restrained, high-contrast palette.
**Keywords:** premium · scandinavian · audio · refined · minimal
**Analogy:** A premium Scandinavian audio brand showroom.

## 2. Color

The color palette is a study in high-contrast restraint. Deep, near-black neutrals form the primary backdrop, allowing off-white text and muted, natural green accents to communicate with absolute clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0C0B` | main background |
| `--bg-soft` | `#191817` | card background |
| `--bg-quiet` | `#222222` | quiet area |
| `--ink` | `#FCFAEE` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#555555` | placeholder |
| `--muted-soft` | `#858585` | weak hint |
| `--accent` | `#2C622C` | single accent |
| `--line` | `rgba(85, 85, 85, 1.0)` | divider |

**Color principle:** High-contrast neutrals for a premium, dark-mode aesthetic, accented by muted, natural greens for active states.

The guiding principle is contrast as a functional tool, not mere decoration.

## 3. Typography

Typography is handled with the precision of a well-engineered speaker driver. Clean, geometric sans-serif categories provide a neutral yet authoritative voice, ensuring legibility against the dark interface while complementing the product photography.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main headings and product titles. |
| headline | 35px | 1.1 | 700 | -0.5px | Section titles and modal headings. |
| body | 16px | 1.15 | 400 | 0.1px | Standard body text. |
| caption | 12px | 1.33 | 400 | 0.2px | Small labels and captions. |

## 4. Spacing

Spacing follows a consistent 4px base grid, creating a deliberate, rhythmic breathability throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid with standard spacing for generous, breathable layouts.

## 5. Surfaces

Depth is communicated not through heavy ornamentation but through subtle, diffuse shadows and precise borders. Surfaces are flat and dark, with elevation indicated by careful layering and a single, refined shadow value.

- **Radius:** sm 2px · md 4px · lg 40px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0, 0, 0, 0.35)
- **Borders:** 1px solid rgba(85, 85, 85, 1.0)

## 6. Layout

The layout skeleton is composed of full-width dark sections that break the page into clear, immersive chapters. Content is housed within centered containers, structured by a minimal 12-column grid that prioritizes generous whitespace and visual hierarchy.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark sections with centered containers.

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, purposeful transitions over decorative flourish. Micro-interactions use cubic-bezier easing for color and opacity shifts, providing immediate, polished feedback that reinforces the system's premium quality.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Smooth color and opacity transitions for micro-interactions.
  - Subtle easing for hover states on buttons and links.

- **Hover:** Subtle color changes or opacity shifts with smooth cubic-bezier easing.
- **Click:** Immediate visual feedback with micro-interaction transitions.
- **Transition:** 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) for color changes, 0.4s ease-in-out for opacity.
- **Keyboard:** Focus states managed by the browser with subtle outlines.

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and understated, matching the design's visual restraint. Headlines are concise and direct, typically in sentence case, while calls to action are clearly differentiated through uppercase styling.

- **Tone:** Professional, authoritative, and understated.
- **Headline style:** Concise, direct, and often in sentence case.
- **CTA style:** Uppercase, outlined or text buttons.
- **Avoid:** Avoid overly decorative fonts or complex layouts. / Avoid bright, high-chroma accent colors. / Avoid cluttered interfaces or excessive UI elements.

### Don'ts
- ❌ Don't use bright, saturated accent colors — screenshot shows muted, natural greens instead.
- ❌ Don't use heavy drop shadows — screenshot shows subtle, diffuse shadows instead.
- ❌ Don't use complex gradients — screenshot shows solid dark backgrounds and flat colors instead.
- ❌ Don't use rounded corners everywhere — screenshot shows sharp or very subtly rounded corners instead.
- ❌ Don't use centered text for long paragraphs — screenshot shows left-aligned text instead.
- ❌ Don't use all-caps for body text — screenshot shows sentence case or title case instead.
- ❌ Don't use playful or whimsical UI elements — screenshot shows a refined, minimal interface instead.

The system deliberately avoids bright saturation, complex gradients, and whimsical UI to protect its refined, dark-mode aesthetic.

## System Prompt (paste into AI tool)

```
This is a premium, refined hardware product website for Bang & Olufsen, focusing on high-end audio equipment. The design DNA is characterized by a dark-mode aesthetic with high-contrast neutrals. Key hex colors include #0D0C0B (background), #FCFAEE (ink/text), and #2C622C (accent/toggles). Typography is dominated by clean, geometric sans-serif categories (BeoSupreme, Lexend Deca). The layout is minimal, breathable, and highly structured. Critical donts: Do not use bright, saturated accent colors; Do not use heavy drop shadows; Do not use complex gradients; Do not use rounded corners everywhere; Do not use centered text for long paragraphs; Do not use playful or whimsical UI elements.
```