# Design Reference - Bang & Olufsen
> Gallery of precise objects. A dark, velvet-lined showcase where each product rests, spotlighted with refined exactitude.

## Source
- Original site: https://bang-olufsen.com
- Captured: 2026-04-11T16:21:06.829Z

## Tags
- luxury
- minimalist
- high-contrast
- elegant
- product-focused
- serif-heavy
- dark-mode-sections
- spacious
- typographic-emphasis
- understated

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Midnight Indigo | `#060daa` | brand | Footer background, primary accent for deep sections – creating a luxurious, immersive foundation. |
| Carbon Black | `#191817` | neutral | Dominant text color for headings and body content on light backgrounds, input borders – provides stark contrast and grounded presence. |
| Barely White | `#fcfaee` | neutral | Primary text color on dark backgrounds, selected button text – a creamy off-white that softens the high contrast. |
| Ash Gray | `#555555` | neutral | Secondary text, subtle link color – offers a muted informational tone against white. |
| Pure White | `#ffffff` | neutral | Page backgrounds, card backgrounds, input backgrounds – provides clean, expansive canvas. |
| Pale Silver | `#e5e5e5` | neutral | Subtle border colors for inputs – an almost imperceptible divider. |
| Pure Black | `#000000` | neutral | Primary icon color, borders on ghost buttons – a hard, crisp edge or fill. |

## Typography
- role: Primary typeface for all headings, body text, and UI elements. Its broad range of weights and precise letter-spacing across sizes is a core visual identity feature, conveying understated luxury.; sizes: 12px, 14px, 16px, 24px, 36px; family: BeoSupreme; weight: 400, 500, 700; lineHeight: 1.00, 1.15, 1.25, 1.33, 1.43, 1.50, 1.63, 1.67, 1.71, 2.19; substitute: Open Sans; letterSpacing: -0.056em at 36px, -0.014em at 24px, 0.006em at 16px, 0.007em at 14px, 0.008em at 12px, then other specific values for a finely tuned optical balance

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "badges": "2px",
      "buttons": "40px"
    },
    "elementGap": "4px",
    "sectionGap": "48px",
    "cardPadding": "0px"
  },
  "radius": {
    "badges": "2px",
    "buttons": "40px"
  }
}
```

## Component Patterns
- name: Product Cards — Explore Superventas
- name: Hero CTA — Beo Grace
- name: Button Group — B&O Style System
- name: Primary Button (Honey Tone CTA); role: Call to action
- name: Ghost Button (Menu/Search); role: Navigation/Utility
- name: Text Link Button; role: Tertiary action/Navigation
- name: Feature Card; role: Product display
- name: Input Field; role: User entry
- name: New Product Badge; role: Highlight new items

## Do
- Prioritize the custom 'BeoSupreme' font for all textual content, leveraging its unique character and precise letter-spacing.
- Use 'Midnight Indigo' (#060daa) exclusively for foundational elements like the footer to establish a luxurious, deep anchor.
- Maintain a clear visual hierarchy by contrasting 'Carbon Black' (#191817) text on light backgrounds (#ffffff, #fcfaee) and 'Barely White' (#fcfaee) on dark backgrounds (#060daa).
- Employ the 40px border-radius strictly for primary CTA buttons, ensuring they stand out as the sole 'soft' element.
- Utilize generous negative space around product imagery and text blocks to convey a sense of premium quality and focus, with section gaps around 48px.
- Ensure all interactive elements, especially primary CTAs, meet a minimum contrast ratio of 4.5:1 against their background.
- Use a subtle 1px border for ghost button states and text links to provide definition without visual weight.

## Don't
- Do not introduce additional font families; 'BeoSupreme' defines the typographic identity.
- Avoid using multiple accent colors; 'Midnight Indigo' is reserved for specific, prominent sectional backgrounds.
- Do not deviate from the established border-radius values (0px, 2px, 40px); rounded corners are intentional and scarce.
- Do not use box-shadows; elevation is handled through background color changes and spatial separation.
- Avoid decorative elements or busy backgrounds; the aesthetic emphasizes product clarity and clean UI.
- Do not create dense content blocks; the comfortable density principle with a 4px base unit should be consistently applied.
- Never use the browser default blue for links; control all link colors with 'Carbon Black', 'Ash Gray', or 'Barely White'.