颜色概览 · 设计系统

展示

系统样例

text.primary主文字

text.secondary次级文字

text.tertiary辅助文字

text.quaternary最弱文字

text.placeholder占位文字

text.disabled禁用文字

text.inverse反色文字

text.link链接文字

text.linkHover链接悬停

text.onAccent强调表面文字

text.info信息文字

text.success成功文字

text.warning警告文字

text.danger危险文字

background.canvas页面背景

background.transparent透明背景

background.base基础表面

background.secondary次级表面

background.tertiary三级表面

background.grouped分组背景

background.raised浮起表面

background.elevated浮层表面

background.overlay覆盖表面

background.inverse反色背景

background.inverseHover反色背景悬停

background.inversePressed反色背景按下

background.hover中性悬停

background.pressed中性按下

background.selectedNeutral中性选中

background.selectedAccent强调选中

background.disabled禁用背景

background.accent主要强调背景

background.accentHover主要强调悬停

background.accentPressed主要强调按下

background.accentSubtle弱强调背景

background.accentSubtleHover弱强调悬停

background.accentSubtlePressed弱强调按下

border.separator分隔线

border.subtle弱边框

border.default默认边框

border.strong强边框

border.focus焦点边框

border.selectedNeutral中性选中边框

border.selectedAccent强调选中边框

border.disabled禁用边框

border.inverse反色边框

icon.primary主图标

icon.secondary次级图标

icon.tertiary辅助图标

icon.disabled禁用图标

icon.inverse反色图标

icon.accent强调图标

fill.primary一级填充

fill.secondary二级填充

fill.tertiary三级填充

fill.quaternary四级填充

fill.selectedNeutral中性选中填充

fill.selectedAccent强调选中填充

fill.disabled禁用填充

fill.accent强调填充

status.info.foreground信息前景

status.info.subtle信息弱背景

status.info.subtleHover信息弱背景悬停

status.info.subtlePressed信息弱背景按下

status.info.strong信息强背景

status.info.strongHover信息强背景悬停

status.info.strongPressed信息强背景按下

status.success.foreground成功前景

status.success.subtle成功弱背景

status.success.subtleHover成功弱背景悬停

status.success.subtlePressed成功弱背景按下

status.success.strong成功强背景

status.success.strongHover成功强背景悬停

status.success.strongPressed成功强背景按下

status.warning.foreground警告前景

status.warning.subtle警告弱背景

status.warning.subtleHover警告弱背景悬停

status.warning.subtlePressed警告弱背景按下

status.warning.strong警告强背景

status.warning.strongHover警告强背景悬停

status.warning.strongPressed警告强背景按下

status.danger.foreground危险前景

status.danger.subtle危险弱背景

status.danger.subtleHover危险弱背景悬停

status.danger.subtlePressed危险弱背景按下

status.danger.strong危险强背景

status.danger.strongHover危险强背景悬停

status.danger.strongPressed危险强背景按下

Token

6 个分类

名称	类型	浅色	深色
`semantic.color.text.primary`主文字	color	`oklch(0.2 0.001 255)`	`oklch(0.98 0 255)`
`semantic.color.text.secondary`次级文字	color	`oklch(0.47 0.01 255)`	`oklch(0.82 0.004 255)`
`semantic.color.text.tertiary`辅助文字	color	`oklch(0.56 0.013 255)`	`oklch(0.73 0.008 255)`
`semantic.color.text.quaternary`最弱文字	color	`oklch(0.64 0.013 255)`	`oklch(0.64 0.013 255)`
`semantic.color.text.placeholder`占位文字	color	`oklch(0.56 0.013 255)`	`oklch(0.73 0.008 255)`
`semantic.color.text.disabled`禁用文字	color	`oklch(0.64 0.013 255)`	`oklch(0.56 0.013 255)`
`semantic.color.text.inverse`反色文字	color	`oklch(0.98 0 255)`	`oklch(0.2 0.001 255)`
`semantic.color.text.link`链接文字	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.text.linkHover`链接悬停	color	`oklch(0.29 0.058 261.395)`	`oklch(0.9 0.019 261.395)`
`semantic.color.text.onAccent`强调表面文字	color	`oklch(1 0 0)`	`oklch(0.2 0.001 255)`
`semantic.color.text.info`信息文字	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.text.success`成功文字	color	`oklch(0.38 0.059 150)`	`oklch(0.82 0.113 150)`
`semantic.color.text.warning`警告文字	color	`oklch(0.29 0.029 55)`	`oklch(0.82 0.061 55)`
`semantic.color.text.danger`危险文字	color	`oklch(0.38 0.095 25)`	`oklch(0.82 0.056 25)`
`semantic.color.background.canvas`页面背景	color	`oklch(0.98 0 255)`	`oklch(0.2 0.001 255)`
`semantic.color.background.transparent`透明背景	color	`oklch(0 0 0 / 0)`	`oklch(0 0 0 / 0)`
`semantic.color.background.base`基础表面	color	`oklch(1 0 0)`	`oklch(0.29 0.003 255)`
`semantic.color.background.secondary`次级表面	color	`oklch(0.95 0 255)`	`oklch(0.38 0.007 255)`
`semantic.color.background.tertiary`三级表面	color	`oklch(0.9 0.002 255)`	`oklch(0.47 0.01 255)`
`semantic.color.background.grouped`分组背景	color	`oklch(0.95 0 255)`	`oklch(0.2 0.001 255)`
`semantic.color.background.raised`浮起表面	color	`oklch(1 0 0)`	`oklch(0.29 0.003 255)`
`semantic.color.background.elevated`浮层表面	color	`oklch(1 0 0)`	`oklch(0.38 0.007 255)`
`semantic.color.background.overlay`覆盖表面	color	`oklch(1 0 0)`	`oklch(0.29 0.003 255)`
`semantic.color.background.inverse`反色背景	color	`oklch(0.2 0.001 255)`	`oklch(0.98 0 255)`
`semantic.color.background.inverseHover`反色背景悬停	color	`oklch(0.38 0.007 255)`	`oklch(0.95 0 255)`
`semantic.color.background.inversePressed`反色背景按下	color	`oklch(0.47 0.01 255)`	`oklch(0.9 0.002 255)`
`semantic.color.background.hover`中性悬停	color	`oklch(0.95 0 255)`	`oklch(0.38 0.007 255)`
`semantic.color.background.pressed`中性按下	color	`oklch(0.9 0.002 255)`	`oklch(0.47 0.01 255)`
`semantic.color.background.selectedNeutral`中性选中	color	`oklch(0.9 0.002 255)`	`oklch(0.47 0.01 255)`
`semantic.color.background.selectedAccent`强调选中	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.background.disabled`禁用背景	color	`oklch(0.95 0 255)`	`oklch(0.38 0.007 255)`
`semantic.color.background.accent`主要强调背景	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.background.accentHover`主要强调悬停	color	`oklch(0.29 0.058 261.395)`	`oklch(0.9 0.019 261.395)`
`semantic.color.background.accentPressed`主要强调按下	color	`oklch(0.2 0.022 261.395)`	`oklch(0.95 0.006 261.395)`
`semantic.color.background.accentSubtle`弱强调背景	color	`oklch(0.95 0.006 261.395)`	`oklch(0.29 0.058 261.395)`
`semantic.color.background.accentSubtleHover`弱强调悬停	color	`oklch(0.9 0.019 261.395)`	`oklch(0.368 0.161 261.395)`
`semantic.color.background.accentSubtlePressed`弱强调按下	color	`oklch(0.82 0.052 261.395)`	`oklch(0.47 0.167 261.395)`
`semantic.color.border.separator`分隔线	color	`oklch(0.9 0.002 255)`	`oklch(0.38 0.007 255)`
`semantic.color.border.subtle`弱边框	color	`oklch(0.9 0.002 255)`	`oklch(0.38 0.007 255)`
`semantic.color.border.default`默认边框	color	`oklch(0.82 0.004 255)`	`oklch(0.47 0.01 255)`
`semantic.color.border.strong`强边框	color	`oklch(0.47 0.01 255)`	`oklch(0.82 0.004 255)`
`semantic.color.border.focus`焦点边框	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.border.selectedNeutral`中性选中边框	color	`oklch(0.64 0.013 255)`	`oklch(0.64 0.013 255)`
`semantic.color.border.selectedAccent`强调选中边框	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.border.disabled`禁用边框	color	`oklch(0.9 0.002 255)`	`oklch(0.38 0.007 255)`
`semantic.color.border.inverse`反色边框	color	`oklch(0.98 0 255)`	`oklch(0.2 0.001 255)`
`semantic.color.icon.primary`主图标	color	`oklch(0.2 0.001 255)`	`oklch(0.98 0 255)`
`semantic.color.icon.secondary`次级图标	color	`oklch(0.47 0.01 255)`	`oklch(0.82 0.004 255)`
`semantic.color.icon.tertiary`辅助图标	color	`oklch(0.56 0.013 255)`	`oklch(0.73 0.008 255)`
`semantic.color.icon.disabled`禁用图标	color	`oklch(0.64 0.013 255)`	`oklch(0.56 0.013 255)`
`semantic.color.icon.inverse`反色图标	color	`oklch(0.98 0 255)`	`oklch(0.2 0.001 255)`
`semantic.color.icon.accent`强调图标	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.fill.primary`一级填充	color	`oklch(0.2 0.001 255)`	`oklch(0.98 0 255)`
`semantic.color.fill.secondary`二级填充	color	`oklch(0.47 0.01 255)`	`oklch(0.82 0.004 255)`
`semantic.color.fill.tertiary`三级填充	color	`oklch(0.64 0.013 255)`	`oklch(0.64 0.013 255)`
`semantic.color.fill.quaternary`四级填充	color	`oklch(0.82 0.004 255)`	`oklch(0.47 0.01 255)`
`semantic.color.fill.selectedNeutral`中性选中填充	color	`oklch(0.38 0.007 255)`	`oklch(0.9 0.002 255)`
`semantic.color.fill.selectedAccent`强调选中填充	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.fill.disabled`禁用填充	color	`oklch(0.73 0.008 255)`	`oklch(0.56 0.013 255)`
`semantic.color.fill.accent`强调填充	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.status.info.foreground`信息前景	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.status.info.subtle`信息弱背景	color	`oklch(0.95 0.006 261.395)`	`oklch(0.29 0.058 261.395)`
`semantic.color.status.info.subtleHover`信息弱背景悬停	color	`oklch(0.9 0.019 261.395)`	`oklch(0.368 0.161 261.395)`
`semantic.color.status.info.subtlePressed`信息弱背景按下	color	`oklch(0.82 0.052 261.395)`	`oklch(0.47 0.167 261.395)`
`semantic.color.status.info.strong`信息强背景	color	`oklch(0.368 0.161 261.395)`	`oklch(0.82 0.052 261.395)`
`semantic.color.status.info.strongHover`信息强背景悬停	color	`oklch(0.29 0.058 261.395)`	`oklch(0.9 0.019 261.395)`
`semantic.color.status.info.strongPressed`信息强背景按下	color	`oklch(0.2 0.022 261.395)`	`oklch(0.95 0.006 261.395)`
`semantic.color.status.success.foreground`成功前景	color	`oklch(0.38 0.059 150)`	`oklch(0.82 0.113 150)`
`semantic.color.status.success.subtle`成功弱背景	color	`oklch(0.95 0.017 150)`	`oklch(0.29 0.031 150)`
`semantic.color.status.success.subtleHover`成功弱背景悬停	color	`oklch(0.9 0.062 150)`	`oklch(0.38 0.059 150)`
`semantic.color.status.success.subtlePressed`成功弱背景按下	color	`oklch(0.82 0.113 150)`	`oklch(0.47 0.089 150)`
`semantic.color.status.success.strong`成功强背景	color	`oklch(0.38 0.059 150)`	`oklch(0.82 0.113 150)`
`semantic.color.status.success.strongHover`成功强背景悬停	color	`oklch(0.29 0.031 150)`	`oklch(0.9 0.062 150)`
`semantic.color.status.success.strongPressed`成功强背景按下	color	`oklch(0.2 0.012 150)`	`oklch(0.95 0.017 150)`
`semantic.color.status.warning.foreground`警告前景	color	`oklch(0.38 0.055 55)`	`oklch(0.82 0.061 55)`
`semantic.color.status.warning.subtle`警告弱背景	color	`oklch(0.95 0.006 55)`	`oklch(0.29 0.029 55)`
`semantic.color.status.warning.subtleHover`警告弱背景悬停	color	`oklch(0.9 0.022 55)`	`oklch(0.38 0.055 55)`
`semantic.color.status.warning.subtlePressed`警告弱背景按下	color	`oklch(0.82 0.061 55)`	`oklch(0.47 0.084 55)`
`semantic.color.status.warning.strong`警告强背景	color	`oklch(0.38 0.055 55)`	`oklch(0.82 0.061 55)`
`semantic.color.status.warning.strongHover`警告强背景悬停	color	`oklch(0.29 0.029 55)`	`oklch(0.9 0.022 55)`
`semantic.color.status.warning.strongPressed`警告强背景按下	color	`oklch(0.2 0.011 55)`	`oklch(0.95 0.006 55)`
`semantic.color.status.danger.foreground`危险前景	color	`oklch(0.38 0.095 25)`	`oklch(0.82 0.056 25)`
`semantic.color.status.danger.subtle`危险弱背景	color	`oklch(0.95 0.006 25)`	`oklch(0.29 0.05 25)`
`semantic.color.status.danger.subtleHover`危险弱背景悬停	color	`oklch(0.9 0.02 25)`	`oklch(0.38 0.095 25)`
`semantic.color.status.danger.subtlePressed`危险弱背景按下	color	`oklch(0.82 0.056 25)`	`oklch(0.47 0.145 25)`
`semantic.color.status.danger.strong`危险强背景	color	`oklch(0.38 0.095 25)`	`oklch(0.82 0.056 25)`
`semantic.color.status.danger.strongHover`危险强背景悬停	color	`oklch(0.29 0.05 25)`	`oklch(0.9 0.02 25)`
`semantic.color.status.danger.strongPressed`危险强背景按下	color	`oklch(0.2 0.019 25)`	`oklch(0.95 0.006 25)`

使用

使用规则

可以使用强调色

主要操作
链接
复选框、单选框与开关
可见焦点
语义状态

默认保持中性

分段控制
标签页
侧边导航
分页
卡片、列表与表格的选中状态