ios-liquid-glass

iOS Liquid Glass Design

Create distinctive, Apple Design Award-worthy iOS applications using the Liquid Glass design system. This skill pushes beyond generic implementations toward memorable, polished interfaces that feel genuinely designed—not AI-generated.

When to Use

• Building new iOS screens, views, or components
• Implementing navigation (tabs, toolbars, sheets)
• Designing with Liquid Glass materials
• Creating app icons with Icon Composer
• Any SwiftUI/UIKit work targeting iOS 26+

Design Philosophy: Elevated, Not Average

Before writing code, commit to a distinctive aesthetic direction:

1. Purpose: What problem does this interface solve? Who uses it?
2. Tone: What feeling should it evoke? (calm, playful, premium, editorial, utilitarian, bold)
3. Inspiration: Which Apple apps set the bar? (Notes, Weather, Health, Fitness, Apple TV)
4. Differentiation: What makes this memorable? What's the "one thing" users will notice?
5. Glass Philosophy: Is glass framing content or competing with it?

The Three Principles

Principle	Description
Hierarchy	Controls float above content. Glass frames, never obscures. Content is king.
Harmony	Software design aligns with hardware. Concentric corners. Fluid gestures.
Consistency	Adapt fluidly across iPhone, iPad, Mac. Same identity, contextual expression.

Anti-Patterns: What to Avoid

These are hallmarks of generic AI-generated iOS design:

• Boring solid backgrounds with no depth or atmosphere
• System fonts everywhere without typographic intention
• Cookie-cutter tab bars with no personality or purpose
• Purple/indigo gradients on white—the quintessential AI slop
• Flat, lifeless interactions without haptics or animation
• Glass on everything instead of intentional placement
• Ignoring the content layer by applying glass where it doesn't belong
• Generic card layouts without context-specific design
• Accessibility as afterthought instead of built-in from day one

Liquid Glass Core API

Basic Glass Effect

import SwiftUI

// Simple glass application
Text("Action")
    .padding()
    .glassEffect() // .regular variant, .capsule shape

// With explicit parameters
Button("Confirm") { }
    .padding()
    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

Glass Variants

Variant	Use Case
.regular	Toolbars, nav bars, tab bars, standard controls
.clear	Floating controls over media (photos, maps, video)
.identity	Conditional disable: glassEffect(isActive ? .regular : .identity)

Glass Modifiers

// Semantic tinting (for primary actions only)
.glassEffect(.regular.tint(.accentColor))

// Interactive behaviors (scaling, shimmer, touch illumination)
.glassEffect(.regular.interactive())

// Combined
.glassEffect(.regular.tint(.blue).interactive())

Custom Shapes

// Standard shapes
.glassEffect(.regular, in: .capsule)
.glassEffect(.regular, in: .circle)
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))

// Container-concentric (matches device/container corners)
.glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

GlassEffectContainer & Morphing

Container Setup

Glass cannot sample other glass. Use containers for multiple glass elements:

GlassEffectContainer(spacing: 30) {
    HStack(spacing: 20) {
        ForEach(actions) { action in
            Button(action.title, systemImage: action.icon) { }
                .frame(width: 44, height: 44)
                .glassEffect(.regular.interactive())
        }
    }
}

Morphing Transitions

struct ExpandableActions: View {
    @State private var isExpanded = false
    @Namespace private var namespace

    var body: some View {
        GlassEffectContainer(spacing: 30) {
            VStack(spacing: 30) {
                if isExpanded {
                    ActionButton(icon: "rotate.right")
                        .glassEffectID("rotate", in: namespace)
                }

                HStack(spacing: 30) {
                    if isExpanded {
                        ActionButton(icon: "slider.horizontal.3")
                            .glassEffectID("adjust", in: namespace)
                    }

                    Button {
                        withAnimation(.bouncy) { isExpanded.toggle() }
                    } label: {
                        Image(systemName: isExpanded ? "xmark" : "plus")
                            .frame(width: 56, height: 56)
                    }
                    .glassEffect(.regular.tint(.accentColor).interactive())
                    .glassEffectID("toggle", in: namespace)

                    if isExpanded {
                        ActionButton(icon: "crop")
                            .glassEffectID("crop", in: namespace)
                    }
                }

                if isExpanded {
                    ActionButton(icon: "wand.and.stars")
                        .glassEffectID("enhance", in: namespace)
                }
            }
        }
    }
}

Navigation Patterns

Tab Bar (Floating)

TabView {
    Tab("Home", systemImage: "house") {
        HomeView()
    }

    Tab("Search", systemImage: "magnifyingglass") {
        SearchView()
    }

    Tab("Profile", systemImage: "person") {
        ProfileView()
    }
}
// Tab bar now floats, reacts to background, collapses on scroll

Toolbar with Grouping

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Edit", systemImage: "pencil") { }
        Button("Share", systemImage: "square.and.arrow.up") { }
    }

    ToolbarSpacer(.flexible, placement: .topBarTrailing)

    ToolbarItem(placement: .topBarTrailing) {
        Button("Done", systemImage: "checkmark") { }
            .tint(.accentColor)
    }
}

Sheets with Morphing

struct ContentView: View {
    @State private var showSettings = false
    @Namespace private var namespace

    var body: some View {
        NavigationStack {
            ContentView()
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button("Settings", systemImage: "gear") {
                            showSettings = true
                        }
                        .matchedTransitionSource(id: "settings", in: namespace)
                    }
                }
                .sheet(isPresented: $showSettings) {
                    SettingsView()
                        .navigationTransition(.zoom(sourceID: "settings", in: namespace))
                        .presentationDetents([.medium, .large])
                }
        }
    }
}

Typography That Speaks

Don't default to system fonts everywhere. Create typographic hierarchy:

// Display fonts for headers
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// Secondary information
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// Consider custom fonts for brand identity
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))

Font Recommendations

Use Case	Options
Display	SF Pro Display, New York, custom serif
Body	SF Pro Text (system), custom sans
Technical	SF Mono, custom monospace
Editorial	New York, custom serif with character

Color with Intention

System Integration

// Semantic colors that adapt
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// Accent with purpose
.tint(.accentColor)

Dominant + Accent

Don't distribute color evenly. Choose:

• One dominant that defines the brand/mood
• Sharp accents for actions and highlights
• Neutral base for content readability

Dark Mode First

Dark mode often produces more distinctive results. Design dark, then adapt to light.

Animation Philosophy

Bouncy is the New Default

withAnimation(.bouncy) {
    isExpanded.toggle()
}

// With parameters
withAnimation(.bouncy(duration: 0.5, extraBounce: 0.2)) {
    state = newState
}

Key Animation Moments

Moment	Treatment
Button press	Scale to 0.95, spring back
State change	Morph, don't swap
List appear	Staggered fade-in
Sheet present	Zoom from source
Error	Shake with haptic

SF Symbols Draw Animations

Image(systemName: "checkmark.circle")
    .symbolEffect(.drawOn, value: isComplete)

Image(systemName: "heart.fill")
    .symbolEffect(.bounce, value: isFavorite)

Haptics: The Invisible Polish

import UIKit

// Impact feedback
let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()

// Selection feedback
let selection = UISelectionFeedbackGenerator()
selection.selectionChanged()

// Success/error
let notification = UINotificationFeedbackGenerator()
notification.notificationOccurred(.success)

When to Use Haptics

• Button presses (light impact)
• Toggle changes (selection changed)
• Pull to refresh (light impact)
• Error states (error notification)
• Success confirmations (success notification)
• Slider thumb movement (selection changed)

Accessibility: Built-In, Not Bolt-On

Automatic Glass Adaptations

Glass automatically adapts to:

• Reduce Transparency: More frosting
• Increase Contrast: Stark borders
• Reduce Motion: Tones down animation

Manual Checks

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation? {
    reduceMotion ? nil : .bouncy
}

Essentials

• Minimum 44x44pt touch targets
• Clear accessibility labels
• Dynamic Type support
• VoiceOver testing

Quality Checklist

Before considering UI complete:

• Glass applied only to navigation layer (not content)
• Haptics on all meaningful interactions
• Spring/bouncy animations (not linear)
• SF Symbols (not emojis or random icons)
• Dark mode tested and polished
• Typography hierarchy clear and intentional
• Colors are purposeful, not default blue
• Morphing transitions where applicable
• Loading states animated
• Empty states designed
• Error states helpful and styled
• Accessibility settings respected

Inspiration: Award-Winning Patterns

From 2025 Apple Design Award winners:

Delight

• Surprising interactions that reward exploration
• Meaningful animations that enhance understanding
• Playful details creating emotional connection

Innovation

• Novel use of Apple technologies
• Thoughtfully crafted yet accessible UI
• Real-time features that feel magical

Inclusivity

• VoiceOver support from day one
• Dynamic Type throughout
• Multiple input methods

Visuals

• Rich, detailed environments
• Consistent visual language
• Intentional depth and color

Reference

For official Apple documentation links, WWDC session IDs, and API quick reference tables, see reference.md.

The Mandate

Remember: The goal is an app worthy of an Apple Design Award—an app that feels genuinely designed, not generated. Every interface should have:

1. A point of view - A clear aesthetic direction
2. Intentional details - Nothing accidental
3. Emotional resonance - Users feel something
4. Technical excellence - Smooth, performant, accessible

Don't settle for "working." Push for memorable.