Design System
Analysis of Rivian

A near-black-on-white outdoor-tech system where almost everything is ink and surface — restraint held tight until one electric Rivian Yellow pill earns the click.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in Adventure, Rivian's proprietary brand sans — substituted here with the nearest Google match, Inter. Hierarchy is built almost entirely from size and tight negative tracking; weight rarely exceeds 600.

03 — Components

Button Variants

button-primary
Rivian Yellow pill with near-black text — the single saturated action, reserved for the one CTA that matters.
button-dark
Near-black pill for inverted bands and secondary commit actions.
button-secondary
Outlined 40px-radius button on white — the quiet alternative to the yellow CTA.
button-pill
Tonal grey pill used for nav clusters and filter chips.
04 — Components

Cards & Surfaces

Image-led product cards on white, separated by soft hairlines rather than shadow — depth stays nearly flat, with only a subtle lift on hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px base unit drives the rhythm — 4 / 8 / 12 / 16 / 24 / 32 / 48 — with generous whitespace between full-bleed media bands.

07 — Foundations

Border Radius

Rounded and soft throughout: the full pill is the dominant control shape, with a generous 40px on larger buttons and 20px on cards.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default: flat surfaces separated by #d8d8d8 rules and tonal bands.
Level 1 — a subtle 0 2px 8px rgba(0,0,0,.15) lift for floating elements and card hover.
Level 2 — a diffuse lavender-tinted glow on select product surfaces; ambient light, not a drop shadow.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxFeature grids collapse to single column; centered nav condenses to a menu; 56px display scales down while keeping its tight tracking.
Tablet768–1023pxFour-up product grids become two-up; hero media stays full-bleed; pill nav stays inline.
Laptop1024–1279pxFull multi-column layout returns; max content width caps around 1200px.
Desktop≥ 1280pxWide full-bleed media bands with generous margins; type and photography carry the page.

Layout note: the site is editorial and image-forward — stacked full-width feature bands rather than boxed cards, with a centered pill cluster for primary navigation.

Configuration Tiers

Sample pricing pattern using the system's tokens — dark "feature" card, yellow accent dots, and a Rivian Yellow CTA on the highlighted tier. (Illustrative content; rivian.com presents these as vehicle trims.)

Adventure
$69,900est.
The dual-motor starting point for everyday trails.
  • Dual-motor AWD
  • 270 mi range
  • Standard interior
  • 11-speaker audio
Ascend● Most popular
$85,900est.
Quad-motor performance with the premium cabin.
  • Quad-motor AWD
  • 410 mi max range
  • Premium interior
  • Driver+ assist
Launch Edition
$98,500est.
First-run trim with exclusive finishes.
  • Quad-motor AWD
  • Exclusive paint
  • Launch badging
  • Priority delivery

Data Table

A reservations-style table built from the same hairlines, tonal header band, and pill status chips. (Illustrative content.)

IDVehicleReservationStatusWhen
R2-4821R2 AdventureForest GreenConfirmed2h ago
R1S-9920R1S AscendEl Cap GraniteIn reviewYesterday
R1T-3310R1T AdventureLimestoneConfirmed2 days ago
R3-1184R3XStorm BlueWaitlist4 days ago
R2-7752R2 LaunchGlacier WhiteConfirmed1 week ago
1–5 of 412
123

Account Forms

Sign-in and registration cards using the input, divider, and pill-button tokens. (Illustrative content.)

Sign in

Welcome back

OR
Create account

Join the adventure

OR