Design System v2
完整设计系统文档站 — Tokens、组件库、模式与最佳实践，支撑产品一致性与团队协作。
v2.0.0 · 2026
Color Tokens
12 色调色板 — 6 中性色 + 6 品牌/语义色。
Neutral
#FFFFFF
White--c-bg
#F8FAFC
Surface--c-surface
#F1F5F9
Surface 2--c-surface-2
#94A3B8
Muted--c-text-mute
#475569
Soft--c-text-soft
#1A1A1A
Text--c-text
Brand / Semantic
#6366F1
Brand--c-brand
#4F46E5
Brand 2--c-brand-2
#EEF2FF
Brand Soft--c-brand-soft
#10B981
Success--c-success
#F59E0B
Warning--c-warning
#EF4444
Danger--c-danger
Typography
字号 8 档 — 标题用思源宋体，正文用 system-ui。
Heading 1
Heading 2
Heading 3
Heading 4
Large Body
Body Text
Small Body
Caption · Caption2
Radius
圆角 5 档 — 从 4px 到 24px。
Spacing
间距 8 档 — 4px 起步，64px 封顶。
Shadow
阴影 5 档 — 从极轻到极致浮层。
Motion
动效缓动 4 档 — duration 与 easing。
Basic 基础组件
Button（5 种）/ Badge / Avatar / Tag / Chip / Divider。
Button
Badge
Brand
Success
Warning
Danger
Info
Solid
Avatar
A
B
C
D
+5
Tag / Chip
📌 默认标签
🔥 热门
⭐ 推荐
未选
已选
Vue
React
Divider
上方内容
中间内容
或
下方内容
Form 表单组件
Input / Textarea / Select / Checkbox / Radio / Switch / Slider / FormError。
该字段不能为空
Checkbox
Radio
Switch
Slider
值: 60
Feedback 反馈组件
Alert（4 语义）/ Toast / Progress / Skeleton / Spinner / Empty。
✓ 成功 操作已成功完成。
⚠ 警告 请注意相关风险。
✕ 错误 操作失败，请重试。
ℹ 提示 系统即将在 5 分钟后维护。
Toast
✓ 已保存
⏳ 上传中…
Progress
Spinner / Skeleton
加载中…
Empty
暂无数据
Data 数据组件
Card（3 种）/ Table（含 hover+sortable）/ Stat / Timeline / Pagination。
Card · 3 种风格
Default Card
默认卡片，柔和边框。
Elevated Card
悬浮阴影，无边框。
Bordered Card
强调边框，纯白底。
Stat
总用户
12,348
↑ 12.3%
月活
8,621
↑ 5.7%
订单
1,093
↓ 2.1%
GMV
¥89.2k
↑ 18.6%
Table
| 姓名 ⇅ | 角色 ⇅ | 状态 ⇅ | 最近活跃 |
|---|---|---|---|
| 张三 | Admin | 在线 | 刚刚 |
| 李四 | Editor | 离线 | 2h 前 |
| 王五 | Viewer | 活跃 | 10m 前 |
| 赵六 | Admin | 禁用 | 3d 前 |
Timeline
2026-08-21 10:30
系统发布 v2.0.0
2026-08-15 14:20
修复 12 个 bug
2026-08-08 09:00
v2.0.0-beta 上线
2026-08-01
项目立项
Pagination
Media 媒体组件
Avatar Group / Tooltip（hover 显示）。
Avatar Group
A
B
C
D
+8
A
B
C
Tooltip（hover）
这是个 tooltip 提示
⚠ 此操作不可撤销
? 帮助查看帮助文档