apple-hig

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

• iOS Patterns - Complete iOS component library
• macOS Patterns - Complete macOS component library
• watchOS Patterns - Complete watchOS component library
• tvOS Patterns - Complete tvOS component library
• visionOS Patterns - Complete visionOS patterns
• iOS Components Reference - All iOS UIKit/SwiftUI components
• macOS Components Reference - All macOS AppKit/SwiftUI comp

---

Content truncated.