diff --git a/css/backoffice/utils/variables/_all.scss b/css/backoffice/utils/variables/_all.scss
index 8365600b5..d8487a9d2 100644
--- a/css/backoffice/utils/variables/_all.scss
+++ b/css/backoffice/utils/variables/_all.scss
@@ -8,6 +8,8 @@
 @import "depression";
 @import "elevation";
 @import "path";
+@import "size";
+@import "spacing";
 @import "typography";
 // Important: Keep this partial last as it includes variables from the previous partials
 @import "base";
diff --git a/css/backoffice/utils/variables/_size.scss b/css/backoffice/utils/variables/_size.scss
new file mode 100644
index 000000000..6379e6f18
--- /dev/null
+++ b/css/backoffice/utils/variables/_size.scss
@@ -0,0 +1,46 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-size-0: 0px !default;
+$ibo-size-50: 2px !default;
+$ibo-size-100: 4px !default;
+$ibo-size-150: 8px !default;
+$ibo-size-200: 12px !default;
+$ibo-size-250: 16px !default;
+$ibo-size-300: 24px !default;
+$ibo-size-350: 32px !default;
+$ibo-size-400: 48px !default;
+$ibo-size-450: 64px !default;
+$ibo-size-500: 96px !default;
+$ibo-size-550: 128px !default;
+$ibo-size-600: 192px !default;
+$ibo-size-650: 256px !default;
+$ibo-size-700: 384px !default;
+$ibo-size-750: 512px !default;
+$ibo-size-800: 640px !default;
+$ibo-size-850: 768px !default;
+$ibo-size-900: 896px !default;
+
+:root{
+  --ibo-size-0: #{$ibo-size-0};
+  --ibo-size-50: #{$ibo-size-50};
+  --ibo-size-100: #{$ibo-size-100};
+  --ibo-size-150: #{$ibo-size-150};
+  --ibo-size-200: #{$ibo-size-200};
+  --ibo-size-250: #{$ibo-size-250};
+  --ibo-size-300: #{$ibo-size-300};
+  --ibo-size-350: #{$ibo-size-350};
+  --ibo-size-400: #{$ibo-size-400};
+  --ibo-size-450: #{$ibo-size-450};
+  --ibo-size-500: #{$ibo-size-500};
+  --ibo-size-550: #{$ibo-size-550};
+  --ibo-size-600: #{$ibo-size-600};
+  --ibo-size-650: #{$ibo-size-650};
+  --ibo-size-700: #{$ibo-size-700};
+  --ibo-size-750: #{$ibo-size-750};
+  --ibo-size-800: #{$ibo-size-800};
+  --ibo-size-850: #{$ibo-size-850};
+  --ibo-size-900: #{$ibo-size-900};
+}
\ No newline at end of file
diff --git a/css/backoffice/utils/variables/_spacing.scss b/css/backoffice/utils/variables/_spacing.scss
new file mode 100644
index 000000000..db209db55
--- /dev/null
+++ b/css/backoffice/utils/variables/_spacing.scss
@@ -0,0 +1,28 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-spacing-0: $ibo-size-0 !default;
+$ibo-spacing-100: $ibo-size-50 !default;
+$ibo-spacing-200: $ibo-size-100 !default;
+$ibo-spacing-300: $ibo-size-150 !default;
+$ibo-spacing-400: $ibo-size-200 !default;
+$ibo-spacing-500: $ibo-size-250 !default;
+$ibo-spacing-600: $ibo-size-300 !default;
+$ibo-spacing-700: $ibo-size-350 !default;
+$ibo-spacing-800: $ibo-size-400 !default;
+$ibo-spacing-900: $ibo-size-450 !default;
+
+:root{
+  --ibo-spacing-0: #{$ibo-size-0};
+  --ibo-spacing-100: #{$ibo-size-50};
+  --ibo-spacing-200: #{$ibo-size-100};
+  --ibo-spacing-300: #{$ibo-size-150};
+  --ibo-spacing-400: #{$ibo-size-200};
+  --ibo-spacing-500: #{$ibo-size-250};
+  --ibo-spacing-600: #{$ibo-size-300};
+  --ibo-spacing-700: #{$ibo-size-350};
+  --ibo-spacing-800: #{$ibo-size-400};
+  --ibo-spacing-900: #{$ibo-size-450};
+}
\ No newline at end of file