Recess 网站预览
Recess 网站预览

Recess

明暗对比、分屏构图与网格布局。

页面兼有浅色与深色区域。字体采用 Sharp Grotesk Web、Recess Script (logo)。视觉特点包括分屏构图、网格布局、渐变展示、宽松留白。适合参考的场景：品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有界面文字使用 Sharp Grotesk；手写标志只作为文字标志搭配，绝不用作正文。
  • 展示标题设为 60px、字重 700、行高 1.0，形成紧密自信的声音。
  • 区块建立在 Periwinkle Sky #a2b0ff 或落日渐变上，以满幅氛围层呈现，而不是放在容器方框中。
  • 所有文字和边框都使用 Twilight Navy #25385b。它是唯一结构色。
  • 按钮保持平面，采用 1–2px Twilight Navy 边框的轮廓矩形，不使用渐变或阴影。
  • 薰衣草区块中加入有机云朵形态，以 10–20% 不透明度作为漂浮氛围装饰。
  • 主要区块之间保持 80–100px 垂直呼吸空间，保留宽敞、杂志般的节奏。

建议避免

  • 手写标志不要用于标题或正文。它是签名式标记，而不是字体。
  • 卡片不要使用重阴影或悬浮效果。Recess 采用边框与渐变，而非纵深。
  • 不要引入 Cobalt Pop #3252f4 和 Coral Blush #ff5a5a 之外的强调色。配色刻意克制。
  • 除小型图标描边外，不要使用纯黑背景；深色表面应为 Dusk Indigo #0a0a3a。
  • 不要将产品挤进带可见卡片框架的网格。让产品摄影自由漂浮在渐变表面上。
  • 正文不要设置字间距或全大写。只有展示标题和按钮采用带字间距的全大写。
  • 不要用硬直的实心颜色区块分隔，打破天空至落日的渐变语言。

相似设计语言