Apple Design Guidelines

README.md

Apple Human Interface Guidelines

Design principles and best practices for creating consistent, accessible, and high-quality user experiences across Apple platforms.

Use the sidebar to navigate the core topics.

accessibility.md

Accessibility

Accessibility principles covering vision, hearing, mobility, speech, and cognition.

Core Definition

Accessible interfaces are intuitive, perceivable, and adaptable.

Vision

• Support Dynamic Type.
• Follow minimum font sizes.
• Ensure sufficient contrast.
• Use system colors.
• Never rely on color alone.
• Fully describe UI for screen readers.

Hearing

• Provide captions, subtitles, and transcripts.
• Include audio descriptions.
• Pair audio with visual or haptic cues.

Mobility

• Use large, well-spaced controls.
• Prefer simple gestures.
• Always provide non-gesture alternatives.
• Support assistive technologies.

Speech and Keyboard

• Support full keyboard navigation.
• Ensure full functionality without speech.

Cognitive

• Keep interactions simple.
• Avoid time-limited UI.
• Allow difficulty adjustments.
• Control autoplay and flashing content.
• Respect motion and flashing settings.
• Support Assistive Access.

visionOS Considerations

• Prioritize comfort.
• Keep content within view.
• Reduce motion.
• Avoid head-locked content.
• Minimize repetitive gestures.

app-icons.md

App Icons

Guidance for designing high-quality, layered app icons that feel at home across Apple platforms.

Key Concepts

• App icons are a core part of branding.
• Icons use layered designs (background + foreground).
• Platforms apply depth, lighting, and motion automatically.

Design Guidelines

• Keep designs simple and recognizable.
• Use filled, overlapping shapes.
• Limit text to what is essential.
• Avoid photos, UI replicas, and depictions of Apple hardware.
• Let the system apply blurs, highlights, and shadows.
• Group layers when necessary.

Appearance and Variants

• Default
• Dark
• Clear
• Tinted

Alternate app icons are optional but must remain recognizable.

Platform Notes

• tvOS: Respect safe zones during parallax.
• visionOS: Avoid concave background illusions.
• watchOS: Avoid pure black backgrounds.

Technical Specs

• Icon sizes and shapes
• Supported color spaces
• Style requirements
• Recent changes

color.md

Color

Guidance on using color effectively, accessibly, and consistently across Apple platforms.

Core Principle

Color should enhance communication, reflect brand identity, support hierarchy, and remain legible across modes, devices, and environments.

System-defined dynamic colors are strongly preferred.

Best Practices

• Use colors consistently.
• Support light, dark, and increased contrast modes.
• Provide variants for custom colors.
• Test across devices, displays, and lighting.
• Consider translucency and background content.
• Use system color pickers when users choose colors.

Inclusive and Semantic Color

• Do not rely on color alone to convey meaning.
• Provide alternate cues such as text or icons.
• Avoid low-contrast combinations.
• Consider cultural differences.
• Use semantic system colors.
• Avoid hard-coded RGB values.

Platform Guidance

• iOS / iPadOS: Hierarchical dynamic colors.
• macOS / tvOS / visionOS / watchOS: Platform-specific color systems.

Specifications

• System color names
• API mappings
• Mode variants
• Change history

docs-structure.txt

docs/
├── README.md
├── sidebar.md
├── getting-started.md
├── app-icons.md
├── color.md
├── materials.md
├── layout.md
├── icons.md
└── accessibility.md

getting-started.md

Getting Started

Apple’s Human Interface Guidelines define how to design interfaces that feel native, intuitive, and consistent across Apple platforms.

Core Design Principles

Hierarchy

Use visual structure so controls and interface elements clearly support the underlying content.

Harmony

Align the interface with the hardware and system’s integrated, concentric design.

Consistency

Follow platform conventions so interfaces adapt smoothly across window sizes, devices, and displays.

Major Topic Groups

• Foundations
• Patterns
• Components
• Inputs
• Technologies

icons.md

Icons

Guidelines for designing clear, consistent interface icons.

Core Principle

Icons should represent a single concept using minimal detail and familiar metaphors.

Best Practices

• Simplify for small sizes.
• Maintain consistent stroke weight and balance.
• Optically center asymmetric icons.
• Avoid unnecessary selected-state variants.
• Avoid culture-specific imagery.
• Localize icons with text or direction.
• Prefer vector formats.
• Provide accessibility labels.

Standard Icon Categories

• Editing
• Selection
• Text formatting
• Search
• Sharing and utilities

macOS Document Icons

• Use the folded-corner document shape.
• Keep designs legible at small sizes.
• Avoid important content in folded corners.
• Provide required size pairs.
• Design center imagery at half canvas size.

layout.md

Layout

Guidance for designing adaptable, platform-consistent layouts.

Core Principles

• Group related content using spacing, shapes, color, or separators.
• Keep controls visually distinct.
• Prioritize essential information.
• Allow content to extend edge-to-edge.

Visual Hierarchy and Interaction

• Use materials instead of hard separators.
• Follow reading order.
• Align elements consistently.
• Use progressive disclosure.
• Provide adequate interaction spacing.

Adaptability and Safe Areas

• Support multiple screen sizes and orientations.
• Support window resizing and external displays.
• Support Dynamic Type.
• Scale artwork proportionally.
• Use safe areas and layout guides.

Platform Notes

• iOS: Full-bleed layouts, avoid edge-hugging buttons.
• iPadOS: Resizable windows and adaptive tab bars.
• macOS: Avoid placing critical content at the bottom.
• tvOS: Respect safe zones.
• visionOS: Center key content.
• watchOS: Edge-to-edge content, limited side-by-side controls.

Specs

• Screen dimensions
• Size classes
• Device updates

materials.md

Materials

Defines how translucent materials create depth, hierarchy, and clarity.

Core Concept

Materials separate foreground elements from background content while preserving readability.

Variants

• Regular
• Clear

Bright backgrounds may require dimming layers.

Standard Materials

• Choose materials by semantic role.
• System vibrancy ensures contrast.
• Thicker materials increase contrast.
• Thinner materials preserve context.

Platform Notes

• iOS / iPadOS: Multiple thicknesses and vibrancy levels.
• macOS: Blending modes and vibrancy control.
• tvOS: Heavy use for navigation and focus.
• watchOS: Materials in full-screen modals.

sidebar.md

Sidebar

• Getting Started
• Design Fundamentals
  • App Icons
  • Color
  • Materials
  • Layout
  • Icons
  • Accessibility