Tokin recharge

Логотип

Фирменный блок строится пропорционально высоте знака h.
Шаг сетки построения равен а=1/3h.
Защитное поле фирменного блока равно 2а.

Отступ базовой линии дескриптора от базовой линии знака равен 2а.
Дескриптор выровнен по правому краю.
Ширина дескриптора — от центральной оси буквы О до правого края.
Основная версия логотипа:
синий знак, чёрный дескриптор на белом или светло-сером фоне;
синий знак и белый дескриптор на чёрном фоне.

Монохромная версия логотипа:
чёрный знак и чёрный дескриптор на белом или светло-сером фоне;
белый знак и белый дескриптор на чёрном, фирменном синем фоне или фирменном голубом фоне.

Варианты использования

Типографика

Гарнитура Euclid Flex используется во всех коммуникационных материалах компании. В случае когда применение фирменной гарнитуры невозможно, используются шрифты семейства Verdana.

Шрифт

Общепринятое обозначение заголовков — H + цифра. Чем старше заголовок, тем меньше цифра. Так, заголовок H0 всегда находится в начале страницы, а заголовки младшего уровня (H1, H2, H3...) — внутри материала.

Задача заголовков — структурировать материал на странице. Так он быстрее считывается, в нем легче ориентироваться и искать информацию.

Сетка стилей

Основной размер шрифта на десктопе — 20 пунктов, на смартфоне — 18. Текст такого размера без усилий считывается даже людьми, у которых проблемы со зрением.

Для навигации используется 14 размер текста. Он хорошо читаем в коротких текстах и не отвлекает от блока с основной информацией.

Для необязательных к прочтению текстов допустимо использовать шрифт размером не менее 12 пунктов.

Блок основного текста — не компонент. Поэтому необходимо закладывать отступ снизу в 20px самостоятельно.

Основной текст

Для оформления акцидентных надписей, сувенирной продукции, заголовков, допустимо использовать альтернативные стилистические сеты:
стилистический сет 5;
стилистический сет 10.

Специальные глифы

Альтернативные символы выделяются также цветом: синим на белом и чёрном фоне, белым\чёрным — на цветном.
Допускается использование максимум 2 альтернативных символа на 1 слово. Предпочтительно выделять альтернативными символами 1 слово в предложении или фразе.

Цвет

Цвет в дизайн-системе — важнейший инструмент. У каждого цвета свои функции. От них нельзя отступать, чтобы сохранить целостность бренда.
Основные цвета в дизайн системе: чёрный, белый, оттенки серого и синий. Остальные цвета используются редко и обращают внимание на важную информацию, например, на ошибку или предупреждение.

Основные цвета

Заголовки
#000000
Основной текст
#333333
#5e5e5e
#f2f2f2
#003dfc
#0fc1ea
#ff4447
Голубой
Цвет подсказки
Красный
Светло-серая заливка
Синий
Серая заливка
#d6d6d6
Белый
#ffffff
Черный цвет используется для заголовков. Менее контрастный черный — для основного текста, оттенки серого — для подсказок, рамок поля и разделительных полос. Белый, серый и светло-серый — заливка и цвет основного пространства, синий – для текстов гиперссылок и интерактивных элементов, красный — для ошибок.

Использование цветов

Цвет помогает пользователям воспринимать информацию на странице и определять те или иные элементы и компоненты в соответствии с их назначением. Важная информация более контрастна, чем второстепенная.

Как использовать цвет

Пиктограммы

Пиктограммы строятся по квадратной сетке разрешением 18х18. Минимальный шаг сетки = р. Минимальная толщина штриха равна шагу сетки. Штрих может располагаться как между линиями сетки или совпадать осью с линией сетки.
Максимальная толщина штриха = 2р.

Построение

В зависимости от размера, в котором будет использована пиктограмма, она может быть отрисована в 2-х стилистических вариантах:
1) основной, монотолщинный: минимальная толщина штриха равна шагу сетки.
2) с использованием тонких линий: толщина линии определяется исходя из масштаба пиктограммы.

Монотолщинные пиктограммы могут быть как чёрного, так и основного синего цвета. Пиктограммы с использованием тонких линий исполняются в 2-х цветах: чёрный для толстых элементов, основной синий — для тонких.

Стили

Ниже представлена библиотека пиктограмм для удобного использования при верстке коммуникационных материалов.

Библиотека пиктограмм

Аудит
Применяется там то там то
Стратегия
Применяется там то там то
Применяется там то там то
Применяется там то там то
Нейминг
Паспортизация
Фирменный стиль
Применяется там то там то
Логотип
Применяется там то там то
Типографика
Применяется там то там то
Цвет
Применяется там то там то
Применяется там то там то
Применяется там то там то
Иллюстрации
Паттерн
Упаковка
Применяется там то там то
Философия
Применяется там то там то
Применяется там то там то
Применяется там то там то
Архитектура
Потребитель
Миссия
Применяется там то там то
Продуктовый бренд
Применяется там то там то
Корпоративный бренд
Применяется там то там то
Перечень
Применяется там то там то
Применяется там то там то
Применяется там то там то
Позиционирование
Характер
Анализ
Применяется там то там то
Дизайн
Применяется там то там то
Применяется там то там то
Применяется там то там то
Авторский надзор
Продукт
Эскиз
Применяется там то там то
Ценности
Применяется там то там то
Кубок
Применяется там то там то
Бренд-персонаж
Применяется там то там то
Применяется там то там то
Применяется там то там то
Видение будущего
Ритейл-брендинг

Графические элементы

Цвет в дизайн-системе — важнейший инструмент. У каждого цвета свои функции. От них нельзя отступать, чтобы сохранить целостность бренда.

Фотостиль

В изображениях преобладает холодная гамма и фирменная палитра.
Преобладающие тона: серый, чёрный.
Крайне нежелательно обилие ярких нефирменных цветов.
Характер: деловой, энергичный, аккуратный, современный.
Предпочтительна тематика, связанная с креативной индустрией: детали рабочего процесса, элементы рабочей среды.
Для имиджевых изображений желательная тематика, связанная с электричеством: лампы, молнии, генераторы и др.
Для оформления соцсетей и др. акцидентных носителей применяются также тонированные изображения.
Цвета тонировки: основной синий для теней и голубой для светов.
Если поверх изображения помещается текст, то важно обратить внимание на количество мелких деталей и перепадов тона: предпочтительны более «ровные» изображения, которые не будут осложнять чтение текста.

Тонировка

Материалы

Пиктограммы строятся по квадратной сетке разрешением 18х18. Минимальный шаг сетки = р. Минимальная толщина штриха равна шагу сетки. Штрих может располагаться как между линиями сетки или совпадать осью с линией сетки.
Максимальная толщина штриха = 2р.

Построение