# Zoox

> Zoox — Style Reference

## Prompt Content

```
# Zoox — Style Reference
> serene sage showroom. Một không gian gallery xanh bạc hà nhạt, nơi một điểm nhấn teal rực rỡ và một mảng tối màu rừng sâu phá vỡ sự tĩnh lặng — rộng rãi, cao cấp, và hướng tới tương lai.

**Theme:** light

Zoox mang đến một giao diện gallery thanh bình, nơi nền sage mềm mại (#d3e4df) bao trùm toàn bộ trải nghiệm, chỉ bị phá vỡ bởi một mảng màu xanh rừng tối duy nhất tạo nên khoảnh khắc tương phản kịch tính. Hệ thống typography được xây dựng trên hai weight của một dòng chữ neo-grotesque custom — một dạng compact sans cho UI và body text, và một dạng display cho headline cỡ lớn kéo dài đến 120px với letter-spacing gần như bằng 0. Một màu teal rực rỡ duy nhất (#64d5b3) là điểm nhấn cho toàn bộ hệ thống: đây là màu sắc duy nhất được dùng làm bề mặt filled, xuất hiện trên CTA button và các vùng accent chính. Mọi thứ khác đều giữ ở tông desaturated — xám, gần đen, và màu sage đặc trưng. Các component có cảm giác như không trọng lượng: card dùng radius 36px lớn, shadow gần như không có, border chỉ là hairline. Tổng thể mang phong cách futurism tĩnh lặng — một showroom, không phải dashboard.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Sage Canvas | `#d3e4df` | `--color-sage-canvas` | Nền trang, hero bands, section divider — màu nền chủ đạo tạo không khí gallery êm dịu |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, image mask, icon fill, text tương phản cao trên nền tối |
| Mint Frost | `#edf4f2` | `--color-mint-frost` | Nền badge, highlight wash nhẹ, bề mặt card phụ — phiên bản nhẹ nhàng hơn của sage canvas |
| Carbon | `#0d1212` | `--color-carbon` | Text chính, nền section tối, border dày — màu gần đen sâu nhất, hơi lạnh hơn đen thuần |
| Graphite | `#34484a` | `--color-graphite` | Border navigation, heading phụ, icon stroke muted — màu teal desaturated đậm, làm cầu nối giữa màu trung tính và accent; Border và separator tối cho bề mặt elevated và UI inverted |
| Slate | `#565959` | `--color-slate` | Body text cấp phụ, list divider, footer, border muted |
| Fog | `#9aa3a5` | `--color-fog` | Text cấp ba, placeholder label, icon stroke disabled |
| Mist | `#7b8889` | `--color-mist` | Eyebrow text và label color, small caps header |
| Vivid Teal | `#64d5b3` | `--color-vivid-teal` | Fill button hành động chính, bề mặt accent, interactive highlight — màu sắc duy nhất trong hệ thống, dùng có chọn lọc để báo hiệu hành động |
| Eucalyptus | `#5b8279` | `--color-eucalyptus` | Gray outline accent cho tag, divider, và cạnh UI được focus. Không nâng cấp lên màu CTA chính |

## Tokens — Typography

### GT Standard S — Typeface UI và body chính — dùng cho navigation, button, body copy, badge, input, và heading đến 50px. Tính năng 'kern' 0 cố tình tắt kerning để tạo cảm giác monospaced-cơ khí. Tracking 0.0500em trên text 12-13px mang lại cho label nhỏ vẻ rộng rãi, kiểu typeset chất lượng. · `--font-gt-standard-s`
- **Thay thế:** Inter, Söhne, hoặc Neue Haas Grotesk
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 12, 13, 14, 15, 16, 20, 23, 30, 40, 50
- **Line height:** 1.15, 1.20, 1.25, 1.30, 1.40, 1.50, 1.88
- **Letter spacing:** -0.002em đến -0.001em trên body, +0.010em trên label 14-16px, +0.050em trên micro-label 12-13px
- **OpenType features:** `"kern" 0`
- **Vai trò:** Typeface UI và body chính — dùng cho navigation, button, body copy, badge, input, và heading đến 50px. Tính năng 'kern' 0 cố tình tắt kerning để tạo cảm giác monospaced-cơ khí. Tracking 0.0500em trên text 12-13px mang lại cho label nhỏ vẻ rộng rãi, kiểu typeset chất lượng.

### GT Standard L — Typeface chỉ dành cho display, dùng cho hero headline và tiêu đề section lớn. Chỉ dùng một weight (400) để giữ giọng điệu điềm tĩnh và tự tin — không có bold hét to. Kích thước 120px với letter-spacing bình thường tạo headline rộng, mang tính kiến trúc, nằm căn giữa trên nền sage canvas. · `--font-gt-standard-l`
- **Thay thế:** GT Walsheim, Söhne Breit, hoặc một neo-grotesque rộng
- **Weights:** 400
- **Kích thước:** 28, 36, 56, 120
- **Line height:** 1.10, 1.15, 1.20, 1.30
- **OpenType features:** `"kern" 0`
- **Vai trò:** Typeface chỉ dành cho display, dùng cho hero headline và tiêu đề section lớn. Chỉ dùng một weight (400) để giữ giọng điệu điềm tĩnh và tự tin — không có bold hét to. Kích thước 120px với letter-spacing bình thường tạo headline rộng, mang tính kiến trúc, nằm căn giữa trên nền sage canvas.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | 0.6px | `--text-caption` |
| body-sm | 14px | 1.4 | 0.14px | `--text-body-sm` |
| body | 16px | 1.5 | 0.16px | `--text-body` |
| subheading | 20px | 1.3 | -0.02px | `--text-subheading` |
| heading-sm | 23px | 1.28 | -0.023px | `--text-heading-sm` |
| heading | 30px | 1.25 | -0.03px | `--text-heading` |
| heading-lg | 40px | 1.2 | -0.04px | `--text-heading-lg` |
| display-sm | 56px | 1.1 | — | `--text-display-sm` |
| display | 120px | 1.1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 36px |
| badges | 20px |
| inputs | 16px |
| buttons | 12px |
| nav-pill | 16px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `rgba(0, 0, 0, 0.2) 0px 0px 4px 0px` | `--shadow-sm` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 12px

## Components

### Sage Hero Section
**Vai trò:** Hero band full-bleed trên nền sage

Nền #d3e4df full-width, không border. Headline display căn giữa ở 56-120px, font GT Standard L weight 400, màu #0d1212. Subtext ở 20px weight 400, màu #565959. Padding dọc rộng rãi 80-120px trên và dưới. Có thể có CTA button nhỏ màu Vivid Teal bên dưới headline.

### Filled Teal CTA Button
**Vai trò:** Hành động chính — button filled màu sắc duy nhất trong hệ thống

Nền #64d5b3, text #0d1212 (hoặc #ffffff trên nền tối), font GT Standard S 14-15px weight 500-600, padding 12px 24px, border-radius 12px. Không border. Màu teal rực rỡ trên nền sage canvas tạo nên khoảnh khắc màu sắc duy nhất mang tính cấp bách của hệ thống.

### Ghost Navigation Button
**Vai trò:** Hành động trong text hoặc kiểu link

Không nền, text màu #34484a hoặc #0d1212, có gạch chân hoặc kèm chevron, font 14px weight 500, padding 5px 10px. Dùng trong navigation row và inline link.

### Dark Pill CTA
**Vai trò:** Button hành động phụ trong header

Nền tối #0d1212 hoặc #34484a, text trắng, font 14px weight 600, padding 10px 20px, border-radius 16px (pill). Nằm ở góc trên bên phải của navigation bar.

### Image Card (Rounded)
**Vai trò:** Container chứa ảnh hoặc minh họa

Nền #ffffff, border-radius 36px, overflow hidden. Ảnh lấp đầy card, không có padding bên trong. Dùng cho lifestyle photography và product shot. Không shadow — chỉ có radius và bề mặt trắng làm điểm nhấn.

### Eyebrow Label
**Vai trò:** Small caps section pre-title

GT Standard S 12px weight 600, màu #7b8889 (Mist), letter-spacing +0.05em, text-transform uppercase. Nằm phía trên heading như một tag phân loại nhẹ nhàng.

### Mint Badge
**Vai trò:** Tag trạng thái hoặc danh mục

Nền #edf4f2, text #0d1212, font 12-13px weight 500, padding 5px 12px, border-radius 20px. Không border. Nằm inline với text hoặc float phía trên card.

### Cookie Consent Dialog
**Vai trò:** Thông báo quyền riêng tư cố định dưới cùng

Card trắng #ffffff, border-radius 16px, box-shadow rgba(0,0,0,0.2) 0px 0px 4px 0px, padding 24px. Tiêu đề 'Privacy Policy' ở 16px weight 600. Body ở 13px #565959. Hành động chính: Button filled Vivid Teal full-width với radius 12px, padding dọc 12px.

### Navigation Bar
**Vai trò:** Navigation cấp cao nhất của site

Nền trong suốt hoặc sage, logo căn giữa (Zoox stacked letter mark), nav link bằng GT Standard S 13-14px weight 500 màu #0d1212, letter-spacing +0.01em. Các link cách nhau 24-32px. Dark Pill CTA ghim bên phải. Không border dưới cùng trên nền sage canvas.

### Dark Forest Feature Section
**Vai trò:** Section tương phản kịch tính

Nền #34484a (Deep Forest) full-bleed, text trắng #ffffff, padding dọc rộng rãi 80-120px. Headline display căn giữa bằng GT Standard L 56px weight 400. Chứa image card trắng với radius 36px nổi trên bề mặt tối. Đây là điểm khác biệt màu sắc duy nhất so với bảng màu sage/trắng/carbon.

### Play/Pause Toggle Button
**Vai trò:** Điều khiển media

Button tròn nhỏ 40x40px, nền #0d1212, icon trắng, không label. Dùng cho video autoplay toggle overlay trên hero media.

### Text Input Field
**Vai trò:** Input form

Border 1px #717f80 hoặc #767676, border-radius 16px, padding 12px 16px, font 14px weight 400 #0d1212, placeholder #9aa3a5. Không background fill — trong suốt trên nền sage canvas.

### Footer Link List
**Vai trò:** Sitemap hoặc navigation phụ

Danh sách link dọc, mỗi link cách nhau bằng border hairline 1px #565959, font 14px weight 400 #565959, line-height 1.88 (rộng rãi). Không bullet marker.

## Do's and Don'ts

### Nên làm
- Dùng #d3e4df (Sage Canvas) làm nền trang chủ đạo trên tất cả section full-bleed
- Chỉ dùng #64d5b3 (Vivid Teal) cho filled CTA button và bề mặt accent đơn lẻ — không bao giờ dùng làm text color hoặc decorative fill
- Chỉ đặt display headline ở 56px hoặc 120px bằng GT Standard L weight 400 — không bao giờ bold, không dùng kích thước trung gian
- Áp dụng border-radius 36px cho tất cả image card và feature container
- Dùng border hairline 1px #565959 hoặc #34484a cho separator và cạnh card, không bao giờ dùng đường kẻ dày
- Đặt font-feature-settings thành "kern" 0 trên tất cả text GT Standard để duy trì bản sắc spacing cơ khí
- Cách section bằng padding dọc 80-120px để giữ khoảng thở kiểu gallery

### Không nên làm
- Không thêm màu sắc khác — hệ thống chỉ có sage, trắng, carbon và một accent teal
- Không dùng bold weight cho display headline — GT Standard L luôn là weight 400
- Không áp dụng box-shadow cho card, button, hoặc navigation — hệ thống dựa vào radius và border
- Không dùng #34484a (Deep Forest) làm text color hoặc border trên nền sáng — màu này chỉ dành cho nền section tối
- Không đặt body text dưới 13px hoặc dùng letter-spacing chặt hơn -0.002em trên UI text
- Không dùng Vivid Teal trên text — đây chỉ là surface color, kết hợp với text #0d1212 hoặc #ffffff
- Không phá vỡ nhịp điệu section bằng container max-width hẹp — hãy để sage canvas chảy full-bleed

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Sage Canvas | `#d3e4df` | Nền trang cơ bản, hero section, band full-bleed |
| 1 | Pure White | `#ffffff` | Bề mặt card, image container, contrast panel |
| 2 | Mint Frost | `#edf4f2` | Badge fill, elevated chip nhẹ, overlay tinted |
| 3 | Deep Forest | `#34484a` | Nền section tối, khoảnh khắc tương phản kịch tính |

## Elevation

- **Cookie consent dialog:** `rgba(0, 0, 0, 0.2) 0px 0px 4px 0px`

## Imagery

Hình ảnh chủ yếu là lifestyle và product photography chất lượng cao: ảnh chụp tự nhiên hành khách bên trong robotaxi, góc ¾ xe bên ngoài với nền đô thị, và cảnh môi trường với ánh đèn neon và đường phố ấm áp. Ảnh luôn được đặt trong card trắng với border-radius 36px, không bao giờ full-bleed. Phong cách xử lý tự nhiên với color grading điện ảnh ấm áp — không duotone, không filter nặng. Sản phẩm (xe) là hero; con người xuất hiện trong bối cảnh, không phải chân dung dàn dựng. Không có illustration, 3D render, hoặc đồ họa trừu tượng trên các trang chính. Conic gradient (teal-violet-blue) chỉ xuất hiện như một brand mark tinh tế hoặc loading element, không phải trang trí trang. Icon tối giản, outlined, và monochrome màu #0d1212 hoặc trắng trên nền tối.

## Layout

Trang tuân theo nhịp điệu full-bleed đơn: mỗi section là edge-to-edge, không có margin bên, và nền sage (#d3e4df) chảy liên tục giữa các section. Hero là bố cục chỉ có text căn giữa — không có hero image, chỉ có headline display lớn trên nền sage. Bên dưới hero là layout chia đôi: image card bên trái (trắng bo tròn, 36px), eyebrow + heading + body text bên phải. Trang sau đó chuyển sang section dark forest (#34484a) full-bleed với display text căn giữa và hai image card cạnh nhau nổi trên bề mặt tối. Navigation là top bar tối giản với logo căn giữa và dark pill CTA căn phải. Mật độ nội dung rộng rãi — các section cách nhau 80-120px khoảng thở. Grid là hai cột đơn giản hoặc stack một cột căn giữa; không có multi-column card grid hoặc masonry phức tạp.

## Agent Prompt Guide

## Quick Color Reference
- Canvas: #d3e4df
- Card/surface: #ffffff
- Badge: #edf4f2
- Primary text: #0d1212
- Secondary text: #565959
- Accent surface (dark section): #34484a
- primary action: #64d5b3 (filled action)

## Example Component Prompts
1. **Sage Hero Section**: Nền #d3e4df full-bleed, padding trên/dưới 120px. Headline căn giữa 'Ready, set, Zoox!' ở 120px GT Standard L weight 400, màu #0d1212. Eyebrow nhỏ 'TAKE YOUR FIRST RIDE' ở 12px weight 600, màu #7b8889, letter-spacing 0.6px, uppercase.
2. Tạo Primary Action Button: Nền #64d5b3, text #000000, radius 9999px, padding pill gọn. Dùng xử lý filled này cho CTA chính.
3. **Image Card**: Nền trắng #ffffff, border-radius 36px, overflow hidden, không shadow. Chứa ảnh 4:3 của robotaxi. Không có padding bên trong xung quanh ảnh.
4. **Dark Forest Feature Section**: Nền #34484a full-bleed, padding trên/dưới 80px. Headline căn giữa ở 56px GT Standard L weight 400, màu #ffffff. Hai image card trắng với radius 36px đặt cạnh nhau, mỗi card chứa một lifestyle photo.
5. **Mint Badge**: Nền #edf4f2, text 'NEW' ở 12px weight 600, màu #0d1212, padding 5px 12px, border-radius 20px, không border. Font-feature-settings: "kern" 0.

## Gradient System

Conic gradient (rgb(52, 255, 197) → rgb(199, 198, 255) → rgb(167, 207, 255) → transparent) là brand mark đặc trưng, chỉ dùng trong xử lý logo Zoox và một số khoảnh khắc loading hoặc brand-accent chọn lọc. Không áp dụng cho button, card, hoặc nền trang. Gradient chính của hệ thống nằm giữa sage canvas và dark forest panel — đạt được qua hard color break, không phải CSS gradient.

## Similar Brands

- **Waymo** — Cùng layout gallery rộng rãi với section full-bleed đơn, display headline căn giữa, image card radius lớn trên nền trung tính
- **Rivian** — Cùng thẩm mỹ premium automotive êm dịu với bảng màu sage/muted, display type cỡ lớn, UI chrome tối giản
- **Arc Browser** — Cùng top-nav tối giản với logo căn giữa, một accent color duy nhất, khoảng thở kiểu gallery giữa các content band
- **Aston Martin** — Cùng display type neo-grotesque ở weight cỡ lớn, whitespace rộng rãi, bảng màu sage/desaturated luxury

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-sage-canvas: #d3e4df;
  --color-pure-white: #ffffff;
  --color-mint-frost: #edf4f2;
  --color-carbon: #0d1212;
  --color-graphite: #34484a;
  --color-slate: #565959;
  --color-fog: #9aa3a5;
  --color-mist: #7b8889;
  --color-vivid-teal: #64d5b3;
  --color-eucalyptus: #5b8279;

  /* Typography — Font Families */
  --font-gt-standard-s: 'GT Standard S', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-standard-l: 'GT Standard L', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: 0.14px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.02px;
  --text-heading-sm: 23px;
  --leading-heading-sm: 1.28;
  --tracking-heading-sm: -0.023px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.03px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.04px;
  --text-display-sm: 56px;
  --leading-display-sm: 1.1;
  --text-display: 120px;
  --leading-display: 1.1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 36px;

  /* Named Radii */
  --radius-cards: 36px;
  --radius-badges: 20px;
  --radius-inputs: 16px;
  --radius-buttons: 12px;
  --radius-nav-pill: 16px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 0px 4px 0px;

  /* Surfaces */
  --surface-sage-canvas: #d3e4df;
  --surface-pure-white: #ffffff;
  --surface-mint-frost: #edf4f2;
  --surface-deep-forest: #34484a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-sage-canvas: #d3e4df;
  --color-pure-white: #ffffff;
  --color-mint-frost: #edf4f2;
  --color-carbon: #0d1212;
  --color-graphite: #34484a;
  --color-slate: #565959;
  --color-fog: #9aa3a5;
  --color-mist: #7b8889;
  --color-vivid-teal: #64d5b3;
  --color-eucalyptus: #5b8279;

  /* Typography */
  --font-gt-standard-s: 'GT Standard S', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-standard-l: 'GT Standard L', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: 0.14px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.02px;
  --text-heading-sm: 23px;
  --leading-heading-sm: 1.28;
  --tracking-heading-sm: -0.023px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.03px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.04px;
  --text-display-sm: 56px;
  --leading-display-sm: 1.1;
  --text-display: 120px;
  --leading-display: 1.1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 36px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 0px 4px 0px;
}
```