图标与填充颜色 · 设计系统 · iantype.com

图标与填充颜色颜色

展示

系统样例

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强调填充

Token

2 个分类

名称	类型	浅色	深色	预览
`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)`

使用

使用规则

可以使用强调色

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

默认保持中性

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