Design System
Mission Control

UI Kit: интерфейс как дисциплина

Это не витрина компонентов. Это контрольный стенд: токены, состояния, плотность, контраст и поведение элементов в реальных сценариях. Когда продукт управляет сложными процессами, дизайн обязан быть тихим, предсказуемым и проверяемым.

Принцип
Predictable UI
Одинаковое действие — одинаковый результат.
Фокус
Operational clarity
Сигналы видны, шум подавлен.
Режим
Always-on
Интерфейс не ломается под нагрузкой решений.
Context
Зачем это существует

UI-kit нужен не дизайнерам. Он нужен инженерам и руководителям, чтобы интерфейс был управляемым артефактом.

В системах контроля важнее всего не «красиво», а стабильно. Один и тот же статус обязан выглядеть одинаково на разных страницах, устройствах и в разных командах. Это тот же принцип, что и API-контракты: фиксируем поведение, чтобы масштабировать без сюрпризов.

Сигналы и шум
Если «опасность» показывать часто — она перестаёт быть сигналом. Токены статусов описаны заранее и применяются экономно: редкий сигнал = высокий смысл.
Stable
Focus
Quiet
Live controls
Режимы отображения

Переключатели меняют атрибуты и CSS-переменные на корневом элементе. Это способ проверить интерфейс под разными профилями нагрузки.

Профили
Профиль — это не «тема». Это режим чтения данных: плотность, радиус, тени и акцент.
Плотность
Компактнее — меньше воздуха, больше данных на экране.
ComfortCompact
Радиус
Мягкий радиус — спокойнее. Острый — строже и инженернее.
SoftSharp
Тень
Тихая — меньше визуального давления. Выраженная — сильнее разделение слоёв.
QuietPresent
Акцент
Акцент — это договор о фокусе. Два режима: cyan и indigo.
Cyan
Indigo
Tokens
Цветовые токены

Не «палитра», а словарь смыслов: фон, поверхность, границы, сигнал, риск.

Background
Базовая плоскость. Тёмная, спокойная. На ней всё держится.
--ncx-background
Surface
Рабочая поверхность карточек и модулей. Отделяет «систему» от фона.
--ncx-surface
Border
Границы и сетка. Должны быть тихими, но дисциплинировать композицию.
--border
Primary
Акцент принятия решения: действие, подтверждение, фокус.
--ncx-primary
Muted
Второстепенные тексты и шум. Снижает давление интерфейса.
--ncx-muted
Success
Зелёный — не «ура», а «стабильно». Сигнал корректного состояния.
--ncx-success
Warning
Жёлтый — зона внимания. Не паника, а необходимость проверки.
--ncx-warning
Danger
Красный — отклонение и риск. Используется редко и по делу.
--ncx-danger
Поверхность модуля
Карточки — это не «декор». Это контейнер ответственности: состояния, решений, следов.
Trace
Control
state
Стабильно
Никакого праздника. Просто отсутствие сюрпризов.
signal
Требует внимания
Жёлтый — чтобы смотреть, а не чтобы бояться.
risk
Отклонение
Красный — только когда это действительно риск.
Components
Компоненты как язык управления

Кнопки, бейджи, табы и аккордеоны — это способ выражать состояния и переходы без лишних слов.

Действие — это решение
Primary — там, где пользователь принимает обязательство. Secondary — где он уточняет контекст. Text — где действие не должно перетягивать внимание.
contract
Предсказуемость
Компонент ведёт себя одинаково везде.
latency
Быстрые реакции
Состояния hover/focus читаются мгновенно.
intent
Ясное намерение
Действие отличимо от навигации.
Note
Небольшая, но важная мысль

Если закрыть страницу через 30 секунд — должно остаться ощущение контроля.

Дизайн-система — это не набор стилей. Это соглашение о том, как выглядит ясность. Если компоненты и токены зафиксированы, продукт можно масштабировать, не теряя форму мышления. На больших системах это — разница между «работает» и «управляется».