Beau 网站预览
Beau 网站预览

Beau

白色基底、胶囊形控件与渐变展示。

页面以白色为基底,搭配近黑色文字。字体采用 Geist。视觉特点包括胶囊形控件、渐变展示、紧密字距、扁平表面。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 仅使用广播渐变(135deg,#ff8308 → #ff5043 → #392bd5)用于产品框、功能胶囊,以及每页最多一个全宽度区块带。
  • 所有按钮和功能胶囊设置为 200px 边距半径——完全胶囊形的按钮是核心特征。
  • 所有卡片、图片和徽章设置为 6px 边距半径——微妙,从不圆润到足以显得亲切。
  • 标题和标签使用 Geist 500,正文使用 Geist 400——绝不引入 600 或 700 字重;狭窄的字重轴是刻意设计。
  • 使用 #f6f4f1 作为替代区块表面的温暖纸张,而非硬边或分隔线。
  • 在所有 Geist 文字中启用 'ss01'、'ss03'、'ss04' 字体特性——这些风格集合是品牌声音的一部分。
  • 设定 72px 为标准区块间距,24px 为卡片内元素间距。

建议避免

  • 绝不引入任何超出广播渐变的彩色——该系统本质上是单色的。
  • 按钮或胶囊绝不使用 6px 或 8px 半径——仅 200px(完整胶囊)是正确做法。
  • 绝不使用厚重阴影或抬升效果——唯一被批准的阴影是 2px 6% 黑色的大气雾感。
  • 绝不使用 400 和 500 以外的字重——粗体和中粗会破坏克制的编辑风格。
  • 绝不将白色卡片置于渐变带中——应使用深色(#000000)功能卡片,或让渐变自然呼吸。
  • 绝不使用 #0000ee 或浏览器默认链接蓝——链接始终为黑色,可选下划线。
  • 绝不拥挤区块——若某区块感觉紧凑,应增加 72px 间距,而非减小字体大小。