diff --git a/frontend/playwright/data/workspace/get-file-many-colors.json b/frontend/playwright/data/workspace/get-file-many-colors.json
new file mode 100644
index 0000000000..bd2c2816c2
--- /dev/null
+++ b/frontend/playwright/data/workspace/get-file-many-colors.json
@@ -0,0 +1,423 @@
+{
+  "~:features": {
+    "~#set": [
+      "layout/grid",
+      "styles/v2",
+      "components/v2",
+      "fdata/shape-data-type"
+    ]
+  },
+  "~:permissions": {
+    "~:type": "~:membership",
+    "~:is-owner": true,
+    "~:is-admin": true,
+    "~:can-edit": true,
+    "~:can-read": true,
+    "~:is-logged": true
+  },
+  "~:has-media-trimmed": false,
+  "~:comment-thread-seqn": 0,
+  "~:name": "Many colors",
+  "~:revn": 2,
+  "~:modified-at": "~m1717512948250",
+  "~:id": "~uc1249a66-fce0-8175-8004-7433fe4be8bc",
+  "~:is-shared": true,
+  "~:version": 48,
+  "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b",
+  "~:created-at": "~m1717512934704",
+  "~:data": {
+    "~:pages": [
+      "~uc1249a66-fce0-8175-8004-7433fe4be8bd"
+    ],
+    "~:pages-index": {
+      "~uc1249a66-fce0-8175-8004-7433fe4be8bd": {
+        "~:options": {},
+        "~:objects": {
+          "~u00000000-0000-0000-0000-000000000000": {
+            "~#shape": {
+              "~:y": 0,
+              "~:hide-fill-on-export": false,
+              "~:transform": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:rotation": 0,
+              "~:name": "Root Frame",
+              "~:width": 0.01,
+              "~:type": "~:frame",
+              "~:points": [
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 0
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0.01,
+                    "~:y": 0
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0.01,
+                    "~:y": 0.01
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 0.01
+                  }
+                }
+              ],
+              "~:proportion-lock": false,
+              "~:transform-inverse": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:id": "~u00000000-0000-0000-0000-000000000000",
+              "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:strokes": [],
+              "~:x": 0,
+              "~:proportion": 1.0,
+              "~:selrect": {
+                "~#rect": {
+                  "~:x": 0,
+                  "~:y": 0,
+                  "~:width": 0.01,
+                  "~:height": 0.01,
+                  "~:x1": 0,
+                  "~:y1": 0,
+                  "~:x2": 0.01,
+                  "~:y2": 0.01
+                }
+              },
+              "~:fills": [
+                {
+                  "~:fill-color": "#FFFFFF",
+                  "~:fill-opacity": 1
+                }
+              ],
+              "~:flip-x": null,
+              "~:height": 0.01,
+              "~:flip-y": null,
+              "~:shapes": [
+                "~uc70224ec-c410-807b-8004-743400e00be8"
+              ]
+            }
+          },
+          "~uc70224ec-c410-807b-8004-743400e00be8": {
+            "~#shape": {
+              "~:y": 255,
+              "~:r1": 0,
+              "~:r2": 0,
+              "~:r3": 0,
+              "~:r4": 0,
+              "~:transform": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:rotation": 0,
+              "~:grow-type": "~:fixed",
+              "~:hide-in-viewer": false,
+              "~:name": "Rectangle",
+              "~:width": 279.0000000000001,
+              "~:type": "~:rect",
+              "~:points": [
+                {
+                  "~#point": {
+                    "~:x": 523,
+                    "~:y": 255
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 802.0000000000001,
+                    "~:y": 255
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 802.0000000000001,
+                    "~:y": 534
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 523,
+                    "~:y": 534
+                  }
+                }
+              ],
+              "~:proportion-lock": false,
+              "~:transform-inverse": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:id": "~uc70224ec-c410-807b-8004-743400e00be8",
+              "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:strokes": [],
+              "~:x": 523,
+              "~:proportion": 1,
+              "~:selrect": {
+                "~#rect": {
+                  "~:x": 523,
+                  "~:y": 255,
+                  "~:width": 279.0000000000001,
+                  "~:height": 279,
+                  "~:x1": 523,
+                  "~:y1": 255,
+                  "~:x2": 802.0000000000001,
+                  "~:y2": 534
+                }
+              },
+              "~:fills": [
+                {
+                  "~:fill-color": "#B1B2B5",
+                  "~:fill-opacity": 1
+                }
+              ],
+              "~:flip-x": null,
+              "~:ry": 0,
+              "~:height": 279,
+              "~:flip-y": null
+            }
+          }
+        },
+        "~:id": "~uc1249a66-fce0-8175-8004-7433fe4be8bd",
+        "~:name": "Page 1"
+      }
+    },
+    "~:id": "~uc1249a66-fce0-8175-8004-7433fe4be8bc",
+    "~:options": {
+      "~:components-v2": true
+    },
+    "~:recent-colors": [
+      {
+        "~:color": "#187cd5",
+        "~:opacity": 1
+      }
+    ],
+    "~:colors": {
+      "~uc70224ec-c410-807b-8004-74340616d000": {
+        "~:path": "",
+        "~:color": "#d84b4b",
+        "~:name": "color-01",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d000"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d001": {
+        "~:path": "",
+        "~:color": "#d86f4b",
+        "~:name": "color-02",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d001"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d002": {
+        "~:path": "",
+        "~:color": "#d8924b",
+        "~:name": "color-03",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d002"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d003": {
+        "~:path": "",
+        "~:color": "#d8b54b",
+        "~:name": "color-04",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d003"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d004": {
+        "~:path": "",
+        "~:color": "#d8d84b",
+        "~:name": "color-05",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d004"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d005": {
+        "~:path": "",
+        "~:color": "#b5d84b",
+        "~:name": "color-06",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d005"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d006": {
+        "~:path": "",
+        "~:color": "#92d84b",
+        "~:name": "color-07",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d006"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d007": {
+        "~:path": "",
+        "~:color": "#6fd84b",
+        "~:name": "color-08",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d007"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d008": {
+        "~:path": "",
+        "~:color": "#4bd84b",
+        "~:name": "color-09",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d008"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d009": {
+        "~:path": "",
+        "~:color": "#4bd86f",
+        "~:name": "color-10",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d009"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00a": {
+        "~:path": "",
+        "~:color": "#4bd892",
+        "~:name": "color-11",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00a"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00b": {
+        "~:path": "",
+        "~:color": "#4bd8b5",
+        "~:name": "color-12",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00b"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00c": {
+        "~:path": "",
+        "~:color": "#4bd8d8",
+        "~:name": "color-13",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00c"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00d": {
+        "~:path": "",
+        "~:color": "#4bb5d8",
+        "~:name": "color-14",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00d"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00e": {
+        "~:path": "",
+        "~:color": "#4b92d8",
+        "~:name": "color-15",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00e"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00f": {
+        "~:path": "",
+        "~:color": "#4b6fd8",
+        "~:name": "color-16",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00f"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d010": {
+        "~:path": "",
+        "~:color": "#4b4bd8",
+        "~:name": "color-17",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d010"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d011": {
+        "~:path": "",
+        "~:color": "#6f4bd8",
+        "~:name": "color-18",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d011"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d012": {
+        "~:path": "",
+        "~:color": "#924bd8",
+        "~:name": "color-19",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d012"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d013": {
+        "~:path": "",
+        "~:color": "#b54bd8",
+        "~:name": "color-20",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d013"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d014": {
+        "~:path": "",
+        "~:color": "#d84bd8",
+        "~:name": "color-21",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d014"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d015": {
+        "~:path": "",
+        "~:color": "#d84bb5",
+        "~:name": "color-22",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d015"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d016": {
+        "~:path": "",
+        "~:color": "#d84b92",
+        "~:name": "color-23",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d016"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d017": {
+        "~:path": "",
+        "~:color": "#d84b6f",
+        "~:name": "color-24",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d017"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index 92ac8dddb0..db5a1002aa 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -28,6 +28,50 @@ const setupFileWithAssets = async (workspace) => {
   return { fileId, pageId };
 };
 
+test.describe("Color palette", () => {
+  test("Shows the scroll arrows and the palette menu", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(
+      /get\-file\?/,
+      "workspace/get-file-many-colors.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "c1249a66-fce0-8175-8004-7433fe4be8bc",
+      pageId: "c1249a66-fce0-8175-8004-7433fe4be8bd",
+    });
+
+    await workspace.clickColorPalette();
+    await workspace.palette.locator('[class*="palette-actions"]').click();
+    await page.getByText("File library").click();
+    await expect(
+      workspace.palette.getByRole("button", { name: "color-01" }),
+    ).toBeVisible();
+    await page.mouse.move(640, 300);
+    // The arrows are a small part of the palette: compare every pixel.
+    await expect(workspace.palette).toHaveScreenshot("color-palette.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+
+    await workspace.palette.locator('[class*="right-arrow"]').click();
+    await page.mouse.move(640, 300);
+    await expect(workspace.palette).toHaveScreenshot(
+      "color-palette-scrolled.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
+
+    await workspace.palette.locator('[class*="palette-actions"]').click();
+    await expect(page.getByText("Recent colors")).toBeVisible();
+    await page.mouse.move(640, 300);
+    await expect(page).toHaveScreenshot("color-palette-menu.png", {
+      clip: { x: 300, y: 400, width: 700, height: 320 },
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+});
+
 test.describe("Viewport", () => {
   test("Shows the workspace correctly for a blank file", async ({ page }) => {
     const workspace = new WorkspacePage(page);
diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs
index 1c95587fc4..8b97d27034 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette.cljs
@@ -18,9 +18,8 @@
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.main.ui.ds.utilities.swatch :refer [swatch*]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.color :as uc]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -186,10 +185,12 @@
                           :on-click on-toggle-search
                           :aria-label (tr "workspace.assets.search")}]])
 
+     ;; Arrows for scrolling the color palette, those buttons no not form part of the DS
      (when show-arrows?
        [:button {:class (stl/css :left-arrow)
                  :disabled (= offset 0)
-                 :on-click on-left-arrow-click} deprecated-icon/arrow])
+                 :on-click on-left-arrow-click}
+        [:> icon* {:icon-id i/arrow :class (stl/css :arrow-icon)}]])
      [:div {:class (stl/css :color-palette-content)
             :ref container
             :on-wheel on-scroll}
@@ -212,7 +213,8 @@
      (when show-arrows?
        [:button {:class (stl/css :right-arrow)
                  :disabled (= offset max-offset)
-                 :on-click on-right-arrow-click} deprecated-icon/arrow])]))
+                 :on-click on-right-arrow-click}
+        [:> icon* {:icon-id i/arrow :class (stl/css :arrow-icon)}]])]))
 
 (mf/defc recent-colors-palette*
   {::mf/private true}
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index fb0af2c527..5ac73b02a6 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -4,10 +4,12 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .color-palette {
-  height: 100%;
+  block-size: 100%;
   display: flex;
 }
 
@@ -15,63 +17,60 @@
 .palette-search-collapsed {
   display: flex;
   align-items: center;
-  padding-inline: deprecated.$s-4;
+  padding-inline: var(--sp-xs);
 }
 
 .palette-search {
-  gap: deprecated.$s-4;
-  width: deprecated.$s-192;
-  min-width: deprecated.$s-192;
+  gap: var(--sp-xs);
+  inline-size: $sz-192;
+  min-inline-size: $sz-192;
 }
 
 .palette-search-collapsed {
-  width: deprecated.$s-32;
-  min-width: deprecated.$s-32;
+  inline-size: $sz-32;
+  min-inline-size: $sz-32;
 }
 
+// Raw buttons on purpose: full-height scroll arrows with a fade, not DS
+// button sizes.
 .left-arrow,
 .right-arrow {
-  @include deprecated.button-style;
-  @include deprecated.flex-center;
+  --arrow-foreground-color: var(--color-foreground-secondary);
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
-  height: 100%;
-  width: deprecated.$s-24;
+  block-size: 100%;
+  inline-size: $sz-24;
   padding: 0;
-  z-index: deprecated.$z-index-5;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--arrow-foreground-color);
 
-  svg {
-    @extend %button-icon;
-
-    stroke: var(--icon-foreground);
-  }
+  // Above the color list, which is positioned and comes after the left
+  // arrow, so the fade covers the colors that scroll under it.
+  z-index: 5;
 
   &::after {
     content: "";
     position: absolute;
-    z-index: deprecated.$z-index-1;
-    bottom: 0;
-    left: calc(-1 * deprecated.$s-80);
-    height: 100%;
-    width: deprecated.$s-80;
-    background-image: linear-gradient(
-      to left,
-      var(--palette-button-shadow-initial) 0%,
-      var(--palette-button-shadow-final) 100%
-    );
+    z-index: 1;
+    inset-block-end: 0;
+    inset-inline-start: calc(-1 * px2rem(80));
+    block-size: 100%;
+    inline-size: px2rem(80);
+    background-image: linear-gradient(to left, var(--color-background-primary) 0%, transparent 100%);
     pointer-events: none;
   }
 
   &:hover {
-    svg {
-      stroke: var(--button-foreground-hover);
-    }
+    --arrow-foreground-color: var(--color-accent-primary);
   }
 
   &:disabled {
-    svg {
-      stroke: var(--button-foreground-color-disabled);
-    }
+    --arrow-foreground-color: var(--color-foreground-disabled);
 
     &::after {
       background-image: none;
@@ -81,19 +80,15 @@
 
 .left-arrow {
   &::after {
-    left: deprecated.$s-24;
-    background-image: linear-gradient(
-      to right,
-      var(--palette-button-shadow-initial) 0%,
-      var(--palette-button-shadow-final) 100%
-    );
+    inset-inline-start: $sz-24;
+    background-image: linear-gradient(to right, var(--color-background-primary) 0%, transparent 100%);
   }
 
   &:disabled::after {
     background-image: none;
   }
 
-  svg {
+  .arrow-icon {
     transform: rotate(180deg);
   }
 }
@@ -108,7 +103,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: var(--color-cell-width);
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .color-cell {
@@ -121,17 +116,18 @@
   grid-template-columns: 100%;
   grid-template-rows: auto 1fr;
   justify-items: center;
-  height: 100%;
+  block-size: 100%;
 
   &.no-text {
-    @include deprecated.flex-center;
-
-    width: deprecated.$s-32;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    inline-size: $sz-32;
   }
 }
 
 .color-palette-empty {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
-  color: var(--palette-text-color);
+  color: var(--color-foreground-secondary);
 }
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
index 4a67f0cdb1..5085b9af12 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
@@ -12,7 +12,7 @@
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -75,7 +75,7 @@
              (dm/str "(" (:total-colors library) ")")]]
            (when (= selected id)
              [:span {:class (stl/css :icon-wrapper)}
-              deprecated-icon/tick])]
+              [:> icon* {:icon-id i/tick :size "s"}]])]
           [:div {:class (stl/css :color-sample)
                  :style {:--bullet-size "20px"}}
            (for [color colors]
@@ -100,7 +100,7 @@
 
          (when (= selected :file)
            [:span {:class (stl/css :icon-wrapper)}
-            deprecated-icon/tick])]
+            [:> icon* {:icon-id i/tick :size "s"}]])]
         [:div {:class (stl/css :color-sample)
                :style {:--bullet-size "20px"}}
          (for [color local-colors]
@@ -123,7 +123,7 @@
 
          (when (= selected :recent)
            [:span {:class (stl/css :icon-wrapper)}
-            deprecated-icon/tick])]
+            [:> icon* {:icon-id i/tick :size "s"}]])]
         [:div {:class (stl/css :color-sample)
                :style {:--bullet-size "20px"}}
 
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
index 48fc511406..bce2b5f6d0 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
@@ -4,101 +4,91 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .palette-menu {
   position: absolute;
-  left: auto;
-  bottom: var(--height);
-  max-width: deprecated.$s-480;
-  padding: deprecated.$s-4;
-  margin: 0 0 deprecated.$s-4 0;
-  z-index: deprecated.$z-index-4;
-  border-radius: deprecated.$br-10;
-  background-color: var(--context-menu-background-color);
+  inset-inline-start: auto;
+  inset-block-end: var(--height);
+  max-inline-size: $sz-480;
+  padding: var(--sp-xs);
+  margin: 0 0 var(--sp-xs) 0;
+
+  // Context menu level of the legacy scale, inside the palette.
+  z-index: 4;
+  border-radius: px2rem(10);
+  background-color: var(--color-background-tertiary);
 
   .palette-library,
   .recent-colors,
   .file-library {
+    --library-name-color: var(--color-foreground-secondary);
+
     position: relative;
     display: flex;
     align-items: flex-start;
-    width: 100%;
-    padding: deprecated.$s-8;
-    border-radius: deprecated.$br-8;
-    margin-bottom: deprecated.$s-4;
+    inline-size: 100%;
+    padding: var(--sp-s);
+    border-radius: $br-8;
+    margin-block-end: var(--sp-xs);
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
 
     .option-wrapper {
-      width: 100%;
+      inline-size: 100%;
 
       .library-name {
-        @include deprecated.body-small-typography;
+        @include use-typography("body-small");
 
-        color: var(--context-menu-foreground-color);
+        color: var(--library-name-color);
         display: grid;
-        grid-template-columns: 1fr deprecated.$s-24;
+        grid-template-columns: 1fr $sz-24;
 
         .lib-name-wrapper {
           display: flex;
-          max-width: deprecated.$s-400;
+          max-inline-size: $sz-400;
 
           .lib-name {
-            @include deprecated.text-ellipsis;
-
-            max-width: deprecated.$s-380;
+            display: block;
+            max-inline-size: px2rem(380);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
 
           .lib-num {
-            margin-left: deprecated.$s-4;
+            margin-inline-start: var(--sp-xs);
           }
         }
 
         .icon-wrapper {
-          margin-left: deprecated.$s-4;
-
-          @include deprecated.flex-center;
-
-          svg {
-            @extend %button-icon-small;
-            @include deprecated.flex-center;
-
-            stroke: var(--icon-foreground);
-          }
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-inline-start: var(--sp-xs);
         }
       }
 
       .color-sample {
         display: flex;
         flex-direction: row;
-        gap: deprecated.$s-8;
-        margin-top: deprecated.$s-4;
+        gap: var(--sp-s);
+        margin-block-start: var(--sp-xs);
       }
     }
 
     &.selected,
     &:hover {
-      .option-wrapper .library-name {
-        color: var(--context-menu-foreground-color-selected);
-
-        .icon-wrapper {
-          @include deprecated.flex-center;
-
-          svg {
-            @include deprecated.flex-center;
-            @extend %button-icon-small;
-
-            stroke: var(--context-menu-foreground-color-selected);
-          }
-        }
-      }
+      --library-name-color: var(--color-foreground-primary);
     }
 
     &:hover {
-      background-color: var(--context-menu-background-color-selected);
+      background-color: var(--color-background-quaternary);
     }
   }
 }