diff --git a/src/styles/primitives/colors.mdx b/src/styles/primitives/colors.mdx
index ee8eeb619..32b54c76f 100644
--- a/src/styles/primitives/colors.mdx
+++ b/src/styles/primitives/colors.mdx
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/blocks';
 import { Figma } from '@storybook/addon-designs/blocks';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
-import { TailwindUtilities } from '../../utils/tw';
+import { docsUtils } from '../../utils';
 
 <Meta title="Design Tokens/Primitive/Colors" />
 
@@ -10,7 +10,7 @@ export const ColorSwatch = ({ colorGroupName }) => {
     const [availableColors, setAvailableColors] = useState([]);
 
     useEffect(() => {
-        const colors = TailwindUtilities.getColorConfig(colorGroupName);
+        const colors = docsUtils.getColorConfig(colorGroupName);
         setAvailableColors(colors);
     }, [colorGroupName]);
 
diff --git a/src/styles/primitives/spacing.mdx b/src/styles/primitives/spacing.mdx
index bf65cc142..99c26f230 100644
--- a/src/styles/primitives/spacing.mdx
+++ b/src/styles/primitives/spacing.mdx
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/blocks';
 import { Figma } from '@storybook/addon-designs/blocks';
 import classNames from 'classnames';
 
-import { TailwindUtilities } from '../../utils/tw';
+import { docsUtils } from '../../utils';
 
 <Meta title="Design Tokens/Primitive/Spacing" />
 
@@ -32,7 +32,7 @@ export const DisplayComponent = ({ name, value, sizePx, sizeRem }) => {
             </tr>
         </thead>
         <tbody>
-            {TailwindUtilities.getSpacingConfig().map(({ key, px, rem, value }) => (
+            {docsUtils.getSpacingConfig().map(({ key, px, rem, value }) => (
                 <DisplayComponent key={key} name={key} sizePx={px} sizeRem={rem} value={value} />
             ))}
         </tbody>
diff --git a/src/utils/tw.ts b/src/utils/docs-utils.ts
similarity index 90%
rename from src/utils/tw.ts
rename to src/utils/docs-utils.ts
index 3ab760c91..61066bdcb 100644
--- a/src/utils/tw.ts
+++ b/src/utils/docs-utils.ts
@@ -4,13 +4,13 @@ import tailwindConfig from '../../tailwind.config';
 
 type Color = { shade: number; value: string };
 
-export class TailwindUtilities {
+class DocsUtils {
     /**
      * Retrieves and processes spacing values from the provided Tailwind CSS configuration.
      * The function computes the pixel (px) and relative (rem) sizes based on the given configuration.
      * It then returns a sorted list of these computed values.
      */
-    public static getSpacingConfig() {
+    getSpacingConfig() {
         return Object.entries(resolveConfig(tailwindConfig).theme?.spacing ?? {})
             .map(([key, value]) => {
                 const parsedKey = parseFloat(key);
@@ -28,7 +28,7 @@ export class TailwindUtilities {
      * @param {number} [baseSize=16] - The base size for conversion.
      * @returns {number} - The converted value in rem units.
      */
-    public static pxToRem(px: number, baseSize = 16) {
+    pxToRem(px: number, baseSize = 16) {
         return px / baseSize;
     }
 
@@ -38,7 +38,7 @@ export class TailwindUtilities {
      * @param {string} colorGroupName - Name of the color group.
      * @returns {Color[]} Array of available colors.
      */
-    public static getColorConfig(colorGroupName: string): Color[] {
+    getColorConfig(colorGroupName: string): Color[] {
         const shades = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
         const rootStyles = getComputedStyle(document.documentElement);
 
@@ -47,3 +47,5 @@ export class TailwindUtilities {
             .filter((shade) => shade.value.trim() !== '');
     }
 }
+
+export const docsUtils = new DocsUtils();
diff --git a/src/utils/index.ts b/src/utils/index.ts
index a5446e3b7..f0edec41b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,2 +1,2 @@
+export * from './docs-utils';
 export * from './responsive-utils';
-export * from './tw';