Getclockwise 网站预览
Getclockwise 网站预览

Getclockwise

白色基底、圆角卡片与细线分隔。

页面以白色为基底,搭配深绿色文字。字体采用 PP Mori、Inter。视觉特点包括圆角卡片、细线分隔、宽松留白、居中构图。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 所有标题使用 PP Mori 字重 600–700;字号 52px 以上时,行高设为 0.95–1.00,以保持显示文本紧凑且具有海报感。
  • 所有 Inter 正文文本应用 -0.03em 字间距,以实现编辑类、非系统字体的质感。
  • 所有胶囊形元素(标签、按钮、标识容器)的圆角半径统一为 800px——这是系统中唯一的圆角形态。
  • 每页均锚定于 #fdf9f7 奶油底布上;仅在该底布之上提升的卡片或抬升表面使用 #ffffff。
  • 将 #039861 限制用于链接边框、细线分隔和图标点缀——禁止作为填充背景或大面积表面使用。
  • 正文最大宽度设为约 640px,并居中对齐,以提升编辑类可读性,即使在宽屏页面也保持此设置。
  • 在重复项之间(如FAQ条目、标识网格行)使用 #d6d6d6 细线分隔线(1px)。

建议避免

  • 禁止使用填充式CTA按钮或彩色背景按钮——系统仅使用透明描边或轮廓链接。
  • 禁止添加阴影、光晕或层叠效果——设计为扁平且纸张质感。
  • 不要将系统字体作为PP Mori标题的备用字体;应替换为具有相似风格的几何衬线或无衬线字体。
  • 禁止在正文、标题或大面积元素中使用 #039861——该色仅作为强调色,非结构色。
  • 禁止在胶囊或按钮上使用锐利的 0px 圆角——胶囊形态是系统定义的核心特征。
  • 禁止使用纯黑色 #000000 作为文字——应调和为 #333333 以维持印刷感和非数字氛围。
  • 禁止在任何表面添加渐变、纹理或背景图案。