ios-layout-and-grid

Installation
SKILL.md

iOS layout & grid — spacing that reads "designed", on iPhone

Source: Apple HIG Layout, UIKit/SwiftUI API docs, and the 8pt-grid convention (June 2026). Numbers tagged [Apple] (stated in HIG/API) or [convention] (community practice that aligns with Apple's point system — Apple publishes no mandatory pixel grid).

1. The 8-point grid (+ 4pt sub-grid) — [convention]

iOS measures in points (1pt = 1px @1x, 2px @2x, 3px @3x). Snap spacing/sizing to multiples of 8 so they land on whole pixels at every scale (@2x→16, @3x→24) and scale cleanly across devices. Use a 4pt sub-grid for finer/typographic spacing and baseline alignment.

  • Standard scale to use: 4, 8, 12, 16, 24, 32, 40, 48.
  • One consistent gutter (16pt) + one consistent inter-card gap (8 or 12pt) reads designed; mixing arbitrary gaps reads amateur.

2. Real layout numbers

  • Screen side margins: systemMinimumLayoutMargins resolve to 16pt on compact-width iPhones, 20pt on larger widths. [Apple behavior / widely-cited] This is why inset-grouped lists and large titles share a left edge.
  • directionalLayoutMargins — Apple's leading/trailing-aware default content spacing (use this, not left/right). [Apple]
  • readableContentGuide — caps text width for readability; never exceeds the layout-margin guide and widens with Dynamic Type. Use for long body text. [Apple]
  • Bar heights — DON'T hard-code; read safeAreaInsets: nav bar 44pt (large-title adds a second row), tab bar ~49–50pt, toolbar 44pt (50 on iPad). Status bar / Dynamic Island top inset is device-dependent. Apple's rule: read safeAreaInsets.top/.bottom. [Apple]
  • viewRespectsSystemMinimumLayoutMargins (default true) keeps root margins ≥ the system minimums. [Apple]
Installs
1
GitHub Stars
1
First Seen
2 days ago
ios-layout-and-grid — jpoindexter/design-and-ai-skills