Цвет

В интерфейсе мы используем цвет для передачи смысла и не используем его для оформления. Цвет — это инструмент управления вниманием пользователя: он помогает выделять главное, а не отвлекать от того, что важно.

Каждый цвет в интерфейсах Контура решает определенную задачу:

• Черный, белый, и оттенки серого — рабочие цвета для вывода и структурирования информации на экране.
• Смысловые цвета: зеленый, желтый, красный — привлекают внимание и помогают быстрее считывать информацию с экрана.
• Фирменный цвет — помогает сервисам Контура отличаться друг от друга, а пользователю понимать, куда он попал.

Примеры раскладок цветов в интерфейсах Контура

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

Мы используем «чистый» серый цвет. Он выглядит нейтрально и сочетается с остальными цветами в интерфейсе.

В большинстве сервисов Контура область контента — это белый лист с тенью, разделяющей его от белого фона страницы.

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

Для фона мы используем три цвета:

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

Цвет разделительной линии #E5E5E5. Чтобы линия была контрастной и приобретала оттенок фона на котором находится — используйте прозрачность 10% черного #000.

Линия используется:

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

В качестве базового «черного» цвета для текста, используйте #222 или 80% черного.

Для отображения вспомогательной информации используйте 2 оттенка:

• Основной — цвет для набора основного текста, текста в активных контролах, текста в полях ввода, надписей и иконок на кнопках.
• Дополнительный — для подписей, комментариев, заголовков таблиц.
• Неактивный — для текста в заблокированных контролах, ватермарков и вспомогательных иконок. Например, лупа в поле поиска, стрелка в выпадашке.

На темном фоне набирайте текст белым цветом #FFF. Для дополнительного и неактивного текста используйте прозрачность, прозрачный белый текст приобретет оттенок фона, на котором расположен:

В сервисах Контура стандартный цвет ссылок — синий. Этим же цветом можно окрашивать элементы интерфейса с которыми можно взаимодействовать.

Иногда фирменный цвет сервиса можно использовать вместо стандартного цвета ссылок. Для этого фирменный цвет:

• не должен быть похож на красный, зеленый и оранжевый, чтобы не нести дополнительный смысл;
• должен быть насыщенным: контрастным фону и тексту.

В этом случае фирменный цвет надо использовать везде, где использовался цвет ссылок, например, в подсветке элемента раскрывающегося списка.

Зеленый и красный цвета зарезервированы для обозначения положительного и негативного контекста.

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

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

Чтобы привлечь внимание пользователя к важной информации, касающейся его работы в интерфейсе, используйте желто-оранжевый цвет.

Акцентный цвет используется:

• для подсветки только что добавленной или изменившейся строки;
• в оповещениях о технических работах;
• при необходимости оплаты;
• в предупреждениях о возможной ошибке;
• в бейджах.

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

Фирменный цвет в меню Бухгалтерии

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

Здесь собраны все цвета, используемые в дизайне интерфейсов Контура. Нажмите на цвет, чтобы скопировать его код или подключите библиотеку стилей к своейму макету.