What is Rivian's primary brand color?

Rivian Yellow at #ffac00 (rgb 255, 172, 0) is the single chromatic voltage on the landing page. It surfaces only 3 times in the captured render — every instance the Demo drive pill CTA in the top navigation. The brand declares four additional adventure accents in CSS — sage (#629b5c), ember (#e84826), sky-blue (#77afd8), and desert tan (#bc9c8a) — but none of them surface as page chrome; they sit inside semantic tokens (success / warning / info) or in product-line theme presets that don't render on the homepage. The chromatic discipline is the point: yellow earns its attention because it is the only color on the page.

What typography does Rivian use, and what should I use if Adventure isn't available?

Rivian runs Adventure, a proprietary face declared in CSS as `Adventure, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif`. The same face carries the 120px R1S marquee down to the 10px footnote label. Captured weights cluster at 400 (body and nav), 500 (links), and 600 (display and button labels). Display tracking is held at -0.025em (`--tracking-display`); body tracking sits at -0.14px. Adventure is not publicly licensed. Helvetica Neue is the documented stack fallback. The closest open-source substitute is Inter at weight 600 with -2.5% letter-spacing on display tiers; Söhne or Founders Grotesk are the closest paid alternatives for the geometric proportions.

Why does Rivian use a 9999px pill for one button and 4 to 40px rectangles for everything else?

The radius ladder runs in four steps — `--radius-nano` 4px, `--radius-micro` 12px, `--radius-macro` 20px, `--radius-mega` 40px — plus a 9999px pill that is reserved exclusively for the Demo drive CTA. Where Tesla holds every interactive surface at a single 4px corner and Porsche softens to 32px on photo tiles, Rivian uses the pill as the load-bearing interaction signal: it is the only round shape on a page of rectangles, the only yellow on a page of grayscale. The contrast does the work of a shadow, an icon, and a focus ring at once.

Why does Rivian invert from dark hero to white product band one viewport down?

The dark cinema hero (#151515 dashboard with the passenger map UI) and the white product band (the 120px R1S marquee above a transparent-background SUV render) tell two different stories. The dark band sells the technology — voice assistant, navigation, infotainment. The white band sells the vehicle — the R1S as a 7-seat all-electric truck with a $76,990 starting price. The Demo drive pill sits in the persistent top nav and rides both bands without color or shape changing. Most EV brands run a unified canvas; Rivian stages the inversion as a deliberate scroll event.

What's missing from this DESIGN.md spec?

Several pieces, documented in the Known Gaps section. The R1T pickup band, R3 hatchback band, and Charging / Gear Shop sub-routes were not captured — only the R1S landing slot. The four declared adventure accents (sage / ember / sky / tan) are bound to semantic tokens but never surface on the homepage, so their intended usage is inferred from the variable names rather than observed. The Rivian configurator (paint pickers, wheel options, interior swatches) holds dozens of color tokens behind auth and is out of scope. The in-car infotainment UI shares Adventure but uses its own touch-optimized component palette, handled by a separate spec. Motion easing tokens (`--ease-attract-standard` cubic-bezier(.4,0,.2,1), `--ease-shift-magnetic-70` cubic-bezier(.7,0,.3,1)) are declared but only the resting states were captured.

Rivian Design System

Rivian's design system as a DESIGN.md file.

About Rivian DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source rivian.com

Automotive

Rivian's marketing surface is the inverse of Tesla's. Where Palo Alto stages an unbroken white canvas with a single Electric Blue voltage, Irvine opens with a dark cinema band — the R1S center console rendered against a #151515 dashboard interior, a passenger map UI floating in the right third, and a #ffac00 Yellow "Demo drive" pill anchored to the top-right corner. Scroll one viewport and the canvas inverts to pure white for an oversized 120px R1S marquee in Adventure, the brand's proprietary face, set in weight 600 with -3px letter-spacing. The dual canvas is the brand's signature move: dark hero for the in-cabin technology story, white product band for the truck itself. The single yellow pill rides both bands without changing color.

This page packages the system into a single DESIGN.md file using the Google Labs open spec. Inside: 19 color tokens grouped into a deep-ink ladder (#151515 / #212121 / #494949 / #616161), an off-photo invert tier (#ffffff / #f2f2f2 / #cbcbcb / #e5e7eb), the single Rivian Yellow voltage at #ffac00, and four declared adventure accents (sage / ember / sky / tan) that surface only inside `--semantic-*` tokens; 12 typography tokens running through Adventure at weight 400/500/600 across a 10px-to-120px range with -0.025em display tracking; a four-step radius ladder (4 / 12 / 20 / 40) plus a 9999px pill; 9 spacing tokens; and 18 components covering the demo-drive pill, infotainment hero, R1S marquee, product card, top nav, cookie consent gate, and the dark voice-assistant chat overlay.

Hand the file to Claude, Cursor, or GitHub Copilot and the agent writes React surfaces that read as Rivian — Adventure at 600 with negative tracking, dark cinema heroes stacked over white product bands, yellow pill CTAs that ride both backgrounds, 40px mega tiles softening the photography — rather than a generic EV marketing template. The spec is worth studying because Rivian commits harder than almost any other automotive brand to the principle that the chromatic voltage should be scarce enough to count: three instances on the entire landing page, all the same pill, all the same color.

What makes it distinct

Single-CTA voltageRivian Yellow (#ffac00) appears 3 times on the page, every instance the Demo drive pill, never decoratively
Adventure typeface across the entire scalea proprietary face that runs at weight 600 from the 120px R1S marquee down to 14px button labels
Four-step radius ladder4px nano / 12px micro / 20px macro / 40px mega, plus a 9999px pill reserved for the yellow CTA alone
Cinema dark over product whitea #151515 dashboard hero stacks above an unbroken white R1S band, the cars carry every saturated moment
Adventure-palette accents held off-pagesage (#629b5c), ember (#e84826), sky (#77afd8), tan (#bc9c8a) are declared but never surface as chrome

Live at rivian.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

rivian.com

Explore Rivian

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.