diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_base.scss b/captive-admin/app/assets/stylesheets/captive-admin/_base.scss
index 5a25e9a9..a4c5bf0f 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/_base.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/_base.scss
@@ -25,36 +25,36 @@
   @import 'inputs/select2';
 
   body {
-    color: $fg-default;
+    color: var(--fg-default);
     @include body-medium;
   }
 }
 
 .details {
-  margin-top: $spacer-1;
+  margin-top: var(--space-1);
   @include body-small;
 
-  color: $fg-subtle;
+  color: var(--fg-subtle);
 }
 
 .col-actions {
   .dropdown_menu_button {
     font-size: 0;
     margin: 0;
-    width: $spacer-6;
-    height: $spacer-6;
+    width: var(--space-6);
+    height: var(--space-6);
     padding: 0;
 
     &::before {
       font-size: $f2;
       content: '···';
       border: 0;
-      width: $spacer-6;
-      height: $spacer-6;
+      width: var(--space-6);
+      height: var(--space-6);
       left: 0;
       top: 0;
       text-align: center;
-      line-height: $spacer-6;
+      line-height: var(--space-6);
     }
 
     &::after {
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss b/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss
index 6cf19e6e..0a90c345 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss
@@ -1,6 +1,6 @@
 #main_content form {
-  width: $spacer-13;
-  padding: $spacer-5 0;
+  width: var(--space-13);
+  padding: var(--space-5) 0;
 }
 
 form {
@@ -9,7 +9,7 @@ form {
     margin: 0;
 
     &.inputs {
-      background-color: $bg-subtle;
+      background-color: var(--bg-subtle);
       box-shadow: none;
       border-radius: 0;
     }
@@ -19,8 +19,8 @@ form {
         display: flex;
 
         li {
-          margin-left: $spacer-3;
-          margin-right: $spacer-3;
+          margin-left: var(--space-3);
+          margin-right: var(--space-3);
 
           &:first-child {
             margin-left: 0;
@@ -35,18 +35,18 @@ form {
 
     ol > li {
       padding: 0;
-      margin-bottom: $spacer-5;
+      margin-bottom: var(--space-5);
 
       label {
         @include body-medium;
 
         float: none;
         width: auto;
-        margin-bottom: $spacer-1;
+        margin-bottom: var(--space-1);
 
         abbr {
-          color: $primary-fg;
-          padding-left: $spacer-1;
+          color: var(--primary-fg);
+          padding-left: var(--space-1);
 
           &[title] {
             text-decoration: none;
@@ -70,8 +70,8 @@ form {
     border-color: $border-color;
     @include body-large;
 
-    border-radius: $border-radius-xs;
-    padding: $spacer-3;
+    border-radius: var(--rounded-lg);
+    padding: var(--space-3);
 
     &:focus {
       border: 2px solid $border-color-emphasis;
@@ -92,7 +92,7 @@ form {
   /* Errors */
   p.inline-errors {
     font-weight: bold;
-    margin: $spacer-1 0;
+    margin: var(--space-1) 0;
     text-align: right;
   }
 
@@ -107,7 +107,7 @@ form {
 
   .buttons,
   .actions {
-    padding: $spacer-5 0;
+    padding: var(--space-5) 0;
     margin-top: 0;
 
     input[type='submit'],
@@ -145,7 +145,7 @@ form {
     color: $form-label-color;
     @include body-medium;
 
-    margin-bottom: $spacer-4;
+    margin-bottom: var(--space-4);
     width: 100%;
     font-weight: normal;
   }
@@ -171,7 +171,7 @@ form {
 
 form.filter_form {
   .filter_form_field {
-    padding: $spacer-5 0;
+    padding: var(--space-5) 0;
     margin: 0;
     border-bottom: 1px solid $border-color;
     display: flex;
@@ -194,7 +194,7 @@ form.filter_form {
         flex: 1;
 
         + input {
-          margin-left: $spacer-4;
+          margin-left: var(--space-4);
         }
       }
     }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_header.scss b/captive-admin/app/assets/stylesheets/captive-admin/_header.scss
index 0ee4cd73..08ccbbc3 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/_header.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/_header.scss
@@ -8,11 +8,11 @@
 
 #header {
   text-shadow: none;
-  background: $bg-emphasis;
-  padding: 0 $spacer-6;
+  background: var(--bg-emphasis);
+  padding: 0 var(--space-6);
 
   h1 {
-    color: $fg-on-emphasis;
+    color: var(--fg-on-emphasis);
     padding-left: 0;
     height: 60px;
     display: flex;
@@ -37,8 +37,8 @@
     li {
       &:hover > ul {
         display: block;
-        margin-top: $spacer-2;
-        padding: $spacer-3 0;
+        margin-top: var(--space-2);
+        padding: var(--space-3) 0;
       }
     }
 
@@ -48,7 +48,7 @@
 
         &::before {
           content: '';
-          background-color: $primary-emphasis;
+          background-color: var(--primary-emphasis);
           position: absolute;
           bottom: 0;
           width: 19px;
@@ -69,9 +69,9 @@
       }
 
       a {
-        padding: $spacer-2 $spacer-4;
+        padding: var(--space-2) var(--space-4);
         font-weight: bold;
-        border-radius: $border-radius-m;
+        border-radius: var(--rounded-2xl);
       }
 
       &:hover > a {
@@ -90,20 +90,20 @@
       ul {
         @include rounded-all(12px, 12px, 12px, 12px);
 
-        background: $bg-default;
+        background: var(--bg-default);
         text-align: left;
         box-shadow: $shadow-m;
-        min-width: $spacer-11;
+        min-width: var(--space-11);
 
         li {
           a {
-            color: $fg-default;
-            padding-top: $spacer-3;
-            padding-bottom: $spacer-3;
+            color: var(--fg-default);
+            padding-top: var(--space-3);
+            padding-bottom: var(--space-3);
 
             &:hover {
-              background: $bg-subtle;
-              color: $fg-default;
+              background: var(--bg-subtle);
+              color: var(--fg-default);
               border-radius: 0;
             }
           }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss b/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss
index 9de46f49..ba6f3bfb 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss
@@ -11,11 +11,11 @@ h5,
 h6 {
   @include title-family;
 
-  color: $fg-default;
+  color: var(--fg-default);
   letter-spacing: 0.5px;
   margin-top: 0;
 }
 
 p {
-  margin-bottom: $spacer-4;
+  margin-bottom: var(--space-4);
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss
index 4766c145..cc2c7f2a 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss
@@ -2,17 +2,17 @@
   @include body-medium;
 
   text-transform: none;
-  margin-bottom: $spacer-1;
+  margin-bottom: var(--space-1);
 
   a,
   a:link,
   a:visited,
   a:active {
-    color: $fg-subtle;
+    color: var(--fg-subtle);
   }
 
   .breadcrumb_sep {
-    color: $primary-fg;
+    color: var(--primary-fg);
     font-weight: bold;
   }
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss
index d41b04fa..65d69166 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss
@@ -13,29 +13,29 @@
     background: none;
     border: none;
     box-shadow: $shadow-m;
-    border-radius: $border-radius-s;
+    border-radius: var(--rounded-xl);
     padding: 0;
     overflow: hidden;
 
     .dropdown_menu_list {
       border: none;
       box-shadow: none;
-      padding: $spacer-3 0;
-      min-width: $spacer-11;
+      padding: var(--space-3) 0;
+      min-width: var(--space-11);
 
       li {
         border: none;
 
         a {
-          padding: $spacer-3 $spacer-4;
+          padding: var(--space-3) var(--space-4);
           text-align: left;
           @include body-medium;
 
           &:hover {
             background-image: none;
             text-shadow: none;
-            background-color: $bg-subtle;
-            color: $fg-default;
+            background-color: var(--bg-subtle);
+            color: var(--fg-default);
           }
         }
       }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss
index 350cceb7..e5f3d645 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss
@@ -1,7 +1,7 @@
 .pagination_information {
-  color: $fg-subtle;
+  color: var(--fg-subtle);
 
   b {
-    color: $fg-default;
+    color: var(--fg-default);
   }
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss
index 7d4cc695..d29bfc62 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss
@@ -5,7 +5,7 @@
 }
 
 .panel {
-  background: $bg-subtle;
+  background: var(--bg-subtle);
 }
 
 // ----------------------------------- Sidebar Sections
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss
index 9b78e15e..c72c4318 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss
@@ -1,7 +1,7 @@
 .scopes {
   li {
     .count {
-      color: $fg-default;
+      color: var(--fg-default);
     }
 
     &:first-child a {
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss
index 82cd3e16..2572fa48 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss
@@ -1,16 +1,16 @@
 .status_tag {
   border: 1px solid;
-  border-radius: $border-radius-m;
+  border-radius: var(--rounded-2xl);
   letter-spacing: 0.5px;
-  padding: $spacer-2 $spacer-3;
+  padding: var(--space-2) var(--space-3);
 
   &.yes {
-    background: $success-subtle;
-    color: $success-fg;
+    background: var(--success-subtle);
+    color: var(--success-fg);
   }
 
   &.no {
-    background: $bg-subtle;
-    color: $fg-muted;
+    background: var(--bg-subtle);
+    color: var(--fg-muted);
   }
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss
index eefba638..877d515e 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss
@@ -1,7 +1,7 @@
 .table_tools {
   display: flex;
   align-items: center;
-  margin-bottom: $spacer-2;
+  margin-bottom: var(--space-2);
 }
 
 a.table_tools_button,
@@ -10,7 +10,7 @@ a.table_tools_button,
 
   font-weight: normal;
   outline: none;
-  padding: $spacer-2 $spacer-4;
+  padding: var(--space-2) var(--space-4);
   box-shadow: none;
   background: none;
   @include transition;
@@ -26,7 +26,7 @@ a.table_tools_button,
       box-shadow: none;
       background: none;
       border-color: $border-color-emphasis;
-      color: $fg-default;
+      color: var(--fg-default);
     }
   }
 }
@@ -35,25 +35,25 @@ a.table_tools_button,
   li {
     a {
       border: 1px solid $border-color;
-      border-radius: $border-radius-m;
-      margin-right: $spacer-2;
+      border-radius: var(--rounded-2xl);
+      margin-right: var(--space-2);
     }
 
     &:first-child a {
-      border-radius: $border-radius-m;
+      border-radius: var(--rounded-2xl);
     }
 
     &:last-child a {
-      border-radius: $border-radius-m;
+      border-radius: var(--rounded-2xl);
     }
 
     &.selected a {
-      background: $bg-subtle;
+      background: var(--bg-subtle);
       box-shadow: none;
       border: 2px solid $border-color-emphasis;
 
       &:hover {
-        background: $bg-subtle;
+        background: var(--bg-subtle);
       }
     }
   }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss
index 3b2b6e85..cee5bee6 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss
@@ -4,14 +4,14 @@ table.index_table {
   overflow: hidden;
 
   th {
-    padding: $spacer-4;
-    color: $fg-subtle;
+    padding: var(--space-4);
+    color: var(--fg-subtle);
     background: transparent;
 
     a,
     a:link,
     a:visited {
-      color: $fg-subtle;
+      color: var(--fg-subtle);
     }
 
     &.sorted-asc,
@@ -19,7 +19,7 @@ table.index_table {
       background: transparent;
 
       a {
-        color: $fg-default;
+        color: var(--fg-default);
       }
     }
 
@@ -35,7 +35,7 @@ table.index_table {
   td {
     border-bottom: 1px solid $border-color;
     vertical-align: middle;
-    padding: $spacer-4;
+    padding: var(--space-4);
 
     &:first-child {
       padding-left: 0;
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/inputs/_date-time-picker.scss b/captive-admin/app/assets/stylesheets/captive-admin/inputs/_date-time-picker.scss
index f3e9791f..b5819ca9 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/inputs/_date-time-picker.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/inputs/_date-time-picker.scss
@@ -1,6 +1,6 @@
 input[type='text'] {
   &.date-time-picker-input {
-    width: $spacer-12;
+    width: var(--space-12);
     max-width: 100%;
   }
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/inputs/_select2.scss b/captive-admin/app/assets/stylesheets/captive-admin/inputs/_select2.scss
index e5bb6c7f..1ad29bb8 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/inputs/_select2.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/inputs/_select2.scss
@@ -1,6 +1,6 @@
 .filter_form_field {
   .select2-container {
-    margin-bottom: $spacer-4;
+    margin-bottom: var(--space-4);
 
     &:last-child {
       margin-bottom: 0;
@@ -12,7 +12,7 @@
         &--multiple {
           @include body-medium;
 
-          min-height: $spacer-4;
+          min-height: var(--space-4);
         }
       }
     }
@@ -28,10 +28,10 @@
 
       &--single,
       &--multiple {
-        padding: $spacer-3;
+        padding: var(--space-3);
         box-sizing: content-box;
         border-color: $border-color;
-        border-radius: $border-radius-xs;
+        border-radius: var(--rounded-lg);
         height: auto;
 
         @include body-large;
@@ -48,19 +48,19 @@
 
           &__clear {
             margin-top: 0;
-            margin-right: $spacer-4;
+            margin-right: var(--space-4);
           }
 
           &__arrow {
             top: 50%;
-            margin-top: -$spacer-3;
-            right: $spacer-2;
+            margin-top: -var(--space-3);
+            right: var(--space-2);
           }
         }
       }
 
       &--multiple {
-        padding-right: $spacer-5;
+        padding-right: var(--space-5);
 
         .select2-selection {
           &__rendered {
@@ -70,7 +70,7 @@
 
           &__clear {
             position: absolute;
-            right: $spacer-3;
+            right: var(--space-3);
             margin-right: 0;
           }
         }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss
index 7f98e694..7f1e1757 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss
@@ -17,24 +17,24 @@
   }
 
   // End default AA style
-  padding: $spacer-2 $spacer-4;
+  padding: var(--space-2) var(--space-4);
   transition: background-color 0.3s;
   box-shadow: $shadow-xs;
 }
 @mixin primary-button {
-  background-color: $primary-emphasis;
+  background-color: var(--primary-emphasis);
   background-image: none;
-  color: $primary-on-emphasis;
+  color: var(--primary-on-emphasis);
   border: none;
   text-shadow: none;
   box-shadow: $shadow-s;
   @include body-medium;
 
-  padding: $spacer-3 $spacer-4;
+  padding: var(--space-3) var(--space-4);
 
   &:not(.disabled) {
     &:hover {
-      background-color: $primary-muted;
+      background-color: var(--primary-muted);
       background-image: none;
     }
 
@@ -50,17 +50,17 @@
   @include basic-button;
 
   outline: solid 1px;
-  color: $fg-muted;
-  background-color: $bg-subtle;
+  color: var(--fg-muted);
+  background-color: var(--bg-subtle);
 
   &:not(.disabled) {
     &:hover {
-      background-color: $bg-default;
+      background-color: var(--fg-default);
     }
 
     &:active {
-      background-color: $bg-emphasis;
-      color: $fg-on-emphasis;
+      background-color: var(--bg-emphasis);
+      color: var(--fg-on-emphasis);
     }
   }
 }
@@ -70,7 +70,7 @@
 
   &:not(.disabled) {
     &:hover {
-      background-color: $bg-subtle;
+      background-color: var(--bg-subtle);
     }
   }
 }
@@ -80,7 +80,7 @@
   box-shadow: none;
   text-decoration: underline;
   padding-left: 0;
-  color: $fg-muted;
+  color: var(--fg-muted);
   background: transparent;
 
   &:hover {
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss
index 6cc68804..b6789660 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss
@@ -7,14 +7,14 @@
   margin-bottom: 0.5em;
 
   // Fin héritage AA
-  padding: $spacer-2 $spacer-4;
-  color: $fg-muted;
-  background: $bg-default;
+  padding: var(--space-2) var(--space-4);
+  color: var(--fg-muted);
+  background: var(--bg-default);
   border-bottom: 1px solid $border-color;
 }
 
 @mixin section-background {
-  background: $bg-default;
+  background: var(--bg-default);
   border-radius: 0;
   overflow: hidden;
 }
@@ -29,7 +29,7 @@
     @include title-small;
 
     margin: 0;
-    padding-bottom: $spacer-4;
+    padding-bottom: var(--space-4);
 
     .header_action {
       float: right;
@@ -46,5 +46,5 @@
   }
 
   // Fin héritage AA
-  margin-bottom: $spacer-8;
+  margin-bottom: var(--space-8);
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_typography.scss b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_typography.scss
index c41293e8..1b60a6f7 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_typography.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_typography.scss
@@ -3,11 +3,11 @@
 }
 
 @mixin body-family {
-  font-family: $default-font-family;
+  font-family: var(--font-family-text);
 }
 
 @mixin title-family {
-  font-family: $title-font-family;
+  font-family: var(--font-family-title);
 }
 
 @mixin body-large {
@@ -26,7 +26,7 @@
 }
 
 @mixin title {
-  font-family: $title-font-family;
+  font-family: var(--font-family-title);
   font-weight: bold;
 }
 
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss
index 0df88206..f850be43 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss
@@ -2,4 +2,4 @@
 
 $menu-arrow-light-icon-url: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgY2xhc3M9InctOCBtci00IGljb24tY2hldmVyb24tZG93biI+PHBhdGggY2xhc3M9InNlY29uZGFyeSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMyAxMC4zYTEgMSAwIDAgMSAxLjQgMS40bC00IDRhMSAxIDAgMCAxLTEuNCAwbC00LTRhMSAxIDAgMCAxIDEuNC0xLjRsMy4zIDMuMjkgMy4zLTMuM3oiPjwvcGF0aD48L3N2Zz4=';
 $error-color: $danger-fg;
-$form-label-color: $fg-muted;
+$form-label-color: var(--fg-muted);
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss b/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss
index 727d30e8..b90389fa 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss
@@ -1,15 +1,15 @@
 body.logged_out {
-  background: $bg-subtle;
+  background: var(--bg-subtle);
 
   #content_wrapper {
     width: 450px;
-    margin: $spacer-10 auto;
+    margin: var(--space-10) auto;
 
     #active_admin_content {
-      background: $bg-default;
+      background: var(--bg-default);
       box-shadow: $shadow-m;
-      border-radius: $border-radius-s;
-      padding: $spacer-6;
+      border-radius: var(--rounded-xl);
+      padding: var(--space-6);
     }
   }
 
@@ -19,7 +19,7 @@ body.logged_out {
     text-shadow: none;
     text-align: center;
     box-shadow: none;
-    color: $fg-default;
+    color: var(--fg-default);
     @include title-large;
 
     margin: 0;
@@ -30,13 +30,13 @@ body.logged_out {
     /* Login Form */
     form {
       border-bottom: 1px solid $border-color;
-      margin-bottom: $spacer-6;
-      padding: $spacer-6 0;
+      margin-bottom: var(--space-6);
+      padding: var(--space-6) 0;
 
       fieldset {
         li {
           padding: 0;
-          margin-bottom: $spacer-6;
+          margin-bottom: var(--space-6);
 
           &:last-child {
             margin: 0;
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss b/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss
index afdc12cc..6a8fa747 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss
@@ -1,19 +1,19 @@
 #footer {
-  background: $bg-default;
-  padding: $spacer-4 $spacer-6;
+  background: var(--bg-default);
+  padding: var(--space-4) var(--space-6);
   @include body-medium;
 
   clear: both;
 
   p {
-    padding-top: $spacer-4;
+    padding-top: var(--space-4);
   }
 }
 
 #index_footer {
-  padding-top: $spacer-1;
+  padding-top: var(--space-1);
   text-align: right;
   @include body-small;
 
-  margin-bottom: $spacer-6;
+  margin-bottom: var(--space-6);
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss b/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss
index 5e1c1fe2..7075eaac 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss
@@ -8,8 +8,8 @@
 
   #main_content_wrapper {
     #main_content {
-      padding: $spacer-4 $spacer-6;
-      background: $bg-subtle;
+      padding: var(--space-4) var(--space-6);
+      background: var(--bg-subtle);
       margin-right: 0;
     }
   }
@@ -19,6 +19,6 @@
     width: 350px;
     margin-left: 0;
     flex-shrink: 0;
-    padding: $spacer-4 $spacer-6;
+    padding: var(--space-4) var(--space-6);
   }
 }
diff --git a/captive-admin/app/assets/stylesheets/captive-admin/structure/_title_bar.scss b/captive-admin/app/assets/stylesheets/captive-admin/structure/_title_bar.scss
index e300b066..a8893d4e 100644
--- a/captive-admin/app/assets/stylesheets/captive-admin/structure/_title_bar.scss
+++ b/captive-admin/app/assets/stylesheets/captive-admin/structure/_title_bar.scss
@@ -2,7 +2,7 @@
   border-bottom: none;
   background: none;
   box-shadow: none;
-  padding: $spacer-4 $spacer-6;
+  padding: var(--space-4) var(--space-6);
 
   h2 {
     @include title-large;
@@ -14,7 +14,7 @@
       & > .dropdown_menu > a {
         @include primary-button;
 
-        padding: $spacer-3 $spacer-4;
+        padding: var(--space-3) var(--space-4);
       }
     }
   }
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/_variables.scss b/captive-theme/app/assets/stylesheets/captive-theme/_variables.scss
deleted file mode 100644
index d0765871..00000000
--- a/captive-theme/app/assets/stylesheets/captive-theme/_variables.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-// Couleurs du nuancier Captive
-// https://www.notion.so/Nuanciers-Captive-pour-le-web-et-mobile-ee189f2db6e543e6bc7cba77c9e8dff5
-$white: #fff !default;
-$blue-grey-900: #102a43 !default;
-$blue-grey-800: #243b53 !default;
-$blue-grey-700: #334e68 !default;
-$blue-grey-600: #486581 !default;
-$blue-grey-500: #5e7997 !default;
-$blue-grey-200: #bcccdc !default;
-$blue-grey-100: #d9e2ec !default;
-$blue-grey-050: #f5f7fa !default;
-$pink-vivid-500: #d9127c !default;
-$pink-vivid-400: #e8368f !default;
-$pink-vivid-050: #fff5f8 !default;
-$light-blue-vivid-700: #1177b6 !default;
-$light-blue-vivid-600: #188dcd !default;
-$light-blue-vivid-050: #f0fbff !default;
-$lime-green-700: #507712 !default;
-$lime-green-600: #63921a !default;
-$lime-green-050: #f2fde0 !default;
-$red-vivid-600: #cf1124 !default;
-$red-vivid-500: #e12d39 !default;
-$red-vivid-050: #fff0f0 !default;
-$yellow-vivid-800: #b44d12 !default;
-$yellow-vivid-700: #cb6e17 !default;
-$yellow-vivid-050: #fffbea !default;
-$purple-700: #421987 !default;
-$purple-500: #653cad !default;
-$purple-050: #eae2f8 !default;
-
-// Couleurs du Design System Captive
-// https://www.notion.so/captive/UI-Les-couleurs-du-design-system-Captive-eed4bbb0295f4d949c47e183033e5180
-
-$fg-default: $blue-grey-900 !default;
-$fg-muted: $blue-grey-600 !default;
-$fg-subtle: $blue-grey-500 !default;
-$fg-on-emphasis: $white !default;
-$bg-default: $white !default;
-$bg-subtle: $blue-grey-050 !default;
-$bg-emphasis: $blue-grey-900 !default;
-$primary-fg: $pink-vivid-500 !default;
-$primary-emphasis: $pink-vivid-500 !default;
-$primary-muted: $pink-vivid-400 !default;
-$primary-subtle: $pink-vivid-050 !default;
-$primary-on-emphasis: $white !default;
-$accent-fg: $light-blue-vivid-700 !default;
-$accent-emphasis: $light-blue-vivid-700 !default;
-$accent-muted: $light-blue-vivid-600 !default;
-$accent-subtle: $light-blue-vivid-050 !default;
-$success-fg: $lime-green-700 !default;
-$success-emphasis: $lime-green-700 !default;
-$success-muted: $lime-green-600 !default;
-$success-subtle: $lime-green-050 !default;
-$attention-fg: $yellow-vivid-800 !default;
-$attention-emphasis: $yellow-vivid-800 !default;
-$attention-muted: $yellow-vivid-700 !default;
-$attention-subtle: $yellow-vivid-050 !default;
-$danger-fg: $red-vivid-600 !default;
-$danger-emphasis: $red-vivid-600 !default;
-$danger-muted: $red-vivid-500 !default;
-$danger-subtle: $red-vivid-050 !default;
-$support-fg: $purple-700 !default;
-$support-emphasis: $purple-700 !default;
-$support-muted: $purple-500 !default;
-$support-subtle: $purple-050 !default;
-$border-color: $blue-grey-100 !default;
-$border-color-emphasis: $blue-grey-900 !default;
-
-// Espacements
-// Cf https://www.notion.so/captive/UI-Espacement-du-Design-System-Captive-cc192b02b57d453fa0da9fdc6d1234c2
-$spacer-0: 0 !default;
-$spacer-1: 4px !default;
-$spacer-2: 8px !default;
-$spacer-3: 12px !default;
-$spacer-4: 16px !default;
-$spacer-5: 24px !default;
-$spacer-6: 32px !default;
-$spacer-7: 48px !default;
-$spacer-8: 64px !default;
-$spacer-9: 96px !default;
-$spacer-10: 128px !default;
-$spacer-11: 192px !default;
-$spacer-12: 256px !default;
-$spacer-13: 512px !default;
-
-// Fonts
-// https://www.notion.so/captive/Typographie-Captive-85c60f5a849f4adaacaf18cc4aff2cea
-/* stylelint-disable-next-line import-notation */
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Barlow:wght@400;600&display=swap');
-
-$default-font-family:
-  'Open Sans',
-  -apple-system,
-  segoe ui,
-  roboto,
-  noto sans,
-  ubuntu,
-  cantarell,
-  helvetica neue !default;
-$title-font-family:
-  'Barlow',
-  -apple-system,
-  segoe ui,
-  roboto,
-  noto sans,
-  ubuntu,
-  cantarell,
-  helvetica neue !default;
-
-// Fonts sizes
-// Body
-$f1: 24px;
-$f2: 20px;
-$f3: 18px;
-$f4: 16px;
-$f5: 14px;
-$f6: 12px;
-
-// Headers
-$h1: 30px;
-$h2: 24px;
-
-// Shadows
-$shadow-xs:
-  0 1px 3px rgba(0, 0, 0, 0.12),
-  0 1px 2px rgba(0, 0, 0, 0.24);
-$shadow-s:
-  0 3px 6px rgba(0, 0, 0, 0.15),
-  0 2px 4px rgba(0, 0, 0, 0.12);
-$shadow-m:
-  0 10px 20px rgba(0, 0, 0, 0.15),
-  0 3px 6px rgba(0, 0, 0, 0.1);
-$shadow-l:
-  0 15px 25px rgba(0, 0, 0, 0.15),
-  0 5px 10px rgba(0, 0, 0, 0.5);
-$shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
-
-// radius
-$border-radius-xs: 8px !default;
-$border-radius-s: 12px !default;
-$border-radius-m: 20px !default;
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_base.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_base.scss
new file mode 100644
index 00000000..1a12dd5a
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_base.scss
@@ -0,0 +1,5 @@
+@import './colors';
+@import './design_system_colors';
+@import './fonts';
+@import './screens';
+@import './spaces';
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_border_radius.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_border_radius.scss
new file mode 100644
index 00000000..cc613304
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_border_radius.scss
@@ -0,0 +1,11 @@
+:root {
+  --rounded-none: 0px;
+  --rounded-sm: 0.125rem; /* 2px */
+  --rounded: 0.25rem; /* 4px */
+  --rounded-md: 0.375rem; /* 6px */
+  --rounded-lg: 0.5rem; /* 8px */
+  --rounded-xl: 0.75rem; /* 12px */
+  --rounded-2xl: 1rem; /* 16px */
+  --rounded-3xl: 1.5rem; /* 24px */
+  --rounded-full: 9999px;
+}
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_colors.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_colors.scss
new file mode 100644
index 00000000..673dac2d
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_colors.scss
@@ -0,0 +1,88 @@
+:root {
+  // white
+  --white: #fff;
+
+  // blue-grey
+  --blue-grey-050: #f5f7fa;
+  --blue-grey-100: #d9e2ec;
+  --blue-grey-200: #bcccdc;
+  --blue-grey-300: #9fb3c8;
+  --blue-grey-400: #829ab1;
+  --blue-grey-500: #5e7997;
+  --blue-grey-600: #486581;
+  --blue-grey-700: #334e68;
+  --blue-grey-800: #243b53;
+  --blue-grey-900: #102a43;
+
+  // pink-vivid
+  --pink-vivid-050: #fff5f8;
+  --pink-vivid-100: #ffb8d2;
+  --pink-vivid-200: #ff8cba;
+  --pink-vivid-300: #f364a2;
+  --pink-vivid-400: #e8368f;
+  --pink-vivid-500: #d9127c;
+  --pink-vivid-600: #bc0a6f;
+  --pink-vivid-700: #a30664;
+  --pink-vivid-800: #870557;
+  --pink-vivid-900: #620042;
+
+  // light-blue-vivid
+  --light-blue-vivid-050: #f0fbff;
+  --light-blue-vivid-100: #b3ecff;
+  --light-blue-vivid-200: #81defd;
+  --light-blue-vivid-300: #5ed0fa;
+  --light-blue-vivid-400: #40c3f7;
+  --light-blue-vivid-500: #2bb0ed;
+  --light-blue-vivid-600: #188dcd;
+  --light-blue-vivid-700: #1177b6;
+  --light-blue-vivid-800: #0a6299;
+  --light-blue-vivid-900: #035388;
+
+  // lime-green
+  --lime-green-050: #f2fde0;
+  --lime-green-100: #e2f7c2;
+  --lime-green-200: #c7ea8f;
+  --lime-green-300: #abdb5e;
+  --lime-green-400: #94c843;
+  --lime-green-500: #7bb026;
+  --lime-green-600: #63921a;
+  --lime-green-700: #507712;
+  --lime-green-800: #42600c;
+  --lime-green-900: #2b4005;
+
+  // yellow-vivid
+  --yellow-vivid-050: #fffbea;
+  --yellow-vivid-100: #fff3c4;
+  --yellow-vivid-200: #fce588;
+  --yellow-vivid-300: #fadb5f;
+  --yellow-vivid-400: #f7c948;
+  --yellow-vivid-500: #f0b429;
+  --yellow-vivid-600: #de911d;
+  --yellow-vivid-700: #cb6e17;
+  --yellow-vivid-800: #b44d12;
+  --yellow-vivid-900: #8d2b0b;
+
+  // red-vivid
+  --red-vivid-050: #fff0f0;
+  --red-vivid-100: #ffbdbd;
+  --red-vivid-200: #ff9b9b;
+  --red-vivid-300: #f86a6a;
+  --red-vivid-400: #ef4e4e;
+  --red-vivid-500: #e12d39;
+  --red-vivid-600: #cf1124;
+  --red-vivid-700: #ab091e;
+  --red-vivid-800: #8a041a;
+  --red-vivid-900: #610316;
+
+  // purple
+  --purple-050: #eae2f8;
+  --purple-100: #cfbcf2;
+  --purple-200: #a081d9;
+  --purple-300: #8662c7;
+  --purple-400: #724bb7;
+  --purple-500: #653cad;
+  --purple-600: #51279b;
+  --purple-700: #421987;
+  --purple-800: #34126f;
+  --purple-900: #240754;
+}
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_design_system_colors.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_design_system_colors.scss
new file mode 100644
index 00000000..a7a5481d
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_design_system_colors.scss
@@ -0,0 +1,48 @@
+:root {
+  // foreground
+  --fg-default: var(--blue-grey-900);
+  --fg-muted: var(--blue-grey-600);
+  --fg-subtle: var(--blue-grey-500);
+  --fg-on-emphasis: var(--white);
+
+  // background
+  --bg-default: var(--white);
+  --bg-subtle: var(--blue-grey-050);
+  --bg-emphasis: var(--blue-grey-900);
+
+  // primary
+  --primary-fg: var(--pink-vivid-500);
+  --primary-emphasis: var(--pink-vivid-500);
+  --primary-muted: var(--pink-vivid-400);
+  --primary-subtle: var(--pink-vivid-050);
+
+  // accent
+  --accent-fg: var(--light-blue-vivid-700);
+  --accent-emphasis: var(--light-blue-vivid-700);
+  --accent-muted: var(--light-blue-vivid-600);
+  --accent-subtle: var(--light-blue-vivid-050);
+
+  // success
+  --success-fg: var(--lime-green-700);
+  --success-emphasis: var(--lime-green-700);
+  --success-muted: var(--lime-green-600);
+  --success-subtle: var(--lime-green-050);
+
+  // attention
+  --attention-fg: var(--yellow-vivid-800);
+  --attention-emphasis: var(--yellow-vivid-800);
+  --attention-muted: var(--yellow-vivid-700);
+  --attention-subtle: var(--yellow-vivid-050);
+
+  // danger
+  --danger-fg: var(--red-vivid-600);
+  --danger-emphasis: var(--red-vivid-600);
+  --danger-muted: var(--red-vivid-500);
+  --danger-subtle: var(--red-vivid-050);
+
+  // support
+  --support-fg: var(--purple-700);
+  --support-emphasis: var(--purple-700);
+  --support-muted: var(--purple-500);
+  --support-subtle: var(--purple-050);
+}
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_fonts.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_fonts.scss
new file mode 100644
index 00000000..219c4351
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_fonts.scss
@@ -0,0 +1,40 @@
+// https://www.notion.so/captive/Typographie-Captive-85c60f5a849f4adaacaf18cc4aff2cea
+/* stylelint-disable-next-line import-notation */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Barlow:wght@400;600&display=swap');
+
+:root {
+  // font-family
+  --font-family-fallback: -apple-system, 'Segoe UI', roboto, 'noto sans', ubuntu, cantarell, 'helvetica neue';
+  --font-family-text: 'Open Sans', var(--font-family-fallback);
+  --font-family-title: 'Barlow', var(--font-family-fallback);
+
+  // font-size
+  --font-xs: 0.75rem; /* 12px */
+  --font-sm: 0.875rem; /* 14px */
+  --font-md: 1rem; /* 16px */
+  --font-lg: 1.125rem; /* 18px */
+  --font-xl: 1.25rem; /* 20px */
+  --font-2xl: 1.5rem; /* 24px */
+  --font-3xl: 1.875rem; /* 30px */
+  --font-4xl: 2.25rem; /* 36px */
+  --font-5xl: 3rem; /* 48px */
+  --font-6xl: 3.75rem; /* 60px */
+  --font-7xl: 4.5rem; /* 72px */
+  --font-8xl: 6rem; /* 96px */
+  --font-9xl: 8rem; /* 128px */
+
+  // line-height
+  --font-xs-leading: 1rem; /* 16px */
+  --font-sm-leading: 1.25rem; /* 20px */
+  --font-md-leading: 1.5rem; /* 24px */
+  --font-lg-leading: 1.75rem; /* 28px */
+  --font-xl-leading: 1.75rem; /* 28px */
+  --font-2xl-leading: 2rem; /* 32px */
+  --font-3xl-leading: 2.25rem; /* 36px */
+  --font-4xl-leading: 2.5rem; /* 40px */
+  --font-5xl-leading: 1;
+  --font-6xl-leading: 1;
+  --font-7xl-leading: 1;
+  --font-8xl-leading: 1;
+  --font-9xl-leading: 1;
+}
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_screens.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_screens.scss
new file mode 100644
index 00000000..a3e51375
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_screens.scss
@@ -0,0 +1,7 @@
+:root {
+  --screen-sm: 640px;
+  --screen-md: 768px;
+  --screen-lg: 1024px;
+  --screen-xl: 1280px;
+  --screen-2xl: 1536px;
+}
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_shadows.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_shadows.scss
new file mode 100644
index 00000000..b1a41ac5
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_shadows.scss
@@ -0,0 +1,10 @@
+:root {
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-none: 0 0 #0000;
+}
diff --git a/captive-theme/app/assets/stylesheets/captive-theme/variables/_spaces.scss b/captive-theme/app/assets/stylesheets/captive-theme/variables/_spaces.scss
new file mode 100644
index 00000000..5649b06e
--- /dev/null
+++ b/captive-theme/app/assets/stylesheets/captive-theme/variables/_spaces.scss
@@ -0,0 +1,33 @@
+:root {
+  --space-0: 0;
+  --space-0-1: 0.125rem; /* 2px */
+  --space-1: 0.25rem; /* 4px */
+  --space-2: 0.5rem; /* 8px */
+  --space-3: 0.75rem; /* 12px */
+  --space-4: 1rem; /* 16px */
+  --space-5: 1.25rem; /* 20px */
+  --space-6: 1.5rem; /* 24px */
+  --space-7: 1.75rem; /* 28px */
+  --space-8: 2rem; /* 32px */
+  --space-9: 2.25rem; /* 36px */
+  --space-10: 2.5rem; /* 40px */
+  --space-11: 2.75rem; /* 44px */
+  --space-12: 3rem; /* 48px */
+  --space-14: 3.5rem; /* 56px */
+  --space-16: 4rem; /* 64px */
+  --space-20: 5rem; /* 80px */
+  --space-24: 6rem; /* 96px */
+  --space-28: 7rem; /* 112px */
+  --space-32: 8rem; /* 128px */
+  --space-36: 9rem; /* 144px */
+  --space-40: 10rem; /* 160px */
+  --space-44: 11rem; /* 176px */
+  --space-48: 12rem; /* 192px */
+  --space-52: 13rem; /* 208px */
+  --space-56: 14rem; /* 224px */
+  --space-60: 15rem; /* 240px */
+  --space-64: 16rem; /* 256px */
+  --space-72: 18rem; /* 288px */
+  --space-80: 20rem; /* 320px */
+  --space-96: 24rem; /* 384px */
+}