workbuddy_skills/open-design/design-systems/spotify/DESIGN-ru.md

Design System Inspired by Spotify

Category: Медиа и потребительские сервисы Музыкальный стриминг. Насыщенный зелёный на тёмном фоне, жирная типографика, обложки альбомов как главный источник цвета.

1. Визуальная тема и атмосфера

Веб-интерфейс Spotify — это тёмный, погружающий музыкальный плеер, окутывающий слушателя почти чёрным коконом (#121212, #181818, #1f1f1f), где обложки альбомов и контент становятся основным источником цвета. Философия дизайна — «контент в темноте» — UI уходит в тень, чтобы музыка, подкасты и плейлисты могли светиться. Каждая поверхность — оттенок тёмно-серого, создающий театральную среду, где единственный настоящий цвет исходит от культового Spotify Green (#1ed760) и самих обложек альбомов.

Типографика использует SpotifyMixUI и SpotifyMixUITitle — проприетарные шрифты из семейства CircularSp (Circular от Lineto, адаптированный для Spotify) с широким стеком запасных шрифтов, включающим арабский, иврит, кириллический, греческий, деванагари и CJK-шрифты — отражение глобального охвата Spotify. Система типографики компактна и функциональна: 700 (bold) — для акцентов и навигации, 600 (semibold) — для второстепенного выделения, 400 (regular) — для основного текста. Кнопки используют верхний регистр с положительным межбуквенным расстоянием (1.4px–2px), придавая им систематичный, «лейбл»-подобный характер.

Особенность Spotify — геометрия «таблетки» и круга. Основные кнопки имеют радиус 500px–9999px (полная «таблетка»), круглые кнопки воспроизведения — 50%, строки поиска — «таблетки» на 500px. В сочетании с глубокими тенями (rgba(0,0,0,0.5) 0px 8px 24px) на приподнятых элементах и уникальной комбинацией вставной рамки с тенью (rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset) получается интерфейс, ощущающийся как премиальное аудиоустройство — тактильный, округлый и созданный для касания.

Ключевые характеристики:

• Погружающая тёмная тема почти чёрного оттенка (#121212–#1f1f1f) — UI растворяется за контентом
• Spotify Green (#1ed760) как единственный фирменный акцент — никогда декоративный, всегда функциональный
• Семейство шрифтов SpotifyMixUI/CircularSp с поддержкой глобальных систем письма
• Кнопки-«таблетки» (500px–9999px) и круглые элементы управления (50%) — скруглённые, оптимизированные для касания
• Метки кнопок в верхнем регистре с широким межбуквенным расстоянием (1.4px–2px)
• Глубокие тени на приподнятых элементах (rgba(0,0,0,0.5) 0px 8px 24px)
• Семантические цвета: красный для ошибок (#f3727f), оранжевый для предупреждений (#ffa42b), синий для уведомлений (#539df5)
• Обложки альбомов как основной источник цвета — UI намеренно ахроматичен

2. Цветовая палитра и роли цветов

Основной бренд

• Spotify Green (#1ed760): Основной фирменный акцент — кнопки воспроизведения, активные состояния, CTA
• Near Black (#121212): Самая глубокая фоновая поверхность
• Dark Surface (#181818): Карточки, контейнеры, приподнятые поверхности
• Mid Dark (#1f1f1f): Фоны кнопок, интерактивные поверхности

Текст

• White (#ffffff): --text-base, основной текст
• Silver (#b3b3b3): Вторичный текст, приглушённые метки, неактивная навигация
• Near White (#cbcbcb): Немного более яркий вторичный текст
• Light (#fdfdfd): Почти чисто-белый для максимального акцента

Семантические

• Negative Red (#f3727f): --text-negative, состояния ошибок
• Warning Orange (#ffa42b): --text-warning, состояния предупреждений
• Announcement Blue (#539df5): --text-announcement, информационные состояния

Поверхности и рамки

• Dark Card (#252525): Приподнятая поверхность карточки
• Mid Card (#272727): Альтернативная поверхность карточки
• Border Gray (#4d4d4d): Рамки кнопок на тёмном фоне
• Light Border (#7c7c7c): Рамки кнопок с обводкой, приглушённые ссылки
• Separator (#b3b3b3): Разделительные линии
• Light Surface (#eeeeee): Кнопки в светлом режиме (редко)
• Spotify Green Border (#1db954): Вариант зелёного акцентного бордера

Тени

• Heavy (rgba(0,0,0,0.5) 0px 8px 24px): Диалоги, меню, приподнятые панели
• Medium (rgba(0,0,0,0.3) 0px 8px 8px): Карточки, выпадающие списки
• Inset Border (rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset): Комбинация вставной рамки с тенью для полей ввода

3. Правила типографики

Семейства шрифтов

• Заголовок: SpotifyMixUITitle, запасные: CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic
• UI / Основной текст: SpotifyMixUI, тот же стек запасных

Иерархия

Роль	Шрифт	Размер	Насыщенность	Высота строки	Межбуквенное расстояние	Примечания
Заголовок раздела	SpotifyMixUITitle	24px (1.50rem)	700	normal	normal	Жирный заголовок
Заголовок функции	SpotifyMixUI	18px (1.13rem)	600	1.30 (tight)	normal	Полужирные заголовки разделов
Жирный основной текст	SpotifyMixUI	16px (1.00rem)	700	normal	normal	Акцентированный текст
Основной текст	SpotifyMixUI	16px (1.00rem)	400	normal	normal	Стандартный текст
Кнопка в верхнем регистре	SpotifyMixUI	14px (0.88rem)	600–700	1.00 (tight)	1.4px–2px	text-transform: uppercase
Кнопка	SpotifyMixUI	14px (0.88rem)	700	normal	0.14px	Стандартная кнопка
Жирная ссылка навигации	SpotifyMixUI	14px (0.88rem)	700	normal	normal	Навигация
Ссылка навигации	SpotifyMixUI	14px (0.88rem)	400	normal	normal	Неактивная навигация
Жирная подпись	SpotifyMixUI	14px (0.88rem)	700	1.50–1.54	normal	Жирные метаданные
Подпись	SpotifyMixUI	14px (0.88rem)	400	normal	normal	Метаданные
Жирный мелкий текст	SpotifyMixUI	12px (0.75rem)	700	1.50	normal	Теги, счётчики
Мелкий текст	SpotifyMixUI	12px (0.75rem)	400	normal	normal	Мелкий шрифт
Бейдж	SpotifyMixUI	10.5px (0.66rem)	600	1.33	normal	text-transform: capitalize
Микро	SpotifyMixUI	10px (0.63rem)	400	normal	normal	Наименьший текст

Принципы

• Бинарность: жирный/обычный: Большинство текстов имеют насыщенность 700 (bold) или 400 (regular), 600 используется умеренно. Это создаёт чёткую визуальную иерархию через контраст насыщенности, а не вариацию размера.
• Кнопки в верхнем регистре как система: Метки кнопок используют верхний регистр + широкое межбуквенное расстояние (1.4px–2px), создавая систематичный «лейбл»-голос, отличный от контентного текста.
• Компактность размеров: Диапазон 10px–24px — уже, чем у большинства систем. Типографика Spotify компактна и функциональна, создана для просмотра плейлистов, а не чтения статей.
• Поддержка глобальных систем письма: Обширный стек запасных шрифтов (арабский, иврит, кириллица, греческий, деванагари, CJK) отражает присутствие Spotify на 180+ рынках.

4. Стилизация компонентов

Кнопки

Dark Pill

• Background: #1f1f1f
• Text: #ffffff или #b3b3b3
• Padding: 8px 16px
• Radius: 9999px (полная «таблетка»)
• Применение: навигационные «таблетки», второстепенные действия

Dark Large Pill

• Background: #181818
• Text: #ffffff
• Padding: 0px 43px
• Radius: 500px
• Применение: основные кнопки навигации приложения

Light Pill

• Background: #eeeeee
• Text: #181818
• Radius: 500px
• Применение: CTA в светлом режиме (согласие на куки, маркетинг)

Outlined Pill

• Background: transparent
• Text: #ffffff
• Border: 1px solid #7c7c7c
• Padding: 4px 16px 4px 36px (асимметрично для иконки)
• Radius: 9999px
• Применение: кнопки подписки, второстепенные действия

Circular Play

• Background: #1f1f1f
• Text: #ffffff
• Padding: 12px
• Radius: 50% (круг)
• Применение: элементы управления воспроизведением/паузой

Карточки и контейнеры

• Background: #181818 или #1f1f1f
• Radius: 6px–8px
• На большинстве карточек видимые рамки отсутствуют
• Hover: незначительное осветление фона
• Shadow: rgba(0,0,0,0.3) 0px 8px 8px на приподнятых элементах

Поля ввода

• Поле поиска: фон #1f1f1f, текст #ffffff
• Radius: 500px (таблетка)
• Padding: 12px 96px 12px 48px (с учётом иконки)
• Focus: рамка становится #000000, outline 1px solid

Навигация

• Тёмная боковая панель со шрифтом SpotifyMixUI 14px насыщенностью 700 для активных, 400 для неактивных элементов
• Приглушённый #b3b3b3 для неактивных элементов, #ffffff для активных
• Круглые кнопки с иконками (радиус 50%)
• Логотип Spotify в верхнем левом углу зелёного цвета

5. Принципы вёрстки

Система отступов

• Базовая единица: 8px
• Шкала: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px

Сетка и контейнеры

• Боковая панель (фиксированная) + основная область контента
• Карточки альбомов и плейлистов на основе сетки
• Полноширинная панель «сейчас играет» внизу
• Адаптивная область контента заполняет оставшееся пространство

Философия пустого пространства

• Тёмное уплотнение: Spotify упаковывает контент плотно — сетки плейлистов, списки треков и навигация расположены близко друг к другу. Тёмный фон обеспечивает визуальный отдых между элементами без необходимости в больших отступах.
• Плотность контента важнее воздуха: Это приложение, а не маркетинговый сайт. Каждый пиксель служит опыту прослушивания.

Шкала скругления углов

• Минимальный (2px): Бейджи, явные теги
• Тонкий (4px): Поля ввода, мелкие элементы
• Стандартный (6px): Контейнеры обложек, карточки
• Комфортный (8px): Секции, диалоги
• Средний (10px–20px): Панели, оверлеи
• Большой (100px): Крупные кнопки-«таблетки»
• Таблетка (500px): Основные кнопки, строка поиска
• Полная таблетка (9999px): Навигационные «таблетки», поиск
• Круг (50%): Кнопки воспроизведения, аватары, иконки

6. Глубина и высота

Уровень	Обработка	Применение
Базовый (Level 0)	Фон #121212	Самый глубокий слой, фон страницы
Поверхность (Level 1)	#181818 или #1f1f1f	Карточки, боковая панель, контейнеры
Приподнятый (Level 2)	rgba(0,0,0,0.3) 0px 8px 8px	Выпадающие меню, hover-карточки
Диалог (Level 3)	rgba(0,0,0,0.5) 0px 8px 24px	Модальные окна, оверлеи, меню
Вставной (Border)	rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset	Рамки полей ввода

Философия теней: Spotify использует заметно глубокие тени для тёмного приложения. Тень с непрозрачностью 0.5 и размытием 24px создаёт драматический эффект «парения в темноте» для диалогов и меню, а тень с непрозрачностью 0.3 и размытием 8px обеспечивает более тонкий подъём карточки. Уникальная комбинация вставной рамки с тенью на полях ввода создаёт утопленное, тактильное ощущение.

7. Что делать и чего избегать

Делать

• Использовать почти чёрные фоны (#121212–#1f1f1f) — глубина через вариацию оттенков
• Применять Spotify Green (#1ed760) только для элементов управления воспроизведением, активных состояний и основных CTA
• Использовать форму «таблетки» (500px–9999px) для всех кнопок — круглую (50%) для кнопок воспроизведения
• Применять верхний регистр + широкое межбуквенное расстояние (1.4px–2px) для меток кнопок
• Сохранять компактность типографики (диапазон 10px–24px) — это приложение, а не журнал
• Использовать глубокие тени (0.3–0.5 opacity) для приподнятых элементов на тёмных фонах
• Позволять обложкам альбомов обеспечивать цвет — сам UI ахроматичен

Не делать

• Не использовать Spotify Green декоративно или в качестве фона — он только функциональный
• Не использовать светлые фоны для основных поверхностей — тёмное погружение принципиально
• Не пропускать геометрию «таблетки» и круга на кнопках — прямоугольные кнопки ломают идентичность
• Не использовать тонкие/едва заметные тени — на тёмных фонах тени должны быть глубокими, чтобы быть видимыми
• Не добавлять дополнительные фирменные цвета — зелёный + ахроматические серые — полная палитра
• Не использовать свободные межстрочные интервалы — типографика Spotify компактна и плотна
• Не показывать голые серые рамки — использовать рамки на основе теней или вставные рамки

8. Адаптивное поведение

Точки перехода

Название	Ширина	Ключевые изменения
Mobile Small	<425px	Компактный мобильный макет
Mobile	425–576px	Стандартный мобильный
Tablet	576–768px	Двухколоночная сетка
Tablet Large	768–896px	Расширенный макет
Desktop Small	896–1024px	Боковая панель видна
Desktop	1024–1280px	Полный десктопный макет
Large Desktop	>1280px	Расширенная сетка

Стратегия сворачивания

• Боковая панель: полная → свёрнутая → скрытая
• Сетка альбомов: 5 колонок → 3 → 2 → 1
• Панель «сейчас играет»: сохраняется при любом размере
• Поиск: поле-«таблетка» сохраняется, ширина регулируется
• Навигация: боковая панель → нижняя панель на мобильных

9. Руководство для агентных промптов

Быстрый справочник по цветам

• Background: Near Black (#121212)
• Surface: Dark Card (#181818)
• Text: White (#ffffff)
• Secondary text: Silver (#b3b3b3)
• Accent: Spotify Green (#1ed760)
• Border: #4d4d4d
• Error: Negative Red (#f3727f)

Примеры промптов для компонентов

• "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
• "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
• "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
• "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
• "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."

Руководство по итерации

1. Начните с #121212 — всё живёт в почти чёрной темноте
2. Spotify Green только для функциональных акцентов (воспроизведение, активные состояния, CTA)
3. Везде «таблетки» — 500px для крупных, 9999px для мелких, 50% для круглых
4. Верхний регистр + широкий трекинг на кнопках — систематичный лейбл-голос
5. Глубокие тени (0.3–0.5 opacity) для высоты — светлые тени невидимы на тёмном
6. Обложки альбомов обеспечивают весь цвет — UI остаётся ахроматичным