Выбирайте роль, затем оттенок
Обычные действия, активная навигация и интерактивные иконки используют акцент. Голубой — значение по умолчанию; пользователь может выбрать другой акцент в настройках. Компонент обращается к токену, а не хранит собственный HEX.
Красный в интерфейсе закреплён за ошибками и критическими действиями. Он не меняется вместе с акцентом. Красная часть оригинального логотипа сохраняется как элемент знака.
Если таблица шире экрана, прокручивайте её по горизонтали.
| Роль | Токены |
|---|---|
| Основное действие | --accent / --accent-foreground |
| Критическое состояние | --destructive / --destructive-foreground |
| Поверхность и текст | --background / --foreground |
| Вторичная информация | --muted / --muted-foreground |
Смысл передаётся несколькими способами
Ошибка сопровождается понятным текстом рядом с полем и доступным сообщением. Выбранный пункт отмечается состоянием и подписью; иконка дополняет смысл. Цвет не должен быть единственным отличием важных состояний.
Семантическая пара цветов · CSS
.primary-action {
background: var(--accent);
color: var(--accent-foreground);
}
.critical-message {
color: var(--destructive);
}Проверка материала
- Откройте светлую и тёмную темы, затем повышенный контраст.
- Смените пользовательский акцент: критические состояния должны сохранить смысл.
- Сверьте сочетания с таблицей контраста в разделе цветов.
- Проверьте фокус, ошибки, отключённые элементы и текст на цветной кнопке.