Аудит DS
Что сделано →
Аудит соответствия · SENSEI Media DS → SaaS-промт

Токены — на пять. Поверхности — наполовину. Дашборда нет.

Я прошёлся по дизайн-системе и каждому пункту твоего промта. Кратко: фундамент (цвета, типографика, отступы, радиусы, тени, тема light/dark) собран чисто и полностью — это сильная сторона. Но промт требует SaaS-систему «дашборд + лендинг + мобайл», а текущая SENSEI заточена под лендинг-сайт услуг: нет дашборд-UI, нет дата-таблиц, нет мобильного кита, тон — «editorial / премиум-сэнсэй», а не «professional but approachable».

6
Полное соответствие. Цветовые токены, типошкала, шкала отступов, радиусы, тени, light + dark.
2
Частично. Шрифты (Gismonda/Cormorant — editorial, не SaaS-нейтральные) и тон голоса (премиум-сдержанный, а не «approachable»).
2
Не закрыто. Покрытие поверхностей: нет SaaS-дашборда (сайдбар, шапка, статы, таблица, форма) и нет мобильного кита.

Сверка пункт за пунктом

Каждое требование промта → что реально есть в colors_and_type.css и ui_kits/.

✓

1. Light AND dark mode «с самого начала» Закрыто

Что в промте Обе темы должны поддерживаться из коробки, переключаться без дописывания.
Что в системе
  • data-theme="dark" на <html> переопределяет все семантические токены: --fg-*, --bg-*, --accent*, --line-*, --shadow-*.
  • Тогглер уже есть в ui_kits/landing/Controls.jsx, состояние пишется в localStorage.
  • В тёмной — малиновый осветлён до #c43238 для контраста.
✕

2. Покрытие: web app (SaaS-дашборд) · marketing · mobile Не закрыто

Что в промте Один комплект, который работает во всех трёх контекстах: SaaS-дашборд, лендинги, мобильные приложения.
Что в системе
  • ✓ ui_kits/landing/ — лендинг полностью покрыт (Hero, Services, Products, Auth, Nav, Footer).
  • ✕ Нет dashboard-кита: ни sidebar, ни app header, ни stat-cards, ни data table, ни filter chips, ни pagination, ни empty/loading states.
  • ✕ Нет мобильного кита: ни list rows, ни tab bar, ни touch targets ≥44px как формализованных паттернов.
~

3. Назначение: internal tools + public SaaS Конфликт позиционирования

Что в промте Утилитарный продуктовый интерфейс — нужны плотность, читаемость в малых кеглях, нейтральная подача.
Что в системе Бренд позиционирован как сервисная компания: warm washi-paper, Cherry-blossom / Fuji hero, «calm + premium + master/teacher». Это идеально для marketing-сайта услуг, но для рабочих экранов с таблицами — визуальный шум: тёплая бумага → «бухгалтерия 90-х», малиновый акцент → «лучше реже».
~

4. Тон: professional but approachable, не corporate, не startup-trendy Близко, но не точно

Что в промте Дружелюбный профессионал. Не «синергия». Не «🚀 ninja».
Что в системе README буквально предписывает «calm, confident, quietly premium … master who has seen a thousand launches». Это тише и торжественнее, чем требует промт. Никакого «approachable» (тёплые приветствия, лёгкая речь) пока нет.
✓

5. Цветовая система с семантическими токенами Закрыто

Чек-лист промта
  • Brand → --accent, --accent-hover/press/soft
  • Neutral → --paper-0..4, --ink-1..4
  • Success / Warning / Error / Info → --status-*
  • Backgrounds → --bg-0..3, --bg-ink
  • Borders → --line-1, --line-2, --line-strong
  • Text layers → --fg-1..4
Доказательство (живые токены)

Brand · Status

--accent
--accent-soft
--status-success
--status-warning
--status-danger
--status-info

Neutrals / fg / bg

--bg-0
--bg-1
--bg-2
--bg-3
--fg-1
--fg-3
--line-1
--line-strong

⚠ Минорное: нейтральная шкала только тёплая (washi-paper). Для product-UI часто нужна нейтрально-серая шкала рядом — иначе таблицы на тёплом фоне выглядят бежевыми.

~

6. Типошкала с distinctive font pairing (display + body + mono) Есть, но editorial

Что в системе
  • Display: Cormorant Garamond
  • Brand mark: SENSEI (Gismonda, только латиница)
  • Body: Inter Tight
  • JP:
  • Mono: JetBrains Mono
Шкала --fs-display 88 → --fs-caption 12 (10 ступеней) — присутствует.
Замечание Cormorant Garamond — редакторский ренессансный антиквенный шрифт. В дашборде с плотным UI он будет читаться как «магазин керамики», не как «панель управления». Для SaaS-направления стоит добавить второй sans для product-UI (Cormorant оставить для marketing-герое́в).
✓

7. Шкала отступов и размеров (4px base) Закрыто

Доказательство 10 ступеней от --sp-1 4px до --sp-10 128px, шаг кратен 4. Используется во всех компонентах.
✓

8. Радиусы, тени, effect tokens Закрыто

Радиусы --radius-sm 4 · --radius-md 8 · --radius-lg 14 · --radius-xl 20 · --radius-pill 999
Тени и эффекты 3 elevation-уровня + crimson-glow. Тёмная тема пересчитана.

Плюс motion: --dur-fast/med/slow, --ease-out, --ease-in-out.

✓

9. Всё как CSS custom properties (design tokens) Закрыто

Проверено В colors_and_type.css объявлено 90 кастомных свойств. Шрифты, размеры, межстрочные интервалы, трекинг, отступы, радиусы, тени, длительности, easing — всё в токенах.
Что хорошо Семантический слой отделён от core (например --accent ссылается на --sensei-crimson) — это правильная архитектура: тема меняет семантику, бренд-цвета остаются собой.
✕

10. Demo: dashboard с sidebar + header + stat cards + data table + form Полностью отсутствует

Что в промте Финальная демо-страница, на которой ВСЕ токены и компоненты показаны в работе в одном дашборде.
Что в системе сейчас В preview/ есть 25+ карточек: цвета, типографика, отступы, тени, бренд, кнопки, бейджи, карточки, формы, nav, auth, products, video. Но нет ни одного экрана-дашборда, где это собрано вместе. Сайдбар/таблица/stat-карточки как компоненты тоже не определены.

Главные пробелы

Если коротко — это то, что блокирует «зачёт» по промту, в порядке приоритета.

Нет SaaS-дашборда как поверхности

Нет сайдбара, app header, stat-карточек, data table, фильтров, пагинации, пустых/loading-состояний. Это центральное требование промта.

Требование 2 + 10

Нет мобильного кита

Нет list rows, tab bar, sheet-паттернов, формализованной touch-сетки. Поверхность «mobile app» из промта не покрыта.

Требование 2

Шрифтовая пара не для продуктового UI

Cormorant Garamond + Gismonda — это лицо marketing. Для дашборда нужен второй sans (например, Inter Tight уже есть для body; добавить компактный display sans для product-headlines).

Требование 6

Тон голоса смещён в «премиум-эдитори́ал»

Промт просит «professional but approachable». README текущей системы — «calm, quietly premium, master». Нужен второй регистр голоса для product UI: короткие, тёплые, ясные подписи.

Требование 4

Нейтральная шкала — только тёплая

Все нейтрали — washi-paper (тёплые бежевые). Для плотных продуктовых таблиц обычно нужна параллельная нейтрально-серая ось — иначе фон будет «желтить».

Требование 5 · минорное

Иконки помечены как «stand-in»

README прямо пишет: Lucide — заглушка, ждём собственный сет. Для SaaS-дашборда иконки — это поверхностная «грамматика»; их статус нужно зафиксировать.

Документация / риск

Что закрыть, чтобы получился «зачёт»

Минимальный план, чтобы превратить текущий лендинг-DS в «SaaS + marketing + mobile», как просит промт.

01
Собрать ui_kits/dashboard/
Sidebar, AppHeader (с глобальным поиском), StatCard, DataTable (sortable, sticky header, row actions), FormSection (inputs, select, checkbox, radio, file). Build на тех же токенах.
M · ~1 день
02
Дашборд-демо как финальный артефакт
Одна страница, где все компоненты живут вместе. Light + dark переключаются. Это и есть «deliverable 6» из промта.
S · ~3 часа
03
Расширить шрифтовую пару под product UI
Добавить токен --font-product (предлагаю компактный sans с числовыми талями, например GT America / IBM Plex Sans) для дашборд-заголовков. Cormorant оставить для marketing.
S · ~1 час
04
Параллельная нейтрально-серая шкала
Добавить --slate-0..9 рядом с paper-шкалой, и переменные --bg-app-* (нейтральные) против --bg-marketing-* (тёплые). Не ломать существующее.
S · ~2 часа
05
Mobile UI kit (минимум)
List row, tab bar, sheet, button-row, top sheet, формализовать touch-target ≥ 44px и safe-area отступы как токены.
M · ~6 часов
06
Второй регистр голоса
Добавить в README раздел «Voice in product UI» — короткие глаголы, тёплое второе лицо, без «匠» в кнопках. Бренд-голос для лендинга оставить как есть.
XS · ~30 мин