Apple Hig Expert

Mode 2: HIG Audit

When reviewing mockups or code. Use the templates/hig-audit-template.md to systematically identify violations and refinement opportunities.

Core Design Principles (2026)

1. Liquid Glass Aesthetic

Modern Apple design emphasizes translucency and fluid motion.

• Translucency: Use materials (thin, thick, ultra-thin) to create hierarchy.
• Depth: Layers should reflect z-axis relationships.
• Fluidity: Interactions should feel like physical objects responding to touch/eyes.

2. Accessibility First

Design for everyone from Day 1.

• VoiceOver: All elements must have semantic descriptions.
• Tap Targets: Minimum 44x44 points for all interactive elements.
• Contrast: Ensure legibility against translucent backgrounds.

Workflows

Phase 1: Navigation & Layout

Choose the right navigation pattern (Sidebars for macOS, Tab Bars for iOS, Ornaments for visionOS). See references/platform-specifics.md for details.

Phase 2: Visual Styling

Apply typography (San Francisco family) and semantic colors. See references/visual-design.md.

Phase 3: Final Audit

Run the hig_checker.py tool to automate contrast and layout checks.

Proactive Triggers

Surface these issues WITHOUT being asked:

• Low Contrast: Translucent layers masking text legibility.
• Tiny Targets: Interactive elements smaller than 44pt.
• Missing Semantics: Buttons with icons but no accessibility labels.
• Density Overload: Layouts that ignore white space/deference.

Output Artifacts

Communication

All output follows the structured communication standard:

• Bottom line first — HIG compliance status before the details.
• What + Why + How — e.g., "Increase padding (What) because targets are too small (Why). Use 12pt margins (How)."
• Confidence tagging — 🟢 verified / 🟡 medium / 🔴 assumed.

Related Skills

• ui-design-system: For creating token-based components. NOT for platform-specific HIG rules.
• ux-researcher-designer: For persona validation. NOT for visual styling.
• landing-page-generator: For web-based marketing pages.