feat: design system v2 with liquid glass aesthetic
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>
This commit is contained in:
Millian Lamiaux
765
TabataFit_PDD_v2.0.md
Normal file
765
TabataFit_PDD_v2.0.md
Normal file
@@ -0,0 +1,765 @@
|
||||
# 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
|
||||
|
||||
```typescript
|
||||
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
|
||||
|
||||
```typescript
|
||||
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
|
||||
|
||||
```typescript
|
||||
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*
|
||||
Reference in New Issue
Block a user