UI_SPEC

Category: 13. Social Impact / Civic
Section: Phase 3: Execution & Quality

10. UI_SPEC.md

Purpose: To define frontend design focused on inclusion and accessibility.

Act as a senior UI/UX designer specializing in inclusive design.
Using the PRD, Architecture, and Accessibility Spec below, create a UI Specification document for a social impact hackathon project.

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

Provide:
1. Design system (Colors, typography, spacing)
2. Inclusive design patterns (Simple navigation, Clear language, Visual cues)
3. Component hierarchy
4. Screen-by-screen breakdown (Onboarding, Core feature, Help, Settings)
5. Low-bandwidth design (Minimal images, Fast loading)
6. Loading states
7. Error states (Simple, actionable errors)
8. Empty states
9. Multilingual and localization design
10. Responsive design guidelines (Mobile-first for low-end devices)
11. Accessibility considerations (WCAG 2.1 AA)

Keep the UI simple, clean, and accessible for a 24-48 hour hackathon.
Focus on demonstrating the core beneficiary journey.
Design for the lowest common denominator (low-end device, slow network, low literacy).