---
tags: [rule, design, html]
created: 2026-08-02
---

# Дизайн-система вёрстки — правило

Все HTML-материалы Наташи (гайды, лид-магниты, саммари консультаций, одностраничники, карты) верстаются в **одной** дизайн-системе. Никаких других шаблонов не изобретать.

**Живой кит:** `rules/{rule} дизайн-система вёрстки – 2026-08-02.html` — открывается в браузере, показывает все блоки и правила. Блок `<style>` из него копируется в новый материал целиком.

**Первоисточник:** `projects/channel/{channel} {source} как работать с AI гайд html – 2026-08-02.html` — гайд «Как работать с AI», на нём система собрана.

## Два режима сборки

Токены, шрифты и логика блоков общие. Раскладка зависит от типа материала:

| Режим | Для чего | Как устроено |
|---|---|---|
| **Печатный** | гайды, лид-магниты, методички, одностраничники | страницы `.page` ровно на A4, фиксированная высота, поля 16 мм, футер с номером страницы |
| **Веб** | саммари консультаций, отчёты, разборы для клиента | обычная страница со скроллом: центрированная колонка `max-width: 860px`, обложка на пол-экрана, секции-полосы, появление блоков при скролле |

Веб-режим по механике повторяет саммари Smartway и саммари ИИ-мастерской (обложка → навигация → секции с карточками → шаги → финальный блок → футер), но в токенах этой системы. **Саммари никогда не верстается страницами A4** — это не гайд.

Эталон веб-режима: `projects/consulting/{consulting} {article} маша dating саммари консультации – 2026-08-02.html`.

**Цвет и плотность в веб-режиме.** Зелёный — не единственный цвет системы, а цвет по умолчанию. Каждая секция берёт свою акцентную тему (`.t-terra`, `.t-teal`, `.t-indigo`, `.t-sand`, `.t-mint`). Но тема — это **только цвет текста и линий**: номер секции, метка строки, буллит, полоса врезки. Заливками и карточками её не раскрашивать: цветные плашки одна за другой читаются как пёстрая методичка.

**Плашки: три типа, у каждого одна работа.** Плашка ставится там, где меняется тип речи, а не для украшения. Разрешённые:

1. **Врезка** `.aside` — светлая подложка в цвете темы, метка капсом сверху. Для любой ремарки «от Наташи»: вывод из блока, пример из своего опыта, оговорка. Одна и та же на всех уровнях — и внутри секции, и внутри гипотезы.
2. **Главная мысль** `.statement` — единственная тёмная заливка на всю страницу. Ровно одна.
3. **Развилка** `.swap` — одна плашка на две половины, коралловая «отложить» и зелёная «вместо этого».

Всё остальное — воздух и волосяные линии: перечисления идут строками с разделителями, а не сеткой карточек; гипотезы разделяются линией, а не рамкой с тенью. Если блок не попадает ни в один из трёх типов — он остаётся текстом.

**Навигация обязательна.** Липкая полоса под обложкой: пилюли-ссылки на разделы, активный подсвечивается акцентом своей секции при скролле. На печати скрывается.

## Как собирать новый материал (печатный режим)

1. Скопировать `<head>` со всем блоком `<style>` из кита, поменять только `<title>`.
2. Дальше — страницы: `<div class="page t-тема">` … `</div>`, каждая ровно A4.
3. Первая страница — `.page.cover`: `.kicker`, `h1`, `.cov-lede`, оглавление `.cov-toc` из `.toc-row`, внизу `.cov-foot` из трёх колонок.
4. Внутренние страницы: `.sec-head` (иконка + номер + `h2`), `.lead`, блоки, внизу `.foot` с названием материала, каналом и `.pagenum`.

## Основа

- Фон `--paper #F8FAF6`, карточки белые, текст `--ink #1B2418`, линии `--line #E4E9E0`.
- Системный акцент — зелёный (`--green-600 #3A7523`).
- Темы страниц: `.t-terra`, `.t-teal`, `.t-indigo`, `.t-sand`, `.t-mint` — меняют только акцент.
- Коралловый — служебный, только для «как не надо» в блоке `.pair`.
- Шрифты: **Geologica** — заголовки, **Onest** — текст.

## Блоки

| Класс | Для чего |
|---|---|
| `.cards` | ряд равных карточек с тегом — перечисление сопоставимых вещей |
| `.flow` | последовательность шагов или этапов в ряд |
| `.cmp` | две колонки: «как есть» (серая) против «как предлагаю» (белая), внутри `.ex` — пример |
| `ul.plain` | список с кружками в цвете темы |
| `.note` | врезка-оговорка с полосой, одна на страницу |
| `.pair` | «как обычно / как лучше» — коралловая и зелёная половины, `.why` под каждой |
| `.comp` | разбор понятия на части + вопрос `.ask` внизу |
| `.stairs` | три ступени по возрастанию — уровни, лестница продуктов |
| `.modes` | три равные колонки-режима, одну можно выделить `.accent` |
| `.scheme` | белая карточка под встроенную SVG-схему |
| `.mark` | салатовый маркер по тексту, один-два на страницу |

## Ограничение, о котором легко забыть

Высота страницы фиксирована (A4) и содержимое **обрезается**. Текст пишется под объём страницы, а не наоборот: не влезло — резать текст или выносить на следующую страницу, а не сжимать вёрстку.
