Aurora 网站预览
Aurora 网站预览

Aurora

白色基底、渐变展示与摄影展示。

页面以白色为基底,搭配深蓝色文字。局部操作控件以蓝色强调。字体采用 Inter、Arial。视觉特点包括渐变展示、摄影展示、视频展示、单栏阅读排版。适合参考的场景:AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 每个层级都使用 Inter,绝不替换为第二种字体。文字一致性就是品牌。
  • 52-90px 展示文字采用 0.96-1.00 行高和 -0.04em 字间距。紧密间距让标题像单一建筑体块,而非句子。
  • 每个表面上的 Signal Blue #006aed 都恰好只有一个用途,即主要操作。绝不用于装饰、背景填充或被动元素。
  • Aurora Spectrum 渐变每页只留给一两个定义品牌的场景,例如标志、首屏或单一功能聚焦。把它当作色样,而不是主题。
  • 通过 Paper White → Hailstone → Signal Blue → Horizon Navy 的表面颜色叠放纵深,而非 box-shadows。系统中不存在阴影。
  • 所有容器圆角保持 8px,所有徽章为 4px。系统唯一圆形是 Circular Arrow Button,让它保持独一无二。
  • 标题左对齐,并与左侧边距之间保留呼吸感。首屏标题锚定在左下三分之一区域,绝不居中。

建议避免

  • 正文不要使用纯黑 #000000。Horizon Navy #001733 才是墨色;黑色留给图标、标志和少见的反转表面。
  • 卡片、按钮、导航或模态框不要添加 box-shadows。悬浮层次来自表面颜色变化,绝不来自模糊。
  • 不要引入辅助强调色。系统由单一核心配色构成:Horizon Navy 墨色、Signal Blue 操作色、Aurora Spectrum 渐变;不使用绿、橙或粉。
  • 正文段落不要居中。Text Reveal Sections 和所有编辑文案都左对齐,或偶尔在右列中右对齐;居中文字会破坏公路比喻。
  • 标准 CTA 不要使用 9999px 圆角胶囊按钮。Circular Arrow Button 是唯一圆形元素,其他全部为 8px。
  • 小于 20px 的正文不要使用 -0.04em 字间距。紧密间距只用于展示文字,正文应以正常字间距呼吸。
  • 除非图标位于 Circular Arrow Button 内,否则不要使用 Signal Blue。其他位置的图标使用 Coal #000000 或 Horizon Navy。