Mobile UI Design Baseline
Mobile UI Design Baseline
Mobile-first design standards for Hermes WebUI and related interfaces.
Baseline Specs
| Property | Value |
|---|---|
| Reference device | iPhone 17 Pro |
| Resolution | 393×852px |
| CSS breakpoint | 430px |
| Touch targets | 44px minimum |
| Safe area | safe-area-inset-* applied |
Design Principles
- Chat-first — conversation is primary, VRM is ambient
- VRM behind toggle — hidden by default on mobile, can be enabled
- Panels minimizable — never cascading or overlapping
- Single-page unified UI — clean, not cluttered
Testing
- Test via Tailscale on real iPhone
- Check 44px touch target compliance
- Verify safe-area-inset padding on notched devices
- Test with VRM toggle on/off