WRITER

白色基底、胶囊形控件与紧密字距。
页面以白色为基底,搭配近黑色文字。字体采用 Poppins、CanelaDeck。视觉特点包括胶囊形控件、紧密字距、细线分隔、衬线字形。适合参考的场景:AI 工具官网、产品能力介绍页。
查看原始网站使用规范
建议采用
- 展示标题使用 Poppins 64px 字重 500,字间距 -1.98px;保持居中并对齐,最大宽度约为 800px。
- 在每个展示标题中精确突出一个单词,使用紫罗兰主调色(#a95ef8)以形成标志性的编辑强调效果。
- 所有按钮设置 60px 圆角,邮箱输入框设置 72px 圆角,以维持胶囊形控件的视觉语言。
- 标题副标使用 Poppins 11-12px 字体,字间距 0.077-0.300em,大写,居中置于标题上方。
- 所有卡片图片和图标统一设置 12px 圆角——这是非胶囊元素中唯一使用的圆角。
- 交替使用纯白与黑曜石色(#27272b)作为区块背景,形成编辑风格中的明暗节奏。
- 使用鸢尾色品牌色(#5551ff)用于每个视口最多1-2个高关注元素;其余部分由单色承载。
建议避免
- 不得在展示标题之外使用紫罗兰主调色(#a95ef8)——过度使用会削弱其视觉冲击力。
- 不要在图片、图标或卡片上应用尖角(< 12px)——仅允许使用圆角方形的非胶囊形圆角。
- 正文文本不得低于 14px 或高于 18px——CanelaDeck 与 Poppins 在此范围内阅读效果最佳。
- 不得为卡片或按钮添加阴影;应依赖背景色对比与圆角实现区分。
- 不得在任何大于 14px 的文本上使用超过 0.05em 的字间距——宽字间距仅适用于标签或说明文字层级。
- 不得引入除 鸢尾色 品牌色、紫罗兰主调色、钴蓝闪光、薰衣草洗色之外的其他强调色。
- 不得使用全不透明黑色(#000000)作为大面积背景填充——应使用黑曜石色(#27272b)以增加温暖感和深度。