Брендбук · версия 2.1
Код, понятный людям
Знак, цвет, типографика и правила Kodari. Забирайте и пользуйтесь — согласовывать не нужно. Если сделано по этой странице, значит сделано правильно.
Знак
Куб строится числом, а не на глаз
Изометрия: горизонтали под 30°, все три грани равны. Одно число задаёт всё остальное — длина ребра. Грани отличаются только светлотой, линий между ними нет никогда. У самой Kodari цвета нет: знак чёрно-белый.
Правило тона
Верхняя грань — чистый цвет знака, правая отходит от неё на ступень, левая на две. Ч/б куб переворачивается по фону. У цветного боковые грани всегда темнее верхней — силуэт держится на любом фоне.
Эталон — сплошные цвета
Белый куб: #ffffff · #cfcfd0 · #a5a5a5. Тёмный: #111113 · #34343d · #4f4f5c. Прозрачностей нет ни в одном варианте.
Два режима
От 96 px на гранях написано слово, куб только ч/б. Меньше 96 px слово не читается — знак ставится в лок-ап с подписью.
На тёмном фоне — белый куб.
На светлом — тёмный. Контура нет ни в одном варианте.
Семья знаков · от 96 px
Одно слово на всех трёх гранях, Rubik Black. Кегль один на всю семью: самое длинное слово, KODATA, занимает 80% ребра, остальные стоят по центру грани тем же кеглем.
Мелкий знак · до 96 px
Куб продукта цветной на любом фоне, Kodari остаётся ч/б. Подпись рядом обязательна. Цвет продукта живёт только здесь и в промо — интерфейс любого продукта красится фиолетовым акцентом.
Kodari
Kodari TOP
Kodari ID
Liya
KODATA
Kodari
Kodari TOP
Kodari ID
Liya
KODATA
Цвета знаков
Это не ступени палитры и вместо них не подставляются. Боковые грани — 80% и 62% цвета с #111113: на белом верх лайма почти сливается с фоном, силуэт держат бока.
Фавикон и иконка приложения
Подпись поставить некуда, работу делает цвет. Куб всегда на плашке #111113 — в любом окружении.
Лок-ап: куб и надпись
Всё считается от ребра. Надпись — Rubik ExtraBold, высота прописной 0,8 ребра, отступ от куба — половина ребра, столько же, сколько охранное поле.
Горизонтальный — основной. Шапка сайта и кабинета, письма, документы.
Вертикальный — для квадратных и узких форматов: обложки, визитки, аватар сообщества.
Одноцветная версия
Там, где краска одна и прозрачности нет, грани разделяются просветами — щелями без краски шириной 4% ребра. Это не нарисованная линия, а её отсутствие. Везде, где доступны три тона, знак остаётся трёхтоновым.
Где нужна
Шелкография, тампопечать, гравировка, лазер, тиснение, штамп, вышивка, плоттерная резка плёнки, чёрно-белая печать документов. В цифре — значок уведомления Android, монохромная иконка темы Android, иконки строки меню macOS.
Ширина просвета
4% ребра, но не тоньше минимальной линии технологии: 0,3 мм для шелкографии, 0,15 мм для гравировки и лазера. Если просвет выходит заметно шире 4%, знак мал для этой печати — его нужно увеличить.
Восемь способов сломать куб
Угол 30° — часть конструкции.
Границу граней задаёт тон, а в одноцветной версии — просвет.
Высота ровно два ребра.
Цвет один, меняется только светлота.
Ни теней, ни градиентов, ни свечения.
От 96 px куб только белый или тёмный.
Кроме фавикона, иконки приложения и аватара.
В пустых состояниях и заглушках — иконки.
Продукты
Два типа продуктов и одна таблица
Сервисы Kodari пишутся с префиксом. Самостоятельные продукты живут своим именем, а Kodari упоминается рядом строкой «от Kodari». Новый продукт сначала получает строку в этой таблице, потом всё остальное.
| Продукт | Тип | Слово на гранях | Подпись в лок-апе | Обращение | Знак |
|---|---|---|---|---|---|
| Kodari | родительский бренд | Kodari | Kodari | на «вы» | ч/б |
| Kodari TOP | сервис | TOP | Kodari TOP | на «ты» | лайм |
| Kodari ID | сервис | ID | Kodari ID | на «вы» | голубой |
| Liya | самостоятельный | Liya | Liya | на «ты» | коралл |
| KODATA | самостоятельный | KODATA | KODATA | на «вы» | зелёный |
Регистр каждого имени закреплён здесь. Правило «не прописными» относится только к слову Kodari: не KODARI и не kodari. TOP, ID и KODATA пишутся прописными всегда.
Цвет
Двенадцать ступеней, у каждой своя работа
Ступени считаны в OKLCH — они равномерны по восприятию, а не по числам. Роль ступени закреплена: девятая всегда плотная заливка, одиннадцатая всегда акцентный текст. Палитра обслуживает интерфейс, а не бренд: у Kodari своего цвета нет, фиолетовый — цвет действий во всех продуктах.
| # | Роль |
|---|---|
| 1 | Фон приложения |
| 2 | Фон подложки · карточки, поля |
| 3 | Элемент в покое · чипы, бейджи |
| 4 | Элемент под курсором |
| 5 | Элемент нажат |
| 6 | Тонкая граница |
| # | Роль |
|---|---|
| 7 | Граница элемента |
| 8 | Граница под курсором |
| 9 | Плотная заливка · опорная ступень |
| 10 | Заливка под курсором |
| 11 | Акцентный текст · от 4,5 : 1 |
| 12 | Контрастный текст · от 7 : 1 |
Палитра
Тёмная тема · нажмите на плашку, чтобы скопировать
У каждого семейства своя задача
| neutral | фоны, границы, текст |
| violet | акцент интерфейса во всех продуктах: кнопки, ссылки, фокус |
| green · amber · red · blue | статусы: успех, внимание, ошибка, информация |
| green · lime · amber · red | оценки |
| cyan · pink | запас под графики и метки категорий |
Акцент не перекрашивается под продукт: в Kodari TOP кнопки тоже фиолетовые. Лайм в TOP — только иллюстрации, пустые состояния и промо.
Контраст — жёсткое требование
Обычный текст — от 4,5 : 1, основной — от 7 : 1, крупный — от 3 : 1. Границы полей, чекбоксов и кольцо фокуса — от 3 : 1. Поэтому у полей своя граница border/strong = neutral/9, а фокус рисуется одиннадцатой ступенью фиолетового.
Оценки
Оценка — статус, а не украшение. Семейство выбирается по значению, ступени всегда одни: подложка 3, граница 6, текст 11.
Три запрета
Не брать девятую под текст. Девятая — заливка. Белый текст на ней — только на фиолетовом и красном, там он даёт от 4,5 : 1. На лайме, голубом, янтаре и зелёном белого текста нет.
Не смешивать темы. Ступени тёмной темы на светлом фоне дают грязь: они посчитаны под другой фон.
Не заливать статус целиком. Подложка третьей ступени и текст одиннадцатой, а не плашка в полный цвет. Девятая статуса — только тонкий индикатор и опасная кнопка.
Типографика
Rubik — одна гарнитура на всё
Буквы и цифры, сайт и личный кабинет, промо и таблицы. Семь начертаний от Light до Black. Разделение идёт не по шрифтам, а по двум шкалам: промо дышит, интерфейс уплотнён.
Кодари
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщъыьэюя
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
0123456789 ₽ % № § — – «» () ., ;: !?
Шкала · сайт и промо
Шкала · интерфейс
Цифры одной ширины
| Предмет | Балл | Оценок |
|---|---|---|
| Информатика | 4,57 | 118 |
| Математика | 3,90 | 1 004 |
| Физика | 5,00 | 76 |
| История | 4,11 | 1 240 |
Табличные цифры Rubik включаются одной строкой — font-variant-numeric: tabular-nums, и столбец выравнивается сам. Поэтому моноширинный остаётся только под настоящий код.
Как набираем числа
- Дробная часть
- через запятую — 4,57
- Тысячи
- неразрывный пробел — 1 240
- Проценты
- без пробела — 87%
- Диапазон
- короткое тире без пробелов — 9–11 класс
- Деньги
- знак после числа — 1 500 ₽
Носители и тон
Знак, имя, контакт — и ничего лишнего
Слоган ставится только под знаком. Описательная фраза «Просто хорошо сделанные продукты» живёт отдельно — в разделе «О нас». В одном блоке они не встречаются.
Kodari
Код, понятный людям
Визитка · лицо · 85 × 55 мм
Сергей Дроздов
Сооснователь
kodari.ru
@dewrolld
Визитка · оборот
Савва Верьялов
Сооснователь Kodari
kodari.ru
@kdsov
Код, понятный людям
Подпись в почте · светлая, без картинок-баннеров
Как пишем
- По делу
- Сначала что произошло, потом почему. Без разгона на два абзаца.
- Без канцелярита
- «Отправили» вместо «был отправлен». Живой человек, а не отдел.
- Честно про сроки
- Если не знаем — так и пишем. Обещание без даты — не обещание.
- Без восклицаний
- Ни эмодзи в интерфейсе и деловой переписке, ни «Ура!». Спокойный ровный голос.
Ошибки и пустые состояния
Ошибка объясняет, что пошло не так и что теперь делать. Без извинений и без «упс».
Пустое состояние — не сообщение о том, что пусто, а подсказка, что сделать дальше. «По выбранному фильтру заданий нет. Снимите фильтр или выберите другой период.»
Кнопка называет действие: «Опубликовать» → уведомление «Опубликовано».
«Ты» или «вы»
Голос один, обращение разное. Студия, сайт kodari.ru, коммерческие предложения, деловая переписка и поддержка — всегда на «вы», со строчной. У продуктов обращение закреплено в таблице продуктов: Kodari TOP и Liya на «ты», Kodari ID и KODATA на «вы».
| Ситуация | На «ты» · Kodari TOP, Liya | На «вы» · Kodari, Kodari ID, KODATA |
|---|---|---|
| Ошибка сети | Не получилось загрузить. Проверь интернет и обнови страницу. | Не получилось загрузить. Проверьте интернет и обновите страницу. |
| Пустое состояние | Оценок пока нет. Они появятся, когда преподаватель их поставит. | Подключённых устройств пока нет. Войдите в аккаунт на другом устройстве, и оно появится здесь. |
Файлы
Забирайте и пользуйтесь
Согласовывать не нужно. Все файлы знака — сплошные цвета без прозрачностей: белый куб под тёмный фон, тёмный под светлый, цветные кубы продуктов — под любой.
