W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Lyft
Lyft is a North American mobility company — rides, bikes, scooters — founded in 2012. The brand voice is friendly, optimistic, and human-scaled; the visual identity centers on Lyft Pink (#FF00BF), a saturated near-fluorescent magenta introduced with the 2019 rebrand and tied historically to the fuzzy pink "carstache" that marked early Lyft vehicles. Lyft Pink carries the wordmark and primary CTAs against a near-white canvas with deep ink type. The proprietary Lyft Pro typeface sets headlines and brand chrome on lyft.com and design.lyft.com.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/lyft/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/lyft/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Lyft
Lyft is a North American mobility company — rides, bikes, scooters — founded in 2012. The brand voice is friendly, optimistic, and human-scaled; the visual identity centers on Lyft Pink (#FF00BF), a saturated near-fluorescent magenta introduced with the 2019 rebrand and tied historically to the fuzzy pink "carstache" that marked early Lyft vehicles. Lyft Pink carries the wordmark and primary CTAs against a near-white canvas with deep ink type. The proprietary Lyft Pro typeface sets headlines and brand chrome on lyft.com and design.lyft.com.
Tags: lyft, mobility, ridesharing, brand, magenta, pink, light-first
Atoms
Palette
Lyft · [email protected] · Proprietary — All Rights Reserved
Lyft's brand palette is anchored on the signature Lyft Pink (#FF00BF) — a saturated, near-fluorescent magenta that has carried the brand since the 2019 rebrand and that ties back to the brand's earliest visual asset, the fuzzy pink "carstache." The pink reads against a near-white canvas with a deep ink for type, supported by a neutral ramp. The Lyft Pro typeface (the brand's custom corporate face) sets headlines and brand chrome.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
lyft-pink |
Lyft Pink | #FF00BF |
lyft-pink-pressed |
Lyft Pink Pressed | #D6009E |
lyft-pink-legacy |
Lyft Pink (Legacy) | #EA0B8C |
lyft-ink |
Lyft Ink | #11111F |
lyft-charcoal |
Lyft Charcoal | #2C2C36 |
lyft-graphite |
Lyft Graphite | #6E6E78 |
lyft-mist |
Lyft Mist | #E4E4E8 |
lyft-fog |
Lyft Fog | #F4F4F6 |
lyft-white |
Lyft White | #FFFFFF |
lyft-success |
Lyft Success | #0E8C5A |
lyft-warning |
Lyft Warning | #F2A93B |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
lyft-white |
#FFFFFF |
surface |
lyft-fog |
#F4F4F6 |
surface-elevated |
lyft-white |
#FFFFFF |
text-primary |
lyft-ink |
#11111F |
text-secondary |
lyft-charcoal |
#2C2C36 |
text-tertiary |
lyft-graphite |
#6E6E78 |
primary |
lyft-pink |
#FF00BF |
primary-hover |
lyft-pink-pressed |
#D6009E |
accent |
lyft-pink |
#FF00BF |
accent-hover |
lyft-pink-pressed |
#D6009E |
success |
lyft-success |
#0E8C5A |
warning |
lyft-warning |
#F2A93B |
error |
lyft-pink-pressed |
#D6009E |
border |
lyft-mist |
#E4E4E8 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
lyft-ink |
#11111F |
surface |
lyft-charcoal |
#2C2C36 |
surface-elevated |
lyft-graphite |
#6E6E78 |
text-primary |
lyft-white |
#FFFFFF |
text-secondary |
lyft-mist |
#E4E4E8 |
text-tertiary |
lyft-graphite |
#6E6E78 |
primary |
lyft-pink |
#FF00BF |
primary-hover |
lyft-pink-pressed |
#D6009E |
accent |
lyft-pink |
#FF00BF |
accent-hover |
lyft-pink-pressed |
#D6009E |
success |
lyft-success |
#0E8C5A |
warning |
lyft-warning |
#F2A93B |
error |
lyft-pink-pressed |
#D6009E |
border |
lyft-charcoal |
#2C2C36 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
lyft-pink |
#FF00BF |
on-identity |
lyft-white |
#FFFFFF |
primary |
lyft-pink |
#FF00BF |
primary-hover |
lyft-pink-pressed |
#D6009E |
accent |
lyft-pink |
#FF00BF |
accent-hover |
lyft-pink-pressed |
#D6009E |
mark |
lyft-pink |
#FF00BF |
success |
lyft-success |
#0E8C5A |
warning |
lyft-warning |
#F2A93B |
error |
lyft-pink-pressed |
#D6009E |
background-light |
lyft-white |
#FFFFFF |
background-dark |
lyft-ink |
#11111F |
surface-light |
lyft-fog |
#F4F4F6 |
surface-dark |
lyft-charcoal |
#2C2C36 |
text-primary-light |
lyft-ink |
#11111F |
text-primary-dark |
lyft-white |
#FFFFFF |
text-secondary-light |
lyft-charcoal |
#2C2C36 |
text-tertiary-light |
lyft-graphite |
#6E6E78 |
border-light |
lyft-mist |
#E4E4E8 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: lyft-pink, lyft-white, lyft-ink
- forbidden: lyft-pink-legacy, lyft-warning, lyft-success, lyft-graphite
The Lyft wordmark renders in Lyft Pink on light surfaces, in white on dark surfaces, or in Lyft Ink for monochrome applications. The pre-2019 legacy pink (#EA0B8C) is retained for historical reference only and must not stand in for the current brand pink. Functional warning/success hues are never wordmark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace
Lyft's wordmark is rendered flat in the signature pink with generous clearspace. Gradients, shadows, recolorings, or busy-background placements compromise the saturated magenta's optical impact, which is the brand's primary recognition asset.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Lyft Ink (#11111F) on Lyft White (#FFFFFF) gives ~19:1 — well above the WCAG AA 4.5:1 floor for body text. The rule codifies the floor for any new foreground/background pairing on Lyft surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Lyft Pink (#FF00BF) on Lyft White must clear 3:1 at large-text and UI-component sizes (WCAG AA-large) so the primary CTA remains perceptible. The saturated magenta is well above the floor against white but the rule encodes the expectation explicitly.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link, subtle-divider
Lyft Pink is reserved for the wordmark, the mark, and the primary call to action. Using it inside body copy or for subtle dividers dilutes the signature accent and weakens the visual hierarchy the brand voice depends on.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Lyft's mobility surfaces are used in motion and across a wide range of devices; AA is the floor for any text on any Lyft surface.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
The Lyft Pro headline cuts most commonly seen on lyft.com and design.lyft.com sit in the Medium (500) through Bold (700) band. Lighter weights compromise the friendly-but- confident voice; heavier weights are not in the standard kit.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: lyft-white, lyft-fog, lyft-ink
- doesNotPairWith: lyft-warning, lyft-success, lyft-pink-legacy
Lyft Pink reads cleanest against white, the lightest fog neutral, or the deep ink dark canvas. Pairing it adjacent to the warm warning amber, the green success, or the legacy pink introduces a chromatic conflict that fights for attention without resolving into hierarchy.
Provenance
- Source: https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License:
Proprietary — All Rights Reserved - Attribution: Lyft, Inc. — Lyft, the Lyft wordmark, Lyft Pink, and Lyft Pro are trademarks of Lyft, Inc. The signature pink (#FF00BF) is verified via the simple-icons brand database (v13.0.0). design.lyft.com is Lyft's publicly available design-system surface and informs the role mappings here.
- Imported:
2026-05-19 - Notes: Lyft Pro is a proprietary corporate typeface and is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. The supporting neutral and functional swatches in the referenced palette are authored complements faithful to design.lyft.com rather than lifted verbatim from a single Lyft-published token table; see the palette atom notes.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Lyft
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Lyft
A clear hierarchy in Lyft's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ lyft-pink #FF00BF accent-hover
→ lyft-pink-pressed #D6009E background-dark
→ lyft-ink #11111F background-light
→ lyft-white #FFFFFF border-light
→ lyft-mist #E4E4E8 error
→ lyft-pink-pressed #D6009E identity
→ lyft-pink #FF00BF mark
→ lyft-pink #FF00BF on-identity
→ lyft-white #FFFFFF primary
→ lyft-pink #FF00BF primary-hover
→ lyft-pink-pressed #D6009E success
→ lyft-success #0E8C5A surface-dark
→ lyft-charcoal #2C2C36 surface-light
→ lyft-fog #F4F4F6 text-primary-dark
→ lyft-white #FFFFFF text-primary-light
→ lyft-ink #11111F text-secondary-light
→ lyft-charcoal #2C2C36 text-tertiary-light
→ lyft-graphite #6E6E78 warning
→ lyft-warning #F2A93B Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from lyft)
Light mode (14 roles)
accent
→ lyft-pink accent-hover
→ lyft-pink-pressed background
→ lyft-white border
→ lyft-mist error
→ lyft-pink-pressed primary
→ lyft-pink primary-hover
→ lyft-pink-pressed success
→ lyft-success surface
→ lyft-fog surface-elevated
→ lyft-white text-primary
→ lyft-ink text-secondary
→ lyft-charcoal text-tertiary
→ lyft-graphite warning
→ lyft-warning Dark mode (14 roles)
accent
→ lyft-pink accent-hover
→ lyft-pink-pressed background
→ lyft-ink border
→ lyft-charcoal error
→ lyft-pink-pressed primary
→ lyft-pink primary-hover
→ lyft-pink-pressed success
→ lyft-success surface
→ lyft-charcoal surface-elevated
→ lyft-graphite text-primary
→ lyft-white text-secondary
→ lyft-mist text-tertiary
→ lyft-graphite warning
→ lyft-warning Rules (8 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed lyft-pink, lyft-white, lyft-ink forbidden lyft-pink-legacy, lyft-warning, lyft-success, lyft-graphite The Lyft wordmark renders in Lyft Pink on light surfaces, in white on dark surfaces, or in Lyft Ink for monochrome applications. The pre-2019 legacy pink (#EA0B8C) is retained for historical reference only and must not stand in for the current brand pink. Functional warning/success hues are never wordmark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace Lyft's wordmark is rendered flat in the signature pink with generous clearspace. Gradients, shadows, recolorings, or busy-background placements compromise the saturated magenta's optical impact, which is the brand's primary recognition asset.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Lyft Ink (#11111F) on Lyft White (#FFFFFF) gives ~19:1 — well above the WCAG AA 4.5:1 floor for body text. The rule codifies the floor for any new foreground/background pairing on Lyft surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Lyft Pink (#FF00BF) on Lyft White must clear 3:1 at large-text and UI-component sizes (WCAG AA-large) so the primary CTA remains perceptible. The saturated magenta is well above the floor against white but the rule encodes the expectation explicitly.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link, subtle-divider Lyft Pink is reserved for the wordmark, the mark, and the primary call to action. Using it inside body copy or for subtle dividers dilutes the signature accent and weakens the visual hierarchy the brand voice depends on.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Lyft's mobility surfaces are used in motion and across a wide range of devices; AA is the floor for any text on any Lyft surface.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 The Lyft Pro headline cuts most commonly seen on lyft.com and design.lyft.com sit in the Medium (500) through Bold (700) band. Lighter weights compromise the friendly-but- confident voice; heavier weights are not in the standard kit.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith lyft-white, lyft-fog, lyft-ink doesNotPairWith lyft-warning, lyft-success, lyft-pink-legacy Lyft Pink reads cleanest against white, the lightest fog neutral, or the deep ink dark canvas. Pairing it adjacent to the warm warning amber, the green success, or the legacy pink introduces a chromatic conflict that fights for attention without resolving into hierarchy.
Provenance
- Source
- https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License
Proprietary — All Rights Reserved- Attribution
- Lyft, Inc. — Lyft, the Lyft wordmark, Lyft Pink, and Lyft Pro are trademarks of Lyft, Inc. The signature pink (#FF00BF) is verified via the simple-icons brand database (v13.0.0). design.lyft.com is Lyft's publicly available design-system surface and informs the role mappings here.
- Imported
2026-05-19- Notes
- Lyft Pro is a proprietary corporate typeface and is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. The supporting neutral and functional swatches in the referenced palette are authored complements faithful to design.lyft.com rather than lifted verbatim from a single Lyft-published token table; see the palette atom notes.