diff --git a/packages/ui/react/src/components/typography/heading.styles.css.ts b/packages/ui/react/src/components/typography/heading.styles.css.ts
index 635bfae..d89408b 100644
--- a/packages/ui/react/src/components/typography/heading.styles.css.ts
+++ b/packages/ui/react/src/components/typography/heading.styles.css.ts
@@ -1,5 +1,11 @@
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { heading, textAlign, truncate, wrap } from '../../styles/utilities';
+import {
+  color,
+  heading,
+  textAlign,
+  truncate,
+  wrap,
+} from '../../styles/utilities';
 
 export const headingVariants = recipe({
   variants: {
@@ -8,6 +14,19 @@ export const headingVariants = recipe({
       center: [textAlign.center],
       right: [textAlign.right],
     },
+    color: {
+      gray100: [color.gray100],
+      gray200: [color.gray200],
+      gray300: [color.gray300],
+      gray400: [color.gray400],
+      gray500: [color.gray500],
+      gray600: [color.gray600],
+      gray700: [color.gray700],
+      gray800: [color.gray800],
+      gray900: [color.gray900],
+      gray1000: [color.gray1000],
+      gray1100: [color.gray1100],
+    },
     variant: {
       h1bold: [heading.h1Bold],
       h1semibold: [heading.h1Semibold],
@@ -33,6 +52,7 @@ export const headingVariants = recipe({
 
   defaultVariants: {
     align: 'left',
+    color: 'gray1100',
     truncate: false,
     variant: 'h1bold',
     wrap: 'nowrap',
diff --git a/packages/ui/react/src/components/typography/heading.tsx b/packages/ui/react/src/components/typography/heading.tsx
index 2a3b0b3..af5f26f 100644
--- a/packages/ui/react/src/components/typography/heading.tsx
+++ b/packages/ui/react/src/components/typography/heading.tsx
@@ -16,6 +16,7 @@ export const Heading = forwardRef<HeadingProps, 'h1'>(
       align,
       className,
       children,
+      color,
       weight = 'bold',
       truncate,
       ...restProps
@@ -29,7 +30,7 @@ export const Heading = forwardRef<HeadingProps, 'h1'>(
         ref={ref}
         className={cx(
           'favolink-heading',
-          styles.headingVariants({ variant, truncate, align }),
+          styles.headingVariants({ variant, color, truncate, align }),
           className,
         )}
       >
diff --git a/packages/ui/react/src/components/typography/text.styles.css.ts b/packages/ui/react/src/components/typography/text.styles.css.ts
index c5c1fc2..f89f861 100644
--- a/packages/ui/react/src/components/typography/text.styles.css.ts
+++ b/packages/ui/react/src/components/typography/text.styles.css.ts
@@ -1,5 +1,5 @@
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { body, textAlign, truncate, wrap } from '../../styles/utilities';
+import { body, color, textAlign, truncate, wrap } from '../../styles/utilities';
 
 export const textVariants = recipe({
   variants: {
@@ -8,6 +8,19 @@ export const textVariants = recipe({
       center: [textAlign.center],
       right: [textAlign.right],
     },
+    color: {
+      gray100: [color.gray100],
+      gray200: [color.gray200],
+      gray300: [color.gray300],
+      gray400: [color.gray400],
+      gray500: [color.gray500],
+      gray600: [color.gray600],
+      gray700: [color.gray700],
+      gray800: [color.gray800],
+      gray900: [color.gray900],
+      gray1000: [color.gray1000],
+      gray1100: [color.gray1100],
+    },
     variant: {
       '1medium': [body.body1Medium],
       '1regular': [body.body1Regular],
@@ -29,6 +42,7 @@ export const textVariants = recipe({
 
   defaultVariants: {
     align: 'left',
+    color: 'gray1100',
     truncate: false,
     variant: '2regular',
     wrap: 'nowrap',
diff --git a/packages/ui/react/src/components/typography/text.tsx b/packages/ui/react/src/components/typography/text.tsx
index 275d825..c214f4e 100644
--- a/packages/ui/react/src/components/typography/text.tsx
+++ b/packages/ui/react/src/components/typography/text.tsx
@@ -27,6 +27,7 @@ export const Text = forwardRef<TextProps, 'span'>(
       asChild,
       as: Tag = 'span',
       align,
+      color,
       wrap,
       truncate,
       size = 2,
@@ -42,7 +43,7 @@ export const Text = forwardRef<TextProps, 'span'>(
         ref={forwardedRef}
         className={cx(
           'favolink-text',
-          styles.textVariants({ align, variant, truncate, wrap }),
+          styles.textVariants({ align, color, variant, truncate, wrap }),
           className,
         )}
       >