Skip to content
Library

Bang & Olufsen. Scandinavian gallery on porcelain.

  • Commerce
  • Light theme
  • 7 colors
  • 2 typefaces

Bang & Olufsen runs on a gallery-museum logic: near-pure white porcelain canvases with products floating as sculptural objects, interrupted by rare full-bleed chromatic chambers — a deep ultramarine violet that swallows the screen, occasionally a saturated terracotta-red moment — for emotional punctuation. Typography is a single custom neo-grotesque (BeoSupreme) that does all the talking: whisper-tight at display sizes, generously tracked uppercase at micro-labels, no other typeface needed. Components are stripped to their bones: pill-shaped ghost controls, hairline borders, no decorative shadows, no gradient buttons, no icon flourishes. The grid is generous, the negative space is the luxury. Every product gets its own floating pedestal; the surrounding white is the room. Color is rationed like a precious material — when it appears, it owns the entire frame.

Screenshot of Bang & Olufsen
Captured from bang-olufsen.com on October 11, 2026

Bang & Olufsen design system

Bang & Olufsen

Brand1

  • Hero backgrounds, dramatic full-bleed section chambers, footer washes — saturated, almost black-blue violet used to swallow entire frames and make a single product feel theatrical

Neutrals6

  • Icon strokes, micro-labels, fine borders, and the harshest text contrast moments

  • Primary text and product bodies — a warm near-black that reads softer than pure #000000 against white

  • Secondary body copy, metadata, price labels, muted helper text

  • Hairline input borders and the only structural divider in the system

  • Secondary surface for warm-neutral blocks, button text on dark backgrounds, alternative canvas when white would feel sterile

  • Page backgrounds, product card surfaces, navigation bar — the dominant ground against which every product floats

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Porcelain Canvas on Ultramarine Velvet

12.76 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.