Дизайн-система
Три уровня, один принцип
Дизайн-система Бррр!-Эффект делится на три уровня. У каждого — свой гайд и свой Toolbox (набор файлов в Figma). Цвет, шрифт и ИИ-аватар — общие для всех трёх. Лого входит в Toolbox каждого уровня отдельно.
Уровень 1
Бррр
Основной стиль. Чёрный фон, полный градиент cyan→magenta в акцентах.
Уровень 2
Бррр-белый
Вариант в белом. Для блоков с большим количеством текста и документов.
Уровень 3
SHIFT+
Подсистема Бррр. Легче, строже, без градиента — только чистые cyan и magenta.
Токены
7 значений — вся палитра системы
Градиент, два акцентных цвета, чёрный, поднятая тёмная поверхность, средний серый, белый. Третьего цвета нигде в системе нет.
Burst (градиент)
#EC297B → #00ADEE
Cyan
#00ADEE
Magenta
#EC297B
White
#FFFFFF
Black (bg)
#000000
Gray 2 (surface)
#191919
Gray
#A5A5A5
Правило градиента
Направление строго magenta → cyan слева направо: linear-gradient(90deg, #EC297B 0%, #00ADEE 100%).
Применяется через background-clip: text — к крупным цифрам, названию продукта и кикерам. Больше нигде как заливка текста не используется.
Правила
Где какой цвет — и почему
За каждым цветом в системе закреплена конкретная роль. Ниже — карта применения по трём уровням: БРРР, Бррр-белый, SHIFT+.
БРРР — основной фон
Чёрный
Базовый и преимущественный цвет фона на сайте и в коммуникациях. Также служит фоном под иллюстрации-объекты.
Градиент
Magenta → Cyan
Только в заливке текста — кикеры, крупные цифры, акцентные фразы.
Локальные цвета
Cyan / Magenta
Точечные акценты — не заливка текста целиком, а отдельные элементы.
Глубокий серый #191919
Surface
Фон карточек и плашек, преимущественно в web — см. шаблон типовой страницы и блоки в Figma.
Бррр-белый
Блоки с большим количеством текста
Используется в web-блоках, где много текста, и в документах. Источник — отдельные блоки Tilda, этого достаточно, отдельный документ-шаблон не нужен.
Важно: движок типовой страницы (см. раздел «Тильда») создан только для основного БРРР (чёрная тема).
Бррр-белый — не его инверсия, а отдельные независимые блоки Tilda.
SHIFT+ — отличие по цвету
Только чистые cyan и magenta
Не использует градиент для акцентов — только cyan и magenta по отдельности, без смешения. Сам подстиль легче, строже и менее активен по графике, чем основной БРРР. Паттерны — у каждого стиля свои.
Общее для всех стилей
Объекты на прозрачном фоне и метафоры подходят под любой из трёх стилей — не привязаны к конкретной цветовой теме.
Основной шрифт
SF Pro Display — 5 рабочих весов
5 весов × 2 стиля (прямой + курсив) = 10 начертаний. Курсив — точечно, для кикеров и акцентных UPPERCASE-фраз, не для основного текста.
| Вес | Прямое | Курсив |
|---|---|---|
| Thin | SF-Pro-Display-Thin | SF-Pro-Display-ThinItalic |
| Light | SF-Pro-Display-Light | SF-Pro-Display-LightItalic |
| Regular | SF-Pro-Display-Regular | SF-Pro-Display-RegularItalic |
| Medium | SF-Pro-Display-Medium | SF-Pro-Display-MediumItalic |
| Semibold | SF-Pro-Display-Semibold | SF-Pro-Display-SemiboldItalic |
В папке также лежат Ultralight, Bold и Heavy (прямые и курсивные) — эти веса не в работе, в текущей практике не используются. Оставлены про запас.
Рукописный
Adventure — один вес, Regular
Файл в двух форматах (.otf / .ttf) для совместимости Mac/Windows. Применяется только в двух случаях: имитация живой подписи автора и акцентное заполнение фреймворков в презентациях.
Обязательное правило: рукописный шрифт должен визуально контрастировать с ровным набором SF Pro Display — не близкий по духу гротеск/скрипт, а явно другой характер.
⚠ Keynote и Tilda
Стили уже настроены — менять нельзя
Шрифтовые стили (размеры, веса, интерлиньяж, трекинг под каждую роль текста) уже прописаны и зафиксированы как часть системы — готовый протестированный набор, не пример использования SF Pro Display.
В Keynote — брать стили из мастер-слайдов/шаблона, не создавать новые текстовые стили поверх.
В Tilda — брать классы/токены из уже настроенных Zero-блоков, не задавать шрифт вручную через инспектор.
Любое использование шрифта вне Keynote и Tilda (посты, обложки, документы, презентации не по шаблону) — набирается по таблице весов выше, вручную.
Правило типографики
Висячие предлоги
Стараться убирать висячие предлоги (одиночный предлог/союз не должен оставаться последним словом в строке) — переносить неразрывным пробелом к следующему слову. Касается любого текста в системе.
Свобода и границы
Жёсткого правила по оформлению новых слайдов нет
С акцентами — регистром, размером, сочетанием начертаний — можно пробовать работать свободно, если это делает дизайнер осознанно под конкретную задачу.
Если экспериментировать не с кем/некогда — надёжнее пользоваться стандартными шаблонами для расположения текста и сочетания стилей и размеров, а не изобретать новое каждый раз.
Иллюстрации · 5.1
Объекты
Чёрный матовый предмет — база. Один яркий элемент — точка сбоя. Ровно один вариант акцента на объект, не смешивать между собой.
Мастер-промпт
Три варианта яркого элемента
Линия
Тонкая, светящаяся, градиент вдоль неё.
Деталь
Целый объём/элемент предмета — гранёный или стеклянный, с гладким градиентом.
Паттерн
Фирменный гранёный узор на части поверхности (нужна референс-картинка).
По факту «деталь» — самый частый выбор, «паттерн» и «линия» — точечно, под композиционную логику конкретного объекта.
Примеры
- Лук со стрелойлиния
- Матрёшка (в разрезе)деталь
- Маякдеталь
- Медведь с флагамидеталь
- График / метрикидеталь
- Оригами-лебедьпаттерн
- Гиря с пружинойдеталь
Иллюстрации · 5.3
Паттерн
Одна база в Midjourney, дальше — четыре шага доработки. Из одной композиции получаются все три версии: БРРР, Бррр-белый и SHIFT+.
1Midjourney (пример промпта)
Номер стиля (--p) — разный для каждого подстиля, задаётся в панели настроек Midjourney, не в тексте промпта:
БРРР — --p m7486838947083976740
SHIFT+ — --p m7489675461031624724
Stylize и Chaos — общие для обоих: --stylize 250, --chaos 50.
В Midjourney создаётся только креативная часть паттерна — сама форма и композиция. Вся доработка (грани, версии для SHIFT+ и белого фона) делается дальше в Nano Banana Pro по промптам ниже.
2Доработка — даёт версию БРРР
3Доп. шаг — для SHIFT+ (только контур)
4Доп. шаг — для белого фона (даёт версию БРРР-белый)
Итог: 3 версии из одной базы
| Версия | От какого шага | Заливка | Фон |
|---|---|---|---|
| БРРР | Шаг 2 | Сплошная, гранёная | Чёрный |
| БРРР-белый | Шаг 2 → шаг 4 | Сплошная, гранёная | Белый |
| SHIFT+ | Шаг 2 → шаг 3 | Только контур | Чёрный |
Готовые паттерны уже есть на все случаи жизни — отдельно для БРРР (+ белый) и SHIFT+ (только линиями на чёрном фоне). Этот процесс нужен только для новых.
Инструмент
Всё собирается в Magnific
Один аккаунт «БРРР-эффект» на всё — объекты, метафоры, паттерны и ИИ-аватар генерируются в разных пространствах одного и того же сервиса. Ниже — доступ, дальше по разделам будет только ссылка сюда.
Доступ
| Сервис | Логин | Пароль |
|---|---|---|
| Magnific | try@betterthan.today | Google-----2017 |
ИИ-аватар
Образ-помощник, не подмена реального человека
Цифровой, ИИ-сгенерированный образ Ивана Дьяченко. Не фотография и не должен выдаваться за неё — образная метафорическая репрезентация, используется в обложках видео и SMM-постах в роли «ИИ-помощника».
Официальные фото
- Пресс-материалы, статьи в СМИ
- Официальные сайты
- Презентации
- Официальные документы
ИИ-аватар
- Обложки видео — метафора темы/образа
- SMM-обложки постов — в роли «ИИ-помощника»
Правило
Если контекст требует доверия к реальному человеку — только фото, не аватар. Аватар не выдаётся за реальное фото и не используется там, где по контексту ожидается документальная точность.
Ограничение — юридическая формулировка
Цифровой образ Ивана Дьяченко не может быть использован для создания, публикации или распространения материалов, которые:
— порочат честь, достоинство и деловую репутацию автора (ст. 152 ГК РФ);
— искажают образ автора способом, не соответствующим действительности, представляют его в ложном, оскорбительном или дискредитирующем свете;
— ассоциируют автора с высказываниями, действиями, продуктами или позициями, которые он не совершал и не одобрял.
Любое использование в негативном, порочащем или вводящем в заблуждение контексте — нарушение правила, требует отдельного письменного согласования с автором либо не допускается вовсе.
Референс-лист персонажа
Собирается один раз, дальше переиспользуется как база для всех генераций. Композиция: слева — фигура в полный рост, справа — сетка 3×2 (верхний ряд — анфас / 3-4 вправо / 3-4 влево, нижний ряд — улыбка / удивление / задумчивость). Костюм-константа: чёрный костюм-тройка, ворот расстёгнут, верхняя пуговица рубашки расстёгнута.
Процесс создания обложек
Генерируется в Magnific — доступ и ссылка на сервис здесь. Всегда используется карта персонажа (референс-лист), не отдельные фото. Разрешение — 2К.
| № | Канвас | Что делаем |
|---|---|---|
| 1 | Создание персонажа | Nano Banana Pro, промпт — в окне генерации |
| 2 | Удаление фона | Соответствующее окно на том же канвасе |
Базовый образ: костюм-тройка + очки. Разрешено: снять пиджак, закатать рукава. Точечно: добавлять фирменные акценты cyan/magenta в одежду, аксессуары, освещение.
Доп. файлы
QR, лого клиентов, фото Ивана
Вспомогательные наборы файлов, которые используются точечно в разных материалах системы.
QR
В разработкеВойдёт в Keynote-белый, будет лежать в Toolbox рядом с Лого.
Лого клиентов
10 клиентов, ч/б, прозрачный фон
Сбер · Яндекс · Авито · ОЗОН · Райффайзен банк · СОКОЛОВ · Х5 · НСПК · SK · Билайн — каждый в двух монохромных вариантах.
Белый вариант — на тёмных поверхностях (чёрный фон Бррр), чёрный вариант — на светлых (белый фон Бррр-белый / светлые карточки).
СкачатьОфициальные фото Ивана
Сетка: торс/портрет × нейтральные/эмоции
Можно использовать
Пресс-материалы и статьи в СМИ, официальные сайты, презентации, официальные документы — где важна достоверность и факт присутствия реального человека.
Нельзя
Заменять на ИИ-аватар там, где по контексту ожидается документальная точность (см. блок «ИИ-аватар»).
Контент
Посты
Шаблоны постов организованы по источнику картинки — те же типы, что и в разделе «Иллюстрации». Ниже — отдельно БРРР и отдельно SHIFT+.
БРРР-посты — чёрный фон, 4 типа
С объектом
Иллюстрация-предмет крупным пятном
С паттерном
Паттерн, увеличенный и обрезанный кадром
С сюжетом
Иллюстрация-метафора из генератора сюжетов
С ИИ-аватаром
Круглый кадр с аватаром Ивана
Каркас один для всех: картинка на весь кадр → крупный заголовок-крючок вверху → короткая подпись-вывод в плашке снизу.
Как выбирать тип
- Объект — для конкретной предметной мысли
- Паттерн — для абстрактного состояния/эмоции
- Сюжет-метафора — для нарративной идеи
- Аватар — когда пост говорит от лица «ИИ-помощника» (для нейтрального факта — реальное фото, см. блок «ИИ-аватар»)
SHIFT+-посты
Тот же чёрный фон, легче по графике
Без градиента, только объект или паттерн — метафора и аватар в постах SHIFT+ не используются. Лого — компактная плашка SHIFT+, без отдельного блока-цитаты снизу: весь текст держится одним блоком у заголовка.
Контент
Видеообложки YouTube
Каркас фиксированный, меняется только источник картинки — та же логика, что и в постах и иллюстрациях.
Общий каркас — одинаков во всех 5 типах
- Заголовок крупно слева
- Подзаголовок — короче, пару слов о видео
- Подпись «Креативность в бизнесе с Иваном Дьяченко»
- Лого-плашка «Бррр» внизу слева
- Картинка справа, крупным кадром
5 типов по источнику картинки
С объектом
Иллюстрация-предмет
С метафорой
Иллюстрация-метафора
С сюжетом
Из генератора сюжетов
С ИИ-аватаром
Аватар на весь кадр справа
Фото + паттерн
Паттерн-подложка + вписанное фото Ивана
«Фото + паттерн» — единственный смешанный тип, не встречается больше нигде в системе. Сочетает достоверность лица и фирменную графику.
Как выбирать тип
Та же логика, что и в постах: объект — под конкретную мысль, метафора/сюжет — под нарративную идею, аватар — когда ролик подаётся от лица «ИИ-помощника», фото+паттерн — когда нужна одновременно достоверность и фирменная графика.
Контент · Keynote
Keynote SHIFT+
Файл «Базовый шаблон SHIFT+.key» — не линейная презентация для показа как есть, а банк шаблонов. Фон на всех слайдах — line-art версия паттерна (без заливки, только контур).
26 слайдов, 6 типов
Легенда акронима — слайд «Расшифровка»
| Рус | Eng | |
|---|---|---|
| S | Запрос | Scope |
| H | Фокусировка | Highlight |
| I | Генерация | Ideation |
| F | Фильтрация | Filter |
| T | Прожарка | Tune |
| + | Экспертиза | — |
«+» в названии — не декоративный знак, а шестая стадия «Экспертиза» сверх пяти основных букв акронима.
Контент · Keynote
Keynote документы
Шаблон Keynote для документов — коммерческие предложения, методические материалы. Структура и правила появятся здесь, как только файл будет готов.
Ссылку на файл добавим позже — сюда встанет тот же формат, что и в блоке «Keynote SHIFT+»: разбор слайдов, что дублировать, что использовать как есть, и кнопка скачивания в конце.
Тильда
Страница продукта
Движок собирает типовую продающую страницу БРРР из текстового ТЗ и одной картинки-паттерна. Работает только для основного чёрного стиля — не путать с блоками Бррр-белого из предыдущего раздела.
Готовые шаблоны блоков
Для сборки обычных страниц (не по движку ниже) — независимые наборы блоков.
Доступ
| Сервис | Логин | Пароль |
|---|---|---|
| Тильда | polina@betterthan.today | Tilda-----2017 |
Обязательные блоки — 3 из 9
Первый экран → блок айдентики (3 карточки + паттерн с параллаксом + гигантская цифра) → стоимость. Без любого из трёх страница не собирается.
Каталог модулей
| Код | Что | Сколько раз |
|---|---|---|
| hero | Первый экран | 1, обязательно |
| identity | 3 карточки + паттерн + цифра | 1, обязательно |
| offer | Цена | 1, обязательно |
| lead | Кикер + лид + текст | сколько нужно |
| lead2 | Две карточки, цифра со стрелкой | сколько нужно |
| list | 3–6 пунктов, две колонки | сколько нужно |
| tags | Перечень названий | сколько нужно |
| cols3 | Три колонки | сколько нужно |
| tariffs | Варианты участия | 1 |
Один смысловой раздел исходника = один модуль. Список длиннее 6 пунктов → два модуля list. Больше 12 модулей — резать по приоритету: проблема → суть → содержание → доказательство → тарифы → цена.
Порядок: первый экран → смысловые модули → блок айдентики (примерно на трети страницы) → остальные модули → тарифы → стоимость.
Чего нет и не должно быть: меню, подвал, блок «автор», блок «клиенты» — это Tilda-алиасы, уже есть на сайте отдельно.
⚠ Жёсткие правила
Радиус скругления 20px, фон карточки #191919, фон страницы #000000 — других значений нет.
Отступы: между блоками 20px, между карточками в ряду 8px.
Градиент linear-gradient(90deg,#EC297B,#00ADEE) — только на имени продукта, кикерах, крупных цифрах, обводке главной кнопки, больше нигде.
Текст, не влезающий в поле, не обрезается — переезжает в соседний модуль.
Проверка на 4 ширинах: 1200 / 960 / 640 / 360 — без горизонтальной прокрутки.
Картинка
Одна на страницу, квадрат от 2000×2000, чистый чёрный фон, только cyan/magenta. Встаёт в 3 места: первый экран, блок айдентики (с параллаксом), блок стоимости.
Как вставить в Tilda
- Сначала картинка — иначе код зависает при вставке (картинка зашита строкой ~150 000 символов). Загрузить в любой блок Tilda → скопировать ссылку → вставить в код вместо data-URI
- Создать страницу → добавить блок T123 — HTML-код
- Вставить код (через Блокнот на Windows; на Mac — файл переименовать в
.txt, иначе TextEdit покажет готовую страницу, а не код) - Убрать двойные отступы блока (сверху/снизу — 0)
- Меню и подвал — обычные блоки Tilda сверху/снизу, в файле их специально нет
Что внутри скилла: SKILL.md (инструкция), template.html (готовый код), references/brief.md (как собирать ТЗ), references/tokens.md (все переменные), references/blocks.md (каталог модулей).
Для ИИ-агентов
MD-файл для агента клиента
Если сотрудник клиента попросит своего ИИ-ассистента сделать пост, слайд или страницу в стиле Бррр — вот файл, который агент может взять целиком. Только правила и факты, без картинок и пояснений «почему так исторически сложилось».
Что внутри
- 01Лого — два знака, охранное поле
- 02Цвет — токены и правила
- 03Шрифт — веса, правила Keynote/Tilda
- 04ИИ-аватар — правила, включая юридическую формулировку
- 05Доп. файлы — QR, лого клиентов, фото Ивана
- 06Контент — Keynote, посты, обложки, генератор сюжетов
- 07Тильда — блоки и движок страницы продукта
- 08Иллюстрации — три типа и когда какой
Если что-то в этом файле разойдётся с текущей страницей гайда — страница на Тильде считается источником истины.
