diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index 105875aa1..a922d6cc7 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -9,8 +9,8 @@
 }
 
 body {
-  background-color: lighten($color-gray-10, 5%);
-  color: $color-gray-20;
+  background-color: var(--db-primary);
+  color: var(--df-primary);
   display: flex;
   flex-direction: column;
   font-family: var(--font-family);
@@ -79,19 +79,10 @@ p {
   font-size: $fs12;
   margin-bottom: 1rem;
   line-height: $lh-133;
-
-  @include bp(baby-bear) {
-    font-size: $fs16;
-    line-height: $lh-143;
-  }
 }
 
 li {
   line-height: $lh-133;
-
-  @include bp(baby-bear) {
-    line-height: $lh-143;
-  }
 }
 
 ul {
@@ -111,31 +102,16 @@ h1 {
   font-weight: $fw500;
   line-height: $lh-115;
 
-  @include bp(baby-bear) {
-    font-size: $fs38;
-    line-height: $lh-125;
-  }
-
   &.supertitle {
     font-size: $fs44;
     font-weight: $fw300;
     line-height: $lh-115;
-
-    @include bp(baby-bear) {
-      font-size: $fs44;
-      line-height: $lh-125;
-    }
   }
 }
 h2 {
   font-size: $fs24;
   font-weight: $fw300;
   line-height: $lh-115;
-
-  @include bp(baby-bear) {
-    font-size: $fs32;
-    line-height: $lh-125;
-  }
 }
 
 h3 {
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
deleted file mode 100644
index f307fd84e..000000000
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-// Colors
-$color-white: #ffffff;
-$color-black: #000000;
-$color-canvas: #e8e9ea;
-$color-dashboard: #f6f6f6;
-
-// Main color
-$color-primary: #31efb8;
-
-// Secondary colors
-$color-success: #49d793;
-$color-complete: #a599c6;
-$color-warning: #fc8802;
-$color-danger: #e65244;
-$color-info: #59b9e2;
-
-// Gray scale
-$color-gray-10: #e3e3e3;
-$color-gray-20: #b1b2b5;
-$color-gray-30: #7b7d85;
-$color-gray-40: #64666a;
-$color-gray-50: #303236;
-$color-gray-60: #1f1f1f;
-
-// Mixing Color variable for creating both light and dark colors
-$mix-percentage-dark: 81%;
-$mix-percentage-darker: 60%;
-$mix-percentage-lighter: 20%;
-
-// Lighter colors
-
-$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
-
-$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
-
-$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
-
-// Darker colors
-$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
-
-$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0
-$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
-
-$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //#28c295;
-$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
-
-$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
-
-$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
-
-$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
-
-// bg transparent
-$color-dark-bg: rgba(0, 0, 0, 0.4);
diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss
deleted file mode 100644
index 005357e6a..000000000
--- a/frontend/resources/styles/common/dependencies/helpers.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-// Padding & Margin sizes
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-3: 0.75rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-// Border radius
-$br0: 0px;
-$br2: 2px;
-$br3: 3px;
-$br4: 4px;
-$br5: 5px;
-$br6: 6px;
-$br7: 7px;
-$br8: 8px;
-$br10: 10px;
-$br12: 12px;
-$br25: 25px;
-$br50: 50px;
-$br99: 99px;
-$br-circle: 50%; // Need to be investigated, before we can use variable
-
-.row-flex {
-  align-items: center;
-  display: flex;
-  margin-bottom: $size-1;
-
-  &.column {
-    flex-direction: column;
-  }
-
-  &.center {
-    justify-content: center;
-  }
-}
-
-.row-grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.column-half {
-  margin-right: $size-2;
-}
-
-// Display
-.hidden {
-  display: none;
-}
-
-.hide {
-  opacity: 0;
-}
-
-.display {
-  opacity: 1 !important;
-}
diff --git a/frontend/resources/styles/common/dependencies/mixin.scss b/frontend/resources/styles/common/dependencies/mixin.scss
index e8ec11d40..73f5cc248 100644
--- a/frontend/resources/styles/common/dependencies/mixin.scss
+++ b/frontend/resources/styles/common/dependencies/mixin.scss
@@ -4,114 +4,6 @@
 //
 // Copyright (c) KALEIDOS INC
 
-/// This mixin allows you  to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
-/// @group Mixins
-/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
-$bp-min-720: "(min-width: 720px)";
-$bp-min-1020: "(min-width: 1020px)";
-$bp-min-1366: "(min-width: 1366px)";
-$bp-max-1366: "(max-width: 1366px)";
-$bp-min-2556: "(min-width: 2556px)";
-
-@mixin bp($point) {
-  @if $point == mobile {
-    @media #{$bp-min-720} {
-      @content;
-    }
-  } @else if $point == tablet {
-    @media #{$bp-min-1020} {
-      @content;
-    }
-  } @else if $point == desktop {
-    @media #{$bp-min-1366} {
-      @content;
-    }
-  }
-}
-
-// Advanced positioning
-// ----------------
-@mixin position(
-  $type,
-  $top: $position-default,
-  $right: $position-default,
-  $bottom: $position-default,
-  $left: $position-default
-) {
-  position: $type;
-  $allowed_types: absolute relative fixed;
-  @if not index($allowed_types, $type) {
-    @warn "Unknown position: #{$type}.";
-  }
-  @each $data in top $top, right $right, bottom $bottom, left $left {
-    #{nth($data, 1)}: nth($data, 2);
-  }
-}
-@mixin absolute(
-  $top: $position-default,
-  $right: $position-default,
-  $bottom: $position-default,
-  $left: $position-default
-) {
-  @include position(absolute, $top, $right, $bottom, $left);
-}
-@mixin relative(
-  $top: $position-default,
-  $right: $position-default,
-  $bottom: $position-default,
-  $left: $position-default
-) {
-  @include position(relative, $top, $right, $bottom, $left);
-}
-@mixin fixed(
-  $top: $position-default,
-  $right: $position-default,
-  $bottom: $position-default,
-  $left: $position-default
-) {
-  @include position(fixed, $top, $right, $bottom, $left);
-}
-
-/// Center an element vertically and horizontally with an absolute position.
-/// @group Mixins
-
-@mixin centerer {
-  @include absolute(50%, null, null, 50%);
-  transform: translate(-50%, -50%);
-}
-
-/// This mixing allow you to add placeholder colors in all available browsers
-/// @group Mixins
-
-@mixin placeholder {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-
-  &:-moz-placeholder {
-    /* Firefox 18- */
-    @content;
-  }
-
-  &::-moz-placeholder {
-    /* Firefox 19+ */
-    @content;
-  }
-
-  &:-ms-input-placeholder {
-    @content;
-  }
-}
-
-/// Allows you to visually
-/// @group Mixins
-
-@mixin hide-text {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-}
-
 @mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
   $filepath: "/fonts/" + $file;
   @font-face {
@@ -146,18 +38,3 @@ $bp-min-2556: "(min-width: 2556px)";
   white-space: nowrap;
   overflow: hidden;
 }
-
-@mixin paragraph-ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  position: relative;
-
-  &::after {
-    background-color: $color-gray-50;
-    bottom: -3px;
-    content: "...";
-    padding-left: 10px;
-    position: absolute;
-    right: 2px;
-  }
-}
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index d21e68c08..a4a02c0fb 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -4,54 +4,17 @@
 //
 // Copyright (c) KALEIDOS INC
 
-// Buttons
+// TODO: These are legacy Sass vars that are now only used in this file.
+//       We should switch them for the new DS tokens.
+$color-gray-40: #64666a;
+$color-gray-60: #1f1f1f;
+$size-4: 1rem;
+$br7: 7px;
+$br25: 25px;
+$br50: 50px;
 
-%btn {
-  appearance: none;
-  align-items: center;
-  border: none;
-  border-radius: $br3;
-  cursor: pointer;
-  display: flex;
-  font-family: "worksans", sans-serif;
-  font-size: $fs12;
-  height: 30px;
-  justify-content: center;
-  min-width: 25px;
-  padding: 0 1rem;
-  transition: all 0.4s;
-  text-decoration: none !important;
-  svg {
-    height: 16px;
-    width: 16px;
-  }
-  &.btn-large {
-    font-size: $fs14;
-    height: 40px;
-    svg {
-      height: 20px;
-      width: 20px;
-    }
-  }
-  &.btn-small {
-    height: 25px;
-  }
-}
-
-.btn-primary {
-  @extend %btn;
-  background: $color-primary;
-  color: $color-black;
-  &:hover,
-  &:focus {
-    background: $color-black;
-    color: $color-primary;
-  }
-}
-
-input[type="button"][disabled],
-.btn-disabled {
-  background-color: $color-gray-10;
+input[type="button"][disabled] {
+  background-color: var(--color-canvas); // TODO: see if we can remove this whole selector
   color: $color-gray-40;
   pointer-events: none;
 }
@@ -75,7 +38,7 @@ input[type="checkbox"] {
 }
 
 .form-errors {
-  color: $color-danger;
+  color: var(--status-color-warning-500);
 }
 
 // Input slidebar
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index da1f0d784..bb2294ca5 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -6,6 +6,11 @@
 
 @use "sass:color";
 
+// TODO: legacy Sass colors, we should eventually try to remove them in
+//       favor of DS colors.
+$color-gray-20: #b1b2b5;
+$color-gray-50: #303236;
+
 :root {
   // DARK
   // Dark background
@@ -13,6 +18,7 @@
   --db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
   --db-secondary: #000000;
   --db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
+  --db-secondary-40: #{color.change(#000000, $alpha: 0.4)};
   --db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
   --db-tertiary: #212426;
   --db-quaternary: #2e3434;
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index e3157d0f2..b28260f4d 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -14,8 +14,7 @@
 // MAIN STYLES
 //#################################################
 
-@import "common/dependencies/colors";
-@import "common/dependencies/helpers";
+@import "common/refactor/color-defs.scss";
 @import "common/dependencies/mixin";
 @import "common/dependencies/fonts";
 @import "common/dependencies/reset";
@@ -23,7 +22,6 @@
 @import "common/dependencies/z-index";
 @import "common/dependencies/highlightjs-theme";
 
-@import "common/refactor/color-defs.scss";
 @import "common/refactor/themes.scss";
 @import "common/refactor/design-tokens.scss";
 
@@ -33,7 +31,6 @@
 
 @import "common/base";
 @import "main/layouts/main-layout";
-@import "main/layouts/not-found";
 
 //#################################################
 // Commons
diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss
index fbe768447..d57c1f74d 100644
--- a/frontend/resources/styles/main/layouts/main-layout.scss
+++ b/frontend/resources/styles/main/layouts/main-layout.scss
@@ -10,25 +10,6 @@
   position: relative;
 }
 
-.dashboard-layout {
-  background-color: $color-white;
-  display: grid;
-  grid-template-rows: 50px 1fr;
-  grid-template-columns: 40px 256px 1fr;
-  height: 100vh;
-
-  .dashboard-sidebar {
-    grid-row: 1 / span 2;
-    grid-column: 1 / span 2;
-    padding: 1rem;
-  }
-
-  .dashboard-content {
-    grid-row: 1 / span 2;
-    padding: 1rem 1rem 0 0;
-  }
-}
-
 .dashboard-content {
   display: flex;
   flex-direction: column;
diff --git a/frontend/resources/styles/main/layouts/not-found.scss b/frontend/resources/styles/main/layouts/not-found.scss
deleted file mode 100644
index d9cda8242..000000000
--- a/frontend/resources/styles/main/layouts/not-found.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.not-found-layout {
-  display: grid;
-
-  grid-template-rows: 120px auto;
-  grid-template-columns: 1fr;
-}
-
-.not-found-header {
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 1;
-
-  display: flex;
-  align-items: center;
-  padding: 32px;
-
-  svg {
-    height: 55px;
-    width: 170px;
-  }
-}
-
-.not-found-content {
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 2;
-  height: 100vh;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .container {
-    max-width: 600px;
-  }
-
-  .image {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-bottom: 2rem;
-
-    svg {
-      height: 220px;
-      width: 220px;
-    }
-  }
-
-  .main-message {
-    color: $color-black;
-    font-size: $fs80;
-    line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => lh-188 (rounded)
-    text-align: center;
-  }
-
-  .desc-message {
-    color: $color-black;
-    font-size: $fs26;
-    font-weight: $fw300;
-    text-align: center;
-  }
-
-  .sign-info {
-    margin-top: 20px;
-    color: $color-black;
-    font-size: $fs16;
-    font-weight: $fw200;
-    text-align: center;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    b {
-      font-weight: $fw400;
-    }
-
-    .btn-primary {
-      margin-top: 15px;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/loader.scss b/frontend/resources/styles/main/partials/loader.scss
index ce2542d2d..14021d07e 100644
--- a/frontend/resources/styles/main/partials/loader.scss
+++ b/frontend/resources/styles/main/partials/loader.scss
@@ -33,7 +33,7 @@ svg#loader-icon {
 
 // btn pencil loader
 svg#loader-pencil {
-  fill: $color-primary-darker;
+  fill: var(--color-accent-tertiary);
   width: 60px;
 }
 
diff --git a/frontend/resources/styles/main/partials/texts.scss b/frontend/resources/styles/main/partials/texts.scss
index ad53796b6..aab38a496 100644
--- a/frontend/resources/styles/main/partials/texts.scss
+++ b/frontend/resources/styles/main/partials/texts.scss
@@ -1,6 +1,6 @@
 .text-editor,
 .rich-text {
-  color: $color-black;
+  color: var(--app-black);
   height: 100%;
   font-family: sourcesanspro;
 
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 5184e1b9b..999856a25 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -4,6 +4,10 @@
 //
 // Copyright (c) KALEIDOS INC
 
+// TODO: legacy sass vars. To be removed in favor of DS tokens
+$br3: 3px;
+$br4: 4px;
+
 $width-left-toolbar: 48px;
 
 $width-settings-bar: 256px;
@@ -18,7 +22,7 @@ $height-palette-max: 80px;
   width: 100vw;
   height: 100%;
   user-select: none;
-  background-color: $color-canvas;
+  background-color: var(--color-canvas);
   display: grid;
   grid-template-areas:
     "header header header header"
@@ -69,7 +73,7 @@ $height-palette-max: 80px;
 }
 
 .workspace-content {
-  background-color: $color-canvas;
+  background-color: var(--color-canvas);
   display: flex;
   padding: 0;
   margin: 0;
@@ -96,7 +100,7 @@ $height-palette-max: 80px;
   }
 
   .coordinates {
-    background-color: $color-dark-bg;
+    background-color: var(--db-primary);
     border-radius: $br3;
     bottom: 0px;
     padding-left: 5px;
@@ -114,16 +118,16 @@ $height-palette-max: 80px;
     }
 
     span {
-      color: $color-white;
+      color: var(--df-primary);
       font-size: $fs12;
       padding-right: 5px;
     }
   }
 
   .cursor-tooltip {
-    background-color: $color-dark-bg;
+    background-color: var(--db-secondary-40);
     border-radius: $br3;
-    color: $color-white;
+    color: var(--df-primary);
     font-size: $fs12;
     padding: 3px 8px;
     transition: none;
@@ -208,7 +212,7 @@ $height-palette-max: 80px;
     z-index: 13;
 
     rect {
-      fill: $color-canvas;
+      fill: var(--color-canvas);
     }
     path {
       stroke: $color-gray-20;
@@ -223,7 +227,7 @@ $height-palette-max: 80px;
     z-index: 13;
 
     rect {
-      fill: $color-canvas;
+      fill: var(--color-canvas);
     }
     path {
       stroke: $color-gray-20;
@@ -264,12 +268,11 @@ $height-palette-max: 80px;
   z-index: 12;
   pointer-events: none;
 
-  .path-actions,
   .viewport-actions-container {
     pointer-events: initial;
     display: flex;
     flex-direction: row;
-    background: white;
+    background: var(--app-white);
     border-radius: $br3;
     padding: 0.5rem;
     border: 1px solid $color-gray-20;
@@ -302,62 +305,4 @@ $height-palette-max: 80px;
     flex-direction: row;
     border-right: 1px solid $color-gray-20;
   }
-
-  .viewport-actions-entry {
-    width: 28px;
-    height: 28px;
-    margin: 0 0.25rem;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: $br3;
-
-    svg {
-      pointer-events: none;
-      width: 20px;
-      height: 20px;
-    }
-
-    &:hover svg {
-      fill: $color-primary;
-    }
-
-    &.is-disabled {
-      cursor: initial;
-      svg {
-        fill: $color-gray-20;
-      }
-    }
-
-    &.is-toggled {
-      background: $color-black;
-
-      svg {
-        fill: $color-primary;
-      }
-    }
-  }
-
-  .viewport-actions-entry-wide {
-    width: 27px;
-    height: 20px;
-
-    svg {
-      width: 27px;
-      height: 20px;
-    }
-  }
-
-  .path-actions > :first-child .viewport-actions-entry {
-    margin-left: 0;
-  }
-
-  .path-actions > :last-child {
-    border: none;
-  }
-
-  .path-actions > :last-child .viewport-actions-entry {
-    margin-right: 0;
-  }
 }
diff --git a/frontend/src/app/main/ui/components/button_link.cljs b/frontend/src/app/main/ui/components/button_link.cljs
index fadfbd347..bac6e8e87 100644
--- a/frontend/src/app/main/ui/components/button_link.cljs
+++ b/frontend/src/app/main/ui/components/button_link.cljs
@@ -5,7 +5,9 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.button-link
+  (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
    [app.util.keyboard :as kbd]
    [rumext.v2 :as mf]))
 
@@ -18,8 +20,8 @@
                        (when (kbd/enter? event)
                          (when (fn? on-click)
                            (on-click event)))))]
-    [:a.btn-primary.btn-large.button-link
-     {:class class
+    [:a
+     {:class (dm/str class " " (stl/css :button))
       :tab-index "0"
       :on-click on-click
       :on-key-down on-key-down}
diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss
new file mode 100644
index 000000000..309685300
--- /dev/null
+++ b/frontend/src/app/main/ui/components/button_link.scss
@@ -0,0 +1,28 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.button {
+  appearance: none;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  font-family: "worksans", sans-serif;
+  justify-content: center;
+  min-width: 25px;
+  padding: 0 1rem;
+  transition: all 0.4s;
+  text-decoration: none !important;
+
+  height: 40px;
+
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+}
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 72f95e4ec..3853c71f7 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -6,6 +6,9 @@
 
 @import "refactor/common-refactor.scss";
 
+// TODO: Legacy sass variables. We should remove them in favor of DS tokens.
+$bp-max-1366: "(max-width: 1366px)";
+
 $thumbnail-default-width: $s-252; // Default width
 $thumbnail-default-height: $s-168; // Default width