Palette, type ramp, spacing grid, radius, elevation and motion — restated in our own structure from Base Web's public references. Factual values for study; the official docs remain canonical.
Black / Primary
Primary actions (monochrome core)
--primary
White
Surfaces
--white
Content Primary
Primary text
--content-primary
Content Tertiary
Secondary text
--content-tertiary
Gray 50
Subtle background
--gray-50
Gray 200 Border
Borders
--gray-200
Blue 400 Accent
Links and informational accent
--blue-400
Red 400 Negative
Errors
--red-400
Green 400 Positive
Success
--green-400
'UberMove', 'UberMoveText', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif
Weights: 400, 500, 700
Base unit 4px (scale0-scale4800)
Shallow
Deep
Exactly what ships in baseweb-design.md. This entry doesn't have a full editorial breakdown yet, so the spec covers the verified facts — profile, official source, and an AI-ready prompt.
# Base Web — Design Style Reference
> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Uber. "Base Web" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.
**System:** Base Web
**Owner:** Uber
**Official documentation:** https://baseweb.design/
**Visual character:** Uber's monochrome utilitarianism — black buttons, Move type, and color reserved strictly for meaning, not decoration.
---
## Summary
A React Component library implementing the Base design language.
_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._
## Color tokens
| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Black / Primary | `#000000` | `--primary` | Primary actions (monochrome core) |
| White | `#ffffff` | `--white` | Surfaces |
| Content Primary | `#141414` | `--content-primary` | Primary text |
| Content Tertiary | `#6b6b6b` | `--content-tertiary` | Secondary text |
| Gray 50 | `#f6f6f6` | `--gray-50` | Subtle background |
| Gray 200 Border | `#e2e2e2` | `--gray-200` | Borders |
| Blue 400 Accent | `#276ef1` | `--blue-400` | Links and informational accent |
| Red 400 Negative | `#e11900` | `--red-400` | Errors |
| Green 400 Positive | `#048848` | `--green-400` | Success |
## Typography
- **Body:** Uber Move / system — weights 400, 500, 700 — `'UberMove', 'UberMoveText', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif`
## Type scale
| Step | Size | Line height |
| --- | --- | --- |
| display-large | `96px` | `112px` |
| heading-xl | `36px` | `44px` |
| heading-m | `24px` | `32px` |
| paragraph-m | `16px` | `24px` |
| paragraph-s | `14px` | `20px` |
## Spacing
Base unit: `4px (scale0-scale4800)`
Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`
## Corner radius
| Name | Value |
| --- | --- |
| default | `8px` |
| pill | `9999px` |
## Elevation / shadows
| Name | Value |
| --- | --- |
| shallow | `0 1px 4px rgba(0,0,0,0.16)` |
| deep | `0 4px 16px rgba(0,0,0,0.16)` |
## Motion
| Name | Value |
| --- | --- |
| timing-200 | `200ms` |
| ease-out-curve | `cubic-bezier(0.2, 0.8, 0.4, 1)` |
## Quick start (CSS)
```css
/* Base Web — illustrative tokens, restated as CSS custom properties.
Unofficial reference by designsystems.one; values are indicative, not
canonical. Official reference: https://baseweb.design/ */
:root {
/* Color */
--primary: #000000; /* Primary actions (monochrome core) */
--white: #ffffff; /* Surfaces */
--content-primary: #141414; /* Primary text */
--content-tertiary: #6b6b6b; /* Secondary text */
--gray-50: #f6f6f6; /* Subtle background */
--gray-200: #e2e2e2; /* Borders */
--blue-400: #276ef1; /* Links and informational accent */
--red-400: #e11900; /* Errors */
--green-400: #048848; /* Success */
/* Typography */
--font-body: 'UberMove', 'UberMoveText', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Type scale */
--text-display-large: 96px /* line-height 112px */;
--text-heading-xl: 36px /* line-height 44px */;
--text-heading-m: 24px /* line-height 32px */;
--text-paragraph-m: 16px /* line-height 24px */;
--text-paragraph-s: 14px /* line-height 20px */;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
/* Radius */
--radius-default: 8px;
--radius-pill: 9999px;
/* Elevation */
--shadow-shallow: 0 1px 4px rgba(0,0,0,0.16);
--shadow-deep: 0 4px 16px rgba(0,0,0,0.16);
/* Motion */
--motion-timing-200: 200ms;
--motion-ease-out-curve: cubic-bezier(0.2, 0.8, 0.4, 1);
}
```
## Engineering profile
- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source
## Apply this style with an AI tool
Paste this into your AI coding assistant as a direction, then iterate:
> Design in the spirit of Base Web by Uber — A React Component library implementing the Base design language. Character: Uber's monochrome utilitarianism — black buttons, Move type, and color reserved strictly for meaning, not decoration. Use a primary colour near #000000, the typeface "Uber Move / system" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 4px (scale0-scale4800) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.
## Official reference
- [Base Web documentation](https://baseweb.design/)
---
_Generated by [designsystems.one](https://www.designsystems.one/design-systems/baseweb) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
Want the deep dive?
Base Webdoesn't have a full editorial breakdown yet — those cover origin, governance, token decisions, and the components worth studying. Thirty-seven anchor systems do.