Axiom Liquid Glass Ref

Adopting Liquid Glass doesn't mean reinventing your app from the ground up. Start by building your app in the latest version of Xcode to see the changes. If your app uses standard components from SwiftUI, UIKit, or AppKit, your interface picks up the latest look and feel automatically on the latest platform releases.

Key Adoption Strategy

1. Build with latest Xcode SDKs
2. Run on latest platform releases
3. Review changes using this reference
4. Adopt best practices incrementally

Visual Refresh

What Changes Automatically

Standard Components Get Liquid Glass

• Navigation bars, tab bars, toolbars
• Sheets, popovers, action sheets
• Buttons, sliders, toggles, and controls
• Sidebars, split views, menus

How It Works

• Liquid Glass combines optical properties of glass with fluidity
• Forms distinct functional layer for controls and navigation
• Adapts in response to overlap, focus state, and environment
• Helps bring focus to underlying content

Leverage System Frameworks

✅ DO: Use Standard Components

Standard components from SwiftUI, UIKit, and AppKit automatically adopt Liquid Glass with minimal code changes.

// ✅ Standard components get Liquid Glass automatically
NavigationView {
    List(items) { item in
        Text(item.name)
    }
    .toolbar {
        ToolbarItem {
            Button("Add") { }
        }
    }
}
// Recompile with Xcode 26 → Liquid Glass applied

❌ DON'T: Override with Custom Backgrounds

// ❌ Custom backgrounds interfere with Liquid Glass
NavigationView { }
    .background(Color.blue.opacity(0.5)) // Breaks Liquid Glass effects
    .toolbar {
        ToolbarItem { }
            .background(LinearGradient(...)) // Overlays system effects
    }

What to Audit

• Split views
• Tab bars
• Toolbars
• Navigation bars
• Any component with custom background/appearance

Solution Remove custom effects and let the system determine background appearance.

Test with Accessibility Settings

Settings That Affect Liquid Glass

• Reduce Transparency (makes glass frostier)
• Increase Contrast (makes elements predominantly black/white)
• Reduce Motion (decreases animation intensity)

Testing Checklist

• Enable Reduce Transparency → verify frosted appearance works
• Enable Increase Contrast → verify contrasting borders appear
• Enable Reduce Motion → verify elastic properties disabled
• All settings → verify legibility maintained
• Standard components adapt automatically
• Custom elements provide fallback experience

How to Test

// Launch arguments for accessibility testing
app.launchArguments += [
    "-UIAccessibilityIsReduceTransparencyEnabled", "1",
    "-UIAccessibilityButtonShapesEnabled", "1",
    "-UIAccessibilityIsReduceMotionEnabled", "1"
]

Avoid Overusing Liquid Glass

❌ DON'T: Apply to Every Custom Control

Liquid Glass seeks to bring attention to underlying content. Overusing this material in multiple custom controls distracts from content and provides subpar user experience.

✅ DO: Limit to Important Functional Elements

// ✅ Selective application to navigation layer
struct ContentView: View {
    var body: some View {
        ZStack {
            // Content layer - no glass
            ScrollView {
                ForEach(articles) { article in
                    ArticleCard(article) // No glass
                }
            }

            // Navigation layer — Liquid Glass
            VStack {
                Spacer()
                HStack {
                    Button("Filter") { }
                        .glassEffect() // ✅ Important functional element
                    Spacer()
                    Button("Sort") { }
                        .glassEffect() // ✅ Important functional element
                }
                .padding()
            }
        }
    }
}

App Icons

App icons now take on a design that's dynamic and expressive. Updates to the icon grid result in standardized iconography that's visually consistent across devices. App icons contain layers that dynamically respond to lighting and visual effects.

Platform Support

Layered Icons

• iOS 26+
• iPadOS 26+
• macOS Tahoe+
• watchOS (rounded rectangle → circular mask)

Appearance Variants

• Default (light)
• Dark
• Clear
• Tinted (Home Screen personalization)

Design Principles

Key Principles

1. Visually consistent across platforms
2. Optically balanced design
3. Simplified design with solid, filled, overlapping semi-transparent shapes
4. Let system handle effects (masking, blurring, reflection, refraction)

❌ DON'T: Include System Effects in Design

❌ Design includes:
   - Pre-applied blur
   - Manual shadows
   - Hardcoded highlights
   - Fixed masking

✅ DO: Design Clean Layers

✅ Design includes:
   - Clean vector shapes
   - Solid fills
   - Semi-transparent overlays
   - Foreground/middle/background separation

   System automatically adds:
   - Reflection, refraction
   - Shadow, blur, axiom-highlights
   - Masking to final shape

Design Using Layers

Layer Structure

• Foreground Layer: Primary visual elements
• Middle Layer: Supporting elements
• Background Layer: Foundation elements

Export from Design App

Export settings:
- Format: PNG or vector (SVG recommended)
- Resolution: @1x, @2x, @3x
- Transparency: Preserved
- One file per layer

System-Applied Effects

• Reflection (light bouncing off surface)
• Refraction (light bending through material)
• Shadow (depth and elevation)
• Blur (atmospheric depth)
• Highlights (light sources)

Icon Composer

Compose and Preview

Icon Composer app (included in Xcode 26+):

1. Drag and drop exported layers
2. Add background (optional - system provides default for irregular shapes)
3. Create layer groupings
4. Adjust layer attributes (opacity, position, scale)
5. Preview with system effects and appearance variants

Download Icon Composer

• Included in Xcode 26+
• Standalone: https://developer.apple.com/design/resources/

Capabilities

• Real-time preview with system effects
• Light/dark/clear/tinted appearance previews
• Layer management (order, opacity, grouping)
• Export asset catalog directly

Preview Against Updated Grids

Grid Updates

• iOS/iPadOS/macOS: Rounded rectangle mask
• watchOS: Circular mask

What to Check

• Keep elements centered to avoid clipping
• Irregular shapes receive system-provided background
• Test at all sizes (small, medium, large)

Download Grids