精選 · 開放 · 免費

Rivian

強調冒險、強韌性能與精緻極簡主義的高端電動車品牌。

automotiveev
Rivian 網站截圖
↓ 下載設計系統包 (49 MB)在 OpenDesign 中開啟

原站: https://rivian.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

冒險電動強韌極簡戶外

高端戶外裝備品牌結合汽車工程。

02

色彩

#f5a623Accent
#151515Ink
#616161Ink soft
#ffffffBG
#f2f2f2BG soft
#9fa1b8BG quiet
#b8b8b8Muted
rgba(0,0,0,0.1)Line

高對比度單色基調，搭配溫暖的金橘色作為行動強調色，輔以漸層中的柔和藍灰色。

03

字型

humanist-sans

大型展示文字採用緊湊字距 · 展示與內文字重之間保持高對比 · 大寫字母僅謹慎用於導覽元素

04

間距

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
96px

嚴格遵循 4px 網格系統，主要內容區塊周圍留有充足空白。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgb(229, 231, 235)，提供細微的結構感。

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

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

全版面英雄區域，後接置於淺色背景上的居中內容區塊。

07

動效與互動

100msmicro
200mssmall
300msmedium
500mslarge
cubic-bezier(0.83, 0, 0.17, 1)easing

懸停時的顏色與背景色平滑過渡 · 可展開元素的寬度與 opacity 過渡

文字與背景元素的流暢顏色過渡。 · 立即的視覺回饋，透過 opacity 變化實現。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Rivian — 桌面首屏（hero）
桌面首屏（hero）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Rivian — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個針對強調冒險與性能的電動車品牌的高端汽車網站。設計系統採用高對比度單色基調（#151515 墨色置於 #ffffff 背景上），搭配溫暖的金橘色強調色（#f5a623）用於關鍵行動呼籲。字體排印乾淨，採用人文無襯線體，標題使用粗體、緊湊字距的展示文字（最大 72px，字距 -2.5px），內文則使用較輕字重。佈局為全版面出血且以攝影為主，優先呈現電影感的英雄圖片而非文字密集的區塊。介面極簡，使用充足留白與細微陰影。關鍵禁忌：避免使用裝飾性襯線體、避免雜亂佈局，並避免過度使用強調色。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko