Pictogramas
Pequeños y simples elementos gráficos que mejoran los componentes clave de la web, comunicando ideas de manera rápida y efectiva.
Literal, funcional y geométrico: nuestros pictogramas destilan ideas a su forma más pura, transmitiendo un propósito claro y una simplicidad atemporal.
Tipo
Los pictogramas de Spaceship vienen en dos tipos: regular y comp. El tipo comp combina un pictograma regular con un ícono de la Biblioteca de Iconografía de Spaceship, permitiendo transmitir conceptos más complejos y particulares.
Versiones
Todos los pictogramas de Spaceship están disponibles en dos versiones: rellena (primaria) y delineada (secundaria). La versión delineada solo debe usarse cuando un pictograma necesita menos peso visual que los pictogramas, textos o componentes de la interfaz cercanos. Esto ayuda a establecer una jerarquía visual en diseños complejos.
Construcción
Los pictogramas se basan en un conjunto de reglas, desde la cuadrícula base hasta los parámetros de degradado y trazo, para asegurar resultados consistentes y equilibrados.
Tamaño
Los pictogramas de Spaceship están diseñados para ser escalables, manteniendo la consistencia visual y asegurando la mejor legibilidad. Hay cinco tamaños de pictogramas en nuestro sistema de diseño.
Colores
Los pictogramas generalmente utilizan un solo tono. La única excepción es el tipo comp, que puede incluir colores de marca o de notificación, sobre los cuales encontrarás más información abajo. Para asegurar la consistencia en contextos de interfaz, los pictogramas siguen las referencias de color del Sistema de Diseño de Spaceship.
Color predeterminado
El gris es el color predeterminado para los pictogramas y debe usarse para representar mensajes, acciones o funciones. En casos excepcionales, también puede usarse para productos. Los pictogramas delineados solo están disponibles en el color predeterminado.
Colores de marca
SPS Blue, SPS Dark Gray o blanco también pueden usarse en lugar del color predeterminado cuando se necesita mayor impacto visual o para reforzar la identidad de Spaceship. Consulta la página de colores para más detalles.
Colores de producto
El color principal del producto debe usarse para pictogramas en contextos dedicados al producto (páginas de producto, tarjetas de producto, etc.) para todos los productos actuales y futuros.
Colores de notificación
Estos colores deben usarse para reforzar un mensaje de notificación. La versión comp solo debe usarse en mensajes genéricos del sistema y no en estados de advertencia.
Guía
Aquí hay algunos ejemplos de lo que se debe evitar al crear y usar pictogramas.
No permitas que los elementos clave del pictograma regular caigan en la esquina inferior derecha.
No uses degradados complejos o multicolores en las versiones rellenas.
No mezcles elementos rellenos y delineados en el tipo comp.
No uses otros colores en las versiones rellenas además de los identificados arriba.
No uses ningún color en las versiones delineadas que no sea el color predeterminado.
No combines el color predeterminado con ningún color que no sea el color primario de la marca Spaceship y los colores de Notificación.