Chronicle 网站预览
Chronicle 网站预览

Chronicle

白色基底、产品图像展示与大字排版。

页面以白色为基底,搭配深灰色文字。字体采用 Diatype。视觉特点包括产品图像展示、大字排版、紧密字距、宽松留白。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 使用 #000000 或 #050505 作为填充按钮的背景色——任何交互元素均不得使用有色彩的色调
  • 在54px显示尺寸和32px标题尺寸上,分别应用 Diatype 字体,字间距为 -0.030em 和 -0.023em;正文文字在16px时字间距为0
  • 在首屏区域交替使用 #ffffff 和 #f3f3f3 背景,以营造节奏感,但不添加装饰元素
  • 所有按钮、输入框和标签使用 4px 圆角;仅卡片和图片框使用 8px 圆角
  • 在图片框和卡片边缘保持 1px 实线 #e2e2e2 细线边框——绝不使用更粗的线条
  • 将电蓝色和任何彩色仅保留用于帧内渲染的产品 UI 内容,绝不用于导航、按钮或背景
  • 仅在白色卡片置于灰色背景时使用单层阴影(rgba(5,5,5,0.08) 0px 2px 24px 0px)—— 白色背景上的白色内容不添加阴影

建议避免

  • 绝不将品牌色(蓝色、紫色、绿色)引入导航栏、按钮、板块背景或字体设计中—— 界面刻意保持无彩色
  • 按钮或输入框的圆角绝不超过4px—— 椭圆状按钮会破坏编辑性排版的统一性
  • 绝不使用500以上的字重—— Diatype在400/500的范围内已覆盖完整字重范围;更重的字重会破坏机械感字形的质感
  • 永远不要在一个内容区块内堆叠超过两个字体大小,除非通过#6b6b6b的柔和颜色重新确立层级,而不是增加额外的大小层级
  • 永远不要应用超过一个阴影层级——系统仅使用单层微妙的卡片阴影;增加多层阴影会引入不想要的深度
  • 永远不要将正文段落或小标题居中对齐——所有低于标题层级的文本均应左对齐
  • 永远不要将#b3b3b3或#929292作为有意义内容的文本颜色——这些色调仅用于禁用状态和装饰性分隔线