---
version: alpha
name: Lyft
website: "https://www.lyft.com"
description: >-
  A two-shade magenta rideshare brand whose web surface pairs a deep cordovan ink ("#1d0c17") with a saturated purple-magenta CTA ("#820076") and a sharper hot-pink highlight ("#cf0090"), wrapped in 48px capsule buttons and 16px card chrome. Type is RebelSansDisplay at 60px for the hero h1 and RebelSansText at 14–36px for everything else, with editorial 4:3 photography of riders and drivers carrying the marketing rhythm instead of gradients or atmospheric backdrops.

seo:
  title: "Lyft Design System for React — Lyft Pink, RebelSans, and 18 components"
  metaDescription: "Lyft's design system as a DESIGN.md file. Purple-magenta #820076, RebelSans display + text, 20 colors, 18 components. For React, Next.js, and AI tools."
  highlights:
    - "Magenta-over-cordovan duet — purple-magenta #820076 carries every primary CTA against a deep #1d0c17 ink that reads warmer than black"
    - "Two-radius geometry — 48px capsule on every pill button and 16px on every card; the system declares only two radii in production CSS"
    - "Lyft Pink as eyebrow voltage — #ff00bf appears only on the lyft-pink subscription wordmark, the rare moment the brand permits a hotter pink"
    - "Twin custom faces — RebelSansDisplay reserved for the 60px hero h1, RebelSansText carries 14px through 36px for every other tier"
    - "Photography over decoration — 4:3 rider, driver, and bike-rack frames inside 16px cards do the work gradients do elsewhere"
  tags:
    - "Travel & Hospitality"
    - "Marketplaces"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Lyft's web surface runs on a magenta-over-cordovan duet. Where most ride-hailing marketing leans on either pure black ink or a flat consumer blue, Lyft anchors every CTA in a saturated purple-magenta (#820076) and lets a deep cordovan text colour (#1d0c17) carry headings and paragraph body — a colour that reads as black at a glance but warms toward wine when you look closer. The hotter Lyft Pink (#ff00bf) is treated as eyebrow voltage rather than a primary, surfacing only on the lyft-pink subscription wordmark and inside one or two highlight icons. The rest of the page is a soft off-white (#f1f0ec) and a strict 48px capsule shape on every interactive element.

    This page packages Lyft's marketing surface into a single DESIGN.md file following the Google Labs spec. Inside: 20 colour tokens grouped into brand, surface, text, and highlight roles; 8 typography tokens spanning RebelSansDisplay 60px headlines down to RebelSansText 14px captions in weights 400, 500, 600, and 700; 9 spacing values on an 8px base; 4 corner radii anchored on the 48px capsule and the 16px card; and 18 components covering buttons, cards, the nav row, FAQ accordions, and the bordered category tile grid.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent renders React components that match Lyft's specific restraint — magenta capsule CTAs on warm off-white, 36px section heads in weight 600, paired-photo cards inside 16px chrome. Or use the tokens directly: every hex, every font stack, every padding value is a quoted string you can paste into Tailwind config or CSS variables. The system is worth studying because it proves a rideshare brand can hold attention with a single magenta voltage and one capsule shape — no gradient, no secondary accent, no chromatic load-bearing beyond the one purple and one pink.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.lyft.com"
      title: "Lyft — official site"
      description: "The marketing surface this spec was extracted from."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Lyft's primary brand color?"
      answer: "Lyft's primary interactive colour is a saturated purple-magenta — #820076 — exposed in CSS as --core-ui-color-brand-interactive and --core-ui-color-purple80. It carries every primary CTA pill (Get a ride, Apply to drive, Sign up to ride) and the active state on category tiles. Lyft Pink (#ff00bf) sits one tier hotter and is reserved for the lyft-pink subscription wordmark; #cf0090 is a stroke-and-icon highlight role. The brand never uses raw red or orange as an accent."
    - id: "typography"
      title: "What typography does Lyft use, and what should I substitute?"
      answer: "Lyft runs two custom faces: RebelSansDisplay at 60px weight 600 for the single hero h1, and RebelSansText at 14–36px weights 400, 500, 600, 700 for every other tier. Both are proprietary. The closest open-source substitutes are Inter weight 600 for the display h1 (with letter-spacing held at 0) and Inter weights 400–700 for the text family. Geist 600 is a viable second option for the display headline."
    - id: "capsule-shape"
      title: "Why is every Lyft button a 48px capsule?"
      answer: "The Lyft marketing surface declares only two radii in production CSS: 48px and 16px. 48px lands on every pill — primary CTAs, secondary outline pills, header sign-in chip. 16px lands on every card — promo cards, FAQ rows, the bordered category tiles. There is no 8px or 12px tier in between; the system is deliberately binary at the radius level, which gives the page a strong rhythm between sharp tiled grids and soft capsule buttons."
    - id: "lyft-pink-vs-purple"
      title: "What's the difference between Lyft Pink and the magenta CTA colour?"
      answer: "Two different roles. Purple-magenta #820076 (--core-ui-color-brand-interactive) is the conversion colour — it fills primary CTA pills and active states. Lyft Pink #ff00bf (--core-ui-color-lyftPink) is the brand voltage reserved for the lyft-pink wordmark on the subscription product band. They are never mixed in the same component. The hotter pink #cf0090 sits between them as a stroke-and-icon highlight."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a React rideshare or marketplace?"
      answer: "Yes — the file is designed to feed Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Lyft's specific restraint (single magenta voltage, 48px capsule geometry, twin custom faces) rather than a generic shadcn theme. You can also reference the tokens directly: every colour, type style, radius, and spacing value is a quoted string you can paste into Tailwind config or CSS variables."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of items documented in Known Gaps: full hover and focus-ring colour combinations, the live map tile style inside the ride-request flow, loading skeleton treatments, and the post-pickup in-app states (rider tracking, driver dashboard, business portal) which live on the native app and authenticated web surfaces rather than the public marketing page captured here."

colors:
  primary: "#820076"
  highlight: "#cf0090"
  lyft-pink: "#ff00bf"
  primary-active: "#9e006d"
  primary-soft: "#ecb1f7"
  ink: "#1d0c17"
  ink-deeper: "#000000"
  ink-secondary: "#473a40"
  hairline: "#b9b2b4"
  hairline-soft: "#e7e5e5"
  canvas: "#ffffff"
  canvas-warm: "#f1f0ec"
  surface-pastel: "#e7e2ff"
  on-primary: "#ffffff"
  on-dark: "#ffffff"
  data-amber: "#362201"
  data-blue: "#00567d"
  data-mint: "#002c16"
  data-purple: "#42003b"
  data-orange: "#ffc999"

typography:
  display-xl:
    fontFamily: "RebelSansDisplay, RebelSansText, system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 66px
  display-lg:
    fontFamily: "RebelSansText, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 45px
  display-md:
    fontFamily: "RebelSansText, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 28px
  body-lg:
    fontFamily: "RebelSansText, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 25px
  body-md:
    fontFamily: "RebelSansText, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
  body-md-strong:
    fontFamily: "RebelSansText, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22px
  body-strong:
    fontFamily: "RebelSansText, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 22px
  body-sm:
    fontFamily: "RebelSansText, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px

rounded:
  none: "0px"
  card: "16px"
  capsule: "48px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "80px"

components:
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "{spacing.base} {spacing.lg}"
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.capsule}"
    padding: "0 {spacing.lg}"
    height: "48px"
  button-primary-hover:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.capsule}"
    padding: "0 {spacing.lg}"
    height: "48px"
  button-sign-in:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md-strong}"
    rounded: "{rounded.capsule}"
    padding: "{spacing.sm} {spacing.base}"
  hero-headline:
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "0"
  body-text:
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0"
  card-promo:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
    padding: "{spacing.xl}"
  card-warm:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
    padding: "{spacing.xl}"
  card-bordered-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline-soft}"
    typography: "{typography.body-md-strong}"
    rounded: "{rounded.card}"
    padding: "{spacing.base}"
  category-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md-strong}"
    rounded: "{rounded.capsule}"
    padding: "{spacing.sm} {spacing.base}"
  faq-row:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md-strong}"
    padding: "{spacing.lg} 0"
  link-inline:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  highlight-mark:
    textColor: "{colors.highlight}"
    typography: "{typography.body-md-strong}"
  lyft-pink-wordmark:
    textColor: "{colors.lyft-pink}"
    typography: "{typography.display-md}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "{spacing.xl} {spacing.lg}"

---


## Overview

Lyft's marketing surface is the warmest two-magenta system in rideshare — the conversion CTA is a saturated purple-magenta (`{colors.primary}` `#820076`), the highlight role one notch hotter at `#cf0090`, and the brand reserves a pure Lyft Pink (`{colors.lyft-pink}` `#ff00bf`) for a single wordmark moment. Where most rideshare and on-demand marketing pages anchor on either a pure black (Uber) or a flat consumer blue (Curb, Bolt), Lyft commits to magenta and lets the entire interface read warm.

**Magenta-as-conversion**: every primary CTA — "Get a ride", "Apply to drive", "Sign up to ride" — is a 48px capsule filled with `#820076` over white text. The hotter `#cf0090` shows up only on stroke-and-icon highlight roles (`--core-ui-color-stroke-highlight`, `--core-ui-color-icon-highlight`), and the brand's signature `#ff00bf` is reserved for the lyft-pink subscription wordmark inside its dedicated promo band. The discipline mirrors Uber's two-colour duet — same restraint, different voltage.

**Cordovan-not-black**: text and borders run on `{colors.ink}` `#1d0c17`, a near-black with measurable cordovan in the hue channel (OKLCH hue 341°). At a glance it reads as black; against a `#000000` swatch it warms toward wine. The choice carries through every CSS variable mapped to text, stroke, and icon roles. Pure `#000000` exists in the system but is reserved for `--core-ui-color-alwaysBlack` — the rare component-specific override, never the body text.

**Key Characteristics:**
- A single-magenta CTA hierarchy: `{colors.primary}` `#820076` capsule for every primary; `{colors.canvas}` `#ffffff` capsule with `{colors.ink}` border for secondary; no third tier.
- Two radii only — `{rounded.capsule}` 48px on every interactive surface and `{rounded.card}` 16px on every card. No 8px or 12px intermediate tier.
- Twin custom faces, twin roles: `RebelSansDisplay` reserved for the 60px hero h1; `RebelSansText` carries everything from 14px body up to 36px section heads.
- Editorial 4:3 photography of riders, drivers, and bikes inside 16px card chrome is the only consistent decoration — no gradients, no atmospheric backdrops.
- A warm off-white `{colors.canvas-warm}` `#f1f0ec` (`--core-ui-color-brand-off-white`) breaks up white-on-white bands; the polarity is the rhythm, not shadow tiers.
- A signature category tile row ("Wait & Save / Standard / Priority Pickup / Extra Comfort") rendered as 16px bordered tiles with a thumbnail and one-line label.

## Colors

### Brand & Accent
- **Lyft Magenta** (`{colors.primary}` — `#820076`): frequency 12. Used as bg (8), text (2), border (2). The conversion colour — exposed in CSS as `--core-ui-color-brand-interactive`, `--core-ui-color-purple80`, `--core-ui-color-surface-selected`. Every primary CTA pill, every active category tile. The brand's load-bearing voltage.
- **Highlight Pink** (`{colors.highlight}` — `#cf0090`): frequency 12. Used as text (6), border (6). The stroke-and-icon highlight role (`--core-ui-color-stroke-highlight`, `--core-ui-color-text-highlight`, `--core-ui-color-pink60`). Reserved for accent strokes and icon highlights — never as a CTA background.
- **Lyft Pink** (`{colors.lyft-pink}` — `#ff00bf`): frequency 6. Used as text (3), border (3). The brand's purest pink, exposed only as `--core-ui-color-lyftPink`. Appears on the lyft-pink subscription wordmark and one or two adjacent marks. Treated as eyebrow voltage, not a CTA colour.
- **Primary Active** (`{colors.primary-active}` — `#9e006d`): the darker pressed-state magenta — `--core-ui-color-pink70`, `--core-ui-color-pink80`. Used on hover and pressed states of the primary capsule.
- **Primary Soft** (`{colors.primary-soft}` — `#ecb1f7`): the pastel tint — `--core-ui-color-purple20`. A backdrop wash used inside data visualisation and rare disabled states.

### Surface
- **Canvas** (`{colors.canvas}` — `#ffffff`): frequency 67. Used as bg (11), text (31), border (23). The dominant page background — `--core-ui-color-background-primary`, `--core-ui-color-surface-primary`. Carries roughly two-thirds of the visible page.
- **Canvas Warm** (`{colors.canvas-warm}` — `#f1f0ec`): frequency 3. Used as bg (3). The brand's off-white — `--core-ui-color-brand-off-white`, `--core-ui-color-background-neutral`. The polarity-flip surface that breaks white-on-white rhythm.
- **Hairline Soft** (`{colors.hairline-soft}` — `#e7e5e5`): frequency 1. The border tone for category tile chrome — `--core-ui-color-brand-pastel-gray`, `--core-ui-color-gray10`.
- **Hairline** (`{colors.hairline}` — `#b9b2b4`): frequency 1. The mid-gray border on category pills — `--core-ui-color-brand-gray300`, `--core-ui-color-gray30`.
- **Surface Pastel** (`{colors.surface-pastel}` — `#e7e2ff`): the indigo-tinted pastel reserved for data-visualisation backdrops — `--core-ui-color-brand-pastel-purple`.

### Text
- **Cordovan Ink** (`{colors.ink}` — `#1d0c17`): frequency 1131. Used as text (571), border (560). Not black, not gray — a very dark cordovan that adds warmth to every heading, paragraph, and hairline. Exposed across 50+ CSS variables including `--core-ui-color-text-primary`, `--core-ui-color-stroke-primary`, `--core-ui-color-icon-primary`, `--core-ui-color-brand-midnight`, `--core-ui-color-brand-black-cherry`. Carries the entire text layer.
- **Ink Deeper** (`{colors.ink-deeper}` — `#000000`): frequency 72. Used as text (31), border (31), shadow (10). The system's true black — `--core-ui-color-alwaysBlack`. Reserved for component-specific overrides; never the body text.
- **Ink Secondary** (`{colors.ink-secondary}` — `#473a40`): the inverse-surface tone — `--core-ui-color-surface-primary-inverse`, `--core-ui-color-gray80`. Used on the rare dark band footer or inverse component.

### Data Visualisation
- **Data Amber** (`{colors.data-amber}` — `#362201`), **Data Blue** (`{colors.data-blue}` — `#00567d`), **Data Mint** (`{colors.data-mint}` — `#002c16`), **Data Purple** (`{colors.data-purple}` — `#42003b`), **Data Orange** (`{colors.data-orange}` — `#ffc999`): the data-intensity scale exposed under `--core-ui-color-data-intensity-*`. Reserved for charting components in the authenticated business portal — not used on the marketing page surface captured here.

## Typography

### Font Family
Two custom faces carry the marketing surface:

1. **RebelSansDisplay** — reserved exclusively for the 60px hero h1 ("The world awaits"). Weight 600 only; never appears below 60px; never carries body copy.
2. **RebelSansText** — the working text family. Covers 14px captions through 36px section heads in weights 400, 500, 600, 700. Line-heights are explicit pixel values (22, 25, 28, 45) rather than unitless multipliers.

The two faces share family DNA but never overlap roles — the display face never carries a section head; the text face never carries the hero.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 60px | 600 | 66px | Hero h1 ("The world awaits") — the single RebelSansDisplay moment. |
| `{typography.display-lg}` | 36px | 600 | 45px | Section heads ("Shift into earnings mode", "How you get there matters"). |
| `{typography.display-md}` | 22px | 600 | 28px | Sub-card headings, large pull-quotes. |
| `{typography.body-lg}` | 18px | 500 | 25px | Card titles, medium-emphasis label. |
| `{typography.body-md}` | 16px | 400 | 22px | Default paragraph body, button labels. |
| `{typography.body-md-strong}` | 16px | 500 | 22px | Bold inline body, FAQ question labels. |
| `{typography.body-strong}` | 16px | 700 | 22px | Strong-tag emphasis inside paragraph copy. |
| `{typography.body-sm}` | 14px | 400 | 20px | Captions, secondary metadata, footer body. |

### Principles
- **Sentence-case voice.** No all-caps headlines anywhere on the marketing surface.
- **Weight 600 is the heaviest display weight.** The system never reaches 700 at display sizes — that weight is scoped to inline `<strong>` at 16px body.
- **Pixel line-heights, not unitless.** Lyft declares lineHeight in absolute px values across the type stack, which keeps headlines visually anchored to the 8px spacing grid.
- **Two faces, two roles.** RebelSansDisplay for the single hero h1; RebelSansText for everything else.

### Note on Font Substitutes
Both faces are proprietary. Open-source substitutes:
- **Display** — *Inter* weight 600 with letter-spacing held at 0 is the closest. *Geist* weight 600 is the second-best option.
- **Text** — *Inter* weights 400, 500, 600, 700 match the geometric width and x-height. *Plus Jakarta Sans* is a softer alternative if the brand wants a less neutral feel.

## Layout

### Spacing System
- **Base unit**: 8px. Most captured values are direct multiples (8, 16, 24, 32, 48, 80), with one 2px micro-token for hairline offsets.
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 80px.
- **Section padding**: marketing bands sit at `{spacing.3xl}` 80px top/bottom (the most-frequent capture at count 4), with inner content insetting at `{spacing.lg}` 24px horizontal.
- **Card interior padding**: promo cards inset at `{spacing.xl}` 32px; bordered category tiles at `{spacing.base}` 16px.
- **Inline gap**: 8px (`{spacing.sm}`) is the most-frequent spacing value on the page (count 40); used between sibling chips, label rows, and inline icon-plus-text pairs.

### Grid & Container
- **Max width**: ~1200px container, centred with horizontal gutters of `{spacing.lg}` 24px on desktop.
- **Column patterns**:
  - Promo cards: image-left + content-right (alternating sides between bands) at desktop, image-above + content-below at mobile.
  - Category tiles ("Wait & Save / Standard / Priority Pickup / Extra Comfort"): 4-up bordered tile row at desktop, 2-up at mobile.
  - FAQ rows: full-width single-column, divider between rows.

### Whitespace Philosophy
Card-to-card spacing carries the rhythm. Between two stacked promo cards there is roughly an `{spacing.3xl}` 80px gutter; inside a card the headline + paragraph + CTA stack is tight at `{spacing.sm}` 8px between siblings. Warm off-white bands `{colors.canvas-warm}` `#f1f0ec` punctuate the white-canvas rhythm — the polarity shift carries depth where the system has no progressive shadow tiers.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Level 0 — Flat | No shadow, no border. | Default — most cards rely on hairline-of-canvas contrast against the warm off-white. |
| Level 1 — Hairline | 1px `{colors.hairline-soft}` `#e7e5e5` border. | The four bordered category tiles in the "How you get there matters" row. |
| Level 2 — Pill outline | 1px `{colors.hairline}` `#b9b2b4` border. | Category pills, secondary capsule buttons. |

### Decorative Depth
- **Warm-band polarity flip**: the brand shifts from `{colors.canvas}` `#ffffff` to `{colors.canvas-warm}` `#f1f0ec` between bands. The polarity flip is the depth cue.
- **Photography as in-card depth**: every promo card has a single 4:3 editorial photograph anchoring one column. The image's visual weight reads as the card's elevation.
- **Capsule geometry as micro-depth**: `{rounded.capsule}` 48px applied at varying button heights creates a stack of nested capsules that reads as visual hierarchy without shadow.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed bands, raw image edges, hero text. |
| `{rounded.card}` | 16px | Every card — promo cards, FAQ rows when wrapped, bordered category tiles. |
| `{rounded.capsule}` | 48px | Every interactive element — primary CTA, secondary outline pill, sign-in chip, category pill. |
| `{rounded.full}` | 9999px | Circular icon containers and avatar frames. |

The system declares only two production radii — 48px and 16px. There is no 8px or 12px intermediate tier. The binary scale gives the page a strong rhythm between sharp tiled grids and capsule buttons.

### Photography Geometry
- **Editorial photography**: 4:3 landscape inside promo cards; 16:9 for full-width showcase frames. Hard-edge rectangles; never tilted.
- **Rider / driver portraits**: 4:5 portrait crop; framed inside `{rounded.card}` 16px card chrome.
- **Map tiles**: not captured on the marketing surface; live inside the authenticated ride-request flow.

## Components

### Buttons

**`button-primary`** — the canonical magenta capsule, the brand's conversion target.
- Background `{colors.primary}` `#820076`, text `{colors.on-primary}` `#ffffff`, label set in `{typography.body-md}` 16px / 400, padding `0 {spacing.lg}` (24px horizontal), height 48px, shape `{rounded.capsule}` 48px. Ground truth: the "Get a ride" CTA on the hero.

**`button-primary-hover`** — the darker pressed-state magenta.
- Background `{colors.primary-active}` `#9e006d` (`--core-ui-color-pink70`), text `{colors.on-primary}`. Only the background changes; geometry inherits from `button-primary`.

**`button-secondary`** — the white-fill outline capsule paired with the magenta primary.
- Background `{colors.canvas}` `#ffffff`, text `{colors.ink}` `#1d0c17`, 1px border `{colors.ink}`, label in `{typography.body-md}`, height 48px, shape `{rounded.capsule}`.

**`button-sign-in`** — the smaller header sign-in capsule.
- Background `{colors.canvas}`, text `{colors.ink}`, label in `{typography.body-md-strong}`, padding `{spacing.sm} {spacing.base}`, shape `{rounded.capsule}`.

### Cards & Containers

**`card-promo`** — the canonical 2-column promo card with photography on one side and copy on the other.
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}` 32px, shape `{rounded.card}` 16px. Headline in `{typography.display-lg}` 36px.

**`card-warm`** — the warm-off-white promo card used inside `{colors.canvas-warm}` bands.
- Background `{colors.canvas-warm}` `#f1f0ec`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.card}`. Same chrome as `card-promo`, just polarity-flipped to warm.

**`card-bordered-tile`** — the bordered category tile ("Wait & Save", "Standard", "Priority Pickup", "Extra Comfort").
- Background `{colors.canvas}`, text `{colors.ink}`, 1px border `{colors.hairline-soft}` `#e7e5e5`, padding `{spacing.base}`, shape `{rounded.card}`. Each tile carries a thumbnail icon plus a one-line label in `{typography.body-md-strong}`.

### Typography Surfaces

**`hero-headline`** — the single RebelSansDisplay moment.
- Text `{colors.ink}`, `{typography.display-xl}` 60px / 600 / 66px line-height. Only used once per page on the hero h1.

**`section-heading`** — the recurring 36px section head.
- Text `{colors.ink}`, `{typography.display-lg}` 36px / 600 / 45px. Used on every band heading ("Shift into earnings mode", "How you get there matters").

**`body-text`** — the default paragraph.
- Text `{colors.ink}`, `{typography.body-md}` 16px / 400 / 22px.

### Navigation

**`nav-bar`** — the sticky top nav row.
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.base} {spacing.lg}`. Body labels in `{typography.body-md}`.

**`nav-link`** — the link row inside `nav-bar`.
- Text `{colors.ink}`, set in `{typography.body-md}` 16px / 400. Lyft does not bold its nav row.

### Marketing Surfaces

**`category-pill`** — the standalone outlined pill used in product chooser rows.
- Background `{colors.canvas}`, text `{colors.ink}`, 1px border `{colors.hairline}` `#b9b2b4`, label in `{typography.body-md-strong}`, padding `{spacing.sm} {spacing.base}`, shape `{rounded.capsule}`.

**`faq-row`** — the FAQ accordion row.
- Background `{colors.canvas}`, text `{colors.ink}`, question label in `{typography.body-md-strong}`, padding `{spacing.lg} 0`. No card chrome — hairline dividers between rows.

**`link-inline`** — the magenta inline link inside paragraph copy.
- Text `{colors.primary}` `#820076`, body in `{typography.body-md}`. The only place the brand magenta carries text rather than fill.

**`highlight-mark`** — the highlight-pink emphasis mark on icons and strokes.
- Text `{colors.highlight}` `#cf0090`, label in `{typography.body-md-strong}`. Reserved for accent strokes and icon highlight roles.

**`lyft-pink-wordmark`** — the Lyft Pink subscription wordmark.
- Text `{colors.lyft-pink}` `#ff00bf`, set in `{typography.display-md}` 22px / 600. The single moment the brand's purest pink surfaces.

**`footer`** — the deep cordovan footer band.
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl} {spacing.lg}`. Body in `{typography.body-sm}`; column eyebrows in `{typography.body-md-strong}`.

## Do's and Don'ts

### Do
- Reserve `{colors.primary}` `#820076` for every primary CTA capsule. One magenta capsule per visible viewport is the brand's whole conversion story.
- Use `{rounded.capsule}` 48px on every interactive element. The 48px capsule is the brand's geometric signature.
- Render cards in `{rounded.card}` 16px. Promo cards, FAQ rows, bordered category tiles share this single radius.
- Set the hero h1 in RebelSansDisplay 60px weight 600 — and only the hero h1. Every other headline uses RebelSansText.
- Use `{colors.canvas-warm}` `#f1f0ec` bands to break up white-on-white rhythm. The polarity shift is the depth cue.
- Anchor every promo card with a 4:3 editorial photograph; never use generic stock illustration.

### Don't
- Don't use Lyft Pink `#ff00bf` as a CTA fill. It is reserved for the lyft-pink subscription wordmark only — using it on a button breaks the three-tier magenta hierarchy (`#820076` primary → `#cf0090` highlight → `#ff00bf` wordmark).
- Don't drop the cordovan ink `#1d0c17` in favour of pure `#000000` for body text. The `#000000` token (`--core-ui-color-alwaysBlack`) is a component-specific override at 72 occurrences — `#1d0c17` carries the 1131-occurrence text layer.
- Don't introduce an 8px or 12px corner radius. The brand declares only 48px and 16px in production; intermediate radii flatten the binary rhythm.
- Don't set any headline at weight 700. Display sizes top out at weight 600; weight 700 is scoped to inline `<strong>` at 16px body.
- Don't add letter-spacing to RebelSansDisplay or RebelSansText. The brand holds `letter-spacing: normal` across every captured signature.
- Don't render the secondary capsule without a 1px `{colors.ink}` border. The outline-only state is what separates `button-secondary` from `button-sign-in`.
- Don't reach for the data-intensity hexes (`#00567d`, `#002c16`, `#42003b`) on the marketing surface — they belong to the authenticated business portal chart palette.

## Known Gaps

- **Hover & focus states**: full focus-ring colour combinations on the magenta capsule and the outline capsule are partially captured via `{colors.primary-active}` `#9e006d` but the dashed-vs-filled focus ring is not extracted.
- **Loading skeletons**: no skeleton patterns are visible on the marketing surface.
- **Live map tiles**: the ride-request flow's map background uses Lyft's custom map style with magenta route lines; tile colours not captured here.
- **In-app post-pickup states**: rider tracking, driver dashboard, and the business portal screens live on the native iOS / Android surfaces and the authenticated web rather than the public marketing page.
- **Form validation states**: error / success / warning combinations for the sign-up and ride-request forms were not visible on the captured surface.