Depth

Flat cards with 1px borders sit on the page. A depth stack sits above it: soft contact shadow, slight scale on the layers behind, maybe a hint of blur on what is occluded. The difference is the end of plastic UI.

Toggle flat versus depth.

Flat is a single rectangle. Depth is a stack: back cards shrink and soften, the front card gains a longer ambient shadow and a tight contact edge. You read height without a border grid.

Occlusion beats outline

If two surfaces overlap, let the upper one cast on the lower one. Do not draw both with the same border weight — that flattens them again. Keep accent (#c0300f) for the action on the front-most surface only; chrome behind it stays quiet.

Blur on back layers should be subtle (1–2px). Enough to say "out of focus," not enough to look like a frosted modal.

Usage

<div class="relative h-28 w-44">
    <div class="absolute inset-0 translate-y-3 scale-95 rounded-xl bg-card opacity-40 blur-[1.5px]"></div>
    <div class="absolute inset-0 translate-y-1.5 scale-[0.975] rounded-xl bg-card opacity-70 shadow-md"></div>
    <div class="relative h-full rounded-xl bg-card p-3 shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_12px_28px_-10px_rgba(0,0,0,0.22)]">
        <!-- front content -->
    </div>
</div>

.stack { position: relative; }

.stack-back {
    position: absolute;
    inset: 0;
    transform: translateY(12px) scale(0.95);
    filter: blur(1.5px);
    opacity: 0.4;
}

.stack-front {
    position: relative;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 12px 28px -10px rgba(0, 0, 0, 0.22);
}

Depth is a system: ring + contact + ambient, then occlusion. One heavy box-shadow is not the same thing.