| # Design Guidelines: Family Advocacy AI Platform | |
| ## Design Approach | |
| **Reference-Based Approach**: Drawing inspiration from legal tech platforms (LegalZoom, Clio) and document-focused applications (Notion, Dropbox Paper) while maintaining accessibility standards from government service portals. | |
| **Core Principle**: Create a professional, trustworthy interface that reduces cognitive load for stressed parents while maintaining legal credibility and clarity. | |
| --- | |
| ## Typography System | |
| **Font Families**: | |
| - Primary: Inter (headings, UI elements) - clean, professional, excellent readability | |
| - Secondary: System UI (body text, legal content) - optimal reading performance | |
| **Hierarchy**: | |
| - Page Titles: text-4xl font-bold (36px) | |
| - Section Headers: text-2xl font-semibold (24px) | |
| - Subsections: text-xl font-medium (20px) | |
| - Body Text: text-base (16px) - generous line-height (1.7) for legal content | |
| - Legal Citations: text-sm font-mono (13px) for statute references | |
| - Helper Text: text-sm opacity-70 (14px) | |
| --- | |
| ## Layout System | |
| **Spacing Primitives**: Use Tailwind units of 3, 4, 6, 8, 12, 16 for consistent rhythm | |
| - Component padding: p-6 to p-8 | |
| - Section spacing: space-y-8 to space-y-12 | |
| - Card gaps: gap-6 | |
| - Form field spacing: space-y-4 | |
| **Grid Structure**: | |
| - Max container width: max-w-7xl | |
| - Dashboard: 12-column grid with 3-column sidebar (fixed navigation) + 9-column main content | |
| - Two-column layouts for document viewer: 5-column document preview + 7-column AI analysis | |
| - Single column for forms: max-w-2xl centered | |
| --- | |
| ## Component Library | |
| ### Navigation | |
| - **Sidebar Navigation** (Desktop): Fixed left sidebar with clear iconography | |
| - Dashboard, Upload Documents, Case Analysis, Legal Resources, State Info | |
| - Progress indicator showing case completion status | |
| - Quick access to recently analyzed documents | |
| - **Mobile Navigation**: Bottom tab bar with 4 primary actions | |
| ### Document Management | |
| - **Upload Zone**: Large, prominent drag-and-drop area with clear file type indicators (PDF, DOC, DOCX icons) | |
| - Visual feedback on hover and during drag | |
| - File list showing: filename, type, upload date, analysis status | |
| - Batch actions: analyze selected, delete, download | |
| - **Document Viewer**: Split-pane interface | |
| - Left: PDF/document preview with zoom controls | |
| - Right: AI analysis panel with collapsible sections | |
| ### Forms & Inputs | |
| - **State Selection**: Prominent dropdown/autocomplete at onboarding | |
| - Include state abbreviation + full name | |
| - Confirmation modal showing selected jurisdiction | |
| - **Text Inputs**: Generous height (h-12), clear labels above, helper text below | |
| - **File Uploads**: Button + drag-drop zone combo with progress bars | |
| - **Search**: Persistent search bar for legal resources with instant results | |
| ### Data Display | |
| - **Case Report Cards**: Elevated cards (shadow-md) with: | |
| - Header: Case ID, date, status badge | |
| - Summary stats: Documents analyzed, violations found, recommendations | |
| - Primary action button | |
| - **Legal Citation Blocks**: Monospace background panel with statute references | |
| - Include copy-to-clipboard functionality | |
| - **Timeline View**: Vertical timeline showing case progression, key dates, and required actions | |
| ### AI Analysis Output | |
| - **Violation Alerts**: Warning-style cards with severity indicators (critical/moderate/minor) | |
| - **Recommendation Sections**: Collapsible accordions organized by topic: | |
| - Visitation Rights Analysis | |
| - Removal Procedure Review | |
| - Family Reunification Strategies | |
| - Long-term Impact Assessment | |
| - **Evidence Builder**: Tabbed interface showing supporting research, legal precedents, and documentation gaps | |
| ### Modals & Overlays | |
| - **Confirmation Dialogs**: Centered modals for critical actions (delete documents, submit reports) | |
| - **Onboarding Flow**: Multi-step modal for state selection and case setup | |
| - **Document Preview**: Full-screen overlay with semi-transparent backdrop | |
| --- | |
| ## Interactive Patterns | |
| ### Feedback & Status | |
| - **Upload Progress**: Linear progress bars with percentage | |
| - **Analysis Status**: | |
| - Processing: Animated pulse indicator | |
| - Complete: Success checkmark with timestamp | |
| - Error: Clear error message with retry option | |
| - **Loading States**: Skeleton screens for AI analysis generation | |
| ### Accessibility Features | |
| - All interactive elements minimum 44px touch target | |
| - Form labels always visible (no placeholder-only inputs) | |
| - Skip navigation link for keyboard users | |
| - ARIA labels for icon-only buttons | |
| - High contrast mode support | |
| - Clear focus indicators (ring-2 ring-offset-2) | |
| --- | |
| ## Page-Specific Layouts | |
| ### Dashboard Home | |
| - Welcome header with user's case summary | |
| - 3-column card grid: Documents Uploaded, Violations Identified, Actions Required | |
| - Recent Activity feed | |
| - Quick action buttons: Upload Document, View Full Report, Legal Resources | |
| ### Document Analysis Page | |
| - Breadcrumb navigation | |
| - Document metadata header | |
| - Split view (as described in Components) | |
| - Floating action button for "Generate Full Report" | |
| ### Legal Resources Library | |
| - Filterable card grid by: | |
| - Document type (statutes, case law, research) | |
| - Topic (visitation, removal, reunification) | |
| - State jurisdiction | |
| - Search with autocomplete | |
| - Bookmark functionality | |
| ### Case Report View | |
| - Printable layout with formal structure | |
| - Executive Summary section | |
| - Expandable detailed findings | |
| - Export options (PDF, Word) | |
| --- | |
| ## Images | |
| **Hero Image**: Not applicable for this web application - focus on functional dashboard layout rather than marketing hero | |
| **Iconography**: | |
| - Document type icons (PDF, DOC, DOCX) in upload interface | |
| - Status icons (processing, complete, warning, error) | |
| - Navigation icons (dashboard, upload, analysis, resources) | |
| - Use Heroicons library for consistent style | |
| **Illustrations**: Consider supportive, empathetic illustrations for: | |
| - Empty states ("No documents uploaded yet") | |
| - Onboarding screens (welcoming, not clinical) | |
| - Error states (reassuring, not alarming) | |
| --- | |
| ## Emotional Design Considerations | |
| Given the sensitive nature of child protection cases: | |
| - Avoid red/alarm colors for standard UI elements | |
| - Use reassuring, professional tones in microcopy | |
| - Provide clear next steps and guidance throughout | |
| - Include helpful tooltips explaining legal terminology | |
| - Progress indicators to show users they're making headway |