workbuddy_skills/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. Обкладинка альбому надає весь колір — інтерфейс залишається ахроматичним