spatial-design

Spatial Design

"UI that belongs in the room with you. Transparent, glass-like panels that react to the lighting of the physical space."

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. Environmental Transparency: The UI acts like a glass pane. It is deeply reliant on background blur, but specifically aims to let the environment (or a simulated environment image) dictate the mood.
2. Dynamic Lighting: Elements respond to cursor position as if a flashlight is shining on them.
3. Subtle Volume: Not flat, but not extremely 3D. Elements have a very thin rim of light around the edge (specular highlight).

Visual DNA

• Colors: Almost exclusively uses rgba() white or black. The actual color comes entirely from the background environment.
• Typography: Extremely sharp, high legibility. Often uses varying font weights to establish hierarchy without relying on color. Apple's SF Pro is the gold standard here.
• Icons: Outlined, high-legibility glyphs.

Web Implementation

• CSS Example:

body {
  /* Needs a complex background to look right */
  background: url('room-environment.jpg') cover;
}

.spatial-panel {
  /* The core material */
  background: rgba(255, 255, 255, 0.2); /*