Logo
  • Бренд
  • Визуальный язык
    • Основы визуального языка
    • Палитра
    • Типографика
    • Иконографика
    • Структура и сетка
    • Эффекты
    • Анимации
  • Компоненты
    • Токены
    • Компоненты
  • Редполитика
    • О редполитике
    • Пишем чисто
    • Пишем просто
    • Пишем компетентно
    • Пишем для человека
    • Интерфейсные тексты
    • Глоссарий
  • Документация
    • Доступность
  • Figma
    • Принципы
    • Начало работы
    • Команды и проекты
    • Инструменты
    • Процесс
    • Дизайн-ревью
  • Благодарности
Бренд
Бренд — это цифровая личность наших продуктов. Мы соблюдаем его константы — логотип и палитру — и свободно работаем с визуальным языком в коммуникациях, рекламных кампаниях и спецпроектах.
Фирменные цвета
Основная палитра строится вокруг нейтральной гаммы, основного синего цвета VK и акцентного зеленого.
Цвет
HEX
CMYK
Accent
#0077FF
100 30 0 0
Lime
#B8FC75
22 0 98 2
Sky
#07E5F9
45 0 5 0
Pink
#FF3985
0 100 10 0
Black
#2C2D2E
70 60 60 60
Логотип
Логотип — это символ нашего подхода к решению проблем пользователей. Он простой, дружелюбный, понятный, современный.
  • Современный. Цветовая палитра и шрифтовое решение, простота и геометричность знаков, особенности использования в логотипах продуктов — всё это в духе времени.
  • Органичный. Логотип хорошо работает во всех средах: веб-сервисах и мобильных приложениях, промоматериалах и соцсетях, печатной продукции и физическом пространстве.
  • Практичный. Мы предусмотрели большую гибкость использования логотипа: адаптивные названия продуктов, упрощённые цветовые схемы и другие полезные решения.

Скачать логотипы

Построение логотипа
За основу отступов и построения логотипа взят диаметр внутренней окружности символа mail. Отступ от символа до текстовой части равен внутреннему диаметру @.
Мы отказались от использования плашки вокруг логотипа. Этот вариант считается устаревшим и не используется.
Охранное поле логотипа
Запрещено располагать элементы графики на охранном поле. Также охранное поле показывает минимально разрешенное расстояние расположения логотипа от края макета.
Минимальное значение охранного поля логотипа строится на диаметре внутренней окружности символа @.
Запрещенное использование логотипа
Нельзя:
• изменять цвета логотипа,
• изменять шрифтовое написание,
• менять расположение элементов логотипа,
• использовать шрифтовое написание отдельно от знака,
• использовать устаревшую версию логотипа.
Нельзя:
• искажать размеры логотипа,
• нарушать границы охранного поля,
• добавлять дескриптор,
• использовать логотип на неконтрастных фонах,
• использовать устаревшую версию логотипа на плашке.
Логотипы продуктов
Основная версия логотипа продукта состоит из знака и названия продукта. Ее используют на всех ресурсах и носителях внутри Mail. Все логотипы продуктов под брендом Mail выполняются в едином стиле.
Использовать логотип без названия продукта можно только в Почте Mail или на главной странице Mail.
Иконки сервисов
Иконки сервисов это миниатюры которые используют продукты Mail. Иконки применяются в магазинах приложений, для запуска наших продуктов, в виде favicon браузера, а также могут быть внутри продуктов для кросс переходов.
Иконки имеют единую палитру, размер и радиус закругления. Не допускается использовать рядом круглые и квадратные иконки. 
По аналогии с логотипом отступы в иконках наследуются от диаметра внутренней окружности в логотипе @. Допускается оптическая компенсация элементов внутри иконок.

Скачать иконки

При создании иконок мы руководствовались следующими принципами:
  • Упрощение
    Максимальное упрощение символов и смелая работа с формой. Мы оставляем только суть и избавляемся от лишних и устаревших деталей. 
  • Работа с метафорой
    Избавляемся от устаревших ассоциаций в графике, например, от бумажного календаря
  • Работа с формой
    В работе с формой графики и иконок мы продолжаем пластику логотипа, где линия формирует сюжет визуального символа.
Маскот продуктов Mail
Понимающий, технологичный и умный помощник, который интересно и вовлекающе расскажет про крутые технологии сета Mail и поможет упростить работу с задачами.

Байт служит проводником умных технологий  сервисов Mail, таких как ML и GPT. Марусю Байт не представляет, а ссылается на неё, так как у Маруси есть свой бренд.
Кто такой Байт?
  • Умный помощник
    Понимающий, технологичный и умный помощник, который интересно и вовлекающе расскажет про крутые технологии сета Mail и поможет упростить работу с задачами.
  • Проводник по технологиям
    Байт служит проводником умных технологий сервисов Mail, таких как ML и GPT. 
  • Не нейросеть
    Байт не ищет фото, не пишет текст и не придумывает идеи. Всё это делает нейросеть от Mail — Байт всегда об этом скажет.
Использование в коммуникациях
В промо от Mail Байт может выступать как главным героем повествования, например, рассказывать о новых фичах в блоге, так и второстепенным участником сторителлинга.
Важно
Байт никогда не используется в рекламе сторонних сервисов или продуктов внутри интерфейсов Mail.
Использование в интерфейсах
Внутри продуктов Байт встречается в промо-коммуникации, интерфейсных иллюстрациях и в качестве постоянного источника уведомлений от самого продукта. 

Список частей интерфейса где появляется Байт:
  1. Экраны загрузки приложений и сервисов
  2. Места где пользователь взаимодействует с нейросетями. Байт как помощник и проводник
  3. Всплывающие окна с новыми функциями продукта
  4. Пустые экраны