The Liquid Glass Design System
Experience a new design language, inspired by the fluidity and transparency of liquid glass. Liquid Glass brings a natural, seamless interactive experience to your applications, making the interface come alive.
Explore the Guidelines"Liquid Glass is the most ambitious design evolution ever—it gives digital interfaces the elegance and vitality of matter."
The Evolution of Liquid Glass Design
Skeuomorphic Design
Skeuomorphism mimicked real-world objects, using shadows, textures, and rich visual effects to create a sense of three-dimensionality and familiarity for users transitioning to digital interfaces.
Flat Design
Flat Design discarded complex effects for a minimalist, direct visual language. It emphasized clean typography, bold colors, and usability by reducing visual clutter.
Liquid Glass Design
Liquid Glass fuses translucency, blur, and fluid motion to create a lightweight, natural interface experience. It retains the simplicity of flat design while reintroducing depth and dynamic character.
Liquid Glass Developer Resources
Leverage our developer tools and documentation to effortlessly implement the Liquid Glass design in your applications.
Liquid Glass for SwiftUI
Implement the stunning glass effect in your iOS, iPadOS, and macOS apps with a simple View modifier.
struct GlassCard: View {
var body: some View {
VStack {
Text("Liquid Glass Card")
.font(.title)
}
.padding(30)
.frame(maxWidth: .infinity)
// Apply the glass effect
.glassEffect()
}
}
Human Interface Guidelines
Explore the core principles and best practices for designing with the Liquid Glass system across all Apple platforms.
Principles {
Clarity: "Understandable at a glance";
Deference: "Content is always the focus";
Depth: "Visual layers and realism";
}
Platforms {
iOS: "Personal and intuitive";
macOS: "Powerful and easy to use";
visionOS: "Immersive and boundless";
}
Apple Design Resources
Get official Apple design templates, fonts, and symbols to build high-fidelity mockups and production-ready assets.
Downloads {
Templates: [ 'Figma', 'Sketch', 'Keynote' ];
Fonts: [ 'SF Pro', 'SF Compact', 'New York' ];
Symbols: 'Over 6,900 icons';
Bezels: [ 'iPhone', 'iPad', 'MacBook' ];
}
// Start designing faster with official tools
function createMockup() {
return 'Accurate and beautiful design';
}
Frequently Asked Questions about Liquid Glass
Find answers to common questions about the Liquid Glass design system.
What is the Liquid Glass design system?
Liquid Glass is a modern design system inspired by the fluidity and optical properties of real glass. It uses translucency, refraction, and dynamic motion to create a lightweight, natural user interface experience. It's designed to provide a consistent and beautiful visual language across all Apple platforms, including iOS, macOS, and visionOS.
How does Liquid Glass differ from previous design systems?
The main difference lies in its dynamism and adaptivity. While Flat Design focused on simplicity, Liquid Glass reintroduces depth and vitality through layers, motion, and light. Unlike static components, Liquid Glass materials can adapt their appearance based on the content behind them and the ambient environment, creating a more integrated and responsive feel.
How can I implement Liquid Glass in my project?
Apple provides comprehensive tools for implementation:
- For native apps: Use the new SwiftUI and UIKit APIs. The `.glassEffect()` modifier in SwiftUI is the easiest way to start.
- For web apps: While there isn't a direct framework, you can emulate the effect using CSS properties like `backdrop-filter: blur()` and translucent `background-color`.
- Design mockups: Use the official Apple Design Resources for Figma and Sketch to create high-fidelity designs.
What are the performance considerations for Liquid Glass?
Performance is a key consideration. The system is highly optimized and uses hardware acceleration wherever possible. Apple's native frameworks automatically scale the fidelity of the effects based on the device's capabilities. Developers are encouraged to use the standard system components, as they are tuned for optimal performance while delivering the full visual experience.
Does the Liquid Glass design system support accessibility?
Yes, accessibility is a core tenet of Apple design. The Liquid Glass system is designed to be fully accessible. It ensures high contrast ratios for text readability against translucent backgrounds, supports screen readers, and respects user settings like "Reduce Motion" and "Increase Contrast." The goal is to create an experience that is both beautiful and inclusive for everyone.