diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index 8ca76c9ca..105875aa1 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -248,7 +248,7 @@ h4 {
 }
 
 hr {
-  border-top: solid 1px $color-gray-60;
+  border-top: solid 1px var(--db-primary);
   border-right: 0;
   border-left: 0;
   border-bottom: 0;
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
index 34bd2dccb..f307fd84e 100644
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ b/frontend/resources/styles/common/dependencies/colors.scss
@@ -4,22 +4,6 @@
 //
 // Copyright (c) KALEIDOS INC
 
-// New UI colors
-$db-primary: #18181a;
-$db-secondary: #000000;
-$db-tertiary: #212426;
-$db-quaternary: #2e3434;
-
-$df-primary: #ffffff;
-$df-secondary: #8f9da3;
-
-$da-primary: #7efff5;
-$da-primary-muted: rgba(126, 255, 245, 0.3);
-$da-secondary: #bb97d8;
-$da-tertiary: #00d1b8;
-
-$d-shadow: rgba(0, 0, 0, 0.6);
-
 // Colors
 $color-white: #ffffff;
 $color-black: #000000;
@@ -74,16 +58,3 @@ $color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #
 
 // bg transparent
 $color-dark-bg: rgba(0, 0, 0, 0.4);
-
-// Transform scss variables into css variables to use them onto cljs files
-:root {
-  // Secondary colors;
-
-  --color-info: #{$color-info};
-  --color-canvas: #e8e9ea;
-
-  // Gray scale;
-
-  --color-gray-20: #{$color-gray-20};
-  --color-gray-60: #{$color-gray-60};
-}
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index a90e22dbd..dbc7c7a17 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -49,38 +49,6 @@
   }
 }
 
-.btn-secondary {
-  @extend %btn;
-  background: $color-white;
-  border: 1px solid $color-gray-20;
-  color: $color-black;
-  &:hover {
-    background: $color-primary;
-    border-color: $color-primary;
-    color: $color-black;
-  }
-}
-
-.btn-warning {
-  @extend %btn;
-  background: $color-warning;
-  color: $color-white;
-  &:hover {
-    background: $color-warning-dark;
-    color: $color-white;
-  }
-}
-
-.btn-danger {
-  @extend %btn;
-  background: $color-danger;
-  color: $color-white;
-  &:hover {
-    background: $color-danger-dark;
-    color: $color-white;
-  }
-}
-
 input[type="button"][disabled],
 .btn-disabled {
   background-color: $color-gray-10;
@@ -88,40 +56,6 @@ input[type="button"][disabled],
   pointer-events: none;
 }
 
-// Slider dots
-
-ul.slider-dots {
-  align-items: center;
-  display: flex;
-
-  li {
-    background-color: transparent;
-    border-radius: 50%;
-    border: 2px solid $color-white;
-    cursor: pointer;
-    height: 12px;
-    flex-shrink: 0;
-    margin: 6px;
-    width: 12px;
-
-    &.current,
-    &:hover {
-      background-color: $color-gray-10;
-    }
-  }
-
-  &.dots-purple {
-    li {
-      border-color: $color-complete;
-
-      &.current,
-      &:hover {
-        background-color: $color-complete;
-      }
-    }
-  }
-}
-
 // Doted list
 
 .doted-list {
@@ -146,78 +80,6 @@ ul.slider-dots {
   }
 }
 
-// Tags
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  .tag {
-    background-color: $color-gray-20;
-    border-radius: $br3;
-    color: $color-white;
-    cursor: pointer;
-    font-size: $fs14;
-    font-weight: $fw700;
-    margin: 0 $size-2 $size-2 0;
-    padding: 4px 8px;
-    text-transform: uppercase;
-
-    &:hover {
-      background-color: $color-gray-40;
-    }
-
-    &.tag-primary {
-      background-color: $color-primary;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-primary-dark;
-      }
-    }
-
-    &.tag-green {
-      background-color: $color-success;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-success-dark;
-      }
-    }
-
-    &.tag-purple {
-      background-color: $color-complete;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-complete-dark;
-      }
-    }
-
-    &.tag-orange {
-      background-color: $color-warning;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-warning-dark;
-      }
-    }
-
-    &.tag-red {
-      background-color: $color-danger;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-danger-dark;
-      }
-    }
-  }
-}
-
 // Input elements
 .input-element {
   display: flex;
@@ -340,9 +202,7 @@ ul.slider-dots {
 
 input,
 select {
-  background-color: $color-white;
   box-sizing: border-box;
-  color: $color-gray-60;
   font-family: "worksans", sans-serif;
   font-size: $fs14;
   margin-bottom: $size-4;
@@ -362,319 +222,6 @@ input[type="checkbox"] {
   color: $color-danger;
 }
 
-// Input text
-
-.input-text {
-  border: none;
-  border-bottom: 1px solid transparent;
-  background-color: $color-white;
-  box-shadow: none;
-  outline: none;
-  padding: $size-2 $size-5 $size-2 $size-2;
-  position: relative;
-
-  @include placeholder {
-    transition: all 0.3s ease;
-  }
-
-  &:focus {
-    border-color: $color-gray-40;
-    box-shadow: none;
-
-    @include placeholder {
-      opacity: 0;
-      transform: translateY(-20px);
-      transition: all 0.3s ease;
-    }
-  }
-
-  &.success {
-    background-color: $color-success-lighter;
-    border-color: $color-success;
-    color: $color-success-dark;
-  }
-
-  &.error {
-    background-color: $color-danger-lighter;
-    border-color: $color-danger;
-    color: $color-danger-dark;
-  }
-}
-
-// Element-name
-
-input.element-name {
-  background-color: $color-white;
-  border: 1px solid $color-gray-40;
-  border-radius: $br3;
-  color: $color-gray-60;
-  font-size: $fs12;
-  margin: 0px;
-  padding: 3px;
-  width: 100%;
-}
-
-// Input select
-
-.input-select {
-  @extend .input-text;
-  background-image: url("/images/icons/arrow-down-white.svg");
-  background-repeat: no-repeat;
-  background-position: calc(100% - 4px) 48%;
-  background-size: 10px;
-  cursor: pointer;
-
-  &.small {
-    padding: $size-1 $size-5 $size-1 $size-1;
-  }
-}
-
-// Input radio
-
-.input-radio,
-.input-checkbox {
-  align-items: center;
-  color: $color-gray-40;
-  display: flex;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  padding-left: 0px;
-
-  label {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    margin-right: 15px;
-    font-size: $fs12;
-
-    &:before {
-      content: "";
-      width: 20px;
-      height: 20px;
-      margin-right: 10px;
-      background-color: $color-gray-10;
-      border: 1px solid $color-gray-30;
-      box-shadow: inset 0 0 0 0 $color-primary;
-      box-sizing: border-box;
-      flex-shrink: 0;
-    }
-  }
-
-  &.column {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}
-
-.input-radio {
-  label {
-    margin-bottom: 6px;
-
-    &:before {
-      border-radius: $br99;
-      transition:
-        box-shadow 0.2s linear 0s,
-        color 0.2s linear 0s;
-    }
-  }
-
-  input[type="radio"]:checked {
-    & + label {
-      &:before {
-        box-shadow: inset 0 0 0 5px $color-gray-20;
-      }
-    }
-  }
-
-  input[type="radio"] {
-    display: none;
-  }
-
-  input[type="radio"][disabled] {
-    & + label {
-      opacity: 0.65;
-    }
-  }
-}
-input[type="radio"]:checked + label:before {
-  .input-radio.radio-success & {
-    box-shadow: inset 0 0 0 5px $color-success;
-  }
-
-  .input-radio.radio-primary & {
-    box-shadow: inset 0 0 0 5px $color-primary;
-  }
-
-  .input-radio.radio-info & {
-    box-shadow: inset 0 0 0 5px $color-info;
-  }
-
-  .input-radio.radio-warning & {
-    box-shadow: inset 0 0 0 5px $color-warning;
-  }
-
-  .input-radio.radio-danger & {
-    box-shadow: inset 0 0 0 5px $color-danger;
-  }
-
-  .input-radio.radio-complete & {
-    box-shadow: inset 0 0 0 5px $color-complete;
-  }
-}
-
-// Input checkbox
-
-.input-checkbox {
-  input[type="radio"][disabled] {
-    & + label {
-      &:after {
-        background-color: $color-gray-10;
-      }
-    }
-  }
-
-  label {
-    transition:
-      border 0.2s linear 0s,
-      color 0.2s linear 0s;
-    position: relative;
-
-    &:before {
-      top: 1.4px;
-      border-radius: $br3;
-      transition:
-        border 0.2s linear 0s,
-        color 0.2s linear 0s;
-    }
-
-    &::after {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      position: absolute;
-      left: 3.2px;
-      top: 0;
-      font-size: $fs12;
-      transition:
-        border 0.2s linear 0s,
-        color 0.2s linear 0s;
-    }
-
-    &:after {
-      border-radius: $br3;
-    }
-  }
-
-  input[type="checkbox"] {
-    display: none;
-  }
-
-  &.checkbox-circle {
-    label {
-      &:after {
-        border-radius: $br99;
-      }
-
-      &:before {
-        border-radius: $br99;
-      }
-    }
-  }
-
-  input[type="checkbox"]:checked {
-    & + label {
-      &:before {
-        border-width: 10px;
-      }
-
-      &::after {
-        content: "✓";
-        color: #ffffff;
-        font-size: $fs16;
-      }
-    }
-  }
-
-  input[type="checkbox"][disabled] {
-    & + label {
-      opacity: 0.65;
-
-      &:before {
-        background-color: #eceff3;
-      }
-    }
-  }
-
-  input[type="checkbox"][indeterminate] {
-    & + label {
-      &::after {
-        content: "?";
-        left: 4px;
-      }
-    }
-  }
-
-  &.right {
-    label {
-      margin-right: 35px;
-      padding-left: 0 !important;
-
-      &:before {
-        right: -35px;
-        left: auto;
-      }
-    }
-
-    input[type="checkbox"]:checked {
-      & + label {
-        position: relative;
-
-        &::after {
-          content: "✓";
-          position: absolute;
-          right: -27px;
-          left: auto;
-        }
-      }
-    }
-  }
-}
-
-input[type="checkbox"]:checked + label {
-  .input-checkbox.check-success &:before {
-    border-color: $color-success;
-  }
-
-  .input-checkbox.check-primary &:before {
-    border-color: $color-primary;
-  }
-
-  .input-checkbox.check-complete &:before {
-    border-color: $color-complete;
-  }
-
-  .input-checkbox.check-warning &:before {
-    border-color: $color-warning;
-  }
-
-  .input-checkbox.check-danger &:before {
-    border-color: $color-danger;
-  }
-
-  .input-checkbox.check-info &:before {
-    border-color: $color-info;
-  }
-
-  .input-checkbox.check-success &::after,
-  .input-checkbox.check-primary &::after,
-  .input-checkbox.check-complete &::after,
-  .input-checkbox.check-warning &::after,
-  .input-checkbox.check-danger &::after,
-  .input-checkbox.check-info &::after {
-    color: $color-white;
-  }
-}
-
 // Input slidebar
 
 input[type="range"] {
@@ -805,334 +352,6 @@ input[type="range"]:focus::-ms-fill-upper {
   }
 }
 
-// Tooltip
-
-.tooltip {
-  position: relative;
-
-  &:hover {
-    &::after {
-      background-color: $color-white;
-      border-radius: $br3;
-      color: $color-gray-60;
-      content: attr(alt);
-      font-size: $fs12;
-      font-weight: $fw700;
-      padding: $size-1;
-      position: absolute;
-      left: 130%;
-      text-align: center;
-      top: 0;
-      white-space: nowrap;
-      z-index: 20;
-      @include animation(0.3s, 0.6s, fadeIn);
-    }
-  }
-
-  // the default is the `right`
-  &.tooltip-bottom {
-    &:hover {
-      &::after {
-        left: 0;
-        top: 130%;
-      }
-    }
-  }
-
-  &.tooltip-expand {
-    &:hover {
-      &::after {
-        min-width: 100%;
-      }
-    }
-  }
-
-  &.tooltip-bottom-left {
-    &:hover {
-      &::after {
-        left: unset;
-        right: 0;
-        top: 130%;
-      }
-    }
-  }
-
-  &.tooltip-top {
-    &:hover {
-      &::after {
-        top: -165%;
-        left: -60%;
-      }
-    }
-  }
-
-  &.tooltip-right {
-    &:hover {
-      &::after {
-        top: 15%;
-        left: 120%;
-      }
-    }
-  }
-
-  &.tooltip-left {
-    &:hover {
-      &::after {
-        left: unset;
-        right: 130%;
-        top: 15%;
-      }
-    }
-  }
-
-  &.tooltip-hover {
-    &:hover {
-      &::after {
-        align-items: center;
-        background-color: $color-white;
-        box-sizing: border-box;
-        border-radius: $br0;
-        color: $color-gray-60;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        left: 0;
-        top: 0;
-        white-space: normal;
-        width: 100%;
-      }
-    }
-  }
-}
-
-// Messages
-
-.banner {
-  position: relative;
-
-  &.error {
-    background-color: $color-danger;
-  }
-
-  &.success {
-    background-color: $color-success;
-  }
-
-  &.warning {
-    background-color: $color-warning;
-  }
-
-  &.info {
-    background-color: $color-info;
-  }
-
-  &.hide {
-    @include animation(0, 0.6s, fadeOutUp);
-  }
-
-  .icon {
-    display: flex;
-
-    svg {
-      fill: $color-white;
-      height: 20px;
-      width: 20px;
-    }
-  }
-
-  .content {
-    &.bottom-actions {
-      flex-direction: column;
-
-      .actions {
-        margin-top: $size-4;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
-
-    &.inline-actions {
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-
-      .actions {
-        display: flex;
-        justify-content: flex-start;
-
-        .btn-secondary {
-          margin-left: $size-4;
-        }
-      }
-    }
-
-    .link {
-      background: none;
-      border: none;
-      color: $color-info;
-      display: inline;
-      margin: 0;
-      text-decoration: underline;
-    }
-  }
-
-  .btn-close {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 48px;
-    height: 48px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    opacity: 0.35;
-
-    svg {
-      fill: $color-black;
-      height: 18px;
-      width: 18px;
-      transform: rotate(45deg);
-    }
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  &.fixed {
-    border-radius: $br3;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
-    height: 48px;
-    max-width: 1000px;
-    min-width: 500px;
-    position: fixed;
-    padding-left: 16px;
-    top: 16px;
-    right: 16px;
-    z-index: 40;
-
-    display: flex;
-    align-items: center;
-
-    .wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding-right: 64px;
-
-      .icon {
-        margin-right: $size-4;
-      }
-
-      .content {
-        color: $color-white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: $fs14;
-      }
-    }
-  }
-
-  &.floating,
-  &.inline {
-    min-height: 40px;
-
-    .wrapper {
-      display: flex;
-      align-items: center;
-
-      .icon {
-        padding: $size-2;
-        width: 48px;
-        height: 48px;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .content {
-        color: $color-black;
-        display: flex;
-        font-size: $fs14;
-        padding: $size-2;
-        width: 100%;
-        align-items: center;
-
-        padding: 10px 15px;
-        min-height: 48px;
-      }
-    }
-
-    &.error {
-      .content {
-        background-color: lighten($color-danger, 30%);
-      }
-    }
-
-    &.success {
-      .content {
-        background-color: lighten($color-success, 30%);
-      }
-    }
-
-    &.warning {
-      .content {
-        background-color: lighten($color-warning, 30%);
-      }
-    }
-
-    &.info {
-      .content {
-        background-color: lighten($color-info, 30%);
-      }
-    }
-  }
-
-  &.floating {
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.18);
-    position: absolute;
-    top: 70px;
-    left: 0;
-    right: 0;
-    width: 40rem;
-    margin-left: auto;
-    margin-right: auto;
-    z-index: 20;
-
-    &.error {
-      border: 1px solid $color-danger;
-    }
-
-    &.success {
-      border: 1px solid $color-success;
-    }
-
-    &.warning {
-      border: 1px solid $color-warning;
-    }
-
-    &.info {
-      border: 1px solid $color-info;
-    }
-  }
-
-  &.inline {
-    width: 100%;
-  }
-}
-
-.close-bezier {
-  fill: $color-danger;
-  stroke: $color-danger-dark;
-  stroke-width: 2px;
-  cursor: pointer;
-  &:hover {
-    fill: $color-white;
-  }
-}
-
 .message-inline {
   background-color: $color-info;
   color: $color-info-darker;
@@ -1156,15 +375,3 @@ input[type="range"]:focus::-ms-fill-upper {
   -khtml-user-drag: element;
   -webkit-user-drag: element;
 }
-
-.dnd-over > .element-list-body {
-  border: 1px solid white !important;
-}
-
-.dnd-over-top {
-  border-top: 1px solid white !important;
-}
-
-.dnd-over-bot {
-  border-bottom: 1px solid white !important;
-}
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 088add928..5184e1b9b 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -279,7 +279,7 @@ $height-palette-max: 80px;
   .viewport-actions-container {
     padding-left: 1rem;
     gap: 12px;
-    color: var(--color-gray-60);
+    color: var(--db-primary);
     align-items: center;
     font-size: 12px;
 
diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index 134a01440..4a1823868 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/frontend/src/app/main/ui/components/numeric_input.cljs
@@ -36,7 +36,7 @@
         title       (unchecked-get props "title")
         default     (unchecked-get props "default")
         nillable?   (unchecked-get props "nillable")
-        class       (d/nilv (unchecked-get props "className") "input-text")
+        class       (d/nilv (unchecked-get props "className") "")
 
         min-value   (d/parse-double min-value)
         max-value   (d/parse-double max-value)
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
index a9da0fd7c..615ea9db0 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -40,7 +40,7 @@
                :pattern-units "userSpaceOnUse"}
      [:path {:d "M 1 0 L 0 0 0 1"
              :style {:fill "none"
-                     :stroke (if (dbg/enabled? :pixel-grid) "red" "var(--color-info)")
+                     :stroke (if (dbg/enabled? :pixel-grid) "red" "var(--status-color-info-500)")
                      :stroke-opacity (if (dbg/enabled? :pixel-grid) 1 "0.2")
                      :stroke-width (str (/ 1 zoom))}}]]]
    [:rect {:x (:x vbox)