Фирменный стиль · редакция 11.10.2026

Брендбук «Котомёта»

Как выглядит и звучит игра, где котята летят на мышиные крепости. Здесь — логотип, цвета, шрифт, герои, правила интерфейса и голоса. Всё, что нужно, чтобы нарисовать, написать или собрать что-то «в стиле Котомёта» и не ошибиться.

Идея бренда

Котомёт — это весёлая физика: котята вылетают из рогатки и обрушивают крепость мышей. Бренд должен давать то же чувство: быстро, наглядно, по-доброму и с лёгким азартом.

Мультяшная плотность

Крупные формы, толстый тёмный контур, яркие плоские цвета. Всё выглядит как наклейка: читается с первого взгляда и на маленьком экране.

Тёплая, не злая

Мыши — «противники», но без жестокости: крепости рушатся, мыши смущённо вылетают. Тон — как в хорошем мультфильме для всей семьи.

Тактильность

Кнопки «нажимаются»: у них жёсткая нижняя тень, при нажатии они опускаются. Движение упругое, быстрое, без долгих плавных затуханий.

Логотип

Два знака: надпись «Котомёт» с рыжим котёнком в полёте и квадратный значок на бирюзовом небе. Надпись — главный знак; значок — для аватарок, иконок приложения и мест, где мало ширины.

на бумаге — основной вариант

на чернилах

на апельсине

на бирюзе

значок

значок на тёмном

значок на апельсине

Охранное поле

Вокруг знака — пустое место не меньше высоты буквы «К». Ничего не заходит в это поле: ни текст, ни картинки, ни края экрана.

Минимальный размер

Надпись — не уже 96 px (на печати 25 мм), значок — не меньше 24 px. Меньше — используйте значок.

96 px

48 px

24 px

Какой знак где

Надпись: шапка и подвал сайта, заставка, обложки, документы.

Значок: аватар сообщества, иконка приложения, favicon, миниатюры.

Знак никогда не печатаем на пёстрой картинке без подложки: ставим на однотонный фон из палитры.

Как нельзя

Растягивать и сжимать

Наклонять и вращать

Обесцвечивать

Менять цвета

Добавлять эффекты и тени

Ставить на пёстрый фон

Цвета

Палитра тёплая и контрастная: тёмные «чернила» для контуров и текста, апельсин для действий, бумажный фон. Бирюза нужна как холодный противовес — небо и логотип.

#2B1D14

Чернила

HEX #2B1D14RGB 43 29 20--ink

Контуры, текст, тени. Главный цвет: всё в игре обведено им.

#FF7A1A

Апельсин

HEX #FF7A1ARGB 255 122 26--accent

Кнопки, акценты, рыжий котёнок. Один главный акцент на экран.

#F6E8D2

Бумага

HEX #F6E8D2RGB 246 232 210--paper

Фон страниц сайта и экранов вне игры.

#FFFDF8

Карточка

HEX #FFFDF8RGB 255 253 248--card

Поверхность карточек, окон, полей ввода.

Дополнительные

#D65F0C

Апельсин тёмный

HEX #D65F0CRGB 214 95 12--accent-d

Нижняя «жёсткая» тень кнопок, ссылки, подписи.

#FFC247

Золото

HEX #FFC247RGB 255 194 71--gold

Звёзды, награды, подсветка выбранного.

#FFF3DD

Сливки

HEX #FFF3DDRGB 255 243 221--cream

Подложка шапки, подсказки, выделения.

#D9C7AE

Картон

HEX #D9C7AERGB 217 199 174--board

Разделители, неактивные элементы, подложки полей.

#238A9C

Бирюза

HEX #238A9CRGB 35 138 156--teal

Небо в логотипе, воздух игры, холодный контраст.

#0E3F50

Глубокая бирюза

HEX #0E3F50RGB 14 63 80--deep

Тени в бирюзовых зонах, ночные сцены.

#3D8A1F

Верно (служебный)

HEX #3D8A1FRGB 61 138 31

Успех, подтверждения.

#D9372B

Ошибка (служебный)

HEX #D9372BRGB 217 55 43

Ошибки и опасные действия. В рекламе не используется.

Пропорции

Примерная доля цвета на экране сайта: больше всего бумаги и карточек, чернила — контуры и текст, апельсин — не больше одного акцента.

Сочетания и читаемость

Контраст посчитан по WCAG: от 4,5:1 — подходит для текста; от 3:1 — для крупного текста и значков.

Чернила
на бумага13.5:1 · текст

Чернила
на карточка16.0:1 · текст

Чернила
на апельсин6.2:1 · текст

Апельсин
на чернила6.2:1 · текст

Бумага
на чернила13.5:1 · текст

Карточка
на бирюза4.0:1 · крупно/иконки

Апельсин тёмный
на бумага3.2:1 · крупно/иконки

Карточка
на апельсин2.6:1 · только декор (текст — крупный и жирный)

Шрифт

Один шрифт на всё — Rubik (лицензия SIL OFL, можно свободно использовать). Он круглый и крепкий, поддерживает кириллицу и латиницу, а жирные начертания похожи на буквы с наклеек. Подключён локально: сайт не ходит за шрифтами в интернет.

Аа

400600800900

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ абвгдеёжзийклмнопрстуфхцчшщъыьэюя 0123456789 ABCDEFGHIJKLM NOPQRSTUVWXYZ ?!«»—

Заголовок 1
900 · 36–68 px
интерлиньяж 1,12Крепость падёт!

Заголовок 2
900 · 26–40 pxВыбери котёнка

Заголовок 3
800 · 20 pxРыжик — смелый котёнок

Основной текст
400 · 17 px · 1,6Тяни рогатку, целься и отпускай. Нажми в полёте — и котёнок применит умение.

Кнопки и подписи
800 · 15–18 pxИГРАТЬ · Продолжить

Мелкий текст
600 · 13–14 pxПодсказка, подпись, дата редакции.

Правила: заголовки — жирные (800–900), без курсива и подчёркивания; в играх и на плакатах заголовок обводим чернилами (контур 2–4 px, paint-order: stroke fill). Не используем больше одного шрифта.

Герои

Шесть котят и мыши-противники. Каждый котёнок узнаётся по силуэту и цвету шерсти. Цвета, имена и описания взяты прямо из игры.

Рыжик

Смелый рыжий котёнок. Бьёт всё понемногу.

Тройняшки

Три полосатых брата. В полёте делятся на троих и лучше всех бьют стекло.

Шустрик

Сиамский торопыга. По нажатию рвётся вперёд когтями и прошивает дерево.

Уголёк

Чёрный кот с характером. Шипит и взрывается шерстью, мнёт даже кастрюли.

Пушинка

Белая кошечка. Роняет вниз банку сметаны, которая взрывается брызгами, а сама взмывает вверх.

Батон

Пушистый тяжеловес. По нажатию камнем падает вниз и крушит всё под собой: горшки, тыквы и хлипкие стены.

Мыши

Обычные мыши

Маленькие, средние и большие. Круглые, чуть растерянные, розовые уши. Никогда не злобные.

Стражи

Мыши в наперстках. Прочнее обычных: наперсток держит удар.

Боссы

Король в короне, а также фермер, диджей и барон: особые головные уборы и много здоровья. Каждая глава заканчивается боссом.

Правила рисунка: контур чернилами 3–4 px, яркая заливка, светлый «блик» сверху, мягкая тёмная тень снизу. Глаза крупные, брови — решительные у котят и растерянные у мышей. У котят всегда видны усы и хвост.

Интерфейс

Элементы выглядят как наклейки или кнопки игрушки: толстый контур, плотная «жёсткая» тень, крупные скругления.

Кнопки и метки

Играть Вторичная Мелкая

⭐ 24Глава 2Новое

Состояния главной кнопки

ОбычнаяНажатаНедоступна

Главная кнопка одна на экран: апельсин, белый текст, нижняя тень цвета «апельсин тёмный» 5 px. При нажатии опускается на 2–3 px.

Правила поверхностей

Контур3 px чернилами. Для мелких элементов — 2 px.
ТеньЖёсткая, без размытия: 0 5px 0 var(--ink). Мягкая рассеянная тень — только как добавка под плавающие панели.
СкругленияКарточки и окна 22 px, кнопки 14 px, метки и чипы — полные «таблетки» только у значков состояния.
ОтступыКратны 4 px: 8, 12, 16, 24, 40.
ШиринаСодержимое и шапка одной ширины — до 1360 px по краям экрана 16 px.

Скругления

999

Тени

3 px

5 px

8 px

3 — мелкие элементы, 5 — карточки и кнопки, 8 — крупные сцены.

Движение

Быстро и упруго: 120–250 мс, пружинка на появлении, без долгих затуханий. Уважаем «уменьшить движение» в системе — тогда анимации отключаются.

Звук

Музыка — тихий фон, эффекты весёлые и короткие. Голоса котят и мышей — мультяшные, без пугающих звуков.

Рыбки

Внутриигровая единица называется «рыбки». Рыбка рисуется как золотистая рыбка с контуром; вещи в магазине оцениваются только в рыбках.

Голос и тексты

Говорим как весёлый друг, который хорошо знает игру: коротко, по делу, с лёгкой шуткой. Обращаемся на «ты» в игре и на «вы» в юридических документах и поддержке.

Пишем так

Короткие фразы и глаголы действия: «Тяни», «Целься», «Отпускай».
Конкретно: «Пушинка роняет сметану вниз», а не «персонаж использует умение».
Дружелюбно и с юмором, но не на каждой строке.
Ошибки объясняем и сразу говорим, что делать: «Не получилось отправить письмо. Попробуйте ещё раз через минуту».

Не пишем так

Канцелярит и воду: «осуществить авторизацию в системе».
Давление и срочность: «Успей купить!», «Последний шанс!».
Сравнение рыбок с деньгами и банковские слова: рыбки — это просто рыбки.
Жестокость и грубость: мыши смущаются, а не страдают.

Запусти котят — обрушь мышиную крепостьСлоган сайта и описания

Крепость падёт!Победа на уровне

Ещё разок?Поражение, без упрёка

Название: «Котомёт» — одним словом, с заглавной «К», с буквой «ё», всегда в кавычках в тексте («игра «Котомёт»»). Не «Kotomet», не «КОТОМЁТ» в сплошном тексте (капсом — только в логотипе и заголовках-плашках).

Файлы

Для обзоров, статей, сообществ и партнёров: можно брать эти картинки, ссылаясь на игру «Котомёт» и на kotomet.ru. Не обрезайте, не перекрашивайте и не меняйте пропорции. Права на изображения и юридическая информация — на странице «Правообладатель».