Sensei DS
← Аудит Сайт-демо →
Что добавлено · 21 мая 2026

Та же дизайн-система. Теперь покрывает SaaS и мобайл.

Бренд‑тон, цветовая ось и шрифты лендинга — без изменений. Сверху добавлен продуктовый слой: дашборд‑кит, мобильный кит, нейтральная серая шкала и шрифт для плотного UI. Один набор токенов, две темы, три поверхности.

+11 новых токенов +1 шрифт (IBM Plex Sans) +1 нейтральная шкала (slate 0-10) Бренд‑токены не тронуты Тёмная тема прокинута во все новые поверхности
01 · Web app

Dashboard demo

Sidebar · App header · 4 KPI‑карточки · фильтруемая таблица клиентов с health‑баром · форма нового engagement со sidecard.

Sticky sidebar 248px · sticky header 60px · stat-cards с спарклайнами · сортируемая таблица · все компоненты на токенах.

Открыть демо →
02 · Mobile

Mobile UI kit

Тот же дашборд в кармане. Список клиентов · карточка клиента с активностью · форма engagement с bottom‑sheet. Tab bar и chips — паттернами.

Тач‑таргет ≥ 44pt · safe-area · sticky tab bar с backdrop blur · те же status badges, что и в десктопе.

Открыть демо →
Voice in product UI
Сделано. Деплой 2.14.3 — в проде.
Voice in marketing
匠 — mastery, shipped.
03 · Voice + tokens

Voice & токены продукта

Бренд‑голос остался «calm, quietly premium». Добавлен второй регистр для продуктового UI: те же ценности — точность, спокойствие — но в коротких служебных репликах.

+ нейтральная slate‑шкала · IBM Plex Sans как product font · density tokens · focus-ring · z-index scale.

Смотреть гайд ↓

Website demo

Полная сборка лендинга на этих токенах. React 18 · Vite 6 · stub-аутентификация, светлая / тёмная тема, мобильная навигация, все доступные языки.

React SPA · Website demo

Лендинг SENSEI 2026

Главная, услуги, продукты, о компании, контакты — на тех же токенах что и эта страница. Мобильная навигация (burger + drawer), светлая и тёмная темы, переключение языков.

Аутентификация — stub (без бекенда): вход / выход работает, данные в localStorage.

React 18 Vite 6 Stub auth ru / en / ja / zh Mobile nav
Открыть сайт →

Voice in product UI

Бренд‑голос на лендинге — «sensei, спокойный мастер». В продуктовом UI этот голос не меняется, а сжимается. Тот же тон, но без поэзии: короткие фразы, глагол + объект, никаких 匠 в кнопках.

Делаем

  • →Sentence case. Никаких ВСЁ КАПС, кроме SENSEI.
  • →Глагол вперёд: «Создать», «Сохранить», «Откатить деплой».
  • →Цифры — точные. «3 клиента», не «несколько».
  • →Пустые состояния — спокойные. «Здесь пока никого. Начнём с первого клиента.»
  • →Ошибки — что произошло + что сделать. «Не получилось сохранить — проверьте поле «Owner».»
  • →Подтверждения — однозначные. «Готово. Engagement создан.»

Не делаем

  • →Восклицательных знаков и эмодзи в продуктовых строках.
  • →Кричащих CTA. «🔥 Сделай это прямо сейчас!!»
  • →Слов‑паразитов: «синергия», «нинзя», «next‑gen», «революция».
  • →Японских мотивов в служебных строках. «道 — путь сохранения формы»
  • →Обвиняющих ошибок. «Вы ввели данные некорректно.»
  • →Извинений «человеческим тоном». «Ой! Что-то пошло не так 😬»
Primary CTA
Создать engagement
Поехали! 🚀
Destructive CTA
Откатить деплой
Отменить всё это безобразие
Empty state
Здесь пока пусто. Создайте первый отчёт.
Упс! Тут совсем ничего нет 🤷
Error
Не получилось сохранить — проверьте поле «Owner».
Что-то пошло не так. Попробуйте позже.
Success toast
Готово. Engagement создан.
Поздравляем! Вы успешно создали engagement! 🎉
Disabled hint
Выберите хотя бы одного клиента, чтобы продолжить.
Нужно выбрать клиента (а то не дам нажать)

Что добавлено в токены

Всё новое лежит в ds/tokens_product.css, рядом с colors_and_type.css. Базовые бренд‑токены не тронуты — лендинг продолжает работать как раньше.

Сверка с промтом — обновлено

Из 10 требований было закрыто 6, частично 2, не закрыто 2. После этой итерации:

1 · Light + darkбыло ✓
2 · Web + marketing + mobileстало ✓
3 · Internal tools + SaaSстало ✓
4 · Тон голосаоставлен, расширен product‑слоем
5 · Цветовая системабыло ✓ + slate шкала
6 · Шрифтовая парастало ✓ (Plex для UI)
7 · Spacing 4pxбыло ✓
8 · Radius / shadow / motionбыло ✓
9 · CSS custom propertiesбыло ✓ (+11 новых)
10 · Демо‑дашбордстало ✓