设计规范
ZhaoUI 是一套跨 Web、桌面和 H5 的设计语言：同一组设计 Token 驱动所有组件，B 端（中控、内容管理）与 C 端（面向公众、多品牌）共用核心，差异通过主题属性切换。
完整视觉演示
色彩、字体、间距、圆角、阴影、动效、涨跌色、品牌色提取、交互模式和治理规范都在一页里，可以切换品牌、亮暗、密度、B/C 端和屏幕档位。
原则
- 一套 Token：颜色、字体、间距、圆角、阴影、动效时长都是
--zh-*变量，组件不写死数值，换主题就是换变量。 - 颜色用 OKLCH 生成：品牌色按主色与可读性规则派生一整套色阶；主色选满足 4.5:1 对比度的最鲜艳一档，亮色主色（如黄色）会自动改用深色按钮文字。
- 文字用带 text 的一档：文字、链接、文字按钮使用
--zh-color-primary-text等达标的颜色，而不是品牌底色。 - 图标：线性图标（来自 Lucide，ISC 许可），不使用 emoji。
- 图表：固定 8 色分类色板，只有一条纵轴，不做双纵轴；涨跌色可按地区切换（
data-trend）。 - 可访问：键盘可达、焦点可见、减少动态效果时保留淡入淡出、适配 Windows 高对比度。
主题维度
| 维度 | 属性 | 取值 |
|---|---|---|
| 明暗 | data-mode | light、dark |
| 受众 | data-audience | b（B 端）、c（C 端） |
| 密度 | data-density | compact、standard、comfortable |
| 风格 | data-style | flat（默认）、glass（玻璃拟态，实验性） |
| 涨跌色 | data-trend | cn（红涨绿跌）、intl（绿涨红跌） |
| 品牌色 | data-brand / ZhaoUI.setBrand() | 任意颜色，或从 Logo 提取 |
浏览器
目标是 Chrome / Edge 111+、Safari 16.4+、Firefox 113+。自动测试在 Chromium、Firefox、WebKit 三个引擎的最新版上运行，更旧的版本没有测过。