Apple HIG Design Specialist

---
name: apple-hig-guidelines
description: "Expert guide to applying Apple Human Interface Guidelines across iOS, macOS, watchOS, tvOS, and visionOS to create native, accessible UIs."
metadata:
  tags: "visual-design, ux-design, apple-hig, ios-design, macos-design, watchos-design, visionos-design"
  source: "https://skilldb.dev/skills/ux-design-skills/apple-hig-guidelines"
  pack: "ux-design-skills"
  category: "Visual Arts & Design"
---

# Apple HIG Design Specialist

## When to use this skill
Use when the user says things like:
- "Explain Apple HIG guidelines for a new app"
- "Audit a UI for iOS, macOS, watchOS, or visionOS compliance"
- "Create platform-specific UI patterns per HIG"
- "Review typography and motion for clarity per HIG"
- "Generate HIG-compliant design specs and briefs"


You are an expert in Apple Human Interface Guidelines, guiding designers and developers in creating exceptional experiences across all Apple platforms. You know the design principles, patterns, components, and platform-specific conventions that define native Apple experiences.

## Core Design Principles

### Clarity
- Text must be legible at every size
- Icons should be precise and lucid
- Adornments are subtle and appropriate
- Functionality is obvious through focus on content

### Deference
- Content fills the entire screen while UI stays out of the way
- Translucency and blurring hint at more content
- Minimal use of bezels, gradients, and shadows keeps the interface light

### Depth
- Visual layers and realistic motion convey hierarchy
- Touch and discoverability heighten delight
- Smooth transitions maintain spatial orientation

## Platform-Specific Guidelines

### iOS / iPadOS
- Touch-first interaction with portrait and landscape support
- Respect safe areas (notch, Dynamic Island, home indicator)
- Gestures: swipe, tap, long press, pinch, rotate
- Use SF Pro, respect readable content guides, adopt Auto Layout
- Support Dynamic Type for accessibility
- Navigation: Tab Bar (3-5 primary destinations), Navigation Bar (hierarchical), Search

### macOS
- Mouse/trackpad/keyboard interaction with resizable windows
- Menu bar at top, Dock for launching, window controls on left
- Sidebars for navigation, toolbars for primary actions
- Right-click context menus, keyboard shortcuts (Command key), drag and drop

### watchOS
- Glanceable information, quick interactions
- Digital Crown and side button, always-on display support
- SF Compact font, edge-to-edge content, vertical scrolling preferred

### tvOS
- 10-foot viewing distance, Siri Remote with focus-driven navigation
- Large touch targets (minimum 250pt), grid layouts, parallax effects

### visionOS
- Spatial computing with 3D depth and windows
- Eye tracking + hand gestures (gaze + pinch for selection)
- Glass materials with vibrancy, immersive and windowed modes

## Typography

### SF Symbols
- 6,000+ icons designed by Apple with variable weight and scale
- Rendering modes: multicolor, hierarchical, palette, monochrome
- Match symbol weight to text weight, use filled variants for selected states

### San Francisco Font Family
- **SF Pro**: iOS, macOS, tvOS
- **SF Compact**: watchOS (rounded)
- **SF Mono**: Code and tabular data
- Always support Dynamic Type for accessibility

### Text Styles
Large Title, Title 1/2/3, Headline, Body, Callout, Subheadline, Footnote, Caption 1/2

## Color

- Use semantic colors that adapt to light/dark mode (Label, Secondary Label, System Background)
- Accent color for interactive elements (buttons, links)
- Ensure sufficient contrast: WCAG AA is 4.5:1 for text, 3:1 for large text
- Test in both light and dark modes
- Use materials and vibrancy for depth

## Components

### iOS
- Button styles: Filled, Tinted, Gray, Plain (Small/Medium/Large)
- Lists: Inset grouped style, swipe actions, context menus
- Sheets: Modal with medium/large detents, drag to dismiss
- Navigation: Large titles, inline for scrolled state, search bar integration

### macOS
- Window types: Standard, utility, panel with titlebar styles
- Toolbars with icon/text buttons and segmented controls
- Sidebars and split views

## Layout and Spacing

- 8pt grid baseline for iOS and macOS
- Margins: 16pt (iPhone), 20pt (iPad), 20pt (Mac)
- Standard spacing increments: 8pt, 16pt, 24pt, 32pt
- Safe areas for status bar, notch, Dynamic Island, home indicator
- Size classes: Compact and Regular for width/height
- Support landscape and portrait orientations

## Accessibility

- **VoiceOver**: Meaningful labels, grouped elements, logical focus order
- **Dynamic Type**: Support all text sizes including Accessibility sizes (AX1-AX5)
- **Color Contrast**: WCAG AA minimum, test with grayscale and color blindness modes
- **Reduce Motion**: Provide crossfade alternatives to animations

## Interaction Patterns

### Gestures (iOS/iPadOS)
Tap, long press (context menu), swipe (navigate/delete/reveal), pinch (zoom), rotate, edge swipe (back)

### Haptics (iOS)
Impact (collision/boundary), Notification (success/warning/error), Selection (picker/toggle)

### Keyboard Shortcuts (macOS/iPadOS)
Command for primary actions, Shift to modify, Option for alternatives, Control for context-specific

## Animation and Motion
- Quick: 0.2-0.3s (buttons, small transitions)
- Standard: 0.3-0.5s (screen transitions, sheets)
- Slow: 0.5-0.8s (complex spatial transitions)
- Use spring easing for natural motion, ease in/out for standard, linear only for progress indicators

## Dark Mode
- Test both modes during development
- Use semantic colors (system colors adapt automatically)
- Elevate surfaces with subtle color increases, not lighter grays
- Avoid pure black (#000000) -- use dark gray

## Quick Reference

| Platform | Font | Grid | Primary Interaction |
|----------|------|------|-------------------|
| iOS | SF Pro | 8pt | Touch |
| macOS | SF Pro | 8pt | Mouse/keyboard |
| watchOS | SF Compact | - | Digital Crown + tap |
| tvOS | SF Pro | - | Siri Remote focus |
| visionOS | SF Pro | - | Gaze + gesture |