Lyft DESIGN.md

Rideshare mobility with human warmth. Lyft's live surfaces serve Rubik as the primary brand font, combining deep magenta-black foundations (#1A1A2E, #0A0A0F) with vibrant pink-magenta brand accents (#EA0B8C, #FF00BF) and clean whites and light grays (#FFFFFF, #F8F8F8) for product surfaces.

1. Visual Theme & Atmosphere

Overall Aesthetic

Lyft feels like approachable mobility with an electric, human personality. The brand system leads with bold magenta energy on dark backgrounds for marketing, then resolves into clean, action-oriented product UI for the core ride experience. The visual language is confident, friendly, and direct — never corporate or cold.

Mood & Feeling

• Human warmth: Friendly and approachable, not robotic or transactional
• Vibrant confidence: Bold pink/magenta energy sets Lyft apart from utilitarian competitors
• Safety and trust: Clean hierarchy and clear CTAs in the core ride flow
• Community spirit: Driver and rider experiences given equal design investment
• Urban energy: Motion, night city imagery, and glowing accent use suggest movement and city life

Design Density

Low-to-medium density in product flows (one primary action per screen), high energy on marketing. The ride request flow is stripped to essentials with a single, unmissable CTA at all times.

Visual Character

• Dark backgrounds on marketing and brand surfaces
• Bright magenta-pink as the signature accent and primary CTA color
• Map as the dominant product surface — UI floats above it
• Rounded, pill-shaped buttons for all primary actions
• Photography features real drivers and riders, warm and candid
• Clear dark/light split: dark for brand, white for in-app

2. Color Palette & Roles

Core Foundation

Brand and Primary Accents

Support Palette

Surface and Border Scale

Dark Brand Scale

3. Typography Rules

Font Stack

css/* Lyft brand and UI font */
--font-brand: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              'Helvetica Neue', sans-serif;

/* System fallback for native app surfaces */
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Roboto', sans-serif;

Type Scale

Font Weights

Typography Philosophy

Lyft typography is bold and approachable. Rubik's rounded geometry gives the brand warmth without childishness. Display headlines on marketing pages use tight tracking and maximum weight. Product UI keeps type clear and large — this is a one-thumb app used while moving.

4. Component Stylings

Buttons

Primary CTA (Pill)

css.button-primary {
  background: #EA0B8C;
  color: #ffffff;
  height: 56px;
  padding: 0 32px;
  border: none;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background 150ms ease, transform 100ms ease;
}

.button-primary:hover {
  background: #FF00BF;
  transform: translateY(-1px);
}

.button-primary:active {
  transform: translateY(0);
}

.button-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(234, 11, 140, 0.35);
}

Secondary Action

css.button-secondary {
  background: #F0F0F0;
  color: #1A1A1A;
  border: none;
  border-radius: 999px;
  height: 48px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
}

.button-secondary:hover {
  background: #E4E4E4;
}

Cards and Bottom Sheets

css.card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.bottom-sheet {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
}

Inputs

css.input {
  background: #F0F0F0;
  color: #1A1A1A;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  transition: border-color 150ms ease, background 150ms ease;
}

.input:focus {
  background: #FFFFFF;
  border-color: #EA0B8C;
  box-shadow: 0 0 0 3px rgba(234, 11, 140, 0.12);
}

Map Interface

• Full-screen map as the base layer for all ride-request flows
• Lyft pink pin for pickup location; gray or blue pin for dropoff
• Route polyline in Lyft pink with rounded line caps
• Driver location marker with car icon and directional heading
• Bottom sheet floats above the map with ride options and CTA

Navigation

• Bottom tab bar on mobile: Home, Activity, Account (icon + label)
• Active tab uses Lyft pink icon color
• Hamburger/profile menu for secondary navigation
• Top bar on detail screens with back arrow and screen title

5. Layout Principles

Spacing Scale

Layout Behavior

• Mobile-first: single-column stacked layout with one primary action per screen
• Map takes the full viewport; UI is overlaid via bottom sheet pattern
• Marketing pages: full-bleed dark sections with centered content, max-width ~1200px
• Ride option list: horizontal scrollable tiles or vertical stacked cards
• Price and ETA given maximum visual weight (largest type, most prominent position)

Whitespace Philosophy

Lyft whitespace is intentional and generous in product flows. Each screen focuses on a single decision. Marketing uses tight, punchy layouts with negative space serving to isolate the bold headline and CTA, not to signal premium positioning.

6. Depth & Elevation

Elevation Strategy

Lyft uses layered floating UI over the map canvas. The primary depth story is bottom sheet elevation against the full-screen map. Marketing surfaces use dark-to-pink gradients for depth rather than shadows.

Shadow Language

css--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-bottom-sheet: 0 -4px 32px rgba(0, 0, 0, 0.12);
--shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.16);
--shadow-cta: 0 8px 24px rgba(234, 11, 140, 0.30);
--shadow-focus: 0 0 0 3px rgba(234, 11, 140, 0.25);

Surface Hierarchy

• Base: map canvas or #F8F8F8 screen background
• Cards and list items: white with soft shadow
• Bottom sheets: white with top-edge shadow, large radius
• Modals: white with strong shadow + dark scrim rgba(0,0,0,0.5)
• Marketing dark sections: #0A0A0F with pink glow accents

7. Do's and Don'ts

Do

• Use the pink pill button as the unmistakable primary action
• Keep product flows to one clear action per screen
• Give price and ETA the largest type weight on ride-selection screens
• Use the map as the hero surface in ride flows — don't obscure it unnecessarily
• Apply bold Rubik type for all marketing headlines

Don't

• Don't use Lyft pink for destructive or error states — reserve it for positive/primary actions
• Don't add decorative complexity to the ride request flow; clarity is the feature
• Don't use thin or light font weights for interactive elements
• Don't design multi-column dense layouts for the mobile product — it's a one-thumb, one-action app
• Don't apply the dark brand treatment to in-app product surfaces; keep those light and clean

8. Responsive Behavior

Breakpoints

Responsive Rules

• The core product experience is mobile-only; desktop is marketing and account management
• Bottom tab navigation collapses into a top navigation bar on desktop/tablet
• Bottom sheets become centered modals on larger screens
• Map interactions on web use standard cursor-based pan/zoom
• Marketing pages use full-bleed sections that adapt to viewport width with centered content columns

9. Agent Prompt Guide

Quick Reference

• Foundation: white/light-gray in-app surfaces; near-black dark brand surfaces for marketing
• Typography: Rubik — bold display, rounded geometry, human and direct
• Shape language: pill buttons (999px radius), 12–16px card radius, 20px bottom sheet radius
• Mood: vibrant rideshare energy — confident, warm, pink-forward, one-action-at-a-time

Prompt Template

textDesign this like Lyft:
- White app surfaces (#FFFFFF, #F8F8F8) for product UI
- Electric magenta-pink (#EA0B8C) for all primary CTAs and key accent use
- Pill-shaped buttons (border-radius: 999px) for every primary action
- Map as the hero canvas; UI floats above via bottom sheet
- Rubik bold for headlines; clean system font fallback for body
- Dark brand marketing sections (#0A0A0F) with pink gradient glow accents
- One primary action per screen — clarity and confidence over density

Avoid

• Muted or pastel versions of the pink — Lyft's accent is vivid and saturated
• Flat corporate layouts without the map-as-canvas spatial metaphor
• Small or thin typography that doesn't work at arm's length on mobile
• Blue as a primary accent (Lyft deliberately uses pink to distinguish from Uber)
• Dense information-heavy layouts in ride flows; keep it one decision at a time