Дизайн-система BioVision

Канонический справочник токенов, компонентов и правил. Страница построена на тех же переменных и классах, что и продукт, поэтому отражает реальное состояние UI.

Принципы

Спокойный, клинический, точный. Интерфейс плотный, но не шумный: измерение отделено от интерпретации, статус не передаётся только цветом, AI действует через черновики и роли.

Cage-firstСначала клетка: один радар, один пациент, один ответственный статус.
Измерение не равно выводуКаждая витальная метрика идёт с качеством сигнала и клиническим контекстом.
Доверие через ограниченияAI готовит черновики, а действие фиксируется только после подтверждения роли.

Цветовые токены

Палитра OKLCH. Нажмите на образец, чтобы скопировать имя переменной.

Поверхности и текст

Бренд и акценты

Семантика статусов

Типографика

Manrope для русского UI и маркетинга. JetBrains Mono используется только для значений сенсоров, ID, денег и таймстампов.

Display / Landing H1clamp(48-88px) · 800 · Manrope

Бесконтактный мониторинг

Заголовок страницы28px · 800 · Manrope

Стационар и тревоги

Заголовок секции20px · 700 · Manrope

Карта клеток

Текст / Body15px · 400 · Manrope

Питомец отдыхает в клетке, радар читает микродвижения.

Подпись / Caption13px · 500 · Manrope

Качество сигнала · обновлено 12:40

Метрика / Value36px · 700 · JetBrains Mono

128

Радиусы и тени

Единые радиусы и три уровня теней для глубины интерфейса.

Карточка--radius-card
Контрол--radius-control
Shadow 1--shadow-1
Shadow 2--shadow-2
Shadow 3--shadow-3

Кнопки

Полный примитив на токенах: primary для главного действия, neutral для вторичного, ghost для низкого приоритета, danger для удаления, secondary для тёмной hero-поверхности.

Статус-бейджи

Компонент StatusBadge. Семантический цвет плюс обязательная текстовая метка: статус не зависит только от цвета.

НормаВниманиеТревогаИнфоBioVisionНейтрально

Карточки и метрики

MetricCard — базовый блок дашбордов. Значение в моноширинном шрифте, иконка в семантическом цвете.

112уд/мин
ЧСС
Качество сигнала 0.86
26вд/мин
ЧДД
Базлайн установлен
3
Активные тревоги
2 ждут подтверждения

Таблица — единый примитив

.ds-table заменяет экранные классы таблиц. Колонки задаются через --ds-table-cols, статусные строки всегда содержат текстовый бейдж.

Пациент / клеткаЧСССигналСтатус
Барсик · A-031120.86Норма
Рекс · B-011380.71Внимание
Муся · C-04—0.20Тревога
Рецепт миграции экранных таблиц на .ds-table
  1. Заменить обёртку screen-table на .ds-table и задать --ds-table-cols из старого grid-template-columns.
  2. Шапку screen-table-head на .ds-table-head, строки на .ds-table-row, ячейки на .ds-table-cell.
  3. Статусные классы строк заменить на .is-critical/.is-attention/.is-ready, внутри оставить текстовый бейдж.
  4. Удалять старые классы из globals.css только после визуальной проверки экрана в запущенном приложении.

Статус-индикаторы

Точки состояния и прогресс-полосы для плотных списков, таблиц и боковых панелей.

Радар-нода активна
Базлайн калибруется
Потеря присутствия
Нода в обслуживании
Качество сигнала86%
Заполненность стационара64%
Подтверждено ролью40%

Поля ввода

Контролы держат единый радиус и высоту касания не меньше 44px. Фокус виден всегда, плейсхолдер использует приглушённый текст.

Правила использования

Короткие принципы, удерживающие систему целостной по мере роста продукта.

Делать
  • Использовать токены var(--...) вместо хардкода цветов.
  • Переиспользовать примитивы: одна .card, один .badge, одна .ds-table.
  • Передавать статус меткой, цветом и иконкой или точкой.
  • Соблюдать высоту касания не меньше 44px и видимый фокус.
Избегать
  • Создавать новый класс под каждый экран, если уже есть общий примитив.
  • Инлайн-стили с магическими числами вместо токенов.
  • Статус только цветом, без текста.
  • Декоративную анимацию без поддержки prefers-reduced-motion.
BioVision Design System · источник истины: src/app/globals.css + src/components/ui. Обновляйте эту страницу вместе с изменениями токенов.