Les principes du design, et comment créer une application parfaitement adaptée à l'écosytème Design System, incluent une palette de couleurs répondant à l'identité visuelle de Finance Active.
Palette
| Couleur | Nom | Code Hex |
|---|---|---|
|
|
Primaire | #1C3966 |
|
|
Secondaire | #2EA7AA |
|
|
Défaut | #37404E |
|
|
Succès | #4CAF50 |
|
|
Avertissement | #FF8E00 |
|
|
Alerte | #ED412C |
|
|
Info | #008CBA |
|
|
Filtre | #D3E4F8 |
|
|
Simulation | #FDE3A7 |
|
|
Finact | #B3A16E |
|
|
Fairways | #E95053 |
|
|
Insito | #2EA7AA |
|
|
Violet | #9F1BB7 |
|
|
Neutre | #888888 |
|
|
Blan | #FFFFFF |
|
|
Gris très clair | #F3F3F3 |
|
|
Gris clair | #E6E6E6 |
|
|
Gris | #CCCCCC |
|
|
Gris moyen | #6A7480 |
|
|
Gris foncé | #37404E |
|
|
Noir | #000000 |
Usage
Vous pouvez utiliser chaque couleur de la palette :
- Pour les textes avec le préfixe
.c-, par ex..c-primary. - Pour les arrières-plans avec le préfixe
.bg-. Les-lightet-darkéclaircissent ou obscurcissent la couleur.
L'état "dessus" (hover)
Vous pouvez ajouter un état "dessus" sur chaque élément en ajoutant une classe à l'arrière-plan .bg-, avec .bg-hover.
Pour plus d'informations, voir Finance Active's Design System (en anglais).