排版、空间与材质

字体角色

衬线字体不进入 App Shell、表单和数据表格。金额、日期、统计和案号启用 tabular numbers。

字号与排版

10px 不得承载操作、错误、正文或关键数据；不使用 300 细字。

Reference 间距

Reference spacing 不被 Theme 或 Density 改写。

圆角

不使用一个全局半径同比例缩放所有组件，也不把大圆角卡片墙当作默认页面结构。

Elevation

暗色模式使用中性黑色和独立透明度映射。禁止品牌色阴影、彩色发光和装饰性玻璃。

Motion 与 z-index

prefers-reduced-motion 下结构动效降为 instant。业务页面不得创建高于 Tooltip 的局部层级。

全局组件 Token

全局组件 Token 不随密度变化，定义壳层、页面和面板的固定尺寸：

Density

Density 有四档：dense、compact、comfortable、spacious。dense 面向高密表格与批量操作桌面场景，spacious 面向触摸与无障碍放大场景。

Density 覆盖控件、表格、字段、面板和工作区的语义尺寸。它不改字体家族、品牌色、Reference spacing 或页面结构。control-font-size 与 control-line-height 随密度变化，受无障碍 fontScale 轴进一步放大。Dense 档可操作目标仍不得小于 24px，视觉行高与交互热区分开计算。

Button、Input、Select、Table、Query Toolbar 和 Panel 必须直接消费这些 Component Token；仅切换 data-density 属性、但实际几何尺寸不变，不算完成密度适配。

消费示例

表格 primitive 直接读取密度感知的 Component Token。切换根节点 data-density 后，行高、 padding 与字号会同步变化，不需要在组件里维护四套 class：

/* 表格几何值由当前 Density 映射，不读取 Reference spacing。 */
.data-cell {
  min-block-size: var(--cmp-table-row-height);
  padding: var(--cmp-table-cell-padding-y) var(--cmp-table-cell-padding-x);
  font-size: var(--cmp-control-font-size);
  line-height: var(--cmp-control-line-height);
}

结构动画与抬升使用 System Token。data-reduce-motion=true 或系统减少动效偏好会把 System 时长映射到 instant，业务组件无需另写一份动画分支：

/* Sheet 的尺寸、阴影和动效都由稳定语义角色控制。 */
.operation-sheet {
  inline-size: clamp(
    var(--cmp-panel-min-width),
    var(--cmp-panel-default-width),
    var(--cmp-panel-max-width)
  );
  box-shadow: var(--sys-elevation-sheet);
  transition-duration: var(--sys-duration-structural);
}