Active Theory 网站预览
Active Theory 网站预览

Active Theory

宇宙虚无中仅有一个发光的门户——深空控制台,其中 界面外围元素 如低语,而渲染的世界则高声呐喊

Active Theory 作为宇宙虚无舞台,沉浸式体验即是设计本身,UI 元素几乎不复存在。画布为近乎全黑(#000000),UI 组件以低语般的透明容器形式漂浮——半透明表面、细线边框,以及胶囊形控件,逐渐融入黑暗之中。字体分为两种:导航与行动号召(CTA)使用无衬线几何字体(nbarchitekt),正文则采用刻意的衬线字体(Times),形成意外的对比,传递出匠心超越惯例的信号。色彩仅保留单一柔和的紫罗兰色调(#343755)和纯白色文字——页面本身保持单色,因此渲染的 WebGL 世界承载全部色彩表现。每一个 UI 决策都优先追求无感的 界面外围元素 效果,使 3D 场景呈现出脱离束缚、漂浮于深空的视觉感受。

查看原始网站

使用规范

建议采用

  • 仅使用 #000000 作为画布颜色——绝不引入灰度背景;虚无必须保持绝对
  • 仅在关键主导 CTA 处使用 Dusk Violet(#343755)——该强调色被严格控制,因为其与 3D 场景存在竞争关系
  • 所有胶囊形控件(按钮、标签)的边框半径设为 500px——部分圆角会显得不一致,与完全胶囊化的主控件形成对比
  • 正文使用Times字体,行高16px,行间距1.88倍——衬线字体搭配充足的行高,在密集的3D视觉中营造出编辑性的呼吸空间
  • 所有卡片使用 1px 边框,颜色为 #4d4d4d 以界定边界——绝不依赖阴影;虚无无法投射阴影
  • 为所有叠加面板应用 backdrop-filter: blur(4px);磨砂玻璃效果是这个系统传达深度的方式。
  • nbarchitekt 字体在导航中使用 10-12px,按钮标签使用 14px 字重 700——字体层级刻意微小,以保持 界面外围元素 的不可见性

建议避免

  • 绝不引入新的色彩强调——色彩体系为黑色、白色、灰度和一种紫罗兰色;任何额外色调都会与渲染场景产生冲突
  • 不要在任何元素上使用 box-shadows(盒阴影);层次感必须来自半透明表面的叠加与背景模糊,绝不能依靠投射光。
  • 绝不使用纯白或纯灰的卡片背景——所有表面必须半透明(rgba 值在 0.1-0.5 范围内),以便画布穿透
  • 绝不将正文置于 nbarchitekt 字体中——Times 衬线字体是刻意的编辑性反差;混合无衬线字体用于正文会削弱风格区分
  • 绝不使用 5px 到 500px 之间的圆角值——按钮要么是锐利的透明矩形(5px),要么是完整胶囊(500px);中间值看起来不专业
  • 绝不为 UI 元素添加渐变——3D 场景承载全部渐变丰富性;UI 渐变会削弱舞台质感
  • 即使在明亮区域也绝不使用浅色主题组件——该系统以深色为优先;浅色模式会破坏沉浸式连贯性