ios26-hig-patterns

name	ios26-hig-patterns
description	iPhone-specific Apple Human Interface Guidelines, iOS 26 (Liquid Glass) baseline through iOS 27 (WWDC 2026, Liquid Glass v2) — the floating tab bar and how content scrolls under it, scroll-to-minimize nav/tab bars, resizable iPhone apps, navigation/sheets/presentation detents, SF Symbols + Dynamic Type + safe areas, control styles, 44pt touch targets, and the concrete SwiftUI modifiers that implement each. Use when building or reviewing any native iPhone screen; pairs with platform-conventions (cross-platform) and components-and-states.
tags	["ios","iphone","hig","apple","swiftui","liquid-glass","ios26","ios27","wwdc2026"]

iOS 26 → iOS 27 HIG — iPhone patterns that actually ship

Skill name note: the "26" in ios26-hig-patterns is the original generation this skill was written for; the content now spans iOS 26 (shipping baseline) and iOS 27 (WWDC 2026 — current cycle). The folder/skill name is kept stable because other skills cross-reference it. Source: Apple HIG + WWDC25 (iOS 26 Liquid Glass baseline) and WWDC 2026 (June 8–12 2026 — iOS 27, Liquid Glass v2: refreshed materials/tokens, transparency slider, more-dimensional icons, scroll-to-minimize nav bars, resizable iPhone apps). Verify any iOS-27-specific API against current Apple docs before shipping — the cycle is fresh as of June 2026.

platform-conventions covers cross-platform norms and design-system-frameworks covers HIG's philosophy (deference, clarity, depth). This skill is the iPhone field manual: the specific behaviors and SwiftUI modifiers that make a screen feel native instead of like a ported web app. The design language is Liquid Glass — translucent, layered surfaces that refract the content behind them; the system chrome (tab bar, toolbars, sheets) floats over content rather than boxing it in. iOS 27 (WWDC 2026) ships Liquid Glass v2: the material now diffuses complex content more aggressively for legibility, adds a darkened edge plus brighter specular highlights for more dimension, gives users a transparency/intensity slider in Settings (ultra-clear → fully tinted), and expects iPhone apps to be resizable (fluid reflow across sizes/aspect ratios, not letterboxed) ahead of adaptive/foldable hardware.

The single most common iOS-26 mistake: forcing system chrome opaque to "match the brand." That fights the platform, breaks content-scrolls-under behavior, and reserves dead insets (the classic "white bar above the tab bar"). Default to letting the system render its chrome; theme only tint and your own surfaces.

This is the field-manual overview. For depth, use the specialized suite, each grounded in Apple HIG/WWDC25/WWDC26 sources: ios-liquid-glass-swiftui (material + verified API table), ios-typography, ios-layout-and-grid, ios-color-and-materials, ios-sf-symbols-and-icons, ios-components, ios-flows-and-patterns.

---

1. The floating tab bar (the #1 iOS-26 gotcha)

On iOS 26 a TabView renders as a floating, translucent pill inset from the screen edges. Content is expected to scroll underneath it; the system adds a bottom content inset so the last item can clear the bar at rest.

• Do let it be translucent. A ScrollView/List inside a tab automatically gets the correct bottom inset and content refracts through the glass as it scrolls.
• Don't force it opaque:

  // ANTI-PATTERN — reserves a large opaque inset, content can't scroll under, dead "white bar".
  UITabBar.appearance().standardAppearance = opaqueWhiteAppearance
  .toolbarBackground(.visible, for: .tabBar)
  

  Removing both restores native behavior. Only set an opaque background if a specific screen genuinely needs it, and then expect the inset.
• Theme the selection/icon color with .tint(brandColor) on the TabView, not by overriding the bar's material.
• Tab items: 2–5 destinations, each a Label(text, systemImage:). More than 5 collapses into "More" — avoid.
• .tabBarMinimizeBehavior(.onScrollDown) (iOS 26) lets the bar shrink as the user scrolls a long page — use it on content-heavy tabs to reclaim space instead of fighting the inset.
• iOS 27: search is re-integrated into the tab bar / navigation (a dedicated search role on the bar rather than a separate floating search field). Prefer the system search affordance over a hand-rolled top search bar so it inherits Liquid Glass and the scroll-minimize behavior.
• Liquid Glass v2 (iOS 27): the pill picks up the darkened edge + brighter specular highlights and respects the user's transparency slider automatically. Don't try to re-create or override these — they come free from the system material. When the integrated nav bar minimizes (see §2), an integrated top tab bar minimizes with it in one motion.

2. Navigation & titles

• NavigationStack (not the deprecated NavigationView). Large title by default; it collapses to inline on scroll — this is good, keep it.
• Use inline titles (.navigationBarTitleDisplayMode(.inline)) on dense utility screens where a large title wastes the first 60pt.
• Toolbar items go in .toolbar { ToolbarItem(placement: .topBarTrailing) { … } }. On iOS 26 toolbars are also Liquid Glass and float — don't background them opaque either. Standard items get corner radii concentric with the bar; use .prominent for the one primary action (trailing).
• Back navigation is the system swipe + chevron; never build a custom back button that breaks the edge-swipe.
• Scroll edge effect (iOS 26) is how floating chrome stays legible over scrolling content — .scrollEdgeEffectStyle(.hard, for: .top) on dense top bars; it's functional, not decorative, one per view. Don't replace it with a hard opaque bar background. In Liquid Glass v2 (iOS 27) a uniform top toolbar appears automatically as content scrolls under floating bars to hold contrast; you tune it with the same scroll-edge-effect APIs, not a new one.
• Scroll-to-minimize nav bar (iOS 27): .toolbarMinimizeBehavior(.onScrollDown, for: .navigationBar) collapses the navigation bar as the user scrolls down and restores it on scroll-up — the nav-bar counterpart to .tabBarMinimizeBehavior. The safe area adjusts as it minimizes, and an integrated top tab bar minimizes in the same motion. Use on long reading/list screens; let large titles still collapse-then-minimize rather than stacking your own hide logic.
• Resizable-app toolbars (iOS 27): when apps are resizable, the toolbar must degrade gracefully. .visibilityPriority(_:) ranks items so low-priority ones drop first as width shrinks; .toolbarOverflowMenu pushes overflow into a menu; .topBarPinnedTrailing keeps a critical action (e.g. share/done) pinned at the trailing edge at all sizes. Set these instead of hard-coding which items show.

3. Sheets & presentation detents

Modeless, partial sheets are the iOS-native way to add detail without a full push.

• .sheet(isPresented:) + .presentationDetents([.medium, .large]) — start at .medium for a quick action (log food, edit a value), let the user drag to .large.
• .presentationDragIndicator(.visible) for discoverability.
• .presentationBackgroundInteraction(.enabled(upThrough: .medium)) when the user should still see/scroll the screen behind.
• Use a detented sheet instead of a new pushed screen for: quick entry forms, filters, a single item's detail, confirmations with options. Reserve full pushes for genuinely new contexts.
• iOS 27: sheets ride Liquid Glass v2 — the inset card refracts with the new darkened edge/specular treatment and honors the user transparency slider; don't paint an opaque sheet background to "fix" legibility, the v2 content diffusion already handles it. The item-binding presentation pattern now also covers confirmationDialog/alert (present automatically when a bound optional is set), matching .sheet(item:).
• On resizable layouts, a detent that felt right at phone width can dominate a larger canvas — drive presentation off available size rather than assuming a fixed phone frame.

4. SF Symbols

• Use SF Symbols for all standard iconography — they auto-scale with Dynamic Type, support weights, and get hierarchical/multicolor rendering for free.
• Match symbol weight to adjacent text weight; use .symbolRenderingMode(.hierarchical) for depth, .palette for two-tone brand accents.
• .symbolEffect(.bounce) / .pulse for state changes (logged ✓, syncing) — subtle, not decorative.
• Don't ship custom raster icons where an SF Symbol exists; you lose scaling + accessibility.

5. Dynamic Type, color, contrast

• Use semantic text styles (.font(.body), .headline, .caption) so text scales with the user's setting. If you hardcode sizes, gate the largest accessibility sizes and test at AX5.
• .dynamicTypeSize(...DynamicTypeSize.accessibility3) to cap on a layout that genuinely can't grow further — but prefer reflowing.
• Colors: prefer semantic/system colors or a token set that has light + dark variants. Respect @Environment(\.colorScheme). Hit WCAG AA (4.5:1 text). The HIG's "increase contrast" and "reduce transparency" accessibility settings should still leave Liquid Glass legible — test with Reduce Transparency on. iOS 27 adds a user Liquid Glass transparency/intensity slider (ultra-clear → fully tinted) on top of those toggles: your content must stay legible across the whole range, not just the two extremes — lean on system materials/labels that adapt automatically rather than hand-tuned opacities.

6. Touch targets & layout safety

• Design to 44×44 pt for every interactive element (Fitts/HIG). A 20pt glyph still needs a 44pt tappable frame — pad it. Apple's Accessibility page now also lists a 28×28 pt absolute floor — treat 44 as the target, 28 as a never-go-below, not a goal.
• Respect safe areas: never put controls under the Dynamic Island, home indicator, or behind the floating tab bar. Use .safeAreaInset(edge:) to add a pinned footer that the system insets correctly, instead of manual bottom padding.
• .safeAreaPadding over raw .padding when the intent is "clear the system chrome."
• Honor @Environment(\.accessibilityReduceMotion) — drop parallax/large transitions when set.
• Resizable iPhone apps (iOS 27): apps are expected to fluidly reflow across a dynamic range of sizes and aspect ratios — not letterbox — ahead of adaptive/foldable hardware. Rebuilding against the latest SDK auto-opts an app into resizability, so a fixed-width assumption that compiled fine on iOS 26 can ship broken. SwiftUI apps are mostly there for free; harden the layout: drive columns/stacks off size classes and container width (avoid hardcoded UIScreen widths), let Grid/LazyVGrid reflow, and preview across sizes in Xcode. Pair with responsive-and-multi-device and ios-layout-and-grid.

7. Controls (use the native ones)

• Button(role: .destructive), .confirmationDialog for destructive choices, Toggle, Stepper, Picker (menu/segmented/wheel), Slider. Native controls inherit Liquid Glass, Dynamic Type, VoiceOver, and haptics for free.
• Segmented Picker(.segmented) is the canonical way to switch a screen's view without a new push or scroll — central to dense layouts.
• .buttonStyle(.borderedProminent) for the single primary action; .bordered/.plain for secondary. One prominent action per screen region.
• Haptics: .sensoryFeedback(.success, trigger:) on confirmations, .selection on segmented/stepper changes.

8. Quick review checklist

• Tab bar / toolbars left translucent (no forced-opaque appearance); content scrolls under cleanly, no dead inset; Liquid Glass v2 edge/specular and the transparency slider left to the system.
• NavigationStack, large title that collapses; inline title on dense screens; scroll-to-minimize via .toolbarMinimizeBehavior(for: .navigationBar) on long screens (not hand-rolled hide logic).
• Quick detail/entry uses a .medium detent sheet, not a full push.
• All icons are SF Symbols; weights match text.
• Text uses semantic styles; tested at AX5; AA contrast; legible with Reduce Transparency and across the full iOS 27 transparency-slider range.
• Every interactive ≥44pt; nothing under the island/home-indicator/tab bar.
• Native controls (segmented Picker, Stepper, Toggle); one prominent action per region; haptics on state changes.
• iOS 27 resizable: layout reflows across sizes/aspect ratios (no UIScreen-width assumptions, no letterboxing); toolbar uses visibilityPriority / overflow / topBarPinnedTrailing so it degrades gracefully.