Брендбук мессенджера МАКС

Логотипы в SVG и PNG, фирменные цвета с HEX-кодами, иконки приложения, UI-компоненты и дизайн-токены — всё для дизайнеров и разработчиков

Логотип МАКС — скачать SVG, PNG, вектор

Официальные логотипы мессенджера МАКС (MAX) в различных форматах. Доступны белый, чёрный (монохромный) и цветной варианты. Все логотипы на прозрачном фоне.

Логотип (белый) мессенджера МАКС

Логотип (белый)

Основной логотип мессенджера МАКС на прозрачном фоне. Белая версия — для тёмных фонов.

Логотип (чёрный) мессенджера МАКС

Логотип (чёрный)

Монохромный чёрный логотип МАКС для светлых фонов, печатных материалов и документов.

Иконка приложения мессенджера МАКС

Иконка приложения

Официальная иконка мессенджера МАКС с градиентом. Используется как значок приложения на всех платформах.

💡 Совет: Для использования на сайте рекомендуем SVG-формат — он масштабируется без потери качества и весит меньше PNG.

Иконки и логотипы МАКС — все размеры

Официальные иконки и значки мессенджера МАКС. Выберите нужный стиль и скачайте в подходящем размере (PNG или WebP).

Иконка МАКС 16×16 пикселей
16×16
Иконка МАКС 24×24 пикселей
24×24
Иконка МАКС 32×32 пикселей
32×32
Иконка МАКС 48×48 пикселей
48×48
Иконка МАКС 64×64 пикселей
64×64
Иконка МАКС 128×128 пикселей
128×128
Иконка МАКС 256×256 пикселей
256×256
Иконка МАКС 512×512 пикселей
512×512
Иконка МАКС 1024×1024 пикселей
1024×1024
🔗 Favicon для вашего сайта: Скачайте официальный значок МАКС в удобном для вас формате.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Фирменные цвета мессенджера МАКС — HEX, RGB коды

Полная палитра фирменных цветов МАКС (MAX) с кодами HEX и RGB для копирования. Кликните на код или имя переменной для копирования.

Accent Blue --accent-themed
#007AFF
rgb(0, 122, 255)
hsl(214, 100%, 50%)
cmyk(100%, 52%, 0%, 0%)

Основной акцентный цвет интерфейса мессенджера МАКС. Используется для кнопок, ссылок и активных элементов.

Accent Red --accent-red
#FF303C
rgb(255, 48, 60)
hsl(357, 100%, 59%)
cmyk(0%, 81%, 76%, 0%)

Цвет уведомлений, ошибок и деструктивных действий. Фирменный красный МАКС.

Positive Green --background-accent-positive
#1ABE43
rgb(26, 190, 67)
hsl(135, 76%, 42%)
cmyk(86%, 0%, 65%, 25%)

Цвет успешных действий, подтверждений и статусов «онлайн» в МАКС.

Attention Orange --background-accent-attention-primary
#FF9315
rgb(255, 147, 21)
hsl(32, 100%, 54%)
cmyk(0%, 42%, 92%, 0%)

Цвет предупреждений и привлечения внимания пользователя.

Neutral Dark --background-accent-neutral
#0D0D0D
rgb(13, 13, 13)
hsl(0, 0%, 5%)
cmyk(0%, 0%, 0%, 95%)

Нейтральный тёмный цвет для текста и UI-элементов.

Surface Ground --background-surface-ground
#EDEEF2
rgb(237, 238, 242)
hsl(228, 12%, 94%)
cmyk(2%, 2%, 0%, 5%)

Фоновый цвет основной поверхности приложения МАКС (светлая тема).

Surface Card --background-surface-card
#FFFFFF
rgb(255, 255, 255)
hsl(0, 0%, 100%)
cmyk(0%, 0%, 0%, 0%)

Цвет фона карточек и панелей в МАКС.

Gradient Pink→Orange --gradient-red
linear-gradient(153deg, #FF48B6 0.77%, #FF8A35 93.03%)

Фирменный градиент МАКС. Используется в баннерах и промо-материалах.

Шрифт и типографика мессенджера МАКС

МАКС использует системный шрифт для нативного отображения на всех платформах. Это обеспечивает максимальную скорость загрузки и привычный вид для пользователей.

Крупный заголовок (Display)
МАКС мессенджер
Применение: Заголовки на промо-страницах и главных экранах
Шрифт в Figma: SF Pro Display / Inter
Начертание: Bold (700)
Размер: 32px
Высота строки: 38px (1.2)
Межбуквенное: -2% (-0.02em)
Заголовок второго уровня (H2)
Заголовок второго уровня
Применение: Заголовки основных разделов, карточек и экранов настроек
Шрифт в Figma: SF Pro Text / Inter
Начертание: SemiBold (600)
Размер: 24px
Высота строки: 31px (1.3)
Межбуквенное: 0px
Подзаголовок (Body Large)
Подзаголовок / Body Large
Применение: Подзаголовки блоков, выделенный текст и важные элементы
Шрифт в Figma: SF Pro Text / Inter
Начертание: Medium (500)
Размер: 20px
Высота строки: 28px (1.4)
Межбуквенное: 0px
Обычный текст (Body Medium)
Обычный текст — Aa Бб Вв Гг 0123456789
Применение: Основной шрифт для сообщений в чатах, описаний и статей
Шрифт в Figma: SF Pro Text / Inter
Начертание: Regular (400)
Размер: 16px
Высота строки: 24px (1.5)
Межбуквенное: 0px
Мелкий текст (Caption)
Мелкий текст / Caption
Применение: Сервисные подписи, время отправки сообщений, статус доставки
Шрифт в Figma: SF Pro Text / Inter
Начертание: Regular (400)
Размер: 14px
Высота строки: 20px (1.4)
Межбуквенное: 0px

Размеры типографики (Design Tokens)

Кликните на значение размера (rem или px), чтобы скопировать CSS-код значения.

ТокенРазмер (rem)Размер (px)Пример
--height-display2rem32pxАа
--height-headline-large1.75rem28pxАа
--height-headline-medium1.5rem24pxАа
--height-title-large1.25rem20pxАа
--height-body-large1.25rem20pxАа
--height-body-medium1.25rem20pxАа
--height-body-small1rem16pxАа
--height-label-large0.875rem14pxАа

UI Kit мессенджера МАКС — компоненты дизайн-системы

Официальные UI-компоненты из библиотеки @maxhub/max-ui. Установите пакет через npm и используйте в React-проектах. Интерактивная документация: dev.max.ru/ui

Установка MAX UI
npm install @maxhub/max-ui
Быстрый старт
import '@maxhub/max-ui/dist/styles.css';
import { MaxUI, Panel, Button } from "@maxhub/max-ui";

const App = () => (
  <MaxUI>
    <Panel centeredX centeredY>
      <Button>Hello world!</Button>
    </Panel>
  </MaxUI>
);

Button (Кнопка)

Основной компонент кнопки. Поддерживает акцентный (синий) и нейтральный (темный) стили.

Шрифт в Figma: SF Pro Display / Inter (14px, SemiBold 600)
Скругление (Corner Radius): 12px
Внутренние отступы: 10px 20px
Высота (Height): 40px
Цвета в Figma: Blue (#007AFF), Dark (#0D0D0D)

Input (Поле ввода)

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

Шрифт в Figma: SF Pro Text / Inter (14px, Regular 400)
Скругление (Corner Radius): 12px
Внутренние отступы: 12px 16px
Высота (Height): 44px
Граница (Stroke): 1px solid (#EDEEF2)

Switch (Переключатель)

Тумблер для включения/выключения настроек.

Размеры рамки в Figma: 52px × 32px (Скругление
Размеры ползунка: 28px × 28px (Скругление
Цвет (Active): #007AFF
Цвет (Inactive): #CCCCCC

Avatar (Аватар)

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

А
М
Г
Форма в Figma: Круг (Скругление 100%)
Стандартные размеры: 24px, 32px, 48px, 64px, 96px
Фон: Градиент #007AFF -> #0056cc
Шрифт: Bold (700)

Spinner (Загрузка)

Круговой индикатор процесса загрузки.

Размеры в Figma: 18px (Small), 28px (Medium), 40px (Large)
Толщина линии: 2px / 3px / 4px
Цвет: #007AFF (Accent Blue)

Counter (Счётчик)

Бейдж с количеством непрочитанных уведомлений.

5 99 1000+
Высота в Figma: 20px (Скругление
Фон: #FF303C (Accent Red)
Шрифт: SF Pro / Inter (11px, Bold 700, Color
Внутренние отступы: 0px 6px

SearchInput (Поиск)

Поле ввода для поиска с иконкой лупы.

Скругление (Corner Radius): 12px
Высота: 40px
Внутренние отступы: 10px 14px
Фон в Figma: #EDEEF2 (Surface Ground)
Иконка: 16px (Цвет

IconButton (Иконка-кнопка)

Круглая кнопка, содержащая только иконку.

Форма в Figma: Круг (Скругление 100%)
Размер кнопки: 40px × 40px
Размер иконки: 20px
Фон по умолчанию: #EDEEF2 (или прозрачный)

Дизайн-токены и CSS-переменные МАКС

CSS-переменные из официальной дизайн-системы MAX UI. Используйте их для создания приложений с аутентичным стилем МАКС.

Цветовые переменные (светлая тема)
:root {
  --accent-themed: rgb(0 122 255);
  --accent-red: rgb(255 48 60);
  --accent-secondary: rgb(12 13 14 / 0.52);
  --background-accent-positive: rgb(26 190 67);
  --background-accent-attention-primary: rgb(255 147 21);
  --background-accent-neutral: rgb(13 13 13);
  --background-surface-primary: rgb(255 255 255);
  --background-surface-secondary: rgb(240 240 240);
  --background-surface-ground: rgb(237 238 242);
  --background-surface-card: rgb(255 255 255);
  --background-overlay: rgb(12 13 14 / 0.32);
}
Градиенты
:root {
  --gradient-red: linear-gradient(153deg, #FF48B6 0.77%, #FF8A35 93.03%);
  --gradient-orange: linear-gradient(155deg, #FFC93D 6.6%, #FF832A 84.12%);
}
Семейство шрифтов
:root {
  --font: system-ui, -apple-system,
    BlinkMacSystemFont, "Roboto",
    "Apple Color Emoji", "Helvetica Neue",
    sans-serif;
}

Правила использования логотипа МАКС

При использовании фирменного стиля МАКС в сторонних проектах соблюдайте следующие рекомендации.

✅ Можно

  • Использовать официальные файлы логотипа
  • Размещать на контрастном фоне
  • Сохранять пропорции при масштабировании
  • Использовать в информационных и справочных материалах
  • Указывать ссылку на официальный сайт max.ru

❌ Нельзя

  • Изменять цвета, пропорции или форму логотипа
  • Добавлять эффекты (тень, свечение, наклон)
  • Использовать логотип как часть другого бренда
  • Размещать на низкоконтрастном или пёстром фоне
  • Использовать в коммерческих целях без разрешения VK

Часто задаваемые вопросы о брендбуке МАКС

Где скачать логотип мессенджера МАКС в SVG?

Скачать векторный логотип МАКС в формате SVG можно прямо на этой странице в разделе «Логотипы». Доступны белая, чёрная и цветная (иконка) версии.

Какой фирменный цвет мессенджера МАКС и его HEX код?

Основной акцентный цвет МАКС — синий #007AFF (RGB: 0, 122, 255). Красный акцент — #FF303C. Полная палитра с кодами доступна в разделе «Фирменные цвета» выше.

Как скопировать HEX код цвета МАКС?

Нажмите на карточку цвета или кнопку «Копировать» рядом с нужным HEX кодом. Код будет скопирован в буфер обмена автоматически.

Можно ли использовать логотип МАКС на своём сайте?

Логотип МАКС является зарегистрированным товарным знаком VK. Использование допускается для информационных и справочных целей с указанием правообладателя. Для коммерческого использования требуется разрешение.

На какую букву похож логотип мессенджера МАКС?

Логотип МАКС представляет собой стилизованный речевой пузырь (speech bubble) с характерным хвостиком. По форме он напоминает букву «М» (Max), что подчёркивает название мессенджера.

Где взять UI Kit мессенджера МАКС для разработки?

Официальный UI Kit доступен на GitHub: github.com/max-messenger/max-ui. Установка: npm install @maxhub/max-ui. Документация и примеры на dev.max.ru/ui.

Какой шрифт используется в мессенджере МАКС?

МАКС использует системный шрифт: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif. Это обеспечивает нативный вид на всех платформах.

Что означает логотип мессенджера МАКС?

Логотип МАКС — это стилизованный речевой пузырь с плавными контурами, символизирующий общение и коммуникацию. Градиент от голубого к фиолетовому отражает современность и технологичность продукта.