Spatial Design

Spatial Design is a design-style child skill ('UI that belongs in the room with you - transparent, glass-like panels that react to the lighting of the physical space'), part of the design-it family and not meant to be triggered directly - a subtler predecessor to Spatial Computing UI, without that style's explicit Z-axis 3D window positioning. Three core principles: Environmental Transparency (the UI acts like a glass pane, deeply reliant on background blur, letting the actual or simulated environment dictate the mood rather than a fixed color scheme), Dynamic Lighting (elements respond to cursor position as if a flashlight is shining on them), and Subtle Volume (not flat but not extremely 3D - elements get a very thin rim of light around the edge, a specular highlight, rather than heavy shadow-based depth).

Use it when the user's request matches this environment-aware, Apple-native glass aesthetic - visionOS-adjacent apps, premium hardware companion apps, or any UI meant to feel like it belongs physically in the room rather than floating independently of it. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA is almost exclusively rgba() white or black - the actual perceived color comes entirely from the background environment showing through, not from the panel's own fill - paired with extremely sharp, high-legibility typography (SF Pro is the gold standard) using varying font weights rather than color for hierarchy, and outlined, high-legibility glyph icons. The web implementation requires a complex background image to look right, then layers a very sheer panel (rgba(255,255,255,0.2)) with heavy backdrop-filter: blur(40px) saturate(150%), and stacks two inset box-shadows to fake a specular rim-light edge plus one outer shadow for subtle lift - buttons use a lighter blur and brighten with an inset glow on hover to simulate the flashlight-style dynamic lighting response.

.spatial-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(40px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 24px 48px rgba(0,0,0,0.1);
}

SwiftUI reproduces the same effect natively using .ultraThinMaterial as the core spatial material for both the panel and its button, with a Capsule().stroke(Color.white.opacity(0.3)) overlay to fake the specular rim highlight - composed over a full-bleed environment background image, matching the web version's reliance on the underlying scene to supply the actual color.

Designers and developers building visionOS-adjacent apps, premium hardware companion tools, or any interface meant to feel physically present in a real environment rather than floating on a flat, color-driven background.