docs: UI parity plan (mood-first) for CalenTIQ Front board. Refs EventHub/EventHubSpec#10

This commit is contained in:
2026-07-26 22:48:43 +03:00
parent 1f6bc3decc
commit 5e3c5cb691
3 changed files with 135 additions and 1 deletions
+1
View File
@@ -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).
+3 -1
View File
@@ -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
+131
View File
@@ -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.