---
id: home
title: Accueil
titleTemplate: ${metaTitle}
template: home
sort: order
order: 0
requireCGU: false
styles:
  - home
scripts:
  - home
---

:::hp-hero{imgFirst='./_asset/home/hero/components-light@first.svg' imgMd='./_asset/home/hero/components-light@md.svg' imgDarkFirst='./_asset/home/hero/components-dark@first.svg' imgDarkMd='./_asset/home/hero/components-dark@md.svg'}

# Système de Design de l’État

Le Système de Design de l’État (DSFR) est l’outil destiné à produire les interfaces officielles des sites en .gouv.fr. Il regroupe un ensemble de règles et de composants réutilisables, pour fournir à la population des services numériques simples, accessibles et reconnaissables.

[Commencer à utiliser le DSFR](getting-started/index.md)

:::

::::hp-discover

## Découvrir

:::hp-discover-tile{col=3 imgDark='./_asset/home/discover/first-step-dark.svg'}

![Périmètre](./_asset/home/discover/first-step.svg)

### Un Système de Design, pour qui ?

Le DSFR est réservé aux services de l’État. Découvrez son périmètre d’application pour l’utiliser.

[Périmètre d'application](getting-started/scope/index.md)

:::

:::hp-discover-tile{col=3 imgDark='./_asset/home/discover/core-dark.svg'}

![Fondamentaux](./_asset/home/discover/core.svg)

### Principes de base et fondamentaux

Le DSFR est basé sur des principes de base qu’il est fondamental de connaître avant de l’utiliser.

[Les fondamentaux](path:/core)

:::

:::hp-discover-tile{col=3 imgDark='./_asset/home/discover/components-dark.svg'}

![Composants](./_asset/home/discover/components.svg)

### Bibliothèque de composants

Le DSFR contient plus de 50 blocs d’interface prêts à l'emploi pour accélérer vos projets.

[Tous les composants](path:/component)

:::

:::hp-discover-tile{col=3 imgDark='./_asset/home/discover/layouts-dark.svg'}

![Modèles](./_asset/home/discover/layouts.svg)

### Modèles et exemples

Le DSFR met à disposition des formulaires types et modèles de page officiels à réutiliser.

[Tous les modèles](path:/layout)

:::

::::

::::hp-slice-video{button='Voir la vidéo de présentation' modalId='modal-video' img='./_asset/home/slice-video/video-light.svg' imgDark='./_asset/home/slice-video/video-dark.svg' provider='vimeo' videoId='571729972' imgBg='./_asset/home/slice-video/bg-video-light.svg' imgBgDark='./_asset/home/slice-video/bg-video-dark.svg'}

## Découvrez le Système de Design de l’État en vidéo

:::fr-accordion[Transcription]{id='presentation-video-transcription'}

Le Système de Design de l’État est un outil créé pour les designers et les développeurs, pour transformer l’expérience numérique des citoyens avec l’État, et accélérer la transformation numérique de l’État.

Son objectif ?

Aider dans le design et le développement des sites et services publics et devenir une référence de qualité et de confiance pour les citoyens.

C’est quoi au juste ?

Des couleurs, une typographie Marianne™ déclinée dans plusieurs graisses, et des composants tels des boutons d’actions, des cartes d’actualités, menu de navigation avec onglets et listes déroulantes, en-têtes de site avec logo, nom du service, et barre de recherche.

Comment le prendre en main ?

Dès la phase de design, 2 librairies à disposition : Sketch et Figma pour concevoir rapidement des wireframes et des maquettes. Et lors du développement, des packages HTML-CSS disponibles sur Git et NPM prêts à l’emploi, pour un gain de temps de production.

Retrouvez tout l’essentiel et plus encore pour construire un site respectant, les normes d’ergonomie, d’accessibilité et les bonnes pratiques HTML/CSS.

Le DSFR est à utiliser pour tous les sites des services de l’État : Ministères, Préfectures, Administrations centrales.

Pour obtenir de l’aide, partager avis et suggestions, être informé des évolutions… Rendez-vous sur [systeme-de-design.gouv.fr](https://www.systeme-de-design.gouv.fr)

:::

::::

::::hp-goals

## Pourquoi utiliser le DSFR ?

:::fr-tile{noBorder=true pictogram='/dist/artwork/pictograms/digital/ecosystem.svg'}

### Unifier les sites de l’État

:::

:::fr-tile{noBorder=true pictogram='/dist/artwork/pictograms/digital/self-training.svg'}

### Améliorer l’expérience usager

:::

:::fr-tile{noBorder=true pictogram='/dist/artwork/pictograms/accessibility/accessibility.svg'}

### Favoriser l’accessibilité

:::

:::fr-tile{noBorder=true pictogram='/dist/artwork/pictograms/digital/data-visualization.svg'}

### Réduire <br>les coûts

:::

:::fr-tile{noBorder=true pictogram='/dist/artwork/pictograms/digital/coding.svg'}

### Développer en confiance

:::

::::

::::hp-showcase

## Ils utilisent le Système de Design de l’État

:::hp-showcase-card{imgDark='./_asset/home/showcase/defense-dark.png'}

![](./_asset/home/showcase/defense-light.png)
[defense.gouv.fr](https://www.defense.gouv.fr 'Voir le site defense.gouv.fr')

:::

:::hp-showcase-card{imgDark='./_asset/home/showcase/service-public-dark.png'}

![](./_asset/home/showcase/service-public-light.png)
[service-public.gouv.fr](https://www.service-public.gouv.fr 'Voir le site service-public.gouv.fr')

:::

:::hp-showcase-card{imgDark='./_asset/home/showcase/cartes-dark.png'}

![](./_asset/home/showcase/cartes-light.png)
[cartes.gouv.fr](https://www.cartes.gouv.fr 'Voir le site cartes.gouv.fr')

:::

:::hp-showcase-card{imgDark='./_asset/home/showcase/education-dark.png'}

![](./_asset/home/showcase/education-light.png)
[education.gouv.fr](https://www.education.gouv.fr 'Voir le site education.gouv.fr')

:::

[Voir d’autres exemples de sites](community/showcase/index.md)

::::

::::hp-community{img='./_asset/home/community/community.svg' imgDark='./_asset/home/community/community-dark.svg'}

## Une communauté engagée

:::hp-community-tile{img='./_asset/home/community/tchap.svg'}

### Le DSFR sur Tchap

La messagerie instantanée des agents de la fonction publique.

[Rejoindre la communauté sur Tchap](./help/tchap/index.md)

:::

:::hp-community-tile{icon='team-fill'}

### Les Responsables du Design

Pour vous aider à avancer dans votre projet de refonte au DSFR.

[Contacter mon Responsable du Design](./help/design-support/index.md)

:::

:::hp-community-tile{icon='questionnaire-fill'}

### Le portail JIRA

Pour envoyer vos demandes de correctifs et d’évolution.

[Poser une question à l’équipe DSFR](./help/jira/index.md)

:::

::::

:::hp-news

## Dernières actualités

::dsfr-doc-page-item-list{path=about/posts length=3 fields=title,shortDescription,cover}

[Voir toutes les actualités](about/posts/index.md)

:::

:::::hp-faq

## Questions fréquentes

[Consulter notre page d'aide](help/index.md)

::::fr-accordions-group

:::fr-accordion[### Qu'est-ce qu'un "système de design" ou "design system" ?]{id='faq-accordion-1'}

Un système de design ou design system est un ensemble de composants réutilisables, guidé par des standards et une gouvernance, pouvant être assemblés pour construire plusieurs sites Internet.

:::

:::fr-accordion[### Qui sont les utilisateurs du Système de Design ?]{id='faq-accordion-2'}

Le Système de Design de l’État s'adresse aux développeurs et aux concepteurs, qu'ils soient agents publics ou prestataires pour des sites Internet de l’État (Ministères, Administrations centrales, Préfectures, Ambassades, etc.)

:::

:::fr-accordion[### Quel est le périmètre d'application du Système de Design de l’État ?]{id='faq-accordion-3'}

Le Système de Design est un standard obligatoire pour les sites de l’État depuis la circulaire n°6411-SG relative à la lisibilité des sites internet de l’État et de la qualité des démarches numériques. Nous vous invitons à consulter [cette page dédiée](about/posts/post-circular/index.md) pour connaître dans le détail les types de sites concernés.

:::

:::fr-accordion[### Comment sont fabriqués les composants ?]{id='faq-accordion-4'}

Les composants sont développés par une équipe pluridisciplinaire comptant des développeurs, des concepteurs, des experts en accessibilité. Les composants mis à disposition du public sont conçus en respectant les standards d'accessibilité et sont soumis à différents tests.

:::

:::fr-accordion[### Quelle est l'équipe derrière le Système de Design de l’État ?]{id='faq-accordion-5'}

Porté et animé par le Service d'Information du Gouvernement (SIG), l’équipe du Système de Design de l’État est composé d’agents publics du SIG, d’experts privés d’agences externes, et de plusieurs institutions ayant pour missions, actions et expériences dans le numérique ou la simplification administrative.

Depuis son lancement, des échanges réguliers ont lieu avec tous les utilisateurs, ainsi que les bureaux web des Ministères ou d’autres administrations afin de les écouter, de les impliquer ou de les tenir informés. C'est en associant largement les acteurs du numérique de l’État que le Système de Design sera utile et meilleur !

:::

:::fr-accordion[### Mon projet commence tout juste ou a commencé, que faire ?]{id='faq-accordion-6'}

Contactez-nous pour que l'on échange ensemble ! Vous aurez ainsi accès à la documentation, aux composants et vous pourrez échanger avec l'équipe et les autres utilisateurs.

:::

::::

:::::

:::hp-analytics{img='./_asset/home/analytics/analytics.svg'}

## Toutes les données des sites en .gouv.fr en un coup d’œil

Visualisez les données d’audience des sites publics et l’ensemble des noms de domaine en .gouv.fr, l’extension réservée aux sites Internet de l’État.

[Voir le site](https://audience.gouv.fr)

:::
