Fondamentaux

Notre charte graphique met en place des normes
à respecter pour un meilleur fonctionnement du
Design System.

Palette

🎯 Introduction

Évolution et objectifs :
Les couleurs évoluent afin de correspondre à la nouvelle charte établie dans le brandbook de la CNSA. Dans le même temps un travail sur les couleurs a été effectué afin de répondre aux besoins et retours des produits. Les objectifs sont :

Avoir des couleurs plus franches

Rationaliser : réduire au minimum, supprimer les couleurs trop proches

Une palette cohérente avec le brand book

Logique des tokens :
Le système de couleurs du Design System de l’Autonomie est construit autour de tokens sémantiques. Cela signifie que les couleurs ne sont pas appelées par leur valeur hexadécimale mais par leur fonction, exemple dans Figma : Alert/Background/Success, correspond à la couleur de fond d’une alert de type succès, côté développement --dsa-wc-alert-success-background-color

Couleurs principales

Violet identitaire

Le violet, occupe une place prédominante dans le système de conception, il agit comme une couleur marquante. Et est réservé uniquement aux éléments interactifs.

Variables CSS : --dsa-color-primitive-colors-identity-purple-{n}

Primitive colors / Identity / Purple

#fdfaff

100

#f7f0ff

200

#efe1fe

300

#d9bafd

400

#6e0bef

500

#540abd

600

#4f1e9a

700

#48277c

800

#402b64

900

#372853

Vert identitaire

Cette teinte représente la couleur centrale de l'identité de la CNSA.

Afin d'éviter toute confusion entre les éléments visuels de la CNSA et les teintes signalant un succès, cette couleur doit être réservée exclusivement aux arrière-plans et aux images.

Variables CSS : --dsa-color-primitive-colors-identity-green-{n}

100

#fdfcd8

300

#d3d80e

500

#76b82a

600

#418321

700

#1d631d

800

#1d4924

900

#193422

Couleurs secondaires

Pour introduire des nuances additionnelles, vous avez à disposition cinq couleurs secondaires. Cependant, leur emploi doit demeurer modéré.

Variables CSS : --dsa-color-primitive-colors-complementary-blue-{n}

Bleu

100

#e7f9fe

200

#9fe1f9

500

#6bb1df

600

#4e81a6

800

#213e63

Vert

Variables CSS : --dsa-color-primitive-colors-complementary-green-{n}

200

#ecf9f9

300

#b5e3e1

500

#85c7bf

700

#418b85

800

#26403d

Couleurs neutres

Ces nuances sont les plus fréquemment employées au sein des interfaces, trouvant leur application dans les arrière-plans, les contours et le texte.

Variables CSS : --dsa-color-primitive-colors-neutral-{n}

#ffffff

#fcfdfd

100

#f4f6f6

200

#d8dfdf

300

#bfcac9

600

#788c8b

700

#465353

800

#3a4545

900

#21282b

Retour d'information

Les couleurs de retour d'information englobent l'ensemble des teintes utilisées afin de fournir des indications visuelles ou des réponses aux interactions des utilisateurs ou aux états du système.

Ces teintes sont mises en œuvre pour communiquer divers types de retours aux utilisateurs, incluant des messages de succès, d'erreur, d'avertissement ou d'information.

Error

Variables CSS : --dsa-color-primitive-colors-feedback-error-{n}

100

#fff7f5

200

#ffdfdb

400

#fc8175

500

#dd1708

900

#4b0808

Success

Variables CSS : --dsa-color-primitive-colors-feedback-success-{n}

100

#f0fef3

200

#c9f8d6

500

#127d40

700

#1a6642

900

#1a382d

Warning

Variables CSS : --dsa-color-primitive-colors-feedback-warning-{n}

100

#fff9eb

200

#ffecc7

500

#ffc043

700

#794a06

900

#522c00