AWE 网站预览
AWE 网站预览

AWE

午夜之后的机器人观测站。构建黑色、画廊风格的屏幕，其中淡色编辑文字浮于包含的AI世界影像之上，并配有微小的仪表盘标签。

AWE 以一个近黑色背景构建自主系统门户，其中点缀着瓷白色机器人影像和明亮的青色细节，构成视觉内容。超大尺寸的 Office Times Round 标题营造出编辑性、近乎仪式感的停顿，与紧凑的 Messina Sans 解释性文字形成对比，而等宽、字间距均匀的实用标签则让导航感觉如同仪表盘。表面保持近乎平面：深灰胶囊控件、细线分隔线、半透明深色媒体凹槽以及圆角图像容器在不脱离黑色画布的前提下传递结构。

查看原始网站

使用规范

建议采用

  • 将 #010101 作为页面画布的默认颜色，保留 #16191b 用于嵌入媒体或卡片内部。
  • 将显示文本设置为 Office Times Round 400 字重，100px/100px（字号/行高），字间距 -3px；仅在孤立区块作为标记时使用 200px 的处理方式。
  • 仅在 26px 或 32px 的特征标题尺寸下使用 Messina Sans 600 字重，字间距 -0.02em。
  • 将实用导航设置为 ABC Laica Mono 300 字重，字号 13px，字间距 1.04px，文字为大写。
  • 使用 #1f1f23 填充的导航控件，半径 100px，间距 8px。
  • 绘制结构分隔线为 1px 的 #252525 实线，且卡片保持无阴影。
  • 使用 16px 的卡片圆角、8px 的紧凑卡片圆角，仅在大图主导的容器中使用 80px 的半径。

建议避免

  • 不要引入白色页面背景；保持基础区块在 #010101 上。
  • 不要使用明亮的UI强调色、饱和色调的渐变或语义状态色家族。
  • 不要将 100px 半径的导航胶囊替换为 16px 圆角矩形。
  • 不要在展示文本中使用厚重字重；Office Times Round 保持 400 字重。
  • 不要在正文使用 #e0e0e0，当 #828b8d 更适合用于解释性段落时应使用。
  • 不要为卡片、胶囊、媒体框或分隔线添加阴影。
  • 不要添加带内边距的填充主按钮，当可用的公共控件为深灰导航胶囊和透明下划线文本控件时应保持原样。

相似设计语言