# PocketCoach App Brand Redesign Plan Date: 2026-06-16 Baseline pack: `artifacts/pocket-coach-screenshots/2026-06-16-web-baseline/` Drive baseline folder: https://drive.google.com/drive/folders/1aD79sJDke4kpQv_JHFqWPwWyM1xAE2LA ## Inputs Reviewed - Current app baseline: 31 old-brand screenshots across auth, onboarding, today, calendar, history, coach, settings, session, and integrations. - Live site: https://pocketcoachhq.com/ - Drive guideline: `PocketCoach Live Website Brand Guidelines Update - 2026-06-05` - Drive guideline: `Pocket_Coach_Full_Brand_Guidelines_v0.1` - Drive assets: `Logo Assets - 2026-06-06`, `Website Logo Profile Pictures - 2026-06-06`, `Instagram Launch Grid - 2026-06-06`, and `Product Screenshots`. ## Brand Direction To Apply PocketCoach should move from the current generic dark fitness-app look to the live website direction: direct, product-led, cobalt performance-tech, and grounded in the practical coaching loop. Core product story: - Your week changed. Your plan should too. - AI coaching that leaves the chat. - Chat creates the plan; PocketCoach puts it into calendar/workout context and adapts from what actually happened. - Not another tracker. Not another static plan. Not another chatbot. Visual system: - Primary app palette: Abyss `#1B2A66`, Cobalt `#2E5BFF`, Flat Blue `#2447C9`, Ink `#0D1633`, Frost `#F4F6FB`, Shallow `#D9E1FA`, Volt `#D8F23F`, Muted `#525E80`, Line `#DEE3F1`, White `#FFFFFF`. - Functional accents: Strava Orange `#FC4C02`, Run Green `#22C55E`, Nutrition Amber `#F59E0B`, Voice Cyan `#06B6D4`, Strength Purple `#A855F7`. - Typography: Inter for app UI. Archivo can be used sparingly for brand moments, empty states, and onboarding headlines, but not dense operational UI. - Shape language: 8px app cards where practical, restrained shadows, clearer borders, and fewer glow effects. - Copy: practical, plain English, no guilt, no medical claims, no performance guarantees. ## Implementation Principles 1. Build a new theme layer first. Update `constants/theme.ts` so every screen can consume the same live-site color tokens, spacing, radius, border, and typography decisions. 2. Preserve app utility over marketing polish. The app is a daily training tool. Use the website brand for identity, but keep screens dense enough for repeated use. 3. Make the coaching loop visible everywhere. Today, Coach, Calendar, History, and Settings should all show the same loop: plan, schedule, train, check in, adapt. 4. Treat Volt as a signal, not decoration. Use Volt for success/completion, selected high-value actions, and short celebratory moments. Do not make it the main button color everywhere. 5. Keep trust controls prominent. Memory, AI disclosure, consent, Strava sharing, notifications, and connected apps should feel first-class, not buried legal settings. ## System-Level Work ### Theme Tokens - Replace current primary gradient `#2563EB -> #06B6D4` with website-aligned cobalt/abyss gradient. - Change light theme background to Frost and text to Ink. - Rework dark theme to be intentional Abyss/Ink rather than generic dark gray. - Add semantic tokens for coach, calendar, memory, voice, adaptation, warning, success, and integration cues. - Reduce card radius from 16px default to 8px for operational cards, keeping larger radii only for modals or hero onboarding moments. - Tone down `glowShadow()` so primary actions feel premium rather than neon. ### Shared Components - `GradientButton`: cobalt/flat-blue primary, white label, subtle shadow; add a Volt variant for completion/success only. - `SurfaceCard`: Frost/white surfaces in light mode, shallow blue borders, 8px radius, optional left accent only when it carries information. - `ScreenHeader`: add consistent section labeling and small route/check mark brand cue where useful. - `SegmentedControl`: align to website pill controls: flat blue active state, shallow inactive surface. - `ErrorBanner`, `OfflineBanner`, `AIDisclosureBanner`: restyle as trust/system notices with clear boundaries and less alarmist color. - `ChatBubble`, `ApprovalCard`, `VoiceInput`: make these the strongest brand carriers because the website's differentiator is chat becoming executable workflow. ## Screen-by-Screen Plan ### Auth And Login Screens: - `auth/login-sign-in.png` - `auth/login-sign-up.png` - `auth/data-consent.png` - `auth/age-gate.png` - `auth/profile-intake-start.png` Direction: - Introduce the website lockup/mark and the headline territory: "Your week changed. Your plan should too." - Use a cobalt/Abyss top band with clean white form surfaces. - Keep forms simple and trustworthy; avoid over-branding age and consent gates. - Use trust copy around AI disclosure, data consent, and controlled connections. - Profile intake should feel like the first step in making the coach useful, not a generic account form. ### Onboarding Screens: - `onboarding/01-welcome.png` - `onboarding/02-step.png` Direction: - Reframe onboarding around the loop: Chat, Plan, Calendar, Adapt. - Use simple product UI receipts rather than generic feature slides. - Add concise copy: - "Tell PocketCoach what you are training for." - "Place sessions where your life already lives." - "When the week changes, the plan changes with it." - Use Archivo only for major onboarding headline moments; Inter for supporting copy. ### Today Screens: - `today/dashboard.png` - `today/check-in-modal.png` - `today/session-completion-modal.png` Direction: - Today becomes the operational home for "what should I do next?" - Prioritize the next session, current plan health, calendar fit, and adaptation status. - Use small workflow receipts: "Check-in saved", "Strava received", "Session moved", "Coach action pending". - Restyle check-in modal around quick context: sleep, fatigue, schedule pressure, missed session, travel/weather. - Completion modal should use Volt sparingly for completion and include a clear "what changes next" area. ### Active Workout Screen: - `session/active-workout.png` Direction: - Reduce visual noise and make steps highly scannable. - Use Run Green, Voice Cyan, or Strength Purple only when the workout category requires it. - Add a subtle "coach context" strip when the session has been adapted. - Ensure controls are thumb-friendly and do not rely on gradient-heavy buttons. ### Calendar Screens: - `calendar/week.png` - `calendar/day.png` - `calendar/month.png` Direction: - Calendar should become the clearest proof that PocketCoach "leaves the chat." - Use Frost background, white schedule cards, cobalt selected day, and functional sport accents. - Show changed/moved sessions with a small adaptation indicator. - Week view should be the default product hero inside the app; day/month remain supporting views. - Keep missed sessions calm: "Missed. Adjust?" rather than guilt-heavy red states. ### History And Activity Detail Screens: - `history/timeline.png` - `history/activity-detail.png` Direction: - History should communicate "what happened and what the coach learned." - Activity detail should include training summary, source integration, and whether it affected the plan. - Use Strava Orange only for Strava-originated activity cues. - Add a readable coaching-loop receipt: logged, interpreted, plan updated or no change needed. ### Coach Screens: - `coach/empty-state.png` - `coach/conversation-list-modal.png` - `coach/conversation-with-approval.png` - `coach/voice-input-modal.png` Direction: - This is the core differentiator and should look closest to the live website visual system. - Empty state should say what the coach can do now: plan week, adjust session, explain trade-offs, place workouts. - Approval cards should look like executable workflow cards, not ordinary chat messages. - Conversation drawer should organize by practical intent: plan, adapt, check-in, explain, settings. - Voice modal should reinforce that voice becomes inspectable text context. - Keep AI boundaries visible but calm. ### Settings Screens: - `settings/settings-main.png` - `settings/profile.png` - `settings/notifications.png` - `settings/coaching-prefs.png` - `settings/memories.png` - `settings/help.png` - `settings/help-article-getting-started.png` - `settings/connected-apps.png` - `settings/consent.png` - `settings/delete-account.png` Direction: - Settings should be reorganized around trust, context, connections, and preferences. - Memory should feel like a core feature: visible, editable, deletable. - Connected apps should use official integration colors only as small cues. - Notifications should focus on training usefulness, not generic reminders. - Help should reuse the public brand language but stay practical and support-led. - Delete account and consent screens should be plain, calm, and unambiguous. ### Integrations Screen: - `integrations/strava-consent.png` Direction: - Make connection consent feel controlled and transparent. - Explain what is used, what is not used, and what the user can revoke. - Use Strava Orange only as a service marker; keep the overall screen in PocketCoach brand. ## Recommended Build Phases ### Phase 1: Brand Foundation - Update design tokens in `constants/theme.ts`. - Update shared primitives: buttons, cards, headers, banners, segmented controls, tabs. - Add app-level brand mark/wordmark assets from the website mark once the mark decision is final. - Run screenshot capture again to compare only foundation-level changes. ### Phase 2: Core Product Screens - Redesign Today, Calendar, Coach, and Active Workout first. - These screens carry the strongest product promise and should drive the rest of the UI system. - Validate mobile density, empty states, modal states, and tap targets. ### Phase 3: Trust And Account Flows - Redesign auth, consent, settings, connected apps, memory, and notifications. - Make AI boundaries and data controls coherent with the website trust section. - Keep legal/consent copy conservative. ### Phase 4: Onboarding And Launch Assets - Redesign onboarding after core screens are stable so it previews the real product. - Retake the full screenshot set. - Use the new screenshots for app store, social, onboarding docs, and website/product mockups. ### Phase 5: QA And Screenshot Regeneration - Capture the same 31-screen matrix after redesign. - Compare old-brand and new-brand baselines side by side. - Check accessibility contrast, small-screen text fit, reduced motion, and loading/error/empty states. - Preserve both screenshot packs in Drive and the repo. ## Immediate Next Steps 1. Confirm the live website SVG mark is the app mark for this redesign. 2. Implement the theme token update and shared component pass. 3. Redesign Today, Calendar, Coach, and Active Workout. 4. Retake the screenshot pack with the same capture script and folder structure. 5. Move through auth/settings/onboarding once the core app language is stable.