Clyde 网站预览
Clyde 网站预览

Clyde

展示间配备单点聚光灯——近黑色展厅中,仅有一个温暖渐变球体作为房间内的唯一色彩。

Clyde 将产品保护视为奢侈品编辑:近黑色画布主导每个区域,温暖的奶油色(#f6f6f4)承载所有文字和细线边框,单一的黄到橙到紫渐变仅出现在3D抽象形状和产品装饰元素内部。展示标题使用Recoleta衬线字体(字号80–125px)营造杂志封面尺度,而Oldschool Grotesk(字重300/400)负责所有UI和正文内容,以克制、紧凑的节奏呈现。配色方案为99%无彩色——按钮为深色填充或奶油边框的胶囊形控件,从不使用彩色,各表面通过明暗对比和细线边框区分,而非阴影。

查看原始网站

使用规范

建议采用

  • 所有36px及以上字号的文字使用Recoleta衬线字体(字重400)——在展示尺寸下绝不以无衬线字体替代
  • 随着字号增大,字间距递减:36px时为-0.36px,递增至125px时为-3.75px
  • 所有交互元素(按钮、标签、筛选胶囊、标签控件)统一使用100px圆角半径
  • 保持配色99%无彩色;夏至渐变是唯一的彩色元素,且仅用于3D装饰性图形中
  • 通过1px #f6f6f4 或 #1a1a1a 细线边框定义表面分隔——绝不使用阴影实现层级感
  • 展示标题行高设定为1.00,以营造紧凑、编辑风格的垂直节奏,体现品牌特征
  • 描述性正文使用Oldschool Grotesk(字重300),主要正文和交互文本使用字重400

建议避免

  • 绝不引入任何新的彩色到UI中——渐变是唯一被允许的颜色
  • 36px 以下的正文不要使用 Recoleta——UI 字号范围的所有文字由 Oldschool Grotesk 负责。
  • 绝不使用阴影实现卡片层级感;系统刻意保持扁平化,通过边框实现分隔
  • 不要将夏至渐变用作按钮填充、文字颜色、边框或UI表面——它仅具有装饰性
  • 绝不使用0或正值字间距于展示尺寸——大字号必须始终收紧
  • 绝不使用超出{4px, 12px, 16px, 38px, 100px}范围的圆角值——这五个值构成完整的圆角尺度
  • 绝不混合使用彩色按钮样式——操作要么是#000000填充的胶囊形,要么是#f6f6f4透明描边,绝不会同时存在