Le thème DSFR

Le thème dsfr suit le Système de Design de l'État : la police Marianne, la palette et l'échelle typographique du DSFR, sur des fonds clairs. Pour une présentation à l'allure d'un service public, choisissez-le dans l'en-tête :

---
theme: dsfr
---

Avec ce thème, une section est affichée sur un fond bleu France, et les liens, les puces et les composants prennent le bleu France pour couleur d'accent.

---
theme: dsfr
---

## Les résultats

---

### Ce qui change

- Les demandes sont suivies en ligne.
- Les pièces manquantes sont signalées à l'agent.

Pour garder la police Marianne et les proportions du DSFR avec les couleurs de votre équipe, partez du thème DSFR dans le thème de votre équipe.

La palette illustrative

Avec ce thème, l'attribut color d'une carte ou d'une zone d'un schéma accepte les dix-huit noms de la palette illustrative du DSFR, comme green-emeraude ou purple-glycine. Les noms génériques prennent chacun un ton de cette palette : blue le bleu cumulus, green le vert émeraude, yellow le jaune tournesol, orange l'orange terre battue, brown le brun caramel, pink le rose tuile, purple le violet glycine et grey le beige gris galet.

---
theme: dsfr
---

### Les acteurs du service

:::Diagram{layout="grid" cols="3" :fragments="false"}
::Node{id="usager" at="1,1" icon="ri:user-line" title="Usager" color="green-emeraude"}
::
::Node{id="agent" at="2,1" icon="ri:briefcase-line" title="Agent" color="purple-glycine"}
::
::Node{id="partenaire" at="3,1" icon="ri:building-line" title="Partenaire" color="orange-terre-battue"}
::
::Edge{from="usager" to="agent" label="dépose"}
::
::Edge{from="agent" to="partenaire" label="consulte"}
::
:::

Pour une présentation qui changera peut-être de thème, écrivez les noms génériques : avec un thème qui ne part pas du thème DSFR, un nom du DSFR prend la couleur d'accent.

Les pictogrammes

Les pictogrammes du DSFR illustrent les étapes d'un Scheme et les nœuds d'un Diagram : vous écrivez son nom, sans l'extension .svg, dans picto. Ils sont disponibles avec tous les thèmes, dans les couleurs du DSFR, bleu France et rouge Marianne, dessinées pour un fond clair.

### Le parcours d'une demande

:::Scheme{:fragments="false"}
::Step{n="1" picto="document/document-add" title="Dépôt"}
L'usager remplit le formulaire.
::
::Step{n="2" picto="digital/in-progress" title="Instruction"}
Un agent vérifie les pièces.
::
::Step{n="3" picto="digital/mail-send" title="Réponse"}
L'usager reçoit un message.
::
:::

Une image Markdown affiche aussi un pictogramme, à l'adresse /pictograms/<nom>.svg : ![](/pictograms/digital/coding.svg).

• buildings/city-hall
• buildings/factory
• buildings/house
• buildings/nuclear-plant
• buildings/school
• digital/application
• digital/avatar
• digital/calendar
• digital/coding
• digital/data-visualization
• digital/in-progress
• digital/internet
• digital/mail-send
• digital/search
• document/contract
• document/document
• document/document-add
• document/document-download
• document/document-signature
• document/driving-licence
• document/national-identity-card
• document/passport
• document/tax-stamp
• document/vehicle-registration
• environment/environment
• environment/food
• environment/grocery
• environment/human-cooperation
• environment/leaf
• environment/moon
• environment/mountain
• environment/sun
• environment/tree
• health/health
• health/hospital
• health/vaccine
• health/virus
• institutions/firefighter
• institutions/gendarmerie
• institutions/justice
• institutions/money
• institutions/police
• leisure/book
• leisure/community
• leisure/culture
• leisure/digital-art
• leisure/paint
• map/airport
• map/location-france
• map/luggage
• map/map
• system/connection-lost
• system/error
• system/information
• system/notification
• system/padlock
• system/success
• system/system
• system/technical-error
• system/warning