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 jusqu’à leur forme la plus pure, en transmettant une intention claire et une simplicité intemporelle.
Type
Les pictogrammes Spaceship existent en deux types : regular et comp. Le type comp combine un pictogramme regular avec une icône de la bibliothèque d’iconographie de Spaceship, ce qui nous permet de transmettre des concepts plus complexes et plus 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 a besoin de moins de poids visuel que les pictogrammes, le texte ou les composants d’interface utilisateur à proximité. Cela aide à établir une hiérarchie visuelle dans les mises en page complexes.
Construction
Les pictogrammes reposent 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 adaptables à l’échelle, en conservant une cohérence visuelle et en garantissant 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 est le type comp, qui peut inclure des couleurs de marque ou de notification, sur lesquelles vous trouverez plus d’informations ci-dessous. Afin d’assurer la cohérence dans les contextes d’interface utilisateur, les pictogrammes suivent les références de couleur 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 aussi être utilisé pour des produits. Les pictogrammes en contour sont uniquement disponibles dans la couleur par défaut.
Couleurs de marque
Le SPS Blue, le SPS Dark Gray ou le blanc peuvent également être utilisés à la place de la couleur par défaut lorsqu’un impact visuel plus fort est nécessaire ou pour renforcer l’identité de Spaceship. Consultez la page des couleurs pour plus de détails.
Couleurs 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.
Guide
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 regular tomber dans le coin inférieur droit.
N’utilisez pas de dégradés complexes ou multicolores dans les versions pleines.
Ne mélangez pas des éléments pleins et en contour dans le type comp.
N’utilisez pas d’autres couleurs dans les versions pleines en dehors de celles identifiées ci-dessus.
N’utilisez aucune autre couleur sur les versions en contour que la couleur par défaut.
Ne combinez pas la couleur par défaut avec une autre couleur que la couleur primaire de la marque Spaceship et les couleurs de notification.