Цвет

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

«Мне нравится, когда цвет это оружие, которое достают из ножен только в крайнем случае, в ситуации смертельной угрозы или чтобы нанести зрителю coup de grâce»
© Олег Пащенко

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

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

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

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

Черный, белый, серый

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

Фон

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

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

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

#FFFFFF

0%

Белый

#F2F2F2

5%

Серый

#EBEBEB

10%

Темно-серый

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

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

Мы стараемся делать свои интерфейсы доступными даже на плохих мониторах.

Линия

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

#E5E5E5

10%

Разделительная линия

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

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

Текст

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

Цвет #222 на фоне #FFF дает контраст 15,9:1 по стандарту Web Content Accessibility Guidelines 2.0

Этот стандарт содержит рекомендации, как сделать веб-контент доступным для широкого круга пользователей, в том числе для людей с ограниченными возможностями. Согласно стандарта, минимальный контраст фона и текста должен быть 4,5:1.

Приложения для проверки контраста: Mac OS Web.

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

#222222

80%

Основной текст

#858585

50%

Дополнительный текст

#ADADAD

37%

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

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

#FFFFFF

100%

Основной текст

#FFFFFF

50%

Дополнительный текст

#FFFFFF

37%

Неактивный текст

Смысловые цвета

Цвет ссылок

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

#CDEDFF

Фон

#1F87EF

Плашка кликабельная, фокус

#1874CF

Текст, иконки

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

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

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

Зеленый и красный

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

#D7F8AE

#538A1B

#477916

#FFDDD6

Фон

#DD473B

Плашка

#CB3D35

Текст

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

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

Акцентный цвет

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

#FFE0C3

Фон

#FFA236

Плашка

#EA7324

Текст

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

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

Фирменные цвета

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

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

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

Палитра цветов

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

(чтобы получить ссылку авторизуйтесь, ссылка доступна только сотрудникам Контура).

Черный, белый и серый

#FFFFFF

0%

Фон для зоны контента

#F2F2F2

5%

Фон для блоков, боковой панели, меню второго уровня

#EBEBEB

10%

Фон сервиса, плашки лайтбокса, выбранный пункт списка

#ADADAD

37%

Неактивный текст, ватермарк, доп. иконка

#858585

50%

Дополнительный текст

#222222

80%

Текст и иконки на белом фоне

#000000

100%

Черный для прозрачности

Смысловые цвета

#CDEDFF

Фон

#1F87EF

Плашка кликабельная, фокус

#1874CF

Текст, иконки

#D7F8AE

#538A1B

#477916

#FFDDD6

#DD473B

#CB3D35

#FFE0C3

#FFA236

#EA7324

Фирменные цвета

Контур, УЦ, Школа

#F03B36

Логотип

#FFDDD6

Фон

#FFC8BF

#FFB2A9

#FF9D92

#FF887B

Основной светлый

#FF5A49

Основной цвет

#EE5042

#DD473B

Плашка

#CB3D35

Текст, плашка при наведении

#BA342E

Текст при наведении, плашка при нажатии

#A92A27

Текст при нажатии

Экстерн, Норматив

#FC7630

Логотип

#FFE0C3

Фон

#FFD1A0

#FFC17D

#FFB259

#FFA236

Основной светлый

#FF8227

Основной цвет

#EA7324

#D46421

Плашка

#BF561E

Текст, плашка при наведении

#A9471B

Текст при наведении, плашка при нажатии

#943817

Текст при нажатии

Фокус, Декларант

#26AD50

Логотип

#C7F9CC

Фон

#A7EEB3

#87E39A

#67D881

#46CD68

Основной светлый

#26AD50

Основной цвет

#23A14A

#209644

Плашка

#1C8A3F

Текст, плашка при наведении

#197F39

Текст при наведении, плашка при нажатии

#167333

Текст при нажатии

Диадок

#00BEA2

Логотип

#C6F5EC

Фон

#A8EEE2

#8BE7D8

#6DDFCD

#4FD8C3

Основной светлый

#00C5A8

Основной цвет

#00B59A

#00A58D

Плашка

#00957F

Текст, плашка при наведении

#008571

Текст при наведении, плашка при нажатии

#007564

Текст при нажатии

Эксперт

#2291FF

Логотип

#CDEDFF

Фон

#AEDDFF

#8FCDFF

#70BDFF

#51ADFF

Основной светлый

#2291FF

Основной цвет

#1F87EF

#1C7EDF

Плашка

#1874CF

Текст, плашка при наведении

#156ABE

Текст при наведении, плашка при нажатии

#1261AE

Текст при нажатии

Эльба, КОПФ, Ритейл, Закупки

#366AF3

Логотип

#DDE6FF

Фон

#BECFFF

#9FB8FF

#80A1FF

#618AFF

Основной светлый

#366AF3

Основной цвет

#3365E8

#3060DC

Плашка

#2E5AD1

Текст, плашка при наведении

#2B55C5

Текст при наведении, плашка при нажатии

#2850BA

Текст при нажатии

Бухгалтерия, Реестро

#B750D1

Логотип

#F7D7FF

Фон

#EABDF6

#DEA3EC

#D189E3

#C56FDA

Основной светлый

#B750D1

Основной цвет

#AA49C3

#9E43B5

Плашка

#913CA6

Текст, плашка при наведении

#843698

Текст при наведении, плашка при нажатии

#782F8A

Текст при нажатии