完整的UI组件库展示，包含所有设计元素和交互状态
颜色系统
主色调
Primary
主要按钮、链接颜色
次要色
Secondary
次要按钮、背景色
强调色
Accent
悬停状态、强调元素
危险色
Destructive
错误、删除操作
按钮系统
按钮变体
不同用途的按钮样式
按钮尺寸
不同场景的按钮大小
按钮状态
不同交互状态的按钮
卡片系统
基础卡片
这是一个标准的卡片组件，包含标题、描述和内容区域。
卡片内容区域可以放置任何类型的内容，如文本、图片、表单等。
张
张三
前端开发工程师
项目完成度
75%
总下载量
📥12,345
+20.1% 较上月
字体系统
字体层级与样式
项目中使用的字体大小和样式规范
标题字体
H1 - 页面主标题 (36px)
H2 - 章节标题 (30px)
H3 - 子章节标题 (24px)
H4 - 小标题 (20px)
H5 - 次级标题 (18px)
H6 - 基础标题 (16px)
正文字体
大号正文 - 重要内容展示 (18px)
标准正文 - 常规内容阅读 (16px)
小号正文 - 次要信息说明 (14px)
说明文字 - 标签和提示信息 (12px)
字重规范
细体 (300) - 次要信息
常规 (400) - 正文内容
中等 (500) - 按钮文字
半粗 (600) - 次级标题
粗体 (700) - 重要信息
超粗 (900) - 特殊强调
表单组件
表单示例
常用的表单输入组件展示
反馈组件
ℹ️ 信息提示
这是一个普通的信息提示，用于向用户传达重要信息。
✅ 成功提示
操作已成功完成！您的文件已经成功上传并处理。
⚠️ 警告提示
请注意：此操作可能会影响您的数据，请谨慎操作。
❌ 错误提示
操作失败：文件格式不支持，请上传PDF格式的文件。
标签和徽章
徽章组件
用于标记状态、分类等信息
默认
次要
轮廓
危险
成功
信息
警告