Aqua Voice 网站预览
Aqua Voice 网站预览

Aqua Voice

白色基底、产品图像展示与细线分隔。

页面以白色为基底,搭配深蓝色文字。局部操作控件以蓝色强调。字体采用 PP Neue Montreal、Inter。视觉特点包括产品图像展示、细线分隔、单栏阅读排版、扁平表面。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • PP Neue Montreal 的所有展示文字和标题都使用字重 200。极轻字形是品牌的视觉标志。
  • Sky Signal #67beff 只用于实心主要 CTA 和上线状态圆点,绝不扩展到背景、插画或装饰填充。
  • 标题行高设为 1.00-1.10。紧密行高对于轻声审美不可缺少,也避免轻字重显得脆弱。
  • 卡片内边距保持 20-24px,圆角保持 12-20px。更紧会显得拥挤,更宽则会与页面级宽裕间距竞争。
  • 所有次要操作使用 Ghost 按钮,即透明表面加 Slate 文字;实心 Sky Signal 按钮只留给每屏唯一主要操作。
  • 抬升表面采用 Linen #e5e8ec 细线边框,并配 rgba(0,0,0,0.02) 阴影。系统的纵深以毫米计,而不是把毫米放大成厘米。
  • 文字区块居中,最大宽度为 680px,以保证可读性;周围负空间承担页面节奏。

建议避免

  • PP Neue Montreal 的字重不要超过 500。Medium 500 已经是上限,600+ 会摧毁系统轻声表达的气质。
  • 正文、标题或背景不要使用 Inkstone/Slate/Pewter 中性色阶之外的颜色。彩色文字会打破单色约定。
  • 不要使用大型或高饱和阴影。系统刻意只采用 rgba(0,0,0,0.02) 至 rgba(0,0,0,0.1) 的纵深。
  • 主要按钮不要使用 9999px 圆角胶囊形。按钮圆角为 8px,胶囊只留给标签和状态小标签。
  • 不要引入渐变、玻璃拟态或强烈模糊效果。设计语言平面、哑光,像纸张一样。
  • 标题字间距不要设为负值。PP Neue Montreal 已经经过视觉平衡,额外调整会与字体原生节奏产生不一致。
  • Electric Iris #4288ff 不要用于填充。它只属于轮廓、链接或幽灵操作色,实心操作角色由 Sky Signal 承担。