Sombras y radios

Las sombras y los radios son los detalles que separan una pantalla plana de una con jerarquía. Tres niveles de cada uno cubren el 95% de los casos — si necesitas algo distinto, probablemente la solución sea otra.

Sombras

Tres niveles de elevación, todos en tono tinta-900 (negro) con baja opacidad para que se sientan suaves sin gritar. Crecen en blur y desplazamiento en Y a medida que el elemento “se eleva” sobre la superficie.

Cuándo usar cada sombra

• Sombra S — diferenciar superficies a nivel de página (cards planas, inputs destacados, badges). Apenas insinúa que algo está separado del fondo.
• Sombra M — elementos flotantes bajos (floating menu, dropdowns, tooltips persistentes). Indica que el elemento está sobre el contenido pero no es modal.
• Sombra L — diálogos, modales, overlays, popovers grandes. Marca jerarquía clara: esto está por encima de todo lo demás.

Reglas de uso

Una sombra por elemento, nunca encadenadas. Si un card está dentro de un modal, el card no lleva sombra — el modal ya carga la elevación. En dark mode las sombras se sienten menos (el contraste base es menor) — para esa app, considerar reemplazar sombra por borde sutil en tinta-700 o un cambio de superficie.

Radios

Tres pasos discretos. La elección depende del tamaño del elemento, no del gusto.

Cuándo usar cada radio

• Radio S (4px) — elementos pequeños: chips, badges, inputs de altura compacta, code inline.
• Radio M (8px) — el default: cards, botones estándar, inputs de altura normal, contenedores medianos.
• Radio L (16px) — superficies principales: cards grandes, paneles destacados, hero blocks, modales.

Casos especiales

• Pills (9999px) — solo para elementos cuyo rol es “etiqueta redondeada”: status badges en pedidos, CartBar, tags filtrables. Nunca para botones primarios o cards.
• Sin radio (0) — superficies que llegan al borde de la pantalla (hero full-bleed, footers). El radio se siente extraño cuando no tiene “afuera”.