Дизайн-система и UI-кит платформы¶

Статус: ревизия №2 по итогам аудита корпуса · 10.10.2026. Документ кодирует фактическую реализацию демо-кабинета (demo/assets/style.css, demo/core.js) — это стандарт для разработки, а не пожелание.

Зачем: демо уже работает как цельный продукт (30 экранов, 10 ролей, три кабинета + УК). Чтобы команда разработки не «изобретала» интерфейс заново, здесь зафиксированы токены, каркас и компоненты в их текущем виде. Живое воплощение — демо-кабинет.

1. Принципы¶

Навигация — не перезагрузка. Каркас (шапка + левое меню) живёт постоянно; при переходе перерисовывается только правая область с мягкой анимацией входа (180 мс, translateY(7px)). Это инвариант продукта (saas/02-demo-cabinet.md).
Два независимых скролла. Меню и контент скроллятся каждый сам (overscroll-behavior: contain) — длинные экраны не «дёргают» каркас.
Одна сетка токенов — три темы кабинетов. Кабинеты различаются только брендовым акцентом, а не компонентами.
Темы светлая/тёмная переключаются флагом на body и перекрывают токены — компоненты тем не знают.
Честная плотность. 14 базовый шрифт, таблицы 13, микроподписи 11–12: интерфейс для смены, а не для витрины.

2. Цветовые токены¶

Токен	Светлая	Тёмная	Назначение
`--bg`	`#f4f5fa`	`#12141c`	фон страницы
`--card`	`#ffffff`	`#1b1e2b`	поверхности (карточки, шапка, меню)
`--line`	`#e3e6ef`	`#2b2f40`	разделители, рамки
`--text` / `--muted`	`#171a26` / `#6b7280`	`#e8eaf2` / `#9aa1b5`	основной / вторичный текст
`--chip`	`#eef0f7`	`#242838`	подложки чипов, ховеры
`--ok / --warn / --err / --info`	`#16a34a` / `#d97706` / `#dc2626` / `#2563eb`	те же	семантика состояний
`--accent`	`#f59e0b`	тот же	акцент «сейчас/внимание» (таймлайн, точки)

Брендовые акценты кабинетов (переопределяют --brand / --brand-2 на body):

Кабинет	Класс	Акцент	Характер
Витрина (`app.lovii.ru`)	`body.cab-app`	`#e0357a` / `#f64a8a`	гостевой, тёплый
Клиентский (`crm.lovii.ru`)	`body.cab-crm`	`#5b21b6` / `#7c3aed`	фирменный фиолетовый
Операционный (`erp.lovii.ru`, включая УК)	`body.cab-erp`	`#089e9a` / `#0abab5`	рабочий, спокойный

Бейджи имеют отдельные пары фон/текст для светлой и тёмной темы (см. --badge в CSS) — не заменять их полупрозрачными подложками.

3. Типографика и ритм¶

Стек: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial — системный, без загрузки шрифтов (быстрый старт кассы).
Уровни: h1 20px, h2 16px, h3 14px; значения KPI — 22px/800.
Отступы: 14 — базовый ритм (--gap), 24 — разрывы блоков; колонка контента центрируется и ограничена 1280px.

4. Каркас (SPA-оболочка)¶

Слой	Элемент	Правила
Шапка	`#topbar`	логотип, переключатель входов (три кабинета с цветными точками), роль/тенант, тема
Меню	`#sidebar`	232px, секции-группы 11px uppercase, активный пункт — брендовая плашка; скролл независимый
Контент	`#main`	единственный перерисовываемый слой; экраны входят анимацией
Лендинг	`body.landing`	приветственный экран без меню, на всю ширину
Адаптив	≤900px	каркас складывается в колонку, меню сверху (≤42vh)

5. Компоненты¶

Компонент	Классы	Где используется
Карточка	`.card`, `.card-head`, `.card.pad0`	все экраны
Сетка	`.grid.cols-2/3/4` (схлопывается до 2 при ≤1000px)	дашборды
KPI	`.kpi .v/.d/.delta.up/.down`	пульсы, отчёты
Таблица	`.tbl`, заголовки 11px uppercase, `.tr.click` — кликабельная строка	реестры, журналы
Бейдж	`.badge .ok/.warn/.err/.info/.brand/.gray`	статусы заказов, аудиторы, задачи
Кнопки	`.btn`, варианты `.primary/.ok/.warn`, `.small`; `:disabled` — 50% opacity	действия
Канбан тикетов	`.kanban`, `.ticket` с цветной верхней кромкой (`.late` — красная, `.ready` — зелёная)	KDS
Таймлайн	`.tl`, состояния `.done` (зелёная точка), `.now` (акцент с ореолом)	статусы заказа, онбординг
Чек	`.receipt` — моноширинный «бумажный» блок	касса
Панель-ящик	`#drawer` (420px, выезжает справа)	журнал событий, детали
Графики	`UI.svgBars` и др. из `core.js` — SVG без внешних библиотек	отчёты

6. Правила разработки поверх кита¶

Новый экран = композиция готовых компонентов; новый компонент появляется только если его нельзя собрать из таблицы/карточки/бейджа.
Цвет — только из токенов; семантика (успех/внимание/ошибка) — только --ok/--warn/--err.
Все числовые значения форматируются toLocaleString("ru-RU") («29,17», «1 234 567»).
Кликабельные строки таблиц и кнопки действий должны иметь мгновенную обратную связь (тост/переход) — «мёртвых» нажатий не бывает.
Диаграммы и графики должны читаться в обеих темах (аналогичное требование действует и для документации: stylesheets/mermaid-dark.css).