diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 0498e2d656..b468b71038 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -28,6 +28,8 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
    [app.main.ui.components.select :refer [select]]
+   [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]
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.hooks :as hooks]
@@ -433,10 +435,12 @@
 
        (when (and (not= selected-mode :image)
                   (= color-style :direct-color))
-         [:button {:class (stl/css-case :picker-btn true
-                                        :selected picking-color?)
-                   :on-click handle-click-picker}
-          deprecated-icon/picker])
+         [:> icon-button* {:icon i/picker
+                           :variant "ghost"
+                           :aria-label (tr "workspace.colorpicker.color-picker")
+                           :aria-pressed picking-color?
+                           :class (stl/css :picker-btn)
+                           :on-click handle-click-picker}])
 
        (when (= color-style :token-color)
          [:div {:class (stl/css :token-color-title)}
@@ -467,7 +471,8 @@
              [:div {:class (stl/css :select-image)}
               [:div {:class (stl/css :content)}
                (when (:image current-color)
-                 [:img {:src uri}])]
+                 [:img {:src uri
+                        :class (stl/css :content-image)}])]
 
               (when (some? (:image current-color))
                 [:div {:class (stl/css :checkbox-option)}
@@ -481,11 +486,10 @@
                            :id "keep-aspect-ratio"
                            :checked keep-aspect-ratio?
                            :on-change handle-change-keep-aspect-ratio}]]])
-              [:button
-               {:class (stl/css :choose-image)
-                :title (tr "media.choose-image")
-                :aria-label (tr "media.choose-image")
-                :on-click on-fill-image-click}
+
+              [:> button* {:class (stl/css :choose-image)
+                           :variant "secondary"
+                           :on-click on-fill-image-click}
                (tr "media.choose-image")
                [:& file-uploader
                 {:input-id "fill-image-upload"
@@ -554,11 +558,10 @@
                             :color-origin color-origin}])]
      (when (fn? on-accept)
        [:div {:class (stl/css :actions)}
-        [:button {:class (stl/css-case
-                          :accept-color true
-                          :btn-disabled disabled-color-accept?)
-                  :on-click on-color-accept
-                  :disabled disabled-color-accept?}
+        [:> button* {:class (stl/css :accept-color)
+                     :variant "primary"
+                     :on-click on-color-accept
+                     :disabled disabled-color-accept?}
          (tr "workspace.libraries.colors.save-color")]])]))
 
 (defn calculate-position
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss
index b9fe67d6f5..366eecbdd7 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker.scss
@@ -5,23 +5,25 @@
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
 @use "ds/typography.scss" as t;
-@use "ds/spacing";
 @use "ds/_borders.scss" as *;
 @use "ds/_sizes.scss" as *;
 @use "ds/_utils.scss" as *;
-@use "refactor/basic-rules.scss" as *;
 
 .colorpicker-tooltip {
-  @extend %modal-background;
-
   --colorpicker-width: #{$sz-284};
 
-  left: calc(10 * px2rem(140));
-  padding: var(--sp-m);
-  width: var(--colorpicker-width);
-  overflow: auto;
+  position: absolute;
   display: flex;
   flex-direction: column;
+  inset-inline-start: calc(10 * px2rem(140));
+  inline-size: var(--colorpicker-width);
+  padding: var(--sp-m);
+  border-radius: $br-8;
+  box-shadow: 0 0 12px 0 var(--color-shadow-dark);
+  color: var(--color-foreground-primary);
+  background-color: var(--color-background-primary);
+  z-index: var(--z-index-set);
+  overflow: auto;
 }
 
 .colorpicker {
@@ -34,7 +36,7 @@
   align-items: flex-start;
   flex-direction: row-reverse;
   justify-content: space-between;
-  height: $sz-40;
+  block-size: $sz-40;
 }
 
 .top-actions-right {
@@ -42,114 +44,14 @@
   gap: var(--sp-s);
 }
 
-.opacity-input-wrapper {
-  @extend %input-element;
-  @include t.use-typography("body-small");
-
-  width: px2rem(68);
-}
-
-// TODO: change to DS button component
-.picker-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: none;
-  cursor: pointer;
-  background-color: transparent;
-  border: $b-1 solid transparent;
-  height: var(--sp-xl);
-  width: var(--sp-xl);
-  border-radius: $br-4;
-  padding: 0;
-  margin-top: var(--sp-xs);
-
-  svg {
-    @extend %button-icon;
-
-    stroke: var(--button-tertiary-foreground-color-rest);
-  }
-
-  &:hover {
-    svg {
-      stroke: var(--button-tertiary-foreground-color-focus);
-    }
-  }
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-
-    svg {
-      stroke: var(--button-secondary-foreground-color-hover);
-    }
-  }
-
-  &:active {
-    outline: none;
-    border: $b-1 solid transparent;
-
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
-  }
-
-  &.selected {
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
-  }
-}
-
-.gradient-buttons {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-s);
-}
-
-.gradient-btn {
-  @extend %button-tertiary;
-
-  height: var(--sp-xl);
-  width: var(--sp-xl);
-  border-radius: $br-4;
-  border: $b-2 solid transparent;
-
-  &:hover {
-    border: $b-2 solid var(--colorpicker-details-color-selected);
-  }
-}
-
-.linear-gradient-btn {
-  background: linear-gradient(180deg, var(--color-foreground-secondary), transparent);
-
-  &.selected {
-    background: linear-gradient(to bottom, rgb(126 255 245 / 1) 0%, rgb(126 255 245 / 0.2) 100%);
-    border: $b-2 solid var(--colorpicker-details-color-selected);
-  }
-}
-
-.radial-gradient-btn {
-  background: radial-gradient(transparent, var(--color-foreground-secondary));
-
-  &.selected {
-    background: radial-gradient(rgb(126 255 245 / 1) 0%, rgb(126 255 245 / 0.2) 100%);
-    border: $b-2 solid var(--colorpicker-details-color-selected);
-  }
-}
-
 .actions {
   display: flex;
   gap: var(--sp-xs);
 }
 
 .accept-color {
-  @include t.use-typography("headline-small");
-  @extend %button-primary;
-
-  width: 100%;
-  height: var(--sp-xxxl);
-  margin-top: var(--sp-s);
+  justify-content: center;
+  inline-size: 100%;
 }
 
 .picker-detail-wrapper {
@@ -157,17 +59,18 @@
   justify-content: center;
   align-items: center;
   position: relative;
-  margin: var(--sp-m) 0 var(--sp-s) 0;
+  margin-block: var(--sp-m) var(--sp-s);
+  margin-inline: 0;
 }
 
 .center-circle {
-  width: var(--sp-xxl);
-  height: var(--sp-xxl);
-  border: $b-2 solid var(--colorpicker-details-color);
-  border-radius: $br-circle;
   position: absolute;
-  left: 50%;
-  top: 50%;
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
+  inline-size: var(--sp-xxl);
+  block-size: var(--sp-xxl);
+  border: $b-2 solid var(--color-background-quaternary);
+  border-radius: $br-circle;
   transform: translate(calc(-1 * var(--sp-m)), calc(-1 * var(--sp-m)));
 }
 
@@ -177,46 +80,137 @@
 }
 
 .select {
-  width: px2rem(116);
+  inline-size: px2rem(116);
 }
 
 .select-image {
-  margin-top: var(--sp-xs);
+  margin-block-start: var(--sp-xs);
 }
 
 .content {
-  border-radius: $br-8;
   display: flex;
   justify-content: center;
+  border-radius: $br-8;
+  block-size: px2rem(140);
+  margin-block-end: px2rem(6);
+  margin-inline-end: px2rem(1);
   background-image: url("/images/colorpicker-no-image.png");
   background-position: center;
   background-size: auto px2rem(140);
-  height: px2rem(140);
-  margin-bottom: $sz-6;
-  margin-right: $sz-1;
+}
 
-  img {
-    height: fit-content;
-    width: fit-content;
-    max-height: 100%;
-    max-width: 100%;
-    margin: auto;
-  }
+.content-image {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  inline-size: fit-content;
+  block-size: fit-content;
+  margin: auto;
 }
 
 .choose-image {
-  @extend %button-secondary;
-  @include t.use-typography("headline-small");
-
-  width: 100%;
-  margin-top: var(--sp-m);
-  height: var(--sp-xxxl);
+  justify-content: center;
+  inline-size: 100%;
 }
 
+// TODO: Use a DS checkbox component
 .checkbox-option {
-  @extend %input-checkbox;
+  display: flex;
+  align-items: center;
+  margin-block: var(--sp-l) 0;
+  margin-inline: 0;
 
-  margin: var(--sp-l) 0 0 0;
+  // The native checkbox markup (label, span, input, svg) has no dedicated
+  // classes; styling these elements directly is unavoidable.
+  label {
+    @include t.use-typography("body-small");
+
+    display: flex;
+    align-items: center;
+    gap: px2rem(6);
+    cursor: pointer;
+    color: var(--color-foreground-secondary);
+
+    span {
+      --checkbox-icon-background-color: var(--color-background-quaternary);
+      --checkbox-icon-border-color: var(--color-foreground-secondary);
+      --checkbox-icon-foreground-color: var(--color-background-primary);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      inline-size: $sz-16;
+      block-size: $sz-16;
+      min-inline-size: $sz-16;
+      min-block-size: $sz-16;
+      border-radius: $br-4;
+      background-color: var(--checkbox-icon-background-color);
+      border: $b-1 solid var(--checkbox-icon-border-color);
+
+      svg {
+        display: none;
+        inline-size: $sz-16;
+        block-size: $sz-16;
+        stroke: var(--checkbox-icon-foreground-color);
+      }
+
+      &:hover {
+        --checkbox-icon-border-color: var(--color-accent-primary-muted);
+      }
+
+      &:focus {
+        --checkbox-icon-border-color: var(--color-accent-primary);
+      }
+
+      &:global(.checked) {
+        --checkbox-icon-background-color: var(--color-accent-primary);
+        --checkbox-icon-border-color: var(--color-background-quaternary);
+
+        svg {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          inline-size: $sz-12;
+          block-size: $sz-12;
+          stroke-width: 1.33px;
+        }
+      }
+
+      &:global(.intermediate) {
+        --checkbox-icon-background-color: var(--color-foreground-secondary);
+        --checkbox-icon-foreground-color: var(--color-background-secondary);
+
+        svg {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          inline-size: $sz-12;
+          block-size: $sz-12;
+          stroke-width: 1.33px;
+        }
+      }
+
+      &:global(.unchecked) {
+        --checkbox-icon-border-color: var(--color-background-quaternary);
+      }
+    }
+
+    input {
+      margin: 0;
+    }
+
+    &:hover {
+      span {
+        --checkbox-icon-border-color: var(--color-accent-primary-muted);
+      }
+    }
+
+    &:focus,
+    &:focus-within {
+      span {
+        --checkbox-icon-border-color: var(--color-accent-primary);
+      }
+    }
+  }
 }
 
 .token-color-title {
@@ -225,5 +219,5 @@
   color: var(--color-foreground-secondary);
   display: flex;
   align-items: center;
-  height: var(--sp-xxxl);
+  block-size: var(--sp-xxxl);
 }