Elevación

Profundidad, sombra y luz

La elevación combina sombra y luz para sugerir la distancia entre dos superficies. En el producto trabajamos casi siempre en valores bajos: una sombra discreta es suficiente para que un componente se reconozca como temporal o transitorio.

Antes de elevar un elemento conviene revisar si el contraste y el espacio ya resuelven la jerarquía. La sombra reserva su presencia para los momentos en que un objeto realmente se despega del fondo.

Dirección de la sombra

Una dirección consistente de la sombra comunica una fuente de luz coherente en toda la interfaz.

Tamaño de la sombra

Como en el mundo físico, las sombras nítidas y compactas indican cercanía a la superficie, mientras que las sombras grandes y difusas sugieren mayor distancia.

Sistema de sombras

La rampa toma el valor de blur como referencia: la sombra 2 tiene 2px de blur, la sombra 64 tiene 64px. La curva está calibrada para que los pasos pequeños cubran la mayoría de los casos del producto y los pasos altos queden disponibles para situaciones puntuales.

Cada sombra se construye combinando una capa direccional y nítida (key) que define los bordes del elemento, con una capa suave y difusa (ambient) que sugiere distancia. La opacidad de ambas se mantiene baja para que la sombra acompañe al componente sin atraer atención por sí misma.

Rampa de elevación baja

Es donde vive la elevación cotidiana del producto. Los niveles 2 y 4 cubren la mayor parte de los componentes flotantes — hover cards, dropdowns, tooltips o command bars — y dejan que la interfaz se sienta plana y tranquila. 8 y 16 quedan disponibles cuando un componente necesita un peso visual ligeramente mayor. Tokens:$shadow2,$shadow4,$shadow8,$shadow16.

Rampa de elevación alta

Aparece de forma puntual, en superficies que cubren contenido detrás suyo: diálogos modales, drawers o bottom sheets en mobile. La separación visual debe estar justificada por la función — si un panel no interrumpe el flujo, no necesita esta rampa. Tokens:$shadow28,$shadow64.

Sombras sobre superficies de color

Las superficies de marca rara vez se elevan: su peso visual ya proviene del color. Cuando un componente sí necesita despegarse sobre fondo de color, usamos los tokens de sombra de marca, que ajustan la opacidad para que la sombra siga leyéndose sin ensuciar el indigo.