ax-design-ref

Design API Reference

Quick Patterns

Semantic Color Hierarchy

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

// Backgrounds
Color(.systemBackground)                     // Main
Color(.secondarySystemBackground)            // Grouped element
Color(.systemGroupedBackground)              // Settings-style list

// Fills (semi-transparent, for controls)
Color(.systemFill)
Color(.secondarySystemFill)

Dynamic Type with System Styles

.font(.largeTitle)   // 34pt  -- page headings
.font(.title)        // 28pt  -- secondary headings
.font(.headline)     // 17pt semibold -- emphasized body
.font(.body)         // 17pt  -- primary body
.font(.callout)      // 16pt  -- secondary body
.font(.footnote)     // 13pt  -- footnotes
.font(.caption)      // 12pt  -- small annotations

SF Symbols Effect API (SwiftUI)

// Discrete (value change trigger)
.symbolEffect(.bounce, value: count)
.symbolEffect(.wiggle, value: count)        // iOS 18+

// Indefinite (continuous while active)
.symbolEffect(.pulse, isActive: isLoading)
.symbolEffect(.breathe, isActive: true)      // iOS 18+
.symbolEffect(.rotate, isActive: true)       // iOS 18+

// Content transition (symbol swap)
.contentTransition(.symbolEffect(.replace))

// Transition (view enter/leave)
.transition(.symbolEffect(.appear))

// Draw (iOS 26+)
.symbolEffect(.drawOn, isActive: isComplete)

Liquid Glass (iOS 26+)

// Standard components adopt automatically with Xcode 26
// For custom views:
Button("Action") { }.glassEffect()                    // Controls
VStack { content }.glassBackgroundEffect()             // Content containers
GlassEffectContainer { /* multiple glass views */ }    // Optimization

Decision Tree

What design reference do you need?
|
+-- Colors?
|   +-- Text/icons --> semantic label colors (.primary, .secondary, .tertiary)
|   +-- Backgrounds --> systemBackground / systemGroupedBackground
|   +-- Controls --> systemFill colors (semi-transparent)
|   +-- Custom brand --> Color Set in asset catalog (light + dark + high contrast)
|   +-- Separators --> Color(.separator) or Color(.opaqueSeparator)
|
+-- Typography?
|   +-- System text style --> .font(.body), .font(.title), etc.
|   +-- Rounded design --> .fontDesign(.rounded)
|   +-- Custom font + scaling --> .font(.custom(name, size:, relativeTo: .body))
|   +-- ScaledMetric --> @ScaledMetric var padding: CGFloat = 20
|   +-- Tight/loose leading --> .font(.body.leading(.tight))
|   +-- Monospaced --> SF Mono or .fontDesign(.monospaced)
|
+-- SF Symbols API?
|   +-- Rendering mode --> .symbolRenderingMode(.hierarchical/.palette/.multicolor)
|   +-- Tap feedback effect --> .symbolEffect(.bounce, value:)
|   +-- Loading indicator --> .symbolEffect(.pulse, isActive:)
|   +-- Symbol swap --> .contentTransition(.symbolEffect(.replace))
|   +-- Draw animation --> .symbolEffect(.drawOn, isActive:) (iOS 26+)
|   +-- UIKit effect --> imageView.addSymbolEffect(.bounce)
|   +-- Variable value --> Image(systemName:, variableValue: 0.5)
|
+-- Liquid Glass?
|   +-- What adopts automatically --> nav bars, tab bars, toolbars, sheets, controls
|   +-- Custom glass control --> .glassEffect()
|   +-- Custom glass container --> .glassBackgroundEffect()
|   +-- Multiple glass views --> GlassEffectContainer { }
|   +-- Backward compat --> UIDesignRequiresCompatibility = true in Info.plist
|   +-- Clear glass variant --> .glassEffect(.clear) (only over rich backgrounds)
|
+-- Accessibility?
    +-- Contrast ratio --> 4.5:1 min (7:1 for small text)
    +-- Touch targets --> 44x44 points min (iOS)
    +-- Reduce Motion --> @Environment(\.accessibilityReduceMotion)
    +-- VoiceOver --> .accessibilityLabel("description")
    +-- Color alone --> convey info with shape + text + color