Waabi

浅灰色基底、渐变展示与大字排版。
页面以浅灰色为基底,搭配近黑色文字。字体采用 Zagma、NeueHaas。视觉特点包括渐变展示、大字排版、细线分隔、胶囊形控件。适合参考的场景:AI 服务首页、产品演示介绍页。
查看原始网站使用规范
建议采用
- 仅将 Zagma 用于显示和标题角色——绝不可用于正文、图注或 UI 标签。小于 24px 时将变得无法辨识,并失去其雕塑感。
- 首屏标题设定为 130–150px,行高 0.85,字间距 -0.048em。这种紧凑、堆叠式的区块是系统最具识别度的排版动作。
- 将 #ff2c6b 专用于主要操作和激活状态。绝不可用于装饰性点缀、插图或信息类 UI。
- 保持混凝土画布(#e8e6e3)的主导地位。白色卡片和面板应感觉像被放置的物体,而非默认表面。
- 所有交互元素均使用胶囊形按钮(50px 半径)。胶囊形态不可替代,是系统交互语言的核心。
- 每段标题末尾以句号结束('洞察。','技术。')——这是Zagma显示风格中反复出现的排版特征。
- 正文与 UI 文字使用 NeueHaas,字号 10–15px,字间距 +0.01em 至 +0.02em。正文低于 20px 时,绝不可收紧字间距。
建议避免
- 禁止使用阴影、渐变或模糊效果。系统依赖于平面色彩对比与形状来营造深度,而非通过立体效果。
- 禁止引入额外色彩。色彩调性为混凝土、白色、碳灰和一种粉红信号。引入任何其他色调将破坏编辑的克制感。
- 禁止将正文置于 Zagma 中。Zagma 在小字号下是可读性失败;仅保留于 24px 及以上。
- 在 60px 以上的大标题中,行高绝不可超过 1.0。紧致的 0.85–0.90 堆叠是使大字号显得雕塑感而非空旷感的关键。
- 禁止将 #ff2c6b 用于背景、卡片或大面积表面。粉红仅适用于按钮级和小范围点缀级——它是一种火花,而非颜料。
- 禁止使用方形或小半径圆角按钮或主要容器。仅胶囊(50px)和 12px 卡片半径是两种唯一形状特征。
- 禁止使用冷灰或蓝调中性色。整个中性色系均为暖色调(#e8e6e3,#8c8b8b,#191818)——引入冷色调会立即改变整体氛围。