СУПЕРКАССА
Фирменный стиль
Основные графические и цветовые константы, их комбинации, а также правила оформления объектов-носителей фирменного стиля
Логотип
Графическая часть логотипа состоит из латинского написания «SUPERKASSA». Логотип имеет особенности использования на светлом и тёмном фоне.
Логотип на тёмном фоне
Полноцветное использование

Дополнительный синий hex #49A8FF
Акцентный красный hex #FF2F52
Логотип на светлом фоне
Полноцветное использование

Синий hex #056bcd
Акцентный красный hex #FF2F52
Логотип на цветных фонах
Используется одноцветный, белый логотип
Логотип на изображениях
Используется одноцветный, белый логотип.

Важно, чтобы логотип был контрастным на фоне и считывался хорошо!
Логотип в физическом воплощении
Для вывесок, объёмных букв, сувенирной продукции допускается изготовление логотипа из дерева, серого или зеркального пластика, картона и других материалов. А также гравировка лазером на металле, стекле, пластике

Важно, чтобы логотип был контрастным на фоне и считывался хорошо!
Кириллическая версия логотипа
Подчиняется всем правилам, изложенным для оформления латинской версии логотипа.
Охранное поле логотипа
Не нужно размещать логотип близко к краю макета или очень близко к другим объектам. Ниже — пример минимального расстояния.
Что не стоит делать с логотипом?
Некоторые из «оформительских приёмов» могут существенно ухудшить восприятие логотипа, поэтому они категорически запрещены к использованию.
❌ Не поворачивайте логотип!
Исключением могут быть изображения, где повёрнут сам носитель логотипа
❌ Не изменяйте цвета логотипа!
Придерживайтесь основной схемы использования
❌ Не добавляйте тени!
Плохой приём, создающий визуальную грязь и шум
❌ Не используйте низкий контраст!
Придерживайтесь указанных цветовых схем и здравого смысла.
Проверить контраст можно инструментом Able — Friction free accessibility
Сокращенная версия логотипа
Сокращенная версия может использоваться как иконка для сторов, юзерпик или fav-иконка.
Правила использования сокращенной версии логотипа такие же, как и у основной.
Латинский вариант
На белом фоне
На темном фоне
На градиенте
На изображении
Кириллический вариант
На белом фоне
На темном фоне
На градиенте
На изображении
Основные цвета
Основной Тёмный
Используется как основной фон и для написания текста на светлых фонах.
Название в проекте — colorDark
…
hex #191d3d
rgba (25, 29, 61, 1)
Основной Синий
Используется для активных элементов на светлом фоне в интерфейсе — кнопки, ссылки и всё то, на что можно нажать.
Название в проекте — colorPrimary
…
hex #056bcd
rgba (5, 107, 205, 1)
Дополнительный Синий
Используется для активных элементов на тёмном фоне в интерфейсе — кнопки, ссылки и всё то, на что можно нажать.
Название в проекте — colorSecondary
…
hex #49A8FF
rgba (73, 168, 255, 1)
Акцентный Красный
Введён в основную палитру в качестве поддерживающего цвета для «красной» части логотипа. Используется в проекте, как цвет главной кнопки поиска, а также при выводе ошибок в интерфейсе.
Название в проекте — colorBrand
…
hex #FF2F52
rgba (230, 8, 45, 1)
Основной Светлый
Используется в проекте в качестве основного фона.
Название в проекте — colorLight
…
hex #D6E5F5
rgba (214, 229, 245, 1)
Белый
Используется в качестве самостоятельного фона, а также для фона элементов интерфейса: полей ввода, карточек услуг и уведомлений.
Название в проекте — superWhite
…
hex #FFFFFF
rgba (255, 255, 255, 1)
Дополнительная палитра
Варианты основного тёмного цвета для вспомогательных текстов и графики
dark 64
rgba(0, 8, 66, 0.64)
dark 40
rgba(0, 8, 66, 0.40)
dark 16
rgba(0, 8, 66, 0.16)
dark 8
rgba(0, 8, 66, 0.08)
Градиенты для Технологий Суперкассы и иллюстраций
Основной градиент
linear-gradient(135deg, #FF2F52 0%, #43A2FA 100%)
Сцепка Билетов
linear-gradient(135deg, #0D47A1 0%, #8125F6 100%)
Микс Тарифов
linear-gradient(135deg, #CB69D2 0%, #F3943C 100%)
Системные цвета в интерфейсе
Зелёный
Для «Персонального обслуживания»
hex #088D8D
rgba(8, 141, 141, 1)
Синий
Для активных состояний элементов
hex #0D47A1
rgba(13, 71, 161, 1)
Оранжевый
Для ошибок и важных уведомлений
#FF3E01
rgba (255, 62, 1, 1)
Типографика
Основной шрифт Суперкассы — Inter

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

Скачать Inter
Основные правила работы с типографикой
✅ Соблюдаем контраст
Заголовки должны быть крупнее основного текста
❌ Не пишем текст капсом
Исключением могут быть лишь некоторые элементы интерфейса
✅ Используем типограф Лебедева
Про основные правила можно почитать «Ководстве»
Сам «Типограф» доступен здесь
Реклама и PR
Деловая документация