A quiet luxury-editorial consumer-audio brand that lets full-bleed product photography and an autoplaying hero video carry the page. Chrome is warm near-black #191817 and cream #fcfaee, set in ONE elegant typeface (BeoSupreme, fallback Lexend Deca) at only 400 for display/body and 500 for buttons, with a centred "Bang & Olufsen / Est. 1925" wordmark and icon-only utilities. Colour is almost entirely monochrome: the single amber #ffc457 (--gle-primary-yellow) is the brand accent, and saturated colour appears only as an occasional full-bleed campaign block (blue #060daa). Buttons are 40px-radius pills, 44px tall at 8px 32px, built on the signature 2px border — primary fills #191817 with cream text, outline uses a 2px #ffffff border over photography. There are zero box-shadows anywhere; separation is 2px borders (#181716 / #ebe8e5) and colour bands, and the only atmosphere is a subtle rgba(25,24,23,.35) legibility scrim over media. House motion is the published all 400ms cubic-bezier(.165,.84,.44,1), with nav links revealing an underline via scaleX. Feels luxurious, understated and cinematic. NOTE the consent-widget green #2c622c is third-party, not brand.
Browse Bang & Olufsen in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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:hoverhad 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.
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.
| 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).
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 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.