Токены, типографика и готовые блоки для всех печатных и веб-материалов: гайдов, лид-магнитов, саммари консультаций, одностраничников. Копируется целиком блоком <style> из этого файла — дальше собирается страницами A4.
Палитра, акцентные темы страниц, шрифты и размеры, правила страницы A4
Карточки, шаги, сравнение, списки, врезка — из чего собирается обычная страница
«Как обычно / как лучше», разбор на части, лестница, режимы — для методичек
Базовый фон страницы — --paper #F8FAF6, карточки белые, текст --ink #1B2418. Зелёный — системный акцент бренда. Каждая страница получает свою акцентную тему, чтобы разделы отличались, но палитра оставалась одной.
Класс не нужен. Акцент — --green-600. Ей верстаются обложка, вводные и финальные страницы.
Класс на странице: .t-terra и так далее. Меняет только акцент, фон и карточки остаются те же.
Только для «как не надо»: левая половина блока .pair. Больше нигде не появляется.
Правило страницы. Каждая секция — это <div class="page t-тема"> ровно на A4. Высота фиксированная и содержимое обрезается, поэтому текст пишется под объём страницы, а не наоборот. Внизу всегда .foot с названием материала, каналом и номером.
.cards — ряд равных карточек с тегом. Основная рабочая лошадка: перечисление сопоставимых вещей, два-четыре в ряд.
Один абзац, 8.7pt. Если текста больше пяти строк — карточка не подходит, нужен другой блок.
Теги пишутся капсом и в акцентном цвете страницы, поэтому меняются вместе с темой.
.flow — последовательность шагов или этапов в ряд, у каждого мелкая надпись сверху.
Короткое описание в две-три строки.
Порядок читается слева направо.
Больше четырёх в ряд не ставить.
.cmp — две колонки для противопоставления: серая слева, белая с тенью справа. Внутри правой можно добавить .ex — пример на светло-зелёной подложке.
Серый фон читается как «исходное состояние», без оценки.
Белая карточка с тенью — сюда идёт вывод.
.note — врезка с полосой в цвете темы. Для оговорки, предупреждения или правила. На странице уместна одна.
.pair — «как обычно / как лучше». Левая половина коралловая, правая зелёная, под каждой можно дать .why — почему так.
.comp — разбор понятия на составные части. Сверху название и его английский вариант, внутри две-три части, снизу .ask — вопрос к читателю.
Что она значит, в двух строках.
Части выравниваются по ширине.
.stairs — три ступени по возрастанию: первая серая, третья самая высокая с зелёной рамкой. Для уровней, этапов зрелости, лестницы продуктов.
Ещё есть .modes — три равные колонки-режима, одну из которых можно подсветить классом .accent, и .scheme — белая карточка под встроенную SVG-схему с подписью .sch-cap.