---
title: "Strava design system"
variant: extended
source: https://www.strava.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/strava-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Strava · Design System

> A warm, direct welcome to the athlete community.

**Theme:** light · **Industry:** health · **Source:** https://www.strava.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Strava pairs a clean signup experience with athletic photography to introduce its activity-tracking community. A restrained neutral palette keeps the page grounded, while orange identifies the brand and prompts signup.

## North star

Let a crisp white signup panel lead, framed by authentic sports imagery and restrained Strava-orange actions.

## Overview

The page uses white as its primary canvas, with a warm off-white footer that gives the lower area a quiet change in tone. Black headings provide clear hierarchy, while muted charcoal carries navigation and supporting text. Strava orange is the strongest interface accent: it appears in the wordmark, signup action, and login links. Blue is reserved for legal links, and fine gray borders define the quieter login and alternate-signup controls. Boathouse is used throughout, with a compact, semibold centered hero heading and readable, restrained supporting copy. The first viewport is arranged as a three-part hero: large sports imagery on both sides frames a white central signup panel. The photography feels natural and active rather than studio-staged; product screens and orange route marks sit within the right-side image. A spacious, pale footer organizes link groups into columns beside app-store badges and social icons.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and central signup panel; also used for text on the orange primary button. |
| Trail Charcoal | `#43423f` | `--color-trail-charcoal` | neutral | Muted navigation and supporting text, including the Features links. |
| Warm Chalk | `#f9f8f5` | `--color-warm-chalk` | surface | Soft off-white footer band beneath the photographic hero. |
| Strava Orange | `#fc5200` | `--color-strava-orange` | brand | Wordmark, email signup button, and login links; the page's primary brand accent. |
| Route Black | `#000000` | `--color-route-black` | neutral | Hero heading and high-emphasis navigation or interface text. |
| Link Blue | `#0060d0` | `--color-link-blue` | accent | Legal and policy links beneath the signup options. |
| Border Stone | `#64635e` | `--color-border-stone` | semantic | Outline around secondary signup buttons and other restrained interface borders. |
| Button Graphite | `#21211f` | `--color-button-graphite` | neutral | Text on secondary signup and login controls. |
| Faint Silver | `#e0e0de` | `--color-faint-silver` | semantic | Subtle outline on the header login control. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f8f5` (Warm Chalk) · `--color-text` → `#000000` (Route Black) · `--color-text-muted` → `#43423f` (Trail Charcoal) · `--color-text-subtle` → `#21211f` (Button Graphite) · `--color-border` → `#64635e` (Border Stone) · `--color-accent` → `#0060d0` (Link Blue) · `--color-accent-2` → `#fc5200` (Strava Orange) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9f8f5` | 19.77:1 | AAA |
| `#43423f` | `#ffffff` | 10.05:1 | AAA |
| `#43423f` | `#f9f8f5` | 9.46:1 | AAA |
| `#21211f` | `#ffffff` | 16.13:1 | AAA |
| `#21211f` | `#f9f8f5` | 15.19:1 | AAA |
| `#0060d0` | `#ffffff` | 5.86:1 | AA |
| `#0060d0` | `#f9f8f5` | 5.52:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Boathouse | `--font-body` | webfont | 400, 600 | Site-wide typeface for headings, navigation, body copy, links, and buttons. | Inter |

- **Boathouse:** Use a clean sans-serif voice; headings and buttons are semibold, with regular-weight navigation and copy. Avoid decorative tracking or forced uppercase.

### Type scale — Custom (ratio ≈ 2.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 600 | 1 | 0 | — | Boathouse | Centered hero title introducing the community-powered motivation proposition. |
| body | 14px | 400 | 1 | 0 | — | Boathouse | Supporting hero copy and explanatory interface text. |
| caption | 12px | 400 | 1.5 | 0 | — | Boathouse | Small signup consent and legal-support copy. |
| button | 16px | 600 | normal | 0 | — | Boathouse | Primary email signup and secondary provider signup labels. |
| nav | 15px | 400 | 1.33 | 0 | — | Boathouse | Header navigation links. |
| link | 12px | 400 | 1.5 | 0 | — | Boathouse | Compact legal and policy links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 20, 24, 26, 32, 48, 50, 64 px.
- Section rhythm 50px · element gap 8px · card padding — · max content width —.

A horizontal header sits above a full-width, three-part hero: photographic panels flank a centered signup column. The hero title and form are center-aligned; navigation and footer content align to the left within their groups. A pale footer band spans the page and separates app downloads and social icons from several link columns. Keep the composition open and comfortably spaced rather than card-dense.

## Shape & elevation

- Radius: button `4px` · xs `4px`
- Shadow `sm` (other): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.15s ease` on interactive elements.

The interface is mostly flat: white and warm off-white areas establish structure without pronounced shadows. Thin gray borders distinguish secondary signup and login controls from the canvas. Keep layering limited to the photographic hero framing the central panel and product imagery embedded in the right-side scene.

## Imagery

Use natural outdoor sports photography with visible athletes and landscape, cropped into broad side panels around the signup content. Images feel documentary and active, with subdued earthy greens and warm light. Product mockups, maps, and orange route marks appear as elements within the right-side imagery, not as the page's main brand palette.

## Components

### Top navigation

White header with orange Strava mark, muted activity and feature links, and a lightly outlined Log In control aligned at the far right.

### Hero signup panel

Centered white content area with a semibold black headline, compact supporting copy, and member login prompt.

### Provider signup buttons

Stack bordered white Google and Apple options above the primary email action; use dark labels and recognizable provider marks.

### Primary signup action

Strava-orange button with white semibold text and a subtle four-pixel corner radius.

### Legal consent

Small centered consent line below signup actions, with blue Terms of Service and Privacy Policy links.

### Footer

Warm off-white footer with brand mark, app-store badges, social icons, and multiple compact link columns.

### Measured component styles

- **Primary button** (“Sign Up With Email”): background #fc5200 · text #ffffff · border 1px solid #fc5200 · radius 4px · padding 10px 50px · 600 16px Boathouse
- **Secondary button** (“Sign Up With Google”): background #fafafa · text #21211f · border 1px solid #64635e · radius 4px · padding 10px 50px · 600 16px Boathouse
- **Link** (“Terms of Service”): transparent background · text #0060d0 · radius 0px · padding 0px · 400 12px Boathouse
- **Navigation item** (“Features”): transparent background · text #43423f · radius 0px · padding 0px · 400 15px Boathouse

## Do

- Keep the main canvas white and the footer warm off-white.
- Use Strava Orange for the primary signup action and brand accents.
- Frame the central signup panel with authentic outdoor sports photography.
- Keep the hero headline centered and visually dominant.
- Use thin gray outlines for secondary controls.
- Reserve blue for legal and policy links.

## Don't

- Do not turn the page into a dark interface.
- Do not use orange for large background bands.
- Do not add decorative gradients or heavy shadows.
- Do not let product mockups replace the athlete photography.
- Do not overfill the footer or signup panel with card treatments.
- Do not apply uppercase styling or exaggerated letter spacing.

## Agent prompt

Build a new Strava-style page with a clean white canvas (#ffffff), a warm off-white footer (#f9f8f5), and a crisp, athletic mood. Use Boathouse or a close sans-serif substitute such as Inter. Set a clear semibold heading in black (#000000), with charcoal (#43423f) for muted navigation and supporting copy. Make Strava Orange (#fc5200) the unmistakable primary action; keep secondary controls white with restrained gray outlines (#64635e) and dark labels (#21211f). Use blue (#0060d0) only for legal-style links. Favor a broad, open layout with a centered content area, authentic sports photography, and simple alignment. Keep borders fine, surfaces flat, and spacing comfortable. Avoid gradients, excessive cards, or decorative effects; make the page feel direct, welcoming, and grounded in real athletes.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header above a three-part hero: outdoor cycling photo, centered signup panel, and athlete/product image; footer link columns below. | Primary email signup, Google and Apple signup options, Existing-member login, Legal consent links | White central panel, Orange primary button, Side-by-side photography, Warm off-white footer band |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/strava-com