diff --git a/design/README.md b/design/README.md
new file mode 100644
index 0000000..bde410f
--- /dev/null
+++ b/design/README.md
@@ -0,0 +1,33 @@
+# Maquette du site
+
+![maquette](./design--dark.png)
+
+Cette maquette a été réalisée avec Figma. Pour ouvrir le fichier, cliquer [ici](https://www.figma.com/file/wBZoRQ0q8Nl7pIHrFfp1Rz/ETAT?node-id=31%3A47).
+
+## Table of contents
+
+- [Le 'Design System' du site](#le-'design-system'-du-site)
+  - [La palette de couleur](#la-palette-de-couleur)
+  - [La typographie](#la-typographie)
+  - [Les composants](#les-composants)
+- [Partie codage](#partie-codage)
+
+## Le 'Design System' du site
+
+Cette section va permettre aux développeurs front de mieux comprendre la structure des éléments de la maquette.
+
+### La palette de couleur
+
+[section à remplir]
+
+### La typographie
+
+[section à remplir]
+
+### Les composants
+
+[section à remplir]
+
+## Partie codage
+
+Pour la partie codage, nous pouvons soit utiliser des framework CSS comme [TailwindCSS](https://www.tailwindcss.com) ou bien créer nos propres feuilles de styles avec CSS(ou bien Sass).
diff --git a/design/design--dark.png b/design/design--dark.png
new file mode 100644
index 0000000..91820a5
Binary files /dev/null and b/design/design--dark.png differ