W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Uber
Uber is a global mobility platform — rides, delivery, freight — founded in 2009. The brand identity centers on Uber Black: a flat, unadorned black wordmark set in the proprietary Uber Move typeface, dropped on white space with disciplined neutral chrome. The 2018 rebrand stripped the identity to its essentials: monochrome, geometric, durable. Base design system (base.uber.com) is Uber's public component library and codifies the same monochrome spine across the rider, driver, and marketing surfaces. The brand's accent is its absence — there is no signature chromatic color; black against white IS the brand.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/uber/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/uber/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.
Uber
Uber is a global mobility platform — rides, delivery, freight — founded in 2009. The brand identity centers on Uber Black: a flat, unadorned black wordmark set in the proprietary Uber Move typeface, dropped on white space with disciplined neutral chrome. The 2018 rebrand stripped the identity to its essentials: monochrome, geometric, durable. Base design system (base.uber.com) is Uber's public component library and codifies the same monochrome spine across the rider, driver, and marketing surfaces. The brand's accent is its absence — there is no signature chromatic color; black against white IS the brand.
Tags: uber, mobility, ridesharing, delivery, brand, monochrome, base-design-system
Atoms
Palette
Uber · [email protected] · Proprietary — All Rights Reserved
Uber's corporate palette is built on a disciplined monochrome spine: Uber Black (#000000) is the primary brand color, paired with white surfaces and a deep neutral ramp. The Base design system that powers Uber's marketing and rider/driver apps treats black as the dominant chrome, with white space and a small neutral scale doing the structural work. There is no chromatic "signature accent" in the corporate identity — when accent is needed, the product surfaces lean on functional greens and reds rather than a brand-owned hue.
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 |
|---|---|---|
uber-black |
Uber Black | #000000 |
uber-white |
Uber White | #FFFFFF |
uber-gray-50 |
Uber Gray 50 | #F6F6F6 |
uber-gray-100 |
Uber Gray 100 | #EEEEEE |
uber-gray-200 |
Uber Gray 200 | #E2E2E2 |
uber-gray-300 |
Uber Gray 300 | #CBCBCB |
uber-gray-500 |
Uber Gray 500 | #757575 |
uber-gray-700 |
Uber Gray 700 | #3F3F3F |
uber-gray-900 |
Uber Gray 900 | #1F1F1F |
uber-green |
Uber Green | #0E8345 |
uber-red |
Uber Red | #E11900 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
uber-white |
#FFFFFF |
surface |
uber-gray-50 |
#F6F6F6 |
surface-elevated |
uber-white |
#FFFFFF |
text-primary |
uber-black |
#000000 |
text-secondary |
uber-gray-700 |
#3F3F3F |
text-tertiary |
uber-gray-500 |
#757575 |
primary |
uber-black |
#000000 |
primary-hover |
uber-gray-900 |
#1F1F1F |
accent |
uber-black |
#000000 |
accent-hover |
uber-gray-900 |
#1F1F1F |
success |
uber-green |
#0E8345 |
warning |
uber-red |
#E11900 |
error |
uber-red |
#E11900 |
border |
uber-gray-200 |
#E2E2E2 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
uber-black |
#000000 |
surface |
uber-gray-900 |
#1F1F1F |
surface-elevated |
uber-gray-700 |
#3F3F3F |
text-primary |
uber-white |
#FFFFFF |
text-secondary |
uber-gray-200 |
#E2E2E2 |
text-tertiary |
uber-gray-300 |
#CBCBCB |
primary |
uber-white |
#FFFFFF |
primary-hover |
uber-gray-50 |
#F6F6F6 |
accent |
uber-white |
#FFFFFF |
accent-hover |
uber-gray-50 |
#F6F6F6 |
success |
uber-green |
#0E8345 |
warning |
uber-red |
#E11900 |
error |
uber-red |
#E11900 |
border |
uber-gray-700 |
#3F3F3F |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
uber-black |
#000000 |
on-identity |
uber-white |
#FFFFFF |
primary |
uber-black |
#000000 |
primary-hover |
uber-gray-900 |
#1F1F1F |
accent |
uber-black |
#000000 |
accent-hover |
uber-gray-900 |
#1F1F1F |
mark |
uber-black |
#000000 |
success |
uber-green |
#0E8345 |
warning |
uber-red |
#E11900 |
error |
uber-red |
#E11900 |
background-light |
uber-white |
#FFFFFF |
background-dark |
uber-black |
#000000 |
surface-light |
uber-gray-50 |
#F6F6F6 |
surface-dark |
uber-gray-900 |
#1F1F1F |
text-primary-light |
uber-black |
#000000 |
text-primary-dark |
uber-white |
#FFFFFF |
text-secondary-light |
uber-gray-700 |
#3F3F3F |
text-tertiary-light |
uber-gray-500 |
#757575 |
border-light |
uber-gray-200 |
#E2E2E2 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
colorChoice → logo.wordmark.fill
- allowed: uber-black, uber-white
- forbidden: uber-green, uber-red, uber-gray-500, uber-gray-700
The Uber wordmark renders in Uber Black on light surfaces or Uber White on dark surfaces. The functional green and red on product surfaces are NOT brand-accent colors and must never fill the wordmark. Gray tones are interactive-state values, not wordmark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace
The 2018 rebrand resolved Uber's mark to a flat, unadorned wordmark. Gradients, shadows, and recolorings reintroduce the visual noise the rebrand deliberately removed. Per Uber's brand discipline, the wordmark stands on its own with generous clearspace.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Uber Black (#000000) on Uber White (#FFFFFF) gives 21:1 — the maximum contrast achievable. Uber's monochrome identity makes AAA the natural floor rather than the AA minimum; new foreground/background pairings on Uber surfaces should clear 7:1.
contextRestriction → roles.colors.warning
- forbiddenContexts: brand-accent, call-to-action, marketing-hero
- allowedContexts: error-state, destructive-action
Uber Red (#E11900) is a functional color reserved for destructive and error states on product surfaces. Using it as a brand accent or marketing CTA fill conflicts with Uber's monochrome identity and creates a false-error signal in the product.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Uber's mobility surfaces are used in motion, often outdoors, on a variety of devices; AA is the floor for any text on any Uber surface.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700
Uber Move ships in Regular (400), Medium (500), and Bold (700) cuts for marketing and product headlines. Lighter and heavier extremes are not part of the standard Base design system specimen.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: uber-white, uber-gray-50, uber-gray-100
- doesNotPairWith: uber-green, uber-red
The Uber Black identity reads cleanest against white or the lightest neutral surfaces. Placing it adjacent to the functional success or error hues introduces a chromatic conflict and dilutes Uber's deliberate monochrome voice.
Provenance
- Source: https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License:
Proprietary — All Rights Reserved - Attribution: Uber Technologies, Inc. — Uber, the Uber wordmark, and Uber Move are trademarks of Uber Technologies, Inc. Uber's brand black (#000000) is verified via the simple-icons brand database (v13.0.0). The Base design system at base.uber.com is Uber's publicly available design-system surface and is the reference for the role mappings here.
- Imported:
2026-05-19 - Notes: Uber Move 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 neutral ramp in the referenced palette is authored to mirror Base design system conventions rather than copied verbatim from a single Uber-published token table; see the palette atom notes for detail.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Uber
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.
Uber
A clear hierarchy in Uber'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
→ uber-black #000000 accent-hover
→ uber-gray-900 #1F1F1F background-dark
→ uber-black #000000 background-light
→ uber-white #FFFFFF border-light
→ uber-gray-200 #E2E2E2 error
→ uber-red #E11900 identity
→ uber-black #000000 mark
→ uber-black #000000 on-identity
→ uber-white #FFFFFF primary
→ uber-black #000000 primary-hover
→ uber-gray-900 #1F1F1F success
→ uber-green #0E8345 surface-dark
→ uber-gray-900 #1F1F1F surface-light
→ uber-gray-50 #F6F6F6 text-primary-dark
→ uber-white #FFFFFF text-primary-light
→ uber-black #000000 text-secondary-light
→ uber-gray-700 #3F3F3F text-tertiary-light
→ uber-gray-500 #757575 warning
→ uber-red #E11900 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from uber)
Light mode (14 roles)
accent
→ uber-black accent-hover
→ uber-gray-900 background
→ uber-white border
→ uber-gray-200 error
→ uber-red primary
→ uber-black primary-hover
→ uber-gray-900 success
→ uber-green surface
→ uber-gray-50 surface-elevated
→ uber-white text-primary
→ uber-black text-secondary
→ uber-gray-700 text-tertiary
→ uber-gray-500 warning
→ uber-red Dark mode (14 roles)
accent
→ uber-white accent-hover
→ uber-gray-50 background
→ uber-black border
→ uber-gray-700 error
→ uber-red primary
→ uber-white primary-hover
→ uber-gray-50 success
→ uber-green surface
→ uber-gray-900 surface-elevated
→ uber-gray-700 text-primary
→ uber-white text-secondary
→ uber-gray-200 text-tertiary
→ uber-gray-300 warning
→ uber-red Rules (7 typed constraints)
error · 5 rules
colorChoice logo.wordmark.fill allowed uber-black, uber-white forbidden uber-green, uber-red, uber-gray-500, uber-gray-700 The Uber wordmark renders in Uber Black on light surfaces or Uber White on dark surfaces. The functional green and red on product surfaces are NOT brand-accent colors and must never fill the wordmark. Gray tones are interactive-state values, not wordmark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace The 2018 rebrand resolved Uber's mark to a flat, unadorned wordmark. Gradients, shadows, and recolorings reintroduce the visual noise the rebrand deliberately removed. Per Uber's brand discipline, the wordmark stands on its own with generous clearspace.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Uber Black (#000000) on Uber White (#FFFFFF) gives 21:1 — the maximum contrast achievable. Uber's monochrome identity makes AAA the natural floor rather than the AA minimum; new foreground/background pairings on Uber surfaces should clear 7:1.
contextRestriction roles.colors.warning forbiddenContexts brand-accent, call-to-action, marketing-hero allowedContexts error-state, destructive-action Uber Red (#E11900) is a functional color reserved for destructive and error states on product surfaces. Using it as a brand accent or marketing CTA fill conflicts with Uber's monochrome identity and creates a false-error signal in the product.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Uber's mobility surfaces are used in motion, often outdoors, on a variety of devices; AA is the floor for any text on any Uber surface.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 500, 700 Uber Move ships in Regular (400), Medium (500), and Bold (700) cuts for marketing and product headlines. Lighter and heavier extremes are not part of the standard Base design system specimen.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith uber-white, uber-gray-50, uber-gray-100 doesNotPairWith uber-green, uber-red The Uber Black identity reads cleanest against white or the lightest neutral surfaces. Placing it adjacent to the functional success or error hues introduces a chromatic conflict and dilutes Uber's deliberate monochrome voice.
Provenance
- Source
- https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License
Proprietary — All Rights Reserved- Attribution
- Uber Technologies, Inc. — Uber, the Uber wordmark, and Uber Move are trademarks of Uber Technologies, Inc. Uber's brand black (#000000) is verified via the simple-icons brand database (v13.0.0). The Base design system at base.uber.com is Uber's publicly available design-system surface and is the reference for the role mappings here.
- Imported
2026-05-19- Notes
- Uber Move 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 neutral ramp in the referenced palette is authored to mirror Base design system conventions rather than copied verbatim from a single Uber-published token table; see the palette atom notes for detail.