logo

Палитра

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

Палитра бренда

Палитра бренда помогает в узнаваемости продуктов Mail. Она сохраняет преемственность в приёмах визуального языка и ассоциирует продукт с брендом компании.
Основная палитра строиться вокруг нейтральной гаммы, основного синего цвета VK и акцентного зеленого.
Дополнительная палитра используется для маскота Mail Байта. На банерах, всплывающих подсказках и других фонах Байта используется специально подобранный цвет.
В нейтральной палитре мы стараемся отказаться от чистых черного и белого цветов в пользу гаммы серого и графитового.

Палитра внешних коммуникаций

Основной цвет — фирменный синий. Акцентный зеленый занимает не более 40% палитры. Для имиджевых и охватных проектов стоит использовать эту пару.
Акцентный зеленый цвет не используется без синего.
Основную часть дополнительной палитры занимает нейтральная гамма, к которой в добавляются второстепенные акцентные цвета в небольших количествах.

Палитра внутренних коммуникаций

Акцентные цвета не могут занимать более 30% палитры коммуникации и используются только для второстепенных элементов.
Дополнительную палитру можно использовать на баннерах, креативах, SMM-сообществах и презентациях.
Во внешних рекламных кампаниях дополнительные цвета не участвуют.

Палитра Байта

Для коммуникации с пользователем для маскота Mail Байта используется специально подобранный фон. Этот цвет используется как фон на котором размещен Байт. Может быть фоном баннера или всплывающего окна.
При наличии технической возможности допускается использование эффекта блюра для фона Байта. Токен с прозрачностью добавлен в общий репозиторий.

Палитра для интерфейсов

Все цвета которые задействованы внутри наших интерефейсов занесены в общий репозиторий с токенами. Названия токенов синхронизированы с названиями VKUI. Это позволяет использовать одну компонентную базу регулируя токенами цвет.
VKUI Tokens documentation
Токены для продуктов VK
Мы разделяем цвета на группы для удобной организации и поиска.
Text – цвета которые используются для текста
Icon – цвета для иконок
Background – цвета для фонов и оттенки цветов
Stroke – обводка элементов и контролов
Pallete – палитра цветов которые не относятся к другим группам
Иногда цвета в группах повторяются. Это связано с перекраской компонентов в разных цветовых темах. Наша дизайн–система изначально поддерживает светлую и темную интерфейсные темы, поэтому количество базовых токенов большое.
Все цвета в зависимости от предназначения проверены на контрастность. Для текста и небольших элементов мы стараемся поддерживать контрастность на уровне АА. Вы можете заметить различия у акцентного цвета текста и фона, это как раз связано с настройками контрастности.
Убедитесь, что коэффициент контрастности текста не ниже 3.0. Чем крупнее кегль текста, тем ниже коэффициент контрастности. Исключение — логотипы или декоративные элементы.