# Rivian · Design system migration spec

> Source: https://rivian.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The design system operates like a high-end outdoor equipment brand crossed with precision automotive engineering—every component is purpose-built, durable, and stripped of ornamentation. Its identity DNA balances rugged adventure with refined minimalism, resulting in a visual language that feels equally at home on a trailhead or a showroom floor.

**One-liner:** Premium electric vehicle brand emphasizing adventure, rugged capability, and refined minimalism.
**Keywords:** Adventure · Electric · Rugged · Minimal · Outdoors
**Analogy:** A high-end outdoor equipment brand meets automotive engineering.

## 2. Color

A high-contrast monochrome palette forms the foundation, with blacks and whites providing a clean canvas for photography and content. The system reserves a single warm golden-orange accent for calls to action, ensuring these interactive moments stand out with clear purpose.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f2f2f2` | card background |
| `--bg-quiet` | `#9fa1b8` | quiet area |
| `--ink` | `#151515` | body text |
| `--ink-soft` | `#616161` | secondary text |
| `--muted` | `#b8b8b8` | placeholder |
| `--accent` | `#f5a623` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The principle is restraint: color is applied sparingly to guide attention, not to decorate.

## 3. Typography

Typography follows a humanist sans-serif category, using weight and scale to create hierarchy. Bold, tightly-spaced display headlines contrast with lighter body weights, while uppercase letters are reserved exclusively for navigation elements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 500 | -2.5px | Main hero headlines |
| heading-lg | 32px | 1.1 | 500 | -1.8px | Section headlines |
| body-lg | 20px | 1.2 | 400 | -0.5px | Subheadings and descriptions |
| body | 16px | 1.25 | 400 | -0.32px | Standard text and navigation |
| small | 14px | 1.4 | 400 | -0.14px | Fine print and metadata |

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

## 4. Spacing

Spacing follows a strict 4px grid, creating consistent vertical rhythm and generous whitespace around major content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px grid system with generous whitespace around major content blocks.

## 5. Surfaces

Surfaces are minimal, relying on soft, subtle shadows for elevation rather than heavy borders or fills. The design uses thin, light borders sparingly for structural clarity, keeping the focus on content and photography.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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.

## 6. Layout

The layout skeleton begins with full-bleed, cinematic hero sections that dominate the viewport. These are followed by centered, generous content blocks arranged on a clean, light-background grid.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and refinement over complex choreography. All interactive state changes use smooth, high-easing transitions focused on color, opacity, and width rather than elaborate animations.

- **Durations:** micro 100ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.83, 0, 0.17, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover
  - Width and opacity transitions for expandable elements

- **Hover:** Smooth color transitions on text and background elements.
- **Click:** Immediate visual feedback with opacity changes.
- **Transition:** Consistent use of cubic-bezier(0.83, 0, 0.17, 1) for all interactive state changes.
- **Keyboard:** Standard focus management for navigation and buttons.

## 8. Voice & Don'ts

The editorial voice is confident and adventurous, using bold, imperative headlines and direct, action-oriented calls to action. Language avoids technical jargon and aggressive sales language in favor of clear, informative statements.

- **Tone:** Confident, adventurous, and informative.
- **Headline style:** Bold, imperative statements (e.g., 'Find your Rivian').
- **CTA style:** Direct and action-oriented (e.g., 'Design your R1T', 'Demo drive').
- **Avoid:** Technical jargon / Overly aggressive sales language / Complicated sentence structures

### Don'ts
- ❌ 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.

The system deliberately excludes decorative serif fonts, cluttered layouts, and complex color palettes to maintain its focused, cinematic clarity.

## System Prompt (paste into AI tool)

```
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.
```
