diff --git a/src/front/Themes/constants.scss b/src/front/Themes/constants.scss
index 4ac205b4..a9b8ab4a 100644
--- a/src/front/Themes/constants.scss
+++ b/src/front/Themes/constants.scss
@@ -115,3 +115,42 @@ $modal-background: rgba(0, 0, 0, 0.44);
 
 $shadow-nav: 0px 8px 10px rgba(0, 0, 0, 0.07);
 $shadow-tooltip: 0px 4px 24px rgba(0, 0, 0, 0.15);
+
+$spacing-0-25: 2px;
+$spacing-0-5: 4px;
+$spacing-0-75: 6px;
+$spacing-1: 8px;
+$spacing-1-5: 12px;
+$spacing-2: 16px;
+$spacing-3: 24px;
+$spacing-4: 32px;
+$spacing-5: 40px;
+$spacing-6: 48px;
+$spacing-7: 56px;
+$spacing-8: 64px;
+$spacing-9: 72px;
+$spacing-10: 80px;
+$spacing-11: 88px;
+$spacing-12: 96px;
+$spacing-13: 104px;
+$spacing-14: 112px;
+$spacing-15: 120px;
+$spacing-16: 128px;
+
+$radius-xs: 2px;
+$radius-sm: 4px;
+$radius-md: 8px;
+$radius-lg: 16px;
+$radius-xl: 24px;
+$radius-2xl: 32px;
+$radius-3xl: 360px;
+
+$background-primary: #ffffff;
+$background-elevation-1: #f7f8f8;
+$background-elevation-2: #edeff1;
+
+$opacity-disabled: 0.3;
+
+$shadow-sm: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
+$shadow-md: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
+$shadow-lg: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss
index 725f8373..32e12baa 100644
--- a/src/front/Themes/variables.scss
+++ b/src/front/Themes/variables.scss
@@ -110,4 +110,44 @@
 	--color-success-600-soft: #{$color-success-600-soft};
 	--color-warning-500-soft: #{$color-warning-500-soft};
 	--color-error-600-soft: #{$color-error-600-soft};
+
+	/// Spacing
+	--spacing-0-25: #{$spacing-0-25};
+	--spacing-0-5: #{$spacing-0-5};
+	--spacing-0-75: #{$spacing-0-75};
+	--spacing-1: #{$spacing-1};
+	--spacing-1-5: #{$spacing-1-5};
+	--spacing-2: #{$spacing-2};
+	--spacing-3: #{$spacing-3};
+	--spacing-4: #{$spacing-4};
+	--spacing-5: #{$spacing-5};
+	--spacing-6: #{$spacing-6};
+	--spacing-7: #{$spacing-7};
+	--spacing-8: #{$spacing-8};
+	--spacing-9: #{$spacing-9};
+	--spacing-10: #{$spacing-10};
+	--spacing-11: #{$spacing-11};
+	--spacing-12: #{$spacing-12};
+	--spacing-13: #{$spacing-13};
+	--spacing-14: #{$spacing-14};
+	--spacing-15: #{$spacing-15};
+	--spacing-16: #{$spacing-16};
+
+	--radius-xs: #{$radius-xs};
+	--radius-sm: #{$radius-sm};
+	--radius-md: #{$radius-md};
+	--radius-lg: #{$radius-lg};
+	--radius-xl: #{$radius-xl};
+	--radius-2xl: #{radius-2xl};
+	--radius-3xl: #{radius-3xl};
+
+	--background-primary: #{$background-primary};
+	--background-elevation-1: #{$background-elevation-1};
+	--background-elevation-2: #{$background-elevation-2};
+
+	--opacity-disabled: #{$opacity-disabled};
+
+	--shadow-sm: #{$shadow-sm};
+	--shadow-md: #{$shadow-md};
+	--shadow-lg: #{$shadow-lg};
 }