---
version: alpha
name: Rivian
description: "Compass Yellow struck against a wild coastline — an EV brand built for the trailhead."
colors:
  on-surface-variant: "#494949"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#ECECEC"
  error: "#dc3127"
  neutral: "#CBCBCB"
  primary: "#FFAC00"
  paper: "#FAFAFA"
  cloud: "#F2F2F2"
  border-grey: "#D1D1D1"
  off-black: "#151515"
  graphite: "#212121"
  stone: "#636363"
  mute: "#B8B8B8"
  brand-yellow: "#FFAA00"
  rivian-green: "#629B5C"
  taillight: "#E84826"
  sky: "#77AFD8"
  river-slate: "#9FA1B8"
  success: "#4a8231"
  warning: "#d58103"
  info: "#005e7d"
  disabled: "#8e8e8e"
typography:
  caption:
    fontFamily: Adventure
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: -0.01em
  body-s:
    fontFamily: Adventure
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.01em
  body:
    fontFamily: Adventure
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.01em
  body-l:
    fontFamily: Adventure
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.01em
  subheading:
    fontFamily: Adventure
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  heading:
    fontFamily: Adventure
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  heading-l:
    fontFamily: Adventure
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  display-s:
    fontFamily: Adventure
    fontSize: 44px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.025em
  display:
    fontFamily: Adventure
    fontSize: 56px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.025em
  display-l:
    fontFamily: Adventure
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.025em
  hero-numeral:
    fontFamily: Adventure
    fontSize: 360px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.025em
rounded:
  nano-inputs-chips: 4px
  micro-cards-fields: 12px
  macro-modals-banners: 20px
  mega-large-panels: 40px
  buttons-pills: 36px
  fully-round-controls: 99px
spacing:
  nav-pad: 12px
  nav-toolbar: 50px
  button-pad: 16px
  heading-pad: 20px
---
# Rivian — Style Reference
> Compass Yellow struck against a wild coastline — an EV brand built for the trailhead.

**Theme:** light

Rivian runs a near-monochrome system — bone-white canvas, ink-black type, a full spectrum of engineered greys — and lets one signature accent do all the talking: Compass Yellow (`#FFAC00`), reserved for the single most important action and nothing else. The rest of the color energy lives in the photography, not the chrome: cinematic full-bleed adventure imagery (trucks on gravel, coastline, camp gear) supplies the sky-blues, coastal greens, and taillight orange-reds, so the interface itself stays quiet and lets the vehicles carry the mood. Typography is the custom **Adventure** typeface — a geometric, wide-set sans that scales from 12px labels to a 360px hero numeral without ever softening. Corners are pill-round on every action (36px buttons, fully-rounded controls) but square on content, a deliberate contrast between friendly hardware-grade controls and editorial rigor. The layout is full-bleed and cinematic up top, then tightens to a contained, comfortable grid — restraint everywhere except the one yellow moment and the one enormous headline.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| White | `#FFFFFF` | `--surface-primary` | Primary canvas + nav bar; also text on dark/photo surfaces. |
| Paper | `#FAFAFA` | `--surface-primaryAlt` | Barely-warm alt canvas for stacked sections. |
| Cloud | `#F2F2F2` | `--surface-secondary` | Secondary surface + resting fill of ghost/secondary buttons. |
| Fog | `#ECECEC` | `--surface-tertiary` | Tertiary surface, dividers, inset panels. |
| Neutral Light | `#CBCBCB` | `--surface-neutralLight` | Hairline strokes, disabled outlines. |
| Border Grey | `#D1D1D1` | `--border` *(measured)* | Default 1px component borders. |
| Ink | `#000000` | `--text-primary` | Headlines, wordmark, primary button fill. The default. |
| Off-Black | `#151515` | `--stroke` *(measured)* | Secondary-button label + off-black body ink. |
| Graphite | `#212121` | `--surface-invertSecondary` | Inverse surface + dark input field fill. |
| Slate | `#494949` | `--text-secondary` | Secondary text on light. |
| Stone | `#636363` | `--text-tertiary` | Tertiary text, captions, hint text. |
| Mute | `#B8B8B8` | `--text-muted` *(measured)* | Lowest-emphasis text. |
| Compass Yellow | `#FFAC00` | `--accent` | THE signature. Demo-drive pill, highlight link fill. One yellow per view — never body text, never a full section. |
| Brand Yellow | `#FFAA00` | `--brand` | The token-system twin of Compass Yellow (`--yellow-400`); focus ring / warning. |
| Rivian Green | `#629B5C` | `--rivian-green` *(heritage)* | Heritage adventure green — supporting fills, illustration, not chrome. |
| Taillight | `#E84826` | `--rivian-orange` *(heritage)* | The vehicle-lightbar orange-red; imagery accent only. |
| Sky | `#77AFD8` | `--sky` *(measured)* | Coastal sky-blue drawn from hero photography. |
| River Slate | `#9FA1B8` | `--link` *(measured)* | Cool blue-grey used for quiet inline links. |
| Success | `#4a8231` | `--semantic-success` | System success. |
| Error | `#dc3127` | `--semantic-error` | System error / destructive. |
| Warning | `#d58103` | `--semantic-warning` | System warning. |
| Info | `#005e7d` | `--semantic-info` | System info. |
| Disabled | `#8e8e8e` | `--semantic-disabled` | Disabled foreground. |

## Tokens — Typography

### Adventure — the custom Rivian display + text sans; geometric, wide, load-bearing from 12px to 360px · `--font-adventure`
- **Substitute:** Söhne, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif
- **Weights:** 300, 400, 500, 600, 700
- **Sizes:** 10 / 11 / 14 / 16 / 20 / 24 / 32 / 36 / 44 / 56 / 72 px, up to a 360px hero numeral
- **Line height:** 0.96 (display) → 1.0 (headline) → 1.5 (body, 24px on 16px)
- **Letter spacing:** −0.025em display · −0.02em headline · −0.01em label/body
- **Role:** Everything Rivian sets is Adventure — nav, headlines, buttons, the giant model numeral. One family, six weights, tuned tight and wide.

### Adventure Mono — the monospaced companion for specs, labels, and technical readouts · `--font-adventure-mono`
- **Substitute:** "Söhne Mono", ui-monospace, "SFMono-Regular", Menlo, monospace
- **Weights:** 300, 400, 600, 700
- **Sizes:** 10–14px label range
- **Line height:** 1.0–1.4
- **Letter spacing:** −0.01em
- **Role:** Technical texture — pricing, unit labels, fine print. Never for headlines.

*Also loaded on the source: Söhne, Liga, Canela — secondary/legacy stacks; Adventure is the live identity face.*

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 16px | −0.01em | `--text-xs` |
| Body S | 14px | 20px | −0.01em | `--text-sm` |
| Body | 16px | 24px | −0.01em | `--text-base` |
| Body L | 20px | 28px | −0.01em | `--text-lg` |
| Subheading | 24px | 1.0 | −0.02em | `--text-xl` |
| Heading | 32px | 1.0 | −0.02em | `--text-2xl` |
| Heading L | 36px | 1.0 | −0.02em | `--text-3xl` |
| Display S | 44px → 72px | 0.96 | −0.025em | `--text-display-sm` |
| Display | 56px → 96px | 0.96 | −0.025em | `--text-display-base` |
| Display L | 72px → 120px | 0.96 | −0.025em | `--text-display-lg` |
| Hero numeral | up to 360px | 0.96 | −0.025em | `--text-9xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Nav pad | 12px | `--consumer-ui-navbar-root-padding` |
| Nav toolbar | 50px | `--consumer-ui-navbar-toolbar-height` |
| Button pad | 0 16px | *(measured)* |
| Heading pad | 20px 0 32px | *(measured)* |

### Border Radius
| Element | Value |
|---------|-------|
| Nano — inputs, chips | 4px (`--radius-nano`) |
| Micro — cards, fields | 12px (`--radius-micro`) |
| Macro — modals, banners | 20px (`--radius-macro`) |
| Mega — large panels | 40px (`--radius-mega`) |
| Buttons / pills | 36px |
| Fully round controls | 99px / 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Base | `0 6px 16px -4px rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.08)` | `--shadow-base` |
| Hero | `0 6px 20px -6px rgba(0,0,0,.08), 0 3px 10px -3px rgba(0,0,0,.08)` | `--shadow-hero` |
| Nav | `0 2px 8px rgba(0,0,0,.15)` | `--shadow-nav` |

### Layout
- **Page max-width:** contained grid below a full-bleed hero
- **Section gap:** generous, comfortable vertical rhythm
- **Card padding:** 12–20px radius panels with light inset shadow
- **Element gap:** 4px base unit, multiples throughout

## Components

### Primary Button
**Role:** The main action ("Explore offers"), full ink presence.
Black fill `#000000`, white `#FFFFFF` label, 36px pill radius, `padding: 0 16px`, Adventure 14px / 600. No border, no shadow.

### Secondary Button
**Role:** Quiet companion action next to primary.
Cloud fill `#F2F2F2`, off-black `#151515` label, 36px pill radius, Adventure 14px / 600.

### Ghost / Outline Button
**Role:** Tertiary action over photography ("Shop now").
Transparent fill, `#000000` or `#FFFFFF` label depending on ground, hairline outline, fully-round pill. No shadow.

### Accent Pill ("Demo drive")
**Role:** The single highlighted CTA in the nav — the only Compass Yellow in the chrome.
Compass Yellow `#FFAC00` fill, `#151515` label, pill radius, 14px / 400. Exactly one per view.

### Nav Bar
**Role:** Persistent top toolbar, editorial and airy.
White `#FFFFFF` background, 50px toolbar height + 12px root padding, black RIVIAN wordmark left, text links center, account + yellow Demo-drive pill right. Soft nav shadow `0 2px 8px rgba(0,0,0,.15)`.

### Text Input
**Role:** Form fields, dark-ground variant.
Graphite `#212121` fill, white `#FFFFFF` text, 4px radius, `padding: 20px 16px 0` (floating-label), Adventure 16px / 400. No border.

### Carousel Control
**Role:** Prev/next over the hero.
White circular button, fully-round (9999px), centered chevron; paired with a pill-indicator dot row.

### Card
**Role:** Content tile in the contained grid.
White or paper surface, 12–20px radius, base inset shadow, Adventure body type. Square-cornered content, round-cornered container.

### Hero Numeral
**Role:** The oversized model badge (e.g. "R1S") anchoring a section.
Adventure 500, up to 360px, ink `#000000`, tracking −0.025em, line-height 0.96. Pure typographic spectacle — no decoration.

### Highlight Link
**Role:** Inline promotional link that earns emphasis.
Compass Yellow `#FFAC00` fill behind `#151515` text, 8px padding, square. Used sparingly.

### Inline Link
**Role:** Standard quiet text link.
River-slate `#9FA1B8` or ink `#000000`, Adventure 14px / 400, no underline chrome by default.

## Do's and Don'ts

### Do
- Keep exactly ONE Compass Yellow (`#FFAC00`) moment per view — the primary CTA or a single highlight.
- Let full-bleed adventure photography carry the color; keep the UI chrome monochrome.
- Set everything in Adventure — headlines, buttons, labels, the giant numeral — and lean on weight (400–700) for hierarchy.
- Pill every action (36px / fully round); keep content and imagery square.
- Push display type to real scale (72–360px) at line-height 0.96, tracking −0.025em.
- Build hierarchy from the engineered grey ramp: `#000` → `#151515` → `#494949` → `#636363` → `#B8B8B8`.

### Don't
- Don't paint sections yellow or use it for body text — it is the CTA accent, full stop.
- Don't introduce a second display typeface; Adventure is the whole identity.
- Don't add gradients or heavy shadows — depth is a light inset (≤8% black) or a luminance step.
- Don't round content corners or square the buttons; the contrast is intentional.
- Don't let the heritage green/taillight-orange leave imagery and become chrome accents.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Primary page + nav ground. |
| 0.5 | Paper | `#FAFAFA` | Warm alt canvas for stacked sections. |
| 1 | Cloud | `#F2F2F2` | Secondary surface, resting button fill. |
| 2 | Fog | `#ECECEC` | Tertiary panels, dividers. |
| — | Neutral Light | `#CBCBCB` | Hairlines, disabled strokes. |
| Inverse | Graphite | `#212121` | Dark inputs, inverse blocks. |
| Inverse Max | Ink | `#000000` | Full-black inverse sections + primary button. |

## Elevation
Depth is whisper-quiet. Rivian conveys layering almost entirely through luminance steps in the grey ramp (`#FFFFFF` → `#FAFAFA` → `#F2F2F2` → `#ECECEC`) and 1px hairlines (`#D1D1D1` / `#CBCBCB`), not drop shadows. Where shadow appears it is a soft ≤8% black inset (`--shadow-base` / `--shadow-hero`); only the nav earns a slightly firmer `0 2px 8px rgba(0,0,0,.15)`. Nothing floats dramatically — the interface reads flat and engineered, so the photography and the one yellow accent are the only things with presence.

## Imagery
Photography is the whole emotional payload: cinematic, full-bleed, natural-light adventure scenes — vehicles on gravel and coastline, gear and people mid-trip, real weather. Wide aspect ratios (the token set runs 2/3 through 3/2). The images supply every warm/cool color the chrome withholds — sky-blues (`#77AFD8`), coastal greens, taillight orange-reds (`#E84826`). Treatment is documentary, never studio-slick: no heavy grading, no vignettes. The UI defers to it completely.

## Layout
Full-bleed cinematic hero (edge-to-edge photo + overlaid Adventure display headline and pill buttons + carousel controls), then the page tightens into a contained, comfortable grid of cards and oversized model numerals. Persistent white top nav: wordmark left, center links (Vehicles / Charging / Technology / Discover / Gear Shop), account + yellow Demo-drive pill right. Rhythm alternates enormous typographic statements (the 360px numeral) with quiet content rows — big-quiet-big-quiet, restraint punctuated by scale.

## Typography Signature
Rivian runs a single-typeface system and makes it work through range, not variety. **Adventure** operates in two registers: at display scale (56–360px) it goes wide, tight, and heavy — line-height 0.96, tracking −0.025em — so a model name like "R1S" becomes architecture; at text scale (12–20px) it relaxes to line-height 1.5 and −0.01em tracking for genuine readability. The tell is the negative leading on giant type: pulling line-height below 1 makes multi-line headlines lock together as a single graphic block. Because there's only one family, weight (300–700) carries all hierarchy, and the result feels engineered and self-assured rather than decorated.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#000000` / surface: `#F2F2F2` / border: `#D1D1D1` / accent: `#FFAC00` / primary action: `#000000` (yellow `#FFAC00` reserved for the single highlighted CTA)

## Example Component Prompts
1. **Primary + Ghost button pair**: Two pill buttons, 36px radius, Adventure 14px/600. Primary = black `#000000` fill, white `#FFFFFF` label, `padding: 0 16px`. Secondary = transparent with 1px `#FFFFFF` outline over photography. No shadow.
2. **Accent nav pill**: A single "Demo drive" pill in Compass Yellow `#FFAC00` with `#151515` label, fully-round, 14px Adventure, sitting at the right of a white 50px-tall nav bar with a black wordmark and center text links.
3. **Full-bleed hero**: Edge-to-edge documentary adventure photo, overlaid left-aligned Adventure display headline at ~72px, line-height 0.96, tracking −0.025em, white `#FFFFFF` text, plus a black primary pill + ghost pill and a white circular carousel arrow.
4. **Oversized model numeral**: Center a model name (e.g. "R1S") in Adventure 500 at 200–360px, ink `#000000`, line-height 0.96, tracking −0.025em, on a `#FAFAFA` surface — pure typographic spectacle, no other decoration.
5. **Dark input field**: Floating-label text input, graphite `#212121` fill, white `#FFFFFF` text, 4px radius, `padding: 20px 16px 0`, Adventure 16px/400, no border.

## Similar Brands
- **Polestar** — the same Scandinavian-minimal, near-monochrome EV rigor where photography, not chrome, carries the color.
- **Apple** — one product-photo-forward canvas, giant restrained display type, a single accent moment per view.
- **Patagonia** — the outdoor-adventure documentary imagery and earthy heritage-green ethos underneath a quiet frame.
- **Arc'teryx** — engineered, technical, monochrome-with-one-signature-accent product design language.
- **Aesop** — editorial restraint, warm-neutral surfaces, and typography-as-identity with almost no ornament.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Neutrals */
  --color-white: #FFFFFF;
  --color-paper: #FAFAFA;
  --color-cloud: #F2F2F2;
  --color-fog: #ECECEC;
  --color-neutral-light: #CBCBCB;
  --color-border: #D1D1D1;
  --color-ink: #000000;
  --color-off-black: #151515;
  --color-graphite: #212121;
  --color-slate: #494949;
  --color-stone: #636363;
  --color-mute: #B8B8B8;

  /* Colors — Brand accent */
  --color-compass-yellow: #FFAC00;
  --color-brand-yellow: #FFAA00;

  /* Colors — Heritage / imagery */
  --color-rivian-green: #629B5C;
  --color-taillight: #E84826;
  --color-sky: #77AFD8;
  --color-link: #9FA1B8;

  /* Colors — Semantic */
  --color-success: #4a8231;
  --color-error: #dc3127;
  --color-warning: #d58103;
  --color-info: #005e7d;
  --color-disabled: #8e8e8e;

  /* Typography — Families */
  --font-adventure: 'Adventure', 'Söhne', 'Helvetica Neue', Arial, ui-sans-serif, system-ui, sans-serif;
  --font-adventure-mono: 'Adventure Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Typography — Scale */
  --text-xs: 12px;   --text-xs--line-height: 16px;
  --text-sm: 14px;   --text-sm--line-height: 20px;
  --text-base: 16px; --text-base--line-height: 24px;
  --text-lg: 20px;   --text-lg--line-height: 28px;
  --text-xl: 24px;   --text-xl--line-height: 32px;
  --text-2xl: 32px;
  --text-3xl: 36px;
  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-6xl: 72px;
  --text-7xl: 96px;
  --text-8xl: 120px;
  --text-9xl: 200px;
  --text-display-lg: clamp(72px, 6.25vi + 40px, 120px);
  --text-display-base: clamp(56px, 5.21vi + 29.28px, 96px);
  --text-display-sm: clamp(44px, 3.65vi + 25.28px, 72px);
  --text-headline-xl: clamp(44px, 1.56vi + 36px, 56px);
  --leading-display: 0.96;
  --leading-headline: 1;
  --tracking-display: -0.025em;
  --tracking-headline: -0.02em;
  --tracking-label: -0.01em;
  --tracking-body: -0.01em;

  /* Spacing */
  --spacing-base: 4px;
  --navbar-padding: 12px;
  --navbar-toolbar-height: 50px;

  /* Border Radius */
  --radius-nano: 4px;
  --radius-micro: 12px;
  --radius-macro: 20px;
  --radius-mega: 40px;
  --radius-button: 36px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-base: 0 6px 16px -4px rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.08);
  --shadow-hero: 0 6px 20px -6px rgba(0,0,0,.08), 0 3px 10px -3px rgba(0,0,0,.08);
  --shadow-nav: 0 2px 8px rgba(0,0,0,.15);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Neutrals */
  --color-white: #FFFFFF;
  --color-paper: #FAFAFA;
  --color-cloud: #F2F2F2;
  --color-fog: #ECECEC;
  --color-neutral-light: #CBCBCB;
  --color-border: #D1D1D1;
  --color-ink: #000000;
  --color-off-black: #151515;
  --color-graphite: #212121;
  --color-slate: #494949;
  --color-stone: #636363;
  --color-mute: #B8B8B8;

  /* Colors — Brand accent */
  --color-compass-yellow: #FFAC00;
  --color-brand-yellow: #FFAA00;

  /* Colors — Heritage / imagery */
  --color-rivian-green: #629B5C;
  --color-taillight: #E84826;
  --color-sky: #77AFD8;
  --color-link: #9FA1B8;

  /* Colors — Semantic */
  --color-success: #4a8231;
  --color-error: #dc3127;
  --color-warning: #d58103;
  --color-info: #005e7d;
  --color-disabled: #8e8e8e;

  /* Typography — Families */
  --font-adventure: 'Adventure', 'Söhne', 'Helvetica Neue', Arial, ui-sans-serif, system-ui, sans-serif;
  --font-adventure-mono: 'Adventure Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Typography — Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 36px;
  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-6xl: 72px;
  --text-7xl: 96px;
  --text-8xl: 120px;
  --text-9xl: 200px;
  --text-display-lg: clamp(72px, 6.25vi + 40px, 120px);
  --text-display-base: clamp(56px, 5.21vi + 29.28px, 96px);
  --text-display-sm: clamp(44px, 3.65vi + 25.28px, 72px);
  --leading-display: 0.96;
  --leading-headline: 1;
  --tracking-display: -0.025em;
  --tracking-headline: -0.02em;
  --tracking-label: -0.01em;

  /* Spacing */
  --spacing-base: 4px;

  /* Border Radius */
  --radius-nano: 4px;
  --radius-micro: 12px;
  --radius-macro: 20px;
  --radius-mega: 40px;
  --radius-button: 36px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-base: 0 6px 16px -4px rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.08);
  --shadow-hero: 0 6px 20px -6px rgba(0,0,0,.08), 0 3px 10px -3px rgba(0,0,0,.08);
  --shadow-nav: 0 2px 8px rgba(0,0,0,.15);
}
```