beshkenadze iOS HIG Reference
Quick reference for Apple Human Interface Guidelines (iOS/iPadOS).
When to Use
- Need iOS design guidelines
- Looking up HIG requirements
- Checking Apple design best practices
- Understanding iOS design patterns
Core Principles
Clarity
- Content takes priority
- Legible text at every size
- Precise, purposeful icons
- Subtle, appropriate adornments
Deference
- UI supports content, never competes
- Fluid motion for understanding
- Translucency hints at more content
Depth
- Visual layers convey hierarchy
- Realistic motion creates understanding
- Touch and discoverability through depth
Foundations
Colors
| Type | Light | Dark | Usage |
|---|---|---|---|
| systemBackground | White | Black | Primary background |
| secondarySystemBackground | Gray6 | Gray5 | Grouped content |
| label | Black | White | Primary text |
| secondaryLabel | Gray | Gray | Secondary text |
| separator | Gray4 | Gray4 | Dividers |
| systemBlue | #007AFF | #0A84FF | Links, actions |
Typography
| Style | Size | Weight | Usage |
|---|---|---|---|
| largeTitle | 34pt | Regular | Screen titles |
| title | 28pt | Regular | Section headers |
| title2 | 22pt | Regular | Subsections |
| title3 | 20pt | Regular | Minor headers |
| headline | 17pt | Semibold | Emphasis |
| body | 17pt | Regular | Main content |
| callout | 16pt | Regular | Secondary info |
| subheadline | 15pt | Regular | Captions |
| footnote | 13pt | Regular | Small text |
| caption | 12pt | Regular | Labels |
| caption2 | 11pt | Regular | Tiny labels |
Spacing & Layout
- Margins: 16pt (compact), 20pt (regular)
- Content spacing: 8pt (tight), 16pt (standard), 24pt (loose)
- Touch targets: Minimum 44×44pt
- Button spacing: 12-24pt between tappable elements
Components
Navigation
Tab Bar
- 2-5 items only
- Primary destinations, not actions
- Icons + labels
- Selected state clearly indicated
Navigation Bar
- Title centered or large
- Back button on left
- Actions on right (max 2-3)
Controls
Buttons
- Filled: Primary actions
- Bordered: Secondary actions
- Plain: Tertiary actions
- Minimum height: 44pt
Text Fields
- Clear button when content present
- Placeholder text for hints
- Appropriate keyboard type
- Secure entry for passwords
Toggles
- Immediate effect (no save needed)
- Green = on, gray = off
- Label describes on-state
Lists
Standard
- Disclosure indicator → navigates to detail
- Checkmark → selection
- Detail disclosure → shows info
Swipe Actions
- Trailing: destructive (delete)
- Leading: constructive (archive, favorite)
Accessibility
Requirements
| Feature | Requirement |
|---|---|
| VoiceOver | Labels for all interactive elements |
| Dynamic Type | Support 200% text scaling |
| Color Contrast | 4.5:1 (normal), 7:1 (small text) |
| Motion | Respect reduce motion preference |
| Touch | 44×44pt minimum targets |
VoiceOver Labels
// Icon-only button
Button { } label: { Image(systemName: "trash") }
.accessibilityLabel("Delete")
// Combined elements
HStack { Image(...); Text(...) }
.accessibilityElement(children: .combine)
// Decorative
Image("decoration")
.accessibilityHidden(true)
SF Symbols
Rendering Modes
| Mode | Usage |
|---|---|
| Monochrome | Single color, default |
| Hierarchical | Depth through opacity |
| Palette | 2-3 custom colors |
| Multicolor | Predefined colors |
Common Symbols
| Category | Symbols |
|---|---|
| Navigation | house, magnifyingglass, person, gear |
| Actions | plus, minus, xmark, checkmark |
| Status | star, heart, bookmark, bell |
| Media | play, pause, forward, backward |
| Editing | pencil, trash, square.and.arrow.up |
Dark Mode
Must Support
- All custom colors need light/dark variants
- Images may need separate dark versions
- Avoid pure black (#000) — use system colors
- Test vibrancy and materials
Quick Links
Related Skills
ios-swiftui-generator— Generate HIG-compliant codeios-design-review— Validate HIG compliance