Clyde

深色基底、渐变展示与细线分隔。
页面以深色为基底,搭配近白色文字。字体采用 Recoleta、Oldschool Grotesk。视觉特点包括渐变展示、细线分隔、衬线字形、居中构图。适合参考的场景:软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 所有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透明描边,绝不会同时存在