diff --git a/nuxt-frontend/components/android-app-development/DevelopmentSection.vue b/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
index f8f833293..4e36168d9 100644
--- a/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
@@ -186,7 +186,7 @@ export default {
       items: [
         {
           title: "Android App Development Consultation",
-          bgColor: "bg-[#F2709C]/[0.04]",
+          bgColor: "bg-pink-40",
           icon: consultation,
           description: [
             "At Canopas, we believe that a successful project begins with a thorough understanding of your vision, goals, and market dynamics.",
@@ -210,7 +210,7 @@ export default {
         },
         {
           title: "Custom Android Application Development",
-          bgColor: "bg-[#F2709C]/[0.04]",
+          bgColor: "bg-pink-40",
           icon: custom,
           description: [
             "Our approach to development is rooted in agility and focused collaboration.  We build in two-week sprints where our team devotes their complete energy and attention to sculpting the foundation of your app.",
@@ -234,7 +234,7 @@ export default {
         },
         {
           title: "Maintenance and Support",
-          bgColor: "bg-[#F2709C]/[0.04]",
+          bgColor: "bg-pink-40",
           icon: maintenance,
           description: [
             "Post-deployment, we monitor the app's performance and user feedback closely, ready to make quick updates or fixes if needed. Our maintenance and support services ensure your app stays relevant, competitive, and effective in the face of new devices, OS updates, and emerging user expectations.",
diff --git a/nuxt-frontend/components/android-app-development/SuccessStorySection.vue b/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
index 83d7e5895..00441f670 100644
--- a/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
+++ b/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
@@ -34,7 +34,7 @@
               <div
                 v-for="(client, index) in clients"
                 :key="index"
-                class="mb-8 mx-auto rounded-[5px] sm:px-10 md:px-6 lg:px-4 xl:px-24 p-5 bg-[#F2709C]/[0.08]"
+                class="mb-8 mx-auto rounded-[5px] sm:px-10 md:px-6 lg:px-4 xl:px-24 p-5 bg-pink-80"
               >
                 <div
                   class="text-black-87 sub-h1-semibold lg:mobile-header-2-semibold transition-all ease duration-500"
diff --git a/nuxt-frontend/components/contact/NewContactForm.vue b/nuxt-frontend/components/contact/NewContactForm.vue
index ca16b29c8..4fa7a7c9c 100755
--- a/nuxt-frontend/components/contact/NewContactForm.vue
+++ b/nuxt-frontend/components/contact/NewContactForm.vue
@@ -10,7 +10,7 @@
               <input
                 type="text"
                 id="username"
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 name="username"
                 required
                 autocomplete="given-username"
@@ -33,7 +33,7 @@
             </div>
             <div class="relative pt-8 text-left">
               <input
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 type="text"
                 name="email"
                 id="email"
@@ -64,7 +64,7 @@
             </div>
             <div class="relative pt-8 text-left">
               <textarea
-                class="block peer mx-0 w-full pb-1 min-h-[50px] md:min-h-[90px] rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium placeholder-black-core/[.6] focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 min-h-[50px] md:min-h-[90px] rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 id="project"
                 name="project"
                 rows="3"
@@ -93,7 +93,7 @@
             </div>
             <div class="relative pt-6 md:pt-8 text-left">
               <input
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 type="text"
                 name="reference"
                 id="reference"
@@ -121,7 +121,7 @@
             <div class="relative pt-8">
               <div ref="invest-list" class="flex">
                 <button
-                  class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b border-black/[0.08] bg-none px-0 sub-h3-regular lg:mobile-header-3-regular whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-60"
+                  class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b bg-none px-0 sub-h3-regular lg:mobile-header-3-regular whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-60"
                   type="button"
                   id="invest"
                   name="invest"
@@ -135,7 +135,9 @@
                       floatable
                         ? '-translate-y-4 xl:-translate-y-[0.5rem] origin-[0] scale-75'
                         : 'translate-y-0 scale-100',
-                      floatable && showList ? 'text-black' : 'text-black-60',
+                      floatable && showList
+                        ? 'text-black-core'
+                        : 'text-black-60',
                     ]"
                     @click="floatable = !floatable"
                     >I'll invest</label
diff --git a/nuxt-frontend/components/contact/NewContactLanding.vue b/nuxt-frontend/components/contact/NewContactLanding.vue
index 9aa662d02..15878bb5c 100644
--- a/nuxt-frontend/components/contact/NewContactLanding.vue
+++ b/nuxt-frontend/components/contact/NewContactLanding.vue
@@ -29,7 +29,7 @@
           class="flex items-start px-0 pt-4"
         >
           <span
-            class="mt-2 md:mt-3 mr-[15px] w-2 md:w-[8.81px] h-2 md:h-[9px] rounded-full bg-[#F2709C]"
+            class="mt-2 md:mt-3 mr-[15px] w-2 md:w-[8.81px] h-2 md:h-[9px] rounded-full bg-pink-300"
           ></span>
           <div
             class="w-11/12 lg:w-[90%] sub-h3-regular lg:mobile-header-3-regular text-black-87"
diff --git a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
index 2e220a4e6..e4b8a60a1 100644
--- a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
@@ -47,7 +47,9 @@
           :key="index"
           class="cursor-pointer px-4"
         >
-          <div class="flex flex-col gap-4 py-8 px-4 bg-white/[0.08] rounded-xl">
+          <div
+            class="flex flex-col gap-4 py-8 px-4 bg-white-core-90 rounded-xl"
+          >
             <div class="mobile-header-3-semibold">
               <span v-html="item.title"></span>
             </div>
@@ -186,7 +188,7 @@ function handleScroll() {
   @apply static pt-8;
 }
 .swiper-pagination-bullet {
-  @apply !w-3 !h-3 !rounded-full !bg-[#F2709C]/[0.8] !border !border-solid !border-[#FFFFFF]/[0.80];
+  @apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;
 }
 .swiper-pagination-bullet-active {
   @apply !border-none !opacity-100;
diff --git a/nuxt-frontend/components/flutter-app-development/FaqSection.vue b/nuxt-frontend/components/flutter-app-development/FaqSection.vue
index bfd9836ea..a735105d3 100644
--- a/nuxt-frontend/components/flutter-app-development/FaqSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/FaqSection.vue
@@ -14,7 +14,7 @@
             :key="faq"
           >
             <div
-              class="faq-container cursor-pointer overflow-hidden rounded-xl bg-[#F2709C]/[0.08] py-6 px-4 lg:py-8 lg:px-10"
+              class="faq-container cursor-pointer overflow-hidden rounded-xl bg-pink-80 py-6 px-4 lg:py-8 lg:px-10"
               @click="expandListItem(faq.id)"
             >
               <div class="faq-header flex flex-row gap-4 lg:gap-6">
@@ -70,7 +70,7 @@
               :key="faq"
             >
               <div
-                class="faq-container cursor-pointer overflow-hidden rounded-xl bg-[#F2709C]/[0.08] py-6 px-4 lg:py-8 lg:px-10"
+                class="faq-container cursor-pointer overflow-hidden rounded-xl bg-pink-80 py-6 px-4 lg:py-8 lg:px-10"
                 @click="expandListItem(faq.id)"
               >
                 <div class="faq-header flex flex-row gap-4 lg:gap-6">
diff --git a/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue b/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
index 5cf076456..551036f54 100644
--- a/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
+++ b/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
@@ -104,7 +104,7 @@ const pagination = {
   @apply static pt-6 pl-0;
 }
 .swiper-pagination-bullet {
-  @apply !w-3 !h-3 !rounded-full !bg-[#F2709C]/[0.8] !border !border-solid !border-[#FFFFFF]/[0.80];
+  @apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;
 }
 .swiper-pagination-bullet-active {
   @apply !border-none !opacity-100;
diff --git a/nuxt-frontend/components/jobs/VirtuesView.vue b/nuxt-frontend/components/jobs/VirtuesView.vue
index f69e7ef06..4d4103a0d 100644
--- a/nuxt-frontend/components/jobs/VirtuesView.vue
+++ b/nuxt-frontend/components/jobs/VirtuesView.vue
@@ -1,24 +1,24 @@
 <template>
   <div
-    class="from-[#ffad9326] to-[#f2709c26] bg-gradient-247 px-0 py-[100px] overflow-hidden text-center rounded-tr-none rounded-bl-none rounded-tl-[100px] rounded-br-[100px] sm:rounded-tl-[150px] sm:rounded-br-[150px] md:rounded-tl-[200px] md:rounded-br-[200px] lg:rounded-tl-[300px] lg:rounded-br-[300px]"
+    class="from-[#ffad9326] to-[#f2709c26] bg-gradient-247 px-0 overflow-hidden text-center rounded-tr-none rounded-bl-none rounded-tl-[100px] rounded-br-[100px] sm:rounded-tl-[150px] sm:rounded-br-[150px] md:rounded-tl-[200px] md:rounded-br-[200px] lg:rounded-tl-[300px] lg:rounded-br-[300px]"
   >
-    <div class="normal-text text-black-900 font-bold">
+    <div class="pt-10 mobile-header-3-semibold lg:desk-header-3 text-black-87">
       Canopas is built on the 10 virtues
     </div>
-    <div class="text-center container mt-20 sm:p-0">
+    <div class="text-center container mt-8 mb-14 sm:p-0">
       <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
         <div
-          class="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg:flex-[33%]"
           v-for="virtue in virtues.slice(0, 3)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -27,41 +27,42 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5  sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-xl flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              class="sub-h3-regular lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full lg:mb-0 2xl:mb-[2%]
+"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%]">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
         <div
-          class="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg:flex-[33%] "
           v-for="virtue in virtues.slice(3, 5)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -71,22 +72,22 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              class="sub-h3-regular  lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full lg:mb-0 2xl:mb-[2%]"
             >
               {{ virtue.description }}
             </div>
@@ -95,17 +96,17 @@
       </div>
       <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
         <div
-          class="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg:flex-[33%]"
           v-for="virtue in virtues.slice(5, 8)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -115,41 +116,41 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5  sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              class="sub-h3-regular  lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full lg:mb-0 2xl:mb-[2%]"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%]">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
         <div
-          class="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg:flex-[33%] "
           v-for="virtue in virtues.slice(8, 10)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -159,22 +160,22 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              class="sub-h3-regular  lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
             >
               {{ virtue.description }}
             </div>
diff --git a/nuxt-frontend/components/partials/NewFooter.vue b/nuxt-frontend/components/partials/NewFooter.vue
index 49acacbc0..b687962e5 100644
--- a/nuxt-frontend/components/partials/NewFooter.vue
+++ b/nuxt-frontend/components/partials/NewFooter.vue
@@ -3,7 +3,7 @@
     <div class="container text-center">
       <div class="mb-8 md:mb-[60px]">
         <div
-          class="text-[1.375rem] leading-[1.6875rem] md:text-2xl md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white/[.87] font-bold"
+          class="text-[1.375rem] leading-[1.6875rem] md:text-2xl md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white font-bold"
         >
           Follow us on
         </div>
@@ -26,7 +26,7 @@
         </ul>
       </div>
       <div
-        class="mb-8 md:mb-9 text-[0.75rem] leading-[0.9375rem] md:text-[0.84375rem] md:leading-[1.03125rem] lg:text-[0.9375rem] lg:leading-[1.125rem] text-white/[.87]"
+        class="mb-8 md:mb-9 text-[0.75rem] leading-[0.9375rem] md:text-[0.84375rem] md:leading-[1.03125rem] lg:text-[0.9375rem] lg:leading-[1.125rem] text-white-core-80"
       >
         <Icon name="fa6-regular:copyright" class="box-content" />
         {{ new Date().getFullYear() }} Canopas Software LLP. All rights
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index 9fc5e08b6..05f7040b8 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -38,12 +38,16 @@ module.exports = {
           60: "#00000099",
         },
         white: "#ffffff",
-        "white-core": {
+        'white-core': {
           80: "#FFFFFFCC",
           60: "#FFFFFF99",
+          90: "#FFFFFF14"
         },
         pink: {
           300: "#f2709c",
+          40: "rgba(242, 112, 156, .04)",
+          80: "rgba(242, 112, 156, .08)",
+          90: "rgba(242, 112, 156, .8)"
         },
         orange: {
           300: "#ff835b",