Íconos
Los íconos de Spaceship traducen acciones e ideas complejas en símbolos instantáneamente reconocibles, ayudando a los usuarios a navegar e interactuar con facilidad.
Universales pero distintivos, nuestros íconos son los bloques de construcción más pequeños de la marca, diseñados para un reconocimiento instantáneo mientras mantienen claramente la identidad de Spaceship.
Versiones
Todos los íconos de Spaceship están disponibles en dos versiones: contorno (primaria) y relleno (secundaria).
Construcción
Los íconos están diseñados según reglas definidas — desde la cuadrícula base hasta los parámetros de trazo — asegurando resultados consistentes y equilibrados.
Tamaño
Escalables por diseño, los íconos deben usarse en cinco tamaños para preservar la claridad y la armonía visual en todo el sistema.
Colores
El color es un elemento esencial que ayuda a los usuarios a identificar sus productos más fácilmente dentro de una interfaz particular. Para asegurar la consistencia en estos contextos de interfaz, los íconos usan los colores del Spaceship Design System.
Colores de la marca
Como colores principales de Spaceship, estos deben ser la opción primaria para los íconos — ya sea en contextos funcionales como la interfaz de la plataforma o en usos más ilustrativos, como la representación de funciones en las páginas de productos. Consulta la página de colores para más detalles.
Colores de producto
Los colores principales de un producto deben aplicarse a sus respectivos íconos. Esto es clave para el reconocimiento y la identificación del producto en todo el ecosistema de Spaceship.
Colores de notificación
Utiliza los colores de notificación para reforzar los mensajes de alerta. Deben aplicarse solo a los íconos de alerta, con excepciones ocasionales donde otro ícono también represente estados de éxito, error o advertencia.
Guía
Aquí hay algunos ejemplos de lo que se debe evitar al usar íconos.
No distorsiones, gires ni inviertas los íconos. Siempre escala proporcionalmente.
No uses íconos más grandes que 40x40px. Busca el equilibrio entre los elementos.
No uses matices ni sombras.