Skip to content
Library

Zoox. Serene sage showroom.

  • Brand
  • Light theme
  • 10 colors
  • 2 typefaces

Zoox presents a serene, gallery-like interface where a soft sage canvas (#d3e4df) carries the entire experience, broken only by a single dark forest-green section that acts as a dramatic contrast moment. The typography system is built on two weights of a custom neo-grotesque family — a compact sans for UI and body, and a display cut for oversized headlines that stretch to 120px with near-zero letter-spacing. A single vivid teal (#64d5b3) punctuates the system: it is the only chromatic color used as a filled surface, appearing on CTA buttons and key accent zones. Everything else stays desaturated — grays, near-blacks, and that signature sage. Components feel weightless: cards use large 36px radii, shadows are nearly absent, and borders are hairline. The mood is calm futurism — a showroom, not a dashboard.

Screenshot of Zoox
Captured from zoox.com on October 11, 2026

Zoox design system

Zoox

Brand1

  • Primary action button fills, accent surfaces, interactive highlights — the single chromatic color in the system, used sparingly to signal action

Accent1

  • Gray outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color

Neutrals8

  • Primary text, dark section backgrounds, heavy borders — the deepest near-black, slightly cooler than true black

  • Navigation borders, secondary headings, muted icon strokes — a dark desaturated teal that bridges neutrals and the accent; Dark borders and separators for elevated surfaces and inverted UI.

  • Body text secondary level, list dividers, footers, muted borders

  • Eyebrow text and label color, small caps headers

  • Tertiary text, placeholder labels, disabled icon strokes

  • Page background, hero bands, section dividers — the dominant ambient color that gives the system its calming gallery atmosphere

  • Badge backgrounds, subtle highlight washes, secondary card surfaces — a quieter sibling of the sage canvas

  • Card surfaces, image masks, icon fills, high-contrast text on dark sections

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Carbon on Vivid Teal

10.53 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.