Saltar al contenido

Elevación

Beta

Seis niveles de sombra para comunicar qué está por encima de qué.

La elevación no es decoración: responde qué flota sobre qué. Una sombra más grande significa "esto está más cerca tuyo y es temporal" — un menú, un modal. Si todo tiene sombra, nada está elevado.

En Figma son los effect styles Elevation/xs … Elevation/2xl; en código, las utilidades shadow-xs … shadow-2xl y las variables --ds-shadow-*.

Escala

xs

Apenas despega: inputs, botones neutros, cards en reposo.

sm

Cards interactivas en reposo, segmentos activos.

md

Cards en hover, dropdowns compactos.

lg

Menús, popovers, tooltips, toasts.

xl

Modales y drawers.

2xl

Máxima elevación: overlays sobre overlays, media destacada.

Todas las sombras comparten un único color (rgb(10 13 18)) y solo varían offset, blur y alpha. Por eso se pueden apilar superficies sin que una sombra "ensucie" a la otra.

Qué nivel usar

CapaNivelEjemplos
Basesin sombraPágina, secciones, la mayoría de las cards (usan borde).
Reposoxs smInputs, botones neutros, cards clickeables.
InteracciónmdCard en hover, elemento que se está arrastrando.
FlotantelgMenús, popovers, tooltips, toasts.
BloqueantexlModales y drawers (siempre con scrim).
Excepcional2xlOverlay sobre overlay, media destacada en marketing.

Reglas

  • Borde primero, sombra después. En Polen la separación por defecto es border/default. La sombra se reserva para lo que realmente flota.
  • Subí un nivel en hover, nunca dos. sm → md, con duration-fast.
  • La superficie elevada usa bg/elevated, no bg/default: en dark mode la sombra casi no se ve y el cambio de fondo hace el trabajo.
  • No inventes sombras de color. El glow verde de foco es focus/ring, no una elevación.

En código

<div className="rounded-2xl bg-bg-elevated shadow-lg">…</div>
.menu {
  background: var(--bg-elevated);
  box-shadow: var(--ds-shadow-lg);
}