Í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 conservan claramente la identidad de Spaceship.
Versiones
Todos los íconos de Spaceship están disponibles en dos versiones: delineada (principal) y rellena (secundaria).
Construcción
Los íconos están diseñados de acuerdo con reglas definidas — desde la cuadrícula base hasta los parámetros del trazo —, lo que garantiza 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 en particular. Para garantizar la consistencia en estos contextos de IU, los íconos usan los colores del Spaceship Design System.
Colores de marca
Como colores principales de Spaceship, estos deben ser la opción principal para los íconos, 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 productos. Consulta la página de colores para obtener más detalles.
Colores del producto
Los colores principales de un producto deben aplicarse a sus respectivos íconos. Esto es clave para el reconocimiento y la visibilidad del producto en todo el ecosistema de Spaceship.
Colores de notificación
Usa colores de notificación para reforzar los mensajes de alerta. Deben aplicarse solo a los íconos de alerta, con excepciones ocasionales en las que otro ícono también represente estados de éxito, error o advertencia.
Guía
Aquí tienes algunos ejemplos de lo que debes evitar al usar íconos.
No deformes, gires ni voltees los íconos. Escálalos siempre de forma proporcional.
No uses íconos de más de 40x40px. Busca un equilibrio entre los elementos.
No uses tintes ni sombras.