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 components

---

*Based on Apple Human Interface Guidelines -