Gleap 网站预览
Gleap 网站预览

Gleap

温暖的奶油纸工作空间搭配石墨点缀——一个浮于亚麻结构之上的工作室,其中哑光黑色墨点漂浮其上。

Gleap 采用温暖纸张的视觉语言:略带奶油色的底布承载着淡绿色石纹的平滑表面,色彩表现极低,几乎无色——仅有一个鲜明的绿色点作为点缀,其余部分完全无色。整个产品呈现出建筑感:标题使用 400 字重,字间距为 -0.01em,控件呈胶囊状,触感更像手绘而非印刷。色彩仅用于功能性的标记(状态点、激活导航点、无渐变的产品截图),而主要的行动号召按钮为哑光黑色胶囊,而非品牌色按钮。各层级表面依次为底布 → 白色卡片 → 淡绿瓷砖 → 玻璃层叠加,从未使用阴影作为装饰;深度通过从冷灰到暖石的色温变化来传达。

查看原始网站

使用规范

建议采用

  • 所有按钮和胶囊控件的边距半径统一设置为 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;正向字间距会破坏紧凑的建筑感