Quin 网站预览
Quin 网站预览

Quin

暖白色基底、等宽文字标注与紧密字距。

页面以暖白色为基底,搭配深灰色文字。字体采用 Instrument Sans、Geist Mono。视觉特点包括等宽文字标注、紧密字距、细线分隔、扁平表面。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 展示标题使用 80–96px 的 Instrument Sans 字重 400,行高 0.75–0.92,字间距在 -2.32 至 -3.17px 之间 — 从不给展示文本松散呼吸的空间
  • 所有组件(卡片、按钮、徽章、输入框)的边框半径均设为 0px — 所有元素均为锐利的矩形,而非圆角形状
  • 所有导航链接、按钮标签和徽章文字使用大写 Geist Mono 12px,字间距 +0.54px — 这是系统的排版签名
  • 保持画布背景为 #fffcf2 乳白色;使用 #f0ecdf 沙岩色用于交替条带,所有细线边框使用 #d0cec6 砂砾色
  • 将蜂蜜黄 #f7cf49 保留用于公告条、高亮徽章和每个区块中的一个装饰性区块 — 从不用于大面积填充
  • 在单个组合中使用 Instrument Sans 全尺寸范围(14–96px);极端的尺寸跳跃构成编辑节奏
  • 将文本与 #141414 深灰(obsidian)对比 #fffcf2 画布,达到 17.9:1 的 AAA 对比度 — 正文文字使用 #545454 石墨色以强化层级

建议避免

  • 绝不使用边框圆角 — 本系统以锐利、纸张般的边缘为特征;圆角会破坏编辑风格的印章隐喻
  • 不要将 #f7cf49 用于正文或大面积填充 — 与乳白色背景对比会失去对比度;仅保留用于小面积强调表面和边框
  • 避免使用阴影或内阴影来营造深度 — 深度来自乳白色色阶的明暗变化,从不通过模糊效果实现
  • 不要引入超出蜂蜜黄、烧焦赭石和香粉蓝之外的新强调色 — 3% 的色彩饱和度预算是刻意设定的
  • 绝不将 Instrument Sans 正文文字设置在 20px 以上或 14px 以下;中等尺寸仅用于标题和副标题
  • 正文段落中不要使用居中对齐 — 仅首屏标题和区块标题居中,正文保持左对齐
  • 避免在正文文字中使用过密的字间距;激进的负字间距仅适用于 32px 及以上尺寸的展示文本