diff --git a/frontend/playwright/data/workspace/get-file-many-typographies.json b/frontend/playwright/data/workspace/get-file-many-typographies.json
new file mode 100644
index 0000000000..1ec32392eb
--- /dev/null
+++ b/frontend/playwright/data/workspace/get-file-many-typographies.json
@@ -0,0 +1,465 @@
+{
+  "~: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 typographies",
+  "~: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-74340616cffb": {
+        "~:path": "",
+        "~:color": "#187cd5",
+        "~:name": "test-color-187cd5",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616cffb"
+      }
+    },
+    "~:typographies": {
+      "~ue117f7f6-433c-807e-8004-862ab6ae3000": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "12",
+        "~:font-weight": "400",
+        "~:name": "Type 01 Regular 12",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3000",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3001": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "12",
+        "~:font-weight": "700",
+        "~:name": "Type 02 Bold 12",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3001",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3002": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "14",
+        "~:font-weight": "400",
+        "~:name": "Type 03 Regular 14",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3002",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3003": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "14",
+        "~:font-weight": "700",
+        "~:name": "Type 04 Bold 14",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3003",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3004": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "16",
+        "~:font-weight": "400",
+        "~:name": "Type 05 Regular 16",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3004",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3005": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "16",
+        "~:font-weight": "700",
+        "~:name": "Type 06 Bold 16",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3005",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3006": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "18",
+        "~:font-weight": "400",
+        "~:name": "Type 07 Regular 18",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3006",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3007": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "18",
+        "~:font-weight": "700",
+        "~:name": "Type 08 Bold 18",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3007",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3008": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "20",
+        "~:font-weight": "400",
+        "~:name": "Type 09 Regular 20",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3008",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3009": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "20",
+        "~:font-weight": "700",
+        "~:name": "Type 10 Bold 20",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3009",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300a": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "22",
+        "~:font-weight": "400",
+        "~:name": "Type 11 Regular 22",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300a",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300b": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "22",
+        "~:font-weight": "700",
+        "~:name": "Type 12 Bold 22",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300b",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300c": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "24",
+        "~:font-weight": "400",
+        "~:name": "Type 13 Regular 24",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300c",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300d": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "24",
+        "~:font-weight": "700",
+        "~:name": "Type 14 Bold 24",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300d",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300e": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "26",
+        "~:font-weight": "400",
+        "~:name": "Type 15 Regular 26",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300e",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300f": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "26",
+        "~:font-weight": "700",
+        "~:name": "Type 16 Bold 26",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300f",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      }
+    }
+  }
+}
\ 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 db5a1002aa..807d1a45cd 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -772,6 +772,57 @@ test.describe("Nudge modal", () => {
   });
 });
 
+test.describe("Text 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-typographies.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "c1249a66-fce0-8175-8004-7433fe4be8bc",
+      pageId: "c1249a66-fce0-8175-8004-7433fe4be8bd",
+    });
+
+    await workspace.palette
+      .getByRole("button", { name: "Typographies" })
+      .click();
+    await expect(
+      workspace.palette.getByText("Type 01 Regular 12"),
+    ).toBeVisible();
+    await page.mouse.move(640, 300);
+    // The arrows are a small part of the palette: compare every pixel.
+    await expect(workspace.palette).toHaveScreenshot("text-palette.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+
+    const rightArrow = workspace.palette.locator('[class*="right-arrow"]');
+    await rightArrow.hover();
+    await expect(workspace.palette).toHaveScreenshot(
+      "text-palette-arrow-hover.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
+
+    await rightArrow.click();
+    await page.mouse.move(640, 300);
+    await expect(workspace.palette).toHaveScreenshot(
+      "text-palette-scrolled.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
+
+    await workspace.palette.locator('[class*="palette-actions"]').click();
+    await expect(page.getByText("File library")).toBeVisible();
+    await page.mouse.move(640, 300);
+    await expect(page).toHaveScreenshot("text-palette-menu.png", {
+      clip: { x: 300, y: 450, width: 700, height: 270 },
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+});
+
 test.describe("Selected colors", () => {
   test("Shows the more colors button", async ({ page }) => {
     const workspace = new WorkspacePage(page);
diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs
index b65d5842f7..e951b6120b 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/text_palette.cljs
@@ -14,7 +14,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [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.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.object :as obj]
@@ -144,7 +144,8 @@
      (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 :text-palette-content)
             :ref container
@@ -173,7 +174,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 text-palette*
   {::mf/wrap [mf/memo]}
diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss
index 61cf22e34b..32dd942dc9 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette.scss
@@ -4,54 +4,56 @@
 //
 // 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 *;
 
 .text-palette {
-  height: 100%;
+  block-size: 100%;
   display: flex;
 }
 
+// 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-2;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--arrow-foreground-color);
 
-  svg {
-    @extend %button-icon;
-  }
+  // Above the typography list, which is positioned and comes after the
+  // left arrow, so the fade covers the items that scroll under it.
+  z-index: 2;
 
   &::after {
     content: "";
     position: absolute;
-    bottom: 0;
-    left: calc(-1 * deprecated.$s-80);
-    height: 100%;
-    width: deprecated.$s-80;
-    z-index: deprecated.$z-index-1;
-    background-image: linear-gradient(
-      to left,
-      var(--palette-button-shadow-initial) 0%,
-      var(--palette-button-shadow-final) 100%
-    );
+    inset-block-end: 0;
+    inset-inline-start: calc(-1 * px2rem(80));
+    block-size: 100%;
+    inline-size: px2rem(80);
+    z-index: 1;
+    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;
@@ -61,19 +63,11 @@
 
 .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);
   }
 }
@@ -85,55 +79,46 @@
 
 .text-palette-inside {
   display: flex;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .typography-item {
-  @include deprecated.body-small-typography;
+  --typography-item-background-color: var(--color-background-tertiary);
+
+  @include use-typography("body-small");
 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  height: 100%;
-  width: deprecated.$s-136;
-  padding: deprecated.$s-8;
-  border-radius: deprecated.$br-8;
-  background-color: var(--palette-text-background-color);
+  block-size: 100%;
+  inline-size: px2rem(136);
+  padding: var(--sp-s);
+  border-radius: $br-8;
+  background-color: var(--typography-item-background-color);
 
   &:first-child {
-    margin-left: deprecated.$s-8;
+    margin-inline-start: var(--sp-s);
+  }
+
+  .typography-name,
+  .typography-font,
+  .typography-data {
+    display: block;
+    max-inline-size: 99%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    block-size: $sz-16;
+    inline-size: $sz-120;
+    color: var(--color-foreground-secondary);
   }
 
   .typography-name {
-    @include deprecated.text-ellipsis;
-
-    height: deprecated.$s-16;
-    width: deprecated.$s-120;
-    color: var(--palette-text-color-selected);
-  }
-
-  .typography-font {
-    @include deprecated.text-ellipsis;
-
-    height: deprecated.$s-16;
-    width: deprecated.$s-120;
-    color: var(--palette-text-color);
-  }
-
-  .typography-data {
-    @include deprecated.text-ellipsis;
-
-    height: deprecated.$s-16;
-    width: deprecated.$s-120;
-    color: var(--palette-text-color);
+    color: var(--color-foreground-primary);
   }
 
   &.mid-item {
-    .typography-name {
-      height: deprecated.$s-16;
-    }
-
     .typography-data {
       display: none;
     }
@@ -147,12 +132,12 @@
   }
 
   &:hover {
-    background-color: var(--palette-text-background-color-hover);
+    --typography-item-background-color: var(--color-background-quaternary);
   }
 }
 
 .text-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/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
index cdc13170f2..fd4ef95f3b 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
@@ -10,7 +10,7 @@
    [app.common.data.macros :as dm]
    [app.main.refs :as refs]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [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]))
 
@@ -37,7 +37,7 @@
 
            (when (= selected (:id cur-library))
              [:span {:class (stl/css :icon-wrapper)}
-              deprecated-icon/tick])]))
+              [:> icon* {:icon-id i/tick :size "s"}]])]))
 
       [:li
        {:class (stl/css-case :file-library true
@@ -51,4 +51,4 @@
          (dm/str "(" (count typographies) ")")]]
        (when (= selected :file)
          [:span {:class (stl/css :icon-wrapper)}
-          deprecated-icon/tick])]]]))
+          [:> icon* {:icon-id i/tick :size "s"}]])]]]))
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
index 9cf70b7e93..bc1ca05c25 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
@@ -4,86 +4,77 @@
 //
 // 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 *;
 
 .text-context-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,
   .file-library {
+    --library-foreground-color: var(--color-foreground-secondary);
+
     position: relative;
     display: flex;
     justify-content: space-between;
-    width: 100%;
-    gap: deprecated.$s-8;
-    padding: deprecated.$s-8;
-    margin-bottom: deprecated.$s-4;
-    border-radius: deprecated.$br-8;
+    inline-size: 100%;
+    gap: var(--sp-s);
+    padding: var(--sp-s);
+    margin-block-end: var(--sp-xs);
+    border-radius: $br-8;
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
 
     .library-name {
-      @include deprecated.body-small-typography;
+      @include use-typography("body-small");
 
-      color: var(--context-menu-foreground-color);
+      color: var(--library-foreground-color);
       display: grid;
-      grid-template-columns: 1fr deprecated.$s-24;
-      max-width: deprecated.$s-400;
+      grid-template-columns: 1fr $sz-24;
+      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 {
-        @include deprecated.flex-center;
-        @extend %button-icon-small;
-
-        stroke: var(--icon-foreground);
-      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-inline-start: var(--sp-xs);
+      color: var(--library-foreground-color);
     }
 
     &.selected,
     &:hover {
-      .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(--context-menu-foreground-color-selected);
-      }
+      --library-foreground-color: var(--color-foreground-primary);
     }
 
     &:hover {
-      background-color: var(--context-menu-background-color-selected);
+      background-color: var(--color-background-quaternary);
     }
   }
 }