Mo - UI/UX Design Document
1. Design Philosophy
| Principle | Description |
|---|---|
| Mobile-First | Design for phone, scale up to tablet/desktop |
| Dark Default | Gym-friendly, premium feel, reduces eye strain |
| Motion with Purpose | Animations reinforce momentum, not distract |
| Data Density | Show enough info without overwhelm |
| Thumb-Friendly | Key actions in bottom 40% of screen |
| Coach Presence | Personality visible but not intrusive |
2. Color System
Dark Theme (Default)
| Token | Hex | Usage |
|---|---|---|
bg-primary | #0a0a0f | Main background |
bg-secondary | #14141f | Elevated surfaces |
bg-card | #1a1a2e | Cards, modals |
bg-input | #1f1f35 | Input fields |
accent-primary | #00d4aa | Primary actions, CTAs (Teal) |
accent-secondary | #7c3aed | Secondary highlights (Purple) |
accent-tertiary | #f59e0b | Warnings, streaks (Amber) |
text-primary | #ffffff | Main text |
text-secondary | #a1a1aa | Muted text |
text-tertiary | #71717a | Disabled, hints |
border | #27272a | Borders, dividers |
success | #22c55e | Completed, gains |
warning | #f59e0b | Caution |
error | #ef4444 | Errors, decreases |
Light Theme
| Token | Hex | Usage |
|---|---|---|
bg-primary | #ffffff | Main background |
bg-secondary | #f4f4f5 | Elevated surfaces |
bg-card | #ffffff | Cards (with shadow) |
bg-input | #f4f4f5 | Input fields |
accent-primary | #00b894 | Primary actions (slightly darker teal) |
accent-secondary | #7c3aed | Secondary highlights |
text-primary | #09090b | Main text |
text-secondary | #71717a | Muted text |
text-tertiary | #a1a1aa | Disabled, hints |
border | #e4e4e7 | Borders |
Coach Colors (Accent per character)
| Coach | Color | Hex | Usage |
|---|---|---|---|
| Sam | Teal | #00d4aa | Default, buddy energy |
| Max | Red | #ef4444 | Intensity, urgency |
| Sage | Green | #22c55e | Calm, wellness |
| Nova | Blue | #3b82f6 | Knowledge, data |
| Ace | Gray | #71717a | Minimal, efficient |
| Chip | Yellow | #fbbf24 | Fun, playful |
| Rex | Orange | #f97316 | Competitive fire |
| Mo | Gradient | #00d4aa → #7c3aed | Adaptive, dynamic |
CSS Custom Properties
:root {
/* Dark theme (default) */
--mo-bg-primary: #0a0a0f;
--mo-bg-secondary: #14141f;
--mo-bg-card: #1a1a2e;
--mo-bg-input: #1f1f35;
--mo-accent-primary: #00d4aa;
--mo-accent-secondary: #7c3aed;
--mo-accent-tertiary: #f59e0b;
--mo-text-primary: #ffffff;
--mo-text-secondary: #a1a1aa;
--mo-text-tertiary: #71717a;
--mo-border: #27272a;
--mo-success: #22c55e;
--mo-warning: #f59e0b;
--mo-error: #ef4444;
/* Gradients */
--mo-gradient-primary: linear-gradient(135deg, #00d4aa 0%, #7c3aed 100%);
--mo-gradient-card: linear-gradient(180deg, #1a1a2e 0%, #14141f 100%);
/* Shadows */
--mo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--mo-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--mo-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
--mo-shadow-glow: 0 0 20px rgba(0, 212, 170, 0.3);
}
[data-theme="light"] {
--mo-bg-primary: #ffffff;
--mo-bg-secondary: #f4f4f5;
--mo-bg-card: #ffffff;
--mo-bg-input: #f4f4f5;
--mo-accent-primary: #00b894;
--mo-text-primary: #09090b;
--mo-text-secondary: #71717a;
--mo-text-tertiary: #a1a1aa;
--mo-border: #e4e4e7;
--mo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--mo-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--mo-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
3. Typography
Font Family
Primary Font: Inter (Google Fonts)
- Excellent readability
- Tabular numbers for data
- Wide language support
- Variable font for performance
Type Scale
| Element | Font | Weight | Size (Mobile) | Size (Desktop) | Line Height |
|---|---|---|---|---|---|
| Display | Inter | 800 | 32px | 48px | 1.1 |
| H1 | Inter | 700 | 28px | 36px | 1.2 |
| H2 | Inter | 600 | 24px | 28px | 1.25 |
| H3 | Inter | 600 | 20px | 24px | 1.3 |
| H4 | Inter | 600 | 18px | 20px | 1.35 |
| Body Large | Inter | 400 | 18px | 18px | 1.5 |
| Body | Inter | 400 | 16px | 16px | 1.5 |
| Body Small | Inter | 400 | 14px | 14px | 1.5 |
| Caption | Inter | 500 | 12px | 12px | 1.4 |
| Overline | Inter | 600 | 11px | 12px | 1.4 |
| Numbers (Data) | Inter | 600 | 16px+ | 16px+ | 1.2 |
| Numbers (Large) | Inter | 700 | 32px | 48px | 1.1 |
| Coach Voice | Inter | 500 Italic | 16px | 16px | 1.5 |
Tailwind Config
// tailwind.config.ts
fontSize: {
'display': ['2rem', { lineHeight: '1.1', fontWeight: '800' }],
'h1': ['1.75rem', { lineHeight: '1.2', fontWeight: '700' }],
'h2': ['1.5rem', { lineHeight: '1.25', fontWeight: '600' }],
'h3': ['1.25rem', { lineHeight: '1.3', fontWeight: '600' }],
'h4': ['1.125rem', { lineHeight: '1.35', fontWeight: '600' }],
'body-lg': ['1.125rem', { lineHeight: '1.5', fontWeight: '400' }],
'body': ['1rem', { lineHeight: '1.5', fontWeight: '400' }],
'body-sm': ['0.875rem', { lineHeight: '1.5', fontWeight: '400' }],
'caption': ['0.75rem', { lineHeight: '1.4', fontWeight: '500' }],
'overline': ['0.6875rem', { lineHeight: '1.4', fontWeight: '600', letterSpacing: '0.05em' }],
}
4. Spacing System
Spacing Scale
| Token | Value | Usage |
|---|---|---|
xs | 4px | Tight spacing, inline elements |
sm | 8px | Compact spacing, icon gaps |
md | 12px | Standard spacing |
lg | 16px | Comfortable spacing, card padding |
xl | 24px | Spacious, section gaps |
2xl | 32px | Major section gaps |
3xl | 48px | Page sections |
4xl | 64px | Large separations |
Layout Constants
// Layout measurements
const layout = {
headerHeight: 56, // px
bottomNavHeight: 80, // px (including safe area)
safeAreaTop: 44, // px (iOS notch)
safeAreaBottom: 34, // px (iOS home indicator)
cardPadding: 16, // px
screenPadding: 16, // px (mobile)
screenPaddingLg: 24, // px (tablet)
screenPaddingXl: 32, // px (desktop)
maxContentWidth: 1200, // px
sidebarWidth: 280, // px (desktop)
}
Layout Grid
| Screen | Columns | Gutter | Margin |
|---|---|---|---|
| Mobile (<640px) | 4 | 16px | 16px |
| Tablet (640-1024px) | 8 | 24px | 24px |
| Desktop (>1024px) | 12 | 24px | 32px |
5. Component Library
5.1 Buttons
Variants
| Variant | Usage | Background | Text |
|---|---|---|---|
| Primary | Main CTA | accent-primary | White |
| Secondary | Secondary actions | Transparent | accent-primary |
| Ghost | Tertiary actions | Transparent | text-secondary |
| Destructive | Delete, cancel | error or outline | White or error |
| Coach | Coach-specific | Coach color | White |
Sizes
| Size | Height | Padding | Font Size | Icon Size |
|---|---|---|---|---|
sm | 32px | 12px | 14px | 16px |
md | 40px | 16px | 16px | 20px |
lg | 48px | 20px | 16px | 24px |
xl | 56px | 24px | 18px | 24px |
States
Default → Hover (+5% brightness)
→ Active (scale: 0.98)
→ Disabled (opacity: 0.5)
→ Loading (spinner, disabled)
Button Component
<Button variant="primary" size="lg">
Start Workout
</Button>
<Button variant="secondary" size="md" leftIcon={<Plus />}>
Add Set
</Button>
<Button variant="ghost" size="sm">
Skip
</Button>
5.2 Cards
Card Types
| Type | Usage | Features |
|---|---|---|
| Base Card | Generic container | Padding, border, shadow |
| Workout Card | Today's workout | Title, subtitle, CTA, coach avatar |
| Exercise Card | Exercise in list | Name, sets/reps, previous, swap action |
| Set Card | Log individual set | Weight, reps, RPE, complete toggle |
| Stat Card | Dashboard metric | Icon, value, label, trend |
| Coach Card | Coach selection | Avatar, name, description, select |
| Progress Card | Charts/trends | Title, chart, time range |
Card Anatomy
┌─────────────────────────────────┐
│ [Icon] Title [Action]│ ← Header (optional)
├─────────────────────────────────┤
│ │
│ Main Content │ ← Body
│ │
├─────────────────────────────────┤
│ Footer / Actions │ ← Footer (optional)
└─────────────────────────────────┘
Padding: 16px
Border radius: 12px
Border: 1px solid var(--mo-border)
Background: var(--mo-bg-card)
5.3 Inputs
Text Input
┌─────────────────────────────────┐
│ Label │
├─────────────────────────────────┤
│ [🔍] Placeholder text... [×] │
├─────────────────────────────────┤
│ Helper text or error message │
└─────────────────────────────────┘
Height: 48px
Padding: 12px 16px
Border radius: 8px
Number Input (Weight/Reps)
┌─────────────────────────────────┐
│ WEIGHT (lb) │
│ ┌─────┐ ┌─────────┐ ┌─────┐ │
│ │ - │ │ 155 │ │ + │ │
│ └─────┘ └─────────┘ └─────┘ │
│ │
│ [135] [145] [155] [165] [175] │ ← Quick presets
└─────────────────────────────────┘
Large touch targets: 48×48px minimum
Increment buttons: 5lb/1kg steps
Long press: Fast increment
Input States
| State | Border | Background | Label |
|---|---|---|---|
| Default | border | bg-input | text-secondary |
| Focus | accent-primary | bg-input | accent-primary |
| Error | error | bg-input | error |
| Disabled | border | bg-secondary | text-tertiary |
5.4 Navigation
Bottom Navigation
┌─────────────────────────────────────────────┐
│ │
│ [🏠] [💪] [🤖] [📈] [⚙️] │
│ Home Workout Coach Progress Settings│
│ │
└─────────────────────────────────────────────┘
Height: 80px (including safe area)
Active: accent-primary + filled icon
Inactive: text-tertiary + outline icon
Header
┌─────────────────────────────────────────────┐
│ [←] Page Title [Action]│
└─────────────────────────────────────────────┘
Height: 56px
Back button: 44×44px touch target
Title: h3 style, centered or left-aligned
Tab Bar
┌─────────────────────────────────────────────┐
│ [Weight] [Strength] [Activity] │
│ ═══════ │
└─────────────────────────────────────────────┘
Active: text-primary + underline (accent-primary)
Inactive: text-secondary
5.5 Feedback Components
Toast
┌─────────────────────────────────┐
│ [✓] Set logged successfully │
└─────────────────────────────────┘
Position: Top center (below status bar)
Duration: 3 seconds
Animation: Slide down + fade
Variants: success, error, warning, info
Modal
┌─────────────────────────────────┐
│ │
│ ┌───────────────────────────┐ │
│ │ [×] │ │
│ │ │ │
│ │ Modal Title │ │
│ │ │ │
│ │ Content goes here │ │
│ │ │ │
│ │ [Cancel] [Confirm] │ │
│ │ │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────┘
Overlay: rgba(0, 0, 0, 0.8)
Animation: Scale + fade
Border radius: 16px
Bottom Sheet
┌─────────────────────────────────┐
│ │
│ │
│ │
├─────────────────────────────────┤
│ ──────── │ ← Drag handle
│ │
│ Sheet Title │
│ │
│ • Option 1 │
│ • Option 2 │
│ • Option 3 │
│ │
│ [Cancel] │
│ │
└─────────────────────────────────┘
Animation: Slide up
Drag to dismiss
Border radius: 16px 16px 0 0
Skeleton Loading
┌─────────────────────────────────┐
│ ████████░░░░░░░░░░ │ ← Shimmer animation
│ ██████████████░░░░░░░░░░░░░░ │
│ ████████████░░░░░░░░░░░ │
└─────────────────────────────────┘
Animation: Left-to-right shimmer, 1.5s loop
Color: bg-secondary → bg-card gradient
6. Screen Wireframes
6.1 MoBoard (Dashboard)
┌─────────────────────────────────┐
│ ☰ Mo [👤] │
├─────────────────────────────────┤
│ │
│ ┌───────────────────────────┐ │
│ │ [3D Coach Avatar] │ │
│ │ │ │
│ │ "Push day. Let's build │ │
│ │ some momentum!" │ │
│ │ - Sam │ │
│ └───────────────────────────┘ │
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ 🔥 12 │ │ 📅 Week │ │
│ │ Streak │ │ 3/12 │ │
│ └─────────┘ └─────────┘ │
│ │
│ TODAY'S WORKOUT │
│ ┌───────────────────────────┐ │
│ │ Push A │ │
│ │ Chest, Shoulders, Triceps│ │
│ │ ~55 min · 6 exercises │ │
│ │ │ │
│ │ [ START WORKOUT ] │ │
│ └───────────────────────────┘ │
│ │
│ QUICK ACTIONS │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ ⚖️ │ │ 💬 │ │ 📊 │ │
│ │Weight│ │Coach│ │Stats│ │
│ └─────┘ └─────┘ └─────┘ │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.2 MoLog - Workout Preview
┌─────────────────────────────────┐
│ ← Push A │
├─────────────────────────────────┤
│ │
│ Phase 2 · Week 3 · Day 1 │
│ Estimated: 55 min │
│ │
│ ┌───────────────────────────┐ │
│ │ 1. Bench Press │ │
│ │ 4 × 6-8 · 165 lb │ │
│ │ Last: 165 × 8,8,7,6 │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 2. Incline DB Press │ │
│ │ 3 × 8-10 · 50 lb │ │
│ │ Last: 50 × 10,9,8 │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 3. OHP │ │
│ │ 3 × 8-10 · 95 lb │ │
│ └───────────────────────────┘ │
│ │
│ + 3 more exercises │
│ │
│ ┌───────────────────────────┐ │
│ │ [ START WORKOUT ] │ │
│ └───────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.3 MoLog - Active Workout
┌─────────────────────────────────┐
│ ← Push A 00:32:15│
├─────────────────────────────────┤
│ │
│ BENCH PRESS 3 of 6 │
│ ──────────────────────────── │
│ │
│ Previous: 155lb × 8 │
│ │
│ ┌───────────────────────────┐ │
│ │ Set 1 155lb × 8 ✓ │ │
│ │ Set 2 155lb × 7 ✓ │ │
│ │ Set 3 [___] × [__] │ │
│ │ Set 4 ○ ○ ○ │ │
│ └───────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ WEIGHT REPS │ │
│ │ [-] 155 [+] [-] 8 [+] │ │
│ └─────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [ LOG SET ] │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 💬 "Strong set! Keep that │ │
│ │ arch tight." - Sam │ │
│ └───────────────────────────┘ │
│ │
│ [Skip] [Swap Exercise] [End] │
│ │
└─────────────────────────────────┘
6.4 Rest Timer (Overlay)
┌─────────────────────────────────┐
│ │
│ │
│ ┌─────────┐ │
│ │ │ │
│ │ 1:32 │ │
│ │ │ │
│ └─────────┘ │
│ ──────●──────── │
│ │
│ REST TIME: 2:00 │
│ │
│ ┌───────────────────────────┐ │
│ │ "Stretch those pecs while │ │
│ │ you rest. Blood flow │ │
│ │ helps recovery." │ │
│ │ - Sage │ │
│ └───────────────────────────┘ │
│ │
│ [-30s] [Skip] [+30s] │
│ │
│ │
└─────────────────────────────────┘
6.5 MoCoach (Chat)
┌─────────────────────────────────┐
│ ← MoCoach [Sam ▼]│
├─────────────────────────────────┤
│ │
│ ┌───────────────────────────┐ │
│ │ [Sam Avatar] │ │
│ │ │ │
│ │ Hey! What's on your mind? │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────┐ │
│ │ How do I improve │ │
│ │ my bench press? │ │
│ └───────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [Sam Avatar] │ │
│ │ │ │
│ │ You're getting stronger! │ │
│ │ Try pausing at the bottom │ │
│ │ for 1 sec - builds power. │ │
│ │ │ │
│ │ Also, your triceps might │ │
│ │ be the weak link. Add │ │
│ │ close-grip bench next │ │
│ │ Push day. You got this! │ │
│ └───────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ ┌─────────────────────┐ │
│ │ Ask your coach... │ [➤] │
│ └─────────────────────┘ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.6 MoGuide - Exercise Library
┌─────────────────────────────────┐
│ ← Exercises │
├─────────────────────────────────┤
│ ┌───────────────────────────┐ │
│ │ 🔍 Search exercises... │ │
│ └───────────────────────────┘ │
│ │
│ [All] [Chest] [Back] [Legs]...│
│ ═════ │
│ │
│ ┌───────────────────────────┐ │
│ │ [📷] Bench Press │ │
│ │ Chest · Barbell │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [📷] Incline DB Press │ │
│ │ Chest · Dumbbell │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [📷] Cable Fly │ │
│ │ Chest · Cable │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [📷] Push-Up │ │
│ │ Chest · Bodyweight │ │
│ └───────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.7 MoGuide - Exercise Detail
┌─────────────────────────────────┐
│ ← Bench Press │
├─────────────────────────────────┤
│ │
│ ┌───────────────────────────┐ │
│ │ │ │
│ │ [Exercise Demo GIF] │ │
│ │ │ │
│ └───────────────────────────┘ │
│ │
│ PRIMARY: Chest │
│ SECONDARY: Triceps, Shoulders │
│ EQUIPMENT: Barbell, Bench │
│ │
│ INSTRUCTIONS │
│ ──────────────────────────── │
│ 1. Lie flat on bench, feet │
│ planted on floor │
│ 2. Grip bar slightly wider │
│ than shoulder width │
│ 3. Unrack and lower to chest │
│ 4. Press up to lockout │
│ │
│ TIPS │
│ ──────────────────────────── │
│ • Keep shoulder blades pinched│
│ • Drive feet into floor │
│ • Control the descent │
│ │
│ YOUR HISTORY │
│ ┌───────────────────────────┐ │
│ │ PR: 185 lb × 3 │ │
│ │ Last: 165 lb × 8 │ │
│ └───────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.8 MoStats - Progress
┌─────────────────────────────────┐
│ ← Progress │
├─────────────────────────────────┤
│ │
│ [Weight] [Strength] [Activity]│
│ ═══════ │
│ │
│ WEIGHT TREND │
│ ┌───────────────────────────┐ │
│ │ 📉 │ │
│ │ ╱╲ │ │
│ │ ╱ ╲__╱╲ │ │
│ │ ╱ ╲___ │ │
│ │ ╱ │ │
│ │ ───────────────────── │ │
│ │ W1 W2 W3 W4 W5 W6 │ │
│ └───────────────────────────┘ │
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ 162.4 │ │ -6.2 │ │
│ │ Current │ │ Total │ │
│ └─────────┘ └─────────┘ │
│ │
│ WEEKLY AVERAGE │
│ ┌───────────────────────────┐ │
│ │ This week: 162.4 lb │ │
│ │ Last week: 163.8 lb │ │
│ │ Change: -1.4 lb ↓ │ │
│ └───────────────────────────┘ │
│ │
│ [ LOG TODAY'S WEIGHT ] │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.9 MoBody - Weight Log
┌─────────────────────────────────┐
│ ← Log Weight │
├─────────────────────────────────┤
│ │
│ TODAY │
│ December 5, 2024 │
│ │
│ ┌───────────────────────────┐ │
│ │ WEIGHT │ │
│ │ │ │
│ │ [-] 162.4 [+] │ │
│ │ lb │ │
│ │ │ │
│ └───────────────────────────┘ │
│ │
│ Yesterday: 163.1 lb │
│ Weekly avg: 162.8 lb │
│ │
│ NOTES (optional) │
│ ┌───────────────────────────┐ │
│ │ Add a note... │ │
│ └───────────────────────────┘ │
│ │
│ │
│ │
│ ┌───────────────────────────┐ │
│ │ [ SAVE ] │ │
│ └───────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.10 MoPhase - Program Tracker
┌─────────────────────────────────┐
│ ← My Program │
├─────────────────────────────────┤
│ │
│ RECOMPOSITION PROGRAM │
│ 20 Weeks · PPL Split │
│ │
│ ┌───────────────────────────┐ │
│ │ ████████████░░░░░░░░░░ │ │
│ │ Week 8 of 20 (40%) │ │
│ └───────────────────────────┘ │
│ │
│ PHASES │
│ ┌───────────────────────────┐ │
│ │ ✓ Phase 1: Foundation │ │
│ │ Weeks 1-5 · Complete │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ ● Phase 2: Hypertrophy │ │
│ │ Weeks 6-11 · Current │ │
│ │ Week 3 of 6 │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ ○ Phase 3: Strength │ │
│ │ Weeks 12-16 │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ ○ Phase 4: Peak │ │
│ │ Weeks 17-20 │ │
│ └───────────────────────────┘ │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.11 MoVoice - Coach Selection
┌─────────────────────────────────┐
│ ← My Coaches │
├─────────────────────────────────┤
│ │
│ Select your coaching style │
│ │
│ ┌───────────────────────────┐ │
│ │ [Sam] Sam ✓ │ │
│ │ The Buddy │ │
│ │ Friendly, balanced │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [Max] Max │ │
│ │ Drill Sergeant │ │
│ │ Tough, intense │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [Sage] Sage ✓ │ │
│ │ Zen Mentor │ │
│ │ Calm, patient │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ [Nova] Nova │ │
│ │ The Scientist │ │
│ │ Data-driven │ │
│ └───────────────────────────┘ │
│ │
│ + 4 more coaches │
│ │
│ [Retake Quiz] [Context Setup]│
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
6.12 PR Celebration (Modal)
┌─────────────────────────────────┐
│ │
│ 🎊 🎉 🎊 │
│ │
│ ┌─────────────┐ │
│ │ │ │
│ │ [3D Sam] │ │
│ │ 🎉 😄 │ │
│ │ │ │
│ └─────────────┘ │
│ │
│ ★ NEW PR! ★ │
│ │
│ BENCH PRESS │
│ 185 lb × 3 │
│ │
│ +10 lb improvement! │
│ │
│ ┌───────────────────────────┐ │
│ │ "LET'S GO! That's what │ │
│ │ consistency looks like!" │ │
│ │ - Sam │ │
│ └───────────────────────────┘ │
│ │
│ [ KEEP CRUSHING ] │
│ │
└─────────────────────────────────┘
6.13 Onboarding - Goal Selection
┌─────────────────────────────────┐
│ │
│ Step 1 of 6 │
│ ───●───○───○───○───○───○─── │
│ │
│ │
│ What's your main goal? │
│ │
│ │
│ ┌───────────────────────────┐ │
│ │ 🔥 Lose Fat │ │
│ │ Burn fat, get lean │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 💪 Build Muscle │ │
│ │ Gain size & strength │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ ⚡ Recomposition │ │
│ │ Lose fat, gain muscle│ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 🏋️ Get Stronger │ │
│ │ Focus on strength │ │
│ └───────────────────────────┘ │
│ │
│ │
│ [ CONTINUE ] │
│ │
└─────────────────────────────────┘
6.14 MoSettings
┌─────────────────────────────────┐
│ ← Settings │
├─────────────────────────────────┤
│ │
│ ACCOUNT │
│ ┌───────────────────────────┐ │
│ │ 👤 Profile →│ │
│ │ 🎭 My Coaches →│ │
│ │ 📋 My Program →│ │
│ └───────────────────────────┘ │
│ │
│ PREFERENCES │
│ ┌───────────────────────────┐ │
│ │ ⚖️ Units [lb/kg]│ │
│ │ 🌙 Theme [Dark] │ │
│ │ 🔔 Notifications → │ │
│ │ 🔊 Sounds [On] │ │
│ └───────────────────────────┘ │
│ │
│ SUBSCRIPTION │
│ ┌───────────────────────────┐ │
│ │ ⭐ Mo Pro Free │ │
│ │ [ UPGRADE ] │ │
│ └───────────────────────────┘ │
│ │
│ SUPPORT │
│ ┌───────────────────────────┐ │
│ │ ❓ Help & FAQ →│ │
│ │ 📧 Contact Us →│ │
│ │ 📜 Privacy Policy →│ │
│ │ 📄 Terms of Service →│ │
│ └───────────────────────────┘ │
│ │
│ [ LOG OUT ] │
│ │
├─────────────────────────────────┤
│ [🏠] [💪] [🤖] [📈] [⚙️] │
└─────────────────────────────────┘
7. Animation Guidelines
Animation Tokens
| Animation | Duration | Easing | Usage |
|---|---|---|---|
fast | 100ms | ease-out | Button press, toggles |
normal | 200ms | ease-in-out | Fades, simple transitions |
smooth | 300ms | ease-in-out | Page transitions, modals |
spring | 400ms | spring(300, 30) | Cards, bouncy elements |
slow | 500ms | ease-out | Complex animations |
chart | 800ms | ease-out | Chart drawing |
celebration | 3000ms | physics | Confetti, fireworks |
Animation Principles
- Meaningful - Every animation communicates something
- Fast - Never make users wait
- Natural - Use spring physics for organic feel
- Consistent - Same action = same animation
- Respectful - Honor
prefers-reduced-motion
Key Animations
Page Transitions
// Framer Motion page transition
const pageVariants = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -20 }
};
const pageTransition = {
duration: 0.3,
ease: "easeInOut"
};
Card Entrance
// Staggered card entrance
const containerVariants = {
animate: {
transition: { staggerChildren: 0.1 }
}
};
const cardVariants = {
initial: { opacity: 0, y: 20 },
animate: {
opacity: 1,
y: 0,
transition: { type: "spring", stiffness: 300, damping: 30 }
}
};
Button Press
// Haptic feedback button
<motion.button
whileTap={{ scale: 0.95 }}
transition={{ duration: 0.1 }}
onClick={() => haptic.impact('medium')}
>
Number Counter
// Animated number
<motion.span
key={value}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", stiffness: 500 }}
>
{value}
</motion.span>
PR Celebration
// Full celebration sequence
<motion.div
initial={{ scale: 0, rotate: -180 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 15 }}
>
<Confetti numberOfPieces={200} recycle={false} />
<CoachAvatar3D expression="excited" />
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
>
NEW PR!
</motion.h1>
</motion.div>
Reduced Motion
// Respect user preferences
const prefersReducedMotion = usePrefersReducedMotion();
const animation = prefersReducedMotion
? { opacity: 1 }
: { opacity: 1, y: 0, transition: { type: "spring" } };
8. Responsive Design
Breakpoints
| Name | Width | Target |
|---|---|---|
sm | 640px | Large phones |
md | 768px | Tablets portrait |
lg | 1024px | Tablets landscape / Small laptops |
xl | 1280px | Desktops |
2xl | 1536px | Large desktops |
Layout Changes
| Breakpoint | Navigation | Content | Sidebar |
|---|---|---|---|
| Mobile | Bottom nav | 1 column | Hidden |
| Tablet | Bottom nav | 2 columns | Hidden |
| Desktop | Side nav | 2-3 columns | Visible |
Component Adaptations
// Responsive card grid
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
// Responsive text
<h1 className="text-2xl md:text-3xl lg:text-4xl">
// Responsive spacing
<section className="p-4 md:p-6 lg:p-8">
// Hide on mobile, show on desktop
<Sidebar className="hidden lg:block" />
<BottomNav className="lg:hidden" />
9. Accessibility
Requirements
| Requirement | Standard | Implementation |
|---|---|---|
| Color contrast | WCAG AA (4.5:1) | All text meets minimum |
| Touch targets | 44×44px minimum | All interactive elements |
| Focus indicators | Visible | 2px ring on focus |
| Screen readers | Full support | Semantic HTML + ARIA |
| Keyboard nav | Full support | Tab order, shortcuts |
| Reduced motion | Respected | prefers-reduced-motion |
| Font scaling | Up to 200% | Relative units |
Focus States
/* Focus ring for all interactive elements */
.focus-ring {
@apply focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary;
}
Screen Reader Labels
// Icon buttons need labels
<button aria-label="Start workout">
<PlayIcon />
</button>
// Form inputs need associations
<label htmlFor="weight">Weight</label>
<input id="weight" type="number" aria-describedby="weight-hint" />
<span id="weight-hint">Enter weight in pounds</span>
// Dynamic content announcements
<div role="status" aria-live="polite">
Set logged successfully
</div>
10. Icon System
Icon Library
Lucide React - Consistent, customizable icons
Icon Sizes
| Size | Pixels | Usage |
|---|---|---|
xs | 12px | Inline, badges |
sm | 16px | Buttons, inputs |
md | 20px | Default |
lg | 24px | Navigation, headers |
xl | 32px | Empty states |
2xl | 48px | Hero sections |
Core Icons
| Icon | Usage |
|---|---|
Home | Dashboard |
Dumbbell | Workouts |
MessageCircle | Coach chat |
TrendingUp | Progress |
Settings | Settings |
Play | Start workout |
Pause | Pause |
Check | Complete |
Plus | Add |
Minus | Remove |
ChevronRight | Navigate |
ArrowLeft | Back |
Scale | Weight |
Flame | Streak |
Trophy | PR |
Calendar | Schedule |
11. 3D Coach Avatars
Avatar System
| State | Description |
|---|---|
idle | Subtle breathing animation |
talking | Mouth movement, gestures |
excited | Celebration pose, big smile |
thinking | Hand on chin, eyes up |
encouraging | Thumbs up, nodding |
serious | Focused expression |
Technical Approach
// React Three Fiber setup
<Canvas>
<Suspense fallback={<AvatarSkeleton />}>
<CoachModel
coach="sam"
expression="excited"
animation="celebrate"
/>
<Environment preset="studio" />
</Suspense>
</Canvas>
Fallback Strategy
// Progressive enhancement
{supports3D ? (
<CoachAvatar3D coach={coach} />
) : (
<CoachAvatarImage coach={coach} />
)}
12. Design Tokens (Tailwind Config)
// tailwind.config.ts
import type { Config } from 'tailwindcss'
const config: Config = {
darkMode: ['class', '[data-theme="dark"]'],
theme: {
extend: {
colors: {
mo: {
bg: {
primary: 'var(--mo-bg-primary)',
secondary: 'var(--mo-bg-secondary)',
card: 'var(--mo-bg-card)',
input: 'var(--mo-bg-input)',
},
accent: {
primary: 'var(--mo-accent-primary)',
secondary: 'var(--mo-accent-secondary)',
tertiary: 'var(--mo-accent-tertiary)',
},
text: {
primary: 'var(--mo-text-primary)',
secondary: 'var(--mo-text-secondary)',
tertiary: 'var(--mo-text-tertiary)',
},
border: 'var(--mo-border)',
success: 'var(--mo-success)',
warning: 'var(--mo-warning)',
error: 'var(--mo-error)',
},
coach: {
sam: '#00d4aa',
max: '#ef4444',
sage: '#22c55e',
nova: '#3b82f6',
ace: '#71717a',
chip: '#fbbf24',
rex: '#f97316',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
borderRadius: {
'mo': '12px',
'mo-sm': '8px',
'mo-lg': '16px',
},
spacing: {
'safe-top': '44px',
'safe-bottom': '34px',
'header': '56px',
'bottom-nav': '80px',
},
animation: {
'shimmer': 'shimmer 1.5s infinite linear',
'pulse-slow': 'pulse 3s infinite',
'bounce-subtle': 'bounce-subtle 2s infinite',
},
keyframes: {
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' },
},
'bounce-subtle': {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-5px)' },
},
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
export default config
Document Status
- Design Philosophy
- Color System
- Typography
- Spacing System
- Component Library
- Screen Wireframes (14 screens)
- Animation Guidelines
- Responsive Design
- Accessibility
- Icon System
- 3D Coach Avatars
- Design Tokens
Phase 4: UI/UX Design - COMPLETE
Note: Wireframes and components will be refined during development as screens are built.
Document created: December 2024 Version: 1.0 Status: Complete (Living Document)