---
version: alpha
name: Strava
description: A blaze-orange GPS trace burning across a rain-slicked road at dawn.
colors:
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#E0E0DE"
  primary: "#FC5200"
  trace-orange: "#FC4C01"
  overlay-black: "#0D0C0C"
  overlay-black-deep: "#050505"
  body-gray: "#43423F"
  slate-gray: "#21211F"
  muted-gray: "#64635E"
  link-blue: "#0060D0"
  off-white: "#F9F8F5"
  field-gray: "#FAFAFA"
typography:
  caption:
    fontFamily: "Arial / System"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-footer-link:
    fontFamily: "Arial / System"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  button-nav:
    fontFamily: "Arial / System"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  lead:
    fontFamily: "Arial / System"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  headline:
    fontFamily: "Arial / System"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
rounded:
  buttons-cards: 4px
  overlay-chrome-buttons: 3.75px
  larger-tiles: 8px
spacing:
  xs: 8px
  sm: 15px
  md: 20px
  lg: 26px
---
# Strava — Style Reference
> A blaze-orange GPS trace burning across a rain-slicked road at dawn.

**Theme:** light

Strava is a white-canvas system with one loud voice: a single incandescent orange (`#FC5200`) that carries the wordmark, the one true CTA, and every in-text "Log In" accent — and touches almost nothing else. The rest of the palette is disciplined to near-monochrome: a stack of warm near-blacks for overlay chrome, three barely-separated warm grays for body and footer text, and a whisper-warm off-white (`#F9F8F5`) for the footer plinth. The signature move is the three-panel hero — two full-bleed action photographs bracketing a centered, chromeless sign-up card, with a hand-drawn orange elevation trace spilling out of the photo edge. Type is Boathouse, a chunky humanist display face carried at heavy weights for the wordmark and a compact 32px for headlines, over a plain Arial/system body. Radii are tiny (4px), borders are hairline, and shadows appear only when a card must float above a photo.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Strava Orange | `#FC5200` | `--color-orange` | The signature. Primary CTA fill, wordmark, brand-tile color, elevation trace. The one saturated color on the page — never decorative. |
| Trace Orange | `#FC4C01` | `--color-orange-link` | Inline "Log In" / member links at weight 600. A hair warmer than the CTA orange; used as text-accent, never as a fill. |
| Ink Black | `#000000` | `--color-ink` | Headlines, nav labels, primary text. Pure black — Strava does not soften its display type. |
| Overlay Black | `#0D0C0C` | `--color-overlay` | Warm near-black fill for buttons sitting on photography (app-badge / video chrome). |
| Overlay Black Deep | `#050505` | `--color-overlay-deep` | Deeper overlay-chrome variant on darker photo regions. |
| Body Gray | `#43423F` | `--color-body` | Footer navigation links and quiet body copy. Warm dark gray, never pure black. |
| Slate Gray | `#21211F` | `--color-slate` | Secondary-button label text. The darkest of the warm grays. |
| Muted Gray | `#64635E` | `--color-muted` | Sub-headline copy and hairline button borders. |
| Link Blue | `#0060D0` | `--color-link` | Legal/utility links only ("Terms of Service", "Privacy Policy"). The lone cool hue, quarantined to fine print. |
| White | `#FFFFFF` | `--color-white` | Page canvas, card fill, on-orange / on-dark button text. |
| Off-White | `#F9F8F5` | `--color-canvas-warm` | Footer plinth. A warm ivory that lifts the footer a half-step off pure white. |
| Field Gray | `#FAFAFA` | `--color-field` | Secondary-button / input fill (Google, Apple sign-up rows). |
| Hairline | `#E0E0DE` | `--color-border` | Faint dividers and card outlines. |

## Tokens — Typography
### Boathouse — display & wordmark: a chunky humanist sans carried at heavy weights, italic for the logo lockup · `--font-display`
- **Substitute:** Segoe UI, Helvetica Neue, system-ui
- **Weights:** 300, 400, 500, 600, 700, 900 (each in normal + italic); a `BoathouseCondensed` cut ships at 700/900 for tight lockups
- **Sizes:** 32px headline, 14px eyebrow
- **Line height:** tight — ~1.05–1.15 on display
- **Letter spacing:** near-zero; the face is already dense
- **Role:** headlines and the STRAVA wordmark; the heavy/italic cuts are what give the brand its athletic, stenciled swagger

### Arial / System — body: the plain workhorse for running text and controls · `--font-body`
- **Substitute:** Helvetica Neue, Roboto, -apple-system, system-ui
- **Weights:** 400 body, 600 for emphasis and button labels
- **Sizes:** 12px, 14px, 15px, 16px
- **Line height:** ~1.4–1.5 on paragraph copy
- **Letter spacing:** default
- **Role:** sub-headlines, form labels, button text, footer links — deliberately neutral so Boathouse and the orange stay the only voices

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Body / Footer link | 14px | 1.45 | 0 | `--text-body` |
| Button / Nav | 15px | 1.4 | 0 | `--text-action` |
| Lead | 16px | 1.5 | 0 | `--text-lead` |
| Headline (Boathouse) | 32px | 1.1 | 0 | `--text-headline` |

## Tokens — Spacing & Shapes
**Base unit:** 8px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 8px | `--spacing-xs` |
| sm | 15px | `--spacing-sm` |
| md | 20px | `--spacing-md` |
| lg | 26px | `--spacing-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons / cards | 4px |
| Overlay-chrome buttons | 3.75px |
| Larger tiles | 8px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Float | `rgba(0, 0, 0, 0.3) 0px 30px 70px 0px` | `--shadow-float` |

### Layout
- **Page max-width:** full-bleed hero, contained content columns
- **Section gap:** generous vertical rhythm on multiples of 8px
- **Card padding:** ~26px 20px on the sign-up card
- **Element gap:** 15px between stacked sign-up buttons

## Components
### Primary Button (Sign Up With Email)
**Role:** the single true call to action.
Fill `#FC5200`, text `#FFFFFF` weight 600, radius 4px, no shadow, full-width in the sign-up card. This is the only orange fill on the page — nothing else competes with it.

### Secondary Button (Sign Up With Google / Apple)
**Role:** alternative auth paths, visually subordinate to the orange CTA.
Fill `#FAFAFA`, label `#21211F`, hairline `#64635E` border, radius 4px, no shadow. A leading provider glyph (Google G, Apple mark) sits left; full-width, stacked at 15px gaps.

### Overlay Button
**Role:** chrome that must read on top of full-bleed photography.
Warm near-black fill (`#0D0C0C` / `#050505` / `#000000`), white label at 15px/600, a crisp 2px `#FFFFFF` border, radius 3.75px, padding 15px. The white ring is what keeps it legible against busy image detail.

### Ghost Nav Button (Log In)
**Role:** low-emphasis account entry in the header.
Transparent fill, `#000000` label, thin `#E0E0DE` hairline outline, radius 4px. Quiet on purpose — the orange CTA lives in the hero, not the nav.

### Text Link — Accent
**Role:** "Already a Member? Log In" and footer Log In.
`#FC4C01` at weight 600, no underline. The one place orange appears as type rather than fill.

### Text Link — Legal
**Role:** fine-print utility links.
`#0060D0` inline, weight 400, 15px. Cool blue is quarantined here so the warm palette stays intact everywhere else.

### Footer Link
**Role:** the dense multi-column sitemap.
`#43423F` weight 400 at 14px, 8px vertical padding per row, over the `#F9F8F5` plinth. Warm gray, never black — the footer recedes.

### Wordmark
**Role:** brand signature in nav and footer.
Boathouse-derived orange (`#FC5200`) lockup with the angled twin-chevron mark. Sits top-left, ~95px wide in the header, mark-only in the footer.

### Section Eyebrow / Sub-heading
**Role:** small label above or below a headline.
`#000000` weight 600 at 14px. Pairs with the 32px Boathouse headline.

### Hero Headline
**Role:** the emotional hook ("Community-Powered Motivation").
Boathouse `#000000` at 32px/600, tight leading, centered in the sign-up column between the two photo panels.

### Muted Sub-copy
**Role:** the supporting sentence under a headline.
`#64635E` weight 400, 14–16px, centered, short. Sets up the CTA without stealing attention.

### App Store Badge Row
**Role:** download prompts in the footer.
Black badge chips (`#000000`) with white art, stacked under the footer wordmark — standard platform lockups, no recoloring.

## Do's and Don'ts
### Do
- Keep `#FC5200` as the single saturated color: one CTA fill, the wordmark, the elevation trace. Nothing else earns the orange.
- Use pure `#000000` for Boathouse headlines — the display face is meant to punch.
- Reach for the warm-gray ramp (`#43423F` / `#64635E` / `#21211F`) for all quiet text; never soften with a cool gray.
- Border overlay buttons with a 2px white ring so they survive on photography.
- Warm the footer with `#F9F8F5` — a half-step off white, not a gray box.

### Don't
- Don't add a second brand color. The lone blue (`#0060D0`) is legal-fine-print only; do not promote it to links or accents.
- Don't fill secondary buttons with orange — they stay `#FAFAFA` with a hairline so the email CTA reads as the one action.
- Don't round corners past ~8px. Strava's shapes are near-square (4px); softness is off-brand.
- Don't drop shadows everywhere — the single `0px 30px 70px` float is reserved for a card lifting off a photo.
- Don't set body copy in Boathouse; the display face is for headlines and the wordmark, not paragraphs.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page background and card fill |
| 1 | Field | `#FAFAFA` | Secondary buttons and inputs |
| 1 | Warm Plinth | `#F9F8F5` | Footer background |
| 2 | Overlay | `#0D0C0C` | Chrome on photography |
| 2 | Overlay Deep | `#050505` | Chrome on darker photo regions |

## Elevation
Depth is mostly flat. Separation comes from hairline borders (`#E0E0DE`) and a single luminance step (`#FAFAFA` fields, `#F9F8F5` footer) against the white canvas — not from stacked shadows. The one real shadow, `rgba(0,0,0,0.3) 0px 30px 70px`, is a large, soft float reserved for a card or device mock that must lift off a full-bleed photograph. Overlay chrome earns its separation from a 2px white border rather than a drop shadow.

## Imagery
Photography is the emotional engine: full-bleed, editorial action shots of real athletes — cyclists on a wet road, runners cresting a hill in golden overcast light. Warm, naturalistic, slightly desaturated grades; never studio-clean or stocky. The signature graphic overlay is a hand-drawn incandescent-orange GPS/elevation trace that spills out of a photo edge and into the layout, tying the brand color to the act of moving through terrain. Device mocks (a phone + watch showing the activity screen) are composited into the photography rather than isolated.

## Layout
A three-panel hero: two full-bleed photographs flank a centered white sign-up column, so the page reads image / action / image with the conversion card protected in the middle. The top nav is a simple white bar — orange wordmark left, black text links (Activities, Features, Maps, Challenges, Subscription) center-left, a ghost "Log In" button far right. The footer is a warm off-white plinth carrying the mark, app-store badges, and a dense four-to-five column sitemap in warm gray. Content columns are contained and centered; hero and footer run edge to edge.

## Typography Voice
Two modes, sharply divided. Boathouse — heavy, humanist, slightly condensed, with italic cuts up to 900 — carries only the wordmark and the 32px headline; it is where all the personality lives, giving the brand its athletic stencil-jersey swagger. Everything else is plain Arial/system at 14–16px, weight 400 with 600 for labels — a deliberately neutral body so the display face and the orange never have to compete for attention. The move that makes it work: headlines are set in pure `#000000` at tight leading, so the chunky face reads as a graphic mark, while the quiet gray body copy (`#64635E`) sets up each CTA without raising its voice.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#000000` (body `#43423F`) / surface: `#FAFAFA` (footer `#F9F8F5`) / border: `#E0E0DE` / accent: `#FC5200` / primary action: `#FC5200`
## Example Component Prompts
1. **Primary CTA**: Full-width button, fill `#FC5200`, white text weight 600 at 15px, radius 4px, no shadow, label "Sign Up With Email".
2. **Secondary auth button**: Full-width button, fill `#FAFAFA`, label `#21211F`, 1px `#64635E` border, radius 4px, leading provider glyph, 15px gap to sibling.
3. **Three-panel hero**: Two full-bleed athlete photographs flanking a centered white sign-up card; Boathouse headline `#000000` 32px, muted sub-copy `#64635E`, stacked auth buttons; an orange (`#FC5200`) GPS trace overlay spilling from the right photo edge.
4. **White nav bar**: Orange `#FC5200` wordmark left, black `#000000` text links, far-right ghost "Log In" button with `#E0E0DE` hairline border and 4px radius.
5. **Warm footer**: Background `#F9F8F5`, orange mark, black app-store badges, four columns of `#43423F` links at 14px, one accent "Log In" in `#FC4C01`.

## Similar Brands
- **Nike Run Club** — the same athletic swagger: one hot accent, heavy display type, real-athlete photography over near-monochrome chrome.
- **Whoop** — performance-app minimalism where a single vivid signal color rides on top of a restrained dark/neutral system.
- **Peloton** — full-bleed motivational photography plus a chunky brand face and a lone energetic accent.
- **Garmin Connect** — data-forward fitness UI that quarantines cool utility blues and lets one warm accent carry the brand.
- **Runna** — modern running-app aesthetic: white canvas, bold sans headlines, a single saturated CTA color.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-orange: #FC5200;
  --color-orange-link: #FC4C01;
  --color-ink: #000000;
  --color-overlay: #0D0C0C;
  --color-overlay-deep: #050505;
  --color-body: #43423F;
  --color-slate: #21211F;
  --color-muted: #64635E;
  --color-link: #0060D0;
  --color-white: #FFFFFF;
  --color-canvas-warm: #F9F8F5;
  --color-field: #FAFAFA;
  --color-border: #E0E0DE;

  /* Typography — Families */
  --font-display: 'Boathouse', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: Arial, 'Helvetica Neue', Roboto, -apple-system, system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-body: 14px;
  --text-action: 15px;
  --text-lead: 16px;
  --text-headline: 32px;
  --leading-display: 1.1;
  --leading-body: 1.45;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 15px;
  --spacing-md: 20px;
  --spacing-lg: 26px;

  /* Border Radius */
  --radius-button: 4px;
  --radius-overlay: 3.75px;
  --radius-tile: 8px;

  /* Shadow */
  --shadow-float: 0px 30px 70px 0px rgba(0, 0, 0, 0.3);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-orange: #FC5200;
  --color-orange-link: #FC4C01;
  --color-ink: #000000;
  --color-overlay: #0D0C0C;
  --color-overlay-deep: #050505;
  --color-body: #43423F;
  --color-slate: #21211F;
  --color-muted: #64635E;
  --color-link: #0060D0;
  --color-white: #FFFFFF;
  --color-canvas-warm: #F9F8F5;
  --color-field: #FAFAFA;
  --color-border: #E0E0DE;

  /* Typography — Families */
  --font-display: 'Boathouse', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: Arial, 'Helvetica Neue', Roboto, -apple-system, system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-body: 14px;
  --text-action: 15px;
  --text-lead: 16px;
  --text-headline: 32px;
  --leading-display: 1.1;
  --leading-body: 1.45;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 15px;
  --spacing-md: 20px;
  --spacing-lg: 26px;

  /* Border Radius */
  --radius-button: 4px;
  --radius-overlay: 3.75px;
  --radius-tile: 8px;

  /* Shadow */
  --shadow-float: 0px 30px 70px 0px rgba(0, 0, 0, 0.3);
}
```