Platform iOS — Apple Human Interface Guidelines

Platform-specific design rules for iOS apps in Figma. Covers screen dimensions, safe areas, system UI, typography, navigation patterns, and HIG conventions. Extends ui-ux-fundamentals with iOS-specific constraints.

Extends UI/UX Fundamentals (loaded separately). Scope: iOS platform conventions only. General design quality rules are in ui-ux-fundamentals.

Skill Boundaries

• Use this skill for iOS-specific design decisions (safe areas, HIG, SF Pro, tab bars).
• If the task is Android-specific, switch to platform-android.
• If the task is responsive web design, switch to responsive-design.
• If the task is creating UI, switch to figma-create-ui and reference this skill for iOS rules.

Design Direction

Design rules are delivered by _workflow.designPreflight (from get_mode). For detailed rules by category, call get_design_guidelines(category).

Screen Dimensions

Default for new iPhone designs: 402 × 874 (project standard, matches lint rule mobile-dimensions).

Safe Areas

┌──────────────────────────┐
│     Status Bar (54px)     │  ← Dynamic Island area
├──────────────────────────┤
│                          │
│     Safe Content Area     │  ← paddingLeft/Right: 16px
│                          │
│                          │
├──────────────────────────┤
│   Home Indicator (34px)   │  ← Bottom safe area
└──────────────────────────┘

Rules:

• MUST keep interactive content within safe areas
• Status bar area: 54px top (Dynamic Island devices), 44px (notch devices), 20px (legacy)
• Home indicator: 34px bottom on Face ID devices
• System bar frames should be full-bleed: paddingLeft: 0, paddingRight: 0, paddingTop: 0 on the screen root so the status bar sits flush at the top edge
• Content padding: 16px horizontal minimum
• Figma implementation: safe areas MUST be visible transparent frames with layoutMode: "HORIZONTAL" (no fill, no stroke), NOT padding or hidden elements
• Status Bar: { type: 'frame', name: 'Status Bar', layoutMode: 'HORIZONTAL', height: 54 } as first child of screen
• Home Indicator: { type: 'frame', name: 'Home Indicator', layoutMode: 'HORIZONTAL', height: 34 } as last child of screen
• NEVER use visible: false on safe area frames — they must remain visible to preserve spacing
• NEVER use paddingTop/paddingBottom as substitute for safe area frames

Typography — SF Pro

Rules:

• Font is auto-detected by the tool layer: SF Pro Text/Display for Latin text, PingFang SC for Chinese, Hiragino Sans for Japanese, Apple SD Gothic Neo for Korean. No need to pass fontFamily explicitly — just use the correct screen dimensions (402×874) and the tool handles it.
• If SF Pro is unavailable in the Figma environment, the tool falls back to Inter automatically.
• MUST maintain the size/weight hierarchy — don't mix Display and Text roles

Typography — PingFang SC (Chinese)

When UI language is Chinese, font is auto-detected to PingFang SC. Use this adjusted type scale:

CJK-specific rules:

• CJK body line-height: 1.6–1.8 (wider than Latin 1.2–1.4) — complex strokes need vertical breathing room
• CJK heading line-height can tighten to 1.4 (titles are short, less vertical rhythm needed)
• Minimum body size: 14px (12px for captions only — complex CJK strokes become illegible below 12px)
• NEVER add positive letter-spacing to CJK body text (CJK has built-in character spacing)
• PingFang SC uses Semibold for headings (not Bold) — matches Apple's CJK typographic convention

Touch Targets

• MUST minimum 44 × 44pt for all interactive elements
• SHOULD 48 × 48pt for primary actions
• Tab bar items: 49pt height (standard), icons 25 × 25pt within

Navigation Patterns

Navigation Bar (Top)

Nav Bar (HORIZONTAL, height: 44px, padding: 0 16px)
  ├── Back Button (chevron.left icon + "Back" label)
  ├── Title (center, 17px Semibold)
  └── Trailing Action (icon or text button)

• Large title mode: title starts at 34px below nav bar, collapses on scroll

Tab Bar (Bottom)

Tab Bar (HORIZONTAL, height: 49px + 34px home indicator, SPACE_BETWEEN)
  ├── Tab Item (icon 25×25 + label 10px, VERTICAL, CENTER)
  ├── Tab Item (selected: tint color)
  ├── Tab Item
  └── Tab Item

• Maximum 5 tabs
• Selected state: filled icon + tint color
• Unselected: outline icon + gray

Sheets & Modals

• Sheet: corner radius 10px top, drag indicator 36 × 5px centered
• Full-screen modal: no corner radius, close button top-left or top-right
• Alert: 270px wide, corner radius 14px, centered

Common iOS Components

iOS-Specific Rules

• MUST use SF Symbols style for icons (outline weight matching text weight)
• MUST respect Dynamic Island / notch area — never place content behind it
• SHOULD use system blur (vibrancy) for overlays, not solid opacity
• SHOULD use spring animations conceptually (ease curves, not linear)
• NEVER use hamburger menu — iOS uses tab bars and navigation stacks
• NEVER place primary actions in top-left (reserved for back navigation)
• SHOULD use swipe gestures for list actions (swipe-to-delete, swipe-to-archive)