Цвет

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

В основном сервисы Контура состоят из элементов в оттенках серого. Они формируют структуру интерфейса и задают иерархию.

Оттенки продуктовых цветов создают визуальные акценты, которые помогают отличать сервисы друг от друга и привлекать внимание пользователя.

А статусные цвета: красный, зелёный и жёлтый — дают понимание состояния сущностей в интерфейсе.

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

Цвета продукта помогают пользователю узнавать сервис и отличать его от других в рамках экосистемы.

Поверхности — это крупные интерфейсные области, на которых располагается контент. Они неинтерактивны и являются фонами.

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

Нижний уровень — это фон приложения. Он предназначен для расположения базовых поверхностей в виде единой области или островов, но также на нём может лежать и контент.

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

Приподнятые поверхности: раскрывающиеся списки, тултипы, модальные окна и сайдпейджи — располагаются выше основного контента.

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

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

Тёмная тема — это цветовая схема, в которой фоны в сервисе становятся тёмными, а тексты и другие элементы интерфейса светлыми. Она имеет свои особенности устройства и построения интерфейса.

Подробнее — в гайде «Тёмная тема».

Цвет может задавать разные семантики объектов и определять функцию, которую выполняют элементы интерфейса.

Элементы в оттенках серого — нейтральные. В них не заложен дополнительный смысл. Они используются для выстраивания иерархии элементов.

Жёлтые элементы предупреждают о возможной ошибке или о предстоящей оплате.

Красные элементы сообщают об ошибках, негативном, деструктивном или опасном характере действия.

Зелёные элементы сообщают об успешных и позитивных состояниях.

Элементы, которые выделяются относительно других. Они выполняют роль интерфейсного акцента. Например, основные контролы на странице. Может быть одним из двух вариантов: в цвет продукта или в оттенках серого.

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

Неправильно

Элементы, которые формируют стиль, всегда покрашены в цвета продукта вне зависимости от «опасности» цвета. Например: логотип, продуктовые баннеры, иконки, иллюстрации или бейджики.

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

В этом случае цвет помогает отличать однородные элементы между собой.

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

Более массивные элементы привлекают больше внимания, а более лёгкие становятся второстепенными.

Выстраивайте иерархию элементов на странице с помощью визуальной массы разумно. Элементы не должны спорить друг с другом.

На контрастность объектов влияет то, на каком фоне они находятся. Элементы должны быть заметны и различимы, но критически важно следить за уровнем контрастности для текстов и иконок, которые должны оставаться читаемыми.

Контрастность объекта к фону мы определяем по алгоритму APCA.

Большая часть интерфейса — это элементы на фоне, свойственном выбранной теме.

Элементы на мощном контрастном фоне инвертируются, чтобы оставаться читаемыми.

Некоторые элементы при изменении темы не меняют свой цвет, поэтому и контент на них не должен меняться.

Например, текст на дополнительном продуктовом фоне.

Контент на продуктовом фоне должен быть достаточно контрастным и читаемым. Чтобы добиться этого, нужно посмотреть на уровень контрастности текста к фону по стандарту APCA и выбрать более контрастный: белый или чёрный.

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

Например, чёрный контент на мятном фоне контрастнее, но выглядит грязнее.

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

Часто интерактивность показывают через изменение цвета элемента.

Основные состояния интерактивности — это покой, наведение, нажатие и фокус.

В светлой и тёмной теме изменение цвета при интерактивности устроено по-разному. По наведению в светлой теме элемент становится темнее, а в тёмной теме — светлее. Это нужно, чтобы элемент становился более заметным.

Нажатие в обеих темах приглушает элемент, «вдавливая» его в поверхность.

Элемент может быть заблокирован, то есть его интерактивность отключена.

Заблокированный элемент должен быть более бледный, чтобы была заметна невозможность взаимодействия с ним и без наведения.

В состоянии покоя негативные действия — нейтральные, а по наведению выделяются, как негативные.

Как исключение, в раскрывающихся списках негативное действие можно выделять и в состоянии покоя.

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

На цветном фоне из-за полупрозрачности текст немного тонируется в цвет фона, что сохраняет читаемость и чистоту цвета.

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

Например, крестик в модальном окне — это читаемый символ. У него важно сохранять уровень контрастности, как у текста.

В контролах иконки и текст покрашены одинаково, чтобы сохранять визуальную консистентность.

Иконки в статусах должны быть заметным пятном. Делайте их более яркими, а текст не красьте.

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

Библиотека цветов для покраски интерфейсов состоит из двух частей: первичных палитр и семантических токенов. Первичные палитры цветов генерируются алгоритмом автоматически с помощью цветового пространства OKLCH.

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

Документация для разработчиков

Библиотека для дизайнеров