Pictogramas
Pequeños y sencillos elementos gráficos que mejoran los componentes clave de la web, comunicando ideas de forma rápida y eficaz.
Literal, funcional y geométrico: nuestros pictogramas destilan las 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 icono de la Biblioteca de Iconografía de Spaceship, permitiendo transmitir conceptos más complejos y específicos.
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 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 garantizar resultados coherentes y equilibrados.
Tamaño
Los pictogramas de Spaceship están diseñados para ser escalables, manteniendo la coherencia 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 a continuación. Para garantizar la coherencia en contextos de interfaz, los pictogramas siguen las referencias de color del Spaceship Design System.
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 de sistema genéricos y no en estados de advertencia.
Guía
Aquí tienes algunos ejemplos de lo que debes 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 aparte de los identificados anteriormente.
No uses ningún color en las versiones delineadas aparte del color predeterminado.
No combines el color predeterminado con ningún color que no sea el principal de la marca Spaceship y los colores de notificación.