diff --git a/.changeset/tricky-loops-repair.md b/.changeset/tricky-loops-repair.md
new file mode 100644
index 0000000000..9508c55f86
--- /dev/null
+++ b/.changeset/tricky-loops-repair.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Added a new gray scale for Canon for both light and dark theme.
diff --git a/packages/canon/css/core.css b/packages/canon/css/core.css
index b4583ea35d..ffdde83d72 100644
--- a/packages/canon/css/core.css
+++ b/packages/canon/css/core.css
@@ -9127,9 +9127,19 @@
   --canon-radius-5: calc(1rem);
   --canon-radius-6: calc(1.25rem);
   --canon-radius-full: 9999px;
-  --canon-bg: #f8f8f8;
-  --canon-bg-surface-1: #fff;
-  --canon-bg-surface-2: #ececec;
+  --canon-black: #000;
+  --canon-white: #fff;
+  --canon-gray-1: #f8f8f8;
+  --canon-gray-2: #ececec;
+  --canon-gray-3: #d9d9d9;
+  --canon-gray-4: #c1c1c1;
+  --canon-gray-5: #9e9e9e;
+  --canon-gray-6: #8c8c8c;
+  --canon-gray-7: #757575;
+  --canon-gray-8: #595959;
+  --canon-bg: var(--canon-gray-1);
+  --canon-bg-surface-1: var(--canon-white);
+  --canon-bg-surface-2: var(--canon-gray-2);
   --canon-bg-solid: #1f5493;
   --canon-bg-solid-hover: #163a66;
   --canon-bg-solid-pressed: #0f2b4e;
@@ -9141,15 +9151,15 @@
   --canon-bg-danger: #feebe7;
   --canon-bg-warning: #fff2b2;
   --canon-bg-success: #e6f6eb;
-  --canon-fg-primary: #000;
-  --canon-fg-secondary: #757575;
+  --canon-fg-primary: var(--canon-black);
+  --canon-fg-secondary: var(--canon-gray-7);
   --canon-fg-link: #1f5493;
   --canon-fg-link-hover: #1f2d5c;
   --canon-fg-disabled: #9e9e9e;
-  --canon-fg-solid: #fff;
+  --canon-fg-solid: var(--canon-white);
   --canon-fg-solid-disabled: #9c9c9c;
   --canon-fg-tint: #1f5493;
-  --canon-fg-tint-disabled: #9e9e9e;
+  --canon-fg-tint-disabled: var(--canon-gray-5);
   --canon-fg-danger: #e22b2b;
   --canon-fg-warning: #e36d05;
   --canon-fg-success: #1db954;
@@ -9166,9 +9176,17 @@
 }
 
 [data-theme="dark"] {
-  --canon-bg: #000;
-  --canon-bg-surface-1: #191919;
-  --canon-bg-surface-2: #242424;
+  --canon-gray-1: #191919;
+  --canon-gray-2: #242424;
+  --canon-gray-3: #373737;
+  --canon-gray-4: #464646;
+  --canon-gray-5: #575757;
+  --canon-gray-6: #7b7b7b;
+  --canon-gray-7: #9e9e9e;
+  --canon-gray-8: #b4b4b4;
+  --canon-bg: var(--canon-black);
+  --canon-bg-surface-1: var(--canon-gray-1);
+  --canon-bg-surface-2: var(--canon-gray-2);
   --canon-bg-solid: #9cc9ff;
   --canon-bg-solid-hover: #83b9fd;
   --canon-bg-solid-pressed: #83b9fd;
@@ -9180,15 +9198,15 @@
   --canon-bg-danger: #3b1219;
   --canon-bg-warning: #302008;
   --canon-bg-success: #132d21;
-  --canon-fg-primary: #fff;
-  --canon-fg-secondary: #9e9e9e;
+  --canon-fg-primary: var(--canon-white);
+  --canon-fg-secondary: var(--canon-gray-7);
   --canon-fg-link: #9cc9ff;
   --canon-fg-link-hover: #7eb5f7;
-  --canon-fg-disabled: #9e9e9e;
+  --canon-fg-disabled: var(--canon-gray-7);
   --canon-fg-solid: #101821;
-  --canon-fg-solid-disabled: #575757;
+  --canon-fg-solid-disabled: var(--canon-gray-5);
   --canon-fg-tint: #9cc9ff;
-  --canon-fg-tint-disabled: #575757;
+  --canon-fg-tint-disabled: var(--canon-gray-5);
   --canon-fg-danger: #e22b2b;
   --canon-fg-warning: #e36d05;
   --canon-fg-success: #1db954;
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 681d3027a9..1c431ad54c 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9127,9 +9127,19 @@
   --canon-radius-5: calc(1rem);
   --canon-radius-6: calc(1.25rem);
   --canon-radius-full: 9999px;
-  --canon-bg: #f8f8f8;
-  --canon-bg-surface-1: #fff;
-  --canon-bg-surface-2: #ececec;
+  --canon-black: #000;
+  --canon-white: #fff;
+  --canon-gray-1: #f8f8f8;
+  --canon-gray-2: #ececec;
+  --canon-gray-3: #d9d9d9;
+  --canon-gray-4: #c1c1c1;
+  --canon-gray-5: #9e9e9e;
+  --canon-gray-6: #8c8c8c;
+  --canon-gray-7: #757575;
+  --canon-gray-8: #595959;
+  --canon-bg: var(--canon-gray-1);
+  --canon-bg-surface-1: var(--canon-white);
+  --canon-bg-surface-2: var(--canon-gray-2);
   --canon-bg-solid: #1f5493;
   --canon-bg-solid-hover: #163a66;
   --canon-bg-solid-pressed: #0f2b4e;
@@ -9141,15 +9151,15 @@
   --canon-bg-danger: #feebe7;
   --canon-bg-warning: #fff2b2;
   --canon-bg-success: #e6f6eb;
-  --canon-fg-primary: #000;
-  --canon-fg-secondary: #757575;
+  --canon-fg-primary: var(--canon-black);
+  --canon-fg-secondary: var(--canon-gray-7);
   --canon-fg-link: #1f5493;
   --canon-fg-link-hover: #1f2d5c;
   --canon-fg-disabled: #9e9e9e;
-  --canon-fg-solid: #fff;
+  --canon-fg-solid: var(--canon-white);
   --canon-fg-solid-disabled: #9c9c9c;
   --canon-fg-tint: #1f5493;
-  --canon-fg-tint-disabled: #9e9e9e;
+  --canon-fg-tint-disabled: var(--canon-gray-5);
   --canon-fg-danger: #e22b2b;
   --canon-fg-warning: #e36d05;
   --canon-fg-success: #1db954;
@@ -9166,9 +9176,17 @@
 }
 
 [data-theme="dark"] {
-  --canon-bg: #000;
-  --canon-bg-surface-1: #191919;
-  --canon-bg-surface-2: #242424;
+  --canon-gray-1: #191919;
+  --canon-gray-2: #242424;
+  --canon-gray-3: #373737;
+  --canon-gray-4: #464646;
+  --canon-gray-5: #575757;
+  --canon-gray-6: #7b7b7b;
+  --canon-gray-7: #9e9e9e;
+  --canon-gray-8: #b4b4b4;
+  --canon-bg: var(--canon-black);
+  --canon-bg-surface-1: var(--canon-gray-1);
+  --canon-bg-surface-2: var(--canon-gray-2);
   --canon-bg-solid: #9cc9ff;
   --canon-bg-solid-hover: #83b9fd;
   --canon-bg-solid-pressed: #83b9fd;
@@ -9180,15 +9198,15 @@
   --canon-bg-danger: #3b1219;
   --canon-bg-warning: #302008;
   --canon-bg-success: #132d21;
-  --canon-fg-primary: #fff;
-  --canon-fg-secondary: #9e9e9e;
+  --canon-fg-primary: var(--canon-white);
+  --canon-fg-secondary: var(--canon-gray-7);
   --canon-fg-link: #9cc9ff;
   --canon-fg-link-hover: #7eb5f7;
-  --canon-fg-disabled: #9e9e9e;
+  --canon-fg-disabled: var(--canon-gray-7);
   --canon-fg-solid: #101821;
-  --canon-fg-solid-disabled: #575757;
+  --canon-fg-solid-disabled: var(--canon-gray-5);
   --canon-fg-tint: #9cc9ff;
-  --canon-fg-tint-disabled: #575757;
+  --canon-fg-tint-disabled: var(--canon-gray-5);
   --canon-fg-danger: #e22b2b;
   --canon-fg-warning: #e36d05;
   --canon-fg-success: #1db954;
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index d0686e94f7..260140af70 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -75,10 +75,24 @@
   --canon-radius-6: calc(1.25rem);
   --canon-radius-full: 9999px;
 
+  /* Base Colors */
+  --canon-black: #000000;
+  --canon-white: #ffffff;
+
+  /* Gray scale */
+  --canon-gray-1: #f8f8f8;
+  --canon-gray-2: #ececec;
+  --canon-gray-3: #d9d9d9;
+  --canon-gray-4: #c1c1c1;
+  --canon-gray-5: #9e9e9e;
+  --canon-gray-6: #8c8c8c;
+  --canon-gray-7: #757575;
+  --canon-gray-8: #595959;
+
   /* Background Colors */
-  --canon-bg: #f8f8f8;
-  --canon-bg-surface-1: #fff;
-  --canon-bg-surface-2: #ececec;
+  --canon-bg: var(--canon-gray-1);
+  --canon-bg-surface-1: var(--canon-white);
+  --canon-bg-surface-2: var(--canon-gray-2);
   --canon-bg-solid: #1f5493;
   --canon-bg-solid-hover: #163a66;
   --canon-bg-solid-pressed: #0f2b4e;
@@ -92,15 +106,15 @@
   --canon-bg-success: #e6f6eb;
 
   /* Foreground Colors */
-  --canon-fg-primary: #000000;
-  --canon-fg-secondary: #757575;
+  --canon-fg-primary: var(--canon-black);
+  --canon-fg-secondary: var(--canon-gray-7);
   --canon-fg-link: #1f5493;
   --canon-fg-link-hover: #1f2d5c;
   --canon-fg-disabled: #9e9e9e;
-  --canon-fg-solid: #ffffff;
+  --canon-fg-solid: var(--canon-white);
   --canon-fg-solid-disabled: #9c9c9c;
   --canon-fg-tint: #1f5493;
-  --canon-fg-tint-disabled: #9e9e9e;
+  --canon-fg-tint-disabled: var(--canon-gray-5);
   --canon-fg-danger: #e22b2b;
   --canon-fg-warning: #e36d05;
   --canon-fg-success: #1db954;
@@ -122,10 +136,20 @@
 
 /* Dark theme tokens */
 [data-theme='dark'] {
+  /* Gray scale */
+  --canon-gray-1: #191919;
+  --canon-gray-2: #242424;
+  --canon-gray-3: #373737;
+  --canon-gray-4: #464646;
+  --canon-gray-5: #575757;
+  --canon-gray-6: #7b7b7b;
+  --canon-gray-7: #9e9e9e;
+  --canon-gray-8: #b4b4b4;
+
   /* Background Colors */
-  --canon-bg: #000000;
-  --canon-bg-surface-1: #191919;
-  --canon-bg-surface-2: #242424;
+  --canon-bg: var(--canon-black);
+  --canon-bg-surface-1: var(--canon-gray-1);
+  --canon-bg-surface-2: var(--canon-gray-2);
   --canon-bg-solid: #9cc9ff;
   --canon-bg-solid-hover: #83b9fd;
   --canon-bg-solid-pressed: #83b9fd;
@@ -139,15 +163,15 @@
   --canon-bg-success: #132d21;
 
   /* Foreground Colors */
-  --canon-fg-primary: #ffffff;
-  --canon-fg-secondary: #9e9e9e;
+  --canon-fg-primary: var(--canon-white);
+  --canon-fg-secondary: var(--canon-gray-7);
   --canon-fg-link: #9cc9ff;
   --canon-fg-link-hover: #7eb5f7;
-  --canon-fg-disabled: #9e9e9e;
+  --canon-fg-disabled: var(--canon-gray-7);
   --canon-fg-solid: #101821;
-  --canon-fg-solid-disabled: #575757;
+  --canon-fg-solid-disabled: var(--canon-gray-5);
   --canon-fg-tint: #9cc9ff;
-  --canon-fg-tint-disabled: #575757;
+  --canon-fg-tint-disabled: var(--canon-gray-5);
   --canon-fg-danger: #e22b2b;
   --canon-fg-warning: #e36d05;
   --canon-fg-success: #1db954;