Clyde 网站预览
Clyde 网站预览

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