Mezmo 网站预览
Mezmo 网站预览

Mezmo

浅灰色基底、细线分隔与宽松留白。

页面以浅灰色为基底,搭配近黑色文字。字体采用 Onest Variable、monospace (system)。视觉特点包括细线分隔、宽松留白、扁平表面、等宽字体。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 使用 #7561b1(Iris)作为唯一强调色——每个区块中仅对一个词或一个元素应用,绝不用于按钮背景或正文段落
  • 标题使用 Onest 300 字重,字间距设为 -0.4 至 -0.5px;这种轻盈的字重是系统最具辨识度的字体处理方式
  • 所有按钮、徽章和胶囊控件使用 5px 圆角;卡片使用 8px;仅在大功能卡片中使用 14px
  • 将 #96beca 填充按钮与 #031403 透明描边按钮配对,用于任意两个按钮的 CTA 集群
  • 将等宽字体保留用于遥测值、代码和指标数字——绝不用于营销文案
  • 主要内容区块之间保持 80px 的间距;系统需要空间来呈现如仪表盘般的可读性
  • 仅在 9–12px 的大写文本上使用 0.04–0.12em 字间距;绝不将字间距应用于句子式正文

建议避免

  • 不要将 #7561b1 用作按钮背景——Iris 仅用于强调,不用于操作
  • 不要将 #96beca 和 #74a9b9 混用作为主要操作色;Coastal Teal 是唯一的主操作色
  • 不要使用比 rgba(0,0,0,0.2) 0px 2px 5px 更重的阴影——系统为扁平优先、边框定义
  • 不要使用 600 或 700 字重的标题;300 字重是标志性处理,承载系统身份
  • 不要在非数据可视化场景中使用色彩强调(#f4b811、#9db161、#74a9b9)——这些色彩代表状态信号,而非装饰
  • 正文文本不要低于 16px 或高于 20px;16–18px 区间是可读的核心范围
  • 不要在 5px 到 8px 之间引入新的圆角——该双层级系统是刻意设计的