Цвет
В интерфейсе мы используем цвет для передачи смысла и не используем его для оформления. Цвет — это инструмент управления вниманием пользователя: он помогает выделять главное, а не отвлекать от того, что важно.
«Мне нравится, когда цвет это оружие, которое достают из ножен только в крайнем случае, в ситуации смертельной угрозы или чтобы нанести зрителю coup de grâce»
© Олег Пащенко
Каждый цвет в интерфейсах Контура решает определенную задачу:
- Черный, белый, и оттенки серого — рабочие цвета для вывода и структурирования информации на экране.
- Смысловые цвета: зеленый, желтый, красный — привлекают внимание и помогают быстрее считывать информацию с экрана.
- Фирменный цвет — помогает сервисам Контура отличаться друг от друга, а пользователю понимать, куда он попал.

Примеры раскладок цветов в интерфейсах Контура
Этот гайдлайн описывает все цвета, которые можно использовать в интерфейсах Контура. Использование других цветов — избыточно и усложняет разработку.
Черный, белый, серый
Мы используем «чистый» серый цвет. Он выглядит нейтрально и сочетается с остальными цветами в интерфейсе.
Фон
В большинстве сервисов Контура область контента — это белый лист на сером фоне. Это помогает сфокусировать внимание и снижает нагрузку на глаза.
Серый фон делит контент на смысловые блоки и группирует элементы на странице.

Для фона мы используем три цвета:
Важно, чтобы граница между двумя фонами была видна даже на плохом мониторе. Если граница фонов имеет слабый контраст и ее пропадание на плохом мониторе может нарушить структуру страницы, используйте разделительную линию или тень.
«Плохой монитор» — так дизайнеры Контура называют монитор с дешевой некачественной матрицей или просто плохо настроенным изображением. Такой монитор плохо передает оттенки. Светлые оттенки сливаются в белый, а темные — в черный.
Мы стараемся делать свои интерфейсы доступными даже на плохих мониторах.

Линия
Цвет разделительной линии #E5E5E5. Чтобы линия была контрастной и приобретала оттенок фона на котором находится — используйте прозрачность 10% черного #000.
Линия используется:
- для разделения смысловых частей на экране;
- для усиления контраста на границе двух фонов;
- в качестве однопиксельной тени.
Текст
В качестве базового «черного» цвета для текста, используйте #333 или 80% черного.
Цвет #333 на фоне #FFF дает контраст 12,6:1 по стандарту Web Content Accessibility Guidelines 2.0
Этот стандарт содержит рекомендации, как сделать веб-контент доступным для широкого круга пользователей, в том числе для людей с ограниченными возможностями. Согласно стандарта, минимальный контраст фона и текста должен быть 4,5:1.
Для отображения вспомогательной информации используйте 2 оттенка:
- Основной — цвет для набора основного текста, текста в активных контролах, текста в полях ввода, надписей и иконок на кнопках.
- Дополнительный — для подписей, комментариев, заголовков таблиц.
- Неактивный — для текста в заблокированных контролах, ватермарков и вспомогательных иконок. Например, лупа в поле поиска, стрелка в выпадашке.
На темном фоне набирайте текст белым цветом #FFF. Для дополнительного и неактивного текста используйте прозрачность, прозрачный белый текст приобретет оттенок фона, на котором расположен:
Смысловые цвета
Цвет ссылок
В сервисах Контура стандартный цвет ссылок — синий. Этим же цветом можно окрашивать элементы интерфейса с которыми можно взаимодействовать.

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

Фирменный цвет ссылок в Диадоке
Зеленый и красный
Зеленый и красный цвета зарезервированы для обозначения положительного и негативного контекста.
Зеленый — для сообщений об успехе, удачном завершении, красный — для сообщений об ошибке, невозможности продолжить, неудачном завершении.

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

Фирменные цвета
У каждого сервиса Контура есть фирменный цвет. Он помогает пользователю узнавать сервис. Используйте фирменный цвет в меню и логотипе.

Фирменный цвет в меню Бухгалтерии
Фирменный цвет можно применять в качестве цвета ссылок и кликабельных элементов. Для этого цвет должен удовлетворять условиям описанным в разделе про цвет ссылок.
Палитра цветов
Здесь собраны все цвета, используемые в дизайне интерфейсов Контура. Нажмите на цвет, чтобы скопировать его код или импортируйте файлы палитры в свою программу для дизайна.
Файлы для импорта цветов в Sketch и другие программы находятся в общей папке.
Черный, белый и серый
Смысловые цвета
Фирменные цвета
Контур, УЦ, Школа
Экстерн, Норматив
Фокус, Декларант
Диадок
Эксперт
Эльба, КОПФ, Ритейл, Закупки
Бухгалтерия, Реестро