diff --git a/frontend/src/components/Settings/EmailAccountCard.vue b/frontend/src/components/Settings/EmailAccountCard.vue
index 51ac9b2a..e7f693e4 100644
--- a/frontend/src/components/Settings/EmailAccountCard.vue
+++ b/frontend/src/components/Settings/EmailAccountCard.vue
@@ -6,7 +6,7 @@
     <div class="flex items-center justify-between gap-2">
       <EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
       <div>
-        <p class="text-sm font-semibold text-ink-gray-9">
+        <p class="text-sm font-semibold text-ink-gray-8">
           {{ emailAccount.email_account_name }}
         </p>
         <div class="text-sm text-ink-gray-4">{{ emailAccount.email_id }}</div>
diff --git a/frontend/src/components/Settings/EmailAccountList.vue b/frontend/src/components/Settings/EmailAccountList.vue
index 90d258cd..3b62ae45 100644
--- a/frontend/src/components/Settings/EmailAccountList.vue
+++ b/frontend/src/components/Settings/EmailAccountList.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- header -->
-    <div class="flex justify-between text-ink-gray-9">
+    <div class="flex justify-between text-ink-gray-8">
       <div class="flex flex-col gap-1 w-9/12">
         <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
           {{ __('Email accounts') }}
diff --git a/frontend/src/components/Settings/EmailAdd.vue b/frontend/src/components/Settings/EmailAdd.vue
index 4e69a5bf..b4f13e54 100644
--- a/frontend/src/components/Settings/EmailAdd.vue
+++ b/frontend/src/components/Settings/EmailAdd.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col h-full gap-4">
     <!-- title and desc -->
     <div role="heading" aria-level="1" class="flex flex-col gap-1">
-      <h2 class="text-xl font-semibold text-ink-gray-9">
+      <h2 class="text-xl font-semibold text-ink-gray-8">
         {{ __('Setup Email') }}
       </h2>
       <p class="text-sm text-ink-gray-5">
diff --git a/frontend/src/components/Settings/EmailEdit.vue b/frontend/src/components/Settings/EmailEdit.vue
index 0c2ebb21..09cbe6b2 100644
--- a/frontend/src/components/Settings/EmailEdit.vue
+++ b/frontend/src/components/Settings/EmailEdit.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col h-full gap-4">
     <!-- title and desc -->
     <div role="heading" aria-level="1" class="flex justify-between gap-1">
-      <h2 class="text-xl font-semibold text-ink-gray-9">
+      <h2 class="text-xl font-semibold text-ink-gray-8">
         {{ __('Edit Email') }}
       </h2>
     </div>
diff --git a/frontend/src/components/Settings/GeneralSettings.vue b/frontend/src/components/Settings/GeneralSettings.vue
index 20beff3e..14a78780 100644
--- a/frontend/src/components/Settings/GeneralSettings.vue
+++ b/frontend/src/components/Settings/GeneralSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
+  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
     <div class="flex justify-between">
       <div class="flex flex-col gap-1 w-9/12">
         <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
@@ -38,7 +38,7 @@
       <!-- logo -->
 
       <div class="flex flex-col justify-between gap-4">
-        <span class="text-base font-semibold text-ink-gray-9">
+        <span class="text-base font-semibold text-ink-gray-8">
           {{ __('Logo') }}
         </span>
         <div class="flex flex-1 gap-5">
@@ -73,7 +73,7 @@
       <!-- favicon -->
 
       <div class="flex flex-col justify-between gap-4">
-        <span class="text-base font-semibold text-ink-gray-9">
+        <span class="text-base font-semibold text-ink-gray-8">
           {{ __('Favicon') }}
         </span>
         <div class="flex flex-1 gap-5">
@@ -108,7 +108,7 @@
       <!-- Home actions -->
 
       <div class="flex flex-col justify-between gap-4">
-        <span class="text-base font-semibold text-ink-gray-9">
+        <span class="text-base font-semibold text-ink-gray-8">
           {{ __('Home actions') }}
         </span>
         <div class="flex flex-1">
diff --git a/frontend/src/components/Settings/InviteUserPage.vue b/frontend/src/components/Settings/InviteUserPage.vue
index 14bdf849..6402f416 100644
--- a/frontend/src/components/Settings/InviteUserPage.vue
+++ b/frontend/src/components/Settings/InviteUserPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
+  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
     <div class="flex justify-between">
       <div class="flex flex-col gap-1 w-9/12">
         <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
@@ -72,7 +72,7 @@
               :key="user.name"
             >
               <div class="text-base">
-                <span class="text-ink-gray-9">
+                <span class="text-ink-gray-8">
                   {{ user.email }}
                 </span>
                 <span class="text-ink-gray-5">
diff --git a/frontend/src/components/Settings/ProfileSettings.vue b/frontend/src/components/Settings/ProfileSettings.vue
index b2899157..2d7fc253 100644
--- a/frontend/src/components/Settings/ProfileSettings.vue
+++ b/frontend/src/components/Settings/ProfileSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
+  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
     <div class="flex-1 flex flex-col gap-6 mt-2 overflow-y-auto">
       <div v-if="profile" class="flex w-full items-center justify-between">
         <FileUploader
@@ -50,7 +50,7 @@
                 </component>
               </div>
               <div class="flex flex-col gap-1">
-                <span class="text-2xl font-semibold text-ink-gray-9">
+                <span class="text-2xl font-semibold text-ink-gray-8">
                   {{ profile.full_name }}
                 </span>
                 <span class="text-base text-ink-gray-7">
diff --git a/frontend/src/components/Settings/Settings.vue b/frontend/src/components/Settings/Settings.vue
index c81fa5f3..e4662770 100644
--- a/frontend/src/components/Settings/Settings.vue
+++ b/frontend/src/components/Settings/Settings.vue
@@ -7,7 +7,7 @@
     <template #body>
       <div class="flex h-[calc(100vh_-_8rem)]">
         <div class="flex flex-col p-2 w-52 shrink-0 bg-surface-gray-2">
-          <h1 class="px-2 pt-2 mb-3 text-lg font-semibold text-ink-gray-9">
+          <h1 class="px-2 pt-2 mb-3 text-lg font-semibold text-ink-gray-8">
             {{ __('Settings') }}
           </h1>
           <div v-for="tab in tabs">
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index 297656eb..31a57f63 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -3,7 +3,7 @@
     <div class="flex justify-between">
       <div class="flex flex-col gap-1 w-9/12">
         <h2
-          class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
+          class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-8"
         >
           {{ title || __(doctype) }}
           <Badge
diff --git a/frontend/src/components/Settings/TelephonySettings.vue b/frontend/src/components/Settings/TelephonySettings.vue
index af944903..08681fff 100644
--- a/frontend/src/components/Settings/TelephonySettings.vue
+++ b/frontend/src/components/Settings/TelephonySettings.vue
@@ -3,7 +3,7 @@
     <div class="flex justify-between">
       <div class="flex flex-col gap-1 w-9/12">
         <h2
-          class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
+          class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-8"
         >
           {{ __('Telephony settings') }}
           <Badge
@@ -46,7 +46,7 @@
 
       <!-- Twilio -->
       <div v-if="isManager()" class="flex flex-col justify-between gap-4">
-        <span class="text-base font-semibold text-ink-gray-9">
+        <span class="text-base font-semibold text-ink-gray-8">
           {{ __('Twilio') }}
         </span>
         <FieldLayout
@@ -59,7 +59,7 @@
 
       <!-- Exotel -->
       <div v-if="isManager()" class="flex flex-col justify-between gap-4">
-        <span class="text-base font-semibold text-ink-gray-9">
+        <span class="text-base font-semibold text-ink-gray-8">
           {{ __('Exotel') }}
         </span>
         <FieldLayout
diff --git a/frontend/src/components/Settings/Users.vue b/frontend/src/components/Settings/Users.vue
index aca6344e..9cab8739 100644
--- a/frontend/src/components/Settings/Users.vue
+++ b/frontend/src/components/Settings/Users.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
+  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
     <!-- Header -->
     <div class="flex justify-between">
       <div class="flex flex-col gap-1 w-9/12">
@@ -53,7 +53,7 @@
               size="xl"
             />
             <div class="flex flex-col gap-1 ml-3">
-              <div class="flex items-center text-base text-ink-gray-9 h-4">
+              <div class="flex items-center text-base text-ink-gray-8 h-4">
                 {{ user.full_name }}
               </div>
               <div class="text-base text-ink-gray-5">
@@ -196,7 +196,7 @@ function RoleOption({ active, role, onClick, selected }) {
     'button',
     {
       class: [
-        active ? 'bg-surface-gray-2' : 'text-ink-gray-9',
+        active ? 'bg-surface-gray-2' : 'text-ink-gray-8',
         'group flex w-full justify-between items-center rounded-md px-2 py-2 text-sm',
       ],
       onClick: !selected ? onClick : null,