Telegram, WhatsApp  +380637610482
Valery Danyuk
Valery DanyukdeveloperDeveloping AI tools for businesses. High-quality. Affordable.Message on Telegram
Bang & Olufsen — a preview of a site in this style

Bang & Olufsen

Scandinavian gallery on porcelain. When the B&O page is dark, the piece is illuminated, like a sculpture in a midnight alcove; when it's illuminated, the piece appears to float on white silk, with nothing else to distract its attention.

Bang & Olufsen operates on a gallery-museum principle: near-white porcelain canvases on which products float like sculptural objects, interrupted by occasional chromatic inserts that span the entire width of the screen—a deep ultramarine violet that consumes the entire screen, sometimes a rich terracotta red—for emotional accents. The typography is a single, custom-designed neo-grotesque typeface (BeoSupreme) that speaks for itself: barely noticeable on large screens, generously filled capital letters on micro-labels, no other typefaces required. Components are reduced to a minimum: translucent pill-shaped controls, thin borders, no decorative shadows, no gradient buttons, no icons. The grid is generous, negative space is a luxury. Each product is given its own floating plinth; the surrounding white is space. Color is distributed like a precious material—when it appears, it occupies the entire frame.

The 1440px maximum-width container is centered and has 25px of horizontal margins on the edges. The hero element takes up the entire width of the page (breaking the container), and the ultramarine camera extends from edge to edge. Product grids are laid out evenly in 4-5 columns with 25px gaps and scroll horizontally on mobile devices. Sections alternate between a white background and full-width colored cameras—the rhythm is as follows: white product grid → ultramarine hero element → white product grid → rich red editorial banner → white product grid → ultramarine footer. Navigation is a minimalist top bar that floats above the white and colored sections (text is inverted to white on a dark background). The page "breathes"—the gaps between sections are 60-80px, individual products have their own space within the cells, and there is no information density.

Product photography is the sole visual element: no lifestyle images, models, or environmental context. Products are shot against purely neutral backdrops (white, black, and gradient dark blue) with controlled studio lighting that highlights the materials: matte aluminum, leather texture, anodized copper, and matte silicone. Cropping is tight, centered, and the main subject is emphasized. Color rendition is muted and appropriate to the material: copper is perceived as copper, not as "golden hour." Secondary visual motifs include sparse, full-screen product silhouettes against rich, monochromatic planes (ultramarine, terracotta red) for dramatic editorial moments. Iconography: thin 1px line, monochrome black on white or white on dark, geometric, no fill, no multicolor.

Palette

Brand

  • Ultramarine Velvet #060daa — Background images at the top and bottom of pages, dramatic sections that span the entire width of the page, and footer fills—a rich, almost black-blue-violet color used to engulf entire frames and give a theatrical feel to a single product.

Neutral

  • Porcelain Canvas #ffffff — Page background images, product card design, and navigation bars are the fundamental foundation upon which every product is built.
  • Bone #fcfaee — A secondary surface for warm neutral toned blocks, button text on a dark background, an alternative canvas when white feels sterile.
  • Obsidian #191817 — The main text and product description text are a warm, almost black color that looks softer than pure #000000 on a white background.
  • Pure Ink #000000 — Icon outlines, microtags, subtle borders, and the sharpest text contrasts.
  • Graphite #555555 — Secondary text, metadata, price tags, silent auxiliary text
  • Mist #e5e5e5 — Thin input data boundaries and the only structural separator in the system.

Typography

from 12 to 36px · 5 steps

  • BeoSupreme — replacement: Neue Haas Grotesk Display Pro (closest) · outlines 400, 500, 700 · A single font that reflects the entire brand identity. For titles and headings: 500–700 weight, 24–36px with tight letter spacing (-0.056em → -0.014em) for confident, concise headlines. For body copy and UI: 400 weight, 14–16px, normal letter spacing, line spacing 1.5–1.7. Microlabels (navigation, icons, the "Founded in 1925" slogan): 500 weight, 9–12px with wide letter spacing up to +0.143em, displayed in all caps for use as unobtrusive architectural annotations. There is no other competing font.
  • object-fit: cover; object-position: center; — replacement: Inter · outlines 400 · object-fit: cover; object-position: center; - found in the extracted data but not described by the AI.

Intervals and form

PurposeMeaning
Densitydense
Basic step8-16px
Button radius40px
Card radius0px
Shadowsno - borders instead of shadows
Between sections60-80px
Page width1440px

AI will build your website in Bang & Olufsen style and fill it

  • Fill with products and posts via the link - Instagram, TikTok, Facebook.
  • Transfer content from your old site—just specify the address.
  • Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
  • Fully automated SEO optimization for search results and neural network recommendations.

Similar styles

  • Structured — Renaissance gallery on plasticine-like paper
  • Apple (España) — The museum gallery, in soft daylight, is a single, captivating, weightless white space, with each exhibit illuminated by a spotlight against a lightly tinted wall.
  • Apple (España) — The Obsidian Gallery showcase is a dark exhibition hall where a single titanium object glows against a pitch-black background.
  • 099 SUPPLY — A gallery wall filled with black and white objects
  • Custo — A gunmetal-colored gallery with a monolithic font. A showroom in muted gray-green tones, where a single dark object and 57px font speak for themselves.
  • Apple (España) — The White Museum Gallery at noon
  • VITURE — A neon product presentation behind midnight glass – a darkened showroom where a single orange beam cuts through the darkness, illuminating a pair of glasses on a stand
  • HNST Studio — A cozy studio with rust-stained linen fabrics is a slow fashion gallery where a single accent of burnt orange warms the otherwise monastic interior of cream and charcoal.
  • OFFFICE : — a noir gallery engulfed in monolithic font
  • ARTU — Gallery wall on white paper. ARTU treats the viewing space like a museum spread—large-scale product photos, subtle markings, and a single touch of lime at the bottom that completes the composition.
  • Specht Studio — A gallery wall filled with discreet curiosity. The studio's own chrome finish is a white surface and black lettering; the visual fireworks are entirely concentrated within the project's tilework.
  • MindMarket — A cozy fairytale book on cream paper - a friendly editorial canvas where large Inter headlines and cut-out paper characters coexist on a sun-drenched, sticker-soft surface.