Sistema de diseño
Elevación
La elevación es la distancia relativa entre dos superficies a lo largo del eje Z. Esta elevación en el sistema de diseño digital Repsol se representa (por defecto) a través del uso de sombras.
Su función es crear la ilusión de profundidad. Resaltan elementos y se pueden utilizar para indicar la relación espacial entre elementos. generando diferentes superficies que el usuario puede percibir fácilmente.
Las elevaciones se componen principalmente de superficies y sombras. Juntas, las superficies y las sombras crean la impresión de elevación o profundidad. Las elevaciones pueden guiar el enfoque a través de capas, o indicar que la interfaz de usuario se puede desplazar, deslizar o arrastrar.
Escala de elevaciones
Utilizamos una nomenclatura global de tallas para identificar rápidamente cada sombra y su intensidad. Al contrario que con colores y tipografía, no existen sombras específicas, ya que cada talla tiene una serie de usos determinados.
Global Sadows
Token
Uso
Valores
Negative
Para elementos fixed o sticky que necesiten elevarse sobre un contenido que se desliza por debajo
0px 0px 2px 0px (0,0,0, 0.10)
0px -4px 11px 0px (0,0,0, 0.08)
0px -4px 11px 0px (0,0,0, 0.08)
XS
Muy sutil, casi similar a un borde. Su función es resaltar elementos sin dar la sensación de profundidad.
0px 0px 3px 0px (0,0,0, 0.10)
S
Este token se usa en efectos hover, reemplaza a la sombra L cuando interactuamos con elementos que se elevan.
0px -1px 4px -4px (0,0,0, 0.02)
0px 2px 8px -2px (0,0,0, 0.14)
0px 2px 8px -2px (0,0,0, 0.14)
L
Token de elevación más utilizado en producto. Recomendado para elementos clicables y para destacar de forma visual componentes a nuestros usuarios.
0px 8px 32px 0px (0,0,0, 0.08)
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
