Bang & Olufsen
Galería escandinava sobre porcelana. Cuando la página de B&O está oscura, la pieza se ilumina, como una escultura en una alcoba nocturna; cuando está iluminada, la pieza parece flotar sobre seda blanca, sin nada que distraiga la atención.
Bang & Olufsen opera bajo el principio de galería-museo: lienzos de porcelana casi blanca sobre los que los productos flotan como objetos escultóricos, interrumpidos por inserciones cromáticas ocasionales que abarcan todo el ancho de la pantalla —un profundo violeta ultramar que consume toda la pantalla, a veces un rico rojo terracota— para crear acentos emocionales. La tipografía es una única fuente neogrotesca de diseño personalizado (BeoSupreme) que habla por sí sola: apenas perceptible en pantallas grandes, letras mayúsculas generosamente rellenas en microetiquetas, sin necesidad de otras tipografías. Los componentes se reducen al mínimo: controles translúcidos en forma de píldora, bordes finos, sin sombras decorativas, sin botones degradados, sin iconos. La cuadrícula es generosa, el espacio negativo es un lujo. Cada producto tiene su propio pedestal flotante; el blanco circundante es espacio. El color se distribuye como un material precioso: cuando aparece, ocupa todo el marco.
El contenedor de ancho máximo de 1440px está centrado y tiene márgenes horizontales de 25px en los bordes. El elemento principal ocupa todo el ancho de la página (rompiendo el contenedor), y la cámara azul ultramar se extiende de borde a borde. Las cuadrículas de productos están dispuestas uniformemente en 4-5 columnas con espacios de 25px y se desplazan horizontalmente en dispositivos móviles. Las secciones alternan entre un fondo blanco y cámaras de color de ancho completo; el ritmo es el siguiente: cuadrícula de productos blanca → elemento principal azul ultramar → cuadrícula de productos blanca → banner editorial rojo intenso → cuadrícula de productos blanca → pie de página azul ultramar. La navegación es una barra superior minimalista que flota sobre las secciones blancas y de color (el texto está invertido a blanco sobre un fondo oscuro). La página "respira": los espacios entre secciones son de 60-80px, los productos individuales tienen su propio espacio dentro de las celdas y no hay densidad de información.
La fotografía de producto es el único elemento visual: no hay imágenes de estilo de vida, modelos ni contexto ambiental. Los productos se fotografían sobre fondos completamente neutros (blanco, negro y azul oscuro degradado) con iluminación de estudio controlada que resalta los materiales: aluminio mate, textura de cuero, cobre anodizado y silicona mate. El encuadre es ajustado, centrado y se enfatiza el sujeto principal. La reproducción del color es tenue y apropiada para el material: el cobre se percibe como cobre, no como "hora dorada". Los motivos visuales secundarios incluyen siluetas de producto escasas, a pantalla completa, sobre planos ricos y monocromáticos (azul ultramar, rojo terracota) para momentos editoriales dramáticos. Iconografía: línea fina de 1 píxel, negro monocromo sobre blanco o blanco sobre oscuro, geométrica, sin relleno, sin multicolor.
Paleta
Marca
- Ultramarine Velvet
#060daa— Imágenes de fondo en la parte superior e inferior de las páginas, secciones impactantes que abarcan todo el ancho de la página y rellenos de pie de página: un color intenso, casi negro-azul-violeta, que se utiliza para envolver marcos enteros y dar un toque teatral a un solo producto.
Neutral
- Porcelain Canvas
#ffffff— Las imágenes de fondo de la página, el diseño de las tarjetas de producto y las barras de navegación son la base fundamental sobre la que se construye cada producto. - Bone
#fcfaee— Una superficie secundaria para bloques de tonos neutros cálidos, texto de botones sobre un fondo oscuro, un lienzo alternativo cuando el blanco resulta estéril. - Obsidian
#191817— El texto principal y la descripción del producto tienen un color cálido, casi negro, que se ve más suave que el color #000000 puro sobre un fondo blanco. - Pure Ink
#000000— Contornos de iconos, microetiquetas, bordes sutiles y los contrastes de texto más nítidos. - Graphite
#555555— Texto secundario, metadatos, etiquetas de precio, texto auxiliar silencioso - Mist
#e5e5e5— Límites de datos de entrada delgados y el único separador estructural del sistema.
Tipografía
De 12 a 36 píxeles · 5 pasos
- BeoSupreme — reemplazo: Neue Haas Grotesk Display Pro (closest) · esquemas 400, 500, 700 · Una única fuente que refleja toda la identidad de la marca. Para títulos y encabezados: 500–700 de grosor, 24–36 px con espaciado entre letras ajustado (-0,056em → -0,014em) para titulares claros y concisos. Para texto principal e interfaz de usuario: 400 de grosor, 14–16 px, espaciado entre letras normal, interlineado de 1,5–1,7. Microetiquetas (navegación, iconos, el eslogan «Fundada en 1925»): 500 de grosor, 9–12 px con espaciado entre letras amplio de hasta +0,143em, mostradas en mayúsculas para su uso como anotaciones arquitectónicas discretas. No existe ninguna otra fuente que compita con ella.
- object-fit: cover; object-position: center; — reemplazo: Inter · esquemas 400 · object-fit: cover; object-position: center; - encontrado en los datos extraídos pero no descrito por la IA.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8-16px |
| Radio del botón | 40px |
| Radio de la tarjeta | 0px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 60-80px |
| Ancho de página | 1440px |
La IA construirá tu sitio web al estilo de Bang & Olufsen y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Structured — Galería renacentista en papel con textura similar a la plastilina.
- Apple (España) — La galería del museo, bañada por una suave luz natural, es un único espacio blanco, cautivador y etéreo, donde cada pieza está iluminada por un foco contra una pared ligeramente tintada.
- Apple (España) — La vitrina de la Galería Obsidiana es una sala de exposiciones oscura donde un único objeto de titanio brilla contra un fondo completamente negro.
- 099 SUPPLY — Una pared de galería llena de objetos en blanco y negro.
- Custo — Una galería color gris plomo con una tipografía monolítica. Una sala de exposiciones en tonos gris verdosos apagados, donde un único objeto oscuro y una tipografía de 57 píxeles hablan por sí solos.
- Apple (España) — La galería del Museo White al mediodía.
- VITURE — Una presentación de producto con luces de neón tras un cristal oscuro: una sala de exposición a oscuras donde un único rayo naranja atraviesa la oscuridad, iluminando un par de gafas sobre un expositor.
- HNST Studio — Un acogedor estudio con telas de lino manchadas de óxido es una galería de moda sostenible donde un único toque de naranja quemado aporta calidez al interior, por lo demás monástico, de color crema y carbón.
- OFFFICE : — una galería noir envuelta en una tipografía monolítica
- ARTU — Pared de galería sobre papel blanco. ARTU trata el espacio de visualización como si fuera una doble página de museo: fotografías de productos a gran escala, marcas sutiles y un toque de verde lima en la parte inferior que completa la composición.
- Specht Studio — Una pared de galería repleta de sutil curiosidad. El acabado cromado propio del estudio presenta una superficie blanca con letras negras; el impacto visual se concentra por completo en los azulejos del proyecto.
- MindMarket — Un acogedor libro de cuentos de hadas en papel color crema: un lienzo editorial amigable donde grandes titulares y personajes de papel recortados coexisten en una superficie suave como una pegatina, bañada por el sol.