WWDC 2025: Apple's Liquid Glass Design System

Apple has unveiled its most extensive software design update with Liquid Glass, fundamentally reshaping how interfaces interact with content. This comprehensive guide breaks down the key changes every iOS developer needs to implement.

The Foundation: Liquid Glass Principles

Core Philosophy

• Harmonized design language across all Apple platforms
• Cohesive, adaptive, and expressive interface elements
• Shared design foundation leveraging SwiftUI, Mac Catalyst, and iPad Window Resizing
• Systematic approach considering every element from smallest control to largest surface

Visual Design Updates

System Colors

• Adjusted across Light, Dark, and Increased Contrast appearances
• Enhanced hue differentiation while maintaining Apple's optimistic spirit
• Optimized for harmony with Liquid Glass materials

Typography Refinements

• Bolder text rendering for improved clarity
• Left-aligned typography in critical moments (alerts, onboarding)
• Strengthened structure and readability

Shape System Architecture

Three Core Shape Types

1. Fixed Shapes

• Constant corner radius regardless of container size
• Predictable geometry for consistent layouts

2. Capsules

• Radius equals half the container height
• Natural concentricity support
• Primary choice for touch-friendly interfaces
• Platform Usage:
  • iOS/iPadOS: Preferred for most interactive elements
  • macOS: Reserved for Large and X-Large controls, standout actions

3. Concentric Shapes

• Radius calculated by subtracting padding from parent container
• Automatic inner radii calculation for nested elements
• Pro Tip: Use concentricShape with fallback radius for components that work both nested and standalone

Platform-Specific Implementation

iOS/iPadOS

• Capsules dominate the interface
• Mirrored proportions in sliders, switches, bars, and buttons
• Grouped table view corners follow capsule geometry

macOS

• Mini, Small, Medium controls: Rounded rectangles
• Large controls: Capsule shapes
• New X-Large size leverages Liquid Glass for spacious layouts
• Creates hierarchy in complex desktop environments

Design System Harmony

Critical Considerations

• Interface elements must complement system rhythm, not clash
• Avoid corners that feel "pinched" or "flared"
• Nested containers require concentric alignment
• Device Edge Handling:
  • Phone: Capsules with extra margin near screen edges
  • iPad/Mac: Concentric shapes aligned with window edges

Functional Layer Architecture

Liquid Glass as UI Layer

• Floats above content providing structure without stealing focus
• Creates spatial relationships between surfaces
• Maintains connection to interaction sources

Navigation and Focus

Action Sheets Evolution

• Before: Always appeared at screen bottom
• Now: Springs directly from triggering action
• Clearly defined source-to-surface relationships

Material Application

• Apply materials directly to controls, not inner views
• Supports spatial interaction understanding

Focus Management

Modal vs Parallel Tasks

• Modal interruptions: Liquid Glass + dimming layer for centered attention
• Parallel tasks: Natural separation without flow disruption
• Focus shifts: Material becomes more opaque and larger during deep engagement

Navigation Structure Updates

Bar Components

Customization Cleanup

• Remove unnecessary backgrounds and borders
• System appearance eliminates need for manual emphasis
• Hierarchy expressed through layout and grouping, not decoration

Grouping Best Practices

• Items grouped via correct API automatically share backgrounds
• Function and frequency grouping for related actions
• Avoid mixing symbols with text (perceived as single button)
• Primary actions (Done) remain separate with blue tint (iOS/iPadOS) or prominent text (macOS)

Tab Bar Optimization

• New dedicated Search tab on iOS for improved accessibility
• Support for persistent features via accessory views (media controls)
• Avoid screen-specific actions (checkout buttons belong with content)
• Clear separation between persistent and contextual elements

Visual Effects System

Content Separation Requirements

• Liquid Glass elements require clear content separation for legibility
• Controls sit on system materials, never directly on content
• Maintains contrast and visual hierarchy

Scroll Edge Effects

Two Distinct Styles

• Soft (Default): Subtle transitions for iOS/iPadOS interactive elements
• Hard (macOS): Stronger boundaries for text controls and pinned headers
• Never mix or stack different edge effect styles

Implementation Rules

• One scroll edge effect per view
• Split View layouts: Each pane maintains consistent height alignment
• Not decorative—only used where floating UI elements exist

Sidebar Enhancements

• Now inset and built with Liquid Glass
• Content extends to edge for immersive experience
• Background extension effects for hero images and tinted backgrounds
• Scroll views extend beneath sidebar by default
• Per-view background extension flexibility

Cross-Platform Continuity

Device Context Understanding

• iPhone: Narrow, vertical, zoomed-in focus
• iPad: Bridge between iPhone utility and Mac expansiveness
• Mac: Wide, expansive canvas with full depth

Design Once, Deploy Everywhere

• Single anatomy design for all platforms
• Platform variations as expressions, not exceptions
• Consistent component behavior across devices

Symbol and Content Strategy

Symbol Usage

• Same symbols across devices preserve meaning
• Bars increasingly rely on symbols over text
• Menus populated with symbols for recognition
• Related actions: Single symbol for group introduction, text for specifics

Component Anatomy

• Shared structural elements across platforms
• Consistent placement of selection indicators, icons, labels, accessories
• Behavior consistency: Same core interactions regardless of platform form factor

Few Implementation Checklist

Immediate Actions

• [ ] Update custom bar implementations (remove extra backgrounds/borders)
• [ ] Audit nested container corner radii for concentricity
• [ ] Implement proper grouping APIs for bar items
• [ ] Review tab bar organization and add Search tab if applicable
• [ ] Apply correct scroll edge effects (soft vs hard)

Design System Updates

• [ ] Align custom components with three shape types
• [ ] Implement concentric shape calculations
• [ ] Update color usage for Liquid Glass harmony
• [ ] Refine typography alignment (left-align critical text)
• [ ] Test component behavior across all target platforms

Resources

The Human Interface Guidelines have been updated with comprehensive Liquid Glass documentation. New UI kits are available on Apple Design Resources for immediate implementation.