| name | apple-hig |
| description | Expert guide for designing iOS, macOS, watchOS, tvOS, and visionOS apps following Apple Human Interface Guidelines. Use when building Apple platform apps or interfaces, implementing SF Symbols, designing with iOS components, following accessibility guidelines, or creating native Apple experiences. Covers design principles, patterns, components, typography, color, layout, navigation, and platform-specific conventions. |
Apple Human Interface Guidelines Skill
Design exceptional experiences for Apple platforms following official Apple HIG principles, patterns, and best practices.
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 interface light and airy
Depth
- Visual layers and realistic motion convey hierarchy and vitality
- Touch and discoverability heighten delight
- Smooth transitions maintain spatial orientation
Platform-Specific Guidelines
###iOS / iPadOS
Key Characteristics:
- Touch-first interaction
- Portrait and landscape orientations
- Safe area respect (notch, Dynamic Island, home indicator)
- Gestures: swipe, tap, long press, pinch, rotate
Layout:
- Use SF Pro text (system font)
- Respect safe areas and readable content guides
- Adopt Auto Layout for adaptive interfaces
- Support Dynamic Type for accessibility
Navigation:
- Tab Bar: 3-5 primary destinations, always visible
- Navigation Bar: Hierarchical browsing, back button
- Search: Prominent when important to app experience
For complete iOS patterns, see references/ios.md
macOS
Key Characteristics:
- Mouse/trackpad/keyboard interaction
- Resizable windows
- Menu bar at top of screen
- Dock for launching apps
Layout:
- Use SF Pro (system font)
- Window controls (close, minimize, zoom) on left
- Sidebars for navigation (leading edge)
- Toolbars for primary actions
Interaction:
- Right-click context menus
- Keyboard shortcuts (⌘ Command key)
- Drag and drop between windows
For complete macOS patterns, see references/macos.md
watchOS
Key Characteristics:
- Glanceable information
- Quick interactions
- Digital Crown and side button
- Always-on display support
Layout:
- SF Compact (rounded system font for watches)
- Edge-to-edge content
- Vertical scrolling preferred
Interaction:
- Tap: Primary action
- Digital Crown: Scroll and zoom
- Force Touch: (older models) Context menu
- Raise to wake
For complete watchOS patterns, see references/watchos.md
tvOS
Key Characteristics:
- 10-foot viewing distance
- Siri Remote (directional pad + touch)
- Focus-driven navigation
- Parallax effects
Layout:
- SF Pro (system font)
- Large touch targets (minimum 250pt)
- Grid layouts for content
- Focus engine handles navigation
Interaction:
- Directional: Up/down/left/right focus movement
- Select (click): Primary action
- Menu: Back navigation
- Siri: Voice commands
For complete tvOS patterns, see references/tvos.md
visionOS
Key Characteristics:
- Spatial computing environment
- 3D depth and windows
- Eye tracking + hand gestures
- Immersive and windowed modes
Layout:
- Depth and layers in 3D space
- Glass materials with vibrancy
- SF Pro (system font)
Interaction:
- Gaze + pinch: Primary selection
- Hand gestures: Tap, drag, rotate
- Voice: Siri commands
- Immersion: Dial controls environment blend
For complete visionOS patterns, see references/visionos.md
Typography
SF Symbols
- 6,000+ icons designed by Apple
- Variable weight and scale (Ultralight to Black)
- Multicolor, hierarchical, palette, monochrome rendering modes
- SF Symbols 6 latest version
Usage:
Image(systemName: "star.fill")
Image(systemName: "heart.circle.fill")
Guidelines:
- Match symbol weight to text weight
- Use filled variants for selected states
- Leverage multicolor for semantic meaning
San Francisco (SF)
Apple's system font family optimized for legibility:
- SF Pro: iOS, macOS, tvOS
- SF Compact: watchOS (rounded)
- SF Mono: Code and tabular data
- SF Arabic, SF Hebrew: Localized variants
Text Styles (Dynamic Type):
- Large Title, Title 1/2/3
- Headline, Body, Callout
- Subheadline, Footnote, Caption 1/2
Always support Dynamic Type for accessibility.
Color
System Colors
Use semantic colors that adapt to light/dark mode:
- Label: Primary text
- Secondary Label: Secondary text
- Tertiary Label: Disabled text
- System Background: Main background
- System Fill: Fill colors for UI elements
Accent Colors
- Use accent color for interactive elements (buttons, links)
- Ensure sufficient contrast (WCAG AA: 4.5:1 for text)
- Test in both light and dark modes
Vibrancy
- Materials: Blur backgrounds to show depth
- Vibrancy: Colors that adapt to material behind them
Components
iOS Components
Buttons:
- Filled, Tinted, Gray, Plain styles
- Size: Small, Medium, Large
- Use SF Symbols for icons
Lists:
- Inset grouped style (modern iOS)
- Swipe actions (leading/trailing)
- Context menus
Sheets:
- Modal presentation
- Detents: medium, large
- Drag to dismiss
Navigation:
- Large titles (iOS 11+)
- Inline titles for scrolled state
- Search bar integration
For all iOS components, see references/ios-components.md
macOS Components
Windows:
- Standard, utility, panel types
- Titlebar styles: default, transparent, unified
- Sidebars and split views
Toolbars:
- Icon + text or icon-only buttons
- Segmented controls for views
- Search fields
For all macOS components, see references/macos-components.md
Layout & Spacing
Grid System
- 8pt grid as baseline (iOS, macOS)
- Margins: 16pt (iPhone), 20pt (iPad), 20pt (Mac)
- Spacing: 8pt, 16pt, 24pt, 32pt standard increments
Safe Areas
- Top: Status bar, notch, Dynamic Island
- Bottom: Home indicator (iPhone), dock (iPad)
- Leading/Trailing: Avoid placing content too close to edges
Adaptive Layouts
- Size classes: Compact, Regular (width/height)
- Trait variations: Light/Dark mode, Dynamic Type sizes
- Support landscape and portrait
Accessibility
VoiceOver
- Provide meaningful accessibility labels
- Group related elements
- Ensure logical focus order
Dynamic Type
- Support all text sizes (from -3 to +7 default)
- Test at Accessibility sizes (AX1-AX5)
- Use scalable fonts and layouts
Color Contrast
- WCAG AA: 4.5:1 for normal text, 3:1 for large text
- WCAG AAA: 7:1 for normal text, 4.5:1 for large text
- Test with grayscale and color blindness modes
Reduce Motion
- Provide alternatives to animations
- Use crossfade instead of slides when motion reduced
Interaction Patterns
Gestures (iOS/iPadOS)
- Tap: Primary action
- Long press: Context menu or drag preview
- Swipe: Navigate, delete, reveal actions
- Pinch: Zoom in/out
- Rotate: Rotate content
- Edge swipe: Back navigation
Haptics (iOS)
- Impact: Physical collision or boundary
- Notification: Success, warning, error
- Selection: Picker or toggle change
Keyboard Shortcuts (macOS/iPadOS)
- ⌘ Command: Primary actions (⌘N new, ⌘S save)
- ⇧ Shift: Modify command (⇧⌘S save as)
- ⌥ Option: Alternative behavior
- ⌃ Control: Context-specific
Animation & Motion
Duration
- Quick: 0.2-0.3s (button press, small transitions)
- Standard: 0.3-0.5s (screen transitions, sheets)
- Slow: 0.5-0.8s (complex, spatial transitions)
Easing
- Ease In/Out: Standard for most animations
- Spring: Natural, playful motion
- Linear: Progress indicators only
Principles
- Continuity: Elements smoothly transition
- Anticipation: Hint at upcoming change
- Follow-through: Motion completes naturally
Dark Mode
Guidelines
- Test both modes during development
- Use semantic colors (system colors adapt automatically)
- Elevate surfaces with subtle color increases (not just lighter)
- Avoid pure black (#000000) — use dark gray for true blacks
Materials
- iOS:
.systemBackground, .secondarySystemBackground, .tertiarySystemBackground
- macOS:
.windowBackgroundColor, .controlBackgroundColor
Platform Integration
iOS Features
- Widgets: Home Screen, Lock Screen, StandBy
- Live Activities: Dynamic Island, Lock Screen
- App Clips: Lightweight app experiences
- Shortcuts: Siri Shortcuts integration
- App Intents: System-level actions
macOS Features
- Menu Bar: Global app menus
- Dock: App icon with badges
- Touch Bar: (older MacBook Pros)
- Extensions: Share, Today, Finder
- Continuity: Handoff, Universal Clipboard
Quick Reference
| Platform | Font | Grid | Safe Areas | Primary Interaction |
|---|
| iOS | SF Pro | 8pt | Yes (notch/home indicator) | Touch |
| macOS | SF Pro | 8pt | No | Mouse/keyboard |
| watchOS | SF Compact | - | Yes (round/square) | Digital Crown + tap |
| tvOS | SF Pro | - | Yes (overscan) | Siri Remote focus |
| visionOS | SF Pro | - | Yes (spatial bounds) | Gaze + gesture |
Resources
Based on Apple Human Interface Guidelines - https://developer.apple.com/design/human-interface-guidelines
