Primaire
Notre palette principale constitue l'essentiel de notre création et doit représenter les teintes les plus fortes de toutes les pièces.
Couleurs
Notre palette de couleurs est enracinée dans notre histoire et constitue le fondement de notre apparence. Elle peut être utilisée pour affirmer une présence audacieuse et confiante ou pour transmettre une expertise claire.
Notre palette de couleurs a été organisée de manière à pouvoir s'adapter à une grande variété de scénarios visuels et de supports, tout en assurant une cohérence claire. Les teintes, les transparences ou les valeurs opaques de la palette doivent être évitées. Il faut plutôt s'en tenir aux nuances spécifiées.
Ombres
Pour plus de flexibilité, les 3 palettes de couleurs principales sont disponibles en différentes valeurs de teintes. Ne pas teinter ou ajouter de la transparence et utiliser les nuances telles quelles.
Noir et blanc
Teintes neutres
Nuances de bleu
Accents
Pour accentuer notre palette principale, nous disposons également d'un ensemble de palettes électriques pour communiquer le mouvement et attirer l'attention sur des zones spécifiques. Les couleurs d'accent ne doivent jamais être utilisées comme de grandes touches de couleur et doivent représenter moins de 5 % de la mise en page.
Technologie Sarcelle
Vert sécurité
Danger Rouge
Avertissement Orange
Attention Jaune
L'éducation en violet
Utilisation et contexte
La sélection minutieuse des couleurs et de leur contexte est essentielle pour façonner la narration créative, évoquer des émotions et assurer l'harmonie visuelle entre les éléments de la conception. Utilisez la couleur des caractères pour créer une expérience de lecture confortable et utilisez la couleur pour évoquer l'action. N'utilisez jamais une couleur d'action comme titre. Réservez le bleu à l'action et aux liens et évitez de l'utiliser pour les caractères statiques. Veillez à consulter les lignes directrices en matière d'accessibilité pour connaître les exigences en matière de contraste des caractères.
Texte
Graphique
Dégradés
Les dégradés donnent une impression de profondeur et aident à communiquer la stratification au sein de la composition. Ils peuvent également être utilisés pour nuancer les couleurs et les zones de typographie. Les couleurs dégradées permettent d'attirer l'œil du spectateur dans une direction donnée à travers le contenu.
Lorsque vous créez des dégradés, essayez de garder l'effet subtil et utilisez une palette en sautant une étape de couleur dans un groupe de nuances pour la définition. Le mélange de groupes de couleurs peut être un moyen d'apporter une couleur dynamique à une pièce. Évitez d'utiliser des dégradés lourds comme de grandes taches de couleur sur une pièce.
Blocage des couleurs
Texte
Électrique
Pour créer notre effet électrique, suivez les instructions ci-dessous afin d'obtenir un aspect cohérent entre les différentes expériences.
Utilisez les nuances d'un groupe de couleurs et construisez votre groupe d'icônes comme indiqué ci-dessous. Des techniques similaires peuvent être utilisées pour d'autres formes d'illustration, comme les lignes ou les bordures. La taille et l'opacité des lueurs et des points lumineux devront être adaptées au graphique ou au texte pour que l'effet soit subtil et net.
Pour les caractères, les mêmes combinaisons de couleurs peuvent être utilisées, mais il faut faire attention à l'accessibilité. Évitez d'utiliser cette technique sur des caractères gras de grande taille ou sur des caractères minuscules. Ajustez les spots optionnels pour qu'ils s'adaptent au bloc de texte.
Les spécifications indiquées sont celles de Figma. Des ajustements devront être apportés pour qu'elles correspondent visuellement à nos applications.
Formule
Variations
Type
Accessibilité
Primaire
Pour garantir une expérience cohérente au plus grand nombre de nos clients, nous voulons toujours rester aussi accessibles que possible. L'un des moyens d'y parvenir est d'adhérer aux directives WCAG 2.1 concernant les rapports de contraste pour le texte.
Vous trouverez ci-dessous le test complet de nos couleurs utilisées avec notre police de 16 pt pour les couleurs de blocage de texte acceptables. La mention "Attention" signifie que la couleur ne répond qu'aux normes AA et qu'elle ne doit être utilisée que pour un texte de grande taille ou en gras.
Action
Notre couleur bleue OPSWAT est notre principale nuance de couleur CTA et une attention particulière doit être apportée lorsqu'elle est placée au-dessus de nos blocs de couleurs primaires.
Accents
Lorsque vous utilisez nos statuts et nos accents, veillez à ce qu'ils soient accessibles. Si une couleur de police et un blocage sont indiqués ci-dessous, ils ne sont pas recommandés.
Académie
Lorsque vous utilisez notre Académie pourpre, veillez à l'accessibilité. Si une couleur de police et un blocage sont indiqués ci-dessous, ils ne sont pas recommandés.
