diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 37fec9e299..b5613862af 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -30,10 +30,10 @@
    [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.controls.checkbox :refer [checkbox*]]
    [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]
-   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs*]]
    [app.main.ui.workspace.colorpicker.color-tokens :refer [token-section*]]
    [app.main.ui.workspace.colorpicker.gradients :refer [gradients*]]
@@ -476,16 +476,10 @@
 
               (when (some? (:image current-color))
                 [:div {:class (stl/css :checkbox-option)}
-                 [:label {:for "keep-aspect-ratio"
-                          :class (stl/css-case  :global/checked keep-aspect-ratio?)}
-                  [:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
-                   (when keep-aspect-ratio?
-                     deprecated-icon/status-tick)]
-                  (tr "media.keep-aspect-ratio")
-                  [:input {:type "checkbox"
-                           :id "keep-aspect-ratio"
-                           :checked keep-aspect-ratio?
-                           :on-change handle-change-keep-aspect-ratio}]]])
+                 [:> checkbox* {:id "keep-aspect-ratio"
+                                :checked keep-aspect-ratio?
+                                :on-change handle-change-keep-aspect-ratio
+                                :label (tr "media.keep-aspect-ratio")}]])
 
               [:> button* {:class (stl/css :choose-image)
                            :variant "secondary"
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss
index 1e6541042e..09e5c5c41a 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker.scss
@@ -112,105 +112,11 @@
   inline-size: 100%;
 }
 
-// TODO: Use a DS checkbox component
 .checkbox-option {
   display: flex;
   align-items: center;
-  margin-block: var(--sp-l) 0;
+  margin-block: var(--sp-l) var(--sp-m);
   margin-inline: 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 {