charleswiltgen__axiom/docs/reference/hig-ref.md

name, description, skill_type, version, apple_platforms

name	description	skill_type	version	apple_platforms
hig-ref	Comprehensive Human Interface Guidelines reference with code examples	reference	1.0.0	iOS, iPadOS, macOS, watchOS, tvOS, visionOS

Human Interface Guidelines Reference

Comprehensive reference for Apple's Human Interface Guidelines. Covers semantic colors, typography, spacing, icons, accessibility, and platform-specific patterns with code examples.

When to Use This Reference

Use this reference when you need:

• Complete semantic color names and their purposes
• Typography scale and Dynamic Type sizes
• Exact spacing values and layout guidelines
• Icon design specifications
• Accessibility implementation details
• Platform-specific design requirements

For quick decisions: See hig for decision trees and checklists.

Example Prompts

Questions you can ask Claude that will draw from this reference:

• "What are all the semantic label colors and when should I use each?"
• "What's the difference between grouped and ungrouped background colors?"
• "What are the SF Symbol weight recommendations for different contexts?"
• "What's the minimum touch target size for accessibility?"
• "What are the exact Dynamic Type sizes at each text style?"
• "How do tint colors work in iOS?"

What's Covered

Color System

• Label hierarchy (label, secondaryLabel, tertiaryLabel, quaternaryLabel)
• Background colors (ungrouped vs grouped)
• System colors (systemRed, systemBlue, etc.)
• Separator colors
• Fill colors
• Tint colors and accent colors

Typography

• Text styles (largeTitle through caption2)
• Font weights and when to use them
• Dynamic Type support
• Font scaling behavior
• Minimum readable sizes

Shapes & Geometry

• The three shape types (fixed, capsule, concentric) in iOS 26
• Concentricity principle for nested containers
• Optical centering
• Platform-specific corner radius guidance

Materials & Depth

• Standard materials (ultraThin, thin, regular, thick, ultraThick)
• Vibrancy with materials
• Liquid Glass (iOS 26+): regular vs clear variants
• Modals & Sheets: automatic Liquid Glass adoption, semantic backgrounds
• Sheet button placement (HIG 2026-03-24): Cancel/Done pairing rules, platform-specific placements

Layout Principles

• Standard spacing values (4, 8, 12, 16, 20, 24pt)
• Content margins and grid systems
• Visual hierarchy and grouping
• Content extension to display edges
• Safe areas and layout guides
• Adaptability across size classes

Icons & SF Symbols

• Symbol weights and scales
• Symbol configurations
• Rendering modes
• Variable color
• Accessibility considerations

Touch & Interaction

• Minimum 44×44pt touch targets
• Gesture patterns
• Feedback expectations
• Interactive states

Accessibility

• VoiceOver labels and hints
• Dynamic Type requirements
• Color contrast ratios
• Reduce Motion support
• Button shapes
• Vision, hearing, mobility, and cognitive accessibility guidance

Motion & Animation

• Core principles for purposeful motion
• Reduce Motion accommodations
• Best practices for feedback animations
• Platform-specific motion guidance

Platform Specifics

• iOS vs iPadOS patterns
• macOS considerations
• watchOS constraints
• visionOS spatial design
• tvOS focus model

Key Pattern

Semantic Colors in SwiftUI

// Label hierarchy
Text("Title").foregroundStyle(.primary)      // label
Text("Subtitle").foregroundStyle(.secondary) // secondaryLabel
Text("Detail").foregroundStyle(.tertiary)    // tertiaryLabel

// Backgrounds - ungrouped (flat)
Color(.systemBackground)           // Primary background
Color(.secondarySystemBackground)  // Elevated content
Color(.tertiarySystemBackground)   // Further elevation

// Backgrounds - grouped (Settings-style)
Color(.systemGroupedBackground)           // Page background
Color(.secondarySystemGroupedBackground)  // Cell background

// System colors (adaptive)
Color(.systemRed)    // Adapts to light/dark
Color(.systemBlue)
Color(.systemGreen)

Dynamic Type Scale

// Automatic scaling with text styles
Text("Large Title").font(.largeTitle)  // 34pt at default
Text("Title").font(.title)              // 28pt
Text("Headline").font(.headline)        // 17pt semibold
Text("Body").font(.body)                // 17pt
Text("Footnote").font(.footnote)        // 13pt
Text("Caption").font(.caption)          // 12pt

Documentation Scope

This page documents the axiom-design reference skill — comprehensive HIG coverage Claude uses when you need specific design values, color names, or implementation details.

For quick decisions: See hig for decision frameworks and quick lookups.

For Liquid Glass: See liquid-glass for iOS 26 material design.

Related

• hig – Quick decision frameworks
• liquid-glass – iOS 26 Liquid Glass material design
• accessibility-auditor – Automated accessibility scanning

Resources

WWDC: 2023-10148, 2024-10154, 2019-214 (Dark Mode)

Docs: developer.apple.com/design/human-interface-guidelines