Clearbit 网站预览
Clearbit 网站预览

Clearbit

白色基底、细线分隔与摄影展示。

页面以白色为基底,搭配深蓝色文字。局部操作控件以蓝色强调。字体采用 InterVar。视觉特点包括细线分隔、摄影展示、扁平表面、分屏构图。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有主要文字和标题采用Midnight Ink(#091135);长段正文的颜色绝不要漂移到真正纯黑。
  • Electric Blue(#0f77ff / #127ee3)只留给主要操作、聚焦环和勾选图标,每个屏幕一个信号。
  • 分区通过Lavender Wash(#f5f3ff)背景和Frost Border(#e1e9f0)细线分隔,绝不用投影。
  • 标题采用InterVar 500–600、32/56/64px和0.016–0.018em字间距;放宽字间距是标志性特征,不要收紧。
  • 所有卡片采用12px圆角,按钮、输入框和导航元素8px;两者4px的差距是刻意的。
  • 首屏区域展示产品,将数据表、评分小标签和数据补全行等真实UI模型悬放在Lavender Wash上,取代抽象插画。
  • 纵向节奏保持主要区域之间64px,标题与副标题之间20–24px,元数据行之间8px。

建议避免

  • 静止卡片或面板不要添加投影;系统用表面着色和细线边框表达深度,而非阴影叠层。
  • 不要引入第二种强调色;全部彩色预算只有一种克制使用的蓝色。
  • 展示文字不要采用负letter-spacing;系统刻意随字号增长放宽字间距。
  • 正文字号不要低于14px,超过一个词的内容也不要使用700字重;400–500承载语气。
  • 长篇文字不要使用纯黑(#000000);Midnight Ink(#091135)才是墨色,黑色只留给图标填充。
  • 不要破坏圆角尺度,卡片12px、按钮和输入框8px、标签9999px;不使用10px或16px等中间值。
  • 不要采用厚重渐变或装饰背景;系统保持平面,唯一渐变语言是微妙的Lavender Wash区域过渡。