diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b9cdb7c..1c2db1b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -6,6 +6,50 @@ const twMerge = extendTailwindMerge({
     theme: {
       radius: ["images", "rectangles", "buttonsM", "buttonsL"], // custom rounded classes from figma
     },
+    classGroups: {
+      // custom typography classes from figma
+      "font-size": [
+        {
+          typo: [
+            "display-extralarge",
+            "display-large",
+            "display-medium",
+            "display-small",
+            "headline-large",
+            "headline-medium",
+            "headline-small",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-extralarge",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "title-large",
+            "title-medium",
+            "title-small",
+          ],
+        },
+      ],
+      // custom background colors from figma
+      "bg-color": [
+        {
+          bg: [
+            "background",
+            "background-blur",
+            "red",
+            "green",
+            "blue-primary",
+            "blue-primary-blur",
+            "blue-secondary",
+            "blue-tertiary",
+            "blue-tertiary-blur",
+          ],
+        },
+      ],
+      // custom text colors from figma
+      "text-color": [{ text: ["text-primary", "text-secondary", "text-accent-darkbg", "text-accent-lightbg"] }],
+    },
   },
 })