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:
systemMinimumLayoutMarginsresolve 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: readsafeAreaInsets.top/.bottom. [Apple] viewRespectsSystemMinimumLayoutMargins(default true) keeps root margins ≥ the system minimums. [Apple]