Rivian 网站预览
Rivian 网站预览

Rivian

白色基底、大幅摄影展示与胶囊形控件。

页面以白色为基底,搭配近黑色文字。字体采用 Adventure、Liga。视觉特点包括大幅摄影展示、胶囊形控件、细线分隔、宽松留白。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • Solar Yellow(#ffac00)严格用于每屏一个主要CTA,绝不与另一个黄色元素配对。
  • 所有操作按钮采用40px圆角,导航链接和标签块9999px,这两种圆角定义系统。
  • 首屏摄影从边到边填满视口,落地页绝不将车辆图片框在卡片中。
  • 激进放大排版:页面级标题56px+,展示场景120px,360px Liga仅用于产品字母组合标志。
  • 所有20px以上字号字间距设为负值,从24px时的-0.020em逐步变为120px时的-0.045em。
  • 大部分表面保持平坦,用#e5e7eb极细边框定义,而非阴影。
  • 采用#f2f2f2(Chalk)交替区块背景,打破纯白单调。

建议避免

  • 主要操作不要使用Solar Yellow以外的任何彩色,系统刻意保持单色调。
  • 不要用阴影表现高度,改用表面颜色变化(#ffffff → #f2f2f2 → #e5e7eb)。
  • 正文不要低于12px或高于18px,14-16px正文范围是刻意选择。
  • 落地页图片圆角不要超过20px,产品应有建筑感,而非柔软感。
  • 单一构图不要使用多种字体,Adventure承担系统99%,Liga只用于产品字母组合标志。
  • UI组件不要应用渐变;数据中的渐变只用于氛围铺色,而非界面装饰。
  • 单色区块不要通过颜色建立层级,依靠字重(400对500对600)与字号差异。