Fable 网站预览
Fable 网站预览

Fable

白色基底、衬线字形与胶囊形控件。

页面以白色为基底，搭配近黑色文字。字体采用 Inter、Heldane Display。视觉特点包括衬线字形、胶囊形控件、大字排版、紧密字距。适合参考的场景：音视频产品介绍页、媒体内容展示页。

查看原始网站

使用规范

建议采用

  • 所有 48px 及以上标题用 Heldane Display 400，绝不 500+，近常规字重是编辑标志。
  • 每个按钮用 60px 体育场胶囊圆角，奶油上深填充、彩色条带上白填充，绝不方角或小圆角。
  • 满幅区块按 Fable Forest → 奶油 → Storybook Sky → 奶油交替，颜色作为主要区块分隔，而非细线或间距。
  • Inter 正文负字间距匹配尺度，16px 时 -0.32px，30px 时 -0.66px，默认 Inter 字间距会破坏编辑感。
  • 默认卡片和页面表面优先 Paper Cream #f7f4ee 而非纯白，暖灰白是品牌的“页面”。
  • 让书封自行表达，无卡片框、覆盖或徽章，只有干净表面上的书封，间隙 8–12px。
  • 48–80px 展示标题行高收紧至 0.86–0.94，让行像编辑印刷般视觉锁定。

建议避免

  • 按钮不要用方角或 4–8px 圆角，60px 胶囊不可妥协，定义品牌声音。
  • 24px 以上标题不要放在纯白上，每个展示标题搭奶油、森林或天空背景。
  • 行动按钮不要用彩色，按钮始终深或白；#43a1d7 与 #064c37 只用作背景，绝不填充。
  • 不要引入渐变、光晕或彩色阴影，唯一允许阴影是简单 0 4px 20px 黑投影。
  • Heldane Display 不要用于正文、图注或界面标签，它只用于 22px+ 标题，其余都是 Inter。
  • Section Bands 内不要添加卡片边框或细线分隔，让色彩对比承担结构。
  • 正文或标题不要用 100% 黑，Ink #161015 与 Charcoal Plum #292229 保持暖编辑语气。

相似设计语言