Kajabi 网站预览
Kajabi 网站预览

Kajabi

白色基底、紧密字距与大幅图像展示。

页面以白色为基底,搭配近黑色文字。字体采用 Haffer。视觉特点包括紧密字距、大幅图像展示、摄影展示、扁平表面。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有填充按钮和主要文字使用 #0a0a0a —— 从不使用 #000000 纯黑色
  • 所有矩形 UI 元素(按钮、输入框、卡片、图片)的转角半径设为 2px
  • 仅对胶囊形分类标签和标签元素使用 9999px 半径
  • 让摄影和视频承载所有色彩——UI 元素必须严格保持单色
  • 在显示尺寸 40px 及以上时使用紧密字间距(-0.02em 至 -0.03em);在正文尺寸时使用正常字间距
  • 主要区块之间保持 64–80px 的垂直间距
  • 标题使用 Haffer 字重 400,依靠字号(而非粗体字重)来实现层级关系

建议避免

  • 不要引入任何品牌色彩——该系统刻意为 100% 单色
  • 不要在按钮、卡片或输入框上使用 8px 或 12px 的边框半径——2px 的锐利转角是标志性特征
  • 营销标题不要使用粗体字重(600 以上)——应由字号来完成层级表达
  • 不要为按钮、输入框或标准卡片添加阴影——表面保持平面
  • 不要用彩色区块作为页面背景——仅在暗色条带时使用 #1f1f1 作为反色
  • 不要使用小于 1.5px 或大于 2px 的图标描边——描边应感觉精确
  • 正文文字不要进行字间距调整——紧密字间距仅保留于 40px 及以上显示尺寸