CrossBorder OMS 设计系统
设计理念
专业、高效、数据驱动 - 为跨境电商订单管理系统打造的现代化界面设计
配色方案
主色调 (Primary)
用于主要操作、导航、重要链接
| 变量 |
值 |
用途 |
--cb-primary |
#0284C7 |
主色（天空蓝） |
--cb-primary-hover |
#0369A1 |
悬停状态 |
--cb-primary-soft |
#E0F2FE |
浅色背景 |
--cb-primary-strong |
#0C4A6E |
深色强调 |
辅助色 (Accent)
用于次要操作、装饰元素、数据高亮
| 变量 |
值 |
用途 |
--cb-accent |
#F59E0B |
强调色（琥珀金） |
--cb-accent-soft |
#FEF3C7 |
浅色背景 |
--cb-accent-hover |
#D97706 |
悬停状态 |
功能色
用于状态指示、反馈信息
| 变量 |
值 |
用途 |
--cb-success |
#059669 |
成功、完成 |
--cb-success-soft |
#D1FAE5 |
成功背景 |
--cb-danger |
#DC2626 |
错误、危险 |
--cb-danger-soft |
#FEE2E2 |
错误背景 |
--cb-warning |
#D97706 |
警告 |
--cb-warning-soft |
#FEF3C7 |
警告背景 |
--cb-info |
#0284C7 |
信息 |
--cb-info-soft |
#E0F2FE |
信息背景 |
中性色
用于背景、边框、文字
| 变量 |
值 |
用途 |
--cb-bg |
#F8FAFC |
页面背景 |
--cb-bg-soft |
#F1F5F9 |
次级背景 |
--cb-panel |
#FFFFFF |
卡片/面板背景 |
--cb-border |
#E2E8F0 |
边框 |
--cb-text |
#0F172A |
主文本（对比度 16.4:1） |
--cb-text-soft |
#475569 |
次级文本（对比度 7.2:1） |
--cb-text-muted |
#94A3B8 |
辅助文本（对比度 3.9:1） |
阴影系统
| 变量 |
值 |
用途 |
--cb-shadow |
0 1px 2px rgba(0,0,0,0.05) |
轻微阴影 |
--cb-shadow-sm |
0 1px 3px rgba(0,0,0,0.08) |
小阴影 |
--cb-shadow-md |
0 4px 8px rgba(0,0,0,0.08) |
中等阴影 |
--cb-shadow-lg |
0 8px 16px rgba(0,0,0,0.10) |
大阴影 |
--cb-shadow-glow |
0 0 0 3px rgba(2,132,199,0.15) |
发光效果 |
字体系统
字体族
--cb-font-family: "Inter", "SF Pro Display", "HarmonyOS Sans SC", "PingFang SC", sans-serif
--cb-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace
字体大小
| 级别 |
大小 |
字重 |
用途 |
| XS |
11px |
500 |
标签、徽章 |
| SM |
12px |
500 |
辅助信息 |
| Base |
13px |
400 |
正文、表格 |
| MD |
14px |
500 |
次级标题 |
| LG |
16px |
600 |
卡片标题 |
| XL |
18px |
600 |
页面标题 |
| 2XL |
24px |
700 |
主标题 |
| 3XL |
32px |
700 |
特大标题 |
行高
间距系统
使用 4px 基础单位的倍数：
| 名称 |
值 |
用途 |
| --cb-space-1 |
4px |
最小间距 |
| --cb-space-2 |
8px |
小间距 |
| --cb-space-3 |
12px |
默认间距 |
| --cb-space-4 |
16px |
中等间距 |
| --cb-space-5 |
20px |
大间距 |
| --cb-space-6 |
24px |
超大间距 |
| --cb-space-8 |
32px |
章节间距 |
组件规范
按钮
- 高度：36px（默认）、32px（小）、40px（大）
- 圆角：6px
- 内边距：0 16px
- 过渡：150ms ease-out
输入框
- 高度：36px
- 圆角：6px
- 边框：1px solid var(--cb-border)
- 聚焦边框：2px solid var(--cb-primary)
卡片
- 圆角：8px
- 内边距：20px
- 边框：1px solid var(--cb-border)
- 阴影：var(--cb-shadow-sm)
表格
- 行高：44px
- 边框：1px solid var(--cb-border)
- 斑马纹：var(--cb-bg-soft)
- 悬停：var(--cb-primary-soft)
导航菜单
- 项高度：40px（一级）、38px（二级）
- 内边距：0 12px
- 圆角：6px
- 悬停背景：var(--cb-primary-soft)
动画规范
缓动函数
--cb-ease-out: cubic-bezier(0.33, 1, 0.68, 1)
--cb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1)
持续时间
- 微交互：150ms
- 标准过渡：200ms
- 复杂动画：300ms
- 页面切换：400ms
响应式断点
| 断点 |
宽度 |
设备 |
| SM |
640px |
手机横屏 |
| MD |
768px |
平板 |
| LG |
1024px |
小笔记本 |
| XL |
1280px |
桌面 |
| 2XL |
1536px |
大屏 |
最佳实践
1. 可访问性
- 所有交互元素必须有
:hover 和 :focus 状态
- 颜色对比度至少 4.5:1
- 使用语义化 HTML
- 为图标按钮提供 aria-label
2. 性能
- 使用
transform 和 opacity 做动画
- 避免频繁的 DOM 操作
- 图片使用懒加载
- 大列表使用虚拟滚动
3. 一致性
- 相同功能使用相同颜色
- 保持统一的间距和圆角
- 使用固定的 z-index 层级
- 保持动画效果一致
暗色模式支持
预留暗色模式变量，使用 prefers-color-scheme 检测：
@media (prefers-color-scheme: dark) {
--cb-bg: #0F172A;
--cb-panel: #1E293B;
--cb-text: #F1F5F9;
/* ... 更多变量 */
}
