Mesh 网站预览
Mesh 网站预览

Mesh

午夜纸上用青铜墨水书写。一个深色的编辑版面，温暖的琥珀色规则与无衬线细体字引导视线，穿越一个密集而从容的布局。

Mesh 呈现一个夜间的编辑工作空间：近黑色画布，温暖的琥珀色光晕从下部视口溢出，清晰的白色文字读起来像杂志版面，而非SaaS仪表盘。语气自信却沉静——简洁、信息密集，文字承担主要表达，色彩仅作为语义强调。唯一的色彩点缀是温暖的铜色（#f2b98b），以轮廓和线规则出现，而非填充，因此操作感被邀请而非被强加。界面借鉴了印刷排版：大行高的全大写标签（0.1–0.17em）、紧凑的显示字体用于首屏标题，正文部分采用宽松的行高。表面为平面，边框为细线，唯一的阴影极为微妙——深度来自分层与发光，而非投影阴影。

查看原始网站

使用规范

建议采用

  • 在深色背景下使用 #fefef7（骨白）作为填充的CTA背景——它与 #0f0f10 的对比度为18.9:1，并读作温暖，而非冷冰冰。
  • 将小尺寸UI标签设为9–10px Verlag 600全大写，字间距为0.083–0.167em——宽字间距是该系统的标志性特征。
  • 仅用于展示标题，使用Verlag Condensed 900字体，字号为48–64px；行高设为1.0，使高耸的字形紧密堆叠。
  • 将 #f2b98b（青铜光泽）保留用于轮廓操作、链接下划线和装饰性规则——绝不作为填充，以保持其温暖信号的质感，而非按钮颜色。
  • 所有头像和产品示意图的圆角半径设为36px；内容卡片为16px；按钮和内联链接为6px；徽章为12px。
  • 将温暖的渐变（linear-gradient(95deg, #d49065 0%, #fec99b 100%)）作为视口底部的氛围层，向内容后方晕染，而非被限制在固定条带内。
  • 正文文字保持14–16px Verlag 400，行高1.35–1.55；长篇内容应垂直呼吸，而非收紧。

建议避免

  • 不要将 #f2b98b 用作填充按钮背景——系统中主要操作使用白色填充，仅用琥珀色作为轮廓强调。
  • 不要引入额外的色彩；3%的色彩使用预算意味着任何新色必须通过新增功能角色来获得。
  • 不要使用柔和的大半径阴影；系统中的单个阴影是偏移细线（负X，正Y）——保持层级极简且方向明确。
  • 不要在正文文字上使用小于0.013em的字间距，或在任何标签上使用大于0.167em的字间距；字间距尺度是该系统的排版身份。
  • 不要在单屏中使用衬线字体（Chronicle）作为超过一个中段编辑性强调元素——它仅作为对比，而非主要使用字体。
  • 不要对所有元素统一应用圆角；6/12/16/36的层级结构对应元素类型，失去它将削弱视觉语法规则。
  • 不要在明亮表面使用亮白色（#fefef7）——该色仅用于暗色画布上的文字和CTA填充；在亮色区域则切换至 #0f0f10 或 #1d1d1f。

相似设计语言