规则清单

渐变、玻璃、胶囊、首屏高光，总览里的参照物已经把它们排除掉了。下面这 26 条是参照物承担不了的部分——每一条都来自这套系统的实测。

色彩

• 01让中性色阶的冷味一致而果断。低色度的灰会落进模棱两可的区间，读作脏。
• 02让文本四档每档约为上一档的一半。四档挤在同一端等于只有两档。
• 03每次改色阶就把关键配对重算一遍，包括小字号落在浅底上的最差组合。
• 04画布保持比面板浅。产物是屏幕上唯一该响的东西。
• 05用实测对比度做判断。靠面积成立的元素（轨道、色带）和靠线条成立的元素（描边、刻度），同一个比值的可见性完全不同。

层级

• 06靠减重建立层级：标签退到细体次要色，取值站出来。
• 07用字重加颜色区分同一字号里的三层，而不是再加一个字号。
• 08结构标签和说明文字各用自己的语域：一个是骨架，一个是脚注。
• 09层级不清时先减轻标签，面板整体会更轻而层级更清。

形状与空间

• 10让统一落在外形上——填充、描边、圆角、高度完全一致。
• 11让宽度随内容走，右边缘交给布局对齐。
• 12在已封闭的面板里用分隔线分组；卡片留给真正离开平面的东西。
• 13让从不同时出现的元素共用同一格（单位后缀与拖拽手柄）。
• 14所有取值都从 8px 量表里取。只在 14px 时才顺眼的布局，问题出在对齐。

控件

• 15把红色强调档花在每屏恰好一个操作上，或者一个都不花。
• 16把状态集当作封闭的。一个看起来需要第九种状态的控件，需要的其实是重新想清楚。
• 17自造原生控件的替代品之前，先把它欠的键盘与屏幕阅读器契约写成清单，然后逐条还。
• 18给装饰层加 pointer-events: none，把点击留给它下面的真实控件。
• 19破坏性操作用次级外壳配 error 文字加二次确认。
• 20同一行只放一个拖拽入口。
• 21按钮文案用动词：生成、导出、重新生成。

工程

• 22给需要撑满的面板写 flex: 1，不是只写 min-height: 0。
• 23把图标内联成描边 SVG，不依赖图标字体。
• 24每次改完令牌跑一遍悬空变量检查：删掉一档中性色而忘了改引用它的语义令牌，会让某个状态静默失效。
• 25用细滚动条，让面板左右内边距保持对称。
• 26把浮层挂到 body 并用 position: fixed，避免被滚动容器裁掉。