diff --git a/frontend/src/app/main/ui/alert.cljs b/frontend/src/app/main/ui/alert.cljs
index f03f963b63..46e825a078 100644
--- a/frontend/src/app/main/ui/alert.cljs
+++ b/frontend/src/app/main/ui/alert.cljs
@@ -10,8 +10,10 @@
    [app.main.data.modal :as modal]
    [app.main.store :as st]
    [app.main.ui.components.link :as lk]
+   [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as k]
@@ -56,22 +58,25 @@
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
-       [:h2 {:class (stl/css :modal-title)} title]
-       [:button {:class (stl/css :modal-close-btn)
-                 :on-click accept-fn} deprecated-icon/close]]
+       [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :modal-title)} title]
+       [:> icon-button* {:icon "close"
+                         :aria-label (tr "labels.close")
+                         :variant "ghost"
+                         :class (stl/css :modal-close-btn)
+                         :on-click accept-fn}]]
 
       [:div {:class (stl/css :modal-content)}
        (when (and (string? message) (not= message ""))
-         [:h3 {:class (stl/css :modal-msg)} message])
+         [:> heading* {:level 3 :typography "body-large" :class (stl/css :modal-msg)} message])
        (when (seq link-message)
-         [:h3 {:class (stl/css :modal-msg)}
+         [:> heading* {:level 3 :typography "body-large" :class (stl/css :modal-msg)}
           [:span (:before link-message)]
           [:> lk/link* {:action (:on-click link-message)
                         :class (stl/css :link)}
            (:text link-message)]
           [:span (:after link-message)]])
        (when (and (string? scd-message) (not= scd-message ""))
-         [:h3 {:class (stl/css :modal-scd-msg)} scd-message])
+         [:> heading* {:level 3 :typography "body-large" :class (stl/css :modal-scd-msg)} scd-message])
 
        (when (string? hint)
          [:> context-notification* {:level :info
@@ -80,10 +85,6 @@
 
       (when-not hide-actions?
         [:div {:class (stl/css :modal-footer)}
-         [:div {:class (stl/css :action-buttons)}
-          [:input {:class (stl/css-case :accept-btn true
-                                        :danger (= accept-style :danger)
-                                        :primary (= accept-style :primary))
-                   :type "button"
-                   :value accept-label
-                   :on-click accept-fn}]]])]]))
+         [:> button* {:variant (if (= accept-style :danger) "destructive" "primary")
+                      :on-click accept-fn}
+          accept-label]])]]))
diff --git a/frontend/src/app/main/ui/alert.scss b/frontend/src/app/main/ui/alert.scss
index 56b57be305..cf4b9e6c37 100644
--- a/frontend/src/app/main/ui/alert.scss
+++ b/frontend/src/app/main/ui/alert.scss
@@ -4,63 +4,63 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as *;
 
 .modal-overlay {
-  @extend %modal-overlay-base;
-
-  &.transparent {
-    background-color: transparent;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-set);
+  background-color: var(--color-overlay-default);
 }
 
 .modal-container {
-  @extend %modal-container-base;
+  position: relative;
+  padding: var(--sp-xxxl);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
+  min-inline-size: px2rem(364);
+  min-block-size: $sz-192;
+  max-inline-size: $sz-512;
+  max-block-size: $sz-512;
 }
 
 .modal-header {
-  margin-bottom: deprecated.$s-24;
+  margin-block-end: var(--sp-xxl);
 }
 
 .modal-title {
-  @include deprecated.headline-medium-typography;
-
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .modal-close-btn {
-  @extend %modal-close-btn-base;
+  position: absolute;
+  inset-block-start: var(--sp-s);
+  inset-inline-end: px2rem(6);
 }
 
 .modal-content {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  margin-bottom: deprecated.$s-24;
+  line-height: 1.5;
+  margin-block-end: var(--sp-xxl);
 }
 
-.action-buttons {
-  @extend %modal-action-btns;
-}
-
-.cancel-button {
-  @extend %modal-cancel-btn;
-}
-
-.accept-btn {
-  @extend %modal-accept-btn;
-
-  &.danger {
-    @extend %modal-danger-btn;
-  }
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .modal-scd-msg,
-.modal-subtitle,
 .modal-msg {
-  @include deprecated.body-large-typography;
-
-  color: var(--modal-text-foreground-color);
   line-height: 1.5;
+  color: var(--color-foreground-secondary);
 }
 
 .link {
diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs
index e52cbff034..790d8b0a3e 100644
--- a/frontend/src/app/main/ui/auth.cljs
+++ b/frontend/src/app/main/ui/auth.cljs
@@ -14,7 +14,8 @@
    [app.main.ui.auth.recovery :refer [recovery-page*]]
    [app.main.ui.auth.recovery-request :refer [recovery-request-page*]]
    [app.main.ui.auth.register :refer [register-page* register-success-page* register-validate-page* terms-register*]]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*] :as raw-svg]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -45,13 +46,14 @@
     [:main {:class (stl/css-case
                     :auth-section true
                     :register is-register)}
-     [:h1 {:class (stl/css :logo-container)}
-      [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} deprecated-icon/logo]]
+     [:> heading* {:level 1 :typography "title-large" :class (stl/css :logo-container)}
+      [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)}
+       [:> raw-svg* {:id raw-svg/penpot-logo
+                     :class (stl/css :logo)}]]]
      [:div {:class (stl/css :login-illustration)}
       [:img {:src "images/registration-illustration.png"}]]
 
      [:section {:class (stl/css :auth-content)}
-
       (case section
         :auth-register
         [:> register-page* {:params params}]
diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
index 11b209ff05..7d593ce4fa 100644
--- a/frontend/src/app/main/ui/auth.scss
+++ b/frontend/src/app/main/ui/auth.scss
@@ -4,53 +4,60 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .auth-section {
-  position: relative;
-  align-items: center;
-  background: var(--panel-background-color);
   display: grid;
-  gap: deprecated.$s-32;
+  align-items: center;
   grid-template-columns: repeat(5, 1fr);
-  height: 100%;
-  padding: deprecated.$s-32;
-  width: 100%;
+  gap: var(--sp-xxxl);
+  position: relative;
+  background: var(--color-background-primary);
+  block-size: 100%;
+  padding: var(--sp-xxxl);
+  inline-size: 100%;
   overflow: auto;
 
   @media (width <= 992px) {
     display: flex;
     justify-content: center;
   }
+}
 
-  &.register {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.auth-section.register {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-    .login-illustration {
-      display: none;
-    }
-  }
+.auth-section.register .login-illustration {
+  display: none;
 }
 
 .logo-container {
-  position: absolute;
-  top: deprecated.$s-20;
-  left: deprecated.$s-20;
   display: flex;
   justify-content: flex-start;
-  width: deprecated.$s-120;
-  height: deprecated.$s-96;
-  margin-block-end: deprecated.$s-52;
+  position: absolute;
+  inset-block-start: var(--sp-xl);
+  inset-inline-start: var(--sp-xl);
+  inline-size: $sz-120;
+  block-size: $sz-96;
+  margin-block-end: px2rem(52);
+}
+
+.logo {
+  inline-size: $sz-120;
+  block-size: $sz-40;
+  fill: var(--color-foreground-primary);
 }
 
 .login-illustration {
   display: flex;
   justify-content: center;
   grid-column: 1 / 4;
-  width: 40vw;
-  height: auto;
+  inline-size: 40vw;
+  block-size: auto;
   justify-self: center;
 
   @media (width <= 992px) {
@@ -59,21 +66,13 @@
 }
 
 .auth-content {
-  grid-column: 4 / 6;
   display: grid;
   grid-template-rows: 1fr auto;
-  gap: deprecated.$s-24;
-  height: fit-content;
-  max-width: deprecated.$s-412;
-  padding-block-end: deprecated.$s-8;
+  grid-column: 4 / 6;
+  gap: var(--sp-xxl);
+  block-size: fit-content;
+  max-inline-size: px2rem(412);
+  padding-block-end: var(--sp-s);
   position: relative;
-  width: 100%;
-}
-
-.logo-btn {
-  svg {
-    width: deprecated.$s-120;
-    height: deprecated.$s-40;
-    fill: var(--main-icon-foreground);
-  }
+  inline-size: 100%;
 }
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
index b5852fb094..951ea442a6 100644
--- a/frontend/src/app/main/ui/auth/common.scss
+++ b/frontend/src/app/main/ui/auth/common.scss
@@ -4,91 +4,120 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as *;
 
 .auth-form-wrapper {
-  width: 100%;
+  inline-size: 100%;
   padding-block-end: 0;
   display: grid;
-  gap: deprecated.$s-12;
+  gap: var(--sp-m);
 
+  // Native <form> inside auth-form-wrapper — no class available
   form {
     display: flex;
     flex-direction: column;
-    gap: deprecated.$s-12;
-    margin-top: deprecated.$s-12;
+    gap: var(--sp-m);
+    margin-block-start: var(--sp-m);
   }
 }
 
 .auth-title-wrapper {
-  width: 100%;
+  inline-size: 100%;
   padding-block-end: 0;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .separator {
-  border-color: var(--modal-separator-background-color);
+  border-color: var(--color-background-quaternary);
   margin: 0;
 }
 
 .auth-title {
-  @include deprecated.big-title-typography;
+  @include use-typography("title-large");
 
-  color: var(--title-foreground-color-hover);
+  line-height: 1.2;
+  color: var(--color-foreground-primary);
 }
 
 .auth-subtitle {
-  @include deprecated.small-title-typography;
+  @include use-typography("title-small");
 
-  color: var(--title-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .auth-tagline {
-  @include deprecated.small-title-typography;
+  @include use-typography("title-small");
 
   margin: 0;
-  color: var(--title-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .form-field {
   --input-width: 100%;
-  --input-height: #{deprecated.$s-40};
+  --input-height: #{$sz-40};
   --input-min-width: 100%;
 }
 
 .buttons-stack {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .login-button,
 .login-ldap-button {
-  @extend %button-primary;
-  @include deprecated.uppercase-title-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-40;
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--color-accent-primary);
+  border: $b-1 solid var(--color-accent-primary);
+  color: var(--color-background-secondary);
+  border-radius: $br-8;
+  min-block-size: $sz-32;
+  block-size: $sz-40;
+  inline-size: 100%;
+
+  &:disabled {
+    background-color: var(--color-background-quaternary);
+    border: 1px solid var(--color-background-quaternary);
+    color: var(--color-foreground-disabled);
+    cursor: unset;
+  }
 }
 
 .go-back {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-12;
+  gap: var(--sp-m);
   padding: 0;
   border-block-start: none;
 }
 
 .go-back-link {
-  @extend %button-secondary;
-  @include deprecated.uppercase-title-typography;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: $br-8;
+  background-color: var(--color-background-tertiary);
+  border: $b-1 solid var(--color-background-tertiary);
+  color: var(--color-foreground-secondary);
 
-  height: deprecated.$s-40;
+  @include use-typography("headline-small");
+
+  block-size: $sz-40;
 }
 
 .links {
   display: grid;
-  gap: deprecated.$s-24;
+  gap: var(--sp-xxl);
 }
 
 .register,
@@ -97,7 +126,7 @@
 .demo-account {
   display: flex;
   justify-content: center;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
   padding: 0;
 }
 
@@ -105,10 +134,10 @@
 .account-text,
 .recovery-text,
 .demo-account-text {
-  @include deprecated.small-title-typography;
+  @include use-typography("title-small");
 
   text-align: right;
-  color: var(--title-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .register-link,
@@ -116,13 +145,13 @@
 .recovery-link,
 .forgot-pass-link,
 .demo-account-link {
-  @include deprecated.small-title-typography;
+  @include use-typography("title-small");
 
   text-align: left;
   background-color: transparent;
   border: none;
   display: inline;
-  color: var(--link-foreground-color);
+  color: var(--color-accent-primary);
 
   &:hover {
     text-decoration: underline;
@@ -137,35 +166,58 @@
 .submit-btn,
 .register-btn,
 .recover-btn {
-  @extend %button-primary;
-  @include deprecated.uppercase-title-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-40;
-  width: 100%;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-accent-primary);
+  border: $b-1 solid var(--color-accent-primary);
+  color: var(--color-background-secondary);
+  border-radius: $br-8;
+  min-block-size: $sz-32;
+  block-size: $sz-40;
+  inline-size: 100%;
+
+  &:disabled {
+    background-color: var(--color-background-quaternary);
+    border: $b-1 solid var(--color-background-quaternary);
+    color: var(--color-foreground-disabled);
+    cursor: unset;
+  }
 }
 
 .login-btn {
-  @include deprecated.small-title-typography;
+  @include use-typography("title-small");
 
   display: flex;
   align-items: center;
-  gap: deprecated.$s-6;
-  width: 100%;
-  border-radius: deprecated.$br-8;
-  background-color: var(--button-secondary-background-color-rest);
-  color: var(--button-foreground-color-focus);
+  gap: px2rem(6);
+  inline-size: 100%;
+  border-radius: $br-8;
+  background-color: var(--color-background-tertiary);
+  color: var(--color-foreground-primary);
 
   span {
-    padding-block-start: deprecated.$s-2;
+    padding-block-start: var(--sp-xxs);
   }
 
   &:hover {
-    color: var(--button-foreground-color-focus);
-    background-color: var(--button-secondary-background-color-hover);
+    color: var(--color-foreground-primary);
+    background-color: var(--color-background-quaternary);
+  }
+
+  &:disabled {
+    background-color: var(--color-background-quaternary);
+    border: 1px solid var(--color-background-quaternary);
+    color: var(--color-foreground-disabled);
+    cursor: unset;
   }
 }
 
 .auth-buttons {
   display: flex;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index 8b87825eed..c23cbf1c53 100644
--- a/frontend/src/app/main/ui/auth/login.cljs
+++ b/frontend/src/app/main/ui/auth/login.cljs
@@ -18,8 +18,8 @@
    [app.main.ui.components.button-link :as bl]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.components.link :as lk]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*] :as raw-icons]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.storage :as s]
@@ -210,6 +210,11 @@
            :class (stl/css :login-ldap-button)
            :on-click on-submit-ldap}])]]]))
 
+(defn raw-icon
+  [id]
+  (mf/html
+   [:> raw-svg* {:id id :class (stl/css :sso-icon)}]))
+
 (mf/defc login-sso-buttons*
   [{:keys [params] :as props}]
   (let [login-with-google (mf/use-fn (mf/deps params) #(login-with-sso "google" params))
@@ -220,25 +225,25 @@
     [:div {:class (stl/css :auth-buttons)}
      (when (contains? cf/flags :login-with-google)
        [:> bl/button-link* {:on-click login-with-google
-                            :icon deprecated-icon/brand-google
+                            :icon (raw-icon raw-icons/brand-google)
                             :label (tr "auth.login-with-google-submit")
                             :class (stl/css :login-btn :btn-google-auth)}])
 
      (when (contains? cf/flags :login-with-github)
        [:> bl/button-link* {:on-click login-with-github
-                            :icon deprecated-icon/brand-github
+                            :icon (raw-icon raw-icons/brand-github)
                             :label (tr "auth.login-with-github-submit")
                             :class (stl/css :login-btn :btn-github-auth)}])
 
      (when (contains? cf/flags :login-with-gitlab)
        [:> bl/button-link* {:on-click login-with-gitlab
-                            :icon deprecated-icon/brand-gitlab
+                            :icon (raw-icon raw-icons/brand-gitlab)
                             :label (tr "auth.login-with-gitlab-submit")
                             :class (stl/css :login-btn :btn-gitlab-auth)}])
 
      (when (contains? cf/flags :login-with-oidc)
        [:> bl/button-link* {:on-click login-with-oidc
-                            :icon deprecated-icon/brand-openid
+                            :icon (raw-icon raw-icons/brand-openid)
                             :label (or (not-empty cf/oidc-name) (tr "auth.login-with-oidc-submit"))
                             :class (stl/css :login-btn :btn-oidc-auth)}])]))
 
diff --git a/frontend/src/app/main/ui/auth/login.scss b/frontend/src/app/main/ui/auth/login.scss
index 136a0cd63a..5aa37946bb 100644
--- a/frontend/src/app/main/ui/auth/login.scss
+++ b/frontend/src/app/main/ui/auth/login.scss
@@ -5,3 +5,9 @@
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
 @use "./common";
+@use "ds/_utils.scss" as *;
+
+.sso-icon {
+  max-inline-size: px2rem(26);
+  max-block-size: px2rem(26);
+}
diff --git a/frontend/src/app/main/ui/auth/recovery.scss b/frontend/src/app/main/ui/auth/recovery.scss
index c524894ffc..4d0d4750bd 100644
--- a/frontend/src/app/main/ui/auth/recovery.scss
+++ b/frontend/src/app/main/ui/auth/recovery.scss
@@ -4,9 +4,8 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "./common";
 
 .submit-btn {
-  margin-top: deprecated.$s-16;
+  margin-block-start: var(--sp-l);
 }
diff --git a/frontend/src/app/main/ui/auth/recovery_request.scss b/frontend/src/app/main/ui/auth/recovery_request.scss
index d372b31df2..2eaf7cd4a7 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.scss
+++ b/frontend/src/app/main/ui/auth/recovery_request.scss
@@ -4,17 +4,19 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as *;
 @use "./common";
 
 .fields-row {
-  margin-bottom: deprecated.$s-8;
+  margin-block-end: var(--sp-s);
 }
 
 .notification-text-email {
-  @include deprecated.med-title-typography;
+  @include use-typography("title-medium");
 
-  font-size: deprecated.$fs-20;
-  color: var(--register-confirmation-color);
-  margin-inline: deprecated.$s-36;
+  line-height: 1.2;
+  color: var(--color-background-success);
+  margin-inline: $sz-36;
 }
diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss
index 8261173e79..d5ff6dc475 100644
--- a/frontend/src/app/main/ui/auth/register.scss
+++ b/frontend/src/app/main/ui/auth/register.scss
@@ -4,92 +4,72 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as *;
 @use "./common";
 
-.accept-terms-and-privacy-wrapper {
-  :global(a) {
-    color: var(--color-foreground-secondary);
-    font-weight: deprecated.$fw700;
-  }
-}
-
 .checkbox-terms-and-privacy,
 .checkbox-newsletter-updates {
   align-items: flex-start;
 }
 
 .register-form {
-  gap: deprecated.$s-24;
+  gap: var(--sp-xxl);
 }
 
 .register-success {
-  gap: deprecated.$s-24;
-
-  .auth-title {
-    @include deprecated.med-title-typography;
-  }
+  gap: var(--sp-xxl);
 }
 
-.notification-icon {
-  fill: var(--main-icon-foreground);
-  display: flex;
-  justify-content: center;
-  margin-bottom: deprecated.$s-32;
+.register-success .auth-title {
+  @include use-typography("title-medium");
 
-  svg {
-    width: deprecated.$s-92;
-    height: deprecated.$s-92;
-  }
+  line-height: 1.2;
 }
 
 .notification-text {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--title-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .notification-text-email {
-  @include deprecated.med-title-typography;
+  @include use-typography("title-medium");
 
-  font-size: deprecated.$fs-20;
-  color: var(--register-confirmation-color);
-  margin-inline: deprecated.$s-36;
+  line-height: 1.2;
+  color: var(--color-background-success);
+  margin-inline: $sz-36;
 }
 
 .logo-btn {
-  height: deprecated.$s-40;
-
-  svg {
-    width: deprecated.$s-120;
-    height: deprecated.$s-40;
-    fill: var(--main-icon-foreground);
-  }
+  block-size: $sz-40;
 }
 
 .logo-container {
   display: flex;
   justify-content: flex-start;
-  width: deprecated.$s-120;
-  margin-block-end: deprecated.$s-24;
+  inline-size: $sz-120;
+  margin-block-end: var(--sp-xxl);
 }
 
 .terms-register {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   display: flex;
-  gap: deprecated.$s-4;
+  gap: var(--sp-xs);
   justify-content: center;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .and-text {
-  border-bottom: deprecated.$s-1 solid transparent;
-  color: var(--title-foreground-color);
+  border-block-end: $b-1 solid transparent;
+  color: var(--color-foreground-secondary);
 }
 
 .auth-link {
-  color: var(--link-foreground-color);
+  color: var(--color-accent-primary);
 
   &:hover {
     text-decoration: underline;
diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs
index bf49f7acc0..4a7032b62c 100644
--- a/frontend/src/app/main/ui/comments.cljs
+++ b/frontend/src/app/main/ui/comments.cljs
@@ -23,9 +23,9 @@
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.checkbox :refer [checkbox*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as h]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -925,11 +925,9 @@
       (tr "labels.comment") " " [:span {:class (stl/css :grayed-text)} "#" (:seqn thread)]]
      [:div {:class (stl/css :floating-thread-header-right)}
       (when (some? thread)
-        [:div {:class (stl/css :checkbox-wrapper)
-               :title (tr "labels.comment.mark-as-solved")
-               :on-click toggle-resolved}
-         [:span {:class (stl/css-case :checkbox true
-                                      :global/checked (:is-resolved thread))} deprecated-icon/tick]])
+        [:> checkbox* {:class (stl/css :checkbox-wrapper)
+                       :checked (:is-resolved thread)
+                       :on-change toggle-resolved}])
       (when (= (:id profile) (:id owner))
         [:> icon-button* {:variant "ghost"
                           :aria-label (tr "labels.options")
diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss
index fc47433711..a54ad7d48e 100644
--- a/frontend/src/app/main/ui/comments.scss
+++ b/frontend/src/app/main/ui/comments.scss
@@ -4,8 +4,11 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
 @use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as *;
+@use "ds/mixins.scss" as *;
 
 .cursor-grabbing {
   cursor: grabbing;
@@ -20,20 +23,20 @@
 }
 
 .grayed-text {
-  color: var(--comment-subtitle-color);
+  color: var(--color-foreground-secondary);
 }
 
 .error-text {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   color: var(--color-foreground-error);
 }
 
 .location {
-  color: var(--comment-subtitle-color);
+  color: var(--color-foreground-secondary);
   display: flex;
   align-items: center;
-  gap: deprecated.$s-6;
+  gap: px2rem(6);
 }
 
 .location-icon {
@@ -41,15 +44,15 @@
 }
 
 .location-text {
-  @include deprecated.text-ellipsis;
+  @include text-ellipsis;
 }
 
 .author {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   display: flex;
   align-items: center;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .author-identity {
@@ -57,64 +60,64 @@
 }
 
 .author-fullname {
-  @include deprecated.text-ellipsis;
+  @include text-ellipsis;
 
-  color: var(--comment-title-color);
+  color: var(--color-foreground-primary);
 }
 
 .author-timeago {
-  @include deprecated.text-ellipsis;
+  @include text-ellipsis;
 
-  color: var(--comment-subtitle-color);
+  color: var(--color-foreground-secondary);
 }
 
 .avatar {
   position: relative;
-  height: deprecated.$s-24;
-  width: deprecated.$s-24;
-  border-radius: deprecated.$br-circle;
+  block-size: $sz-24;
+  inline-size: $sz-24;
+  border-radius: $br-circle;
 }
 
 .avatar-lg {
-  height: deprecated.$s-32;
-  width: deprecated.$s-32;
+  block-size: $sz-32;
+  inline-size: $sz-32;
 }
 
 .avatar-read {
-  border: deprecated.$s-2 solid var(--color-background-tertiary);
+  border: $b-2 solid var(--color-background-tertiary);
 }
 
 .avatar-unread {
-  border: deprecated.$s-2 solid var(--color-accent-primary);
+  border: $b-2 solid var(--color-accent-primary);
 }
 
 .avatar-solved {
-  border: deprecated.$s-2 solid var(--color-background-tertiary);
+  border: $b-2 solid var(--color-background-tertiary);
 }
 
 .avatar-image {
-  border-radius: deprecated.$br-circle;
+  border-radius: $br-circle;
 }
 
 .avatar-text {
-  border-radius: deprecated.$br-circle;
-  height: 100%;
-  width: 100%;
+  border-radius: $br-circle;
+  block-size: 100%;
+  inline-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: deprecated.$fs-12;
+  font-size: 0.75rem;
   background-color: var(--color-background-quaternary);
-  color: var(--color-foreground-quaternary);
+  color: var(--color-foreground-primary);
 }
 
 .avatar-mask {
-  border-radius: deprecated.$br-circle;
+  border-radius: $br-circle;
   position: absolute;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
+  block-size: 100%;
+  inline-size: 100%;
+  inset-inline-start: 0;
+  inset-block-start: 0;
 }
 
 .avatar-darken {
@@ -122,18 +125,18 @@
 }
 
 .cover {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
-  padding: deprecated.$s-20;
-  border-bottom: deprecated.$s-1 solid var(--color-background-quaternary);
+  gap: var(--sp-s);
+  padding: var(--sp-xl);
+  border-block-end: $b-1 solid var(--color-background-quaternary);
 }
 
 .item {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   color: var(--color-foreground-primary);
   overflow-wrap: break-word;
@@ -142,10 +145,10 @@
 }
 
 .replies {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   display: flex;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .replies-total {
@@ -157,26 +160,24 @@
 }
 
 .floating-preview-wrapper {
-  z-index: deprecated.$z-index-1;
+  z-index: 1;
   position: absolute;
   user-select: none;
   cursor: pointer;
   pointer-events: auto;
-  transform: translate(calc(-1 * deprecated.$s-16), calc(-1 * deprecated.$s-16));
+  transform: translate(calc(-1 * var(--sp-l)), calc(-1 * var(--sp-l)));
 }
 
 .floating-preview-bubble {
   z-index: initial;
 }
 
-// Sole pointer target of a floating bubble.
 .floating-preview-avatar {
   display: flex;
-  height: $sz-32;
-  width: $sz-32;
+  block-size: $sz-32;
+  inline-size: $sz-32;
 }
 
-// Expanded-cluster bubble: sits above regular bubbles and fans out on appearance.
 .floating-preview-expanded {
   z-index: 2;
   animation: comment-bubble-fan-out 0.18s ease-out;
@@ -194,22 +195,20 @@
   }
 }
 
-// Hovered bubble's preview card floats above every other bubble.
 .floating-preview-hovered {
   z-index: 10;
 }
 
-// Placeholder shown at the cluster center while its bubbles are fanned out.
 .floating-preview-ghost {
   z-index: 1;
   opacity: 0.6;
   pointer-events: none;
   animation: comment-ghost-appear 0.18s ease-out;
+}
 
-  .avatar {
-    border-style: dashed;
-    background-color: var(--comment-modal-background-color);
-  }
+.floating-preview-ghost .avatar {
+  border-style: dashed;
+  background-color: var(--color-background-primary);
 }
 
 @keyframes comment-ghost-appear {
@@ -222,10 +221,9 @@
   }
 }
 
-// Anchored to the wrapper origin and click-through, so hover stays bound to the avatar.
 .floating-thread-wrapper.floating-preview-hover-card {
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   pointer-events: none;
 }
 
@@ -233,14 +231,14 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-12;
-  width: deprecated.$s-284;
-  padding: deprecated.$s-8 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12;
+  gap: var(--sp-m);
+  inline-size: px2rem(284);
+  padding: var(--sp-s) var(--sp-m);
   pointer-events: auto;
-  border-radius: deprecated.$br-8;
-  border: deprecated.$s-2 solid var(--modal-border-color);
-  background-color: var(--comment-modal-background-color);
-  max-height: var(--comment-height);
+  border-radius: $br-8;
+  border: $b-2 solid var(--color-background-quaternary);
+  background-color: var(--color-background-primary);
+  max-block-size: var(--comment-height);
 
   --translate-x: 0%;
   --translate-y: 0%;
@@ -257,22 +255,22 @@
 }
 
 .floating-preview-displacement {
-  margin-left: calc(-1 * (deprecated.$s-12 + deprecated.$s-2));
-  margin-top: calc(-1 * (deprecated.$s-8 + deprecated.$s-2));
+  margin-inline-start: calc(-1 * (var(--sp-m) + $b-2));
+  margin-block-start: calc(-1 * (var(--sp-s) + $b-2));
 }
 
 .floating-thread-wrapper {
   position: absolute;
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-12;
-  width: deprecated.$s-284;
-  padding: deprecated.$s-8 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12;
+  gap: var(--sp-m);
+  inline-size: px2rem(284);
+  padding: var(--sp-s) var(--sp-m);
   pointer-events: auto;
-  border-radius: deprecated.$br-8;
-  border: deprecated.$s-2 solid var(--modal-border-color);
-  background-color: var(--comment-modal-background-color);
-  max-height: var(--comment-height);
+  border-radius: $br-8;
+  border: $b-2 solid var(--color-background-quaternary);
+  background-color: var(--color-background-primary);
+  max-block-size: var(--comment-height);
 
   --translate-x: 0%;
   --translate-y: 0%;
@@ -293,11 +291,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: deprecated.$s-32;
+  block-size: $sz-32;
 }
 
 .floating-thread-header-left {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
   color: var(--color-foreground-primary);
 }
@@ -310,9 +308,9 @@
 .floating-thread-main {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
+  gap: var(--sp-l);
   overflow-y: auto;
-  padding-bottom: deprecated.$s-16;
+  padding-block-end: var(--sp-l);
 }
 
 .floating-thread-item-wrapper {
@@ -320,76 +318,115 @@
 }
 
 .floating-thread-item {
+  @include use-typography("body-small");
+
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
-
-  @include deprecated.body-small-typography;
+  gap: var(--sp-s);
 }
 
-.checkbox-wrapper {
-  @include deprecated.flex-center;
-
-  width: deprecated.$s-16;
-  height: deprecated.$s-24;
-  margin-right: deprecated.$s-8;
-}
-
-.checkbox {
-  @extend %checkbox-icon;
-}
+// .checkbox-wrapper {
+//   margin-inline-end: var(--sp-s);
+// }
 
 .dropdown-menu {
-  @extend %dropdown-wrapper;
-
   position: absolute;
-  width: fit-content;
-  max-width: deprecated.$s-200;
-  right: deprecated.$s-32;
-  top: 0;
-  left: unset;
+  max-block-size: var(--menu-max-height, px2rem(300));
+  padding: $b-2;
+  margin: 0;
+  margin-block-start: $b-1;
+  border-radius: $br-8;
+  z-index: var(--z-index-dropdown);
+  overflow: hidden auto;
+  background-color: var(--menu-background-color);
+  color: var(--menu-foreground-color);
+  border: $b-2 solid var(--color-background-quaternary);
+  box-shadow: 0 0 var(--sp-m) 0 var(--color-shadow-dark);
+  max-inline-size: $sz-200;
+  inset-inline-end: var(--sp-xxxl);
+  inset-block-start: 0;
+  inline-size: fit-content;
+  inset-inline-start: unset;
 }
 
 .dropdown-menu-option {
-  @extend %dropdown-element-base;
+  @include use-typography("body-small");
+
+  display: flex;
+  align-items: center;
+  gap: var(--sp-s);
+  block-size: $sz-32;
+  padding: 0 var(--sp-s);
+  border-radius: $br-6;
+  cursor: pointer;
+  color: var(--menu-foreground-color-rest);
+
+  span {
+    justify-content: center;
+    align-items: center;
+    display: block;
+    max-inline-size: 99%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    svg {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      block-size: $sz-12;
+      inline-size: $sz-12;
+      stroke-width: 1.33px;
+      stroke: var(--icon-foreground);
+    }
+  }
+
+  &:hover {
+    background-color: var(--menu-background-color-hover);
+    color: var(--menu-foreground-color);
+
+    svg {
+      stroke: var(--menu-foreground-color-hover);
+    }
+  }
 }
 
 .form {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
-  max-height: calc(var(--comment-height) - deprecated.$s-132);
+  gap: var(--sp-s);
+  max-block-size: calc(var(--comment-height) - px2rem(132));
 }
 
 .form-buttons-wrapper {
   display: grid;
   grid-template-columns: 1fr auto auto;
   justify-content: flex-end;
-  gap: deprecated.$s-8;
-  margin-top: deprecated.$s-8;
+  gap: var(--sp-s);
+  margin-block-start: var(--sp-s);
 }
 
 .open-mentions-button {
   color: var(--color-foreground-secondary);
+}
 
-  &.is-toggled {
-    color: var(--color-accent-primary);
-  }
+.open-mentions-button.is-toggled {
+  color: var(--color-accent-primary);
 }
 
 .comments-mentions-choice {
   background: var(--color-background-tertiary);
-  border-radius: deprecated.$s-8;
+  border-radius: $br-8;
   border: none;
   display: flex;
   flex-direction: column;
-  left: calc(-1 * deprecated.$s-2);
-  margin-top: deprecated.$s-8;
+  inset-inline-start: calc(-1 * $b-2);
+  margin-block-start: var(--sp-s);
   overflow: hidden;
-  padding: deprecated.$s-2;
+  padding: $b-2;
   position: absolute;
-  top: 100%;
-  width: calc(100% + deprecated.$s-4);
+  inset-block-start: 100%;
+  inline-size: calc(100% + var(--sp-xs));
 }
 
 .comments-mentions-entry {
@@ -398,58 +435,58 @@
   grid-template-areas:
     "avatar name"
     "avatar email";
-  grid-template-columns: deprecated.$s-32 1fr;
-  column-gap: deprecated.$s-8;
-  margin: deprecated.$s-4 deprecated.$s-8;
-  padding: 0 deprecated.$s-4;
-  border-radius: deprecated.$br-8;
-  border: deprecated.$s-1 solid transparent;
+  grid-template-columns: $sz-32 1fr;
+  column-gap: var(--sp-s);
+  margin: var(--sp-xs) var(--sp-s);
+  padding: 0 var(--sp-xs);
+  border-radius: $br-8;
+  border: $b-1 solid transparent;
 
   &:hover {
     background: var(--color-background-quaternary);
   }
+}
 
-  .comments-mentions-avatar {
-    grid-area: avatar;
-    border-radius: 50%;
-  }
+.comments-mentions-entry .comments-mentions-avatar {
+  grid-area: avatar;
+  border-radius: 50%;
+}
 
-  .comments-mentions-name {
-    grid-area: name;
-    font-size: deprecated.$fs-12;
-    color: var(--color-foreground-primary);
-  }
+.comments-mentions-entry .comments-mentions-name {
+  grid-area: name;
+  font-size: 0.75rem;
+  color: var(--color-foreground-primary);
+}
 
-  .comments-mentions-email {
-    grid-area: email;
-    font-size: deprecated.$fs-12;
-    color: var(--color-foreground-secondary);
-  }
+.comments-mentions-entry .comments-mentions-email {
+  grid-area: email;
+  font-size: 0.75rem;
+  color: var(--color-foreground-secondary);
+}
 
-  &.is-selected {
-    border: 1px solid var(--color-accent-primary-muted);
-    background: var(--color-background-quaternary);
-  }
+.comments-mentions-entry.is-selected {
+  border: 1px solid var(--color-accent-primary-muted);
+  background: var(--color-background-quaternary);
 }
 
 .comment-input {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
-  background: var(--input-background-color);
-  border-radius: deprecated.$br-8;
-  border: deprecated.$s-1 solid var(--input-border-color);
-  color: var(--input-foreground-color);
-  height: deprecated.$s-36;
-  max-width: deprecated.$s-260;
+  background: var(--color-background-tertiary);
+  border-radius: $br-8;
+  border: $b-1 solid var(--color-background-tertiary);
+  color: var(--color-foreground-secondary);
+  block-size: $sz-36;
+  max-inline-size: px2rem(260);
   overflow-y: auto;
-  padding: deprecated.$s-8;
+  padding: var(--sp-s);
   resize: vertical;
-  width: 100%;
+  inline-size: 100%;
   white-space: pre-wrap;
   overflow-wrap: break-word;
 
   &:focus {
-    border: deprecated.$s-1 solid var(--input-border-color-active);
+    border: $b-1 solid var(--color-accent-primary);
     outline: none;
   }
 
@@ -477,7 +514,7 @@
 }
 
 .comments-mentions-empty {
-  font-size: deprecated.$fs-12;
+  font-size: 0.75rem;
   color: var(--color-foreground-secondary);
-  padding: deprecated.$s-6 deprecated.$s-8;
+  padding: px2rem(6) var(--sp-s);
 }
diff --git a/frontend/src/app/main/ui/components/button_link.cljs b/frontend/src/app/main/ui/components/button_link.cljs
index 3969012a90..67929b9ce6 100644
--- a/frontend/src/app/main/ui/components/button_link.cljs
+++ b/frontend/src/app/main/ui/components/button_link.cljs
@@ -7,7 +7,6 @@
 (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]))
 
@@ -20,9 +19,9 @@
                          (when (fn? on-click)
                            (on-click event)))))]
     [:a
-     {:class (dm/str class " " (stl/css :button))
+     {:class [class  (stl/css :button)]
       :tab-index "0"
       :on-click on-click
       :on-key-down on-key-down}
-     [:span.logo icon]
+     icon
      label]))
diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss
index e22ff1a9bf..872afd5af5 100644
--- a/frontend/src/app/main/ui/components/button_link.scss
+++ b/frontend/src/app/main/ui/components/button_link.scss
@@ -4,24 +4,28 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .button {
+  @include use-typography("body-small");
+
   appearance: none;
   align-items: center;
   border: none;
   cursor: pointer;
   display: flex;
-  font-family: "worksans", "vazirmatn", sans-serif;
   justify-content: center;
-  min-width: 25px;
-  padding: 0 1rem;
+  min-inline-size: px2rem(25);
+  padding-block: 0;
+  padding-inline: var(--sp-l);
   transition: all 0.4s;
   text-decoration: none !important;
-  height: 40px;
+  block-size: $sz-40;
 
-  svg {
-    height: 20px;
-    width: 20px;
+  .logo {
+    block-size: px2rem(20);
+    inline-size: px2rem(20);
   }
 }
diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss
index f7d76e4357..8ddd352a1a 100644
--- a/frontend/src/app/main/ui/components/color_bullet.scss
+++ b/frontend/src/app/main/ui/components/color_bullet.scss
@@ -4,103 +4,111 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as *;
+@use "ds/mixins.scss" as *;
 
 .color-bullet {
   position: relative;
   display: flex;
   flex-direction: row;
-  width: var(--bullet-size, deprecated.$s-24);
-  height: var(--bullet-size, deprecated.$s-24);
-  min-width: var(--bullet-size, deprecated.$s-24);
-  min-height: var(--bullet-size, deprecated.$s-24);
-  border: deprecated.$s-2 solid var(--color-bullet-border-color);
-  border-radius: deprecated.$br-circle;
+  inline-size: var(--bullet-size, $sz-24);
+  block-size: var(--bullet-size, $sz-24);
+  min-inline-size: var(--bullet-size, $sz-24);
+  min-block-size: var(--bullet-size, $sz-24);
+  border: $b-2 solid var(--color-background-quaternary);
+  border-radius: $br-circle;
+}
 
-  &.grid-area {
-    grid-area: color;
-  }
+.color-bullet-wrapper {
+  display: flex;
+  flex-direction: row;
+  block-size: 100%;
+  inline-size: 100%;
+  clip-path: circle(50%);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
 
-  &.mini {
-    width: var(--bullet-size, deprecated.$s-16);
-    height: var(--bullet-size, deprecated.$s-16);
-    min-width: var(--bullet-size, deprecated.$s-16);
-    min-height: var(--bullet-size, deprecated.$s-16);
-    margin-top: 0;
-    border: 1px solid var(--color-bullet-border-color);
-  }
+.grid-area {
+  grid-area: color;
+}
 
-  &.is-not-library-color {
-    overflow: hidden;
-    border-radius: deprecated.$br-8;
+.color-bullet.mini {
+  inline-size: var(--bullet-size, $sz-16);
+  block-size: var(--bullet-size, $sz-16);
+  min-inline-size: var(--bullet-size, $sz-16);
+  min-block-size: var(--bullet-size, $sz-16);
+  margin-block-start: 0;
+  border: $b-1 solid var(--color-background-quaternary);
+}
 
-    & .color-bullet-wrapper {
-      clip-path: none;
-    }
+.is-not-library-color {
+  overflow: hidden;
+  border-radius: $br-8;
+}
 
-    &.mini {
-      border-radius: deprecated.$br-4;
-    }
-  }
+.is-not-library-color .color-bullet-wrapper {
+  clip-path: none;
+}
 
-  &.is-gradient {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
-      left center;
-    background-color: var(--color-bullet-background-color);
-    transform: rotate(-90deg);
-  }
+.is-not-library-color.mini {
+  border-radius: $br-4;
+}
 
-  &.is-transparent {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
-      left center;
-    background-color: var(--color-bullet-background-color);
-  }
+.is-gradient {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
+    left center;
+  background-color: var(--color-static-white);
+  transform: rotate(-90deg);
+}
 
-  .color-bullet-wrapper {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    width: 100%;
-    clip-path: circle(50%);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
+.is-transparent {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
+    left center;
+  background-color: var(--color-static-white);
+}
 
-  .color-bullet-wrapper > * {
-    width: 100%;
-    height: 100%;
-    background-color: var(--color-bullet-background-color);
-  }
+.color-bullet .color-bullet-wrapper > * {
+  inline-size: 100%;
+  block-size: 100%;
+  background-color: var(--color-static-white);
+}
 
-  &:hover:not(.read-only) {
-    border: deprecated.$s-2 solid var(--color-bullet-border-color-selected);
-  }
+.color-bullet:hover:not(.read-only) {
+  border: $b-2 solid var(--color-accent-primary);
 }
 
 .color-text {
-  @include deprecated.two-line-text-ellipsis;
-  @include deprecated.body-small-typography;
+  @include two-line-text-ellipsis;
+  @include use-typography("body-small");
 
-  width: deprecated.$s-80;
+  inline-size: px2rem(80);
   text-align: center;
-  margin-top: deprecated.$s-2;
-  max-height: deprecated.$s-28;
-  color: var(--palette-text-color);
+  margin-block-start: var(--sp-xxs);
+  max-block-size: px2rem(28);
+  color: var(--color-foreground-secondary);
+}
 
-  &.small-text {
-    @include deprecated.text-ellipsis;
+.color-text.small-text {
+  @include text-ellipsis;
 
-    max-height: deprecated.$s-16;
-  }
+  max-block-size: $sz-16;
 }
 
 .big-text {
-  @include deprecated.inspect-value;
-  @include deprecated.two-line-text-ellipsis;
+  @include use-typography("body-small");
+  @include two-line-text-ellipsis;
 
+  display: inline-block;
+  inline-size: fit-content;
+  padding: 0;
+  margin: 0;
   line-height: 1;
-  color: var(--palette-text-color);
+  color: var(--color-foreground-secondary);
   text-align: center;
 }
 
@@ -109,5 +117,5 @@
 }
 
 .color-row-name {
-  color: var(--menu-foreground-color);
+  color: var(--color-foreground-primary);
 }
diff --git a/frontend/src/app/main/ui/confirm.cljs b/frontend/src/app/main/ui/confirm.cljs
index 8e0fef9256..66621e0d07 100644
--- a/frontend/src/app/main/ui/confirm.cljs
+++ b/frontend/src/app/main/ui/confirm.cljs
@@ -12,6 +12,7 @@
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -72,18 +73,18 @@
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-header)}
-       [:h2 {:class (stl/css :modal-title)} title]
-       [:div {:class (stl/css :modal-close-btn)}
-        [:> icon-button* {:variant "ghost"
-                          :aria-label (tr "labels.close")
-                          :on-click cancel-fn
-                          :icon i/close}]]]
+       [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :modal-title)} title]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "labels.close")
+                         :on-click cancel-fn
+                         :icon i/close
+                         :class (stl/css :modal-close-btn)}]]
 
       [:div {:class (stl/css :modal-content)}
        (when (and (string? message) (not= message ""))
-         [:h3 {:class (stl/css :modal-msg)} message])
+         [:> heading* {:level 3 :typography "body-large" :class (stl/css :modal-msg)} message])
        (when (and (string? scd-message) (not= scd-message ""))
-         [:h3 {:class (stl/css :modal-scd-msg)} scd-message])
+         [:> heading* {:level 3 :typography "body-large" :class (stl/css :modal-scd-msg)} scd-message])
        (when (string? hint)
          [:> context-notification* {:level (or hint-level :info)
                                     :appearance :ghost}
@@ -105,12 +106,11 @@
                (:name item)]])]])]
 
       [:div {:class (stl/css :modal-footer)}
-       [:div {:class (stl/css :action-buttons)}
-        (when-not (= cancel-label :omit)
-          [:> button* {:variant "secondary"
-                       :on-click cancel-fn}
-           cancel-label])
-        [:> button* {:variant (cond (= accept-style :danger)  "destructive"
-                                    (= accept-style :primary) "primary")
-                     :on-click accept-fn}
-         accept-label]]]]]))
+       (when-not (= cancel-label :omit)
+         [:> button* {:variant "secondary"
+                      :on-click cancel-fn}
+          cancel-label])
+       [:> button* {:variant (cond (= accept-style :danger)  "destructive"
+                                   (= accept-style :primary) "primary")
+                    :on-click accept-fn}
+        accept-label]]]]))
diff --git a/frontend/src/app/main/ui/confirm.scss b/frontend/src/app/main/ui/confirm.scss
index 0c7d5033da..afcffa7a48 100644
--- a/frontend/src/app/main/ui/confirm.scss
+++ b/frontend/src/app/main/ui/confirm.scss
@@ -4,68 +4,84 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as *;
 
 .modal-overlay {
-  @extend %modal-overlay-base;
-
-  &.transparent {
-    background-color: transparent;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-set);
+  background-color: var(--color-overlay-default);
 }
 
 .modal-container {
-  @extend %modal-container-base;
-
+  position: relative;
+  padding: var(--sp-xxxl);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
+  min-inline-size: px2rem(364);
+  min-block-size: $sz-192;
+  max-inline-size: $sz-512;
+  max-block-size: $sz-512;
   display: flex;
   flex-direction: column;
   gap: var(--sp-xxl);
 }
 
 .modal-title {
-  @include deprecated.headline-medium-typography;
-
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .modal-close-btn {
   position: absolute;
-  top: var(--sp-m);
-  right: var(--sp-m);
+  inset-block-start: var(--sp-m);
+  inset-inline-end: var(--sp-m);
 }
 
 .modal-content {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 }
 
 .modal-item-element {
-  @include deprecated.flex-row;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-xs);
 }
 
 .modal-component-icon {
-  @include deprecated.flex-center;
-
+  display: flex;
+  justify-content: center;
+  align-items: center;
   color: var(--color-foreground-secondary);
 }
 
 .modal-component-name {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
   color: var(--color-foreground-secondary);
 }
 
-.action-buttons {
-  @extend %modal-action-btns;
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sp-l);
 }
 
+// TODO: `.modal-subtitle` appears unused in `confirm.cljs` — verify before removal
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .modal-error-msg {
-  margin: var(--sp-xxl) 0;
+  margin-block: var(--sp-xxl);
 }
diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss
index 2083e7707e..c2ca60b679 100644
--- a/frontend/src/app/main/ui/dashboard.scss
+++ b/frontend/src/app/main/ui/dashboard.scss
@@ -4,24 +4,26 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/mixins.scss" as *;
 
 .dashboard {
-  @extend %new-scrollbar;
+  @include custom-scrollbar($include-selection: false, $include-placeholder: false);
 
-  background-color: var(--app-background);
+  background-color: var(--color-background-primary);
   display: grid;
-  grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr;
-  grid-template-rows: deprecated.$s-52 1fr;
-  height: 100vh;
+  grid-template-columns: $sz-40 px2rem(256) 1fr;
+  grid-template-rows: px2rem(52) 1fr;
+  block-size: 100vh;
 }
 
 .dashboard-content {
   display: grid;
-  grid-template-rows: deprecated.$s-64 1fr;
+  grid-template-rows: $sz-64 1fr;
   position: relative;
   grid-row: 1 / span 2;
-  padding: deprecated.$s-16 deprecated.$s-16 0 0;
+  padding: var(--sp-l) var(--sp-l) 0 0;
   overflow: hidden;
-  width: 100%;
+  inline-size: 100%;
 }
diff --git a/frontend/src/app/main/ui/settings.cljs b/frontend/src/app/main/ui/settings.cljs
index 5ffa8b3bea..3a4b98aed4 100644
--- a/frontend/src/app/main/ui/settings.cljs
+++ b/frontend/src/app/main/ui/settings.cljs
@@ -30,7 +30,8 @@
 (mf/defc header*
   {::mf/wrap [mf/memo]}
   []
-  [:header {:class (stl/css :dashboard-header) :data-testid "dashboard-header"}
+  [:header {:class (stl/css :dashboard-header)
+            :data-testid "dashboard-header"}
    [:div {:class (stl/css :dashboard-title)}
     [:h1 {:data-testid "account-title"} (tr "dashboard.your-account-title")]]])
 
@@ -47,7 +48,7 @@
 
     [:*
      [:> modal-container*]
-     [:section {:class (stl/css :dashboard-layout-refactor :dashboard)}
+     [:section {:class (stl/css :dashboard)}
 
 
       [:> sidebar* {:profile profile
diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss
index 3845cce504..b553370331 100644
--- a/frontend/src/app/main/ui/settings.scss
+++ b/frontend/src/app/main/ui/settings.scss
@@ -4,16 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
 @use "ds/mixins.scss" as *;
 
 .dashboard {
-  background-color: var(--app-background);
+  background-color: var(--color-background-primary);
   display: grid;
-  grid-template-rows: deprecated.$s-48 1fr;
-  grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr;
-  height: 100vh;
+  grid-template-rows: $sz-48 1fr;
+  grid-template-columns: $sz-40 px2rem(256) 1fr;
+  block-size: 100vh;
 }
 
 .dashboard-content {
@@ -23,273 +25,13 @@
   flex-direction: column;
   position: relative;
   grid-row: 1 / span 2;
-  padding: deprecated.$s-16 deprecated.$s-16 0 0;
+  padding: var(--sp-l) var(--sp-l) 0 0;
 }
 
 .dashboard-container {
   flex: 1 0 0;
-  margin-right: deprecated.$s-16;
+  margin-inline-end: var(--sp-l);
   overflow-y: auto;
-  width: 100%;
-  border-top: deprecated.$s-1 solid var(--color-background-quaternary);
-
-  &.dashboard-projects {
-    user-select: none;
-  }
-
-  &.dashboard-shared {
-    width: calc(100vw - deprecated.$s-320);
-    margin-right: deprecated.$s-52;
-  }
-
-  &.search {
-    margin-top: deprecated.$s-12;
-  }
-}
-
-.dashboard-settings {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  a {
-    color: var(--color-foreground-secondary);
-  }
-}
-
-.form-container {
-  margin: deprecated.$s-48 auto deprecated.$s-32 deprecated.$s-120;
-  display: flex;
-  max-width: deprecated.$s-368;
-  width: 100%;
-
-  &.two-columns {
-    max-width: deprecated.$s-520;
-    justify-content: space-between;
-    flex-direction: row;
-  }
-
-  h2 {
-    margin-bottom: deprecated.$s-16;
-  }
-
-  form {
-    width: deprecated.$s-468;
-
-    .custom-input,
-    .custom-select {
-      flex-direction: column-reverse;
-
-      label {
-        position: relative;
-        text-transform: uppercase;
-        color: var(--color-foreground-primary);
-        font-size: deprecated.$fs-11;
-        margin-bottom: deprecated.$s-12;
-        margin-left: calc(-1 * deprecated.$s-4);
-      }
-
-      input,
-      select {
-        background-color: var(--color-background-tertiary);
-        border-radius: deprecated.$s-8;
-        border-color: transparent;
-        color: var(--color-foreground-primary);
-        padding: 0 deprecated.$s-16;
-
-        &:focus {
-          outline: deprecated.$s-1 solid var(--color-accent-primary);
-        }
-
-        ::placeholder {
-          color: var(--color-foreground-secondary);
-        }
-      }
-
-      .help-icon {
-        bottom: deprecated.$s-12;
-        top: auto;
-
-        svg {
-          fill: var(--color-foreground-secondary);
-        }
-      }
-
-      &.disabled {
-        input {
-          background-color: var(--input-background-color-disabled);
-          border-color: var(--color-background-quaternary);
-          color: var(--color-foreground-secondary);
-        }
-      }
-
-      .input-container {
-        background-color: var(--color-background-tertiary);
-        border-radius: deprecated.$s-8;
-        border-color: transparent;
-        margin-top: deprecated.$s-24;
-
-        .main-content {
-          label {
-            position: absolute;
-            top: calc(-1 * deprecated.$s-24);
-          }
-
-          span {
-            color: var(--color-foreground-primary);
-          }
-        }
-
-        &:focus {
-          border: deprecated.$s-1 solid var(--color-accent-primary);
-        }
-      }
-
-      textarea {
-        border-radius: deprecated.$s-8;
-        padding: deprecated.$s-12 deprecated.$s-16;
-        background-color: var(--color-background-tertiary);
-        color: var(--color-foreground-primary);
-        border: none;
-
-        &:focus {
-          outline: deprecated.$s-1 solid var(--color-accent-primary);
-        }
-      }
-    }
-
-    .field-title {
-      color: var(--color-foreground-primary);
-    }
-
-    .field-title:not(:first-child) {
-      margin-top: deprecated.$s-64;
-    }
-
-    .field-text {
-      color: var(--color-foreground-secondary);
-    }
-
-    button,
-    .btn-secondary {
-      width: 100%;
-      font-size: deprecated.$fs-11;
-      text-transform: uppercase;
-      background-color: var(--color-background-tertiary);
-      color: var(--color-foreground-primary);
-
-      &:hover {
-        color: var(--color-accent-primary);
-        background-color: var(--color-background-quaternary);
-      }
-    }
-
-    hr {
-      display: none;
-    }
-  }
-
-  .links {
-    margin-top: deprecated.$s-12;
-  }
-}
-
-.profile-form {
-  display: flex;
-  flex-direction: column;
-  max-width: deprecated.$s-368;
-  width: 100%;
-
-  .newsletter-subs {
-    border-bottom: deprecated.$s-1 solid var(--color-foreground-secondary);
-    border-top: deprecated.$s-1 solid var(--color-foreground-secondary);
-    padding: deprecated.$s-32 0;
-    margin-bottom: deprecated.$s-32;
-
-    .newsletter-title {
-      font-family: "worksans", "vazirmatn", sans-serif;
-      color: var(--color-foreground-secondary);
-      font-size: deprecated.$fs-14;
-    }
-
-    label {
-      font-family: "worksans", "vazirmatn", sans-serif;
-      color: var(--color-background-primary);
-      font-size: deprecated.$fs-12;
-      margin-right: calc(-1 * deprecated.$s-16);
-      margin-bottom: deprecated.$s-12;
-    }
-
-    .info {
-      font-family: "worksans", "vazirmatn", sans-serif;
-      color: var(--color-foreground-secondary);
-      font-size: deprecated.$fs-12;
-      margin-bottom: deprecated.$s-8;
-    }
-
-    .input-checkbox label {
-      align-items: flex-start;
-    }
-  }
-}
-
-.avatar-form {
-  display: flex;
-  flex-direction: column;
-  width: deprecated.$s-120;
-  min-width: deprecated.$s-120;
-
-  img {
-    border-radius: 50%;
-    flex-shrink: 0;
-    height: deprecated.$s-120;
-    margin-right: deprecated.$s-16;
-    width: deprecated.$s-120;
-  }
-
-  .image-change-field {
-    position: relative;
-    width: deprecated.$s-120;
-    height: deprecated.$s-120;
-
-    .update-overlay {
-      opacity: 0;
-      cursor: pointer;
-      position: absolute;
-      width: deprecated.$s-120;
-      height: deprecated.$s-120;
-      border-radius: 50%;
-      font-size: deprecated.$fs-24;
-      color: var(--color-foreground-primary);
-      line-height: 5;
-      text-align: center;
-      background: var(--color-accent-tertiary);
-      z-index: 14;
-    }
-
-    input[type="file"] {
-      width: deprecated.$s-120;
-      height: deprecated.$s-120;
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      top: 0;
-      z-index: 15;
-    }
-
-    &:hover {
-      .update-overlay {
-        opacity: 0.8;
-      }
-    }
-  }
-}
-
-.options-form,
-.password-form {
-  h2 {
-    font-size: deprecated.$fs-14;
-    margin-bottom: deprecated.$s-20;
-  }
+  inline-size: 100%;
+  border-block-start: $b-1 solid var(--color-background-quaternary);
 }
diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs
index d8bd73fb48..9e6dfa68f0 100644
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -23,10 +23,10 @@
    [app.main.ui.auth.register :as register]
    [app.main.ui.dashboard.sidebar :refer [sidebar*]]
    [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
    [app.main.ui.ds.product.loader :refer [loader*]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.viewer.header :as viewer.header]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -58,7 +58,7 @@
       (when profile-id
         [:div {:class (stl/css :go-back-wrapper)}
          [:> icon* {:icon-id i/arrow :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
-     [:div {:class (stl/css :deco-before)} deprecated-icon/logo-error-screen]
+     [:div {:class (stl/css :deco-before)} [:> raw-svg* {:id "logo-error-screen"}]]
      (when-not profile-id
        [:button {:class (stl/css :login-header)
                  :on-click on-nav-root}
@@ -69,7 +69,7 @@
 
      [:div {:class (stl/css :deco-after2)}
       [:span (tr "labels.copyright-period")]
-      deprecated-icon/logo-error-screen
+      [:> raw-svg* {:id "logo-error-screen"}]
       [:span (tr "not-found.made-with-love")]]]))
 
 (mf/defc invalid-token
@@ -145,11 +145,14 @@
     [:div {:class (stl/css :overlay)}
      [:div {:class (stl/css :dialog-login)}
       [:div {:class (stl/css :modal-close)}
-       [:button {:class (stl/css :modal-close-button)
-                 :on-click on-nav-root}
-        deprecated-icon/close]]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "labels.close")
+                         :on-click on-nav-root
+                         :icon i/close}]]
       [:div {:class (stl/css :login)}
-       [:div {:class (stl/css :logo)} deprecated-icon/logo]
+       [:div {:class (stl/css :logo)}
+        [:> raw-svg*  {:id "penpot-logo"
+                       :class (stl/css :logo-icon)}]]
 
        (case @current-section
          :login
@@ -212,8 +215,10 @@
     [:div {:class (stl/css :overlay)}
      [:div {:class (stl/css :dialog)}
       [:div {:class (stl/css :modal-close)}
-       [:button {:class (stl/css :modal-close-button) :on-click on-close}
-        deprecated-icon/close]]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "labels.close")
+                         :on-click on-close
+                         :icon i/close}]]
       [:div {:class (stl/css :dialog-title)} title]
       (for [[index content] (d/enumerate content)]
         [:div {:key index} content])
@@ -222,7 +227,7 @@
          [:button {:class (stl/css :cancel-button)
                    :on-click on-close}
           cancel-text])
-       [:button {:on-click on-click} button-text]]]]))
+       [:> button* {:variant "primary" :on-click on-click} button-text]]]]))
 
 (mf/defc request-access*
   [{:keys [file-id team-id is-default is-workspace profile]}]
@@ -315,7 +320,7 @@
      [:div {:class (stl/css :main-message)} (tr "labels.bad-gateway.main-message")]
      [:div {:class (stl/css :desc-message)} (tr "labels.bad-gateway.desc-message")]
      [:div {:class (stl/css :sign-info)}
-      [:button {:on-click handle-retry} (tr "labels.retry")]]]))
+      [:> button* {:variant "primary" :on-click handle-retry} (tr "labels.retry")]]]))
 
 (mf/defc service-unavailable*
   []
@@ -324,7 +329,7 @@
      [:div {:class (stl/css :main-message)} (tr "labels.service-unavailable.main-message")]
      [:div {:class (stl/css :desc-message)} (tr "labels.service-unavailable.desc-message")]
      [:div {:class (stl/css :sign-info)}
-      [:button {:on-click on-click} (tr "labels.retry")]]]))
+      [:> button* {:variant "primary" :on-click on-click} (tr "labels.retry")]]]))
 
 (mf/defc nitrate-unavailable*
   []
@@ -472,7 +477,7 @@
      is-workspace
      [:div {:class (stl/css :workspace)}
       [:div {:class (stl/css :workspace-left)}
-       deprecated-icon/logo-icon
+       [:> raw-svg* {:id "penpot-logo-icon"}]
        [:div
         [:div {:class (stl/css :project-name)} (tr "not-found.no-permission.project-name")]
         [:div {:class (stl/css :file-name)} (tr "not-found.no-permission.penpot-file")]]]
diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss
index d1588ffcf0..9f87bd9d3d 100644
--- a/frontend/src/app/main/ui/static.scss
+++ b/frontend/src/app/main/ui/static.scss
@@ -4,18 +4,20 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 @use "./ds/typography.scss" as t;
 
 .exception-layout {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   background-color: var(--color-background-secondary);
 }
 
 .nitrate-unavailable-layout {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -57,61 +59,45 @@
   color: var(--color-foreground-secondary);
 }
 
-.deco-before,
-.deco-after {
-  position: absolute;
-  left: calc(50% - deprecated.$s-40);
-
-  svg {
-    position: absolute;
-    fill: var(--color-foreground-secondary);
-    height: 1537px;
-    width: deprecated.$s-80;
-  }
-}
-
 .deco-before {
-  height: 34vh;
-  top: 0;
-
-  svg {
-    bottom: 0;
-  }
+  position: absolute;
+  inset-inline-start: calc(50% - $sz-40);
+  block-size: 34vh;
+  inset-block-start: 0;
 }
 
-.deco-after {
-  height: 34vh;
-  bottom: 0;
+// SVG inside deco-before — no class available on the raw element
+.deco-before svg {
+  position: absolute;
+  block-size: 1537px;
+  inline-size: px2rem(80);
+  inset-block-end: 0;
+}
 
-  svg {
-    top: 0;
-  }
+// SVG inside deco-after2 — no class available on the raw element
+.deco-after2 svg {
+  block-size: 1537px;
+  inline-size: px2rem(80);
 }
 
 .deco-after2 {
   display: flex;
   justify-content: center;
-  gap: deprecated.$s-8;
-  width: 100%;
-  height: 34vh;
+  gap: var(--sp-s);
+  inline-size: 100%;
+  block-size: 34vh;
   position: absolute;
-  left: 0;
-  bottom: 0;
+  inset-inline-start: 0;
+  inset-block-end: 0;
   color: var(--color-foreground-primary);
 
-  svg {
-    fill: var(--color-foreground-secondary);
-    height: 1537px;
-    width: deprecated.$s-80;
-  }
-
   span {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    height: 100%;
-    width: 25%;
-    padding-bottom: deprecated.$s-28;
+    block-size: 100%;
+    inline-size: 25%;
+    padding-block-end: px2rem(28);
 
     &:first-child {
       text-align: right;
@@ -121,7 +107,7 @@
 
 .exception-header {
   color: var(--color-foreground-secondary);
-  padding: deprecated.$s-24 deprecated.$s-32;
+  padding: var(--sp-xxl) var(--sp-xxxl);
   position: fixed;
   background: none;
   border: none;
@@ -132,8 +118,8 @@
 
 .penpot-logo {
   fill: var(--color-foreground-primary);
-  width: deprecated.$s-48;
-  height: deprecated.$s-48;
+  inline-size: $sz-48;
+  block-size: $sz-48;
 }
 
 .back-arrow {
@@ -144,38 +130,48 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: deprecated.$s-8;
-  margin-left: deprecated.$s-12;
-  font-size: deprecated.$fs-14;
+  gap: var(--sp-s);
+  margin-inline-start: var(--sp-m);
+  font-size: 0.875rem;
 }
 
 .login-header {
-  @extend %button-primary;
+  @include t.use-typography("headline-small");
 
-  padding: deprecated.$s-8 deprecated.$s-16;
-  font-size: deprecated.$fs-11;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-accent-primary);
+  border: $b-1 solid var(--color-accent-primary);
+  color: var(--color-background-secondary);
+  border-radius: $br-8;
+  min-block-size: $sz-32;
+  padding: var(--sp-s) var(--sp-l);
   position: fixed;
-  right: 0;
-  margin: deprecated.$s-40 deprecated.$s-32;
+  inset-inline-end: 0;
+  margin: $sz-40 $sz-32;
+  text-transform: uppercase;
 }
 
 .exception-content {
   display: flex;
-  height: 100%;
+  block-size: 100%;
   justify-content: center;
-  width: 100%;
+  inline-size: 100%;
+}
 
-  .container {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    gap: deprecated.$s-16;
-    height: 34vh;
-    justify-content: center;
-    margin-top: 33vh;
-    text-align: center;
-    width: deprecated.$s-640;
-  }
+.exception-content .container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-l);
+  block-size: 34vh;
+  justify-content: center;
+  margin-block-start: 33vh;
+  text-align: center;
+  inline-size: px2rem(640);
 }
 
 .main-message {
@@ -206,209 +202,194 @@
 
 .sign-info {
   text-align: center;
-
-  button {
-    @extend %button-primary;
-
-    text-transform: uppercase;
-    padding: deprecated.$s-8 deprecated.$s-16;
-    font-size: deprecated.$fs-11;
-  }
-}
-
-.image {
-  svg {
-    fill: var(--color-foreground-primary);
-  }
 }
 
 .workspace {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   display: flex;
   justify-content: space-between;
   background-color: var(--color-canvas);
   position: relative;
+}
 
-  .workspace-left,
-  .workspace-right {
-    padding: deprecated.$s-12;
-    width: deprecated.$s-276;
-    height: 100%;
-    background-color: var(--color-background-primary);
-    display: flex;
-    gap: deprecated.$s-4;
+.workspace .workspace-left,
+.workspace .workspace-right {
+  padding: var(--sp-m);
+  inline-size: px2rem(276);
+  block-size: 100%;
+  background-color: var(--color-background-primary);
+  display: flex;
+  gap: var(--sp-xs);
 
-    svg {
-      width: 2rem;
-      height: 2rem;
-      fill: var(--icon-foreground-hover);
-    }
-
-    .project-name {
-      @include deprecated.uppercase-title-typography;
-
-      color: var(--title-foreground-color);
-    }
-
-    .file-name {
-      @include deprecated.small-title-typography;
-
-      text-transform: none;
-      color: var(--title-foreground-color-hover);
-    }
+  svg {
+    inline-size: 2rem;
+    block-size: 2rem;
+    fill: var(--color-foreground-primary);
   }
 }
 
+.workspace .workspace-left .project-name,
+.workspace .workspace-right .project-name {
+  @include t.use-typography("headline-small");
+
+  color: var(--color-foreground-secondary);
+}
+
+.workspace .workspace-left .file-name,
+.workspace .workspace-right .file-name {
+  @include t.use-typography("title-small");
+
+  color: var(--color-foreground-primary);
+  text-transform: none;
+}
+
 .dashboard {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
+}
 
-  .dashboard-sidebar {
-    width: deprecated.$s-300;
-    height: 100%;
-  }
+.dashboard .dashboard-sidebar {
+  inline-size: px2rem(300);
+  block-size: 100%;
 }
 
 .viewer {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
+// TODO: `.login-container` appears unused in CLJS — verify before removal
+// .login-container {
+//   inline-size: 100%;
+//   background-color: var(--color-background-error);
+// }
+
 .overlay {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: 100;
   background-color: rgb(0 0 0 / 0.65);
   display: flex;
   justify-content: center;
   align-items: center;
+}
 
-  .dialog,
-  .dialog-login {
-    width: 556px;
-    background-color: var(--color-background-primary);
-    border-radius: deprecated.$s-8;
+.overlay .dialog,
+.overlay .dialog-login {
+  inline-size: 556px;
+  background-color: var(--color-background-primary);
+  border-radius: $br-8;
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+  padding: $sz-36;
+  color: var(--color-foreground-secondary);
+  position: relative;
+}
+
+.modal-close {
+  position: absolute;
+  inset-block-start: $sz-16;
+  inset-inline-end: $sz-16;
+}
+
+.overlay .dialog .dialog-title,
+.overlay .dialog-login .dialog-title {
+  font-size: 1.25rem;
+}
+
+.overlay .dialog .sign-info,
+.overlay .dialog-login .sign-info {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: var(--sp-xxxl);
+}
+
+.overlay .dialog .sign-info,
+.overlay .dialog-login .sign-info {
+  .cancel-button {
+    background: none;
+    cursor: pointer;
     display: flex;
-    flex-direction: column;
-    align-content: stretch;
-    padding: deprecated.$s-36;
-    color: var(--modal-text-foreground-color);
-
-    .modal-close {
-      text-align: right;
-
-      .modal-close-button {
-        background: none;
-        border: none;
-        cursor: pointer;
-
-        svg {
-          cursor: pointer;
-          width: deprecated.$s-24;
-          height: deprecated.$s-24;
-          fill: var(--modal-text-foreground-color);
-          stroke: var(--modal-text-foreground-color);
-        }
-      }
-    }
-
-    .dialog-title {
-      font-size: deprecated.$fs-20;
-    }
-
-    .sign-info {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: deprecated.$s-32;
-
-      button {
-        @extend %button-primary;
-
-        text-transform: uppercase;
-        padding: deprecated.$s-8 deprecated.$s-16;
-        font-size: deprecated.$fs-11;
-      }
-
-      .cancel-button {
-        @extend %button-secondary;
-
-        text-transform: uppercase;
-        padding: deprecated.$s-8 deprecated.$s-16;
-        font-size: deprecated.$fs-11;
-        margin-right: deprecated.$s-16;
-      }
-    }
-  }
-
-  .dialog {
-    gap: deprecated.$s-12;
-  }
-
-  .login {
-    gap: 0;
-    padding: 0 deprecated.$s-36 deprecated.$s-72 deprecated.$s-36;
-
-    .logo {
-      margin-bottom: deprecated.$s-40;
-
-      svg {
-        fill: var(--color-foreground-primary);
-        width: deprecated.$s-120;
-        height: deprecated.$s-40;
-      }
-    }
-
-    .logo-title {
-      font-size: deprecated.$fs-20;
-      color: var(--title-foreground-color-hover);
-      margin-bottom: deprecated.$s-4;
-    }
-
-    .logo-subtitle {
-      font-size: deprecated.$fs-14;
-      color: var(--title-foreground-color-hover);
-      margin-bottom: deprecated.$s-24;
-    }
-
-    .change-section {
-      width: 100%;
-      text-align: center;
-
-      a {
-        color: var(--link-foreground-color);
-      }
-    }
-
-    hr {
-      margin: deprecated.$s-20 0;
-      border-top: solid deprecated.$s-1 var(--modal-separator-background-color);
-    }
-
-    .separator {
-      margin: deprecated.$s-20 0;
-    }
-
-    form {
-      div {
-        margin-bottom: deprecated.$s-8;
-      }
-    }
+    justify-content: center;
+    align-items: center;
+    border-radius: $br-8;
+    background-color: var(--color-background-tertiary);
+    border: $b-1 solid var(--color-background-tertiary);
+    color: var(--color-foreground-secondary);
+    padding: var(--sp-s) var(--sp-l);
+    font-size: 0.688rem;
+    text-transform: uppercase;
+    margin-inline-end: var(--sp-l);
   }
 }
 
-.login-container {
-  width: 100%;
-  background-color: var(--color-background-error);
+.overlay .dialog {
+  gap: var(--sp-m);
+}
+
+.overlay .login {
+  gap: 0;
+  padding: 0 var(--sp-l) px2rem(72) var(--sp-l);
+}
+
+.overlay .login .logo {
+  margin-block-end: $sz-40;
+}
+
+.logo-icon {
+  fill: var(--color-foreground-primary);
+  inline-size: $sz-120;
+  block-size: $sz-40;
+}
+
+.overlay .login .logo-title {
+  font-size: 1.25rem;
+  color: var(--color-foreground-primary);
+  margin-block-end: var(--sp-xs);
+}
+
+.overlay .login .logo-subtitle {
+  font-size: 0.875rem;
+  color: var(--color-foreground-primary);
+  margin-block-end: var(--sp-xxl);
+}
+
+.overlay .login .change-section {
+  inline-size: 100%;
+  text-align: center;
+
+  // Native <a> inside change-section — no class available
+  a {
+    color: var(--color-accent-primary);
+  }
+}
+
+// Native <hr> inside login — no class available
+.overlay .login hr {
+  margin: var(--sp-xl) 0;
+  border-block-start: solid $b-1 solid var(--color-background-quaternary);
+}
+
+.overlay .login .separator {
+  margin: var(--sp-xl) 0;
+}
+
+// Native <form> and <div> inside login — no class available
+.overlay .login form {
+  div {
+    margin-block-end: var(--sp-s);
+  }
 }
 
 .buttons-container {
   display: flex;
-
-  .retry-btn {
-    margin-inline-start: var(--sp-xxl);
-  }
+}
+
+.buttons-container .retry-btn {
+  margin-inline-start: var(--sp-xxl);
 }
diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss
index 6eeeac9bc9..c0630368b8 100644
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -4,14 +4,16 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/mixins.scss" as *;
 
 .workspace {
-  @extend %new-scrollbar;
+  @include custom-scrollbar($include-selection: false, $include-placeholder: false);
 
-  width: 100vw;
-  height: 100vh;
-  max-height: 100vh;
+  inline-size: 100vw;
+  block-size: 100vh;
+  max-block-size: 100vh;
   user-select: none;
   display: grid;
   grid-template: "left-sidebar viewport right-sidebar" 1fr / auto 1fr auto;
@@ -34,19 +36,19 @@
 }
 
 .history-debug-overlay {
-  bottom: 0;
-  max-height: deprecated.$s-500;
-  width: deprecated.$s-500;
+  inset-block-end: 0;
+  max-block-size: $sz-500;
+  inline-size: $sz-500;
   overflow-y: auto;
   position: absolute;
-  z-index: deprecated.$z-index-modal;
+  z-index: var(--z-index-set);
 }
 
 .workspace-viewport {
   overflow: hidden;
   transition: none;
   display: grid;
-  grid-template-rows: deprecated.$s-20 1fr;
-  grid-template-columns: deprecated.$s-20 1fr;
+  grid-template-rows: px2rem(20) 1fr;
+  grid-template-columns: px2rem(20) 1fr;
   flex: 1;
 }