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透明描边,绝不会同时存在