# Фаза 4 — Пять дизайн-систем > **Проект:** «Прототипы дизайна кабинета» (AI Factory / Командный центр) > **Дата:** 2026-05-31 > **Токены (код):** [`shared/tokens/design-systems.css`](../shared/tokens/design-systems.css) — 5 наборов, scoped `.ds-a … .ds-e`. > **Живой артефакт:** [`gallery/foundations.html`](../gallery/foundations.html) — палитра, типографика, компоненты и дашборды каждой системы вживую. > **Цель:** до сборки (Фаза 5) зафиксировать 5 **радикально разных**, современных, premium «wow»-систем поверх **одного backbone**. Никакого «фиолет-на-белом» AI-клише; типографика — не Inter/Roboto/Arial как идентичность (боль B7). --- ## 1. Как системы различаются (матрица контраста) Системы намеренно разведены по 5 осям, чтобы при одинаковом скелете давать пять разных впечатлений. | Ось | A · Neo Mission Control | B · Aurora Glass | C · Editorial Calm | D · Kinetic Futurism | E · Brutalist Data | |---|---|---|---|---|---| | **Светлота** | тёмный graphite | тёмный сумрак + стекло | светлый, бумага | очень тёмный | светлая газета | | **Акцент** | сигнальный янтарь `#ffb020` | champagne+лиловый | вермильон `#d8442b` | электрик-лайм `#c6f432` | safety-orange `#ff4d00` | | **Поверхности** | матовые панели | фрост-стекло (blur 22px) | мягкая бумага | глянец + неон-глоу | плоские листы + жёсткая тень | | **Дисплей-шрифт** | Space Grotesk | Clash Display | Fraunces (serif) | Sora (800) | Anton (гигант) | | **Радиус** | 8px | 20px | 4px | 14px | 0px | | **Тень** | мягкая + лёгкий глоу | глубокая + сияние | тонкая бумажная | неон-глоу | офсет 4px (hard) | | **Движение** | точное, короткое | плавный parallax-блюр | сдержанный fade | пружинистое, кинетика | резкое, шаговое | | **Характер** | пульт управления | премиальное стекло | журнал | гоночный кокпит | инженерный чертёж | Референс-родословная (из `.factory/attachments/`): A ← тёмные финанс-дашборды (01); B ← AR-стекло/visionOS (06, 11); C ← светлые airy-дашборды (09); D ← кинематографический mission-control/энергия; E ← структурный data-брутализм. --- ## 2. Общий каркас (backbone), который красят все 5 Все системы реализуют один набор компонентов (отсюда корректность сравнения): **метрик-бар** (4 KPI + дельты + токен-индикатор `13%·2ч / 32%·5дн` + LIVE + refresh + burger) · **сайдбар/таб-бар** (4 группы) · **стат-плитка** · **статус-бейдж** · **фильтр-бар** · **карточка-фид** · **прогресс-бар** · **компоненты графиков** (§Фаза 3) · **формы**. Различие — только в визуальном языке через токены `--ds-*`. Контракт токенов (общий для всех систем): `--ds-bg / surface / surface-2 / surface-3 / border / border-strong` · `--ds-text / text-secondary / text-muted` · `--ds-accent / accent-2 / accent-soft` · `--ds-success / warn / danger / info` · `--ds-chart-1..6 / chart-grid / chart-track` · `--ds-font-display / body / mono / num-font` · `--ds-radius / radius-sm / radius-pill / border-w` · `--ds-shadow-1 / shadow-2 / glow / blur` · `--ds-app-bg` · `--ds-dur* / ease* / stagger`. --- ## 3. Системы — детально ### A · Neo Mission Control — «пульт управления» - **Концепция:** refined dark, точная техническая сетка, терминальная ясность. Плотная информативность без визуального шума; янтарь как сигнал, azure — холодный info скупо. - **Палитра:** BG `#0a0d14`, surface `#11161f`, border `#232c3a`, text `#e6ecf5`; accent янтарь `#ffb020`, accent-2 azure `#4ea8ff`; success `#39d98a`, danger `#ff5c5c`. Фон — graphite + лёгкое радиальное свечение сверху-справа + 44px-сетка. - **Типографика:** display **Space Grotesk** 600 (трекинг -0.01em), body **Archivo**, **числа — IBM Plex Mono** (моно-выравнивание колонок KPI). Это уход от Inter. - **Форма/тень:** радиус 8px, тонкая граница, мягкая тень + деликатный янтарный глоу на первичных действиях. - **Движение:** короткое и точное (140–240мс, ease-out); refresh-иконка крутится на hover; счётчики твинятся как в S1. - **Сигнатура:** моно-цифры, hairline-сетка, пилюля токенов в янтаре; «как не надо» из S1 (teal+фиолет, Inter) полностью заменено. ### B · Aurora Glass — «премиальное стекло» - **Концепция:** глассморфизм с глубиной. Живой сумеречный градиент-фон, фрост-панели поверх, иридесцентные блики. Тёплый champagne-свет вместо холодного AI-клише. - **Палитра:** BG-сумрак `#14121f` с тремя радиальными свечениями (персик/лиловое/аква); поверхности — полупрозрачный белый `rgba(255,255,255,.07–.16)` c `backdrop-filter: blur(22px)`; accent champagne `#ffb27a`, accent-2 лиловый `#b794ff`. Граница — светлый hairline `rgba(255,255,255,.14)`. - **Типографика:** display **Clash Display** 600, body **General Sans**, mono **Spline Sans Mono**. Числа — display (мягкие, премиальные). - **Форма/тень:** радиус 20px, глубокая тень + наружное сияние; верхний внутренний световой кант (`inset` highlight) — эффект стекла. - **Движение:** плавный parallax, мягкое проявление блюра, ease-out 520мс; ховер слегка «поднимает» стекло. - **Сигнатура:** многослойность, прозрачность, иридесцентные графики на чарт-палитре champagne→лиловый→аква. ### C · Editorial Calm — «журнал» - **Концепция:** светлый, воздушный, типографика-герой на serif. Данные — тихие, но красивые графики; ритм и крупные поля как в премиальном печатном издании. - **Палитра:** бумага `#f7f4ee`, surface `#fffdf8`, чернила `#1a1813`; accent вермильон `#d8442b` (скупо, как редакционный акцент), accent-2 бутылочный `#1f6f5c`. Графики — приглушённые земляные тона. - **Типографика:** display **Fraunces** (optical serif) 600, body **Spline Sans**, mono **Spline Sans Mono**. Числа — Fraunces с `ss01` (журнальные цифры). - **Форма/тень:** радиус 4px (почти прямые углы печати), очень тонкие бумажные тени, никакого глоу. - **Движение:** сдержанные fade/slide, без пружин; уважение к спокойствию. - **Сигнатура:** много воздуха, тонкие линейки-разделители, графики «тихие» (тонкие штрихи, без заливок-кричалок). Контраст несёт смысл — статусы дублируются подписями. ### D · Kinetic Futurism — «гоночный кокпит» - **Концепция:** bold, motion-led. Энергичные электрик-акценты, крупные кинетические числа, анимированные данные и динамичные переходы. Драйв без хаоса. - **Палитра:** BG `#07090c` с угловыми свечениями циан/лайм; accent лайм `#c6f432`, accent-2 циан `#18e0ff`; danger `#ff4d6d`. Чарт-палитра — неон-спектр. - **Типографика:** display **Sora** 800 (трекинг -0.03em, крупные числа), body **Manrope**, mono **JetBrains Mono**. - **Форма/тень:** радиус 14px, неон-глоу (лайм+циан), лёгкий blur 6px на оверлеях. - **Движение:** пружинистые появления (`cubic-bezier(.34,1.56,.64,1)`), стаггер-каскад баров, бегущая прорисовка линий, hover-«разгон» кнопок. Самый «живой» из пяти (reduce-motion полностью гасит). - **Сигнатура:** гигантские светящиеся KPI-числа, кинетические бар-чарты, акцент-на-движении как идентичность. ### E · Brutalist Data — «инженерный чертёж» - **Концепция:** высокий контраст, сырая структурная сетка, гигантские числа, видимые жирные границы, утилитарный характер. Честная «таблично-чертёжная» эстетика. - **Палитра:** газетная бумага `#ece9e2`, лист `#ffffff`, чёрный текст `#100f0d`, жирная чёрная граница `2px`; accent safety-orange `#ff4d00`, accent-2 ультрамарин `#1a4cff`. Графики — чёрный/оранжевый/синий, плакатно. - **Типографика:** display **Anton** (гигантские конденсированные заголовки и числа), body/mono **Space Mono**. Радикально не-Inter. - **Форма/тень:** радиус 0px, граница 2px чёрная, **офсет-тень `4px 4px 0 #000`** вместо мягкой; на hover карточка/кнопка «сдвигается» (translate -2px и тень растёт). - **Движение:** резкое, шаговое (без сглаживания плавностью), мгновенные состояния. - **Сигнатура:** оверсайз-числа Anton, моно-сетка, жёсткие тени, лейблы капсом-моно. Контраст и структура = стиль. --- ## 4. Анти-клише и доступность (общее) - **Нет «AI-фиолет-на-белом»:** ни одна система не строится на фиолетовом градиенте по светлому; фиолет встречается лишь как 6-я чарт-серия. Идентичность задаёт не дефолтный, а характерный шрифт в каждой системе (Space Grotesk / Clash / Fraunces / Sora / Anton). - **Контраст:** текстовые токены подобраны под AA на своих фонах; в светлых системах (C/E) акцент-на-белом используется для текста с осторожностью (вермильон/оранжевый — крупный/жирный, не мелкий body). - **Не только цвет:** статусы несут иконку/точку/подпись — критично для C/E. - **Reduce-motion:** все системы гасят анимацию через `@media (prefers-reduced-motion: reduce)`. - **Темы:** A/B/D — `color-scheme: dark`; C/E — `light`. Это закладывает и потенциальный «свет/тьма» для выбранной системы на Фазе 8. --- ## 5. Реализация и переносимость - Все 5 систем — в одном файле `shared/tokens/design-systems.css`, изолированы классами `.ds-a … .ds-e`. Прототип Фазы 5: вешает класс на `` и подключает файл, **или** копирует свой блок, переименовав селектор в `:root` (полная автономность прототипа). - Компоненты showcase (`gallery/foundations.css`) написаны так, что читают только `--ds-*` — это черновой общий слой компонентов, переиспользуемый в Фазе 5. - Шрифты подключены из Google Fonts и Fontshare; при упаковке (Фаза 7) можно самохостить для офлайна. **Итог Фазы 4:** зафиксированы 5 радикально разных дизайн-систем (палитры, характерная типографика, форма, тень, движение, сигнатуры) поверх единого backbone; токены вынесены в код и показаны вживую вместе с дашбордами Фазы 3 в [`gallery/foundations.html`](../gallery/foundations.html). Боль B7 (клише) закрыта. Готово к Фазе 5 (постраничная сборка всех 5 прототипов).