--- version: alpha name: "rivian.com" description: "Design system extracted from https://rivian.com/ on 2026-10-28" colors: background: "#ffffff" surface: "#f2f2f2" surface-2: "#cbcbcb" foreground: "#ffffff" primary: "#000000" on-primary: "#ffffff" secondary: "#ffaa00" border: "#e8e8e8" typography: headline-display: fontFamily: "Adventure" fontSize: "72px" fontWeight: 600 lineHeight: "72px" letterSpacing: "-3px" headline-lg: fontFamily: "Adventure" fontSize: "72px" fontWeight: 600 lineHeight: "72px" letterSpacing: "-1.8px" headline-md: fontFamily: "Adventure" fontSize: "24px" fontWeight: 400 lineHeight: "1.4" body-md: fontFamily: "Adventure" fontSize: "14px" fontWeight: 400 lineHeight: "20px" label-md: fontFamily: "Adventure" fontSize: "16px" fontWeight: 400 lineHeight: "24px" button: fontFamily: "Adventure" fontSize: "14px" fontWeight: 600 lineHeight: "16px" letterSpacing: "-0.14px" rounded: none: "0px" full: "9999px" sm: "4px" 2xl: "40px" xl: "20px" spacing: unit: "4px" 1: "8px" 2: "12px" 3: "16px" 4: "20px" 5: "28px" 6: "32px" 7: "40px" 8: "80px" components: button-ghost: backgroundColor: "#ffffff" textColor: "#000000" typography: "{typography.button}" rounded: "9999px" height: "32px" padding: "8px 12px" button-secondary: backgroundColor: "#ffaa00" textColor: "#000000" typography: "{typography.button}" rounded: "9999px" height: "32px" padding: "8px 16px" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "40px" height: "56px" padding: "8px 16px" input: backgroundColor: "#212121" rounded: "4px" height: "56px" --- # rivian.com ## Overview Rivian: Electric Vehicles Designed For Adventure: Discover Rivian's long-range electric vehicles, innovative EV trucks, SUVs and vans built for adventure. Join the movement towards a sustainable future. Pill-shaped controls, layered shadows for depth, large display type at 72px / 600, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 774 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("Design yours"), rest - `screenshots/c-button-1--focus.png`: Button 1 ("Design yours"), focus - `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest - `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover - `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus - `screenshots/c-icon-button-1--active.png`: Icon button 1, active - `screenshots/c-link-1--rest.png`: Text link 1 ("full offer details"), rest - `screenshots/c-link-1--focus.png`: Text link 1 ("full offer details"), focus - `screenshots/c-text-input-1--rest.png`: Text input 1, rest - `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled - `screenshots/c-text-input-1--filled.png`: Text input 1, filled - `screenshots/c-text-input-1--invalid.png`: Text input 1, invalid - `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Vehicles"), rest - `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Vehicles"), hover - `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("Vehicles"), clicked - `screenshots/c-tabs-1--rest.png`: Tabs 1, rest - `screenshots/c-tabs-1--selected.png`: Tabs 1, another tab selected - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Pre-Owned"), rest - `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Pre-Owned"), hover - `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest - `screenshots/c-language-switch-1--rest.png`: Language / region switch 1 ("US"), rest - `screenshots/c-language-switch-1--hover.png`: Language / region switch 1 ("US"), hover - `screenshots/c-overlay-dialog-1--open.jpg`: Dialog / modal 1 opened by language-switch "US" - `screenshots/c-language-switch-1--open.png`: Language / region switch 1 ("US"), open (trigger) - `screenshots/c-card-1--rest.png`: Card 1, rest - `screenshots/c-list-1--rest.png`: Styled list 1 ("1.99% APR Offer: Availab"), rest - `screenshots/c-newsletter-form-1--rest.png`: Newsletter / signup form 1 ("EmailZip codeSubscribe1 "), rest - `screenshots/c-button-2--rest.png`: Button 2 ("Technology"), rest - `screenshots/c-button-2--hover.png`: Button 2 ("Technology"), hover - `screenshots/c-link-2--rest.png`: Text link 2 ("Explore R1S Tri"), rest - `screenshots/c-link-2--hover.png`: Text link 2 ("Explore R1S Tri"), hover - `screenshots/c-link-2--focus.png`: Text link 2 ("Explore R1S Tri"), focus - `screenshots/c-link-2--active.png`: Text link 2 ("Explore R1S Tri"), active - `screenshots/c-button-3--rest.png`: Button 3 ("Explore"), rest - `screenshots/c-button-3--focus.png`: Button 3 ("Explore"), focus - `screenshots/c-button-3--active.png`: Button 3 ("Explore"), active - `screenshots/c-link-3--rest.png`: Text link 3 ("Rivian's Terms"), rest - `screenshots/c-link-3--focus.png`: Text link 3 ("Rivian's Terms"), focus - `screenshots/c-button-4--rest.png`: Button 4 ("Demo drive"), rest - `screenshots/c-button-4--hover.png`: Button 4 ("Demo drive"), hover - `screenshots/c-button-4--focus.png`: Button 4 ("Demo drive"), focus - `screenshots/c-button-4--active.png`: Button 4 ("Demo drive"), active - `screenshots/c-link-4--rest.png`: Text link 4 ("Book a drive"), rest - `screenshots/c-link-4--focus.png`: Text link 4 ("Book a drive"), focus ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | surface | `#f2f2f2` | Cards, panels, raised or recessed surfaces | | surface-2 | `#cbcbcb` | Secondary surface | | foreground | `#ffffff` | Primary text | | primary | `#000000` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | | secondary | `#ffaa00` | Secondary accent (amber) | | border | `#e8e8e8` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#f2f2f2`, `#9fa1b8`, `#000000`, `#212121`, `#ffffff`, `#ffac00`, `#629b5c`, `#e84826`. Gradients in use: `linear-gradient(rgb(0, 0, 0) 0%, rgb(93, 118, 125) 100%)`; `linear-gradient(rgb(31, 33, 33) 0%, rgb(37, 40, 38) 100%)`; `linear-gradient(rgb(242, 242, 242) 0%, rgb(139, 168, 189) 100%)`. The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **Adventure** for h1, h2, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | Adventure | 72px | 600 | 72px | -3px | | headline-lg | Adventure | 72px | 600 | 72px | -1.8px | | headline-md | Adventure | 24px | 400 | 1.4 | normal | | body-md | Adventure | 14px | 400 | 20px | normal | | label-md | Adventure | 16px | 400 | 24px | normal | | button | Adventure | 14px | 600 | 16px | -0.14px | - headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 10px, 11px, 12px, 14px, 16px, 20px, 24px, 32px, 44px, 56px, 72px. Base body size 14px. The hero heading (h1) renders at 72px / 600, center aligned, up to 462px wide, tracking -3px. Sample: "Find your Rivian". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 8, 12, 16, 20, 28, 32, 40, 80 (px). - Flex and grid gaps: 4, 8, 12, 16, 20, 32, 40, 48 px. - Content max width: 1280px, centred. - Breakpoints: 480px, 640px, 768px, 1024px, 1440px. - Header: 56px tall, relative, background `rgb(255, 255, 255)`, bottom hairline 1px solid rgba(209, 209, 209, 0.5); 3 nav links at 10px / 400 (Demo drive). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(0, 0, 0, 0.15) 0px 2px 8px 0px` - shadow-2: `rgb(159, 161, 184) 0px 0px 10px 0px` ## Shapes - Buttons: 9999px - Inputs: 4px - Cards and panels: 0px - Images and media: 0px - Radius scale: none 0px, full 9999px, sm 4px, 2xl 40px, xl 20px ## Components ### Button, ghost Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 9999px, height 32px, padding 8px 12px, 14px / 600. Sample label: "Vehicles". ### Button, secondary Background `#ffaa00`, text `#000000`, border none, radius 9999px, height 32px, padding 8px 16px, 14px / 600. Sample label: "Demo drive". ### Button, primary Background `#000000`, text `#ffffff`, border none, radius 40px, height 56px, padding 8px 16px, 16px / 500. Sample label: "Explore". ### Input Height 56px, background `#212121`, border 0px solid #ffffff, radius 4px, 16px text, padding 20px 16px. ### Link Colour `#ffffff`, no underline at rest, weight 500. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (24 of 87 in the checklist, 37 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 28 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | secondary, secondary sm, ink, warning sm, secondary-icon-right sm, secondary, ghost lg, ink | focus, hover, active | "Design yours" | | Icon button | secondary | hover, focus, active | | | Text link | plain, underlined, plain, plain | focus, hover, active | "full offer details" | | Text input | filled | disabled, filled, invalid, placeholder | | | Field label | other | rest only | "Email" | | Header / navbar | default | rest only | "VehiclesChargingTechnologyDisc" | | Navigation link | plain | rest only | "https://rivian.com/" | | Menu / dropdown trigger | ghost | hover, open | "Vehicles" | | Tabs | pill | selected | | | Footer | default | rest only | "R1TR1SR2FleetShop new inventor" | | Footer link | plain | hover | "Pre-Owned" | | Social icon links | default | rest only | | | Language / region switch | default | hover, open | "US" | | Card | filled | rest only | | | Styled list | default | rest only | "1.99% APR Offer: Available Oct" | | Image / figure | aspect-1.88, aspect-2.78, aspect-1 | rest only | | | Video / media embed | default | rest only | | | Icon | outline-14px | rest only | | | Newsletter / signup form | default | rest only | "EmailZip codeSubscribe1 / 1Sub" | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Theme toggle, Tooltip, Popover, Dropdown menu, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row, Sticky bar. ## Dark Mode No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 1280px | -1320px | 10px | 72px, 1 line, center | 56px, 1 links, 3 CTA | media behind/overlapping text | 3→3 col; 3→2 col; 2→1 col | content-width | | laptop 1024px | 864px | 120px | 10px | 72px, 1 line, center | 56px, 1 links, 3 CTA | media behind/overlapping text | 3→3 col; 3→2 col; 2→1 col | content-width | | tablet 768px | 680px | 170px | 10px | 56px, 1 line, center | 50px, hamburger (Open), 1 CTA | media behind/overlapping text | 3→3 col; 3→2 col; 2→1 col | content-width | | phone 390px | 350px | 17px | 10px | 44px, 1 line, center | 50px, hamburger (Open), 1 CTA | media behind/overlapping text | 3→1 col; 2→1 col; 3→3 col | content-width | - H1 goes 72px → 44px (61%), 1 → 1 lines. - Nav collapses to a hamburger by 390px (first seen at 768px); header 56px → 50px. - Body text is 10px at the sampled desktop and phone widths. - Phone side gutter 17px. ## Interaction & Motion 59 elements carry transitions; typical 0.3s with cubic-bezier(0.83, 0, 0.17, 1), mostly on background-color, color, border-color. 2 running keyframe animations (fadeIn 0.3s 1; sierra-pulse 0.3s 1). - Hover on button-primary ("Demo drive"): background #ffaa00 → #ffbd2e; cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke | 0.15s | cubic-bezier(0.83, 0, 0.17, 1). - Hover on button-secondary ("Have a question?"): background oklch(0.96 0 0) → oklch(0.92 0 0); cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke | 0.15s | cubic-bezier(0.83, 0, 0.17, 1). - Hover on body-link ("Book a drive"): no visible change; cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke | 0.3s | cubic-bezier(0.83, 0, 0.17, 1). - Focus on button-primary: outline 2px none rgb(255, 170, 0), offset 2px. - Focus on body-link: no visible focus style measured (may rely on :focus-visible with keyboard only). - Tooltip triggers exist (3 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip. - 1 aria-haspopup triggers exist; none opened on hover (click-to-open menus). - No scroll-reveal: content is visible without scrolling into view. - Portal roots present: modal-root, toast-root, portal-root. Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#000000` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 14px in Adventure. - Do match corner radii per element class (buttons 9999px, cards 0px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette. - Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents. - Note: Body text contrast is 1.0:1 against the page background (below 4.5:1).