Strava fitness tracking cards with metric visualizations

Summary

Three fitness app cards in a dark template showing elevation gain, activity streak counter, and elevation trend chart with bold orange headers and gradient area fills.

Visual description

Three mobile-sized cards on a dark background, each with the "STRAVA" header and hashtag tag in small white text. Left card: white background with large "1,225" elevation gain metric in dark type, "FT" unit, subtitle text, small biking icon, and a multi-color area chart (pink, orange, yellow) at bottom showing terrain variation with a landscape photo. Center card: orange header band with bold "3" and "ACTIVE WEEKS IN A ROW" text, followed by a grid of circular activity dots in pink, orange, and white on a light background, date range "FEB 27 - MAR 10" at bottom. Right card: white background with "12,714" elevation gain and "POST ELEVATION GAIN" label, below which is a line chart with yellow-green area fill showing elevation peaks and valleys across a date range. All typography is clean sans-serif. Dark rounded container for the outer template.

Key takeaway

Bold, contrasting color blocks (orange header on white/light) immediately signal priority and readability. Data visualizations use warm accent colors (yellow-green, orange) against neutral backgrounds to avoid fatigue. The metric-first layout with supporting chart underneath works for goal-tracking and performance dashboards. Typography hierarchy is clear through size and weight alone, without requiring color variation.

Reuse notes

Reference for fitness, health tech, and sports analytics app design. High-contrast, functional aesthetic suits any quantified-self or productivity application. Color logic (warm accent, neutral card background, white space) is transportable to finance, analytics, and HR dashboards. The card-based structure and metric display patterns are reusable templates for mobile and web data applications.