diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index b28a159e6..aad5ed19e 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -6,10 +6,6 @@
 
 @use "sass:color";
 
-// TODO: legacy Sass colors, we should eventually try to remove them in
-//       favor of DS colors.
-$color-gray-20: #b1b2b5;
-
 :root {
   // DARK
   // Dark background
diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss
index 2382eca20..015555225 100644
--- a/frontend/resources/styles/common/refactor/fonts.scss
+++ b/frontend/resources/styles/common/refactor/fonts.scss
@@ -23,3 +23,6 @@ $fs-36: math.div(36, $fs-base) + rem;
 $fw400: 400; // Regular (CSS value: 'normal')
 $fw500: 500; // Medium
 $fw700: 700; // Bold (CSS value: 'bold')
+
+// Line heights
+$lh-150: 1.5;
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index dccaa2ef4..769e9a6d8 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -34,5 +34,6 @@
 // Partials
 //#################################################
 
+// TODO: encapsulate pencil loader into its own component
+//       https: //tree.taiga.io/project/penpot/task/8217
 @import "main/partials/loader";
-@import "main/partials/workspace";
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
deleted file mode 100644
index 3832b7444..000000000
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ /dev/null
@@ -1,311 +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
-
-@import "refactor/common-refactor.scss";
-
-// TODO: legacy sass vars. To be removed in favor of DS tokens.
-$br3: 3px;
-$br4: 4px;
-$lh-150: 1.5;
-
-$width-left-toolbar: 48px;
-
-$width-settings-bar: 256px;
-$width-settings-bar-min: 255px;
-$width-settings-bar-max: 500px;
-
-$height-palette: 79px;
-$height-palette-min: 54px;
-$height-palette-max: 80px;
-
-#workspace {
-  width: 100vw;
-  height: 100%;
-  user-select: none;
-  background-color: var(--color-canvas);
-  display: grid;
-  grid-template-areas:
-    "header header header header"
-    "toolbar left-sidebar viewport right-sidebar"
-    "toolbar left-sidebar color-palette right-sidebar";
-
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: auto auto 1fr auto;
-
-  .workspace-header {
-    grid-area: header;
-    height: 48px;
-  }
-
-  .left-toolbar {
-    grid-area: toolbar;
-    width: $width-left-toolbar;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .settings-bar.settings-bar-left {
-    min-width: $width-settings-bar;
-    max-width: 500px;
-    width: var(--width, $width-settings-bar);
-    grid-area: left-sidebar;
-  }
-
-  .settings-bar.settings-bar-right {
-    height: 100%;
-    width: var(--width, $width-settings-bar);
-    grid-area: right-sidebar;
-
-    &.not-expand {
-      max-width: $width-settings-bar;
-    }
-  }
-
-  .workspace-content {
-    grid-area: viewport;
-  }
-
-  .color-palette {
-    grid-area: color-palette;
-    max-height: $height-palette-max;
-    height: var(--height, $height-palette);
-  }
-}
-
-.workspace-content {
-  background-color: var(--color-canvas);
-  display: flex;
-  padding: 0;
-  margin: 0;
-  grid-area: viewport;
-  &.scrolling {
-    cursor: grab;
-  }
-
-  &.no-tool-bar-right {
-    width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
-    right: 0;
-
-    .coordinates {
-      right: 10px;
-    }
-  }
-
-  &.no-tool-bar-left {
-    width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
-
-    &.no-tool-bar-right {
-      width: 100%;
-    }
-  }
-
-  .coordinates {
-    background-color: var(--db-primary);
-    border-radius: $br3;
-    bottom: 0px;
-    padding-left: 5px;
-    position: fixed;
-    right: calc(#{$width-settings-bar} + 14px);
-    text-align: center;
-    width: 125px;
-    white-space: nowrap;
-    padding-bottom: 2px;
-    transition: bottom 0.5s;
-    z-index: 2;
-
-    &.color-palette-open {
-      bottom: 5rem;
-    }
-
-    span {
-      color: var(--df-primary);
-      font-size: $fs-12;
-      padding-right: 5px;
-    }
-  }
-
-  .cursor-tooltip {
-    background-color: var(--db-secondary-40);
-    border-radius: $br3;
-    color: var(--df-primary);
-    font-size: $fs-12;
-    padding: 3px 8px;
-    transition: none;
-    text-align: center;
-  }
-
-  .workspace-viewport {
-    overflow: hidden;
-    transition: none;
-    display: grid;
-    grid-template-rows: 20px 1fr;
-    grid-template-columns: 20px 1fr;
-    flex: 1;
-  }
-
-  .viewport {
-    cursor: none;
-    grid-column: 1 / span 2;
-    grid-row: 1 / span 2;
-    overflow: hidden;
-    position: relative;
-
-    .viewport-overlays {
-      cursor: initial;
-      overflow: hidden;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      z-index: 10;
-
-      .pixel-overlay {
-        left: 0;
-        pointer-events: initial;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-      }
-    }
-
-    .render-shapes {
-      height: 100%;
-      position: absolute;
-      width: 100%;
-    }
-
-    .frame-thumbnail-wrapper {
-      .fills,
-      .frame-clip-def {
-        opacity: 0;
-      }
-    }
-
-    .viewport-controls {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .page-canvas,
-  .page-layout {
-    overflow: visible;
-  }
-
-  /* Rules */
-
-  .empty-rule-square {
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-  }
-
-  .horizontal-rule {
-    transition: none;
-    pointer-events: none;
-    grid-column: 2 / span 1;
-    grid-row: 1 / span 1;
-    z-index: 13;
-
-    rect {
-      fill: var(--color-canvas);
-    }
-    path {
-      stroke: $color-gray-20;
-    }
-  }
-
-  .vertical-rule {
-    transition: none;
-    pointer-events: none;
-    grid-column: 1 / span 1;
-    grid-row: 2 / span 1;
-    z-index: 13;
-
-    rect {
-      fill: var(--color-canvas);
-    }
-    path {
-      stroke: $color-gray-20;
-    }
-  }
-}
-
-.workspace-frame-label {
-  font-size: $fs-12;
-}
-
-.multiuser-cursor {
-  z-index: 10000;
-  pointer-events: none;
-}
-
-.profile-name {
-  width: fit-content;
-  font-family: worksans;
-  padding: 2px 12px;
-  border-radius: $br4;
-  display: flex;
-  align-items: center;
-  height: 20px;
-  font-size: $fs-12;
-  line-height: $lh-150;
-}
-
-.viewport-actions {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-left: auto;
-  margin-top: 2rem;
-  position: absolute;
-  width: 100%;
-  z-index: 12;
-  pointer-events: none;
-
-  .viewport-actions-container {
-    pointer-events: initial;
-    display: flex;
-    flex-direction: row;
-    background: var(--app-white);
-    border-radius: $br3;
-    padding: 0.5rem;
-    border: 1px solid $color-gray-20;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-
-  .viewport-actions-container {
-    padding-left: 1rem;
-    gap: 12px;
-    color: var(--db-primary);
-    align-items: center;
-    font-size: 12px;
-
-    .btn-primary,
-    .btn-secondary {
-      height: 24px;
-    }
-
-    .viewport-actions-title {
-      margin-right: 2rem;
-    }
-
-    .grid-edit-board-name {
-      font-weight: 600;
-    }
-  }
-
-  .viewport-actions-group {
-    display: flex;
-    flex-direction: row;
-    border-right: 1px solid $color-gray-20;
-  }
-}
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index 6365f0fe9..6e22292f9 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -86,8 +86,9 @@
        [:& palette {:layout layout
                     :on-change-palette-size on-resize-palette}])
 
-     [:section.workspace-content
+     [:section
       {:key (dm/str "workspace-" page-id)
+       :class (stl/css :workspace-content)
        :ref node-ref}
 
       [:section {:class (stl/css :workspace-viewport)}
@@ -203,9 +204,9 @@
        [:& (mf/provider ctx/current-page-id) {:value page-id}
         [:& (mf/provider ctx/components-v2) {:value components-v2?}
          [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
-          [:section#workspace-refactor {:class (stl/css :workspace)
-                                        :style {:background-color background-color
-                                                :touch-action "none"}}
+          [:section {:class (stl/css :workspace)
+                     :style {:background-color background-color
+                             :touch-action "none"}}
            [:& context-menu]
 
            (if ^boolean file-ready?
diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss
index 4badce13d..f190164cf 100644
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -6,13 +6,9 @@
 
 @import "refactor/common-refactor.scss";
 
-:global(:root) {
-  --s-4: 0.25rem;
-  --layer-indentation-size: calc(var(--s-4) * 6);
-}
-
 .workspace {
   @extend .new-scrollbar;
+  --layer-indentation-size: calc($s-4 * 6);
   width: 100vw;
   height: 100vh;
   max-height: 100vh;
@@ -34,6 +30,10 @@
 }
 
 .workspace-content {
+  background-color: var(--color-canvas);
+  display: flex;
+  padding: 0;
+  margin: 0;
   grid-area: viewport;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/coordinates.cljs b/frontend/src/app/main/ui/workspace/coordinates.cljs
index 89717ef20..5ad5dfc57 100644
--- a/frontend/src/app/main/ui/workspace/coordinates.cljs
+++ b/frontend/src/app/main/ui/workspace/coordinates.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.coordinates
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.streams :as ms]
    [app.main.ui.hooks :as hooks]
@@ -13,8 +14,9 @@
 (mf/defc coordinates
   [{:keys [colorpalette?]}]
   (let [coords (hooks/use-rxsub ms/mouse-position)]
-    [:ul.coordinates {:class (when colorpalette? "color-palette-open")}
-     [:span {:alt "x"}
+    [:div {:class (stl/css-case :container-color-palette-open colorpalette?
+                                :container true)}
+     [:span {:alt "x" :class (stl/css :coordinate)}
       (str "X: " (:x coords "-"))]
-     [:span {:alt "y"}
+     [:span {:alt "y" :class (stl/css :coordinate)}
       (str "Y: " (:y coords "-"))]]))
diff --git a/frontend/src/app/main/ui/workspace/coordinates.scss b/frontend/src/app/main/ui/workspace/coordinates.scss
new file mode 100644
index 000000000..f722e1526
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/coordinates.scss
@@ -0,0 +1,33 @@
+// 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
+
+@use "common/refactor/common-refactor.scss" as *;
+
+$width-settings-bar: 256px;
+
+.container {
+  background-color: var(--db-primary);
+  border-radius: $br-4;
+  bottom: 0px;
+  padding: $s-2 $s-8;
+  position: fixed;
+  right: calc(#{$width-settings-bar} + #{$s-24});
+  text-align: center;
+  white-space: nowrap;
+  transition: bottom 0.5s;
+  z-index: 2;
+  display: flex;
+  column-gap: 0.5rem;
+}
+
+.container-color-palette-open {
+  bottom: $s-64;
+}
+
+.coordinate {
+  color: var(--df-primary);
+  font-size: $fs-12;
+}
diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs
index bf3f262ea..d643ecb8d 100644
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -44,7 +44,7 @@
         calculate-padding-left (+ rulers-width (or left-sidebar-size min-left-sidebar-width) left-padding 1)]
 
     #js {"paddingLeft" (dm/str calculate-padding-left "px")
-         "paddingRight" "calc(var(--s-4) * 70)"}))
+         "paddingRight" "280px"}))
 
 (mf/defc palette
   [{:keys [layout on-change-palette-size]}]
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 670bd2c4c..789df3efc 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.colors :as clr]
    [app.common.data :as d]
@@ -276,9 +277,9 @@
     (hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
 
-    [:div.viewport {:style #js {"--zoom" zoom} :data-testid "viewport"}
+    [:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
      [:& top-bar/top-bar {:layout layout}]
-     [:div.viewport-overlays
+     [:div {:class (stl/css :viewport-overlays)}
       ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
       ;; inside a foreign object "dummy" so this awkward behaviour is take into account
       [:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity (when-not (dbg/enabled? :html-text) 0)}}
@@ -308,8 +309,9 @@
                                          :layout layout
                                          :viewport-ref viewport-ref}])]
 
-     [:svg.render-shapes
+     [:svg
       {:id "render"
+       :class (stl/css :render-shapes)
        :xmlns "http://www.w3.org/2000/svg"
        :xmlnsXlink "http://www.w3.org/1999/xlink"
        :xmlns:penpot "https://penpot.app/xmlns"
@@ -359,7 +361,7 @@
        :key (str "viewport" page-id)
        :view-box (utils/format-viewbox vbox)
        :ref on-viewport-ref
-       :class (dm/str @cursor (when drawing-tool " drawing"))
+       :class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
        :style {:touch-action "none"}
        :fill "none"
 
diff --git a/frontend/src/app/main/ui/workspace/viewport.scss b/frontend/src/app/main/ui/workspace/viewport.scss
new file mode 100644
index 000000000..647ce88a4
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/viewport.scss
@@ -0,0 +1,49 @@
+// 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
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.viewport {
+  cursor: none;
+  grid-column: 1 / span 2;
+  grid-row: 1 / span 2;
+  overflow: hidden;
+  position: relative;
+}
+
+.viewport-controls {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.render-shapes {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.viewport-overlays {
+  cursor: initial;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+
+  .pixel-overlay {
+    left: 0;
+    pointer-events: initial;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+}
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
index e5d019464..f2909b239 100644
--- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport.presence
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
    [app.main.refs :as refs]
@@ -40,15 +41,15 @@
                     (dm/str (str/slice fullname 0 12) "...")
                     fullname)]
 
-    [:g.multiuser-cursor {:transform transform}
+    [:g {:class (stl/css :multiuser-cursor) :transform transform}
      [:path {:fill bg-color :d pointer-path}]
      [:g {:transform "translate(17 -10)"}
       [:foreignObject {:x -0.3
                        :y -12.5
                        :width 300
                        :height 120}
-       [:div.profile-name {:style {:background-color bg-color
-                                   :color fg-color}}
+       [:div {:class (stl/css :profile-name)
+              :style {:background-color bg-color :color fg-color}}
         fullname]]]]))
 
 (mf/defc active-cursors
@@ -74,8 +75,3 @@
         :zoom zoom
         :profile (get users (:profile-id session))
         :key (dm/str (:id session))}])))
-
-
-
-
-
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.scss b/frontend/src/app/main/ui/workspace/viewport/presence.scss
new file mode 100644
index 000000000..26e607a99
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.scss
@@ -0,0 +1,18 @@
+@use "refactor/common-refactor.scss" as *;
+
+.profile-name {
+  width: fit-content;
+  font-family: worksans;
+  padding: 2px 12px;
+  border-radius: $br-4;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  font-size: $fs-12;
+  line-height: $lh-150;
+}
+
+.multiuser-cursor {
+  z-index: 10000;
+  pointer-events: none;
+}