Material
Liquid Glass is a translucent, glass-like material treatment used across the system. It mimics glass surfaces with light diffusion, reflections, and subtle depth, giving interfaces a modern, premium, and fluid aesthetic.
Philosophy
Liquid Glass is a meta material designed to disappear into the content.
It creates depth and spatial layering without clutter.
It conveys lightness and elegance, blending seamlessly into content.
It reflects the system’s philosophy of simplicity and clarity, while embracing dimensionality.
Anatomy
Variants
Standard
Best reserved for navigation layer.
Colored
Tinting the glass.
Usage tips
Dos
Use Liquid Glass to create visual depth and elegance.
Ensure legibility with sufficient contrast for text/icons on glass surfaces.
Reserve for navigational layers.
Don’ts
Don’t overuse across the entire UI (causes noise).
Don’t place dark text directly on highly transparent glass.
Don’t use overly strong reflections that feel artificial.
Real-world example
