IOS App Design

iOS App Design Guidelines

Apple Human Interface Guidelines + iOS 26 Liquid Glass design system reference.

Quick Reference (Priority Order)

CRITICAL - Must Follow

HIGH - Strongly Recommended

MEDIUM - Recommended

iOS 26 Liquid Glass - Key Principles

Three foundational pillars of iOS 26's design system:

1. Content Leads

Controls float above content using translucent glass layers. Content is never obscured by opaque chrome. The UI recedes; the user's content advances.

2. Concentricity

UI elements echo the rounded geometry of Apple hardware — rounded corners, circular buttons, pill shapes. Software and hardware share a unified visual rhythm.

3. Fluid Responsiveness

Elements dynamically adapt: tab bars shrink on scroll, glass refracts surrounding colors, controls morph contextually. Nothing is static.

Quick Decision Tree

iOS Design Issue?
├── Building navigation?
│   ├── Top-level sections → Tab Bar (≤5 tabs)
│   ├── Hierarchical drill-down → NavigationStack
│   ├── Focused task / decision → Modal (.sheet, .fullScreenCover)
│   └── Secondary actions → Toolbar items
├── Adopting Liquid Glass?
│   ├── Tab bar / toolbar → Use system defaults, remove custom backgrounds
│   ├── Custom controls → Apply .glassEffect modifier
│   ├── App icon → Use Icon Composer, multi-layer design
│   └── Existing solid chrome → Replace with system materials
├── Typography choices?
│   ├── Body text → San Francisco, support Dynamic Type
│   ├── Display / title → SF Pro Rounded or system serif
│   └── Fixed-size text → Almost never correct, justify carefully
├── Color decisions?
│   ├── Semantic colors → Use system colors (label, secondaryLabel, etc.)
│   ├── Brand accent → Tint color, one dominant hue
│   ├── Backgrounds → System background + materials, not hardcoded
│   └── Dark mode → Must work; use adaptive colors
├── Layout issues?
│   ├── Content clipped → Check safe area insets
│   ├── Landscape broken → Use GeometryReader / adaptive layout
│   └── iPad / large screen → Use NavigationSplitView, responsive columns
├── Accessibility?
│   ├── Text too small → Support Dynamic Type (all text categories)
│   ├── Low contrast → Check against WCAG AA (4.5:1 body, 3:1 large)
│   ├── VoiceOver → Add accessibility labels, traits, hints
│   └── Reduce Motion → Provide alternative to animations
└── Performance feel?
    ├── Janky scrolling → Lazy containers, async image loading
    ├── Slow transitions → Use matched geometry, spring animations
    └── Unresponsive taps → Haptic feedback, immediate visual response

Design Aesthetics for iOS

DO

• Embrace depth and translucency — Liquid Glass, vibrancy, materials
• Use system components — they automatically adopt Liquid Glass
• Design for multiple appearances — light, dark, tinted, high contrast
• Let content breathe — generous spacing, clear hierarchy
• Use SF Symbols — consistent with system, support Dynamic Type scaling
• Design for touch — minimum 44pt tap targets
• Use platform idioms — swipe-to-delete, pull-to-refresh, long press menus

DON'T

• Don't fight the platform — custom tab bars that break expected behavior
• Don't use opaque chrome — solid navigation bars feel dated in iOS 26
• Don't ignore Dynamic Type — fixed font sizes break accessibility
• Don't hardcode colors — use semantic system colors for theme adaptation
• Don't replicate Android/web patterns — hamburger menus, FABs, bottom sheets as primary nav
• Don't over-customize — heavy custom styling that loses Liquid Glass coherence
• Don't use thin/ultralight fonts for body — San Francisco is optimized at regular/medium weights
• Don't put critical actions in hard-to-reach areas — bottom of screen is easier than top for one-handed use

Reference Files

Search rules: grep -l "keyword" references/