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

Rule	Impact	Reference
Liquid Glass adoption	Visual consistency with iOS 26	liquid-glass.md
Navigation patterns	Usability, platform conventions	navigation.md
Safe areas & layout	Content visibility, device compat	layout.md
Accessibility	Inclusivity, App Store compliance	accessibility.md

HIGH - Strongly Recommended

Rule	Impact	Reference
Typography & Dynamic Type	Readability, user preference	typography.md
Color system & themes	Visual coherence, dark mode	color-and-theme.md
SF Symbols & icons	Platform-native feel	icons-and-imagery.md

MEDIUM - Recommended

Rule	Impact	Reference
Motion & animation	Polish, perceived performance	motion.md
Haptics & feedback	Tactile experience	haptics-and-feedback.md

---

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