Amie

白色基底、紧密字距与细线分隔。
页面以白色为基底,搭配近黑色文字。字体采用 Inter、Inter var。视觉特点包括紧密字距、细线分隔、居中构图、产品图像展示。适合参考的场景:效率工具官网、协作产品介绍页。
查看原始网站使用规范
建议采用
- 所有填充型 CTA 按钮必须使用 #11a8ff,其他任何 UI 元素不得使用彩色填充。
- 所有使用 Inter 的显示与区块标题,分别在 56px 时字间距为 -1.40px,40px 时为 -0.48px
- 卡片边框通过3 层阴影堆叠(rgba(0,0,0,0.06) 0px 0px 0px 1px ...)渲染,而非使用明确的边框颜色属性
- 所有标签/胶囊形控件/分类标签组件使用 9999px 半径,卡片和主要按钮使用 12px 半径
- 在 span 元素层级使用 #fbefaf 背景,在行内突出关键统计数据或短语;每个首屏区域仅应用一次,以保留强调效果。
- 在辅助场景中保持灰度(1)滤镜应用于合作伙伴/社交证明标志和产品截图
- 类别强调色 (#01ca45, #a050ff) 仅用于标签边框,禁止用于填充任何 UI 表面
建议避免
- 绝不添加第二个彩色操作色 — #11a8ff 是唯一的 CTA 填充色;其他颜色将破坏层级结构
- 正文文本的字重不得低于 400,也不得高于 700 — 整个系统仅使用 400 至 700 的字重范围
- 避免为卡片显式声明边框 — 采用阴影作为边框的技术(0.06 不透明度环)是保持表面融合而非分离的关键
- 绝不使用 #a0a0a0 或 #5c5c5c 作为标题颜色 — 这些颜色仅限于次级正文和标签使用
- 正文段落绝不居中对齐 — 保持左对齐,且以 16px 的副标题基线为统一内容排版标准
- UI 组件中绝不使用渐变 — 天空渐变 (#cfeeff → #41baff) 仅用于突出短语的装饰性背景,不应用于按钮或卡片
- 不要在导航栏外部应用背景滤镜模糊效果 — 该效果仅出现在滚动时的固定导航栏