Expressive & trend · 2023 – present
Spatial / visionOS
Translucent glass panels floating in three-dimensional space, with depth-aware shadows, specular light, and content that appears to live in the room around you.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(90% 0.04 76) - --fg
oklch(18% 0.02 60) - --muted
oklch(52% 0.04 72) - --surface
oklch(97% 0.02 80 / 0.6) - --surface-2
oklch(96% 0.02 78 / 0.75) - --border
oklch(100% 0 0 / 0.45) - --accent
oklch(52% 0.18 248) - --accent-fg
oklch(98% 0 0) - --focus
oklch(52% 0.18 248)
| Token | Value |
|---|---|
| --font-body | 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif |
| --font-display | 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 32px |
| --radius-sm | 16px |
| --shadow | 0 8px 40px oklch(30% 0.04 70 / 0.2), 0 2px 8px oklch(20% 0.02 60 / 0.1) |
| --shadow-lg | 0 24px 80px oklch(25% 0.04 68 / 0.28), 0 4px 16px oklch(20% 0.02 60 / 0.12) |
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
:root {
--bg: oklch(90% 0.04 76);
--fg: oklch(18% 0.02 60);
--muted: oklch(52% 0.04 72);
--surface: oklch(97% 0.02 80 / 0.6);
--surface-2: oklch(96% 0.02 78 / 0.75);
--border: oklch(100% 0 0 / 0.45);
--accent: oklch(52% 0.18 248);
--accent-fg: oklch(98% 0 0);
--focus: oklch(52% 0.18 248);
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 32px;
--radius-sm: 16px;
--shadow: 0 8px 40px oklch(30% 0.04 70 / 0.2), 0 2px 8px oklch(20% 0.02 60 / 0.1);
--shadow-lg: 0 24px 80px oklch(25% 0.04 68 / 0.28), 0 4px 16px oklch(20% 0.02 60 / 0.12);
}Where it came from
Origin: Apple visionOS, introduced with Apple Vision Pro
Apple introduced visionOS in 2023 alongside Apple Vision Pro. The design system is built around the idea that UI panels are physical objects floating in space — they cast shadows based on their position, light plays across them, and they can be arranged at any depth. Unlike screen-based UI, they have no fixed canvas. The system pulls from glassmorphism but adds true spatial awareness.
How to spot it
- Translucent frosted panels with depth-aware shadows
- Specular highlights and spatial light response
- Generous spacing — content breathes in 3D
- Dark content behind glass stays visible
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Genuinely novel — nothing in 2D screen design looks like it | Impossible to reproduce faithfully in flat 2D |
| Depth hierarchy replaces Z-index stacking | Requires spatial hardware to fully experience |
| Content stays the hero; chrome dissolves | Glass-on-glass layering hurts legibility |
In the wild
- Apple Vision Pro home screen and app windows
- visionOS Settings and Safari floating panels
- Apple Mindfulness and Photos in visionOS
Use it when
Spatial computing apps, or dark-surface web UIs that want the depth aesthetic of visionOS.