Contexto

Estos elementos te permiten darles un buen acabado a los bordes y las esquinas de los elementos visuales de tu app web. Y, sobre todo, a nadie le gustan los bordes que sobresalen, ¿no? Bueno, excepto a los gatos. No sabemos con certeza que realicen pedidos online (todavía).

Radio del borde

Esta propiedad se utiliza para redondear las esquinas del borde exterior de un elemento.

Entradas

• Se utilizan para las entradas de texto con contorno.
• Valor predeterminado: 8 píxeles

Tarjetas

• Las tarjetas son superficies que muestran contenidos o acciones, y pueden tener elementos encima, como imágenes y textos.
• Valor predeterminado: 8 píxeles

Diálogos

• Los diálogos se utilizan en ventanas emergentes, que son contenedores que se muestran en la parte superior del contenido y de la página.
• Valor predeterminado: 16 píxeles

Imágenes

• Se utilizan en cualquier imagen, excepto las que ocupan todo el ancho del sitio web o de un contenedor.
• Valor predeterminado: 8 píxeles

Color de las líneas

Este es el color de las líneas divisorias utilizadas en la interfaz. Las líneas se utilizan para separar visualmente bloques de datos más pequeños. Habitualmente, los bloques más pequeños hacen referencia al mismo tipo de información. Tiene dos variantes diferentes: predeterminada y pasiva. Hay dos valores: el color de la línea y su transparencia.

Variante predeterminada

Apropiada cuando se dividen elementos sobre superficies más claras.
Valores predeterminados:

• Color: #2C2C31
• Opacidad: 6 %

Variante pasiva

Apropiada para dividir elementos sobre superficies más oscuras o para dividir secciones más grandes en una página.
Valores predeterminados:

• Color: #2C2C31
• Opacidad: 20 %

Sombras

El uso principal de las sombras es elevar dos superficies a lo largo del eje Z (el eje de arriba a abajo). Las sombras más grandes implican que hay mayor elevación de la superficie en el eje Z, el eje vertical (arriba/abajo).
Por otro lado, la sombra de enfoque se utiliza como un borde que indica qué elemento se seleccionó. Esto es de especial utilidad para usuarios con ciertas afecciones de la visión que utilizan teclados para navegar por la app. 

El único valor que afectará a tu marca es el color de la sombra de enfoque. Este debe utilizar los valores del color principal.No recomendamos cambiar ningún otro valor predeterminado, ya que se ajustaron para mejorar la funcionalidad.

Las sombras se definen mediante 6 propiedades:

• Desplazamiento X: empuja la sombra en el eje X (izquierda/abajo)
• Desplazamiento Y: empuja la sombra en el eje Y (derecha/abajo)
• Desenfoque: simplemente difumina la sombra y simula la distancia de la superficie a la fuente de luz. Cuanto más grande es el desenfoque, más clara es la parte exterior de la sombra.
• Propagación: contrasta la sombra en todas las direcciones. Al igual que el desenfoque, el contraste y la propagación se correlacionan directamente.
• Color: define el color de la sombra.
• Opacidad: define la transparencia del color.

Uso: estados de desplazamiento del mouse, tarjeta, modal, contenedores de directorio, navegación

Sombra corta

Valores predeterminados:

• X: 0
• Y: 2
• Desenfoque: 4
• Propagación: 0
• Color: #2C2C31
• Opacidad: 10 %

Sombra larga

Valores predeterminados:

• X: 0
• Y: 4
• Desenfoque: 10
• Propagación: 0
• Color: #2C2C31
• Opacidad: 15 %

Sombra de enfoque

Valores predeterminados:

• X: 0
• Y: 0
• Desenfoque: 0
• Propagación: 2
• Color: #F2613D
• Opacidad: 100 %