diff --git a/src/importer/components/Box/style/Box.module.scss b/src/importer/components/Box/style/Box.module.scss
index 00093728..a6bb21c2 100644
--- a/src/importer/components/Box/style/Box.module.scss
+++ b/src/importer/components/Box/style/Box.module.scss
@@ -1,10 +1,10 @@
 .box {
     display: block;
     margin: 0 auto;
-    padding: var(--m);
-    background-color: var(--color-background-modal);
-    border-radius: var(--border-radius-5);
-    box-shadow: 0 0 20px var(--color-background-modal-shadow);
+    padding: var(--csv-m);
+    background-color: var(--csv-color-background-modal);
+    border-radius: var(--csv-border-radius-5);
+    box-shadow: 0 0 20px var(--csv-color-background-modal-shadow);
     max-width: 100%;
 
     &.fluid {
@@ -17,15 +17,15 @@
         max-width: 660px;
     }
     &.space-l {
-        padding: var(--m-l);
+        padding: var(--csv-m-l);
     }
     &.space-mid {
-        padding: var(--m);
+        padding: var(--csv-m);
     }
     &.space-none {
         padding: 0;
     }
     &.bg-shade {
-        background-color: var(--color-background-modal-shade);
+        background-color: var(--csv-color-background-modal-shade);
     }
 }
diff --git a/src/importer/components/Checkbox/style/Checkbox.module.scss b/src/importer/components/Checkbox/style/Checkbox.module.scss
index e60ed91c..d1d416d2 100644
--- a/src/importer/components/Checkbox/style/Checkbox.module.scss
+++ b/src/importer/components/Checkbox/style/Checkbox.module.scss
@@ -1,6 +1,6 @@
 .container {
   display: inline-block;
-  gap: var(--m-xs);
+  gap: var(--csv-m-xs);
   align-items: center;
 
   &:has(input:not(:disabled)) {
@@ -12,49 +12,49 @@
     appearance: none;
     background-color: transparent;
     margin: 0;
-    color: var(--color-primary);
-    width: var(--m);
-    height: var(--m);
-    border: 2px solid var(--color-border);
+    color: var(--csv-color-primary);
+    width: var(--csv-m);
+    height: var(--csv-m);
+    border: 2px solid var(--csv-color-border);
     display: grid;
     place-content: center;
-    border-radius: var(--border-radius-1);
+    border-radius: var(--csv-border-radius-1);
     cursor: pointer;
 
     &::before {
       content: "";
-      width: var(--m-xs);
-      height: var(--m-xs);
+      width: var(--csv-m-xs);
+      height: var(--csv-m-xs);
     }
 
     &:checked {
-      background-color: var(--color-primary);
-      border-color: var(--color-primary);
+      background-color: var(--csv-color-primary);
+      border-color: var(--csv-color-primary);
     }
 
     &:checked::before {
       clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-      box-shadow: inset 1em 1em var(--color-text-on-primary);
+      box-shadow: inset 1em 1em var(--csv-color-text-on-primary);
     }
 
     &:not(:disabled) {
       &:focus-visible {
-        outline: 1px solid var(--color-border);
+        outline: 1px solid var(--csv-color-border);
         outline-offset: 3px;
       }
     }
 
     &:disabled {
-      --container-color: var(--container-disabled);
-      color: var(--container-disabled);
+      --container-color: var(--csv-container-disabled);
+      color: var(--csv-container-disabled);
       cursor: default;
-      background-color: var(--color-input-disabled);
-      border-color: var(--color-border-soft);
+      background-color: var(--csv-color-input-disabled);
+      border-color: var(--csv-color-border-soft);
 
       &:checked {
         &::before {
           clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-          box-shadow: inset 1em 1em var(--color-border-soft);
+          box-shadow: inset 1em 1em var(--csv-color-border-soft);
         }
       }
     }
diff --git a/src/importer/components/Errors/style/Errors.module.scss b/src/importer/components/Errors/style/Errors.module.scss
index 1bba2012..ac764b46 100644
--- a/src/importer/components/Errors/style/Errors.module.scss
+++ b/src/importer/components/Errors/style/Errors.module.scss
@@ -1,12 +1,12 @@
 .errors {
-  color: var(--color-text-error);
-  margin: var(--m-xxs) 0;
+  color: var(--csv-color-text-error);
+  margin: var(--csv-m-xxs) 0;
 
   p {
     margin: 0;
     display: flex;
     align-items: center;
-    gap: var(--m-xxs);
+    gap: var(--csv-m-xxs);
     text-align: left;
   }
 }
diff --git a/src/importer/components/Input/style/Input.module.scss b/src/importer/components/Input/style/Input.module.scss
index 55fa13bf..faf0cba9 100644
--- a/src/importer/components/Input/style/Input.module.scss
+++ b/src/importer/components/Input/style/Input.module.scss
@@ -1,11 +1,11 @@
 @import "./mixins.scss";
 
 .container {
-  margin-bottom: var(--m);
+  margin-bottom: var(--csv-m);
   text-align: left;
 
   &:only-child {
-    margin: var(--m-xxs) 0;
+    margin: var(--csv-m-xxs) 0;
   }
 
   &:has(input[disabled]) {
@@ -24,28 +24,28 @@
     text-align: inherit;
     padding: 0;
     font-size: inherit;
-    accent-color: var(--color-primary);
+    accent-color: var(--csv-color-primary);
   }
 }
 
 .label {
   display: inline-block;
-  margin-bottom: var(--m-xxs);
+  margin-bottom: var(--csv-m-xxs);
   cursor: pointer;
   line-height: 1;
   font-weight: 500;
-  font-family: var(--font-family-1);
+  font-family: var(--csv-font-family-1);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .inputWrapper {
-  background-color: var(--color-input-background);
-  border-radius: var(--border-radius-2);
+  background-color: var(--csv-color-input-background);
+  border-radius: var(--csv-border-radius-2);
   outline: 1px solid transparent;
-  padding: calc(var(--m-xxs) / 2);
-  border: 1px solid var(--color-border);
+  padding: calc(var(--csv-m-xxs) / 2);
+  border: 1px solid var(--csv-color-border);
   font-weight: 400;
   display: flex;
   align-items: center;
@@ -54,11 +54,11 @@
 
   &:focus-within,
   &:has(.open) {
-    outline-color: var(--color-text);
+    outline-color: var(--csv-color-text);
     z-index: 11;
 
     .icon svg:not([data-stroke="no-stroke"]) path {
-      stroke: var(--color-text);
+      stroke: var(--csv-color-text);
     }
 
     .options {
@@ -68,17 +68,17 @@
 
   &:has(> [error]),
   &.hasError {
-    border-color: var(--color-text-error);
+    border-color: var(--csv-color-text-error);
 
     .icon svg:not([data-stroke="no-stroke"]) path {
-      stroke: var(--color-text-error);
+      stroke: var(--csv-color-text-error);
     }
   }
 
   &:has(> [disabled]) {
-    background-color: var(--color-input-disabled);
-    color: var(--color-input-text-disabled);
-    border-color: var(--color-border-soft);
+    background-color: var(--csv-color-input-disabled);
+    color: var(--csv-color-input-text-disabled);
+    border-color: var(--csv-color-border-soft);
 
     .icon.dropdownIcon {
       cursor: default;
@@ -86,7 +86,7 @@
   }
 
   .icon {
-    padding: 0 var(--m-xxxs);
+    padding: 0 var(--csv-m-xxxs);
     cursor: pointer;
     display: flex;
 
@@ -99,7 +99,7 @@
 
     svg:not([data-stroke="no-stroke"]) path {
       display: block;
-      stroke: var(--color-text-soft);
+      stroke: var(--csv-color-text-soft);
     }
   }
 
@@ -111,22 +111,22 @@
     resize: none;
     width: 100%;
     display: block;
-    padding: calc(var(--m-xxs) / 2);
+    padding: calc(var(--csv-m-xxs) / 2);
     border: none;
     background-color: transparent;
     flex-grow: 1;
-    color: var(--color-text);
+    color: var(--csv-color-text);
     font: inherit;
     font-weight: inherit;
     line-height: inherit;
-    accent-color: var(--color-primary);
+    accent-color: var(--csv-color-primary);
 
     @include placeholder {
-      color: var(--color-text-soft);
+      color: var(--csv-color-text-soft);
     }
 
     option:disabled {
-      color: var(--color-text-soft);
+      color: var(--csv-color-text-soft);
     }
     option:not([value]) {
       display: none;
@@ -138,9 +138,9 @@
   }
 
   select option {
-    background-color: var(--color-input-background);
+    background-color: var(--csv-color-input-background);
     border: none;
-    padding: var(--m);
+    padding: var(--csv-m);
   }
 
   .fluid & {
@@ -148,15 +148,15 @@
   }
 
   .small & {
-    padding: 0 var(--m-xxxs);
+    padding: 0 var(--csv-m-xxxs);
     min-width: auto;
-    border-radius: var(--border-radius-1);
+    border-radius: var(--csv-border-radius-1);
 
     .options {
-      border-radius: var(--border-radius-1);
+      border-radius: var(--csv-border-radius-1);
 
       .option {
-        border-radius: var(--border-radius-1);
+        border-radius: var(--csv-border-radius-1);
       }
     }
   }
@@ -183,27 +183,27 @@
 
   .inner {
     display: flex;
-    background-color: var(--color-input-background);
-    border-radius: var(--border-radius-2);
-    padding: var(--m-xxxxs);
-    outline: 1px solid var(--color-border);
+    background-color: var(--csv-color-input-background);
+    border-radius: var(--csv-border-radius-2);
+    padding: var(--csv-m-xxxxs);
+    outline: 1px solid var(--csv-color-border);
     display: flex;
     flex-direction: column;
-    gap: var(--m-xxxxs);
+    gap: var(--csv-m-xxxxs);
     max-height: calc(100vh - 8px);
     overflow-y: auto;
-    margin-top: var(--m-xxxxs);
+    margin-top: var(--csv-m-xxxxs);
     width: 100%;
   }
 
   .option {
-    padding: var(--m-xxs) var(--m-xxs);
-    border-radius: var(--border-radius-2);
+    padding: var(--csv-m-xxs) var(--csv-m-xxs);
+    border-radius: var(--csv-border-radius-2);
     background-color: transparent;
     border: none;
 
     &[disabled] {
-      color: var(--color-text-soft);
+      color: var(--csv-color-text-soft);
     }
 
     &:not([disabled]) {
@@ -212,36 +212,36 @@
       &:hover,
       &:focus,
       &.selected {
-        background-color: var(--color-background-menu-hover);
+        background-color: var(--csv-color-background-menu-hover);
       }
       &.placeholder {
-        color: var(--color-text-soft);
+        color: var(--csv-color-text-soft);
       }
     }
     .requiredMark {
-      color: var(--color-text-error);
+      color: var(--csv-color-text-error);
     }
     .multipleMark {
-      color: var(--color-text-soft);
-      font-size: var(--font-size-s);
-      background-color: var(--color-background-menu-hover);
-      padding: var(--m-xxxxs) var(--m-xxxs);
-      border-radius: var(--border-radius-1);
-      margin-left: var(--m-xxxs);
+      color: var(--csv-color-text-soft);
+      font-size: var(--csv-font-size-s);
+      background-color: var(--csv-color-background-menu-hover);
+      padding: var(--csv-m-xxxxs) var(--csv-m-xxxs);
+      border-radius: var(--csv-border-radius-1);
+      margin-left: var(--csv-m-xxxs);
     }
   }
 }
 
 .error {
-  color: var(--color-text-error);
-  margin-top: var(--m-xxs);
+  color: var(--csv-color-text-error);
+  margin-top: var(--csv-m-xxs);
   line-height: 1;
   font-weight: 400;
 }
 
 .footer {
-  color: var(--color-text-soft);
-  margin-top: var(--m-xxs);
+  color: var(--csv-color-text-soft);
+  margin-top: var(--csv-m-xxs);
   line-height: 1;
   font-weight: 400;
 }
diff --git a/src/importer/components/Stepper/style/Stepper.module.scss b/src/importer/components/Stepper/style/Stepper.module.scss
index 971eb9f7..b9971461 100644
--- a/src/importer/components/Stepper/style/Stepper.module.scss
+++ b/src/importer/components/Stepper/style/Stepper.module.scss
@@ -2,19 +2,19 @@ $transition: all 0.3s ease-out;
 
 .stepper {
   display: flex;
-  gap: var(--m);
-  margin: var(--m-xs) auto;
+  gap: var(--csv-m);
+  margin: var(--csv-m-xs) auto;
   justify-content: center;
 
   .step {
     display: flex;
-    gap: var(--m-xxs);
+    gap: var(--csv-m-xxs);
     align-items: center;
     transition: $transition;
 
     .badge {
       border-radius: 50%;
-      border: 1px solid var(--color-border);
+      border: 1px solid var(--csv-color-border);
       aspect-ratio: 1;
       width: 2em;
       display: flex;
@@ -24,17 +24,17 @@ $transition: all 0.3s ease-out;
     }
 
     &.active {
-      color: var(--color-primary);
+      color: var(--csv-color-primary);
 
       .badge {
-        background-color: var(--color-primary);
-        color: var(--color-text-on-primary);
+        background-color: var(--csv-color-primary);
+        color: var(--csv-color-text-on-primary);
         border: none;
       }
     }
     &.done {
       .badge {
-        border-color: var(--color-primary);
+        border-color: var(--csv-color-primary);
       }
     }
 
@@ -43,9 +43,9 @@ $transition: all 0.3s ease-out;
         content: "";
         height: 1px;
         width: calc(min(140px, 4vw));
-        background-color: var(--color-border);
+        background-color: var(--csv-color-border);
         border-radius: 2px;
-        margin-right: var(--m-xs);
+        margin-right: var(--csv-m-xs);
       }
     }
   }
diff --git a/src/importer/components/Table/style/Default.module.scss b/src/importer/components/Table/style/Default.module.scss
index 26953f30..e5b1594f 100644
--- a/src/importer/components/Table/style/Default.module.scss
+++ b/src/importer/components/Table/style/Default.module.scss
@@ -1,4 +1,4 @@
-$radius: var(--border-radius-2);
+$radius: var(--csv-border-radius-2);
 $cellHeight: 44px;
 
 .table {
@@ -9,7 +9,7 @@ $cellHeight: 44px;
   border-collapse: collapse;
   border-spacing: 0;
   border-radius: $radius;
-  outline: 1px solid var(--color-border);
+  outline: 1px solid var(--csv-color-border);
   table-layout: fixed;
   overflow: hidden;
 
@@ -39,10 +39,10 @@ $cellHeight: 44px;
 
   .caption {
     display: table-caption;
-    border-bottom: 1px solid var(--color-border);
-    background-color: var(--color-background-modal);
-    padding: 0 var(--m-s);
-    border-radius: var(--border-radius-2) var(--border-radius-2) 0 0;
+    border-bottom: 1px solid var(--csv-color-border);
+    background-color: var(--csv-color-background-modal);
+    padding: 0 var(--csv-m-s);
+    border-radius: var(--csv-border-radius-2) var(--csv-border-radius-2) 0 0;
   }
 
   .thead {
@@ -50,9 +50,9 @@ $cellHeight: 44px;
       .td {
         font-weight: 400;
         white-space: nowrap;
-        padding: var(--m-xxxs) var(--m-s);
-        border-bottom: 1px solid var(--color-border);
-        color: var(--color-text-secondary);
+        padding: var(--csv-m-xxxs) var(--csv-m-s);
+        border-bottom: 1px solid var(--csv-color-border);
+        color: var(--csv-color-text-secondary);
 
         &:first-of-type {
           border-radius: $radius 0 0 0;
@@ -69,7 +69,7 @@ $cellHeight: 44px;
     .tr {
       .td {
         vertical-align: middle;
-        padding: var(--m-xxxs) var(--m-s);
+        padding: var(--csv-m-xxxs) var(--csv-m-s);
         font-weight: 400;
 
         & > span,
@@ -85,12 +85,12 @@ $cellHeight: 44px;
         }
 
         &.element {
-          padding: 0 var(--m-s);
+          padding: 0 var(--csv-m-s);
         }
       }
 
       &:hover {
-        box-shadow: 0 0 0 2px var(--color-border);
+        box-shadow: 0 0 0 2px var(--csv-color-border);
         position: relative;
       }
 
@@ -113,13 +113,13 @@ $cellHeight: 44px;
   }
 
   &.zebra {
-    background-color: var(--color-background-modal);
+    background-color: var(--csv-color-background-modal);
 
     .tbody {
       .tr {
         &:nth-child(odd) {
           .td {
-            background-color: var(--color-background);
+            background-color: var(--csv-color-background);
           }
         }
       }
@@ -127,20 +127,20 @@ $cellHeight: 44px;
   }
 
   &.dark {
-    background-color: var(--color-background);
+    background-color: var(--csv-color-background);
 
     .thead .tr .td {
-      background-color: var(--color-background-modal);
+      background-color: var(--csv-color-background-modal);
     }
   }
 
   &.light {
-    background-color: var(--color-background-modal);
+    background-color: var(--csv-color-background-modal);
   }
 
   &.transparent {
     .thead {
-      background-color: var(--color-background-modal);
+      background-color: var(--csv-color-background-modal);
     }
     .tbody {
       .tr {
@@ -162,13 +162,13 @@ $cellHeight: 44px;
         }
 
         &:first-of-type .td {
-          padding-top: var(--m-s);
-          height: calc(#{$cellHeight} + var(--m-s) - var(--m-xxxs));
+          padding-top: var(--csv-m-s);
+          height: calc(#{$cellHeight} + var(--csv-m-s) - var(--csv-m-xxxs));
         }
 
         &:last-of-type .td {
-          padding-bottom: var(--m-s);
-          height: calc(#{$cellHeight} + var(--m-s) - var(--m-xxxs));
+          padding-bottom: var(--csv-m-s);
+          height: calc(#{$cellHeight} + var(--csv-m-s) - var(--csv-m-xxxs));
         }
       }
     }
diff --git a/src/importer/components/ToggleFilter/index.tsx b/src/importer/components/ToggleFilter/index.tsx
index 0a613d39..6ee59f2a 100644
--- a/src/importer/components/ToggleFilter/index.tsx
+++ b/src/importer/components/ToggleFilter/index.tsx
@@ -23,7 +23,7 @@ function ToggleFilter({ options, onChange, className }: ToggleFilterProps) {
     if (option.color) {
       return option.color;
     }
-    return selectedOption === option.label ? "var(--color-tertiary)" : "var(--color-text)";
+    return selectedOption === option.label ? "var(--csv-color-tertiary)" : "var(--csv-color-text)";
   };
 
   return (
diff --git a/src/importer/components/ToggleFilter/style/ToggleFilter.module.scss b/src/importer/components/ToggleFilter/style/ToggleFilter.module.scss
index 9f805963..afcc02c4 100644
--- a/src/importer/components/ToggleFilter/style/ToggleFilter.module.scss
+++ b/src/importer/components/ToggleFilter/style/ToggleFilter.module.scss
@@ -1,7 +1,7 @@
 .toggleFilter {
     display: flex;
     align-items: center;
-    background-color: var(--color-input-background);
+    background-color: var(--csv-color-input-background);
     border-radius: 20px;
     overflow: hidden;
     min-height: 36px;
@@ -12,13 +12,13 @@
     cursor: pointer;
     
     &.selected {
-        background-color: var(--color-text-on-tertiary);
+        background-color: var(--csv-color-text-on-tertiary);
         border-radius: 20px;
         transition: background-color 0.2s, color 0.2s;
     }
 
     .defaultColor {
-        color: var(--color-text);
+        color: var(--csv-color-text);
     }
   }
   
\ No newline at end of file
diff --git a/src/importer/components/Tooltip/style/Tooltip.module.scss b/src/importer/components/Tooltip/style/Tooltip.module.scss
index d83c814f..665b201f 100644
--- a/src/importer/components/Tooltip/style/Tooltip.module.scss
+++ b/src/importer/components/Tooltip/style/Tooltip.module.scss
@@ -1,10 +1,10 @@
-$side: var(--m-xxxs);
+$side: var(--csv-m-xxxs);
 $height: calc($side * 1.732);
 
 .tooltip {
   display: inline-flex;
   align-items: center;
-  gap: var(--m-xs);
+  gap: var(--csv-m-xs);
 
   .icon {
     position: relative;
@@ -21,12 +21,12 @@ $height: calc($side * 1.732);
 .message {
   position: absolute;
   transform: translateX(-50%);
-  background-color: var(--color-background-modal);
+  background-color: var(--csv-color-background-modal);
   z-index: 3;
-  padding: var(--m-xxs) var(--m-xs);
-  border-radius: var(--border-radius);
-  margin-top: var(--m-xs);
-  box-shadow: 0 0 0 1px var(--color-border), 0 5px 15px rgba(0, 0, 0, 0.2);
+  padding: var(--csv-m-xxs) var(--csv-m-xs);
+  border-radius: var(--csv-border-radius);
+  margin-top: var(--csv-m-xs);
+  box-shadow: 0 0 0 1px var(--csv-color-border), 0 5px 15px rgba(0, 0, 0, 0.2);
   max-width: 300px;
 
   &::after,
@@ -36,7 +36,7 @@ $height: calc($side * 1.732);
     left: 50%;
     border-left: $side solid transparent;
     border-right: $side solid transparent;
-    border-bottom: $height solid var(--color-border);
+    border-bottom: $height solid var(--csv-color-border);
     content: "";
     font-size: 0;
     line-height: 0;
@@ -46,6 +46,6 @@ $height: calc($side * 1.732);
 
   &::after {
     top: calc($height * -1 + 2px);
-    border-bottom: $height solid var(--color-background-modal);
+    border-bottom: $height solid var(--csv-color-background-modal);
   }
 }
diff --git a/src/importer/components/UploaderWrapper/UploaderWrapper.tsx b/src/importer/components/UploaderWrapper/UploaderWrapper.tsx
index 02f30893..bbf90da3 100644
--- a/src/importer/components/UploaderWrapper/UploaderWrapper.tsx
+++ b/src/importer/components/UploaderWrapper/UploaderWrapper.tsx
@@ -37,7 +37,7 @@ export default function UploaderWrapper({ onSuccess, setDataError, ...props }: U
   });
 
   return (
-    <Box padding="15px" border="1px solid var(--color-border)" borderRadius="var(--border-radius-2)">
+    <Box padding="15px" border="1px solid var(--csv-color-border)" borderRadius="var(--csv-border-radius-2)">
       <Box
         {...getRootProps()}
         width="100%"
@@ -47,8 +47,8 @@ export default function UploaderWrapper({ onSuccess, setDataError, ...props }: U
         alignItems="center"
         flexDirection="column"
         flex={1}
-        border="2px dashed var(--color-border)"
-        borderRadius="var(--border-radius-2)">
+        border="2px dashed var(--csv-color-border)"
+        borderRadius="var(--csv-border-radius-2)">
         <input {...getInputProps()} />
         {isDragActive ? (
           <Text>{t("Drop your file here")}</Text>
@@ -67,8 +67,8 @@ export default function UploaderWrapper({ onSuccess, setDataError, ...props }: U
               _hover={
                 theme === "light"
                   ? {
-                      background: "var(--color-border)",
-                      color: "var(--color-text)",
+                      background: "var(--csv-color-border)",
+                      color: "var(--csv-color-text)",
                     }
                   : undefined
               }>
diff --git a/src/importer/components/UploaderWrapper/style/uppy.overrides.scss b/src/importer/components/UploaderWrapper/style/uppy.overrides.scss
index 1d55966d..6fae5546 100644
--- a/src/importer/components/UploaderWrapper/style/uppy.overrides.scss
+++ b/src/importer/components/UploaderWrapper/style/uppy.overrides.scss
@@ -3,17 +3,17 @@
 
   .uppy {
     &-Root {
-      font-family: var(--font-family-1);
+      font-family: var(--csv-font-family-1);
       height: 100%;
     }
 
     &-Dashboard {
       height: 100%;
       &-inner {
-        background-color: var(--color-background);
-        border-radius: var(--border-radius-4);
-        border: 1px solid var(--color-border);
-        color: var(--color-text-soft);
+        background-color: var(--csv-color-background);
+        border-radius: var(--csv-border-radius-4);
+        border: 1px solid var(--csv-color-border);
+        color: var(--csv-color-text-soft);
         width: auto !important;
         min-width: 200px;
         height: 100% !important;
@@ -21,11 +21,11 @@
 
       &-AddFiles,
       &-dropFilesHereHint {
-        border: 2px dashed var(--color-border);
-        border-radius: var(--border-radius-3);
-        margin: var(--m-s);
+        border: 2px dashed var(--csv-color-border);
+        border-radius: var(--csv-border-radius-3);
+        margin: var(--csv-m-s);
         color: inherit;
-        font-size: var(--font-size-xxl);
+        font-size: var(--csv-font-size-xxl);
         font-weight: 400;
 
         &-title {
@@ -39,23 +39,23 @@
       }
 
       &-browse {
-        color: var(--importer-link);
+        color: var(--csv-importer-link);
       }
 
       &-dropFilesHereHint {
         padding: 0;
         background-image: none;
         inset: 0;
-        border-color: var(--color-text-soft);
-        color: var(--color-text);
+        border-color: var(--csv-color-text-soft);
+        color: var(--csv-color-text);
         border-width: 3px;
       }
 
       &-Item {
         max-width: inherit;
         &-previewInnerWrap {
-          background-color: var(--color-background) !important;
-          border-radius: var(--border-radius-1);
+          background-color: var(--csv-color-background) !important;
+          border-radius: var(--csv-border-radius-1);
           height: 100% !important;
           &::after {
             background-color: transparent;
@@ -70,18 +70,18 @@
             height: auto;
 
             svg {
-              width: var(--m);
-              height: var(--m);
+              width: var(--csv-m);
+              height: var(--csv-m);
               aspect-ratio: 1;
 
               stroke: none;
 
               path {
                 &:nth-of-type(1) {
-                  fill: var(--color-text-soft);
+                  fill: var(--csv-color-text-soft);
                 }
                 &:nth-of-type(2) {
-                  fill: var(--color-background);
+                  fill: var(--csv-color-background);
                 }
               }
             }
@@ -93,15 +93,15 @@
           height: auto;
 
           svg {
-            width: var(--m);
-            height: var(--m);
+            width: var(--csv-m);
+            height: var(--csv-m);
             aspect-ratio: 1;
 
             circle {
-              fill: var(--color-green-ui);
+              fill: var(--csv-color-green-ui);
             }
             polygon {
-              fill: var(--color-text-on-primary);
+              fill: var(--csv-color-text-on-primary);
             }
           }
         }
@@ -111,9 +111,9 @@
     &-DashboardContent {
       &-bar {
         background-color: transparent;
-        border-bottom-color: var(--color-border);
+        border-bottom-color: var(--csv-color-border);
         height: auto;
-        padding: var(--m-s);
+        padding: var(--csv-m-s);
         display: flex;
         justify-content: space-between;
         width: auto;
@@ -132,7 +132,7 @@
       &-addMore,
       &-back,
       &-save {
-        color: var(--color-text);
+        color: var(--csv-color-text);
         padding: 0;
         font-size: inherit;
         display: inline;
@@ -140,8 +140,8 @@
 
         &:focus {
           background-color: transparent;
-          outline: 2px solid var(--color-text);
-          outline-offset: var(--m-xxxs);
+          outline: 2px solid var(--csv-color-text);
+          outline-offset: var(--csv-m-xxxs);
         }
       }
     }
@@ -150,7 +150,7 @@
       border-top-color: transparent;
       height: auto;
       background-color: transparent;
-      padding: var(--m-s);
+      padding: var(--csv-m-s);
 
       &[aria-hidden="true"] {
         display: none;
@@ -159,22 +159,22 @@
       &-progress {
         left: 0;
         top: 0;
-        background-color: var(--color-green-ui);
+        background-color: var(--csv-color-green-ui);
       }
 
       &:before {
-        background-color: var(--color-border);
+        background-color: var(--csv-color-border);
         height: 0;
       }
 
       &-content {
-        color: var(--color-text-soft);
+        color: var(--csv-color-text-soft);
         font-size: inherit;
         padding-left: 0;
       }
 
       &-actions {
-        padding: var(--m-s);
+        padding: var(--csv-m-s);
         display: flex;
         justify-content: flex-end;
         background-color: transparent;
@@ -186,42 +186,42 @@
       }
 
       &-actionBtn {
-        color: var(--color-text);
-        border-radius: var(--border-radius-1);
-        padding: var(--m-xxxs) var(--m-xxs);
-        border: 1px solid var(--color-border);
+        color: var(--csv-color-text);
+        border-radius: var(--csv-border-radius-1);
+        padding: var(--csv-m-xxxs) var(--csv-m-xxs);
+        border: 1px solid var(--csv-color-border);
         background-color: transparent;
-        margin-right: var(--m-xs);
+        margin-right: var(--csv-m-xs);
         font-size: inherit;
         height: auto;
         display: none;
-        gap: var(--m-xxxs);
+        gap: var(--csv-m-xxxs);
 
         svg {
           position: static;
         }
 
         &:not([disabled]):hover {
-          border-color: var(--color-border-hover);
+          border-color: var(--csv-color-border-hover);
         }
 
         &--upload {
-          padding: 0.5px var(--m-s);
-          border-radius: var(--border-radius-2);
-          font-size: var(--font-size-xs);
+          padding: 0.5px var(--csv-m-s);
+          border-radius: var(--csv-border-radius-2);
+          font-size: var(--csv-font-size-xs);
           font-weight: 400;
-          background-color: var(--color-primary);
-          color: var(--color-text-on-primary);
+          background-color: var(--csv-color-primary);
+          color: var(--csv-color-text-on-primary);
 
           &:not([disabled]):not(.disableHover):hover,
           &:not([disabled]):not(.disableHover):active {
-            background-color: var(--color-primary-hover);
-            color: var(--color-text-on-primary);
+            background-color: var(--csv-color-primary-hover);
+            color: var(--csv-color-text-on-primary);
           }
 
           &:is([disabled]) {
-            background-color: var(--color-primary-disabled);
-            color: var(--color-text-on-primary-disabled);
+            background-color: var(--csv-color-primary-disabled);
+            color: var(--csv-color-text-on-primary-disabled);
           }
         }
       }
@@ -231,15 +231,15 @@
       }
 
       &-statusIndicator {
-        color: var(--color-green-ui);
+        color: var(--csv-color-green-ui);
       }
 
       &.is-error {
         .uppy-StatusBar-statusIndicator {
-          color: var(--color-red);
+          color: var(--csv-color-red);
         }
         .uppy-StatusBar-statusPrimary {
-          color: var(--color-red);
+          color: var(--csv-color-red);
         }
       }
     }
diff --git a/src/importer/features/complete/style/Complete.module.scss b/src/importer/features/complete/style/Complete.module.scss
index 8db10edc..c8fd2760 100644
--- a/src/importer/features/complete/style/Complete.module.scss
+++ b/src/importer/features/complete/style/Complete.module.scss
@@ -1,6 +1,6 @@
 .content.content {
   max-width: 1000px;
-  padding-top: var(--m);
+  padding-top: var(--csv-m);
   height: 100%;
   flex: 1 0 100px;
   box-shadow: none;
@@ -10,9 +10,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--font-size-xl);
+  font-size: var(--csv-font-size-xl);
   flex-direction: column;
-  gap: var(--m);
+  gap: var(--csv-m);
   text-align: center;
   position: relative;
 
@@ -30,7 +30,7 @@
       position: absolute;
       inset: 0;
       border-radius: 50%;
-      background-color: var(--color-green-ui);
+      background-color: var(--csv-color-green-ui);
       z-index: -1;
     }
 
@@ -38,16 +38,16 @@
       width: 38%;
       height: 38%;
       object-fit: contain;
-      color: var(--color-text-on-primary);
+      color: var(--csv-color-text-on-primary);
     }
   }
 
   .actions {
     display: flex;
-    gap: var(--m-l);
+    gap: var(--csv-m-l);
     align-items: center;
     justify-content: center;
-    margin-top: var(--m-xxl);
+    margin-top: var(--csv-m-xxl);
 
     & > * {
       flex: 1 0 190px;
@@ -60,8 +60,8 @@
 }
 
 .spinner {
-  border: 1px solid var(--color-border);
-  margin-top: var(--m);
-  padding: var(--m);
-  border-radius: var(--border-radius-1);
+  border: 1px solid var(--csv-color-border);
+  margin-top: var(--csv-m);
+  padding: var(--csv-m);
+  border-radius: var(--csv-border-radius-1);
 }
diff --git a/src/importer/features/main/style/Main.module.scss b/src/importer/features/main/style/Main.module.scss
index 653a1827..6c4ba640 100644
--- a/src/importer/features/main/style/Main.module.scss
+++ b/src/importer/features/main/style/Main.module.scss
@@ -15,31 +15,31 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--m);
-  padding: 0 var(--m-s) var(--m-s) var(--m-s);
+  gap: var(--csv-m);
+  padding: 0 var(--csv-m-s) var(--csv-m-s) var(--csv-m-s);
 }
 
 .spinner {
-  border: 1px solid var(--color-border);
-  margin-top: var(--m);
-  padding: var(--m);
-  border-radius: var(--border-radius-1);
+  border: 1px solid var(--csv-color-border);
+  margin-top: var(--csv-m);
+  padding: var(--csv-m);
+  border-radius: var(--csv-border-radius-1);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
-$closeSide: calc(var(--m-xl) * 36 / 48);
+$closeSide: calc(var(--csv-m-xl) * 36 / 48);
 
 .close.close {
   position: absolute;
-  right: var(--m-xs, 0.5rem);
-  top: var(--m-xs, 0.5rem);
+  right: var(--csv-m-xs, 0.5rem);
+  top: var(--csv-m-xs, 0.5rem);
   border-radius: 50%;
   min-width: $closeSide;
   height: $closeSide;
   aspect-ratio: 1;
-  font-size: var(--font-size-xl);
+  font-size: var(--csv-font-size-xl);
   padding: 0;
 }
diff --git a/src/importer/features/map-columns/style/MapColumns.module.scss b/src/importer/features/map-columns/style/MapColumns.module.scss
index 0ed9ad47..50b0cf05 100644
--- a/src/importer/features/map-columns/style/MapColumns.module.scss
+++ b/src/importer/features/map-columns/style/MapColumns.module.scss
@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    gap: var(--m);
+    gap: var(--csv-m);
 
     .tableWrapper {
       display: flex;
@@ -30,24 +30,24 @@
   white-space: nowrap;
 
   & > small {
-    background-color: var(--color-input-background);
+    background-color: var(--csv-color-input-background);
     font-family: monospace;
-    padding: var(--m-xxxxs);
-    border-radius: var(--border-radius-1);
-    font-size: var(--font-size-xs);
+    padding: var(--csv-m-xxxxs);
+    border-radius: var(--csv-border-radius-1);
+    font-size: var(--csv-font-size-xs);
     display: inline-block;
 
     & + small {
-      margin-left: var(--m-xxxxs);
+      margin-left: var(--csv-m-xxxxs);
     }
   }
 }
 
 .spinner {
-  border: 1px solid var(--color-border);
-  margin-top: var(--m);
-  padding: var(--m);
-  border-radius: var(--border-radius-1);
+  border: 1px solid var(--csv-color-border);
+  margin-top: var(--csv-m);
+  padding: var(--csv-m);
+  border-radius: var(--csv-border-radius-1);
 }
 
 .errorContainer {
diff --git a/src/importer/features/row-selection/style/RowSelection.module.scss b/src/importer/features/row-selection/style/RowSelection.module.scss
index 6d793038..0294151a 100644
--- a/src/importer/features/row-selection/style/RowSelection.module.scss
+++ b/src/importer/features/row-selection/style/RowSelection.module.scss
@@ -6,7 +6,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    gap: var(--m);
+    gap: var(--csv-m);
 
     .tableWrapper {
       display: flex;
@@ -31,23 +31,23 @@
   white-space: nowrap;
 
   & > small {
-    background-color: var(--color-input-background);
+    background-color: var(--csv-color-input-background);
     font-family: monospace;
-    padding: var(--m-xxxxs);
-    border-radius: var(--border-radius-1);
-    font-size: var(--font-size-xs);
+    padding: var(--csv-m-xxxxs);
+    border-radius: var(--csv-border-radius-1);
+    font-size: var(--csv-font-size-xs);
     display: inline-block;
 
     & + small {
-      margin-left: var(--m-xxxxs);
+      margin-left: var(--csv-m-xxxxs);
     }
   }
 }
 .spinner {
-  border: 1px solid var(--color-border);
-  margin-top: var(--m);
-  padding: var(--m);
-  border-radius: var(--border-radius-1);
+  border: 1px solid var(--csv-color-border);
+  margin-top: var(--csv-m);
+  padding: var(--csv-m);
+  border-radius: var(--csv-border-radius-1);
 }
 
 .inputRadio {
@@ -56,7 +56,7 @@
 
 .headingCaption {
   padding: 12px 0 10px 0;
-  color: var(--color-text-secondary);
+  color: var(--csv-color-text-secondary);
   font-weight: 400;
   height: 48px;
   vertical-align: middle;
diff --git a/src/importer/features/uploader/index.tsx b/src/importer/features/uploader/index.tsx
index 9f1a1b59..d63eb61f 100644
--- a/src/importer/features/uploader/index.tsx
+++ b/src/importer/features/uploader/index.tsx
@@ -36,8 +36,8 @@ export default function Uploader({ template, skipHeaderRowSelection, onSuccess,
       _hover={
         theme === "light"
           ? {
-              background: "var(--color-border)",
-              color: "var(--color-text)",
+              background: "var(--csv-color-border)",
+              color: "var(--csv-color-text)",
             }
           : undefined
       }>
diff --git a/src/importer/features/uploader/style/Uploader.module.scss b/src/importer/features/uploader/style/Uploader.module.scss
index 4cfce4b0..c3be556a 100644
--- a/src/importer/features/uploader/style/Uploader.module.scss
+++ b/src/importer/features/uploader/style/Uploader.module.scss
@@ -1,6 +1,6 @@
 .content {
   display: flex;
-  gap: var(--m);
+  gap: var(--csv-m);
   height: 100%;
 
   & > * {
@@ -17,15 +17,15 @@
 .box {
   display: flex;
   flex-direction: column;
-  gap: var(--m-s);
+  gap: var(--csv-m-s);
 }
 
 .tableContainer {
   overflow: hidden;
   overflow-y: scroll;
   height: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-2);
+  border: 1px solid var(--csv-color-border);
+  border-radius: var(--csv-border-radius-2);
   > div {
     outline: none;
   }
diff --git a/src/importer/hooks/useCustomStyles.ts b/src/importer/hooks/useCustomStyles.ts
index a6429790..f07b0705 100644
--- a/src/importer/hooks/useCustomStyles.ts
+++ b/src/importer/hooks/useCustomStyles.ts
@@ -8,7 +8,7 @@ export default function useCustomStyles(customStyles?: string) {
         Object.keys(parsedStyles).forEach((key) => {
           const root = document.documentElement;
           const value = parsedStyles?.[key as any];
-          root.style.setProperty("--" + key, value);
+          root.style.setProperty("--csv-" + key, value);
         });
       }
     }
diff --git a/src/importer/settings/chakra/components/alert.ts b/src/importer/settings/chakra/components/alert.ts
index 8d80efc2..6189df09 100644
--- a/src/importer/settings/chakra/components/alert.ts
+++ b/src/importer/settings/chakra/components/alert.ts
@@ -3,9 +3,9 @@ import { defineStyleConfig } from "@chakra-ui/styled-system";
 const Alert = defineStyleConfig({
   baseStyle: (props) => ({
     container: {
-      backgroundColor: props.status === "info" ? "var(--color-background-modal)" : "",
-      border: "1px solid var(--color-border)",
-      borderRadius: "var(--border-radius-2)",
+      backgroundColor: props.status === "info" ? "var(--csv-color-background-modal)" : "",
+      border: "1px solid var(--csv-color-border)",
+      borderRadius: "var(--csv-border-radius-2)",
       fontWeight: "400",
     },
     title: {
diff --git a/src/importer/settings/chakra/components/button.ts b/src/importer/settings/chakra/components/button.ts
index bde95b82..e7dd9657 100644
--- a/src/importer/settings/chakra/components/button.ts
+++ b/src/importer/settings/chakra/components/button.ts
@@ -33,11 +33,11 @@ const Button = defineStyleConfig({
             backgroundColor: "var(--external-colors-secondary-300)",
           },
 
-          color: "var(--color-text-on-secondary)",
+          color: "var(--csv-color-text-on-secondary)",
         };
       }
       return {
-        color: "var(--color-text-on-primary)",
+        color: "var(--csv-color-text-on-primary)",
         _hover: {
           backgroundColor: "var(--external-colors-primary-300)",
         },
diff --git a/src/importer/settings/chakra/foundations/colors.ts b/src/importer/settings/chakra/foundations/colors.ts
index bb2664d9..a7e15d4d 100644
--- a/src/importer/settings/chakra/foundations/colors.ts
+++ b/src/importer/settings/chakra/foundations/colors.ts
@@ -5,29 +5,29 @@ const colors = {
   white: "#FFFFFF",
 
   primary: {
-    50: "var(--color-primary)",
-    100: "var(--color-primary)",
-    200: "var(--color-primary)",
-    300: "var(--color-primary-hover)",
-    400: "var(--color-primary)",
-    500: "var(--color-primary)",
-    600: "var(--color-primary)",
-    700: "var(--color-primary)",
-    800: "var(--color-primary)",
-    900: "var(--color-primary)",
+    50: "var(--csv-color-primary)",
+    100: "var(--csv-color-primary)",
+    200: "var(--csv-color-primary)",
+    300: "var(--csv-color-primary-hover)",
+    400: "var(--csv-color-primary)",
+    500: "var(--csv-color-primary)",
+    600: "var(--csv-color-primary)",
+    700: "var(--csv-color-primary)",
+    800: "var(--csv-color-primary)",
+    900: "var(--csv-color-primary)",
   },
 
   secondary: {
-    50: "var(--color-secondary)",
-    100: "var(--color-secondary)",
-    200: "var(--color-secondary)",
-    300: "var(--color-secondary-hover)",
-    400: "var(--color-secondary)",
-    500: "var(--color-secondary)",
-    600: "var(--color-secondary)",
-    700: "var(--color-secondary)",
-    800: "var(--color-secondary)",
-    900: "var(--color-secondary)",
+    50: "var(--csv-color-secondary)",
+    100: "var(--csv-color-secondary)",
+    200: "var(--csv-color-secondary)",
+    300: "var(--csv-color-secondary-hover)",
+    400: "var(--csv-color-secondary)",
+    500: "var(--csv-color-secondary)",
+    600: "var(--csv-color-secondary)",
+    700: "var(--csv-color-secondary)",
+    800: "var(--csv-color-secondary)",
+    900: "var(--csv-color-secondary)",
   },
 
   whiteAlpha: {
diff --git a/src/importer/settings/chakra/foundations/radius.ts b/src/importer/settings/chakra/foundations/radius.ts
index f665350d..a1ab8ac4 100644
--- a/src/importer/settings/chakra/foundations/radius.ts
+++ b/src/importer/settings/chakra/foundations/radius.ts
@@ -1,12 +1,12 @@
 const radii = {
   none: "0",
-  sm: "var(--border-radius)",
-  base: "var(--border-radius-2)",
-  md: "var(--border-radius-3)",
-  lg: "var(--border-radius-4)",
-  xl: "var(--border-radius-5)",
-  "2xl": "calc(var(--border-radius-5) * 1.5)",
-  "3xl": "calc(var(--border-radius-5) * 2)",
+  sm: "var(--csv-border-radius)",
+  base: "var(--csv-border-radius-2)",
+  md: "var(--csv-border-radius-3)",
+  lg: "var(--csv-border-radius-4)",
+  xl: "var(--csv-border-radius-5)",
+  "2xl": "calc(var(--csv-border-radius-5) * 1.5)",
+  "3xl": "calc(var(--csv-border-radius-5) * 2)",
   full: "9999px",
 };
 
diff --git a/src/importer/settings/chakra/foundations/spacing.ts b/src/importer/settings/chakra/foundations/spacing.ts
index c9822a64..f5a02619 100644
--- a/src/importer/settings/chakra/foundations/spacing.ts
+++ b/src/importer/settings/chakra/foundations/spacing.ts
@@ -1,35 +1,35 @@
 export const spacing = {
   px: "1px",
-  0.5: "calc(var(--base-spacing) * 0.083)",
-  1: "calc(var(--base-spacing) * 0.167)",
-  1.5: "calc(var(--base-spacing) * 1)",
-  2: "calc(var(--base-spacing) * 0.333)",
-  2.5: "calc(var(--base-spacing) * 0.417)",
-  3: "calc(var(--base-spacing) * 0.5)",
-  3.5: "calc(var(--base-spacing) * 0.583)",
-  4: "calc(var(--base-spacing) * 0.667)",
-  5: "calc(var(--base-spacing) * 0.833)",
-  6: "calc(var(--base-spacing) * 1)",
-  7: "calc(var(--base-spacing) * 1.167)",
-  8: "calc(var(--base-spacing) * 1.333)",
-  9: "calc(var(--base-spacing) * 1.5)",
-  10: "calc(var(--base-spacing) * 1.667)",
-  12: "calc(var(--base-spacing) * 2)",
-  14: "calc(var(--base-spacing) * 2.333)",
-  16: "calc(var(--base-spacing) * 2.667)",
-  20: "calc(var(--base-spacing) * 3.333)",
-  24: "calc(var(--base-spacing) * 4)",
-  28: "calc(var(--base-spacing) * 4.667)",
-  32: "calc(var(--base-spacing) * 5.333)",
-  36: "calc(var(--base-spacing) * 6)",
-  40: "calc(var(--base-spacing) * 6.667)",
-  44: "calc(var(--base-spacing) * 7.333)",
-  48: "calc(var(--base-spacing) * 8)",
-  52: "calc(var(--base-spacing) * 8.667)",
-  56: "calc(var(--base-spacing) * 9.333)",
-  60: "calc(var(--base-spacing) * 10)",
-  64: "calc(var(--base-spacing) * 10.667)",
-  72: "calc(var(--base-spacing) * 12)",
-  80: "calc(var(--base-spacing) * 13.333)",
-  96: "calc(var(--base-spacing) * 16)",
+  0.5: "calc(var(--csv-base-spacing) * 0.083)",
+  1: "calc(var(--csv-base-spacing) * 0.167)",
+  1.5: "calc(var(--csv-base-spacing) * 1)",
+  2: "calc(var(--csv-base-spacing) * 0.333)",
+  2.5: "calc(var(--csv-base-spacing) * 0.417)",
+  3: "calc(var(--csv-base-spacing) * 0.5)",
+  3.5: "calc(var(--csv-base-spacing) * 0.583)",
+  4: "calc(var(--csv-base-spacing) * 0.667)",
+  5: "calc(var(--csv-base-spacing) * 0.833)",
+  6: "calc(var(--csv-base-spacing) * 1)",
+  7: "calc(var(--csv-base-spacing) * 1.167)",
+  8: "calc(var(--csv-base-spacing) * 1.333)",
+  9: "calc(var(--csv-base-spacing) * 1.5)",
+  10: "calc(var(--csv-base-spacing) * 1.667)",
+  12: "calc(var(--csv-base-spacing) * 2)",
+  14: "calc(var(--csv-base-spacing) * 2.333)",
+  16: "calc(var(--csv-base-spacing) * 2.667)",
+  20: "calc(var(--csv-base-spacing) * 3.333)",
+  24: "calc(var(--csv-base-spacing) * 4)",
+  28: "calc(var(--csv-base-spacing) * 4.667)",
+  32: "calc(var(--csv-base-spacing) * 5.333)",
+  36: "calc(var(--csv-base-spacing) * 6)",
+  40: "calc(var(--csv-base-spacing) * 6.667)",
+  44: "calc(var(--csv-base-spacing) * 7.333)",
+  48: "calc(var(--csv-base-spacing) * 8)",
+  52: "calc(var(--csv-base-spacing) * 8.667)",
+  56: "calc(var(--csv-base-spacing) * 9.333)",
+  60: "calc(var(--csv-base-spacing) * 10)",
+  64: "calc(var(--csv-base-spacing) * 10.667)",
+  72: "calc(var(--csv-base-spacing) * 12)",
+  80: "calc(var(--csv-base-spacing) * 13.333)",
+  96: "calc(var(--csv-base-spacing) * 16)",
 };
diff --git a/src/importer/settings/chakra/foundations/typography.ts b/src/importer/settings/chakra/foundations/typography.ts
index d7a8091b..a24bafda 100644
--- a/src/importer/settings/chakra/foundations/typography.ts
+++ b/src/importer/settings/chakra/foundations/typography.ts
@@ -45,21 +45,21 @@ const typography = {
   },
 
   fontSizes: {
-    "3xs": "calc(var(--font-size) * 0.45)",
-    "2xs": "calc(var(--font-size) * 0.625)",
-    xs: "calc(var(--font-size) * 0.75)",
-    sm: "calc(var(--font-size) * 0.875)",
-    md: "calc(var(--font-size) * 1)",
-    lg: "calc(var(--font-size) * 1.125)",
-    xl: "calc(var(--font-size) * 1.25)",
-    "2xl": "calc(var(--font-size) * 1.5)",
-    "3xl": "calc(var(--font-size) * 1.875)",
-    "4xl": "calc(var(--font-size) * 2.25)",
-    "5xl": "calc(var(--font-size) * 3)",
-    "6xl": "calc(var(--font-size) * 3.75)",
-    "7xl": "calc(var(--font-size) * 4.5)",
-    "8xl": "calc(var(--font-size) * 6)",
-    "9xl": "calc(var(--font-size) * 8)",
+    "3xs": "calc(var(--csv-font-size) * 0.45)",
+    "2xs": "calc(var(--csv-font-size) * 0.625)",
+    xs: "calc(var(--csv-font-size) * 0.75)",
+    sm: "calc(var(--csv-font-size) * 0.875)",
+    md: "calc(var(--csv-font-size) * 1)",
+    lg: "calc(var(--csv-font-size) * 1.125)",
+    xl: "calc(var(--csv-font-size) * 1.25)",
+    "2xl": "calc(var(--csv-font-size) * 1.5)",
+    "3xl": "calc(var(--csv-font-size) * 1.875)",
+    "4xl": "calc(var(--csv-font-size) * 2.25)",
+    "5xl": "calc(var(--csv-font-size) * 3)",
+    "6xl": "calc(var(--csv-font-size) * 3.75)",
+    "7xl": "calc(var(--csv-font-size) * 4.5)",
+    "8xl": "calc(var(--csv-font-size) * 6)",
+    "9xl": "calc(var(--csv-font-size) * 8)",
   },
 };
 
diff --git a/src/importer/settings/theme/colors.ts b/src/importer/settings/theme/colors.ts
index 11fbac77..4361d353 100644
--- a/src/importer/settings/theme/colors.ts
+++ b/src/importer/settings/theme/colors.ts
@@ -1,4 +1,4 @@
 export const colors = {
-  primary: "var(--color-primary)",
-  error: "var(--color-text-error)",
+  primary: "var(--csv-color-primary)",
+  error: "var(--csv-color-text-error)",
 };
diff --git a/src/importer/style/index.scss b/src/importer/style/index.scss
index 855a60bb..241f1763 100644
--- a/src/importer/style/index.scss
+++ b/src/importer/style/index.scss
@@ -5,10 +5,10 @@
 @import "themes/light";
 
 .csv-importer {
-  font-family: var(--font-family-1);
-  background-color: var(--color-background);
-  color: var(--color-text);
-  font-size: var(--font-size);
+  font-family: var(--csv-font-family-1);
+  background-color: var(--csv-color-background);
+  color: var(--csv-color-text);
+  font-size: var(--csv-font-size);
   font-weight: 500;
   line-height: 1.5;
 
diff --git a/src/importer/style/themes/common.scss b/src/importer/style/themes/common.scss
index f21f0582..fb5d83dd 100644
--- a/src/importer/style/themes/common.scss
+++ b/src/importer/style/themes/common.scss
@@ -1,39 +1,39 @@
 :root {
   // BACKGROUND
-  --color-primary: #{$primary-600};
-  --color-primary-hover: #{$primary-700};
-  --color-primary-focus: #{$primary-600};
-  --color-primary-disabled: #{$primary-200};
-  --color-primary-button-disabled: #3f3b55;
+  --csv-color-primary: #{$primary-600};
+  --csv-color-primary-hover: #{$primary-700};
+  --csv-color-primary-focus: #{$primary-600};
+  --csv-color-primary-disabled: #{$primary-200};
+  --csv-color-primary-button-disabled: #3f3b55;
 
-  --color-secondary: #{$gray-800};
-  --color-secondary-hover: #{$gray-600};
-  --color-secondary-focus: #{$gray-800};
-  --color-secondary-disabled: #{$gray-700};
+  --csv-color-secondary: #{$gray-800};
+  --csv-color-secondary-hover: #{$gray-600};
+  --csv-color-secondary-focus: #{$gray-800};
+  --csv-color-secondary-disabled: #{$gray-700};
 
   // TEXT
 
-  --color-text-on-primary: #{$base-white};
-  --color-text-on-primary-disabled: #{$gray-500};
-  --color-text-on-primary-button-disabled: #{$base-white};
+  --csv-color-text-on-primary: #{$base-white};
+  --csv-color-text-on-primary-disabled: #{$gray-500};
+  --csv-color-text-on-primary-button-disabled: #{$base-white};
 
-  --color-text-on-secondary: #{$gray-100};
-  --color-text-on-secondary-disabled: #{$gray-600};
+  --csv-color-text-on-secondary: #{$gray-100};
+  --csv-color-text-on-secondary-disabled: #{$gray-600};
 
-  --color-progress-bar: #{$green-600};
+  --csv-color-progress-bar: #{$green-600};
 
-  --color-success: rgba(18, 183, 106, 0.88);
-  --color-emphasis: #{$blue-light-500};
-  --color-error: rgba(252, 93, 93, 0.88);
-  --color-attention: rgba(248, 203, 44, 0.88);
+  --csv-color-success: rgba(18, 183, 106, 0.88);
+  --csv-color-emphasis: #{$blue-light-500};
+  --csv-color-error: rgba(252, 93, 93, 0.88);
+  --csv-color-attention: rgba(248, 203, 44, 0.88);
 
-  --color-importer-link: #2275d7;
+  --csv-color-importer-link: #2275d7;
 
-  --blue-light-500: #{$blue-light-500}; // Deprecated
-  --color-green-ui: var(--color-progress-bar); // Deprecated
-  --color-green: var(--color-success); // Deprecated
-  --color-blue: #{$blue-light-500}; // Deprecated
-  --color-red: rgba(252, 93, 93, 0.88); // Deprecated
-  --color-yellow: rgba(248, 203, 44, 0.88); // Deprecated
-  --importer-link: var(--color-importer-link); // Deprecated
+  --csv-blue-light-500: #{$blue-light-500}; // Deprecated
+  --csv-color-green-ui: var(--csv-color-progress-bar); // Deprecated
+  --csv-color-green: var(--csv-color-success); // Deprecated
+  --csv-color-blue: #{$blue-light-500}; // Deprecated
+  --csv-color-red: rgba(252, 93, 93, 0.88); // Deprecated
+  --csv-color-yellow: rgba(248, 203, 44, 0.88); // Deprecated
+  --csv-importer-link: var(--csv-color-importer-link); // Deprecated
 }
diff --git a/src/importer/style/themes/dark.scss b/src/importer/style/themes/dark.scss
index e2179ec1..7670011c 100644
--- a/src/importer/style/themes/dark.scss
+++ b/src/importer/style/themes/dark.scss
@@ -3,82 +3,82 @@
 
   // BACKGROUND
 
-  --color-background: #0e1116;
-  --color-background-main: var(--color-background);
-  --color-background-modal: #171a20;
-  --color-background-modal-hover: #2e323c;
-  --color-background-modal-veil: #0e1116;
-  --color-background-modal-shadow: #0e1116;
-  --color-background-modal-shade: #171a20;
-
-  --color-tertiary: #{$gray-900};
-  --color-tertiary-hover: #{$gray-800};
-  --color-tertiary-focus: #{$gray-800};
-  --color-tertiary-disabled: #{$gray-200};
-
-  --color-background-menu: #{$gray-900};
-  --color-background-menu-hover: #{$gray-800};
+  --csv-color-background: #0e1116;
+  --csv-color-background-main: var(--csv-color-background);
+  --csv-color-background-modal: #171a20;
+  --csv-color-background-modal-hover: #2e323c;
+  --csv-color-background-modal-veil: #0e1116;
+  --csv-color-background-modal-shadow: #0e1116;
+  --csv-color-background-modal-shade: #171a20;
+
+  --csv-color-tertiary: #{$gray-900};
+  --csv-color-tertiary-hover: #{$gray-800};
+  --csv-color-tertiary-focus: #{$gray-800};
+  --csv-color-tertiary-disabled: #{$gray-200};
+
+  --csv-color-background-menu: #{$gray-900};
+  --csv-color-background-menu-hover: #{$gray-800};
 
   // TEXT
 
-  --color-text-strong: #{$gray-100};
-  --color-text: #{$gray-300};
-  --color-text-soft: #{$gray-500};
+  --csv-color-text-strong: #{$gray-100};
+  --csv-color-text: #{$gray-300};
+  --csv-color-text-soft: #{$gray-500};
 
-  --color-text-on-tertiary: #{$base-white};
-  --color-text-on-tertiary-disabled: #{$gray-500};
+  --csv-color-text-on-tertiary: #{$base-white};
+  --csv-color-text-on-tertiary-disabled: #{$gray-500};
 
-  --color-error: #{$error-800};
-  --color-text-error: #{$error-500};
-  --color-background-error: #{$error-500};
-  --color-background-error-hover: #{$error-600};
-  --color-background-error-soft: #{$error-200};
+  --csv-color-error: #{$error-800};
+  --csv-color-text-error: #{$error-500};
+  --csv-color-background-error: #{$error-500};
+  --csv-color-background-error-hover: #{$error-600};
+  --csv-color-background-error-soft: #{$error-200};
 
   // INPUT
 
-  --color-input-background: #{$gray-900};
-  --color-input-background-soft: #{$gray-800};
-  --color-input-border: #{$gray-700};
-  --color-input-placeholder: #{$gray-700};
-  --color-input-text-disabled: #{$gray-700};
-  --color-input-disabled: #171a20;
+  --csv-color-input-background: #{$gray-900};
+  --csv-color-input-background-soft: #{$gray-800};
+  --csv-color-input-border: #{$gray-700};
+  --csv-color-input-placeholder: #{$gray-700};
+  --csv-color-input-text-disabled: #{$gray-700};
+  --csv-color-input-disabled: #171a20;
 
-  --color-border: #{$gray-800};
+  --csv-color-border: #{$gray-800};
 
-  --color-background-small-button-selected: #{$gray-700};
-  --color-background-small-button-hover: #{$gray-900};
-  --color-text-small-button: $base-white;
+  --csv-color-background-small-button-selected: #{$gray-700};
+  --csv-color-background-small-button-hover: #{$gray-900};
+  --csv-color-text-small-button: $base-white;
 
   // BUTTON
 
-  --color-button: #{$primary-50};
-  --color-button-hover: #{$primary-100};
-  --color-button-disabled: #{$primary-100};
+  --csv-color-button: #{$primary-50};
+  --csv-color-button-hover: #{$primary-100};
+  --csv-color-button-disabled: #{$primary-100};
 
-  --color-button-text: #171a20;
-  --color-button-text-disabled: lighter(#171a20, 10);
+  --csv-color-button-text: #171a20;
+  --csv-color-button-text-disabled: lighter(#171a20, 10);
 
-  --color-button-border: transparent;
+  --csv-color-button-border: transparent;
 
   // BORDER
 
-  --color-border: #{$gray-700};
-  --color-border-soft: #{$gray-800};
+  --csv-color-border: #{$gray-700};
+  --csv-color-border-soft: #{$gray-800};
 
   // ICONS
 
-  --color-icon: #{$gray-300};
+  --csv-color-icon: #{$gray-300};
 
   // SHADOW
 
-  --color-bisel: rgba(255, 255, 255, 0.05);
+  --csv-color-bisel: rgba(255, 255, 255, 0.05);
 
   // BRAND
 
-  --color-csv-import-text: var(--color-text);
+  --csv-color-csv-import-text: var(--csv-color-text);
 
   // STEPPER
 
-  --color-stepper: #{$gray-cool-800};
-  --color-stepper-active: #{$success-300};
+  --csv-color-stepper: #{$gray-cool-800};
+  --csv-color-stepper-active: #{$success-300};
 }
diff --git a/src/importer/style/themes/light.scss b/src/importer/style/themes/light.scss
index 860bb768..28c2fc0d 100644
--- a/src/importer/style/themes/light.scss
+++ b/src/importer/style/themes/light.scss
@@ -3,82 +3,82 @@
 
   // BACKGROUND
 
-  --color-background: #{$gray-100};
-  --color-background-main: #{$base-white};
-  --color-background-modal: #{$base-white};
-  --color-background-modal-hover: #{$base-white};
-  --color-background-modal-veil: #0e1116;
-  --color-background-modal-shadow: transparent;
-  --color-background-modal-shade: #{$gray-100};
-
-  --color-tertiary: #{$base-white};
-  --color-tertiary-hover: #{$gray-100};
-  --color-tertiary-focus: #{$base-white};
-  --color-tertiary-disabled: #{$gray-200};
-
-  --color-background-menu: #{$base-white};
-  --color-background-menu-hover: #{$gray-100};
+  --csv-color-background: #{$gray-100};
+  --csv-color-background-main: #{$base-white};
+  --csv-color-background-modal: #{$base-white};
+  --csv-color-background-modal-hover: #{$base-white};
+  --csv-color-background-modal-veil: #0e1116;
+  --csv-color-background-modal-shadow: transparent;
+  --csv-color-background-modal-shade: #{$gray-100};
+
+  --csv-color-tertiary: #{$base-white};
+  --csv-color-tertiary-hover: #{$gray-100};
+  --csv-color-tertiary-focus: #{$base-white};
+  --csv-color-tertiary-disabled: #{$gray-200};
+
+  --csv-color-background-menu: #{$base-white};
+  --csv-color-background-menu-hover: #{$gray-100};
 
   // TEXT
 
-  --color-text-strong: #{$gray-900};
-  --color-text: #{$gray-800};
-  --color-text-soft: #{$gray-500};
+  --csv-color-text-strong: #{$gray-900};
+  --csv-color-text: #{$gray-800};
+  --csv-color-text-soft: #{$gray-500};
 
-  --color-text-on-tertiary: #{$gray-700};
-  --color-text-on-tertiary-disabled: #{$gray-500};
+  --csv-color-text-on-tertiary: #{$gray-700};
+  --csv-color-text-on-tertiary-disabled: #{$gray-500};
 
-  --color-error: #{$error-200};
-  --color-text-error: #{$error-500};
-  --color-background-error: #{$error-500};
-  --color-background-error-hover: #{$error-600};
-  --color-background-error-soft: #{$error-200};
+  --csv-color-error: #{$error-200};
+  --csv-color-text-error: #{$error-500};
+  --csv-color-background-error: #{$error-500};
+  --csv-color-background-error-hover: #{$error-600};
+  --csv-color-background-error-soft: #{$error-200};
 
   // INPUT
 
-  --color-input-background: #{$base-white};
-  --color-input-background-soft: #{$gray-300};
-  --color-input-border: #{$gray-700};
-  --color-input-placeholder: #{$gray-700};
-  --color-input-text-disabled: #{$gray-700};
-  --color-input-disabled: #{$gray-50};
+  --csv-color-input-background: #{$base-white};
+  --csv-color-input-background-soft: #{$gray-300};
+  --csv-color-input-border: #{$gray-700};
+  --csv-color-input-placeholder: #{$gray-700};
+  --csv-color-input-text-disabled: #{$gray-700};
+  --csv-color-input-disabled: #{$gray-50};
 
-  --color-border: #{$gray-800};
+  --csv-color-border: #{$gray-800};
 
-  --color-background-small-button-selected: #{$gray-100};
-  --color-background-small-button-hover: #{$gray-50};
-  --color-text-small-button: var(--color-text);
+  --csv-color-background-small-button-selected: #{$gray-100};
+  --csv-color-background-small-button-hover: #{$gray-50};
+  --csv-color-text-small-button: var(--csv-color-text);
 
   // BUTTON (default)
 
-  --color-button: #{$base-white};
-  --color-button-hover: #{$gray-100};
-  --color-button-disabled: #{$gray-25};
+  --csv-color-button: #{$base-white};
+  --csv-color-button-hover: #{$gray-100};
+  --csv-color-button-disabled: #{$gray-25};
 
-  --color-button-text: var(--color-text-soft);
-  --color-button-text-disabled: #{$gray-300};
+  --csv-color-button-text: var(--csv-color-text-soft);
+  --csv-color-button-text-disabled: #{$gray-300};
 
-  --color-button-border: #{$gray-300};
+  --csv-color-button-border: #{$gray-300};
 
   // BORDER
 
-  --color-border: #{$gray-300};
-  --color-border-soft: #{$gray-200};
+  --csv-color-border: #{$gray-300};
+  --csv-color-border-soft: #{$gray-200};
 
   // ICONS
 
-  --color-icon: #{$gray-blue-900};
+  --csv-color-icon: #{$gray-blue-900};
 
   // SHADOW
 
-  --color-bisel: rgba(0, 0, 0, 0.05);
+  --csv-color-bisel: rgba(0, 0, 0, 0.05);
 
   // BRAND
 
-  --color-csv-import-text: #130638;
+  --csv-color-csv-import-text: #130638;
 
   // STEPPER
 
-  --color-stepper: #{$gray-cool-300};
-  --color-stepper-active: #{$success-300};
+  --csv-color-stepper: #{$gray-cool-300};
+  --csv-color-stepper-active: #{$success-300};
 }
diff --git a/src/importer/style/vars.scss b/src/importer/style/vars.scss
index e77a41b3..c5015746 100644
--- a/src/importer/style/vars.scss
+++ b/src/importer/style/vars.scss
@@ -2,54 +2,54 @@
   // DIMENSIONS
 
   // margins and paddings
-  --base-spacing: 24px;
-  --m-xxxxs: calc(var(--base-spacing) / 5);
-  --m-xxxs: calc(var(--base-spacing) / 4);
-  --m-xxs: calc(var(--base-spacing) / 3);
-  --m-xs: calc(var(--base-spacing) / 2);
-  --m-s: calc(var(--base-spacing) * 2 / 3);
-  --m: var(--base-spacing);
-  --m-mm: calc(var(--base-spacing) * 3 / 2);
-  --m-l: calc(var(--base-spacing) * 5 / 3);
-  --m-xl: calc(var(--base-spacing) * 2);
-  --m-xxl: calc(var(--base-spacing) * 5 / 2);
-  --m-xxxl: calc(var(--base-spacing) * 3);
+  --csv-base-spacing: 24px;
+  --csv-m-xxxxs: calc(var(--csv-base-spacing) / 5);
+  --csv-m-xxxs: calc(var(--csv-base-spacing) / 4);
+  --csv-m-xxs: calc(var(--csv-base-spacing) / 3);
+  --csv-m-xs: calc(var(--csv-base-spacing) / 2);
+  --csv-m-s: calc(var(--csv-base-spacing) * 2 / 3);
+  --csv-m: var(--csv-base-spacing);
+  --csv-m-mm: calc(var(--csv-base-spacing) * 3 / 2);
+  --csv-m-l: calc(var(--csv-base-spacing) * 5 / 3);
+  --csv-m-xl: calc(var(--csv-base-spacing) * 2);
+  --csv-m-xxl: calc(var(--csv-base-spacing) * 5 / 2);
+  --csv-m-xxxl: calc(var(--csv-base-spacing) * 3);
 
   // FONTS
 
-  --font-size-xs: calc(var(--font-size) * 16 / 17);
-  --font-size-s: calc(var(--font-size) * 13 / 14);
-  --font-size: 0.875rem;
-  --font-size-l: calc(var(--font-size) * 8 / 7);
-  --font-size-xl: calc(var(--font-size) * 9 / 7);
-  --font-size-xxl: calc(var(--font-size) * 12 / 7);
-  --font-size-xxxl: calc(var(--font-size) * 18 / 7);
-  --font-size-h: calc(var(--font-size) * 24 / 7);
+  --csv-font-size-xs: calc(var(--csv-font-size) * 16 / 17);
+  --csv-font-size-s: calc(var(--csv-font-size) * 13 / 14);
+  --csv-font-size: 0.875rem;
+  --csv-font-size-l: calc(var(--csv-font-size) * 8 / 7);
+  --csv-font-size-xl: calc(var(--csv-font-size) * 9 / 7);
+  --csv-font-size-xxl: calc(var(--csv-font-size) * 12 / 7);
+  --csv-font-size-xxxl: calc(var(--csv-font-size) * 18 / 7);
+  --csv-font-size-h: calc(var(--csv-font-size) * 24 / 7);
 
-  --font-family: "Inter", sans-serif;
-  --font-family-1: var(--font-family);
-  --font-family-2: "Laxan", sans-serif;
+  --csv-font-family: "Inter", sans-serif;
+  --csv-font-family-1: var(--csv-font-family);
+  --csv-font-family-2: "Laxan", sans-serif;
 
   // BORDERS
 
-  --border-radius: 4px;
-  --border-radius-1: var(--border-radius);
-  --border-radius-2: calc(var(--border-radius) * 2);
-  --border-radius-3: calc(var(--border-radius) * 3);
-  --border-radius-4: calc(var(--border-radius) * 4);
-  --border-radius-5: calc(var(--border-radius) * 5);
-  --border-radius-r: 50%;
+  --csv-border-radius: 4px;
+  --csv-border-radius-1: var(--csv-border-radius);
+  --csv-border-radius-2: calc(var(--csv-border-radius) * 2);
+  --csv-border-radius-3: calc(var(--csv-border-radius) * 3);
+  --csv-border-radius-4: calc(var(--csv-border-radius) * 4);
+  --csv-border-radius-5: calc(var(--csv-border-radius) * 5);
+  --csv-border-radius-r: 50%;
 
   // TRANSITIONS
 
-  --fast: 0.3s;
-  --speed: 0.4s;
-  --slow: 0.9s;
-  --ease: ease-out;
-  --transition-ui: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), opacity var(--fast) var(--ease),
-    transform var(--fast) var(--ease), color var(--fast) var(--ease);
+  --csv-fast: 0.3s;
+  --csv-speed: 0.4s;
+  --csv-slow: 0.9s;
+  --csv-ease: ease-out;
+  --csv-transition-ui: background-color var(--csv-fast) var(--csv-ease), border-color var(--csv-fast) var(--csv-ease), opacity var(--csv-fast) var(--csv-ease),
+    transform var(--csv-fast) var(--csv-ease), color var(--csv-fast) var(--csv-ease);
 
   // BLURRED
 
-  --blurred: 5px;
+  --csv-blurred: 5px;
 }