Approach · 2023–present · Apple visionOS and other headset platforms
Spatial interface design
Interfaces that float in the room around you.
What is Spatial interface design?
Spatial interface design places windows and controls in the user's physical or virtual space, usually through a headset. Apple's visionOS, announced with Vision Pro at WWDC 2023, uses a glass material for windows so the real world shows through, with white text, large targets and controls that respond to gaze and pinch gestures. The design problems differ from screens: comfort, distance, lighting and the absence of fixed edges.
The story
Apple's WWDC23 guidance describes windows made of a translucent glass material that adapts to surrounding light, white text by default, and eye and hand input as the main interaction model. Ideas from visionOS later influenced Liquid Glass on Apple's other platforms.
How do you recognise Spatial interface design?
- Windows of translucent glass over the real world
- Large rounded shapes and big targets
- White text and gentle dimming for focus
- Controls that respond to gaze and hover
Colour, type, layout and material
- #1C1C20
- #7B8CFF
- #F2F2F7
- #7AD7F0
Typography. System sans in white at medium to bold weights, larger than on phones, with short labels.
Composition. Place primary content straight ahead at a comfortable distance. Keep interactive targets around 60 points or larger, let toolbars overlap a window edge as an ornament, and avoid putting controls at the edge of the field of view.
Materials. Glass material, soft shadows, specular highlights and depth.
Why does Spatial interface design work?
Visible surroundings can make a headset feel less isolating and safer. Poor placement or too many opaque panels can cause fatigue or discomfort, so physical comfort is part of the design.
The principle. Respect the person's space. Keep content comfortable and central, use glass so the room stays visible, and make targets generous enough for eye-based input.
Where it was used
visionOS windows on Apple Vision Pro, Apple, 2023. Apple's design session describes glass windows and spatial input for the headset.
- Headset apps and spatial workspaces
- Mixed-reality training
- Glanceable ambient displays
What to avoid
- Opaque full-screen panels
- Tiny targets
- Content pinned to the edges of vision
Try it: a short exercise
Design one screen for a headset. Put the main content in the centre, make every target at least 60 points, then check that the layout survives with the real world visible behind it.
How do you prompt for Spatial interface design?
These prompts ask for an original piece informed by the style, not a copy of any work. Replace the words in square brackets.
For an image or visual design
Create an original Spatial interface design-informed [FORMAT] about [SUBJECT] for [AUDIENCE]. Show glass windows floating in a real room, with white text, large rounded shapes and soft shadows. The room remains visible through each window. Use a disciplined palette drawn from #1C1C20, #7B8CFF, #F2F2F7, #7AD7F0. Typography direction: System sans in white at medium to bold weights, larger than on phones, with short labels. Composition: Place primary content straight ahead at a comfortable distance. Keep interactive targets around 60 points or larger, let toolbars overlap a window edge as an ornament, and avoid putting controls at the edge of the field of view. Make every detail follow a clear visual idea. Build the subject from observations specific to the brief, not stock symbols. Do not copy existing products, branding or screens. Return one resolved composition and explain three deliberate design decisions.
For an interface
Implement a contemporary responsive interface for [SUBJECT], serving [AUDIENCE], in [FORMAT], using Spatial interface design as a design principle rather than a costume. Design for look-and-pinch input: targets of at least 60 points, a dark translucent glass surface with strong blur, white text, generous radii and hover states that brighten the control. Keep primary content centred and comfortable. Use real content, semantic HTML, responsive CSS and a coherent spacing scale. Keep body text at WCAG AA contrast, never encode meaning only through colour, provide visible keyboard focus, touch targets of at least 44px, and working loading, empty, error and success states. Use motion only to explain interaction and respect prefers-reduced-motion. Explain which principles you translated and test keyboard navigation and mobile overflow.
Lineage
Draws on: Glassmorphism, Immersive design.
Influenced: Liquid Glass.