Lyft Design System

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

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

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

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.