A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
7type steps
3radius steps
4pxspacing base
Strava, in one page
Strava is a sweat-stained newspaper for athletes. The canvas is white in light mode and a deep coal black in dark mode — neutral on purpose, because the headline of every screen is a map. A route polyline drawn over OpenStreetMap is the single most repeated visual in the app: in the activity feed (a small map snapshot on every card), on the activity detail (full-bleed map with overlay stats), on the segment leaderboard (a thin curve), and as the empty-state hero on the Maps tab. Strava's job is to make those polylines feel earned — they're rendered in Strava's signature pumpkin orange (#FC4C02), thicker than the underlying road network, with a luminance halo so the route reads against busy city streets and rural single-track alike.
Strava Orange is the only chromatic accent the brand needs. It's on the CTA buttons ("Record"), the active tab, the kudos glyph when filled, the segment-PR rank chip, the activity-type icon strip, and — most importantly — the route polyline. Everything else in the chrome is a careful gradient from #FFFFFF through warm grays (#F5F4F2 surface) to true text black (#0E0E0E). There is no secondary brand color. The orange is the brand, the gradient grays are the substrate.
Typography is utilitarian by design — Strava ships with Maison Neue (the marketing/web face by Milieu Grotesque) for its desktop properties but inside the iOS app it leans on SF Pro because activity feeds, mile splits, and pace tables need the system's numeric weight stack. Numbers are tabular everywhere (tnum): pace columns, mile splits, distance, elapsed time, kudos counts. The hierarchy is more cardio than couture — bold display weights for headline stats (16:42 elapsed, 8.2 mi, 7:23 /mi pace), regular medium for activity titles, foggy grays for metadata. There's a clear sense that data is the brand: a Strava activity card is one map snapshot above a 3-up stat grid — distance, time, elevation — and that's what people screenshot to share.
Key Characteristics:
- White canvas (
#FFFFFF) light / Coal Black canvas (#0F0F0F) dark — chromatically neutral so the map polyline pops - Strava Orange (
#FC4C02) — the only accent — on CTAs, active tab, polyline, kudos filled - Route polyline rendered at 4pt stroke width with a 1pt
rgba(252,76,2,0.3)halo for road-overlay legibility - Activity feed cards: map snapshot at the top + 3-up stat grid (distance/time/pace) + kudos row at the bottom
- Kudos thumb glyph: outlined when un-given, filled Strava Orange when given; haptic on tap
- Segment leaderboard rows: rank chip (gold/silver/bronze for top 3), athlete avatar + name, time, gap to leader
- Big tabular numbers everywhere — pace, distance, elevation, splits — using SF Pro
monospacedDigit - Bottom tab bar: Home / Maps / Record / Groups / You — Record is a center action button in Orange
- SF Pro at weights 400/500/700/900 — heavy weights for hero stats, regular for body
- Cards are flat with hairline divider only — no shadows; the map photo provides all the visual hierarchy
- Activity-type icon strip — 18pt SF Symbols (figure.run, figure.outdoor.cycle, figure.pool.swim) tinted Strava Orange when matching activity
Do's and don'ts
Do
- Use
#FC4C02as the SINGLE accent — Record button, active tab, polyline, kudos filled, achievement chips - Render the route polyline at 4pt stroke with the
rgba(252,76,2,0.3)halo — this is the signature visual - Use tabular numerals on EVERY number (pace, time, distance, splits, kudos count) via
monospacedDigit() - Use the 3-up stat grid pattern on every activity card — never break this pattern for "more info"
- Place stat labels in 11pt UPPERCASE Semibold with 0.6pt tracking — this is the Strava data voice
- Use SF Pro Display Black weight 900 for the hero stats on activity detail — these are the trophy numbers
- Keep cards flat with no shadow — let the map snapshot do the visual work
- Make the Record button protrude 8pt above the tab bar with its orange glow shadow
- Animate kudos with the 1.3x scale bounce + confetti — it's a celebratory micro-interaction
- Use the heavy haptic
.impactOccurred(.heavy)on Record only — it's the most serious tap in the app - In dark mode use coal
#0F0F0Fnot pure black — the polyline reads better on slightly-warm dark
Don't
- Don't introduce a secondary brand color — Strava is monochromatically Orange, that's the discipline
- Don't render the polyline without the halo — busy city maps will swallow a bare orange stroke
- Don't use proportional digits in stats — column alignment will break and Strava users notice
- Don't add card drop shadows — the visual hierarchy comes from the map snapshot, not elevation
- Don't replace the 3-up stat grid with a list — it must be a horizontal trio
- Don't use system-yellow for PRs — Strava's PR gold is
#F5C24A, slightly cooler and warmer at once - Don't use the heavy haptic on kudos — that's reserved for Record; kudos is
.medium - Don't hide the Record button on screens deep in the nav — it persists across all tabs in the bottom bar
- Don't reformat times as "1h 14m 23s" — Strava uses "1:14:23" tabular with
monospacedDigit() - Don't make activity titles span more than 2 lines on a card — truncate with ellipsis
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Strava design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Strava Orange: #fc4c02
- Orange Pressed: #d44002
- Canvas White: #ffffff
- Surface Warm: #f5f4f2
- Surface Cool: #f0f0f0
- Divider: #e5e5e5
- Map Tile Default: #e8e5dd
- Ink Primary: #0e0e0e
- Ink Secondary: #666666
- Ink Tertiary: #9a9a9a
Type:
- families: SF Pro Display, SF Pro Text, Maison Neue, Inter
- scale: 10, 11, 13, 15, 17, 28, 44
- weights: 400, 600, 700, 800
Shape:
- radius: 6, 8, 10
- elevation: Card background: `#FFFFFF` (light) / `#1A1A1A` (dark); no shadow, no border | Shadow: `rgba(252,76,2,0.4) 0 8px 16px` | Keep cards flat with no shadow — let the map snapshot do the visual work
Spacing: 4, 8, 12, 14
Rules:
- Use `#FC4C02` as the SINGLE accent — Record button, active tab, polyline, kudos filled, achievement chips
- Render the route polyline at 4pt stroke with the `rgba(252,76,2,0.3)` halo — this is the signature visual
- Use tabular numerals on EVERY number (pace, time, distance, splits, kudos count) via `monospacedDigit()`
- Use the 3-up stat grid pattern on every activity card — never break this pattern for "more info"
- Place stat labels in 11pt UPPERCASE Semibold with 0.6pt tracking — this is the Strava data voice
- Use SF Pro Display Black weight 900 for the hero stats on activity detail — these are the trophy numbers
Avoid:
- Don't introduce a secondary brand color — Strava is monochromatically Orange, that's the discipline
- Don't render the polyline without the halo — busy city maps will swallow a bare orange stroke
- Don't use proportional digits in stats — column alignment will break and Strava users notice
- Don't add card drop shadows — the visual hierarchy comes from the map snapshot, not elevation
- Don't replace the 3-up stat grid with a list — it must be a horizontal trio
- Don't use system-yellow for PRs — Strava's PR gold is `#F5C24A`, slightly cooler and warmer at once
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Strava Orange (
#FC4C02): THE accent — Record CTA, active tab, route polyline, kudos filled, PR chip, follow-button text. - Orange Pressed (
#D44002): Active/pressed state on Strava Orange CTAs. - Orange Halo (
rgba(252,76,2,0.3)): The luminance ring drawn beneath the polyline to lift it off the map.
Canvas, Surfaces & Dividers (Light Mode)
- Canvas White (
#FFFFFF): Primary canvas — feed, profile, settings. - Surface Warm (
#F5F4F2): Section backgrounds, search field fill, profile header backdrop — a subtle warm gray, not pure neutral. - Surface Cool (
#F0F0F0): Activity-card secondary surfaces, the stat-grid divider zones. - Divider (
#E5E5E5): Hairline row dividers between feed cards, settings rows. - Map Tile Default (
#E8E5DD): The OpenStreetMap-derived base tile color (Strava's custom-styled raster) — warm parchment, never gray.
Text (Light Mode)
- Ink Primary (
#0E0E0E): Primary text — activity titles, hero stats, athlete names. - Ink Secondary (
#666666): Secondary text — timestamps, "Hosted by ...", "5 followers", metadata. - Ink Tertiary (
#9A9A9A): Tertiary — placeholders, disabled labels, "no kudos yet". - Inverted White (
#FFFFFF): Text on dark surfaces (the Record button, the bottom bar).
Dark Mode
Strava's dark mode is deeply considered — coal black so the orange polyline glows.
- Coal Black Canvas (
#0F0F0F): Primary dark canvas. - Dark Surface 1 (
#1A1A1A): Card backgrounds, profile header on dark. - Dark Surface 2 (
#262626): Pressed states, chip fills, search field fill. - Dark Divider (
#2A2A2A): Hairlines. - Dark Text Primary (
#F2F2F2): Activity titles. - Dark Text Secondary (
#A0A0A0): Metadata. - Strava Orange (dark) (
#FC4C02): Identical — orange reads beautifully on coal. - Map Tile (dark) (
#1B1B1B): Strava's custom dark map style — deep charcoal with white street network.
Achievement & Rank Colors
- PR Gold (
#F5C24A): Personal Record (PR) flag, top-1 on a segment. - 2nd Silver (
#C6C6C6): Top-2 on a segment. - 3rd Bronze (
#CD7F32): Top-3 on a segment. - KOM/QOM Crown (
#FFD700): King/Queen of the Mountain segment crown (slightly more gold than PR).
Semantic
- Success Green (
#22C55E): Activity uploaded, sync complete. - Heart Red (
#E74C3C): Heart rate zone hi (used on HR charts). - Pace Blue (
#3B82F6): Pace chart line on graph overlays. - Elevation Brown (
#8B6F47): Elevation chart fill. - Warning Amber (
#F59E0B): Activity not synced, GPS signal weak. - Error Red (
#EF4444): Failed sync, payment failed (Subscription).
Activity-Type Tinting
When the activity card is highlighted in the feed (e.g., a friend's run), the activity-type icon takes the Strava Orange. Otherwise icons are #666666 ink-secondary. Activity types have their own ghost colors but Strava deliberately keeps them muted — orange remains the focal point.
Type scaleRead the full spec
Font Family
- Primary (iOS app):
SF Pro Display(titles 20pt+) /SF Pro Text(body 17pt and below) - Marketing / web:
Maison Neueby Milieu Grotesque (Book, Medium, Bold) - Fallback stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Maison Neue', 'Helvetica Neue', Arial, sans-serif - Web/marketing Google Fonts substitute:
Interat -0.4 letter-spacing approximates Maison Neue; orIBM Plex Sansfor a more grotesque feel - Numeric weight: SF Pro
monospacedDigit()everywhere there's a stat — pace, distance, elapsed time, splits, kudos count, follower count
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Hero Stat (Activity Detail) | SF Pro Display | 44pt | 900 (Black) | 1.0 | -0.6pt | "8.2" mi, "1:14:23" elapsed — the big number |
| Hero Stat Unit | SF Pro Text | 13pt | 600 | 1.0 | 0.5pt | "mi", "MIN/MI" — UPPERCASE under the hero number |
| Large Nav Title | SF Pro Display | 28pt | 700 (Bold) | 1.1 | -0.4pt | "Home", "Activity", "Maps" |
| Activity Title (Feed Card) | SF Pro Text | 17pt | 600 (Semibold) | 1.2 | -0.2pt | "Tuesday Morning Run" |
| Athlete Name (Feed Card Header) | SF Pro Text | 15pt | 600 | 1.2 | -0.1pt | The author of the activity |
| Section Header | SF Pro Text | 13pt | 700 | 1.2 | 0.5pt | UPPERCASE — "ACHIEVEMENTS", "SPLITS" |
| Body | SF Pro Text | 15pt | 400 (Regular) | 1.4 | -0.2pt | Activity description, comments |
| Body Small | SF Pro Text | 13pt | 400 | 1.4 | -0.1pt | Activity timestamp, "5 minutes ago" |
| Stat Number (Feed Card) | SF Pro Text | 17pt | 700 | 1.1 | 0pt | The 3-up grid: "8.2", "1:14:23", "9:03" — tabular |
| Stat Label | SF Pro Text | 11pt | 600 | 1.2 | 0.6pt | UPPERCASE — "DISTANCE", "TIME", "PACE" |
| Kudos Count | SF Pro Text | 13pt | 600 | 1.0 | 0pt | "27" — tabular, after the thumb glyph |
| Metadata | SF Pro Text | 13pt | 400 | 1.3 | -0.1pt | "Boston, MA · 2 hours ago" |
| Button (Primary) | SF Pro Text | 17pt | 700 | 1.0 | -0.2pt | "Record", "Follow", "Save" |
| Button (Secondary) | SF Pro Text | 15pt | 600 | 1.0 | -0.1pt | "Give Kudos", "Comment" |
| Tab Label | SF Pro Text | 10pt | 600 | 1.0 | 0.2pt | Bottom tab labels |
| Segment Rank | SF Pro Text | 13pt | 800 | 1.0 | 0pt | "1", "2", "3" inside the rank chip |
| Caption | SF Pro Text | 11pt | 400 | 1.3 | 0.1pt | "as of 9:42 AM", "GPS accuracy ±3m" |
Principles
- Weights concentrated at 400 / 600 / 700 / 900: Regular for body, Semibold for activity titles & metadata labels, Bold for stats and section headers, Black for the hero stats on activity detail.
monospacedDigit()on every number: pace, time, distance, splits, kudos count, follower count — Strava's column alignment depends on it.- Stat labels are 11pt UPPERCASE Semibold with 0.6pt tracking: "DISTANCE / TIME / PACE / ELEV". Always.
- Ink Primary
#0E0E0Eis darker than typical body: Strava intentionally pushes contrast — the map gets light, the text gets dark. - Dynamic Type respected on body and titles; FIXED on hero stats and stat labels because the 3-up grid alignment breaks.
- Tabular numerals over comma columns: when you have a splits table, every digit is the same width.
Components and layoutRead the full spec
Activity Feed Card (the hero component)
Card Structure
- Full content width (viewport - 16pt horizontal margins)
- Top: 56pt header strip — 40pt circular avatar + athlete name (15pt Semibold) + activity-type icon + timestamp (13pt Regular
#666666) - Activity title row: 17pt Semibold
#0E0E0E, full-width, 1-line truncate (e.g. "Tuesday Morning Run") - Optional description: 15pt Regular
#0E0E0E, max 3 lines, "Read more" link - Map snapshot: full-width, aspect ratio 16:9, corner radius 6pt, route polyline rendered at 4pt stroke in
#FC4C02withrgba(252,76,2,0.3)halo - 3-up stat grid below the map: distance / time / pace (or elevation for rides) — each cell is 1/3 width, vertical-aligned, top label 11pt UPPERCASE Semibold
#666666+ 17pt Bold value#0E0E0E - Achievements row (optional, after stats): horizontal row of badges — "1 PR" + "3 Personal Bests" + "KOM Attempt" in 13pt Semibold tinted Orange
- Kudos + Comments row: bottom of card — 32pt thumb-up glyph + count + 24pt speech-bubble glyph + count, left-aligned; "View Activity" link right-aligned in 13pt Semibold Orange
- Divider between cards: 8pt vertical gap with no hairline (the next card's white background acts as the divider)
- Card background:
#FFFFFF(light) /#1A1A1A(dark); no shadow, no border
Map Snapshot (the route polyline)
Map Tile Style
- Strava-customized OpenStreetMap raster — warm parchment
#E8E5DDbase with bone-colored road network and lighter buildings - Dark mode tile: charcoal
#1B1B1Bwith white roads (#FFFFFF@ 70%) and pale building footprints
Route Polyline
- Stroke: 4pt solid
#FC4C02 - Halo (drawn beneath the stroke): 1pt offset on every side,
rgba(252, 76, 2, 0.3)— this is what makes the polyline read on busy streets - Stroke caps: round
- Join: round (no mitered corners on switchbacks)
- For long activities (>10mi), the polyline thins to 3pt to avoid dominating the snapshot
Start/End Markers
- 12pt circle filled white with 2pt
#FC4C02outline — at the route start - 12pt filled
#FC4C02circle with 2pt white outline — at the route end - Tip: in a feed snapshot they overlap if it's a loop, which is fine
3-Up Stat Grid (below the map on every activity card)
Layout
- Full width, evenly distributed 3 columns
- Each cell: vertical stack of label (top) + value (bottom)
- 16pt vertical padding, 0pt horizontal gap (cells abut)
- 1pt
#F0F0F0vertical divider between cells (only in light mode; absent in dark)
Cell Content
- Label: 11pt UPPERCASE Semibold
#666666, 0.6pt tracking — "DISTANCE", "TIME", "PACE" or "ELEV" - Value: 17pt Bold
#0E0E0E, tabular — "8.2", "1:14:23", "9:03" - For rides, swap order: "DISTANCE / ELEV GAIN / AVG SPEED"
- For swims: "DISTANCE / TIME / PACE/100"
- The label-to-value gap is 4pt fixed
Kudos & Comments Row
Kudos Thumb
- Container: 36pt × 36pt circular tap area
- Glyph:
hand.thumbsup(outlined) when un-given /hand.thumbsup.fill(Strava Orange) when given - Default color:
#666666outlined - Given color:
#FC4C02filled - Animation on tap: scale 1.0 → 1.3 → 1.0 over 300ms spring + emit confetti at 8 small Orange particles fading up +
.impactOccurred(.medium)haptic - Count: 13pt Semibold
#0E0E0Eto the right of the glyph
Comment Bubble
- Glyph:
bubble.leftoutlined SF Symbol, 18pt,#666666 - Count: 13pt Regular
#666666
View Activity Link
- "View Activity" in 13pt Semibold
#FC4C02, right-aligned - 44pt tap area extending across the full right edge
Achievement Badge (on a feed card if any PRs occurred)
Format
- Pill-shape, full pill radius (500pt), 24pt height
- Inline icon + text — 14pt
figure.run.circle.fillOrange + "1 PR" in 13pt Semibold#0E0E0E - Background:
rgba(252,76,2,0.08)light tint, transparent in dark withrgba(252,76,2,0.15) - Padding: 4pt vertical, 10pt horizontal
- Horizontal scroll if more than 3 badges fit
Segment Leaderboard Row
Layout
- Height: 56pt
- Left: 32pt × 32pt rank chip — circular, filled Gold for #1 / Silver for #2 / Bronze for #3 /
#F0F0F0for the rest, with the rank number in 13pt Black white (or#0E0E0Efor #4+) - Avatar: 36pt circular, immediately right of rank chip
- Middle stacked: athlete name 15pt Semibold
#0E0E0Eabove date 11pt Regular#666666 - Right stacked: segment time 17pt Bold
#0E0E0Etabular above gap to leader 11pt Regular#666666("+0:12") - Background: alternating
#FFFFFF/#FAFAFArows (zebra) - Divider: 0.5pt
#E5E5E5hairline at bottom - Tap haptic:
.selectionChanged()
Record Button (the center tab — Strava's main CTA)
Format
- Tab bar center action — protrudes 8pt above the bar's top edge
- Circle: 56pt × 56pt,
#FC4C02background - Glyph: 22pt
record.circleorplay.fillSF Symbol, white - Shadow:
rgba(252,76,2,0.4) 0 8px 16px - Tap: scales to 0.95, immediately opens Record sheet with map and activity-type chooser
- Haptic:
.impactOccurred(.heavy)— Record is a serious commitment, the heaviest haptic in the app
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Map snapshot maintains 16:9; stat grid compresses to 11pt label / 16pt value |
| iPhone 13/14/15 | 390pt | Standard layout, all stats inline |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected — top app bar sits below it |
| iPhone 15/16 Pro Max | 430pt | Larger map snapshot, optional 4-up stat grid (adds elevation) |
| iPad | 768pt+ | 2-col feed grid; activity detail uses split view (map left 60%, stats/splits right 40%) |
Dynamic Type
- Activity titles and body: full scale
- Hero stats (44pt Black): clamp at 56pt to prevent overflow
- Stat labels and stat values in 3-up grid: FIXED at 11pt/17pt — layout breaks if they scale
- Tab labels and rank chips: FIXED
Orientation
- Portrait-locked everywhere except:
- Activity detail map can full-screen and rotate to landscape
- Splits chart and pace chart rotate
Touch Targets
- Kudos thumb: 36pt visual on a 44pt tap area
- Comment glyph: 36pt visual on a 44pt tap area
- Record button: 56pt visual on a 64pt tap area
- Segment row: full 56pt height tap
Safe Area Handling
- Top: safe area honored — large title starts at safe-area top + 16pt
- Bottom: tab bar with Record button respects home indicator; the Record button's shadow extends below the indicator into the safe area
- Sides: 16pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-strava {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0e0e0e;
--heading-color: #0e0e0e;
--link-color: #877100;
--link-hover-color: #544600;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(14,14,14,0.06);
--card-hover-shadow: 0 6px 18px rgba(14,14,14,0.12);
--header-bg: #0e0e0e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #626262;
--button-bg: #ffd700;
--button-text-color: #000000;
--button-hover-bg: #ccac00;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #0e0e0e;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0e0e0e;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- asana 80.8%
- kayak 79.5%
- zoom 77.7%
- todoist 77.6%
- coffee meets bagel 77.4%
Where this came from
- Source document
ios/design-md/fitness/strava/DESIGN.md· 27.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.