Quartz design language
设计基础与主题合同
Quartz 保留可拥有代码的开放性、可靠的交互语义与企业产品需要的状态覆盖， 再用一套克制的材质、节奏和系统偏好形成自己的界面语言。
Token 先于装饰
先建立可命名、可替换的语义关系，再决定一个界面看起来如何。
材质必须解释层级
透明度只用于浮层与空间分离，不把整页变成失去边界的玻璃。
动效说明状态
进入、选择与反馈都要有原因，并服从 reduced motion 或 none。
可访问性写进合同
键盘、焦点、语义、强制色与触控尺寸属于组件 API 的基础能力。
Semantic tokens
从四类 Token 建立层级
组件只消费语义 Token，不把一次性的颜色、间距或阴影决定写死在局部实现中。
颜色
--quartz-color-*用 background、surface、foreground、border 与状态色表达语义层级。
排版
font + line-height正文保持高可读性；编辑式衬线只承担标题与品牌节奏。
间距
--quartz-density-*间距与控件高度跟随密度轴，同时保留触控目标的最低尺寸。
圆角与阴影
--quartz-radius-* / --quartz-shadow-*圆角区分控件与表面，阴影只用于确实发生的空间抬升。
Public ThemeProvider API
四个独立主题轴
下表与公开 ThemeProvider 类型保持一致。每个轴都能单独选择系统偏好或显式值。
| 属性 | 公开值 |
|---|---|
| theme | light · dark · system |
| density | compact · default · comfortable |
| motion | system · reduced · none |
| transparency | system · reduced · none |
Choosing axes
让系统偏好与产品语境共同决定
密度怎么选
default 适合大多数产品；compact 用于高频桌面数据工作；comfortable 给低频任务更多呼吸空间，但不要缩小触控目标。
动效怎么选
system 跟随操作系统；reduced 保留必要状态反馈；none 关闭非必要动画并让状态立即到达终点。
透明度怎么选
system 跟随用户偏好；reduced 降低环境光干扰；none 使用完全实色表面。文字对比不能依赖背景模糊。
Material recipe
一层清晰边界，两层环境光
Quartz 的半透明材质只用于需要强调空间关系的局部表面，并且在透明度关闭、 强制色或不支持模糊的环境中退回清晰实色。
Accessibility foundation
可访问性检查清单
- 只用键盘即可到达、操作并离开每个交互区域。
- 可见焦点不会被粘性页头、浮层或装饰性材质遮挡。
- 标题、列表、表格与状态反馈使用原生语义和准确名称。
- 文字与状态不只依赖颜色，强制色模式仍保留可辨识边界。
- 动效与透明度同时尊重系统偏好和 ThemeProvider 的显式 none。
- 窄至 320px 时内容仍能重排，触控目标保持可操作尺寸。