Design Guide 1536x864 Touch

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

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 ≥ 2× the gap inside a block (proximity rule). Prefer 32–48px between major sections; use 40–80px for strong “chapter” breaks.
• Grouping default: Whitespace over lines. Reserve 1px dividers for deep nesting, dense tables, or cases where space alone cannot separate meaning (see “Lines vs. Whitespace” and Professional Design System Manual).

3. Touch targets and spacing (non-negotiable)

From the touch handbook and component specs:

Dashboard caveat: Dense dashboards may use 36–40px row heights for data when each cell is not individually tappable; for touch, prefer 44px+ for any interactive row or control. If you use smaller visual buttons, compensate with extra external spacing (compensation rule from white space workshop).

4. Typography at this resolution

Follow the tier system in design_rationale.md and ui_design_specification.md, with touch-first legibility:

Contrast: Prefer bold black / white titles + regular gray secondary over “everything medium weight.” Reduce pure black/white vibration on large fields where the docs recommend softer tones.

5. Components

• Buttons: Use 48px (medium) or 56px (large) for primary touch actions; 36px only for secondary, non-critical actions with safe surrounding space. Primary = filled; secondary = stroke; tertiary = text (per UI Design Specification).
• Inputs: 48–56px height, 16–20px horizontal inner padding; avoid oversized fields (e.g. 77–96px) that push content below the fold without reason.
• Cards: Corner radius 8–12px (up to 20px if the product allows a softer look); internal padding ≥ 20px (20–30px per touch handbook). Text must not touch card edges.
• Icons: Keep a fixed alignment box (e.g. 28px region) so text baselines stay stable; 3–8px between icon and label.
• Shadows: No drop shadows on ordinary surfaces; reserve for floating UI (docks, modals, overlays) per system manual.

6. Vertical rhythm and “fold”

• 864px height is limited: keep GNB / chrome thin and consistent so KPIs and primary tasks stay visible (visual hierarchy primer).
• Use asymmetric vertical spacing: bottom margin of a group > top margin to “ground” blocks (nesting / 1:1.5 style rules from white space workshop).
• Footer / bottom safe area: Reserve ≥ 40px (often 40–60px) above the physical edge so content does not feel cramped.

7. Motion and feedback

• Touch UIs need clear pressed / active states (not only hover).
• Avoid interactions that require double-click precision; prefer explicit controls for destructive actions.

8. Quality checklist (this viewport + touch)

• All interactive targets meet 44–48px minimum height (or have expanded hit areas).
• Spacing follows the 8px scale; section gaps clearly exceed inner gaps.
• Grouping uses margins first; lines only where the docs allow exceptions.
• Typography uses a clear three-level hierarchy; secondary text is muted, not competing with titles.
• Cards and inputs respect padding and radius; no text flush to edges.
• GNB height is consistent and not consuming excess vertical space.
• Bottom of screen has breathing room; no “tight” footer against the bezel.

9. Source alignment

This guide consolidates rules and vocabulary from:

• touch_friendly_design.md — finger thickness, cards, hierarchy, responsive continuity
• ui_design_specification.md — margins, grid, components, breakpoints
• design_rationale.md — grid, typography tiers, spacing table
• Professional Design System Manual_ Web & Dashboard Standards.md — dashboard type scale, buttons, touch constants
• The Beginner’s Guide to UI Grouping_ Lines vs. Whitespace.md — proximity, 1:2 margin ratio, finger test
• visual_hierarchy.md — three depths, GNB audit
• white_space_workshop.md — seven spacing tips, compensation for smaller targets

Use this document as the viewport-specific profile; when a rule conflicts, prioritize touch safety and readability at arm’s length on a fixed 1536×864 display.