Color 颜色
色彩用于建立界面层级、传达状态与引导操作。以下收录主题色、功能色、文字色与背景边框四组色板,每组均提供完整的状态变体,可直接用于设计与实现。
Primary
Success
Warning
Danger
Info
Default
主题色 Primary
品牌主色用于链接、主按钮与导航高亮。hover / active / soft 构成完整的交互反馈梯度,保证任何状态都有明确的视觉回应。
功能色 Function
用于传达语义状态。每个色家族包含基准色、悬停变体与柔和装饰底,装饰底适合用于标签、提示条等大面积浅色场景。
Success 成功
操作成功、校验通过等正向反馈。
Base
#00d162Hover
#00b856Soft
rgba(0,209,98,.14)Warning 警告
需要注意但不会阻塞流程的情况。
Base
#ffad4cHover
#f59728Soft
rgba(255,173,76,.16)Danger / Error 危险
错误、失败或需要立即处理的危险状态,两者共用同一色值。
Base
#ff4343Hover
#f03030Soft
rgba(255,67,67,.16)Info 信息
中性提示,用于补充说明,不打断主流程。
Info
#a3accaSoft
rgba(163,172,202,.2)Default 默认
禁用、占位与不可操作状态的基准色,视觉重量最轻,不参与语义表达。
Default
#ccccccSoft
rgba(204,204,204,.2)文字色 Text
四级灰度按明度严格分层,相邻层级保留可感知差异。正文用主色,说明用基础色,辅助信息用次要色,禁用与占位用弱化色。
Aa
Aa
Aa
Aa
背景与边框 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 |