A3S 调色板把语义角色与产品强调色分开。基础组件只使用语义令牌；Office 类资源再使用蓝、绿、橙、紫来表达文档或智能体类型。
--background--card--primary--a3s-blue<div class="grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-lg border border-border bg-background p-4"><div class="mb-3 h-12 rounded-md border border-border bg-background"></div><strong class="text-sm">背景</strong><code class="mt-1 block text-xs text-muted-foreground">--background</code></div>
<div class="rounded-lg border border-border bg-card p-4"><div class="mb-3 h-12 rounded-md bg-card shadow-sm"></div><strong class="text-sm">表面</strong><code class="mt-1 block text-xs text-muted-foreground">--card</code></div>
<div class="rounded-lg border border-border bg-card p-4"><div class="mb-3 h-12 rounded-md bg-primary"></div><strong class="text-sm">主要操作</strong><code class="mt-1 block text-xs text-muted-foreground">--primary</code></div>
<div class="rounded-lg border border-border bg-card p-4"><div class="mb-3 h-12 rounded-md bg-[var(--a3s-blue)]"></div><strong class="text-sm">A3S 蓝</strong><code class="mt-1 block text-xs text-muted-foreground">--a3s-blue</code></div>
</div>| 角色 | 浅色 | 深色 | 用途 |
|---|---|---|---|
--background | #f7f7f8 | #101118 | 应用画布 |
--foreground | #17181a | #f2f3f5 | 主要内容 |
--card | #ffffff | #171820 | 抬升或分组表面 |
--muted | #f2f3f5 | #1e2028 | 低强调填充与控件 |
--muted-foreground | #71757d | #a4a8b2 | 辅助文本 |
--border | #e2e4e8 | #2a2d35 | 分隔线与边界 |
--primary | #242424 | #f2f3f5 | 主要操作 |
--ring | #2864e8 | #6ca3ff | 键盘焦点 |
--destructive | #d84b4f | #f27777 | 错误与破坏性操作 |
<div class="flex w-full flex-wrap gap-3">
<span class="badge bg-[var(--a3s-blue)] text-white">文档 / 主要操作</span>
<span class="badge bg-[var(--a3s-green)] text-white">表格 / 成功</span>
<span class="badge bg-[var(--a3s-orange)] text-white">演示文稿</span>
<span class="badge bg-[var(--a3s-purple)] text-white">智能体 / 智能能力</span>
<span class="badge bg-destructive text-white">危险</span>
</div>产品强调色应通过组件局部变量传入，不要直接作为正文前景色。浅色与深色主题都必须保持足够对比度。
.my-resource {
--resource-accent: var(--a3s-green);
}主题切换通过 <html> 上的 dark 类完成。应用可以在 :root、.dark 或局部产品容器中覆盖语义令牌，但应保持令牌名称稳定，让组件与文档预览始终同步。