Pictogramas
Pequeños y simples elementos gráficos que mejoran los componentes clave de la web, comunicando ideas de manera rápida y efectiva.
Literales, funcionales y geométricos — 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 ícono de la Biblioteca de Iconografía de Spaceship, lo que nos permite comunicar conceptos más complejos y particulares.
Versiones
Todos los pictogramas de Spaceship están disponibles en dos versiones: rellena (principal) y delineada (secundaria). La versión delineada solo debe usarse cuando un pictograma necesita menos peso visual que los pictogramas, el texto o los componentes de UI 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 consistentes y equilibrados.
Tamaño
Los pictogramas de Spaceship están diseñados para ser escalables, manteniendo la consistencia visual y garantizando la mejor legibilidad. Hay cinco tamaños de pictogramas en nuestro sistema de diseño.
Colores
Los pictogramas generalmente usan 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 garantizar la consistencia en contextos de UI, 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 un mayor impacto visual o para reforzar la identidad de Spaceship. Consulta la página de color para obtener más detalles.
Colores de producto
El color principal del producto debe usarse para los pictogramas en contextos dedicados al producto (páginas de producto, tarjetas de producto, etc.) para todos los productos actuales y próximos.
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í 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 gradientes 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 además del color predeterminado.
No combines el color predeterminado con ningún color que no sea el color primario de marca de Spaceship y los colores de notificación.