🎨 Design (MVP)¶
Overview¶
Simple, practical design guidelines for building GetCimple's MVP. No overthinking, no design systems, just clear interfaces that work.
Key Documents¶
- MVP Design Principles - Core principles and constraints
- MVP Design Guidelines - Existing practical guidelines
- UI Components - Basic component patterns
Design Philosophy¶
For Directors (Mobile-First)¶
- 5-minute interactions
- Large touch targets
- Traffic light simplicity
- Works on phones
For Management (Desktop-First)¶
- Efficient data entry
- Bulk operations
- Keyboard friendly
- Works on laptops
What We're Building¶
- Clean Interfaces - Clear, uncluttered, focused
- Standard Patterns - Use familiar UI patterns
- Fast Loading - Performance over polish
- Accessible - Works for everyone
What We're NOT Building¶
- Custom design system
- Complex animations
- Multiple themes
- Native apps
- Offline mode
Tech Stack¶
- Framework: SvelteKit
- Styling: Tailwind CSS
- Components: shadcn-svelte (when stable)
- Icons: Heroicons
- Charts: Chart.js (if needed)
Success Metrics¶
- Directors can check compliance in < 1 minute
- No training required for basic tasks
- Works on 5-year-old devices
- Loads in < 3 seconds on 3G
Keep it simple. Ship it fast. Iterate based on feedback.