Второй слой
Сильная работа не выкрикивает смысл. Прекрасное может скрывать страшное — или наоборот. Зритель считывает второй смысл не мгновенно.
На пальцах: песня или кадр работают сами по себе, а через минуту открывают ещё один смысл.
Единый источник правды · версия 1.1
Канон дизайна
Одна страница для всех, кто делает что-либо для Граны. Здесь зафиксированы визуальный язык, цвета, шрифты, логотип, персонажи, интерфейсы, движение и правила передачи материалов. Если макет спорит с этой страницей — сначала сверяем статус правила, затем спрашиваем владельца.
Канон — не менять
База — брать по умолчанию
План — ещё не стандарт
Тёплое живое побеждает холодную системуНе неон ради неона. Не музейный фольклор.
СтатусПубличный канон
Обновлено1 августа 2026
Для когоКоманда и партнёры
ИсточникIP-библия 1.1 + токены
01 · Основа
ДНК бренда
«Мама Грана» — проект про свободу души. Визуал строится на конфликте двух слоёв: человеческого, тёплого и живого — с холодной системой, которая всё измеряет. Перетащите границу: тепла в итоге должно остаться эмоционально больше.
Сверено с IP-библией 1.1: человеческий текст, машинный голос и русская душа в цифровом абсурде. Любая красивая идея проходит четыре проверки: смысл, канон, визуал и возможность повторить результат.
Живое
Кожа, дерево, свечи, рукопись, платок, лиса, берёзы, река, человеческий жест.
Система
Биометрия, серверы, провода, камеры, сетки и аудиоволны без читаемого псевдотекста.
Человек главнее технологии
Машина — инструмент времени, «новая балалайка», а не автор и не главный герой. Лица, жесты и человеческая память остаются читаемыми.
Жанр меняется. Взгляд — нет.
Киберфолк, электроника, рок или сатира могут выглядеть по-разному. Постоянны тёплая оптика, ирония и сопротивление упрощению.
02 · Визуальный язык
Живой сбой
Основная линия для реального автора, соцсетей, предметного архива и документальных сцен. Кадр должен выглядеть как настоящая жизнь, в которой проявилась одна небольшая невозможная деталь.
Главная формула
Реальность дала сбой, и этот сбой удалось сфотографировать
Не «нейросеть рисует архив». Сначала — человек, место, предмет и правдоподобный свет. Только потом — один «живой сбой» или сигнал.
Соотношение
Один эффект, не шоу эффектов
Цифры показывают приоритет внимания, а не площадь кадра.
80%кожа, ткань, бумага, пыль, стекло, дождь и естественный свет
20%один сбой
Режим A · основной
Реальный автор
Обычная квартира, двор, улица, подъезд, кухня или студия. Сохраняем форму лица, телосложение, короткие волосы, бороду и чёрную одежду. Автор действует, а не просто позирует. Часть кадров снимается без очков или с видимыми глазами: очки не должны превращаться в постоянную маску.
Важно: белые светящиеся глаза реальному автору не добавляются.
Режим B · специальный
Канонические персонажи
Кибер-странник с белыми глазами, Красна девица, песенные персонажи, стикеры и игровые миры не отменены. Этот режим включается, когда задача прямо требует персонажа, конкретную песню, игру или стилизованную вселенную.
На пальцах: реальный Роман и Кибер-странник — два разных визуальных режима. Не смешиваем их по привычке.
Авторчеловек в настоящей среде
Предметный архиводин предмет с историей
Живой сигналAmber, Orange или Rust; не произвольный неон
Лисанатуральный проводник или свидетель
Детство и 2000-енесовершенная техника и настоящая память
Документодин лист, штамп или короткая фраза
Дверь 4:04реальный проход с едва заметным нарушением
Кадр читается на телефоне
Один главный объект, одно действие, один сюжет и одна аномалия. Статика 4:5 — основной формат ленты. В 9:16 герой остаётся в центральной безопасной зоне, а сверху и снизу оставляется место интерфейсу. Квадрат 1:1 используем только для действительно квадратной композиции. Финал проверяем в превью 250–350 px.
Не талисман-мультяшка
Лиса — проводник, свидетель или след. Она может быть главным героем отдельной серии или вторичным силуэтом, отражением, жетоном либо хвостом в глубине кадра. Не делаем её милой мультяшкой и не ставим в каждый пост.
Надпись — после генерации
Сначала создаём чистую сцену. Текст длиннее 2–3 слов накладываем вручную в Figma или Photoshop. Внутри картинки допустимы только «4:04», «Дело №404», один штамп или одна короткая фраза. Кириллицу проверяем глазами.
Чужие бренды — только указатели эпохи. Sony, Nintendo, MTV, Linkin Park и другие логотипы из референсного коллажа нельзя копировать в финальные материалы. Можно передать время через безымянный CD-плеер, кассету, проводные наушники, старый телевизор, двор, подъезд или гаражи.
Создай кинематографичный фотореалистичный кадр для музыкального проекта «Мама Грана». Это не иллюстрация и не глянцевый AI-art, а фотография реального мира, в котором произошёл едва заметный цифровой или смысловой сбой. Каноническая база: Black #070706, Graphite #15120F, Charcoal #2A241D, Ivory #F6E6C5. Живой сигнал и энергия: Amber #F28A2D, Amber Lite #F8B45A, Orange #E65F1E, Gold #D4A14B, Rust #A84324. Cyber Blue #6AD7FF используется только как системный интерфейс или системный сигнал. Eye White #FFFFFF — только для Кибер-странника или редкой энергии. Реалистичные материалы, простая композиция, один главный объект, один сюжет, одна аномальная деталь. Кадр должен читаться в мобильной ленте.
cheap stock photo, generic hacker, Guy Fawkes mask, green Matrix code, acid neon, neon cyberpunk, cyber-pop, horror, body horror, gore, fake Cyrillic, distorted Russian letters, fantasy fox, cartoon animal, glossy 3D render, excessive symmetry, ornate vintage decoration, cluttered evidence board, true crime poster, political symbols, platform logos, malformed hands, plastic skin, excessive HDR, unreadable text, fashion campaign, multiple brand marks, cyber blue used as decoration, white glowing eyes on the real author
На пальцах: английский список выше нужен генератору изображения. Он запрещает дешёвое стоковое фото, хакерские штампы, хоррор, мультяшную лису, перегруженную доску улик, чужие логотипы, сломанные руки и белые глаза у реального автора.
Сначала смысл песни
- Смысл, факты и красные линии конкретной песни.
- Прямое указание владельца для этой работы.
- Этот раздел визуального канона.
- Общие старые инструкции и отдельные референсы.
Жизнь или просто эффект?
«Это реальная жизнь, в которой проявился живой сигнал, — или просто красивая нейросетевая картинка?» Если верно второе, работу не выпускаем и переделываем.
03 · Цвет
Палитры
Основная палитра применяется на сайте, в продуктах и интерфейсах. Нажмите любой образец, чтобы скопировать код цвета. У логотипа есть собственное золото — оно намеренно не смешано с золотом интерфейса.
Black
#070706
Главный фон, не чистый чёрный
Graphite
#15120F
Панели и тёплая глубина
Charcoal
#2A241D
Ближняя поверхность
Amber
#F28A2D
Play, активность, фокус
Orange
#E65F1E
Сильный призыв, «живое»
Gold
#D4A14B
Рамки, лейблы, метаданные
Ivory
#F6E6C5
Текст и заголовки, не белый
Rust
#A84324
Негативные состояния, ржавчина
Cyber blue
#6AD7FF
Только система и биометрия
Eye white
#FFFFFF
Глаза Странника, редкий свет
Голубой — не декор
Холодный голубой показывает интерфейс, биометрию или давление системы. Если он просто «красиво светится», решение не канонично.
Белый — редкость
Чистый белый закреплён за глазами Кибер-странника и редким энергетическим светом. Обычный текст — тёплая слоновая кость.
Контраст прежде атмосферы
Оранжевый — акцент, не длинный текст. На светлой заливке используйте тёмные буквы. Не передавайте смысл одним цветом.
Живой сигнал: IP-библия 1.1 закрепляет точную линию Amber #F28A2D / Orange #E65F1E / Rust #A84324. Выбирайте один из этих оттенков по задаче — сигнал, энергия, штамп или призыв к действию. Не придумывайте новый красный неон и не превращайте сигнал в большую декоративную заливку.
Палитра знака
Логотип живёт в своём золоте
Золото знака #DDA63C чуть ярче сайтового #D4A14B. Это не ошибка: внутри самого логотипа оттенок не перекрашиваем.
Logo gold
#DDA63CBlack
#000000Warm ivory
#F6E6C8Deep burgundy
#2A101E
Пока не стандарт
Светлая тема и «Рассвет»
Бесплатная спокойная светлая тема утверждена как базовое удобство, а художественный «Рассвет» — как отдельная наградная оболочка. Их точные цвета ещё не зафиксированы. Не копируйте временные оттенки прототипа в новый продукт.
На пальцах: идея утверждена, готовой общей палитры пока нет. До её отдельной приёмки используйте основную тёмную систему.
04 · Типографика
Шрифты
У каждого шрифта одна работа. Заголовки дают плакатную силу, основной текст остаётся человеческим и лёгким для чтения, а технические подписи напоминают маркировку студийного оборудования.
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Текст, который читают, а не разглядывают.05 · Знак
Логотип
Основной знак — монограмма «МГ» со струнами, верхним символом и гранатом. Для веба используем чистый вектор: он не теряет качество при увеличении.
Не менее 12%
Вокруг знака оставляем пустое пространство не меньше 12% его ширины. Соседний текст и край кадра туда не заходят.
48 px на экране
Самостоятельный знак не уменьшаем ниже 48 px. Маленькая навигационная иконка 30–34 px — особое системное исключение сайта, не шаблон для партнёров.
Не ломать геометрию
Не растягивать, не вращать, не дорисовывать полное кольцо, не убирать струны и гранат, не добавлять свечение внутрь вектора.
SVG: векторный файл — знак остаётся резким на любом размере. Для сайта и макета берите SVG; тяжёлый PNG нужен только там, где система не принимает вектор.
06 · Мир
Персонажи
Это смысловой алфавит, а не обязательный групповой кадр. В каждой сцене появляется тот, чья роль помогает раскрыть мысль. Превью показывают канон, но не служат материалом для ленивого коллажа.
Главный аватар
Кибер-странник
Мужчина 30–38 лет, короткие тёмные волосы и борода, тёмный капюшон. Глаза чисто белые, без зрачков и синего оттенка. Живой, не глянцевый и не старый.
Память и дом
Красна девица
Молодая взрослая женщина, бордовый цветочный платок, естественные глаза и спокойная сила. Не pin-up, не сказочная принцесса и не карикатура.
Инстинкт
Скрипка-лиса
Реалистичная рыжая лиса с умным, ироничным взглядом. Не собака и не волк. Человеческий жест допустим только умеренно и преимущественно в стикерах.
Сигнал
Чёрная сорока / ворон
Угольное перо, тёплый оранжевый контровой свет, допустим один холодный блик в глазу. Тревожная, но не демоническая птица.
Труд и земля
Рабочий / шахтёр
Каска с фонарём, грубая рабочая одежда и инструмент. Образ обычного человека и труда, а не солдата или героя боевика.
Важно про образ Красной девицы. В исходном архиве три файла с её именем побайтно совпадают с файлами Странника.
Они заблокированы как ошибочные и не считаются её каноническими портретами. На этой странице использовано только отдельное, проверенное изображение.
Лицо → разворот → постер
При конфликте сначала смотрим лист лица, затем разворот персонажа, затем главный постер или обложку. Стикеры и вспомогательные сцены стоят ниже.
Источник внешности
Папка canon определяет лицо, силуэт, одежду и палитру. Оттуда не вырезают готового героя в новую сцену — она создаётся заново.
Поза и настроение
Вспомогательные материалы можно брать как подсказку для жеста, окружения и света, но не как замену основной внешности.
07 · Продукт
Интерфейс
Интерфейс ощущается как студийная панель, пластинка или гравированная табличка. Он помогает действовать и читать — не соревнуется с персонажами количеством эффектов.
Кнопки и состояния
В эфире
Главная кнопка — оранжевая с тёмным текстом. Вторичная — прозрачная, с тонкой золотой рамкой. Подъём при наведении 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, фокус клавиатуры видим, цвет не единственный носитель смысла, а режим уменьшенного движения соблюдается автоматически.
08 · Motion
Движение
Motion design — это дизайн движения: как камера, интерфейс и свет меняются во времени. В обычном продукте движение тихое и осмысленное; шоу-запуск может быть мощнее, но остаётся управляемым человеком.
200–450 мс
Переходы медленные и намеренные: лёгкий подъём, мягкое появление, янтарное свечение. Без постоянной тряски, мигания, глитча и частых частиц.
мс: миллисекунда. 200 мс — пятая часть секунды; 450 мс — чуть меньше половины секунды.
Среда движется больше лица
Допустимы медленный наезд камеры, параллакс, искры, дым, ткань, кабели и экраны. Без движения рта и агрессивной мимики, если это не заказано отдельно.
Параллакс: передний и дальний план двигаются с разной скоростью, поэтому плоский кадр получает глубину.
0–120 мсМгновенный отклик кнопки
200–260 мсОбычное состояние интерфейса
320–450 мсКарточка, панель, смысловой переход
СекундыКамера, свет, дым, окружение
Особый формат
Минутное открытие Радио Грана
Промо-шоу открытия и разделения на две волны может быть громким, кинематографичным и музыкальным: подготовка зрителя, голос, нарезка джинглов и песен, демонстрация новых функций. Это отдельный трейлерный режим, а не стиль каждого экрана.
- Сначала честное приглашение включить звук; браузер не должен сам орать без действия человека.
- Всегда есть «Пропустить», субтитры и повторный запуск.
- Загрузка показывает реальный прогресс, а не держит человека ради драматургии.
- При системной настройке «меньше движения» включается спокойная версия.
09 · Слово
Текст и тон
В искусстве смысл прячется. В интерфейсе и партнёрских материалах смысл объясняется. Не заставляйте человека разгадывать кнопку, цену или условие использования.
Человечно и точно
- Ирония, лирика, «смех сквозь зубы».
- Одна сильная мысль на кадр или экран.
- Сложное слово объясняется рядом «на пальцах».
- Промо раскрывает 1–2 мысли, не разжёвывая песню целиком.
- Живой бытовой образ сильнее абстрактного лозунга.
Пафосно и плоско
- Корпоративный AI-жаргон и официоз.
- Псевдославянская высокопарность.
- Прямая агитация вместо второго слоя.
- Случайные буквы и псевдокириллица.
- Длинная надпись, сгенерированная внутри картинки.
Человеческий текст.
Машинный голос.
Русская душа в цифровом абсурде.
Жанр меняется.
Взгляд — нет.
Душу нельзя измерить.
Её можно услышать.
10 · Передача
Как сдавать работу
Канон полезен только тогда, когда результат можно проверить и продолжить без автора файла. Ниже — минимальный комплект для каждой роли.
Макет и визуал
- Ссылка на эту страницу и версия канона.
- Исходник со слоями, шрифты или безопасные замены.
- Композиции 1:1, 9:16 и 16:9, если нужны.
- Проверка лица, глаз, рук и кириллицы.
- Отдельный список осознанных отклонений.
Интерфейс
- Подключены общие переменные цветов.
- Кнопки не меньше 44×44 px.
- Фокус видим с клавиатуры.
- Есть режим уменьшенного движения.
- Проверены 1440, 390 и 360 px.
Публикация
- Взят официальный файл логотипа.
- Сохранено свободное поле 12%.
- Знак не перекрашен и не искажён.
- Понятно, где и как будет показан материал.
- Новый образ героя согласован до публикации.
Смысл
Есть человеческая эмоция и связь с «Ты не один», а не просто атмосфера.
Канон
Нет раскрытого секрета, запрещённой темы, выдуманного факта или неподтверждённого обещания.
Визуал
Сначала реальность, затем один сбой; объект читается в превью 250–350 px.
Результат
Понятно, что человек должен сделать и как команда поймёт, что материал сработал.
Поиск подсветит подходящие фрагменты.
11 · В работу
Готовые файлы
Дизайн-токены — это общие именованные значения цветов, радиусов и движения. Разработчик подключает их один раз, и разные страницы перестают «плыть» по оттенкам и размерам.
На пальцах: вместо «возьми какой-нибудь оранжевый» в коде пишут --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);
}
Источники
Откуда собран этот канон
Верхний источникIP-библия «Мама Грана» v1.1 — единый внутренний документ проекта. На этой странице показана только публично безопасная часть визуальных правил; тайны, планы и служебные данные сюда не вынесены
Визуальное ядроVISUAL_CONCEPT_AND_PROMPT_GUIDE_2026-08.md, 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
Порядок изменений
Как обновляется канон
Не создаём конкурирующие библии. Новая идея сначала получает отдельное утверждение владельца, затем вносится в главный файл IP-библии — единый внутренний документ проекта — с новой версией. После этого синхронизируются эта публичная страница и рабочие приложения. Макет, комментарий в чате или временная тема сами по себе каноном не становятся.