Voiceflow 网站预览
Voiceflow 网站预览

Voiceflow

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

页面以白色为基底，搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Tiempos Headline、Selecta。视觉特点包括胶囊形控件、细线分隔、宽松留白、衬线字形。适合参考的场景：AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 所有标题和显示数字均使用 Tiempos Headline 300 字重——切勿加粗，轻盈字重是其标志性特征
  • 所有主要操作按钮、激活导航项和公告栏均应使用 Signal Blue（#397dff），且每个视口内仅出现 1-2 处
  • 所有 16px 及以下正文与 UI 文字使用 Selecta 正字间距（0.025em）；当字号超过 20px 时，转为 Tiempos 负字间距
  • 所有交互控件使用胶囊形状（999px），导航项为 100px；仅卡片表面保留 20px 圆角
  • 正文文字设为 16px Selecta 400 字重，行高 1.55 作为段落的通用默认值
  • 交替使用白色（#ffffff）和 Bone（#f5f5f4）作为区块背景，以营造节奏，无需使用阴影或色彩
  • 将产品演示卡片（聊天、分析、工作流）作为浮动叠加层置于满幅摄影背景之上，而非置于有边框的容器内

建议避免

  • 切勿加粗 Tiempos Headline——该字体仅提供 300 字重，加粗会破坏编辑性的整体氛围
  • 切勿将 Signal Blue 用于装饰元素、大面积表面或超过几词的文本——它的职责仅是标记主要操作
  • 切勿在内容卡片上使用阴影——系统偏好使用 1px #e5e5e5 细线边框来定义表面边界；仅在卡片浮于摄影之上时使用阴影
  • 切勿引入额外的强调色——色彩方案刻意限定为两种（蓝色用于操作，橙色用于装饰）搭配中性背景
  • 切勿将标题尺寸设低于 36px 在 Tiempos 中——衬线字体需要尺度才能体现编辑性；低于 20px 时切换至 Selecta 500 字重
  • 切勿对超过两行的正文段落进行居中对齐——仅标题、CTA 和短副标题使用居中对齐
  • 切勿在可见表面使用方形角或小圆角（4–8px）——系统的柔和感由 14/20/999px 圆角定义，尖角会显得突兀

相似设计语言