# Цветовая схема

Для настройки цветовой схемы сайта вы можете указать 9 цветов, которые отвечают за те или иные элементы. Вы можете выбрать цвет из готовой палитры или ввести вручную код цвета в #HEX формате.

##  ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS8yMWQ5MmU1Yi1lMjllLTQ3ZDMtOTQ5ZS1kYmUyMDgxYmUxOTAvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.fm6svRBUAzYu9BSQbimqZZ3VzfvfVoZFSje_YXqY0s0)**Primary - основной цвет сайта**

Он используется в большинстве блоков, например:

* Кнопка Каталог
* Ссылки
* Кнопка В корзину
* Строка поиска
* Хлебные крошки и т.д.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS85NjljMzkxMi1lZmE3LTRiMjAtYjEwYi1jMjA1ZWQ3OGFlY2YvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.N4PWptl69EVaWZyUA8tCybvYOgYw_aeso4qQPFfvXBw)

## **Secondary - цвет-компаньон**

Это дополнительный цвет сайта, используется как компаньон к основному. Он используется для мелких деталей интерфейса, например, для бейджиков в строке меню или же для сердечек в избранном. Если в вашем фирменном стиле только один цвет, то при необходимости можете данный цвет указать таким же, как и **Primary**.

## **Accent**

Данный цвет используется в элементах:

* Обводка текстовых полей 
* Фон информационных сообщений и т.д.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS84NzFlZTYyMC01Mjc5LTRiMDctYTQzOC1mZjlmYzVlMWEyOWMvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.soton6FZ0mwrMVI38iaZnG8PFSh5Yig7PTjYlaSSAfU)

## **Accent-2**

Этот цвет используется всего в паре мест, самое важное из которых - это фон нижней части сайта (footer)

## **Error - ошибка**

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

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS9lNThkNzIwMC0xNTI0LTQ3NDItOTJmNi00YWI2NjBhYTczMzcvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.lvgaVslgl2Lvy-4jN0zRLGRDQhPoIxtzQ8UFGhKunjI)

## **Success - успешное выполнение**

Этот цвет используется для вывода сообщений об успешности той или иной операции. Помимо этого этот цвет используется для кнопки **Перейти в корзину** на детальной странице товара, после того, как вы добавили товар в корзину.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS85Mjk2ZGE2Mi1lM2RjLTRjZGItODUyMC1lZTRhZjJiNDgyY2UvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.3qUz_8L6aS19DZp6EcHuQ_4ZGfEpvpewIabJv3gcnAg)

## **Gray**

Серый цвет используется в основном для текста подсказок и другой дополнительной информации.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS85MTU5ZGMxMi1jOGQ4LTQ2NTAtOGQ5OC1iMTNlMWE0YzQxMDgvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.m41R5do2Lo6bQjj8jzWaWZLyC-F005-8uF2No2bfISs)

## **Gray Light**

Этот цвет используется как фон некоторых информационных блоков, например, для **Доставки**.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS84OTE3ODk2MC03YTFiLTQ3NjEtOTUwMS00ZWY4MzQwNzIyMzgvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.rLySvFSJ4srDB61fzGF0jP9OR95Tr40DMOpNfDZmPL0)

## **Orange**

Этот цвет используется только в одном месте - это звёздочки в отзывах.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ3YmIzMDRiLTZiYTktNDk2Ny05OTJhLTMzMWFiMTdlMDc0MS85NTI3ZTIyZC1iMmM5LTQxNDMtYWIyMC1hMTVkZmRlZTNlMjEvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjM1MDAsImV4cCI6MTc5MzM0OTkwMH0.3b-Cg633f3ksjLhiDCoBqeHKhRck6RfiGFQgHpi0Gek)

# Шрифт

В том же блоке настроек, под цветами, есть поле **Шрифт Google Fonts**. В списке — больше двухсот шрифтов Google Fonts с поддержкой кириллицы; по умолчанию используется **Roboto**.

Выбранный шрифт применяется ко всему сайту и подгружается напрямую с серверов Google. Посмотреть, как выглядит конкретный шрифт, можно на [fonts.google.com](https://fonts.google.com/?subset=cyrillic) — там же удобно сравнивать начертания.

Берите шрифт с обычным, полужирным и жирным начертаниями: решение подключает начертания 400, 500 и 700, и если у шрифта их нет, браузер нарисует недостающие сам — обычно неудачно.

Шрифт входит в конфигурацию клиентской части, поэтому после сохранения сайт пересобирается: изменение появляется в течение 5–10 минут.

# Если настроек не хватает

Всё, что не задаётся цветами и шрифтом, можно поправить своими стилями: в этом же блоке есть строка **Свои стили сайта**. Как ими пользоваться и почему нельзя писать селекторы по полному имени класса — в статье «Свои стили сайта».

---

**Documents**

- [Установка решения](https://docs.astdesign.ru/s/marketpro/doc/ustanovka-resheniya-Z8Q6r79liU)
- [FAQ перед покупкой](https://docs.astdesign.ru/s/marketpro/doc/faq-pered-pokupkoj-HPgKP7mWDT)
- [Общая настройка](https://docs.astdesign.ru/s/marketpro/doc/obshaya-nastrojka-Io6HZQaGXf)
- [Шаблон](https://docs.astdesign.ru/s/marketpro/doc/shablon-ylLAFZV3o8)
- [Главная страница](https://docs.astdesign.ru/s/marketpro/doc/glavnaya-stranica-7PwYozaVVo)
- [Магазины (склады)](https://docs.astdesign.ru/s/marketpro/doc/magaziny-sklady-7rEEZJrA45)
- [Каталог](https://docs.astdesign.ru/s/marketpro/doc/katalog-FpnYzZr900)
- [Поиск](https://docs.astdesign.ru/s/marketpro/doc/poisk-xsDdFVh5h0)
- [Текстовые страницы](https://docs.astdesign.ru/s/marketpro/doc/tekstovye-stranicy-jVtNXZv3T5)
- [Реклама и маркетинг](https://docs.astdesign.ru/s/marketpro/doc/reklama-i-marketing-iZkaCoxr5b)
- [Региональность](https://docs.astdesign.ru/s/marketpro/doc/regionalnost-bCuM9AOBNO)
- [Корзина](https://docs.astdesign.ru/s/marketpro/doc/korzina-Mh27pZA7v9)
- [Оформление заказа](https://docs.astdesign.ru/s/marketpro/doc/oformlenie-zakaza-VyvQjOQxZo)
- [Авторизация](https://docs.astdesign.ru/s/marketpro/doc/avtorizaciya-5HwEb1oDJG)
- [SEO и аналитика](https://docs.astdesign.ru/s/marketpro/doc/seo-i-analitika-d1Hw6c4YAM)
- [Уведомления](https://docs.astdesign.ru/s/marketpro/doc/uvedomleniya-SKDyjYg14J)
- [Мобильное приложение](https://docs.astdesign.ru/s/marketpro/doc/mobilnoe-prilozhenie-F5E0hT7TnN)
- [Обновление решения](https://docs.astdesign.ru/s/marketpro/doc/obnovlenie-resheniya-RRRgtxV5uH)
- [Для разработчика](https://docs.astdesign.ru/s/marketpro/doc/dlya-razrabotchika-WJePeJCmpy)
- [Интеграции](https://docs.astdesign.ru/s/marketpro/doc/integracii-D3DqjYOZYm)
- [Что делать, если что-то не работает](https://docs.astdesign.ru/s/marketpro/doc/chto-delat-esli-chto-to-ne-rabotaet-Q8L8sTVJF8)