设计系统：医废全流程追溯

← 开发资产 | 返回场景概览 →

本场景下进行 AI 辅助开发时，可将下文设计系统作为 Skill 引用，使 AI 产出更符合医疗合规与无障碍要求的界面与交互。

---

English (Original)

Design System: Medical Waste Tracking

Pattern

• Name: Social Proof-Focused
• CTA Placement: Above fold
• Sections: Hero > Features > CTA

Style

• Name: Accessible & Ethical
• Keywords: High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic
• Best For: Government, healthcare, education, inclusive products, large audience, legal compliance, public
• Performance: ⚡ Excellent | Accessibility: ✓ WCAG AAA

Colors

Role	Hex
Primary	#0891B2
Secondary	#22D3EE
CTA	#22C55E
Background	#F0FDFA
Text	#134E4A

Notes: Medical teal + health green

Typography

• Heading: Figtree
• Body: Noto Sans
• Mood: medical, clean, accessible, professional, healthcare, trustworthy
• Best For: Healthcare, medical clinics, pharma, health apps, accessibility
• Google Fonts: https://fonts.google.com/share?selection.family=Figtree:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;700
• CSS Import:

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');

Key Effects

Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets

Avoid (Anti-patterns)

• Bright neon colors
• Motion-heavy animations
• 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）

• 名称： 社会证明导向（Social Proof-Focused）
• 主行动按钮位置： 首屏可见
• 区块顺序： Hero > 功能展示 > CTA

风格

• 名称： 无障碍与伦理向（Accessible & Ethical）
• 关键词： 高对比度、大字号（16px+）、键盘导航、读屏友好、WCAG 合规、焦点状态、语义化
• 适用： 政府、医疗、教育、包容性产品、大众受众、合规、公共场景
• 性能： ⚡ 优秀 | 无障碍： ✓ WCAG AAA

配色

角色	色值
主色	#0891B2
辅色	#22D3EE
行动按钮	#22C55E
背景	#F0FDFA
正文	#134E4A

说明：医疗青 + 健康绿

字体

• 标题： Figtree
• 正文： Noto Sans
• 气质： 医疗、干净、易读、专业、可信
• 适用： 医疗、诊所、药企、健康类应用、无障碍场景
• Google Fonts： 见上方英文版链接
• CSS 引入： 见上方英文版代码块

关键效果

清晰焦点环（3–4px）、ARIA 标签、跳过链接、响应式、尊重减弱动效、44x44px 可点击区域

避免（反模式）

• 高亮霓虹色
• 过重动效
• AI 紫/粉渐变

交付前检查

• [ ] 图标使用 SVG（如 Heroicons/Lucide），不用 emoji
• [ ] 可点击元素使用 cursor-pointer
• [ ] 悬停有平滑过渡（150–300ms）
• [ ] 浅色模式下正文对比度 ≥ 4.5:1
• [ ] 键盘导航时焦点可见
• [ ] 尊重 prefers-reduced-motion
• [ ] 响应式断点：375px、768px、1024px、1440px