设计系统：物业报修巡检

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

本场景下进行 AI 辅助开发时，可将下文设计系统作为 Skill 引用，使 AI 产出更符合物业/报修场景气质的界面与交互。

---

English (Original)

Design System: Property Maintenance & Inspection

Pattern

• Name: Hero-Centric + Feature-Rich
• CTA Placement: Above fold
• Sections: Hero > Features > CTA

Style

• Name: Glassmorphism
• Keywords: Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer
• Best For: Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation
• Performance: ⚠ Good | Accessibility: ⚠ Ensure 4.5:1

Colors

Role	Hex
Primary	#0F766E
Secondary	#14B8A6
CTA	#0369A1
Background	#F0FDFA
Text	#134E4A

Notes: Trust teal + professional blue

Typography

• Heading: Cinzel
• Body: Josefin Sans
• Mood: real estate, luxury, elegant, sophisticated, property, premium
• Best For: Real estate, luxury properties, architecture, interior design
• Google Fonts: https://fonts.google.com/share?selection.family=Cinzel:wght@400;500;600;700|Josefin+Sans:wght@300;400;500;600;700
• CSS Import:

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

Key Effects

Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth

Avoid (Anti-patterns)

• Poor photos
• No virtual tours

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）

• 名称： 英雄区主导 + 功能丰富（Hero-Centric + Feature-Rich）
• 主行动按钮位置： 首屏可见
• 区块顺序： Hero > 功能展示 > CTA

风格

• 名称： 玻璃拟态（Glassmorphism）
• 关键词： 毛玻璃、透明、背景模糊、分层、通透背景、光源感、景深、多层
• 适用： 现代 SaaS、财务看板、高端企业、生活类应用、弹层、导航
• 性能： ⚠ 良好 | 无障碍： ⚠ 确保对比度 4.5:1

配色

角色	色值
主色	#0F766E
辅色	#14B8A6
行动按钮	#0369A1
背景	#F0FDFA
正文	#134E4A

说明：信任青 + 专业蓝

字体

• 标题： Cinzel
• 正文： Josefin Sans
• 气质： 地产、高端、优雅、精致、物业、品质感
• 适用： 地产、高端物业、建筑、室内设计
• Google Fonts： 见上方英文版链接
• CSS 引入： 见上方英文版代码块

关键效果

背景模糊（10–20px）、细边框（1px solid rgba white 0.2）、光感、层级景深

避免（反模式）

• 低质量照片
• 无虚拟导览/实景

交付前检查

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