# Design System AIVEXA

> Category: AI & Productivity
> Нейроофис AIVEXA. Светлый, воздушный интерфейс, один фиолетовый акцент, Golos Text.

Источник: Figma «Айвекса/нейроофис» (file key `4bXrPWkoHesiLPpUSdIldU`), страница «UX/UI нового дизайна» (`321:1907`).
Все значения сняты из нод Figma (этап 2 — из полного кеша файла `/v1/files` от 2026-10-09). Где в Figma значения нет, стоит пометка **(предложено)**.
Единый источник цветов, теней, сетки и типографики — `tokens.json` (`https://test-design.aivexa.pro/aivexa/tokens.json`, CSS: `/aivexa/tokens.css`). Этот файл сверяется с ним скриптом `check-design.mjs`.
Реестр компонентов shadcn: `https://test-design.aivexa.pro/r/registry.json` (неймспейс `@aivexa`), 38 элементов — раздел 4, «Реестр компонентов».
Витрина всех компонентов и состояний (light/dark): `https://test-design.aivexa.pro/aivexa/demo/components.html`.
Эталонные экраны, собранные только из `@aivexa` (light/dark, 1440/390), со снимками-эталонами — раздел 11.
**Иконки: Lucide как временная замена набора Figma `571:10800`** (иконки Figma не выгружены; соответствие имён — `builds/aivexa-registry/inventory.md`).

### Для агентов
- **Вход:** [`llms.txt`](https://test-design.aivexa.pro/aivexa/llms.txt) — порядок действий при вёрстке, карта ресурсов, реестр с «когда применять», вариант без React.
- **Правила:** [`rules.md`](https://test-design.aivexa.pro/aivexa/rules.md) — короткий обязательный свод (токены, Golos, `@aivexa`, шкалы, состояния, темы, адаптив, контраст) и чек-лист самопроверки с командами.
- Этот файл — полный справочник: к нему идут за числами и id нод Figma, когда llms.txt и rules.md мало.
- Скилл для Claude Code: `builds/aivexa-registry/skill/aivexa-design/SKILL.md` (на хосте — `/root/.claude/skills/aivexa-design/`).

## 1. Visual Theme & Atmosphere

AIVEXA — рабочее пространство «нейроофиса»: чаты с моделями, агенты, отделы, статистика. Интерфейс светлый и спокойный:
почти белый фон (`#FBFBFB`), белые карточки (`#FFFFFF`) с тонкой рамкой `#EDEDED` и едва заметной тенью
(`0 0 8.9px rgba(0,0,0,0.04)`), графитовый текст `#272728`. Цвет в интерфейсе один — насыщенный фиолетово-синий
`#4F1FE5`: основная кнопка, активный пункт меню, выбранные чекбоксы, радио, свитчи, знак логотипа. Его светлые тени —
лавандовый `#9AA3FF` (hover, рамка карточки при наведении, иконки KPI) и почти белый лавандовый `#F8F7FF`
(подложки иконок, hover пунктов списка). Фирменный градиент `#9AA3FF → #6E48E4` живёт только в маленьких акцентах —
бейдж динамики на KPI-карточке.

Шрифт один — Golos Text (400 / 500 / 600), без отрицательного трекинга. Основной кегль интерфейса 14px,
мелкий — 12px, заголовки разделов в макете — 42px / 600. Формы мягкие: кнопки и карточки скруглены на 12px,
статус-бейджи — полные пилюли. Тёмная тема — почти чёрный фон `#0F120E`, карточки `#1A1D1A` с рамкой белый 10%, меню тёмно-синее `#0A1020`, белое слово логотипа.

**Key Characteristics:**
- Единственный хроматический акцент: `#4F1FE5` (default) → `#9AA3FF` (hover) → `#3E2FB8` (pressed)
- Golos Text: 400 для текста, 500 для кнопок, 600 для заголовков и KPI-бейджей
- Радиус 12px у кнопок, карточек, полей; 8px у мелких полей и пунктов списка; пилюли у бейджей
- Рамки вместо теней: `#EDEDED` / `#F5F5F5`, тень только мягкая `rgba(0,0,0,0.04–0.07)`, blur 8.9
- Статусы — цвет текста + та же краска 20–30% подложкой: зелёный `#5AD834`, красный `#FC3A3A`, жёлтый `#FBBF24`
- Логотип: знак-«бантик» `#4F1FE5` + слово AIVEXA `#48484C`

## 2. Color Palette & Roles

### Brand & Accent
- **Accent** (`#4F1FE5`): «синий» на доске Color (`372:808`). Основная кнопка, активные контролы, знак логотипа, заголовки секций макета. Токен `--primary`.
- **Accent Hover / Soft Accent** (`#9AA3FF`): «светло-синий» (`372:796`). Hover основной кнопки, рамка карточки при наведении и фокусе поля, штрих иконок KPI. Токены `--primary-hover`, `--ring`.
- **Accent Pressed** (`#3E2FB8`): состояние Click основной кнопки (`374:277`). Токен `--primary-active`.
- **Accent Soft** (`#F8F7FF`): «светло-фиолетовый» (`373:814`). Подложка иконок, hover пунктов меню и outline-кнопки, заполненное поле. Токены `--secondary`, `--accent`.
- **Brand Gradient** (`#9AA3FF → #6E48E4`, слева направо): «Градиент» на доске Color (`372:797`), бейдж KPI (`375:2666`). Утилита `bg-brand-gradient`. В локальных стилях файла он записан как `#99A2FF → #6E4BE3`.

### Background Surfaces
- **Background** (`#FBFBFB`): стиль «белый» (`3370:54198`). Фон страницы — так на экранах «Аудит сделок» (`2787:34299`). Экраны чата и статистики лежат на чистом `#FFFFFF` (`392:673`). Токен `--background`.
- **Surface / Card** (`#FFFFFF`): «белый» (`373:812`). Карточки, поля, outline-кнопки, поповеры. Токен `--card`.
- **Muted Surface** (`#F5F5F5`): «очень светло-серый». Рамки крупных карточек (`879:14919`), поиск. Токен `--muted`.
- **Disabled Surface** (`#E6E7EB`): фон кнопки «no active» (`375:4041`). Токен `--disabled`. Близкий стиль файла — «светло-серый» `#E5E7EB`.

### Text & Content
- **Primary Text** (`#272728`): «черный» (`373:824`). Основной текст и значения KPI. Токен `--foreground`.
- **Secondary Text** (`#565656`): «средне-серый». Ghost-кнопка, вторичный текст. Токен `--text-secondary`.
- **Icon / Caption** (`#727272`): «цвет для иконок» (`373:820`). Иконки, подписи под заголовком карточки, текст disabled-кнопки. Токены `--icon`, `--disabled-foreground`.
- **Muted Text** (`#A5A2B8`): «серо-фиолетовый» (`373:816`). Подписи KPI, текст outline-кнопки, неактивные радио и свитчи. Токен `--muted-foreground`.
- **Logo Graphite** (`#48484C`): «темно-серый» (`373:822`), слово AIVEXA в логотипе. Токен `--logo`.

### Status Colors
- **Success** (`#5AD834`): «Активна», «Низкая», «Доступна». Подложка — тот же цвет на 20% (на «Доступна» — 30% и рамка 1px).
- **Danger** (`#FC3A3A`): «Не активна», «Высокая», рамка поля с ошибкой (`418:1470`). Подложка 30%. Токен `--destructive`.
- **Warning** (`#FBBF24`): «Средняя». Подложка 30%. Токен `--warning`.

### Border & Divider
- **Border** (`#EDEDED`): рамка карточки (`375:2676`), outline-кнопки, квадратной кнопки 28×28. Токен `--border`.
- **Input Border** (`#D9D9D9`): «серый» (`373:818`), рамка поля ввода в покое (`417:1451`). Токен `--input`.
- **Focus Border** (`#9AA3FF`): поле в фокусе (`417:1453`), карточка при наведении (`375:3834`).
- **Surface Border** (`#A5A2B880`, `#A5A2B8` 50%): рамка таблицы (`2787:34426`). Токен `--surface-border`; в тёмной — белый 10%.
- **Segment Border** (`#D7D5E34D`, `#D7D5E3` 30%): рамка сегмент-табов (`374:2652`). Токен `--segment-border`.
- **Chat Bubble** (`#D9D9D966`, `#D9D9D9` 40%): пузырь сообщения пользователя (`520:9528`). Токен `--bubble`; в тёмной **(предложено)** `#272728`.
- **Overlay** (`#060B1180`) **(предложено)**: подложка под модалкой — в Figma её нет, взято затемнение `#060B11` 50% с лендинга (`7:362`). Токен `--overlay`.

### Dark Theme
Доска тёмной палитры — `Section 1` (`3362:53568`): «Для меню», «Для фона», «темно-серый», «светло-черный» + текстовые серые.
- **Background** (`#0F120E`): «черный», подпись «Для фона» (`3368:50116`), фон тёмного экрана чата (`3328:40744`). Токен `--background`.
- **Sidebar** (`#0A1020`): «темно-синий», подпись «Для меню» (`3362:53571`), развёрнутое меню (`3328:58108`). Разделители меню — белый 10%. Токен `--sidebar`.
- **Card** (`#1A1D1A`): «темно-серый» (`3370:50118`), карточка модели (`3362:52730`), поле запроса на экране (`3343:65975`). Рамка карточки — белый 10% (`#FFFFFF1A`). Токены `--card`, `--field`.
- **Secondary / Muted surface** (`#272728`): «светло-черный» (`3370:54209`): плашка «≈ 1,5» (`3342:65129`), файл (`3343:65802`), неактивная кнопка отправки (`3354:66503`). Токены `--secondary`, `--muted`, `--disabled`.
- **Text**: основной `#FBFBFB` («белый», `3370:50120`), вторичный `#D9D9D9` («серый», `3370:54200`), приглушённый `#A5A2B8` (пункты меню, `3328:58157`), плейсхолдер `#727272` (`3342:65103`), заголовки групп меню в Figma `#565656` (`3328:58149`) — в реестре `--sidebar-label` `#A5A2B8`: у `#565656` на `#0A1020` контраст 2,7:1, ниже WCAG AA.
- **Border** (`#FFFFFF1A`, белый 10%): рамки поля и меню (`3343:65975`, `3328:58109`). Рамка outline-кнопок в поле — `#565656` (`3342:65107`), токен `--input`.
- **Accent**: основная кнопка как в светлой — `#4F1FE5` (`3362:52765`, кнопка отправки `3354:66500`), текст на плашках — `#9AA3FF` (`3342:65130`).
- **Статусы**: «Доступна» `#5AD834` на 30% + рамка (`3362:52737`), «Недоступна» `#FC3A3A` на 30% (`3362:52773`), счётчик уведомлений `#B42318` (`3328:58127`).
- **Логотип**: слово `#FFFFFF`, знак `#4F1FE5` (`3328:58110`, доска логотипов `3043:41411`).
- **Glass-панель** (переключатель темы): `#060B11` 80%, рамка `#23282D` (`3352:66285`). Иконки переключателя: луна `#5A45FF` в круге `#23282D` (активна в тёмной, `3352:66271`), солнце `#FAAD31` в белом круге (активно в светлой, `3352:66294`), неактивная иконка — `#FFFFFF` / `#23282D`. Токены `--theme-moon`, `--theme-sun`, `--theme-idle`.
- **Свечение фона**: эллипс `#4F1FE5` 60% с размытием 252.9 справа от центра (`3328:40746`) — в ассетах `backgrounds/glow-dark-*`.
- **(предложено)**: hover/pressed основной кнопки, ring, popover, warning — в тёмных макетах не показаны, взяты как в светлой.

## 3. Typography Rules

### Font Family
- **Golos Text** (Google Fonts, OFL), веса 400 / 500 / 600. В реестре подключается пакетом `@fontsource-variable/golos-text` (вариативный).
- Фолбэк: `ui-sans-serif, system-ui, sans-serif`.
- Значение KPI в макете набрано Arial Bold 20/28 (`375:2674`). В файле есть стиль для чисел «Text numbers» — Golos Text 600 20/24 (`372:805`); в реестре пока Golos Text 700.

### Hierarchy

| Роль | Размер | Вес | Line-height | Пример из Figma |
|---|---|---|---|---|
| Display / заголовок раздела | 42px | 600 | 50.4px (1.2) | «Color», «buttons» |
| Значение KPI | 20px | 700 | 28px | «124 580 ₽» (`375:2674`) |
| Заголовок карточки | 16px | 400 | 19.2px | «YandexGPT Pro» (`879:14885`) |
| Text (desktop body) | 14px | 400 | 16.8px | стиль `321:1898` |
| Text 2 (акцент) | 14px | 600 | 16.8px | стиль `321:1899` |
| Buttons | 14px | 500 | 16.8px | стиль `372:803` |
| Text mini | 12px | 400 | 14.4px | подпись KPI, UPPERCASE |
| Text mini 2 / бейдж | 12px | 600 | 14.4px | «+12%», стиль `323:2712` |
| Заголовок лендинга | 48px | 500 | 58px | стиль `866:1579` |
| Title | 24px | 500 | 28.8px | стиль `1423:1656` |
| Подзаголовок | 20px | 500 | 24px | стиль `866:1580` |
| Text numbers | 20px | 600 | 24px | стиль `372:805` |
| Micro | 10px | 400 | 12px | стиль `919:19675` |

Мобильная шкала из блока Fonts (`373:829`): Text 16 / 400, Text 2 16 / 600, Buttons 14 / 500, Text mini 14 / 400, Text mini 2 14 / 600.

### Principles
- Letter-spacing 0 везде, без трекинга.
- Подписи KPI — UPPERCASE 12/400 серо-фиолетовым `#A5A2B8`.
- Hover ghost-кнопки меняет вес 400 → 500 и цвет на акцент.

## 4. Component Stylings

### Buttons (Figma `374:260`, `1241:21567`, `1218:23366`)
Общая геометрия: высота **44px**, паддинг **0 24px**, gap **8px**, радиус **12px**, текст 14/500, иконка **20×20**.

| Вариант (registry `variant`) | Default | Hover | Click |
|---|---|---|---|
| `default` (primary) | фон `#4F1FE5`, текст `#FFFFFF` | фон `#9AA3FF` | фон `#3E2FB8` |
| `outline` («Посмотреть всех» `1241:21567`) | фон `#FFFFFF`, рамка `#EDEDED`, текст `#A5A2B8` | фон `#F8F7FF`, рамка и текст `#4F1FE5` | как Hower, прозрачность 80% |
| `secondary` (светлая) | фон `#F8F7FF`, рамка и текст `#4F1FE5` | | **(предложено)**: состояние Click outline-кнопки вынесено в отдельный вариант |
| `ghost` | без фона, текст `#565656` 400 (с иконкой — `#727272`) | текст `#4F1FE5` 500 | |
| `text` («Выделить все» `1524:36692`) | без фона и паддингов, `#A5A2B8` 400, иконка 20 слева/справа | `#565656` | `#4F1FE5` (и `aria-pressed`) |
| `soft` (кнопка отправки «no active» `1351:27740`) | фон `#F5F5F5` (тёмная `#272728`), иконка `#727272` | иконка акцентом | |
| disabled («no active») | фон `#E6E7EB`, текст и иконка `#727272` | | |
| `size="icon"` | 28×28, радиус 4, паддинг 8, рамка `#EDEDED`, иконка 16 | рамка `#565656` | фон `#F8F7FF`, рамка `#4F1FE5` |

Вариант «с иконкой»: иконка слева или справа, 20×20, gap 8; с двумя иконками — `caret` (слева иконка, справа шеврон ⌄, `555:9811`, ширина 162).
`loading` — спиннер вместо левой иконки, кнопка неактивна **(предложено)**: в Figma нет.
Размеры: `default` 44; `xs` 34 / r=8 / паддинг 12 (сегменты `374:2653`); `icon` 28×28; `icon-round` 32 (отправка в поле чата `1356:30782`); `sm` 36 **(предложено)**.
У вариантов с рамкой паддинг 24 считается от внешнего края (в Figma обводка внутри фрейма) — в CSS 23 + рамка 1.
В тёмной теме hover/нажатие текстовых вариантов — `--accent-foreground` `#9AA3FF` (у `#4F1FE5` на `#272728` контраст 2,3:1); в светлой это тот же `#4F1FE5`.

### Cards & Containers (Figma `375:2677`, `879:14920`)
- Фон `#FFFFFF`, рамка 1px `#EDEDED` (крупные карточки `#F5F5F5`), радиус **12px**.
- Паддинг **18px сверху/снизу, 16px по бокам**, gap **12px** (у крупной карточки внутри gap 20).
- Тень `0 0 8.9px rgba(0,0,0,0.04)` (стиль EFFECT `375:4027`).
- Hover (интерактивная карточка): рамка `#9AA3FF`.

### KPI Card (Figma `375:2676`, 228×140)
- Карточка, как выше.
- Верхний ряд: плашка иконки **36×36**, радиус 12, фон `#F8F7FF`, иконка 20 со штрихом `#9AA3FF`; справа бейдж динамики.
- Бейдж динамики: пилюля, паддинг 8 14, градиент `#9AA3FF → #6E48E4`, иконка тренда 12, текст 12/600 белый.
- Подпись 12/400 UPPERCASE `#A5A2B8`, значение 20/28 bold `#272728`.

### Badges & Pills
- **Status badge** (`1071:19371`): пилюля r=200, паддинг 4 12, текст 14/400. «Активна» — `#5AD834` на `#5AD834`/20%; «Не активна» — `#FC3A3A` на 30%.
- **Priority** (`1216:18968`): ширина 120, r=20, паддинг 4 30: «Низкая» зелёный, «Высокая» красный, «Средняя» `#FBBF24`.
- **Availability** (`879:14887`): r=200, паддинг 8, 12/400, подложка 30% + рамка 1px того же цвета.

### Inputs & Forms (Figma `417:1452`, `418:2808`, `384:701`)
- Поле 44px: радиус 12, паддинг 8, рамка `#D9D9D9` → фокус `#9AA3FF` → ошибка `#FC3A3A`.
- Поле с подписью 53px: радиус 8, заполненное — фон `#F8F7FF`, рамка `#A5A2B8`/20%.
- Чекбокс 19×19, радиус 4.75, рамка `#A5A2B8` → выбран: фон и рамка `#4F1FE5`.
- Радио 18×18, рамка 1.125 `#A5A2B8` → `#4F1FE5` с точкой 11px.
- Switch 30×18, радиус 25, кноб 14 белый; on `#4F1FE5`, off `#A5A2B8`.
- Поиск (`1357:33715`): пилюля r=100, высота 52, паддинг 8 18, рамка `#F5F5F5`, тень `-1px 1px 8.9px rgba(0,0,0,0.07)`.

### Navigation (Figma `374:894`, `496:6139`)
- Пункт меню 28px, паддинг 4 0, иконка 20 + текст 14 через 18: Default `#A5A2B8` 400 → Hower `#565656` → активный `#4F1FE5` 600 и полоса 3.6×18 у правого края (r 1 0 0 1). Заголовок группы 16/19.2 UPPERCASE `#565656`, паддинг 10 0.
- Пункт списка 28px, радиус 8, паддинг 4 12; hover фон `#F8F7FF`.
- Переключатель темы: малый 58.8×34, r=20, паддинг 6, круги 22 (`3352:66286`) и крупный 84×48, r=28.5, круги 32 (`794:13999`); glass-эффект, тень `0 1px 10.1px rgba(0,0,0,0.07)`. Слева луна, справа солнце.

### Реестр компонентов `@aivexa` (этап 3)

Каждый элемент тянет `aivexa-theme` (токены) и `utils`; составные — свои зависимости (`registryDependencies`).
Цвета в компонентах — только через CSS-переменные темы, без hex. Сверка с Figma: `builds/aivexa-registry/compare-stage3.md`,
инвентаризация кита: `builds/aivexa-registry/inventory.md`.

| Элемент реестра | Figma | Когда применять | Варианты и API |
|---|---|---|---|
| `button` | `374:260`, `1524:36692`, `1218:23366`, `1351:27739` | любое действие | `variant`: default · secondary · outline · ghost · text · soft · link; `size`: default 44 · sm · xs 34 · icon 28 · icon-round 32; `loading`, `caret` (выпадашка «Экспорт ⌄»), `asChild`; иконка слева/справа — порядком детей |
| `view-all-button` | `1241:21567` | переход к полному списку под блоком | `iconPosition`: right · left; `asChild` для ссылки; «с переключателем» — Button outline + Switch |
| `badge` | `1071:19371`, `1216:18968`, `2722:12221`, `375:2666` | статус, приоритет, метка | `variant`: success · danger · warning · neutral · gradient · deciphered; `shape`: pill · priority; хелперы `StatusBadge active`, `PriorityBadge priority=low/medium/high` |
| `switch` | `1001:19858` | вкл/выкл настройки сразу | checked · unchecked · disabled |
| `checkbox` | `1254:22360`, `416:1652` | выбор нескольких, строки таблицы | `size`: default 19 · sm 16; checked · indeterminate · disabled; ошибка через `aria-invalid` |
| `radio-group` | `438:3841` | выбор одного из 2–5 | `RadioGroup` + `RadioGroupItem`, disabled |
| `label` | `536:10467` | подпись к контролу | — |
| `avatar` | по мотивам `121:286`, `1617:41618`, `1258:22992`, `662:15595` (отдельного компонента в Figma нет) | фото или инициалы человека / организации | `size`: xs 24 · sm 32 · md 40 · lg 64 (кегль 10 · 12 · 16 · 24, вес 500); `variant`: soft (`--secondary` + `--accent-foreground`, по умолчанию) · solid (`--primary`) · outline (кольцо `--ring`, как аккаунт в меню); `AvatarImage` + `AvatarFallback` (битая ссылка → инициалы), `AvatarBadge` (сменить фото / «в сети»), `AvatarGroup`, `getInitials()`. В Figma буква и заливка `#9AA3FF` — на белом 2,2:1, ниже AA, поэтому инициалы — `--accent-foreground` |
| `input` | `536:10474`, `418:2808`, `384:701`, `445:4253`, `417:1452` | однострочный ввод | `size`: default 40 · lg 44; `variant`: default · underline (поиск); `startIcon`, `endIcon`; ошибка — `aria-invalid`; `FloatingInput` — подпись внутри поля (53) |
| `textarea` | по образцу `536:10474` **(предложено)** | многострочный ввод | авто-высота (`field-sizing`), ошибка `aria-invalid` |
| `field` | `536:10474` | обвязка поля формы | `Field`, `FieldLabel`, `FieldDescription`, `FieldError` (свяжите через `aria-describedby`) |
| `select` | `384:701` | выбор из списка 3–15 значений | `SelectTrigger size`: default · lg; placeholder · выбран · открыт · ошибка · disabled |
| `table` | `2787:34426` | табличные данные | `Table` (обёртка r=12) / `TableHeader` / `TableRow` (`data-state="selected"`, hover) / `TableHead` / `TableCell` / `TableFooter` |
| `pagination` | `1218:23384`, `1218:23366`, `2787:34578` | постраничная навигация | `PaginationLink isActive`, `PaginationPrevious/Next` (шевроны), `PaginationEllipsis`, `PaginationSummary` «Показано N из M» |
| `tabs` | `374:2653`, `2787:34396` | переключение разделов одного экрана | сегменты 34 на подложке `#F8F7FF`; disabled |
| `tooltip` | `2787:39986` | короткая подсказка к значению/иконке | `side`, хвостик |
| `dropdown-menu` | `535:10121` | меню действий «⋯» и кнопки с `caret` | `DropdownMenuItem variant`: default · destructive; чекбокс-/радио-пункты, подменю, разделитель |
| `dialog` | `550:11597`, `536:10197` | подтверждение, короткая форма | `DialogHeader/Title/Description/Footer` (две равные кнопки), `showCloseButton`, `inline` (превью без портала) |
| `sidebar-menu` | `374:894`, `374:2379`, `3328:58071` | боковое меню приложения | `SidebarMenu collapsed`, `SidebarMenuGroup/Label/List`, `SidebarMenuItem icon active disabled end asChild`; активный пункт — текст `--accent-foreground` (светлая `#4F1FE5` 7,4:1, тёмная `#9AA3FF` 8,2:1; `--sidebar-primary` `#4F1FE5` на `#0A1020` — 2,4:1), полоса — `--sidebar-primary` |
| `theme-switcher` | `3352:66286`, `794:13999` | переключение светлой/тёмной темы | `size`: sm 58.8×34 · lg 84×48; хук `useTheme()` (класс `.dark` на `<html>` + localStorage `aivexa-theme`, дублирует в `theme` для шаблонного ThemeProvider и следит за классом); скрипт против мигания в `<head>` — llms.txt, шаг 4 |
| `chat-message` | `520:9506` | лента чата | `role`: user (пузырь справа) · assistant (имя модели + текст); `meta` (строка или массив через точку), `actions` из `ChatMessageAction` |
| `chat-composer` (блок) | `1356:30816`, `3342:65097` | поле запроса чата | `model`, `onModelClick`, `onAttach`, `onVoice`, `onSubmit`; Enter — отправить, Shift+Enter — перенос |
| `card`, `kpi-card`, `logo` | `375:2677`, `375:2676`, `1350:27429` | см. выше | этап 1–2; паддинг карточки поправлен с учётом рамки |

| `app-sidebar` (блок) | `374:2379`, `3328:58072`, `2787:34587` | боковое меню приложения целиком | `groups` (label + items: icon, label, href, active, end), `account` (name, email, notifications), `product`, `collapsed` + `onCollapsedChange` (69 ↔ 291), `onNavigate`, `themeSwitcher` |
| `app-header` (блок) | `2787:34370` | шапка рабочей области экрана | `title` 20/500, `description`, `actions` (кнопки справа, на мобиле — строкой ниже), `leading`; до 768 — знак логотипа и переключатель темы |
| `app-shell` (блок) | сетка `121:123` | каркас любого экрана приложения | `sidebar` (props `app-sidebar`), `collapsed`, `aside` (вторая панель с 1280), `mobileNav`; <768 — `mobile-bottom-nav` + сайдбар в `AppDrawer` |
| `mobile-bottom-nav` (блок) | `834:17707`, `3352:66151` | нижняя навигация до 768 | `items` (icon, label, href / onClick, active); `floating={false}` — в потоке |
| `chat-history-panel` (блок) | `499:6970`, `3338:64095`, `496:6139` | вторая панель экрана чата | `groups`, `folders`, `activeId`, `onSelect`, `onAction` (pin / rename / delete), `onNewChat`, `onCollapse`; `ChatHistoryItem` (active, pinned) |
| `model-card` (блок) | `879:14920`, `3362:52729`, `424:3039` | каталог и выбор моделей | `ModelCard` (name, vendor, available, tagline, params, onStart); `ModelOption`; `ModelPicker` (models, value, onValueChange) — в `chat-composer modelPicker` |
| `notification` (блок) | `1519:35774`, `1521:36515` | лента уведомлений, тосты | `NotificationCard` (status warning · block · info · success · error, unread, selected, time, action); `Toaster` + `toast({ title, description, status })` **(предложено)**; `error` (CircleX, `--destructive`, `role=alert`) **(предложено)** |
| `chat-attachment` (блок) | `521:10936`, `3343:65801` | вложения в чате | `kind` file · image, `loading`, `type`, `src`, `onRemove`; в поле чата — `chat-composer attachments` |
| `landing-header`, `landing-hero`, `landing-feature-grid`, `landing-cta` (блоки) | `3029:7460`, `3360:53478` | лендинг | шапка (links, cta); hero (eyebrow, title, description, actions, visual; фон волна / свечение); сетка (title с `LandingAccent`, features, columns, variant card · soft); призыв (eyebrow, title, subtitle, action, note) |

Не сделано (причины — в `inventory.md`): доменные кнопки аудита (`2864:37650`, `2864:37777`), аккордеон звонков (`2733:5219`) — нужны вместе
с экраном «Разбор сделки с ИИ».

## 5. Layout Principles

### Spacing System
Шаг 4px. Реально встречаются: 4, 8, 12, 16, 18, 20, 24, 30, 38. Основные: gap 8 (внутри кнопки), 12 (внутри карточки), 24 (между элементами доски).

### Grid & Container
Сетки сняты с фреймов макета (layoutGrids):

| Макет | Ширина | Колонки | Gutter | Поля | Нода |
|---|---|---|---|---|---|
| Приложение (десктоп) | 1480 | 5, stretch | 24 | 24 | `121:123` (79 фреймов) |
| Лендинг | 1440 | 2, stretch | 32 | 60 | `3588:3060` |
| Планшет | 768 | 6, stretch | 8 | 16 | стиль `1222:25460` «сектка планшет», `976:16248` |
| Мобайл | 360 | 2, stretch | 8 | 16 | `1410:31508` (77 фреймов) |

- Контейнер секций лендинга — 1280px (`3360:54291`). Сайдбар приложения 291px, свёрнутый — 69px (`3328:58108`, `3328:58196`).
- Базовый шаг 4px — стиль GRID `24:9` (квадратная сетка 4).
- Стиль `372:806` «сетка» в файле ни к одной ноде не привязан. `1410:31528` — не сетка, а EFFECT (тень лендинга, см. раздел 6).

### Border Radius Scale
| Токен | Значение | Где |
|---|---|---|
| xs | 4px | квадратная кнопка 28×28, чекбокс |
| sm | 8px | поле с подписью, пункт списка |
| md / `--radius` | 12px | кнопка, карточка, поле, плашка иконки |
| pill | 200px / 9999px | бейджи, поиск, свитч |

## 6. Depth & Elevation

| Уровень | Тень | Где |
|---|---|---|
| 0 | нет, только рамка `#EDEDED` | кнопки, поля |
| 1 — card | `0 0 8.9px rgba(0,0,0,0.04)` | карточки, файл (`375:4027`) |
| 2 — float | `-1px 1px 8.9px rgba(0,0,0,0.07)` | поиск, плавающие панели |
| glass | glass + `0 1px 10.1px rgba(0,0,0,0.07)` | переключатель темы (`794:13998`) |
| menu | `0 0 11.8px rgba(0,0,0,0.05)` | панель меню чатов (`499:6836`) |
| popover | `2px 0 12.4px rgba(0,0,0,0.06)` | выпадающее меню чата (`3328:41905`) |
| tab | `0 0 3.3px rgba(39,39,40,0.09)` | вкладки (`374:2652`) |
| dropdown | `0 0 11.8px rgba(0,0,0,0.06)` | список select (`384:747`) |
| tooltip | `0 0 8.9px rgba(0,0,0,0.06)` | подсказка «Лид: 0» (`2787:39986`) |
| strong | `-1px 1px 8.2px rgba(0,0,0,0.15)` | стиль EFFECT «тень» `550:11450` |
| glow (лендинг) | `0 4px 30px rgba(90,69,255,0.10)` | стиль EFFECT `1410:31528` |

Тёмная тема: card та же (`3362:52730`), float `-1px 1px 8.9px rgba(0,0,0,0.06)` (`3342:65098`), menu `0 0 11.8px rgba(0,0,0,0.05)` (`3338:64166`).
`1222:25460` — это не эффект, а стиль GRID планшета (раздел 5).

## 7. Do's and Don'ts

### Do
- Один акцент `#4F1FE5` на экран: основная кнопка, активный пункт, выбранный контрол.
- Hover акцентных элементов — в `#9AA3FF`, нажатие — в `#3E2FB8`.
- Отделяйте карточки рамкой `#EDEDED` и мягкой тенью 0.04, не плотной тенью.
- Статусы показывайте парой «цвет текста + тот же цвет 20–30% фоном».
- Golos Text везде, 14px как основной кегль.

### Don't
- Не заливайте крупные плоскости градиентом: он только для мелких акцентов (KPI-бейдж).
- Не используйте чистый чёрный для текста: только `#272728`.
- Не делайте острые углы: минимальный радиус 4px.
- Не вводите второй хроматический цвет для действий: зелёный, красный и жёлтый — только статусы.
- Не подкрашивайте слово логотипа акцентом: слово графитовое `#48484C`, фиолетовый только у знака.

## 8. Responsive Behavior

### Breakpoints
- Ширины макетов в Figma (факт): мобайл **360** (97 фреймов), планшет **768** (54), лендинг **1440**, приложение **1480** (83), слайды 1280.
- Точки переключения (min-width): tablet ≥ 768, desktop ≥ 1280 **(предложено)**: макета 1280 в продукте нет, 1280 — контейнер лендинга.

### Touch Targets
- Кнопка 44px подходит для касания. Квадратная кнопка 28×28 на мобиле **(предложено)**: расширять зону касания до 44.

### Collapsing Strategy
- Сайдбар тёмной темы схлопывается в узкую колонку иконок (`3328:58063`), на мобиле — нижняя пилюля-таббар «Меню / Новый чат / Сценарии».

## 9. Agent Prompt Guide

### Quick Color Reference
<!-- tokens:quick:start -->
- Accent: `#4F1FE5` · Hover: `#9AA3FF` · Pressed: `#3E2FB8` · Soft: `#F8F7FF`
- Background: `#FBFBFB` · Card: `#FFFFFF` · Border: `#EDEDED` · Input: `#D9D9D9`
- Text: `#272728` · Secondary: `#565656` · Icon: `#727272` · Muted: `#A5A2B8`
- Success: `#5AD834` · Danger: `#FC3A3A` · Warning: `#FBBF24` · Notification: `#B42318`
- Logo word: `#48484C` (на тёмном `#FFFFFF`)
- Dark: фон `#0F120E` · меню `#0A1020` · карточка `#1A1D1A` · плашки `#272728` · рамка `#FFFFFF1A` (белый 10%) · текст `#FBFBFB` / `#D9D9D9` / `#A5A2B8`
<!-- tokens:quick:end -->

### Установка
```bash
# components.json → "registries": { "@aivexa": "https://test-design.aivexa.pro/r/{name}.json" }
npx shadcn@latest add @aivexa/aivexa-theme @aivexa/button @aivexa/card @aivexa/kpi-card @aivexa/badge @aivexa/logo
# всё сразу (этап 3): 
npx shadcn@latest add @aivexa/button @aivexa/card @aivexa/badge @aivexa/logo @aivexa/avatar @aivexa/switch @aivexa/checkbox @aivexa/radio-group \
  @aivexa/label @aivexa/input @aivexa/textarea @aivexa/field @aivexa/select @aivexa/table @aivexa/pagination @aivexa/tabs \
  @aivexa/tooltip @aivexa/dropdown-menu @aivexa/dialog @aivexa/sidebar-menu @aivexa/theme-switcher @aivexa/view-all-button \
  @aivexa/chat-message @aivexa/chat-composer @aivexa/kpi-card -y -o
# блоки экранов (этап 4): каркас приложения, чат, уведомления, лендинг
npx shadcn@latest add @aivexa/app-shell @aivexa/app-sidebar @aivexa/app-header @aivexa/mobile-bottom-nav \
  @aivexa/chat-history-panel @aivexa/chat-attachment @aivexa/model-card @aivexa/notification \
  @aivexa/landing-header @aivexa/landing-hero @aivexa/landing-feature-grid @aivexa/landing-cta -y -o
# новый проект с нуля (init в подпапке, -o, уборка ThemeProvider и Geist, index.html) — точные команды в llms.txt, шаги 2–4
```

### Example Component Prompts
- «KPI-ряд: 4 `KpiCard` в сетке gap 24, иконки lucide, бейдж динамики градиентом».
- «Новый экран приложения: возьми `/aivexa/demo/screens/dashboard.html` как эталон — `AppShell` + `AppHeader`, контент в `max-w-[1141px]`, отступы 16 → 24».
- «Карточка списка агентов: `Card` с заголовком 16/400, строки с `Badge` success/danger, внизу `Button` primary + outline».

### Iteration Guide
1. Сначала токены (`aivexa-theme`), потом компоненты из `@aivexa`, потом композиция.
2. Цвет не по палитре — ищите роль в разделе 2, а не новый hex.
3. Значения с пометкой **(предложено)** сверять с Figma при следующем проходе.

## 10. Tokens & Assets

Всё ниже собирается скриптами из `builds/aivexa-registry/` (источник правды — `tokens/tokens.json`).

| Что | URL |
|---|---|
| Токены JSON (роли light/dark, типографика, радиусы, тени, отступы, сетки, брейкпоинты; у каждого цвета id ноды Figma и статус figma / proposed / derived) | `/aivexa/tokens.json` |
| Токены CSS (`:root`, `.dark` и `[data-theme="dark"]`) | `/aivexa/tokens.css` |
| Манифест ассетов | `/aivexa/assets/index.json` |
| Логотип: `aivexa-logo` (на светлом), `aivexa-logo-on-dark`, `aivexa-logo-white`, `aivexa-logo-black`, знак `aivexa-mark[-white/-black]`, SVG + PNG 2x | `/aivexa/assets/logo/` |
| Favicon: ico 16/32/48, svg, apple-touch-icon 180, icon-192/512, site.webmanifest, `head-snippet.html` | `/aivexa/assets/favicon/` |
| Фоны: `wave-light-1920/3840` (картинка-волна из Figma), `glow-dark-*`, `glow-landing-dark-*` (webp/jpg/png) + `backgrounds.css` | `/aivexa/assets/backgrounds/` |
| Шрифт Golos Text 400/500/600/700 woff2 (кириллица + латиница) + `fonts.css` + `OFL.txt` | `/aivexa/assets/fonts/` |

Правила логотипа (доска «Логотипы» `3043:41373`): на белом — слово `#48484C` + знак `#4F1FE5`; на тёмном `#191919` — слово белое, знак `#4F1FE5`;
на акцентном `#4F1FE5` — всё белое. Монохромной тёмной версии в Figma нет: `aivexa-logo-black` собран цветом `#272728`.
Тёмной картинки-волны в Figma нет: тёмные фоны — свечение по геометрии нод `3328:40746` и `3360:53482`.

```bash
cd builds/aivexa-registry
node scripts/build-tokens.mjs --build      # tokens.json → tokens.css, тема реестра, shadcn build → public_html/r
python3 -I scripts/build-assets.py         # логотипы, favicon, фоны, шрифты, assets/index.json
python3 -I scripts/check-palette.py        # все цвета токенов есть в Figma (кроме derived)
node scripts/check-design.mjs              # hex и id нод в DESIGN.md сходятся с tokens.json и Figma
```

## 11. Эталонные экраны

Пять экранов, собранных **только** из элементов `@aivexa` и токенов (никаких своих цветов и шрифтов; иконки — lucide-react).
Каждый — отдельная страница с постоянным URL, тема — `?theme=light|dark` (иначе сохранённая / системная), адаптив до 390.
Агенту: прежде чем верстать похожий экран, откройте эталон и его снимок; повторяйте композицию, а не придумывайте новую.

| Экран | URL | По мотивам Figma | Блоки и компоненты |
|---|---|---|---|
| Дашборд «ОТК Сделки» | `/aivexa/demo/screens/dashboard.html` | «Сделки: ответственный» `2787:34285` (экран `2787:34299`), уведомления `1519:35774` | `app-shell` (`app-sidebar`, `mobile-bottom-nav`), `app-header`, `card` (3 KPI со счётчиками-`badge` и `tooltip`), `tabs`, `input` (поиск), `select` ×2, `button` text «Сбросить», `table` (бейджи регламента, меню «⋯» — `dropdown-menu`), `pagination`, `notification` + `view-all-button` |
| Чат | `/aivexa/demo/screens/chat.html` | 1480_чат `3375:57806`, `3377:58307`, `3378:58807` | `app-shell collapsed` + `aside` = `chat-history-panel` (на <1280 — в `AppDrawer`), `app-header`, `chat-message` (пользователь / ассистент, действия), `chat-attachment` (картинка, файл, загрузка), `table` в ответе, `chat-composer` + `attachments` + `ModelPicker` (`model-card`), `toast` |
| Сотрудники и отделы | `/aivexa/demo/screens/team.html` (`?tab=departments`, `?dialog=1`) | поп-ап «создание нового отдела» `2494:36152`, поп-апы `536:10197`, `535:10121` | `app-shell`, `app-header` (экспорт — `button caret` + `dropdown-menu`), `tabs`, `input`, `select` ×3, `button` text «Выделить все», `checkbox` (строки и «все», indeterminate), `table`, `badge` StatusBadge, `dropdown-menu` (подменю, destructive), `pagination`, `dialog` + `field` + `input` + `textarea` + `select` + `radio-group`, карточки отделов (`card`, `switch`, `view-all-button`), `toast` |
| Настройки профиля и уведомлений | `/aivexa/demo/screens/settings.html` (`?saving=1`) | фото аккаунта `662:15595`, аккаунт в меню `121:286`, поле `536:10474` | `app-shell`, `app-header`, `card` ×3, `avatar` (lg + `AvatarBadge` «сменить фото», sm outline с картинкой), `button` outline/text xs, `field` + `input` (подсказка, ошибка `aria-invalid`, `startIcon`), `select` ×3, `textarea` со счётчиком, `switch` (вкл / выкл / disabled), `radio-group` (дайджест; тема через `useTheme()`), `button` «Сохранить» `loading` + «Отмена», `toast` success / error / info |
| Лендинг | `/aivexa/demo/screens/landing.html` | актуальный `3029:7460` (светлая, волна), тёмный `3360:53478` (свечение) | `landing-header`, `landing-hero` (визуал — `card` + `chat-message` + `chat-composer` + `kpi-card`), `landing-feature-grid` ×2 (card и soft), `model-card` ×4 (`LandingSectionHeading`), `landing-cta`, `logo` |

Раскладка приложения: ≥1280 — сайдбар 291 (у чата 69 + история 291); 768–1279 — сайдбар 69; <768 — нижняя панель «Меню / Новый чат / раздел»,
меню выезжает слева, таблицы прячут второстепенные колонки (`hidden tablet:table-cell` / `desktop:table-cell`).

**Снимки-эталоны** (fullPage, вьюпорт растянут на всю страницу): `/aivexa/demo/screens/shots/<экран>-<light|dark>-<1440|390>.png`,
экраны `dashboard`, `chat`, `team`, `team-dialog`, `team-departments`, `landing`, `settings`; сводка проверок — `shots/report.json`.

**Код эталонов** (копия `builds/aivexa-demo/src/screens/*.tsx`, `text/plain` UTF-8, CORS): `/aivexa/demo/screens/src/<экран>.tsx` — `dashboard`, `chat`, `team`, `settings`, `landing` и общий `shared.tsx`.
Контейнер экрана приложения: `mx-auto flex w-full max-w-[1141px] flex-col gap-6 px-4 py-6 tablet:px-6` (до 1141, поля 16 → 24, блоки через 24; дашборд — `gap-8`).

```bash
cd builds/aivexa-registry
node scripts/check-screens.mjs             # «только @aivexa»: нет hex/rgb/палитры Tailwind/своих шрифтов, импорты UI — только из реестра, копии = реестр
python3 -I scripts/shot-screens.py         # headless Chrome: экран × тема × ширина → ошибки консоли, overflow, снимки shots/
```