diff --git a/content/ru/guide/colour/forms.md b/content/ru/guide/colour/forms.md
index f37ef4c5..1c68b26f 100644
--- a/content/ru/guide/colour/forms.md
+++ b/content/ru/guide/colour/forms.md
@@ -5,52 +5,49 @@ description: "На каком месте стоит форма, какое по
# Формы: фон и группировка
-У формы нет своего фона: она стоит на месте, куда её поставили, — на
-странице, в карточке или в шторке. Поля по умолчанию с рамкой. Группы
-делит воздух и заголовок, а не рамка. Правило одно для всех проектов, поэтому
-формы в разных разделах выглядят одинаково.
+У формы нет своего фона: она стоит прямо на странице, в карточке или в
+шторке. Поля — с рамкой, группы делит воздух и заголовок. Ниже короткая
+форма, собранная по всем правилам страницы.
## Пример
-### Короткая форма на странице
+:::example {id="guide/colour/forms/page" label="Короткая форма на странице"}
+:::
-Форма об одном — создать проект, войти, оставить заявку — стоит прямо на
-странице. Карточка вокруг неё ничего не отделяет и только добавляет рамку.
+Что здесь видно:
-:::example {id="guide/colour/forms/page" label="Форма на странице"}
-:::
+- форма стоит прямо на странице, под заголовком страницы, — без карточки и
+ своего фона ([где стоит форма](#где-стоит-форма));
+- все поля с рамкой ([какое поле брать](#какое-поле-брать));
+- между полями малый отступ, перед кнопками — большой; группа одна, поэтому
+ заголовка у неё нет ([отступы и группы](#отступы-и-группы));
+- код короче названия — и поле у него короче ([строки и ширина](#строки-и-ширина)).
-### Страница настроек: карточка на раздел
+## Где стоит форма
+
+Короткая форма об одном — создать проект, войти, оставить заявку — стоит
+прямо на странице, как в примере выше. Карточка вокруг неё ничего не
+отделяет и только добавляет рамку.
Разделы настроек меняют независимо, поэтому у каждого своя карточка с
заголовком. Кнопки — одни на форму, под последней карточкой.
-:::example {id="guide/colour/forms/cards" label="Карточки разделов"}
+:::example {id="guide/colour/forms/cards" label="Страница настроек: карточка на раздел"}
:::
-### В шторке и окне
-
Шторка и окно сами уже карточка: внутри карточек нет. Группы — заголовком,
между ними можно провести линию.
-:::example {id="guide/colour/forms/panel" label="Форма в панели"}
+:::example {id="guide/colour/forms/panel" label="Форма в шторке"}
:::
-## Где стоит форма
-
-| Где | Место | Группы |
-|:---|:---|:---|
-| Короткая форма об одном | страница | заголовки и воздух |
-| Страница настроек | страница, карточка `sf-card` на раздел | карточка на раздел, кнопки под последней |
-| Шторка, окно | панель | заголовки, линия между группами; карточек внутри нет |
-| Серая область (боковая панель, подложка) | — | сначала поставьте карточку, потом форму в неё |
-| Серая плашка внутри карточки («Итого», условия) | плашка | поля с рамкой |
-
-Фон формы выбирает место, а не форма. Поэтому классы фона на самой форме не
-нужны: на серую область форму без карточки не ставят — поля на ней читаются
-как дыры. Какие места бывают и как они выглядят — в руководстве
+На серую область — боковую панель, подложку — форму без карточки не ставят:
+сначала карточка, потом форма. Какие места бывают — в руководстве
[Фоны](/ru/guide/colour/surfaces/).
+:::example {id="guide/colour/forms/do-place" label="Как делать: место формы"}
+:::
+
## Какое поле брать
Поле с рамкой — вид по умолчанию на любом месте и в любой форме: его край
@@ -58,12 +55,17 @@ description: "На каком месте стоит форма, какое по
Поле с заливкой (`appearance="filled"`) — только для поиска и фильтров над
таблицей или списком и только на белом месте: на странице, в карточке, во
-всплывающей панели. В одной форме виды не смешивают. На серой области, серой
-плашке и цветном фоне заливку не берут: она сливается с местом.
+всплывающей панели. На серой области, серой плашке и цветном фоне заливку не
+берут: она сливается с местом.
:::example {id="guide/colour/forms/filter" label="Фильтры над таблицей"}
:::
+В одной форме виды не смешивают.
+
+:::example {id="guide/colour/forms/do-field" label="Как делать: вид поля"}
+:::
+
## Отступы и группы
| Между чем | Отступ |
@@ -81,33 +83,44 @@ description: "На каком месте стоит форма, какое по
`fieldset` рамки нет. Линию между группами проводят только вместе с
заголовком и только в шторке, окне или одной карточке.
+:::example {id="guide/colour/forms/do-groups" label="Как делать: группы"}
+:::
+
## Строки и ширина
В одну строку ставят только части одного ответа: фамилию и имя, город и
индекс, «с» и «по». Ширина поля подсказывает длину ответа: индекс и код —
короткие (`w-e6`, 8rem), телефон и дата — средние (`w-f6`, 16rem), имя,
-почта и адрес — во всю колонку. Колонка формы не шире `max-w-h0` (40rem). Ширину задаёт обёртка поля:
-`
`.
+почта и адрес — во всю колонку. Колонка формы не шире `max-w-h0` (40rem).
+Ширину задаёт обёртка поля: `
`.
Подпись — над полем: глаз идёт одной линией, и на телефоне ничего не
-перестраивается. Колонка подписей слева подходит для чтения записи, а не для
-правки.
+перестраивается.
:::example {id="guide/colour/forms/widths" label="Строки и ширина"}
:::
+:::example {id="guide/colour/forms/do-widths" label="Как делать: строки"}
+:::
+
На телефоне форма — одна колонка: строки складываются в столбик, подписи
остаются над полями, карточки сохраняют свои поля, кнопки стоят в конце
формы.
-## Как делать
-
-:::example {id="guide/colour/forms/do-dont" label="Как делать"}
-:::
-
-- **Поле с рамкой по умолчанию.** Заливка — только для поиска и фильтров
- над таблицей.
-- **Форму на серую область не ставят.** Сначала карточка, потом форма.
-- **Группы делит воздух.** Рамка вокруг группы спорит с рамками полей.
+## Проверьте форму
+
+- **Место.** Форма стоит на странице, в карточке раздела или в шторке. Своего
+ фона у неё нет; на серую область — сначала карточка.
+ [Где стоит форма](#где-стоит-форма)
+- **Поле.** Все поля с рамкой. Залитые — только поиск и фильтры над таблицей.
+ [Какое поле брать](#какое-поле-брать)
+- **Отступы.** Между полями `gap-1`, между группами и перед кнопками `gap-3`.
+ [Отступы и группы](#отступы-и-группы)
+- **Группы.** Заголовок — когда групп больше одной. Рамок вокруг групп нет,
+ вопрос с вариантами — `fieldset` без рамки. [Отступы и группы](#отступы-и-группы)
+- **Ширина.** Поле по длине ответа, колонка не шире 40rem, в строку — только
+ части одного ответа. [Строки и ширина](#строки-и-ширина)
+- **Телефон.** Одна колонка, подписи над полями, кнопки в конце.
+ [Строки и ширина](#строки-и-ширина)
## См. также
diff --git a/content/ru/guide/index.md b/content/ru/guide/index.md
index c70bfe56..2fad55ef 100644
--- a/content/ru/guide/index.md
+++ b/content/ru/guide/index.md
@@ -1,95 +1,88 @@
---
title: "Руководство"
-description: "Руководство описывает SIMAI Framework целиком: устройство, подключение и обновление, внешний вид, утилиты, компоненты, смарт-компоненты, макеты, стандарты и проверки."
+description: "С чего начать работу с SIMAI Framework: пример страницы из всех уровней, пути по задаче, карта руководства и следующие шаги."
---
# Руководство
-Это руководство описывает SIMAI Framework целиком: что это такое, как он
-устроен, как его подключить и обновлять, из чего складывается внешний вид, как
-работают утилиты, компоненты, смарт-компоненты и макеты и какие стандарты и
-проверки обеспечивают их согласованность.
+Руководство объясняет, как устроен SIMAI Framework и почему: из каких уровней он
+состоит, как их подключить и как они работают вместе. Полные списки классов,
+токенов и настроек — в справочниках.
-## Что это за документ
+## Пример
-Руководство объясняет устройство Framework: зачем нужна каждая часть, как она
-работает и как связана с остальными. Это не справочник.
+Карточка заказа ниже собрана из всех уровней, с которыми вы встретитесь в
+руководстве.
-- Полные списки классов, токенов, настроек и событий находятся в справочниках
- документации: «Утилиты», «Компоненты», «смарт-компоненты» и справочнике
- токенов.
-- Количества, которые меняются от поставки к поставке (сколько компонентов,
- токенов, страниц), в тексте не приводятся. Их показывают справочники.
-- В тексте используются только канонические имена классов, атрибутов, событий
- и токенов. Как Framework сообщает об устаревших именах и как перевести на
- канонические имена существующий проект, описано на страницах
- [Жизненный цикл изменений](/ru/guide/connection/change-lifecycle/) и [Как обновить проект](/ru/guide/connection/updating/).
-
-## Как читать
-
-Части идут от простого к сложному: что это → как подключить → из чего состоит
-вид → как применять его классами → компоненты → смарт-компоненты → композиция
-страниц → стандарты и проверки.
+:::example {id="guide/order-card" label="Карточка заказа"}
+:::
-| Читатель | Разделы |
+Что здесь видно:
+
+1. **Токены и тема.** Фон карточки, рамка, цвет текста и скругление — роли
+ `--sf-surface-card`, `--sf-outline-variant`, `--sf-on-surface-variant`,
+ `--sf-radius--surface`.
+ В тёмной теме разметка та же, меняются значения ролей
+ ([Токены, цвет и темы](/ru/guide/colour/)).
+2. **Утилиты.** Раскладка и промежутки — классы `flex`, `flex-wrap`, `gap-1`,
+ `gap-2`: один класс — одно свойство
+ ([Утилиты и раскладка](/ru/guide/utilities/)).
+3. **Компоненты на классах.** Сама карточка — `sf-card` на обычном
+ ``, кнопка «Отправить» — `sf-button` на обычном `