颜色 Color
品牌色是 Brand-1 到 Brand-8，框出来的 Brand-5 是现在的品牌色。中性色左侧是 White，接着 Gray-1 到 Gray-7。右上角可切暗色。标准色明暗同值，其余各组按自己那一行换。遮罩是 #1D2129 32%。这一版只改色卡，token 文件还没换。一行最多 8 张。
品牌色
种子是 Brand-5 #8E80F2。明色从浅到深。暗色里浅的四档把彩度压低，主按钮用现有暗色 token，不重算。悬停是 Brand-6，不套标准色的 85%。
Brand-1品牌浅底#F6F1FF#2B245B
Brand-2更浅#E2DBFF#3D366D
Brand-3更浅#C7BFFF#504981
Brand-4更浅#AB9FFF#68619B
Brand-5主按钮#8E80F2#9D91F5
Brand-6悬停#7A6CDD#8A7CEE
Brand-7按下#6657C7#786ADA
Brand-8最深#4E3EAD#5C4DBC
中性色
两端是种子，White 和 Gray-7，Gray-7 是默认字体。中间不是等距色阶。暗色里页面底和正文对调。
White页面背景#FFFFFF#0B0B0C
Gray-1次级背景#F8F8F8#0E0E10
Gray-2三级背景#F1F1F1#111113
Gray-3控件边框#DFDFDF#424244
Gray-4占位文字#8C8C8C#6B6B6D
Gray-5辅助文字#656565#8B8B8B
Gray-6次级文字#414141#ACACAD
Gray-7正文#161616#F1F1F1
标准色
红是错误，橙是警告，黄是提示，绿是成功，蓝是链接。明暗用同一个色值。悬停只属于这一行：同一颜色，不透明度 85%。
Red浪漫红#F53F3F#F53F3F悬停 85%
Orange活力橙#FF7D00#FF7D00悬停 85%
Yellow柠檬黄#FADC19#FADC19悬停 85%
Green仙踪绿#00B42A#00B42A悬停 85%
Cyan文艺青#14C9C9#14C9C9悬停 85%
Blue极客蓝#165DFF#165DFF悬停 85%
Purple梦幻紫#722ED1#722ED1悬停 85%
Black暗夜黑#18181B#18181B悬停 85%
浅底色
明色以 15% 铺在白底上。暗色以 15% 铺在页面底 #0B0B0C 上。铺完是不透明色。
Red-Bg红色浅底#FEE2E2#2E1314
Orange-Bg橙色浅底#FFECD9#301C0A
Yellow-Bg黄色浅底#FEFADD#2F2A0E
Green-Bg绿色浅底#D9F4DF#092411
Cyan-Bg青色浅底#DCF7F7#0C2828
Blue-Bg蓝色浅底#DCE7FF#0D1730
Purple-Bg紫色浅底#EAE0F8#1A102A
Black-Bg黑色浅底#DCDCDD#0D0D0E
遮罩色
一个颜色，透明度 32%。悬停时颜色和透明度一起显示，复制也一起带走。
Mask弹层遮罩#1D2129#1D212932%
变量名 默认收起 · 仍是 semantic.json 的投影
角色 33
页面上的品牌、中性、标准、浅底色、遮罩，加上悬停、反色和信息色的边与字。
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-background | #FFFFFF | #0B0B0C |
| color-background-secondary | #F8F8F8 | #0E0E10 |
| color-background-tertiary | #F1F1F1 | #111113 |
| color-foreground | #161616 | #F1F1F1 |
| color-foreground-secondary | #656565 | #8B8B8B |
| color-foreground-tertiary | #8C8C8C | #6B6B6D |
| color-border | #DFDFDF | #424244 |
| color-border-subtle | #F1F1F1 | #424244 |
| color-brand | #8E80F2 | #9D91F5 |
| color-brand-hover | #7A6CDD | #8A7CEE |
| color-brand-active | #6657C7 | #786ADA |
| color-brand-muted | #F6F1FF | #2B245B |
| color-brand-foreground | #161616 | #161616 |
| color-success | #00B42A | #00B42A |
| color-success-hover | color-mix(in srgb, {desktop.color-success} 85%, transparent) | color-mix(in srgb, {desktop.color-success} 85%, transparent) |
| color-success-muted | color-mix(in srgb, {desktop.color-success} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-success} 15%, {desktop.color-background}) |
| color-success-foreground | #161616 | #161616 |
| color-warning | #FF7D00 | #FF7D00 |
| color-warning-hover | color-mix(in srgb, {desktop.color-warning} 85%, transparent) | color-mix(in srgb, {desktop.color-warning} 85%, transparent) |
| color-warning-muted | color-mix(in srgb, {desktop.color-warning} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-warning} 15%, {desktop.color-background}) |
| color-warning-foreground | #161616 | #161616 |
| color-destructive | #F53F3F | #F53F3F |
| color-destructive-hover | color-mix(in srgb, {desktop.color-destructive} 85%, transparent) | color-mix(in srgb, {desktop.color-destructive} 85%, transparent) |
| color-destructive-muted | color-mix(in srgb, {desktop.color-destructive} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-destructive} 15%, {desktop.color-background}) |
| color-destructive-foreground | #161616 | #161616 |
| color-link | ⇐ color-blue | ⇐ color-blue |
| color-link-hover | ⇐ color-blue-hover | ⇐ color-blue-hover |
| color-info-bg | color-mix(in srgb, {desktop.color-blue} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-blue} 15%, {desktop.color-background}) |
| color-info-border | ⇐ color-blue | ⇐ color-blue |
| color-info-fg | ⇐ color-blue | ⇐ color-blue |
| color-overlay | rgb(29 33 41 / 0.32) | rgb(29 33 41 / 0.32) |
| color-tooltip-bg | #18181B | #18181B |
| color-tooltip-fg | #FFFFFF | #FFFFFF |
色板 16
选色用的色相。链接指向蓝色，不在这里再起一套语义。
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-blue | #165DFF | #165DFF |
| color-blue-foreground | #FFFFFF | #FFFFFF |
| color-blue-hover | color-mix(in srgb, {desktop.color-blue} 85%, transparent) | color-mix(in srgb, {desktop.color-blue} 85%, transparent) |
| color-blue-muted | color-mix(in srgb, {desktop.color-blue} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-blue} 15%, {desktop.color-background}) |
| color-cyan | #14C9C9 | #14C9C9 |
| color-cyan-foreground | #161616 | #161616 |
| color-cyan-hover | color-mix(in srgb, {desktop.color-cyan} 85%, transparent) | color-mix(in srgb, {desktop.color-cyan} 85%, transparent) |
| color-cyan-muted | color-mix(in srgb, {desktop.color-cyan} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-cyan} 15%, {desktop.color-background}) |
| color-neutral | #18181B | #18181B |
| color-neutral-foreground | #FFFFFF | #FFFFFF |
| color-neutral-hover | color-mix(in srgb, {desktop.color-neutral} 85%, transparent) | color-mix(in srgb, {desktop.color-neutral} 85%, transparent) |
| color-neutral-muted | color-mix(in srgb, {desktop.color-neutral} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-neutral} 15%, {desktop.color-background}) |
| color-purple | #722ED1 | #722ED1 |
| color-purple-foreground | #FFFFFF | #FFFFFF |
| color-purple-hover | color-mix(in srgb, {desktop.color-purple} 85%, transparent) | color-mix(in srgb, {desktop.color-purple} 85%, transparent) |
| color-purple-muted | color-mix(in srgb, {desktop.color-purple} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-purple} 15%, {desktop.color-background}) |
组件别名 51
提示条、侧栏、编辑器等继续用这些名字。基础页不把它们当成新颜色。
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-action-destructive | #D32F2F | #D32F2F |
| color-action-destructive-foreground | #FFFFFF | #FFFFFF |
| color-action-destructive-hover | #BD2929 | #BD2929 |
| color-action-primary | #6F60CE | #7566D1 |
| color-action-primary-active | #5B4FBA | #6657C7 |
| color-action-primary-foreground | #FFFFFF | #FFFFFF |
| color-action-primary-hover | #6657C7 | #6F60CE |
| color-border-default | ⇐ color-border | ⇐ color-border |
| color-border-interactive-active | ⇐ color-control-border-active | ⇐ color-control-border-active |
| color-border-interactive-hover | ⇐ color-control-border-hover | ⇐ color-control-border-hover |
| color-composer-icon-bg | color-mix(in srgb, {desktop.color-background-tertiary} 70%, transparent) | color-mix(in srgb, {desktop.color-background-tertiary} 70%, transparent) |
| color-composer-icon-hover-bg | ⇐ color-background-tertiary | ⇐ color-background-tertiary |
| color-control-border-active | ⇐ color-selection-border | ⇐ color-selection-border |
| color-control-border-hover | color-mix(in srgb, {desktop.color-brand} 32%, {desktop.color-border} 68%) | color-mix(in srgb, {desktop.color-brand} 32%, {desktop.color-border} 68%) |
| color-editor-accent | ⇐ color-brand | ⇐ color-brand |
| color-editor-accent-border | ⇐ color-selection-border | ⇐ color-selection-border |
| color-editor-accent-muted | ⇐ color-brand-muted | ⇐ color-brand-muted |
| color-focus-ring | ⇐ color-brand | ⇐ color-brand |
| color-icon-button-active-bg | color-mix(in srgb, {desktop.color-background-tertiary} 80%, {desktop.color-border} 20%) | color-mix(in srgb, {desktop.color-background-tertiary} 78%, {desktop.color-border} 22%) |
| color-icon-button-hover-bg | ⇐ color-background-tertiary | ⇐ color-background-tertiary |
| color-icon-button-hover-fg | ⇐ color-foreground | ⇐ color-foreground |
| color-notice-error-background | color-mix(in srgb, {desktop.color-destructive} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-destructive} 15%, {desktop.color-background}) |
| color-notice-error-border | ⇐ color-destructive | ⇐ color-destructive |
| color-notice-error-foreground | ⇐ color-destructive | ⇐ color-destructive |
| color-notice-info-background | ⇐ color-info-bg | ⇐ color-info-bg |
| color-notice-info-border | ⇐ color-info-border | ⇐ color-info-border |
| color-notice-info-foreground | ⇐ color-info-fg | ⇐ color-info-fg |
| color-notice-success-background | color-mix(in srgb, {desktop.color-success} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-success} 15%, {desktop.color-background}) |
| color-notice-success-border | ⇐ color-success | ⇐ color-success |
| color-notice-success-foreground | ⇐ color-success | ⇐ color-success |
| color-notice-warning-background | color-mix(in srgb, {desktop.color-warning} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-warning} 15%, {desktop.color-background}) |
| color-notice-warning-border | ⇐ color-warning | ⇐ color-warning |
| color-notice-warning-foreground | ⇐ color-warning | ⇐ color-warning |
| color-progress | ⇐ color-blue | ⇐ color-blue |
| color-progress-bg | ⇐ color-info-bg | ⇐ color-info-bg |
| color-progress-fg | ⇐ color-info-fg | ⇐ color-info-fg |
| color-selection-bg | ⇐ color-brand-muted | ⇐ color-brand-muted |
| color-selection-border | color-mix(in srgb, {desktop.color-brand} 46%, {desktop.color-border} 54%) | color-mix(in srgb, {desktop.color-brand} 46%, {desktop.color-border} 54%) |
| color-selection-fg | ⇐ color-brand | ⇐ color-brand |
| color-sidebar | #F8F8F8 | #0E0E10 |
| color-sidebar-accent | #F1F1F1 | #111113 |
| color-sidebar-accent-foreground | #161616 | #F1F1F1 |
| color-sidebar-border | #DFDFDF | #424244 |
| color-sidebar-foreground | #161616 | #F1F1F1 |
| color-sidebar-ring | #18181B | #ACACAD |
| color-source-external | #F97316 | #F97316 |
| color-tooltip-border | color-mix(in srgb, {desktop.color-tooltip-bg} 72%, black 28%) | color-mix(in srgb, {desktop.color-tooltip-bg} 72%, black 28%) |
| color-yellow | #FADC19 | #FADC19 |
| color-yellow-foreground | #161616 | #161616 |
| color-yellow-hover | color-mix(in srgb, {desktop.color-yellow} 85%, transparent) | color-mix(in srgb, {desktop.color-yellow} 85%, transparent) |
| color-yellow-muted | color-mix(in srgb, {desktop.color-yellow} 15%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-yellow} 15%, {desktop.color-background}) |
同值重复 15
和现有角色撞色，或不是颜色。组件还在读，这一版不删。
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-accent | #F1F1F1 | #111113 |
| color-accent-foreground | #161616 | #F1F1F1 |
| color-brand-rgb | 142 128 242 | 157 145 245 |
| color-disabled-bg | #F1F1F1 | #111113 |
| color-disabled-border | #DFDFDF | #424244 |
| color-disabled-fg | #8C8C8C | #6B6B6D |
| color-input | #DFDFDF | #424244 |
| color-muted | #F1F1F1 | #111113 |
| color-muted-foreground | #656565 | #8B8B8B |
| color-overlay-strong | rgb(29 33 41 / 0.32) | rgb(29 33 41 / 0.32) |
| color-primary | #18181B | #F1F1F1 |
| color-primary-foreground | #FFFFFF | #18181B |
| color-ring | #18181B | #D5D5D6 |
| color-secondary | #F1F1F1 | #111113 |
| color-secondary-foreground | #161616 | #F1F1F1 |