# Strava Summit > - Skill: `heyzgj/strava-summit` (Agent Skill) - Install (CLI): `npx skillmds@latest add heyzgj/strava-summit` - Raw SKILL.md: https://api.skillmd.com/api/skills/heyzgj/strava-summit/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: heyzgj (https://skillmd.com/u/heyzgj) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/heyzgj/strava-summit --- ## Product World - **Who**: Morning runners checking pace splits before coffee. Cyclists obsessing over KOMs and Strava segments. Triathletes tracking swim-bike-run. Casual hikers wanting route maps. 120M+ athletes who move, measure, and compare. - **What**: The social network for athletes — turns GPS data into stories, competition, and community. - **Vibe**: Garmin dashboard meets Instagram feed — performance data presented as social content. - **Domain conventions**: Pace in min/km or min/mi. Elevation in meters. Distance in km. Segments have KOM/QOM (King/Queen of Mountain). Kudos = likes. Activities = workouts. PR = Personal Record. Splits = per-km/mi breakdowns. ## Core Principle Athletic data is the content — every chart, split time, and elevation profile tells the story of effort. ## Visual Vibe Energetic, clean, competitive, social, data-rich, aspirational, community-driven, honest, performance-focused, pure ## What It's NOT - NOT a wellness/mindfulness app — this is competitive, not calm - NOT warm/cozy — pure white canvas, no cream backgrounds, no soft pastels - NOT a generic fitness app — Strava is specifically about GPS-tracked outdoor activities - NOT gamified with badges everywhere — the DATA is the reward, not cartoon achievements - NOT a coaching platform — it's athlete-to-athlete, peer-driven - NOT dark-mode-first — the white canvas lets athlete photography and route maps provide all the color ## Section Archetypes - **Activity Feed**: Social cards with route maps, pace/distance/time stats, kudos, comments - **Segment Leaderboard**: Competitive ranking tables with times, speeds, elevation profiles - **Training Heatmap**: GitHub-style contribution graph showing activity frequency and intensity - **Year in Review**: Large typographic stats — total distance, elevation, PRs broken - **Device Ecosystem**: Watch/computer integrations (Garmin, Apple Watch, Wahoo) - **Elevation Profile**: Bar chart visualizations of climb difficulty and grade percentages ## Hero Archetype Video-typography. Athletic motion footage (running, cycling) as background with bold headline overlay. WHY: Strava is about movement — still images can't capture what it feels like to be mid-stride on a mountain trail. The video IS the feeling of the product. ## Asset Direction - **Photography**: Trail running, mountain cycling, open water swimming. Action shots with dramatic landscapes. Avoid studio/gym shots — Strava is outdoor GPS activity. - **Data-as-visual**: Elevation profiles, pace charts, heatmaps, split tables — the data IS the visual asset. Real-looking activity stats (10.2 km, 4:48/km, 48:53 elapsed). - **Video**: Athletic motion — runners on trails, cyclists on roads. Used as hero background, not decorative. Minimum 0.5 opacity. - **What NOT to show**: Indoor gym, yoga, meditation, generic fitness stock. No treadmills. No protein shakes. This is outdoor, GPS-tracked movement. ## Typography - **Urbanist** (display, 700-800): Clean geometric with athletic energy. Strong enough for large stat numbers and bold headlines without feeling delicate. Chosen over Inter/DM Sans for its wider letterforms that feel more open and active. - **IBM Plex Sans** (body, 400-600): Technical precision for data-heavy content. Excellent tabular numerals for pace/time/distance. Pairs with Urbanist's geometry without competing. ## Color - **Background**: Pure white #ffffff (oklch 100% 0 0) — zero chroma, zero tint. The white canvas lets athlete photography and Strava Orange provide all visual interest. - **Strava Orange** oklch(65% 0.22 35) / #FC4C02: THE brand color. Used for CTAs, PR badges, accent numbers, active states. Singular and dominant. - **Text Primary** #111111: Near-black for maximum readability on white. - **Text Secondary** #666666: Supporting text, metadata, timestamps. - **PR Green** #00b34a / oklch(65% 0.18 145): Personal records, positive changes, improvement metrics. - **Effort Red** #e53935: Heart rate zones, max effort, warnings. - **Pace Blue** #1976d2: Cycling activities, speed metrics. Activity-type differentiation. ## Bold Choices 1. **Tabular numerals everywhere** — font-variant-numeric: tabular-nums on all stat displays for aligned columns 2. **Activity cards as social media posts** — avatar + name + timestamp + route photo + stats + kudos/comments 3. **Training heatmap** — GitHub-style contribution graph applied to athletic activity, 52 weeks visible 4. **Elevation bar charts** — JS-generated from data arrays, bars with hover effects 5. **PR badges** — small green pills on activity titles when a personal record is set 6. **Year-in-review hero stat** — oversized tabular number (3,847 km) in Strava Orange on black background 7. **Segment leaderboard with "You" row** — highlighted row showing user's own ranking at #47, making the competition personal 8. **Pure white canvas** — no warm tint, no off-white, letting orange and photography carry all visual weight ## Workflow 1. Read `https://joincommons.cc/api/items/strava-summit/raw/design-language` for the full visual system 2. Read `references/asset-direction.md` for asset sourcing guidance 3. Build following the product world and design system above 4. Self-critique against `https://joincommons.cc/api/items/strava-summit/raw/anti-patterns` ## Gotchas 1. **Don't warm the background** — LLMs default to cream/off-white for "premium." Strava is pure white #ffffff. The orange accent provides all warmth needed. 2. **Pace format matters** — running pace is min:sec/km (4:48/km), cycling speed is km/h (28.3 km/h). Never mix them. 3. **Kudos, not likes** — Strava's social vocabulary is specific: kudos, segments, KOM/QOM, activities, not generic social terms. 4. **Route maps, not abstract charts** — activity cards should show actual route photography or map-like visuals, not generic data visualizations. 5. **Elevation is meters, not feet** — Strava's global audience defaults to metric. Show meters for elevation, km for distance. 6. **Don't make it a coaching app** — Strava shows YOUR data. It doesn't prescribe workouts or give AI training advice.