Ori 网站预览
Ori 网站预览

Ori

午夜的服务器机房:黑色空场、白色光线,以及一个被点亮的开关。

Radiant(原名 Ori)采用一种仿佛夜间基础设施的深色设计语言:纯黑画布、以极细字重呈现的明亮白色文字,以及一种高饱和橙色,用来点亮操作和铺满画面的宣言。它的视觉语法借鉴数据中心摄影中的服务器机架、霓虹边缘灯光和硬朗建筑线条,并将这些特征转化为界面:交互元素不设圆角,使用细线边框,等宽标签则像终端读数。TWK Everett 标题采用字重 300,以大字号建立冷静、自信而不喧闹的气势;橙色限量用于 CTA、一条铺满宽度的色带和强调细节,因此更像通电指示灯,而非装饰。整个系统以文字为主,并带有电影感:大字在深色留白中舒展,区块在黑色与橙色之间交替,不使用渐变或阴影来柔化过渡。

查看原始网站

使用规范

建议采用

  • 每个按钮、卡片、输入框和徽章都使用 0px 圆角。这种锐利的矩形几何形态是结构原则,而不只是审美选择。
  • 首屏和区块标题使用 TWK Everett,字重为 300,字号为 60–96px。大字号与轻字重的组合,是这套系统表达自信的标志性方式。
  • 所有标签、导航项、按钮和元数据都使用 14px 的 Chivo Mono。等宽字体的质感让界面像一个控制面板。
  • #ff4f2b 仅用于实心 CTA、每页一条铺满宽度的宣言色带,以及标题中的关键强调词。限制它的用量,才能保持它的力量。
  • 所有主要文字都使用 #f5f5f5,并置于 #000000 背景上。19.3:1 的对比度是默认的可读状态。
  • 让区块在 #000000 画布与一条 #ff4f2b 满幅色带之间交替,形成贯穿页面的双色节奏。
  • 边框和分隔线使用 1px 实线,颜色为 #3c3c3c 或 #bfbfbf。不要使用阴影来制造纵深。

建议避免

  • 不要为任何元素添加圆角。即使是 2px 或 4px,也会破坏这套建筑式设计语言。
  • 不要使用投影、发光或模糊的悬浮效果。纵深来自表面颜色的变化,而非阴影。
  • 不要将 #ff4f2b 用于正文、装饰性背景或不可交互的强调色填充。它必须表示“操作”或“点火”。
  • 不要将标题设为字重 700 或 900。轻声般的 300–400 字重范围才是标志;粗体会破坏大字所营造的冷静气势。
  • 不要使用圆角或胶囊形按钮。按钮应保持矩形,延续终端般的风格。
  • 不要引入渐变、柔和粉彩或暖色系辅助色。配色保持黑、白和一种橙色的简明组合。
  • 不要使用生活方式摄影、插画或装饰性图标。图像仅限于深色建筑或基础设施摄影。