Passe les couleurs de l'App DS au design system de l'état

[kara22]

• [x] Se familiariser avec le design system (lire la doc)
• [x] Déterminer les composants nécessaires pour adapter la page d'accueil au nouveau design
• [x] Implémenter le nouveau design (couleurs) sur la page d'accueil
• [x] Implémenter le nouveau design (couleurs) sur les autres pages

[krichtof]

Le site de référence est par ici : https://www.systeme-de-design.gouv.fr/

[kara22]

L'installation du DFSR peut se faire via NPM / Yarn ou via des fichiers statiques : https://gouvfr.atlassian.net/wiki/spaces/DB/pages/223019574/D+veloppeurs

Pour passer la 1ère page de DS sur le DSFR :

Couleurs

1. Boutons :

Remplacer la couleur bleue par une des valeurs suivantes :

• https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color#%24blue-france-500
• https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color#%24blue-france-600
• https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color#%2300006D%5BhardBreak%5DRGB-%3A-0%2C-0%2C-109

2. Images :

Remplacer la couleur bleue par une des valeurs ci-dessus

3. Fonds gris

Pas besoin de changement de couleurs le gris et le blanc utilisé sont compatibles au design system de l'état

4. Texte

• Le texte bleu est à remplacer par une des valeurs ci-dessus
• Le texte foncé est à remplacer par une des valeurs suivantes :
  • https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color#%24g700
  • https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color#%24g750
  • https://gouvfr.atlassian.net/wiki/spaces/DB/pagesRefresh the app now.
  • /217186370/Couleurs+-+palette+-+Color#%24g800
  • https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color#%24g600

Typographie :

1. Liens :

Des classes pour spécifier la taille des liens sont à ajouter. A la place de « footer-link » utiliser « fr-link » + la classe de taille appropriée : https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217284725/Liens+-+Links

2. Polices :



Nous devons utiliser les polices Marianne et / ou Spectral. La police Marianne n’est pas encore stable et sécurisée. Je vous propose donc de ne pas la changer pour le moment ou d’utiliser la police de substitution Arial. 
La police spectral est stable et sécurisée.

3. Styles :

Des classes spéciales existent pour spécifier le style des titres et des textes, il faudra donc les utiliser.

@krichtof @emsnytech @tchak