灵感数据库 | 心智模型

正在加载顶部导航...

16_color_roles_taxonomy_UI品牌角色色阶库

当前 200 条 · 1 / 5 页

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 50
Token建议名: color.primary-brand.50
HEX: #F0EFFA
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 100
Token建议名: color.primary-brand.100
HEX: #E1DFF6
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 200
Token建议名: color.primary-brand.200
HEX: #C7C4EE
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 300
Token建议名: color.primary-brand.300
HEX: #A29CE2
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 400
Token建议名: color.primary-brand.400
HEX: #7269D3
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 500
Token建议名: color.primary-brand.500
HEX: #4539C6
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 600
Token建议名: color.primary-brand.600
HEX: #3A30A6
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 700
Token建议名: color.primary-brand.700
HEX: #2F2786
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 800
Token建议名: color.primary-brand.800
HEX: #241E67
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌主色

最高频的品牌识别色。

Role: Primary Brand
色阶: 900
Token建议名: color.primary-brand.900
HEX: #16123F
常见用途: Logo、主按钮、重要模块
风险提醒: 不等于所有按钮都必须用它

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 50
Token建议名: color.secondary-brand.50
HEX: #F0EFFA
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 100
Token建议名: color.secondary-brand.100
HEX: #E1DFF6
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 200
Token建议名: color.secondary-brand.200
HEX: #C7C4EE
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 300
Token建议名: color.secondary-brand.300
HEX: #A29CE2
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 400
Token建议名: color.secondary-brand.400
HEX: #7269D3
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 500
Token建议名: color.secondary-brand.500
HEX: #4539C6
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 600
Token建议名: color.secondary-brand.600
HEX: #3A30A6
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 700
Token建议名: color.secondary-brand.700
HEX: #2F2786
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 800
Token建议名: color.secondary-brand.800
HEX: #241E67
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

品牌辅助色

补充品牌层次和场景。

Role: Secondary Brand
色阶: 900
Token建议名: color.secondary-brand.900
HEX: #16123F
常见用途: 二级按钮、插画、卡片
风险提醒: 过多会削弱记忆

强调色

少量吸引注意。

Role: Accent
色阶: 50
Token建议名: color.accent.50
HEX: #F0EFFA
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 100
Token建议名: color.accent.100
HEX: #E1DFF6
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 200
Token建议名: color.accent.200
HEX: #C7C4EE
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 300
Token建议名: color.accent.300
HEX: #A29CE2
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 400
Token建议名: color.accent.400
HEX: #7269D3
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 500
Token建议名: color.accent.500
HEX: #4539C6
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 600
Token建议名: color.accent.600
HEX: #3A30A6
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 700
Token建议名: color.accent.700
HEX: #2F2786
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 800
Token建议名: color.accent.800
HEX: #241E67
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

强调色

少量吸引注意。

Role: Accent
色阶: 900
Token建议名: color.accent.900
HEX: #16123F
常见用途: CTA、价格、标签
风险提醒: 面积过大会抢主色

背景色

承载内容的大面积底色。

Role: Background
色阶: 50
Token建议名: color.background.50
HEX: #F4F4F6
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 100
Token建议名: color.background.100
HEX: #E9EAED
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 200
Token建议名: color.background.200
HEX: #D5D7DD
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 300
Token建议名: color.background.300
HEX: #B9BDC6
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 400
Token建议名: color.background.400
HEX: #949BA8
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 500
Token建议名: color.background.500
HEX: #737B8C
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 600
Token建议名: color.background.600
HEX: #606876
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 700
Token建议名: color.background.700
HEX: #4E545F
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 800
Token建议名: color.background.800
HEX: #3C4049
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

背景色

承载内容的大面积底色。

Role: Background
色阶: 900
Token建议名: color.background.900
HEX: #25272D
常见用途: 页面、海报、包装底
风险提醒: 需检查文字对比

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 50
Token建议名: color.surface.50
HEX: #F4F4F6
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 100
Token建议名: color.surface.100
HEX: #E9EAED
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 200
Token建议名: color.surface.200
HEX: #D5D7DD
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 300
Token建议名: color.surface.300
HEX: #B9BDC6
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 400
Token建议名: color.surface.400
HEX: #949BA8
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 500
Token建议名: color.surface.500
HEX: #737B8C
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 600
Token建议名: color.surface.600
HEX: #606876
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开

表面色

卡片/弹层/容器背景。

Role: Surface
色阶: 700
Token建议名: color.surface.700
HEX: #4E545F
常见用途: UI 卡片、弹窗、表格
风险提醒: 层级要与背景拉开