Health & Wellness / iOS / Android / Web

Strava

Strava keeps the page warm and quiet so its one hot orange can say go: every way in is orange, everything else is white, warm gray or a dark photo band.

Download
  • #FC5200
  • #21211F
  • #43423F
  • #F9F8F5
  • #F2F2F0
  • #0060D0

Color

Every color token in the file, grouped by role.

Brand

  • primary#FC5200
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • canvas warm#F9F8F5
  • surface button#FAFAFA

Text

  • ink#000000
  • ink strong#21211F
  • ink body#43423F
  • ink muted#64635E
  • ink faint#918E89
  • link#0060D0
  • on dark#FFFFFF

Lines

  • border#E0E0DE

More

  • band#F2F2F0
  • dark band#21211F
  • dark panel#353633

Typography

Each style is set with the file's own family, size, weight and spacing.

  • BoathouseExtendedBoathouseExtended is private and not available in open fonts. Shown in Montserrat, the closest open match.
  • BoathouseBoathouse is private and not available in open fonts. Shown in Hanken Grotesk, the closest open match.
  • display72px / 600 / 72px

    Strava

  • headline60px / 600 / 72px

    Strava

  • title32px / 600 / 41.6px

    Strava

  • subtitle24px / 400 / 31.2px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 20.8px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 18px

    Continue to checkout

  • caption12px / 400 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • sm4px
  • pill56px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • xs6px
  • sm10px
  • md16px
  • base20px
  • lg24px
  • xl40px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button social
    button-social
  • button quiet
    button-quiet
  • cta pill
    cta-pill
  • input
    input
  • dark band
    dark-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 121 lines
version: alpha
name: Strava-design-analysis
description: "An activity network in white and warm gray with one hot orange (#fc5200) for every sign-up and join action, Boathouse for text, a wide Boathouse Extended for big headlines, 4px buttons and pill calls to action on mobile."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#fc5200"
  on-primary: "#ffffff"
  ink: "#000000"
  ink-strong: "#21211f"
  ink-body: "#43423f"
  ink-muted: "#64635e"
  ink-faint: "#918e89"
  canvas: "#ffffff"
  canvas-warm: "#f9f8f5"
  band: "#f2f2f0"
  surface-button: "#fafafa"
  border: "#e0e0de"
  link: "#0060d0"
  dark-band: "#21211f"
  dark-panel: "#353633"
  on-dark: "#ffffff"

typography:
  # Font note: "Boathouse" is a private font and is not available in open fonts. Closest open alternative: "Hanken Grotesk".
  # Font note: "BoathouseExtended" is a private font and is not available in open fonts. Closest open alternative: "Montserrat".
  display:
    fontFamily: "BoathouseExtended, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 72px
  headline:
    fontFamily: "BoathouseExtended, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 72px
  title:
    fontFamily: "Boathouse, 'Segoe UI', 'Helvetica Neue', sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 41.6px
  subtitle:
    fontFamily: "Boathouse, 'Segoe UI', 'Helvetica Neue', sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.2px
  body:
    fontFamily: "Boathouse, 'Segoe UI', 'Helvetica Neue', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20.8px
  button:
    fontFamily: "Boathouse, 'Segoe UI', 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 18px
  caption:
    fontFamily: "Boathouse, 'Segoe UI', 'Helvetica Neue', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px

rounded:
  xs: 2px
  sm: 4px
  pill: 56px
  full: 9999px

spacing:
  xs: 6px
  sm: 10px
  md: 16px
  base: 20px
  lg: 24px
  xl: 40px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 6px 24px
  button-social:
    backgroundColor: "{colors.surface-button}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 43px
    padding: 10px 50px
  button-quiet:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 6px 24px
  cta-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 54px
    padding: 16px 40px
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 47px
    padding: 12px 16px
  dark-band:
    backgroundColor: "{colors.dark-band}"
    textColor: "{colors.on-dark}"
    typography: "{typography.headline}"
    padding: 40px

Overview

Strava is a tracking and social app for runners, cyclists and hikers. Its public site is white and warm gray, with one hot orange that marks every way in: sign up, join, log in. Text is set in Boathouse, and the largest headlines switch to its wide companion, Boathouse Extended. [Observed]

What defines the look:

  1. One hot orange. #fc5200 fills the sign-up and join buttons and outlines the Get App link. Nothing else on the page is orange. [Measured]
  2. Warm grays. The canvas behind forms is #f9f8f5, bands are #f2f2f0, and text grays lean warm (#43423f, #64635e, #918e89). [Measured]
  3. Boathouse and Boathouse Extended. Boathouse sets text and buttons at 400 and 600. Feature page headlines use Boathouse Extended at 600, 60 to 72 on desktop. [Measured]
  4. Square-ish buttons, pill calls to action. Desktop buttons use a 4px corner. On mobile the big "Join Us Now" and "Explore" calls to action become 54 high pills with a 56px radius. [Measured]
  5. Dark photo bands. Feature sections sit on #21211f and #353633 with white text. [Measured]

Source for this file: the home page, the subscription features page, the log in page and the sign-up page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Strava does not publish a design system for its product. Activity feeds, maps and segment pages sit behind an account and were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Orange#fc5200Sign-up, join and log in buttons, Get App outline [Measured]
Ink#000000, #21211fHeadlines, button text [Measured]
Body text#43423fParagraphs [Measured]
Muted text#64635e, #918e89Helper text, legal lines, input borders [Measured]
Canvas#ffffffPage [Measured]
Warm canvas#f9f8f5Behind the sign-up and log in forms [Measured]
Band#f2f2f0Section bands on mobile [Measured]
Social button#fafafa with a #64635e borderContinue with Google or Apple [Measured]
Border#e0e0deQuiet button outline [Measured]
Link#0060d0Inline links and the Explore pills [Measured]
Dark band#21211f, #353633Feature and photo sections [Measured]

Typography

RoleDesktopMobileFace and weight
Feature display72 on 7248 on 48, -2pxBoathouse Extended 600 [Measured]
Feature headline60 on 7234 on 41Boathouse Extended 600 [Measured]
Page title32 on 41.632 on 41.6Boathouse 600 [Measured]
Subtitlenot used24 on 31.2Boathouse 400 [Measured]
Body16 on 20.814 on 18Boathouse 400 [Measured]
Button14 to 1612 to 14Boathouse 600 [Measured]
Caption and legal12 on 16 to 18sameBoathouse 400 [Measured]

Boathouse is loaded at 300 to 900. Boathouse Extended is loaded at 600 only. [Measured]

Shape and spacing

Buttons, inputs and cards use a 4px corner, with 2px in a few small places. Mobile calls to action are 54 high pills at 56px. [Measured] Button padding is 6 by 24 for compact buttons, 10 by 50 for full-width social buttons and 16 by 40 for pills. Top navigation items carry 26 by 20. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing on the pages measured. [Measured]

Platform: iOS

How the Strava iOS app looks and behaves was not captured. Strava does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the feed, maps, recording, groups and the profile is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A prominent orange record action. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the orange, warm grays and Boathouse with the web. [Inferred]

Platform: Android

How the Strava Android app looks and behaves was not captured. Strava does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the feed, maps, recording, groups and the profile is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A prominent orange record action. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the orange, warm grays and Boathouse with the web. [Inferred]

Platform: Web

The home page, features page, log in and sign-up pages, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

Desktop: a white top bar of 73 high text menus (Features, Maps, Activities) at 16 on 20.8, with a quiet Log In button and an orange Join for Free button. Mobile: an outlined orange "Get App" link (32 high) and an orange "Sign Up" button (36 high) at the top, with the menus collapsed. [Measured]

Main action

Expected on Web: Page-level button.

Orange #fc5200 with white text and a 4px corner: 40 high in the header, 48 high on the log in and sign-up forms, and 43 high for "Sign Up With Email". [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Inputs are white, 47 high, with a 1px #918e89 border and a 4px corner. Social sign-in buttons are #fafafa with a 1px #64635e border, 43 high. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width, most strongly for the extended headlines (72 to 48, 60 to 34). [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Form buttons are 43 to 48 high and mobile pills 54. The mobile header buttons are 32 and 36, below 44. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The sign-up and log in pages offer Google and Apple next to email, as equal buttons. [Measured]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Desktop keeps 4px buttons, while mobile switches the big calls to action to pills. Type and color stay the same at both widths. [Measured]

Cross-platform consistency

Consistent across platforms: the orange action color, the warm grays and Boathouse. [Measured for web, Inferred for the apps]

Intentionally different: on the web, mobile calls to action are pills while desktop buttons keep a 4px corner. [Measured]

Do's and Don'ts

Do

  • Reserve orange for the action that gets someone in or moving.
  • Use warm grays, not cool ones, for text and bands.
  • Use Boathouse Extended only for big feature headlines.
  • Keep buttons and inputs at a 4px corner.

Don't

  • Don't use orange for decoration or body links. Links are blue #0060d0.
  • Don't set body text in the extended face.
  • Don't mix more than one bright color into a page.

Known Gaps

  • The activity feed, maps, segments and the recording flow sit behind an account and were not measured.
  • The iOS and Android apps were not captured, and Strava publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • Boathouse and Boathouse Extended are private. Hanken Grotesk (width within about 1 percent) and Montserrat (about 3 percent narrower at 600) were chosen by comparing the same line side by side. Arimo and Lato were close seconds for Boathouse.
  • White text on the orange buttons measures 3.31 to 1, below the 4.5 to 1 minimum for normal text. That is the shipped pairing and was kept.
  • A cookie banner covers the first view. It belongs to a consent vendor and was left out of the measurements.
  • Account deletion and store policy rules were not verified.