Sensei · Mobile

Мобильный UI-кит на тех же токенах

Тот же дашборд, но в кармане. Список клиентов, карточка клиента, форма нового engagement. Tab bar и sheet — отдельными паттернами. Каждый экран читает colors_and_type.css + tokens_product.css и переключает тему.
iPhone 14 Pro · 393×852 logical
Touch target ≥ 44pt · Safe area accounted
9:41
Клиенты 24 активных · 3 под риском
В активной работе
Acme Robotics
Scale · деплой 2 ч назад
€24.8k
Northstar Bank
Production · деплой вчера
€21.3k
Helio Health
Под наблюдением · 3 дн назад
€18.9k
Kanso AI
Scale · деплой 5 ч назад
€17.2k
Volta Mobility
Под риском · 11 дн назад
€14.4k
На паузе
Tundra Labs
Paused · возврат в Q3
—
01 · Список клиентов
9:41
Acme Roboticsacme.dev · Scale
Acme Robotics
acme.dev · €24.8k MRR
Полное сопровождение DevOps + интеграции. K8s в eu-central, релизы каждые 2 недели. Owner: Михаил К.
Health
92
Деплои · мес
14
Инциденты
0
Активность
Deploy 2.14.3 в production
Прошёл за 4 мин 12 сек · 0 ошибок
2 ч
Артём оставил комментарий в kickoff‑канале
«Подтвердил доступ к staging — можно деплоить»
3 ч
CPU на api-eu-1 поднимался до 81 %
Авто‑скейлинг подключил +2 пода, нормализовалось
вчера
02 · Карточка клиента
9:41
Новое engagement
Мониторинг с первого дня
Метрики, логи, алерты в Telegram
Доступ к репозиториям
Тикет + чек-лист на почту

Зафиксировать engagement?

Карточка появится в Clients, owner получит уведомление, мы зарезервируем kickoff‑слот.

Создать и анонсировать в #wins
Команде придёт короткое приветствие
Создать без анонса
Тихий старт — рассказать команде вручную
03 · Форма + bottom sheet

Mobile-токены и паттерны

Всё, что нужно собрать любой мобильный экран. Каждый паттерн использует те же переменные, что и десктоп‑дашборд — поэтому темы переключаются синхронно.

Touch targets

Минимальный размер интерактива — 44pt. Используем --control-h-lg.

--control-h-lg: 44px
--control-h-md: 36px
--control-h-sm: 28px

List row

Лого 38×38, имя 15px/600, мета 12px/500. Высота строки ≥ 60px.

--bg-surface
--border-app
--fg-1 · --fg-3

Tab bar

4 раздела, иконка 22px, текст 10px/600 uppercase. Активный — --accent.

backdrop-filter: blur(12px)
bg: bg-surface @ 90%

Filter chips

Горизонтальный скролл, активный — заливка акцентом, остальные — пунктир с outline.

--radius-pill
--accent на on-state

Field card

Поле формы — белая «карточка» с маленьким лейблом сверху. Не классический outlined input — компактнее и легче воспринимается.

--bg-surface · --border-app
label: 11px uppercase

Bottom sheet

radius 24/24/0/0, padding 36px снизу, grabber 36×4. Подложка rgba(0,0,0,0.4).

--shadow-3
safe-area-inset-bottom