Profundidad · Eidos

Eidos · canal de profundidad

La profundidad ocurre

No es una propiedad que un elemento tiene — es algo que sucede. Mira: la profundidad responde al cursor y asciende cuando algo emerge.

Reacciona

Pasa el cursor — cada tarjeta sube de plano (raised → overlay): la sombra crece y se eleva.

{#each [{ t: 'Ingresos', v: '€48.2k', d: '+12% este mes', c: 'fulfill' }, { t: 'Sesiones', v: '9 312', d: '+4% vs ayer', c: 'primary' }, { t: 'Alertas', v: '3', d: 'requieren acción', c: 'risk' }] as card}
{card.t} {card.v} {card.d}
{/each}

Asciende

Abre el panel: asciende sobre el contenido (que recede tras el scrim). La sombra crece desde plano hasta su elevación — la firma del evento, no un estilo fijo.

panel · proyecto
{#each ['Revisar borrador de diseño', 'Publicar el sprint de profundidad', 'Cerrar incidencias abiertas'] as row, i}
{row}
{/each}
{#if open}

Acabo de ascender

Mi sombra creció desde la superficie hasta el plano modal mientras subía — y el contenido de detrás recedió. Eso es la profundidad ocurriendo.

{/if}

Cada plano, un rol

Los 5 planos son los componentes que los necesitan. data-depth cohere superficie + sombra + z; en dark, "más arriba" = más claro (mode-aware).

diseño activo v2
flush · chips, a ras de superficie
A
Tarjetacontenido en reposo
raised · tarjetas, paneles
overlay · menús, popovers
¿Eliminar? No se puede deshacer. Eliminar
modal · diálogos, cima
Buscar escribe aquí…
recessed · inputs, pozos