At a glance
24tokens
9type steps
2radius steps
14pxspacing base
Lyft, in one page
Lyft's iOS app is a full-screen map with a friendly card floating over it. There is no tab bar — the map *is* the app. A live, edge-to-edge map fills the entire viewport; everything else (the "Where to?" search, the ride-type picker, the ETA, the driver card) lives in a rounded bottom sheet that slides up from below. The design philosophy is "the world is the canvas, the controls come to you": you should always see where you are, and the interface arrives as a soft, springy panel exactly when you need to make a choice.
The accent is Lyft Pink (#FF00BF) — a vivid, unmistakable magenta lifted from the brand mark. It is reserved for the single most important action on screen: the "Select Lyft" / "Confirm" CTA, the active ride-type selection, the pickup pin, and key brand moments. Everything else is a calm, near-neutral system: white surfaces, soft gray dividers, near-black text. The pink is loud precisely because the rest of the UI is quiet — when it appears, it means "this is the thing to tap." Lyft ships a full dark mode (#11111F canvas) for night rides, and the pink holds its punch on both.
Typography is Inter with a deliberately *rounded* geometric feel — soft, approachable, friendly (Lyft's brand voice is warm, not corporate). Weights run 400 / 600 / 700. The hierarchy is sheet-driven: the sheet title ("Choose a ride", "Confirm pickup") sits at 22pt weight 700, ride-type names at 17pt weight 700, prices at 17pt weight 700 right-aligned, the big "Where to?" prompt at 20pt weight 600, and a recurring 14pt secondary gray for ETAs, descriptions, and capacity ("4 seats · 3 min away"). Generously rounded corners (16-28pt) everywhere reinforce the soft, pill-and-bubble personality.
Key Characteristics:
- Full-screen edge-to-edge map — no tab bar; the map is the primary surface
- Rounded bottom sheet — every control arrives in a soft, springy panel that slides up
- Lyft Pink (
#FF00BF) as the single accent — Confirm CTA, active ride-type, pickup pin - Very rounded geometry — 16-28pt radii everywhere; pill buttons; bubble cards
- "Where to?" search bar — the persistent entry point floating over the map
- Ride-type selector cards — Wait & Save / Standard / XL / Lux Black, each with icon + price + ETA
- Pickup pin — a pink map pin with a soft drop shadow and a precise tip
- ETA strings — "3 min away", "12:45 arrival" in calm secondary gray
- Full dark mode (
#11111F) for night rides — pink holds on both themes - Rounded bottom-sheet spring — the panel's signature springy entrance and detent snapping
Do's and don'ts
Do
- Make the map full-screen and edge-to-edge — it is the primary surface
- Put every control in a rounded bottom sheet that slides up with a spring
- Use Lyft Pink (
#FF00BF) only for the primary CTA, active ride-type, and the pickup pin - Use very rounded geometry — 28pt sheet corners, 16pt buttons, pill map controls
- Render the ride-type selector as a list with vehicle icon, name, sub, ETA, and a right-aligned tabular price
- Give the selected ride-type a pink-tint wash + 2pt pink rounded border
- Support a full dark mode (
#11111Fcanvas) for night rides — keep pink at full strength - Use tabular figures for prices and ETAs so the price column aligns
- Keep secondary info (ETA, capacity) in calm gray so name + price lead
Don't
- Don't add a bottom tab bar — Lyft navigates via map + sheet, not tabs
- Don't cover the map with opaque chrome — controls float or live in the sheet
- Don't use pink for decoration, dividers, or body text — it's the single action color
- Don't use sharp corners — the soft, rounded personality is core to the brand
- Don't make the sheet appear without the spring — the bouncy entrance is the signature feel
- Don't use proportional figures for fares — the right-aligned price column will misalign
- Don't let the destination pin be pink — pink is the pickup; destination is near-black
- Don't drop the dark theme — night rides are a primary use case
- Don't crowd the map with more than pins + the active route polyline
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Lyft design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- The accent is Lyft Pink: #ff00bf
- Lyft Pink: #ff00bf
- Pink Pressed: #d500a0
- Pink Tint: #ffe5f7
- Canvas White: #ffffff
- Surface: #f4f4f7
- Surface Deep: #e9e9ef
- Divider: #e5e5ea
- Text Primary: #11111f
- Text Secondary: #6b6b7b
Type:
- families: Inter, Numerals, Fallback Stack, SF Pro Rounded
- scale: 11, 12, 13, 14, 15, 17, 18, 20, 22
- weights: 400, 600, 700
Shape:
- radius: 14, 16
- elevation: Pickup pin — a pink map pin with a soft drop shadow and a precise tip | Background: `#FFFFFF` (light) / `#1C1C2B` (dark) with a soft shadow | Circular, 44pt, white (light) / dark-surface (dark) with soft shadow
Spacing: 14
Rules:
- Make the map full-screen and edge-to-edge — it is the primary surface
- Put every control in a rounded bottom sheet that slides up with a spring
- Use Lyft Pink (`#FF00BF`) only for the primary CTA, active ride-type, and the pickup pin
- Use very rounded geometry — 28pt sheet corners, 16pt buttons, pill map controls
- Render the ride-type selector as a list with vehicle icon, name, sub, ETA, and a right-aligned tabular price
- Give the selected ride-type a pink-tint wash + 2pt pink rounded border
Avoid:
- Don't add a bottom tab bar — Lyft navigates via map + sheet, not tabs
- Don't cover the map with opaque chrome — controls float or live in the sheet
- Don't use pink for decoration, dividers, or body text — it's the single action color
- Don't use sharp corners — the soft, rounded personality is core to the brand
- Don't make the sheet appear without the spring — the bouncy entrance is the signature feel
- Don't use proportional figures for fares — the right-aligned price column will misalign
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Lyft Pink (
#FF00BF): Primary CTA ("Select Lyft", "Confirm"), active ride-type selection, pickup pin, brand moments. - Pink Pressed (
#D500A0): Active/pressed state for the pink CTA. - Pink Tint (
#FFE5F7): Light wash behind the selected ride-type row and pink confirmation chips (light mode).
Canvas & Text — Light
- Canvas White (
#FFFFFF): Sheet background, cards, primary surfaces. - Surface (
#F4F4F7): Grouped backgrounds, search field fill, segmented track, skeletons. - Surface Deep (
#E9E9EF): Pressed state on surface, inactive segments. - Divider (
#E5E5EA): Hairline dividers between sheet rows and sections. - Text Primary (
#11111F): Sheet titles, ride-type names, prices, primary UI text — near-black ink. - Text Secondary (
#6B6B7B): ETAs, descriptions, capacity, metadata. - Text Tertiary (
#9A9AA8): Disabled labels, very low-emphasis captions.
Canvas & Text — Dark
- Dark Canvas (
#11111F): Sheet background, primary surfaces at night. - Dark Surface (
#1C1C2B): Grouped backgrounds, search field fill, segmented track. - Dark Surface Deep (
#26263A): Pressed state on dark surface. - Dark Divider (
#2C2C40): Hairline dividers in dark mode. - Dark Text Primary (
#FFFFFF): Sheet titles, ride-type names, prices. - Dark Text Secondary (
#A0A0B4): ETAs, descriptions, metadata. - Pink Tint Dark (
#33102B): Selected ride-type wash on dark.
Map
- Route Line (
#FF00BF): The active trip route polyline drawn on the map (pink). - Pickup Pin (
#FF00BF): The pickup location marker. - Destination Pin (
#11111F): The drop-off marker (near-black for contrast against pink pickup).
Semantic
- Success Green (
#00A862): Trip-confirmed state, payment success. - Rating Gold (
#FFB400): Driver star rating fill. - Warning Amber (
#F5A623): Surge / "prices are higher", limited availability. - Error Red (
#E5484D): Payment failures, ride-cancel errors.
Type scaleRead the full spec
Font Family
- Primary:
Inter(with a rounded, friendly geometric character — Lyft's brand voice) - Numerals: Inter tabular figures for prices, ETAs, fare estimates (
font-variant-numeric: tabular-nums) - Fallback Stack:
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Sheet Title | Inter | 22pt | 700 | 1.2 | -0.3pt | "Choose a ride", "Confirm pickup" |
| Where To Prompt | Inter | 20pt | 600 | 1.25 | -0.2pt | The big "Where to?" search prompt |
| Ride-Type Name | Inter | 17pt | 700 | 1.25 | -0.1pt | "Standard", "Lux Black", "Wait & Save" |
| Price | Inter | 17pt | 700 | 1.2 | 0pt | Fare estimate, right-aligned, tabular |
| Body | Inter | 15pt | 400 | 1.45 | 0pt | Descriptions, trip detail copy |
| Button (Primary) | Inter | 17pt | 700 | 1.0 | 0pt | Pink "Select Lyft", "Confirm" |
| Driver Name | Inter | 18pt | 700 | 1.2 | -0.1pt | On the en-route driver card |
| Meta / ETA | Inter | 14pt | 400 | 1.3 | 0pt | "3 min away", "4 seats", "12:45 arrival" |
| Ride-Type Sub | Inter | 13pt | 400 | 1.3 | 0pt | "Affordable rides, all to yourself" |
| Badge | Inter | 11pt | 700 | 1.2 | 0.3pt | "FASTEST", "VALUE", "PRIORITY" |
| Caption | Inter | 12pt | 400 | 1.3 | 0pt | Fine print, fare-breakdown labels |
| Pin Label | Inter | 13pt | 700 | 1.0 | 0pt | Floating label on map pins / ETA bubble |
Principles
- Sheet-driven hierarchy: The biggest type is the sheet title; there are no hero headlines because the map is the hero — type guides the decision in the panel
- Friendly, rounded tone: Inter is chosen for its approachable geometry; pair with
SF Pro Roundedas the system fallback to keep the soft personality - Weights at 400 / 600 / 700: Regular for body and ETAs, semibold for the "Where to?" prompt, bold for titles, ride-type names, prices, and the CTA
- Tabular figures for fares: Prices, ETAs, and fare breakdowns use tabular Inter so the right-aligned price column stays aligned across ride types
- Quiet secondary gray: ETAs, capacity, and descriptions sit in
#6B6B7B(or#A0A0B4on dark) so the ride-type name and price lead
Components and layoutRead the full spec
Buttons
Primary CTA ("Select Lyft" / "Confirm pickup" / "Confirm")
- Background:
#FF00BF - Text:
#FFFFFF, Inter 17pt weight 700 - Height: 56pt (full-width sheet CTA)
- Corner radius: 16pt (soft, not full-pill — the sheet CTA is a rounded rect)
- Pressed: background
#D500A0, scale 0.98 - Disabled: background
#E5E5EA(light) /#26263A(dark), text tertiary
Secondary / Neutral ("Edit", "Add a stop")
- Background:
#F4F4F7(light) /#1C1C2B(dark) - Text:
#11111F(light) /#FFFFFF(dark), Inter 16pt weight 600 - Padding: 14pt vertical, 24pt horizontal
- Corner radius: 16pt
- Pressed: surface-deep
Pill Button (map overlay — "Recenter", "Safety")
- Background:
#FFFFFF(light) /#1C1C2B(dark) with a soft shadow - Text/icon:
#11111F/#FFFFFF - Shape: full pill (radius 500pt), 40pt tall, floats over the map
- Pressed: subtle scale 0.96
Icon Button (map controls — locate, layers, back)
- Circular, 44pt, white (light) / dark-surface (dark) with soft shadow
- Glyph 20pt
#11111F/#FFFFFF - Floats over the map at the screen edges
Cards & Containers
Bottom Sheet (the core container)
- Background:
#FFFFFF(light) /#11111F(dark) - Top corners: 28pt radius (very rounded — the signature soft panel)
- Grab handle: 36pt × 4pt rounded bar,
#E5E5EA/#2C2C40, centered, 8pt from top - Detents: collapsed (peek), medium (ride list), large (full)
- Shadow: large soft upward shadow so it floats above the map
- Slides up with a spring; snaps between detents
Ride-Type Selector Card / Row
- Layout: leading vehicle illustration (~56pt) → name + capacity/ETA sub → trailing price
- Height: ~72pt
- Selected:
#FFE5F7(light) /#33102B(dark) wash, 2pt#FF00BFrounded border (16pt radius), name and price weight 700 - Unselected: transparent, 1pt
#E5E5EAdivider between rows - Tap: row springs subtly, selection ring animates in
- Optional badge ("FASTEST", "VALUE") as a small pill near the name
"Where to?" Search Bar
- Floating rounded bar over the map (or top of the collapsed sheet)
- Background:
#FFFFFF(light) /#1C1C2B(dark), soft shadow - Height: 56pt, corner radius 16pt
- Leading: a small pink square/dot accent (saved-place dot) or
magnifyingglass - Text: "Where to?" Inter 20pt weight 600
#6B6B7B
Driver / En-Route Card
- Appears in the sheet once a driver is matched
- Driver avatar (56pt circle) + name (18pt weight 700) + rating (gold star + number) + vehicle/plate
- Big rounded "Contact" / "Share trip" pill actions
- ETA bubble pinned on the map showing "3 min"
Map Pins
- Pickup pin: Lyft Pink teardrop with a white center dot, soft drop shadow, precise tip
- Destination pin: near-black teardrop, same silhouette
- Vehicle markers: small rounded car glyphs that move along the route
Navigation
No Tab Bar — Map + Sheet Model
- The app has no bottom tab bar. Primary navigation is: full-screen map + a bottom sheet whose detents and contents change by trip state (search → choose ride → confirm pickup → en route → rate).
- A hamburger/avatar button floats top-left over the map for the menu (account, history, payment).
- Back/dismiss is a circular icon button top-left within flows.
Sheet State Progression
- Idle: collapsed sheet with "Where to?" + saved places
- Choose a ride: medium sheet, ride-type list, pink "Select Lyft" CTA
- Confirm pickup: map centers on pickup pin, sheet shows address + "Confirm pickup"
- En route: driver card, ETA, route polyline on map
- Rate: post-trip rating + tip in the sheet
Input Fields
Destination Search Field (expanded)
- Background:
#F4F4F7(light) /#1C1C2B(dark) - Height: 52pt, corner radius 14pt
- Leading dot accent (pink for "pickup", dark for "destination") in a vertical from/to stack
- Placeholder: Inter 16pt weight 400 secondary
- Focus: 2pt
#FF00BFborder
Saved-Place Row
- Leading rounded icon chip (Home / Work / star), label + address
- 56pt tall, full-row tappable, divider between rows
Distinctive Components
Ride-Type Selector Sheet
- The signature decision surface. A vertically scrolling list of ride options inside the bottom sheet: Wait & Save, Standard, XL, Lux Black (and others).
- Each row: vehicle illustration, name (17pt weight 700), one-line description (13pt secondary), capacity + ETA ("4 seats · 3 min"), and a right-aligned tabular price (17pt weight 700).
- The selected row gets the pink-tint wash + 2pt pink rounded border; the others stay flat.
- A persistent pink "Select [Type]" CTA at the bottom updates its label to the chosen ride.
- Switching selection springs the ring from the old row to the new with a light haptic.
Rounded Bottom-Sheet Spring
- The sheet enters and snaps between detents with a spring (response ~0.45, damping ~0.85) — overshooting slightly then settling, giving Lyft its signature soft, bouncy panel feel.
- Dragging the grab handle resists past the large detent and snaps to the nearest detent on release.
Pickup Pin Drop
- When "Confirm pickup" appears, the pink pin drops onto the map with a small bounce and a soft shadow that scales with the drop — a tactile "you are here" moment.
Map ETA Bubble
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Sheet medium detent shows ~3 ride types; smaller vehicle illustrations |
| iPhone 13/14/15 | 390pt | Standard sheet detents; ~4 ride types visible at medium |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the floating top-left menu button |
| iPhone 15/16 Pro Max | 430pt | Larger sheet, ~5 ride types visible; bigger map viewport |
| iPad | 768pt+ | Sheet becomes a fixed left rail panel over a full-bleed map; ride list in the rail |
Dynamic Type
- Sheet title, ride-type names, body: full scale
- Prices and ETAs: scale but stay tabular and right-aligned
- Badges and pin labels: fixed (layout-sensitive)
- "Where to?" prompt: scales to a max, never wraps
Orientation
- Map + sheet flow: portrait-locked on iPhone
- iPad: supports landscape with the rail-panel + full map layout
Touch Targets
- Primary CTA: 56pt tall, full sheet width
- Ride-type rows: full-row tappable, ~72pt
- Map overlay icon buttons / pills: 44pt / 40pt minimum
- Grab handle: small visually but a generous ~44pt drag zone
- Saved-place rows: 56pt, full-row tappable
Safe Area Handling
- Top: floating menu + map controls respect the safe area and Dynamic Island
- Bottom: the sheet's content and CTA respect the home indicator; collapsed peek clears it
- The map renders behind the safe areas (full-bleed) with controls inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-lyft {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #11111f;
--heading-color: #11111f;
--link-color: #d700a1;
--link-hover-color: #a4007b;
--border-color: #d4d4d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(17,17,31,0.06);
--card-hover-shadow: 0 6px 18px rgba(17,17,31,0.12);
--header-bg: #11111f;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #64646d;
--button-bg: #ff00bf;
--button-text-color: #000000;
--button-hover-bg: #cc0099;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f1f1f2;
--button-secondary-text-color: #11111f;
--button-secondary-hover-bg: #e2e2e4;
--button-secondary-border: 1px solid #d4d4d7;
--prompt-bg: #f3f3f4;
--prompt-text-color: #11111f;
--base-font: var(--font-inter);
--heading-font: var(--font-helvetica);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- grammarly 78.9%
- happn 77.5%
- clubhouse 77.3%
- coffee meets bagel 74.2%
- revolut 73.8%
Where this came from
- Source document
ios/design-md/travel/lyft/DESIGN.md· 20.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.