色彩

原则

语义优先：界面里只出现语义 token。同一个名字在 6 套主题里各有取值，组件不用关心当前是哪一套。
一个品牌色：accent 是品牌绿，只用于主操作、选中和完成。不要拿它装饰标题或图标。
秋叶信号：爬山虎从绿到红的一年，被借来表达紧急程度。warning（琥珀）表示高优先级和今天到期，danger（秋叶红）表示紧急、逾期和删除。
颜色不单独表意：每个状态都同时有文字或图形。优先级写出「高」「紧急」，或者用 !!! 的个数表示；逾期写出「逾期 1 天」；未读通知在圆点之外还有加粗。
填充配 on-色：凡是色块上的文字，都用它配套的 on-* token。萌虎风格的糖果色填充上永远是墨黑字。

Token 一览

色值按 6 套主题列出。*-soft 是浅色或糖果色的底，on-* 是它上面的文字色。

token	用途	clean-light	clean-dark	sticker-light	sticker-dark	pixel-light	pixel-dark
`bg-canvas`	主内容区背景。text-primary / text-secondary / text-muted 都可直接放在上面。	`#ffffff`	`#0f1311`	`#f2edff`	`#1a1722`	`#f3f5f1`	`#0a0e0b`
`bg-sidebar`	侧栏、收起的导航条、顶栏。	`#f6f8f6`	`#0b0e0c`	`#ffe16a`	`#2a2338`	`#ffffff`	`#0f1511`
`bg-surface`	卡片、输入框、任务行容器、弹层。	`#ffffff`	`#151a17`	`#ffffff`	`#26222f`	`#ffffff`	`#0f1511`
`bg-sunken`	看板分栏、分组底色、代码块等下沉区域。	`#f2f5f3`	`#121714`	`#e9e2ff`	`#201c29`	`#e8ece6`	`#131b16`
`bg-selected`	选中的任务行、当前项目、当前导航项。	`#e6f2ea`	`#1a2c21`	`#d9f6e2`	`#24402f`	`#d6f0df`	`#15301f`
`bg-hover`	可点击行和按钮的悬停底色。	`#eef2ef`	`#18201b`	`#faf8ff`	`#2e2939`	`#edf1ec`	`#121a15`
`scrim`	模态弹层后面的遮罩（带透明度）。	`#10181466`	`#000000a6`	`#1e1b1873`	`#000000b3`	`#0d1a1166`	`#000000b3`
`border-default`	卡片和面板边框。贴纸风格里它就是 2.5px 的墨黑描边。	`#e3e8e4`	`#232b26`	`#1e1b18`	`#ece6ff`	`#cbd3cb`	`#1e2a22`
`border-subtle`	列表行之间的分隔线，只做装饰，不承担识别控件的作用。	`#eef1ef`	`#1b221e`	`#d9d0f5`	`#3a3348`	`#e1e6e0`	`#141d17`
`border-strong`	复选框、输入框等控件的边框；在 bg-surface / bg-canvas 上至少 3:1。	`#86928a`	`#5c6a62`	`#1e1b18`	`#ece6ff`	`#7d8b80`	`#56695b`
`text-primary`	正文、任务标题；可放在所有 bg-* 上。	`#17201a`	`#e7ede9`	`#1e1b18`	`#fbf7ee`	`#0d1a11`	`#d5e6d9`
`text-secondary`	次要正文、侧栏导航文字；可放在所有 bg-* 上。	`#3e4a42`	`#c2ccc6`	`#3b3640`	`#e2dbea`	`#2c3b30`	`#a9bdae`
`text-muted`	元信息（编号、计数、时间）；可放在 bg-canvas / sidebar / surface / sunken / selected 上。	`#5f6b64`	`#8c9891`	`#5e5866`	`#b3aabf`	`#526356`	`#889c8d`
`accent`	品牌主色的填充：主按钮、选中指示、进度条、完成勾选。贴纸风格里填充一定配 border-strong 描边。	`#1e7f46`	`#45c27a`	`#7edc9c`	`#7edc9c`	`#0f7a3c`	`#6ee7a0`
`on-accent`	accent 填充上的文字和图标。	`#ffffff`	`#07140c`	`#1e1b18`	`#1e1b18`	`#ffffff`	`#06210f`
`accent-text`	当文字用的品牌色（链接、当前视图名），放在 bg-canvas / bg-surface 上。	`#1b7540`	`#45c27a`	`#14703f`	`#7edc9c`	`#0f7a3c`	`#6ee7a0`
`accent-soft`	品牌色浅底：选中的筛选条件、成功提示。	`#e3f2e8`	`#173323`	`#d9f6e2`	`#24402f`	`#d6f0df`	`#15301f`
`on-accent-soft`	accent-soft 上的文字。	`#145c32`	`#8fddb0`	`#1e1b18`	`#bdf0cd`	`#0b5a2c`	`#6ee7a0`
`danger`	紧急、逾期、删除的文字和图标。	`#b93f25`	`#f07a57`	`#b32a12`	`#ff8a70`	`#c22f1c`	`#ff6b57`
`danger-soft`	紧急 / 逾期标记的底色。	`#fbe9e4`	`#3a1d16`	`#ff7a5c`	`#ff7a5c`	`#fbe3de`	`#3a1712`
`on-danger-soft`	danger-soft 上的文字。	`#9a3119`	`#f5a288`	`#1e1b18`	`#1e1b18`	`#9a2415`	`#ff8a7a`
`warning`	高优先级、今天到期的文字和图标。	`#9a5b0e`	`#e3a64a`	`#8a5200`	`#ffc27a`	`#855d00`	`#ffc857`
`warning-soft`	高优先级 / 今天到期标记的底色。	`#fbf0dd`	`#33270f`	`#ffb45e`	`#ffb45e`	`#fbefcf`	`#332808`
`on-warning-soft`	warning-soft 上的文字。	`#7a4709`	`#edc17e`	`#1e1b18`	`#1e1b18`	`#6b4b00`	`#ffc857`
`info`	过滤器语句、链接分享、信息提示的文字。	`#2753b3`	`#8fb0f2`	`#2f5fb3`	`#8fd3ff`	`#0b6e8a`	`#67d4f5`
`timer`	正在计时的时间数字和指示点。	`#1b7540`	`#45c27a`	`#9e2559`	`#ff9dbb`	`#0f7a3c`	`#6ee7a0`
`timer-soft`	计时器胶囊和卡片的底色。	`#e3f2e8`	`#173323`	`#ff9dbb`	`#ff9dbb`	`#d6f0df`	`#15301f`
`on-timer-soft`	timer-soft 上的文字。	`#145c32`	`#8fddb0`	`#1e1b18`	`#1e1b18`	`#0b5a2c`	`#6ee7a0`
`focus-ring`	键盘焦点环，2px 实线外加 2px 偏移；在 bg-canvas / surface / sidebar 上至少 3:1。	`#2753b3`	`#8fb0f2`	`#5b3fd9`	`#ffe16a`	`#0b6e8a`	`#ffc857`
`priority-low`	优先级「低」的图形标记。	`#7a8680`	`#76837c`	`#7a7383`	`#8e8599`	`#7d8b80`	`#6f8475`
`priority-medium`	优先级「中」的图形标记。	`#3e6fb8`	`#7fa2ea`	`#2f5fb3`	`#8fd3ff`	`#2c3b30`	`#a9bdae`
`priority-high`	优先级「高」的图形标记。	`#b86a12`	`#e3a64a`	`#b86200`	`#ffb45e`	`#8a6100`	`#ffc857`
`priority-urgent`	优先级「紧急 / 立即」的图形标记。	`#c4462b`	`#f07a57`	`#d3401f`	`#ff7a5c`	`#c22f1c`	`#ff6b57`
`label-blue`	蓝色标签的底色（用户给标签选的 7 种颜色之一）。	`#e6eefb`	`#18243a`	`#8fd3ff`	`#8fd3ff`	`#ddf0f6`	`#0f2a33`
`on-label-blue`	蓝色标签上的文字。	`#2753b3`	`#8fb0f2`	`#1e1b18`	`#1e1b18`	`#0b6e8a`	`#67d4f5`
`label-green`	绿色标签的底色（用户给标签选的 7 种颜色之一）。	`#e3f2e8`	`#153122`	`#7edc9c`	`#7edc9c`	`#d6f0df`	`#15301f`
`on-label-green`	绿色标签上的文字。	`#1e6b3e`	`#7fd3a0`	`#1e1b18`	`#1e1b18`	`#0b5a2c`	`#6ee7a0`
`label-orange`	橙色标签的底色（用户给标签选的 7 种颜色之一）。	`#fcebdd`	`#3a2414`	`#ffb45e`	`#ffb45e`	`#f8eccc`	`#2e240a`
`on-label-orange`	橙色标签上的文字。	`#a4480c`	`#f2a86e`	`#1e1b18`	`#1e1b18`	`#7a5600`	`#ffc857`
`label-violet`	紫色标签的底色（用户给标签选的 7 种颜色之一）。	`#f0e8fb`	`#2a1e3d`	`#c5b5ff`	`#c5b5ff`	`#e9e3fa`	`#231c3a`
`on-label-violet`	紫色标签上的文字。	`#6a3ba8`	`#c3a2f2`	`#1e1b18`	`#1e1b18`	`#6745c7`	`#b69cff`
`label-gray`	灰色标签的底色（用户给标签选的 7 种颜色之一）。	`#edefee`	`#232a26`	`#e5e0ec`	`#e5e0ec`	`#e8ece6`	`#18211b`
`on-label-gray`	灰色标签上的文字。	`#4d5852`	`#b2bdb6`	`#1e1b18`	`#1e1b18`	`#3e4d42`	`#a9bdae`
`label-pink`	粉色标签的底色（用户给标签选的 7 种颜色之一）。	`#fbe6ef`	`#3a1a29`	`#ff9dbb`	`#ff9dbb`	`#f9e1ec`	`#33142a`
`on-label-pink`	粉色标签上的文字。	`#a42a5e`	`#f29bc2`	`#1e1b18`	`#1e1b18`	`#a32b66`	`#ff8ac2`
`label-teal`	青色标签的底色（用户给标签选的 7 种颜色之一）。	`#dff3f1`	`#123331`	`#c6f36b`	`#c6f36b`	`#d8f1ee`	`#0f2e2a`
`on-label-teal`	青色标签上的文字。	`#14665e`	`#7fd6cc`	`#1e1b18`	`#1e1b18`	`#1b6b60`	`#6fe0cf`
`avatar-1`	成员头像底色第 1 号，按用户 id 取模分配。	`#24774a`	`#24774a`	`#7edc9c`	`#7edc9c`	`#0f7a3c`	`#6ee7a0`
`avatar-2`	成员头像底色第 2 号，按用户 id 取模分配。	`#3563c9`	`#3563c9`	`#8fd3ff`	`#8fd3ff`	`#0b6e8a`	`#67d4f5`
`avatar-3`	成员头像底色第 3 号，按用户 id 取模分配。	`#a84f0c`	`#a84f0c`	`#ffb45e`	`#ffb45e`	`#8a6100`	`#ffc857`
`avatar-4`	成员头像底色第 4 号，按用户 id 取模分配。	`#7a45b8`	`#7a45b8`	`#c5b5ff`	`#c5b5ff`	`#6745c7`	`#b69cff`
`avatar-5`	成员头像底色第 5 号，按用户 id 取模分配。	`#b3334f`	`#b3334f`	`#ff9dbb`	`#ff9dbb`	`#b0306e`	`#ff8ac2`
`on-avatar`	头像字母的颜色，放在 avatar-1…5 上。	`#ffffff`	`#ffffff`	`#1e1b18`	`#1e1b18`	`#ffffff`	`#06210f`

风格差异速读

青藤：白底 #FFFFFF，品牌绿 #1E7F46，秋叶红 #B93F25，墨绿黑 #17201A 的字。暗色是带绿意的近黑 #0F1311，品牌绿提亮到 #45C27A，上面配深色字。
萌虎：丁香紫画布 #F2EDFF，柠檬黄侧栏 #FFE16A，所有填充都是糖果色（薄荷 #7EDC9C、樱粉 #FF9DBB、天空 #8FD3FF…）加墨黑 #1E1B18 的字和描边。暗色把描边翻成浅丁香 #ECE6FF，硬阴影换成薄荷绿。
像素：暗色是主场，近黑 #0A0E0B 上用荧光藤绿 #6EE7A0、琥珀 #FFC857、秋叶 #FF6B57。亮色是「纸面终端」，浅灰绿 #F3F5F1 上用深绿 #0F7A3C。

对比度

所有组合都按 WCAG 2.2 AA 检查过：正文 ≥ 4.5:1，控件边框、焦点环、图形标记 ≥ 3:1。下表由构建脚本生成，每次改 token 都会重算，有不达标的组合时构建失败。

萌虎风格的 accent 填充（薄荷绿）和白色卡片之间只有 1.6:1，但萌虎的填充一定带 2.5px 的 border-strong 描边，组件的边界靠描边识别，所以记为豁免。

前景	背景	要求	clean-light	clean-dark	sticker-light	sticker-dark	pixel-light	pixel-dark
`text-primary`	`bg-canvas`	4.5:1	16.69	15.77	14.96	16.51	16.32	14.95
`text-primary`	`bg-sidebar`	4.5:1	15.64	16.34	13.25	14.07	17.90	14.22
`text-primary`	`bg-surface`	4.5:1	16.69	14.84	17.14	14.52	17.90	14.22
`text-primary`	`bg-sunken`	4.5:1	15.21	15.27	13.70	15.59	14.98	13.50
`text-primary`	`bg-selected`	4.5:1	14.51	12.40	14.88	10.62	14.82	10.95
`text-primary`	`bg-hover`	4.5:1	14.77	14.02	16.27	13.16	15.68	13.64
`text-secondary`	`bg-canvas`	4.5:1	9.28	11.36	10.26	13.08	10.78	9.79
`text-secondary`	`bg-sidebar`	4.5:1	8.69	11.78	9.08	11.14	11.83	9.31
`text-secondary`	`bg-surface`	4.5:1	9.28	10.69	11.75	11.50	11.83	9.31
`text-secondary`	`bg-sunken`	4.5:1	8.45	11.00	9.39	12.35	9.90	8.84
`text-secondary`	`bg-selected`	4.5:1	8.07	8.94	10.20	8.41	9.79	7.17
`text-secondary`	`bg-hover`	4.5:1	8.21	10.11	11.15	10.42	10.36	8.93
`text-muted`	`bg-canvas`	4.5:1	5.56	6.25	5.98	7.92	5.84	6.65
`text-muted`	`bg-sidebar`	4.5:1	5.21	6.48	5.30	6.75	6.41	6.33
`text-muted`	`bg-surface`	4.5:1	5.56	5.89	6.85	6.97	6.41	6.33
`text-muted`	`bg-sunken`	4.5:1	5.07	6.06	5.48	7.48	5.36	6.01
`text-muted`	`bg-selected`	4.5:1	4.84	4.92	5.95	5.09	5.30	4.87
`accent-text`	`bg-canvas`	4.5:1	5.73	8.25	5.36	10.60	4.95	12.59
`accent-text`	`bg-surface`	4.5:1	5.73	7.76	6.14	9.32	5.43	11.98
`danger`	`bg-canvas`	4.5:1	5.53	6.80	5.63	7.67	5.15	6.93
`danger`	`bg-surface`	4.5:1	5.53	6.40	6.45	6.75	5.65	6.60
`warning`	`bg-canvas`	4.5:1	5.42	8.76	5.58	11.14	5.37	12.63
`warning`	`bg-surface`	4.5:1	5.42	8.24	6.39	9.80	5.89	12.02
`info`	`bg-canvas`	4.5:1	7.06	8.61	5.38	10.87	5.30	11.39
`info`	`bg-surface`	4.5:1	7.06	8.10	6.16	9.56	5.81	10.84
`timer`	`bg-canvas`	4.5:1	5.73	8.25	6.40	9.07	4.95	12.59
`timer`	`bg-surface`	4.5:1	5.73	7.76	7.34	7.98	5.43	11.98
`on-accent`	`accent`	4.5:1	5.02	8.30	10.29	10.29	5.43	11.04
`on-accent-soft`	`accent-soft`	4.5:1	6.96	8.56	14.88	8.93	6.92	9.22
`on-danger-soft`	`danger-soft`	4.5:1	6.32	7.61	6.69	6.69	6.50	6.99
`on-warning-soft`	`warning-soft`	4.5:1	6.81	8.71	9.75	9.75	6.97	9.43
`on-timer-soft`	`timer-soft`	4.5:1	6.96	8.56	8.81	8.81	6.92	9.22
`on-label-blue`	`label-blue`	4.5:1	6.05	7.14	10.55	10.55	4.95	8.80
`on-label-green`	`label-green`	4.5:1	5.62	7.85	10.29	10.29	6.92	9.22
`on-label-orange`	`label-orange`	4.5:1	5.15	7.35	9.75	9.75	5.65	9.94
`on-label-violet`	`label-violet`	4.5:1	6.29	7.23	9.33	9.33	5.18	7.08
`on-label-gray`	`label-gray`	4.5:1	6.42	7.58	13.23	13.23	7.49	8.31
`on-label-pink`	`label-pink`	4.5:1	5.75	7.53	8.81	8.81	5.50	7.59
`on-label-teal`	`label-teal`	4.5:1	5.90	8.03	13.41	13.41	5.34	9.16
`on-avatar`	`avatar-1`	4.5:1	5.51	5.51	10.29	10.29	5.43	11.04
`on-avatar`	`avatar-2`	4.5:1	5.56	5.56	10.55	10.55	5.81	9.99
`on-avatar`	`avatar-3`	4.5:1	5.54	5.54	9.75	9.75	5.54	11.08
`on-avatar`	`avatar-4`	4.5:1	6.23	6.23	9.33	9.33	6.46	7.46
`on-avatar`	`avatar-5`	4.5:1	5.99	5.99	8.81	8.81	6.01	7.84
`border-strong`	`bg-canvas`	3:1	3.23	3.29	14.96	14.57	3.26	3.30
`border-strong`	`bg-surface`	3:1	3.23	3.10	17.14	12.81	3.57	3.14
`focus-ring`	`bg-canvas`	3:1	7.06	8.61	5.81	13.64	5.30	12.63
`focus-ring`	`bg-surface`	3:1	7.06	8.10	6.65	12.00	5.81	12.02
`priority-low`	`bg-canvas`	3:1	3.78	4.73	3.98	5.01	3.26	4.84
`priority-low`	`bg-surface`	3:1	3.78	4.45	4.56	4.41	3.57	4.61
`priority-medium`	`bg-canvas`	3:1	5.04	7.36	5.38	10.87	10.78	9.79
`priority-medium`	`bg-surface`	3:1	5.04	6.93	6.16	9.56	11.83	9.31
`priority-high`	`bg-canvas`	3:1	4.11	8.76	3.83	10.04	5.05	12.63
`priority-high`	`bg-surface`	3:1	4.11	8.24	4.39	8.83	5.54	12.02
`priority-urgent`	`bg-canvas`	3:1	4.93	6.80	4.05	6.89	5.15	6.93
`priority-urgent`	`bg-surface`	3:1	4.93	6.40	4.64	6.06	5.65	6.60
`focus-ring`	`bg-sidebar`	3:1	6.61	8.93	5.14	11.63	5.81	12.02
`accent`	`bg-surface`	3:1	5.02	7.76	1.67（描边豁免）	9.32	5.43	11.98

全部达标。萌虎风格的 accent 填充靠 2.5px border-strong 描边与背景区分，描边对比度见 border-strong 一行。