Design system do rivian.com

---
version: alpha
name: "rivian.com"
description: "Design system extracted from https://rivian.com/ on 2026-09-28"
colors:
  background: "#f2f2f2"
  surface: "#9fa1b8"
  surface-2: "#ffffff"
  surface-3: "#cbcbcb"
  foreground: "#ffffff"
  muted-foreground: "#000000"
  primary: "#000000"
  on-primary: "#ffffff"
  secondary: "#ffaa00"
  border: "#e8e8e8"
typography:
  headline-display:
    fontFamily: "Adventure"
    fontSize: "72px"
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: "-3px"
  headline-lg:
    fontFamily: "Adventure"
    fontSize: "72px"
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: "-1.8px"
  headline-md:
    fontFamily: "Adventure"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "Adventure"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.25"
  label-md:
    fontFamily: "Adventure"
    fontSize: "11px"
    fontWeight: 400
    lineHeight: "1.55"
  button:
    fontFamily: "Adventure"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.14"
    letterSpacing: "-0.5px"
rounded:
  none: "0px"
  full: "9999px"
  sm: "4px"
  2xl: "99px"
  xl: "20px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "28px"
  7: "32px"
  8: "40px"
  9: "80px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "8px 12px"
  button-secondary:
    backgroundColor: "#ffaa00"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "8px 16px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "40px"
    height: "56px"
    padding: "8px 16px"
  input:
    backgroundColor: "#212121"
    rounded: "4px"
    height: "56px"
---

# rivian.com

## Overview

Rivian: Electric Vehicles Designed For Adventure: Discover Rivian's long-range electric vehicles, innovative EV trucks, SUVs and vans built for adventure. Join the movement towards a sustainable future.

Pill-shaped controls, layered shadows for depth, large display type at 72px / 600, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 773 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f2f2f2` | Page background |
| surface | `#9fa1b8` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#ffffff` | Secondary surface |
| surface-3 | `#cbcbcb` | Secondary surface |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#000000` | Secondary text, captions |
| primary | `#000000` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#ffaa00` | Secondary accent (amber) |
| border | `#e8e8e8` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#f2f2f2`, `#9fa1b8`, `#000000`, `#212121`, `#ffffff`, `#ffac00`, `#629b5c`, `#e84826`.

Gradients in use: `linear-gradient(rgb(0, 0, 0) 0%, rgb(93, 118, 125) 100%)`; `linear-gradient(rgb(31, 33, 33) 0%, rgb(37, 40, 38) 100%)`; `linear-gradient(rgb(242, 242, 242) 0%, rgb(139, 168, 189) 100%)`.

The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Adventure** for h1, h2, body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Adventure | 72px | 600 | 1 | -3px |
| headline-lg | Adventure | 72px | 600 | 1 | -1.8px |
| headline-md | Adventure | 24px | 600 | 1.4 | normal |
| body-md | Adventure | 16px | 400 | 1.25 | normal |
| label-md | Adventure | 11px | 400 | 1.55 | normal |
| button | Adventure | 14px | 500 | 1.14 | -0.5px |

Type scale in use: 10px, 11px, 12px, 14px, 16px, 20px, 24px, 32px, 44px, 56px, 72px. Base body size 16px.

The H1 renders at 72px / 600, center aligned, up to 462px wide, tracking -3px. Sample: "Find your Rivian".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 28, 32, 40, 80 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 32, 40, 48 px.
- Content max width: 1280px, centred.
- Breakpoints: 480px, 640px, 768px, 1024px, 1440px.
- Header: 56px tall, relative, background `rgb(255, 255, 255)`, bottom hairline 1px solid rgba(209, 209, 209, 0.5); 3 nav links at 10px / 400 (Demo drive).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.15) 0px 2px 8px 0px`
- shadow-2: `rgb(159, 161, 184) 0px 0px 10px 0px`

## Shapes

- Buttons: 9999px
- Inputs: 4px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, full 9999px, sm 4px, 2xl 99px, xl 20px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 9999px, height 32px, padding 8px 12px, 14px / 600. Sample label: "Vehicles".

### Button, secondary

Background `#ffaa00`, text `#000000`, border none, radius 9999px, height 32px, padding 8px 16px, 14px / 600. Sample label: "Demo drive".

### Button, primary

Background `#000000`, text `#ffffff`, border none, radius 40px, height 56px, padding 8px 16px, 16px / 500. Sample label: "Explore".

### Input

Height 56px, background `#212121`, border 0px solid #ffffff, radius 4px, 16px text, padding 20px 16px.

### Link

Colour `#ffffff`, no underline at rest, weight 500.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1280px | 120px | 10px | 72px, 1 line, center | 56px, 1 links, 3 CTA | media behind/overlapping text | 3→3 col; 3→2 col; 2→1 col | content-width |
| laptop 1024px | 864px | 120px | 10px | 72px, 1 line, center | 56px, 1 links, 3 CTA | media behind/overlapping text | 3→3 col; 3→2 col; 2→1 col | content-width |
| tablet 768px | 680px | 121px | 10px | 56px, 1 line, center | 50px, hamburger (Open), 1 CTA | media behind/overlapping text | 3→3 col; 3→2 col; 2→1 col | content-width |
| phone 390px | 350px | 16px | 10px | 44px, 1 line, center | 50px, hamburger (Open), 1 CTA | media behind/overlapping text | 3→1 col; 2→1 col; 2→1 col | content-width |

- H1 goes 72px → 44px (61%), 1 → 1 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 56px → 50px.
- Body text stays 10px at every width.
- Phone side gutter 16px.

## Interaction & Motion

64 elements carry transitions; typical 0.3s with cubic-bezier(0.83, 0, 0.17, 1), mostly on background-color, color, border-color. 2 running keyframe animations (fadeIn 0.3s 1; sierra-pulse 0.3s 1).

- Hover on button-primary ("Demo drive"): background #ffaa00 → #ffbd2e; cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke | 0.15s | cubic-bezier(0.83, 0, 0.17, 1).
- Hover on button-secondary ("Have a question?"): background oklch(0.96 0 0) → oklch(0.92 0 0); cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke | 0.15s | cubic-bezier(0.83, 0, 0.17, 1).
- Hover on body-link ("Shop now"): no visible change; cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke | 0.3s | cubic-bezier(0.83, 0, 0.17, 1).
- Focus on button-primary: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Focus on body-link: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltip triggers exist (3 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 1 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- No scroll-reveal: content is visible without scrolling into view.
- Portal roots present: modal-root, toast-root, portal-root.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#000000` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in Adventure.
- Do match corner radii per element class (buttons 9999px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.
- Note: Body text contrast is 1.1:1 against the page background (below 4.5:1).