palette
全局色彩令牌 (Color Tokens)
Base Colors
primary
#4CAE4F
品牌主色
操作/高亮
accent
#E07A5F
强调色
营销/标签
warning
#F2C94C
警告色
注意/提醒
error
#F44336
错误色
失败/删除
info
#2196F3
信息色
链接/状态
.bg-primary-light
#E8F5E9
.bg-amber-light
#FFF8E1
.bg-error-light
#FFEBEE
.bg-slate-100
#F1F5F9
grid_view
图标资源库 (Iconography)
Material Symbols
info
统一栅格 24px，描边宽度 2px。开发类名:
查看完整图库 →
.material-symbols-outlined
常用功能图标
home
search
settings
person
add_circle
notifications
favorite
delete
edit
share
状态图标 & 尺寸变体
check_circle
Success
warning
Warning
error
Error
info
Info
visibility
16px
visibility
32px
text_fields
排版规范 (Typography)
Font System
| Token / Class | Spec | Example |
|---|---|---|
| text-2xl / font-bold | 24px / 700 | 健康生活指南 |
| text-xl / font-bold | 20px / 700 | 每日营养摄入建议 |
| text-base / font-medium | 16px / 500 | 蔬菜和水果的重要性 |
| text-sm / font-normal | 14px / 400 |
保持均衡的饮食对于维持健康的身体至关重要。请确保每天摄入足够的蔬菜和水果。 |
| text-xs / font-medium | 12px / 500 | 辅助信息说明 |
smart_button
交互按钮 (Interactive Buttons)
Components
主要操作
.btn-primary
次要操作
描边按钮
特殊状态 (Destructive & Disabled)
check_box
表单控件 (Form Controls)
Forms
mail
expand_more
复选 Checkbox
单选 Radio
notifications_active
反馈提示 (Alerts)
Feedback
warning
账户安全警告
系统检测到您的账户存在异常登录尝试，建议立即修改密码。
check
保存成功
更改已同步至云端。
wifi_off
网络连接断开，请检查设置。