Aira

近白色基底、胶囊形控件与细线分隔。
页面以近白色为基底。字体采用 Gestura (custom serif)、Inter。视觉特点包括胶囊形控件、细线分隔、衬线字形、大幅摄影展示。适合参考的场景:软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 所有展示标题都采用Gestura或Fraunces替代字体,字号36-66px,负letter-spacing为-0.015至-0.020em。
- 每个衬线标题都配12px的Inter眉题标签,字间距+0.14em,颜色Stone #70706f,以建立编辑式节奏。
- 所有按钮都采用999px胶囊圆角;系统任何地方都不存在方形或4px圆角按钮。
- 填充操作采用#1f1f1f或#111111,其上的文字采用#fafafb;绝不要将彩色品牌色引入按钮。
- 主要功能块通过表面对比反转区分,如浅色画布上的深色卡片、深色分区上的浅色卡片,而非通过阴影或颜色分隔。
- 正文、导航和输入框中的Inter保持14-16px、400-500字重;600-700只留给简短标签和按钮文字。
- 摄影承载暖意与彩色,UI则在骨白与墨色中保持纸张般安静。
建议避免
- 不要将蓝、绿、红或任何彩色强调引入UI调色板;系统刻意保持单色,任何彩色都会破坏大幅报纸的氛围。
- 超过24px的标题不要使用Inter;衬线字体使品牌具有辨识度。
- 同一表面上的卡片不要通过阴影分隔;改用#2c2c2b的1px细线边框或完整表面反转。
- 按钮或徽章不要使用方形或4-8px圆角;999px胶囊是系统交互元素唯一的形状语言。
- 不要采用鲜亮或饱和的悬停状态;悬停变化只限于出现下划线,或边框加深1级色调。
- 没有明确15:1+对比度时,不要在浅色卡片上放浅色文字,或在深色卡片上放深色文字;系统依靠极高对比作为主要视觉工具。
- UI任何地方都不要添加渐变填充、辉光或彩色模糊;唯一允许的“辉光”是手机模型图上的柔和阴影。