Цвета дизайн-конструктора

Назначение всех цветовых ролей клиентского сайта в дизайн-конструкторе

Каждое поле в конструкторе отвечает за роль интерфейса, а не за один конкретный элемент. Один цвет может одновременно использоваться на нескольких страницах. Изменяйте роли небольшими группами и проверяйте реальные сценарии клиента.

Откройте «Настройки» — «Дизайн-конструктор». Выберите «Собрать свой стиль». Для работы требуется право «Настройки интерфейса» из блока «Настройки» или более широкое право «Общие настройки» из блока «Админпанель».

Права находятся по пути «Пользователи» — «Список групп пользователей». Откройте нужную группу.

Каркас сайта

Поле	Что меняет	Где проверить
Фон приложения	Общий фон вокруг основного содержимого	Пространство вокруг страниц и крупных блоков
Текст приложения	Текст и иконки на общем фоне	Заголовки и навигационные элементы вне карточек
Фон секций	Мягкий фон крупных областей	Секции главной и внутренних страниц
Базовая поверхность	Чистый фон страниц, форм и диалогов	Формы, окна и основные поверхности
Основной текст	Главный текст и иконки	Заголовки, абзацы и обычные иконки

Бренд и действия

Поле	Что меняет	Где проверить
Главный брендовый цвет	Главные кнопки и выбранные элементы	«Создать заявку» и активные переключатели
Текст на главной кнопке	Текст и иконки на основном цвете	Все главные кнопки
Вторичный фон	Вторичные кнопки и спокойные блоки	Отмена, дополнительные действия и подсветки
Текст на вторичном фоне	Текст на вторичных элементах	Вторичные кнопки и панели
Акцентный фон	Наведение и выбор	Строки меню, выбранные варианты и подсветка
Текст на акценте	Текст внутри акцентного фона	Выбранные и наведённые элементы
Ошибки и удаление	Ошибки, отказ и опасные действия	Валидация и кнопки удаления
Текст на ошибке	Текст на опасном фоне	Уведомления и кнопки опасных действий

Карточки, окна и поля

Поле	Что меняет	Где проверить
Карточка	Фон карточек и повторяющихся панелей	Карточки направлений и блоки формы
Текст карточки	Текст внутри карточки	Заголовки и значения в карточках
Всплывающая поверхность	Фон списков, окон и быстрых меню	Выпадающие списки и диалоги
Текст всплывающего окна	Текст на всплывающей поверхности	Варианты выбора и подсказки
Приглушённый фон	Спокойные информационные блоки	Подсказки и служебные области
Второстепенный текст	Подписи и дополнительная информация	Подсказки под полями и метаданные
Основная граница	Линии и границы карточек	Разделители и контуры панелей
Граница поля	Контур ввода и выбора	Поля суммы, email и реквизитов
Фон поля	Внутренняя поверхность полей	Поля ввода и выпадающие элементы
Фокус	Обводка активного поля	Поле после щелчка или перехода клавишей Tab

Шапка сайта

Поле	Что меняет	Где проверить
Фон шапки	Верхнюю панель клиентского сайта	Шапка на всех страницах
Текст шапки	Текст и иконки верхней панели	Меню, вход и переключатели
Основная кнопка шапки	Фон главного действия верхней панели	Кнопка входа и главное действие шапки
Текст основной кнопки	Текст и иконки главного действия	Содержимое основной кнопки шапки
Нейтральный фон шапки	Фон спокойных элементов и наведения	Переключатели языка и темы
Приглушённый текст шапки	Второстепенные и неактивные элементы	Иконки и подписи верхней панели
Акцент шапки	Фон активных и наведённых пунктов	Навигация и кнопки шапки
Текст акцента шапки	Текст и иконки на акцентном фоне	Активные пункты навигации
Граница шапки	Нижнюю линию верхней панели	Разделение шапки и содержимого
Фокус в шапке	Обводку при управлении с клавиатуры	Кнопки и навигация после перехода клавишей Tab

Подвал сайта

Поле	Что меняет	Где проверить
Фон подвала	Основной фон нижней части сайта	Подвал длинной страницы
Текст подвала	Основной текст	Названия разделов и важные подписи
Второстепенный текст подвала	Спокойные подписи	Служебные строки и копирайт
Граница подвала	Линии и разделители	Верхняя линия и внутренние группы
Ссылка подвала	Обычное состояние ссылок	Навигация и контакты в подвале
Ссылка при наведении	Ссылку под указателем	Наведение мышью на каждую ссылку
Акцент подвала	Мягкие выделения	Акцентные элементы нижнего блока

Форма обмена

Поле	Что меняет	Где проверить
Фон подсказки обмена	Фон информационных текстов	Подсказки внутри формы обмена
Текст подсказки обмена	Текст информационных блоков	Условия и пояснения расчёта
Граница подсказки обмена	Контур подсказок	Линии вокруг информационных блоков
Фон суммы обмена	Блок расчётной суммы	Поле результата «Получаете»
Текст суммы обмена	Число и валюту результата	Рассчитанная сумма и код валюты

Значения цвета

Поле может содержать непосредственный цвет, ссылку на другую роль, формулу или иное допустимое значение. Ссылка помогает сохранять единый цвет, а формула — рассчитывать вариант на основе другой роли. Если вы не уверены в синтаксисе, используйте цвет, выбранный интерфейсом, или готовый стиль.

После сохранения повторно откройте редактирование и убедитесь, что выбраны те же фон и текст, затем проверьте клиентский сайт. Эту проверку выполняйте не только для общей темы, но и для цвета баннера, валюты, валютной метки, заявки и категории новости, когда соответствующее поле есть в их карточке. Некорректное старое значение не должно ломать всю страницу; исправьте именно проблемное поле и сохраните его допустимым цветом.

Правила проверки

1. Проверяйте светлую и тёмную палитры отдельно.
2. Сравнивайте текст с фоном, на котором он фактически расположен.
3. Проверяйте обычное, наведённое, выбранное, фокусное, отключённое и ошибочное состояния.
4. Не делайте границы и фокус полностью невидимыми.
5. Проверяйте форму обмена, вход, регистрацию, меню, подвал и диалоги.
6. Сохраняйте удачный вариант в библиотеку до следующего крупного изменения.

Если после изменения текст исчез, сначала восстановите соответствующие цвета фона и текста. При широкой проблеме используйте «Сбросить группу», а не сбрасывайте всё оформление без необходимости.