色彩

两层书写：原色是原始取值，也是唯一出现 hex 的地方；语义令牌引用它们，说明这个颜色用在哪。组件引用语义层，绝不引用原色。

中性色阶

十三档。点击色卡复制 hex。

语义层引用关系：900 → 品牌色 / 取值 · 600 → 字段名 · 500 → 说明 · 400 → 禁用 / 标尺数字 · 300 → 输入描边 / 滑块轨道 · 200 → 浮层描边 · 100 → 分段轨道 · 25 → 画布

这条阶梯每一档都偏冷，RGB 极差在中间调达到 19–26。这是刻意的，不是没调干净。

36101921242422

冷味一致而果断：全阶梯色相同向，中间调 RGB 极差 19–26。这是刻意的，不是没调干净。低色度的灰会落进模棱两可的区间——不够中性到读作灰，又不够冷到读作冷灰。 要么彻底中性，要么果断地冷。唯一采用纯中性灰的是标尺刻度：界面统一冷调、器械刻度中性，两者各自成立。

唯一的例外是标尺刻度，它用纯中性灰。界面统一冷调、器械刻度中性，两者各自成立，互不干扰。

text-primary
→ neutral-900

取值 200 mm · 分区标题 · 正文

17.74:1

text-secondary
→ neutral-600

字段名 · 次级按钮 · 图标按钮

7.56:1

text-tertiary
→ neutral-500

说明文字 · 单位后缀 · 时间戳

4.83:1

text-disabled
→ neutral-400

禁用态 · 标尺数字

2.54:1

四档的间距要均匀展开，每档约为上一档的一半。眼睛分辨的是比值而不是绝对值：17.7 和 12.4 会被读作同一档，而 4.8 到 2.5 的一跳就足够清晰。四档均匀铺开，"让标签退后一步"才有落点可选。

stroke-divider

同一表面内部条目之间：分区之间、面板标题栏下方、统计块之间。最弱的一档。

stroke-default

浮层与卡片的边界：下拉浮层、画布浮层、提示气泡、白纸轮廓。同时有阴影帮它成形。

stroke-input

输入框、取值胶囊、下拉触发器、次级按钮。可交互控件的边界比装饰性边界重一档。

hover 用描边加重，不用填充变浅。surface-subtle 和 background-input 在浅色模式里非常接近，改填充经常等于没变化；把描边从 stroke-input 提到 stroke-strong 则一定看得见。

画布台面 canvas-surface 只比面板的白低一档。画布不该比面板深——深画布会把注意力从产物上拉走。

标尺是三层递减的器械 chrome：数字 2.47:1 · 主刻度 1.64:1 · 次刻度与网格 1.22:1。对照产物本身的 19.2:1——这条阶梯的意思是要看时看得见，不看时不碍事。

品牌色比正文文字更深一档——主按钮、滑块已填充段、开关开启态该压得住文字，层级才对。强调红每屏最多出现一次，落在要花钱、消耗积分、或无法撤销的操作上。它的力量完全来自稀缺：一屏里有两个红按钮，等于一个都没有。

块数较多，预览分阶段计算。导出的图纸不受影响。

参数已保存。

单块最短边 9.52 mm，小于 12 mm 后不好拿也容易断。减少行列数，或把画板加大。

宽度需在 40–900 mm 之间。

浅底做填充，实色做图标，消息文字保持 text-primary。带色文字配浅色底是状态提示里最常见的无障碍错误——warning 配 warning-subtle 看着整洁，实际远低于 4.5:1。