From 5e3c5cb6910f9a0e2373fb6667a0793039235042 Mon Sep 17 00:00:00 2001 From: Aleksey Sabilin Date: Sun, 26 Jul 2026 22:48:43 +0300 Subject: [PATCH] docs: UI parity plan (mood-first) for CalenTIQ Front board. Refs EventHub/EventHubSpec#10 --- BRANDING.md | 1 + design/front/README.md | 4 +- design/front/UI-PARITY.md | 131 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 135 insertions(+), 1 deletion(-) create mode 100644 design/front/UI-PARITY.md diff --git a/BRANDING.md b/BRANDING.md index bd7bcd6..9db9727 100644 --- a/BRANDING.md +++ b/BRANDING.md @@ -27,6 +27,7 @@ IA без изменений: top nav + bottom nav mobile; без left sidebar; - [`design/front/`](design/front/) — UI-борды, Time Arc (mark/lockup), mood icons, tokens - [`design/front/README.md`](design/front/README.md) — опись файлов и IA +- [`design/front/UI-PARITY.md`](design/front/UI-PARITY.md) — план visual parity (mood как product surface; workstreams + non-goals) - [`design/admin/`](design/admin/) — зарезервировано под админку (пока пусто) Runtime-копии в приложении: `EventHubFront/public/brand/` (mark, lockup, favicons, mood app icons). diff --git a/design/front/README.md b/design/front/README.md index 41192fa..8ff6236 100644 --- a/design/front/README.md +++ b/design/front/README.md @@ -1,7 +1,9 @@ # CalenTIQ / EventHubFront — дизайн (SoT) Канонические артефакты клиентского фронта (EventHubFront). Публичный бренд: **CalenTIQ**. -Правила и решения: [`BRANDING.md`](../../BRANDING.md). Админские мокапы — отдельно в [`../admin/`](../admin/). +Правила и решения: [`BRANDING.md`](../../BRANDING.md). +План visual parity (mood-first): [`UI-PARITY.md`](UI-PARITY.md). +Админские мокапы — отдельно в [`../admin/`](../admin/). ## Moods diff --git a/design/front/UI-PARITY.md b/design/front/UI-PARITY.md new file mode 100644 index 0000000..15bfa47 --- /dev/null +++ b/design/front/UI-PARITY.md @@ -0,0 +1,131 @@ +# UI parity: EventHubFront ↔ CalenTIQ board + +План визуального выравнивания клиентского фронта с утверждённым бордом. +SoT: [`boards/calentiq-ui-board-final.png`](boards/calentiq-ui-board-final.png). +Эпик: [EventHubSpec#10](https://git.sabilin.com/EventHub/EventHubSpec/issues/10). + +**Статус:** только планирование / backlog. Реализация UI в этом документе не ведётся. + +--- + +## Mood concept = product surface + +Mood — не переименование `calm|energetic|business` и не смена primary hex. + +Каждый mood — **отдельная атмосфера продукта** при той же IA: + +| Mood | Ощущение | Chrome / surfaces | Discover / booking feel | +|------|----------|-------------------|-------------------------| +| **FLOW** (`calm`) | спокойствие, баланс | soft sage panels, light wash, soft chips | мягкие карточки, спокойный CTA | +| **MOMENTUM** (`energetic`) | энергия, скорость | ink `#111820`, coral `#FF6A3D`, denser chips | тёмный discover, яркий CTA | +| **CONTROL** (`business`) | бизнес, доступность | steel `#324A5F`, cool neutrals | коммерческие карточки слот/специалист/CTA | + +Референс на борде: секции **B Mood Overview**, **C Mood Switcher**, **D Core Screens**, **NEW Discover**, **E Booking / Commercial**. + +Switcher — **branded cards** (иконка + короткий tagline), не plain list/tabs: + +- FLOW — *Find balance* +- MOMENTUM — *Get more done* +- CONTROL — *Grow the business* + +Опционально: mood-aware favicon из [`boards/calentiq-icon-system-final.png`](boards/calentiq-icon-system-final.png) / `mood-icons/`. + +Токены сейчас узкие ([`tokens/colors.json`](tokens/colors.json)); для parity нужны surfaces, gradients, chip/event styles, chrome — не только primary. + +--- + +## Workstreams (mood-first) + +Порядок важен: сначала атмосфера и токены, затем экраны поверх них. + +### 1. Mood system / atmosphere — **P0 / first** + +CSS-токены и chrome на mood beyond primary hex: surfaces, gradients, event chip styles; switcher как branded cards (icon + tagline); опционально mood favicon. + +**Acceptance** + +- [ ] Per-mood token set: surface / wash / chip / border / CTA (не только primary) +- [ ] Mood switcher = 3 branded cards с иконкой и tagline с борда +- [ ] Смена mood меняет атмосферу chrome (не только accent button) +- [ ] API keys остаются `calm|energetic|business` +- [ ] Опционально: favicon следует активному mood + +**Design:** board §B, §C, §F; `mood-icons/`; `tokens/` + +### 2. Calendar mood-chrome — **P0** + +Та же сетка/IA; soft panels (FLOW), denser chips (MOMENTUM), mood-tinted cells (CONTROL) — как на борде §B / §D Calendar. + +**Acceptance** + +- [ ] Month/week выглядят различно по mood при той же навигации +- [ ] Event chips / cells тонированы mood-токенами +- [ ] Нет sidebar / смены layout ради «красоты» + +**Design:** board §B Mood Overview, §D Calendar + +### 3. Discover mood variants — **P1** + +Визуальная дифференциация FLOW vs MOMENTUM vs CONTROL: soft cards + CTA; соответствие борду (NEW Discover / §D Discover), не as-is скринам. + +**Acceptance** + +- [ ] Discover в трёх moods визуально различим (фон, карточки, CTA) +- [ ] Soft card + CTA pattern с борда (не плоский as-is list-only) +- [ ] IA и фильтры без смены модели; только presentation + +**Design:** board NEW Discover, §D Discover; as-is refs: `eventhub-discover-{flow,momentum,control}.png` + +### 4. CONTROL booking surfaces — **P1** + +Коммерческие карточки: слот, специалист, CTA — только Control-specific (§E). + +**Acceptance** + +- [ ] Slot card + specialist card + primary CTA в CONTROL +- [ ] Specialists остаются внутри Control (не 4-й mood) +- [ ] FLOW/MOMENTUM не получают Control commercial chrome + +**Design:** board §E Booking / Commercial + +### 5. Polish + stage smoke — **P2** + +Мелкие расхождения с бордом, wordmark/lockup consistency, stage smoke трёх moods. + +**Acceptance** + +- [ ] Stage smoke: login → calendar → discover → (control) booking в 3 moods +- [ ] Нет регрессий IA (top + bottom nav) +- [ ] Известные отклонения от борда зафиксированы в issue comment + +--- + +## Non-goals + +- Left sidebar / смена IA +- 4-й Creator mood / AI-assistant home +- Rename API keys (`calm|energetic|business` остаются) +- Покупка доменов / DNS cutover +- Админский UI (`design/admin/`) — не трогать Front-бордами +- Полный pixel-perfect каждого пикселя борда (направление + mood atmosphere) + +--- + +## Mapping → issues + +| # | Workstream | Issue | +|---|------------|-------| +| — | Story (родитель) | [Spec#11](https://git.sabilin.com/EventHub/EventHubSpec/issues/11) | +| 1 | Mood system / atmosphere | [Front#25](https://git.sabilin.com/EventHub/EventHubFront/issues/25) | +| 2 | Calendar mood-chrome | [Front#26](https://git.sabilin.com/EventHub/EventHubFront/issues/26) | +| 3 | Discover mood variants | [Front#27](https://git.sabilin.com/EventHub/EventHubFront/issues/27) | +| 4 | CONTROL booking surfaces | [Front#28](https://git.sabilin.com/EventHub/EventHubFront/issues/28) | +| 5 | Polish + stage smoke | [Front#29](https://git.sabilin.com/EventHub/EventHubFront/issues/29) | + +Эпик: [Spec#10](https://git.sabilin.com/EventHub/EventHubSpec/issues/10). + +--- + +## Suggested start + +Кодить с **Task 1 (Mood system / atmosphere)**: без токенов и switcher-as-cards остальные экраны будут «перекраской primary», а не mood product surface.