# Design

<!-- impeccable:design-schema 1 -->

Визуальная система интерфейсов bj. Продуктовую правду держит `PRODUCT.md`.
Токены и оболочка живут в `internal/lkgateway/web/templates/layout.html`
(админка bj-server) и `cmd/bj-lk/templates.go` (клиентский ЛК).

## THESIS

Пульт управления перемещением ценных бумаг между депозитариями через НРД —
**приборная панель, а не маркетинговый дашборд**. Состояние системы и заявок
читается с одного взгляда. Отказ от generic-SaaS-грамматики: эмодзи-иконки,
лого-градиентный блоб, градиентный текст, сетка одинаковых карточек как
структура страницы — не используются.

## OWN-WORLD

«Диспетчерская депозитария». Прохладные нейтрали на свету, терминальный
near-black в тёмной теме (настоящее рабочее место оператора). Один уверенный
акцент — **индиго `--accent`** (интерактив); **MOEX-красный `--brand`**
зарезервирован строго под знак бренда и критические состояния. Знак — два узла,
соединённые мостом (продукт буквально соединяет депозитарии), inline-SVG.
Иконки — только тонкие line-иконки (stroke 1.8, inline-SVG), никаких эмодзи.

## Color

Стратегия — **Restrained** (нейтрали + один акцент), корректно для Operate.
Токены в `:root` (light) и `[data-theme="dark"]`. Обе темы обязательны и
переопределяют весь семантический набор (`--accent/--ok/--warn/--err` и их
`-weak`). Тема запоминается в localStorage; уважать `prefers-color-scheme` и
`prefers-reduced-motion`. Контраст текста — WCAG AA (body ≥4.5:1); вторичный
текст тонируется из нейтрали, не «серым наугад».

## Typography

Системный sans для UI. **Приборная подпись: все величины — моноширинными
табличными цифрами** (`--mono`, `font-variant-numeric:tabular-nums`): ID,
счётчики, время, коды, суммы, значения статов (`.num`, `.stat-value`, `.clock`,
`code`). Заголовки — плотный трекинг (до −0.03em на крупных), явная шкала веса.

## Components

- **Оболочка:** sticky-топбар (56px) = знак бренда (flex:none) + навигация
  (flex:1, внутренний горизонтальный скролл, скрытый скроллбар) + правый блок
  (flex:none): строка системного статуса `.sys-status` (пульс + «НРД на связи /
  Эмуляция»), моно-часы, SVG-переключатель темы. На ≤1200px статус сжимается до
  пульса, часы скрываются. Топбар не создаёт горизонтального скролла страницы.
- **Приборные плитки-статы** `.stat`: цветной торец слева (3px, семантический —
  `.accent/.ok/.warn/.err`), моно-значение.
- **Плитки задач** `.tile`: слот `.ico` под line-SVG (не эмодзи, не градиент),
  hover — подъём 2px + сдвиг стрелки.
- **Таблицы:** плотные, числовые ячейки — `.num` (табличные цифры), ID — `code`.
- **Бейджи статусов** `.badge.<state>`: семантические заливка+текст (AA).
- **Тост/алерты:** цветной акцент только сверху (`border-top`), не слева
  (`border-left`/`right` >1px запрещён).

## Motion

Один авторский easing `--ease` (экспоненциальный ease-out). Живой момент —
пульс индикатора системного статуса; hover-плитки — подъём + сдвиг стрелки.
Всё отключается при `prefers-reduced-motion`.

## Refuse (из craft-floor + тезис)

Эмодзи-иконки; лого-градиентный квадрат; градиентный текст; `border-left/right`
>1px как акцент карточек; моноширинный шрифт как «костюм технологичности» вместо
данных/измерений; выбор темы по категории, а не по сцене использования.

## Scope / статус

Поднят общий слой `layout.html` (токены, оболочка, статы, плитки, таблицы,
бейджи, тост) — его наследуют все ~20 страниц админки — и флагман `admin_home`.
Клиентский ЛК (`cmd/bj-lk`) уже несёт совместимую систему (токены, тёмная тема,
доступность). Постранично ещё не подняты: `admin_setup`, `admin_help_*`,
`admin_wizard`, `admin_claim` — они наследуют систему, но их частная композиция
(плотные формы, help-простыни) ждёт отдельного прохода.

## Личный кабинет клиента — мир «Табло» (17.09.2026)

Клиентский ЛК (`modules/lk`, служба `bj-lk`) получает собственную поверхность
внутри той же системы. Дизайн-холст: https://claude.ai/artifact/NAW1ak8cGgZDyXjy35p9Av

**THESIS.** Кабинет — табло отправлений: бумаги куда-то едут, клиент читает
состояние и расписание. Отказ от ряда метрик-плиток, одинаковых карточек как
структуры страницы и серифного display-шрифта.

**OWN-WORLD.** Графитовая доска сверху (`#191A1C` шапка, `#1F2124` полоса
состояния, отбивка `#E8A33D` 3px), светлая бумага реестра `#EDEBE4`, лист формы
`#F7F5EF`. Янтарь `#E8A33D` — «в пути» и первичное действие; зелёный `#1F6B3E`
— свободно/исполнено; красный `#A32D22` — отказ; интерактив — индиго `#2C46C0`.
Волосяные линейки `#DED8CA` вместо рамок, радиус 2–3px (не 12).

**Типографика.** Две гарнитуры: Golos Text (интерфейс, кириллица) и JetBrains
Mono (все величины, коды, подписи-заголовки `.lbl` — заглавные с трекингом
0.1em). Величины всегда `font-variant-numeric: tabular-nums`. Крупная величина
на доске 38–62px, шкала интерфейса 13–26px.

**Композиция.** Шапка 58px: знак (два узла + мост) · разделы · янтарная кнопка
«Поручение M2M» (точка входа с каждого экрана) · договор · выход. Ниже — полоса
состояния. Рабочая часть — таблицы с группировкой по счетам депо, состояние в
правом столбце чипом.

**Движение.** Один авторский момент — «перекидывание шторки» (`.live`,
`@keyframes flip`, 420ms) на чипе состояния, который только что изменился;
отключается при `prefers-reduced-motion`.

**Роли.** Вход клиента и вход сотрудника — один экран с переключателем.
Сотрудник в кабинете клиента только готовит поручение, подпись кодом из СМС —
за клиентом; вход сотрудника виден клиенту в «Безопасности».