---
id: pattern.page.case
status: stable
version: 1.0.0
owner: AI CJM
evidence: https://aicjm.ru/edu/cases/goodwood/
---

# Case detail pattern

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

Кейс показывает изменение работы без подмены факта типовым сценарием.
Production evidence: `/edu/cases/goodwood/` и другие one-hop case pages.

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

`breadcrumbs → case hero (client/context/title) → verified result summary → starting point →
work/method → artifacts → result and measurement → quote/media → related cases → CTA`.
Блок описания метода не прячет ограничения и роль клиента.

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

Stable registry IDs: `primary-nav`, `hero`, `metric`, `article-content`, `diagram`,
`card`, `testimonial`,
`button`, `site-footer`.

## Токены

Exact token IDs: `surface.page`, `surface.card`, `surface.subtle`, `text.primary`,
`text.secondary`, `text.quiet`, `border.default`, `border.subtle`,
`type.size.heading-small`, `type.size.heading-medium`, `type.size.heading-large`,
`type.size.body`, `type.size.lead`, `layout.container-max`, `layout.gutter-desktop`,
`layout.gutter-tablet`, `layout.gutter-mobile`, `spacing.card-desktop`,
`spacing.card-mobile`, `action.primary`.
Клиентский цвет остаётся свойством verified asset, а не токеном AI CJM.

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

Длинная колонка остаётся читаемой; fact rail на mobile входит в reading order после hero.
Таблицы и схемы имеют text alternative; цитата имеет attribution; видео — captions/транскрипт.

## Контент

Обязательны: клиент/контекст, исходная задача, что сделано, какой артефакт создан,
что и как измерили, source locator, следующий шаг. Цифра всегда связана с объектом,
периодом и методом. Недоказанный сценарий маркируется `типовой проект`.

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

**Разрешено:** «9,7/10 — CSI программы [клиент], опрос после [период], n=[значение]»
при наличии source.

**Запрещено:** «повысили эффективность в 10 раз» без baseline/source; выдуманная
цитата; логотип как декор.

## Acceptance criteria

- факт, inference и типовой сценарий разделены;
- каждый proof и asset имеет provenance;
- длинное чтение, mobile order, media alternatives и CTA проверены.

## V2 exact composition

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

Required sequence:

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