Rivian

# Rivian — Style Reference
> Subtle Power, Precision Engineering.

**Theme:** light

**Site:** https://rivian.com

This system evokes a sense of understated power and refined utility, much like the vehicles it represents. It balances a strong, nearly achromatic palette with crisp typography and subtle interactive accents. The aesthetic is anchored by deep blacks and bright whites, creating high contrast that feels purposeful rather than stark, while carefully articulated letter-spacing at larger type sizes adds a layer of precision. Rounded corners are reserved almost exclusively for interactive elements, softening points of engagement within an otherwise clean, angular visual language.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, interactive backgrounds, strong accents. |
| Arctic White | `#ffffff` | `--color-arctic-white` | Page backgrounds, card surfaces, inverted text. |
| Dark Forrest Gradient | `#252826` | `--color-dark-forrest-gradient` | Background for hero sections, creating dramatic depth. |
| Abyss Blue Gradient | `#000000` | `--color-abyss-blue-gradient` | Deep background for impactful moments, conveying sophistication. |
| Sunbeam Yellow | `#ffac00` | `--color-sunbeam-yellow` | Primary CTA background, active nav highlights — a burst of energy against the monochrome. |
| Forest Green | `#629b5c` | `--color-forest-green` | Secondary accent for specific interactive elements. |
| Desert Orange | `#e84826` | `--color-desert-orange` | Tertiary accent for specific interactive elements. |
| Ocean Blue | `#77afd8` | `--color-ocean-blue` | Quaternary accent for specific interactive elements. |
| Sapphire Glow | `#0066ff` | `--color-sapphire-glow` | Decorative illustration fill, subtle UI flourishes. |
| Vivid Green | `#7af400` | `--color-vivid-green` | Decorative illustration fill, subtle UI flourishes. |
| Slate Gray | `#151515` | `--color-slate-gray` | Secondary text, subtle background fills, borders. |
| Cloud Drifter | `#f2f2f2` | `--color-cloud-drifter` | Subtle background surfaces, hover states for neutrals. |
| Ash Concrete | `#e5e7eb` | `--color-ash-concrete` | Divider lines, subtle borders, background elements. |
| Dark Asphalt | `#212121` | `--color-dark-asphalt` | Input backgrounds, elevated background elements. |
| Chrome Accent | `#cfd0d0` | `--color-chrome-accent` | Subtle UI elements, non-semantic highlights. |
| Horizon Fade Gradient | `#f2f2f2` | `--color-horizon-fade-gradient` | Section background, suggesting open sky or subtle elevation. |
| Success | `#4a8231` | `--color-success` | Semantic color for positive feedback. |
| Error | `#dc3127` | `--color-error` | Semantic color for critical feedback. |
| Warning | `#d58103` | `--color-warning` | Semantic color for cautionary notifications. |
| Info | `#005e7d` | `--color-info` | Semantic color for informational messages. |

## Tokens — Typography

### Adventure
- **Substitute:** system-ui, sans-serif
- **Weights:** 400, 500, 600
- **Sizes:** 10px, 11px, 12px, 14px, 16px, 20px, 24px, 32px, 36px, 44px, 56px, 72px, 120px
- **Line height:** 0.93, 1, 1.07, 1.09, 1.11, 1.13, 1.14, 1.17, 1.2, 1.25, 1.33, 1.4, 1.43, 1.5, 1.55
- **Letter spacing:** -0.045em at 120px, -0.042em at 72px, -0.036em at 56px, -0.031em at 44px, -0.025em at 36px, -0.021em at 32px, -0.02em at 24px, -0.01em at 20px, otherwise normal
- **Role:** The primary typeface for all content. Its range of weights and optical adjustments via letter-spacing at larger sizes ensure legibility and a distinct high-fidelity feel, from small captions to large display headings. The precise letter-spacing at display sizes creates a signature tight, technical aesthetic.

### Liga
- **Substitute:** system-ui, sans-serif
- **Weights:** 500
- **Sizes:** 360px
- **Line height:** 1
- **Letter spacing:** -0.022em
- **Role:** Reserved for monumental display headings, likely large brand statements. The extreme size and specific letter-spacing create an impactful, almost structural visual element.

### Sohne
- **Substitute:** system-ui, sans-serif
- **Weights:** 500
- **Sizes:** 12px
- **Line height:** 1.33
- **Letter spacing:** normal
- **Role:** Used for specific utility or annotation text, possibly meta-information, offering a clean, unobtrusive presence at small sizes.

## Tokens — Type Scale

Perfect Fourth (1.333) from 10px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 10px | 1.55 | — |
| heading | 20px | 1.25 | -0.2px |
| heading-lg | 24px | 1.2 | -0.24px |
| display | 32px | 1.17 | -0.672px |
| display-lg | 36px | 1.14 | -0.9px |
| display-xl | 44px | 1.13 | -1.364px |
| display-xxl | 56px | 1.11 | -2.016px |
| display-3xl | 72px | 1.09 | -3.024px |
| display-4xl | 120px | 1.07 | -5.4px |

## Tokens — Spacing

- **Section gap:** 24-48px
- **Card padding:** 0px
- **Element gap:** 4-28px

## Tokens — Radius

- **General:** 8px
- **Buttons:** 40px
- **Inputs:** 4px

## Layout

The page primarily uses a max-width contained layout, approximately 1200-1400px, centered on the screen. Hero sections are exceptions, often full-bleed with dramatic photography or large typography over gradient backgrounds, serving as impactful entry points. Content is typically arranged in balanced two-column layouts featuring text alongside visuals (vehicles), or stacked centered content blocks. Sections are clearly delineated by varied backgrounds (light gray, white, or dark gradients), often creating a subtle alternating rhythm down the page. Navigation is a sticky top bar with clear, minimalist links and distinct accent buttons.

## Imagery

Photography is the dominant visual medium, featuring vehicles in both studio settings (tight product crops on white/gray gradients) and natural, outdoor environments (mountain roads, urban landscapes). The treatment emphasizes the vehicle as the primary subject, often full-bleed or large-scale, conveying capability and lifestyle without explicit human interaction. Photography is high-key in outdoor shots, showcasing clarity and detail, while studio shots lean towards dramatic lighting. Icons are minimal, outlined, and monochromatic, integrated subtly into the UI rather than serving as prominent visual elements.

## Components

### Hero Promo Banner with CTA Buttons

### Vehicle Info Card — R1S

### Location Selector Dropdown

### Primary Filled Button - Arctic White
*Primary Call-to-Action*

Button with `Arctic White` (#ffffff) background, `Midnight Ink` (#000000) text, `Ash Concrete` (#e5e7eb) border, 40px border radius, 8px vertical padding, 16px horizontal padding. Prominent and approachable.

### Primary Filled Button - Midnight Ink
*Inverted Primary Call-to-Action*

Button with `Midnight Ink` (#000000) background, `Arctic White` (#ffffff) text, `Ash Concrete` (#e5e7eb) border, 40px border radius, 8px vertical padding, 16px horizontal padding. Used against lighter backgrounds for high contrast.

### Ghost Button - Arctic White
*Secondary Call-to-Action*

Transparent background button with `Arctic White` (#ffffff) text, no visible border, 9999px border radius (pill shaped), 8px vertical padding, 12px horizontal padding. Subtle and contextual interaction.

### Ghost Button - Midnight Ink
*Secondary Call-to-Action on light backgrounds*

Transparent background button with `Midnight Ink` (#000000) text, no visible border, 9999px border radius (pill shaped), 8px vertical padding, 12px horizontal padding. Subtle and contextual interaction.

### Link Button
*Tertiary Call-to-Action*

Transparent background button with `Slate Gray` (#151515) text, no border radius (sharp), 12px vertical padding, 16px horizontal padding. Functions as a text link with button-like padding.

### Default Card
*Content Grouping*

Card with transparent background, no border radius, no box shadow, no padding. Used for grouping content without adding additional visual weight.

### Login Input Field
*Data Entry*

Input with `Dark Asphalt` (#212121) background, `Arctic White` (#ffffff) text, `Arctic White` (#ffffff) border, 4px border radius, 20px top padding, 16px horizontal padding, 0px bottom padding. Suggests a dark, secure input experience.

## Guidelines

### Do

- Prioritize 'Adventure' font for all text, applying specific letter-spacing for display sizes 20px and above, ensuring a precise, technical feel.
- Use `Midnight Ink` (#000000) for primary text on `Arctic White` (#ffffff) backgrounds, and `Arctic White` (#ffffff) text on `Midnight Ink` (#000000) backgrounds for maximum contrast and readability.
- Apply a 40px border radius to all primary and secondary buttons, crafting an approachable, modern form factor.
- Employ the `Sunbeam Yellow` (#ffac00) as the high-visibility accent color for primary call-to-action buttons, creating a deliberate focal point.
- Maintain minimal padding within cards (0px), allowing content to define its own space and emphasizing a clean, unadorned aesthetic.
- Utilize dark backgrounds like `Dark Forrest Gradient` or `Abyss Blue Gradient` for hero sections to create a premium, immersive brand introduction.
- Incorporate subtle, desaturated background colors like `Ash Concrete` (#e5e7eb) and `Cloud Drifter` (#f2f2f2) for section separation while maintaining visual lightness.

### Don't

- Do not use box-shadows for elevation; rely on color shifts between surfaces to indicate depth, maintaining a flat, modern impression.
- Avoid generic border radii; use the specified 40px for buttons and 4px for inputs, reserving other radii sparingly for specific elements.
- Do not introduce additional vibrant hues beyond the established accent colors (`Sunbeam Yellow`, `Forest Green`, `Desert Orange`, `Ocean Blue`), maintaining the sophisticated monochromatic base.
- Refrain from heavy text ornamentation like underlines or excessive bolding; the type scale and precise letter-spacing are sufficient for visual hierarchy.
- Do not use generic system fonts; 'Adventure' is critical for brand identity, with 'Liga' for monumental statements and 'Sohne' for microcopy.
- Do not use static header navigation on lighter body content; ensure it appears on a dark background or with an appropriate transparent overlay to match the brand aesthetic.
- Avoid cluttering card or section backgrounds with gradients – use them strategically for dramatic full-width hero or major content blocks only.

## Agent Prompt Guide

### Quick Color Reference
- Text: #000000 (Midnight Ink)
- Background: #ffffff (Arctic White)
- CTA: #ffac00 (Sunbeam Yellow)
- Border: #e5e7eb (Ash Concrete)
- Accent: #ffac00 (Sunbeam Yellow)

### 3-5 Example Component Prompts
1. Create a hero section: full-width, background is `Dark Forrest Gradient` (linear-gradient(rgb(37, 40, 38), rgb(0, 0, 0))). Title 'Choose your own savings' using 'Adventure' font, size 56px, weight 500, #ffffff, letter-spacing -0.036em. Subtext 'For a limited time...' using 'Adventure' font, size 16px, weight 400, #ffffff. Add a 'Primary Filled Button - Arctic White' labeled 'View all offers'.
2. Design a navigation bar: `Arctic White` (#ffffff) background, with `Midnight Ink` (#000000) text for main links ('Vehicles', 'Charging'). Include a 'Primary Filled Button - Sunbeam Yellow' with text 'Demo drive', 'Adventure' font, size 14px, weight 600, 40px border radius, 8px vertical padding, 16px horizontal padding.
3. Implement a feature card: `Default Card` styling (transparent background, no shadow/radius/padding). Heading 'Meet R2' using 'Adventure' font, size 44px, weight 500, #000000, letter-spacing -0.031em. Body text 'Explore the lineup and reserve yours today.' using 'Adventure' font, size 20px, weight 400, #000000.
4. Create an input field: for login, use `Dark Asphalt` (#212121) background, `Arctic White` (#ffffff) text, `Arctic White` (#ffffff) border, 4px border radius, 20px top padding, 16px horizontal padding, 0px bottom padding. Placeholder text should be 'Adventure' font, size 16px, weight 400, #b8b8b8.