Strava

# Strava Design System

## Tokens — Colors

| Token | Value | Usage |
|-------|-------|-------|
| `--color-primary` | `#FC4C02` | Primary brand orange, buttons, logo, accents |
| `--color-primary-hover` | `#E34402` | Primary button hover state |
| `--color-secondary` | `#5B21B6` | Illustrations, decorative elements |
| `--color-accent-beige` | `#E5DCC3` | Secondary illustration elements |
| `--color-background` | `#FFFFFF` | Primary background |
| `--color-background-dark` | `#0F0F0F` | Dark mode background, subscription page |
| `--color-background-gray` | `#F7F7F7` | Subtle background variation |
| `--color-surface` | `#FFFFFF` | Cards, modals, elevated surfaces |
| `--color-overlay` | `rgba(0, 0, 0, 0.6)` | Modal backdrop |
| `--color-text-primary` | `#242428` | Headings, primary text |
| `--color-text-secondary` | `#6B6B6B` | Body text, descriptions |
| `--color-text-inverse` | `#FFFFFF` | Text on dark backgrounds |
| `--color-link` | `#0073E6` | Hyperlinks |
| `--color-link-hover` | `#005BB5` | Link hover state |
| `--color-border` | `#E5E5E5` | Borders, dividers |
| `--color-border-dark` | `#D4D4D4` | Emphasized borders |
| `--color-gradient-start` | `#DC2626` | Subscription page gradient start |
| `--color-gradient-end` | `#000000` | Subscription page gradient end |

## Tokens — Typography

**Font Families:**
- Primary: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`
- Headings: Same as primary (likely with custom font loading)

**Type Scale:**

| Token | Size | Line Height | Weight | Usage |
|-------|------|-------------|--------|-------|
| `--text-xs` | `12px` | `16px` | 400 | Fine print, captions |
| `--text-sm` | `14px` | `20px` | 400 | Small body text, labels |
| `--text-base` | `16px` | `24px` | 400 | Body text, paragraphs |
| `--text-lg` | `18px` | `28px` | 400 | Large body text |
| `--text-xl` | `20px` | `28px` | 600 | Subheadings |
| `--text-2xl` | `24px` | `32px` | 700 | Section headings |
| `--text-3xl` | `30px` | `36px` | 700 | Card headings |
| `--text-4xl` | `36px` | `40px` | 700 | Page titles |
| `--text-5xl` | `48px` | `56px` | 700 | Hero headings |
| `--text-6xl` | `60px` | `68px` | 700 | Large hero text |

**Font Weights:**
- Regular: 400
- Medium: 500
- Semibold: 600
- Bold: 700
- Heavy: 800

## Tokens — Spacing

Base unit: `4px`

| Token | Value |
|-------|-------|
| `--space-1` | `4px` |
| `--space-2` | `8px` |
| `--space-3` | `12px` |
| `--space-4` | `16px` |
| `--space-5` | `20px` |
| `--space-6` | `24px` |
| `--space-8` | `32px` |
| `--space-10` | `40px` |
| `--space-12` | `48px` |
| `--space-16` | `64px` |
| `--space-20` | `80px` |
| `--space-24` | `96px` |

## Tokens — Radii

| Token | Value | Usage |
|-------|-------|-------|
| `--radius-sm` | `4px` | Small elements, tags |
| `--radius-md` | `6px` | Buttons, inputs |
| `--radius-lg` | `8px` | Cards, larger elements |
| `--radius-xl` | `12px` | Modals, prominent cards |
| `--radius-full` | `9999px` | Pills, circular elements |

## Tokens — Shadows

| Token | Value |
|-------|-------|
| `--shadow-sm` | `0 1px 2px rgba(0, 0, 0, 0.05)` |
| `--shadow-md` | `0 4px 6px rgba(0, 0, 0, 0.1)` |
| `--shadow-lg` | `0 10px 15px rgba(0, 0, 0, 0.1)` |
| `--shadow-xl` | `0 20px 25px rgba(0, 0, 0, 0.15)` |

## Tokens — Borders

| Token | Value |
|-------|-------|
| `--border-width` | `1px` |
| `--border-width-thick` | `2px` |

## Components

### Button
- **Primary:** Orange background (`#FC4C02`), white text, 6px radius, 12px vertical padding, 24px horizontal padding
- **Secondary:** White background, dark border, dark text, same sizing
- **Social:** White background, subtle border, icon + text, same sizing
- **Sizes:** Small (8px/16px padding), Medium (12px/24px), Large (16px/32px)

### Navigation
- **Horizontal bar:** White background, links with medium weight, dropdown indicators
- **Logo:** Orange Strava wordmark, left-aligned
- **Actions:** Sign Up (orange), Log In (text link)

### Modal/Dialog
- **Container:** White background, rounded corners (12px), max-width ~600px, padding 48px
- **Backdrop:** Dark overlay with 60% opacity
- **Title:** Large bold heading (24-30px)
- **Body:** Regular text with comfortable line height
- **Actions:** Orange primary button, text links

### Card
- **Surface:** White background, subtle shadow, rounded corners (8px)
- **Padding:** 24-32px
- **Border:** Optional 1px light gray

### Timeline/Stepper
- **Vertical line:** 2px gray connecting items
- **Icons:** Circular or square with orange accent
- **Content:** Heading + description per step

### Footer
- **Layout:** Multi-column grid
- **Logo:** Orange Strava logo
- **Links:** Organized by category, medium gray text
- **Social:** Black icons with hover states
- **App badges:** Standard iOS/Android store badges

## Layout Patterns

### Hero Section
- Full-width background image or solid color
- Centered content with max-width ~800px
- Large heading + subheading + CTA buttons
- Vertical spacing: 80-120px padding

### Navigation Bar
- Fixed/sticky at top
- Flex layout: logo left, nav center, actions right
- Height: ~60-70px
- Horizontal padding: 24-32px

### Content Grid
- Max-width: 1200-1400px
- Centered with auto margins
- Responsive columns (1, 2, 3, 4 based on viewport)
- Gap: 24-32px

### Footer
- Full-width with dark or light background
- Multi-column layout (4-5 columns on desktop)
- Centered max-width container
- Vertical padding: 48-64px