--- 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 | Role | Value | Where | |------|-------|-------| | Orange | `#fc5200` | Sign-up, join and log in buttons, Get App outline [Measured] | | Ink | `#000000`, `#21211f` | Headlines, button text [Measured] | | Body text | `#43423f` | Paragraphs [Measured] | | Muted text | `#64635e`, `#918e89` | Helper text, legal lines, input borders [Measured] | | Canvas | `#ffffff` | Page [Measured] | | Warm canvas | `#f9f8f5` | Behind the sign-up and log in forms [Measured] | | Band | `#f2f2f0` | Section bands on mobile [Measured] | | Social button | `#fafafa` with a `#64635e` border | Continue with Google or Apple [Measured] | | Border | `#e0e0de` | Quiet button outline [Measured] | | Link | `#0060d0` | Inline links and the Explore pills [Measured] | | Dark band | `#21211f`, `#353633` | Feature and photo sections [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Feature display | 72 on 72 | 48 on 48, -2px | Boathouse Extended 600 [Measured] | | Feature headline | 60 on 72 | 34 on 41 | Boathouse Extended 600 [Measured] | | Page title | 32 on 41.6 | 32 on 41.6 | Boathouse 600 [Measured] | | Subtitle | not used | 24 on 31.2 | Boathouse 400 [Measured] | | Body | 16 on 20.8 | 14 on 18 | Boathouse 400 [Measured] | | Button | 14 to 16 | 12 to 14 | Boathouse 600 [Measured] | | Caption and legal | 12 on 16 to 18 | same | Boathouse 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.