OpenDesign·你的设计资产库

网页参考

Rivian

强调探险、粗犷性能与精致极简主义的高端电动汽车品牌。

AutomotiveEv
Rivian 网站截图

01

设计气质 DNA

探险电动粗犷极简户外

高端户外装备品牌与汽车工程的结合。

02

色彩

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

以高对比度单色系为基底，搭配用于行动召唤的暖金色-橙色点缀色，辅以渐变中的柔和蓝灰色。

03

字体

humanist-sans

  • display72px · 500
  • heading-lg32px · 500
  • body-lg20px · 400
  • body16px · 400
  • small14px · 400

大号展示文本使用紧凑的字间距 · 展示字体与正文字重之间保持高对比度 · 导航元素慎用全大写

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

hover 时平滑的颜色与背景色过渡 · 可展开元素的宽度与透明度过渡

文本与背景元素的平滑颜色过渡。 · 通过透明度变化提供即时视觉反馈。

08

组件

  • button 胶囊形主按钮，采用深色背景或透明描边加文字标签。
  • card 以图片为主的卡片，圆角（20px半径）并带微妙阴影。
  • chip 药丸形分类选择器（科技、性能、设计），带激活状态区分。
  • input 标准圆角输入框，带清晰边框。
  • hero 全出血电影感摄影，叠加居中文字与行动召唤按钮。

09

文案语气与禁用清单

  • 语气 自信、富有探险精神、信息丰富。
  • 标题风格 大胆、祈使句式的陈述（例如，'发现你的 Rivian'）。
  • 按钮文案 直接、行动导向（例如，'设计你的 R1T'，'预约试驾'）。
  • 勿使用装饰性衬线字体——截图显示为干净的人文主义无衬线字体。
  • 勿使用过多投影——截图仅显示特定元素上的极简、柔和投影。
  • 勿使用杂乱的布局——截图显示充足的留白与聚焦的网格结构。
  • 勿使用复杂的配色方案——截图显示以单色为主，仅有一个暖色点缀。
  • 勿使用刺眼、饱和的背景色——截图显示中性白、柔和灰及摄影背景。
  • 勿对正文使用全大写——截图显示仅在导航与小字中慎用全大写。
  • 避免: 技术术语
  • 避免: 过于激进的销售语言
  • 避免: 复杂的句子结构

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个面向注重探险与性能的电动汽车品牌的高端汽车网站。设计系统使用高对比度单色基底（#151515 墨色在 #ffffff 背景上），并以暖金色-橙色（#f5a623）作为关键行动召唤的点缀色。字体采用干净的人文主义无衬线体，标题使用粗体、间距紧凑的展示文本（最大72px，字间距-2.5px），正文则使用较轻字重。布局为全出血摄影式，优先呈现电影感首屏图像而非文字密集区块。界面元素极简，利用充足留白与微妙阴影。关键禁忌：避免使用装饰性衬线字体、避免杂乱布局、避免过度使用点缀色。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。