---
title: "Zoox design system"
variant: extended
source: https://zoox.com/
captured_at: 2026-10-12
theme: light
industry: automotive
generator: Design DNA (https://four.wiralomi.com/style/zoox-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Zoox · Design System

> A calm, rider-first future in motion.

**Theme:** light · **Industry:** automotive · **Source:** https://zoox.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Zoox’s homepage pairs a soft mint canvas and restrained typography with immersive footage of riders and autonomous vehicles. Large, calm section bands guide visitors from the ride experience to cities, company stories, and newsletter signup.

## North star

Let spacious, quiet typography and soft color bands frame authentic rider and vehicle footage as the primary story.

## Overview

The page uses a restrained palette to make its vehicle footage feel vivid without competing with the brand: white and pale mint sections alternate with a deep blue-green band, while near-black anchors headings and the final footer. A small mint-to-lavender-to-blue conic gradient appears as an accent rather than a defining page background. Typography is clean, rounded sans-serif, with large centered statements, compact uppercase labels, and readable body copy. The hero begins on a pale mint field, placing a short headline above a broad, rounded video. Further down, centered introductions alternate with image-and-copy compositions and paired cards. Generous vertical breathing room keeps the long page from feeling crowded; section transitions are mostly made with background color, not dividers. Photography and video carry the emotional story, including riders in the cabin, vehicle close-ups, city scenes, and team imagery. Rounded media and cards soften the technical subject matter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for white content sections, forms, and the upper footer. |
| Night Ink | `#0d1212` | `--color-night-ink` | neutral | Primary dark text and inverse text; also used on dark cards. |
| Soft Mint | `#d3e4df` | `--color-soft-mint` | brand | Signature pale green section field in the hero and company-story bands. |
| True Black | `#000000` | `--color-true-black` | neutral | Headlines and prominent text on light sections. |
| Signal Mint | `#34ffc5` | `--color-signal-mint` | accent | Bright accent within measured conic gradients; not a dominant section fill. |
| Deep Teal | `#34484a` | `--color-deep-teal` | brand | Large ride-location and city-information section backgrounds, with light text. |
| Teal Hairline | `#283738` | `--color-teal-hairline` | semantic | Thin outline around white newsletter inputs. |
| Forest Edge | `#1b2523` | `--color-forest-edge` | semantic | Minor footer and other dark-edge detail; not a primary page surface. |
| Periwinkle Glow | `#c7c6ff` | `--color-periwinkle-glow` | accent | Secondary hue in measured conic-gradient accents. |
| Sky Glow | `#a7cfff` | `--color-sky-glow` | accent | Cool blue stop in measured conic-gradient accents. |
| Mist Line | `#dee6e4` | `--color-mist-line` | semantic | Subtle navigation and footer detail, including pale boundaries. |
| Footer Black | `#0b0e0e` | `--color-footer-black` | surface | Near-black final footer section behind the rear-view vehicle image. |
| Muted Slate | `#485150` | `--color-muted-slate` | semantic | Occasional subdued heading text. |
| Quiet Graphite | `#555959` | `--color-quiet-graphite` | semantic | Secondary heading and text detail. |
| Sage Text | `#5b8279` | `--color-sage-text` | semantic | Limited muted text accent on light surfaces. |
| Pale Caption | `#d6dadb` | `--color-pale-caption` | semantic | Minor light text detail; not a core surface or brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#d3e4df` (Soft Mint) · `--color-surface-2` → `#34484a` (Deep Teal) · `--color-surface-3` → `#0b0e0e` (Footer Black) · `--color-surface-4` → `#0d1212` (Night Ink) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#0d1212` (Night Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#283738` (Teal Hairline) · `--color-accent` → `#34ffc5` (Signal Mint) · `--color-accent-2` → `#c7c6ff` (Periwinkle Glow) · `--color-accent-3` → `#a7cfff` (Sky Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#d3e4df` | 15.93:1 | AAA |
| `#000000` | `#34484a` | 2.17:1 | fail |
| `#000000` | `#0b0e0e` | 1.08:1 | fail |
| `#0d1212` | `#ffffff` | 18.88:1 | AAA |
| `#0d1212` | `#d3e4df` | 14.32:1 | AAA |
| `#0d1212` | `#34484a` | 1.95:1 | fail |
| `#0d1212` | `#0b0e0e` | 1.03:1 | fail |
| `#ffffff` | `#d3e4df` | 1.32:1 | fail |
| `#ffffff` | `#34484a` | 9.67:1 | AAA |

### Gradients

- `conic-gradient(rgb(52, 255, 197) 0deg, rgb(199, 198, 255) 51.5445deg, rgb(167, 207, 255) 103.089deg, rgb(52, 255, 197) 206.178deg, rgba(199, 198, 255, 0) 229.087deg, rgba(199, 198, 255, 0) 360deg)`
- `conic-gradient(rgb(52, 255, 197) 0deg, rgb(199, 198, 255) 29.643deg, rgb(167, 207, 255) 59.2861deg, rgb(52, 255, 197) 118.572deg, rgba(199, 198, 255, 0) 131.747deg, rgba(199, 198, 255, 0) 360deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __gtStandardS_412463 | `--font-body` | webfont | 400, 700, 500 | Primary sans-serif for body copy, navigation, labels, and many headings. | Inter |
| __gtStandardL_53dfc7 | `--font-display` | webfont | 400 | Display and selected headline face, including the hero statement. | Inter |

- **__gtStandardS_412463:** Measured weights 400, 500, and 700; uppercase bold navigation and captions, with restrained body tracking.
- **__gtStandardL_53dfc7:** Measured regular weight; large headlines stay untracked and sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 1.1 | 0 | — | __gtStandardL_53dfc7 | Oversized hero or campaign statement. |
| h1 | 56px | 400 | 1.15 | 0 | — | __gtStandardL_53dfc7 | Primary page headline, notably the centered hero message. |
| h2 | 50px | 400 | 0.6 | 0 | — | __gtStandardS_412463 | Section-level statement headings. |
| h3 | 40px | 700 | 0.75 | 0 | — | __gtStandardS_412463 | Feature and content-card headings. |
| h4 | 36px | 400 | 1.2 | 0 | — | __gtStandardL_53dfc7 | Supporting display headings in feature sections. |
| body | 20px | 400 | 1.5 | -0.001em | — | __gtStandardS_412463 | Explanatory copy and editorial link rows. |
| caption | 12px | 700 | 1.3 | -0.002em | uppercase | __gtStandardS_412463 | Small uppercase section labels and CTA text. |
| nav | 12px | 700 | 1.3 | -0.002em | uppercase | __gtStandardS_412463 | Compact uppercase navigation labels. |

OpenType features in use: `"kern" 0`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 7, 10, 12, 14, 15, 16, 20, 22, 24, 40, 60, 80, 100 px.
- Section rhythm 60px · element gap 16px · card padding 36px · max content width 1400px.

The page is a long, single-column sequence of broad section bands, with content generally centered and media often spanning the available width. The measured page max width is 1400px. Comfortable density and generous section gaps create pauses between the hero, editorial features, city section, company stories, and content feed. Paired cards and split image/text compositions provide variation; the article area shifts to a multi-column listing. Rounded corners unify large media and cards. The layout favors open whitespace over visible grid lines.

## Shape & elevation

- Radius: button `12px` · input `18px` · card `36px` · media `16px` · nav `16px` · link `16px` · xs `8px` · sm `10px` · md `11px` · lg `12px` · xl `16px` · 2xl `18px` · pill `9999px`
- Shadow `lg` (nav): `rgba(23, 33, 30, 0.03) 0px 30px 30px 0px`
- Motion: standard transition `0.3s cubic-bezier(1, 0, 1, 0.6)` on interactive elements.

The visual system is mostly flat: color bands, whitespace, and rounded media define hierarchy instead of stacked shadows. The measured navigation shadow is very subtle. Newsletter inputs use a thin dark teal outline on white, while cards rely on their pale mint or dark fill and rounded silhouette rather than prominent borders.

## Imagery

Large video and photographic assets do most of the storytelling: riders inside the cabin, vehicle exterior and interior views, city locations, and team or factory scenes. Media is presented in broad, rounded frames or paired card layouts, often with the image carrying most of the visual weight. The page uses real-world lighting and cinematic scenes rather than flat illustration; the hero video is the first major visual after the headline.

## Components

### Hero video

Centered headline on a pale mint field, followed by a broad rounded video frame.

### Editorial feature split

Large image paired with a concise section label, body copy, and compact uppercase link.

### Experience card

Rounded pale mint feature card with a large statement and an adjacent video panel.

### City links

Two location tiles within a deep teal band, using vehicle imagery and simple city labels.

### Story cards

Paired image-led company cards on pale mint, each with a short label, description, and CTA.

### Newsletter form

White email and ZIP-code inputs with a 1px #283738 outline and rounded corners.

### Editorial feed

Image alongside compact article rows, category labels, and small mint arrow controls.

### Measured component styles

- **Primary button** (“JOIN THE NEWSLETTER”): transparent background · text #0d1313 · radius 0px · padding 0px · 700 12px __gtStandardS_412463 · uppercase
- **Link** (“THE ZOOX EXPERIENCE”): transparent background · text #000000 · radius 0px · padding 0px · 700 12px __gtStandardS_412463 · uppercase
- **Input**: background #ffffff · text #0d1212 · border 1px solid #283738 · radius 18px · padding 0px 20px · 400 14px __gtStandardS_412463
- **Card** (“IT'S NOT A CAR, IT'S A... Zoox unlocks a”): background #d3e4df · text #000000 · radius 36px · padding 104px 0px 40px 0px · 400 50px __gtStandardS_412463
- **Navigation item** (“HOW TO RIDE WHERE TO RIDE”): transparent background · text #34484a · radius 0px · padding 0px · 400 20px __gtStandardS_412463

## Do

- Use Soft Mint (#d3e4df) for signature light section bands.
- Keep hero statements centered and visually quiet.
- Let large vehicle and rider media lead each feature.
- Use Deep Teal (#34484a) for the city-focused dark band.
- Reserve Signal Mint (#34ffc5) for restrained accent details.
- Use compact uppercase labels to introduce sections.

## Don't

- Don’t turn the page into a dense dashboard or product grid.
- Don’t add gradients as dominant section backgrounds.
- Don’t use heavy shadows to separate every card.
- Don’t compete with the photography using decorative graphics.
- Don’t introduce unmeasured colors or arbitrary spacing values.
- Don’t make navigation or captions oversized.

## Agent prompt

Build a new Zoox-style page with a calm, rider-first visual hierarchy. Use Gallery White (#ffffff) as the light canvas, Soft Mint (#d3e4df) for brand section fields, and Deep Teal (#34484a) for a distinct dark content band; keep text in True Black (#000000) or Night Ink (#0d1212). Treat Signal Mint (#34ffc5), Periwinkle Glow (#c7c6ff), and Sky Glow (#a7cfff) as small gradient accents only. Use a clean sans-serif close to Inter, with large regular-weight statements, compact bold uppercase labels, and readable body copy. Organize content as spacious full-width section bands, centered introductions, paired image-and-copy features, and rounded media cards. Prioritize authentic rider, vehicle, and city photography or video. Keep borders thin, shadows rare, and decoration subordinate to the imagery. Follow measured spacing and component values rather than inventing new ones.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered statement on pale mint, with full-width rounded video beneath. | Brand introduction, Video playback control | Mint background, Centered headline, Rounded video |
| 2 | feature-split | Single editorial feature with image and centered explanatory copy. | Experience explanation, Feature link | White canvas, Large lifestyle image, Compact uppercase label |
| 3 | feature-grid | Paired rounded feature panels: pale mint copy card beside video. | Experience browsing, Feature CTA | Two-column cards, Rounded corners, Large display text |
| 4 | product-showcase | Full-bleed vehicle image with supporting text and link. | Technology introduction, Learn-more CTA | Large vehicle media, Text overlay or adjacent copy, Rounded media |
| 5 | cta | Centered heading and label within the deep teal section. | Ride discovery, Section transition | Deep teal background, Large light heading, Centered alignment |
| 6 | category-nav | Two city cards in a centered two-column layout. | Browse by city, Location-specific links | Vehicle photos, City labels, Compact text links |
| 7 | cta | Centered announcement and supporting link on deep teal. | Expansion announcement, Stay informed | Small uppercase eyebrow, Centered copy, Mint accent link |
| 8 | other | Centered text statement on a pale mint background. | Mission statement | Soft mint field, Centered heading, Open whitespace |
| 9 | feature-grid | Two image-led cards with copy and links in a two-column layout. | Explore company story, Recruitment link | Pale mint section, Paired rounded images, Compact CTAs |
| 10 | content-feed | Centered editorial introduction on white, preceding a multi-column article feed. | Browse editorial content, Journal entry point | Uppercase eyebrow, Centered statement, Mint link |
| 11 | content-feed | Vehicle image beside a compact list of article rows and categories. | Article discovery, Category labels, Row-level navigation | Image and list split, Small mint arrow controls, Light canvas |
| 12 | footer | White footer with grouped site links, city links, newsletter form, and legal row. | Site navigation, Newsletter signup, Policy access | Column groups, Outlined inputs, Fine divider |
| 13 | footer | Near-black full-width closing band with centered rear vehicle and corner details. | Brand sign-off | Near-black background, Vehicle image, Small logo and copyright |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/zoox-com