Стандартний вигляд музичного інструменту задає жанр музики, яку в ньому створюватимуть. Чорно-фіолетовий синт-інструмент підштовхує людей до синт-треків. Інструмент у стилі теплого паперу для фолку підштовхує до фолку. Ми хотіли, щоб aisonggen був нейтральним щодо жанру, тож у ньому чотири теми, які стоять на рівних на парадному вході.
Чотири настрої, на яких ми зупинилися
- Sonic Teal — холодний, клінічний дефолт. Виглядає як зсередини мастеринг-студії після опівночі. Найкраще для ambient, techno, всього, де пісня — це радше архітектура, ніж історія.
- Neon Orange — гучний і гарячий. Бренд-дефолт. Виглядає як вихід із клубу о 2-й ночі. Найкраще для trap, hyperpop, всього, де енергія — це сенс.
- Studio Black — тиха дорога. Антрацит і золото. Виглядає як гітарний підсилювач, обтягнутий шкірою. Найкраще для джазу, солу, авторської пісні, яка хоче, щоб її сприймали серйозно.
- Electric Magenta — грайлива. Рожеве й хром. Виглядає як зсередини музичного відео в стилі Y2K. Найкраще для попу, танцю, всього, де жарт може бути очевидним.
Чого нам коштували теми
Дизайн під одну тему — це тисяча маленьких рішень про контраст,
ієрархію та акценти. Дизайн під чотири — та сама тисяча рішень,
помножена на чотири, і вони всі мають лягти на той самий компонент
без поломок. Спосіб, яким ми зробили це посильним, — винести
кожен колір у систему токенів, щоб самі компоненти ніколи не
зверталися до hex-коду, а лише до ролі: --primary,
--accent, --bg-elevated. Теми змінюють значення; компоненти
не змінюються взагалі.
Що це нам дало
Те, чого ми не очікували: люди почали обирати теми за жанровим контекстом, а не за особистим смаком. Продюсер, що працює над trap-бітом, перемикається на Neon Orange, навіть якщо його дефолт — Sonic Teal. Перемикач тем перестав бути дропдауном у налаштуваннях і став частиною процесу — способом налаштувати кімнату під настрій тієї пісні, яку Ви якраз пишете.
Зауваження про доступність
Усі чотири теми відповідають WCAG AA за контрастом тексту й focus rings. Жодна з них не покладається лише на колір для позначення стану — кожен активний стан також змінює форму, вагу або положення. Користувач, який не бачить різниці між Sonic Teal і Neon Orange, все одно має зрозуміти, що кнопку натиснуто.