Spatial UI (visionOS)
Also called: visionOS style, Spatial computing UI, Vision Pro UI
Neutral frosted-glass windows floating in a real environment, with huge rounded corners, capsule controls and detached ornaments.
Design keywords
Say these words to ask for this style.
Spatial UI borrows from visionOS: content lives in a few neutral grey glass windows that float in front of a real place (a landscape, a room) instead of a flat page. Windows have 40px+ corners, a soft specular rim instead of a border, and deep blurred shadows that sell distance. Controls are capsules; tab bars and toolbars are “ornaments” that hover just outside the window edge, and a grabber bar sits under each window. Hover is a gentle gaze glow, not a colour change.
Best for
- Travel, hotels and destination showcases
- Immersive media and 3D product pages
- Spatial / AR app concepts and pitch demos
- Premium launches that want an Apple-grade feel
Avoid for
- Dense data tools and long tables
- Low-end Android devices (heavy blur)
- Brands with no strong photography or scenery
✓ Do
- Put a real scene (photo or painted landscape) behind everything and keep windows neutral grey rgba(36,40,50,.5)
- Use 36–48px window radii and full capsules for every control
- Float tab bars and toolbars as separate ornaments 12–24px outside the window
✕ Don't
- Don’t use colourful gradient blobs as the backdrop — that is Glassmorphism
- Don’t draw hard 1px outlines around windows; use a top specular rim
- Don’t stack more than two glass layers or tint the glass with brand colour
Not to be confused with
On mobile
Treat the phone screen as one window over the scene: list groups become 28px glass platters, the tab bar is a floating capsule ornament, and blur drops to 20px on the tab bar and featured card only.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.