> For the complete documentation index, see [llms.txt](https://docs.iexexchanger.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iexexchanger.com/help-center/ai-docs/klientskii-sait-i-prodvizhenie/design-constructor/design-colors.md).

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

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

## Каркас сайта

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

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

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

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

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

## Шапка сайта

| Поле          | Что меняет                       | Где проверить                  |
| ------------- | -------------------------------- | ------------------------------ |
| Фон шапки     | Верхнюю панель клиентского сайта | Шапка на всех страницах        |
| Текст шапки   | Текст и иконки верхней панели    | Меню, вход и переключатели     |
| Граница шапки | Нижнюю линию верхней панели      | Разделение шапки и содержимого |

## Подвал сайта

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

## Форма обмена

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

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

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

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

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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.iexexchanger.com/help-center/ai-docs/klientskii-sait-i-prodvizhenie/design-constructor/design-colors.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.