{"roots":["34:2649"],"nodeById":{"34:2776":{"type":"FRAME","id":"34:2776","name":"screens","absoluteBoundingBox":{"x":54280.0,"y":575.932006835938,"width":376.0,"height":92344.0},"isolatedAbsoluteRenderBounds":{"x":54280.0,"y":575.932006835938,"width":376.0,"height":92344.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,475.932037353516]],"size":{"x":376.0,"y":92344.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":16.0,"paddingRight":16.0,"paddingBottom":16.0,"paddingLeft":16.0,"layoutMode":"VERTICAL","counterAxisAlignItems":"CENTER","counterAxisSizingMode":"FIXED","children":["34:2777"]},"34:2777":{"type":"FRAME","id":"34:2777","name":"introduction","absoluteBoundingBox":{"x":54296.0,"y":591.932006835938,"width":344.0,"height":92312.0},"isolatedAbsoluteRenderBounds":{"x":54296.0,"y":591.932006835938,"width":344.0,"height":92312.0},"relativeTransform":[[1.0,0.0,16.0],[0.0,1.0,16.0]],"size":{"x":344.0,"y":92312.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","maxWidth":1920.0,"strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"VERTICAL","itemSpacing":16.0,"counterAxisSizingMode":"FIXED","children":["34:2778","78:20347","78:20371","78:20394","78:20417","78:20577"]},"78:20419":{"type":"TEXT","id":"78:20419","name":"# Augur Personas — Index ## Overview Augur serves six distinct user types across government, law enforcement, retail, and commercial sectors. Each persona has different goals, workflows, and needs. Understanding these personas guides feature prioritisation, UX decisions, and copy tone. --- ## Persona Comparison Matrix | Persona | Primary goal | Time pressure | Technical skill | Device | Key feature | |---|---|---|---|---|---| | **Government** | Monitor agents | High | High | Desktop | Save filters, audit trail | | **Law enforcement** | Build evidence | Very high | Medium | Desktop/Mobile | Photos, timeline, export | | **Council planner** | Identify patterns | Low | Medium | Desktop | Charts, reports, trends | | **Commercial owner** | Operational overview | Medium | Low | Desktop/Tablet | Dashboard, alerts, summary | | **Retailer** | Prevent theft | Medium | Low | Desktop/Tablet | Alerts, repeat offenders, mobile | | **Security operator** | Respond to incidents | Very high | Low-medium | Mobile/Tablet | Alerts, location, confirmation | --- ## Design Decisions by Persona ### Information Architecture **Government & Law enforcement** prioritise: - Timeline and historical context (drill-down from event → details → related) - People and places (find person, then events, then timeline) - Export and integration (share findings, integrate with external tools) **Council planners & owners** prioritise: - Aggregated metrics and trends (summary first, detail optional) - Comparative analysis (year-over-year, location-to-location) - Export for reports and presentations **Retailers & security operators** prioritise: - Alerts and notifications (passive receipt of urgent information) - Mobile access (not always at desk) - Minimal friction (quick lookup, confirm, act) ### Interaction Patterns **Government & law enforcement:** - Keyboard shortcuts (fast users) - Saved filters and workspaces (reuse across shifts) - Bulk export and reporting **Council & owners:** - Prebuilt reports and dashboards - Comparative date/time pickers - Visual summaries before detail **Retailers & operators:** - Push notifications and alerts - One-click actions (confirm, share, log) - Minimal navigation depth ### Copy & Tone **Government & law enforcement:** - Direct and precise (authoritative, no softening) - Technical vocabulary acceptable (they know the jargon) - Procedural language (actionable instructions) **Council & owners:** - Clear and jargon-free (may not know public safety terminology) - Contextual explanation (what this metric means, why it matters) - Business-focused language **Retailers & operators:** - Urgent but calm (no alarmism, but clear on severity) - Action-oriented (what to do, not why) - Short, scannable copy --- ## Feature Prioritisation by Persona ### Must-have (all personas) - Search/filter by location and date range - Detail panel for persons and events - Photo/avatar visibility - Export to PDF/CSV ### High-value (government, law enforcement) - Save and name filters - Timeline view with granular timestamps - Related data drilling (event → people → timeline) - Audit logging - Full historical data access ### High-value (council, commercial owner) - Prebuilt report templates - Comparative date filters - Trend charts and visualisations - Email scheduling for reports ### High-value (retailers, security operators) - Real-time notifications and alerts - Mobile app with offline capability - Quick incident logging (forms with presets) - Location map with heatmap view - Integration with mobile devices (tablet, smartphone) --- ## Accessibility & Inclusion All personas should be able to use Augur with: - Keyboard navigation (for all, especially desktop-heavy users) - Screen reader support (government analysts using accessibility features) - Mobile responsiveness (operators in field) - Low-tech fallbacks (alert SMS if app unavailable) --- # Augur Persona — Government Analyst **Role:** MI5/MI6 intelligence analyst **Goal:** Find and monitor hostile foreign agents operating in the UK **Frequency:** Daily, shift-based (8–12 hour blocks) ### Profile - **Age:** 28–45 - **Technical skill:** High (comfortable with complex systems, data tools) - **Context:** Secure, government facility with dedicated workstations - **Devices:** Desktop/laptop only; no mobile access - **Time pressure:** High (real-time monitoring, time-sensitive intelligence) ### Needs - **Speed:** Locate persons of interest within seconds - **Precision:** Confirm identity with high confidence (facial recognition, metadata matching) - **Historical context:** Access to full timeline of sightings and related incidents - **Integration:** Cross-reference with external databases and intelligence feeds - **Audit trail:** Detailed logs for compliance and legal proceedings ### Pain points - Current systems are fragmented (multiple tools for tracking, mapping, reporting) - Slow handoffs between shifts lose critical context - Geographic and temporal filtering is tedious (manual entry, limited saved filters) - Cannot quickly correlate multiple sightings across locations ### How they use Augur 1. **Morning briefing:** Filter by location (major airport, central London) and time range (last 24 hours) 2. **Active monitoring:** Stack \"Events\" and \"People\" panels side-by-side; watch notifications for flagged individuals 3. **Investigation:** Drill into specific event; review timeline and related people; export data for report 4. **Handoff:** Screenshot or share filtered view with incoming analyst (context preservation critical) ### Design implications - **Save & share filters:** Allow analysts to name and save filter combinations (Where + When + flagged status) - **Keyboard-heavy:** Frequent users need quick keyboard shortcuts for common tasks - **Export options:** CSV, PDF for reports and compliance - **Audit annotations:** Allow analysts to add notes to specific sightings for context ---

# Augur Persona — Law Enforcement Officer **Role:** Investigator or counter-terrorism police **Goal:** Identify and locate persons of interest; build case evidence **Frequency:** Variable (reactive to incidents, proactive investigation cycles) ### Profile - **Age:** 30–50 - **Technical skill:** Medium (comfortable with common tools; less patience for complexity) - **Context:** Police station, patrol vehicle, incident scene - **Devices:** Desktop, laptop, occasionally tablet - **Time pressure:** Very high (active incidents, rapidly changing situations) ### Needs - **Immediate answers:** \"Where was this person in the last hour?\" - **Visual confirmation:** Photo, video, location map (not just data tables) - **Actionable intelligence:** Predict next location or movement pattern - **Evidence capture:** Screenshots, video clips for case files - **Team coordination:** Share findings with other officers or teams ### Pain points - Fragmented tools make scene response slow (check map, then check database, then check timeline) - Cannot quickly verify identity from CCTV feeds - Difficulty assessing threat level or modus operandi from raw data - Manual cross-referencing between locations is error-prone ### How they use Augur 1. **Incident response:** Open map; filter by location (current incident scene) and recent time (last 2 hours) 2. **Person lookup:** Click on flagged individual to open detail panel; review photo, timeline, related events 3. **Pattern spotting:** View \"Data\" (behavioral patterns, frequency) to understand repeat offender habits 4. **Evidence collection:** Screenshot detail panel and timeline for case file 5. **Team briefing:** Share annotated view with other officers via secure link ### Design implications - **Large avatars and photos:** Visual confirmation is critical; images should be prominent - **Map integration:** Spatial context (where sightings occurred) matters more than abstract data - **Quick summaries:** AI-written incident summaries to provide instant context - **Mobile-first:** Design panels to work well on tablet and small screens - **Offline mode:** Critical workflows should work without network (for vehicle/scene use) --- 
# Augur Persona — Council Planner **Role:** Urban planner, public safety coordinator **Goal:** Identify behavioral patterns and crime hotspots; inform policy and infrastructure improvements **Frequency:** Weekly or monthly (strategic planning cycles, not real-time) ### Profile - **Age:** 35–55 - **Technical skill:** Low-to-medium (comfortable with spreadsheets and dashboards; less with complex tools) - **Context:** Office desk, occasional council meetings - **Devices:** Desktop/laptop; rare mobile use - **Time pressure:** Low (can spend time exploring data, generating reports) ### Needs - **Trends & patterns:** \"Where are theft hotspots?\", \"When do incidents cluster?\" - **Comparative analysis:** Year-over-year, region-to-region, to justify budget/policy changes - **Exportable reports:** Data and visualisations for presentations and board documents - **Actionable insights:** Not raw data, but curated analysis with recommendations ### Pain points - Difficult to answer \"what changed?\" questions without historical data - Cannot easily generate heatmaps or trend charts for reports - Manual data aggregation from multiple sources is time-consuming - Lacks statistical context (is this trend significant or noise?) ### How they use Augur 1. **Monthly review:** Open \"Data\" panel; filter by location (district/borough) and time range (last 30 days) 2. **Pattern exploration:** View charts for theft, anti-social behaviour, capacity trends 3. **Year-over-year comparison:** Change date filter to same month last year; compare metrics 4. **Report generation:** Export data and charts to PowerPoint or PDF for council presentation 5. **Recommendation:** Identify high-risk areas or times; suggest increased patrols or infrastructure changes ### Design implications - **Export to charts:** Make it easy to grab charts for presentations (no re-creation in Excel) - **Comparative filters:** Quick way to compare two time periods side-by-side - **Summary statistics:** Show totals, averages, % change to highlight trends - **Natural language:** Avoid jargon; use plain English summaries - **Prebuilt reports:** \"Monthly incident summary\", \"Hotspot analysis\" — reduce manual work --- # Augur Persona — Commercial Space Owner **Role:** Airport, shopping centre, stadium, or venue manager **Goal:** Ensure safety and security of premises; prevent theft, reduce incidents **Frequency:** Daily or weekly (operational oversight) ### Profile - **Age:** 35–60 - **Technical skill:** Low (comfort with basic software; prefers simplicity over power) - **Context:** Manager's office or security control room - **Devices:** Desktop/laptop; occasionally tablet - **Time pressure:** Medium (reactive to incidents; proactive reviews weekly) ### Needs - **Incident overview:** \"What happened in my venue today?\", \"Are there patterns I should know about?\" - **Staff briefing:** Prepare daily or weekly briefing for security team - **Trend reporting:** Show board/stakeholders that safety is improving (or identify risk areas) - **Alert integration:** Receive notifications of serious incidents in real-time ### Pain points - Cannot quickly identify if incidents are isolated or part of a pattern - Lacks visibility into peak risk times (when to increase staffing) - Manual incident reports from security team are fragmented and slow - Difficult to demonstrate ROI of security improvements to leadership ### How they use Augur 1. **Daily check-in:** Open map; filter by location (venue) and today's date 2. **Incident review:** Click on incident to see details (what, where, when, involved parties) 3. **Weekly briefing:** Export summary of incidents and trends for security team meeting 4. **Quarterly report:** Generate 3-month report of incidents by type and location for board 5. **Alert setup:** Configure notifications for serious incidents (flagged individuals, capacity issues) ### Design implications - **Simplified interface:** Reduce options; show only relevant data for venue operators - **Pre-filtered views:** Default to \"my venue\" and \"today\" — operators shouldn't have to set filters - **Incident summary cards:** Large, visual cards with key facts (what, where, when, severity) - **Dashboard mode:** At-a-glance overview without drilling in (suitable for control room display) - **Email/SMS alerts:** Notify manager of serious incidents via push/email --- # Augur Persona — Retailer **Role:** Retail manager (supermarket, department store, independent shop) **Goal:** Prevent theft and loss; improve store operations; train staff on safety **Frequency:** Daily to weekly (depends on store size and incident frequency) ### Profile - **Age:** 28–50 - **Technical skill:** Low (uses POS and inventory systems; less comfortable with data tools) - **Context:** Store office or back-of-house area - **Devices:** Desktop/laptop; increasingly tablet (during floor rounds) - **Time pressure:** Medium (reactive to theft incidents; proactive reviews during quiet periods) ### Needs - **Rapid response:** Identify shoplifter or employee theft in real-time - **Loss visibility:** \"How much loss are we experiencing? In which department?\" - **Staff training:** Use incident data to train staff on prevention and procedures - **Evidence capture:** Collect footage/data for loss prevention or legal proceedings ### Pain points - Manual incident reporting from floor staff (time-consuming, incomplete) - Difficult to see patterns (same offender, same time of day, same location in store) - Cannot correlate \"suspicious activity\" alerts with actual losses - Lack of visibility into employee-related incidents ### How they use Augur 1. **Incident response:** Receive alert of suspicious activity in dairy aisle (real-time notification) 2. **Quick lookup:** Identify repeat offender; check history (how many times? what items?) 3. **Shift review:** End of day, check incidents during shift; brief team on patterns 4. **Training:** Use incident timeline to train staff on prevention tactics for high-risk items 5. **Loss analysis:** Weekly review of theft incidents by department/type to identify trends ### Design implications - **Simple alerts:** Notify store managers via SMS or push of incidents (no need to log in) - **Repeat offender flag:** Highlight if same person has multiple incidents - **Item-level data:** Connect incidents to specific products/departments (requires POS integration) - **Playback mode:** Show timeline of activity before/after incident (useful for training) - **Mobile-first:** Managers check app from floor or office (not always at desk) --- # Augur Persona — Security Operator **Role:** On-site security in commercial spaces (supermarket, independent shop, mall, cinema) **Goal:** Respond to incidents quickly; identify threats; protect staff and customers **Frequency:** Shift-based (continuous presence during operating hours) ### Profile - **Age:** 22–45 - **Technical skill:** Low-to-medium (comfortable with CCTV systems; less with data tools) - **Context:** Security control room or mobile (patrol, incident scene) - **Devices:** Desktop (control room), tablet (mobile patrols), occasionally smartphone - **Time pressure:** Very high (active incidents demand immediate action) ### Needs - **Instant alerts:** Notification of flagged individuals or unusual activity - **Visual confirmation:** Live camera feed or photos to verify threat level - **Location intelligence:** Where did the person go? Which exit will they use? - **Backup coordination:** Quick way to request additional security or police - **Incident log:** Record what happened for post-incident review ### Pain points - Fragmented tools (CCTV system, incident log, radio/comms separate) - Cannot quickly pull historical context (is this person a repeat problem?) - Difficulty communicating precise location/identity to backup teams - Manual incident reporting after the fact (time-consuming, errors) ### How they use Augur 1. **Real-time monitoring:** Control room displays map with heat map of recent activity 2. **Alert notification:** Receive alert of flagged individual spotted in store; get photo and location 3. **Mobile response:** Open app on tablet; see current location and exit points; navigate to intercept 4. **Backup call:** Take screenshot of person's identity and location; share with other officers via secure message 5. **Post-incident:** Log incident in app (what happened, who involved, actions taken) for manager review ### Design implications - **Alert-centric design:** Notifications are primary interaction (not searching) - **Control room display:** Map mode suitable for persistent wall display (heatmap, real-time activity) - **Mobile responsiveness:** Works equally well on 7\" tablet and 6\" smartphone - **Voice-friendly:** Support dictation for incident logging (hands-free during active response) - **Offline resilience:** Core functions work without network (video playback, past data) - **Minimal friction:** Fewer clicks to log incident or alert backup --- See accessibility.md for full WCAG 2.1 AA compliance details.","absoluteBoundingBox":{"x":54316.0,"y":56527.93359375,"width":304.0,"height":20064.0},"isolatedAbsoluteRenderBounds":{"x":54316.3203125,"y":56534.0546875,"width":296.7578125,"height":20051.0703125},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,128.0]],"size":{"x":304.0,"y":20064.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.945098042488098,"g":0.91372549533844,"b":0.850980401039124,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"# Augur Personas — Index\n\n## Overview\n\nAugur serves six distinct user types across government, law enforcement, retail, and commercial sectors. Each persona has different goals, workflows, and needs. Understanding these personas guides feature prioritisation, UX decisions, and copy tone.\n\n---\n\n\n## Persona Comparison Matrix\n\n| Persona | Primary goal | Time pressure | Technical skill | Device | Key feature |\n|---|---|---|---|---|---|\n| **Government** | Monitor agents | High | High | Desktop | Save filters, audit trail |\n| **Law enforcement** | Build evidence | Very high | Medium | Desktop/Mobile | Photos, timeline, export |\n| **Council planner** | Identify patterns | Low | Medium | Desktop | Charts, reports, trends |\n| **Commercial owner** | Operational overview | Medium | Low | Desktop/Tablet | Dashboard, alerts, summary |\n| **Retailer** | Prevent theft | Medium | Low | Desktop/Tablet | Alerts, repeat offenders, mobile |\n| **Security operator** | Respond to incidents | Very high | Low-medium | Mobile/Tablet | Alerts, location, confirmation |\n\n---\n\n## Design Decisions by Persona\n\n### Information Architecture\n\n**Government & Law enforcement** prioritise:\n- Timeline and historical context (drill-down from event → details → related)\n- People and places (find person, then events, then timeline)\n- Export and integration (share findings, integrate with external tools)\n\n**Council planners & owners** prioritise:\n- Aggregated metrics and trends (summary first, detail optional)\n- Comparative analysis (year-over-year, location-to-location)\n- Export for reports and presentations\n\n**Retailers & security operators** prioritise:\n- Alerts and notifications (passive receipt of urgent information)\n- Mobile access (not always at desk)\n- Minimal friction (quick lookup, confirm, act)\n\n### Interaction Patterns\n\n**Government & law enforcement:**\n- Keyboard shortcuts (fast users)\n- Saved filters and workspaces (reuse across shifts)\n- Bulk export and reporting\n\n**Council & owners:**\n- Prebuilt reports and dashboards\n- Comparative date/time pickers\n- Visual summaries before detail\n\n**Retailers & operators:**\n- Push notifications and alerts\n- One-click actions (confirm, share, log)\n- Minimal navigation depth\n\n### Copy & Tone\n\n**Government & law enforcement:**\n- Direct and precise (authoritative, no softening)\n- Technical vocabulary acceptable (they know the jargon)\n- Procedural language (actionable instructions)\n\n**Council & owners:**\n- Clear and jargon-free (may not know public safety terminology)\n- Contextual explanation (what this metric means, why it matters)\n- Business-focused language\n\n**Retailers & operators:**\n- Urgent but calm (no alarmism, but clear on severity)\n- Action-oriented (what to do, not why)\n- Short, scannable copy\n\n---\n\n## Feature Prioritisation by Persona\n\n### Must-have (all personas)\n- Search/filter by location and date range\n- Detail panel for persons and events\n- Photo/avatar visibility\n- Export to PDF/CSV\n\n### High-value (government, law enforcement)\n- Save and name filters\n- Timeline view with granular timestamps\n- Related data drilling (event → people → timeline)\n- Audit logging\n- Full historical data access\n\n### High-value (council, commercial owner)\n- Prebuilt report templates\n- Comparative date filters\n- Trend charts and visualisations\n- Email scheduling for reports\n\n### High-value (retailers, security operators)\n- Real-time notifications and alerts\n- Mobile app with offline capability\n- Quick incident logging (forms with presets)\n- Location map with heatmap view\n- Integration with mobile devices (tablet, smartphone)\n\n---\n\n## Accessibility & Inclusion\n\nAll personas should be able to use Augur with:\n- Keyboard navigation (for all, especially desktop-heavy users)\n- Screen reader support (government analysts using accessibility features)\n- Mobile responsiveness (operators in field)\n- Low-tech fallbacks (alert SMS if app unavailable)\n\n---\n\n# Augur Persona — Government Analyst\n\n**Role:** MI5/MI6 intelligence analyst \n**Goal:** Find and monitor hostile foreign agents operating in the UK \n**Frequency:** Daily, shift-based (8–12 hour blocks)\n\n### Profile\n\n- **Age:** 28–45\n- **Technical skill:** High (comfortable with complex systems, data tools)\n- **Context:** Secure, government facility with dedicated workstations\n- **Devices:** Desktop/laptop only; no mobile access\n- **Time pressure:** High (real-time monitoring, time-sensitive intelligence)\n\n### Needs\n\n- **Speed:** Locate persons of interest within seconds\n- **Precision:** Confirm identity with high confidence (facial recognition, metadata matching)\n- **Historical context:** Access to full timeline of sightings and related incidents\n- **Integration:** Cross-reference with external databases and intelligence feeds\n- **Audit trail:** Detailed logs for compliance and legal proceedings\n\n### Pain points\n\n- Current systems are fragmented (multiple tools for tracking, mapping, reporting)\n- Slow handoffs between shifts lose critical context\n- Geographic and temporal filtering is tedious (manual entry, limited saved filters)\n- Cannot quickly correlate multiple sightings across locations\n\n### How they use Augur\n\n1. **Morning briefing:** Filter by location (major airport, central London) and time range (last 24 hours)\n2. **Active monitoring:** Stack \"Events\" and \"People\" panels side-by-side; watch notifications for flagged individuals\n3. **Investigation:** Drill into specific event; review timeline and related people; export data for report\n4. **Handoff:** Screenshot or share filtered view with incoming analyst (context preservation critical)\n\n### Design implications\n\n- **Save & share filters:** Allow analysts to name and save filter combinations (Where + When + flagged status)\n- **Keyboard-heavy:** Frequent users need quick keyboard shortcuts for common tasks\n- **Export options:** CSV, PDF for reports and compliance\n- **Audit annotations:** Allow analysts to add notes to specific sightings for context\n\n---

# Augur Persona — Law Enforcement Officer\n\n**Role:** Investigator or counter-terrorism police \n**Goal:** Identify and locate persons of interest; build case evidence \n**Frequency:** Variable (reactive to incidents, proactive investigation cycles)\n\n### Profile\n\n- **Age:** 30–50\n- **Technical skill:** Medium (comfortable with common tools; less patience for complexity)\n- **Context:** Police station, patrol vehicle, incident scene\n- **Devices:** Desktop, laptop, occasionally tablet\n- **Time pressure:** Very high (active incidents, rapidly changing situations)\n\n### Needs\n\n- **Immediate answers:** \"Where was this person in the last hour?\"\n- **Visual confirmation:** Photo, video, location map (not just data tables)\n- **Actionable intelligence:** Predict next location or movement pattern\n- **Evidence capture:** Screenshots, video clips for case files\n- **Team coordination:** Share findings with other officers or teams\n\n### Pain points\n\n- Fragmented tools make scene response slow (check map, then check database, then check timeline)\n- Cannot quickly verify identity from CCTV feeds\n- Difficulty assessing threat level or modus operandi from raw data\n- Manual cross-referencing between locations is error-prone\n\n### How they use Augur\n\n1. **Incident response:** Open map; filter by location (current incident scene) and recent time (last 2 hours)\n2. **Person lookup:** Click on flagged individual to open detail panel; review photo, timeline, related events\n3. **Pattern spotting:** View \"Data\" (behavioral patterns, frequency) to understand repeat offender habits\n4. **Evidence collection:** Screenshot detail panel and timeline for case file\n5. **Team briefing:** Share annotated view with other officers via secure link\n\n### Design implications\n\n- **Large avatars and photos:** Visual confirmation is critical; images should be prominent\n- **Map integration:** Spatial context (where sightings occurred) matters more than abstract data\n- **Quick summaries:** AI-written incident summaries to provide instant context\n- **Mobile-first:** Design panels to work well on tablet and small screens\n- **Offline mode:** Critical workflows should work without network (for vehicle/scene use)\n\n---\n
# Augur Persona — Council Planner\n\n**Role:** Urban planner, public safety coordinator \n**Goal:** Identify behavioral patterns and crime hotspots; inform policy and infrastructure improvements \n**Frequency:** Weekly or monthly (strategic planning cycles, not real-time)\n\n### Profile\n\n- **Age:** 35–55\n- **Technical skill:** Low-to-medium (comfortable with spreadsheets and dashboards; less with complex tools)\n- **Context:** Office desk, occasional council meetings\n- **Devices:** Desktop/laptop; rare mobile use\n- **Time pressure:** Low (can spend time exploring data, generating reports)\n\n### Needs\n\n- **Trends & patterns:** \"Where are theft hotspots?\", \"When do incidents cluster?\"\n- **Comparative analysis:** Year-over-year, region-to-region, to justify budget/policy changes\n- **Exportable reports:** Data and visualisations for presentations and board documents\n- **Actionable insights:** Not raw data, but curated analysis with recommendations\n\n### Pain points\n\n- Difficult to answer \"what changed?\" questions without historical data\n- Cannot easily generate heatmaps or trend charts for reports\n- Manual data aggregation from multiple sources is time-consuming\n- Lacks statistical context (is this trend significant or noise?)\n\n### How they use Augur\n\n1. **Monthly review:** Open \"Data\" panel; filter by location (district/borough) and time range (last 30 days)\n2. **Pattern exploration:** View charts for theft, anti-social behaviour, capacity trends\n3. **Year-over-year comparison:** Change date filter to same month last year; compare metrics\n4. **Report generation:** Export data and charts to PowerPoint or PDF for council presentation\n5. **Recommendation:** Identify high-risk areas or times; suggest increased patrols or infrastructure changes\n\n### Design implications\n\n- **Export to charts:** Make it easy to grab charts for presentations (no re-creation in Excel)\n- **Comparative filters:** Quick way to compare two time periods side-by-side\n- **Summary statistics:** Show totals, averages, % change to highlight trends\n- **Natural language:** Avoid jargon; use plain English summaries\n- **Prebuilt reports:** \"Monthly incident summary\", \"Hotspot analysis\" — reduce manual work\n\n---\n\n# Augur Persona — Commercial Space Owner\n\n**Role:** Airport, shopping centre, stadium, or venue manager \n**Goal:** Ensure safety and security of premises; prevent theft, reduce incidents \n**Frequency:** Daily or weekly (operational oversight)\n\n### Profile\n\n- **Age:** 35–60\n- **Technical skill:** Low (comfort with basic software; prefers simplicity over power)\n- **Context:** Manager's office or security control room\n- **Devices:** Desktop/laptop; occasionally tablet\n- **Time pressure:** Medium (reactive to incidents; proactive reviews weekly)\n\n### Needs\n\n- **Incident overview:** \"What happened in my venue today?\", \"Are there patterns I should know about?\"\n- **Staff briefing:** Prepare daily or weekly briefing for security team\n- **Trend reporting:** Show board/stakeholders that safety is improving (or identify risk areas)\n- **Alert integration:** Receive notifications of serious incidents in real-time\n\n### Pain points\n\n- Cannot quickly identify if incidents are isolated or part of a pattern\n- Lacks visibility into peak risk times (when to increase staffing)\n- Manual incident reports from security team are fragmented and slow\n- Difficult to demonstrate ROI of security improvements to leadership\n\n### How they use Augur\n\n1. **Daily check-in:** Open map; filter by location (venue) and today's date\n2. **Incident review:** Click on incident to see details (what, where, when, involved parties)\n3. **Weekly briefing:** Export summary of incidents and trends for security team meeting\n4. **Quarterly report:** Generate 3-month report of incidents by type and location for board\n5. **Alert setup:** Configure notifications for serious incidents (flagged individuals, capacity issues)\n\n### Design implications\n\n- **Simplified interface:** Reduce options; show only relevant data for venue operators\n- **Pre-filtered views:** Default to \"my venue\" and \"today\" — operators shouldn't have to set filters\n- **Incident summary cards:** Large, visual cards with key facts (what, where, when, severity)\n- **Dashboard mode:** At-a-glance overview without drilling in (suitable for control room display)\n- **Email/SMS alerts:** Notify manager of serious incidents via push/email\n\n---\n\n# Augur Persona — Retailer\n\n**Role:** Retail manager (supermarket, department store, independent shop) \n**Goal:** Prevent theft and loss; improve store operations; train staff on safety \n**Frequency:** Daily to weekly (depends on store size and incident frequency)\n\n### Profile\n\n- **Age:** 28–50\n- **Technical skill:** Low (uses POS and inventory systems; less comfortable with data tools)\n- **Context:** Store office or back-of-house area\n- **Devices:** Desktop/laptop; increasingly tablet (during floor rounds)\n- **Time pressure:** Medium (reactive to theft incidents; proactive reviews during quiet periods)\n\n### Needs\n\n- **Rapid response:** Identify shoplifter or employee theft in real-time\n- **Loss visibility:** \"How much loss are we experiencing? In which department?\"\n- **Staff training:** Use incident data to train staff on prevention and procedures\n- **Evidence capture:** Collect footage/data for loss prevention or legal proceedings\n\n### Pain points\n\n- Manual incident reporting from floor staff (time-consuming, incomplete)\n- Difficult to see patterns (same offender, same time of day, same location in store)\n- Cannot correlate \"suspicious activity\" alerts with actual losses\n- Lack of visibility into employee-related incidents\n\n### How they use Augur\n\n1. **Incident response:** Receive alert of suspicious activity in dairy aisle (real-time notification)\n2. **Quick lookup:** Identify repeat offender; check history (how many times? what items?)\n3. **Shift review:** End of day, check incidents during shift; brief team on patterns\n4. **Training:** Use incident timeline to train staff on prevention tactics for high-risk items\n5. **Loss analysis:** Weekly review of theft incidents by department/type to identify trends\n\n### Design implications\n\n- **Simple alerts:** Notify store managers via SMS or push of incidents (no need to log in)\n- **Repeat offender flag:** Highlight if same person has multiple incidents\n- **Item-level data:** Connect incidents to specific products/departments (requires POS integration)\n- **Playback mode:** Show timeline of activity before/after incident (useful for training)\n- **Mobile-first:** Managers check app from floor or office (not always at desk)\n\n---\n\n# Augur Persona — Security Operator\n\n**Role:** On-site security in commercial spaces (supermarket, independent shop, mall, cinema) \n**Goal:** Respond to incidents quickly; identify threats; protect staff and customers \n**Frequency:** Shift-based (continuous presence during operating hours)\n\n### Profile\n\n- **Age:** 22–45\n- **Technical skill:** Low-to-medium (comfortable with CCTV systems; less with data tools)\n- **Context:** Security control room or mobile (patrol, incident scene)\n- **Devices:** Desktop (control room), tablet (mobile patrols), occasionally smartphone\n- **Time pressure:** Very high (active incidents demand immediate action)\n\n### Needs\n\n- **Instant alerts:** Notification of flagged individuals or unusual activity\n- **Visual confirmation:** Live camera feed or photos to verify threat level\n- **Location intelligence:** Where did the person go? Which exit will they use?\n- **Backup coordination:** Quick way to request additional security or police\n- **Incident log:** Record what happened for post-incident review\n\n### Pain points\n\n- Fragmented tools (CCTV system, incident log, radio/comms separate)\n- Cannot quickly pull historical context (is this person a repeat problem?)\n- Difficulty communicating precise location/identity to backup teams\n- Manual incident reporting after the fact (time-consuming, errors)\n\n### How they use Augur\n\n1. **Real-time monitoring:** Control room displays map with heat map of recent activity\n2. **Alert notification:** Receive alert of flagged individual spotted in store; get photo and location\n3. **Mobile response:** Open app on tablet; see current location and exit points; navigate to intercept\n4. **Backup call:** Take screenshot of person's identity and location; share with other officers via secure message\n5. **Post-incident:** Log incident in app (what happened, who involved, actions taken) for manager review\n\n### Design implications\n\n- **Alert-centric design:** Notifications are primary interaction (not searching)\n- **Control room display:** Map mode suitable for persistent wall display (heatmap, real-time activity)\n- **Mobile responsiveness:** Works equally well on 7\" tablet and 6\" smartphone\n- **Voice-friendly:** Support dictation for incident logging (hands-free during active response)\n- **Offline resilience:** Core functions work without network (video playback, past data)\n- **Minimal friction:** Fewer clicks to log incident or alert backup\n\n---\n\nSee accessibility.md for full WCAG 2.1 AA compliance details.","lineIndentations":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"lineTypes":["NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE","NONE"],"listStartOffsets":[],"lineStyleOverrides":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"lineTextDirections":null,"textAutoResize":"HEIGHT","style":{"fontFamily":"Px Grotesk Mono","fontPostScriptName":"PxGroteskMono-Regular","fontStyle":"Regular","textAutoResize":"HEIGHT","fontVariantPosition":"NORMAL","fontSize":16.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":24.0,"lineHeightPercent":124.999992370605,"lineHeightPercentFontSize":150.0,"lineHeightUnit":"FONT_SIZE_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED"},"styleOverrideTable":{}},"78:20418":{"type":"TEXT","id":"78:20418","name":"PERSONAS.MD","absoluteBoundingBox":{"x":54316.0,"y":56455.93359375,"width":304.0,"height":48.0},"isolatedAbsoluteRenderBounds":{"x":54319.23046875,"y":56468.6953125,"width":213.80078125,"height":22.71875},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,56.0]],"size":{"x":304.0,"y":48.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.945098042488098,"g":0.91372549533844,"b":0.850980401039124,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"PERSONAS.MD","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"textAutoResize":"HEIGHT","style":{"fontFamily":"Px Grotesk Mono","fontPostScriptName":"PxGroteskMono-Regular","fontStyle":"Regular","textAutoResize":"HEIGHT","fontVariantPosition":"NORMAL","fontSize":32.0,"textAlignHorizontal":"LEFT","textAlignVertical":"TOP","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":48.0,"lineHeightPercent":124.999992370605,"lineHeightPercentFontSize":150.0,"lineHeightUnit":"FONT_SIZE_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED"},"styleOverrideTable":{}},"78:20396":{"type":"TEXT","id":"78:20396","name":"# Augur Patterns ## Overview Patterns describe recurring interaction flows, layout conventions, and compositional principles used across Augur. These patterns help maintain consistency and guide implementation of new screens. --- ## Layout Patterns ### Panel-Based Spatial Layout **Structure:** Main canvas (left/centre) + draggable side panels (right) **Anatomy:** - **Canvas:** 3D isometric view or 2D map, white background (`colour/neutral/0`), full viewport width minus panel width - **Primary panel:** 320px fixed width, right-aligned, cream background (`colour/bg/primary`), elevated with `shadow/small` - **Secondary panels:** Stack behind primary panel, accessible via back navigation or stacking interactions - **Floating controls:** Bottom-right corner of canvas (2D/3D, zoom, reset) - **Timeline scrubber:** Bottom of viewport, spanning full width **Responsive behaviour:** - On narrow viewports (<768px): panels overlay canvas, swipeable to dismiss - On desktop (>768px): panels dock on right, canvas shrinks to accommodate **Use case:** Dashboard, map view, live monitoring --- ### Detail Drill-Down **Structure:** List panel → Detail panel → Related panels **Flow:** 1. User clicks list item (e.g. \"Potential theft\" in Events) 2. Selected event panel opens (or detail drawer slides in) 3. Detail panel shows full information + related action links (Cameras, People, Timeline) 4. User clicks action link to open related panel 5. Back arrow returns to selected event detail **Panel stacking:** - Primary panel: Selected event - Secondary panel: Related person, timeline, or camera - Tertiary panel: If user drills deeper (e.g. timeline → specific incident) **Key principle:** Back arrow always navigates to previous panel; close X always dismisses current panel --- ### Modal Pickers (Date, Location) **Structure:** Dropdown trigger → Modal picker overlay → Selection confirmation **Flow:** 1. User clicks \"When\" or \"Where\" dropdown in top bar 2. Picker modal slides up from bottom or appears inline 3. User navigates picker (tabs, lists, grid cells) 4. User selects option 5. Picker closes, filter updates, interface refreshes with new data **Keyboard support:** - Arrow keys to navigate picker items - Enter to select - Escape to close without selecting **Visual feedback:** - Selected item highlighted in dark (`colour/active`) - Current selection persists until changed --- ## Interaction Patterns ### Selection & Highlighting **Primary flow:** 1. User sees list of items (events, people, data points) 2. User clicks item to select 3. Item highlights with background `colour/hover` 4. Related detail panel opens or updates **Visual states:** - **Default:** `colour/bg/primary` background, `colour/text/primary` text - **Hover:** `colour/hover` background (cream/400), text unchanged - **Selected/active:** `colour/active` background (neutral/900), `colour/text/inverse` text **Keyboard support:** - Arrow keys to navigate list - Enter to select - Space to select (optional) --- ### Navigation via Back/Close **Pattern:** Panels always include back arrow (navigation) and close X (dismiss) **Back arrow:** - Returns to previous state or parent panel - Preserves scroll position (if applicable) - Visible only if there's a previous state to return to **Close X:** - Dismisses current panel - Returns to base view (e.g. map with no detail panels) - Always visible in panel header **Keyboard support:** - Escape key acts as close X (dismisses panel) - Alt+Left arrow acts as back button --- ### Status Indicators & Urgency **Alert dot (orange):** - Small 8px circle, top-right of avatar or button - Indicates urgent status (unreviewed, flagged, etc.) - Colour: `colour/alert` (#FF6B35, TBD — confirm value) **Notification list:** - \"Just now\" badges for recent alerts - Time-based labels: \"4 mins ago\", \"Yesterday\", timestamp - Orange dot next to most recent items - Read/unread states (optional; not visible in current design) **Capacity badge:** - Circular dark badge (neutral/900) with white percentage text - Positioned in notification item, e.g. \"92% (approaching full capacity, ground floor)\" **Ratio badge:** - Circular dark badge with split label, e.g. \"M:32 F:68\" - Indicates demographic breakdown or ratio metric **Temporal indicator:** - \"LIVE\" badge in calendar/date picker (active period tab) - Indicates real-time data stream --- ### Data Presentation **List-based:** - Categorical lists (Customer, Sales, Operational data) - Each list item is a link/button to drill-down - Section headers (`type/h4`) group related items **Card-based:** - Event card: image + avatar + title + metadata + description + related actions - Person card: avatar + name + metadata + related actions - Data card: chart + metadata **Chart-based:** - Bar charts with grey bars, axis labels - No chart title on the chart itself; title lives in panel header - Legend optional (axis labels sufficient for simple charts) **Table-based:** - Column headers in `type/h4` (bold monospace) - Rows in `type/body` (regular monospace) - No alternating row colours (density over visual variety) - Minimal borders; dividers use `colour/border/light` --- ## Visual Hierarchy ### Typographic **Dominance order (largest → smallest):** 1. `type/display` (48px) — Page title, hero heading (rarely used in Augur) 2. `type/h1` (40px) — Major section heading 3. `type/h2` (32px) — Subsection heading 4. `type/h3` (28px) — Panel title, card heading 5. `type/h4` (24px) — Section header, label, secondary heading 6. `type/body-large` (20px) — Introductory text, large body 7. `type/body` (16px) — Standard UI copy, list items, descriptions 8. `type/caption` (12px) — Secondary metadata (deprecated; use `type/body` with `colour/text/secondary`) **Weight hierarchy:** - Bold: Headings, emphasis, CTAs - Regular: Body text, labels, most UI copy - Light: Secondary text, metadata (applied as weight override, not separate style) --- ### Colour **Dominance order:** 1. Cream backgrounds (`colour/cream`) dominate visual space 2. Dark neutral text (`colour/neutral/600` to `800`) provides contrast and readability 3. Dark active state (`colour/active`, neutral/900) indicates selection 4. Orange accent (`colour/alert`) draws attention to urgent items 5. White canvas provides separation between 3D view and UI **Principle:** Use colour sparingly. The cream/neutral/white palette handles 95% of cases; orange is reserved for alerts. --- ## Spacing & Alignment ### Padding **Panel padding:** - Header: `space/4` (16px) on all sides - Body: `space/6` (24px) on all sides - List item: `space/4` (16px) horizontal, `space/2` (8px) vertical **Margins:** - Between sections within a panel: `space/6` (24px) - Between list items: None (border-based dividers) - Between action links: `space/4` (16px) ### Grid **Base unit:** 8px **Canvas width:** Variable (full minus panel width) **Panel width:** 320px fixed **Content width:** Full panel width minus padding **Align to 8px grid:** - Position: multiples of 8px - Size: multiples of 8px - Spacing: use `space/*` tokens (multiples of 4px or 8px) --- ## Motion (Future) **Tentative patterns (not currently specified):** - Panel slide-in/slide-out (250ms ease-out) - Dropdown fade-in (150ms ease-out) - Item hover scale (subtle, 1.02× scale) - Colour transitions (200ms ease-out for hover/active states) **Principle:** Motion should be subtle and purposeful, never distracting. Monospace UI benefits from restrained animation. --- ## Accessibility Patterns ### Focus Management **Pattern:** Focus should move logically through the interface. - Tab order follows visual/reading order (left-to-right, top-to-bottom) - When a panel opens, focus moves to the panel's first focusable element - When a panel closes, focus returns to the triggering element - Modals trap focus (Tab wraps to first element after last) **Visual focus indicator:** - 2px outline in `colour/focus-ring` (neutral/800) - 2px offset from element boundary - Applies to all buttons, links, form inputs, and interactive elements --- ### Screen Reader Announcements **Patterns:** - When a panel opens: Announce panel title and role (e.g. \"Selected event panel opened\") - When data updates: Announce the update (e.g. \"Notifications updated, 3 new alerts\") - When an action completes: Announce result (e.g. \"Filter applied, 12 results\") **Implementation:** - Use `aria-live=\"polite\"` for non-critical updates - Use `aria-live=\"assertive\"` for urgent alerts - Use `role=\"alert\"` for error messages --- ### Semantic HTML **Patterns:** - Headings: Use `

`, `

`, `

` semantically (never skip levels) - Buttons: Use `