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

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

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

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

Важно, чтобы логотип был контрастным на фоне и считывался хорошо!
Охранное поле логотипа
Не нужно размещать логотип близко к краю макета или очень близко к другим объектам. Ниже — пример минимального расстояния.
Что не стоит делать с логотипом?
Некоторые из «оформительских приёмов» могут существенно ухудшить восприятие логотипа, поэтому они категорически запрещены к использованию.
❌ Не поворачивайте логотип!
Исключением могут быть изображения, где повёрнут сам носитель логотипа
❌ Не изменяйте цвета логотипа!
Придерживайтесь основной схемы использования
❌ Не добавляйте тени!
Плохой приём, создающий визуальную грязь и шум
❌ Не используйте низкий контраст!
Придерживайтесь указанных цветовых схем и здравого смысла.
Проверить контраст можно инструментом Able — Friction free accessibility
Сокращенная версия логотипа
В качестве сокращенной версии используется аббревиатура SK.
Сокращенная версия может использоваться как иконка для сторов, юзерпик или 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
Деловая документация