Icônes
Les icônes Spaceship traduisent des actions et des idées complexes en symboles instantanément reconnaissables, aidant les utilisateurs à naviguer et à interagir facilement.
Universelles mais distinctifs, nos icônes sont les plus petits éléments constitutifs de la marque, conçus pour une reconnaissance instantanée tout en conservant clairement l'identité Spaceship.
Versions
Toutes les icônes Spaceship sont disponibles en deux versions : contour (primaire) et plein (secondaire).
Construction
Les icônes sont conçues selon des règles définies — de la grille de base aux paramètres de tracé — garantissant des résultats cohérents et équilibrés.
Taille
Conçues pour être évolutives, les icônes doivent être utilisées en cinq tailles afin de préserver la clarté et l’harmonie visuelle dans tout le système.
Couleurs
La couleur est un élément essentiel qui aide les utilisateurs à identifier plus facilement leurs produits dans une interface donnée. Pour garantir la cohérence dans ces contextes d’interface, les icônes utilisent les couleurs du Spaceship Design System.
Couleurs de la marque
En tant que couleurs principales de Spaceship, celles-ci doivent être privilégiées pour les icônes — que ce soit dans des contextes fonctionnels comme l'interface de la plateforme ou dans des usages plus illustratifs, tels que la représentation de fonctionnalités sur les pages produits. Consultez la page des couleurs pour plus de détails.
Couleurs du produit
Les couleurs principales d’un produit doivent être appliquées à ses icônes respectives. C’est essentiel pour la reconnaissance et la notoriété du produit dans l’écosystème Spaceship.
Couleurs de notification
Utilisez les couleurs de notification pour renforcer les messages d’alerte. Elles doivent être appliquées uniquement aux icônes d’alerte, avec quelques exceptions où une autre icône représente également les états de succès, d’erreur ou d’avertissement.
Conseils
Voici quelques exemples de ce qu’il faut éviter lors de l’utilisation des icônes.
Ne déformez pas, ne faites pas pivoter ni retourner les icônes. Redimensionnez-les toujours proportionnellement.
N’utilisez pas d’icônes de plus de 40x40px. Cherchez l’équilibre entre les éléments.
N’utilisez pas de teintes ou de nuances.