diff --git a/components/src/stories/colors.stories.mdx b/components/src/stories/colors.stories.mdx
index f311013544..a75418e457 100644
--- a/components/src/stories/colors.stories.mdx
+++ b/components/src/stories/colors.stories.mdx
@@ -53,6 +53,7 @@ export const Table = (args) => (
       {Row("text-main")}
       {Row("text-muted")}
       {Row("text-contrast")}
+      {Row("text-alt2")}
     </tbody>
   </table>
 );
diff --git a/components/src/tw-theme.css b/components/src/tw-theme.css
index 7a03cba92e..d41b331d4a 100644
--- a/components/src/tw-theme.css
+++ b/components/src/tw-theme.css
@@ -27,6 +27,7 @@
   --color-text-main: #212529;
   --color-text-muted: #6d757e;
   --color-text-contrast: #ffffff;
+  --color-text-alt2: #ffffff;
 
   --tw-ring-offset-color: #fff;
 }
@@ -64,6 +65,7 @@
   --color-text-main: #ffffff;
   --color-text-muted: #bac0ce;
   --color-text-contrast: #191e26;
+  --color-text-alt2: #ffffff;
 
   --tw-ring-offset-color: #1f242e;
 }
diff --git a/components/tailwind.config.base.js b/components/tailwind.config.base.js
index 8b1afb165f..245dec233e 100644
--- a/components/tailwind.config.base.js
+++ b/components/tailwind.config.base.js
@@ -41,6 +41,7 @@ module.exports = {
         main: "var(--color-text-main)",
         muted: "var(--color-text-muted)",
         contrast: "var(--color-text-contrast)",
+        alt2: "var(--color-text-alt2)",
       },
       background: {
         DEFAULT: "var(--color-background)",
@@ -52,6 +53,7 @@ module.exports = {
       main: "var(--color-text-main)",
       muted: "var(--color-text-muted)",
       contrast: "var(--color-text-contrast)",
+      alt2: "var(--color-text-alt2)",
       success: "var(--color-success-500)",
       danger: "var(--color-danger-500)",
       warning: "var(--color-warning-500)",