Skip to content

Color 颜色 ​

色彩用于建立界面层级、传达状态与引导操作。以下收录主题色、功能色、文字色与背景边框四组色板,每组均提供完整的状态变体,可直接用于设计与实现。

Primary
Success
Warning
Danger
Info
Default

主题色 Primary ​

品牌主色用于链接、主按钮与导航高亮。hover / active / soft 构成完整的交互反馈梯度,保证任何状态都有明确的视觉回应。

功能色 Function ​

用于传达语义状态。每个色家族包含基准色、悬停变体与柔和装饰底,装饰底适合用于标签、提示条等大面积浅色场景。

Success 成功

操作成功、校验通过等正向反馈。

Base#00d162
Hover#00b856
Softrgba(0,209,98,.14)

Warning 警告

需要注意但不会阻塞流程的情况。

Base#ffad4c
Hover#f59728
Softrgba(255,173,76,.16)

Danger / Error 危险

错误、失败或需要立即处理的危险状态,两者共用同一色值。

Base#ff4343
Hover#f03030
Softrgba(255,67,67,.16)

Info 信息

中性提示,用于补充说明,不打断主流程。

Info#a3acca
Softrgba(163,172,202,.2)

Default 默认

禁用、占位与不可操作状态的基准色,视觉重量最轻,不参与语义表达。

Default#cccccc
Softrgba(204,204,204,.2)

文字色 Text ​

四级灰度按明度严格分层,相邻层级保留可感知差异。正文用主色,说明用基础色,辅助信息用次要色,禁用与占位用弱化色。

Aa
Main · 主文字--mu-text-main-color
#333333
Aa
Base · 基础文字--mu-text-base-color
#666666
Aa
Secondary · 次要文字--mu-text-secondary-color
#999999
Aa
Extra · 弱化文字--mu-text-extra-color
#cccccc

背景与边框 Background ​

页面、卡片、激活态与输入框各有底色,层级由浅到深。边框只用于分割,不参与信息传达,因此始终保持最轻的视觉重量。

颜色清单 ​

全部颜色名称、用途说明与色块预览,按主题、功能、文字、背景的次序排列。

名称描述颜色
Primary品牌主色,按钮与主要交互元素#4c76ff
Primary Hover主色悬浮态#3a63ee
Primary Active主色按下态#2d52d8
Primary Soft主色弱背景,标签、高亮底色rgba(76,118,255,.14)
Success成功反馈、完成态#00d162
Success Hover成功悬浮态#00b856
Success Soft成功弱背景rgba(0,209,98,.14)
Warning警告、提醒操作#ffad4c
Warning Hover警告悬浮态#f59728
Warning Soft警告弱背景rgba(255,173,76,.16)
Danger危险、错误、删除操作#ff4343
Danger Hover危险悬浮态#f03030
Danger Soft危险弱背景rgba(255,67,67,.16)
Error错误提示(与 Danger 同色)#ff4343
Info信息提示、中性反馈#a3acca
Info Soft信息弱背景rgba(163,172,202,.2)
Default默认、次级按钮#cccccc
Default Soft默认弱背景rgba(204,204,204,.2)
Black纯黑#333333
White纯白#ffffff
Text Main正文主文字#333333
Text Base次级正文#666666
Text Secondary辅助文字#999999
Text Extra最弱文字、禁用语#cccccc
Placeholder输入框填充底#f2f3f4
Placeholder Base占位描边#dddddd
Border通用边框#eeeeee
Active Background行悬浮、激活态背景#f9f9f9
Bg Default容器默认底#f1f1f1
Bg页面主背景#f7f8f9