# Система дизайну натхненна Spotify

> Category: Медіа та споживачі
> Музичний стримінг. Яскравий зелений на темному тлі, жирний шрифт, акцент на обкладинках альбомів.

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

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

Типографіка використовує SpotifyMixUI та SpotifyMixUITitle — власні шрифти з сімейства CircularSp (Circular від Lineto, адаптований для Spotify) з розширеним стеком запасних варіантів, що включає арабські, єврейські, кириличні, грецькі, деванагарі та CJK шрифти — відображаючи глобальне охоплення Spotify. Система шрифтів компактна й функціональна: 700 (жирний) для акцентів і навігації, 600 (напівжирний) для вторинних акцентів, 400 (звичайний) для основного тексту. Кнопки використовують верхній регістр і позитивний міжлітерний інтервал (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`) — інтерфейс зникає за контентом
- Зелений Spotify (`#1ed760`) як єдиний акцент бренду — ніколи декоративний, завжди функціональний
- Шрифтове сімейство SpotifyMixUI/CircularSp із підтримкою глобальних шрифтів
- Кнопки-таблетки (500px–9999px) і кругові елементи керування (50%) — округлі, оптимізовані для дотику
- Підписи кнопок у верхньому регістрі з широким міжлітерним інтервалом (1.4px–2px)
- Важкі тіні на піднятих елементах (`rgba(0,0,0,0.5) 0px 8px 24px`)
- Семантичні кольори: негативний червоний (`#f3727f`), попереджувальний помаранчевий (`#ffa42b`), інформаційний синій (`#539df5`)
- Обкладинка альбому як основне джерело кольору — інтерфейс за задумом ахроматичний

## 2. Кольорова палітра та ролі

### Основний бренд
- **Зелений Spotify** (`#1ed760`): Основний акцент бренду — кнопки відтворення, активні стани, заклики до дії
- **Майже чорний** (`#121212`): Найглибша фонова поверхня
- **Темна поверхня** (`#181818`): Картки, контейнери, піднятi поверхні
- **Середньо-темний** (`#1f1f1f`): Фони кнопок, інтерактивні поверхні

### Текст
- **Білий** (`#ffffff`): `--text-base`, основний текст
- **Сріблястий** (`#b3b3b3`): Вторинний текст, приглушені підписи, неактивна навігація
- **Майже білий** (`#cbcbcb`): Трохи яскравіший вторинний текст
- **Світлий** (`#fdfdfd`): Близький до чисто білого для максимального акценту

### Семантичні
- **Негативний червоний** (`#f3727f`): `--text-negative`, стани помилок
- **Попереджувальний помаранчевий** (`#ffa42b`): `--text-warning`, стани попереджень
- **Інформаційний синій** (`#539df5`): `--text-announcement`, інформаційні стани

### Поверхня та рамка
- **Темна картка** (`#252525`): Підняти поверхня картки
- **Середня картка** (`#272727`): Альтернативна поверхня картки
- **Сірий рамки** (`#4d4d4d`): Рамки кнопок на темному тлі
- **Світла рамка** (`#7c7c7c`): Контурні рамки кнопок, приглушені посилання
- **Роздільник** (`#b3b3b3`): Лінії-роздільники
- **Світла поверхня** (`#eeeeee`): Кнопки світлого режиму (рідко)
- **Зелена рамка Spotify** (`#1db954`): Варіант зеленої акцентної рамки

### Тіні
- **Важка** (`rgba(0,0,0,0.5) 0px 8px 24px`): Діалоги, меню, підняті панелі
- **Середня** (`rgba(0,0,0,0.3) 0px 8px 8px`): Картки, випадаючі меню
- **Вставлена рамка** (`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`
- **Інтерфейс / Основний текст**: `SpotifyMixUI`, той самий стек запасних варіантів

### Ієрархія

| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|------|------|------|--------|-------------|----------------|-------|
| Назва розділу | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Жирна вага заголовка |
| Заголовок функції | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (щільний) | normal | Напівжирні заголовки розділів |
| Жирний основний | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Акцентований текст |
| Основний | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Стандартний основний текст |
| Кнопка у верхньому регістрі | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (щільний) | 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 (жирним), або 400 (звичайним), 600 використовується помірно. Це створює чітку візуальну ієрархію через контраст насиченості, а не варіацію розміру.
- **Кнопки у верхньому регістрі як система**: Підписи кнопок використовують верхній регістр і широкий міжлітерний інтервал (1.4px–2px), створюючи систематичний голос «ярлика», відмінний від контентного тексту.
- **Компактний розмір**: Діапазон 10px–24px — вужчий за більшість систем. Шрифт Spotify компактний і функціональний, розроблений для перегляду плейлистів, а не читання статей.
- **Підтримка глобальних шрифтів**: Розширений стек запасних варіантів (арабський, єврейський, кириличний, грецький, деванагарі, CJK) відображає охоплення Spotify у понад 180 ринках.

## 4. Стилі компонентів

### Кнопки

**Темна таблетка**
- Фон: `#1f1f1f`
- Текст: `#ffffff` або `#b3b3b3`
- Відступ: 8px 16px
- Радіус: 9999px (повна таблетка)
- Використання: Навігаційні таблетки, вторинні дії

**Темна велика таблетка**
- Фон: `#181818`
- Текст: `#ffffff`
- Відступ: 0px 43px
- Радіус: 500px
- Використання: Основні кнопки навігації застосунку

**Світла таблетка**
- Фон: `#eeeeee`
- Текст: `#181818`
- Радіус: 500px
- Використання: Заклики до дії у світлому режимі (згода на куки, маркетинг)

**Контурна таблетка**
- Фон: прозорий
- Текст: `#ffffff`
- Рамка: `1px solid #7c7c7c`
- Відступ: 4px 16px 4px 36px (асиметричний для іконки)
- Радіус: 9999px
- Використання: Кнопки підписки, вторинні дії

**Кругова кнопка відтворення**
- Фон: `#1f1f1f`
- Текст: `#ffffff`
- Відступ: 12px
- Радіус: 50% (коло)
- Використання: Елементи керування відтворенням/паузою

### Картки та контейнери
- Фон: `#181818` або `#1f1f1f`
- Радіус: 6px–8px
- На більшості карток немає видимих рамок
- Наведення: незначне освітлення фону
- Тінь: `rgba(0,0,0,0.3) 0px 8px 8px` на піднятих

### Поля введення
- Поле пошуку: фон `#1f1f1f`, текст `#ffffff`
- Радіус: 500px (таблетка)
- Відступ: 12px 96px 12px 48px (з урахуванням іконки)
- Фокус: рамка стає `#000000`, контур `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. Глибина та підйом

| Рівень | Обробка | Використання |
|-------|-----------|-----|
| Базовий (рівень 0) | Фон `#121212` | Найглибший шар, фон сторінки |
| Поверхня (рівень 1) | `#181818` або `#1f1f1f` | Картки, бічна панель, контейнери |
| Піднятий (рівень 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Випадаючі меню, картки при наведенні |
| Діалог (рівень 3) | `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` | Рамки полів введення |

**Філософія тіней**: Spotify використовує помітно важкі тіні для темно-тематичного застосунку. Тінь з непрозорістю 0.5 при розмитості 24px створює драматичний ефект «ширяння в темряві» для діалогів та меню, тоді як тінь з непрозорістю 0.3 при розмитості 8px забезпечує більш тонке підняття картки. Унікальна комбінація вставленої рамки й тіні на полях введення створює заглиблену, тактильну якість.

## 7. Що робити і чого не робити

### Що робити
- Використовуйте майже чорні фони (`#121212`–`#1f1f1f`) — глибина через варіацію відтінків
- Застосовуйте зелений Spotify (`#1ed760`) лише для елементів керування відтворенням, активних станів і основних закликів до дії
- Використовуйте форму таблетки (500px–9999px) для всіх кнопок — кругову (50%) для елементів керування відтворенням
- Застосовуйте верхній регістр і широкий міжлітерний інтервал (1.4px–2px) на підписах кнопок
- Зберігайте компактну типографіку (діапазон 10px–24px) — це застосунок, а не журнал
- Використовуйте важкі тіні (непрозорість 0.3–0.5) для піднятих елементів на темних фонах
- Дозвольте обкладинці альбому надавати колір — сам інтерфейс ахроматичний

### Чого не робити
- Не використовуйте зелений Spotify декоративно або на фонах — він лише функціональний
- Не використовуйте світлі фони для основних поверхонь — темне занурення є ключовим
- Не пропускайте геометрію таблетки/кола на кнопках — квадратні кнопки руйнують ідентичність
- Не використовуйте тонкі/легкі тіні — на темних фонах тіні мають бути важкими, щоб бути видимими
- Не додавайте додаткові кольори бренду — зелений і ахроматичні сірі становлять повну палітру
- Не використовуйте збільшену висоту рядка — типографіка Spotify компактна й щільна
- Не відкривайте прості сірі рамки — замість цього використовуйте тіньові або вставлені рамки

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

### Контрольні точки
| Назва | Ширина | Ключові зміни |
|------|-------|-------------|
| Малий мобільний | <425px | Компактний мобільний макет |
| Мобільний | 425–576px | Стандартний мобільний |
| Планшет | 576–768px | Сітка з 2 колонок |
| Великий планшет | 768–896px | Розширений макет |
| Малий десктоп | 896–1024px | Бічна панель видима |
| Десктоп | 1024–1280px | Повний десктоп макет |
| Великий десктоп | >1280px | Розширена сітка |

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

## 9. Посібник для агентів

### Швидкий довідник кольорів
- Фон: Майже чорний (`#121212`)
- Поверхня: Темна картка (`#181818`)
- Текст: Білий (`#ffffff`)
- Вторинний текст: Сріблястий (`#b3b3b3`)
- Акцент: Зелений Spotify (`#1ed760`)
- Рамка: `#4d4d4d`
- Помилка: Негативний червоний (`#f3727f`)

### Приклади підказок для компонентів
- «Створіть темну картку: фон `#181818`, радіус 8px. Заголовок 16px SpotifyMixUI насиченість 700, білий текст. Підзаголовок 14px насиченість 400, `#b3b3b3`. Тінь `rgba(0,0,0,0.3) 0px 8px 8px` при наведенні.»
- «Спроектуйте кнопку-таблетку: фон `#1f1f1f`, білий текст, радіус 9999px, відступ 8px 16px. 14px SpotifyMixUI насиченість 700, верхній регістр, міжлітерний інтервал 1.4px.»
- «Створіть кругову кнопку відтворення: фон зеленого Spotify (`#1ed760`), іконка `#000000`, радіус 50%, відступ 12px.»
- «Створіть поле пошуку: фон `#1f1f1f`, білий текст, радіус 500px, відступ 12px 48px. Вставлена рамка: `rgb(124,124,124) 0px 0px 0px 1px inset`.»
- «Спроектуйте навігаційну бічну панель: фон `#121212`. Активні елементи: 14px насиченість 700, білий. Неактивні: 14px насиченість 400, `#b3b3b3`.»

### Посібник з ітерацій
1. Починайте з `#121212` — все існує в майже чорній темряві
2. Зелений Spotify лише для функціональних виділень (відтворення, активний, заклик до дії)
3. Усе у формі таблетки — 500px для великих, 9999px для малих, 50% для кругових
4. Верхній регістр і широке трекінг на кнопках — систематичний голос ярлика
5. Важкі тіні (непрозорість 0.3–0.5) для підйому — легкі тіні невидимі на темному тлі
6. Обкладинка альбому надає весь колір — інтерфейс залишається ахроматичним