🎨 MVP UI Patterns¶
Core Screens (Mockups)¶
1. Dashboard¶
┌─────────────────────────────────────┐
│ GetCimple [User] [Logout] │
├─────────────────────────────────────┤
│ Essential Eight Maturity: 2.3/5 ↑0.2 this month│
│ [=========> ] 46% │
│ │
│ 🔴 3 Critical 🟡 7 Medium ✅ 5 Done│
│ │
│ [View Tasks] [Generate Report] │
└─────────────────────────────────────┘
2. Policy View¶
┌─────────────────────────────────────┐
│ < Back Acceptable Use Policy │
├─────────────────────────────────────┤
│ Status: Active Updated: Jan 2024 │
│ [E8_A] [ISO_5.1] │
│ │
│ [Policy content in markdown...] │
│ │
│ [Edit] [Download PDF] [Archive] │
└─────────────────────────────────────┘
3. Assessment¶
┌─────────────────────────────────────┐
│ Question 5 of 20 [Save] │
├─────────────────────────────────────┤
│ Do you enforce MFA for all users? │
│ │
│ ( ) Yes - All users │
│ ( ) Partial - Admin only │
│ ( ) No - Not implemented │
│ │
│ [Upload Evidence] │
│ [< Previous] [Next >] │
└─────────────────────────────────────┘
UI Decisions from notes.md¶
Agent Interface (Post-MVP)¶
- ChatGPT-style conversational UI
- Right sidebar for chat
- Main area shows affected content
- NOT in Day 1 MVP
Framework Tags¶
[E8] - Essential Eight compliance
[ACSC] - Australian Cyber Security Centre
[S180] - Section 180 director duties
[Privacy] - Privacy Act compliance
Colors: Green (complete), Yellow (partial), Red (gap)
Progress Indicators¶
- Simple percentage bar
- No complex animations
- Clear numerical progress (e.g., "12 of 20")
Report UI¶
- One-click PDF generation
- Logo upload for branding
- Standard template only in MVP
What We're NOT Building¶
- Complex data visualizations
- Drag-and-drop interfaces
- Real-time collaboration
- Custom themes/skins
- Mobile app (web responsive only)
- Advanced filtering/search
Component Library¶
Using shadcn-svelte for consistency:
- Button, Input, Select (forms)
- Card, Table (layouts)
- Badge, Progress (status)
- Dialog, Toast (feedback)
Keep it simple, ship it fast.