diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index f18514cc9d..4ff50815a0 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -389,6 +389,35 @@ test.describe("Assets tab", () => {
   });
 });
 
+test.describe("Debug shape panel", () => {
+  test("Shows the debug info of the selected shape", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-9066.json");
+    await workspace.goToWorkspace({
+      fileId: "e179d9df-de35-80bf-8005-283bbd5516b0",
+      pageId: "e179d9df-de35-80bf-8005-283bbd5516b1",
+    });
+
+    await workspace.clickLeafLayer("Board");
+    await page.getByRole("button", { name: "Debugging tool" }).click();
+    await page.getByText("shape-panel", { exact: true }).click();
+    await expect(
+      workspace.rightSidebar.getByText("Board", { exact: true }),
+    ).toBeVisible();
+    await page.mouse.move(640, 600);
+    // Only the title row with the dump buttons: the attributes list below
+    // holds ids that change on every run.
+    const title = workspace.rightSidebar
+      .getByText("Board", { exact: true })
+      .locator("..");
+    await expect(title).toHaveScreenshot({
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+});
+
 test.describe("Guides", () => {
   test("Shows the advanced options of a square guide", async ({ page }) => {
     // A taller window keeps the whole Design tab visible: a scrolled
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.scss b/frontend/src/app/main/ui/workspace/sidebar/debug.scss
index da70295d97..ced6252661 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug.scss
@@ -4,26 +4,34 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
+@use "ds/_sizes.scss" as *;
+
+// Only for the checkbox placeholders (%input-checkbox, %checkbox-icon),
+// until the checkboxes move to the DS.
 @use "refactor/common-refactor.scss" as deprecated;
 
 .debug-panel {
   display: flex;
   flex-direction: column;
-  background-color: var(--panel-background-color);
+  background-color: var(--color-background-primary);
 }
 
 .debug-panel-title {
   margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
 }
 
+// The options list scrolls under the title when it does not fit.
 .debug-panel-inner {
-  padding: deprecated.$s-16 deprecated.$s-8;
+  flex: 1;
+  min-block-size: 0;
+  overflow-y: auto;
+  padding: var(--sp-l) var(--sp-s);
 }
 
 .checkbox-wrapper {
   @extend %input-checkbox;
 
-  height: deprecated.$s-32;
+  block-size: $sz-32;
   padding: 0;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
index 92c9ae2e2b..d2cc9888af 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
@@ -13,6 +13,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [debug :as dbg]
    [rumext.v2 :as mf]))
 
@@ -130,8 +131,12 @@
          [:div {:class (stl/css :attrs-container) :key (dm/str "shape" idx)}
           [:div {:class (stl/css :shape-title)}
            [:div {:class (stl/css :shape-name)} (:name current)]
-           [:button {:on-click #(debug/dump-object (dm/str (:id current)))} "object"]
-           [:button {:on-click #(debug/dump-subtree (dm/str (:id current)) true)} "tree"]]
+           [:> button* {:variant "secondary"
+                        :on-click #(debug/dump-object (dm/str (:id current)))}
+            "object"]
+           [:> button* {:variant "secondary"
+                        :on-click #(debug/dump-subtree (dm/str (:id current)) true)}
+            "tree"]]
 
           [:div {:class (stl/css :shape-attrs)}
            (let [attrs (get-attrs current)]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
index c849565bb5..9f770611f7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
@@ -4,34 +4,42 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .shape-info {
   display: flex;
   flex-direction: column;
-  background-color: var(--panel-background-color);
+  background-color: var(--color-background-primary);
   color: var(--color-foreground-primary);
-  font-size: deprecated.$fs-12;
+
+  // TODO: No exact DS typography match found.
+  // Closest match: body-small.
+  font-size: px2rem(12);
   user-select: text;
 }
 
-.shape-info-title {
-  margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
-}
+// TODO: Unused in debug_shape_info.cljs; check by hand before removing.
+// .shape-info-title {
+//   margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
+// }
 
 .attrs-container {
-  padding: deprecated.$s-16 deprecated.$s-8;
+  padding: var(--sp-l) var(--sp-s);
   overflow: hidden;
 }
 
 .shape-title {
-  font-size: deprecated.$fs-14;
+  // TODO: No exact DS typography match found.
+  // Closest match: body-medium.
+  font-size: px2rem(14);
   background: var(--color-background-quaternary);
   color: var(--color-foreground-primary);
-  padding: deprecated.$s-8;
-  border-radius: deprecated.$s-8;
+  padding: var(--sp-s);
+  border-radius: $br-8;
   display: flex;
-  gap: deprecated.$s-4;
+  align-items: center;
+  gap: var(--sp-xs);
 }
 
 .shape-name {
@@ -41,7 +49,7 @@
 .attrs-container-attr {
   display: grid;
   grid-template-columns: 25% auto;
-  padding: deprecated.$s-4 0;
+  padding: var(--sp-xs) 0;
 
   &.vertical-layout {
     grid-template-columns: auto;
@@ -51,8 +59,8 @@
 
 .shape-attrs {
   overflow: auto;
-  height: calc(100% - 8px);
-  padding-bottom: 8px;
+  block-size: calc(100% - var(--sp-s));
+  padding-block-end: var(--sp-s);
 }
 
 .shape-link {
@@ -63,15 +71,15 @@
 .shape-list {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-4;
+  gap: var(--sp-xs);
 }
 
 .point-list {
   display: flex;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .cell-container {
   display: grid;
-  grid-template-columns: 100px 1fr;
+  grid-template-columns: px2rem(100) 1fr;
 }