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