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