Rivian design system

What font does Rivian use?

Rivian’s website uses Liga for headings and Adventure for body text. Liga is not on Google Fonts; the closest free match is Figtree; Adventure is not on Google Fonts; the closest free match is Figtree.

Rivian colour palette

Rivian’s home page is light (#FFFFFF background, #151515 text) and uses #FFAC00 for its main actions. Its palette: #F2F2F2, #9FA1B8, #FFFFFF, #000000, #212121, #ECECEC.

• #F2F2F2
  54.1% · backgrounds
• #9FA1B8
  14.9% · backgrounds
• #FFFFFF
  10% · backgrounds, text
• #000000
  9.9% · backgrounds, text
• #212121
  6.3% · backgrounds
• #ECECEC
  3.4% · backgrounds
• #8BA8BD
  0.6% · backgrounds
• #FFAC00
  0.2% · backgrounds
• #629B5C
  0.1% · backgrounds
• #E84826
  0.1% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Rivian’s largest type is 360px at weight 500.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 52px, 56px.

Corner radii: 4px, 8px, 12px, 20px, 36px, pill. 5 shadow levels measured.

What makes Rivian look like Rivian

Almost entirely neutral: 99% of the page is painted in #F2F2F2 and #9FA1B8.

#8BA8BD is an accent: 0.6% of the page, as small fills such as buttons and badges. Keep it to small areas.

#FFAC00 is an accent: 0.2% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (360px Liga) is medium weight, not bold (500), tracked to -0.022em, in capitals.

Rivian DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Rivian’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Rivian’s product, so use your own name, words and images.

Download Rivian DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Rivian’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #F2F2F2; /* Surface */
  --color-text: #151515; /* Text */
  --color-text-muted: #636363; /* Text muted */
  --color-border: #CBCBCB; /* Border */
  --color-action: #FFAC00; /* Action */
  --color-on-action: #000000; /* On action */
  --color-negative: #E84A26; /* Negative */
  --color-9fa1b8: #9FA1B8; /* 14.9% of the page, as fills */
  --color-212121: #212121; /* 6.3% of the page, as fills */
  --color-ececec: #ECECEC; /* 3.4% of the page, as fills */
  --color-8ba8bd: #8BA8BD; /* 0.6% of the page, as fills */
  --font-body: "Adventure", "Figtree", sans-serif; /* Adventure on the site; Figtree renders */
  --font-interface: "Sohne", "Inter Tight", sans-serif; /* Sohne on the site; Inter Tight renders */
  --font-display: "Liga", "Figtree", sans-serif; /* Liga on the site; Figtree renders */
  --type-display-1: 360px; /* Display 1, weight 500 */
  --type-display-1-leading: 360px;
  --type-display-1-tracking: -0.022em;
  --type-display-2: 72px; /* Display 2, weight 600 */
  --type-display-2-leading: 72px;
  --type-display-2-tracking: -0.025em;
  --type-display-3: 56px; /* Display 3, weight 600 */
  --type-display-3-leading: 60px;
  --type-display-3-tracking: -0.045em;
  --type-display-4: 44px; /* Display 4, weight 600 */
  --type-display-4-leading: 48px;
  --type-display-4-tracking: -0.02em;
  --type-display-5: 36px; /* Display 5, weight 600 */
  --type-display-5-leading: 43.2px;
  --type-display-5-tracking: -0.02em;
  --type-headline-large: 32px; /* Headline Large, weight 500 */
  --type-headline-large-leading: 36px;
  --type-headline-large-tracking: -0.021em;
  --type-headline-small: 24px; /* Headline Small, weight 600 */
  --type-headline-small-leading: 28px;
  --type-headline-small-tracking: -0.021em;
  --type-title: 20px; /* Title, weight 400 */
  --type-title-leading: 28px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 24px;
  --type-body-large-tracking: -0.02em;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 20px;
  --type-label-large: 11px; /* Label Large, weight 400 */
  --type-label-large-leading: 17px;
  --type-label-small: 10px; /* Label Small, weight 400 */
  --type-label-small-leading: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;

How this was measured

PikSpec’s scanner read the rivian.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Rivian is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Rivian.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.