open-design/design-systems/spotify/DESIGN-uk.md

# Система дизайну натхненна 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. Обкладинка альбому надає весь колір — інтерфейс залишається ахроматичним
-											术语更名第一步：执行会话／任务会话 ⇒ 项目会话（口径块 ＋ 触发词表）＋ 落地 9 份"说人话"新稿
										
										
											2026-10-08 22:10:12 +08:00
+								# Система дизайну натхненна 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`.»
 								### Посібник з ітерацій
 . Починайте з `#121212` — все існує в майже чорній темряві
 . Зелений Spotify лише для функціональних виділень (відтворення, активний, заклик до дії)
 . Усе у формі таблетки — 500px для великих, 9999px для малих, 50% для кругових
 . Верхній регістр і широке трекінг на кнопках — систематичний голос ярлика
 . Важкі тіні (непрозорість 0.3–0.5) для підйому — легкі тіні невидимі на темному тлі
 . Обкладинка альбому надає весь колір — інтерфейс залишається ахроматичним