# AI CJM — Design Specification

## Overview

AI CJM помогает компаниям превратить обучение работе с AI в изменение реальных процессов. Дизайн делает этот переход видимым: показывает задачу, рабочий контур, создаваемый артефакт, доказательство и следующий шаг.

Система выглядит как точная B2B-редакционная среда с признаками рабочего интерфейса. Она уверенная, ясная и доказательная. В ней достаточно воздуха для понимания, но нет декоративной пустоты.

## Design principles

### 1. Работа раньше технологии

Сначала показываем роль, процесс и изменение в работе. Название модели или инструмента появляется только там, где помогает принять решение.

**Approved:** «Участники собирают прототипы на рабочих процессах компании».

**Prohibited:** «Раскрываем безграничный потенциал инновационного искусственного интеллекта».

### 2. Доказательство встроено в композицию

Кейсы, люди, метрики, логотипы и конкретные артефакты являются конструктивными элементами страницы. Они не оформляются как случайные декоративные badges.

### 3. Линии и плоскости формируют систему

Основная глубина создаётся цветом поверхности, сеткой и тонкими границами. Тени применяются только для реального наложения или плавающего служебного элемента.

### 4. Контраст обозначает смысловой режим

Белая плоскость используется для объяснения и сравнения. Deep navy обозначает корпоративный контур, важный переход или финальную точку действия. Navy не заполняет страницу ради эффектности.

### 5. Компонент сильнее импровизации

Новый артефакт наследует готовые токены, компоненты и паттерны. Уникальная композиция допустима; уникальный визуальный язык без решения владельца — нет.

## Visual signature

- белый и холодный off-white как основные поверхности;
- royal blue для действия, активного состояния и смыслового акцента;
- deep navy для редких опорных блоков;
- тёмный slate для основного текста;
- Inter;
- крупные плотные заголовки;
- острые контентные поверхности;
- модульная grid-композиция;
- тонкие холодные линии;
- реальные портреты, логотипы и измеримые результаты;
- outline-схемы и рабочие диаграммы;
- короткое функциональное движение.

Точные значения живут только в [`05_Токены/`](./05_Токены/).

## Colors

Используй semantic role, а не выбирай hex по визуальному сходству. Минимальный набор ролей:

- `surface.page`;
- `surface.subtle`;
- `surface.brand-deep`;
- `text.primary`;
- `text.secondary`;
- `text.on-brand`;
- `action.primary`;
- `action.primary-hover`;
- `border.default`;
- `border.subtle`;
- `status.*`.

Цвета клиентских логотипов не расширяют палитру AI CJM.

## Typography

Основная гарнитура — Inter с системным fallback. Заголовки плотные и редакционные, основной текст спокойный и легко сканируется. Разрешённые веса и размеры задаются токенами; синтетические промежуточные веса из production не используются без отдельного решения.

## Layout

- Контент строится внутри именованного container token.
- Секции используют единую vertical rhythm scale.
- Grid без gaps допустим для каталогов и сравнительных модулей, где общие линии объясняют структуру.
- Адаптация меняет композицию, а не только уменьшает размеры.
- Горизонтальный scroll допустим для компактных фильтров; основной контент остаётся доступным линейно.

## Shape and elevation

Контентные поверхности и основные controls имеют острые углы. Круг разрешён для аватаров, точечных индикаторов и семантически круглых controls. Любой другой radius требует component token.

Тень обозначает физическое наложение. Карточка внутри обычной сетки отделяется линией или поверхностью.

## Imagery

Используются реальные люди, реальные бренды и изображения, связанные с работой. Portrait crop задаётся на уровне конкретного asset metadata и не переносится между фотографиями. Абстрактные AI-мозги, светящиеся роботы, случайные 3D-сферы и псевдотехнологические stock-изображения запрещены.

## Motion

Motion объясняет состояние и связь. Быстрая интерфейсная реакция, мягкое появление и редкое ambient movement допустимы. `prefers-reduced-motion` обязателен. Бесконечная анимация разрешается только как спокойный фоновой сигнал и не должна мешать чтению.

## Components

Компонент считается доступным агенту только когда имеет запись в registry и статус `stable`. Значение CSS-класса на production-странице само по себе не является публичным компонентным API.

## Content design

Базовая формула:

`задача компании → формат работы → практический артефакт → измеримый результат → следующий шаг`

CTA формулируется от задачи пользователя: «Подобрать программу», «Обсудить задачу», «Смотреть кейсы». Обещание должно быть проверяемым.

## Accessibility

Цель — WCAG 2.2 AA. Интерактивные элементы имеют keyboard path, заметный focus, достаточный hit area, контраст и понятное имя. Цвет и motion никогда не являются единственным носителем смысла.

## Do / Don’t

| Do | Don’t |
|---|---|
| Показывать рабочий процесс и конкретный результат | Украшать страницу общими AI-метафорами |
| Использовать semantic tokens | Копировать raw CSS-значения |
| Переиспользовать stable components | Создавать новый вид карточки для каждого блока |
| Поддерживать white ↔ navy смысловой контраст | Делать половину каждого экрана navy ради узнаваемости |
| Давать реальные доказательства | Использовать неподтверждённые цифры и logos-as-decoration |
| Сохранять острые контентные поверхности | Добавлять случайные скругления и мягкие SaaS-тени |

## Agent completion contract

Перед сдачей агент обязан подтвердить:

- выбранный artifact profile;
- использованные patterns и stable components;
- отсутствие raw design values;
- прохождение responsive и accessibility checks;
- отсутствие legacy-признаков;
- список exception requests либо фразу `exceptions: none`.