V–A–C 网站预览
V–A–C 网站预览

V–A–C

浅色基底、网格布局与大幅图像展示。

页面以浅色为基底,搭配近黑色文字。字体采用 Diagramatika Text、Diagramatika Display。视觉特点包括网格布局、大幅图像展示、摄影展示。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 仅使用 #000000、#ffffff 和 #999999。绝不引入色彩——无彩色系统是其身份标识。
  • 将所有文本元素设置为字重 400。禁止使用粗体、中等、轻体或其他任何字重。扁平单一字重的语调是设计核心。
  • 为所有元素(包括图像、卡片、按钮、标签)设置 0px 圆角——几何形态锐利且具建筑感。
  • 所有事件类型元数据链接前必须加上 ↗ 箭头图示。这是‘可点击事件详情’的通用标识。
  • 在每页保持 V—A—C 对齐基准条,三字母分别位于左/中/右,位于 1px 黑色线条上。
  • 在卡片行之间使用 250–275px 的垂直间距。充足的行间呼吸空间使网格呈现出画廊墙面的间距感,而非产品卡片列表。
  • 将显示标题设置为行高 0.88–0.90。紧凑的行距使大字号文本凝固成密集块,而非松散段落。

建议避免

  • 禁止添加品牌色、强调色或语义状态色(如不使用绿色表示成功,不使用红色表示错误)。该系统刻意保持无色彩。
  • 禁止使用粗体或中等粗体字重。禁止在悬停或激活状态时增加字体粗细——应改用下划线或色彩变化替代。
  • 禁止应用圆角、阴影或渐变。表面为扁平,边缘锐利,不存在任何层级或立体感。
  • 禁止对卡片标题或正文内容使用居中对齐。文本在严格网格中保持左对齐。
  • 禁止将卡片行之间的垂直间距减少至 150px 以下。充足的行间间距是营造画廊氛围的关键。
  • 禁止使用彩色图标、填充图标或多色插图。图标应为单线黑色轮廓或字形图示(↗、×、·)。
  • 禁止添加背景色、 带淡色的 覆盖层或分节条带。页面为一片连续的白色区域——分节的界限来自空白与网格节奏,而非色彩。