Clearbit 网站预览
Clearbit 网站预览

Clearbit

如同云纸上的数据天文台:室内般明亮、近乎无彩色的画布中,午夜墨迹与唯一蓝色电流承担全部表现。

Clearbit像一张绘在白色亚麻上的蓝图:几乎完全无彩色的画布中,唯一午夜藏青色墨色承载每个词,电光蓝只在操作上亮起。界面具有悬浮感,产品卡片、数据记录和评分徽章,悬在几乎察觉不到的薰衣草色洗上,气质更像数据仓库,而非SaaS模板。InterVar排版极为克制,字重范围宽松,但标题与正文使用相同藏青色,因此层级来自字号与字间距,而非颜色。产品本身就是首屏,公司资料截图、数据补全表格和评分小标签,承担了不够自信的设计中会交给图库摄影的表达。组件平面、细边框、柔和圆角;系统唯一阴影是深蓝聚焦环,而非投影,抬升通过微妙着色背景上的层叠表达,而非深度。

查看原始网站

使用规范

建议采用

  • 所有主要文字和标题采用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区域过渡。