Oxide Computer Company 网站预览
Oxide Computer Company 网站预览

Oxide Computer Company

近黑色基底、等宽文字标注与紧密字距。

页面以近黑色为基底,搭配浅灰色文字。字体采用 SuisseIntl、GT America Mono。视觉特点包括等宽文字标注、紧密字距、细线分隔、扁平表面。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • #002923(Deep Teal)是唯一的按钮填充背景,搭配#00d892(Phosphor Green)文字,字体为GT America Mono 12px。
  • 所有按钮、徽章、输入框、卡片和导航项的圆角半径设置为 1px —— 结构元素上绝不使用 4px 或更高值
  • 所有技术标签、选项卡、徽章和按钮都采用GT America Mono 10–12px,字间距为0.053–0.064em。
  • 通过颜色(Void → Carbon → Graphite)和1px Slate边框逐级区分表面;绝不用投影表现抬升。
  • 使用表面层级 #0b0e12 → #181a1d → #1f2124 按此顺序,从底层到卡片到提升状态的面板
  • 标题使用 SuisseIntl 50–65px 字重 400,负字间距(-0.005em 至 -0.003em);让字号本身完成表达,而非依赖粗体字重
  • Phosphor Green(#00d892)只用于激活状态、标志和状态指示器;绝不作为装饰强调或大面积填充。

建议避免

  • 按钮、徽章、卡片或导航项的圆角半径绝不超过 1px —— 锐利边缘是其标志性特征
  • 绝不使用阴影来营造立体感;系统仅通过表面颜色递进和 1px 内嵌线条来传达深度
  • 绝不使用粗体(600 及以上)或中粗字重——Oxide 两种字体均运行在 400 字重上
  • 不要将Phosphor Green(#00d892)用于背景填充、页面分区背景或大面积装饰区域。
  • 绝不将诊断洋红(#9f3f53)用于用户可见的警告、表单错误或破坏性操作按钮——它属于终端读数色彩,而非错误 UI 色彩
  • 绝不将正文居中对齐,或在居中布局中堆叠标题——Oxide 采用左对齐,且留有充足的左边距
  • 绝不使用照片式圆润处理、模糊效果或渐变叠加于产品渲染图——硬件摄影以原始状态呈现,无边框也无圆角