1---2name: apple-human-interface-guidelines3description: Apple Human Interface Guidelines (HIG) reference for designing iOS, iPadOS, macOS, tvOS, visionOS, watchOS apps. Covers UI components, layout, accessibility, typography, navigation, inputs, and platform technologies. Use when designing Apple platform UIs, reviewing SwiftUI/UIKit patterns, or applying HIG design principles to any app.4---56# Apple Human Interface Guidelines78Comprehensive design reference covering all Apple platforms. Use this skill when:9- Designing or reviewing UI for any Apple platform10- Implementing SwiftUI or UIKit components following Apple conventions11- Making decisions about layout, typography, color, accessibility, or interaction patterns12- Integrating Apple technologies (Apple Pay, HealthKit, Game Center, etc.)13- Applying Apple's design principles to web or cross-platform development1415## How to Use This Skill16171. Identify the task category (platform design, component, pattern, input, or technology)182. Find the matching reference below193. Load the specific reference file(s) needed204. For cross-cutting concerns (accessibility, color, typography), load the relevant foundations reference alongside any component reference2122---2324## Quick Reference: Common Tasks2526| Task | Load These References |27|---|---|28| Building a login/auth screen | `foundations/privacy.md`, `technologies/sign-in-with-apple.md`, `patterns/managing-accounts.md` |29| Designing a settings screen | `patterns/patterns-settings.md`, `components/selection-and-input/toggles-guidelines.md` |30| Choosing colors / dark mode | `foundations/color-guidelines.md`, `foundations/dark-mode.md` |31| Implementing navigation | `components/navigation-and-search/tab-bars.md`, `components/navigation-and-search/sidebars.md`, `components/layout-and-organization/split-views.md` |32| Typography / text sizing | `foundations/typography-guidelines.md`, `foundations/writing-guidelines.md` |33| Accessibility audit | `foundations/accessibility.md`, `technologies/voiceover-guidelines.md` |34| Designing a form | `patterns/entering-data.md`, `components/selection-and-input/text-fields.md`, `components/selection-and-input/pickers.md` |35| Building a list/table view | `components/layout-and-organization/lists-and-tables.md`, `components/presentation/scroll-views.md` |36| Adding search | `patterns/searching-patterns.md`, `components/navigation-and-search/search-fields.md` |37| Creating an app icon | `foundations/app-icons.md` |38| Designing notifications | `patterns/managing-notifications.md`, `components/system-experiences/notifications-component.md` |39| Building widgets | `components/system-experiences/widgets-design-guidelines.md` |40| Implementing payments | `technologies/apple-pay.md`, `technologies/in-app-purchase.md` |41| Designing charts/data viz | `patterns/charting-data.md`, `components/content/components-charts.md` |42| Building for visionOS | `getting-started/designing-for-visionos.md`, `foundations/spatial-layout.md`, `foundations/immersive-experiences.md` |43| Modal presentations | `patterns/modality-guidelines.md`, `components/presentation/sheets-guidelines.md`, `components/presentation/alerts-component.md` |44| Onboarding flow | `patterns/onboarding.md`, `patterns/launching.md` |45| Video/audio playback | `patterns/playing-video.md`, `patterns/playing-audio.md` |46| Game design | `getting-started/designing-for-games.md`, `inputs/game-controls.md`, `technologies/game-center.md` |47| RTL / internationalization | `foundations/right-to-left.md`, `foundations/inclusion-guidelines.md` |48| Sharing / collaboration | `patterns/collaboration-and-sharing.md`, `components/menus-and-actions/activity-views.md` |49| Generative AI features | `technologies/generative-ai-guidelines.md`, `technologies/machine-learning-design.md` |5051---5253## 1. Getting Started — Platform Design Fundamentals5455Load these when starting design for a specific platform or needing platform constraints (screen sizes, input methods, ergonomics).5657| Reference | When to Consult |58|---|---|59| `reference/getting-started/designing-for-ios.md` | iPhone app design: display characteristics, ergonomics, control placement, appearance adaptation |60| `reference/getting-started/designing-for-ipados.md` | iPad app design: large display, multitasking, multiple input modes, widgets |61| `reference/getting-started/designing-for-macos.md` | macOS app design: window management, menu bar, keyboard shortcuts, Dock |62| `reference/getting-started/designing-for-tvos.md` | tvOS/Apple TV: 8+ ft viewing, focus system, Siri Remote, cinematic presentation |63| `reference/getting-started/designing-for-visionos.md` | visionOS/Vision Pro: spatial design, immersion levels, eye/hand input, comfort |64| `reference/getting-started/designing-for-watchos.md` | watchOS: glanceable UI, Digital Crown, complications, Always On |65| `reference/getting-started/designing-for-games.md` | Game design across platforms: text sizes, controls, onboarding, accessibility |6667## 2. Foundations — Cross-Cutting Design Principles6869Core design principles applicable across platforms. Many of these apply to **web and cross-platform development** too.7071### Universally Applicable (any platform)72| Reference | When to Consult |73|---|---|74| `reference/foundations/accessibility.md` | Vision, hearing, mobility, speech, cognitive accessibility requirements and contrast ratios |75| `reference/foundations/color-guidelines.md` | Color choices, theming, contrast, system color specs, dark mode color values |76| `reference/foundations/dark-mode.md` | Dark mode implementation: adaptive colors, contrast (4.5:1 min), icon/image adaptation |77| `reference/foundations/typography-guidelines.md` | Font sizes, weights, leading, Dynamic Type specs, text styles per platform |78| `reference/foundations/writing-guidelines.md` | UX writing: voice/tone, button labels, error messages, capitalization |79| `reference/foundations/inclusion-guidelines.md` | Inclusive language, diverse representation, cultural sensitivity |80| `reference/foundations/layout-guidelines.md` | Visual hierarchy, adaptive layout, safe areas, device dimensions |81| `reference/foundations/motion-guidelines.md` | Animation best practices, accessibility, frame rates |82| `reference/foundations/privacy.md` | Permission flows, purpose strings, tracking rules, data protection |83| `reference/foundations/branding-guidelines.md` | Brand integration: accent colors, custom fonts, logos, content-first design |8485### Apple Platform–Specific86| Reference | When to Consult |87|---|---|88| `reference/foundations/app-icons.md` | App icon design: layers, shapes, sizes, dark/tinted, platform-specific specs |89| `reference/foundations/icons-guidelines.md` | Interface icons/glyphs, SF Symbol name mapping, macOS document icons |90| `reference/foundations/images-guidelines.md` | Image resolution, scale factors, file formats, tvOS layered images |91| `reference/foundations/sf-symbols.md` | SF Symbols: rendering modes, variable color, weights, animations, custom symbols |92| `reference/foundations/materials-guidelines.md` | Liquid Glass, vibrancy, material thickness, platform-specific materials |93| `reference/foundations/right-to-left.md` | RTL interfaces: text alignment, numeral handling, control/image flipping |94| `reference/foundations/spatial-layout.md` | visionOS: field of view, depth, 60pt min center-to-center spacing |95| `reference/foundations/immersive-experiences.md` | visionOS immersion: mixed/progressive/full, passthrough, comfort |9697## 3. Patterns — Interaction & UX Patterns9899Recurring UX patterns. Many are **applicable beyond Apple platforms**.100101### Data & Content102| Reference | When to Consult |103|---|---|104| `reference/patterns/charting-data.md` | Data visualization: chart simplicity, accessibility, chart type selection |105| `reference/patterns/entering-data.md` | Form design: validation, secure input, offering choices over text |106| `reference/patterns/searching-patterns.md` | Search: field placement, suggestions, privacy, Spotlight integration |107| `reference/patterns/file-management.md` | Document apps: auto-save, Quick Look, open/save dialogs |108109### Feedback & Status110| Reference | When to Consult |111|---|---|112| `reference/patterns/feedback-patterns.md` | Status, errors, task completion, warnings |113| `reference/patterns/loading-patterns.md` | Progress indicators, placeholder content, background downloads |114| `reference/patterns/playing-haptics.md` | Haptic feedback: predefined patterns, custom haptics |115116### Lifecycle & Navigation117| Reference | When to Consult |118|---|---|119| `reference/patterns/launching.md` | Launch screens (no text/branding), state restoration |120| `reference/patterns/onboarding.md` | First-run: interactive teaching, TipKit, permission timing |121| `reference/patterns/modality-guidelines.md` | Modal usage: when, dismiss conventions, avoiding stacked modals |122| `reference/patterns/going-full-screen.md` | Full-screen modes: layout, control visibility, gesture deferral |123| `reference/patterns/multitasking.md` | App switching, background tasks, multi-window |124125### Media126| Reference | When to Consult |127|---|---|128| `reference/patterns/playing-audio.md` | Audio categories, interruptions, Spatial Audio |129| `reference/patterns/playing-video.md` | Video playback: aspect ratio, PiP, system player, visionOS immersive video |130| `reference/patterns/live-viewing-apps.md` | Live TV/streaming: EPG, content footers, cloud DVR |131132### Social & Commerce133| Reference | When to Consult |134|---|---|135| `reference/patterns/collaboration-and-sharing.md` | Share button, collaboration popover, share sheet |136| `reference/patterns/managing-accounts.md` | Login flows, passkeys, biometrics, account deletion requirements |137| `reference/patterns/managing-notifications.md` | Interruption levels, Focus, marketing notification rules |138| `reference/patterns/ratings-and-reviews.md` | Rating prompts: timing, frequency, system prompt |139140### Utility141| Reference | When to Consult |142|---|---|143| `reference/patterns/drag-and-drop.md` | Drag & drop: move/copy, visual feedback, multi-item, accessibility |144| `reference/patterns/offering-help.md` | TipKit, tooltips (macOS/visionOS), contextual help |145| `reference/patterns/printing-pattern.md` | Print action placement, macOS print panel customization |146| `reference/patterns/undo-and-redo.md` | Undo/redo: multi-level, platform-specific shortcuts/gestures |147| `reference/patterns/patterns-settings.md` | Settings placement, defaults, macOS settings windows |148| `reference/patterns/workouts-pattern.md` | Fitness/workout UI: session screens, metrics, Activity rings |149150## 4. Components — UI Building Blocks151152### Content153| Reference | When to Consult |154|---|---|155| `reference/components/content/components-charts.md` | Chart components: mark types, axes, color, interaction, accessibility |156| `reference/components/content/image-views.md` | Image display: overlays, animation, tvOS layered, visionOS spatial |157| `reference/components/content/text-views.md` | Multiline text views: when to use, legibility, editing |158| `reference/components/content/web-views.md` | Embedded web content: navigation, avoiding browser replication |159160### Layout & Organization161| Reference | When to Consult |162|---|---|163| `reference/components/layout-and-organization/components-boxes.md` | GroupBox/NSBox: grouping content, titles, nesting |164| `reference/components/layout-and-organization/collections-component.md` | Grid/row visual layouts: galleries, padding, dynamic changes |165| `reference/components/layout-and-organization/column-views.md` | macOS column (browser) views for deep hierarchies |166| `reference/components/layout-and-organization/disclosure-controls.md` | Disclosure triangles/buttons: expandable sections |167| `reference/components/layout-and-organization/components-labels.md` | Static labels: color hierarchy (primary→quaternary), legibility |168| `reference/components/layout-and-organization/lists-and-tables.md` | Lists/tables: styles, editing, selection, per-platform rules |169| `reference/components/layout-and-organization/lockups-tvos.md` | tvOS lockups: cards, posters, focus expansion |170| `reference/components/layout-and-organization/outline-views.md` | macOS outline views: hierarchical data, sorting, disclosure |171| `reference/components/layout-and-organization/split-views.md` | Multi-pane layouts: dividers, resizing, per-platform rules |172| `reference/components/layout-and-organization/tab-views.md` | Tabbed content panes: max tabs, labeling, alternatives |173174### Menus & Actions175| Reference | When to Consult |176|---|---|177| `reference/components/menus-and-actions/activity-views.md` | Share sheets: custom activities, icon sizing |178| `reference/components/menus-and-actions/buttons.md` | Button design: hit regions, styles, roles, per-platform types |179| `reference/components/menus-and-actions/context-menus.md` | Context menus: ordering, previews, destructive actions |180| `reference/components/menus-and-actions/dock-menus.md` | macOS Dock menus |181| `reference/components/menus-and-actions/edit-menus.md` | Edit menus: system vs custom, per-platform behavior |182| `reference/components/menus-and-actions/home-screen-quick-actions.md` | iOS/iPadOS long-press quick actions (4-action limit) |183| `reference/components/menus-and-actions/menus-design-guidelines.md` | Menu design: labeling, icons, grouping, submenus |184| `reference/components/menus-and-actions/ornaments-visionos.md` | visionOS ornaments: window-associated floating controls |185| `reference/components/menus-and-actions/pop-up-buttons.md` | Pop-up buttons: mutually exclusive option selection |186| `reference/components/menus-and-actions/pull-down-buttons.md` | Pull-down buttons: action menus, destructive actions |187| `reference/components/menus-and-actions/menu-bar-guidelines.md` | macOS/iPadOS menu bar: standard menus, required items, shortcuts |188| `reference/components/menus-and-actions/toolbars.md` | Toolbars: item grouping, overflow, navigation bars |189190### Navigation & Search191| Reference | When to Consult |192|---|---|193| `reference/components/navigation-and-search/path-controls.md` | macOS path controls: standard/pop-up styles |194| `reference/components/navigation-and-search/search-fields.md` | Search fields: placement, scope controls, tokens |195| `reference/components/navigation-and-search/sidebars.md` | Sidebars: hierarchy, hide/show, per-platform rules |196| `reference/components/navigation-and-search/tab-bars.md` | Tab bars: tab count, badges, Liquid Glass, sidebar adaptation |197| `reference/components/navigation-and-search/token-fields.md` | macOS token fields: text-to-token conversion |198199### Presentation200| Reference | When to Consult |201|---|---|202| `reference/components/presentation/action-sheets.md` | Action sheets: destructive buttons, Cancel, vs alerts/menus |203| `reference/components/presentation/alerts-component.md` | Alerts: titles, button placement, destructive styling |204| `reference/components/presentation/page-controls.md` | Page indicators: placement, interaction, customization |205| `reference/components/presentation/panels.md` | macOS panels/HUDs: floating supplementary windows |206| `reference/components/presentation/popovers.md` | Popovers: positioning, sizing, dismissal |207| `reference/components/presentation/scroll-views.md` | Scroll views: nesting, paging, edge effects, zoom |208| `reference/components/presentation/sheets-guidelines.md` | Sheets: detents, button placement, grabber, modal/nonmodal |209| `reference/components/presentation/windows-component.md` | Windows: types, states, visionOS volumes, glass backgrounds |210211### Selection & Input212| Reference | When to Consult |213|---|---|214| `reference/components/selection-and-input/color-wells.md` | Color picker/wells |215| `reference/components/selection-and-input/combo-boxes.md` | macOS combo boxes |216| `reference/components/selection-and-input/digit-entry-views.md` | tvOS PIN/digit entry |217| `reference/components/selection-and-input/image-wells.md` | macOS image wells (drag-and-drop image editing) |218| `reference/components/selection-and-input/pickers.md` | Pickers/date pickers: styles, modes, per-platform |219| `reference/components/selection-and-input/segmented-controls.md` | Segmented controls: modes, segment limits |220| `reference/components/selection-and-input/sliders.md` | Sliders: direction, tick marks, labels, circular (macOS) |221| `reference/components/selection-and-input/components-steppers.md` | Steppers: value visibility, pairing with text fields |222| `reference/components/selection-and-input/text-fields.md` | Text fields: sizing, placeholder, validation, keyboard types |223| `reference/components/selection-and-input/toggles-guidelines.md` | Toggles/switches/checkboxes/radio buttons |224| `reference/components/selection-and-input/virtual-keyboards.md` | Virtual keyboards: types, custom input views, extensions |225226### Status227| Reference | When to Consult |228|---|---|229| `reference/components/status/activity-rings.md` | Activity rings: colors, backgrounds, label RGB values |230| `reference/components/status/gauges.md` | Gauges/level indicators: styles, gradients |231| `reference/components/status/progress-indicators.md` | Progress bars, spinners, refresh controls |232| `reference/components/status/rating-indicators.md` | Star ratings (macOS only) |233234### System Experiences235| Reference | When to Consult |236|---|---|237| `reference/components/system-experiences/app-shortcuts.md` | App Shortcuts: Siri, Spotlight, voice interaction design |238| `reference/components/system-experiences/watchos-complications.md` | watchOS complications: families, image sizes, templates |239| `reference/components/system-experiences/controls-system-experience.md` | iOS Controls: Control Center, Lock Screen, Action button |240| `reference/components/system-experiences/live-activities.md` | Live Activities: anatomy, layout, dimensions per device |241| `reference/components/system-experiences/notifications-component.md` | Notification content, actions (4 max), badges, watchOS looks |242| `reference/components/system-experiences/status-bars.md` | iOS/iPadOS status bar: visibility, readability |243| `reference/components/system-experiences/top-shelf.md` | tvOS Top Shelf: templates, image dimensions |244| `reference/components/system-experiences/watch-faces.md` | watchOS watch faces: sharing, complications, previews |245| `reference/components/system-experiences/widgets-design-guidelines.md` | Widgets: families, sizes, rendering modes, exact dimensions |246247## 5. Inputs — Interaction Methods248249| Reference | When to Consult |250|---|---|251| `reference/inputs/action-button.md` | iPhone/Watch Action button: labeling (3-word max), behaviors |252| `reference/inputs/apple-pencil-and-scribble.md` | Apple Pencil: hover, double tap, squeeze, Scribble, PencilKit |253| `reference/inputs/camera-control.md` | iPhone 16 Camera Control: overlays, viewfinder layout |254| `reference/inputs/digital-crown.md` | Digital Crown: watchOS scrolling/navigation, visionOS system use |255| `reference/inputs/visionos-eyes-input.md` | visionOS gaze: hover effects, spacing (60pt centers), comfort |256| `reference/inputs/focus-and-selection.md` | Focus navigation: iPadOS, tvOS (5 states), visionOS |257| `reference/inputs/game-controls.md` | Game input: touch, game controllers, keyboard, visionOS spatial |258| `reference/inputs/gestures.md` | Gesture specs per platform, custom gestures, visionOS direct/indirect |259| `reference/inputs/gyro-and-accelerometer.md` | Motion sensing: permission copy, accessibility |260| `reference/inputs/keyboards-guidelines.md` | Physical keyboard shortcuts, modifier keys, Full Keyboard Access |261| `reference/inputs/nearby-interactions.md` | Ultra Wideband proximity/spatial awareness |262| `reference/inputs/pointing-devices.md` | Pointer/mouse/trackpad: effects, hit regions, magnetism |263| `reference/inputs/remotes-tvos.md` | Siri Remote: gestures, button behavior, focus integration |264265## 6. Technologies — Platform Integrations266267### Payments & Commerce268| Reference | When to Consult |269|---|---|270| `reference/technologies/apple-pay.md` | Apple Pay: button types/styles/sizing, checkout, subscriptions |271| `reference/technologies/in-app-purchase.md` | IAP: subscription sign-up, offer codes, refunds, Family Sharing |272| `reference/technologies/tap-to-pay-on-iphone.md` | Tap to Pay: merchant flows, checkout UX, error handling |273274### Identity & Privacy275| Reference | When to Consult |276|---|---|277| `reference/technologies/sign-in-with-apple.md` | Sign in with Apple: button specs (min 140×30pt), custom buttons, UX flow |278| `reference/technologies/id-verifier.md` | ID Verifier: age/identity verification, data minimization |279| `reference/technologies/wallet-design-guidelines.md` | Wallet passes: styles, image specs, order tracking, identity |280281### Health & Fitness282| Reference | When to Consult |283|---|---|284| `reference/technologies/healthkit-guidelines.md` | HealthKit: privacy, Activity rings rules, Health icon usage |285| `reference/technologies/carekit.md` | CareKit: task views, charts, contacts, care plans |286| `reference/technologies/researchkit.md` | ResearchKit: onboarding flow order, surveys, active tasks |287288### Media & Communication289| Reference | When to Consult |290|---|---|291| `reference/technologies/airplay-guidelines.md` | AirPlay: streaming, mirroring, icon specs, terminology |292| `reference/technologies/shareplay.md` | SharePlay: activity sharing, visionOS Persona templates |293| `reference/technologies/live-photos.md` | Live Photos: frame adjustments, sharing, badges |294| `reference/technologies/shazamkit.md` | ShazamKit: mic privacy, iCloud opt-in |295| `reference/technologies/imessage-apps-and-stickers.md` | iMessage apps/stickers: views, icon/sticker sizes, formats |296297### AI & Machine Learning298| Reference | When to Consult |299|---|---|300| `reference/technologies/generative-ai-guidelines.md` | Gen AI: transparency, privacy, hallucination mitigation |301| `reference/technologies/machine-learning-design.md` | ML UX: feedback, calibration, confidence, corrections |302303### Platform Extensions304| Reference | When to Consult |305|---|---|306| `reference/technologies/app-clips.md` | App Clips: card specs, Code sizing, privacy constraints |307| `reference/technologies/mac-catalyst.md` | Mac Catalyst: iPad→Mac adaptation, idiom selection, navigation mapping |308| `reference/technologies/carplay-design-guidelines.md` | CarPlay: layout specs, icon sizes, audio behavior |309| `reference/technologies/siri-integration-guidelines.md` | Siri/Shortcuts: intents, voice UX, shortcut phrases, custom UI |310311### Accessibility312| Reference | When to Consult |313|---|---|314| `reference/technologies/voiceover-guidelines.md` | VoiceOver: alt labels, image descriptions, reading order, rotor |315316### Other Integrations317| Reference | When to Consult |318|---|---|319| `reference/technologies/always-on-display.md` | Always On: privacy redaction, dimming, layout consistency |320| `reference/technologies/augmented-reality.md` | AR/ARKit: object placement, coaching overlays, multiuser |321| `reference/technologies/game-center.md` | Game Center: access point, achievements, leaderboards, image specs |322| `reference/technologies/homekit-guidelines.md` | HomeKit: terminology, setup flows, Siri patterns, branding |323| `reference/technologies/icloud-guidelines.md` | iCloud: syncing, conflict resolution, storage, game saves |324| `reference/technologies/maps-guidelines.md` | MapKit: annotations, overlays, clustering, place cards |325| `reference/technologies/nfc-guidelines.md` | NFC: scanning UX, terminology, background tag reading |326| `reference/technologies/photo-editing-extensions.md` | Photo editing extensions: toolbar, previews, cancel confirmation |327328---329330## Cross-Platform Applicability331332These references contain principles useful **beyond Apple platforms** (web, Android, cross-platform):333334- **Accessibility** (`foundations/accessibility.md`, `technologies/voiceover-guidelines.md`) — contrast ratios, screen reader patterns, cognitive considerations335- **Color & Dark Mode** (`foundations/color-guidelines.md`, `foundations/dark-mode.md`) — theming, contrast, adaptive design336- **Typography** (`foundations/typography-guidelines.md`) — hierarchy, sizing, Dynamic Type concepts337- **Writing** (`foundations/writing-guidelines.md`) — UX copy, error messages, tone338- **Inclusion** (`foundations/inclusion-guidelines.md`) — inclusive language, representation339- **Privacy** (`foundations/privacy.md`) — permission patterns, data minimization340- **Motion** (`foundations/motion-guidelines.md`) — animation accessibility, reduced motion341- **Layout** (`foundations/layout-guidelines.md`) — responsive/adaptive patterns, visual hierarchy342- **Generative AI** (`technologies/generative-ai-guidelines.md`) — responsible AI design principles343- **ML Design** (`technologies/machine-learning-design.md`) — confidence display, correction patterns344- **Patterns** — Most patterns (onboarding, feedback, loading, modality, search, settings, data entry) encode universal UX wisdom
milistu