# Phase 06 — UI/UX Design Specifications

Based on real Gravl app screenshots provided by user.

## 🎨 Design System

### Colors
- **Background:** Dark navy/charcoal (#0a0a1f, #1a1a2e)
- **Primary Accent:** Neon yellow (#FFFF00 or #CCFF00)
- **Success/Recovery:** Bright green (#00FF41)
- **Cards:** Dark with subtle borders (#2a2a3e)
- **Text:** Light gray/white

### Components

### 1️⃣ Home Dashboard (WorkoutPage)
```
┌─ Gym Profile Header
├─ Upcoming Workouts Section
│  ├─ Progress Counter: "0 of 3 completed this week"
│  └─ Workout Card (Large)
│     ├─ Background Image
│     ├─ Workout Type Badge (PULL, PUSH, etc.) - yellow
│     ├─ Workout Title + Duration + Exercises
│     ├─ Recovery Badge (Green circle with %)
│     └─ "NEXT WORKOUT" Button (Neon yellow)
│
├─ "Feeling like something different?" Section
│  ├─ Custom (Purple icon)
│  ├─ Cardio (Green icon)
│  └─ Manual (Blue icon)
│
├─ Analytics Snapshot
│  ├─ Strength Score Card (Novice 89/100)
│  └─ Trends (4 mini cards: Workouts, Volume, Calories, Sets)
│
└─ Challenge Banner (bottom)
```

### 2️⃣ Library Page
```
┌─ Search Bar
├─ Gravl Splits Section
│  ├─ Split Card 1 (Image + "PUSH PULL LEGS")
│  ├─ Split Card 2 (Image + "UPPER LOWER FULL")
│  └─ View All
│
├─ "Exercises by Muscle" Grid
│  ├─ Chest (4/45)
│  ├─ Shoulders (7/52)
│  ├─ Triceps (2/33)
│  └─ [More muscles...]
│
├─ Weights Section
│  ├─ Exercise Row (Image + Name + Muscle Group)
│  ├─ Arnold Press (Shoulders)
│  ├─ Back Squat (Quads)
│  └─ [More exercises...]
│
├─ Bodyweight Section
├─ Cardio Section
└─ [More categories...]
```

### 3️⃣ Profile Page
```
┌─ Header
│  ├─ Avatar + Name
│  ├─ Workout count
│  └─ Settings icon
│
├─ Grid Cards (2x2)
│  ├─ Friends (0 Friends / View profiles)
│  ├─ Customer Support
│  ├─ Streak (0 / 3 days)
│  └─ Measurements (100kg)
│
├─ Updates Card
├─ Heatmap (Workout Calendar)
│  ├─ Days of week (Mon-Sun)
│  ├─ Months (Jan-Mar, etc.)
│  ├─ Color intensity = volume
│  └─ Volume slider (Less ← → More)
│
├─ Badges Section
│  ├─ Badge 1 (25 Exercises)
│  ├─ Badge 2 (10,000 Kg Volume)
│  └─ Badge 3 (First Cardio Workout)
│
└─ [More stats...]
```

## 🔧 Component Requirements for Phase 06

### Task 06-01: Workout Swap System
- **SwapWorkoutModal** — "Feeling like something different?"
  - 3 quick-swap options: Custom, Cardio, Manual
  - Shows available workouts for swap
  - Confirm/cancel buttons

### Task 06-02: Recovery Tracking
- **RecoveryBadge** — Green circle with % recovery
  - Display on workout cards
  - Update based on muscle group last activity

### Task 06-03: Smart Recommendations
- **RecommendationPanel** — Suggest swaps based on recovery
  - "You're well-recovered for X"
  - Show 2-3 suggested workouts
  - One-tap "Use this" button

### Task 06-04: Analytics Dashboard
- **StrengthScoreCard** — Novice/Intermediate/Advanced level
- **TrendsGrid** — 4 mini charts (Workouts, Volume, Calories, Sets)
- **WorkoutHeatmap** — Calendar with color intensity

### Task 06-05: UI Polish
- **WorkoutCard** — Improve styling to match design
- **LibraryExerciseRow** — Add muscle group icons
- **ProfileBadges** — Implement achievement system

## 🎨 Styling Notes

- **Cards:** Rounded corners (border-radius: 12-16px)
- **Buttons:** Rounded pill-style for primary actions
- **Icons:** Muscle group icons + activity type icons
- **Images:** Overlay text on images (black gradient background)
- **Spacing:** Consistent padding (16px standard)
- **Typography:** Bold headers, light body text
- **Animations:** Smooth transitions on interactions

## 📱 Responsive Design

- **Mobile-first** approach
- Bottom navigation (Home, Feed, Library, Profile)
- Full-width cards on small screens
- 2-column grid on tablets (where applicable)
- Stacked layout for profile cards

---

**Status:** Design specifications ready for implementation
**Next:** Frontend-dev agent implements components