Bang & Olufsen

Скандинавская галерея на фарфоре. Когда страница B&O темнеет, изделие подсвечивается, словно скульптура в полуночной нише; когда она светится, изделие словно парит на белом шелке, и ничто другое не отвлекает на него внимание

Bang & Olufsen работает по принципу галереи-музея: почти белоснежные фарфоровые полотна, на которых продукты парят, словно скульптурные объекты, прерываемые редкими хроматическими вставками, занимающими всю ширину экрана — глубокий ультрамариновый фиолетовый, поглощающий весь экран, иногда насыщенный терракотово-красный — для эмоциональной расстановки акцентов. Типография — это единый, специально разработанный неогротескный шрифт (BeoSupreme), который говорит сам за себя: едва заметный на больших экранах, щедро заполненные заглавные буквы на микро-этикетках, никаких других шрифтов не требуется. Компоненты сведены к минимуму: полупрозрачные элементы управления в форме таблеток, тонкие границы, никаких декоративных теней, никаких градиентных кнопок, никаких иконок. Сетка щедрая, негативное пространство — это роскошь. Каждый продукт получает свой собственный парящий постамент; окружающий белый цвет — это пространство. Цвет распределяется, как драгоценный материал — когда он появляется, он занимает всю рамку.

Контейнер максимальной ширины 1440px центрирован и имеет 25px горизонтальные отступы по краям. Геройский элемент занимает всю ширину страницы (разрывает контейнер), ультрамариновая камера простирается от края до края. Сетки товаров имеют ровную компоновку в 4-5 столбцов с 25px промежутками, прокручиваются горизонтально на мобильных устройствах. Разделы чередуются между белым фоном и цветными камерами, занимающими всю ширину страницы — ритм такой: белая сетка товаров → ультрамариновый геройский элемент → белая сетка товаров → насыщенный красный редакционный баннер → белая сетка товаров → ультрамариновый нижний колонтитул. Навигация представляет собой минималистичную верхнюю панель, которая плавает над белыми и цветными разделами (текст инвертируется в белый цвет на темном фоне). Страница «дышит» — промежутки между разделами составляют 60-80px, отдельные товары имеют собственное пространство внутри ячеек, отсутствует информационная плотность.

Предметная фотосъемка — единственный визуальный элемент: никаких стилей жизни, моделей, контекста окружающей среды. Продукты снимаются на чисто нейтральных фонах (белый, черный, градиентный темно-синий) с контролируемым студийным освещением, которое подчеркивает материал: матовый алюминий, текстура кожи, анодированная медь, матовый силикон. Кадрирование — плотная обрезка, центрирование, выделение главного объекта. Цветопередача — приглушенная и соответствует материалу: медь воспринимается как медь, а не как «золотой час». Вторичный визуальный мотив: редкие полноэкранные силуэты продуктов на фоне насыщенных одноцветных плоскостей (ультрамарин, терракотово-красный) для создания эффектных моментов в редакционной фотографии. Иконография: тонкая линия 1px, монохромный черный на белом или белый на темном, геометрический, без заливки, без многоцветности.

Интернет-магазин Премиум Мягкие градиенты

https://bang-olufsen.com

Палитра

Бренд

Ultramarine Velvet #060daa — Фоновые изображения в начале и конце страниц, эффектные разделы, занимающие всю ширину страницы, заливка нижних колонтитулов — насыщенный, почти чёрно-сине-фиолетовый цвет, используемый для того, чтобы поглотить целые кадры и придать одному продукту театральный вид.

Нейтральные

Porcelain Canvas #ffffff — Фоновые изображения страниц, оформление карточек товаров, панель навигации — основная основа, на которой строится каждый продукт.
Bone #fcfaee — Вторичная поверхность для блоков теплых нейтральных тонов, текст кнопок на темном фоне, альтернативный холст, когда белый цвет кажется стерильным.
Obsidian #191817 — Основной текст и текст описания товара — теплый, почти черный цвет, который выглядит мягче, чем чистый #000000 на белом фоне.
Pure Ink #000000 — Обводка иконок, микротеги, тонкие границы и самые резкие контрасты текста.
Graphite #555555 — Второстепенный текст, метаданные, ценники, вспомогательный текст без звука
Mist #e5e5e5 — Тонкие границы входных данных и единственный структурный разделитель в системе.

Типографика

от 12 до 36px · 5 ступеней

BeoSupreme — замена: Neue Haas Grotesk Display Pro (closest) · начертания 400, 500, 700 · Единственный шрифт, отражающий весь фирменный стиль. Для заголовков и заголовков: толщина 500–700, 24–36px с узким межбуквенным расстоянием (-0.056em → -0.014em) для уверенных, лаконичных заголовков. Для основного текста и пользовательского интерфейса: толщина 400, 14–16px, нормальное межбуквенное расстояние, межстрочный интервал 1,5–1,7. Микро-метки (навигация, значки, слоган «Основано в 1925 году»): толщина 500, 9–12px с широким межбуквенным расстоянием до +0.143em, отображаются заглавными буквами для использования в качестве ненавязчивых архитектурных аннотаций. Второго шрифта-конкурента нет.
object-fit: cover; object-position: center; — замена: Inter · начертания 400 · object-fit: cover; object-position: center; — обнаружено в извлеченных данных, но не описано ИИ.

Интервалы и форма

Назначение	Значение
Плотность	плотная
Базовый шаг	8-16px
Радиус кнопок	40px
Радиус карточек	0px
Тени	нет — границы вместо теней
Между секциями	60-80px
Ширина страницы	1440px

ИИ соберёт ваш сайт в стиле Bang & Olufsen и наполнит его

Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
Перенесёт контент со старого сайта — достаточно указать адрес.
Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Bang & Olufsen

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Bang & Olufsen и наполнит его

Похожие стили