Workflow 网站预览
Workflow 网站预览

Workflow

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

页面以白色为基底，搭配近黑色文字。字体采用 Crimson Pro、Inter。视觉特点包括衬线字形、细线分隔、宽松留白、扁平表面。适合参考的场景：SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 每个标题都采用Crimson Pro 300；300字重是标志性特征，绝不使用粗衬线或无衬线标题。
  • 所有正文和UI文字都使用Inter 400，Inter 500只留给按钮标签与激活导航强调。
  • 表面保持Paper White、Fog和Linen；只有状态在语义上为正向时，才采用Mint Wash。
  • Sage（#547e69）只用于激活状态下划线、获批胶囊和功能图标强调，绝不作为填充，也绝不用于CTA背景。
  • 徽章圆角4px，按钮8px，卡片和图像12px，不混入其他圆角。
  • 主要分隔方式是#e3e3e3或#f6f6f6的1px细线边框，只有产品预览卡片依靠阴影。
  • 内容以1080px max-width居中，分区间距80px；布局由留白承载，而非分隔线或颜色。

建议避免

  • 主要CTA不要采用彩色填充按钮；CTA为无填充文字按钮或描边胶囊。
  • 不要引入新色相；调色板是单色加唯一鼠尾草强调，添加蓝、红或紫会破坏编辑式系统。
  • 标题不要采用粗体或半粗体；Crimson Pro 300不可更改。
  • 不要添加大投影或彩色辉光；抬升必须保持在rgba 0.06不透明度以下。
  • 卡片不要采用0px或16px+ border-radius；系统采用4、8、12和9999px。
  • 除鼠尾草强调外，不要给装饰形状、背景色洗或插画填充使用彩色。
  • UI附属元素不要使用Georgia；它只留给编辑式文章预览内容块。

相似设计语言