Второй слой
Сильная работа не выкрикивает смысл. Прекрасное может скрывать страшное — или наоборот. Зритель считывает второй смысл не мгновенно.
На пальцах: песня или кадр работают сами по себе, а через минуту открывают ещё один смысл.
Единый источник правды · версия 1.0
Канон дизайна
Одна страница для всех, кто делает что-либо для Граны. Здесь зафиксированы цвета, шрифты, логотип, персонажи, интерфейсы, движение и правила передачи материалов. Если макет спорит с этой страницей — сначала сверяем статус правила, затем спрашиваем владельца.
Канон — не менять
База — брать по умолчанию
План — ещё не стандарт
Тёплое живое побеждает холодную системуНе неон ради неона. Не музейный фольклор.
СтатусПубличный канон
Обновлено1 августа 2026
Для когоКоманда и партнёры
ИсточникБрендбук + живой сайт
01 · Основа
ДНК бренда
«Мама Грана» — проект про свободу души. Визуал строится на конфликте двух слоёв: человеческого, тёплого и живого — с холодной системой, которая всё измеряет. Перетащите границу: тепла в итоге должно остаться эмоционально больше.
Живое
Кожа, дерево, свечи, рукопись, платок, лиса, берёзы, река, человеческий жест.
Система
Биометрия, серверы, провода, камеры, сетки и аудиоволны без читаемого псевдотекста.
Человек главнее технологии
Машина — инструмент времени, «новая балалайка», а не автор и не главный герой. Лица, жесты и человеческая память остаются читаемыми.
Жанр меняется. Взгляд — нет.
Киберфолк, электроника, рок или сатира могут выглядеть по-разному. Постоянны тёплая оптика, ирония и сопротивление упрощению.
02 · Цвет
Палитры
Основная палитра применяется на сайте, в продуктах и интерфейсах. Нажмите любой образец, чтобы скопировать код цвета. У логотипа есть собственное золото — оно намеренно не смешано с золотом интерфейса.
Black
#070706
Главный фон, не чистый чёрный
Graphite
#15120F
Панели и тёплая глубина
Charcoal
#2A241D
Ближняя поверхность
Amber
#F28A2D
Play, активность, фокус
Orange
#E65F1E
Сильный призыв, «живое»
Gold
#D4A14B
Рамки, лейблы, метаданные
Ivory
#F6E6C5
Текст и заголовки, не белый
Rust
#A84324
Негативные состояния, ржавчина
Cyber blue
#6AD7FF
Только система и биометрия
Eye white
#FFFFFF
Глаза Странника, редкий свет
Голубой — не декор
Холодный голубой показывает интерфейс, биометрию или давление системы. Если он просто «красиво светится», решение не канонично.
Белый — редкость
Чистый белый закреплён за глазами Кибер-странника и редким энергетическим светом. Обычный текст — тёплая слоновая кость.
Контраст прежде атмосферы
Оранжевый — акцент, не длинный текст. На светлой заливке используйте тёмные буквы. Не передавайте смысл одним цветом.
Палитра знака
Логотип живёт в своём золоте
Золото знака #DDA63C чуть ярче сайтового #D4A14B. Это не ошибка: внутри самого логотипа оттенок не перекрашиваем.
Logo gold
#DDA63CBlack
#000000Warm ivory
#F6E6C8Deep burgundy
#2A101E
Пока не стандарт
Светлая тема и «Рассвет»
Бесплатная спокойная светлая тема утверждена как базовое удобство, а художественный «Рассвет» — как отдельная наградная оболочка. Их точные цвета ещё не зафиксированы. Не копируйте временные оттенки прототипа в новый продукт.
На пальцах: идея утверждена, готовой общей палитры пока нет. До её отдельной приёмки используйте основную тёмную систему.
03 · Типографика
Шрифты
У каждого шрифта одна работа. Заголовки дают плакатную силу, основной текст остаётся человеческим и лёгким для чтения, а технические подписи напоминают маркировку студийного оборудования.
Web display
Русская душа
Web body
Человеческий текст проходит через машинный голос, но человеком быть не перестаёт.
Metadata
ЭФИР 24/7
СЛОЙ 02
MG—2026
СЛОЙ 02
MG—2026
Плотный индустриальный гротеск
Крупная кириллица, кремовый или золотой набор, один оранжевый акцент. Текст добавляется после генерации изображения отдельным слоем.
Гротеск: шрифт без засечек. Condensed: узкий шрифт, который держит крупный заголовок компактно.
Сдержанный декоративный шрифт с засечками
Для названия на мерче допустим спокойный шрифт с засечками и большим расстоянием между буквами. Конкретное семейство не закреплено — выбирать и утверждать под носитель.
На пальцах: роль и характер утверждены, но случайный новый шрифт нельзя объявлять официальным без отдельного решения.
Рабочая шкала
H1 · 48–112Главная мысльH2 · 32–66Раздел страницыH3 · 20–26Название карточкиBody · 16–19Текст, который читают, а не разглядывают.04 · Знак
Логотип
Основной знак — монограмма «МГ» со струнами, верхним символом и гранатом. Для веба используем чистый вектор: он не теряет качество при увеличении.
Не менее 12%
Вокруг знака оставляем пустое пространство не меньше 12% его ширины. Соседний текст и край кадра туда не заходят.
48 px на экране
Самостоятельный знак не уменьшаем ниже 48 px. Маленькая навигационная иконка 30–34 px — особое системное исключение сайта, не шаблон для партнёров.
Не ломать геометрию
Не растягивать, не вращать, не дорисовывать полное кольцо, не убирать струны и гранат, не добавлять свечение внутрь вектора.
SVG: векторный файл — знак остаётся резким на любом размере. Для сайта и макета берите SVG; тяжёлый PNG нужен только там, где система не принимает вектор.
05 · Мир
Персонажи
Это смысловой алфавит, а не обязательный групповой кадр. В каждой сцене появляется тот, чья роль помогает раскрыть мысль. Превью показывают канон, но не служат материалом для ленивого коллажа.
Главный аватар
Кибер-странник
Мужчина 30–38 лет, короткие тёмные волосы и борода, тёмный капюшон. Глаза чисто белые, без зрачков и синего оттенка. Живой, не глянцевый и не старый.
Память и дом
Красна девица
Молодая взрослая женщина, бордовый цветочный платок, естественные глаза и спокойная сила. Не pin-up, не сказочная принцесса и не карикатура.
Инстинкт
Скрипка-лиса
Реалистичная рыжая лиса с умным, ироничным взглядом. Не собака и не волк. Человеческий жест допустим только умеренно и преимущественно в стикерах.
Сигнал
Чёрная сорока / ворон
Угольное перо, тёплый оранжевый контровой свет, допустим один холодный блик в глазу. Тревожная, но не демоническая птица.
Труд и земля
Рабочий / шахтёр
Каска с фонарём, грубая рабочая одежда и инструмент. Образ обычного человека и труда, а не солдата или героя боевика.
Важно про образ Красной девицы. В исходном архиве три файла с её именем побайтно совпадают с файлами Странника.
Они заблокированы как ошибочные и не считаются её каноническими портретами. На этой странице использовано только отдельное, проверенное изображение.
Лицо → разворот → постер
При конфликте сначала смотрим лист лица, затем разворот персонажа, затем главный постер или обложку. Стикеры и вспомогательные сцены стоят ниже.
Источник внешности
Папка canon определяет лицо, силуэт, одежду и палитру. Оттуда не вырезают готового героя в новую сцену — она создаётся заново.
Поза и настроение
Вспомогательные материалы можно брать как подсказку для жеста, окружения и света, но не как замену основной внешности.
06 · Продукт
Интерфейс
Интерфейс ощущается как студийная панель, пластинка или гравированная табличка. Он помогает действовать и читать — не соревнуется с персонажами количеством эффектов.
Кнопки и состояния
В эфире
Главная кнопка — оранжевая с тёмным текстом. Вторичная — прозрачная, с тонкой золотой рамкой. Подъём при наведении 1–2 px.
Пояснять рядом
На пальцах: сложный термин объясняется прямо у поля, а не в отдельном словаре.
Размеры и воздух
- Основная ширина контента: 1180 px; допустимый предел кампании — 1240 px.
- Радиусы: 8 / 16 / 28 px.
- Касаемая кнопка: не меньше 44×44 px.
- Предпочтение: редакционная сетка из двух колонок вместо плотной админки.
Тёплая лестница глубины
- #070706 — фон мира.
- #0A0908 — чередование разделов.
- #100E0B — карточка.
- #161412 — наведение или меню.
Чем ближе поверхность к человеку, тем она чуть светлее и теплее. Не заменять это стеклом и гигантским неоновым градиентом.
Лицо нельзя отдать кропу
Обрезка допустима, только если лицо и смысл кадра сохранены. Для 1:1, 9:16 и 16:9 создаются отдельные композиции или аккуратно дорисовывается окружение — портрет не растягивается.
Читается без спецэффектов
Основной текст минимум 16 px, фокус клавиатуры видим, цвет не единственный носитель смысла, а режим уменьшенного движения соблюдается автоматически.
07 · Motion
Движение
Motion design — это дизайн движения: как камера, интерфейс и свет меняются во времени. В обычном продукте движение тихое и осмысленное; шоу-запуск может быть мощнее, но остаётся управляемым человеком.
200–450 мс
Переходы медленные и намеренные: лёгкий подъём, мягкое появление, янтарное свечение. Без постоянной тряски, мигания, глитча и частых частиц.
мс: миллисекунда. 200 мс — пятая часть секунды; 450 мс — чуть меньше половины секунды.
Среда движется больше лица
Допустимы медленный наезд камеры, параллакс, искры, дым, ткань, кабели и экраны. Без движения рта и агрессивной мимики, если это не заказано отдельно.
Параллакс: передний и дальний план двигаются с разной скоростью, поэтому плоский кадр получает глубину.
0–120 мсМгновенный отклик кнопки
200–260 мсОбычное состояние интерфейса
320–450 мсКарточка, панель, смысловой переход
СекундыКамера, свет, дым, окружение
Особый формат
Минутное открытие Радио Грана
Промо-шоу открытия и разделения на две волны может быть громким, кинематографичным и музыкальным: подготовка зрителя, голос, нарезка джинглов и песен, демонстрация новых функций. Это отдельный трейлерный режим, а не стиль каждого экрана.
- Сначала честное приглашение включить звук; браузер не должен сам орать без действия человека.
- Всегда есть «Пропустить», субтитры и повторный запуск.
- Загрузка показывает реальный прогресс, а не держит человека ради драматургии.
- При системной настройке «меньше движения» включается спокойная версия.
08 · Слово
Текст и тон
В искусстве смысл прячется. В интерфейсе и партнёрских материалах смысл объясняется. Не заставляйте человека разгадывать кнопку, цену или условие использования.
Человечно и точно
- Ирония, лирика, «смех сквозь зубы».
- Одна сильная мысль на кадр или экран.
- Сложное слово объясняется рядом «на пальцах».
- Промо раскрывает 1–2 мысли, не разжёвывая песню целиком.
- Живой бытовой образ сильнее абстрактного лозунга.
Пафосно и плоско
- Корпоративный AI-жаргон и официоз.
- Псевдославянская высокопарность.
- Прямая агитация вместо второго слоя.
- Случайные буквы и псевдокириллица.
- Длинная надпись, сгенерированная внутри картинки.
Человеческий текст.
Машинный голос.
Русская душа в цифровом абсурде.
Жанр меняется.
Взгляд — нет.
Душу нельзя измерить.
Её можно услышать.
09 · Передача
Как сдавать работу
Канон полезен только тогда, когда результат можно проверить и продолжить без автора файла. Ниже — минимальный комплект для каждой роли.
Макет и визуал
- Ссылка на эту страницу и версия канона.
- Исходник со слоями, шрифты или безопасные замены.
- Композиции 1:1, 9:16 и 16:9, если нужны.
- Проверка лица, глаз, рук и кириллицы.
- Отдельный список осознанных отклонений.
Интерфейс
- Подключены общие переменные цветов.
- Кнопки не меньше 44×44 px.
- Фокус видим с клавиатуры.
- Есть режим уменьшенного движения.
- Проверены 1440, 390 и 360 px.
Публикация
- Взят официальный файл логотипа.
- Сохранено свободное поле 12%.
- Знак не перекрашен и не искажён.
- Понятно, где и как будет показан материал.
- Новый образ героя согласован до публикации.
Поиск подсветит подходящие карточки.
10 · В работу
Готовые файлы
Дизайн-токены — это общие именованные значения цветов, радиусов и движения. Разработчик подключает их один раз, и разные страницы перестают «плыть» по оттенкам и размерам.
На пальцах: вместо «возьми какой-нибудь оранжевый» в коде пишут --mg-amber, и все получают один утверждённый #F28A2D.
:root {
--mg-black: #070706;
--mg-graphite: #15120F;
--mg-charcoal: #2A241D;
--mg-amber: #F28A2D;
--mg-amber-lite: #F8B45A;
--mg-orange: #E65F1E;
--mg-gold: #D4A14B;
--mg-ivory: #F6E6C5;
--mg-ink: #0B0A08;
--mg-rust: #A84324;
--mg-cyber-blue: #6AD7FF;
--mg-radius-sm: 8px;
--mg-radius-md: 16px;
--mg-radius-lg: 28px;
--mg-max: 1180px;
--mg-ease: cubic-bezier(.4, 0, .2, 1);
}
Источники
Откуда собран этот канон
Визуальное ядроBRAND_CORE_RU.md, palette.json, SITE_DESIGN_SYSTEM.md, DO_DONT.md
Смысл и тонstyle-bible.md v2.2, CONTENT_CORE_RU.md
ЛоготипУтверждённый коммерческий пакет 2026-06 и реальный файл живого сайта
ПерсонажиПапки canon и CHARACTER_NOTES каждого персонажа; ошибочные дубликаты Красной девицы исключены
Продуктmg-tokens.css и действующие правила интерфейса mamagrana.ru
Порядок изменений
Как обновляется канон
Новая идея сначала получает макет и отдельное утверждение владельца. После утверждения меняется источник, эта страница и номер версии. Макет, комментарий в чате или временная тема сами по себе каноном не становятся.