Voiceflow
白色基底、胶囊形控件与细线分隔。
Fly.io
近白色基底、胶囊形控件与渐变图像。
页面以近白色为基底，搭配深蓝色文字。字体采用 Fricolage Grotesque、Mackinac。视觉特点包括胶囊形控件、渐变图像、紧密字距、衬线字形。适合参考的场景：开发者工具官网、API 服务介绍页。
查看原始网站使用规范
建议采用
- 在 64px / -2.88px 字间距下使用 Mackinac 用于任何首屏或区块展示标题——衬线字体是品牌的编辑风格标志，不可替代。
- 所有填充型行动号召按钮及激活导航状态必须使用 #7c3aed 电紫罗兰色；其他任何饱和色均不得作为按钮背景出现。
- 所有主要按钮及顶部导航容器均需设置 9999px 半径；胶囊形状是其标志性轮廓。
- 正文使用 #5e537c 薄雾紫罗兰色而非纯灰色——温暖的紫罗兰色调能保持页面风格统一。
- 所有细线边框和分隔线均使用 #e7e6f4 薰衣草雾色，而非中性灰；结构性的中性色应与文字色调保持同一色系。
- 区块间垂直间距为 96–120px；充足的留白空间使奇幻插图显得有目的性，而非杂乱无章。
- 满幅填充的区块带使用天空→靛蓝→粉红渐变（#7dd3fc → #a5b4fc → #f9a8d4）引入插图内容。
建议避免
- 标题不可使用无衬线字体——Mackinac 衬线字体是品牌最具辨识度的字体选择，去除它将导致品牌语调崩塌。
- 除 #7c3aed 外，任何 UI 元素均不可使用明亮或饱和色；整个系统仅以单一强调色运行。
- 主要操作按钮不可使用方形或 4px 半径——所有行动号召与导航必须采用胶囊形状。
- 正文文本不可使用纯黑色（#000000）；应使用 #281950 深墨紫罗兰色或 #5e537c 薄雾紫罗兰色。
- 卡片或面板不可使用厚重的阴影效果；设计依赖细线边框和色调对比来实现分隔，而非深度感。
- 正文或按钮文本不可使用过紧的字间距；小字号下正字间距（0.025–0.05em）是编辑风格的一部分。
- 不可用真实摄影替代插图——手绘水彩风格是品牌氛围的核心支撑。
