---
name: Waymo
description: "A prime example of a modern, trust-oriented tech interface that successfully balances professional restraint with a clear consumer mission."
version: alpha

colors:
  background: "#ffffff"
  primary: "#23233c"
  tertiary: "#006fee"
  neutral: "#808080"
  bg-soft: "#f2f2f2"
  line: "rgba(35, 35, 60, 1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.96px"
  h2:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.32px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.32px"

rounded:
  sm: 3px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, professional, and trust-forward design for a leading autonomous vehicle technology platform.

*A premium, trustworthy tech company operating at the intersection of automotive and software.*

## Colors

High-contrast and professional, using a deep navy as the primary text color and a vibrant blue for interactive accents.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#23233c`)** — uses `ink` token
- **Accent (`#006fee`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(35, 35, 60, 1.0)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- All typography uses tight, negative letter-spacing.
- Headlines are bold and large, while body text remains highly legible.
- Text colors are strictly limited to the deep navy ink or white for dark backgrounds.

## Layout

Centered container with a standard top navigation, split hero sections, and stacked full-width content blocks.

*Rhythm:* Standard 4px grid with clear visual grouping through generous whitespace.

## Elevation & Depth

- Borders: Solid 2px borders for buttons, providing a clear interactive affordance.

## Shapes

- `sm`: 3px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid or outlined buttons with generous padding and sharp corners or slightly rounded borders.
- **card:** Not prominently featured, relying more on split-text and full-width imagery.
- **chip:** Not featured.
- **input:** Not featured.
- **hero:** Split layout with a large headline on one side and descriptive text with a CTA on the other, supported by a prominent hero image.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows on UI elements — screenshot shows completely flat, clean design.
- Don't use rounded corners on primary buttons — screenshot shows sharp or slightly rounded edges.
- Don't use multiple competing accent colors — screenshot shows a strict navy, white, and single blue accent palette.
- Don't clutter the interface with dense information blocks — screenshot shows generous whitespace and clear visual hierarchy.
- Don't use all-caps for body text — screenshot shows standard sentence case for readability.
- Don't rely on dark mode as the primary interface — screenshot shows a predominantly light-mode design.

---

## System Prompt (paste into AI agent)

```
Waymo's website design is a clean, professional, and trust-forward layout for a consumer-facing autonomous vehicle platform. The color palette is dominated by a deep navy ink (#23233c) and crisp white backgrounds (#ffffff), with a vibrant blue accent (#006fee) for primary actions. The typography is a humanist-sans-serif family characterized by tight, negative letter-spacing, creating a modern and confident feel. Critical design constraints include maintaining a flat UI with no drop shadows, using generous whitespace to establish a clear visual hierarchy, and avoiding cluttered interfaces. The design language is restrained and premium, focusing on large photography and bold headlines to convey a sense of safety and technological leadership.
```