v3.9 — App Visual Overhaul
Recreate the next visual language for Objectuve across eight user-facing surfaces in a cohesive, token-accurate design system refresh — from Dashboard and Meet Coach to Communities, Achievements, Settings, Supporter, Onboarding, and Activity Feed.
Summary
The App Visual Overhaul was Objectuve's most ambitious design refresh to date. In late April 2026, five HTML mockups landed on OBJ-63 (Dashboard, Onboarding desktop+mobile, Meet Coach desktop+mobile) and triggered a coordinated redesign across eight surfaces. The work shipped in two phases:
v1.10 Visual Evolution (Phases 39–48, shipped v3.8.0): The foundational phase established a refreshed token system and redesigned the three primary mockup surfaces (Dashboard, Meet Coach, Onboarding) plus completed a whole-Storybook library audit and sweep to ensure consistency across achievements, communities, modals, settings, and chrome.
v1.10 Activity Feed Overhaul (Phase OBJ-111, shipped v3.9.33): The final phase completed the visual overhaul with segmented-control filter tabs, motion-safe transitions, and filter-aware empty states on the Activity Feed — closing the loop on the last user-facing surface and marking the overhaul complete across the entire product.
The headline finding: zero new tokens. Five mockups and eight surfaces were reskinned using only canonical tokens already in the design system. Two tokens were introduced late (Phase 44's --warning for attention state, Phase 46's --rarity-* for achievement tiers), both in service of removing inline hex literals from existing code, not in service of the mockups themselves.
The milestone closed with no outstanding DESIGN-DRIFT findings, every needs-update component shipped or formally deferred, and all accessibility standards met (WCAG AA contrast, ≥44px tap targets, keyboard navigation).
Goal
Recreate the next visual language for Objectuve across eight user-facing surfaces — Dashboard, Meet Coach, Onboarding, Communities, Achievements, Settings, Supporter, and Activity Feed — then ensure the entire Storybook component library is token-accurate and visually consistent.
Scope — What Shipped
Foundation tokens (Phase 39, v3.8.0)
- Five reference mockups ingested; 30 screenshots captured across viewport × mode combinations.
- Three UI-SPECs published (Dashboard, Onboarding, Meet Coach) with state catalogs, microcopy tables, token-used lists, and DESIGN-DRIFT flags.
- Headline finding: zero
tokens-new. All mockups exercise only canonical tokens already intailwind.config.jsanddocs/brand/brand.md.
Onboarding surface (Phase 40, v3.8.0)
WelcomeLayout,SlideWizardLayout, and five slides (WelcomeSlide,PersonaSlide,GoalTypeSlide,SourceSlide,DoneSlide) reskinned to v1.10 visual language.- New step-indicator chrome; per-slide token swap;
DoneSlidepunch-up. - Existing onboarding framework preserved verbatim (visual-layer-only change).
Meet Coach surface (Phase 41, v3.8.0)
- Four-step wizard redesign: Pick your Coach → Dial it in → Set the rhythm → Coach Ready.
- New components:
CoachTonePad.vue(2-D tone × depth pad),CoachFrequencyCardGrid.vue(4-card rhythm picker),CoachFocusList.vue(focus multi-select). - Italic headline accents render text-primary (blue); Coach CTAs use per-persona accent colors; next CTAs use purple.
- Existing v1.2 Coach contract (persona/tone preambles) preserved.
Dashboard surface (Phase 42, v3.8.0)
- Refreshed header chrome, four stat tiles, "Today's practice" focus list, week-shape chart, upcoming events list, stale-goal nudge, "From the Sage" coach card.
- New components:
WeekShapeChart.vue,UpcomingEventsList.vue,StaleGoalAlert.vue.
Storybook library audit (Phase 43, v3.8.0)
- 137 components in
ionic_frontend/src/components/audited and classified:consistent/needs-update/out-of-scope. - Published at
.planning/milestones/v1.10/STORYBOOK-AUDIT.md.
Component family sweeps (Phases 44–48, v3.8.0)
- Phase 44 — Goals: 18 components migrated to canonical tokens;
GoalGridCardbg-amber-500→bg-warning. - Phase 45 — Communities: 18 components reskinned with new category-aware palettes and stripe overlays.
- Phase 46 — Achievements: 7 components migrated to
--rarity-*tokens (common, rare, epic, legendary). - Phase 47 — Modals & Overlays: 17 components (BadgeModal, AgreementModal, StreakDetailsModal, etc.) migrated to canonical tokens.
- Phase 48 — Chrome & Remaining Surfaces: Final surfaces (AppHeader, SideMenu, BottomTabBar, Settings chrome) brought in line.
Settings & Supporter surfaces (Phases in v1.10)
- Supporter redesign: Three-tier pricing layout with emerald success state; updated "Why we built this" narrative page.
- Security & Feedback tabs: Redesigned tab chrome and content styling.
Activity Feed surface (Phase OBJ-111, v3.9.33)
- Segmented-control filter tabs (
All · Allies · Communities · My Activity) with roving-tabindex keyboard navigation. - Motion-safe entry/exit transitions on the feed list.
- Filter-aware empty states (no allies, no communities, no personal activity).
- New
setFilterTabRefref callback method for type-safe tab element handling. - Tablist container includes
tabindex="-1"for WAI-ARIA accessibility.
New tokens introduced
- Phase 44:
--warning— non-blocking attention state (38 92% 50% light / 38 92% 60% dark). - Phase 46:
--rarity-common,--rarity-rare,--rarity-epic,--rarity-legendary— achievement rarity tiers with foreground variants.
Phases
| Phase | Name | Status | Highlights |
|---|---|---|---|
| 39 | Foundation — Mockup Ingestion + Token Layer | ✅ Shipped | Five UI-SPECs, zero new tokens, all DESIGN-DRIFT flags. |
| 40 | Onboarding Surfaces (/welcome family) | ✅ Shipped | Step indicator, slide reskin, framework preserved. |
| 41 | Meet Coach Surface | ✅ Shipped | Four-step wizard, tone pad, frequency grid, persona card extraction. |
| 42 | Dashboard Surface | ✅ Shipped | Hero chrome, stat tiles, week chart, upcoming events, Sage card. |
| 43 | Storybook Library Audit | ✅ Shipped | 137 components audited, 107 stories assessed. |
| 44 | Goal surfaces sweep + --warning token | ✅ Shipped | 18 components, zero inline hex literals. |
| 45 | Communities sweep + category palettes | ✅ Shipped | 18 components, new palette tokens. |
| 46 | Achievements sweep + --rarity-* tokens | ✅ Shipped | 7 visible components, badge contrast ≥4.5:1 AA. |
| 47 | Modals & overlays sweep | ✅ Shipped | 17 components, unified token consumption. |
| 48 | Chrome + remaining surfaces | ✅ Shipped | AppHeader, SideMenu, BottomTabBar, Settings. |
| OBJ-111 | Activity Feed Overhaul | ✅ Shipped | Segmented tabs, motion guards, filter-aware empty states. |
Key Decisions
- Zero new tokens. All five mockups exercise only canonical tokens; this kept scope tight and surfaced that the design system was already robust enough to express the refined visual language.
- Token-migration-first approach. Rather than introduce new tokens upfront, phases 44–48 removed inline hex literals and migrated to new semantic tokens (warning, rarity-*) when they unlocked cleanup opportunities.
- Storybook audit gate. Phase 43 audited every component before family sweeps; this prevented rework and ensured every needs-update classification had a reason.
- Motion-safe guards. All transitions wrapped in
@media (prefers-reduced-motion: no-preference). No animations were shipped without a reduced-motion variant. - Roving tabindex on filter tabs. Activity Feed tabs implement WAI-ARIA composite widget pattern with Home/End/ArrowLeft/ArrowRight keyboard navigation. Ensures accessibility without compromising UX.
Requirements Coverage
No formal requirement set was tracked for this milestone (it was a design refresh, not a feature roadmap). The definition of done was eight surfaces visually refreshed + zero DESIGN-DRIFT findings + full Storybook audit. All three criteria were met.
Outcomes
- Cohesive visual language across eight surfaces. Dashboard, Meet Coach, Onboarding, Communities, Achievements, Settings, Supporter, and Activity Feed now share a unified token-based aesthetic.
- Design system maturity. Canonical tokens (primary, secondary, warning, rarity-*) are documented, used everywhere, and enable future surfaces to integrate without introducing new tokens.
- Accessibility standardized. All surfaces meet WCAG AA contrast, implement roving-tabindex patterns where needed, and respect reduced-motion preferences.
- Component library fully catalogued. Storybook audit identified and resolved 137 components; all stories include light/dark variants and accessibility-critical states.
- No design drift. Zero outstanding DESIGN-DRIFT findings across the entire codebase.
Tech Debt
None. All identified work items were shipped or formally deferred with rationale captured in the audit.
Related Artifacts
- v1.10 Visual Evolution Narrative: v1.10-visual-evolution.md — deep dive on Phases 39–48.
- v1.10 Roadmap: v1.10-ROADMAP.md — full phase breakdown.
- v1.10 Storybook Audit: STORYBOOK-AUDIT.md — component classifications and update plan.
- Activity Feed UI-SPEC: obj-111-activity-feed-overhaul/UI-SPEC.md — implementation reference for segmented tabs and accessibility.
- Brand Guide: docs/brand/brand.md — canonical tokens, color palette, typography.
- Merge PR: #438 — Activity Feed Overhaul final PR.
- Git tag: v3.9.33 — final shipped version.
Related Commits
Notable commits from Phases 39–48 and OBJ-111:
61a69503— Phase 39: foundation tokens + three UI-SPECscd55502d— Phase 40: onboarding surface redesign92c501e8— Phase 41: Meet Coach wizard overhaul28977b84— Phase 42: dashboard composition refresh8c1fd432— Phase 43: Storybook library auditf8314227— Phase 44: goals family sweep +--warningtoken2083539f— Phase 45: communities family sweep25a6e112— Phase 46: achievements family sweep +--rarity-*tokens8216034c— Phase 47: modals & overlays sweep9e6c5ffa— Phase 48: chrome + remaining surfacese281380e— OBJ-111: Activity Feed segmented tabs + motion guards (v3.9.33)
Last updated: 2026-05-22