Color System
Описание принципов построения и использования цветовой системы
Структура
6 цветов
Brand
Neutral
Success
Warning
Danger
Info
12 оттенков
1 — фон зебры
2 — фон / заливка третьестепенного элемента при наведении
3 — заливка второстепенного интерактивного элемента при бездействии / заливка третьестепенного элемента при нажатии или выборе
4 — заливка второстепенного интерактивного элемента при наведении
5 — заливка интерактивного элемента при нажатии или выборе
6 — обводка неинтерактивного элемента
7 — обводка интерактивного элемента и фокусного кольца
8 — обводка интерактивного элемента при наведении / цвет третьестепенного текста
9 — заливка основного интерактивного компонента
10 — заливка основного интерактивного компонента при наведении
11 — цвет второстепенного текста
12 — цвет основного текста
2 варианта прозрачности
Непрозрачный
Прозрачный
Генерация цветовой палитры
Сервисы
https://www.radix-ui.com/colors/custom -- генерация цветовой палитры в светлой и темной теме в двух режимах прозрачности.
https://alphredo.app/ -- генерации прозрачных цветов относительно фона
https://anice.red/ -- генерация статусных цветов относительно брендового
Токены
Если дизайн-система не мульти-брендовая -- использование компонентного уровня токенов не требуется
Last updated
