Uber Base

---
name: uber-base
description: Apply the Uber Base visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Uber Base, mentions Base design system, Base Web, baseweb, or describes black primary buttons, black-and-white monochrome core, Uber Move typography — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Uber Base Design System

Uber's stark monochrome design system: black #000000 primary actions on white, the full gray ramp doing most of the work, Uber Move typography, 8px-radius controls, and color used almost exclusively as semantic signal (blue #276ef1 links, red #de1135 negative, green #0e8345 positive) — a brutalist-adjacent minimalism built for a global mobility brand.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Uber Base.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Base design system, Base Web, baseweb, Uber design), or describes its traits: black primary buttons; black-and-white monochrome core; Uber Move typography; color only as semantic signal; flat surfaces with hairline grays; big bold left-aligned headlines.

## Design tokens

### Color palette

- backgroundPrimary — white: `#ffffff` (--color-bg)
- gray50 — backgroundSecondary, input fills, section bands: `#f3f3f3` (--color-surface)
- contentPrimary — pure black: `#000000` (--color-text)
- contentSecondary — gray600: `#727272` (--color-text-muted)
- primary interactive color — Base's primary actions are black, not a hue: `#000000` (--color-accent)
- blue600 — links, selected states, 'accent' semantic: `#276ef1` (--color-accent-blue)
- gray200 — borderOpaque hairlines: `#dddddd` (--color-border)
- red600 — errors, destructive: `#de1135` (--color-negative)
- green600 — success: `#0e8345` (--color-positive)
- yellow600 — warning content (backgrounds use yellow200/300 tints): `#9f6402` (--color-warning)

### Typography

- Display / headings: Plus Jakarta Sans (fallback: -apple-system, Helvetica Neue, Arial, sans-serif) (ideal: Uber Move, premium — use Plus Jakarta Sans as the free substitute)
- Body: Inter (fallback: -apple-system, Helvetica Neue, Arial, sans-serif) (ideal: Uber Move Text, premium — use Inter as the free substitute)
- Type scale: 1.2 ratio, base 16px — computed steps: 16px / 19px / 23px / 28px / 33px / 40px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.1, letter-spacing -0.01em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 16, 24, 32, 40, 48, 64 — Base's sizing scale runs on 4px steps (scale0 2px upward); product surfaces are comfortable rather than dense — 16px component padding, 24–32px between blocks, with marketing pages jumping to 64px+ section gaps.
- Border radius: sm 4px, md 8px, lg 12px, pill 999px — Base border tokens: radius200 4px, radius300 8px, radius400 12px; buttons and inputs default to 8px, checkboxes stay square (0px), and newer brand surfaces use pill chips.
- Border treatment: 1px solid #dddddd — Hairline gray200 borders separate list rows and cards; inputs prefer a filled gray50 background with a 2px black border appearing on focus.

### Shadows

- shadow-400: `0 1px 4px hsla(0, 0%, 0%, 0.16)` — lighting.shadow400 — subtle raise on cards and app bars
- shadow-500: `0 2px 8px hsla(0, 0%, 0%, 0.16)` — lighting.shadow500 — floating controls, map pins
- shadow-600: `0 4px 16px hsla(0, 0%, 0%, 0.16)` — lighting.shadow600 — popovers and menus
- shadow-700: `0 8px 24px hsla(0, 0%, 0%, 0.16)` — lighting.shadow700 — modals and bottom sheets

### Layout

- Max content width: 1280px
- Mobile-first flows: single column, full-width black CTA pinned at the bottom of the sheet
- Marketing/web uses a 12-column grid with big left-aligned Uber Move headlines and hard photo crops
- Maps are content: UI floats over the map as white cards with shadow400–600
- List rows (48–56px) with leading icons and trailing chevrons are the workhorse pattern

### Effects

- Photography and maps supply all the color; the UI chrome stays ink-on-paper monochrome
- Overlay tokens (inset black at 4–24% alpha) darken pressed states instead of hue shifts

### Motion

- Easing: cubic-bezier(0.2, 0.8, 0.4, 1); durations 100ms / 200ms / 400ms
- Bottom sheets and side panels slide with decisive ease-out
- Pressed states use instant overlay darkening (overlay100–300 tokens), not scale effects
- Map camera moves are the longest animations; UI itself stays quick

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f3f3f3;
  --color-text: #000000;
  --color-text-muted: #727272;
  --color-accent: #000000;
  --color-accent-blue: #276ef1;
  --color-border: #dddddd;
  --color-negative: #de1135;
  --color-positive: #0e8345;
  --color-warning: #9f6402;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-shadow-400: 0 1px 4px hsla(0, 0%, 0%, 0.16);
  --shadow-shadow-500: 0 2px 8px hsla(0, 0%, 0%, 0.16);
  --shadow-shadow-600: 0 4px 16px hsla(0, 0%, 0%, 0.16);
  --shadow-shadow-700: 0 8px 24px hsla(0, 0%, 0%, 0.16);
  --border-default: 1px solid #dddddd;
  --font-display: "Plus Jakarta Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.5;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0.8, 0.4, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White top bar, black wordmark or back arrow, right-aligned avatar; product apps favor bottom tab bars with filled-black active icons
- **Hero:** Marketing hero: oversized Uber Move Bold headline in black on white (or reversed on full-bleed photo), sub-line in gray600, one black pill/rect CTA — no gradients ever
- **Card:** White card, 8px radius, shadow400 or a 1px gray200 border (not both), 16px padding; ride/eats cards lead with imagery and a bold black title row
- **Button (primary):** Black #000000 fill, white 500–700 weight label, 8px radius, 48px tall on mobile; hover overlays 8% black-on-white inversion; disabled drops to gray200/gray500
- **Button (secondary):** Gray50 #f3f3f3 fill with black label (tertiary: transparent), same geometry; destructive uses red600 fill or red text
- **Form fields:** Filled input: gray50 background, no visible border until focus draws 2px black, 8px radius, 48px tall; label above in 12px gray600; error swaps border and caption to red600

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The black button: a full-black #000000 rectangle with white bold Uber Move text and 8px radius — Uber's entire brand color system compressed into ink on paper. Spend boldness here; keep everything else quiet.

## Do

- Make primary actions black and let semantic hues (blue/red/green/yellow 600s) carry meaning only
- Use the gray ramp (gray50–gray900) for nearly everything; if you're choosing a color, question it
- Keep type big, bold, and left-aligned — Uber Move's tight grotesque headlines are the brand voice
- Float UI over photography and maps with the lighting shadow tokens

## Don't

- Don't introduce a brand hue for buttons — a blue primary button reads as generic SaaS, not Uber
- Don't use Uber Move off-platform; it is proprietary — substitute Plus Jakarta Sans/Inter and keep the tight tracking
- Don't mix borders and shadows on the same card
- Don't use the old #09091a 'Uber blue-black' era values or gradients from pre-2018 branding

## Accessibility notes

- Black-on-white core gives 21:1 text contrast by default; the risk inverts — ensure disabled grays (gray400/500) aren't used for meaningful text
- Semantic 600-level hues are chosen to pass 4.5:1 on white (blue600 #276ef1 ≈ 4.2:1 — Base pairs it with bold weights/larger sizes or uses blue700 #175bcc for small text)
- Focus indicators must be the 2px black (or white-on-dark) outline; don't rely on the subtle gray fill change

## Reference sites

- Base design system: https://base.uber.com
- Base Web (open-source implementation): https://baseweb.design
- uber/baseweb on GitHub: https://github.com/uber/baseweb

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip uber-base.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/uber-base.json

Settings → Capabilities → Skills → Upload skill → uber-base.zip