Frosted glass panels, ambient depth, and weightless interactions — the web's interpretation of spatial computing for interfaces that breathe.
Typography
Medium-weight geometric sans-serifs with open letter-spacing and generous line heights for calm readability on glass surfaces.
Display / Plus Jakarta Sans 800
Spatial Depth
Heading / Plus Jakarta Sans 700
Floating Glass Panels
Subheading / DM Sans 500
Ambient layered environments with frosted translucency
Body / Inter 400
Clean, legible text optimized for readability against blurred glass surfaces. Generous line height and open tracking provide the calm precision spatial interfaces demand.
Caption / Inter 500
Metadata, timestamps, and secondary labels
Mono / IBM Plex Mono 400
backdrop-filter: blur(40px) saturate(1.4);
Plus Jakarta Sans 700 + Inter 400
Clean spatial OS; visionOS-inspired
Plus Jakarta Sans 600 + DM Sans 400
Soft, approachable ambient interface
Plus Jakarta Sans 600 + Outfit 400
Modern spatial product UI; warm and precise
Color Palette
Restrained, cool-toned palette with ethereal accents — glass-tinted surfaces over receding dark backgrounds.
Components
Translucent containers that float above layered backgrounds with soft elevation and frosted materiality.
Translucent containers with backdrop-filter blur that soften the background into diffused color fields, mimicking visionOS glass material.
Content organized across distinct z-planes with background environments, mid-ground elements, and foreground interactive panels.
Subtle, large-scale radial gradients in cool tones create the impression of environmental lighting behind glass surfaces.
Large, consistent border radii produce smooth organic shapes that feel touchable and approachable, following spatial computing conventions.
Large, blurred, low-opacity shadows suggest floating elevation rather than hard surface contact, reinforcing the spatial metaphor.
Thin borders using low-opacity white catch ambient light along panel edges, defining boundaries without harsh visual lines.
Design Principles
Calm precision, physical materiality, and ambient awareness define every design decision.
Elements closer to the viewer are more important. Higher z-index, larger shadows, and increased opacity signal prominence. Receding elements are contextual or environmental, providing ambient support without competing for attention.
Prefer backdrop-filter blur over flat semi-transparent backgrounds. The blurred pass-through connects panels to their environment rather than isolating them. Glass creates trust by letting users perceive what exists behind interface elements.
Primary content stays centered in the viewport, following visionOS guidance that centered content is most comfortable for the eyes. Avoid forcing excessive scanning. Generous whitespace and restrained density reduce cognitive load.
Letting the background show through panels creates a feeling of openness and honesty. Fully opaque containers feel heavy and disconnected. Progressive disclosure through spatial layers reveals content at comfortable pace.
Visual Effects
All visual depth and materiality achieved through CSS only — no image assets, no WebGL, no external dependencies.
Backdrop-filter blur with saturate creates frosted translucency over colored backgrounds.
Overlapping radial gradients with subtle animation create environmental lighting behind glass.
Progressive shadow sizes communicate elevation levels for spatial hierarchy.
Top-edge inset shadows simulate light catching glass panel rims for physical presence.
Spring-like easing with gentle vertical translation creates weightless, hovering panels.
Full border-radius pills with glass tinting for tags, filters, and selection states.
Interactive Elements
Generously sized, glass-backed interactive elements with spring-curve hover transitions and subtle light-edge highlights.
Spatial interfaces breathe. Every element has room to exist, every surface suggests physical materiality, and the interface invites interaction through subtle depth cues rather than aggressive visual contrast.— The Spatial UI Design Philosophy
Glass, depth, ambient light
Spatial UI translates the principles of spatial computing into two-dimensional interfaces — frosted glass panels, ambient depth layers, and interactions that feel tactile yet weightless. Start building interfaces that coexist with the user's environment.
Back to the Top