511e207762
Overhaul design constants for OLED-first dark mode: - Colors: brand palette, phase colors, glass/shadow tokens, gradients - Typography: Inter font scale matching iOS type system - Spacing: 4px base unit with layout constants - Border radius: liquid glass card radii - Animations: spring/timing presets for UI transitions Add v2 product docs (PRD, PDD, BDSD) and update CLAUDE.md. Install expo-video, expo-sharing, @expo-google-fonts/inter. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
47 KiB
47 KiB
TabataFit — Product Design Document v2.0
Apple Fitness+ Design Language for Tabata
Design Philosophy
"Make it feel like a premium fitness studio in your pocket."
TabataFit adopts le design language d'Apple Fitness+ :
- Dark mode premium — Fond noir profond, couleurs vibrantes
- Video-first — Le contenu est le héros
- Typography bold — Gros titres, textes épurés
- Subtle animations — Transitions fluides, feedback délicat
- Inclusive imagery — Diversité des coachs et body types
Color System — Dark Premium
Background Colors
const COLORS = {
// Backgrounds
BACKGROUND: '#000000', // Pure black — comme Apple TV
SURFACE: '#1C1C1E', // Raised surfaces
ELEVATED: '#2C2C2E', // Cards, modals
OVERLAY: 'rgba(0,0,0,0.6)', // Video overlays
// Brand Accent (Vibrant Orange-Red)
BRAND: '#FF6B35', // Energy, action
BRAND_LIGHT: '#FF8C5A', // Highlights
BRAND_DARK: '#E55A25', // Pressed states
// Secondary Accents
SUCCESS: '#34C759', // Completed, streaks
WARNING: '#FF9500', // Rest phases
INFO: '#5AC8FA', // Tips, info
// Text
TEXT_PRIMARY: '#FFFFFF', // Main text
TEXT_SECONDARY: '#EBEBF5', // Secondary (87% opacity)
TEXT_TERTIARY: '#EBEBF599', // Tertiary (60% opacity)
TEXT_DISABLED: '#3A3A3C', // Disabled text
// Semantic
WORK: '#FF6B35', // Active work phase
REST: '#5AC8FA', // Rest phase (calm blue)
PREP: '#FF9500', // Countdown prep
}
Gradient Presets
const GRADIENTS = {
// Hero banners
HERO_WORK: ['#FF6B35', '#E55A25'],
HERO_REST: ['#5AC8FA', '#007AFF'],
HERO_FEAT: ['#1C1C1E', '#000000'],
// Video overlays
VIDEO_OVERLAY: ['transparent', 'rgba(0,0,0,0.8)'],
VIDEO_TOP: ['rgba(0,0,0,0.4)', 'transparent'],
// Buttons
CTA: ['#FF6B35', '#FF8C5A'],
}
Typography System — Apple SF Pro Style
const TYPOGRAPHY = {
// Hero/Display
HERO: {
fontFamily: 'Inter_900Black',
fontSize: 48,
lineHeight: 56,
letterSpacing: -1,
},
// Section Headers (like Apple Fitness+)
TITLE_1: {
fontFamily: 'Inter_700Bold',
fontSize: 34,
lineHeight: 41,
letterSpacing: 0.37,
},
TITLE_2: {
fontFamily: 'Inter_700Bold',
fontSize: 28,
lineHeight: 34,
letterSpacing: 0.36,
},
TITLE_3: {
fontFamily: 'Inter_600SemiBold',
fontSize: 22,
lineHeight: 28,
letterSpacing: 0.35,
},
// Body
BODY: {
fontFamily: 'Inter_400Regular',
fontSize: 17,
lineHeight: 22,
letterSpacing: -0.41,
},
BODY_BOLD: {
fontFamily: 'Inter_600SemiBold',
fontSize: 17,
lineHeight: 22,
letterSpacing: -0.41,
},
// Metadata
CAPTION_1: {
fontFamily: 'Inter_400Regular',
fontSize: 15,
lineHeight: 20,
letterSpacing: -0.24,
},
CAPTION_2: {
fontFamily: 'Inter_400Regular',
fontSize: 14,
lineHeight: 18,
letterSpacing: -0.15,
},
// Timer (special)
TIMER: {
fontFamily: 'Inter_900Black',
fontSize: 96,
lineHeight: 96,
letterSpacing: -2,
},
TIMER_PHASE: {
fontFamily: 'Inter_700Bold',
fontSize: 24,
lineHeight: 28,
letterSpacing: 2, // Uppercase tracking
textTransform: 'uppercase',
},
}
Screen Designs
1. Home Tab — "For You"
Layout Structure
┌─────────────────────────────────────────────────────┐
│ status bar │
├─────────────────────────────────────────────────────┤
│ │
│ Bonjour, Alex [Profile] │ ← 24px padding
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ [VIDEO PREVIEW - LOOPING] │ │ ← Hero Card
│ │ │ │ 16:9 aspect
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ 🔥 FEATURED │ │ │
│ │ │ │ │ │
│ │ │ FULL BODY BURN │ │ │ ← Text overlay
│ │ │ 4 min • Beginner • Emma │ │ │ on video
│ │ │ │ │ │
│ │ │ [▶️ START] [♡ Save] │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Continue See All → │ ← Section header
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ [Thumb] │ │ [Thumb] │ │ [Thumb] │ │ ← Horizontal scroll
│ │ ━━━━━ │ │ ━━━━━ │ │ ━━━━━ │ │ 140x200px cards
│ │ 65% │ │ 30% │ │ 10% │ │
│ │ Core │ │ HIIT │ │ Full │ │
│ │ Burn │ │ Extreme │ │ Body │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ Popular This Week │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ [Thumb] │ │ [Thumb] │ │ [Thumb] │ │ [Thumb] │ │ ← Smaller cards
│ │ │ │ │ │ │ │ │ │ │ 120x120px
│ │ Quick │ │ Strength│ │ Cardio │ │ Core │ │
│ │ Burn │ │ Tabata │ │ Blast │ │ Crush │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ Collections │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🌅 Morning Energizer │ │ ← Full-width cards
│ │ 5 workouts • 20 min total │ │
│ └─────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🔥 7-Day Challenge │ │
│ │ 7 workouts • Progressive intensity │ │
│ └─────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────┤
│ [Home] [Workouts] [Activity] [Browse] [Profile] │
└─────────────────────────────────────────────────────┘
Component Specs
Hero Card:
- Full width - 48px padding
- 16:9 aspect ratio
- Video preview looping (muted)
- Gradient overlay: transparent → rgba(0,0,0,0.8)
- Featured badge top-left
- Title, metadata, CTA bottom
Continue Watching Card:
- 140px width × 200px height
- Thumbnail with progress bar overlay
- Progress percentage badge
- Workout name + duration
Popular Card:
- 120px × 120px square
- Thumbnail only
- Category name below
Collection Card:
- Full width - 48px padding
- 80px height
- Icon + title + description
- Chevron right
2. Workouts Tab
Layout Structure
┌─────────────────────────────────────────────────────┐
│ status bar │
├─────────────────────────────────────────────────────┤
│ │
│ Workouts [🔍 Search] │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ [LARGE CATEGORY THUMBNAIL] │ │
│ │ │ │
│ │ 🔥 QUICK BURN │ │
│ │ 4 min • All levels │ │
│ │ 12 workouts │ │
│ │ [→] │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ [LARGE CATEGORY THUMBNAIL] │ │
│ │ │ │
│ │ 💪 STRENGTH TABATA │ │
│ │ 8 min • Intermediate │ │
│ │ 8 workouts │ │
│ │ [→] │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ 🏃 CARDIO BLAST │ │
│ │ 4-12 min • All levels • 15 workouts [→] │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ 🧘 CORE & FLEXIBILITY │ │
│ │ 4 min • Beginner • 6 workouts [→] │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ ⚡ HIIT EXTREME │ │
│ │ 12-20 min • Advanced • 10 workouts [→] │ │
│ └───────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────┤
│ [Home] [Workouts] [Activity] [Browse] [Profile] │
└─────────────────────────────────────────────────────┘
Category Detail View
┌─────────────────────────────────────────────────────┐
│ ← Quick Burn │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ 4 min • All levels • 12 workouts │ │
│ │ │ │
│ │ Filter: [All] [Beginner] [Intermediate] │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ ┌──────┐ │ │
│ │ │[Vid] │ Full Body Ignite │ │
│ │ │ │ 4 min • Beginner • Emma │ │
│ │ └──────┘ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ ┌──────┐ │ │
│ │ │[Vid] │ Cardio Crusher │ │
│ │ │ │ 4 min • Intermediate • Alex │ │
│ │ └──────┘ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ ┌──────┐ │ │
│ │ │[Vid] │ Lower Body Blast │ │
│ │ │ │ 4 min • Intermediate • Jake │ │
│ │ └──────┘ │ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
3. Pre-Workout Detail Screen
┌─────────────────────────────────────────────────────┐
│ ← [♡] [···] │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ [VIDEO PREVIEW - LOOPING] │ │
│ │ │ │
│ │ Coach Emma in action │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ FULL BODY IGNITE │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 👩 Emma • 💪 Beginner • ⏱️ 4 min • 🔥 45cal │
│ │
│ ───────────────────────────────────────────────── │
│ │
│ What You'll Need │
│ ○ No equipment required │
│ ○ Yoga mat optional │
│ │
│ ───────────────────────────────────────────────── │
│ │
│ Exercises (8 rounds) │
│ ┌─────────────────────────────────────────────┐ │
│ │ 1. Jump Squats 20s work │ │
│ │ 2. Mountain Climbers 20s work │ │
│ │ 3. Burpees 20s work │ │
│ │ 4. High Knees 20s work │ │
│ │ ─────────────────────── │ │
│ │ Repeat × 2 rounds │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ───────────────────────────────────────────────── │
│ │
│ Music │
│ 🎵 Electronic Energy │
│ Upbeat, high-energy electronic tracks │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ ▶️ START WORKOUT │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
4. Active Workout Screen — The Core Experience
Work Phase
┌─────────────────────────────────────────────────────┐
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ [FULL SCREEN VIDEO] │ │
│ │ │ │
│ │ Coach doing Jump Squats │ │
│ │ in perfect form │ │
│ │ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ ┌─────────────────────────────────┐ │ │ │
│ │ │ │ 🔥 WORK │ │ │ │ ← Timer overlay
│ │ │ │ │ │ │ │ bottom gradient
│ │ │ │ 00:14 │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ Round 3 of 8 │ │ │ │
│ │ │ │ ████████████░░░░ 65% │ │ │ │
│ │ │ └─────────────────────────────────┘ │ │ │
│ │ └───────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ JUMP SQUATS │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ 52 │ │ 142 │ │ 85% │ │
│ │ CALORIES │ │ BPM │ │ EFFORT │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ Burn Bar │
│ ░░░░░░░░████████████████░░░░ 72nd percentile │
│ │
│ [⏸️ Pause] [⛶ Fullscreen]│
│ │
└─────────────────────────────────────────────────────┘
Rest Phase
┌─────────────────────────────────────────────────────┐
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ [COACH IN REST POSITION] │ │
│ │ │ │
│ │ "Shake it out, take a breath" │ │
│ │ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ ┌─────────────────────────────────┐ │ │ │
│ │ │ │ 💙 REST │ │ │ │ ← Blue rest theme
│ │ │ │ │ │ │ │
│ │ │ │ 00:08 │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ Next: Mountain Climbers │ │ │ │
│ │ │ │ ░░░░░░░░░░░░░░░░░░░ 40% │ │ │ │
│ │ │ └─────────────────────────────────┘ │ │ │
│ │ └───────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ UP NEXT │
│ ┌───────────────────────────────────────────────┐ │
│ │ ┌──────┐ │ │
│ │ │ GIF │ Mountain Climbers │ │
│ │ │preview│ "Core engaged, drive knees forward" │ │
│ │ └──────┘ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ [⏸️ Pause] [⛶ Fullscreen]│
│ │
└─────────────────────────────────────────────────────┘
3-2-1 Countdown (Pre-Work)
┌─────────────────────────────────────────────────────┐
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ GET READY! │ │
│ │ │ │
│ │ 3 │ │ ← Giant number
│ │ │ │ centered
│ │ │ │
│ │ JUMP SQUATS │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
5. Workout Complete Screen
┌─────────────────────────────────────────────────────┐
│ │
│ │
│ 🎉 │
│ │
│ WORKOUT COMPLETE │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ [ANIMATED CELEBRATION RINGS] │ │
│ │ │ │
│ │ 🔥 💪 ⚡ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ 52 │ │ 4 │ │ 100% │ │
│ │ CALORIES │ │ MINUTES │ │ COMPLETE │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ Burn Bar │
│ You beat 73% of users! │
│ ░░░░░░░░████████████████░░░░ │
│ │
│ ───────────────────────────────────────────────── │
│ │
│ 🔥 7 Day Streak! │
│ Keep the momentum going! │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ 📤 SHARE YOUR WORKOUT │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ ← BACK TO HOME │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Recommended Next │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ [Thumb] │ │ [Thumb] │ │ [Thumb] │ │
│ │ Core │ │ Upper │ │ Cardio │ │
│ │ Crush │ │ Body │ │ Blast │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
└─────────────────────────────────────────────────────┘
6. Activity Tab
┌─────────────────────────────────────────────────────┐
│ │
│ Activity │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ 🔥 STREAK │ │
│ │ │ │
│ │ 7 │ │
│ │ DAYS │ │
│ │ │ │
│ │ ● ● ● ● ● ● ● ○ ○ ○ │ │
│ │ M T W T F S S M T W │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ This Week │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ 5 │ │ 156 │ │ 20 │ │
│ │ WORKOUTS │ │ CALORIES │ │ MINUTES │ │
│ │ 5 goal │ │ 150 goal │ │ 20 goal │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ Monthly Summary │
│ ┌───────────────────────────────────────────────┐ │
│ │ [CALENDAR HEAT MAP] │ │
│ │ │ │
│ │ Jan 2026 │ │
│ │ S M T W T F S │ │
│ │ 1 2 3 4 5 6 │ │
│ │ 7 8 9 10 11 12 13 │ │
│ │ 14 15 16 17 18 19 20 │ │
│ │ ░ ░ █ █ ░ █ █ │ │
│ │ █ █ ░ █ █ ░ ░ │ │
│ │ ░ █ █ █ █ █ █ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Trends │
│ ┌───────────────────────────────────────────────┐ │
│ │ 📈 Workouts trending up! │ │
│ │ +23% vs last month │ │
│ │ │ │
│ │ [WEEKLY CHART] │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Burn Bar Position │
│ ┌───────────────────────────────────────────────┐ │
│ │ Your average: 45 cal/workout │ │
│ │ ████████████░░░░ 68th percentile │ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
7. Browse Tab
┌─────────────────────────────────────────────────────┐
│ │
│ Browse │
│ │
│ Filters [Edit] │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ All ▼ │ │ 4 min │ │ 8 min │ │ Begin │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
│ │
│ Trainers │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 👩 │ │ 👨 │ │ 👩 │ │ 👨 │ │
│ │ Emma │ │ Jake │ │ Mia │ │ Alex │ │
│ │ 12 wk │ │ 8 wk │ │ 10 wk │ │ 6 wk │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
│ │
│ Duration │
│ ┌─────────────────────────────────────────────┐ │
│ │ ○ 4 min (Classic Tabata) 20 │ │
│ │ ○ 8 min (Double Tabata) 15 │ │
│ │ ○ 12 min (Triple Tabata) 10 │ │
│ │ ○ 20 min (Tabata Marathon) 5 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ Focus Area │
│ ┌─────────────────────────────────────────────┐ │
│ │ ○ Full Body 20 │ │
│ │ ○ Upper Body 8 │ │
│ │ ○ Lower Body 8 │ │
│ │ ○ Core 8 │ │
│ │ ○ Cardio 6 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ Music Vibe │
│ ┌─────────────────────────────────────────────┐ │
│ │ ○ Electronic Energy 18 │ │
│ │ ○ Hip-Hop Beats 12 │ │
│ │ ○ Rock Power 10 │ │
│ │ ○ Chill Focus 10 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ Collections │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🌅 Morning Energizer • 5 workouts │ │
│ └─────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 💪 No Equipment • 15 workouts │ │
│ └─────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🔥 7-Day Challenge • 7 workouts │ │
│ └─────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
8. Profile Tab
┌─────────────────────────────────────────────────────┐
│ │
│ Profile │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ 👤 Alex Martin │ │
│ │ Member since Jan 2026 │ │
│ │ ✨ Premium │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Weekly Goal │
│ ┌───────────────────────────────────────────────┐ │
│ │ 5 workouts per week │ │
│ │ ████████████████░░░░ 4/5 this week │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Achievements │
│ ┌───────────────────────────────────────────────┐ │
│ │ 🏆 7-Day Streak 🥵 First Sweat │ │
│ │ 💯 100 Workouts 🌅 Early Bird │ │
│ │ 🔥 500 Calories ⚡ Speed Demon │ │
│ │ │ │
│ │ [See All Achievements →] │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Settings │
│ ┌───────────────────────────────────────────────┐ │
│ │ Notifications [→] │ │
│ │ Apple Watch [→] │ │
│ │ Music Preferences [→] │ │
│ │ Workout Preferences [→] │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ Account │
│ ┌───────────────────────────────────────────────┐ │
│ │ Subscription [→] │ │
│ │ Privacy & Security [→] │ │
│ │ Help & Support [→] │ │
│ │ Sign Out │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ TabataFit v1.0.0 │
│ Made with ❤️ for HIIT lovers │
│ │
└─────────────────────────────────────────────────────┘
Animation Specifications
Screen Transitions
- Push/Pop: 300ms ease-out
- Modal: Slide up from bottom, 350ms
Micro-interactions
- Button press: Scale to 0.96, 100ms
- Card tap: Scale to 0.98, 150ms
- Toggle: 200ms spring animation
Timer Animations
- Countdown: Number scales up/down each second
- Progress bar: Smooth width animation
- Phase change: Color crossfade 300ms
Celebration
- Confetti: Lottie animation on workout complete
- Rings: Animated fill when stats update
- Streak badge: Pulse animation
Accessibility
- Dynamic Type: Support up to 200% text scaling
- VoiceOver: Full screen reader support
- Reduce Motion: Disable animations when requested
- High Contrast: Alternative color scheme option
Document created: February 18, 2026 Version: 2.0 Design System: Apple Fitness+ Inspired