色彩系统
:::tip 核心原则
色彩系统通过语义化 token（@plaud/design-tokens）管理，保证 Light / Dark 一致性。颜色一律通过 CSS 变量引用（var(--Labels-Primary)），禁止硬编码原始色值。
:::
下表与 Figma「Plaud Web 4.0 Design System」变量集一致。不透明 token 在生成的 CSS 中输出为 hex，带透明度的 token 保留 rgba()。
Labels
文本、图标等前景色。
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Labels-Primary | 主要文字、标题 | #000000 | #FFFFFF |
--Labels-Secondary | 次要文字、描述 | #3D3D3D | #D6D6D6 |
--Labels-Tertiary | 辅助文字、时间戳 | #6B6B6B | #A3A3A3 |
--Labels-Disabled | 禁用文字 | #A3A3A3 | #808080 |
--Labels-Placeholder | 输入框占位文字 | #6B6B6B | #A3A3A3 |
--Labels-Reverse | 反色表面上的文字 | #FFFFFF | #000000 |
--Labels-Link | 链接文字 | #1573D1 | #3399FF |
--Labels-Error | 错误文字 | #DE2716 | #FF5B4D |
--Labels-Success | 成功文字 | #008523 | #36D96C |
--Labels-Warning | 警告文字 | #96690F | #FABE3E |
Backgrounds
页面、卡片、容器的背景层级。
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Backgrounds-Primary | 主页面背景 | #FFFFFF | #0A0A0A |
--Backgrounds-Secondary | 分组 / 卡片背景 | #F9F9F9 | #1A1A1A |
--Backgrounds-Tertiary | 嵌套容器背景 | #F2F2F2 | #292929 |
*-Alpha 变体为同色 0% 透明度，用于渐隐过渡。
Foregrounds
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Foregrounds-White | 恒白前景 | #FFFFFF | #FFFFFF |
--Foregrounds-Black | 恒黑前景 | #000000 | #000000 |
--Foregrounds-Toggle-On | 开关开启态 | #1573D1 | #3399FF |
--Foregrounds-Toggle-Off | 开关关闭态 | #D6D6D6 | #3D3D3D |
--Foregrounds-Tooltip | Tooltip 背景 | #3D3D3D | #3D3D3D |
Grays
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Grays-White | 表面白 | #FFFFFF | #292929 |
--Grays-Gray-1 | Hover 背景、默认图标 | #EBEBEB | #333333 |
--Grays-Gray-2 | 边框、禁用填充 | #D6D6D6 | #3D3D3D |
--Grays-Gray-3 | 浅边框 | #C2C2C2 | #474747 |
--Grays-Gray-4 | 边框 / 分割 | #ADADAD | #666666 |
--Grays-Gray-5 | 中灰 | #858585 | #8F8F8F |
--Grays-Gray-6 | 深灰 | #5C5C5C | #B8B8B8 |
--Grays-Gray-7 | 最深灰 | #333333 | #D6D6D6 |
--Grays-Black | 表面黑 | #000000 | #FFFFFF |
Grays / Tinted
随表面自适应的半透明叠加。
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Grays-Tinted-Default | 轻微着色 hover | rgba(0,0,0,0.04) | rgba(255,255,255,0.08) |
--Grays-Tinted-Emphasized | 较强着色 hover | rgba(0,0,0,0.08) | rgba(255,255,255,0.16) |
AI 品牌色
PLAUD AI 产品线专属品牌色，仅用于 AI 相关场景。
#21EF6A#00D0FF#8F53EDAI 渐变色标
| Token | 用途 | Light | Dark |
|---|---|---|---|
--AI-Gradient-0 | 渐变 0% | #C9FFCA | #DAFFE7 |
--AI-Gradient-20 | 渐变 20% | #B7F3FA | #74D9D2 |
--AI-Gradient-40 | 渐变 40% | #D0EAF6 | #3B95DF |
--AI-Gradient-60 | 渐变 60% | #EFF5FF | #6666BF |
--AI-Gradient-100 | 渐变 100% | #F2EFEB | #413D3B |
AI 渐变描边（如 AiButton、Toast AI Feedback）走 Victory Purple → Clarity Blue → Amplify Green。
Separators & Overlays
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Separators-Default | 默认分割线 / 边框 | #EBEBEB | #333333 |
--Separators-Emphasized | 强调分割线 | #CCCCCC | #525252 |
--Overlays-Default | 弹层 / 遮罩 | rgba(0,0,0,0.4) | rgba(0,0,0,0.6) |
Status
语义状态色（Light / Dark 相同）。
#FF503F#36D96C#FABE3EEffects / Shadow
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Effects-Shadow-Default | 默认阴影色 | rgba(0,0,0,0.1) | rgba(0,0,0,0.3) |
--Effects-Shadow-Emphasized | 强调阴影色 | rgba(0,0,0,0.2) | rgba(0,0,0,0.4) |
Accent
用于图表、标签、分类标记的强调色板。
:::note Token 待重新同步
以下为当前 Figma 值。token 标识符正从旧的 Template-Community-Icon-* 命名通过 design:sync 对齐；在此之前生成的 token 名称/值可能不一致。
:::
| Token | 用途 | Light | Dark |
|---|---|---|---|
Accent / Slate | 中性强调 | #5C5C5C | #B8B8B8 |
Accent / Coral | Coral 强调 | #C74C41 | #F9786A |
Accent / Mustard | Mustard 强调 | #987600 | #C4A200 |
Accent / Lime | Lime 强调 | #17933E | #51BF68 |
Accent / Sea | Sea 强调 | #009593 | #00C2BE |
Accent / Sky | Sky 强调 | #008BD1 | #36ACFF |
Accent / Lavender | Lavender 强调 | #8362CD | #AD8DFD |
Accent / Orchid | Orchid 强调 | #B54D98 | #E579C4 |
Badge
Badge 软背景色板（与同名 Accent 前景搭配）。
:::note Token 待重新同步
同 Accent —— token 标识符正从旧的 Template-Community-Badge-* 命名通过 design:sync 对齐。
:::
| Token | 用途 | Light | Dark |
|---|---|---|---|
Badge / Slate | Slate 徽标 | #D7D7D7 | #484848 |
Badge / Coral | Coral 徽标 | #FDC9C2 | #6C352F |
Badge / Mustard | Mustard 徽标 | #E4D8AB | #554704 |
Badge / Lime | Lime 徽标 | #BEE3C2 | #25532E |
Badge / Sea | Sea 徽标 | #AAE5E2 | #005553 |
Badge / Sky | Sky 徽标 | #B7DCFD | #1C4B70 |
Badge / Lavender | Lavender 徽标 | #DAD0FC | #4B3E6E |
Badge / Orchid | Orchid 徽标 | #F4C9E4 | #643555 |
使用方式
Tailwind
<div className="bg-(--Backgrounds-Primary) text-(--Labels-Primary)" />
<span className="text-(--Labels-Secondary)" />
<div className="border-(--Separators-Emphasized)" />
CSS 变量
color: var(--Labels-Primary);
background: var(--Backgrounds-Secondary);
border-color: var(--Separators-Default);
:::warning 禁止硬编码
不要在代码中使用 #000000 这类原始色值，一律通过 token 引用，保证主题切换与后续调整的一致性。
:::