1# iOS Human Interface Guidelines Patterns
2 
3## Layout and Spacing
4 
5### Standard Margins and Padding
6 
7```swift
8// System standard margins
9private let standardMargin: CGFloat = 16
10private let compactMargin: CGFloat = 8
11private let largeMargin: CGFloat = 24
12 
13// Content insets following HIG
14extension EdgeInsets {
15    static let standard = EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
16    static let listRow = EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16)
17    static let card = EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
18}
19```
20 
21### Safe Area Handling
22 
23```swift
24struct SafeAreaAwareView: View {
25    var body: some View {
26        ScrollView {
27            LazyVStack(spacing: 16) {
28                ForEach(items) { item in
29                    ItemRow(item: item)
30                }
31            }
32            .padding(.horizontal)
33        }
34        .safeAreaInset(edge: .bottom) {
35            // Floating action area
36            HStack {
37                Button("Cancel") { }
38                    .buttonStyle(.bordered)
39                Spacer()
40                Button("Confirm") { }
41                    .buttonStyle(.borderedProminent)
42            }
43            .padding()
44            .background(.regularMaterial)
45        }
46    }
47}
48```
49 
50### Adaptive Layouts
51 
52```swift
53struct AdaptiveGridView: View {
54    @Environment(\.horizontalSizeClass) private var sizeClass
55 
56    private var columns: [GridItem] {
57        switch sizeClass {
58        case .compact:
59            return [GridItem(.flexible())]
60        case .regular:
61            return [
62                GridItem(.flexible()),
63                GridItem(.flexible()),
64                GridItem(.flexible())
65            ]
66        default:
67            return [GridItem(.flexible())]
68        }
69    }
70 
71    var body: some View {
72        ScrollView {
73            LazyVGrid(columns: columns, spacing: 16) {
74                ForEach(items) { item in
75                    ItemCard(item: item)
76                }
77            }
78            .padding()
79        }
80    }
81}
82```
83 
84## Typography Hierarchy
85 
86### System Font Styles
87 
88```swift
89// HIG-compliant typography scale
90struct Typography {
91    // Titles
92    static let largeTitle = Font.largeTitle.weight(.bold)      // 34pt bold
93    static let title = Font.title.weight(.semibold)            // 28pt semibold
94    static let title2 = Font.title2.weight(.semibold)          // 22pt semibold
95    static let title3 = Font.title3.weight(.semibold)          // 20pt semibold
96 
97    // Headlines and body
98    static let headline = Font.headline                         // 17pt semibold
99    static let body = Font.body                                 // 17pt regular
100    static let callout = Font.callout                          // 16pt regular
101 
102    // Supporting text
103    static let subheadline = Font.subheadline                  // 15pt regular
104    static let footnote = Font.footnote                        // 13pt regular
105    static let caption = Font.caption                          // 12pt regular
106    static let caption2 = Font.caption2                        // 11pt regular
107}
108```
109 
110### Custom Font with Dynamic Type
111 
112```swift
113extension Font {
114    static func customBody(_ name: String) -> Font {
115        .custom(name, size: 17, relativeTo: .body)
116    }
117 
118    static func customHeadline(_ name: String) -> Font {
119        .custom(name, size: 17, relativeTo: .headline)
120            .weight(.semibold)
121    }
122}
123 
124// Usage
125Text("Custom styled text")
126    .font(.customBody("Avenir Next"))
127```
128 
129## Color System
130 
131### Semantic Colors
132 
133```swift
134// Use semantic colors for automatic light/dark mode support
135extension Color {
136    // Labels
137    static let primaryLabel = Color.primary
138    static let secondaryLabel = Color.secondary
139    static let tertiaryLabel = Color(uiColor: .tertiaryLabel)
140 
141    // Backgrounds
142    static let systemBackground = Color(uiColor: .systemBackground)
143    static let secondaryBackground = Color(uiColor: .secondarySystemBackground)
144    static let groupedBackground = Color(uiColor: .systemGroupedBackground)
145 
146    // Fills
147    static let primaryFill = Color(uiColor: .systemFill)
148    static let secondaryFill = Color(uiColor: .secondarySystemFill)
149 
150    // Separators
151    static let separator = Color(uiColor: .separator)
152    static let opaqueSeparator = Color(uiColor: .opaqueSeparator)
153}
154```
155 
156### Tint Colors
157 
158```swift
159// App-wide tint color
160struct AppColors {
161    static let primary = Color.blue
162    static let secondary = Color.purple
163    static let success = Color.green
164    static let warning = Color.orange
165    static let error = Color.red
166 
167    // Semantic tints
168    static let interactive = Color.accentColor
169    static let destructive = Color.red
170}
171 
172// Apply tint to views
173ContentView()
174    .tint(AppColors.primary)
175```
176 
177## Navigation Patterns
178 
179### Hierarchical Navigation
180 
181```swift
182struct MasterDetailView: View {
183    @State private var selectedItem: Item?
184    @Environment(\.horizontalSizeClass) private var sizeClass
185 
186    var body: some View {
187        NavigationSplitView {
188            // Sidebar
189            List(items, selection: $selectedItem) { item in
190                NavigationLink(value: item) {
191                    ItemRow(item: item)
192                }
193            }
194            .navigationTitle("Items")
195            .toolbar {
196                ToolbarItem(placement: .primaryAction) {
197                    Button("Add", systemImage: "plus") { }
198                }
199            }
200        } detail: {
201            // Detail view
202            if let item = selectedItem {
203                ItemDetailView(item: item)
204            } else {
205                ContentUnavailableView(
206                    "Select an Item",
207                    systemImage: "sidebar.leading"
208                )
209            }
210        }
211        .navigationSplitViewStyle(.balanced)
212    }
213}
214```
215 
216### Tab-Based Navigation
217 
218```swift
219struct MainTabView: View {
220    @State private var selectedTab: Tab = .home
221 
222    enum Tab: String, CaseIterable {
223        case home, explore, notifications, profile
224 
225        var title: String {
226            rawValue.capitalized
227        }
228 
229        var systemImage: String {
230            switch self {
231            case .home: return "house"
232            case .explore: return "magnifyingglass"
233            case .notifications: return "bell"
234            case .profile: return "person"
235            }
236        }
237    }
238 
239    var body: some View {
240        TabView(selection: $selectedTab) {
241            ForEach(Tab.allCases, id: \.self) { tab in
242                NavigationStack {
243                    tabContent(for: tab)
244                }
245                .tabItem {
246                    Label(tab.title, systemImage: tab.systemImage)
247                }
248                .tag(tab)
249            }
250        }
251    }
252 
253    @ViewBuilder
254    private func tabContent(for tab: Tab) -> some View {
255        switch tab {
256        case .home:
257            HomeView()
258        case .explore:
259            ExploreView()
260        case .notifications:
261            NotificationsView()
262        case .profile:
263            ProfileView()
264        }
265    }
266}
267```
268 
269## Toolbar Patterns
270 
271### Standard Toolbar Items
272 
273```swift
274struct ContentView: View {
275    @State private var isEditing = false
276 
277    var body: some View {
278        NavigationStack {
279            List { /* content */ }
280            .navigationTitle("Items")
281            .toolbar {
282                // Leading items
283                ToolbarItem(placement: .topBarLeading) {
284                    EditButton()
285                }
286 
287                // Trailing items
288                ToolbarItemGroup(placement: .topBarTrailing) {
289                    Button("Filter", systemImage: "line.3.horizontal.decrease.circle") { }
290                    Button("Add", systemImage: "plus") { }
291                }
292 
293                // Bottom bar
294                ToolbarItemGroup(placement: .bottomBar) {
295                    Button("Archive", systemImage: "archivebox") { }
296                    Spacer()
297                    Text("\(itemCount) items")
298                        .font(.footnote)
299                        .foregroundStyle(.secondary)
300                    Spacer()
301                    Button("Share", systemImage: "square.and.arrow.up") { }
302                }
303            }
304            .toolbarBackground(.visible, for: .bottomBar)
305        }
306    }
307}
308```
309 
310### Search Integration
311 
312```swift
313struct SearchableView: View {
314    @State private var searchText = ""
315    @State private var searchScope: SearchScope = .all
316    @State private var isSearching = false
317 
318    enum SearchScope: String, CaseIterable {
319        case all, titles, content
320    }
321 
322    var body: some View {
323        NavigationStack {
324            List(filteredItems) { item in
325                ItemRow(item: item)
326            }
327            .navigationTitle("Library")
328            .searchable(
329                text: $searchText,
330                isPresented: $isSearching,
331                placement: .navigationBarDrawer(displayMode: .always)
332            )
333            .searchScopes($searchScope) {
334                ForEach(SearchScope.allCases, id: \.self) { scope in
335                    Text(scope.rawValue.capitalized).tag(scope)
336                }
337            }
338        }
339    }
340}
341```
342 
343## Feedback Patterns
344 
345### Haptic Feedback
346 
347```swift
348struct HapticFeedback {
349    static func impact(_ style: UIImpactFeedbackGenerator.FeedbackStyle = .medium) {
350        let generator = UIImpactFeedbackGenerator(style: style)
351        generator.impactOccurred()
352    }
353 
354    static func notification(_ type: UINotificationFeedbackGenerator.FeedbackType) {
355        let generator = UINotificationFeedbackGenerator()
356        generator.notificationOccurred(type)
357    }
358 
359    static func selection() {
360        let generator = UISelectionFeedbackGenerator()
361        generator.selectionChanged()
362    }
363}
364 
365// Usage
366Button("Submit") {
367    HapticFeedback.notification(.success)
368    submit()
369}
370```
371 
372### Visual Feedback
373 
374```swift
375struct FeedbackButton: View {
376    let title: String
377    let action: () -> Void
378 
379    @State private var showSuccess = false
380 
381    var body: some View {
382        Button(title) {
383            action()
384            withAnimation {
385                showSuccess = true
386            }
387            DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
388                withAnimation {
389                    showSuccess = false
390                }
391            }
392        }
393        .overlay(alignment: .trailing) {
394            if showSuccess {
395                Image(systemName: "checkmark.circle.fill")
396                    .foregroundStyle(.green)
397                    .transition(.scale.combined(with: .opacity))
398            }
399        }
400    }
401}
402```
403 
404## Accessibility
405 
406### VoiceOver Support
407 
408```swift
409struct AccessibleCard: View {
410    let item: Item
411 
412    var body: some View {
413        VStack(alignment: .leading, spacing: 8) {
414            Text(item.title)
415                .font(.headline)
416            Text(item.subtitle)
417                .font(.subheadline)
418                .foregroundStyle(.secondary)
419 
420            HStack {
421                Image(systemName: "star.fill")
422                Text("\(item.rating, specifier: "%.1f")")
423            }
424        }
425        .padding()
426        .accessibilityElement(children: .combine)
427        .accessibilityLabel("\(item.title), \(item.subtitle)")
428        .accessibilityValue("Rating: \(item.rating) stars")
429        .accessibilityHint("Double tap to view details")
430        .accessibilityAddTraits(.isButton)
431    }
432}
433```
434 
435### Dynamic Type Support
436 
437```swift
438struct DynamicTypeView: View {
439    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
440 
441    var body: some View {
442        Group {
443            if dynamicTypeSize.isAccessibilitySize {
444                // Stack vertically for accessibility sizes
445                VStack(alignment: .leading, spacing: 12) {
446                    leadingContent
447                    trailingContent
448                }
449            } else {
450                // Side-by-side for standard sizes
451                HStack {
452                    leadingContent
453                    Spacer()
454                    trailingContent
455                }
456            }
457        }
458    }
459 
460    var leadingContent: some View {
461        Label("Items", systemImage: "folder")
462    }
463 
464    var trailingContent: some View {
465        Text("12")
466            .foregroundStyle(.secondary)
467    }
468}
469```
470 
471## Error Handling UI
472 
473### Error States
474 
475```swift
476struct ErrorView: View {
477    let error: Error
478    let retryAction: () async -> Void
479 
480    var body: some View {
481        ContentUnavailableView {
482            Label("Unable to Load", systemImage: "exclamationmark.triangle")
483        } description: {
484            Text(error.localizedDescription)
485        } actions: {
486            Button("Try Again") {
487                Task {
488                    await retryAction()
489                }
490            }
491            .buttonStyle(.borderedProminent)
492        }
493    }
494}
495```
496 
497### Empty States
498 
499```swift
500struct EmptyStateView: View {
501    let title: String
502    let description: String
503    let systemImage: String
504    let action: (() -> Void)?
505    let actionTitle: String?
506 
507    var body: some View {
508        ContentUnavailableView {
509            Label(title, systemImage: systemImage)
510        } description: {
511            Text(description)
512        } actions: {
513            if let action, let actionTitle {
514                Button(actionTitle, action: action)
515                    .buttonStyle(.borderedProminent)
516            }
517        }
518    }
519}
520 
521// Usage
522EmptyStateView(
523    title: "No Photos",
524    description: "Take your first photo to get started.",
525    systemImage: "camera",
526    action: { showCamera = true },
527    actionTitle: "Take Photo"
528)
529```
530