Le Système de Design de l’État (ci-après, le DSFR) est un ensemble de composants web HTML, CSS et Javascript pour faciliter le travail des équipes projets des sites Internet publics, et créer des interfaces numériques de qualité et accessibles.
L'outil est développé, maintenu et géré par le Service d'Information du Gouvernement (SIG).
Son utilisation par les administrations est soumise à une demande d'agrément (voir partie 5 des Conditions Générales d'Utilisation).
Voir la documentation officielle.
La librairie illustrative du DSFR est un ensemble de fichiers SVG, des icônes et pictogrammes utilisés dans le DSFR, ainsi que les fichiers CSS et Javascript liés.
Le contenu de ce projet est placé sous licence MIT License. Voir LICENSE.md.
Il est formellement interdit à tout autre acteur d’utiliser le Système de Design de l’État (les administrations territoriales ou tout autre acteur privé) pour des sites web ou des applications. Le Système de Design de l’État représente l’identité numérique de l’État. En cas d’usage à des fins trompeuses ou frauduleuses, l'État se réserve le droit d’entreprendre les actions nécessaires pour y mettre un terme.
Voir les conditions générales d'utilisation.
This Design System is only meant to be used by official French public services' websites and apps. Its main purpose is to make it easy to identify governmental websites for citizens. See terms.
L'installation du Système de Design de l'État (ci-après, le DSFR) peut se faire de manières différentes. En téléchargeant l'ensemble des fichiers nécessaires à son utilisation, en utilisant le gestionnaire de paquets NPM, ou encore via git.
Il est possible de télécharger l'ensemble de la librairie illustrative du DSFR au format zip ci-dessous. Le zip contient un ensemble d'icônes et de pictogrammes, ainsi que les fichiers CSS et Javascript liés.
Vous trouverez sur la page Release de Github, toutes les sources des versions précédentes et la dernière en date.
Le DSFR est disponible sur NPM via un ensemble de packages qu'il est possible d'ajouter directement à votre projet. Il est de ce fait nécessaire d'installer NodeJS, et d'avoir un fichier package.json à la racine de votre projet. (Il est possible d'en créer un directement via la commande npm init).
Une fois en place, il suffit d'installer le package @gouvfr/dsfr-artwork contenant l’ensemble des illustrations du DSFR via la commande suivante :
npm install @gouvfr/dsfr-artwork
Il est également possible d'installer le package avec Yarn :
yarn add @gouvfr/dsfr-artwork
Une fois terminé le dsfr sera alors installé dans le dossier node_modules/@gouvfr/dsfr-artwork/.
La structure que nous mettons à disposition , sur le zip ou npm est la suivante:
- icons : contient les fichiers svg des icônes classées par catégories.
- pictograms : contient les fichiers svg des pictogrammes classés par catégories.
- src : contient les sources.
Pour plus d’informations :
Pour plus d'informations :
Le processus de contribution est détaillé sur la page CONTRIBUTING.md.