Workable 网站预览
Workable 网站预览

Workable

近白色基底、产品图像展示与单栏阅读排版。

页面以近白色为基底,搭配近黑色文字。局部操作控件以深青绿色强调。字体采用 Proxima Nova。视觉特点包括产品图像展示、单栏阅读排版、渐变展示、摄影展示。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 使用 #004038 森林青作为唯一的填充式CTA颜色——按钮要么是青绿色填充(主要),要么是青绿色描边(透明描边),绝不使用第三种颜色
  • 将卡片的圆角统一设置为16px,按钮的圆角统一设置为8px——8px的差异是刻意设计的,卡片显得柔和,按钮则显得清晰锐利
  • 将温暖的 #fbfaf8 底板应用于所有区块背景,并让 #ffffff 的卡片浮现在其上——奶油到白色的表面对比创造了深度,而无需阴影
  • 在56–72px字号范围内使用700字重,搭配紧密的1.14–1.22行高用于标题——厚重字重加紧密行距是编辑风格的标志性特征
  • 正文文字设置为18px,行高1.56,使用 #3d3e45 Body Graphite——绝不使用 #0f161 黑色墨水用于长段落,对比过于强烈
  • 在网格中通过 #e5d3f7、#fef1e1、#fde8ce、#c6c4f4、#bee9f4 五种柔和色调轮转展示粉彩卡片——粉彩轮转传递了功能区块的分组信息,无需额外边框
  • 区块眉题标签使用12px全大写文字和#6f7073 Muted Slate,与下方标题保持8px外边距。

建议避免

  • 不要为卡片或按钮添加阴影——该系统刻意保持扁平,深度仅来自表面色彩对比
  • 不要将 #1d0953 深夜紫 作为通用CTA使用——它仅用于公告栏胶囊控件和数字提示,不用于按钮
  • 不要将青绿→黄绿→紫色渐变应用于按钮、背景或文本——该渐变仅用于 Workable 'w' 应用图标和AI代理视觉元素
  • 不要在正文段落中使用 #0f161 黑色墨水——仅保留用于标题、图标和UI金属光泽部分;正文使用 #3d3e45 以保证可读性
  • 不要引入额外的饱和强调色——该系统以青绿+粉彩轮转为基础,增加新的色彩会破坏克制的配色体系
  • 不要为卡片使用尖锐的0px或4px圆角——16px的柔和是标志性特征,所有提升的表面元素都应具有圆润感
  • 正文行高不得低于1.5——在18px字号下1.56的宽松行高,是让密集文字显得轻盈的关键