设计系统：调度派单运营后台
调度/派单类运营后台做 AI 辅助开发时，可将下文设计系统作为 Skill 引用，使 AI 产出更符合数据看板与后台管理气质的界面与交互。
English (Original)
Design System: Dispatch & Scheduling Operations Dashboard
Pattern
- Name: Feature-Rich Showcase + Trust
- CTA Placement: Above fold
- Sections: Hero > Features > CTA
Style
- Name: Trust & Authority
- Keywords: Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges
- Best For: Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services
- Performance: ⚡ Excellent | Accessibility: ✓ WCAG AAA
Colors
| Role | Hex |
|---|---|
| Primary | #0F172A |
| Secondary | #334155 |
| CTA | #0369A1 |
| Background | #F8FAFC |
| Text | #020617 |
Notes: Professional navy + blue CTA
Typography
- Heading: Fira Code
- Body: Fira Sans
- Mood: dashboard, data, analytics, code, technical, precise
- Best For: Dashboards, analytics, data visualization, admin panels
- Google Fonts: https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700
- CSS Import:
css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');Key Effects
Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal
Avoid (Anti-patterns)
- Playful design
- Hidden credentials
- AI purple/pink gradients
Pre-Delivery Checklist
- [ ] No emojis as icons (use SVG: Heroicons/Lucide)
- [ ] cursor-pointer on all clickable elements
- [ ] Hover states with smooth transitions (150-300ms)
- [ ] Light mode: text contrast 4.5:1 minimum
- [ ] Focus states visible for keyboard nav
- [ ] prefers-reduced-motion respected
- [ ] Responsive: 375px, 768px, 1024px, 1440px
中文版
设计系统：调度派单运营后台
页面结构（Pattern）
- 名称： 功能丰富展示 + 信任背书（Feature-Rich Showcase + Trust）
- 主行动按钮位置： 首屏可见
- 区块顺序： Hero > 功能展示 > CTA
风格
- 名称： 信任与权威（Trust & Authority）
- 关键词： 证书/徽章展示、专家资质、带数据的案例、前后对比、行业认可、安全标识
- 适用： 医疗/健康落地页、金融服务、企业软件、高端/奢侈品、法律服务
- 性能： ⚡ 优秀 | 无障碍： ✓ WCAG AAA
配色
| 角色 | 色值 |
|---|---|
| 主色 | #0F172A |
| 辅色 | #334155 |
| 行动按钮 | #0369A1 |
| 背景 | #F8FAFC |
| 正文 | #020617 |
说明：专业深蓝 + 蓝色 CTA
字体
- 标题： Fira Code
- 正文： Fira Sans
- 气质： 看板、数据、分析、技术、精确
- 适用： 仪表盘、数据分析、数据可视化、管理后台
- Google Fonts： 见上方英文版链接
- CSS 引入： 见上方英文版代码块
关键效果
徽章悬停、指标脉冲动效、证书轮播、数据平滑展示
避免（反模式）
- 过于活泼的设计
- 资质/证书藏得过深
- AI 紫/粉渐变
交付前检查
- [ ] 图标使用 SVG（如 Heroicons/Lucide），不用 emoji
- [ ] 可点击元素使用 cursor-pointer
- [ ] 悬停有平滑过渡（150–300ms）
- [ ] 浅色模式下正文对比度 ≥ 4.5:1
- [ ] 键盘导航时焦点可见
- [ ] 尊重 prefers-reduced-motion
- [ ] 响应式断点：375px、768px、1024px、1440px