Живой документ: правится вместе с проектом, страница пересобирается из того же файла, что читают скрипты сборки.
Один источник правды. Всё, что не описано здесь, — импровизация, и её быть не должно. Когда стиль устоится, этот файл станет скиллом: коллега ставит его одним файлом и получает такой же результат, не переписывая промпты.
Персонализированные детские продукты, собранные с помощью ИИ: книги по фото ребёнка, раскраски, маскоты, учебные материалы, видео. Тематика расширяется — стиль не меняется.
Аудитория колод — B2B: детские сады, центры развития, языковые и онлайн-школы, робототехника. Читатель считает деньги, а не умиляется. Отсюда тон: тепло по форме, по-деловому по содержанию.
| Параметр | Значение |
|---|---|
| Размер слайда | 1920 × 1080 |
| Поля | 60 px со всех сторон |
| Ширина контента | 1800 px |
| Колонок / промежуток | 12 / 24 px |
| Формат исходника | .src.html → сборка python3 brand/build.py |
| Дальше | импорт готового .html в Figma |
Вёрстка только на flexbox и grid. Запрещено: transform: scale, position: absolute для смысловых блоков, текст картинкой, <canvas>. Всё это ломает импорт в Figma — слои приезжают одним растровым пятном вместо редактируемых объектов.
Палитра ниже — наша, фирменная. Для конкретного заказчика её можно подменить скином: <!--tokens theme=shkola800--> в колоде. Меняются только цвета, роли остаются те же. Директор открывает первый слайд и видит палитру своего сайта — сразу понятно, что колоду готовили под него. Как собрать новый скин — brand/themes/README.md.
| Роль | HEX | Где применяем |
|---|---|---|
| Коралловый | #F3754B | Заголовки слайдов, деньги, выводы, CTA, финальная плашка |
| Синий | #38ADF8 | Механика продукта, факты, инфо-блоки, шапки таблиц |
| Чернила | #16181D | Основной текст, слайды-разделители |
| Подложка | #F5F5F5 | Нейтральная карточка |
| Белый | #FFFFFF | Фон слайда по умолчанию |
Смысловое разделение, а не украшение: синий рассказывает *как это работает*, коралловый — *сколько это стоит и что вы с этого получите*. Если на слайде нет ни денег, ни вывода — кораллового на нём нет, кроме заголовка.
Третьего акцента нет. Ядовитый зелёный с фона маскотов (#73D914) в палитру не входит — по итогам ревью его убираем везде, включая подложки под персонажей.
с близкой метрикой; подмена не сдвинет вёрстку.
brand/tokens.css. Промежуточных кеглей не изобретаем.<br>.Phosphor Duotone, лицензия MIT. Локально лежат в brand/icons/, вставляются инлайновым SVG через маркер <!--icon:имя class="icon icon--lg"-->.
Нужна новая иконка — берём из того же набора (npm i @phosphor-icons/core, папка assets/duotone) и кладём в brand/icons/. Смешивать наборы нельзя: разная толщина линии и сетка сразу читаются как неряшливость.
Иконка — маркер смысла, а не заполнитель пустоты. Нет смысла — нет иконки.
Смысловая структура вынесена в отдельный файл — STRUCTURE.md. Там восемь обязательных функций, которые колода закрывает всегда, набор усиливающих слайдов под конкретную сделку и чек-лист перед отдачей. Начинать сборку новой презентации нужно оттуда, а не с вёрстки.
Здесь — только визуальная сторона: какой слайд какой раскладкой собирается.
Типовой каркас B2B-колоды, от которого отталкиваемся:
1. Титул — что предлагаем и кому. Крупное фото или коллаж физических макетов. 2. Кто мы — Riverstart, опыт, клиенты, свой продакшен. 3. Как вы зарабатываете — механика в синем блоке + цифры выгоды. 4.–6. Продукты, по одному на слайд: описание, прайс, кейсы партнёров, фото. 7. Брендирование — как продукт становится их продуктом. 8. Экономика / план работ — таблица или главная цифра. 9. Преимущества — три тезиса 01/02/03. 10. Финал — следующий шаг и контакты.
Ориентир — 10–12 слайдов.
slide-library.html — эталон стилистики, а не набор форм для отливки. Раскладку под каждый слайд собираем заново, исходя из контента. Неизменны только цвет, шрифт, шкала, сетка и скругления — то, что делает колоду узнаваемой. Всё остальное подвижно.
| Нельзя менять | Можно и нужно менять |
|---|---|
| Палитра и смысл акцентов | Количество и порядок блоков |
| Гарнитуры и шкала кеглей | Раскладку: колонки, пропорции, что слева/справа |
| Поля 60 px, промежуток 24 px | Плотность слайда |
| Радиусы 16 / 32 / 56 | Есть ли на слайде картинка, иконки, таблица |
| Набор иконок | Соотношение текста и визуала |
Контент диктует плотность, а не размер отдельной надписи. Класс ставится на .slide, и вся шкала пересчитывается сама — компоненты читают переменные:
| Класс | Объём | Когда |
|---|---|---|
.slide--airy | до ~350 знаков, 1–3 блока | Титул, разделитель, один тезис, финал |
| — (по умолчанию) | ~350–900 знаков, 3–4 блока | Норма, ~80% слайдов |
.slide--dense | ~900–1600 знаков, 5–8 блоков | Продукт с прайсом и двумя кейсами |
.slide--data | таблицы, планы, прайс-листы | Мелкая шкала + табличные цифры |
Руками кегли не правим. Если не влезло и в dense — слайд надо делить на два, а не жать дальше: нечитаемый слайд хуже двух спокойных.
| Что на слайде | Раскладка |
|---|---|
| Тезис + доказательство визуалом | .grid--kv — текст слева, фото справа |
| Текста заметно больше визуала | .grid--kv-wide (940 px под текст) |
| 3–8 равнозначных блоков | .grid--auto со style="--min:380px" — колонки считаются сами |
| Один аргумент цифрой | Крупная карточка + ряд второстепенных снизу |
| Последовательность шагов | Ряд карточек с .num, все одного цвета |
| Свод данных | .table + два итоговых блока под ней |
.grid--auto — рабочая лошадка гибкости: добавили пятый блок — раскладка перестроилась, класс менять не надо. .grid--top не даёт коротким карточкам растягиваться на всю высоту.
а не темой: «Пробное занятие, после которого остаются», а не «Пробное занятие».
+45% без «повторных оплат» — шум.форматом «Главная цифра», а не набирается вдвое крупнее внутри общего ряда.
или плотность выбрана не та.
chip--white. У обычного чипа фон совпадает с фономсерой карточки, и он исчезает. Проверено на живом слайде.
dense. Ниже с проектора не читается.Основной текст в карточке — .body (23 px / 130%), а не .small: описание читают, а не просматривают. В dense ужимаются заголовки и отступы, но не он.
среди трёх серых говорит «этот шаг важнее», хотя все четыре — просто шаги. Цвет несёт смысл, а не ритм: если четвёртый блок ничем не отличается по сути, он не отличается и по цвету.
спорят за внимание и не добавляют смысла:
направления. Порядок в таком списке случаен, нумеровать его нечестно.
Гибкость без проверки превращается в разнобой. Перед отдачей:
python3 brand/check.py decks/<папка>/deck.html
Ловит переполнение за 1080, мёртвые зоны (контент занимает меньше 55% высоты), текст мельче 16 px и незагрузившийся шрифт. Первый запуск — поставить браузер: pip install playwright && python3 -m playwright install chromium.
Картинки живут файлами в assets/ и подключаются обычным <img src="../../assets/имя.jpg">. При сборке build.py пережимает их до 1600 px и вшивает в HTML как data-URI: файл колоды остаётся самодостаточным, а в Figma картинки доезжают (внешние ссылки — нет).
Чёрновая генерация допустима только как заглушка — чтобы на ревью слайд читался целиком, а не через серые прямоугольники. Такие файлы кладём в assets/draft/ и в финал не пускаем.
в колоду не идут — по качеству видно.
кроме слайдов про личный кабинет.
mkdir -p decks/2026-10-mascots cp templates/slide-library.src.html decks/2026-10-mascots/deck.src.html # оставить нужные слайды, заменить контент python3 brand/build.py decks/2026-10-mascots/deck.src.html
Готовый deck.html открывается в браузере и импортируется в Figma. tokens.css при сборке вшивается внутрь — файл самодостаточен.
Правим стиль только в brand/tokens.css. Инлайновые стили в слайдах допустимы для разовой геометрии конкретного слайда (высота колонки, ширина трека) — но не для цвета, кегля и скругления.