Палитра
Палитра — это набор до 24 HEX-цветов, из которых формируется фирменный стиль.
Добавление цвета
- Введите HEX-код в поле ввода (например,
#4F46E5) - Нажмите кнопку + справа от палитры
Редактирование цвета
- Кликните на нужный цвет в палитре
- Измените HEX-код в поле ввода — цвет обновится в реальном времени
Удаление цвета
- Выберите цвет в палитре
- Нажмите Удалить цвет
Цвета ролей
Роли определяют, какой цвет из палитры используется для конкретных элементов интерфейса.
Как назначить
- Кликните на нужный цвет в палитре (он станет активным)
- Нажмите кнопку Назначить рядом с нужной ролью
Роли интерфейса
| Роль | Где применяется |
|---|---|
| Primary | Кнопки действий, ссылки, фокус-кольца, активные элементы |
| Secondary | Вторичные кнопки, мягкие акценты |
| Tertiary | Фоновые элементы, третичные акценты |
| Accent | Бейджи, промо-блоки, CTA-выделения |
Семантические роли
| Роль | Где применяется |
|---|---|
| Success | Статус «опубликовано», успешная оплата, подтверждение |
| Warning | Ожидание модерации, предупреждения, истекающие сроки |
| Error | Ошибки валидации, опасные действия, отклонённые заявки |
| Info | Информационные подсказки, нейтральные уведомления |
Палитра в разделе «Дизайн» события
В разделе Дизайн каждого события отображаются быстрые свотчи для выбора цветов кнопок, фона и акцентов. Эти свотчи берутся из первых 12 цветов вашей палитры бренда. Если в палитре меньше 12 цветов — все они будут доступны; если больше 12 — остальные не отображаются в быстром доступе.
Чтобы нужные цвета попали в свотчи, расположите их в начале палитры.
Рекомендации
- Контраст: основной цвет (Primary) должен хорошо читаться на белом фоне — проверьте контраст не ниже 4.5:1
- Не дублируйте: Primary и Accent лучше выбирать из разных цветовых семейств
- Семантика: Success всегда зелёный оттенок, Error — красный. Не нарушайте ожидания пользователей