Designing with Depth — Beyond Flat Interfaces

The flat design era served us well. But as interfaces grow more complex, flat design feels like a ceiling rather than a foundation.

The rise of spatial interfaces

Depth in interface design isn’t about 3D gimmicks. It’s about using space to create hierarchy, focus, and context.

Three principles

Hierarchy through depth. When elements exist at different depths — foreground cards, mid-ground content, background environment — the eye naturally sequences through them.

Material as metaphor. Glass, paper, metal aren’t skeuomorphic nostalgia. They’re cognitive shortcuts. A semi-transparent panel floating above a background instinctively communicates temporary, focused context.

Motion with meaning. A card that lifts on hover communicates: I’m interactive. Clicking me will take you somewhere. Motion as information, not decoration.

The technical side

Building true glass materials requires layering. Not just backdrop-filter: blur() slapped on a div.

/* True Liquid Glass */
.glass {
  background: color-mix(in srgb, var(--glass) 14%, transparent);
  backdrop-filter: blur(3px) saturate(150%);
  filter: url(#distortion);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.1),
    inset 2px 3px 0 -1px rgba(255,255,255,0.7),
    inset -2px -2px 0 -1px rgba(255,255,255,0.6),
    inset -1px 2px 3px -1px rgba(0,0,0,0.15);
}

The SVG distortion filter using feTurbulence + feDisplacementMap creates the characteristic liquid refraction that pure CSS cannot achieve.

Start small. Add one layer of depth where it solves a real problem. Build from there. The future of UI isn’t flatter or deeper — it’s more intentional.