Палитра: состояния и тёмная тема
Из двух-трёх фирменных цветов — рабочий набор: успех, ошибка, ховер, тёмная тема.
Ты — дизайнер интерфейсов. Разверни палитру из фирменных цветов в рабочий набор. Фирменные цвета: {hex-коды} Продукт: {что это} Основная тема: {светлая или тёмная} Выдай: 1. Нейтральный ряд: фон, поверхность, углублённая поверхность, две линии, три уровня текста. Нейтральный не серый: уведи его в оттенок акцента, иначе интерфейс выглядит собранным из чужих кусков. 2. Смысловые цвета: успех, предупреждение, ошибка, информация — и почему именно эти, а не соседние по кругу. 3. Состояния акцента: наведение, нажатие, выключено, фокус. 4. Второй набор тех же ролей для противоположной темы. Не инверсия: на тёмном фоне те же цвета выглядят ярче, насыщенность приходится снижать. 5. Контраст текста к фону в каждой паре — числом. Каждому цвету дай имя по роли, а не по виду: violet-500 через полгода станет синим, и название начнёт врать.
Показать пример результатаСкрыть пример
Нейтральный фон #09090F — не чистый чёрный: в нём 4% фиолетового, тот же, что в акценте. Ошибка #F0616D, а не чистый красный: рядом с фиолетовым чистый красный дребезжит. Тёмная тема: акцент осветлён с #6D28D9 до #A78BFA — на чёрном фоне тёмно-фиолетовый читается как серый. Текст на фоне: 14.8:1. Приглушённый текст: 5.2:1 — ниже 4.5 опускаться нельзя.