zuevav
111 lines
8.4 KiB
Markdown
111 lines
8.4 KiB
Markdown
# 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`.
|
|
|
|
**Роли.** Вход клиента и вход сотрудника — один экран с переключателем.
|
|
Сотрудник в кабинете клиента только готовит поручение, подпись кодом из СМС —
|
|
за клиентом; вход сотрудника виден клиенту в «Безопасности».
|