MekaVerse 网站预览
MekaVerse 网站预览

MekaVerse

数字艺术品的单色画廊——一个纯黑色虚空,渲染的世界如同博物馆展品悬挂其中,所有 UI 均为白色墨水在哑光黑色玻璃上的呈现。

MekaVerse 是一个电影级的 web3 游戏门户,界面逐渐消融,渲染出的世界成为焦点。整个界面采用单色外壳——纯黑色画布,白色文字,单个炭黑按钮——设计目的是为大规模满幅 3D 艺术作品提供框架,不与其产生视觉竞争。字体设计承担了绝大部分工作:一个定制的几何无衬线字体(Roobert)以极端大尺寸叠加,搭配激进的负行高用于首屏标题,以及一个安静的等宽字体(GT America Mono)以 10–12px 的尺寸轻声传递界面元素的轮廓。所有表面均为扁平化设计——无阴影、无渐变、无色彩强调——游戏艺术本身提供了全部的色彩与深度。每个界面元素都极为轻盈:细线 1px 边框,交互控件采用 2px 圆角,悬停状态仅保留文字显示。整个系统看起来不像一个网站,更像是一面画廊墙,其中唯一的展品是 3D 世界。

查看原始网站

使用规范

建议采用

  • 在每幅满幅渲染艺术作品下方使用 #000000 作为页面画布,并让渲染内容承载全部色彩与光线
  • 首屏标题使用 Roobert 80px 字号 400 字重,行高 0.78 —— 紧凑叠加是其标志,而非偶然
  • 保留 #ffffff 用于文字和高对比度边框;绝不将其用作填充表面
  • 所有金属元素、导航和微标签使用 GT America Mono 10–12px,字间距 -0.02em
  • 按钮渲染为 2px 圆角炭黑色(#444345)填充,搭配 1px 冰霜边框——压入式,永不抬升
  • 在每行叠加的首屏文字下方放置 1px 冰霜下划线,延伸至约 30–50% 的行宽
  • 允许渲染艺术作品溢出视口边缘;绝不将艺术包裹在带有内边距或边框的卡片中

建议避免

  • 绝不引入任何色彩——色彩方案本为单色,任何点缀都会破坏画廊的完整性
  • 绝不为任何元素添加阴影;层级感仅通过表面堆叠和细线边框传达
  • 绝不使用系统字体进行显示文本——Roobert(或 Inter 替代字体)400 字重是其声音;粗体无衬线字体破坏了低语权威感
  • 绝不给卡片或容器设置大于 20px 的圆角;2px / 10px / 20px 三元组是整个系统的标准
  • 绝不居中对齐首屏标题;它们始终左对齐,下划线延伸至右侧
  • 任何显示尺寸文字的行高均不得高于 1.0 —— 标志性的宏伟叠加依赖于激进的负行高
  • 除非设计明确要求,否则绝不添加页脚金属元素(链接、法律文本、社交图标横排);页面结束处即艺术结束处