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 9f770611f7..27ef6f4b32 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
@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
 @use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as t;
 @use "ds/_utils.scss" as *;
 
 .shape-info {
@@ -13,26 +14,19 @@
   background-color: var(--color-background-primary);
   color: var(--color-foreground-primary);
 
-  // TODO: No exact DS typography match found.
-  // Closest match: body-small.
-  font-size: px2rem(12);
+  @include t.use-typography("body-small");
+
   user-select: text;
 }
 
-// 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: var(--sp-l) var(--sp-s);
   overflow: hidden;
 }
 
 .shape-title {
-  // TODO: No exact DS typography match found.
-  // Closest match: body-medium.
-  font-size: px2rem(14);
+  @include t.use-typography("body-medium");
+
   background: var(--color-background-quaternary);
   color: var(--color-foreground-primary);
   padding: var(--sp-s);