Alden

白色基底、胶囊形控件与紧密字距。
页面以白色为基底,搭配深紫色文字。字体采用 Stk bureau Sans Book Trial、Stk bureau Serif Book Trial。视觉特点包括胶囊形控件、紧密字距、扁平表面、衬线字形。适合参考的场景:AI 工具官网、产品能力介绍页。
查看原始网站使用规范
建议采用
- 保持画布98%无彩色——任何视口内,仅允许天蓝色和鼠尾绿作为色彩像素存在。
- 所有功能性内容使用 Stk bureau Sans,仅在 40px 及以上的字号切换到 Stk bureau Serif,赋予编辑版面的庄重分量。
- 大幅收紧字间距:56px时为-0.04em,16px时为-0.02em。负字间距是系统的标志性特征。
- 在标题内部的个别词汇上使用 Sky Highlight(#97cde5),而非整行或背景。
- 所有按钮和徽章的边距半径均需达到100px——胶囊形状是品牌一致性的必要条件。
- 使用 Parchment Cream(#f3f1eb)作为第二层表面,而非背景渐变——必须以完整区块或完整容器形式呈现,绝不可部分填充。
- 通过白与奶油之间的对比来分隔层级,而非使用阴影或边框。
建议避免
- 不要引入新的强调色——该系统刻意限制仅使用天蓝色和鼠尾绿。
- 不要使用盒阴影。层级感来自白到奶油表面的对比,而非深度。
- 不要在按钮上使用24px边距半径——按钮始终为100px的完整胶囊形。
- 不要将 Sky Highlight 应用于正文段落或背景——它仅作为标题内的注解存在。
- 不要将 Inter 或系统字体设为默认;始终加载 Stk bureau(或其 Inter/Source Serif 替代字体),以保留编辑版面的语言。
- 不要将产品截图居中置于纯白色背景上——所有截图必须置于 Parchment Cream 上,使设备边框被视为对象而非页面内容。
- UI组件(导航、按钮、徽章、表单字段)不得使用衬线字体——衬线字体仅用于展示场景。