# Bang & Olufsen — Marketing site Design Spec

> Source: bang-olufsen.com/en/us (live DOM, computed styles), 2026-07-25.
> Coverage: home (cookie banner dismissed via Decline-all to reveal the page).
> Published `--gle-*` token set read in full. The green `--main-color`
> #2c622c / `--link-color` #234923 tokens are the third-party consent widget
> (Cookie Information), not brand — excluded from §2. Button `:hover` had no rule
> matched to the CTA (styled-components hashed classes); the house transition is
> recorded instead.
> Reality check: matches the hint — luxury monochrome + full-bleed product
> photography/video. Adds four things: a signature amber `--gle-primary-yellow`
> #ffc457 accent, one refined typeface (BeoSupreme) at only 400/500, 40px-radius
> 2px-border pills, and one saturated campaign-blue #060daa block.

## 1. Visual Theme & Atmosphere

A quiet, luxury-editorial brand that lets full-bleed product photography and
autoplaying video carry the page. Chrome is warm near-black and cream, set in one
elegant typeface (BeoSupreme) at light-to-medium weight, with a centred
"Bang & Olufsen / Est. 1925" wordmark and icon-only utilities. Colour is
almost entirely monochrome; a single warm amber is the brand accent, and colour
otherwise appears only as an occasional saturated campaign block. Surfaces are
flat — no shadows anywhere — and the only atmosphere is a subtle dark scrim
gradient laid over hero media for legibility. Feels: luxurious, understated,
cinematic, warm-monochrome.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| --gle-black | #181716 | brand near-black (warm) |
| (dark fill/heading) | #191817 | dark section fill, headings, primary button |
| --text-color | #222222 | primary body text |
| (muted) | #555555 | secondary / muted text, disabled label |
| --gle-alternative-color | #fcfaee | cream — text on dark, cream sections |
| (white) | #ffffff | canvas, text over photography |
| --gle-grey | #fafafa | light grey surface |
| --hover-color | #f6f6f6 | alt surface / row hover |
| (disabled) | #e5e5e5 | disabled input fill |
| --gle-alt-border | #ebe8e5 | warm light border (hsl 30,13%,91%) |
| --gle-primary-yellow | #ffc457 | brand amber accent |
| (campaign block) | #060daa | saturated campaign band (observed section fill) |

Rules: keep the page monochrome — amber #ffc457 is the only routine accent, used
sparingly. The blue #060daa is a full-bleed campaign block, never chrome tint.
Borders are 2px, not 1px (`--gle-border: 2px solid #181716`).

## 3. Typography Rules

One family does everything: **BeoSupreme** (custom), stack
`BeoSupreme, "Lexend Deca", Arial, Helvetica, sans-serif`. Weights are restrained
— 400 for display and body, 500 for buttons and product labels. No uppercase in
running text; eyebrows/campaign labels are UPPERCASE with light positive
tracking. Large headlines tighten (-0.5px); small text opens slightly (+0.1 to
+1px).

> Specimen substitution: previews load **Lexend Deca** — the site's own declared
> fallback — as the closest open stand-in for the licensed BeoSupreme.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Section display (largest) | BeoSupreme | 48/64 | 400 | -0.5px |
| Hero / product name (h1) | BeoSupreme | 24/36 | 400 | normal |
| Sub-head (h3) | BeoSupreme | 24/30 | 400 | +1px |
| Body / nav | BeoSupreme | 16/26 | 400 | +0.2px |
| Button | BeoSupreme | 16 | 500 | +0.1px |
| Eyebrow / label | BeoSupreme | 12/20 | 400 | +0.1px, UPPERCASE |

## 4. Component Stylings

Buttons are 40px-radius pills, 44px tall, `8px 32px` padding, BeoSupreme 16/500,
tracking +0.1px. Primary = filled #191817 with cream #fcfaee text; outline (over
photography) = transparent with a 2px #ffffff border and white text; on light
surfaces the outline uses the 2px #181716 border. Text links are underlined via a
scaleX reveal on hover. Nav is a centred wordmark with icon-only utilities
(menu, search, account, store locator, cart). Cards/panels are borderless
photographic tiles separated by 2px rules, never shadows.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | #191817 fill, #fcfaee text, 40px, 2px transp border | house 400ms transition (no CTA-matched rule) | (see input ring) | — | — |
| Outline pill | transparent, 2px #ffffff, white text | house transition | — | — | — |
| Text link | #191817, underline hidden | underline reveals (transform scaleX 1) | — | — | — |
| Input | 2px border, cream/white bg | — | ring #3082fd 0 0 0 1px + #bfdefb 0 0 0 3px, outline:none | — | bg #e5e5e5, text #555555 |

Focus note: the input ring is a generic framework blue (#3082fd/#bfdefb). For a
B&O-native look, prefer a warm ring (e.g. `0 0 0 2px #181716` or amber
#ffc457); recorded as an observed default, not a brand token.

## 5. Layout Principles

Full-viewport hero (photo or autoplay video) with centred text and one pill CTA.
Content stacks in full-bleed edge-to-edge bands that alternate media, cream and
dark. The top bar is a three-part grid: left utilities (menu, search), centre
wordmark, right utilities (account, locator, cart). Generous vertical rhythm;
text is centred in hero, left-aligned in campaign bands.

## 6. Depth & Elevation

Radius scale: 2px, 3px, 4px, 5px small; **40px** for pill buttons; **50%** and
**100px** for circular controls (e.g. the video pause button). Shadows: **none
anywhere** — zero box-shadows on the page. Separation is the signature **2px**
border (#181716, or #ebe8e5 on light) and full-bleed colour bands. Depth is
media and colour, not elevation.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.2s | cubic-bezier(0.165, 0.84, 0.44, 1) | links, hover text |
| all (--gle-transition) | 0.4s | cubic-bezier(0.165, 0.84, 0.44, 1) | interactive elements |
| all | 0.3s | ease | misc controls |
| opacity / transform | 0.4s | ease-in-out | reveals, media |

House transition: the published `--gle-transition: all 400ms
cubic-bezier(.165,.84,.44,1)` (an easeOutQuart). Nav links reveal an underline
via `transform: scaleX(1)`. `@keyframes` observed: `placeholder-shimmer` (image
load), `spin` / `nprogress-spinner` (loaders), plus hashed styled-components
reveal keyframes (1.2s, same easing). No animation library flag detected.
`prefers-reduced-motion` not honoured (`honoursReducedMotion:false`). The hero
autoplays a muted video with a manual pause control.

## 8. Backgrounds, Effects & WebGL

One gradient only: a legibility scrim
`linear-gradient(rgba(25,24,23,0.35) 0%, rgba(25,24,23,0) 100%)` over hero media.
Otherwise full-bleed product photography and one autoplaying hero video. No
backdrop-filter, no grain/noise, no canvas/WebGL. Atmosphere is media + a warm
dark scrim, nothing procedural.

## 9. Do's and Don'ts

### Do
- Let full-bleed photography/video lead; keep chrome minimal and monochrome.
- Set everything in one typeface (BeoSupreme) at 400/500 only.
- Use 40px-radius pills with a 2px border; fill primary in warm near-black #191817 with cream text.
- Ration amber #ffc457 as the single accent; reserve saturated colour (#060daa) for campaign blocks.
- Separate with 2px borders and colour bands, never shadows.
- Add a subtle dark scrim over media for text legibility.

### Don't
- Don't use drop shadows or 1px hairlines — borders are 2px, depth is flat.
- Don't introduce a second routine accent beside amber.
- Don't set headings heavier than 500 or use uppercase running text.
- Don't let the consent-widget green (#2c622c) leak into the brand palette.

## 10. Responsive Behavior

Rich mixed-unit ladder (rem/em/px). Layout-carrying breakpoints:

| Breakpoint | What changes |
|---|---|
| max 375px / 450px / 540px | small-phone type + stacking |
| 576px | phone → large-phone |
| 768px (48em) | tablet: nav + grid adjust |
| 1024px (64em) | desktop layout |
| 1440px (90rem) | wide desktop |
| 1920px (120rem) / 127rem | ultra-wide capping |

Also present: 20rem, 23.375rem, 30rem, 47.9375rem, 63.9375rem, 75em, 89.9375rem,
99.9375rem, 100rem. No dark-scheme blocks (`darkSchemeBlocks:0`); no theme toggle;
no container queries. Mobile collapses the wordmark grid to a hamburger menu.

## 11. Agent Prompt Guide

- Canvas `#ffffff` / dark `#191817` · Text `#222222` · Cream `#fcfaee` · Border `2px #181716` · Accent `#ffc457`
- Font: BeoSupreme (Lexend Deca stand-in) · Body: 16px/400 · Radius: 40px pills / 50% circles · Control height: 44px
- Focus: framework ring #3082fd — prefer `0 0 0 2px #181716` · Hover: 400ms cubic-bezier(.165,.84,.44,1), underline scaleX on links

<bang-olufsen_design_language>
Luxury-editorial consumer-audio brand, warm-monochrome. Canvas white #ffffff and
warm near-black #191817/#181716, cream #fcfaee text on dark, body #222222. One
typeface — BeoSupreme (stand-in Lexend Deca) — at 400 display/body and 500
buttons; no uppercase running text, UPPERCASE eyebrows with +0.1px tracking; big
heads tighten to -0.5px. Colour is monochrome with a single amber accent #ffc457;
saturated colour (blue #060daa) only as full-bleed campaign blocks. Buttons are
40px-radius pills, 44px tall, 8px 32px, 2px border — primary filled #191817 with
cream text, outline 2px #ffffff over photography. Zero shadows; separation is 2px
borders and colour bands. Full-bleed product photography and one autoplay hero
video under a subtle rgba(25,24,23,.35) scrim. House motion: all 400ms
cubic-bezier(.165,.84,.44,1); links reveal an underline via scaleX. Feels:
luxurious, understated, cinematic. Avoid: drop shadows, 1px hairlines, a second
accent beside amber, heavy weights, uppercase body, the consent-widget green.
</bang-olufsen_design_language>