1. Surface 层级(60% 中性骨架色)
Surface
lowest
low
medium
high
highest
2. 品牌色 + 交互色(30% + 10%)
Primary
Primary
On Primary
Container
On Container
Secondary
Secondary
On Secondary
Container
On Container
Accent/CTA
Accent
On Accent
Container
On Container
Status
Success
Error
Notice
Info
Status Container
Success
Error
Notice
Info
3. 按钮组件
4. 表单组件
请输入有效的邮箱地址
邮箱格式正确
5. 卡片层级
Surface Low
基础卡片背景,用于内容面板和信息展示区域。
标签Surface Medium
次级面板背景,嵌套在基础卡片内的分组区域。
已激活Surface High
高海拔面板,用于侧边栏、导航栏等结构性元素。
待审核6. 状态标签(图标 + 圆点辅助,色盲安全)
成功
错误
警告
信息
运行中
已停止
注意
同步中
7. 排版层级
H1
仪表盘数据概览
H2
用户管理模块
H3
最近操作记录
Body
这是一段正文内容,用于展示主文本色在各层级 Surface 上的可读性。
Caption
辅助说明文字,用于描述和次要信息展示。
Overline
分组标题 / OVERLINE
8. WCAG 对比度验证
| 组合 | 前景 | 背景 | 对比度 | AA |
|---|