6.3 KiB
UI parity: EventHubFront ↔ CalenTIQ board
План визуального выравнивания клиентского фронта с утверждённым бордом.
SoT: boards/calentiq-ui-board-final.png.
Эпик: EventHubSpec#10.
Статус: workstream 1 (Mood system) реализован в EventHubFront (Refs Front#25). Остальные workstreams — backlog.
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 / mood-icons/.
Токены сейчас узкие (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/
Done: EventHubFront#25 — index.css mood tokens + MoodSwitcher cards + favicon via applyMood.
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 |
| 1 | Mood system / atmosphere | Front#25 |
| 2 | Calendar mood-chrome | Front#26 |
| 3 | Discover mood variants | Front#27 |
| 4 | CONTROL booking surfaces | Front#28 |
| 5 | Polish + stage smoke | Front#29 |
Эпик: Spec#10.
Suggested start
Кодить с Task 1 (Mood system / atmosphere): без токенов и switcher-as-cards остальные экраны будут «перекраской primary», а не mood product surface.