Color System
:::tip Core Principle
The color system is managed through semantic tokens (@plaud/design-tokens), ensuring Light / Dark consistency. Always reference colors via CSS variables (var(--Labels-Primary)) — never hardcode raw color values.
:::
Values below mirror the Figma "Plaud Web 4.0 Design System" variable collection. Opaque tokens are emitted as hex in the generated CSS; alpha tokens stay rgba().
Labels
Foreground colors for text and icons.
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Labels-Primary | Primary text, headings | #000000 | #FFFFFF |
--Labels-Secondary | Secondary text, descriptions | #3D3D3D | #D6D6D6 |
--Labels-Tertiary | Supplementary text, timestamps | #6B6B6B | #A3A3A3 |
--Labels-Disabled | Disabled text | #A3A3A3 | #808080 |
--Labels-Placeholder | Input placeholder text | #6B6B6B | #A3A3A3 |
--Labels-Reverse | Text on inverted surfaces | #FFFFFF | #000000 |
--Labels-Link | Link text | #1573D1 | #3399FF |
--Labels-Error | Error text | #DE2716 | #FF5B4D |
--Labels-Success | Success text | #008523 | #36D96C |
--Labels-Warning | Warning text | #96690F | #FABE3E |
Backgrounds
Background hierarchy for pages, cards, and containers.
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Backgrounds-Primary | Primary page background | #FFFFFF | #0A0A0A |
--Backgrounds-Secondary | Group / card background | #F9F9F9 | #1A1A1A |
--Backgrounds-Tertiary | Nested container background | #F2F2F2 | #292929 |
*-Alpha variants are the same colors at 0% opacity, used for fade transitions.
Foregrounds
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Foregrounds-White | Always-white foreground | #FFFFFF | #FFFFFF |
--Foregrounds-Black | Always-black foreground | #000000 | #000000 |
--Foregrounds-Toggle-On | Toggle on state | #1573D1 | #3399FF |
--Foregrounds-Toggle-Off | Toggle off state | #D6D6D6 | #3D3D3D |
--Foregrounds-Tooltip | Tooltip background | #3D3D3D | #3D3D3D |
Grays
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Grays-White | Surface white | #FFFFFF | #292929 |
--Grays-Gray-1 | Hover background, default icon | #EBEBEB | #333333 |
--Grays-Gray-2 | Borders, disabled fill | #D6D6D6 | #3D3D3D |
--Grays-Gray-3 | Light border | #C2C2C2 | #474747 |
--Grays-Gray-4 | Border / divider | #ADADAD | #666666 |
--Grays-Gray-5 | Mid gray | #858585 | #8F8F8F |
--Grays-Gray-6 | Strong gray | #5C5C5C | #B8B8B8 |
--Grays-Gray-7 | Darkest gray | #333333 | #D6D6D6 |
--Grays-Black | Surface black | #000000 | #FFFFFF |
Grays / Tinted
Translucent overlays that adapt to the surface.
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Grays-Tinted-Default | Subtle tinted hover | rgba(0,0,0,0.04) | rgba(255,255,255,0.08) |
--Grays-Tinted-Emphasized | Stronger tinted hover | rgba(0,0,0,0.08) | rgba(255,255,255,0.16) |
AI Brand Colors
Exclusive brand colors for the Plaud AI product line, used only in AI feature contexts.
#21EF6A#00D0FF#8F53EDAI Gradient Stops
| Token | 用途 | Light | Dark |
|---|---|---|---|
--AI-Gradient-0 | Gradient 0% | #C9FFCA | #DAFFE7 |
--AI-Gradient-20 | Gradient 20% | #B7F3FA | #74D9D2 |
--AI-Gradient-40 | Gradient 40% | #D0EAF6 | #3B95DF |
--AI-Gradient-60 | Gradient 60% | #EFF5FF | #6666BF |
--AI-Gradient-100 | Gradient 100% | #F2EFEB | #413D3B |
The AI gradient stroke (e.g. AiButton, Toast AI Feedback) runs Victory Purple → Clarity Blue → Amplify Green.
Separators & Overlays
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Separators-Default | Default separator / border | #EBEBEB | #333333 |
--Separators-Emphasized | Emphasized separator | #CCCCCC | #525252 |
--Overlays-Default | Modal / scrim overlay | rgba(0,0,0,0.4) | rgba(0,0,0,0.6) |
Status
Semantic status colors (identical in Light / Dark).
#FF503F#36D96C#FABE3EEffects / Shadow
| Token | 用途 | Light | Dark |
|---|---|---|---|
--Effects-Shadow-Default | Default shadow color | rgba(0,0,0,0.1) | rgba(0,0,0,0.3) |
--Effects-Shadow-Emphasized | Emphasized shadow color | rgba(0,0,0,0.2) | rgba(0,0,0,0.4) |
Accent
Accent palette for charts, tags, and category markers.
:::note Token re-sync pending
These are the current Figma values. The token identifiers are being realigned from the legacy Template-Community-Icon-* names via design:sync; until then the generated token names/values may differ.
:::
| Token | 用途 | Light | Dark |
|---|---|---|---|
Accent / Slate | Neutral accent | #5C5C5C | #B8B8B8 |
Accent / Coral | Coral accent | #C74C41 | #F9786A |
Accent / Mustard | Mustard accent | #987600 | #C4A200 |
Accent / Lime | Lime accent | #17933E | #51BF68 |
Accent / Sea | Sea accent | #009593 | #00C2BE |
Accent / Sky | Sky accent | #008BD1 | #36ACFF |
Accent / Lavender | Lavender accent | #8362CD | #AD8DFD |
Accent / Orchid | Orchid accent | #B54D98 | #E579C4 |
Badge
Soft background palette for badges (paired with the Accent foreground of the same name).
:::note Token re-sync pending
Same as Accent — token identifiers being realigned from legacy Template-Community-Badge-* names via design:sync.
:::
| Token | 用途 | Light | Dark |
|---|---|---|---|
Badge / Slate | Slate badge | #D7D7D7 | #484848 |
Badge / Coral | Coral badge | #FDC9C2 | #6C352F |
Badge / Mustard | Mustard badge | #E4D8AB | #554704 |
Badge / Lime | Lime badge | #BEE3C2 | #25532E |
Badge / Sea | Sea badge | #AAE5E2 | #005553 |
Badge / Sky | Sky badge | #B7DCFD | #1C4B70 |
Badge / Lavender | Lavender badge | #DAD0FC | #4B3E6E |
Badge / Orchid | Orchid badge | #F4C9E4 | #643555 |
Usage
Tailwind
<div className="bg-(--Backgrounds-Primary) text-(--Labels-Primary)" />
<span className="text-(--Labels-Secondary)" />
<div className="border-(--Separators-Emphasized)" />
CSS Variables
color: var(--Labels-Primary);
background: var(--Backgrounds-Secondary);
border-color: var(--Separators-Default);
:::warning No Hardcoded Values
Never use raw color values like #000000 in code. Always reference colors through tokens to keep theme switching and future adjustments consistent.
:::