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 */
+}