design-guide-1536x864-touch

name	design-guide-1536x864-touch
description	Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.

Design Guide: 1536 × 864 Touch Screen

This guide applies the principles in docs/ (spacing, hierarchy, touch ergonomics, and dashboard standards) to a fixed 1536 × 864 px viewport with touch as the primary input.

---

1. Viewport context

Property	Value	Notes
Resolution	1536 × 864	Same 16:9 aspect as 1920×1080; linear scale ≈ 80% of Full HD.
Input	Touch first	Treat pointer hover as optional; all primary actions must be finger-reachable.
Mental model	Panel / kiosk / HMI	Prefer predictable regions, large targets, and low mis-tap risk over dense “mouse” layouts.

---

2. Layout grid and margins

Align with the 1320px / 12-column content logic from the design system, adapted to this width:

• Max content width: 1320px, horizontally centered when possible.
  • Side margin ≈ (1536 − 1320) / 2 = 108px per side on a full-bleed artboard.
• 8px base grid: Use rhythm 8, 12, 16, 20, 24, 32, 48, 64, 80 for padding and gaps (per UI specification and white-space workshop).
• Section separation: Gap between unrelated blocks should be the gap inside a block (proximity rule). Prefer between major sections; use for strong “chapter” breaks.