Foundations

Elevation

El sistema de elevación define 6 niveles de sombra que comunican jerarquía y profundidad. Cada nivel corresponde a un contexto de uso específico en la interfaz.

Extraído6 estilos — Figma styles API (EFFECT)

Niveles

card

Card container

Extraído

0 2px 8px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.04)

--ds-elevation-card

modal

Modal

Extraído

0 8px 32px 0 rgba(0,0,0,0.16), 0 2px 8px 0 rgba(0,0,0,0.08)

--ds-elevation-modal

overlay

Elevation_overlay

Extraído

0 4px 16px 0 rgba(0,0,0,0.12)

--ds-elevation-overlay

topbar

Topbar

Extraído

0 1px 4px 0 rgba(0,0,0,0.08)

--ds-elevation-topbar

navbar

Navbar

Extraído

0 -1px 4px 0 rgba(0,0,0,0.08)

--ds-elevation-navbar

icon-big

icon big

Extraído

0 4px 24px 0 rgba(0,0,0,0.12)

--ds-elevation-icon-big

Cuándo usar cada nivel

elevation.card

Tarjetas de contenido, listas, secciones de pantalla

elevation.topbar

Barra de navegación superior (sticky)

elevation.navbar

Barra de navegación inferior (sticky)

elevation.overlay

Elementos flotantes sobre el contenido principal

elevation.modal

Modales, bottom sheets, diálogos de confirmación

elevation.icon-big

Íconos destacados en contextos de alta prominencia