Spatial UI Design Systems

WHY IT EXISTS Every prior design system, Material Design, Apple's own Human Interface Guidelines for iOS, assumed a flat rectangular screen viewed at a roughly fixed distance and driven by touch or a pointer. Spatial computing devices like Vision Pro place interface elements in a 3D room around the user, viewed through eye tracking and hand gestures at varying, user-controlled distances. None of the old rules for type size, contrast, or hit targets transfer directly, so spatial UI design systems exist to define a new, consistent set of rules for depth, scale, and gaze-driven interaction.

THE MENTAL MODEL Stop thinking of UI as pixels on a pane of glass and start thinking of it as physical objects placed in a room. A window is not simply 80 points wide, it occupies a real position and size in space, and how big it needs to look depends on how far away it is, the same way a street sign must be physically larger the farther it sits from the road. Depth, materials, and lighting matter the way they would for a real object, not just a flat image.

HOW IT WORKS Content lives in windows, volumes, which are 3D bounded content, and free-floating ornaments like toolbars that hover just outside a window's edge in their own depth layer. Type and targets scale by visual angle rather than fixed point size, so an element two meters away needs a proportionally larger physical size than one half a meter away to stay equally legible. Glass materials blur and darken whatever passthrough background sits behind a window so text stays readable against an unpredictable real room. Gaze replaces cursor hover, and a pinch gesture replaces a click, which forces larger effective hit targets since eye tracking is less precise than a mouse.

WHEN IT MATTERS It matters directly for anyone building visionOS or mixed reality apps. The footgun is porting a flat 2D layout straight into 3D: a UI that ignores depth reads as an awkward flat billboard floating in space, and placing critical controls too close to the eyes causes vergence-accommodation conflict, a mismatch between where the eyes focus and where they converge that causes real discomfort over time.

ONE CONCRETE EXAMPLE Apple's visionOS guidelines place a default window about 1.5 meters from the user, with a horizontal grabber bar below the window's content that lets a person physically drag it closer, farther, or to the side, repositioning it in the room rather than resizing it on a flat screen.