Spotify

Комната управления ночным музыкальным автоматом

Веб-интерфейс Spotify — это плотный, тёмный центр управления медиаконтентом: почти чёрный холст, украшенный яркими обложками альбомов, одним фирменным зелёным акцентом и элементами управления в форме таблеток. Типографика компактна и утилитарна — специально разработанный геометрический шрифт без засечек небольшого размера, позволяющий обложкам альбомов и фотографиям исполнителей выполнять основную визуальную работу. Макет представляет собой фиксированную двухколоночную оболочку (боковая панель + основная лента) с сеткой из квадратных обложек и круглых аватаров, создающих ритмичное чередование геометрических типов. Интерфейс избегает резких перепадов высоты, полагаясь на тонкое различение поверхностей (карточки #121212 на холсте #000000) и один большой градиентный баннер для придания энергии. В результате создаётся ощущение диджейской аппаратной: насыщенной информацией, акустически тёмной и готовой к воспроизведению с первого взгляда.

Фиксированная двухколоночная оболочка: левая боковая панель («Ваша библиотека») и адаптивная основная область контента. Верхняя панель представляет собой черную полосу во всю ширину с поиском слева и действиями с учетной записью справа. Основной контент прокручивается вертикально, с горизонтальными каруселями-карточками — популярные песни в 5-колоночной квадратной сетке, популярные исполнители в 5-колоночной круглой сетке, популярные альбомы/синглы продолжают этот шаблон. Расстояние между разделами компактное (32 см). Нижний рекламный баннер закреплен на уровне нижней части области просмотра. Навигация осуществляется исключительно с помощью верхней панели и боковой панели — без мега-меню и хлебных крошек. Ритм чередуется: квадратные карточки → круглые карточки → квадратные карточки, создавая геометрический контраст между разделами.

Обложки альбомов и фотографии исполнителей являются основным визуальным контентом. Обложки представлены в виде плотных квадратных фрагментов (соотношение сторон 1:1) с радиусом 6px — достаточно четких, чтобы выглядеть как редакционные материалы, и достаточно мягких, чтобы выглядеть современно. Фотографии исполнителей представляют собой круглые фрагменты, подчеркивающие лицо как идентификатор. В основном интерфейсе нет декоративных фотографий, изображений в стиле лайфстайл, абстрактной графики. Единственный нефотографический визуальный элемент — это рекламный баннер с градиентом от пурпурного до синего внизу, который служит единственным элементом фирменного цвета. Иконки минималистичны, монолинейны, белые на темном фоне — маленькие и функциональные, никогда не декоративные.

Тёмный Высокий контраст Мягкие градиенты

https://spotify.com

Палитра

Бренд

Spotify Green #1ed760 — Зеленый цвет используется в качестве вспомогательного акцента для декоративных деталей и акцентирования внимания на нечастых запросах. Не следует выделять его как основной цвет призыва к действию.

Нейтральные

Pure White #ffffff — Легкая опорная поверхность для создания ненавязчивого фона и разделения разделов. Не следует выделять ее как основной цвет призыва к действию.
Signal Red #b85850 — Красный цвет служит вспомогательным акцентом для декоративных деталей и акцентирования внимания на нечастых цветах. Используйте его как вспомогательный акцент, а не как цвет статуса.
Void Black #000000 — Холст страницы, фон верхней навигации, самый глубокий поверхностный слой
Carbon #121212 — Картонные поверхности, боковые панели, вторичный поверхностный слой поверх холста
Graphite #1f1f1f — Приподнятая поверхность — состояния при наведении курсора, поля ввода, выбранные элементы навигации.
Smoke #292929 — Фон активной навигации, лёгкий эффект подсветки.

Типографика

от 11 до 24px · 4 ступеней

SpotifyMixUI — замена: Inter · начертания 400, 600, 700 · Основной текст, навигация, кнопки, метаданные, небольшие подписи — компактный и насыщенный информацией дизайн, призванный стать незаметным, чтобы художественное оформление доминировало.
SpotifyMixUITitle — замена: Inter weight 700 · начертания 700 · Заголовки разделов («Популярные песни», «Популярные исполнители») — жирный шрифт умеренного размера делает заголовки выразительными, не перегружая сетку карточек.

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

Назначение	Значение
Плотность	плотная
Базовый шаг	8-12px
Радиус кнопок	9999px
Радиус карточек	6px
Тени	минимальные
Между секциями	32-48px

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

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

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

Spotify

Палитра

Типографика

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

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

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