---
id: pattern.page.product
status: stable
version: 2.0.0
owner: AI CJM Design
evidence: normative-v2
---

# AI-навигатор, который собирает позицию по документам

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

Полная архитектура страницы для сценария `pattern.page.product`. Нормативный v2
опирается на production vocabulary, stable component registry и live reference.

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

`hero-editorial → proof-strip → task-framing → operational-navy → method-process → outputs-grid → case-result → content-related → lead-form → global site-footer`.

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

Stable registry IDs: `site-header`, `headline`, `section-heading`, `button`,
`text-link`, `card`, `proof`, `metric`, `process`, `diagram`, `case-card`,
`person-card`, `program-card`, `source-note`, `contact-panel`, `site-footer`.

## Токены

Exact stable token IDs: `surface.page`, `surface.subtle`, `surface.deep`,
`text.primary`, `text.secondary`, `text.on-deep`, `action.primary`,
`border.default`, `layout.container-max`, `layout.gutter-desktop`,
`layout.gutter-mobile`, `layout.section-space-min`, `focus.ring`.

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

Desktop использует каноническую grid-систему. Mobile сохраняет semantic order,
headings, evidence и primary action. Интерактивные элементы имеют native semantics,
keyboard contract и видимый focus.

## Контент

Страница использует один H1, один смысловой H2 на секцию, source-backed proof,
конкретные CTA и явные `[уточнить]` вместо выдуманных фактов.

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

**Разрешено:** собирать страницу только из stable components и sections.

**Запрещено:** локальные header/footer, raw design values, CTA без реального действия,
неподтверждённые метрики и скрытые обязательные блоки.

## Acceptance criteria

- полный маршрут содержит все обязательные этапы;
- desktop/mobile сохраняют content hierarchy и действия;
- links, assets, states, keyboard и sources проходят QA.
## V2 exact composition

Pattern ID: `pattern.page.product`. Complete visual reference:
`/brandbook/web/examples/product/`.

Required sequence:

1. `section.hero.editorial`
2. `section.proof.strip`
3. `section.task.framing`
4. `section.operational.navy`
5. `section.method.process`
6. `section.outputs.grid`
7. `section.case.result`
8. `section.content.related`
9. `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.