gravl/.phase-06-designs.md

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