Audyr

白色基底、细线分隔与产品图像展示。
页面以白色为基底,搭配深灰色文字。字体采用 Inter。视觉特点包括细线分隔、产品图像展示。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 将 #262626 作为唯一填充按钮的背景色——它是单色系统中的唯一视觉锚点
- 每个字号的每个文字元素都应用-0.025em letter-spacing,从12px说明文字到48px展示文字均如此。
- 所有结构分隔线、卡片边框和输入框轮廓均使用 #ededed,线宽为 1px
- 将卡片圆角设为 14px,按钮圆角设为 4px,徽章圆角设为 9999px——这三个圆角值定义了视觉语言
- 将色彩表面调色(#ecfdf5)限制用于成功/热门徽章,绝不应用于大面积区域
- 保持阴影仅分为两个柔和的层次:扩散卡片阴影(lab 0.1 25px 50px -12px)和按钮微阴影(oklab 0.05 1px 2px)
- 保持80–160px分区内边距,以保留编辑式布局的呼吸空间。
建议避免
- 不要引入品牌色强调——色彩的缺失即是品牌本身
- 不要使用超出 4 / 8 / 14 / 18 / 9999px 的圆角值;禁止使用 6px 或 12px 的中间值
- 不要添加比文档中定义的卡片阴影更重的投影——任何过度戏剧化的阴影都会破坏纸张纹理的质感
- 不要在展示用途中将 Inter 与第二字体搭配使用——单字体家族的承诺是结构性的
- 不要在白色背景上使用 #ffffff 作为文字颜色,也不要将 #ededed 用于正文——两者都会导致对比度失败
- 不要使用渐变——系统承诺使用平实、无阴影的填充
- 营销页面上不要使用彩色状态指示器;颜色仅限于徽章和定价页的‘热门’高亮