Customer.io 网站预览
Customer.io 网站预览

Customer.io

白色基底、胶囊形控件与细线分隔。

页面以白色为基底,搭配蓝色文字。字体采用 Saans。视觉特点包括胶囊形控件、细线分隔、产品图像展示、网格布局。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有卡片、输入框、图片和容器均使用 2px 边距圆角 —— 节点按钮(9999px)的圆角仅用于按钮本身
  • 所有文本使用字重 475,包括 96px 的显示标题 —— 除 20px 的副标题外,绝不使用 600 以上的粗体
  • 使用 1px 实线 #ebebeb 细线边框用于卡片边缘和分隔线 —— 从不使用更粗的边框
  • 在显示标题中使用 #863d1c(橙色)、#123a88(蓝色)、#41a251(绿色)、#b52473(粉红)对单个单词上色 —— 单词保持行内,绝不独立成块
  • 仅使用 #abffae 作为主要 CTA 按钮填充和聚焦光环 —— 绝不用于正文或背景晕染
  • 元素间距使用 24px,卡片内边距使用 32px,区块垂直间距使用 96px —— 以 4px 基础单位贯穿这三个层级
  • 默认使用 #fffcf6 作为浅色表面;暗色区块切换至 #032125;通过 #e2f4ff、#fdf0e9 或 #eafde8 进行语义强调带色晕染
  • 交互聚焦状态使用 4px 颜色聚焦光环(0px 0px 0px 4px)替代描边或阴影变化

建议避免

  • 绝不使用阴影来表现层级 —— 深度仅来自彩色 4px 光环
  • 绝不使用 600 以上的粗体字重用于显示或标题文本 —— 标志性语调是沉静的 475 语感
  • 非按钮元素的圆角绝不超过 2px —— 带锐角的卡片定义了该系统
  • 链接绝不使用 #0000ee 或默认浏览器蓝色 —— 链接使用 #032125 或 #a1c2c6
  • 绝不将 #abffae 放置在白色或浅色背景上且无足够对比度 —— 它是光晕色,不是填充色
  • 内容网格中绝不使用超过 4 列 —— 系统偏好充足的间距而非密度
  • 绝不将标题强调色(#863d1c、#123a88 等)用于 UI 边框 —— 它们仅用于显示文本中的关键词行内上色