Iconos
Los iconos 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 iconos son los componentes más pequeños de la marca, diseñados para un reconocimiento instantáneo y conservando claramente la identidad de Spaceship.
Versiones
Todos los iconos de Spaceship están disponibles en dos versiones: contorneada (principal) y rellena (secundaria).
Construcción
Los iconos se diseñan según reglas definidas —desde la cuadrícula base hasta los parámetros del trazo—, lo que garantiza resultados coherentes y equilibrados.
Tamaño
Escalables por diseño, los iconos 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 concreta. Para garantizar la coherencia en estos contextos de UI, los iconos utilizan los colores del Spaceship Design System.
Colores de marca
Como colores principales de Spaceship, estos deben ser la opción principal para los iconos, ya sea en contextos funcionales como la interfaz de usuario de la plataforma o en usos más ilustrativos, como la representación de funciones en las páginas de producto. Consulta la página de color para obtener más detalles.
Colores del producto
Los colores principales de un producto deben aplicarse a sus iconos correspondientes. 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 iconos de alerta, con excepciones ocasionales en las que otro icono también represente estados de éxito, error o advertencia.
Guía
Aquí tienes algunos ejemplos de lo que debes evitar al usar iconos.
No deformes, gires ni inviertas los iconos. Escálalos siempre de forma proporcional.
No uses iconos de más de 40x40px. Busca un equilibrio entre los elementos.
No uses tintes ni sombras.