From 5dc5768d30f6842ef68eb023592247def8ed93d3 Mon Sep 17 00:00:00 2001
From: Luis de Dios <luis.dedios@kaleidos.net>
Date: Tue, 18 Aug 2026 15:40:33 +0200
Subject: [PATCH] :recycle: Use new SCSS guidelines

---
 frontend/src/app/main/ui/releases/v2_0.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_0.scss  | 83 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_1.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_1.scss  | 92 ++++++++++++++------
 frontend/src/app/main/ui/releases/v2_10.cljs |  4 +-
 frontend/src/app/main/ui/releases/v2_10.scss | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_11.cljs |  1 -
 frontend/src/app/main/ui/releases/v2_11.scss | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_12.cljs |  1 -
 frontend/src/app/main/ui/releases/v2_12.scss | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_13.cljs |  1 -
 frontend/src/app/main/ui/releases/v2_13.scss | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_14.cljs |  1 -
 frontend/src/app/main/ui/releases/v2_14.scss | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_15.cljs |  1 -
 frontend/src/app/main/ui/releases/v2_15.scss | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_16.cljs |  3 +-
 frontend/src/app/main/ui/releases/v2_16.scss | 89 ++++++++++---------
 frontend/src/app/main/ui/releases/v2_17.cljs |  4 +-
 frontend/src/app/main/ui/releases/v2_17.scss | 89 ++++++++++---------
 frontend/src/app/main/ui/releases/v2_18.cljs |  4 +-
 frontend/src/app/main/ui/releases/v2_18.scss | 89 ++++++++++---------
 frontend/src/app/main/ui/releases/v2_2.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_2.scss  | 92 ++++++++++++++------
 frontend/src/app/main/ui/releases/v2_3.cljs  |  6 +-
 frontend/src/app/main/ui/releases/v2_3.scss  | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_4.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_4.scss  | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_5.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_5.scss  | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_6.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_6.scss  | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_7.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_7.scss  | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_8.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_8.scss  | 87 ++++++++++--------
 frontend/src/app/main/ui/releases/v2_9.cljs  |  1 -
 frontend/src/app/main/ui/releases/v2_9.scss  | 87 ++++++++++--------
 38 files changed, 975 insertions(+), 725 deletions(-)

diff --git a/frontend/src/app/main/ui/releases/v2_0.cljs b/frontend/src/app/main/ui/releases/v2_0.cljs
index c63b70c2da..fa5786a78c 100644
--- a/frontend/src/app/main/ui/releases/v2_0.cljs
+++ b/frontend/src/app/main/ui/releases/v2_0.cljs
@@ -211,4 +211,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss
index 48f529f066..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_0.scss
+++ b/frontend/src/app/main/ui/releases/v2_0.scss
@@ -4,93 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_1.cljs b/frontend/src/app/main/ui/releases/v2_1.cljs
index 12135d943b..675ee12c09 100644
--- a/frontend/src/app/main/ui/releases/v2_1.cljs
+++ b/frontend/src/app/main/ui/releases/v2_1.cljs
@@ -48,4 +48,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_1.scss b/frontend/src/app/main/ui/releases/v2_1.scss
index cd507cb943..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_1.scss
+++ b/frontend/src/app/main/ui/releases/v2_1.scss
@@ -4,72 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-s);
+}
+
+.feature-title {
+  @include use-typography("body-large");
+
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
+}
+
+.feature-list {
+  @include use-typography("body-medium");
+
+  color: var(--color-foreground-secondary);
+  list-style: disc;
+  display: grid;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_10.cljs b/frontend/src/app/main/ui/releases/v2_10.cljs
index 9ba8ae62b5..8bdae08090 100644
--- a/frontend/src/app/main/ui/releases/v2_10.cljs
+++ b/frontend/src/app/main/ui/releases/v2_10.cljs
@@ -112,7 +112,8 @@
            "And one more thing…Tune into our product showcase to see future plans and help us shape Penpot. Come for the insights, stay for the community…"]
 
           [:p {:class (stl/css :feature-content)}
-           [:a {:href "https://penpot.app/penpotfest"
+           [:a {:class (stl/css :link)
+                :href "https://penpot.app/penpotfest"
                 :target "_blank"}
             "Get your tickets"]
            " now to join us 8-10 October, in Madrid!"]]
@@ -192,4 +193,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_10.scss b/frontend/src/app/main/ui/releases/v2_10.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_10.scss
+++ b/frontend/src/app/main/ui/releases/v2_10.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_11.cljs b/frontend/src/app/main/ui/releases/v2_11.cljs
index 5a38a7cc86..3125687b30 100644
--- a/frontend/src/app/main/ui/releases/v2_11.cljs
+++ b/frontend/src/app/main/ui/releases/v2_11.cljs
@@ -197,4 +197,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_11.scss b/frontend/src/app/main/ui/releases/v2_11.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_11.scss
+++ b/frontend/src/app/main/ui/releases/v2_11.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_12.cljs b/frontend/src/app/main/ui/releases/v2_12.cljs
index 68b7d8e096..fb6a827ffd 100644
--- a/frontend/src/app/main/ui/releases/v2_12.cljs
+++ b/frontend/src/app/main/ui/releases/v2_12.cljs
@@ -168,4 +168,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_12.scss b/frontend/src/app/main/ui/releases/v2_12.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_12.scss
+++ b/frontend/src/app/main/ui/releases/v2_12.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_13.cljs b/frontend/src/app/main/ui/releases/v2_13.cljs
index a1f89ad281..9fa007d7ff 100644
--- a/frontend/src/app/main/ui/releases/v2_13.cljs
+++ b/frontend/src/app/main/ui/releases/v2_13.cljs
@@ -122,4 +122,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_13.scss b/frontend/src/app/main/ui/releases/v2_13.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_13.scss
+++ b/frontend/src/app/main/ui/releases/v2_13.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_14.cljs b/frontend/src/app/main/ui/releases/v2_14.cljs
index 0b4e5bde91..dfcfe7c33b 100644
--- a/frontend/src/app/main/ui/releases/v2_14.cljs
+++ b/frontend/src/app/main/ui/releases/v2_14.cljs
@@ -186,4 +186,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_14.scss b/frontend/src/app/main/ui/releases/v2_14.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_14.scss
+++ b/frontend/src/app/main/ui/releases/v2_14.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_15.cljs b/frontend/src/app/main/ui/releases/v2_15.cljs
index fc0997de1b..206155c6ac 100644
--- a/frontend/src/app/main/ui/releases/v2_15.cljs
+++ b/frontend/src/app/main/ui/releases/v2_15.cljs
@@ -165,4 +165,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_15.scss b/frontend/src/app/main/ui/releases/v2_15.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_15.scss
+++ b/frontend/src/app/main/ui/releases/v2_15.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_16.cljs b/frontend/src/app/main/ui/releases/v2_16.cljs
index d361ba5def..aea08d9c9e 100644
--- a/frontend/src/app/main/ui/releases/v2_16.cljs
+++ b/frontend/src/app/main/ui/releases/v2_16.cljs
@@ -2,7 +2,7 @@
 ;; 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
+;; Copyright (c) KALEIDOS INC Sucursal en España SL
 
 (ns app.main.ui.releases.v2-16
   (:require-macros [app.main.style :as stl])
@@ -222,4 +222,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_16.scss b/frontend/src/app/main/ui/releases/v2_16.scss
index 7251260139..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_16.scss
+++ b/frontend/src/app/main/ui/releases/v2_16.scss
@@ -2,99 +2,110 @@
 // 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
+// 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_17.cljs b/frontend/src/app/main/ui/releases/v2_17.cljs
index de9b7d7123..0a69cb1b97 100644
--- a/frontend/src/app/main/ui/releases/v2_17.cljs
+++ b/frontend/src/app/main/ui/releases/v2_17.cljs
@@ -2,7 +2,7 @@
 ;; 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
+;; Copyright (c) KALEIDOS INC Sucursal en España SL
 
 (ns app.main.ui.releases.v2-17
   (:require-macros [app.main.style :as stl])
@@ -227,4 +227,4 @@
           [:> button* {:class (stl/css :next-btn)
                        :on-click finish
                        :variant "primary"}
-           "Let's go"]]]]]])))
\ No newline at end of file
+           "Let's go"]]]]]])))
diff --git a/frontend/src/app/main/ui/releases/v2_17.scss b/frontend/src/app/main/ui/releases/v2_17.scss
index 7251260139..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_17.scss
+++ b/frontend/src/app/main/ui/releases/v2_17.scss
@@ -2,99 +2,110 @@
 // 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
+// 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_18.cljs b/frontend/src/app/main/ui/releases/v2_18.cljs
index 859b00c850..fe91d560cc 100644
--- a/frontend/src/app/main/ui/releases/v2_18.cljs
+++ b/frontend/src/app/main/ui/releases/v2_18.cljs
@@ -2,7 +2,7 @@
 ;; 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
+;; Copyright (c) KALEIDOS INC Sucursal en España SL
 
 (ns app.main.ui.releases.v2-18
   (:require-macros [app.main.style :as stl])
@@ -185,4 +185,4 @@
           [:> button* {:class (stl/css :next-btn)
                        :on-click finish
                        :variant "primary"}
-           "Let's go"]]]]]])))
\ No newline at end of file
+           "Let's go"]]]]]])))
diff --git a/frontend/src/app/main/ui/releases/v2_18.scss b/frontend/src/app/main/ui/releases/v2_18.scss
index 7251260139..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_18.scss
+++ b/frontend/src/app/main/ui/releases/v2_18.scss
@@ -2,99 +2,110 @@
 // 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
+// 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_2.cljs b/frontend/src/app/main/ui/releases/v2_2.cljs
index 4796d10801..4f9c172565 100644
--- a/frontend/src/app/main/ui/releases/v2_2.cljs
+++ b/frontend/src/app/main/ui/releases/v2_2.cljs
@@ -51,4 +51,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_2.scss b/frontend/src/app/main/ui/releases/v2_2.scss
index d479dbd02c..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_2.scss
+++ b/frontend/src/app/main/ui/releases/v2_2.scss
@@ -4,72 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-480;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-s);
+}
+
+.feature-title {
+  @include use-typography("body-large");
+
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
+}
+
+.feature-list {
+  @include use-typography("body-medium");
+
+  color: var(--color-foreground-secondary);
+  list-style: disc;
+  display: grid;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_3.cljs b/frontend/src/app/main/ui/releases/v2_3.cljs
index 28cf355267..c226a38440 100644
--- a/frontend/src/app/main/ui/releases/v2_3.cljs
+++ b/frontend/src/app/main/ui/releases/v2_3.cljs
@@ -103,7 +103,10 @@
           [:p {:class (stl/css :feature-content)}
            "Penpot plugins are quite easy to install."]
           [:p {:class (stl/css :feature-content)}
-           "Be sure to keep an eye on our evolving " [:a {:href "https://penpot.app/penpothub" :target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
+           "Be sure to keep an eye on our evolving "
+           [:a {:class (stl/css :link)
+                :href "https://penpot.app/penpothub"
+                :target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
 
           [:p {:class (stl/css :feature-content)}
            "This is just the beginning of a myriad of possibilities. Let’s build this community together ❤️."]]
@@ -119,4 +122,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_3.scss b/frontend/src/app/main/ui/releases/v2_3.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_3.scss
+++ b/frontend/src/app/main/ui/releases/v2_3.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_4.cljs b/frontend/src/app/main/ui/releases/v2_4.cljs
index ea5547cff8..f1f17b0bfa 100644
--- a/frontend/src/app/main/ui/releases/v2_4.cljs
+++ b/frontend/src/app/main/ui/releases/v2_4.cljs
@@ -147,4 +147,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_4.scss b/frontend/src/app/main/ui/releases/v2_4.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_4.scss
+++ b/frontend/src/app/main/ui/releases/v2_4.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_5.cljs b/frontend/src/app/main/ui/releases/v2_5.cljs
index dd7d2c934e..093f931701 100644
--- a/frontend/src/app/main/ui/releases/v2_5.cljs
+++ b/frontend/src/app/main/ui/releases/v2_5.cljs
@@ -183,4 +183,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_5.scss b/frontend/src/app/main/ui/releases/v2_5.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_5.scss
+++ b/frontend/src/app/main/ui/releases/v2_5.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_6.cljs b/frontend/src/app/main/ui/releases/v2_6.cljs
index 91ceea8616..f0de43e7f4 100644
--- a/frontend/src/app/main/ui/releases/v2_6.cljs
+++ b/frontend/src/app/main/ui/releases/v2_6.cljs
@@ -175,4 +175,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_6.scss b/frontend/src/app/main/ui/releases/v2_6.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_6.scss
+++ b/frontend/src/app/main/ui/releases/v2_6.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_7.cljs b/frontend/src/app/main/ui/releases/v2_7.cljs
index 3a630d9407..07aeb92818 100644
--- a/frontend/src/app/main/ui/releases/v2_7.cljs
+++ b/frontend/src/app/main/ui/releases/v2_7.cljs
@@ -148,4 +148,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_7.scss b/frontend/src/app/main/ui/releases/v2_7.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_7.scss
+++ b/frontend/src/app/main/ui/releases/v2_7.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_8.cljs b/frontend/src/app/main/ui/releases/v2_8.cljs
index ef4d1aa543..66dd33ec33 100644
--- a/frontend/src/app/main/ui/releases/v2_8.cljs
+++ b/frontend/src/app/main/ui/releases/v2_8.cljs
@@ -204,4 +204,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_8.scss b/frontend/src/app/main/ui/releases/v2_8.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_8.scss
+++ b/frontend/src/app/main/ui/releases/v2_8.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }
diff --git a/frontend/src/app/main/ui/releases/v2_9.cljs b/frontend/src/app/main/ui/releases/v2_9.cljs
index a294b232d6..094cc3e40b 100644
--- a/frontend/src/app/main/ui/releases/v2_9.cljs
+++ b/frontend/src/app/main/ui/releases/v2_9.cljs
@@ -116,4 +116,3 @@
                        :on-click finish
                        :variant "primary"}
            "Let's go"]]]]]])))
-
diff --git a/frontend/src/app/main/ui/releases/v2_9.scss b/frontend/src/app/main/ui/releases/v2_9.scss
index 7df9455abf..11284583c1 100644
--- a/frontend/src/app/main/ui/releases/v2_9.scss
+++ b/frontend/src/app/main/ui/releases/v2_9.scss
@@ -4,97 +4,108 @@
 //
 // 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;
+  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 {
   display: grid;
-  grid-template-columns: deprecated.$s-324 1fr;
-  height: deprecated.$s-500;
-  width: deprecated.$s-888;
-  border-radius: deprecated.$br-8;
-  background-color: var(--modal-background-color);
-  border: deprecated.$s-2 solid var(--modal-border-color);
+  grid-template-columns: px2rem(324) 1fr;
+  block-size: $sz-500;
+  inline-size: px2rem(888);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+  border: $b-2 solid var(--color-background-quaternary);
 }
 
 .start-image {
-  width: deprecated.$s-324;
-  border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+  inline-size: px2rem(324);
+  border-radius: $br-8 0 0 $br-8;
 }
 
 .modal-content {
-  padding: deprecated.$s-40;
+  padding: $sz-40;
   display: grid;
-  grid-template-rows: auto 1fr deprecated.$s-32;
-  gap: deprecated.$s-24;
-
-  a {
-    color: var(--button-primary-background-color-rest);
-  }
+  grid-template-rows: auto 1fr $sz-32;
+  gap: var(--sp-xxl);
 }
 
 .modal-header {
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
+}
+
+.link {
+  color: var(--color-accent-primary);
 }
 
 .version-tag {
-  @include deprecated.flex-center;
-  @include deprecated.headline-small-typography;
+  @include use-typography("headline-small");
 
-  height: deprecated.$s-32;
-  width: deprecated.$s-96;
-  background-color: var(--communication-tag-background-color);
-  color: var(--communication-tag-foreground-color);
-  border-radius: deprecated.$br-8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-96;
+  background-color: var(--color-foreground-primary);
+  color: var(--color-background-tertiary);
+  border-radius: $br-8;
 }
 
 .modal-title {
-  @include deprecated.headline-large-typography;
+  @include use-typography("headline-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .features-block {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-16;
-  width: deprecated.$s-440;
+  gap: var(--sp-l);
+  inline-size: px2rem(440);
 }
 
 .feature {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .feature-title {
-  @include deprecated.body-large-typography;
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
 }
 
 .feature-content {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
   margin: 0;
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
 }
 
 .feature-list {
-  @include deprecated.body-medium-typography;
+  @include use-typography("body-medium");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   list-style: disc;
   display: grid;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .navigation {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-areas: "bullets button";
 }