Pictogrammes
Petites ressources graphiques simples qui améliorent les principaux composants web, communiquant des idées rapidement et efficacement.
Littéraux, fonctionnels et géométriques : nos pictogrammes distillent les idées à leur forme la plus pure, transmettant une intention claire et une simplicité intemporelle.
Type
Les pictogrammes Spaceship existent en deux types : régulier et comp. Le type comp combine un pictogramme régulier avec une icône de la bibliothèque d’icônes Spaceship, ce qui permet de transmettre des concepts plus complexes et spécifiques.
Versions
Tous les pictogrammes Spaceship sont disponibles en deux versions : pleine (principale) et en contour (secondaire). La version en contour ne doit être utilisée que lorsqu’un pictogramme doit avoir moins de poids visuel que les pictogrammes, textes ou composants d’interface voisins. Cela aide à établir une hiérarchie visuelle dans des mises en page complexes.
Construction
Les pictogrammes sont basés sur un ensemble de règles, de la grille de base aux paramètres de dégradé et de contour, afin de garantir des résultats cohérents et équilibrés.
Taille
Les pictogrammes Spaceship sont conçus pour être évolutifs, maintenant la cohérence visuelle et assurant la meilleure lisibilité. Il existe cinq tailles de pictogrammes dans notre système de design.
Couleurs
Les pictogrammes utilisent généralement une seule teinte. La seule exception concerne le type comp, qui peut inclure des couleurs de marque ou de notification, pour lesquelles vous trouverez plus d’informations ci-dessous. Pour garantir la cohérence dans les contextes d’interface, les pictogrammes suivent les références de couleurs du Spaceship Design System.
Couleur par défaut
Le gris est la couleur par défaut des pictogrammes et doit être utilisé pour représenter des messages, des actions ou des fonctionnalités. Dans des cas exceptionnels, il peut également être utilisé pour les produits. Les pictogrammes en contour ne sont disponibles que dans la couleur par défaut.
Couleurs de marque
SPS Blue, SPS Dark Gray ou blanc peuvent également être utilisés à la place de la couleur par défaut lorsque plus d’impact visuel est nécessaire ou pour renforcer l’identité Spaceship. Consultez la page des couleurs pour plus de détails.
Couleurs de produit
La couleur principale du produit doit être utilisée pour les pictogrammes dans les contextes dédiés au produit (pages produit, cartes produit, etc.) pour tous les produits actuels et à venir.
Couleurs de notification
Ces couleurs doivent être utilisées pour renforcer un message de notification. La version comp ne doit être utilisée que dans les messages système génériques et non dans les états d’avertissement.
Recommandations
Voici quelques exemples de ce qu’il faut éviter lors de la création et de l’utilisation de pictogrammes.
Ne laissez pas les éléments clés du pictogramme régulier se retrouver dans le coin inférieur droit.
N’utilisez pas de dégradés complexes ou multicolores dans les versions pleines.
Ne mélangez pas les éléments pleins et en contour dans le type comp.
N’utilisez pas d’autres couleurs dans les versions pleines que celles identifiées ci-dessus.
N’utilisez aucune couleur sur les versions en contour à part la couleur par défaut.
Ne combinez pas la couleur par défaut avec une autre couleur que la couleur principale de la marque Spaceship et les couleurs de notification.