Studio
Studio
The Bang & Olufsen design system uses a light-themed visual language. The primary brand color is Midnight Indigo (#060daa); text is Carbon Black (#191817) on a Pure White (#ffffff) background. Typography is set in BeoSupreme. This DESIGN.md contains 7 color tokens and a 3-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Bang & Olufsen.
Independent Style Review
Gallery of precise objects. A dark, velvet-lined showcase where each product rests, spotlighted with refined exactitude.
This design system balances classic luxury with contemporary minimalism. Rich, deep indigo (#060daa) and elegant black (#191817) create a sophisticated backdrop, punctuated by a delicate, almost cream-colored off-white (#fcfaee) for textual contrast. The signature element is the custom BeoSupreme typeface, used across all text sizes, which brings a unique, refined character, with precise letter-spacing adjustments at every size. The dominant visual language is clean, centered product photography on stark backgrounds, framed by generous negative space and a strict typographic hierarchy.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Midnight Indigo | #060daa | --color-midnight-indigo | Footer background, primary accent for deep sections – creating a luxurious, immersive foundation. |
| Carbon Black | #191817 | --color-carbon-black | Dominant text color for headings and body content on light backgrounds, input borders – provides stark contrast and grounded presence. |
| Barely White | #fcfaee | --color-barely-white | Primary text color on dark backgrounds, selected button text – a creamy off-white that softens the high contrast. |
| Ash Gray | #555555 | --color-ash-gray | Secondary text, subtle link color – offers a muted informational tone against white. |
| Pure White | #ffffff | --color-pure-white | Page backgrounds, card backgrounds, input backgrounds – provides clean, expansive canvas. |
| Pale Silver | #e5e5e5 | --color-pale-silver | Subtle border colors for inputs – an almost imperceptible divider. |
| Pure Black | #000000 | --color-pure-black | Primary icon color, borders on ghost buttons – a hard, crisp edge or fill. |
| Font | Weights | Fallback |
|---|---|---|
| BeoSupreme | 400, 500, 700 | Open Sans |
| Role | Size | Line height | Token |
|---|---|---|---|
| body | 14px | 1.43 | --text-body |
| heading | 24px | 1.25 | --text-heading |
| display | 36px | 1.15 | --text-display |
