DESIGN SYSTEM
语义色板Semantic Color Tokens
不叫"蓝色"叫"primary"——语义化色板让换肤、暗色模式成为可能。
效果预览
primary
secondary
success
warning
danger
text
text-2
muted
border
surface
组件只引用语义名，永不写死 hex
适合用在哪
一切正式项目。颜色直接写死 hex 的项目撑不过第三次改版。
容易踩的坑
- token 用颜色命名（--blue-btn），改品牌色后名字与实际颜色对不上。
- 只定义浅色模式 token，暗色模式下组件仍引用浅色值导致对比度崩坏。
- 语义色 success 和 danger 只靠红绿区分，红绿色盲用户无法辨别状态。
设计提示词 · Prompt
语义色板（Semantic Color Tokens）：色板按语义命名分层——品牌色（primary/secondary/accent，各配 hover/active/subtle 四阶）、语义色（success/warning/danger/info）、中性色（text-primary/secondary/disabled + border + surface 的 50-950 阶）。规则：组件只引用语义 token（var(--color-primary)），永不引用原始色值；换品牌=换一组变量。中性灰阶必须成体系（每一阶有明确用途，如 gray-500 只用于 placeholder）。给每对前景/背景组合测对比度（WCAG AA 4.5:1）。token 命名英文、写在 CSS 变量 / Tailwind config / Figma variables 三处同步。
Semantic Color Tokens: Name the palette by meaning in layers — brand colors (primary/secondary/accent, each with hover/active/subtle for four steps), semantic colors (success/warning/danger/info), neutrals (text-primary/secondary/disabled + border + surface across 50-950 steps). Rules: components only reference semantic tokens (var(--color-primary)), never raw color values; switching brands = swapping one set of variables. The neutral gray scale must be systematic (each step has a clear purpose, e.g. gray-500 only for placeholders). Test contrast for every foreground/background pair (WCAG AA 4.5:1). Name tokens in English and keep them in sync across CSS variables / Tailwind config / Figma variables.
常见搭配
同一页面里经常和「语义色板」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-palette">
<div class="d-pal__row">
<span class="d-pal__sw" style="background:#4f46e5"><span>primary</span></span>
<span class="d-pal__sw" style="background:#7c3aed"><span>secondary</span></span>
<span class="d-pal__sw" style="background:#10b981"><span>success</span></span>
<span class="d-pal__sw" style="background:#f59e0b"><span>warning</span></span>
<span class="d-pal__sw" style="background:#ef4444"><span>danger</span></span>
</div>
<div class="d-pal__row">
<span class="d-pal__sw is-light" style="background:#17171b"><span>text</span></span>
<span class="d-pal__sw is-light" style="background:#52525b"><span>text-2</span></span>
<span class="d-pal__sw is-light" style="background:#a1a1aa"><span>muted</span></span>
<span class="d-pal__sw is-light" style="background:#e4e4e7"><span>border</span></span>
<span class="d-pal__sw is-light" style="background:#f4f4f5"><span>surface</span></span>
</div>
<span class="d-pal__cap">组件只引用语义名，永不写死 hex</span>
</div>