From 323dbbc55147c3d6be4ca21321116b39af4c5bce Mon Sep 17 00:00:00 2001
From: Clawd Agent <clawd@homelab.local>
Date: Fri, 6 Mar 2026 20:46:33 +0100
Subject: [PATCH] docs(phase-06): Add UI/UX design specifications from real
 Gravl app

---
 .phase-06-designs.md | 143 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 .phase-06-designs.md

diff --git a/.phase-06-designs.md b/.phase-06-designs.md
new file mode 100644
index 0000000..5898727
--- /dev/null
+++ b/.phase-06-designs.md
@@ -0,0 +1,143 @@
+# 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