Bang & Olufsen

Overview

Bang & Olufsen is a premium Scandinavian audio and visual design brand that merges sophisticated minimalism with refined product photography. The brand serves discerning consumers who view technology as both functional tool and aesthetic object—where sound quality and visual elegance are inseparable. The design aesthetic is 'Architectural Minimalism': clean, light-filled interfaces with generous whitespace (predominantly #ffffff surfaces with #222222 text), accented by a distinctive forest-green primary color (#2C622C) that appears on key interactive elements. The emotional response is one of calm confidence and understated luxury—users feel they are engaging with a brand that respects their intelligence and taste. Voice: precise, unhurried, never promotional. Example: 'Sound is shaped by form. Discover how Beoplay H100 transforms your listening.'

Colors

The color system balances Scandinavian restraint with strategic accent deployment. Primary (#2C622C) is a deep forest green used exclusively on call-to-action buttons, active states, and brand-critical interactive elements—it appears infrequently but commands attention when present. Secondary (#234923) is a darker forest tone reserved for hover states and secondary navigation. Tertiary (#dfcaa7) is a warm sand accent used sparingly for badges and tertiary UI elements, providing organic warmth against the cool greens. The surface stack is predominantly light: surface (#ffffff) forms the base, with surface-container variants ranging from #f6f6f6 (lowest) to #dfdfdf (highest) for layered depth. On-surface text is #222222 for primary content and #666666 for secondary/disabled states. Outline t

Typography

The type system employs a single font family (Noto, Lexend Deca, Arial, Helvetica, sans-serif) across all scales, reinforcing the brand's unified, minimalist aesthetic. Display (60px, 400 weight) and Headline-lg (40px, 400 weight) use lighter weights to convey sophistication and breathing room—never bold. Body-md (16px, 400 weight) is the workhorse for product descriptions and interface copy, maintaining legibility at 24px line-height. Label-md (14px, 700 weight) and Label-sm (13px, 700 weight) are reserved for buttons, badges, and form labels where emphasis is needed. Letter-spacing is minimal (0em to -0.02em) to preserve the refined, European character of the typeface. On small labels over busy product photography backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure le

Layout

The page grid is a 12-column fluid layout with a maximum container width of 1280px, allowing responsive scaling on mobile while maintaining proportional spacing on desktop. The spacing scale uses semantic tokens: lg (40px) for section separation between hero, product cards, and footer; md (24px) for internal card padding and component margins; sm (12px) for list item spacing and form field gaps. Whitespace is generous—sections are separated by 40px vertical gaps, and cards maintain 24px internal padding to avoid visual crowding. The gutter width is 24px between grid columns. This rhythm creates a calm, uncluttered reading experience that mirrors Scandinavian design principles: less is more, and silence is as important as content.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic depth effects. Level 1 (Base): flat surfaces with no shadow, using only 1px solid borders at #cccccc or #dddddd to define edges. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards and dropdowns, creating a soft lift from the background. Level 3 (Modal/Elevated): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for modals and overlays, signaling maximum visual hierarchy. The shadow palette uses low-opacity black (0.12 to 0.15) to maintain the light, airy aesthetic. Hover states on cards transit

Shapes

The shape philosophy is 'Refined Precision'—minimal rounding that suggests craftsmanship without softness. Buttons and form inputs use 3px border-radius (DEFAULT), creating a subtle, modern edge that avoids both sharp corners and excessive roundness. Cards and larger containers use 5px (lg) for slightly more breathing room. Modals and dropdowns use 5px to 8px (xl) to signal elevated importance. The full (9999px) radius is reserved for badges and pill-shaped elements. This conservative rounding strategy aligns with Scandinavian industrial design: every curve serves a purpose, and the overall ef

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses #2C622C background with white text, 15px vertical padding, 24px horizontal padding, and 3px border-radius. On hover, the background darkens to #1f4620 and box-shadow elevates to 0 3px 8px rgba(0, 0, 0, 0.15) over 300ms ease. Button-secondary is transparent with a 1px #cccccc border and #2C622C text; on hover, the background fills to #e9ecef and the border becomes #2C622C. Button-tertiary is text-only with no border; on hover, a subtle #f0f0f0 background appears. All buttons use label-md typography (14px, 700 weight) and maintain a minimum height of 48px for touch accessibility.

Containers & Surfaces Cards are the primary content container. Standard card: #ffffff background, 1px solid #cccccc border,

Do's and Don'ts

**Do**

• Do use the forest-green primary (#2C622C) exclusively on high-priority CTAs, active states, and brand-critical interactive elements—never on backgrounds or decorative surfaces.
• Do maintain generous whitespace (40px section gaps, 24px card padding) to preserve the calm, Scandinavian aesthetic and prevent visual clutter.
• Do apply 300ms ease transitions to all interactive state changes (hover, focus, active) to convey responsiveness without jarring motion.
• Do use 400-weight typography for headlines and body text to reinforce the refined, understated brand voice—avoid bold weights except on labels and buttons.
• Do layer depth through subtle shadows (0 3px 8px for standard, 0 8px 24px for elevated) rather than dramatic effects; maintain shadow opacity at 0.12–0.15 rgba(0, 0, 0, x).

**Don't**

• Don't use the primary green (#2C622C) on page backgrounds, body text, or large surface areas—it should feel like an accent, not the dominant color.
• Don't apply border-radius greater than 5px on buttons, inputs, or cards; excessive rounding contradicts the precision-focused design language.
• Don't use system fonts or generic sans-serif fallbacks; always specify the Noto/Lexend Deca stack to maintain the refined, European character.
• Don't add drop shadows with opacity greater than 0.15 or blur greater than 24px; the aesthetic demands subtlety and restraint.
• Don't mix multiple accent colors (tertiary #dfcaa7 should appear sparingly on badges only); the green primary must remain visually dominant in interactive contexts.