diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index f26dc49..45b36fc 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -1,3 +1,5 @@
+@import 'variables';
+
 html, body, #app, main {
   height: 100%;
   margin: 0;
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
new file mode 100644
index 0000000..2f07212
--- /dev/null
+++ b/src/assets/scss/variables.scss
@@ -0,0 +1,28 @@
+// Texte de départ (id: 9)
+$color-starting: white;
+// Texte critique (id: 22)
+$color-critical: #ffba7d;
+// Constellation en écho (id: 63)
+$color-echo: #e191ff;
+// Réflexion théorique (id: 6)
+$color-thinking: #ffeb91;
+// Lecture rapprochée (id: 7)
+$color-reading: #a5a5ff;
+// Expérience sensible (id: 8)
+$color-experience: #cdae87;
+// Kit de désapprentissage (id: 23)
+$color-kit: #ff8873;
+
+$families: (
+  9: $color-starting,
+  22: $color-critical,
+  63: $color-echo,
+  6: $color-thinking,
+  7: $color-reading,
+  8: $color-experience,
+  23: $color-kit
+);
+
+@function setColorFromId($id) {
+  @return map-get($families, $id);
+}
diff --git a/vue.config.js b/vue.config.js
index 94282b3..7af0d87 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -8,7 +8,13 @@ module.exports = {
       .loader('graphql-tag/loader')
       .end()
   },
-
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: '@import "@/assets/scss/variables.scss";'
+      }
+    }
+  },
   publicPath: '/',
   devServer: {
     clientLogLevel: 'warning',