Voiceflow
白色基底、胶囊形控件与细线分隔。
Speakeasy
浅色基底、渐变展示与细线分隔。
页面以浅色为基底。字体采用 ui-sans-serif (system)、Tobias。视觉特点包括渐变展示、细线分隔、衬线字形、分屏构图。适合参考的场景：开发者工具官网、API 服务介绍页。
查看原始网站使用规范
建议采用
- 所有展示和首屏标题均使用 Tobias 字体 100 字重——绝不替换为粗衬线字体；这种纤细是品牌的本质体现。
- 将填充型行动号召（CTA）背景设为 #333333（Obsidian），文字为白色，圆角 4px——这是整个系统的唯一行动色。
- 使用 1px 实线 #dbdbdb 边框作为卡片和区块分隔线，而非阴影——边框是深度的表达方式。
- 在每页绝对顶部放置一条 9 级渐变的彩虹条，以 3px 细线形式呈现，紧贴视口边缘。
- 将 Diatype 正文字体（400 字重）与 Tobias 标题（100 字重）搭配使用——这种字重对比是编辑系统的驱动力。
- 将色彩（Signal Green、Ember Orange、Iris Blue、Marigold）保留用于图标、徽章和小型状态指示——绝不作为大面积填充使用。
- 使用大写 ui-sans-serif 字体，字号为 11–12px，字间距为 0.05em，用于所有区块标题前的小标签（THE PROBLEM, THE SOLUTION）
建议避免
- 绝不将 Tobias 标题的字重提升至高于 100——细线的特质才是核心所在。
- 绝不使用色彩填充作为主要按钮——行动号召必须保持中性色 #333333，让文字承担强调作用。
- 绝不通过叠加阴影来营造卡片深度——改用 1px #dbdbdb 边框，或完全不使用阴影。
- 绝不将色彩点缀（橙色、绿色、紫色、红色）用作大面积背景——它们只应出现在图标和小型标签内。
- 绝不将正文文字设置在低于 14px 或高于 18px 的 Diatype 字体中——14–18px 是可读的阅读区间。
- 绝不将彩虹缎带替换为单色或双色条——完整的色彩光谱才是品牌标志。
- 绝不引入第二套衬线字体或竞争性的展示字体——Tobias 独占编辑空间。
