---
name: Bang & Olufsen
description: "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."
version: alpha

colors:
  background: "#0D0C0B"
  primary: "#FCFAEE"
  secondary: "#FFFFFF"
  tertiary: "#2C622C"
  neutral: "#555555"
  bg-soft: "#191817"
  bg-quiet: "#222222"
  muted-soft: "#858585"
  line: "rgba(85, 85, 85, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: geometric-sans
    fontSize: 35px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0.1px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0.2px"

rounded:
  sm: 2px
  md: 4px
  lg: 40px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A premium Scandinavian audio brand showroom.*

## Colors

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

- **Background (`#0D0C0B`)** — uses `bg` token
- **Primary text (`#FCFAEE`)** — uses `ink` token
- **Secondary text (`#FFFFFF`)** — uses `ink-soft` token
- **Accent (`#2C622C`)** — uses `accent` token
- **Muted (`#555555`)** — uses `muted` token
- **Borders (`rgba(85, 85, 85, 1.0)`)** — uses `line` token

## Typography

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

## Layout

Full-width dark sections with centered containers.

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

## Elevation & Depth

- 0 4px 24px rgba(0, 0, 0, 0.35)
- Borders: 1px solid rgba(85, 85, 85, 1.0)

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 40px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```