UI_SPEC

Category: 07. IoT / Hardware / Robotics
Section: Phase 3: Execution & Quality

10. UI_SPEC.md

Purpose: To define the dashboard or mobile app design, device status, and user flow.

Act as a senior UI/UX designer specializing in IoT dashboards.
Using the PRD and System Architecture below, create a UI Specification document for an IoT hackathon project.

PRD: [PASTE PRD]
ARCHITECTURE: [PASTE SYSTEM_ARCHITECTURE]

Provide:
1. Design system (Colors, typography, spacing)
2. Component hierarchy (Device status card, Sensor readings, Charts, Alerts)
3. Screen-by-screen breakdown (Dashboard, Device Detail, Alerts, Settings)
4. Real-time data display (Live sensor values, Gauges, Charts)
5. Device connection states (Online, Offline, Connecting)
6. Loading states (Skeletons, spinners)
7. Error states (Device offline, Sensor failure)
8. Empty states (No data yet)
9. Responsive design guidelines (Mobile and Desktop)
10. Accessibility considerations (Contrast, keyboard navigation)

Keep the UI simple, clean, and realistic for a 24-48 hour hackathon.
Focus on demonstrating the core device interaction and data flow.