Gleap

近白色基底、产品图像展示与胶囊形控件。
页面以近白色为基底。字体采用 Switzer。视觉特点包括产品图像展示、胶囊形控件、渐变展示、居中构图。适合参考的场景:软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 所有按钮和胶囊控件的边距半径统一设置为 200px——胶囊形态是品牌识别的不可妥协项
- 将主要行动号召按钮设为填充色 #141414,文字为白色;任何非购买类操作默认使用石纹色 (#dbdbd2) 胶囊
- 标题保持使用 400 字重的 Switzer 字体,字号 64px 及以下时字间距为 -0.01em,80px 显示时为 -0.02em,标题绝不使用粗体,仅在正文字重基础上提升
- 以亚麻底布 (#edede8) 为基底,其上叠加白色 (#ffffff) 卡片以形成对比,内容减弱时则过渡至石纹色 (#dbdbd2)
- 对任何浮于图像或渐变背景之上的面板应用背景区分模糊效果(12px)
- 仅将 #4cc02b 绿色脉冲色用于状态点或勾选标记——绝不可作为按钮填充、页面强调色或装饰色使用
- 搭配 6px 基础间距单位用于行内间距,卡片内边距为 18px,区块间距为 80px,以维持舒适密度
建议避免
- 不要引入品牌色的行动号召按钮——该系统刻意保持无色,彩色按钮会破坏建筑感语言
- 不要在标题中使用粗体(600 以上)——400 字重是显示尺寸下的标志性风格;更重的字重仅用于按钮和徽章
- 单屏内不要超过三种表面色调(底布 → 白色 → 石纹)——色彩调性被严格控制以保持温暖氛围
- 不要使用阴影作为装饰——若需表现深度,应通过表面色调从白色到石纹到石墨逐步过渡实现
- 不要为功能卡片或面板使用锐角——内容表面的最小圆角为 12px;仅同意对话框可使用 3.75px
- 不要在 UI 元素中使用渐变——渐变区域仅保留于首屏产品截图背景中
- 正文部分的字间距不可超过 -0.01em;正向字间距会破坏紧凑的建筑感