Цвета

Соотношение цветов

Макеты в коммуникациях примерно на 85% состоят из синего, из оранжевого — на 15%. Оранжевый работает акцентом: кнопкой, подложкой под текст или небольшим пятном.

Основные цвета

Для коммуникаций есть три основных цвета:

Дополнительные цвета

Ими разбавляют строгость основной палитры. У каждой группы шесть ступеней, пантоны размечены у 500-х.

Каким бывает фон макета

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

• синяя пара: marketing 800 #0656FE и brand 500 #0C73FE
• светлая пара: ink 25 #F7F8F9 и ink 50 #F2F4F5
• тёмная пара: ink 800 #0C131D и чёрный #000000
• светлый соло: ink 25 #F7F8F9 — без шейпов
• тёмный соло: ink 800 #0C131D — без шейпов
• фотография на весь макет — тогда цвета фона нет вовсе

Формат решает, что в паре будет фоном, а что шейпом. На квадрате шейпа видно больше: фон 800, шейп 500. На прямоугольнике больше фона: фон 500, шейп 800. Паттерн всегда идёт фоном 800 с шейпами 500.

Важное про сочетания цветов

Есть два правила для коммуникаций вне Сала, если они на синем брендовом фоне:

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

Четыре цвета — база, на которой строятся интерфейсы и визуал бренда:

В интерфейсах мы стараемся мыслить цветовыми пятнами и учитывать соотношение цветов на экране. Серый и белый используем для фона и карточек, тёмный Ink 800 — для текста и небольших акцентных элементов, синий — как основной интерактивный цвет и когда хочется добавить бренда. Но с акцентами не стоит борщить, их не должно быть много.

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

Учитывай насыщенность цвета, когда подбираешь цвет надписей поверх него.

Когда сочетаешь дополнительные цвета, лучше брать на один носитель один тон в разных оттенках. С контрастными парами будь аккуратнее.

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

Что и чем красить

Мы красим примерно так:

В продукте

Дополнительные цвета разбавляют базовую цветовую композицию:

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

В продукте у нас есть свой набор цветов для тёмной темы: они чуть ярче и менее насыщенные, чем в светлой, потому что в темноте цвет — это свет.

Акцент или информер

В тёмной теме акценты точно такие же светлые, как и в светлой. Семантические пары с названием accent это учитывают:

Но иногда нужен не акцент, а эмоционально окрашенная информация. Для таких случаев мы используем пары card_info:

Но таких наложений поверх серого стараемся избегать — получается грязновато:

Серый ink — не акцентная группа: он для текста, фонов и фикс-схем. Лестница у него своя, в ней есть 150 и 400, которых нет у цветных, и нет 1000.

Серо-синий и графит

Две серые группы, помимо ink. Серо-синий уходит в синеву, графит — почти чёрный, и лестница у него своя: после 50 сразу 300 и дальше сотнями до 900.

Прозрачные

Белым и тёмным с прозрачностью собирают подложки поверх чего угодно. Здесь они стоят на подложке, иначе прозрачного не видно. У тёмных каждая ступень своего оттенка — это не один чёрный с разной прозрачностью. Строка копируется целиком.

Лестница ступеней

У цветной группы семь ступеней: 25, 50, 100, 300, 500, 800, 1000. Ступень 25 есть только у синего и у серого.

Контраст считается позициями, а не номерами

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

• оранжевый 50 фоном и оранжевый 300 плашкой — можно, разрыв в две позиции;
• оранжевый 100 и оранжевый 300 — нельзя, они соседние;
• плашка 300 и текст 800 — можно.

Исключение — пары фон и шейпы: светлая 25 с 50 и тёмная 800 с чёрным нарочно тонкие, там соседство ступеней допустимо. Правило про две позиции — для пары «плашка и текст на ней».

Стикеры — только 300

Стикер красится в 300-ю ступень стикерной группы. Стикерных групп восемь: синий, оранжевый, зелёный, красный, жёлтый, фиолетовый, розовый и голубой. Серый в этот список не входит.

• Все стикеры одного макета — разных цветов, без повторов;
• белая обводка стикера неприкосновенна, её цвет не меняем;
• родные цвета рисунка не оставляем — стикер всегда перекрашивается;
• стикеры со смыслом (предупреждение, запрет, разрешение, галочка) остаются в своих цветах.

Мелочи, которые легко забыть

• Цвет иконки всегда равен цвету текста её строки;
• украшение у слова красится в цвет текста этого слова, на тёмном фоне — в белый;
• линии и глазья не перекрашиваются вообще, они живут в цветах своих компонентов.