CURATED · OPEN · FREE

Bang & Olufsen

A refined, dark-mode hardware product site that uses subtle, high-quality interactions and a restrained, high-contrast palette.

hardwareaudio

↓ Download design system (8 MB)Open in OpenDesign

Visit: https://www.bang-olufsen.com

📦 Browse pack contents →

Identity DNA

premiumscandinavianaudiorefinedminimal

A premium Scandinavian audio brand showroom.

Color

#2C622CAccent

#FCFAEEInk

#FFFFFFInk soft

#0D0C0BBG

#191817BG soft

#222222BG quiet

#555555Muted

rgba(85, 85, 85, 1.0)Line

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

Typography

geometric-sans · monospace

display56px · 500
headline35px · 700
body16px · 400
caption12px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

A consistent 4px base grid with standard spacing for generous, breathable layouts.

Surfaces

sm · 2px

md · 4px

lg · 40px

pill · 999px

1px solid rgba(85, 85, 85, 1.0)

0 4px 24px rgba(0, 0, 0, 0.35)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width dark sections with centered containers.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.165, 0.84, 0.44, 1)easing

Smooth color and opacity transitions for micro-interactions. · Subtle easing for hover states on buttons and links.

Subtle color changes or opacity shifts with smooth cubic-bezier easing. · Immediate visual feedback with micro-interaction transitions.

Components

button Minimal outlined or text buttons with uppercase text and subtle border-radius.
card Dark, clean cards with subtle borders and refined padding.
chip Pill-shaped toggles with a distinct muted green active state.
input Clean, unbordered inputs with subtle bottom borders.
hero Dark, photographic hero sections with high-contrast, refined typography.

Voice & Don'ts

Tone Professional, authoritative, and understated.
Headlines Concise, direct, and often in sentence case.
CTAs Uppercase, outlined or text buttons.

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.
Avoid: Avoid overly decorative fonts or complex layouts.
Avoid: Avoid bright, high-chroma accent colors.
Avoid: Avoid cluttered interfaces or excessive UI elements.

Inside the pack — real screenshots

Bang & Olufsen — 桌面首屏（hero） — 桌面首屏（hero）

Bang & Olufsen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko