diff --git a/components/landingPage/ui/heroImage.tsx b/components/landingPage/ui/heroImage.tsx
index c0f0b633..9f03e8aa 100644
--- a/components/landingPage/ui/heroImage.tsx
+++ b/components/landingPage/ui/heroImage.tsx
@@ -1,8 +1,6 @@
 import Image from "next/image";
 import { FC, ReactNode } from "react";
 
-import { mainColorMdBgClass } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
 
 type Props = Readonly<{
@@ -29,7 +27,7 @@ export const HeroImage: FC<Props> = (props) => (
         />
       </div>
       <div
-        className={`${mainColorMdBgClass[siteCodename]} relative w-fit h-full flex max-w-3xl flex-col items-center md:items-start justify-end min-[900px]:justify-center pt-20 pb-32 md:pb-12 pr-6 min-[900px]:px-6`}
+        className="md:bg-mainBackgroundColor relative w-fit h-full flex max-w-3xl flex-col items-center md:items-start justify-end min-[900px]:justify-center pt-20 pb-32 md:pb-12 pr-6 min-[900px]:px-6"
       >
         {props.children}
       </div>
diff --git a/components/listingPage/ArticleItem.tsx b/components/listingPage/ArticleItem.tsx
index 96978b5d..6c4accd4 100644
--- a/components/listingPage/ArticleItem.tsx
+++ b/components/listingPage/ArticleItem.tsx
@@ -2,9 +2,7 @@ import Image from "next/image"
 import Link from "next/link";
 import { FC } from "react";
 
-import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
 import { formatDate } from "../../lib/utils/dateTime";
-import { siteCodename } from "../../lib/utils/env";
 import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
 
 type Props = Readonly<{
@@ -41,7 +39,7 @@ export const ArticleItem: FC<Props> = props => (
         <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 no-underline line-clamp-2 ">{props.title}</h5>
         <p className="mb-0 font-normal text-gray-700 line-clamp-6">{props.description}</p>
       </div>
-      <button className={`${mainColorGroupHoverClass[siteCodename]} ${mainColorButtonClass[siteCodename]} block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 border text-white py-2 px-4 md:rounded`}>
+      <button className="group-hover:bg-mainHoverColor bg-mainButtonColor block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 border text-white py-2 px-4 md:rounded">
         <span>Continue reading</span>
       </button>
     </Link>
diff --git a/components/listingPage/ProductItem.tsx b/components/listingPage/ProductItem.tsx
index 3fcbafa5..bd9ce87d 100644
--- a/components/listingPage/ProductItem.tsx
+++ b/components/listingPage/ProductItem.tsx
@@ -2,8 +2,6 @@ import Image from "next/image"
 import Link from "next/link";
 import { FC } from "react";
 
-import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
-import { siteCodename } from "../../lib/utils/env";
 import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
 
 type Props = Readonly<{
@@ -36,7 +34,7 @@ export const ProductItem: FC<Props> = props => (
           />
         </figure>
         {props.price && <p className="m-0 text-center text-xl font-normal pb-2">{`${props.price}€`}</p>}
-        <button className={`${mainColorGroupHoverClass[siteCodename]} ${mainColorButtonClass[siteCodename]} text-white block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 hover:bg-transparent border py-2 px-4 rounded`}>Detail</button>
+        <button className="group-hover:bg-mainColorHover bg-mainButtonColor text-white block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 hover:bg-transparent border py-2 px-4 rounded">Detail</button>
       </div>
     </Link>
   </li>
diff --git a/components/shared/Fact.tsx b/components/shared/Fact.tsx
index dbe1e681..dd10b8c3 100644
--- a/components/shared/Fact.tsx
+++ b/components/shared/Fact.tsx
@@ -1,8 +1,6 @@
 import Image from "next/image";
 import { FC } from "react";
 
-import { mainColorAfterBgClass } from "../../lib/constants/colors";
-import { siteCodename } from "../../lib/utils/env";
 import {
   createElementSmartLink,
   createItemSmartLink,
@@ -27,7 +25,7 @@ export const FactComponent: FC<Props> = (props) => {
     >
       {image && (
         <div
-          className={`w-full md:w-1/2 h-[400px] relative drop-shadow-lg after:absolute ${props.isReversed ? "after:left-3" : "after:right-3"} after:top-3 ${mainColorAfterBgClass[siteCodename]} after:bg-no-repeat after:w-full after:bg-contain after:h-full after:rounded-lg after:z-[1]`}
+          className={`w-full md:w-1/2 h-[400px] relative drop-shadow-lg after:absolute ${props.isReversed ? "after:left-3" : "after:right-3"} after:top-3 after:mainAfterColor after:bg-no-repeat after:w-full after:bg-contain after:h-full after:rounded-lg after:z-[1]`}
           {...createElementSmartLink(contentTypes.fact.elements.image.codename)}
         >
           <Image
diff --git a/components/shared/internalLinks/CTAButton.tsx b/components/shared/internalLinks/CTAButton.tsx
index 3f0b4f0c..6ee716ab 100644
--- a/components/shared/internalLinks/CTAButton.tsx
+++ b/components/shared/internalLinks/CTAButton.tsx
@@ -1,12 +1,7 @@
 import Link from "next/link";
 import React from "react";
 
-import {
-  mainColorButtonClass,
-  mainColorHoverClass,
-} from "../../../lib/constants/colors";
 import { resolveReference } from "../../../lib/routing";
-import { siteCodename } from "../../../lib/utils/env";
 import { Action, Fact, Nav_NavigationItem } from "../../../models";
 
 type Props = {
@@ -22,7 +17,7 @@ export const CTAButton = (props: Props) => {
   return (
     <Link href={factUrl ?? ""}>
       <button
-        className={`${mainColorButtonClass[siteCodename]} bottom-0 group left-0 ${mainColorHoverClass[siteCodename]} text-white font-bold mt-10 py-2 px-4 rounded`}
+        className="bg-mainButtonColor bottom-0 group left-0 hover:bg-mainHoverColor text-white font-bold mt-10 py-2 px-4 rounded"
       >
         <span>{props.reference.elements.referenceLabel.value}</span>
       </button>
diff --git a/components/shared/richText/Callout.tsx b/components/shared/richText/Callout.tsx
index 1fd47dfd..2db2ccc1 100644
--- a/components/shared/richText/Callout.tsx
+++ b/components/shared/richText/Callout.tsx
@@ -7,10 +7,8 @@ import { FC } from "react";
 
 import {
   calloutTypeColor,
-  mainColorBorderClass,
 } from "../../../lib/constants/colors";
 import { isCalloutType } from "../../../lib/types/calloutType";
-import { siteCodename } from "../../../lib/utils/env";
 import { Component_Callout, contentTypes } from "../../../models";
 import { RichTextElement } from "./RichTextElement";
 
@@ -20,7 +18,7 @@ type Props = Readonly<{
 
 export const CalloutComponent: FC<Props> = (props) => (
   <div
-    className={`p-5 border-2 rounded-3xl ${mainColorBorderClass[siteCodename]}`}
+    className="p-5 border-2 rounded-3xl border-mainBorderColor"
   >
     <div className={`w-5 ${createIconColor(props.item)}`}>
       {renderTypeIcon(props.item)}
diff --git a/components/shared/richText/RichTextElement.tsx b/components/shared/richText/RichTextElement.tsx
index b723fcef..f675d1d6 100644
--- a/components/shared/richText/RichTextElement.tsx
+++ b/components/shared/richText/RichTextElement.tsx
@@ -19,8 +19,6 @@ import Image from "next/image";
 import { FC } from "react";
 
 import { sanitizeFirstChildText } from "../../../lib/anchors";
-import { mainColorAnchor } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import {
   Action,
   Block_ContentChunk,
@@ -43,7 +41,6 @@ type ElementProps = Readonly<{
 export const createDefaultResolvers = (
   element: Elements.RichTextElement,
   isElementInsideTable: boolean = false,
-  siteCodename: keyof typeof mainColorAnchor,
   componentIndex = 0
 ): Partial<PortableTextReactComponents> => ({
   types: {
@@ -180,7 +177,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -193,7 +190,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -206,7 +203,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -219,7 +216,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -232,7 +229,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -245,7 +242,7 @@ export const createDefaultResolvers = (
         id={sanitizeFirstChildText(value)}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={`#${sanitizeFirstChildText(value)}`}
         >
           {children}
@@ -261,7 +258,7 @@ export const RichTextElement: FC<ElementProps> = (props) => {
   return (
     <PortableText
       value={portableText}
-      components={createDefaultResolvers(props.element, false, siteCodename)}
+      components={createDefaultResolvers(props.element, false)}
     />
   );
 };
@@ -275,10 +272,6 @@ type RichTextValueProps = Readonly<{
 const RichTextValue: FC<RichTextValueProps> = (props) => (
   <PortableText
     value={props.value}
-    components={createDefaultResolvers(
-      props.element,
-      props.isInsideTable,
-      siteCodename
-    )}
+    components={createDefaultResolvers(props.element, props.isInsideTable)}
   />
 );
diff --git a/components/shared/ui/footer.tsx b/components/shared/ui/footer.tsx
index 2c83140e..65f7b8f3 100644
--- a/components/shared/ui/footer.tsx
+++ b/components/shared/ui/footer.tsx
@@ -1,14 +1,11 @@
 import { FC } from "react";
 
-import { mainColorBgClass } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
-
 type Props = Readonly<{
   className?: string;
 }>;
 
 export const Footer: FC<Props> = () => (
-  <footer className={`${mainColorBgClass[siteCodename]} w-screen`}>
+  <footer className="bg-mainBackgroundColor w-screen">
     <div className="flex items-center mx-auto max-w-screen-xl h-16 px-4 text-white">
       <p>Ficto Healthtech - Leading the way in medical advancements...</p>
     </div>
diff --git a/components/shared/ui/menu.tsx b/components/shared/ui/menu.tsx
index 132c9234..dc28a40a 100644
--- a/components/shared/ui/menu.tsx
+++ b/components/shared/ui/menu.tsx
@@ -4,7 +4,6 @@ import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 import { FC, useEffect, useState } from "react";
 
-import { mainColorBgClass } from "../../../lib/constants/colors";
 import { perCollectionSiteName } from "../../../lib/constants/labels";
 import {
   ResolutionContext,
@@ -75,7 +74,7 @@ const MenuList: FC<MenuListProps> = (props) => {
               ? ""
               : "border-l-transparent border-t-transparent"
           }
-        border-gray-500 border-l-8 border-t-0 md:border-t-8 md:border-l-0 min-w-fit h-full w-full ${mainColorBgClass[siteCodename]} md:bg-transparent group grow`}
+        border-gray-500 border-l-8 border-t-0 md:border-t-8 md:border-l-0 min-w-fit h-full w-full bg-mainBackgroundColor md:bg-transparent group grow`}
           onClick={() => props.handleClick(i)}
         >
           {link.elements.subitems.value.length > 0 ? (
@@ -176,7 +175,7 @@ export const Menu: FC<Props> = (props) => {
   return (
     <div
       className={`w-full fixed z-50 transition-all ease-in-out duration-200 ${
-        (!isScrollable || isScrolled || smallMenuActive) ? mainColorBgClass[siteCodename] :  "bg-opacity-0"
+        (!isScrollable || isScrolled || smallMenuActive) ? 'bg-mainBackgroundColor' :  "bg-opacity-0"
       }`}
     >
       <div className="flex justify-between items-center mx-auto max-w-screen-xl md:h-16 pr-4">
diff --git a/components/shared/visualContainer/Grid.tsx b/components/shared/visualContainer/Grid.tsx
index 6aee67be..1abd6e02 100644
--- a/components/shared/visualContainer/Grid.tsx
+++ b/components/shared/visualContainer/Grid.tsx
@@ -2,49 +2,47 @@ import Image from "next/image";
 import Link from "next/link";
 import React, { FC } from "react";
 
-import { mainColorAnchor } from "../../../lib/constants/colors";
 import { resolveReference } from "../../../lib/routing";
-import { siteCodename } from "../../../lib/utils/env";
 import { createElementSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { contentTypes, Fact } from "../../../models";
-
-type Props = Readonly<{
-  items: ReadonlyArray<Fact>;
-  title: string;
-  subtitle: string;
-  codename: string;
-}>;
-
-const GridItem: FC<{ item: Fact }> = ({ item }) => (
-  <div
-    className="md:p-4 flex flex-col items-center"
-    key={item.system.id}
-  >
-    {item.elements.image.value[0] && (
-      <div className="relative max-w-sm w-full h-[400px]">
-        <Image
-          src={item.elements.image.value[0].url}
-          alt={item.elements.title.value}
-          fill
-          style={{ objectFit: "cover" }}
-          sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
-          className="rounded-lg transition ease-in-out group-hover:brightness-50 duration-300"
-          quality={75}
-        />
-        <div className="font-semibold text-white invisible group-hover:visible absolute top-1/2 left-10 transition delay-300 duration-300 ease-in-out">
-          {item.elements.referenceLabel.value}
-        </div>
-      </div>
-    )}
-    <div className="font-semibold text-3xl w-full md:px-4 pt-10 pb-2">
-      {item.elements.title.value}
-    </div>
-    <div className="md:px-4 justify-center w-full">
-      {item.elements.message.value}
-    </div>
-  </div>
-);
-
+
+type Props = Readonly<{
+  items: ReadonlyArray<Fact>;
+  title: string;
+  subtitle: string;
+  codename: string;
+}>;
+
+const GridItem: FC<{ item: Fact }> = ({ item }) => (
+  <div
+    className="md:p-4 flex flex-col items-center"
+    key={item.system.id}
+  >
+    {item.elements.image.value[0] && (
+      <div className="relative max-w-sm w-full h-[400px]">
+        <Image
+          src={item.elements.image.value[0].url}
+          alt={item.elements.title.value}
+          fill
+          style={{ objectFit: "cover" }}
+          sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
+          className="rounded-lg transition ease-in-out group-hover:brightness-50 duration-300"
+          quality={75}
+        />
+        <div className="font-semibold text-white invisible group-hover:visible absolute top-1/2 left-10 transition delay-300 duration-300 ease-in-out">
+          {item.elements.referenceLabel.value}
+        </div>
+      </div>
+    )}
+    <div className="font-semibold text-3xl w-full md:px-4 pt-10 pb-2">
+      {item.elements.title.value}
+    </div>
+    <div className="md:px-4 justify-center w-full">
+      {item.elements.message.value}
+    </div>
+  </div>
+);
+
 export const GridComponent: FC<Props> = (props) => (
   <div className="vis-container px-10 w-full relative">
     {props.title && (
@@ -56,7 +54,7 @@ export const GridComponent: FC<Props> = (props) => (
         )}
       >
         <a
-          className={mainColorAnchor[siteCodename]}
+          className="border-mainAnchorColor"
           href={"#" + props.codename}
         >
           {props.title}
@@ -91,4 +89,4 @@ export const GridComponent: FC<Props> = (props) => (
       )}
     </div>
   </div>
-);
+);
diff --git a/components/shared/visualContainer/HeroUnit.tsx b/components/shared/visualContainer/HeroUnit.tsx
index ba06c0f0..cfe94724 100644
--- a/components/shared/visualContainer/HeroUnit.tsx
+++ b/components/shared/visualContainer/HeroUnit.tsx
@@ -1,7 +1,5 @@
 import { FC } from "react";
 
-import { mainColorBgClass } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import {
   createElementSmartLink,
   createItemSmartLink,
@@ -22,7 +20,7 @@ export const HeroUnitComponent: FC<Props> = (props) => {
       url={fact.elements.image.value[0]?.url || ""}
       itemId={props.item.system.id}
     >
-      <div className={`p-5 text-white ${mainColorBgClass[siteCodename]} w-full`}>
+      <div className="p-5 text-white bg-mainBackgroundColor w-full">
         <div
           className="flex md:w-fit"
           {...createItemSmartLink(fact.system.id)}
diff --git a/components/shared/visualContainer/Stack.tsx b/components/shared/visualContainer/Stack.tsx
index 2bbbc61d..9849c66f 100644
--- a/components/shared/visualContainer/Stack.tsx
+++ b/components/shared/visualContainer/Stack.tsx
@@ -1,10 +1,5 @@
 import { FC, useState } from "react";
 
-import {
-  mainColorAnchor,
-  mainColorBorderClass,
-} from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
 import {
   createElementSmartLink,
   createItemSmartLink,
@@ -45,7 +40,7 @@ export const StackComponent: FC<Props> = (props) => {
           )}
         >
           <a
-            className={mainColorAnchor[siteCodename]}
+            className="border-mainAnchorColor"
             href={"#" + props.codename}
           >
             {props.title}
@@ -106,7 +101,7 @@ const Headers: FC<HeadersProps> = (props) => {
         <li
           key={i}
           className={`grow w-fit justify-center md:justify-between md:pl-5 flex overflow-hidden p-2 cursor-pointer ${props.selectedHeaderIndex === i
-            ? `border-b-2 ${mainColorBorderClass[siteCodename]}`
+            ? `border-b-2 border-mainBorderColor`
             : ""
             }`}
           onClick={() => props.onHeaderSelected(i)}
diff --git a/lib/constants/colors.ts b/lib/constants/colors.ts
index e0ea0716..3c5765a6 100644
--- a/lib/constants/colors.ts
+++ b/lib/constants/colors.ts
@@ -1,59 +1,4 @@
 import { CalloutType } from "../types/calloutType";
-import { PerCollection } from "../types/perCollection";
-
-export const mainColorHoverClass: PerCollection<string> = {
-  ficto_healthtech: "hover:bg-emerald-500",
-  ficto_imaging: "hover:bg-indigo-500",
-  ficto_surgical: "hover:bg-rose-500",
-}
-
-export const mainColorGroupHoverClass: PerCollection<string> = {
-  ficto_healthtech: "group-hover:bg-emerald-500",
-  ficto_imaging: "group-hover:bg-indigo-500",
-  ficto_surgical: "group-hover:bg-rose-500",
-}
-
-export const mainColorButtonClass: PerCollection<string> = {
-  ficto_healthtech: "bg-emerald-800",
-  ficto_imaging: "bg-indigo-800",
-  ficto_surgical: "bg-rose-800",
-}
-
-export const mainColorBgClass: PerCollection<string> = {
-  ficto_healthtech: "bg-emerald-950",
-  ficto_imaging: "bg-indigo-950",
-  ficto_surgical: "bg-rose-950",
-};
-
-export const mainColorMdBgClass: PerCollection<string> = {
-  ficto_healthtech: "md:bg-emerald-950",
-  ficto_imaging: "md:bg-indigo-950",
-  ficto_surgical: "md:bg-rose-950",
-}
-
-export const mainColorBorderClass: PerCollection<string> = {
-  ficto_healthtech: "border-emerald-800",
-  ficto_imaging: "border-indigo-800",
-  ficto_surgical: "border-rose-800",
-};
-
-export const mainColorTextClass: PerCollection<string> = {
-  ficto_healthtech: "text-emerald-700",
-  ficto_imaging: "text-indigo-700",
-  ficto_surgical: "text-rose-700",
-}
-
-export const mainColorHighlightClass: PerCollection<string> = {
-  ficto_healthtech: "text-emerald-950",
-  ficto_imaging: "text-indigo-950",
-  ficto_surgical: "text-rose-950",
-}
-
-export const mainColorAfterBgClass: PerCollection<string> = {
-  ficto_healthtech: "after:bg-emerald-900",
-  ficto_imaging: "after:bg-indigo-900",
-  ficto_surgical: "after:bg-rose-900",
-}
 
 export const calloutTypeColor: Readonly<Record<CalloutType, string>> = {
   warning: "text-orange-400",
@@ -61,8 +6,3 @@ export const calloutTypeColor: Readonly<Record<CalloutType, string>> = {
   lightbulb: "text-green-400",
 }
 
-export const mainColorAnchor: PerCollection<string> = {
-  ficto_healthtech: "border-emerald-800",
-  ficto_imaging: "border-indigo-800",
-  ficto_surgical: "border-rose-800",
-}
diff --git a/pages/[envId]/articles/[slug].tsx b/pages/[envId]/articles/[slug].tsx
index 772eac9e..a951db73 100644
--- a/pages/[envId]/articles/[slug].tsx
+++ b/pages/[envId]/articles/[slug].tsx
@@ -5,11 +5,10 @@ import { HeroImage } from "../../../components/landingPage/ui/heroImage";
 import { PersonHorizontal } from "../../../components/shared/PersonHorizontal";
 import { RichTextElement } from "../../../components/shared/richText/RichTextElement";
 import { AppPage } from "../../../components/shared/ui/appPage";
-import { mainColorBgClass } from "../../../lib/constants/colors";
 import { getAllArticles, getArticleBySlug, getDefaultMetadata, getSiteMenu } from "../../../lib/kontentClient";
 import { parseFlatted, Stringified, stringifyAsType } from "../../../lib/utils/circularityUtils";
 import { formatDate } from "../../../lib/utils/dateTime";
-import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
+import { defaultEnvId } from "../../../lib/utils/env";
 import { getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { Article, Metadata, Nav_NavigationItem } from "../../../models";
 
@@ -33,7 +32,7 @@ const ArticlePage: FC<Props> = props => {
         url={article.elements.heroImage.value[0]?.url || ""}
         itemId={article.system.id}
       >
-        <div className={`py-1 px-3 w-full md:w-fit ${mainColorBgClass[siteCodename]}  opacity-90`}>
+        <div className="py-1 px-3 w-full md:w-fit bg-mainBackgroundColor opacity-90">
           <h1 className="m-0 text-white  text-5xl tracking-wide font-semibold">{article.elements.title.value}</h1>
         </div>
         <div className="p-4">
@@ -51,7 +50,7 @@ const ArticlePage: FC<Props> = props => {
               article.elements.type.value.map(type => (
                 <div
                   key={type.codename}
-                  className={`w-fit p-2 ${mainColorBgClass[siteCodename]} font-semibold text-white`}
+                  className="w-fit p-2 bg-mainBackgroundColor font-semibold text-white"
                 >{type.name}
                 </div>
               ))
diff --git a/pages/[envId]/articles/category/[category]/page/[page].tsx b/pages/[envId]/articles/category/[category]/page/[page].tsx
index 8c615133..e1fc7351 100644
--- a/pages/[envId]/articles/category/[category]/page/[page].tsx
+++ b/pages/[envId]/articles/category/[category]/page/[page].tsx
@@ -7,13 +7,12 @@ import { FC, useState } from "react";
 import { ArticleItem } from "../../../../../../components/listingPage/ArticleItem";
 import { Content } from "../../../../../../components/shared/Content";
 import { AppPage } from "../../../../../../components/shared/ui/appPage";
-import { mainColorBgClass, mainColorBorderClass, mainColorHoverClass } from "../../../../../../lib/constants/colors";
 import { ArticlePageSize } from "../../../../../../lib/constants/paging";
 import { getArticlesCountByCategory, getArticlesForListing, getDefaultMetadata, getItemBySlug, getItemsTotalCount, getSiteMenu } from "../../../../../../lib/kontentClient";
 import { ResolutionContext, resolveUrlPath } from "../../../../../../lib/routing";
 import { ArticleListingUrlQuery, ArticleTypeWithAll, categoryFilterSource, isArticleType } from "../../../../../../lib/utils/articlesListing";
 import { parseFlatted, Stringified, stringifyAsType } from "../../../../../../lib/utils/circularityUtils";
-import { defaultEnvId, siteCodename } from "../../../../../../lib/utils/env";
+import { defaultEnvId } from "../../../../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../../../../lib/utils/pageUtils";
 import { Article, contentTypes, Metadata, Nav_NavigationItem, taxonomies, WSL_Page } from "../../../../../../models";
 
@@ -50,7 +49,7 @@ const LinkButton: FC<LinkButtonProps> = props => (
   >
     <button
       disabled={props.disabled}
-      className={`${props.roundRight && 'rounded-r-lg'} ${props.roundLeft && 'rounded-l-lg'} disabled:cursor-not-allowed ${props.highlight ? `${mainColorBgClass[siteCodename]} text-white` : 'bg-white'} px-3 py-2 leading-tight text-gray-500 border disabled:bg-gray-200 border-gray-300 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 `}
+      className={`${props.roundRight && 'rounded-r-lg'} ${props.roundLeft && 'rounded-l-lg'} disabled:cursor-not-allowed ${props.highlight ? `bg-mainBackgroundColor text-white` : 'bg-white'} px-3 py-2 leading-tight text-gray-500 border disabled:bg-gray-200 border-gray-300 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 `}
     >
       {props.text}
     </button>
@@ -88,7 +87,7 @@ const FilterOptions: FC<FilterOptionProps> = ({ options, router }) => {
             } as ResolutionContext)}
             onClick={() => setDropdownActive(!dropdownActive)}
             scroll={false}
-            className={`inline-flex items-center z-40 md:justify-between md:mr-4 md:w-max px-6 py-1 no-underline ${key === category ? [mainColorBgClass[siteCodename], mainColorBorderClass[siteCodename], "text-white", "cursor-default"].join(" ") : `border-gray-200 bg-white ${mainColorHoverClass[siteCodename]} hover:text-white cursor-pointer`} md:rounded-3xl`}
+            className={`inline-flex items-center z-40 md:justify-between md:mr-4 md:w-max px-6 py-1 no-underline ${key === category ? ['bg-mainBackgroundColor', 'border-mainBorderColor', "text-white", "cursor-default"].join(" ") : `border-gray-200 bg-white hover:bg-mainColorHover hover:text-white cursor-pointer`} md:rounded-3xl`}
           >{value}
           </Link>
         ))}
diff --git a/pages/[envId]/products/[slug].tsx b/pages/[envId]/products/[slug].tsx
index 2670fb8b..e3a86bc3 100644
--- a/pages/[envId]/products/[slug].tsx
+++ b/pages/[envId]/products/[slug].tsx
@@ -4,10 +4,9 @@ import { ParsedUrlQuery } from 'querystring';
 import { FC } from "react";
 
 import { AppPage } from "../../../components/shared/ui/appPage";
-import { mainColorButtonClass, mainColorHoverClass, mainColorTextClass } from "../../../lib/constants/colors";
 import { getDefaultMetadata, getProductDetail, getProductItemsWithSlugs, getSiteMenu } from "../../../lib/kontentClient";
 import { Stringified, stringifyAsType } from "../../../lib/utils/circularityUtils";
-import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
+import { defaultEnvId } from "../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { createElementSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { contentTypes, Metadata, Nav_NavigationItem, Product } from "../../../models";
@@ -119,7 +118,7 @@ const ProductDetail: FC<Props> = ({ product, siteMenu, defaultMetadata }) => (
               {...createElementSmartLink(contentTypes.product.elements.price.codename)}
             >
               <div>
-                <div className={`rounded-lg bg-gray-100 flex ${mainColorTextClass[siteCodename]} py-2 px-3`}>
+                <div className="rounded-lg bg-gray-100 flex text-mainTextColor py-2 px-3">
                   <span className=" mr-1 mt-1">EUR</span>
                   <span className="font-bold text-3xl">{product.elements.price.value}</span>
                 </div>
@@ -137,7 +136,7 @@ const ProductDetail: FC<Props> = ({ product, siteMenu, defaultMetadata }) => (
             <div className="flex py-4 space-x-4">
               <button
                 type="button"
-                className={`${mainColorHoverClass[siteCodename]} ${mainColorButtonClass[siteCodename]} bottom-0 left-0 text-white font-bold mt-10 py-2 px-4 rounded`}
+                className="hover:bg-mainHoverColor bg-mainButtonColor bottom-0 left-0 text-white font-bold mt-10 py-2 px-4 rounded"
               >
                 Add to Cart
               </button>
diff --git a/pages/[envId]/products/index.tsx b/pages/[envId]/products/index.tsx
index 2cc9587a..1b3b5ec1 100644
--- a/pages/[envId]/products/index.tsx
+++ b/pages/[envId]/products/index.tsx
@@ -6,13 +6,12 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { ProductItem } from "../../../components/listingPage/ProductItem";
 import { Content } from "../../../components/shared/Content";
 import { AppPage } from "../../../components/shared/ui/appPage";
-import { mainColorBgClass } from "../../../lib/constants/colors";
 import { ProductsPageSize } from "../../../lib/constants/paging";
 import { getDefaultMetadata, getItemBySlug, getProductsForListing, getSiteMenu } from "../../../lib/kontentClient";
 import { createQueryString, reservedListingSlugs, resolveUrlPath } from "../../../lib/routing";
 import { changeUrlQueryString } from "../../../lib/utils/changeUrlQueryString";
 import { parseFlatted, Stringified, stringifyAsType } from "../../../lib/utils/circularityUtils";
-import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
+import { defaultEnvId } from "../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { contentTypes, Metadata, Nav_NavigationItem, Product, WSL_Page } from "../../../models";
 
@@ -174,7 +173,7 @@ export const Products: FC<Props> = props => {
       <h2 className="m-0 mt-16 ml-4 sm:ml-0">Surgical products</h2>
 
       <div className="flex flex-col md:flex-row mt-4 md:gap-2 text-white">
-        <div className={`flex flex-col ${mainColorBgClass[siteCodename]} p-4`}>
+        <div className="flex flex-col bg-mainBackgroundColor p-4">
           <h4 className="m-0 py-2 text-white">Category</h4>
           <ul className="m-0 min-h-full gap-2 p-0 list-none">
             {Array.isArray(taxonomies) && taxonomies.map(renderFilterOption)}
diff --git a/pages/[envId]/solutions/[slug].tsx b/pages/[envId]/solutions/[slug].tsx
index 4f4f1707..7157bb9f 100644
--- a/pages/[envId]/solutions/[slug].tsx
+++ b/pages/[envId]/solutions/[slug].tsx
@@ -5,10 +5,9 @@ import { FC } from "react";
 import { HeroImage } from "../../../components/landingPage/ui/heroImage";
 import { RichTextElement } from "../../../components/shared/richText/RichTextElement";
 import { AppPage } from "../../../components/shared/ui/appPage";
-import { mainColorBgClass } from "../../../lib/constants/colors";
 import { getDefaultMetadata, getSiteMenu, getSolutionDetail, getSolutionsWithSlugs } from "../../../lib/kontentClient";
 import { parseFlatted, Stringified, stringifyAsType } from "../../../lib/utils/circularityUtils";
-import { defaultEnvId, siteCodename } from "../../../lib/utils/env";
+import { defaultEnvId } from "../../../lib/utils/env";
 import { getEnvIdFromRouteParams, getPreviewApiKeyFromPreviewData } from "../../../lib/utils/pageUtils";
 import { createElementSmartLink } from "../../../lib/utils/smartLinkUtils";
 import { contentTypes, Metadata, Nav_NavigationItem, Solution } from "../../../models";
@@ -88,7 +87,7 @@ const SolutionDetail: FC<Props> = props => {
       itemId={solution.system.id}
     >
       <div
-        className={`py-1 px-3 w-full md:w-fit ${mainColorBgClass[siteCodename]}  opacity-90`}
+        className="py-1 px-3 w-full md:w-fit bg-mainBackgroundColor  opacity-90"
       >
         <h1
           {...createElementSmartLink(
diff --git a/pages/callback.tsx b/pages/callback.tsx
index 7950fba8..57934d88 100644
--- a/pages/callback.tsx
+++ b/pages/callback.tsx
@@ -5,9 +5,8 @@ import { useEffect, useState } from "react";
 
 import { BuildError } from "../components/shared/ui/BuildError";
 import { webAuth } from "../lib/constants/auth";
-import { mainColorTextClass } from "../lib/constants/colors";
 import { defaultCookieOptions, previewApiKeyCookieName, urlAfterAuthCookieName } from "../lib/constants/cookies";
-import { internalApiDomain, siteCodename } from "../lib/utils/env";
+import { internalApiDomain } from "../lib/utils/env";
 import { getEnvIdFromCookie } from "../lib/utils/pageUtils";
 
 const CallbackPage: React.FC = () => {
@@ -130,7 +129,7 @@ const isIapiError = (response: unknown): response is Readonly<{ description: str
 
 const Loader = () => (
   <div
-    className={`animate-spin inline-block mt-[20%] ml-[50%] w-8 h-8 border-[3px] border-current border-t-transparent ${mainColorTextClass[siteCodename]} rounded-full`}
+    className="animate-spin inline-block mt-[20%] ml-[50%] w-8 h-8 border-[3px] border-current border-t-transparent text-mainTextColor rounded-full"
     role="status"
     aria-label="loading"
   >
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 53c05ce0..00000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./app/**/*.{ts,tsx}",
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./lib/**/*.{ts,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
-}
-
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 00000000..0cbddc6e
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,62 @@
+import typography from "@tailwindcss/typography";
+import colors from 'tailwindcss/colors';
+
+import { PerCollection } from "./lib/types/perCollection";
+import { siteCodename } from "./lib/utils/env";
+
+const color = (colors: PerCollection<string>): string => colors[siteCodename];
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./lib/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        mainBackgroundColor: color({
+          ficto_healthtech: colors.emerald[950],
+          ficto_imaging: colors.indigo[950],
+          ficto_surgical: colors.rose[950],
+        }),
+        mainHoverColor: color({
+          ficto_healthtech: colors.emerald[500],
+          ficto_imaging: colors.indigo[500],
+          ficto_surgical: colors.rose[500],
+        }),
+        mainButtonColor: color({
+          ficto_healthtech: colors.emerald[800],
+          ficto_imaging: colors.indigo[800],
+          ficto_surgical: colors.rose[800],
+        }),
+        mainBorderColor: color({
+          ficto_healthtech: colors.emerald[800],
+          ficto_imaging: colors.indigo[800],
+          ficto_surgical: colors.rose[800],
+        }),
+        mainTextColor: color({
+          ficto_healthtech: colors.emerald[700],
+          ficto_imaging: colors.indigo[700],
+          ficto_surgical: colors.rose[700],
+        }),
+        mainAfterColor: color({
+          ficto_healthtech: colors.emerald[900],
+          ficto_imaging: colors.indigo[900],
+          ficto_surgical: colors.rose[900],
+        }),
+        mainAnchorColor: color({
+          ficto_healthtech: colors.emerald[800],
+          ficto_imaging: colors.indigo[800],
+          ficto_surgical: colors.rose[800],
+        }) 
+      }
+    },
+  },
+  plugins: [
+    typography,
+  ],
+}
+