← OpenDesign CURATED · OPEN · FREE
Rivian
Premium electric vehicle brand emphasizing adventure, rugged capability, and refined minimalism.
automotive ev
01
Identity DNA
Adventure Electric Rugged Minimal Outdoors
A high-end outdoor equipment brand meets automotive engineering.
02
Color
#f5a623Accent
#151515Ink
#616161Ink soft
#ffffffBG
#f2f2f2BG soft
#9fa1b8BG quiet
#b8b8b8Muted
rgba(0,0,0,0.1)Line
High-contrast monochrome base with warm golden-orange accent for action, supported by muted blue-grays in gradients.
03
Typography
humanist-sans
display 72px · 500heading-lg 32px · 500body-lg 20px · 400body 16px · 400small 14px · 400Tight letter-spacing on large display text · High contrast between display and body weights · Uppercase used sparingly for navigation elements
04
Spacing
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
96px
Strict 4px grid system with generous whitespace around major content blocks.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgb(229, 231, 235) for subtle structure.
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)
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Full-width hero sections followed by centered content blocks on light backgrounds.
07
Motion & Interaction
100ms micro
200ms small
300ms medium
500ms large
cubic-bezier(0.83, 0, 0.17, 1) easing
Smooth color and background-color transitions on hover · Width and opacity transitions for expandable elements
Smooth color transitions on text and background elements. · Immediate visual feedback with opacity changes.
08
Components
button Pill-shaped primary buttons with dark background or transparent outlines with text labels. card Image-heavy cards with rounded corners (20px radius) and subtle shadows. chip Capsule-shaped category selectors (Technology, Performance, Design) with active state differentiation. input Standard rounded input fields with clear borders. hero Full-bleed cinematic photography with centered overlaid text and call-to-action buttons. 09
Voice & Don'ts
Tone Confident, adventurous, and informative. Headlines Bold, imperative statements (e.g., 'Find your Rivian'). CTAs Direct and action-oriented (e.g., 'Design your R1T', 'Demo drive'). 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. Avoid: Technical jargon Avoid: Overly aggressive sales language Avoid: Complicated sentence structures 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
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.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: 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.
