---
name: Rivian
description: "This site is an excellent reference for high-end automotive design, demonstrating how to balance cinematic imagery with a clean, structured design system and restrained accent usage."
version: alpha

colors:
  background: "#ffffff"
  primary: "#151515"
  secondary: "#616161"
  tertiary: "#f5a623"
  neutral: "#b8b8b8"
  bg-soft: "#f2f2f2"
  bg-quiet: "#9fa1b8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2.5px"
  heading-lg:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1.8px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "-0.32px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.14px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Premium electric vehicle brand emphasizing adventure, rugged capability, and refined minimalism.

*A high-end outdoor equipment brand meets automotive engineering.*

## Colors

High-contrast monochrome base with warm golden-orange accent for action, supported by muted blue-grays in gradients.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#151515`)** — uses `ink` token
- **Secondary text (`#616161`)** — uses `ink-soft` token
- **Accent (`#f5a623`)** — uses `accent` token
- **Muted (`#b8b8b8`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Tight letter-spacing on large display text
- High contrast between display and body weights
- Uppercase used sparingly for navigation elements

## Layout

Full-width hero sections followed by centered content blocks on light backgrounds.

*Rhythm:* Strict 4px grid system with generous whitespace around major content blocks.

## Elevation & Depth

- 0px 2px 8px 0px rgba(0, 0, 0, 0.15)
- 0px 0px 10px 0px rgb(159, 161, 184)
- 0px 0px 5px 0px rgb(128, 128, 128)
- Borders: 1px solid rgb(229, 231, 235) for subtle structure.

## Shapes

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

## Components

- **button:** Pill-shaped primary buttons with dark background or transparent outlines with text labels.
- **card:** Image-heavy cards with rounded corners (20px radius) and subtle shadows.
- **chip:** Capsule-shaped category selectors (Technology, Performance, Design) with active state differentiation.
- **input:** Standard rounded input fields with clear borders.
- **hero:** Full-bleed cinematic photography with centered overlaid text and call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use decorative serif fonts — screenshot shows clean, humanist sans-serif typography.
- Don't use excessive drop shadows — screenshot shows minimal, soft box shadows only on specific elements.
- Don't use a cluttered layout — screenshot shows generous whitespace and a focused, grid-based structure.
- Don't use a complex color palette — screenshot shows a dominant monochrome scheme with a single warm accent.
- Don't use harsh, saturated background colors — screenshot shows neutral whites, soft grays, and photographic backgrounds.
- Don't use uppercase for body copy — screenshot shows uppercase used only sparingly for navigation and fine print.

---

## System Prompt (paste into AI agent)

```
This is a premium automotive website for an electric vehicle brand focused on adventure and capability. The design system uses a high-contrast monochrome base (#151515 ink on #ffffff background) with a warm golden-orange accent (#f5a623) for key calls to action. Typography is clean and humanist-sans-serif, with bold, tightly-spaced display text (up to 72px with -2.5px letter-spacing) for headlines and lighter weights for body copy. The layout is full-bleed and photographic, prioritizing cinematic hero images over text-heavy sections. Surfaces are minimal, using generous whitespace and subtle shadows. Key donts: avoid using decorative serifs, avoid cluttered layouts, and avoid using the accent color excessively.
```