KEPTERCOMPUTE

品牌基础

视觉规范只有在服务于一个明确的立场时才有用。这一页规定我们是谁、说话什么调子；后面十九页都是它的执行细则。任何一条视觉决定如果和这一页冲突，以这一页为准。

从 1.3 到 2.0

这一页是给已经熟悉 ApexByteAI v1.3 的人看的。换代不是推翻，是把同一套价值观搬进另一种介质。下面逐条对照：哪些留下了、哪些换掉了、为什么换。任何"我记得以前不是这样"的争论，先来这一页。

标志与制图

标志名 Fanout K。一根立柱，两道从它射出的光束——立柱是机架，光束是分发出去的算力，合起来是一个 K。它建立在和上一代相同的 64 × 64 方格上（1 U = 1/64 标志宽），所有尺寸都是这套网格的整数或半数。任何缩放请等比进行，不要重绘。

除这四版之外没有第五版。单色版把立柱也改成 9 U 描边的圆头线段，与光束同宽——这样在低分辨率工艺下三个元素的粗细一致，不会出现"柱子糊了、光束还在"的失衡。遇到无法归类的介质（镀铬、阳极氧化、激光雕刻），一律用单色版并把描边加粗到 10.5 U 补偿工艺损失。

安全边距与最小尺寸

标志周围必须留出的空气，用标志自身的一个部件来度量——这样任何缩放下规则都自动成立，不需要查表。度量单位 = 立柱宽度（9 U）。

锁定组合与子品牌

字标 KEPTER 用 Inter Tight 800，COMPUTE 用 Inter Tight 300——一重一轻，对应"实体"与"算力"。两者字号相同、字距相同，只有字重不同。不要自己排字标，用交付包里的矢量文件。

联合品牌里双方标志的视觉重量应当相当，不是像素高度相当——对方标志若为横长构图，按 x-height 或主体高度对齐。分隔线用 --hair2，1 px，不加渐变。永远不要把对方标志放进我们的光晕里，也不要给对方标志套 Beam。

色彩系统

两个强调色，一条七级底色阶梯，五个状态色。深色是默认态，浅色是同一套语义令牌的另一组取值——不是"深色模式"这个附加功能，两者地位对等。所有中性色统一落在 235° 蓝紫上，因此底、线、字放在一起永远是同一家人，也和 Ion 同源。点击任意色值可复制。

规则记法：深底用亮的，浅底用深的，中停永远不落单。这三句覆盖 100% 的情况。

两套阶梯的逻辑是镜像的，但手段不同。深色靠"越高越亮"表达抬起，浅色靠"越高影越深"——因为白底上没有比白更亮的东西。所以浅色模式里 bg1/bg2/bg3 数值相同，差别全在 Sheet 09 的阴影配方上。写组件时永远引用语义令牌 --bg2，不要写死颜色，换模式才不会塌。

--t3 是正文可用的最低一档，两个模式都刚好越过 4.5:1。任何时候想再压暗一点都会掉出合规区，这一档没有余量——需要更弱的视觉重量时请缩小字号或减少字数，不要继续降对比。

Provisioning 是 v2.0 新增的。1.3 把"已下单未上架"塞进 Warn，导致客户后台里一半的橙色其实是好消息。它用 Ion 而不是新颜色——因为"我们正在为你干活"本身就是品牌行为，不是异常。
状态永远配文字或图形，不能只靠颜色区分——约 8% 的男性有色觉障碍，而我们的客户大量是男性工程师。Ready 与 Provisioning 在红绿色盲下区分度充足（绿 vs 紫），这是选 Ion 而非蓝的原因之一。

强调色占版面 8% 左右就够了，其中 Beam 渐变不超过 2%。一屏一个主行动点，就是一处 Ion。出现两处以上大面积强调色，说明这一屏没有想清楚要用户干什么。

光效体系

这是 v2.0 的核心，也是唯一一处需要新纪律的地方。1.3 用"全面禁止渐变与发光"来防止品牌变廉价；2.0 允许它们，但把光当成一种有编号、有数量上限、有合法位置清单的材料来管——像管颜色一样管光。一个不能说出自己属于哪一类的光，就是不该存在的光。

.gh{position:relative}
.gh::after{
  content:"";position:absolute;
  left:12%;right:12%;top:-1px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    var(--ion)   22%,
    var(--pulse) 50%,
    var(--ember) 78%,
    transparent);
}

字体系统

两款字体分工明确：Inter Tight 承担所有叙述性内容与界面文字，JetBrains Mono 承担所有"机器产生"的内容——型号、序列号、SKU、单价、时长、状态标签。这套分工从 1.3 完整继承，它本身就在传达"我们管理的是真实设备"。两款均为 SIL 开源许可，可自由商用、嵌入与客户端分发。

正文最小 13.5 px，Mono 最小 10 px。低于此值请改版面，不要缩字。表格与所有数字一律开启 font-variant-numeric: tabular-nums，保证列对齐——这在按小时计费的产品里不是细节，是可信度。

栅格与间距

版式沿用制图逻辑：1 U = 4 px，所有间距、圆角、描边都是 U 的整数倍。这条规则从 1.3 原样继承，把标志的 64 U 网格延伸到整个界面，也让开发和设计不用为"这里到底是 13 还是 14"扯皮。

材质与层级

1.3 说"这个品牌不使用投影"，层级只靠 1 px 线、底色和留白。在白底上这条规则成立；搬到 #08090F 之后它会逼着团队用十二级底色去表达三级结构。所以 2.0 把它换成一套显式的材质配方：五级抬升，每级由三层叠加而成，深浅两模各有一组取值。

描边永远 1 px，不加粗、不用 2 px 表示选中——选中用底色和 Ion 边框表达。深色界面里描边的作用被低估了：在 E1 和 E0 只差 9 个灰阶的地方，那 1 px 是唯一能说清"卡片到这里为止"的东西。

图标系统

图标沿用标志的几何规则：64 U 网格、圆角端点、全圆帽。描边从 1.3 的 3.5 U 提到 5.5 U——深色底上细线会被背景吃掉，这是深浅两种介质的物理差异，不是风格偏好。

界面组件 · 控件

品牌大部分时间活在后台里：库存表、租期页、报价单。这两页规定组件每一个状态的长相——不只是"默认好看"，而是悬停、按下、聚焦、禁用、加载、报错各是什么样。所有取值都来自 4 U 阶梯与既有色板，没有第七种颜色。

输入框底色用 E0- 下沉（--bgs）而不是卡片色——"可以往里打字的地方看起来是凹的"，这是深色界面里最省力的可供性提示。报错时只改边框颜色和辅助文字，不改底色：底色一变，整行会在表格里跳出来抢注意力。

状态标签一律 pill 圆角 + Mono 全大写 + 圆点。圆点是给色觉障碍用户之外的第二重保险——就算颜色分不清，圆点位置和文字都在。b-new 是唯一用 Beam 做底的标签，只能用在"新上架 SKU"这一个语义上，不要拿它当"推荐""热门"用。

界面组件 · 容器与反馈

这一页规定信息怎么装进去：表格、卡片、浮层、导航、空态。深色界面最容易失败的地方在这里——层级一多，每一层都只比上一层亮一点点，最后整屏糊成一片。解决办法不是加更多底色，是用 Sheet 09 的五级材质，且同一屏最多出现三级。

数据可视化

利用率、机房容量、账单曲线是这门生意的主要图形。1.3 的图表纪律整条保留——不用 3D、不用双 Y 轴、Y 轴从零开始、一张图最多一处强调。唯一放开的是连续色阶：深色底上，Beam 派生的六级色阶比单色明度阶梯可读得多。

超过六个系列说明图表该拆了。05 Amp #FFB020 是 1.3 那个黄色的唯一遗产，语义收窄为"电力 / 功耗 / 散热"——只要图里有一条功率曲线，它就用这个颜色，其它系列往后顺延。相邻色在红绿色盲下均可区分（已用 Deuteranopia 模拟核验），但仍必须配直接标注，不能只靠图例。

六级离散，不做无级渐变——热力图上人眼分辨不出连续色的精确值，离散色阶才能读出"这一格属于哪一档"。明度单调递增，转成灰度后仍然可读。

动效

机房系统的气质是"响应快"，不是"过渡美"。动效只有两个职责：确认操作已被接收，以及在首屏给标志一次通电。除此之外的动画都是成本。深色 + 发光的组合极易诱发"再加点动画会更酷"的冲动，这一页就是用来拒绝它的。

影像与纹理

我们拍的是设备本身，不是概念。三条硬规则：真机、硬光、可辨认的型号。任何一张看起来像图库里买的照片都不能用——客户能一眼分辨谁真的有货。下方三张为占位色块，只标示画面明暗与色温区间，不是可用素材。

应用场景

硬件生意的标志有一半时间活在实物上，另一半活在控制台里。以下是优先级最高的六个落点，做物料前先在这里找对应，找不到对应的先来问。

禁用示例

以下八种做法一律不接受，无论出于什么理由。每一条都对应一次真实发生过的返工。

无障碍

目标是 WCAG 2.2 AA，深浅两模同时达标。这不是合规动作——我们的客户是长时间盯着监控面板的运维人员，可读性直接等于产品质量。深色界面并不天然更护眼，它只是把出错的位置从"太亮"换成了"太糊"。

AA = 正文可用（≥ 4.5:1）；大字 = 仅限 ≥ 18.66 px Bold 或 ≥ 24 px（≥ 3:1）；✕ = 任何文字都不可用。
读法一：--t4 整行全红，这就是"它只能画装饰符号和禁用态，不能承载信息"这条规则的来源。
读法二：Ion 那一列只有两个绿格——所以 Ion 底上只放纯白或 --t1，别的都不行；Ion 自己做正文要么放深底并换 Ion Lift，要么放大到 24 px。

Ember 那一行是浅色模式唯一的陷阱：它在深底上是 7.7:1 的好文字色，翻到浅底立刻掉到 2.6:1。凡是用 Ember 写字的地方，切换模式时必须换成 Ember Ink——这已经封装在 --ember-tx 令牌里，直接引用令牌就不会错，手写颜色就会错。

交付清单与版本

以下文件我可以直接生成给你，说一声就开始。