🎨 色板系统 (Color Palette)

提供 6 档中性色与 6 档品牌紫色系统变量，支持 Light / Dark 无缝切换。

Neutral 中性色族 (6 档)

Neutral 50
var(--neutral-50)
Neutral 100
var(--neutral-100)
Neutral 300
var(--neutral-300)
Neutral 500
var(--neutral-500)
Neutral 700
var(--neutral-700)
Neutral 900
var(--neutral-900)

Brand 品牌色族 (6 档)

Brand 100
var(--brand-100)
Brand 300
var(--brand-300)
Brand 500
#6366f1 / #818cf8
Brand 600
var(--brand-600)
Brand 700
var(--brand-700)
Brand 900
var(--brand-900)

🔤 排版字号 (Typography - 8 Steps)

主标题采用思源宋体，正文使用跨平台系统无衬线字族，代码使用 JetBrains Mono。

4XL 标题样式 - 设计系统的美学架构
36px2.25remvar(--text-4xl)
3XL 大节标题 - 一致性与工程化
30px1.875remvar(--text-3xl)
2XL 模块标题 - 语义化色彩体系
24px1.5remvar(--text-2xl)
XL 卡片标题 - 极速响应与无障碍
20px1.25remvar(--text-xl)
LG 导语突出 - 标准化前端组件基座
18px1.125remvar(--text-lg)
BASE 标准正文 - 用于日常阅读与长文本展示说明
16px1.0remvar(--text-base)
SM 次级文本 - 表格、表单提示与侧边导航说明
14px0.875remvar(--text-sm)
XS 辅助说明 - 标签、角标及徽标微型字号
12px0.75remvar(--text-xs)

🔘 圆角系统 (Border Radius - 5 Steps)

从纯直角到全圆胶囊形态的 5 档精细化几何倒角。

None
0px / --radius-none
Small
4px / --radius-sm
Medium
8px / --radius-md
Large
16px / --radius-lg
Full
9999px / --radius-full

📐 间距规范 (Spacing Scale - 8 Steps)

基于 4px 栅格倍数延伸的精准布局度量单位。

Space 1 4px
Space 2 8px
Space 3 12px
Space 4 16px
Space 6 24px
Space 8 32px
Space 12 48px
Space 16 64px

🌑 投影层级 (Shadow Elevations - 5 Steps)

模拟物理世界景深与 Z 轴抬升高度的阴影体系。

Shadow SM Z-1: 基础微卡片
Shadow MD Z-2: 悬停及下拉菜单
Shadow LG Z-3: 浮层与通知
Shadow XL Z-4: 侧边抽屉
Shadow 2XL Z-5: 模态对话框

⚡ 动效缓动 (Motion & Easing - 4 Steps)

符合自然动量与物理规律的贝塞尔曲线插值参数。

Ease Linear (匀速)
linear
Ease In (加速渐入)
cubic-bezier(0.4, 0, 1, 1)
Ease Out (减速渐出)
cubic-bezier(0, 0, 0.2, 1)
Ease In-Out (平滑过渡)
cubic-bezier(0.4, 0, 0.2, 1)

🧩 基础组件：Button 按钮 (5 种类型)

涵盖 Primary、Secondary、Outline、Ghost、Danger 5 种核心变体及禁用态。

🧩 基础组件：Badge 徽标

状态小圆点与语义化数字角标展示。

Default 12 New Feature Online Pending (3) Failed

🧩 基础组件：Avatar 头像

不同尺寸、圆角与实时在线状态标识。

A
JD
UI
Avatar

🧩 基础组件：Tag 标签 & Chip 纸片

可删除标签与可选择过滤的交互式 Chip。

React × TypeScript × Design System
All Projects Design Development

🧩 基础组件：Divider 分割线

支持文字居中内嵌的水平分割线与行内垂直分割线。

START OF CONTENT

中间正文内容区块展示

OR CONTINUE WITH

📝 表单组件：Input 输入框 & Textarea 文本域

常规输入、带前后缀图标态与自适应多行文本域。

✉️
我们将向您发送验证邮件。

📝 表单组件：Select 下拉选择器

美化自适应的单选下拉菜单。

📝 表单组件：Checkbox / Radio / Switch 开关

原生替代的定制化单选、多选与状态开关。

实时自动同步

📝 表单组件：Slider 滑块 & FormError 错误校验

范围拖拽指示器与实时表单校验失败高亮反馈。

⚠️ 密码长度不能少于 8 位且需包含特殊字符

💬 反馈组件：Alert 语义警告提示 (4 种)

Info、Success、Warning、Error 四类通知横幅。

ℹ️
系统维护通知
核心集群将在本周日凌晨 02:00 进行无缝热升级。
✅
发布成功
Aura Design System v2.0 所有 NPM 包已成功同步至生产环境。
⚠️
API 弃用警告
旧版 Legacy Button API 将于下个月版本发布后正式废除。
❌
编译错误
无法解析未知模块依赖，请检查 package.json 锁版本。

💬 反馈组件：Toast 全局浮动通知

支持动态触发的轻量级操作结果通知。

💾 静态 Toast 预览示例 ×

💬 反馈组件：Progress 进度指示条

常规进度与条纹动画动态进度条。

上传同步中 68%
构建部署管道 90% (动画条纹)

💬 反馈组件：Skeleton 骨架屏 & Spinner 指示器

平滑微光的占位骨架屏与旋转加载动效。

数据加载中...

💬 反馈组件：Empty 空状态

暂无数据或操作空白时的占位插画图文。

🗂️

暂无关联组件

当前筛选分类下尚未创建符合条件的 UI 资产。

📊 数据展示：Card 卡片 (3 种类型)

基础卡片、交互悬停高亮卡片与多媒体封面卡片。

基础卡片 (Basic) Static

提供标准结构化标题、正文与底层元数据注脚。

最后更新：今天 10:45
交互卡片 (Interactive) Hover me

鼠标悬停触发平滑 Z 轴上浮与边缘外发光投影。

深入探索 →
✨ Aura UI Asset Preview

多媒体展示卡片 (Media Card)

支持头图渲染、多标签分类与底部快速操作栏。

📊 数据展示：Table 表格 (带悬停与表头排序)

支持行悬停高亮、斑马纹与可点击排序表头。

组件名称 ↕ 类型分类 当前版本 运行状态 操作
Button.tsx 基础组件 v2.4.0 Stable 编辑
DatePicker.tsx 表单组件 v2.1.0 Review 编辑
DataTable.tsx 数据展示 v2.5.2 Stable 编辑

📊 数据展示：Stat 指标 & Timeline 时间轴 & 键值列表

核心商业指标卡、事件活动脉络与结构化属性说明。

月度活跃组件调用数
2,849,200
↑ +14.8% 较上月增长
无障碍兼容评分
99.4%
↑ 符合 WCAG 2.1 AA
10:30 AM
合并 Pull Request #142 (暗色模式重构)
09:15 AM
通过全部 128 项自动化无障碍测试
规范负责人
Aura Core Architecture Team
开源协议
MIT License

🧭 导航组件：Tabs 标签页 & Breadcrumb 面包屑

支持点击切换的内容选项卡与多层级面包屑路径。

当前正在查看：组件总览面板。Aura UI 设计系统致力于提供高内聚、低耦合的标准组件库。

🧭 导航组件：Menu 悬停下拉菜单 & Stepper 步骤条 & Pagination

悬停触发操作菜单、步骤导航与标准分页器。

  • 📋 复制组件代码
  • 🎨 打开 Figma 原型
  • 🔍 导出 Token 配置
  • ‹
  • 1
  • 2
  • 3
  • ›
✓
参数定义
2
无障碍审核
3
正式发布

🖼️ 媒体与浮层：Avatar Group / Tooltip / Popover / Modal

层叠头像组、鼠标悬停气泡提示与模态对话框预览。

Avatar Group 层叠头像
Alex
Ben
Clara
+5
Tooltip 悬停提示
确认发布新版本？ ×

发布后将自动触发 CI/CD 构建并将设计令牌推送至生产 CDN。