ios-hig-design

Files (12)

• SKILL.md
• accessibility.md · references/
• app-icons.md · references/
• colors-depth.md · references/
• components.md · references/
• gestures.md · references/
• keyboard-input.md · references/
• navigation.md · references/
• privacy-permissions.md · references/
• system-integration.md · references/
• typography.md · references/
• widgets-extensions.md · references/

SKILL.md (first lines)

# iOS Human Interface Guidelines Design Skill

Framework for designing native iOS interfaces that feel intuitive, consistent, and aligned with Apple's design philosophy. Based on Apple's Human Interface Guidelines, the definitive resource for apps that integrate seamlessly with iPhone, iPad, and the Apple ecosystem.

## Core Principle

Apple's iOS design philosophy rests on three pillars: **clarity** (every element legible and purposeful), **deference** (the interface never overshadows the content it presents), and **depth** (layering, transitions, and realistic motion convey hierarchy and spatial relationships).

**The foundation:** The best iOS apps internalize this philosophy rather than following HIG rules mechanically. Native components, system conventions, and platform consistency aren't constraints---they're the reason iOS users trust and enjoy apps that feel like they belong.

## Scoring

**Goal: 10/10.** Score 1 point per satisfied row of the Quick Diagnostic (6 rows), plus up to 4 points for native idiom: +1 semantic colors/text styles throughout (no hardcoded values), +1 system controls over custom reimplementations, +1 standard gestures and meaningful haptics, +1 SF Symbols and correct app-icon shape. Bands: **9-10** = native, accessible, adapts to Dark Mode and Dynamic Type, zero foreign patterns; **5-6** = works but leaks Android idioms or hardcodes color/size; **<=3** = fails safe areas, touch targets, or VoiceOver. Always state the score and the specific improvements needed to reach 10/10.

## iOS Design Framework

### 1. Layout & Safe Areas

**Core concept:** iOS devices have specific screen dimensions, safe area insets, and hardware intrusions (notch, Dynamic Island, home indicator) that every layout must respect.

**Key insights:**
- Design for the smallest screen first (375pt width, iPhone SE)
- Safe areas protect content from the notch, Dynamic Island, and home indicator---never place interactive elements under them
- Standard content margins: 16-20pt from screen edges; spacing increments: 8 / 16 / 24pt
- Minimum touch target and list row height: 44pt

**Product applications:**

| Context | Layout Pattern | Example |
|---------|---------------|---------|
| **Status bar** | 20pt classic, 44-54pt on Dynamic Island devices | Time, signal, battery area |
| **Navigation bar** | 44pt standard row + ~52pt large title (~96pt total) | Back button, title, actions |
| **Content area** | Flexible, scrollable, respects safe area | Main app content |
| **Tab bar** | 49pt height, translucent with blur | 2-5 primary destinations |
| **Home indicator** | 34pt inset at bottom | System gesture area |

**Copy patterns:**
- Use `VStack { }`, which respects safe areas by default
- Use `.ignoresSafeArea()` only for backgrounds and decoration, never interactive content
- Test on multiple sizes, including iPhone SE and Pro Max

See [references/navigation.md](references/navigation.md) when laying out chrome---exact nav bar and tab bar dimensions, large-title behavior, and split-view rules.

### 2. Typography & Dynamic Type

**Core concept:** iOS uses the San Francisco (SF Pro) typeface with semantic text styles that automatically scale for accessibility via Dynamic Type. Semantic styles give consistent platform hierarchy; Dynamic Type lets users read at their preferred size without breaking layouts.

**Key insights:**
- Large Title: 34pt Bold; Title: 17pt Medium; Body: 17pt Regular; Caption: 12-13pt; secondary text: 15pt at 60% opacity
- Minimum text size 11pt (captions/secondary only)
- Line height at least 1.3x font size; optimal line length 35-50 characters on mobile
- Always left-aligned, non-justified text

**Product applications:**

| Context | Typography Pattern | Example |
|---------|-------------------|---------|
| **Screen titles** | `.largeTitle` or `.title` style | Large title collapses on scroll |
| **Body content** | `.body` style, 17pt | List items, descriptions |
| **Secondary info** | `.subheadline` or `.footnote` | Timestamps, metadata |
| **Tab labels** | 10pt SF text | Tab bar item labels |
| **Buttons** | `.body` weight semibold | Primary action text |

**Copy patterns:**
- Use `.font(.title)`, `.font(.body)`, `.font(.caption)` instead of hardcoded sizes; `@ScaledMetric` for custom spacing that scales
- Prefer weight and color variation over extreme size differences for hierarchy
- Test all layouts at the largest Dynamic Type size

See [references/typography.md](references/typography.md) when matching a design to exact specs---per-style hex values and the Dark Mode text-color mapping.

### 3. Color & Dark Mode

**Core concept:** iOS provides semantic system colors that automatically adapt between light and dark appearances while preserving contrast and hierarchy.

**Key insights:**
- Use `Color(.label)`, `Color(.secondaryLabel)`, `Color(.systemBackground)` instead of hardcoded colors
- `Color(.systemBlue)` is the default tint; `.systemRed` for destructive actions; `.systemGreen` for success
- Dark Mode inverts text colors and shifts backgrounds darker while keeping relative hierarchy; accent colors need lower brightness and higher saturation to pop
- Maintain 4.5:1 contrast in both modes; preview both during development

**Product applications:**

| Context | Color Pattern | Example |
|---------|--------------|---------|
| **Primary text** | `Color(.label)` | Adapts white/black per mode |
| **Secondary text** | `Color(.secondaryLabel)` | 60% opacity in both modes |
| **Backgrounds** | `Color(.systemBackground)` / `.secondarySystemBackground` | Layered depth |
| **Destructive actions** | `Color(.systemRed)` | Delete buttons, warnings |
| **Interactive tint** | App accent color or `.systemBlue` | Links, toggle states |

**Copy patterns:**
- Use `.preferredColorScheme(.light)` and `.dark` in previews to test both modes side by side
- Define custom colors in the Asset Catalog with light/dark variants, not in code
- Never assume a background is white or black; test with Increase Contrast enabled

See [references/colors-depth.md](references/colors-depth.md) when checking contrast---the full WCAG ratio table (normal text, large text, UI components) and the tertiary/grouped-background tokens.

### 4. Navigation Patterns

**Core concept:** iOS uses a layered navigation model: tab bars for primary destinations, navigation stacks for hierarchical drilling, and modals for focused tasks. Users rely on these patterns to know where they are and how to get back; reinventing them makes the app feel foreign.

**Key insights:**
- Tab bar: 2-5 primary destinations, always visible, remembers state per tab
- Navigation bar: back button (top-left), title (center or large), actions (top-right); large title collapses on scroll
- Modals for focused tasks; dismiss via swipe-down or explicit close button
- Never use hamburger menus---iOS users expect tab bars
- Search bar can sit below the nav bar, hidden until pulled down

**Product applications:**

| Context | Navigation Pattern | Example |
|---------|-------------------|---------|
| **App structure** | Tab bar with 3-5 tabs | Home, Search, Profile |
| **Content hierarchy** | Push navigation (drill-down) | List > Detail > Edit |
| **Focused tasks** | Modal presentation | Compose, settings, filters |
| **Search** | Pull-down search bar | Spotlight-style search |
| **Split view** | iPad sidebar + detail | Mail, Notes on iPad |

**Copy patterns:**

From wondelai/skills, MIT.

More from wondelai/skills