Apple iOS/SwiftUI Design Best Practices

Comprehensive design guide based on Apple's Human Interface Guidelines for iOS applications. Contains 45+ rules across 8 categories covering design foundations, layout systems, navigation patterns, UI components, interaction design, user feedback, accessibility, and common UX patterns.

When to Apply

Reference these guidelines when:

• Building iOS or iPadOS applications with SwiftUI or UIKit
• Designing mobile interfaces that should feel native to Apple platforms
• Implementing navigation, components, or interaction patterns
• Ensuring accessibility compliance (VoiceOver, Dynamic Type)
• Creating onboarding, forms, or settings screens

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Design Foundations	CRITICAL	found-
2	Layout & Spacing	CRITICAL	layout-
3	Navigation Patterns	HIGH	nav-
4	UI Components	HIGH	comp-
5	Interaction Design	HIGH	inter-
6	User Feedback	MEDIUM-HIGH	feed-
7	Accessibility	HIGH	a11y-
8	UX Patterns	MEDIUM	ux-

Quick Reference

1. Design Foundations (CRITICAL)

• found-semantic-colors - Use semantic colors for automatic dark mode
• found-system-colors - Use system accent colors for interactive elements
• found-typography-san-francisco - Use San Francisco with text styles
• found-dark-mode-support - Support dark mode system-wide
• found-sf-symbols - Use SF Symbols for icons
• found-color-contrast - Maintain minimum contrast ratios
• found-app-icons - Design app icons following guidelines

2. Layout & Spacing (CRITICAL)

• layout-safe-areas - Respect safe area insets
• layout-8pt-grid - Use 8pt grid for spacing
• layout-readable-content-width - Constrain text to readable width
• layout-adaptive-layouts - Use adaptive layouts for size classes
• layout-standard-margins - Use system standard margins
• layout-scroll-indicators - Show scroll indicators for long content

3. Navigation Patterns (HIGH)

• nav-tab-bar-navigation - Use tab bar for top-level navigation
• nav-navigation-bar - Use navigation bar for hierarchy
• nav-hierarchical-structure - Design clear navigation hierarchy
• nav-search-integration - Integrate search using searchable modifier
• nav-toolbar-actions - Place actions in toolbar correctly

4. UI Components (HIGH)

• comp-button-styles - Use appropriate button styles
• comp-text-field - Configure text fields with content types
• comp-list-cells - Design list cells with standard layouts
• comp-sheets-presentation - Use sheets for modal tasks
• comp-alerts-confirmations - Use alerts sparingly
• comp-action-sheets - Use action sheets for contextual choices
• comp-segmented-controls - Use segmented controls for exclusive options
• comp-menus - Use menus for secondary actions
• comp-pickers - Choose appropriate picker styles

5. Interaction Design (HIGH)

• inter-touch-targets - Maintain 44pt minimum touch targets
• inter-gesture-patterns - Use standard gesture patterns
• inter-haptic-feedback - Use haptic feedback for meaningful events
• inter-keyboard-handling - Handle keyboard appearance gracefully
• inter-drag-drop - Support drag and drop for content transfer
• inter-pull-to-refresh - Support pull-to-refresh for lists

6. User Feedback (MEDIUM-HIGH)

• feed-loading-states - Show appropriate loading indicators
• feed-error-states - Handle errors with clear recovery actions
• feed-notifications - Use notifications judiciously
• feed-success-confirmation - Confirm actions appropriately
• feed-empty-states - Design helpful empty states

7. Accessibility (HIGH)

• a11y-voiceover-labels - Provide meaningful VoiceOver labels
• a11y-dynamic-type - Support Dynamic Type for all text
• a11y-reduce-motion - Respect reduce motion preference
• a11y-color-independent - Never rely on color alone
• a11y-focus-management - Manage focus for assistive technologies

8. UX Patterns (MEDIUM)

• ux-onboarding - Design minimal onboarding
• ux-permission-requests - Request permissions in context
• ux-modality-patterns - Use modality appropriately
• ux-data-entry - Minimize data entry friction
• ux-undo-redo - Support undo for destructive actions
• ux-settings-organization - Organize settings logically

How to Use

Read individual reference files for detailed explanations with code examples showing both incorrect and correct implementations.

• Section definitions - Category structure and impact levels
• Rule template - Template for adding new rules

Full Compiled Document

For a single comprehensive document with all rules, see AGENTS.md.

Reference Files

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/	Rule template for extensions
metadata.json	Version and reference information