diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss
index 38bdda33d..0d31658c3 100644
--- a/src/components/Pills/pills.module.scss
+++ b/src/components/Pills/pills.module.scss
@@ -1,8 +1,3 @@
-@import '../../styles/abstracts/functions';
-@import '../../styles/base/colors';
-@import '../../styles/themes/definitions-light';
-@import '../../styles/themes/default-theme';
-
 .tag-pills {
     --bg: var(--blue-color-20);
     --label: var(--blue-color);
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
deleted file mode 100644
index 89c1076ab..000000000
--- a/src/styles/base/_colors.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-$red100: #0A0202;
-$red90:  #3B1010;
-$red80:  #6C2222; //AAA ✅ (11.11:1) with $grey0 text
-$red70:  #993838; //AAA ✅ (7.05:1) with $grey0 text
-$red60:  #C15151; //AA ✔️️ (4.59:1) with $grey0 text
-$red50:  #E46F6F;
-$red40:  #F48686; //AA ✔️ (6.61:1) with $grey90 text
-$red30:  #FFA3A3; //AAA ✅ (8.47:1) with $grey90 text
-$red20:  #FFC6C6;
-$red10:  #FFEFEF;
-
-$orange100: #0A0700;
-$orange90:  #3B2600;
-$orange80:  #6C4500; //AAA ✅ (8.43:1) with $grey0 text
-$orange70:  #9D6309; //AA ✔️️ (4.97:1) with $grey0 text
-$orange60:  #C97E19; //AA ✔️ (4.98:1) with $grey90 text
-$orange50:  #F29D31; //AAA ✅ (7.41:1) with $grey90 text
-$orange40:  #FFB650; //AAA ✅ (9.26:1) with $grey90 text
-$orange30:  #FFCD78; //AAA ✅ (10.95:1) with $grey90 text
-$orange20:  #FFE3B0;
-$orange10:  #FFF8EB;
-
-$yellow100: #0A0A00;
-$yellow90:  #333100;
-$yellow80:  #5C5500; //AAA ✅ (7.62:1) with $grey0 text
-$yellow70:  #857600; //AA ✔️️ (4.57:1) with $grey0 text
-$yellow60:  #A88F00; //AA ✔️️ (5.07:1) with $grey90 text
-$yellow50:  #D6AD00; //AAA ✅️ (7.56:1) with $grey90 text
-$yellow40:  #F1C40F; // AAA ✅ (9.71:1) with $grey90 text
-$yellow30:  #FFE44E; // AAA ✅ (12.65:1) with $grey90 text
-$yellow20:  #FFF89C;
-$yellow10:  #FFFFEB;
-
-$green100: #030A08;
-$green90:  #0E2E26;
-$green80:  #1B5143; //AAA ✅ (9.11:1) with $grey0 text
-$green70:  #2B715F; //AA ✔️️ (5.78:1) with $grey0 text
-$green60:  #3D8F79;
-$green50:  #51AB93; //AA ✔️ (5.83:1) with $grey90 text
-$green40:  #67C5AC; //AAA ✅ (7.8:1) with $grey90 text
-$green30:  #8CE1CA; //AAA ✅ (10.56:1) with $grey90 text
-$green20:  #B9F4E4;
-$green10:  #F0FEFA;
-
-$blue-green100: #00090A;
-$blue-green90: #00333B;
-$blue-green80: #025966; //AAA ✅ (8:1) with $grey0 text
-$blue-green70: #0B7B8B; //AA ✔️️ (4.97:1) with $grey0 text
-$blue-green60: #1999AC; //AA ✔️ (4.76:1) with $grey90 text
-$blue-green50: #2DB3C7; //AAA ✅ (6.44:1) with $grey90 text
-$blue-green40: #50CEE1; //AAA ✅ (8.65:1) with $grey90 text
-$blue-green30: #7BE4F4; //AAA ✅ (10.95:1) with $grey90 text
-$blue-green20: #B0F3FE;
-$blue-green10: #EBFDFF;
-
-$blue100: #00060A;
-$blue90:  #002A47;
-$blue80:  #054D7B; //AAA ✅ (8.92:1) with $grey0 text
-$blue70:  #146DA6; //AA ✔️️ (5.57:1) with $grey0 text
-$blue60:  #2C8CC9;
-$blue50:  #47A4DF; //AA ✔️ (5.87:1) with $grey90 text
-$blue40:  #68BAEF; //AAA ✅ (7.57:1) with $grey90 text
-$blue30:  #8ED0FA; //AAA ✅ (9.64:1) with $grey90 text
-$blue20:  #BCE4FF;
-$blue10:  #EBF7FF;
-
-$violet100: #060106;
-$violet90:  #350E31;
-$violet80:  #5D2156; //AAA ✅ (11.55:1) with $grey0 text
-$violet70:  #7E3A77; //AAA ✅ (7.61:1) with $grey0 text
-$violet60:  #975590; //AA ✔️️ (5.22:1) with $grey0 text
-$violet50:  #AE72A8;
-$violet40:  #C491BF; //AA ✔️ (6.26:1) with $grey90 text
-$violet30:  #D8B1D4; //AAA ✅ (8.57:1) with $grey90 text
-$violet20:  #EAD3E8;
-$violet10:  #FBF6FB;
-
-$grey100: #05070A;
-$grey90:  #1A212E;
-$grey80:  #343C4C; //AAA ✅ (11.07:1) with $grey0 text
-$grey70:  #4F5666; //AAA ✅ (7.35:1) with $grey0 text
-$grey60:  #69717F; //AA ✔️️ (4.91:1) with $grey0 text
-$grey50:  #858B98; //AA ✔️ (4.72:1) with $grey90 text
-$grey40:  #A1A6B1; //AAA ✅ (6.61:1) with $grey90 text
-$grey30:  #BDC1C9; //AAA ✅ (8.94:1) with $grey90 text
-$grey20:  #D9DCE1;
-$grey10:  #F6F7F8;
-
-$grey0:   #FFFFFF; //$grey0
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
deleted file mode 100644
index 5fe49931e..000000000
--- a/src/styles/components/_buttons.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-.button {
-    background-color: inherit;
-    border: rem(2px) solid $button-color-default-active;
-    display: inline-block;
-    transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
-    white-space: nowrap;
-
-    border-radius: $corner-radius-s;
-
-    &:disabled,
-    &.disabled {
-        opacity: $disabled-alpha-value;
-        cursor: not-allowed;
-    }
-
-    &:focus-visible {
-        box-sizing: border-box;
-        padding: $space-xs $space-s;
-        border-width: rem(4px);
-    }
-
-    &:active {
-        //box-sizing: border-box;
-        //padding: $button-padding-vertical $button-padding-horizontal;
-        //border-width: rem(2px);
-    }
-}
-
-.button-padding-1 {
-    padding: $button-padding-vertical-large $button-padding-horizontal-large;
-}
-.button-padding-1-default,
-.button-padding-1-neutral {
-    padding: $button-padding-vertical-default-large
-        $button-padding-horizontal-default-large;
-}
-
-.button-padding-2 {
-    padding: $button-padding-vertical-medium $button-padding-horizontal-medium;
-}
-.button-padding-2-default,
-.button-padding-2-neutral {
-    padding: $button-padding-vertical-default-medium
-        $button-padding-horizontal-default-medium;
-}
-
-.button-padding-3 {
-    padding: $button-padding-vertical-small $button-padding-horizontal-small;
-}
-.button-padding-3-default,
-.button-padding-3-neutral {
-    padding: $button-padding-vertical-default-small
-        $button-padding-horizontal-default-small;
-}
-
-.menu-padding-1 {
-    padding-right: $button-padding-menu-large;
-}
-.menu-padding-2 {
-    padding-right: $button-padding-menu-medium;
-}
-.menu-padding-3 {
-    padding-right: $button-padding-menu-small;
-}
-
-.button-primary {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-    color: var(--white-color);
-
-    &:hover {
-        background-color: var(--primary-color-40);
-        border-color: var(--primary-color-40);
-    }
-
-    &:active {
-        background-color: var(--primary-color-60);
-        border-color: var(--primary-color-60);
-    }
-
-    &:focus-visible {
-        border-color: var(--primary-color-60);
-    }
-}
-
-.button-secondary {
-    border-color: $button-color-secondary-active;
-    color: $button-color-secondary-active;
-    background-color: $card-background-color;
-
-    &:hover {
-        border-color: $button-color-secondary-hover;
-        background-color: $color-background1-blue;
-    }
-
-    &:active {
-        border-color: $button-color-secondary-pressed;
-        color: $button-color-secondary-pressed;
-    }
-
-    &:focus-visible {
-        border-color: $button-color-secondary-focused-border;
-    }
-}
-
-.button-primary-disruptive {
-    background-color: $button-color-disruptive-active;
-    border-color: $button-color-disruptive-active;
-    color: $button-text__color-disruptive;
-
-    &:hover {
-        background-color: $button-color-disruptive-hover;
-        border-color: $button-color-disruptive-hover;
-    }
-
-    &:active {
-        background-color: $button-color-disruptive-pressed;
-        border-color: $button-color-disruptive-pressed;
-    }
-
-    &:focus-visible {
-        border-color: $button-color-disruptive-focused-border;
-    }
-}
-
-.button-secondary-disruptive {
-    border-color: $button-color-disruptive-active;
-    color: $button-color-disruptive-active;
-    background-color: $card-background-color;
-
-    &:hover {
-        border-color: $button-color-disruptive-active;
-        background-color: $color-background1-red;
-    }
-
-    &:active {
-        border-color: $button-color-disruptive-pressed;
-        color: $button-color-disruptive-pressed;
-    }
-
-    &:focus-visible {
-        border-color: $button-color-disruptive-focused-border;
-    }
-}
-
-.button-default {
-    border-color: $button-color-default-active;
-    color: $button-text__color-default;
-
-    &:hover {
-        background-color: $button-color-default-hover;
-        border-color: $button-color-default-hover;
-    }
-
-    &:active {
-        background-color: $button-color-default-pressed;
-        border-color: $button-color-default-pressed;
-    }
-
-    &:focus-visible {
-        border-color: $button-color-default-focused-border;
-    }
-}
-
-.button-neutral {
-    border-color: $button-color-neutral-active;
-    color: $button-text__color-neutral;
-
-    &:hover {
-        background-color: $button-color-neutral-hover;
-        border-color: $button-color-neutral-hover;
-    }
-
-    &:active {
-        background-color: $button-color-neutral-pressed;
-        border-color: $button-color-neutral-pressed;
-    }
-
-    &:focus-visible {
-        border-color: $button-color-neutral-focused-border;
-    }
-}
diff --git a/src/styles/components/_input-fields.scss b/src/styles/components/_input-fields.scss
deleted file mode 100644
index ace76094a..000000000
--- a/src/styles/components/_input-fields.scss
+++ /dev/null
@@ -1,162 +0,0 @@
-
-input[type=search]::-webkit-search-cancel-button,
-input[type=text]::-webkit-search-cancel-button,
-.with-icon::-webkit-search-cancel-button {
-    position:relative;
-    -webkit-appearance: none;
-    height: 20px;
-    width: 20px;
-    border-radius:10px;
-    //background: red;
-    font-family: Material Design Icons;
-    background-image: none;
-    background-repeat: no-repeat;
-    color: $grey50;
-    font-size: $icon-font-size-material-m;
-    line-height: $text-line-height-2;
-    transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
-    align-items: center;
-    text-align: center;
-}
-
-input[type=text], input[type=search] {
-  min-width: rem(320px);
-  box-sizing: border-box;
-  border: rem(1px) solid $input-field-color-enabled;
-  border-radius: $corner-radius-s;
-  padding: $space-xs;
-  font-family: "Source Sans Pro", sans-serif;
-  color: $color-tertiary-grey;
-  font-size: $text-font-size-3;
-  background-color: $card-background-color;
-  //height: 36px;
-
-  &.with-icon{
-    padding-left: $space-xl;
-    //background-image: url('./../../assets/searchicon.png');
-    //background-position: 10px 10px;
-    //background-repeat: no-repeat;
-  }
-
-  &.pill-shape{
-    border-radius: $corner-radius-xl;
-    padding: $space-xs $space-s
-  }
-
-  &.pill-shape-with-icon{
-    padding: $space-xs $space-s $space-xs $space-xl;
-    border-radius: $corner-radius-xl;
-  }
-
-  &:hover{
-    border-color: $color-tertiary-grey;
-  }
-  &:hover ~ .icon-style{
-    color: $color-tertiary-grey;
-  }
-  &:hover ~ .text-style{
-    color: $text-color-primary;
-  }
-
-  &:active{
-    border-color: $color-primary-grey;
-  }
-  &:active ~ .icon-style{
-    color: $color-primary-grey;
-  }
-  &:active ~ .text-style{
-    color: $text-color-primary;
-  }
-
-  &:focus-within {
-    border: rem(1px) solid $button-color-primary-focused-border;
-  }
-  &:focus ~ .icon-style{
-    color: $color-primary-grey;
-  }
-  &:focus ~ .text-style{
-    color: $text-color-primary;
-  }
-}
-
-.icon-style{
-  font-family: Material Design Icons;
-  font-size: $icon-font-size-material-m;
-  line-height: $text-line-height-2;
-  max-width: 20px;
-  //max-height: 20px;
-  align-items: center;
-  text-align: center;
-  color: $grey50;
-  position: relative;
-  transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
-  //padding: 4px;
-
-  &.right-icon{
-    //order: 2!important;
-    //padding-left: 8px;
-    left: 292px;
-    margin-top: -28px;
-    padding-bottom: 8px;
-  }
-
-  &.left-icon{
-    left: 8px;
-    margin-top: -28px;
-    padding-bottom: 8px;
-  }
-}
-
-.field-label{
-  display: flex;
-  flex-direction: row;
-  padding-bottom: $space-xs;
-
-  .icon-style{
-    font-family: Material Design Icons;
-    font-size: $icon-font-size-material-s;
-    line-height: $text-line-height-2;
-    align-items: center;
-    text-align: center;
-    color: $color-primary-grey;
-
-    &:hover{
-      color: $color-tertiary-grey;
-    }
-  }
-
-  .text-style{
-    font-weight: $text-font-weight-semibold;
-    font-size: $text-font-size-3;
-    line-height: $text-line-height-2;
-    font-family: "Source Sans Pro", sans-serif;
-    color: $text-color-primary;
-  }
-}
-
-.field-support-text{
-  padding-top: $space-xs;
-  display: flex;
-  flex-direction: row;
-
-  .feedback-positive{
-    color: $color-secondary-green;
-  }
-
-  .feedback-warning{
-    color: $color-secondary-yellow;
-  }
-
-  .feedback-negative{
-    color: $color-secondary-red;
-  }
-
-  .instruction{
-    color: $color-primary-grey;
-  }
-
-  .link{
-    color: $color-secondary-blue;
-  }
-
-}
diff --git a/src/styles/components/_tabs.scss b/src/styles/components/_tabs.scss
deleted file mode 100644
index 21f79afee..000000000
--- a/src/styles/components/_tabs.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-.tab-wrap {
-    display: flex;
-
-    &.scrollable {
-        overflow-x: scroll;
-        @include no-scrollbars;
-    }
-
-    .tab {
-        display: flex;
-        padding: $space-s $space-m;
-        color: $color-secondary-grey;
-        background-color: $card-background-color;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        transition: background-color $motion-duration-fast
-            $motion-easing-easeout 0s;
-
-        &:hover,
-        &:focus {
-            transition: all $motion-duration-fast $motion-easing-easeout 0s;
-            color: $color-secondary-blue;
-        }
-
-        &.active {
-            color: $color-secondary-blue;
-            transition: transform $motion-duration-fast $motion-easing-easeout
-                0s;
-        }
-
-        &:disabled {
-            opacity: $disabled-alpha-value;
-            cursor: not-allowed;
-        }
-
-        .tab-indicator {
-            position: absolute;
-            z-index: 1;
-            height: $space-xxxs;
-            bottom: 0;
-            width: calc(100% - #{$space-xl});
-            background: $color-secondary-blue;
-            border-radius: $space-xxs $space-xxs 0 0;
-        }
-
-        .label {
-            font-weight: $text-font-weight-semibold;
-            white-space: nowrap;
-        }
-
-        .icon + .label:not(:empty) {
-            margin-left: $space-xs;
-        }
-    }
-
-    &.small {
-        .tab {
-            padding: $space-l $space-m;
-
-            &.active {
-                background: $color-background1-blue;
-            }
-
-            .tab-indicator {
-                height: $space-xxs;
-            }
-        }
-    }
-
-    &.pill {
-        .tab {
-            padding: $space-xs $space-m;
-            color: $color-secondary-blue;
-            border: $space-xxxs solid $color-secondary-blue;
-            border-right: none;
-
-            &.active {
-                background-color: $color-secondary-blue;
-                color: $card-background-color;
-            }
-
-            &:first-child {
-                border-radius: $space-l-fitted 0 0 $space-l-fitted;
-            }
-
-            &:last-child {
-                border-right: $space-xxxs solid $color-secondary-blue;
-                border-radius: 0 $space-l-fitted $space-l-fitted 0;
-            }
-
-            .tab-indicator {
-                display: none;
-            }
-        }
-    }
-}
diff --git a/src/styles/components/_tags.scss b/src/styles/components/_tags.scss
deleted file mode 100644
index d79b7674c..000000000
--- a/src/styles/components/_tags.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-.tag-pills{
-  padding: $space-xxs $space-s;
-  border-radius: $corner-radius-l;
-  transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
-
-  &.primary-red{
-    background-color: $color-background2-red;
-    color: $color-primary-red;
-
-    &:hover{
-      background-color: $color-background3-red;
-      color: $text-color-primary;
-    }
-  }
-
-  &.primary-orange{
-    background-color: $color-background2-orange;
-    color: $color-primary-orange;
-
-    &:hover{
-      background-color: $color-background3-orange;
-      color: $text-color-primary;
-    }
-  }
-
-  &.primary-yellow{
-    background-color: $color-background2-yellow;
-    color: $color-primary-yellow;
-
-    &:hover{
-      background-color: $color-background3-yellow;
-      color: $text-color-primary;
-    }
-  }
-
-  &.primary-green{
-    background-color: $color-background2-green;
-    color: $color-primary-green;
-
-    &:hover{
-      background-color: $color-background3-green;
-      color: $text-color-primary;
-    }
-  }
-
-  &.primary-blue-green{
-    background-color: $color-background2-blue-green;
-    color: $color-primary-green;
-
-    &:hover{
-      background-color: $color-background3-blue-green;
-      color: $text-color-primary;
-    }
-  }
-
-  &.primary-blue{
-    background-color: $color-background2-blue;
-    color: $color-primary-blue;
-
-    &:hover{
-      background-color: $color-background3-blue;
-      color: $text-color-primary;
-    }
-  }
-
-  &.primary-violet{
-    background-color: $color-background2-violet;
-    color: $color-primary-violet;
-
-    &:hover{
-      background-color: $color-background3-violet;
-      color: $text-color-primary;
-    }
-  }
-
-  &.primary-grey{
-    background-color: $color-background2-grey;
-    color: $color-primary-grey;
-
-    &:hover{
-      background-color: $color-background3-grey;
-      color: $text-color-primary;
-    }
-  }
-
-}
-
-.tag-pills-xs{
-  transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
-
-  &.secondary-red{
-
-    .text-color{
-      color: $color-secondary-red;
-    }
-    .icon-color{
-      color: $color-tertiary-red;
-    }
-
-  }
-
-  &.secondary-orange{
-
-    .text-color{
-      color: $color-secondary-orange;
-    }
-    .icon-color{
-      color: $color-tertiary-orange;
-    }
-
-  }
-
-  &.secondary-yellow{
-
-    .text-color{
-      color: $color-secondary-yellow;
-    }
-    .icon-color{
-      color: $color-tertiary-yellow;
-    }
-
-  }
-
-  &.secondary-green{
-
-    .text-color{
-      color: $color-secondary-green;
-    }
-    .icon-color{
-      color: $color-tertiary-green;
-    }
-
-  }
-
-  &.secondary-blue-green{
-
-    .text-color{
-      color: $color-secondary-blue-green;
-    }
-    .icon-color{
-      color: $color-tertiary-blue-green;
-    }
-
-  }
-
-  &.secondary-blue{
-
-    .text-color{
-      color: $color-secondary-blue;
-    }
-    .icon-color{
-      color: $color-tertiary-blue;
-    }
-
-  }
-
-  &.secondary-violet{
-
-    .text-color{
-      color: $color-secondary-violet;
-    }
-    .icon-color{
-      color: $color-tertiary-violet;
-    }
-
-  }
-
-  &.secondary-grey{
-
-    .text-color{
-      color: $color-secondary-grey;
-    }
-    .icon-color{
-      color: $color-tertiary-grey;
-    }
-
-  }
-
-}
diff --git a/src/styles/components/_tooltips.scss b/src/styles/components/_tooltips.scss
deleted file mode 100644
index 3992b2b06..000000000
--- a/src/styles/components/_tooltips.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.tooltip-target{
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black;
-}
-
-.tooltip-target .tooltip-1{
-  visibility: hidden;
-  position: absolute!important;
-  background-color: $color-primary-grey;
-  color: $button-text__color-primary;
-  max-width: rem(120px);
-  max-height: rem(64px);
-  width: auto !important;
-  height: auto !important;
-  box-shadow: $shadow-object-xs;
-  text-align: center;
-  z-index: $z-index-100;
-  top: calc(100% + 0.25rem);
-
-  left:-1000px;
-  right:-1000px;
-  margin-left: auto;
-  margin-right: auto;
-  opacity: $disabled-zero;
-  padding: $space-xs;
-  border-radius: $corner-radius-s;
-  transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
-
-}
-
-/* Tooltip arrow */
-.tooltip-target .tooltip-1::after {
-  content: " ";
-  position: absolute!important;
-  bottom: 100%; /* At the bottom of the tooltip */
-  left: 50%;
-  margin-left: -$space-xxs;
-  border-width: $space-xxs;
-  border-style: solid;
-  border-color: transparent transparent black transparent;
-  z-index: $z-index-100;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip-target:hover .tooltip-1 {
-  visibility: visible;
-  opacity: 1;
-  }
diff --git a/src/styles/layout/_ds-components.scss b/src/styles/layout/_ds-components.scss
deleted file mode 100644
index 155447387..000000000
--- a/src/styles/layout/_ds-components.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.flexible-margin{
-  margin: auto;
-  max-width: 1440px;
-
-  &.open{
-    max-width: 1800px;
-  }
-}
-
-.container{
-  display: grid;
-  max-width: 1440px;
-  grid-gap: $space-l;
-  margin: 0 $space-m;
-  grid-template-columns: repeat(12, 1fr);
-  grid-auto-rows: minmax( rem(8px), auto);
-  //justify-content: center;
-  padding: rem(40px) $disabled-zero;
-  //background-color: $blue10;
-  //grid-column: 1/13;
-
-    .row-items{
-      display: flex;
-      flex-flow: row wrap;
-      justify-content: flex-start;
-      align-items: flex-start;
-      align-content: flex-start;
-      gap: $space-m;
-      grid-column: 1 / 13;
-    }
-
-    .column-items{
-      display: flex;
-      flex-flow: column wrap;
-      justify-content: flex-start;
-      //align-items: center;
-      gap: $space-l;
-      grid-column: 1 / 13;
-    }
-
-}
-
-.two-column-layout{
-  display: flex;
-  flex-direction: row;
-  gap: $space-xxl;
-  width: 100%;
-  //flex: 0 0 100%;
-  //flex-flow: row wrap;
-  //grid-column: 1 / 7;
-
-  flex-grow: 2;
-  margin: 0;
-}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index dad1e20c2..dabad548f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,8 +1,6 @@
 @import 'abstracts/variables';
 @import 'abstracts/functions';
 
-@import 'base/colors';
-
 @import 'themes/definitions-light';
 @import 'themes/default-theme';
 
diff --git a/src/styles/themes/_definitions-light.scss b/src/styles/themes/_definitions-light.scss
index cf72ada2e..3f0b4222a 100644
--- a/src/styles/themes/_definitions-light.scss
+++ b/src/styles/themes/_definitions-light.scss
@@ -1,3 +1,103 @@
+// BEGIN: VARIABLE COLOR DEFINITIONS
+
+$color-background1-red: var(--red-color-10);
+$color-background1-orange: var(--orange-color-10);
+$color-background1-yellow: var(--yellow-color-10);
+$color-background1-green: var(--green-color-10);
+$color-background1-blue-green: var(--bluegreen-color-10);
+$color-background1-blue: var(--blue-color-10);
+$color-background1-violet: var(--violet-color-10);
+$color-background1-grey: var(--grey-color-10);
+
+$color-background2-red: var(--red-color-20);
+$color-background2-orange: var(--orange-color-20);
+$color-background2-yellow: var(--yellow-color-20);
+$color-background2-green: var(--green-color-20);
+$color-background2-blue-green: var(--bluegreen-color-20);
+$color-background2-blue: var(--blue-color-20);
+$color-background2-violet: var(--violet-color-20);
+$color-background2-grey: var(--grey-color-20);
+
+$color-background3-red: var(--red-color-30);
+$color-background3-orange: var(--orange-color-30);
+$color-background3-yellow: var(--yellow-color-30);
+$color-background3-green: var(--green-color-30);
+$color-background3-blue-green: var(--bluegreen-color-30);
+$color-background3-blue: var(--blue-color-30);
+$color-background3-violet: var(--violet-color-30);
+$color-background3-grey: var(--grey-color-30);
+
+$color-primary-red: var(--red-color-80);
+$color-primary-orange: var(--orange-color-80);
+$color-primary-yellow: var(--yellow-color-80);
+$color-primary-green: var(--green-color-80);
+$color-primary-blue-green: var(--bluegreen-color-80);
+$color-primary-blue: var(--blue-color-80);
+$color-primary-violet: var(--violet-color-80);
+$color-primary-grey: var(--grey-color-80);
+
+$color-secondary-red: var(--red-color-70);
+$color-secondary-orange: var(--orange-color-70);
+$color-secondary-yellow: var(--yellow-color-70);
+$color-secondary-green: var(--green-color-70);
+$color-secondary-blue-green: var(--bluegreen-color-70);
+$color-secondary-blue: var(--blue-color-70);
+$color-secondary-violet: var(--violet-color-70);
+$color-secondary-grey: var(--grey-color-70);
+
+$color-tertiary-red: var(--red-color-60);
+$color-tertiary-orange: var(--orange-color-60);
+$color-tertiary-yellow: var(--yellow-color-60);
+$color-tertiary-green: var(--green-color-60);
+$color-tertiary-blue-green: var(--bluegreen-color-60);
+$color-tertiary-blue: var(--blue-color-60);
+$color-tertiary-violet: var(--violet-color-60);
+$color-tertiary-grey: var(--grey-color-60);
+
+$button-color-primary-active: var(--blue-color-70);
+$button-color-primary-hover: var(--blue-color-60);
+$button-color-primary-pressed: var(--blue-color-80);
+$button-color-primary-focused-border: var(--blue-color-80);
+$button-text__color-primary: var(--text-inverse-color);
+
+$button-color-disruptive-active: var(--disruptive-color-70);
+$button-color-disruptive-hover: var(--disruptive-color-60);
+$button-color-disruptive-pressed: var(--disruptive-color-80);
+$button-color-disruptive-focused-border: var(--disruptive-color-80);
+$button-text__color-disruptive-primary: var(--text-inverse-color);
+$button-text__color-disruptive-secondary: var(--disruptive-color);
+
+$button-color-secondary-active: var(--blue-color-70);
+$button-color-secondary-hover: var(--blue-color-60);
+$button-color-secondary-pressed: var(--blue-color-80);
+$button-color-secondary-focused-border: var(--blue-color-80);
+
+$button-text__color-default: var(--blue-color-70);
+$button-color-default-hover: var(--blue-color-20);
+$button-color-default-pressed: var(--blue-color-10);
+$button-color-default-focused-border: var(--blue-color-80);
+$button-color-default-active: rgba(var(--blue-color-40), 0.01);
+
+$button-text__color-neutral: var(--grey-color-70);
+$button-color-neutral-hover: var(--grey-color-20);
+$button-color-neutral-pressed: var(--grey-color-10);
+$button-color-neutral-focused-border: var(--blue-color-80);
+$button-color-neutral-active: rgba(var(--blue-color-40), 0.01);
+
+$text-color-primary: var(--grey-color-90);
+$text-color-secondary: var(--grey-color-80);
+
+$card-background-color: var(--background-color);
+$background-color-white: var(--background-color);
+
+$input-field-color-enabled: var(--grey-color-40);
+
+$divider-line-color: var(--grey-color-40);
+
+// END: VARIABLE COLOR DEFINITIONS
+
+// BEGIN: CONSTANTS
+
 // Typography Definitions
 
 $text-font-size-1: rem(12px);
@@ -44,99 +144,6 @@ $icon-font-size-material-s: rem(16px);
 $icon-font-size-material-m: rem(20px);
 $icon-font-size-material-l: rem(24px);
 
-// Color Definitions
-
-$color-background1-red: $red10;
-$color-background1-orange: $orange10;
-$color-background1-yellow: $yellow10;
-$color-background1-green: $green10;
-$color-background1-blue-green: $blue-green10;
-$color-background1-blue: $blue10;
-$color-background1-violet: $violet10;
-$color-background1-grey: $grey10;
-
-$color-background2-red: $red20;
-$color-background2-orange: $orange20;
-$color-background2-yellow: $yellow20;
-$color-background2-green: $green20;
-$color-background2-blue-green: $blue-green20;
-$color-background2-blue: $blue20;
-$color-background2-violet: $violet20;
-$color-background2-grey: $grey20;
-
-$color-background3-red: $red30;
-$color-background3-orange: $orange30;
-$color-background3-yellow: $yellow30;
-$color-background3-green: $green30;
-$color-background3-blue-green: $blue-green30;
-$color-background3-blue: $blue30;
-$color-background3-violet: $violet30;
-$color-background3-grey: $grey30;
-
-$color-primary-red: $red80;
-$color-primary-orange: $orange80;
-$color-primary-yellow: $yellow80;
-$color-primary-green: $green80;
-$color-primary-blue-green: $blue-green80;
-$color-primary-blue: $blue80;
-$color-primary-violet: $violet80;
-$color-primary-grey: $grey80;
-
-$color-secondary-red: $red70;
-$color-secondary-orange: $orange70;
-$color-secondary-yellow: $yellow70;
-$color-secondary-green: $green70;
-$color-secondary-blue-green: $blue-green70;
-$color-secondary-blue: $blue70;
-$color-secondary-violet: $violet70;
-$color-secondary-grey: $grey70;
-
-$color-tertiary-red: $red60;
-$color-tertiary-orange: $orange60;
-$color-tertiary-yellow: $yellow60;
-$color-tertiary-green: $green60;
-$color-tertiary-blue-green: $blue-green60;
-$color-tertiary-blue: $blue60;
-$color-tertiary-violet: $violet60;
-$color-tertiary-grey: $grey60;
-
-$button-color-primary-active: $blue70;
-$button-color-primary-hover: $blue60;
-$button-color-primary-pressed: $blue80;
-$button-color-primary-focused-border: $blue80;
-$button-text__color-primary: $grey0;
-
-$button-color-disruptive-active: $red70;
-$button-color-disruptive-hover: $red60;
-$button-color-disruptive-pressed: $red80;
-$button-color-disruptive-focused-border: $red80;
-$button-text__color-disruptive: $grey0;
-
-$button-color-secondary-active: $blue70;
-$button-color-secondary-hover: $blue60;
-$button-color-secondary-pressed: $blue80;
-$button-color-secondary-focused-border: $blue80;
-
-$button-text__color-default: $blue70;
-$button-color-default-hover: $blue20;
-$button-color-default-pressed: $blue10;
-$button-color-default-focused-border: $blue80;
-$button-color-default-active: rgba(104, 186, 239, 0.01);
-
-$button-text__color-neutral: $grey70;
-$button-color-neutral-hover: $grey20;
-$button-color-neutral-pressed: $grey10;
-$button-color-neutral-focused-border: $blue80;
-$button-color-neutral-active: rgba(104, 186, 239, 0.01);
-
-$text-color-primary: $grey90;
-$text-color-secondary: $grey80;
-
-$card-background-color: $grey0;
-$background-color-white: $grey0;
-
-$input-field-color-enabled: $grey40;
-
 // Gradient Definitions
 
 $eightfold-logo-gradient: linear-gradient(
@@ -266,8 +273,6 @@ $z-index-100: 100; //dropdown menu, tooltip, etc
 $z-index-0: 0;
 $z-index-bottom: -100;
 
-//dialog-backdrop
 $all-backdrops: rgba(0, 0, 0, 0.5);
 
-//dividers
-$divider-line-color: $grey40;
+// END: CONSTANTS