diff --git a/website/src/components/ColoredText/index.js b/website/src/components/ColoredText/index.js
new file mode 100644
index 00000000000..70957a3049e
--- /dev/null
+++ b/website/src/components/ColoredText/index.js
@@ -0,0 +1,11 @@
+// src/components/ColoredText.js
+import React from 'react';
+import clsx from 'clsx';
+
+const ColoredText = ({ color, className, children }) => (
+  <span style={color ? { color } : {}} className={clsx(className)}>
+    {children}
+  </span>
+);
+
+export default ColoredText;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e240a5dfabf..22e842988e0 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -2112,3 +2112,13 @@ h2.anchor.clicked a.hash-link:before {
     flex-direction: column;
   }
 }
+
+.text-green {
+  color: #42f54e;
+}
+.text-red {
+  color: #ff171f;
+}
+.text-yellow {
+  color: #f5ea20;
+}
diff --git a/website/src/theme/MDXComponents/index.js b/website/src/theme/MDXComponents/index.js
index d136222a0ce..fae74936bab 100644
--- a/website/src/theme/MDXComponents/index.js
+++ b/website/src/theme/MDXComponents/index.js
@@ -44,6 +44,7 @@ import Lifecycle from '@site/src/components/lifeCycle';
 import DetailsToggle from '@site/src/components/detailsToggle';
 import Expandable from '@site/src/components/expandable';
 import ConfettiTrigger from '@site/src/components/confetti/';
+import ColoredText from '@site/src/components/ColoredText';
 
 const MDXComponents = {
   Head,
@@ -95,5 +96,6 @@ const MDXComponents = {
   DetailsToggle: DetailsToggle,
   Expandable: Expandable,
   ConfettiTrigger: ConfettiTrigger,
+  ColoredText: ColoredText,
 };
 export default MDXComponents;