spatial-computing-ui

Spatial Computing UI

"A step beyond Spatial Design. Fully 3D windows floating in augmented reality."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Z-Space Hierarchy: Not just drop shadows, but actual 3D distance. Modals float 10px in front of the main window.
2. Gaze-Based Interaction Cues: Elements highlight vividly when hovered, anticipating eye-tracking or precise pointer control.
3. Glass and Light: Windows are thick sheets of frosted glass that bend light and cast soft shadows onto the physical environment.

Visual DNA

• Colors: Relies entirely on the background environment. Uses purely translucent whites (rgba(255,255,255,0.x)) and blacks.
• Typography: SF Pro. Heavy use of varied font weights (Regular, Semibold, Bold) to create hierarchy.
• Shapes: High border radii (24px-32px). Everything is a rounded rectangle or a perfect circle.

Web Implementation

• Best emulated using CSS 3D transforms to simulate the user's perspective.
• CSS Example:

body {
  /* Simulate the physical room */
  background: url('living-room.jpg') center/cover;
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spati