---
id: pattern.page.legal-editorial
status: stable
version: 1.0.0
owner: AI CJM
evidence: https://aicjm.ru/edu/legal/privacy/
---

# Legal and editorial page pattern

## Назначение и evidence

Паттерн для политик, реквизитов, образовательных сведений и длинных редакционных
материалов. Production evidence: `/edu/legal/privacy/` и `/edu/education/` с глубокой
иерархией точных разделов.

## Композиция

`header → breadcrumbs → title + version/effective date → optional table of contents →
narrow rich-text body → referenced documents/downloads → contact/update note → footer`.
В длинном документе navigation rail может быть sticky, но DOM хранит логический порядок.

## Компоненты

Stable registry IDs: `site-header`, `primary-nav`, `legal-content`, `article-content`,
`text-link`, `site-footer`.

## Токены

Exact token IDs: `surface.page`, `surface.subtle`, `text.primary`, `text.secondary`,
`text.quiet`, `border.default`, `border.subtle`, `type.size.body`,
`type.size.body-small`, `type.size.heading-small`, `type.size.heading-medium`,
`type.size.metadata`, `type.line-height.body`, `type.line-height.heading`,
`layout.container-max`, `layout.gutter-desktop`, `layout.gutter-tablet`,
`layout.gutter-mobile`, `layout.section-space-min`, `layout.section-space-max`,
`focus.ring`. Основной текст не использует `text.quiet` для normal-size paragraphs.

## Адаптивность и доступность

На mobile TOC становится inline disclosure перед текстом; anchors не прячут heading под header.
Таблицы имеют caption/headers и responsive стратегию без скрытия данных. Ссылки
понятны вне контекста; print/export сохраняет URL, version и page flow.

## Контент

Указаны owner, версия/дата действия, scope, definitions, точные obligations,
способ связи и referenced sources. Legal wording не перефразируется агентом без
owner approval. Editorial summary отделяется от нормативного текста меткой.

## Разрешено и запрещено

**Разрешено:** узкая читаемая колонка, якорное оглавление, точная метаинформация.

**Запрещено:** маркетинговый hero вместо названия, скрытая дата, принудительная
карусель текста, изменение legal meaning ради краткости.

## Acceptance criteria

- owner/version/date/scope и contact видимы;
- headings/TOC/anchors/tables/links доступны;
- legal approval, responsive long-read и print/PDF review зафиксированы.

## V2 exact composition

Pattern ID: `pattern.page.legal-editorial`. Complete visual reference:
`/brandbook/web/examples/legal/`.

Required sequence:

1. `section.hero.editorial`
2. `section.article.body`
3. `section.task.framing`
4. `section.content.related`
5. `section.lead.form`

Shared shell: exactly one stable `site-header` and one stable `site-footer`.
Heading: one H1; accent may wrap one semantic phrase in
`aicjm-headline__accent`. Every following section owns one H2.

## V2 responsive contract

Desktop preserves the declared grid and evidence adjacency. Mobile uses one
semantic reading column, preserves every required section and action, and
permits local horizontal scrolling only for explicit filter/navigation rails.
Page-level horizontal overflow is prohibited.

## V2 state and content contract

Filters expose selected and result status. Forms expose validation, loading,
success and error through the shared lead flow. Empty states explain the query
and a recovery action. Every metric, logo, portrait, case and quotation keeps
its source. Placeholder claims remain visibly `[уточнить]` and never ship as proof.

## V2 acceptance

- one H1, valid H2/H3 hierarchy and named landmarks;
- one primary action per semantic stage;
- all components and sections resolve to stable registry IDs;
- 1440, 1024, 768 and 375 px pass without content loss or page overflow;
- keyboard, focus, reduced motion, links, assets and source labels pass QA.