xAI 网站预览
xAI 网站预览

xAI

温暖奶油色实验室中的一颗黑色药丸

xAI 在温暖的白色画布上运行一个克制的近单色编辑系统。文字主导视觉层级:近100%行高、字间距紧密的超大显示标题位于宽敞的呼吸空间之上,而 GeistMono 以终端/代码片段的形式突出界面特征。唯一的交互元素是一个胶囊形、纯黑色填充按钮——其余所有控件均为透明描边或表面色调。卡片为扁平、无边框,采用暖奶油色(#f9f8f6);深度来自单一细线环,而非阴影堆叠。色彩被严格控制:温暖的浅米色页面、奶油色卡片、近黑色墨水,以及偶尔出现的鲜明强调色(测试版 药丸、交通灯终端点、渐变球体),正因其余部分拒绝给予关注,才得以引起注意。

查看原始网站

使用规范

建议采用

  • 使用 #0a0a0a 作为主要填充按钮的颜色——绝不使用彩色的 CTA 颜色;该系统刻意保持单色
  • 所有标题(24px 及以上)设置字间距 -0.025em 和行高 1.0–1.33;将其锁定在文字网格上,而非视觉居中
  • 为所有按钮、标签和语言标签设置半径 9999px;胶囊形是该系统的标志性形状
  • 任何位于页面上方的表面元素均使用 #f9f8f6;仅用暖奶油色来区分层级——避免使用阴影
  • 当内容具有技术性(代码、终端、标签、元数据)时,优先使用 GeistMono;将 universalSans 保留用于编辑和 UI 文字
  • 仅在发布版本特征时刻使用 测试版 药丸(背景色 #f2ede5,12px 字重 500);禁止引入其他强调色药丸
  • 任何非页面单一主要转化动作均默认使用透明描边或轮廓按钮

建议避免

  • 按钮或链接绝不使用彩色——页面上唯一的饱和色应仅为单个 测试版 药丸或一个终端点
  • 绝不堆叠阴影;该系统仅使用单一细线环(1px 实线 #d5d9e2)作为唯一深度提示
  • 屏幕正文文字大小不得低于 14px 或高于 18px;字体层级从 18 → 24 → 30 → 48 递增,仅通过尺寸变化维持层级
  • 导航链接、新闻卡片或内联列表项绝不添加背景色——页面应呈现为安静的空白区域
  • 连续正文的行高不得高于 1.63;显示标题必须保持在 1.0–1.33 范围内以维持编辑锁定
  • 绝不引入新的圆角;该系统为二元结构——胶囊(9999px)或奶油色卡片(16px),无中间过渡圆角
  • 绝不使用纯黑色(#000000)——始终使用 #0a0a0a;轻微的提亮使深色表面保持温暖,符合品牌调性,而非冷CRT感