Augen Pro 网站预览
Augen Pro 网站预览

Augen Pro

近白色基底、非对称构图与圆角卡片。

页面以近白色为基底,搭配近黑色文字。字体采用 PP Neue Montreal。视觉特点包括非对称构图、圆角卡片、网格布局、满幅色块。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 从10px到27px的所有文本均使用字重350作为默认——层级由大小决定,而非字重
  • 所有链接的文字颜色设为信号蓝(#0071e3),且交互元素绝不使用填充背景——蓝色作为线框,而非填充
  • 所有内容卡片的圆角半径设为54px,所有标签/胶囊形控件的圆角半径设为9999px,以形成标志性的柔和封闭形状
  • 保持各区块之间90-100px的垂直间距,以维持编辑性的呼吸节奏
  • 浅色背景上的文字使用深黑(#0f1012),深色底部文字使用纯白(#fdfdfd)——此配色对绝不反转
  • 所有导航和交互容器均以漂浮的胶囊形(半径10-26px)呈现,居中或顶部对齐,绝不以全宽条形呈现
  • 所有文本的字间距统一设为-0.0200em——紧密的字间距是其字体特征

建议避免

  • 绝不使用阴影来表现层级——改用白调渐变(#fdfdfd 在 #f2f2f4 上)和0.5px细线边框
  • 绝不将信号蓝(#0071e3)作为填充背景——它仅作为边框和文字颜色使用
  • 绝不使用字重高于400——粗体、半粗体和中等字重破坏了轻盈的字体系统
  • 绝不将多行正文文本居中对齐——所有段落必须左对齐以保证编辑可读性
  • 绝不为内容区块添加装饰性渐变、图案或背景图像——3D首屏渲染承载全部视觉重量
  • 绝不将CSS令牌色中的绿色/橙色/黄色用作UI强调色——这些变量处于非激活状态;实际系统为单色+蓝色
  • 内容容器的宽度绝不超过1200px——居中约束的节奏依赖于一致的测量基准