Zapier 网站预览
Zapier 网站预览

Zapier

白色基底、细线分隔与衬线字形。

页面以白色为基底,搭配近黑色文字。字体采用 Inter、Degular Display。视觉特点包括细线分隔、衬线字形、居中构图、大幅摄影展示。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有页面和卡片背景都使用 Cream Paper #fffefb 或 Parchment #f8f4f0,绝不使用 #ffffff。
  • Ember Orange #ff4f00 只用于实心按钮表面、标志字形和小型图标强调;在任何布局中都保持低于 5%。
  • 首屏和区块标题使用 Degular Display,并保留其原生 0.033–0.071em 正字间距,不要收紧。
  • 每页在一个编辑标题上使用 GT Alpina 字重 250,增加杂志般的提升感;绝不用在正文或界面中。
  • 所有交互控件的按钮圆角设为 20px,形成标志性胶囊形态。
  • 文字层级采用暖中性色叠层 #201515 → #36342 → #413735 → #939084,绝不引入冷蓝灰。
  • 遵循 4px 间距节奏,空隙、内边距和区块分隔优先采用 8、12、16、24、32、64px。

建议避免

  • 主要表面绝不使用鲜明 #ffffff 或 #000000。暖奶油与暖近黑才是标志。
  • Degular Display 标题绝不使用负字间距。开放字间距正是设计重点。
  • Iris Ink #2b2358 绝不用在界面框架、按钮或文字中,它只留给插画。
  • 绝不添加重投影;表面通过 #eceae3 或 #c5c0b1 细线边框区分。
  • 绝不让 Ember Orange 填满大面积背景。它必须保持为标点,而非铺色。
  • 绝不使用 #64748b、#94a3b8 等冷调灰色。系统所有中性色都带暖棕底调。
  • 正文标题超过 56px,或首屏展示超过 160px 前,必须先检查字体尺度 Token。