diff --git a/dashboard/src/App.vue b/dashboard/src/App.vue
index 1a65fc0342a..f8d114b6841 100644
--- a/dashboard/src/App.vue
+++ b/dashboard/src/App.vue
@@ -43,6 +43,9 @@ import { dialogs } from './utils/components';
 import { useRoute } from 'vue-router';
 import { getTeam } from './data/team';
 import { session } from './data/session.js';
+import { initializeTheme } from '@/components/utils/UseTheme';
+
+initializeTheme();
 
 const AppSidebar = defineAsyncComponent(
 	() => import('./components/navigation/sidebar/Sidebar.vue'),
diff --git a/dashboard/src/assets/style.css b/dashboard/src/assets/style.css
index 12a13bf482d..c01b5f88310 100644
--- a/dashboard/src/assets/style.css
+++ b/dashboard/src/assets/style.css
@@ -31,4 +31,11 @@
 		width: 12px;
 		height: 12px;
 	}
+
+	body {
+  background-color: var(--surface-white);
+  color: var(--ink-gray-9);
+  @apply text-base;
+	}
+
 }
diff --git a/dashboard/src/components/AccessRequestStatusDialog.vue b/dashboard/src/components/AccessRequestStatusDialog.vue
index 3c1c9e55c64..e101b6a41e2 100644
--- a/dashboard/src/components/AccessRequestStatusDialog.vue
+++ b/dashboard/src/components/AccessRequestStatusDialog.vue
@@ -32,7 +32,7 @@
 					</p>
 				</div>
 				<div class="rounded-sm border divide-y">
-					<div class="grid grid-cols-5 font-medium bg-gray-50 divide-x">
+					<div class="grid grid-cols-5 font-medium bg-surface-gray-1 divide-x">
 						<div class="col-span-2 py-2 px-3">Permission</div>
 						<div class="col-span-1 py-2 px-3">Granted</div>
 						<div class="col-span-2 py-2 px-3">Expiry</div>
diff --git a/dashboard/src/components/AddDomainDialog.vue b/dashboard/src/components/AddDomainDialog.vue
index 594980156cd..b0eb0a379c8 100644
--- a/dashboard/src/components/AddDomainDialog.vue
+++ b/dashboard/src/components/AddDomainDialog.vue
@@ -19,7 +19,7 @@
 
 				<div
 					v-if="newDomain && !dnsVerified"
-					class="prose prose-sm space-y-2 prose-strong:text-gray-800"
+					class="prose prose-sm space-y-2 prose-strong:text-ink-gray-8"
 				>
 					<p>Create one of the following DNS records:</p>
 					<ul>
@@ -40,7 +40,7 @@
 				<div v-if="dnsResult && !dnsResult.matched" class="space-y-2">
 					<p class="text-base">
 						Received following DNS query responses for
-						<span class="font-semibold text-gray-700">{{ newDomain }}</span
+						<span class="font-semibold text-ink-gray-7">{{ newDomain }}</span
 						>.
 					</p>
 					<div
@@ -48,13 +48,13 @@
 						class="space-y-2"
 					>
 						<p class="text-base">
-							<span class="font-semibold text-gray-700">CNAME</span>
+							<span class="font-semibold text-ink-gray-7">CNAME</span>
 						</p>
 						<div
 							class="flex flex-row items-center justify-between rounded-lg border-2 p-2"
 						>
 							<p
-								class="select-all overflow-hidden font-mono text-sm text-gray-800"
+								class="select-all overflow-hidden font-mono text-sm text-ink-gray-8"
 							>
 								{{ dnsResult.CNAME.answer }}
 							</p>
@@ -65,13 +65,13 @@
 						class="space-y-2"
 					>
 						<p class="text-base">
-							<span class="font-semibold text-gray-700">A</span>
+							<span class="font-semibold text-ink-gray-7">A</span>
 						</p>
 						<div
 							class="flex flex-row items-center justify-between rounded-lg border-2 p-2"
 						>
 							<p
-								class="select-all overflow-hidden font-mono text-sm text-gray-800"
+								class="select-all overflow-hidden font-mono text-sm text-ink-gray-8"
 							>
 								{{ dnsResult.A.answer }}
 							</p>
@@ -81,14 +81,14 @@
 				<p class="flex text-base" v-if="dnsVerified === false">
 					<FeatherIcon
 						name="x"
-						class="mr-2 h-5 w-5 rounded-full bg-red-100 p-1 text-red-500"
+						class="mr-2 h-5 w-5 rounded-full bg-red-100 p-1 text-ink-red-3"
 					/>
 					DNS Verification Failed
 				</p>
 				<p class="flex text-base" v-if="dnsVerified === true">
 					<FeatherIcon
 						name="check"
-						class="mr-2 h-5 w-5 rounded-full bg-green-100 p-1 text-green-500"
+						class="mr-2 h-5 w-5 rounded-full bg-green-100 p-1 text-ink-green-2"
 					/>
 					DNS records successfully verified. Click on Add Domain.
 				</p>
diff --git a/dashboard/src/components/AddressableErrorDialog.vue b/dashboard/src/components/AddressableErrorDialog.vue
index 69ab9cb7c84..b67dc898d34 100644
--- a/dashboard/src/components/AddressableErrorDialog.vue
+++ b/dashboard/src/components/AddressableErrorDialog.vue
@@ -12,19 +12,19 @@
 			<div
 				:if="doc.message"
 				v-html="doc.message"
-				class="flex flex-col gap-2 whitespace-pre-wrap text-p-base text-gray-700"
+				class="flex flex-col gap-2 whitespace-pre-wrap text-p-base text-ink-gray-7"
 			></div>
 
 			<div v-if="doc.traceback" class="relative mt-6">
 				<button
-					class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-white p-1 text-xs text-gray-600"
+					class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-surface-white p-1 text-xs text-ink-gray-6"
 					variant="outline"
 					@click="copyTraceback"
 				>
 					{{ copied ? 'copied' : 'copy' }}
 				</button>
 				<div
-					class="max-h-48 w-full overflow-scroll rounded-sm border border-gray-200 bg-gray-100 p-3 text-xs text-gray-600"
+					class="max-h-48 w-full overflow-scroll rounded-sm border border-gray-200 bg-surface-gray-2 p-3 text-xs text-ink-gray-6"
 				>
 					<pre>{{ doc.traceback }}</pre>
 				</div>
diff --git a/dashboard/src/components/AlertBanner.vue b/dashboard/src/components/AlertBanner.vue
index d1178e2547f..ea0db3ea313 100644
--- a/dashboard/src/components/AlertBanner.vue
+++ b/dashboard/src/components/AlertBanner.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		:class="`flex items-center justify-between rounded-md border border-${color}-200 bg-${color}-100 px-3.5 py-2.5`"
+		:class="`flex items-center justify-between rounded-md border border-outline-${color}-2 bg-surface-${color}-1 px-3.5 py-2.5`"
 	>
 		<div class="flex items-center">
 			<lucide-alert-triangle
@@ -13,7 +13,7 @@
 			/>
 			<div
 				:class="{ 'ml-3': showIcon }"
-				class="text-p-base font-medium text-gray-800"
+				class="text-p-base font-medium text-ink-gray-8"
 				v-html="title"
 			/>
 		</div>
diff --git a/dashboard/src/components/Autocomplete.vue b/dashboard/src/components/Autocomplete.vue
index 787f6762bbd..78d677f47b7 100644
--- a/dashboard/src/components/Autocomplete.vue
+++ b/dashboard/src/components/Autocomplete.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="relative space-y-1.5">
-		<label class="block text-xs text-gray-600" v-if="label">
+		<label class="block text-xs text-ink-gray-6" v-if="label">
 			{{ label }}
 		</label>
 		<Combobox
@@ -33,7 +33,7 @@
 							@change="handleQueryChange"
 							:displayValue="getDisplayValue"
 							:placeholder="!modelValue ? placeholder : null"
-							class="focus:ring-outline-gray-3 h-full w-full rounded border border-gray-100 bg-gray-100 bg-transparent pl-2 pr-5 text-base text-gray-800 placeholder-gray-500 transition-colors focus:border-gray-500 focus:bg-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+							class="focus:ring-outline-gray-3 h-full w-full rounded border border-gray-100 bg-surface-gray-2 bg-transparent pl-2 pr-5 text-base text-ink-gray-8 placeholder-gray-500 transition-colors focus:border-gray-500 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
 						/>
 					</div>
 				</template>
@@ -43,7 +43,7 @@
 							class="bg-surface-white absolute right-0 z-[999] max-h-[15rem] w-full overflow-y-auto rounded-lg p-0 shadow-2xl"
 							v-show="filteredOptions.length"
 						>
-							<div class="w-full list-none bg-white px-1.5 py-1.5">
+							<div class="w-full list-none bg-surface-white px-1.5 py-1.5">
 								<ComboboxOption
 									v-for="option in filteredOptions"
 									v-slot="{ active, selected }"
@@ -70,8 +70,8 @@
 										v-else
 										class="flex w-full cursor-pointer select-none items-center justify-between truncate rounded px-2.5 py-1.5 text-base"
 										:class="{
-											'bg-gray-100': active,
-											'bg-gray-300': selected,
+											'bg-surface-gray-2': active,
+											'bg-surface-gray-4': selected,
 										}"
 									>
 										{{ option.label }}
diff --git a/dashboard/src/components/BackupFilesUploader.vue b/dashboard/src/components/BackupFilesUploader.vue
index 438564e1fae..afe23ed31bb 100644
--- a/dashboard/src/components/BackupFilesUploader.vue
+++ b/dashboard/src/components/BackupFilesUploader.vue
@@ -32,7 +32,7 @@
 						<template #subtitle>
 							<span
 								class="text-base"
-								:class="error ? 'text-red-500' : 'text-gray-600'"
+								:class="error ? 'text-ink-red-3' : 'text-ink-gray-6'"
 							>
 								{{
 									uploading
diff --git a/dashboard/src/components/BuyPrepaidCreditsForm.vue b/dashboard/src/components/BuyPrepaidCreditsForm.vue
index e75b0226a9c..8888a9f13d7 100644
--- a/dashboard/src/components/BuyPrepaidCreditsForm.vue
+++ b/dashboard/src/components/BuyPrepaidCreditsForm.vue
@@ -10,7 +10,7 @@
 			:min="minimumAmount"
 		>
 			<template #prefix>
-				<div class="grid w-4 place-items-center text-sm text-gray-700">
+				<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 					{{ $team.doc.currency === 'INR' ? '₹' : '$' }}
 				</div>
 			</template>
@@ -27,7 +27,7 @@
 			type="number"
 		>
 			<template #prefix>
-				<div class="grid w-4 place-items-center text-sm text-gray-700">
+				<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 					{{ $team.doc.currency === 'INR' ? '₹' : '$' }}
 				</div>
 			</template>
@@ -35,7 +35,7 @@
 	</div>
 
 	<div class="mt-4">
-		<div class="text-xs text-gray-600">Select Payment Gateway</div>
+		<div class="text-xs text-ink-gray-6">Select Payment Gateway</div>
 		<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
 			<button
 				@click="paymentGateway = 'Stripe'"
diff --git a/dashboard/src/components/BuyPrepaidCreditsStripe.vue b/dashboard/src/components/BuyPrepaidCreditsStripe.vue
index e52c2ef2d13..144eeb64f39 100644
--- a/dashboard/src/components/BuyPrepaidCreditsStripe.vue
+++ b/dashboard/src/components/BuyPrepaidCreditsStripe.vue
@@ -7,7 +7,7 @@
 				'mt-4': step == 'Add Card Details',
 			}"
 		>
-			<span class="text-sm leading-4 text-gray-700">
+			<span class="text-sm leading-4 text-ink-gray-7">
 				Credit or Debit Card
 			</span>
 			<div class="form-input mt-2 block w-full pl-3" ref="card-element"></div>
@@ -15,7 +15,7 @@
 		</label>
 
 		<div v-if="step == 'Setting up Stripe'" class="mt-8 flex justify-center">
-			<Spinner class="h-4 w-4 text-gray-600" />
+			<Spinner class="h-4 w-4 text-ink-gray-6" />
 		</div>
 		<ErrorMessage
 			class="mt-2"
@@ -117,7 +117,7 @@ export default {
 						style: style,
 						classes: {
 							complete: '',
-							focus: 'bg-gray-100',
+							focus: 'bg-surface-gray-2',
 						},
 					});
 
diff --git a/dashboard/src/components/ChurnFeedbackDialog.vue b/dashboard/src/components/ChurnFeedbackDialog.vue
index a9c5426a1a2..6a79ccd04b9 100644
--- a/dashboard/src/components/ChurnFeedbackDialog.vue
+++ b/dashboard/src/components/ChurnFeedbackDialog.vue
@@ -18,11 +18,11 @@
 		v-model="show"
 	>
 		<template v-slot:body-content>
-			<p class="mb-5 text-sm text-gray-800">
+			<p class="mb-5 text-sm text-ink-gray-8">
 				Help us improve your experience by sharing your thoughts.
 			</p>
 			<div class="mt-3">
-				<span class="mb-2 block text-sm leading-4 text-gray-600">
+				<span class="mb-2 block text-sm leading-4 text-ink-gray-6">
 					Please rate your experience
 				</span>
 				<StarRatingInput v-model="rating" />
diff --git a/dashboard/src/components/ClickToCopyField.vue b/dashboard/src/components/ClickToCopyField.vue
index 035177527f4..8edcace1ae1 100644
--- a/dashboard/src/components/ClickToCopyField.vue
+++ b/dashboard/src/components/ClickToCopyField.vue
@@ -1,10 +1,10 @@
 <template>
-	<div class="relative rounded-lg border-2 border-gray-200 bg-gray-100 p-3">
-		<div class="select-all break-all text-xs text-gray-800">
+	<div class="relative rounded-lg border-2 border-gray-200 bg-surface-gray-2 p-3">
+		<div class="select-all break-all text-xs text-ink-gray-8">
 			<pre
 				:class="{
 					'whitespace-pre-wrap': breakLines,
-					'overflow-x-auto': !breakLines
+					'overflow-x-auto': !breakLines,
 				}"
 				:style="
 					!breakLines
@@ -15,7 +15,7 @@
 			>
 		</div>
 		<button
-			class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-white p-1 text-xs text-gray-600"
+			class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-surface-white p-1 text-xs text-ink-gray-6"
 			variant="outline"
 			@click="copyTextContentToClipboard"
 		>
@@ -31,16 +31,16 @@ export default {
 	props: {
 		textContent: {
 			type: String,
-			required: true
+			required: true,
 		},
 		breakLines: {
 			type: Boolean,
-			default: true
-		}
+			default: true,
+		},
 	},
 	data() {
 		return {
-			copied: false
+			copied: false,
 		};
 	},
 	methods: {
@@ -53,7 +53,7 @@ export default {
 				}, 4000);
 				toast.success('Copied to clipboard!');
 			});
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/dashboard/src/components/CommunicationInfoDialog.vue b/dashboard/src/components/CommunicationInfoDialog.vue
index 1cd052ae383..57ccfb07d71 100644
--- a/dashboard/src/components/CommunicationInfoDialog.vue
+++ b/dashboard/src/components/CommunicationInfoDialog.vue
@@ -48,7 +48,7 @@
 				</div>
 				<div
 					v-if="$resources.getCommunicationInfos.loading"
-					class="flex w-full items-center justify-center gap-2 py-20 text-gray-700"
+					class="flex w-full items-center justify-center gap-2 py-20 text-ink-gray-7"
 				>
 					<Spinner class="w-4" /> Loading data...
 				</div>
diff --git a/dashboard/src/components/ConfigEditorDialog.vue b/dashboard/src/components/ConfigEditorDialog.vue
index 1eb9ba43b1c..e327629659e 100644
--- a/dashboard/src/components/ConfigEditorDialog.vue
+++ b/dashboard/src/components/ConfigEditorDialog.vue
@@ -33,7 +33,7 @@
 							selectedConfig.value !== '__custom_key' &&
 							selectedConfig.detail
 						"
-						class="text-sm text-gray-500 mt-2 ml-1"
+						class="text-sm text-ink-gray-5 mt-2 ml-1"
 					>
 						{{ selectedConfig.detail }}
 					</div>
diff --git a/dashboard/src/components/ConfigPreviewDialog.vue b/dashboard/src/components/ConfigPreviewDialog.vue
index 56d3ca3a951..1de6d6a662a 100644
--- a/dashboard/src/components/ConfigPreviewDialog.vue
+++ b/dashboard/src/components/ConfigPreviewDialog.vue
@@ -7,7 +7,7 @@
 	>
 		<template #body-content>
 			<pre
-				class="overflow-x-scroll rounded bg-gray-100 p-4 text-base"
+				class="overflow-x-scroll rounded bg-surface-gray-2 p-4 text-base"
 				v-html="configPreview"
 			></pre>
 		</template>
diff --git a/dashboard/src/components/CustomToast.vue b/dashboard/src/components/CustomToast.vue
index 98367eb860b..41bb35d9fdd 100644
--- a/dashboard/src/components/CustomToast.vue
+++ b/dashboard/src/components/CustomToast.vue
@@ -13,13 +13,13 @@ defineProps({
 
 <template>
 	<div
-		class="rounded-md border-px border-gray-4 bg-white px-4 py-3 text-sm leading-5 shadow-2xl"
+		class="rounded-md border-px border-gray-4 bg-surface-white px-4 py-3 text-sm leading-5 shadow-2xl"
 	>
-		<div v-if="title" class="mb-1 font-semibold text-gray-900">
+		<div v-if="title" class="mb-1 font-semibold text-ink-gray-9">
 			{{ title }}
 		</div>
 
 		<!-- Dangerous HTML rendering -->
-		<div v-if="html" class="text-gray-600" v-html="html" />
+		<div v-if="html" class="text-ink-gray-6" v-html="html" />
 	</div>
 </template>
diff --git a/dashboard/src/components/EnvironmentVariableEditorDialog.vue b/dashboard/src/components/EnvironmentVariableEditorDialog.vue
index e8b62d55248..5aa7ba9424c 100644
--- a/dashboard/src/components/EnvironmentVariableEditorDialog.vue
+++ b/dashboard/src/components/EnvironmentVariableEditorDialog.vue
@@ -23,8 +23,8 @@
 				<FormControl label="Value" v-model="value" autocomplete="off" />
 				<ErrorMessage class="mt-2" :message="error" />
 				<div class="flex items-center">
-					<lucide-info class="mr-2 text-gray-500" />
-					<div class="text-sm text-gray-600">
+					<lucide-info class="mr-2 text-ink-gray-5" />
+					<div class="text-sm text-ink-gray-6">
 						Environment variable changes will only be reflected in the newer
 						deploys.
 					</div>
diff --git a/dashboard/src/components/FeatureList.vue b/dashboard/src/components/FeatureList.vue
index 2bfded13fa5..d95cfc7ee5b 100644
--- a/dashboard/src/components/FeatureList.vue
+++ b/dashboard/src/components/FeatureList.vue
@@ -1,5 +1,5 @@
 <template>
-	<ul class="space-y-2 text-sm text-gray-700">
+	<ul class="space-y-2 text-sm text-ink-gray-7">
 		<li
 			class="flex flex-row justify-items-center"
 			v-for="feature in features"
@@ -14,6 +14,6 @@
 <script>
 export default {
 	name: 'FeatureList',
-	props: ['features']
+	props: ['features'],
 };
 </script>
diff --git a/dashboard/src/components/FoldStep.vue b/dashboard/src/components/FoldStep.vue
index 81c9d561c81..e483ec6f676 100644
--- a/dashboard/src/components/FoldStep.vue
+++ b/dashboard/src/components/FoldStep.vue
@@ -1,14 +1,14 @@
 <template>
 	<div>
 		<button
-			class="flex w-full items-center justify-between rounded bg-gray-50 px-2.5 py-2 text-left text-base"
+			class="flex w-full items-center justify-between rounded bg-surface-gray-1 px-2.5 py-2 text-left text-base"
 			@click="$emit('toggle')"
 			:class="open ? 'rounded-b-none' : ''"
 		>
 			<div class="flex items-center space-x-2">
 				<FeatherIcon
 					:name="open || status == 'Running' ? 'chevron-down' : 'chevron-right'"
-					class="h-3 w-3 text-gray-600"
+					class="h-3 w-3 text-ink-gray-6"
 					:stroke-width="3"
 				/>
 				<Tooltip :text="status">
@@ -17,7 +17,7 @@
 						:class="iconClass"
 					>
 						<LoadingIndicator
-							class="h-3.5 w-3.5 text-gray-900"
+							class="h-3.5 w-3.5 text-ink-gray-9"
 							v-if="status === 'Running'"
 						/>
 						<FeatherIcon
@@ -33,12 +33,12 @@
 				</span>
 			</div>
 
-			<div class="text-gray-600" v-if="caption">
+			<div class="text-ink-gray-6" v-if="caption">
 				{{ caption }}
 			</div>
 		</button>
 		<div
-			class="overflow-auto py-2 px-2.5 text-sm bg-gray-200 rounded-b border border-gray-100"
+			class="overflow-auto py-2 px-2.5 text-sm bg-surface-gray-3 rounded-b border border-gray-100"
 			v-show="open || status == 'Running'"
 			ref="output"
 		>
diff --git a/dashboard/src/components/GenericList.vue b/dashboard/src/components/GenericList.vue
index 870c5f46658..deaae398274 100644
--- a/dashboard/src/components/GenericList.vue
+++ b/dashboard/src/components/GenericList.vue
@@ -28,7 +28,7 @@
 			<ListRows>
 				<div
 					v-if="rows.length === 0"
-					class="text-center text-sm leading-10 text-gray-500"
+					class="text-center text-sm leading-10 text-ink-gray-5"
 				>
 					No results found
 				</div>
diff --git a/dashboard/src/components/GitHubAppSelector.vue b/dashboard/src/components/GitHubAppSelector.vue
index e85c2a068ad..d5d1e9a6e52 100644
--- a/dashboard/src/components/GitHubAppSelector.vue
+++ b/dashboard/src/components/GitHubAppSelector.vue
@@ -56,7 +56,7 @@
 				<FeatherIcon v-else name="user" class="mr-2 h-4 w-4" />
 			</template>
 		</FormControl>
-		<span class="text-sm text-gray-600">
+		<span class="text-sm text-ink-gray-6">
 			Don't see your organization?
 			<Link
 				:href="options.installation_url + '?state=' + state"
@@ -95,7 +95,7 @@
 			</template>
 		</FormControl>
 
-		<p v-if="selectedGithubUserData" class="!mt-2 text-sm text-gray-600">
+		<p v-if="selectedGithubUserData" class="!mt-2 text-sm text-ink-gray-6">
 			Don't see your repository here?
 			<Link :href="selectedGithubUserData.url" class="font-medium">
 				Add from GitHub
diff --git a/dashboard/src/components/Header.vue b/dashboard/src/components/Header.vue
index bffea2683ed..12cf014ef9f 100644
--- a/dashboard/src/components/Header.vue
+++ b/dashboard/src/components/Header.vue
@@ -1,6 +1,6 @@
 <template>
 	<header
-		class="border-b bg-white px-5 py-2.5 sm:px-5"
+		class="border-b bg-surface-white px-5 py-2.5 sm:px-5"
 		:class="{ 'sticky top-0 z-10': sticky }"
 	>
 		<div class="flex items-center justify-between sm:h-7">
diff --git a/dashboard/src/components/HomeSummary.vue b/dashboard/src/components/HomeSummary.vue
index a1656c69a01..2badd3cef05 100644
--- a/dashboard/src/components/HomeSummary.vue
+++ b/dashboard/src/components/HomeSummary.vue
@@ -9,12 +9,12 @@
 			</div>
 			<div class="mt-4">
 				<router-link
-					class="flex items-center justify-between rounded border-b px-2 py-2 hover:bg-gray-50"
+					class="flex items-center justify-between rounded border-b px-2 py-2 hover:bg-surface-gray-1"
 					v-for="site in sites"
 					:key="site.name"
 					:to="{ name: 'Site Detail', params: { name: site.name } }"
 				>
-					<div class="text-base text-gray-900">
+					<div class="text-base text-ink-gray-9">
 						{{ site.host_name || site.name }}
 					</div>
 					<div>
diff --git a/dashboard/src/components/InvoiceTable.vue b/dashboard/src/components/InvoiceTable.vue
index a8bfd78c952..ed94d49c29a 100644
--- a/dashboard/src/components/InvoiceTable.vue
+++ b/dashboard/src/components/InvoiceTable.vue
@@ -11,10 +11,10 @@
 		</div>
 		<div v-if="doc" class="overflow-x-auto">
 			<table
-				class="text w-full border-separate border-spacing-y-2 text-base font-normal text-gray-900"
+				class="text w-full border-separate border-spacing-y-2 text-base font-normal text-ink-gray-9"
 			>
-				<thead class="bg-gray-100">
-					<tr class="text-gray-600">
+				<thead class="bg-surface-gray-2">
+					<tr class="text-ink-gray-6">
 						<th class="rounded-l p-2 text-left font-normal">Description</th>
 						<th class="whitespace-nowrap p-2 text-right font-normal">Rate</th>
 						<th class="whitespace-nowrap p-2 text-right font-normal">
@@ -25,7 +25,7 @@
 				</thead>
 				<tbody>
 					<template v-for="(items, type) in groupedLineItems" :key="type">
-						<tr class="mt-1 bg-gray-50">
+						<tr class="mt-1 bg-surface-gray-1">
 							<td colspan="100" class="rounded p-2 text-base font-medium">
 								{{ type }}
 							</td>
@@ -33,7 +33,7 @@
 						<tr v-for="(row, i) in items" :key="row.idx">
 							<td class="py-1 pl-2 pr-2">
 								{{ row.document_name }}
-								<span v-if="row.plan" class="text-gray-700">
+								<span v-if="row.plan" class="text-ink-gray-7">
 									({{ formatPlan(row.plan) }})
 								</span>
 							</td>
diff --git a/dashboard/src/components/Link.vue b/dashboard/src/components/Link.vue
index 8b502923339..fd6146989e0 100644
--- a/dashboard/src/components/Link.vue
+++ b/dashboard/src/components/Link.vue
@@ -3,7 +3,7 @@
 		:is="to ? 'router-link' : 'a'"
 		v-bind="to ? { to } : { href }"
 		:class="{
-			'text-gray-900 border-b border-gray-800 hover:text-gray-700 hover:border-gray-600 outline-gray-400':
+			'text-ink-gray-9 border-b border-gray-800 hover:text-ink-gray-7 hover:border-gray-600 outline-gray-400':
 				to || href,
 		}"
 	>
diff --git a/dashboard/src/components/ManageSitePlansDialog.vue b/dashboard/src/components/ManageSitePlansDialog.vue
index d18415a7fac..e35b518dfa8 100644
--- a/dashboard/src/components/ManageSitePlansDialog.vue
+++ b/dashboard/src/components/ManageSitePlansDialog.vue
@@ -28,11 +28,11 @@
 					:isDedicatedServerSite="$site.doc.is_dedicated_server"
 					:selectedProvider="$site.doc.server_provider"
 				/>
-				<div class="mt-4 text-xs text-gray-700">
+				<div class="mt-4 text-xs text-ink-gray-7">
 					<div
-						class="flex items-center rounded bg-gray-50 p-2 text-p-base font-medium text-gray-800"
+						class="flex items-center rounded bg-surface-gray-1 p-2 text-p-base font-medium text-ink-gray-8"
 					>
-						<lucide-badge-check class="mr-2 h-5 w-12 text-gray-600" />
+						<lucide-badge-check class="mr-2 h-5 w-12 text-ink-gray-6" />
 						<span>
 							<strong>Support</strong> covers only issues of Frappe apps and not
 							functional queries. You can raise a support ticket for Frappe
@@ -52,7 +52,7 @@
 					:intervals="true"
 					:value="65"
 				/>
-				<div class="mb-5 inline-flex gap-1.5 text-base text-gray-700">
+				<div class="mb-5 inline-flex gap-1.5 text-base text-ink-gray-7">
 					<FeatherIcon class="h-4" name="info" />
 					<span> Add billing details to your account before proceeding.</span>
 				</div>
@@ -69,12 +69,12 @@
 					:value="99"
 				/>
 				<div
-					class="mb-5 flex w-full flex-row gap-2 rounded-md border p-1 text-p-base text-gray-800"
+					class="mb-5 flex w-full flex-row gap-2 rounded-md border p-1 text-p-base text-ink-gray-8"
 				>
 					<div
 						class="w-1/2 cursor-pointer rounded-[7px] py-1.5 text-center transition-all"
 						:class="{
-							'bg-gray-100': isAutomatedBilling,
+							'bg-surface-gray-2': isAutomatedBilling,
 						}"
 						@click="isAutomatedBilling = true"
 					>
@@ -83,7 +83,7 @@
 					<div
 						class="w-1/2 cursor-pointer rounded-sm py-1.5 text-center transition-all"
 						:class="{
-							'bg-gray-100': !isAutomatedBilling,
+							'bg-surface-gray-2': !isAutomatedBilling,
 						}"
 						@click="isAutomatedBilling = false"
 					>
@@ -94,7 +94,7 @@
 				<div>
 					<div
 						v-if="isAutomatedBilling"
-						class="mb-5 flex items-center gap-2 text-sm text-gray-700"
+						class="mb-5 flex items-center gap-2 text-sm text-ink-gray-7"
 					>
 						<FeatherIcon class="h-4" name="info" />
 						<span>
@@ -104,7 +104,7 @@
 					</div>
 					<div
 						v-else
-						class="mb-5 flex items-center gap-2 text-sm text-gray-700"
+						class="mb-5 flex items-center gap-2 text-sm text-ink-gray-7"
 					>
 						<FeatherIcon class="h-4" name="info" />
 						<span>
diff --git a/dashboard/src/components/MarketplaceAppListing.vue b/dashboard/src/components/MarketplaceAppListing.vue
index 7c48b780e0b..a3f9e2e1bcf 100644
--- a/dashboard/src/components/MarketplaceAppListing.vue
+++ b/dashboard/src/components/MarketplaceAppListing.vue
@@ -3,8 +3,8 @@
 		<div>
 			<div class="flex justify-between border-b pb-4">
 				<div>
-					<h2 class="text-lg font-medium text-gray-900">App Profile</h2>
-					<p class="mt-1 text-sm leading-6 text-gray-600">
+					<h2 class="text-lg font-medium text-ink-gray-9">App Profile</h2>
+					<p class="mt-1 text-sm leading-6 text-ink-gray-6">
 						This information will be displayed publicly on the marketplace. Make
 						sure you enter correct information without any broken links and
 						images.
@@ -163,9 +163,9 @@
 					v-model="marketplaceApp.description"
 				/>
 				<div class="mt-4">
-					<span class="text-xs text-gray-600">Description</span>
+					<span class="text-xs text-ink-gray-6">Description</span>
 					<TextEditor
-						class="mt-1 block w-full rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+						class="mt-1 block w-full rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-surface-gray-3 focus:border-gray-500 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
 						ref="textEditor"
 						editor-class="rounded-b-lg max-w-[unset] prose-sm pb-[10vh]"
 						:content="marketplaceApp.long_description"
diff --git a/dashboard/src/components/MobileNav.vue b/dashboard/src/components/MobileNav.vue
index 10334a37352..48d2a907a7a 100644
--- a/dashboard/src/components/MobileNav.vue
+++ b/dashboard/src/components/MobileNav.vue
@@ -33,7 +33,7 @@
 				<template v-slot="{ open }">
 					<Button class="ml-auto">
 						<template #suffix>
-							<lucide-chevron-down class="h-3.5 w-3.5 text-gray-700" />
+							<lucide-chevron-down class="h-3.5 w-3.5 text-ink-gray-7" />
 						</template>
 						{{ $team?.get.loading ? 'Loading...' : $team?.doc?.user }}
 					</Button>
@@ -43,13 +43,13 @@
 			<DisclosureButton as="template">
 				<Button class="ml-2">
 					<template #icon>
-						<lucide-x v-if="open" class="h-4 w-4 text-gray-700" />
-						<lucide-menu v-else class="h-4 w-4 text-gray-700" />
+						<lucide-x v-if="open" class="h-4 w-4 text-ink-gray-7" />
+						<lucide-menu v-else class="h-4 w-4 text-ink-gray-7" />
 					</template>
 				</Button>
 			</DisclosureButton>
 		</div>
-		<DisclosurePanel class="border-b bg-gray-100 px-5 py-2">
+		<DisclosurePanel class="border-b bg-surface-gray-2 px-5 py-2">
 			<NavigationItems>
 				<template v-slot="{ navigation }">
 					<template v-for="(item, i) in navigation">
diff --git a/dashboard/src/components/MobileNavItem.vue b/dashboard/src/components/MobileNavItem.vue
index a455b50285e..72548f07df4 100644
--- a/dashboard/src/components/MobileNavItem.vue
+++ b/dashboard/src/components/MobileNavItem.vue
@@ -3,16 +3,16 @@
 		<a
 			:href="href"
 			@click="navigate"
-			class="flex items-center rounded px-2 py-1.5 text-gray-800 transition"
+			class="flex items-center rounded px-2 py-1.5 text-ink-gray-8 transition"
 			:class="[
-				item.isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100',
+				item.isActive ? 'bg-surface-white shadow-sm' : 'hover:bg-surface-gray-2',
 				item.disabled ? 'pointer-events-none opacity-50' : '',
 				$attrs.class,
 			]"
 		>
 			<div class="flex w-full items-center space-x-2">
 				<span class="grid h-5 w-5 place-items-center">
-					<component :is="item.icon" class="h-4 w-4 text-gray-500" />
+					<component :is="item.icon" class="h-4 w-4 text-ink-gray-5" />
 				</span>
 				<span class="text-base">{{ item.name }}</span>
 			</div>
diff --git a/dashboard/src/components/MobileNavItemGroup.vue b/dashboard/src/components/MobileNavItemGroup.vue
index 67c548d366b..b69c44fdaff 100644
--- a/dashboard/src/components/MobileNavItemGroup.vue
+++ b/dashboard/src/components/MobileNavItemGroup.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		@click="toggle"
-		class="flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-gray-800 transition hover:bg-gray-100"
+		class="flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-ink-gray-8 transition hover:bg-surface-gray-2"
 		:class="[
 			item.disabled ? 'pointer-events-none opacity-50' : '',
 			$attrs.class,
@@ -9,12 +9,12 @@
 	>
 		<div class="flex w-full items-center space-x-2">
 			<span class="grid h-5 w-5 place-items-center">
-				<component :is="item.icon" class="h-4 w-4 text-gray-500" />
+				<component :is="item.icon" class="h-4 w-4 text-ink-gray-5" />
 			</span>
 			<span class="text-base">{{ item.name }}</span>
 			<span class="!ml-auto">
-				<lucide-chevron-down v-if="isOpened" class="h-4 w-4 text-gray-500" />
-				<lucide-chevron-right v-else class="h-4 w-4 text-gray-500" />
+				<lucide-chevron-down v-if="isOpened" class="h-4 w-4 text-ink-gray-5" />
+				<lucide-chevron-right v-else class="h-4 w-4 text-ink-gray-5" />
 			</span>
 		</div>
 	</div>
diff --git a/dashboard/src/components/NewAppDialog.vue b/dashboard/src/components/NewAppDialog.vue
index 146bd5face6..dfc4c005bae 100644
--- a/dashboard/src/components/NewAppDialog.vue
+++ b/dashboard/src/components/NewAppDialog.vue
@@ -75,14 +75,14 @@
 						<div class="mt-4 space-y-2">
 							<div
 								v-if="$resources.validateApp.loading"
-								class="flex text-base text-gray-700"
+								class="flex text-base text-ink-gray-7"
 							>
 								<LoadingIndicator class="mr-2 w-4" />
 								Validating app...
 							</div>
 							<div
 								v-else-if="appValidated && app"
-								class="flex text-base text-gray-700"
+								class="flex text-base text-ink-gray-7"
 							>
 								<GreenCheckIcon class="mr-2 w-4" />
 								Found {{ app.title }} ({{ app.name }})
diff --git a/dashboard/src/components/ObjectList.vue b/dashboard/src/components/ObjectList.vue
index c05f3a01722..67a51c6ae5a 100644
--- a/dashboard/src/components/ObjectList.vue
+++ b/dashboard/src/components/ObjectList.vue
@@ -21,10 +21,10 @@
 						v-model="searchQuery"
 					>
 						<template #prefix>
-							<lucide-search class="h-4 w-4 text-gray-500" />
+							<lucide-search class="h-4 w-4 text-ink-gray-5" />
 						</template>
 						<template #suffix>
-							<span class="text-sm text-gray-500" v-if="searchQuery">
+							<span class="text-sm text-ink-gray-5" v-if="searchQuery">
 								{{ searchQuerySummary }}
 							</span>
 						</template>
@@ -48,7 +48,7 @@
 					</div>
 				</Tooltip>
 				<Tooltip v-if="options.documentation" text="View documentation">
-					<div class="rounded-md bg-gray-100 p-1.5">
+					<div class="rounded-md bg-surface-gray-2 p-1.5">
 						<a :href="options.documentation" target="_blank">
 							<lucide-help-circle class="h-4 w-4" />
 						</a>
@@ -108,7 +108,7 @@
 				<template #cell="{ item, row, column }">
 					<ObjectListCell
 						:class="[
-							column == columns[0] ? ' text-gray-900' : ' text-gray-700',
+							column == columns[0] ? ' text-ink-gray-9' : ' text-ink-gray-7',
 						]"
 						:row="row"
 						:column="column"
@@ -118,7 +118,7 @@
 			</ListView>
 			<div class="px-5" v-if="filteredRows.length === 0">
 				<div
-					class="text-center text-sm leading-10 text-gray-500 pb-[1.75rem]"
+					class="text-center text-sm leading-10 text-ink-gray-5 pb-[1.75rem]"
 					v-if="isLoading"
 				>
 					Loading...
@@ -128,7 +128,7 @@
 				</div>
 				<div
 					v-else
-					class="text-center text-sm leading-10 text-gray-500 pb-[1.75rem]"
+					class="text-center text-sm leading-10 text-ink-gray-5 pb-[1.75rem]"
 				>
 					{{ emptyStateMessage }}
 				</div>
@@ -136,7 +136,7 @@
 			<div
 				class="p-2 text-right"
 				:class="{
-					'border-t bg-white bottom-0 sticky':
+					'border-t bg-surface-white bottom-0 sticky':
 						$list?.next && $list?.hasNextPage,
 				}"
 				v-if="$list"
diff --git a/dashboard/src/components/ObjectListCell.vue b/dashboard/src/components/ObjectListCell.vue
index f7c5faffbff..2649d3ecca7 100644
--- a/dashboard/src/components/ObjectListCell.vue
+++ b/dashboard/src/components/ObjectListCell.vue
@@ -5,7 +5,7 @@
 		:target="column.link ? '_blank' : undefined"
 		class="flex items-center"
 		:class="{
-			'text-gray-900 outline-gray-400 hover:text-gray-700': column.link,
+			'text-ink-gray-9 outline-gray-400 hover:text-ink-gray-7': column.link,
 			'justify-end': column.align === 'right',
 			'justify-center': column.align === 'center',
 		}"
@@ -39,7 +39,10 @@
 				</option>
 			</select>
 		</div>
-		<div class="text-base text-gray-600" v-else-if="column.type == 'Timestamp'">
+		<div
+			class="text-base text-ink-gray-6"
+			v-else-if="column.type == 'Timestamp'"
+		>
 			<div class="flex">
 				<Tooltip :text="$format.date(value)">
 					{{ value ? $dayjs(value).fromNow() : '' }}
@@ -52,7 +55,7 @@
 		<div v-else-if="column.type == 'Actions'">
 			<Dropdown v-if="showDropdown" :options="actions" @click.stop>
 				<button
-					class="flex items-center rounded bg-gray-100 px-1 py-0.5 hover:bg-gray-200"
+					class="flex items-center rounded bg-surface-gray-2 px-1 py-0.5 hover:bg-surface-gray-3"
 				>
 					<FeatherIcon name="more-horizontal" class="h-4 w-4" />
 				</button>
diff --git a/dashboard/src/components/ObjectListFilters.vue b/dashboard/src/components/ObjectListFilters.vue
index 5d90cf8508b..588c35979db 100644
--- a/dashboard/src/components/ObjectListFilters.vue
+++ b/dashboard/src/components/ObjectListFilters.vue
@@ -1,7 +1,7 @@
 <template>
 	<Button v-if="$isMobile" @click="showDialog = true">
 		<template #icon>
-			<lucide-filter class="h-4 w-4 text-gray-600" />
+			<lucide-filter class="h-4 w-4 text-ink-gray-6" />
 		</template>
 	</Button>
 	<component :is="$isMobile ? 'DialogWrapper' : 'div'" v-bind="wrapperProps">
diff --git a/dashboard/src/components/Onboarding.vue b/dashboard/src/components/Onboarding.vue
index 55f58358955..034d0352245 100644
--- a/dashboard/src/components/Onboarding.vue
+++ b/dashboard/src/components/Onboarding.vue
@@ -9,9 +9,9 @@
 				more.
 			</p>
 		</div>
-		<p class="mt-6 text-base text-gray-800">
-			Complete the steps below to unlock sites, benches, dedicated servers
-			and more.
+		<p class="mt-6 text-base text-ink-gray-8">
+			Complete the steps below to unlock sites, benches, dedicated servers and
+			more.
 		</p>
 		<div class="mt-6 space-y-6">
 			<div class="rounded-md">
@@ -47,13 +47,13 @@
 					</div>
 				</div>
 				<div class="mt-2 pl-7" v-if="pendingSiteRequest.status == 'Error'">
-					<p class="mt-2 text-p-base text-gray-800">
+					<p class="mt-2 text-p-base text-ink-gray-8">
 						Please contact Frappe Cloud support by clicking on the button below.
 					</p>
 					<Button class="mt-2" link="/support"> Contact Support </Button>
 				</div>
 				<div class="mt-2 pl-7" v-else>
-					<p class="mt-2 text-p-base text-gray-800">
+					<p class="mt-2 text-p-base text-ink-gray-8">
 						You can try out the {{ pendingSiteRequest.title }} app for free by
 						clicking on the button below.
 					</p>
@@ -93,10 +93,10 @@
 							target="_blank"
 						>
 							https://{{ trialSite.host_name || trialSite.name }}
-							<lucide-external-link class="ml-1 h-3.5 w-3.5 text-gray-800" />
+							<lucide-external-link class="ml-1 h-3.5 w-3.5 text-ink-gray-8" />
 						</a>
 					</div>
-					<p class="mt-2 text-p-base text-gray-800">
+					<p class="mt-2 text-p-base text-ink-gray-8">
 						Your trial is set to expire on
 						<span class="font-medium">
 							{{ $format.date(trialSite.trial_end_date, 'LL') }} </span
@@ -160,12 +160,12 @@
 					<div class="mt-4 pl-7" v-if="isBillingDetailsSet">
 						<!-- Payment Method Selector -->
 						<div
-							class="flex w-full flex-row gap-2 rounded-md border p-1 text-p-base text-gray-800"
+							class="flex w-full flex-row gap-2 rounded-md border p-1 text-p-base text-ink-gray-8"
 						>
 							<div
 								class="w-1/2 cursor-pointer rounded-sm py-1.5 text-center transition-all"
 								:class="{
-									'bg-gray-100': isAutomatedBilling,
+									'bg-surface-gray-2': isAutomatedBilling,
 								}"
 								@click="isAutomatedBilling = true"
 							>
@@ -174,7 +174,7 @@
 							<div
 								class="w-1/2 cursor-pointer rounded-sm py-1.5 text-center transition-all"
 								:class="{
-									'bg-gray-100': !isAutomatedBilling,
+									'bg-surface-gray-2': !isAutomatedBilling,
 								}"
 								@click="isAutomatedBilling = false"
 							>
@@ -227,7 +227,7 @@
 						</div>
 					</div>
 					<div
-						class="mt-1.5 pl-7 text-p-base text-gray-800"
+						class="mt-1.5 pl-7 text-p-base text-ink-gray-8"
 						v-if="$team.doc.payment_mode === 'Prepaid Credits'"
 					>
 						Account balance: {{ $format.userCurrency($team.doc.balance) }}
diff --git a/dashboard/src/components/OnboardingAppSelector.vue b/dashboard/src/components/OnboardingAppSelector.vue
index 73666adcd44..3237beaf314 100644
--- a/dashboard/src/components/OnboardingAppSelector.vue
+++ b/dashboard/src/components/OnboardingAppSelector.vue
@@ -7,16 +7,16 @@
 		>
 			<img :src="app.image" class="h-6 w-6" />
 			<div class="flex flex-col gap-1">
-				<p class="text-lg font-medium leading-snug text-gray-900">
+				<p class="text-lg font-medium leading-snug text-ink-gray-9">
 					{{ app.title }}
 				</p>
 				<p
-					class="line-clamp-2 text-sm leading-5 tracking-[0.26px] text-gray-700"
+					class="line-clamp-2 text-sm leading-5 tracking-[0.26px] text-ink-gray-7"
 				>
 					{{ app.description }}
 				</p>
 			</div>
-			<div class="mt-auto flex w-fit flex-row gap-1 text-gray-600">
+			<div class="mt-auto flex w-fit flex-row gap-1 text-ink-gray-6">
 				<DownloadIcon class="h-3 w-3" />
 				<span class="ml-0.5 text-[12px] leading-3">
 					{{ this.$format.numberK(app.total_installs || '0') }} installs
diff --git a/dashboard/src/components/OnboardingWithoutPayment.vue b/dashboard/src/components/OnboardingWithoutPayment.vue
index 08a0752ba14..38b29a67bc5 100644
--- a/dashboard/src/components/OnboardingWithoutPayment.vue
+++ b/dashboard/src/components/OnboardingWithoutPayment.vue
@@ -10,12 +10,12 @@
 			</div>
 			<!-- card -->
 			<div
-				class="mx-auto w-full bg-white px-4 py-8 sm:mt-6 sm:w-3/6 sm:rounded-2xl sm:px-6 sm:py-6 sm:shadow-2xl"
+				class="mx-auto w-full bg-surface-white px-4 py-8 sm:mt-6 sm:w-3/6 sm:rounded-2xl sm:px-6 sm:py-6 sm:shadow-2xl"
 			>
 				<!-- title -->
 				<div class="mb-7.5 text-center">
 					<p
-						class="text-center text-lg font-medium leading-5 tracking-tight text-gray-900"
+						class="text-center text-lg font-medium leading-5 tracking-tight text-ink-gray-9"
 					>
 						Choose an app below to create your first site.
 					</p>
diff --git a/dashboard/src/components/PayoutTable.vue b/dashboard/src/components/PayoutTable.vue
index 76debd0d7f5..7aec2ee98ec 100644
--- a/dashboard/src/components/PayoutTable.vue
+++ b/dashboard/src/components/PayoutTable.vue
@@ -2,10 +2,10 @@
 	<div>
 		<div v-if="doc" class="overflow-x-auto">
 			<table
-				class="text w-full border-separate border-spacing-y-2 text-base font-normal text-gray-900"
+				class="text w-full border-separate border-spacing-y-2 text-base font-normal text-ink-gray-9"
 			>
-				<thead class="bg-gray-100">
-					<tr class="text-gray-600">
+				<thead class="bg-surface-gray-2">
+					<tr class="text-ink-gray-6">
 						<th class="rounded-l p-2 text-left font-normal">App</th>
 						<th class="rounded-l p-2 text-left font-normal">Site</th>
 						<th class="whitespace-nowrap p-2 text-right font-normal">Rate</th>
diff --git a/dashboard/src/components/PhoneInput.vue b/dashboard/src/components/PhoneInput.vue
index bb8d708992a..d3129a882db 100644
--- a/dashboard/src/components/PhoneInput.vue
+++ b/dashboard/src/components/PhoneInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="space-y-1.5">
-		<label v-if="label" class="block text-xs text-gray-600">
+		<label v-if="label" class="block text-xs text-ink-gray-6">
 			{{ label }}
 		</label>
 		<div class="flex">
@@ -9,7 +9,7 @@
 					<button
 						type="button"
 						@click="togglePopover"
-						class="flex h-7 items-center gap-1 rounded-l border border-r-0 border-gray-100 bg-gray-100 px-2 text-sm text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400"
+						class="flex h-7 items-center gap-1 rounded-l border border-r-0 border-gray-100 bg-surface-gray-2 px-2 text-sm text-ink-gray-8 hover:bg-surface-gray-3 focus:outline-none focus:ring-2 focus:ring-gray-400"
 					>
 						<span v-if="selectedCountry" class="flex items-center gap-1">
 							<img
@@ -17,15 +17,15 @@
 								:alt="selectedCountry.name"
 								class="h-3 w-4 object-cover"
 							/>
-							<span class="text-gray-600">{{ selectedCountry.isd }}</span>
+							<span class="text-ink-gray-6">{{ selectedCountry.isd }}</span>
 						</span>
-						<span v-else class="text-gray-500">+</span>
-						<FeatherIcon name="chevron-down" class="h-3 w-3 text-gray-500" />
+						<span v-else class="text-ink-gray-5">+</span>
+						<FeatherIcon name="chevron-down" class="h-3 w-3 text-ink-gray-5" />
 					</button>
 				</template>
 				<template #body="{ close }">
 					<div
-						class="mt-1 max-h-60 w-64 overflow-auto rounded-lg bg-white p-1 shadow-2xl"
+						class="mt-1 max-h-60 w-64 overflow-auto rounded-lg bg-surface-white p-1 shadow-2xl"
 					>
 						<input
 							v-model="searchQuery"
@@ -38,9 +38,9 @@
 							v-for="country in filteredCountries"
 							:key="country.name"
 							@click="selectCountry(country, close)"
-							class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-gray-100"
+							class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-surface-gray-2"
 							:class="{
-								'bg-gray-100': selectedCountry?.name === country.name,
+								'bg-surface-gray-2': selectedCountry?.name === country.name,
 							}"
 						>
 							<img
@@ -49,11 +49,11 @@
 								class="h-3 w-4 object-cover"
 							/>
 							<span class="flex-1 truncate">{{ country.name }}</span>
-							<span class="text-gray-500">{{ country.isd }}</span>
+							<span class="text-ink-gray-5">{{ country.isd }}</span>
 						</div>
 						<div
 							v-if="filteredCountries.length === 0"
-							class="px-2 py-1.5 text-sm text-gray-500"
+							class="px-2 py-1.5 text-sm text-ink-gray-5"
 						>
 							No countries found
 						</div>
@@ -64,7 +64,7 @@
 				type="tel"
 				v-model="phoneNumber"
 				:placeholder="selectedCountry?.example || placeholder"
-				class="h-7 w-full rounded-r border border-gray-100 bg-gray-100 px-2 text-base text-gray-800 placeholder-gray-500 focus:border-gray-500 focus:bg-white focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+				class="h-7 w-full rounded-r border border-gray-100 bg-surface-gray-2 px-2 text-base text-ink-gray-8 placeholder-gray-500 focus:border-gray-500 focus:bg-surface-white focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
 				@input="emitValue"
 			/>
 		</div>
diff --git a/dashboard/src/components/PlansCards.vue b/dashboard/src/components/PlansCards.vue
index f96bf8f9e63..f974d82eabb 100644
--- a/dashboard/src/components/PlansCards.vue
+++ b/dashboard/src/components/PlansCards.vue
@@ -12,7 +12,7 @@
 				placement="top"
 			>
 				<button
-					class="flex flex-col overflow-hidden rounded-md border text-left hover:bg-gray-50"
+					class="flex flex-col overflow-hidden rounded-md border text-left hover:bg-surface-gray-1"
 					:class="[
 						modelValue?.name === plan?.name
 							? 'border-gray-900 ring-1 ring-gray-900'
@@ -34,29 +34,31 @@
 					>
 						<div class="flex items-center justify-between">
 							<div class="flex w-full items-center text-lg">
-								<span class="truncate font-medium text-gray-900">
+								<span class="truncate font-medium text-ink-gray-9">
 									<!-- Needed for app plan selector -->
 									<template v-if="plan.label">{{ plan.label }}</template>
 									<template v-if="hourlyPricing">
 										{{ $format.planTitleHourly(plan) }}
-										<span v-if="plan.price_inr" class="text-gray-700"
+										<span v-if="plan.price_inr" class="text-ink-gray-7"
 											>/hour</span
 										>
 									</template>
 									<template v-else>
 										{{ $format.planTitle(plan) }}
-										<span v-if="plan.price_inr" class="text-gray-700">/mo</span>
+										<span v-if="plan.price_inr" class="text-ink-gray-7"
+											>/mo</span
+										>
 									</template>
 								</span>
 								<Tooltip text="Product support included">
 									<lucide-badge-check
-										class="ml-1 h-4 w-6 text-gray-600"
+										class="ml-1 h-4 w-6 text-ink-gray-6"
 										v-if="plan.support_included"
 									/>
 								</Tooltip>
 							</div>
 						</div>
-						<div class="mt-1 text-sm text-gray-600" v-if="!hourlyPricing">
+						<div class="mt-1 text-sm text-ink-gray-6" v-if="!hourlyPricing">
 							<template v-if="plan.sublabel">
 								{{ plan.sublabel }}
 							</template>
@@ -73,17 +75,17 @@
 							</template>
 						</div>
 					</div>
-					<div class="p-3 text-p-sm text-gray-800">
+					<div class="p-3 text-p-sm text-ink-gray-8">
 						<div v-for="feature in plan.features">
 							<div v-if="feature.value" class="flex space-x-2">
 								<component
 									v-if="feature.icon"
 									:is="
-										_icon(feature.icon, 'mt-1 h-3 w-4 shrink-0 text-gray-900')
+										_icon(feature.icon, 'mt-1 h-3 w-4 shrink-0 text-ink-gray-9')
 									"
 								/>
 								<span>{{ feature.value }} </span>
-								<span class="ml-1 text-gray-600">
+								<span class="ml-1 text-ink-gray-6">
 									{{ feature.label }}
 								</span>
 							</div>
@@ -94,7 +96,7 @@
 		</div>
 	</div>
 	<div v-else class="flex h-6 items-center">
-		<div class="text-base text-gray-600">No plans available</div>
+		<div class="text-base text-ink-gray-6">No plans available</div>
 	</div>
 </template>
 
diff --git a/dashboard/src/components/SiteActionCell.vue b/dashboard/src/components/SiteActionCell.vue
index a622d295c48..df89e0b6a52 100644
--- a/dashboard/src/components/SiteActionCell.vue
+++ b/dashboard/src/components/SiteActionCell.vue
@@ -2,7 +2,7 @@
 	<div class="flex items-center justify-between gap-1">
 		<div>
 			<h3 class="text-base font-medium">{{ props.actionLabel }}</h3>
-			<p class="mt-1 text-p-base text-gray-600">{{ props.description }}</p>
+			<p class="mt-1 text-p-base text-ink-gray-6">{{ props.description }}</p>
 		</div>
 		<Button
 			v-if="site?.doc"
@@ -11,7 +11,7 @@
 		>
 			<p
 				:class="
-					group === 'Dangerous Actions' ? 'text-red-600' : 'text-gray-800'
+					group === 'Dangerous Actions' ? 'text-ink-red-4' : 'text-ink-gray-8'
 				"
 			>
 				{{ props.buttonLabel }}
@@ -95,10 +95,10 @@ function onDeactivateSite() {
 		title: 'Deactivate Site',
 		message: `
 			Are you sure you want to deactivate this site?<br><br>
-			<div class="text-bg-base bg-gray-100 p-2 rounded-md">
+			<div class="text-bg-base bg-surface-gray-2 p-2 rounded-md">
 			The site will go in an <strong>inactive</strong> state. It won't be accessible and background jobs won't run. 
 			<br><br>
-			<div class="text-red-600">You will still be charged for it.</div>
+			<div class="text-ink-red-4">You will still be charged for it.</div>
 			</div>
 		`,
 		primaryAction: {
@@ -147,7 +147,7 @@ function onMigrateSite() {
 	return confirmDialog({
 		title: 'Migrate Site',
 		message: `
-            <span class="rounded-sm bg-gray-100 p-0.5 font-mono text-sm font-semibold">bench migrate</span>
+            <span class="rounded-sm bg-surface-gray-2 p-0.5 font-mono text-sm font-semibold">bench migrate</span>
             command will be executed on your site. Are you sure you want to run this
             command? We recommend that you take a database backup before continuing.
         `,
@@ -238,8 +238,8 @@ function onTransferSite() {
 function onClearCache() {
 	return confirmDialog({
 		title: 'Clear Cache',
-		message: `<span class="rounded-sm bg-gray-100 p-0.5 font-mono text-sm font-semibold">bench clear-cache</span> and
-            <span class="rounded-sm bg-gray-100 p-0.5 font-mono text-sm font-semibold">bench clear-website-cache</span> commands
+		message: `<span class="rounded-sm bg-surface-gray-2 p-0.5 font-mono text-sm font-semibold">bench clear-cache</span> and
+            <span class="rounded-sm bg-surface-gray-2 p-0.5 font-mono text-sm font-semibold">bench clear-website-cache</span> commands
             will be executed on your site. Are you sure you want to run these commands?`,
 		primaryAction: {
 			label: 'Clear Cache',
diff --git a/dashboard/src/components/SiteDailyUsage.vue b/dashboard/src/components/SiteDailyUsage.vue
index b9470fb0c8c..e992d3337fe 100644
--- a/dashboard/src/components/SiteDailyUsage.vue
+++ b/dashboard/src/components/SiteDailyUsage.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="rounded-md border">
 		<div class="flex h-12 items-center justify-between border-b px-5">
-			<h2 class="text-lg font-medium text-gray-900">Daily Usage</h2>
+			<h2 class="text-lg font-medium text-ink-gray-9">Daily Usage</h2>
 			<router-link
-				class="text-base text-gray-600 hover:text-gray-700"
+				class="text-base text-ink-gray-6 hover:text-ink-gray-7"
 				:to="{ name: 'Site Analytics' }"
 			>
 				All analytics →
diff --git a/dashboard/src/components/SiteDatabaseRestoreDialog.vue b/dashboard/src/components/SiteDatabaseRestoreDialog.vue
index 5cf3a190484..b8baacd1df8 100644
--- a/dashboard/src/components/SiteDatabaseRestoreDialog.vue
+++ b/dashboard/src/components/SiteDatabaseRestoreDialog.vue
@@ -8,7 +8,7 @@
 			<div class="space-y-4">
 				<p class="text-base">Restore your site using a previous backup.</p>
 				<div
-					class="flex items-center rounded border border-gray-200 bg-gray-100 p-4 text-sm text-gray-600"
+					class="flex items-center rounded border border-gray-200 bg-surface-gray-2 p-4 text-sm text-ink-gray-6"
 				>
 					<lucide-alert-triangle class="mr-4 inline-block h-6 w-6" />
 					<div>
@@ -36,10 +36,10 @@
 				<input
 					id="skip-failing"
 					type="checkbox"
-					class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+					class="h-4 w-4 rounded border-gray-300 text-ink-blue-2 focus:ring-blue-500"
 					v-model="skipFailingPatches"
 				/>
-				<label for="skip-failing" class="ml-2 text-sm text-gray-900">
+				<label for="skip-failing" class="ml-2 text-sm text-ink-gray-9">
 					Skip failing patches (if any patch fails)
 				</label>
 			</div>
diff --git a/dashboard/src/components/SiteOverview.vue b/dashboard/src/components/SiteOverview.vue
index d7b3d292b71..c718e48e0a6 100644
--- a/dashboard/src/components/SiteOverview.vue
+++ b/dashboard/src/components/SiteOverview.vue
@@ -134,11 +134,11 @@
 				<div class="border-b border-r p-5 lg:border-b-0">
 					<div class="flex h-full items-center justify-between">
 						<div>
-							<div class="text-base text-gray-700">Current Plan</div>
+							<div class="text-base text-ink-gray-7">Current Plan</div>
 							<div class="mt-2 flex justify-between">
 								<div>
 									<div class="leading-4">
-										<span class="flex items-center text-base text-gray-900">
+										<span class="flex items-center text-base text-ink-gray-9">
 											<template v-if="$site.doc.trial_end_date">
 												{{ trialDays($site.doc.trial_end_date) }}
 											</template>
@@ -153,7 +153,7 @@
 											</template>
 											<template v-else> No plan set </template>
 											<div
-												class="ml-2 text-sm leading-3 text-gray-600"
+												class="ml-2 text-sm leading-3 text-ink-gray-6"
 												v-if="
 													currentPlan &&
 													currentPlan.support_included &&
@@ -176,7 +176,7 @@
 				</div>
 				<div class="border-b p-5 lg:border-b-0 lg:border-r">
 					<div
-						class="flex items-center justify-between text-base text-gray-700"
+						class="flex items-center justify-between text-base text-ink-gray-7"
 					>
 						<span>Compute</span>
 						<div class="h-7"></div>
@@ -192,7 +192,7 @@
 						/>
 						<div>
 							<div class="mt-2 flex justify-between">
-								<div class="text-sm text-gray-600">
+								<div class="text-sm text-ink-gray-6">
 									{{ currentUsageLoading ? '—' : currentUsage.cpu }}
 									{{ $format.plural(currentUsage.cpu, 'hour', 'hours') }}
 									<template
@@ -207,7 +207,7 @@
 				</div>
 				<div class="border-r p-5">
 					<div
-						class="flex items-center justify-between text-base text-gray-700"
+						class="flex items-center justify-between text-base text-ink-gray-7"
 					>
 						<span>Storage</span>
 						<div class="h-7"></div>
@@ -223,7 +223,7 @@
 						/>
 						<div>
 							<div class="mt-2 flex justify-between">
-								<div class="text-sm text-gray-600">
+								<div class="text-sm text-ink-gray-6">
 									{{
 										currentUsageLoading
 											? '—'
@@ -243,7 +243,7 @@
 					<div
 						class="min-h-[1.75rem] flex items-center justify-between space-x-2"
 					>
-						<span class="text-base text-gray-700">Database</span>
+						<span class="text-base text-ink-gray-7">Database</span>
 						<div class="flex items-center space-x-2">
 							<Button
 								v-if="
@@ -276,7 +276,7 @@
 						/>
 						<div>
 							<div class="mt-2 flex justify-between">
-								<div class="text-sm text-gray-600">
+								<div class="text-sm text-ink-gray-6">
 									{{
 										currentUsageLoading
 											? '—'
@@ -297,17 +297,17 @@
 		</div>
 		<div class="rounded-md border">
 			<div class="h-12 border-b px-5 py-4">
-				<h2 class="text-lg font-medium text-gray-900">Site Information</h2>
+				<h2 class="text-lg font-medium text-ink-gray-9">Site Information</h2>
 			</div>
 			<div>
 				<div
 					v-for="d in siteInformation"
 					:key="d.label"
-					class="flex items-center px-5 py-3 last:pb-5 even:bg-gray-50/70"
+					class="flex items-center px-5 py-3 last:pb-5 even:bg-surface-gray-1/70"
 				>
-					<div class="w-1/3 text-base text-gray-600">{{ d.label }}</div>
+					<div class="w-1/3 text-base text-ink-gray-6">{{ d.label }}</div>
 					<div
-						class="flex w-2/3 items-center space-x-2 text-base text-gray-900"
+						class="flex w-2/3 items-center space-x-2 text-base text-ink-gray-9"
 					>
 						<div v-if="d.prefix">
 							<component :is="d.prefix" />
@@ -541,7 +541,7 @@ export default {
 						{
 							text: 'Use this for adding A records for your site',
 						},
-						() => h(InfoIcon, { class: 'h-4 w-4 text-gray-500' }),
+						() => h(InfoIcon, { class: 'h-4 w-4 text-ink-gray-5' }),
 					),
 				},
 				{
@@ -552,7 +552,7 @@ export default {
 						{
 							text: 'Use this for whitelisting our server on a 3rd party service',
 						},
-						() => h(InfoIcon, { class: 'h-4 w-4 text-gray-500' }),
+						() => h(InfoIcon, { class: 'h-4 w-4 text-ink-gray-5' }),
 					),
 				},
 			];
diff --git a/dashboard/src/components/SiteUpdateDialog.vue b/dashboard/src/components/SiteUpdateDialog.vue
index ee2d64c8aa1..db351c08f73 100644
--- a/dashboard/src/components/SiteUpdateDialog.vue
+++ b/dashboard/src/components/SiteUpdateDialog.vue
@@ -27,7 +27,7 @@
 							v-if="!$site.doc.group_public"
 						/>
 						<div
-							class="flex items-center rounded border border-gray-200 bg-gray-100 p-4 text-sm text-gray-600"
+							class="flex items-center rounded border border-gray-200 bg-surface-gray-2 p-4 text-sm text-ink-gray-6"
 							v-if="skipBackups"
 						>
 							<lucide-alert-triangle class="mr-4 inline-block h-6 w-6" />
@@ -45,7 +45,7 @@
 					</div>
 				</div>
 			</template>
-			<div v-else class="text-center text-base text-gray-600">
+			<div v-else class="text-center text-base text-ink-gray-6">
 				No apps to update
 			</div>
 			<ErrorMessage class="mt-4" :message="$site.scheduleUpdate.error" />
diff --git a/dashboard/src/components/StorageBreakupChart.vue b/dashboard/src/components/StorageBreakupChart.vue
index d76e21b0f84..eca6dc90423 100644
--- a/dashboard/src/components/StorageBreakupChart.vue
+++ b/dashboard/src/components/StorageBreakupChart.vue
@@ -4,7 +4,7 @@
 		<div v-if="!isTree">
 			<div
 				v-if="showSlider"
-				class="mb-4 mt-4 flex h-7 w-full items-start justify-start overflow-clip rounded border bg-gray-50 pl-0"
+				class="mb-4 mt-4 flex h-7 w-full items-start justify-start overflow-clip rounded border bg-surface-gray-1 pl-0"
 				:class="{
 					'cursor-pointer': onclickSlider,
 				}"
@@ -34,7 +34,7 @@
 						class="h-2 w-2 rounded-full"
 						:style="{ backgroundColor: colorPalette[idx] }"
 					></div>
-					<span class="text-sm text-gray-800">
+					<span class="text-sm text-ink-gray-8">
 						<component
 							v-if="keyFormatter && typeof keyFormatter(key) === 'object'"
 							:is="keyFormatter(key)"
@@ -43,7 +43,7 @@
 							{{ keyFormatter ? keyFormatter(key) : key }}
 						</template>
 					</span>
-					<span class="ml-auto text-sm text-gray-800">
+					<span class="ml-auto text-sm text-ink-gray-8">
 						{{ valueFormatter ? valueFormatter(key, data[key]) : data[key] }}
 					</span>
 				</div>
@@ -56,7 +56,7 @@
 				<b>Additional Disk Usage:</b> {{ data.additionalUsage }}
 			</div>
 
-			<div class="prose-sm my-4 rounded border bg-gray-50 p-2">
+			<div class="prose-sm my-4 rounded border bg-surface-gray-1 p-2">
 				The <b>Additional Disk Usage</b> value represents disk space consumed by
 				files and folders that are not included in the main bench size
 				calculation. These typically include:
diff --git a/dashboard/src/components/StripeCard.vue b/dashboard/src/components/StripeCard.vue
index dc4ec41e059..f990a27b171 100644
--- a/dashboard/src/components/StripeCard.vue
+++ b/dashboard/src/components/StripeCard.vue
@@ -4,12 +4,12 @@
 			v-if="!ready"
 			class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-8 transform"
 		>
-			<Spinner class="h-5 w-5 text-gray-600" />
+			<Spinner class="h-5 w-5 text-ink-gray-6" />
 		</div>
 		<div :class="{ 'opacity-0': !ready }">
 			<div v-show="!tryingMicroCharge">
 				<label class="block">
-					<span class="block text-xs text-gray-600">
+					<span class="block text-xs text-ink-gray-6">
 						Credit or Debit Card
 					</span>
 					<div
@@ -33,7 +33,7 @@
 			</div>
 
 			<div class="mt-3" v-show="tryingMicroCharge">
-				<p class="text-lg text-gray-800">
+				<p class="text-lg text-ink-gray-8">
 					We are attempting to charge your card with
 					<strong>{{ formattedMicroChargeAmount }}</strong> to make sure the
 					card works. This amount will be <strong>refunded</strong> back to your
@@ -141,7 +141,7 @@ export default {
 				style: style,
 				classes: {
 					complete: '',
-					focus: 'bg-gray-100',
+					focus: 'bg-surface-gray-2',
 				},
 			});
 			this.card.mount(this.$refs['card-element']);
diff --git a/dashboard/src/components/StripeCardDialog.vue b/dashboard/src/components/StripeCardDialog.vue
index 2847dd55b5c..d60a70b959b 100644
--- a/dashboard/src/components/StripeCardDialog.vue
+++ b/dashboard/src/components/StripeCardDialog.vue
@@ -1,7 +1,7 @@
 <template>
 	<Dialog v-model="show" :options="{ title: 'Add new card' }">
 		<template #body-content>
-			<p class="text-sm mb-5 text-gray-700" v-if="message">
+			<p class="text-sm mb-5 text-ink-gray-7" v-if="message">
 				{{ message }}
 			</p>
 			<CardForm @success="show = false" />
diff --git a/dashboard/src/components/Summary.vue b/dashboard/src/components/Summary.vue
index c2d7bd5b3b2..7fdc748108e 100644
--- a/dashboard/src/components/Summary.vue
+++ b/dashboard/src/components/Summary.vue
@@ -1,20 +1,20 @@
 <template>
 	<div class="w-full">
-		<h2 class="text-base font-medium leading-6 text-gray-900">Summary</h2>
+		<h2 class="text-base font-medium leading-6 text-ink-gray-9">Summary</h2>
 		<div
-			class="mt-2 grid gap-x-4 gap-y-2 rounded-md border bg-gray-50 p-4 text-p-base"
+			class="mt-2 grid gap-x-4 gap-y-2 rounded-md border bg-surface-gray-1 p-4 text-p-base"
 			style="grid-template-columns: 4fr 4fr"
 		>
 			<template v-for="option in options" :key="option.label">
 				<div
 					v-if="option.condition ? option.condition() : true"
-					class="text-gray-600"
+					class="text-ink-gray-6"
 				>
 					{{ option.label }}:
 				</div>
 				<div
 					v-if="option.condition ? option.condition() : true"
-					class="text-gray-900"
+					class="text-ink-gray-9"
 					v-html="option.value"
 				/>
 			</template>
diff --git a/dashboard/src/components/SupportAccessDialog.vue b/dashboard/src/components/SupportAccessDialog.vue
index baa7f44c320..22e95d2aa93 100644
--- a/dashboard/src/components/SupportAccessDialog.vue
+++ b/dashboard/src/components/SupportAccessDialog.vue
@@ -15,7 +15,7 @@
 						'bg-green-50 border-green-200 text-green-800':
 							banner.type === 'success',
 						'bg-red-50 border-red-200 text-red-800': banner.type === 'error',
-						'bg-gray-50 border-gray-200 text-gray-800':
+						'bg-surface-gray-1 border-gray-200 text-ink-gray-8':
 							banner.type === 'neutral',
 					}"
 				>
diff --git a/dashboard/src/components/SwitchTeamDialog.vue b/dashboard/src/components/SwitchTeamDialog.vue
index a3b17d6acb7..8710ddd3a2a 100644
--- a/dashboard/src/components/SwitchTeamDialog.vue
+++ b/dashboard/src/components/SwitchTeamDialog.vue
@@ -1,12 +1,12 @@
 <template>
 	<Dialog :options="{ title: 'Switch Team' }" v-model="show">
 		<template #body-content v-if="$team?.doc">
-			<div class="rounded bg-gray-100 px-3 py-2.5">
-				<div class="text-base text-gray-900">
+			<div class="rounded bg-surface-gray-2 px-3 py-2.5">
+				<div class="text-base text-ink-gray-9">
 					You are logged in as the user
 					<span class="font-medium">{{ $session.user }}</span>
 				</div>
-				<div class="mt-2 text-base text-gray-900">
+				<div class="mt-2 text-base text-ink-gray-9">
 					You are viewing dashboard for the team
 					<component
 						:is="$team.doc.is_desk_user ? 'a' : 'span'"
@@ -35,7 +35,7 @@
 					:key="team.name"
 				>
 					<div class="flex items-center space-x-2">
-						<span class="text-base text-gray-800">
+						<span class="text-base text-ink-gray-8">
 							{{ team.user }}
 						</span>
 						<Button
diff --git a/dashboard/src/components/TextInsideCircle.vue b/dashboard/src/components/TextInsideCircle.vue
index cce3fc07412..bddc4e27087 100644
--- a/dashboard/src/components/TextInsideCircle.vue
+++ b/dashboard/src/components/TextInsideCircle.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="grid h-5 w-5 place-content-center rounded-full border bg-gray-100 text-xs text-gray-900"
+		class="grid h-5 w-5 place-content-center rounded-full border bg-surface-gray-2 text-xs text-ink-gray-9"
 	>
 		<slot />
 	</div>
diff --git a/dashboard/src/components/ToggleContent.vue b/dashboard/src/components/ToggleContent.vue
index 2db84a7290f..a55f3f091c6 100644
--- a/dashboard/src/components/ToggleContent.vue
+++ b/dashboard/src/components/ToggleContent.vue
@@ -8,10 +8,10 @@
 			}"
 		>
 			<div>
-				<p class="font-medium text-gray-800">
+				<p class="font-medium text-ink-gray-8">
 					{{ label }}
 				</p>
-				<p class="mt-2 text-sm text-gray-700" v-if="subLabel">
+				<p class="mt-2 text-sm text-ink-gray-7" v-if="subLabel">
 					{{ subLabel }}
 				</p>
 			</div>
diff --git a/dashboard/src/components/UpdateBillingDetails.vue b/dashboard/src/components/UpdateBillingDetails.vue
index 3f24018e81e..2a8631241e1 100644
--- a/dashboard/src/components/UpdateBillingDetails.vue
+++ b/dashboard/src/components/UpdateBillingDetails.vue
@@ -15,7 +15,7 @@
 		@update:modelValue="$emit('update:show', $event)"
 	>
 		<template v-slot:body-content>
-			<p class="mb-5 text-sm text-gray-700" v-if="message">
+			<p class="mb-5 text-sm text-ink-gray-7" v-if="message">
 				{{ message }}
 			</p>
 			<FormControl
diff --git a/dashboard/src/components/UserWithAvatarCell.vue b/dashboard/src/components/UserWithAvatarCell.vue
index 4085d9b0426..2b3f2838a9f 100644
--- a/dashboard/src/components/UserWithAvatarCell.vue
+++ b/dashboard/src/components/UserWithAvatarCell.vue
@@ -4,10 +4,10 @@
 			<Avatar :image="avatarImage" :label="fullName" size="lg" />
 		</div>
 		<div>
-			<div class="text-sm font-medium text-gray-900">
+			<div class="text-sm font-medium text-ink-gray-9">
 				{{ fullName }}
 			</div>
-			<div class="mt-0.5 text-sm text-gray-600">
+			<div class="mt-0.5 text-sm text-ink-gray-6">
 				{{ email }}
 			</div>
 		</div>
diff --git a/dashboard/src/components/auth/Configure2FA.vue b/dashboard/src/components/auth/Configure2FA.vue
index 756ce276f44..8e22d779bf1 100644
--- a/dashboard/src/components/auth/Configure2FA.vue
+++ b/dashboard/src/components/auth/Configure2FA.vue
@@ -19,7 +19,7 @@
 			/>
 
 			<!-- Steps for user to follow -->
-			<div class="rounded border border-gray-200 bg-gray-50 p-4">
+			<div class="rounded border border-gray-200 bg-surface-gray-1 p-4">
 				<h3 class="text-lg font-semibold">Steps to Disable 2FA</h3>
 				<ol class="mt-2 list-disc pl-2 text-sm">
 					<li>Open the authenticator app</li>
@@ -46,9 +46,9 @@
 			</div>
 
 			<!-- Steps for user to follow -->
-			<div class="rounded border border-gray-200 bg-gray-50 p-4">
+			<div class="rounded border border-gray-200 bg-surface-gray-1 p-4">
 				<h3 class="text-lg font-semibold">Steps to Enable 2FA</h3>
-				<ol class="ml-1 mt-2 list-disc pl-2 text-sm text-gray-700">
+				<ol class="ml-1 mt-2 list-disc pl-2 text-sm text-ink-gray-7">
 					<li>
 						Download an authenticator app on your phone, such as
 						<a
@@ -85,7 +85,7 @@
 					</li>
 					<li>Enter the code from the authenticator app below</li>
 				</ol>
-				<p class="mt-4 text-sm text-gray-700">
+				<p class="mt-4 text-sm text-ink-gray-7">
 					<strong>Note:</strong> If you lose access to your authenticator app,
 					your account will be locked out. Make sure to backup your vault/key.
 				</p>
@@ -93,7 +93,7 @@
 
 			<div
 				v-if="showSetupKey"
-				class="rounded border border-gray-200 bg-gray-50 p-4"
+				class="rounded border border-gray-200 bg-surface-gray-1 p-4"
 			>
 				<h3 class="text-lg font-semibold">Setup Key</h3>
 				<p class="mt-2 text-sm">
diff --git a/dashboard/src/components/auth/LoginBox.vue b/dashboard/src/components/auth/LoginBox.vue
index 6666fb34b9f..ad76c900374 100644
--- a/dashboard/src/components/auth/LoginBox.vue
+++ b/dashboard/src/components/auth/LoginBox.vue
@@ -8,16 +8,18 @@
 					</div>
 				</slot>
 			</div>
-			<div class="mx-auto w-full bg-white px-4 py-6 sm:w-96 sm:rounded-lg">
+			<div
+				class="mx-auto w-full bg-surface-white px-4 py-6 sm:w-96 sm:rounded-lg"
+			>
 				<div class="mb-2" v-if="title">
 					<span
-						class="text-2xl font-bold leading-5 tracking-tight text-gray-900"
+						class="text-2xl font-bold leading-5 tracking-tight text-ink-gray-9"
 					>
 						{{ title }}
 					</span>
 				</div>
 				<p
-					class="mb-6 break-words text-base font-normal leading-[21px] text-gray-700"
+					class="mb-6 break-words text-base font-normal leading-[21px] text-ink-gray-7"
 					v-if="subtitle"
 				>
 					{{ subtitle }}
diff --git a/dashboard/src/components/auth/SaaSLoginBox.vue b/dashboard/src/components/auth/SaaSLoginBox.vue
index d877d3ccc8d..1d88e43911b 100644
--- a/dashboard/src/components/auth/SaaSLoginBox.vue
+++ b/dashboard/src/components/auth/SaaSLoginBox.vue
@@ -15,15 +15,15 @@
 			</div>
 			<!-- card -->
 			<div
-				class="mx-auto w-full bg-white px-4 py-8 sm:mt-6 sm:w-112 sm:rounded-2xl sm:px-6 sm:py-6 sm:shadow-2xl"
+				class="mx-auto w-full bg-surface-white px-4 py-8 sm:mt-6 sm:w-112 sm:rounded-2xl sm:px-6 sm:py-6 sm:shadow-2xl"
 			>
 				<!-- title -->
 				<div class="mb-7.5 text-center">
-					<p class="mb-2 text-2xl font-semibold leading-6 text-gray-900">
+					<p class="mb-2 text-2xl font-semibold leading-6 text-ink-gray-9">
 						{{ title }}
 					</p>
 					<p
-						class="break-words text-base font-normal leading-[21px] text-gray-700"
+						class="break-words text-base font-normal leading-[21px] text-ink-gray-7"
 						v-if="subtitle"
 					>
 						<template
diff --git a/dashboard/src/components/billing/AddCardDialog.vue b/dashboard/src/components/billing/AddCardDialog.vue
index 7ffd7ed62ac..182fde6c307 100644
--- a/dashboard/src/components/billing/AddCardDialog.vue
+++ b/dashboard/src/components/billing/AddCardDialog.vue
@@ -3,7 +3,7 @@
 		<template #body-content>
 			<div
 				v-if="showMessage"
-				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+				class="mb-5 inline-flex gap-1.5 text-base text-ink-gray-7"
 			>
 				<FeatherIcon class="h-4" name="info" />
 				<span> Add at least one card before changing the payment mode. </span>
diff --git a/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue b/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue
index 351ece14c43..58715998401 100644
--- a/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue
+++ b/dashboard/src/components/billing/AddPrepaidCreditsDialog.vue
@@ -3,7 +3,7 @@
 		<template #body-content>
 			<div
 				v-if="showMessage"
-				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+				class="mb-5 inline-flex gap-1.5 text-base text-ink-gray-7"
 			>
 				<FeatherIcon class="h-4" name="info" />
 				<span>
diff --git a/dashboard/src/components/billing/BillingDetailsDialog.vue b/dashboard/src/components/billing/BillingDetailsDialog.vue
index f6ff79dfc6b..95ff7d3af3a 100644
--- a/dashboard/src/components/billing/BillingDetailsDialog.vue
+++ b/dashboard/src/components/billing/BillingDetailsDialog.vue
@@ -3,7 +3,7 @@
 		<template #body-content>
 			<div
 				v-if="showMessage"
-				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+				class="mb-5 inline-flex gap-1.5 text-base text-ink-gray-7"
 			>
 				<FeatherIcon class="h-4" name="info" />
 				<span> Add billing details to your account before proceeding.</span>
diff --git a/dashboard/src/components/billing/BillingSummary.vue b/dashboard/src/components/billing/BillingSummary.vue
index 39023f68e6c..bfbd0e574aa 100644
--- a/dashboard/src/components/billing/BillingSummary.vue
+++ b/dashboard/src/components/billing/BillingSummary.vue
@@ -1,22 +1,22 @@
 <template>
 	<div class="flex flex-col gap-4">
-		<div class="flex flex-col rounded-lg text-base text-gray-900 shadow">
+		<div class="flex flex-col rounded-lg text-base text-ink-gray-9 shadow">
 			<div class="flex flex-col gap-2.5 px-4 py-3">
 				<div class="flex items-center justify-between">
 					<div class="flex flex-col gap-1.5">
 						<div class="text-lg font-semibold">Recurring Charges</div>
-						<div class="text-gray-700">
+						<div class="text-ink-gray-7">
 							<span>Next charge date — </span>
 							<span>{{ currentMonthEnd() }}</span>
 						</div>
 					</div>
 				</div>
 				<div class="flex items-center justify-between">
-					<div class="flex gap-2 text-gray-700">
+					<div class="flex gap-2 text-ink-gray-7">
 						<lucide-credit-card class="h-4 w-4" />
 						<div>
 							<span>Current billing amount so far is </span>
-							<span class="font-medium text-gray-900">
+							<span class="font-medium text-ink-gray-9">
 								{{ currency }} {{ currentBillingAmount?.toFixed(2) || '0.00' }}
 							</span>
 						</div>
@@ -28,9 +28,9 @@
 			</div>
 			<div
 				v-if="unpaidAmount.data"
-				class="m-1.5 flex items-center justify-between rounded-lg bg-gray-50 px-2.5 py-2"
+				class="m-1.5 flex items-center justify-between rounded-lg bg-surface-gray-1 px-2.5 py-2"
 			>
-				<div class="flex h-7 items-center gap-2 text-gray-800">
+				<div class="flex h-7 items-center gap-2 text-ink-gray-8">
 					<lucide-receipt class="h-4 w-4" />
 					<div>
 						<span>Unpaid amount is </span>
diff --git a/dashboard/src/components/billing/BuyCreditsRazorpay.vue b/dashboard/src/components/billing/BuyCreditsRazorpay.vue
index b3e9c670b0e..2e9eae1acc2 100644
--- a/dashboard/src/components/billing/BuyCreditsRazorpay.vue
+++ b/dashboard/src/components/billing/BuyCreditsRazorpay.vue
@@ -2,7 +2,7 @@
 	<div>
 		<span
 			v-if="team.doc.currency === 'INR' || paypalEnabled"
-			class="mt-2.5 inline-flex gap-2 text-base text-gray-700"
+			class="mt-2.5 inline-flex gap-2 text-base text-ink-gray-7"
 		>
 			<FeatherIcon name="info" class="my-1 h-4" />
 			<span class="leading-5" v-if="team.doc.currency === 'INR'">
diff --git a/dashboard/src/components/billing/BuyCreditsStripe.vue b/dashboard/src/components/billing/BuyCreditsStripe.vue
index f76feeadc4d..f9d3bc9784e 100644
--- a/dashboard/src/components/billing/BuyCreditsStripe.vue
+++ b/dashboard/src/components/billing/BuyCreditsStripe.vue
@@ -7,7 +7,7 @@
 				'mt-4': step == 'Add Card Details',
 			}"
 		>
-			<span class="text-sm leading-4 text-gray-700">
+			<span class="text-sm leading-4 text-ink-gray-7">
 				Credit or Debit Card
 			</span>
 			<div class="form-input mt-2 block w-full pl-3" ref="cardElementRef"></div>
@@ -15,7 +15,7 @@
 		</label>
 
 		<div v-if="step == 'Setting up Stripe'" class="mt-8 flex justify-center">
-			<Spinner class="h-4 w-4 text-gray-700" />
+			<Spinner class="h-4 w-4 text-ink-gray-7" />
 		</div>
 		<ErrorMessage
 			class="mt-2"
@@ -129,7 +129,7 @@ const createPaymentIntent = createResource({
 			style: style,
 			classes: {
 				complete: '',
-				focus: 'bg-gray-100',
+				focus: 'bg-surface-gray-2',
 			},
 		});
 
diff --git a/dashboard/src/components/billing/CardForm.vue b/dashboard/src/components/billing/CardForm.vue
index 504838d0b17..9990718295a 100644
--- a/dashboard/src/components/billing/CardForm.vue
+++ b/dashboard/src/components/billing/CardForm.vue
@@ -4,12 +4,12 @@
 			v-if="!ready"
 			class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-8 transform"
 		>
-			<Spinner class="h-5 w-5 text-gray-700" />
+			<Spinner class="h-5 w-5 text-ink-gray-7" />
 		</div>
 		<div :class="{ 'opacity-0': !ready }">
 			<div v-show="!tryingMicroCharge">
 				<label class="block">
-					<span class="block text-xs text-gray-600">
+					<span class="block text-xs text-ink-gray-6">
 						Credit or Debit Card
 					</span>
 					<div
@@ -34,7 +34,7 @@
 			</div>
 
 			<div class="mt-3 space-y-4" v-show="tryingMicroCharge">
-				<p class="text-base text-gray-700">
+				<p class="text-base text-ink-gray-7">
 					We are attempting to charge your card with
 					<strong>{{ formattedMicroChargeAmount }}</strong> to make sure the
 					card works. This amount will be <strong>refunded</strong> back to your
@@ -158,7 +158,7 @@ const getPublishedKeyAndSetupIntent = createResource({
 			style: style,
 			classes: {
 				complete: '',
-				focus: 'bg-gray-100',
+				focus: 'bg-surface-gray-2',
 			},
 		});
 		card.value.mount(cardElementRef.value);
diff --git a/dashboard/src/components/billing/ChangeCardDialog.vue b/dashboard/src/components/billing/ChangeCardDialog.vue
index 463ff76fec3..5549d59eecb 100644
--- a/dashboard/src/components/billing/ChangeCardDialog.vue
+++ b/dashboard/src/components/billing/ChangeCardDialog.vue
@@ -10,7 +10,7 @@
 					<div
 						v-for="card in cards.data"
 						:key="card.name"
-						class="flex justify-between gap-2 rounded p-2.5 text-base text-gray-900 hover:bg-gray-100"
+						class="flex justify-between gap-2 rounded p-2.5 text-base text-ink-gray-9 hover:bg-surface-gray-2"
 					>
 						<div class="flex gap-2">
 							<component :is="cardBrandIcon(card.brand)" class="my-auto" />
@@ -18,7 +18,7 @@
 								<div class="flex h-7 items-center gap-1 font-medium">
 									<div>{{ card.name_on_card }}</div>
 									<div>&middot;</div>
-									<div class="flex gap-1 text-gray-700">
+									<div class="flex gap-1 text-ink-gray-7">
 										<div>Card ending in ••••</div>
 										<div>{{ card.last_4 }}</div>
 									</div>
@@ -30,7 +30,7 @@
 										theme="green"
 									/>
 								</div>
-								<div class="text-gray-600">
+								<div class="text-ink-gray-6">
 									Expiry
 									{{
 										card.expiry_month < 10
diff --git a/dashboard/src/components/billing/PaymentDetails.vue b/dashboard/src/components/billing/PaymentDetails.vue
index ab4eea6d665..d6206c70fbc 100644
--- a/dashboard/src/components/billing/PaymentDetails.vue
+++ b/dashboard/src/components/billing/PaymentDetails.vue
@@ -1,26 +1,26 @@
 <template>
 	<div class="flex flex-col gap-4">
-		<div class="text-lg font-semibold text-gray-900">Payment details</div>
+		<div class="text-lg font-semibold text-ink-gray-9">Payment details</div>
 		<div class="flex flex-col">
 			<div
 				v-if="team.doc.payment_mode == 'Card'"
-				class="flex items-center justify-between text-base text-gray-900"
+				class="flex items-center justify-between text-base text-ink-gray-9"
 			>
 				<div class="flex flex-col gap-1.5">
 					<div class="font-medium">Active Card</div>
-					<div class="overflow-hidden text-ellipsis text-gray-700">
+					<div class="overflow-hidden text-ellipsis text-ink-gray-7">
 						<div
 							v-if="team.doc.payment_method"
 							class="inline-flex items-center gap-2"
 						>
 							<component :is="cardBrandIcon(team.doc.payment_method.brand)" />
-							<div class="text-gray-700">
+							<div class="text-ink-gray-7">
 								<span>{{ team.doc.payment_method.name_on_card }}</span>
 								<span> &middot; Card ending in •••• </span>
 								<span>{{ team.doc.payment_method.last_4 }}</span>
 							</div>
 						</div>
-						<span v-else class="text-gray-700">No card added</span>
+						<span v-else class="text-ink-gray-7">No card added</span>
 					</div>
 				</div>
 				<div class="shrink-0">
@@ -36,19 +36,19 @@
 			</div>
 			<div
 				v-if="team.doc.payment_mode == 'Card'"
-				class="my-3 h-px bg-gray-100"
+				class="my-3 h-px bg-surface-gray-2"
 			/>
-			<div class="flex items-center justify-between text-base text-gray-900">
+			<div class="flex items-center justify-between text-base text-ink-gray-9">
 				<div class="flex flex-col gap-1.5">
 					<div class="font-medium">Mode of payment</div>
 					<div
 						v-if="team.doc.payment_mode"
-						class="inline-flex items-center gap-2 text-gray-700"
+						class="inline-flex items-center gap-2 text-ink-gray-7"
 					>
 						<FeatherIcon class="h-4" name="info" />
 						{{ paymentMode.description }}
 					</div>
-					<span v-else class="text-gray-700">Not set</span>
+					<span v-else class="text-ink-gray-7">Not set</span>
 				</div>
 				<div class="shrink-0">
 					<Dropdown :options="paymentModeOptions">
@@ -67,11 +67,11 @@
 					</Dropdown>
 				</div>
 			</div>
-			<div class="my-3 h-px bg-gray-100" />
-			<div class="flex items-center justify-between text-base text-gray-900">
+			<div class="my-3 h-px bg-surface-gray-2" />
+			<div class="flex items-center justify-between text-base text-ink-gray-9">
 				<div class="flex flex-col gap-1.5">
 					<div class="font-medium">Credit balance</div>
-					<div class="text-gray-700">
+					<div class="text-ink-gray-7">
 						{{ availableCredits || currency + ' 0.00' }}
 					</div>
 				</div>
@@ -96,14 +96,14 @@
 					</Button>
 				</div>
 			</div>
-			<div class="my-3 h-px bg-gray-100" />
-			<div class="flex items-center justify-between text-base text-gray-900">
+			<div class="my-3 h-px bg-surface-gray-2" />
+			<div class="flex items-center justify-between text-base text-ink-gray-9">
 				<div class="flex flex-col gap-1.5">
 					<div class="font-medium">Billing address</div>
-					<div v-if="billingDetailsSummary" class="leading-5 text-gray-700">
+					<div v-if="billingDetailsSummary" class="leading-5 text-ink-gray-7">
 						{{ billingDetailsSummary }}
 					</div>
-					<div v-else class="text-gray-700">No address</div>
+					<div v-else class="text-ink-gray-7">No address</div>
 				</div>
 				<div class="shrink-0">
 					<Button
@@ -121,18 +121,18 @@
 					</Button>
 				</div>
 			</div>
-			<div class="my-3 h-px bg-gray-100" />
-			<div class="flex items-center justify-between text-base text-gray-900">
+			<div class="my-3 h-px bg-surface-gray-2" />
+			<div class="flex items-center justify-between text-base text-ink-gray-9">
 				<div class="flex flex-col gap-1.5">
 					<div class="font-medium">Budget Alerts</div>
 					<div
 						v-if="team.doc.receive_budget_alerts"
-						class="leading-5 text-gray-700"
+						class="leading-5 text-ink-gray-7"
 					>
 						Alert threshold is set at {{ currency
 						}}{{ team.doc.monthly_alert_threshold }} per month
 					</div>
-					<div v-else class="text-gray-700">
+					<div v-else class="text-ink-gray-7">
 						Receive an email alert if monthly total exceeds limit set
 					</div>
 				</div>
diff --git a/dashboard/src/components/billing/PrepaidCreditsForm.vue b/dashboard/src/components/billing/PrepaidCreditsForm.vue
index 040cf72d941..4893485fa7d 100644
--- a/dashboard/src/components/billing/PrepaidCreditsForm.vue
+++ b/dashboard/src/components/billing/PrepaidCreditsForm.vue
@@ -11,7 +11,7 @@
 				:min="minimumAmount"
 			>
 				<template #prefix>
-					<div class="grid w-4 place-items-center text-sm text-gray-700">
+					<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 						{{ team.doc.currency === 'INR' ? '₹' : '$' }}
 					</div>
 				</template>
@@ -27,7 +27,7 @@
 				type="number"
 			>
 				<template #prefix>
-					<div class="grid w-4 place-items-center text-sm text-gray-700">
+					<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 						{{ team.doc.currency === 'INR' ? '₹' : '$' }}
 					</div>
 				</template>
@@ -43,7 +43,9 @@
 				type="number"
 			>
 				<template #prefix>
-					<div class="-ml-1 grid w-4 place-items-center text-sm text-gray-700">
+					<div
+						class="-ml-1 grid w-4 place-items-center text-sm text-ink-gray-7"
+					>
 						{{ 'Ksh' }}
 					</div>
 				</template>
@@ -52,7 +54,7 @@
 
 		<!-- Payment Gateway -->
 		<div class="mt-4">
-			<div class="text-xs text-gray-600">Select Payment Gateway</div>
+			<div class="text-xs text-ink-gray-6">Select Payment Gateway</div>
 			<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
 				<Button
 					size="lg"
diff --git a/dashboard/src/components/billing/UpcomingInvoiceDialog.vue b/dashboard/src/components/billing/UpcomingInvoiceDialog.vue
index 0a7880fba11..decd2d81777 100644
--- a/dashboard/src/components/billing/UpcomingInvoiceDialog.vue
+++ b/dashboard/src/components/billing/UpcomingInvoiceDialog.vue
@@ -10,7 +10,7 @@
 			<template v-if="upcomingInvoice.data.upcoming_invoice">
 				<div
 					v-if="upcomingInvoice.data.upcoming_invoice.status === 'Empty'"
-					class="text-base text-gray-600"
+					class="text-base text-ink-gray-6"
 				>
 					Nothing to show
 				</div>
@@ -20,7 +20,7 @@
 				/>
 			</template>
 			<template v-else>
-				<div class="text-base text-gray-600">Nothing to show</div>
+				<div class="text-base text-ink-gray-6">Nothing to show</div>
 			</template>
 		</template>
 	</Dialog>
diff --git a/dashboard/src/components/billing/mpesa/AddMpesaCredentials.vue b/dashboard/src/components/billing/mpesa/AddMpesaCredentials.vue
index 2757ef9be80..a20dcfa6d40 100644
--- a/dashboard/src/components/billing/mpesa/AddMpesaCredentials.vue
+++ b/dashboard/src/components/billing/mpesa/AddMpesaCredentials.vue
@@ -76,7 +76,7 @@
 
 				<!-- <div class="flex items-center">
 					<input v-model="sandBox" type="checkbox" class="mr-2" />
-					<label class="text-sm font-medium text-gray-700">Sandbox Mode</label>
+					<label class="text-sm font-medium text-ink-gray-7">Sandbox Mode</label>
 				</div> -->
 				<ErrorMessage class="mt-2" :message="errorMessage" />
 			</div>
diff --git a/dashboard/src/components/billing/mpesa/BuyPrepaidCreditsMpesa.vue b/dashboard/src/components/billing/mpesa/BuyPrepaidCreditsMpesa.vue
index f3bae54f33a..b7715c2f21b 100644
--- a/dashboard/src/components/billing/mpesa/BuyPrepaidCreditsMpesa.vue
+++ b/dashboard/src/components/billing/mpesa/BuyPrepaidCreditsMpesa.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<label class="block mt-4">
-			<span class="text-sm leading-4 text-gray-700"> </span>
+			<span class="text-sm leading-4 text-ink-gray-7"> </span>
 			<ErrorMessage class="mt-1" :message="paymentErrorMessage" />
 		</label>
 
diff --git a/dashboard/src/components/billing/mpesa/PartnerPaymentPayout.vue b/dashboard/src/components/billing/mpesa/PartnerPaymentPayout.vue
index b8614240526..9c8a37aba7a 100644
--- a/dashboard/src/components/billing/mpesa/PartnerPaymentPayout.vue
+++ b/dashboard/src/components/billing/mpesa/PartnerPaymentPayout.vue
@@ -79,7 +79,7 @@
 
 			<div
 				v-if="payments.length === 0 && fetchAttempted"
-				class="text-center mt-4 text-gray-500"
+				class="text-center mt-4 text-ink-gray-5"
 			>
 				No payments found.
 			</div>
diff --git a/dashboard/src/components/charts/BarChart.vue b/dashboard/src/components/charts/BarChart.vue
index 0886e68248f..365377e410b 100644
--- a/dashboard/src/components/charts/BarChart.vue
+++ b/dashboard/src/components/charts/BarChart.vue
@@ -20,7 +20,7 @@
 			class="flex h-full items-center justify-center"
 		>
 			<ErrorMessage v-if="error" :message="error" />
-			<span v-else class="text-base text-gray-700">No data</span>
+			<span v-else class="text-base text-ink-gray-7">No data</span>
 		</div>
 		<VChart
 			ref="chartRef"
diff --git a/dashboard/src/components/charts/LineChart.vue b/dashboard/src/components/charts/LineChart.vue
index 63b2d3bd85a..1b0b8b72b6b 100644
--- a/dashboard/src/components/charts/LineChart.vue
+++ b/dashboard/src/components/charts/LineChart.vue
@@ -24,7 +24,7 @@
 			class="flex h-full items-center justify-center"
 		>
 			<ErrorMessage v-if="error" :message="error" />
-			<span v-else class="text-base text-gray-700">No data</span>
+			<span v-else class="text-base text-ink-gray-7">No data</span>
 		</div>
 		<VChart
 			v-else
diff --git a/dashboard/src/components/devtools/database/BinlogBrowserChart.vue b/dashboard/src/components/devtools/database/BinlogBrowserChart.vue
index 0e1f8da61ec..eb5f59525e4 100644
--- a/dashboard/src/components/devtools/database/BinlogBrowserChart.vue
+++ b/dashboard/src/components/devtools/database/BinlogBrowserChart.vue
@@ -1,182 +1,189 @@
 <template>
-    <div ref="chartDiv" v-show="!error" class="h-full w-full min-w-[300px] md:min-w-[400px] min-h-[300px]"></div>
-    <div v-show="error" class="flex h-full w-full items-center justify-center text-center text-red-500">
-        Error: {{ error }}
-    </div>
+	<div
+		ref="chartDiv"
+		v-show="!error"
+		class="h-full w-full min-w-[300px] md:min-w-[400px] min-h-[300px]"
+	></div>
+	<div
+		v-show="error"
+		class="flex h-full w-full items-center justify-center text-center text-ink-red-3"
+	>
+		Error: {{ error }}
+	</div>
 </template>
 
 <script setup>
 import { init } from 'echarts';
 import {
-    computed,
-    ref,
-    onMounted,
-    onBeforeUnmount,
-    watch,
-    nextTick,
+	computed,
+	ref,
+	onMounted,
+	onBeforeUnmount,
+	watch,
+	nextTick,
 } from 'vue';
 import useAxisChartOptions from 'frappe-ui/src/components/Charts/axisChartOptions';
 
 const props = defineProps({
-    data: {
-        type: Array,
-        required: true,
-    },
-    onZoomEvent: {
-        type: Function,
-        required: false,
-    },
+	data: {
+		type: Array,
+		required: true,
+	},
+	onZoomEvent: {
+		type: Function,
+		required: false,
+	},
 });
 
 const error = ref('');
 const options = computed(() => {
-    try {
-        return useAxisChartOptions({
-            data: props.data,
-            xAxis: {
-                key: 'timestamp',
-                type: 'time',
-                title: 'Day',
-                timeGrain: 'minute',
-            },
-            yAxis: {
-                title: 'Count',
-            },
-            stacked: true,
-            series: [
-                { name: 'INSERT', type: 'bar' },
-                { name: 'UPDATE', type: 'bar' },
-                { name: 'DELETE', type: 'bar' },
-                { name: 'SELECT', type: 'bar' },
-                { name: 'OTHER', type: 'bar' },
-            ],
-            echartOptions: {
-                legend: { show: true },
-                toolbox: {
-                    show: true,
-
-                    feature: {
-                        dataZoom: {
-                            show: true,
-                            yAxisIndex: 'none',
-                            title: {
-                                zoom: 'Zoom',
-                            },
-                            icon: {
-                                zoom: 'image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS16b29tLWluLWljb24gbHVjaWRlLXpvb20taW4iPjxjaXJjbGUgY3g9IjExIiBjeT0iMTEiIHI9IjgiLz48bGluZSB4MT0iMjEiIHgyPSIxNi42NSIgeTE9IjIxIiB5Mj0iMTYuNjUiLz48bGluZSB4MT0iMTEiIHgyPSIxMSIgeTE9IjgiIHkyPSIxNCIvPjxsaW5lIHgxPSI4IiB4Mj0iMTQiIHkxPSIxMSIgeTI9IjExIi8+PC9zdmc+',
-                                back: 'none',
-                            },
-                        },
-                        restore: {
-                            show: false, // This hides the reset/restore button
-                        },
-                    },
-                }
-            },
-        });
-    } catch (e) {
-        error.value = e.message;
-        return {};
-    }
+	try {
+		return useAxisChartOptions({
+			data: props.data,
+			xAxis: {
+				key: 'timestamp',
+				type: 'time',
+				title: 'Day',
+				timeGrain: 'minute',
+			},
+			yAxis: {
+				title: 'Count',
+			},
+			stacked: true,
+			series: [
+				{ name: 'INSERT', type: 'bar' },
+				{ name: 'UPDATE', type: 'bar' },
+				{ name: 'DELETE', type: 'bar' },
+				{ name: 'SELECT', type: 'bar' },
+				{ name: 'OTHER', type: 'bar' },
+			],
+			echartOptions: {
+				legend: { show: true },
+				toolbox: {
+					show: true,
+
+					feature: {
+						dataZoom: {
+							show: true,
+							yAxisIndex: 'none',
+							title: {
+								zoom: 'Zoom',
+							},
+							icon: {
+								zoom: 'image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS16b29tLWluLWljb24gbHVjaWRlLXpvb20taW4iPjxjaXJjbGUgY3g9IjExIiBjeT0iMTEiIHI9IjgiLz48bGluZSB4MT0iMjEiIHgyPSIxNi42NSIgeTE9IjIxIiB5Mj0iMTYuNjUiLz48bGluZSB4MT0iMTEiIHgyPSIxMSIgeTE9IjgiIHkyPSIxNCIvPjxsaW5lIHgxPSI4IiB4Mj0iMTQiIHkxPSIxMSIgeTI9IjExIi8+PC9zdmc+',
+								back: 'none',
+							},
+						},
+						restore: {
+							show: false, // This hides the reset/restore button
+						},
+					},
+				},
+			},
+		});
+	} catch (e) {
+		error.value = e.message;
+		return {};
+	}
 });
 
 let chart;
 const chartDiv = ref();
 
 function debounce(func, wait) {
-    let timeout;
-    return function executedFunction(...args) {
-        const later = () => {
-            clearTimeout(timeout);
-            func(...args);
-        };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-    };
+	let timeout;
+	return function executedFunction(...args) {
+		const later = () => {
+			clearTimeout(timeout);
+			func(...args);
+		};
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+	};
 }
 
 function onZoomEventHandler(event) {
-    if (!props.onZoomEvent) return;
-    if (!props.data || props.data.length < 2) return;
+	if (!props.onZoomEvent) return;
+	if (!props.data || props.data.length < 2) return;
 
-    const info = event.batch?.[0] || event;
+	const info = event.batch?.[0] || event;
 
-    let startValue, endValue;
+	let startValue, endValue;
 
-    if ('startValue' in info) {
-        startValue = info.startValue;
-        endValue = info.endValue;
-    } else {
-        const data = props.data;
-        const len = data.length;
+	if ('startValue' in info) {
+		startValue = info.startValue;
+		endValue = info.endValue;
+	} else {
+		const data = props.data;
+		const len = data.length;
 
-        const startIndex = Math.floor((info.start / 100) * (len - 1));
-        const endIndex = Math.floor((info.end / 100) * (len - 1));
+		const startIndex = Math.floor((info.start / 100) * (len - 1));
+		const endIndex = Math.floor((info.end / 100) * (len - 1));
 
-        startValue = data[startIndex].timestamp;
-        endValue = data[endIndex].timestamp;
-    }
+		startValue = data[startIndex].timestamp;
+		endValue = data[endIndex].timestamp;
+	}
 
-    // Find actual matching data entries
-    const data = props.data;
-    const startItem = data.find((d) => d.timestamp >= startValue) || data[0];
-    const endItem =
-        data.find((d) => d.timestamp >= endValue) || data[data.length - 1];
+	// Find actual matching data entries
+	const data = props.data;
+	const startItem = data.find((d) => d.timestamp >= startValue) || data[0];
+	const endItem =
+		data.find((d) => d.timestamp >= endValue) || data[data.length - 1];
 
-    props.onZoomEvent(startItem, endItem);
+	props.onZoomEvent(startItem, endItem);
 }
 
 const onZoomEventHandlerDebounced = debounce(onZoomEventHandler, 1000);
 
 function enableDataZoomSelectAutomatically() {
-    if (!chart) return;
-
-    const zr = chart.getZr();
-    zr.on('mousemove', function handler() {
-        chart.dispatchAction({
-            type: 'takeGlobalCursor',
-            key: 'dataZoomSelect',
-            dataZoomSelectActive: true,
-        });
-        zr.off('mousemove', handler); // Remove after trigerring the event
-    });
+	if (!chart) return;
+
+	const zr = chart.getZr();
+	zr.on('mousemove', function handler() {
+		chart.dispatchAction({
+			type: 'takeGlobalCursor',
+			key: 'dataZoomSelect',
+			dataZoomSelectActive: true,
+		});
+		zr.off('mousemove', handler); // Remove after trigerring the event
+	});
 }
 
 onMounted(() => {
-    if (!chartDiv.value) return;
-
-    chart = init(chartDiv.value, 'light', { renderer: 'svg' });
-    chart.setOption({ ...options.value }, true);
-
-    nextTick(() => {
-        enableDataZoomSelectAutomatically();
-    });
-
-    chart.on('datazoom', function (zoom) {
-        onZoomEventHandlerDebounced(zoom);
-    });
-
-    const resizeDebounce = debounce(() => {
-        chart.resize({
-            animation: {
-                duration: 300,
-            },
-        });
-    }, 250);
-
-    let resizeObserver = new ResizeObserver(resizeDebounce);
-    setTimeout(() => resizeObserver.observe(chartDiv.value), 500);
-    onBeforeUnmount(() => resizeObserver.unobserve(chartDiv.value));
+	if (!chartDiv.value) return;
+
+	chart = init(chartDiv.value, 'light', { renderer: 'svg' });
+	chart.setOption({ ...options.value }, true);
+
+	nextTick(() => {
+		enableDataZoomSelectAutomatically();
+	});
+
+	chart.on('datazoom', function (zoom) {
+		onZoomEventHandlerDebounced(zoom);
+	});
+
+	const resizeDebounce = debounce(() => {
+		chart.resize({
+			animation: {
+				duration: 300,
+			},
+		});
+	}, 250);
+
+	let resizeObserver = new ResizeObserver(resizeDebounce);
+	setTimeout(() => resizeObserver.observe(chartDiv.value), 500);
+	onBeforeUnmount(() => resizeObserver.unobserve(chartDiv.value));
 });
 
 watch(
-    () => options.value,
-    (newOptions) => {
-        if (chart) {
-            chart.setOption(newOptions, true);
-            enableDataZoomSelectAutomatically();
-        }
-    },
-    { deep: true },
+	() => options.value,
+	(newOptions) => {
+		if (chart) {
+			chart.setOption(newOptions, true);
+			enableDataZoomSelectAutomatically();
+		}
+	},
+	{ deep: true },
 );
 </script>
diff --git a/dashboard/src/components/devtools/database/BinlogBrowserIndexStatusDialog.vue b/dashboard/src/components/devtools/database/BinlogBrowserIndexStatusDialog.vue
index 8702091c757..d8665413c8c 100644
--- a/dashboard/src/components/devtools/database/BinlogBrowserIndexStatusDialog.vue
+++ b/dashboard/src/components/devtools/database/BinlogBrowserIndexStatusDialog.vue
@@ -10,7 +10,7 @@
 		<template #body-content>
 			<div
 				v-if="$resources?.binlogs?.loading"
-				class="flex w-full items-center justify-center gap-2 py-32 text-gray-700"
+				class="flex w-full items-center justify-center gap-2 py-32 text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Loading
 			</div>
@@ -36,10 +36,10 @@
 								100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 							</option>
 						</select>
-						<p class="text-sm text-gray-600">Per Page</p>
+						<p class="text-sm text-ink-gray-6">Per Page</p>
 					</div>
 					<div class="flex flex-shrink-0 items-center gap-2">
-						<p class="tnum text-sm text-gray-600">
+						<p class="tnum text-sm text-ink-gray-6">
 							{{ pageStart }} - {{ pageEnd }} of {{ totalBinlogs }} binlogs
 						</p>
 						<div class="flex gap-2">
@@ -180,7 +180,7 @@ export default {
 					{
 						label: 'Size',
 						fieldname: 'size_mb',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						format(value) {
 							return value ? `${value} MB` : '';
 						},
diff --git a/dashboard/src/components/devtools/database/BinlogResultTable.vue b/dashboard/src/components/devtools/database/BinlogResultTable.vue
index 207d65c0e66..afdc7bdacab 100644
--- a/dashboard/src/components/devtools/database/BinlogResultTable.vue
+++ b/dashboard/src/components/devtools/database/BinlogResultTable.vue
@@ -178,7 +178,7 @@ watch(
 	>
 		<template #body-content>
 			<pre
-				class="mt-2 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-gray-100 p-3 text-sm text-gray-700"
+				class="mt-2 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-surface-gray-2 p-3 text-sm text-ink-gray-7"
 				>{{ fullViewDialogBody }}</pre
 			>
 		</template>
@@ -193,13 +193,13 @@ watch(
 		<div class="relative flex flex-1 flex-col overflow-auto text-base">
 			<div
 				v-if="loadingData"
-				class="absolute bottom-0 left-0 right-0 top-0 flex w-full items-center justify-center gap-2 bg-white text-base text-gray-800 min-h-80"
+				class="absolute bottom-0 left-0 right-0 top-0 flex w-full items-center justify-center gap-2 bg-surface-white text-base text-ink-gray-8 min-h-80"
 			>
 				<Spinner class="w-4" /> Crunching data...
 			</div>
 			<div
 				v-if="props.data?.length == 0"
-				class="flex flex-col h-80 items-center justify-center text-gray-800 text-base gap-1"
+				class="flex flex-col h-80 items-center justify-center text-ink-gray-8 text-base gap-1"
 			>
 				<p>No results to display</p>
 				<br />
@@ -212,7 +212,7 @@ watch(
 					'h-80': !props.data?.length,
 				}"
 			>
-				<thead class="sticky top-0 z-10 bg-gray-50">
+				<thead class="sticky top-0 z-10 bg-surface-gray-1">
 					<tr
 						v-for="headerGroup in table.getHeaderGroups()"
 						:key="headerGroup.id"
@@ -221,7 +221,7 @@ watch(
 							v-for="header in headerGroup.headers"
 							:key="header.id"
 							:colSpan="header.colSpan"
-							class="border-b border-r text-gray-800"
+							class="border-b border-r text-ink-gray-8"
 							:width="
 								header.column.columnDef.id === '__index' ? '6rem' : 'auto'
 							"
@@ -235,7 +235,7 @@ watch(
 							</div>
 						</td>
 						<td
-							class="w-[10rem] border-b border-r text-center text-gray-800"
+							class="w-[10rem] border-b border-r text-center text-ink-gray-8"
 							v-if="actionHeaderLabel"
 						>
 							{{ actionHeaderLabel }}
@@ -263,11 +263,11 @@ watch(
 							<MaximizedIcon
 								v-if="isTextTruncated(cell)"
 								@click="handleViewFull(cell)"
-								class="!my-0 ml-2 inline-block !h-4 !w-4 cursor-pointer text-gray-700"
+								class="!my-0 ml-2 inline-block !h-4 !w-4 cursor-pointer text-ink-gray-7"
 							/>
 						</td>
 						<td
-							class="w-[6rem] border-b border-r text-center text-gray-800"
+							class="w-[6rem] border-b border-r text-center text-ink-gray-8"
 							v-if="actionComponent"
 						>
 							<component
@@ -296,11 +296,11 @@ watch(
 					<option value="25">25&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
 					<option value="50">50&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
 				</select>
-				<p class="text-sm text-gray-600">Per Page</p>
+				<p class="text-sm text-ink-gray-6">Per Page</p>
 			</div>
 
 			<div class="flex flex-shrink-0 items-center gap-2">
-				<p class="tnum text-sm text-gray-600">
+				<p class="tnum text-sm text-ink-gray-6">
 					{{ pageStart }} - {{ pageEnd }} of {{ totalRows }} rows
 				</p>
 				<div class="flex gap-2">
diff --git a/dashboard/src/components/devtools/database/DatabasePerformanceSchemaDisabledNotice.vue b/dashboard/src/components/devtools/database/DatabasePerformanceSchemaDisabledNotice.vue
index 629bfea8762..b4fc11f77fa 100644
--- a/dashboard/src/components/devtools/database/DatabasePerformanceSchemaDisabledNotice.vue
+++ b/dashboard/src/components/devtools/database/DatabasePerformanceSchemaDisabledNotice.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="flex h-60 flex-col items-center justify-center gap-1">
-		<p class="text-base text-gray-700">
+		<p class="text-base text-ink-gray-7">
 			Performance Schema is not enabled on database server
 		</p>
-		<p class="text-base text-gray-700">
+		<p class="text-base text-ink-gray-7">
 			Please reach out to
 			<a href="https://support.frappe.io/" target="_blank" class="underline"
 				>support</a
diff --git a/dashboard/src/components/devtools/database/DatabaseSQLPlaygroundLog.vue b/dashboard/src/components/devtools/database/DatabaseSQLPlaygroundLog.vue
index 2509a05bd2d..461d214c3bd 100644
--- a/dashboard/src/components/devtools/database/DatabaseSQLPlaygroundLog.vue
+++ b/dashboard/src/components/devtools/database/DatabaseSQLPlaygroundLog.vue
@@ -15,21 +15,21 @@
 					>
 				</div>
 				<div class="mt-4">
-					<p class="text-sm text-gray-600">Query</p>
+					<p class="text-sm text-ink-gray-6">Query</p>
 					<pre
-						class="mt-1.5 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
+						class="mt-1.5 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-surface-gray-1 px-2 py-1.5 text-sm text-ink-gray-6"
 						>{{ selectedRow.query }}</pre
 					>
 				</div>
 				<div class="mt-3">
-					<p class="text-sm text-gray-600">Timestamp</p>
-					<p class="mt-1.5 text-sm text-gray-700">
+					<p class="text-sm text-ink-gray-6">Timestamp</p>
+					<p class="mt-1.5 text-sm text-ink-gray-7">
 						{{ new Date(selectedRow.creation).toLocaleString() }}
 					</p>
 				</div>
 				<div class="mt-3">
-					<p class="text-sm text-gray-600">Committed in DB</p>
-					<p class="mt-1.5 text-sm text-gray-700">
+					<p class="text-sm text-ink-gray-6">Committed in DB</p>
+					<p class="mt-1.5 text-sm text-ink-gray-7">
 						{{ selectedRow.committed ? 'Yes' : 'No' }}
 					</p>
 				</div>
diff --git a/dashboard/src/components/devtools/database/DatabaseTableSchemaDialog.vue b/dashboard/src/components/devtools/database/DatabaseTableSchemaDialog.vue
index 68bd664216c..d48a834a219 100644
--- a/dashboard/src/components/devtools/database/DatabaseTableSchemaDialog.vue
+++ b/dashboard/src/components/devtools/database/DatabaseTableSchemaDialog.vue
@@ -6,7 +6,7 @@
 		}"
 	>
 		<template #body-content>
-			<p class="mb-2 text-sm text-gray-700">Select Table</p>
+			<p class="mb-2 text-sm text-ink-gray-7">Select Table</p>
 			<div class="flex flex-row gap-2">
 				<FormControl
 					class="w-full"
diff --git a/dashboard/src/components/devtools/database/DatabaseTableSchemaSizeDetailsDialog.vue b/dashboard/src/components/devtools/database/DatabaseTableSchemaSizeDetailsDialog.vue
index c816b001a92..a6b5683db38 100644
--- a/dashboard/src/components/devtools/database/DatabaseTableSchemaSizeDetailsDialog.vue
+++ b/dashboard/src/components/devtools/database/DatabaseTableSchemaSizeDetailsDialog.vue
@@ -110,7 +110,7 @@ export default {
 								'button',
 								{
 									class:
-										'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded',
+										'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded',
 									onClick: (_) => {
 										console.log(row.table_name);
 										this.optimizeTable(row.table_name);
@@ -130,7 +130,7 @@ export default {
 								'button',
 								{
 									class:
-										'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded',
+										'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded',
 									onClick: () => {
 										this.viewSchemaDetails(row.table_name);
 									},
diff --git a/dashboard/src/components/devtools/database/SQLResult.vue b/dashboard/src/components/devtools/database/SQLResult.vue
index cadaaa41315..dc303ecad49 100644
--- a/dashboard/src/components/devtools/database/SQLResult.vue
+++ b/dashboard/src/components/devtools/database/SQLResult.vue
@@ -29,7 +29,7 @@
 </template>
 <style scoped>
 .output-container {
-	@apply rounded border p-4 text-base text-gray-700;
+	@apply rounded border p-4 text-base text-ink-gray-7;
 }
 </style>
 <script>
diff --git a/dashboard/src/components/devtools/database/SQLResultTable.vue b/dashboard/src/components/devtools/database/SQLResultTable.vue
index f6f6075e16d..6830b7c8f99 100644
--- a/dashboard/src/components/devtools/database/SQLResultTable.vue
+++ b/dashboard/src/components/devtools/database/SQLResultTable.vue
@@ -168,7 +168,7 @@ const downloadCSV = async () => {
 	>
 		<template #body-content>
 			<pre
-				class="mt-2 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-gray-100 p-3 text-sm text-gray-700"
+				class="mt-2 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-surface-gray-2 p-3 text-sm text-ink-gray-7"
 				>{{ fullViewDialogBody }}</pre
 			>
 		</template>
@@ -185,7 +185,7 @@ const downloadCSV = async () => {
 				v-if="props?.columns?.length || props.data?.length"
 				class="border-separate border-spacing-0"
 			>
-				<thead class="sticky top-0 z-10 bg-gray-50">
+				<thead class="sticky top-0 z-10 bg-surface-gray-1">
 					<tr
 						v-for="headerGroup in table.getHeaderGroups()"
 						:key="headerGroup.id"
@@ -194,7 +194,7 @@ const downloadCSV = async () => {
 							v-for="header in headerGroup.headers"
 							:key="header.id"
 							:colSpan="header.colSpan"
-							class="border-b text-gray-800"
+							class="border-b text-ink-gray-8"
 							:class="{
 								'border-r': header.column.columnDef.id !== lastColumn,
 							}"
@@ -211,7 +211,7 @@ const downloadCSV = async () => {
 							</div>
 						</td>
 						<td
-							class="w-[10rem] border-b border-r text-center text-gray-800"
+							class="w-[10rem] border-b border-r text-center text-ink-gray-8"
 							v-if="actionHeaderLabel"
 						>
 							{{ actionHeaderLabel }}
@@ -240,11 +240,11 @@ const downloadCSV = async () => {
 							<MaximizedIcon
 								v-if="isTextTruncated(cell)"
 								@click="handleViewFull(cell)"
-								class="!my-0 ml-2 inline-block !h-4 !w-4 cursor-pointer text-gray-700"
+								class="!my-0 ml-2 inline-block !h-4 !w-4 cursor-pointer text-ink-gray-7"
 							/>
 						</td>
 						<td
-							class="w-[6rem] border-b border-r text-center text-gray-800"
+							class="w-[6rem] border-b border-r text-center text-ink-gray-8"
 							v-if="actionComponent"
 						>
 							<component
@@ -284,7 +284,7 @@ const downloadCSV = async () => {
 			>
 				<div class="flex flex-shrink-0 items-center justify-end gap-3">
 					<div class="flex flex-shrink-0 items-center gap-2 border-r-2 pr-3">
-						<p class="text-sm text-gray-600">Per Page</p>
+						<p class="text-sm text-ink-gray-6">Per Page</p>
 						<select
 							class="form-select block !py-0.5 text-sm"
 							v-model="pageSize"
@@ -299,7 +299,7 @@ const downloadCSV = async () => {
 							</option>
 						</select>
 					</div>
-					<p class="tnum text-sm text-gray-600">
+					<p class="tnum text-sm text-ink-gray-6">
 						{{ pageStart }} - {{ pageEnd }} of {{ totalRows }} rows
 					</p>
 					<div class="flex gap-2">
diff --git a/dashboard/src/components/global/Alert.vue b/dashboard/src/components/global/Alert.vue
index 37bf4578254..cab81ddfbc9 100644
--- a/dashboard/src/components/global/Alert.vue
+++ b/dashboard/src/components/global/Alert.vue
@@ -4,11 +4,11 @@
 			<FeatherIcon
 				v-if="type === 'warning'"
 				name="alert-circle"
-				class="h-5 w-5 text-gray-900"
+				class="h-5 w-5 text-ink-gray-9"
 			/>
 			<div class="ml-2 w-full">
 				<div class="flex flex-col md:flex-row md:items-baseline">
-					<h3 class="text-lg font-medium text-gray-900" v-if="title">
+					<h3 class="text-lg font-medium text-ink-gray-9" v-if="title">
 						{{ title }}
 					</h3>
 					<div class="mt-1 md:ml-2 md:mt-0">
@@ -30,15 +30,15 @@ export default {
 		title: String,
 		type: {
 			type: String,
-			default: 'warning'
-		}
+			default: 'warning',
+		},
 	},
 	computed: {
 		classes() {
 			return {
-				warning: 'text-gray-700 bg-gray-50'
+				warning: 'text-ink-gray-7 bg-surface-gray-1',
 			}[this.type];
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/dashboard/src/components/global/Breadcrumbs.vue b/dashboard/src/components/global/Breadcrumbs.vue
index c65c09e4bd4..5c639296332 100644
--- a/dashboard/src/components/global/Breadcrumbs.vue
+++ b/dashboard/src/components/global/Breadcrumbs.vue
@@ -8,8 +8,8 @@
 					class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400"
 					:class="[
 						i == linkItems.length - 1
-							? 'text-gray-900'
-							: 'text-gray-600 hover:text-gray-700'
+							? 'text-ink-gray-9'
+							: 'text-ink-gray-6 hover:text-ink-gray-7',
 					]"
 					:to="item.route"
 				>
@@ -20,7 +20,7 @@
 				</router-link>
 				<span
 					v-if="i != linkItems.length - 1"
-					class="mx-0.5 text-base text-gray-500"
+					class="mx-0.5 text-base text-ink-gray-5"
 				>
 					/
 				</span>
@@ -35,8 +35,8 @@ import { computed } from 'vue';
 const props = defineProps({
 	items: {
 		type: Array,
-		required: true
-	}
+		required: true,
+	},
 });
 
 const items = computed(() => {
diff --git a/dashboard/src/components/global/Card.vue b/dashboard/src/components/global/Card.vue
index aa8eeaf2577..7921f74bb90 100644
--- a/dashboard/src/components/global/Card.vue
+++ b/dashboard/src/components/global/Card.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col rounded-lg border bg-white px-6 py-5">
+	<div class="flex flex-col rounded-lg border bg-surface-white px-6 py-5">
 		<div class="flex items-baseline justify-between">
 			<div class="flex items-baseline space-x-2">
 				<div class="flex items-center space-x-2" v-if="$slots['actions-left']">
@@ -7,7 +7,7 @@
 				</div>
 				<div>
 					<h2 class="text-xl font-semibold">{{ title }}</h2>
-					<p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
+					<p class="mt-1.5 text-base text-ink-gray-6" v-if="subtitle">
 						{{ subtitle }}
 					</p>
 				</div>
@@ -37,7 +37,7 @@ export default {
 	name: 'Card',
 	props: ['title', 'subtitle', 'loading', 'stopOverflow'],
 	components: {
-		LoadingText
-	}
+		LoadingText,
+	},
 };
 </script>
diff --git a/dashboard/src/components/global/GrayCheckIcon.vue b/dashboard/src/components/global/GrayCheckIcon.vue
index 07ac44f7cfa..1380df207fd 100644
--- a/dashboard/src/components/global/GrayCheckIcon.vue
+++ b/dashboard/src/components/global/GrayCheckIcon.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="grid h-4 w-4 shrink-0 place-items-center rounded-full border border-gray-500 bg-gray-500"
+		class="grid h-4 w-4 shrink-0 place-items-center rounded-full border border-gray-500 bg-surface-gray-10"
 	>
 		<svg
 			width="10"
diff --git a/dashboard/src/components/global/ListItem.vue b/dashboard/src/components/global/ListItem.vue
index fa5abef9bc1..5d186d8903b 100644
--- a/dashboard/src/components/global/ListItem.vue
+++ b/dashboard/src/components/global/ListItem.vue
@@ -3,13 +3,13 @@
 		<div>
 			<div class="flex justify-start">
 				<img class="mr-2 h-4" v-if="image" :src="image" :alt="title" />
-				<h3 class="text-base font-medium text-gray-900">
+				<h3 class="text-base font-medium text-ink-gray-9">
 					{{ title }}
 				</h3>
 			</div>
 			<div class="mt-1" v-if="secondaryText || $slots.subtitle">
 				<template v-if="secondaryText">
-					<span class="text-base text-gray-600" v-html="secondaryText" />
+					<span class="text-base text-ink-gray-6" v-html="secondaryText" />
 				</template>
 				<slot v-if="$slots.subtitle" name="subtitle" />
 			</div>
@@ -25,7 +25,7 @@ export default {
 		secondaryText() {
 			let text = this.subtitle || this.description || '';
 			return text.replace('\n', '<br>');
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/dashboard/src/components/global/Section.vue b/dashboard/src/components/global/Section.vue
index d9011f1cff4..0669c9fcc6d 100644
--- a/dashboard/src/components/global/Section.vue
+++ b/dashboard/src/components/global/Section.vue
@@ -1,7 +1,7 @@
 <template>
 	<section>
-		<h2 class="text-xl font-medium text-gray-900">{{ title }}</h2>
-		<p class="text-base text-gray-500" v-if="description">
+		<h2 class="text-xl font-medium text-ink-gray-9">{{ title }}</h2>
+		<p class="text-base text-ink-gray-5" v-if="description">
 			{{ description }}
 		</p>
 		<div class="mt-6">
@@ -13,6 +13,6 @@
 <script>
 export default {
 	name: 'Section',
-	props: ['title', 'description']
+	props: ['title', 'description'],
 };
 </script>
diff --git a/dashboard/src/components/global/SectionHeader.vue b/dashboard/src/components/global/SectionHeader.vue
index adcc924a8b7..e65742acaac 100644
--- a/dashboard/src/components/global/SectionHeader.vue
+++ b/dashboard/src/components/global/SectionHeader.vue
@@ -4,7 +4,7 @@ const props = defineProps(['heading']);
 
 <template>
 	<div class="flex flex-row items-center justify-between">
-		<h2 class="text-xl font-semibold text-gray-800">{{ heading }}</h2>
+		<h2 class="text-xl font-semibold text-ink-gray-8">{{ heading }}</h2>
 		<slot name="actions"> </slot>
 	</div>
 </template>
diff --git a/dashboard/src/components/global/Select.vue b/dashboard/src/components/global/Select.vue
index 2911970af43..28281ee391f 100644
--- a/dashboard/src/components/global/Select.vue
+++ b/dashboard/src/components/global/Select.vue
@@ -2,7 +2,7 @@
 	<label class="block">
 		<span
 			v-if="label"
-			class="mb-2 inline-block text-sm leading-4 text-gray-700"
+			class="mb-2 inline-block text-sm leading-4 text-ink-gray-7"
 		>
 			{{ label }}
 		</span>
@@ -33,8 +33,8 @@ export default {
 			},
 			set(val) {
 				this.$emit('input', val);
-			}
-		}
-	}
+			},
+		},
+	},
 };
 </script>
diff --git a/dashboard/src/components/global/SuccessCard.vue b/dashboard/src/components/global/SuccessCard.vue
index d61812d8682..97561852f31 100644
--- a/dashboard/src/components/global/SuccessCard.vue
+++ b/dashboard/src/components/global/SuccessCard.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="flex flex-col rounded-md border bg-white p-10 shadow-sm">
+	<div class="flex flex-col rounded-md border bg-surface-white p-10 shadow-sm">
 		<div class="flex items-center">
 			<GreenCheckIcon class="mr-2 h-5 w-5" />
-			<h2 class="text-lg font-medium text-gray-900">
+			<h2 class="text-lg font-medium text-ink-gray-9">
 				{{ title }}
 			</h2>
 		</div>
-		<p class="mt-3 text-p-base text-gray-700">
+		<p class="mt-3 text-p-base text-ink-gray-7">
 			<slot></slot>
 		</p>
 	</div>
@@ -15,6 +15,6 @@
 <script>
 export default {
 	name: 'SuccessCard',
-	props: ['title', 'message']
+	props: ['title', 'message'],
 };
 </script>
diff --git a/dashboard/src/components/group/AddAppDialog.vue b/dashboard/src/components/group/AddAppDialog.vue
index 501f787c1ee..d73ec31f462 100644
--- a/dashboard/src/components/group/AddAppDialog.vue
+++ b/dashboard/src/components/group/AddAppDialog.vue
@@ -16,10 +16,10 @@
 						v-model="searchQuery"
 					>
 						<template #prefix>
-							<lucide-search class="h-4 w-4 text-gray-500" />
+							<lucide-search class="h-4 w-4 text-ink-gray-5" />
 						</template>
 						<template #suffix>
-							<span class="text-sm text-gray-500" v-if="searchQuery">
+							<span class="text-sm text-ink-gray-5" v-if="searchQuery">
 								{{
 									filteredRows.length === 0
 										? 'No results'
@@ -114,12 +114,12 @@
 				</ListView>
 				<div class="px-5" v-if="filteredRows.length === 0">
 					<div
-						class="text-center text-sm leading-10 text-gray-500"
+						class="text-center text-sm leading-10 text-ink-gray-5"
 						v-if="isLoading"
 					>
 						Loading...
 					</div>
-					<div v-else class="text-center text-sm leading-10 text-gray-500">
+					<div v-else class="text-center text-sm leading-10 text-ink-gray-5">
 						No apps available to add
 					</div>
 				</div>
@@ -228,7 +228,7 @@ export default {
 									'div',
 									{
 										class:
-											'w-6 h-6 rounded bg-gray-300 text-gray-600 flex items-center justify-center',
+											'w-6 h-6 rounded bg-surface-gray-4 text-ink-gray-6 flex items-center justify-center',
 									},
 									row.title[0].toUpperCase(),
 								);
@@ -237,7 +237,7 @@ export default {
 				{
 					label: 'Repository',
 					key: 'repo',
-					class: 'text-gray-600',
+					class: 'text-ink-gray-6',
 					width: '15rem',
 					format(value, row) {
 						if (!row.sources.length) return value;
diff --git a/dashboard/src/components/group/BenchLogsDialog.vue b/dashboard/src/components/group/BenchLogsDialog.vue
index f074b718adc..326ac218dd5 100644
--- a/dashboard/src/components/group/BenchLogsDialog.vue
+++ b/dashboard/src/components/group/BenchLogsDialog.vue
@@ -15,7 +15,9 @@
 							<lucide-arrow-left class="inline-block h-4 w-4" />
 						</template>
 					</Button>
-					<h2 class="ml-4 text-lg font-medium text-gray-900">{{ logName }}</h2>
+					<h2 class="ml-4 text-lg font-medium text-ink-gray-9">
+						{{ logName }}
+					</h2>
 					<div class="!ml-auto flex gap-2">
 						<Button @click="log.reload()" :loading="log.loading">
 							<template #icon>
@@ -32,7 +34,7 @@
 				</div>
 				<div class="mt-4">
 					<div
-						class="h-[34rem] overflow-scroll rounded border border-gray-100 bg-gray-900 px-2.5 py-2 text-sm text-gray-200"
+						class="h-[34rem] overflow-scroll rounded border border-gray-100 bg-gray-900 px-2.5 py-2 text-sm text-ink-gray-2"
 					>
 						<pre>{{
 							log.loading ? 'Loading...' : log?.data[logName] || 'No output'
@@ -110,7 +112,7 @@ const listOptions = ref({
 		{
 			label: 'Size',
 			fieldname: 'size',
-			class: 'text-gray-600',
+			class: 'text-ink-gray-6',
 			format(value) {
 				return `${value} kB`;
 			},
diff --git a/dashboard/src/components/group/ChangeAppBranchDialog.vue b/dashboard/src/components/group/ChangeAppBranchDialog.vue
index 0295490940b..97d014ce256 100644
--- a/dashboard/src/components/group/ChangeAppBranchDialog.vue
+++ b/dashboard/src/components/group/ChangeAppBranchDialog.vue
@@ -39,7 +39,7 @@
 					<!-- GitHub verification error -->
 					<span
 						v-if="branchVerificationError"
-						class="text-sm text-red-600 w-full mt-3"
+						class="text-sm text-ink-red-4 w-full mt-3"
 					>
 						{{ branchVerificationError }}
 					</span>
@@ -47,7 +47,7 @@
 					<!-- GitHub verification error -->
 					<span
 						v-else-if="branchVerificationSuccess"
-						class="text-sm text-green-600 w-full mt-3"
+						class="text-sm text-ink-green-3 w-full mt-3"
 					>
 						{{ branchVerificationSuccess }}
 					</span>
diff --git a/dashboard/src/components/group/DependencyEditorDialog.vue b/dashboard/src/components/group/DependencyEditorDialog.vue
index 97ba329f3e4..7e4fbe9d8c7 100644
--- a/dashboard/src/components/group/DependencyEditorDialog.vue
+++ b/dashboard/src/components/group/DependencyEditorDialog.vue
@@ -51,7 +51,7 @@
 							href="https://docs.frappe.io/cloud/benches/editing-bench-dependency-version#setting-a-custom-version"
 							><FeatherIcon
 								name="help-circle"
-								class="h-3 w-3 text-gray-700"
+								class="h-3 w-3 text-ink-gray-7"
 							></FeatherIcon
 						></a>
 					</Tooltip>
diff --git a/dashboard/src/components/group/PatchAppDialog.vue b/dashboard/src/components/group/PatchAppDialog.vue
index d4796798082..aaff8480bb1 100644
--- a/dashboard/src/components/group/PatchAppDialog.vue
+++ b/dashboard/src/components/group/PatchAppDialog.vue
@@ -2,7 +2,7 @@
 	<Dialog v-if="show" :options="{ title, position: 'top' }" v-model="show">
 		<template v-slot:body-content>
 			<div class="flex flex-col gap-4">
-				<p class="text-base text-gray-600">
+				<p class="text-base text-ink-gray-6">
 					You can select the app patch by either entering the patch URL, or by
 					selecting a patch file.
 				</p>
@@ -51,12 +51,12 @@
 							@click="$refs.fileSelector.click()"
 							title="Select patch file"
 						>
-							<FeatherIcon name="file-text" class="h-5 w-5 text-gray-600" />
+							<FeatherIcon name="file-text" class="h-5 w-5 text-ink-gray-6" />
 						</Button>
 
 						<!-- Clear Patch File -->
 						<Button @click="clear" v-if="patch" title="Clear patch file">
-							<FeatherIcon name="x" class="h-5 w-5 text-gray-600" />
+							<FeatherIcon name="x" class="h-5 w-5 text-ink-gray-6" />
 						</Button>
 					</div>
 				</div>
@@ -169,8 +169,7 @@ export default {
 		},
 		validate() {
 			if (!this.$resources.benches.data.length) {
-				this.error =
-					'This group has no benches, patch cannot be applied.';
+				this.error = 'This group has no benches, patch cannot be applied.';
 				return false;
 			}
 
@@ -298,8 +297,7 @@ export default {
 						return;
 					}
 
-					this.error =
-						'This group has no benches, patch cannot be applied.';
+					this.error = 'This group has no benches, patch cannot be applied.';
 				},
 				onError(data) {
 					this.error = data;
diff --git a/dashboard/src/components/group/ReleaseGroupActionCell.vue b/dashboard/src/components/group/ReleaseGroupActionCell.vue
index ee0c6235206..a4196501202 100644
--- a/dashboard/src/components/group/ReleaseGroupActionCell.vue
+++ b/dashboard/src/components/group/ReleaseGroupActionCell.vue
@@ -2,7 +2,7 @@
 	<div class="flex items-center justify-between gap-1">
 		<div>
 			<h3 class="text-base font-medium">{{ props.actionLabel }}</h3>
-			<p class="mt-1 text-p-base text-gray-600">{{ props.description }}</p>
+			<p class="mt-1 text-p-base text-ink-gray-6">{{ props.description }}</p>
 		</div>
 		<Button
 			v-if="releaseGroup?.doc"
@@ -11,7 +11,7 @@
 		>
 			<p
 				:class="
-					group === 'Dangerous Actions' ? 'text-red-600' : 'text-gray-800'
+					group === 'Dangerous Actions' ? 'text-ink-red-4' : 'text-ink-gray-8'
 				"
 			>
 				{{ props.buttonLabel }}
diff --git a/dashboard/src/components/group/SSHCertificateDialog.vue b/dashboard/src/components/group/SSHCertificateDialog.vue
index 55268e47906..64f3489b432 100644
--- a/dashboard/src/components/group/SSHCertificateDialog.vue
+++ b/dashboard/src/components/group/SSHCertificateDialog.vue
@@ -9,7 +9,7 @@
 		<template #body-content v-if="$bench.doc">
 			<div v-if="certificate" class="space-y-4">
 				<div class="space-y-2" v-if="isWindows">
-					<h4 class="text-base font-semibold text-gray-700">Step 1</h4>
+					<h4 class="text-base font-semibold text-ink-gray-7">Step 1</h4>
 					<div class="space-y-2">
 						<p class="text-base">
 							Execute the following shell command to set the encoding to UTF-8.
@@ -21,7 +21,7 @@
 					</div>
 				</div>
 				<div class="space-y-2">
-					<h4 class="text-base font-semibold text-gray-700">
+					<h4 class="text-base font-semibold text-ink-gray-7">
 						Step {{ isWindows ? '2' : '1' }}
 					</h4>
 					<div class="space-y-2">
@@ -36,7 +36,7 @@
 					</div>
 				</div>
 				<div class="space-y-2">
-					<h4 class="text-base font-semibold text-gray-700">
+					<h4 class="text-base font-semibold text-ink-gray-7">
 						Step {{ isWindows ? '3' : '2' }}
 					</h4>
 					<div class="space-y-1">
@@ -46,7 +46,7 @@
 						<ClickToCopyField :textContent="sshCommand" />
 					</div>
 				</div>
-				<div class="flex items-center gap-2 rounded bg-gray-100 p-3">
+				<div class="flex items-center gap-2 rounded bg-surface-gray-2 p-3">
 					<FeatherIcon name="alert-triangle" class="h-4 w-4" />
 					<div class="space-y-1 text-base">
 						<p>
@@ -66,7 +66,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="space-y-2 text-p-base text-gray-700" v-else>
+			<div class="space-y-2 text-p-base text-ink-gray-7" v-else>
 				<p v-if="!$bench.doc.user_ssh_key">
 					It looks like you haven't added your SSH public key. Go to
 					<router-link
diff --git a/dashboard/src/components/group/UpdateReleaseGroupDialog.vue b/dashboard/src/components/group/UpdateReleaseGroupDialog.vue
index 18398d40af8..0de57fdcf7d 100644
--- a/dashboard/src/components/group/UpdateReleaseGroupDialog.vue
+++ b/dashboard/src/components/group/UpdateReleaseGroupDialog.vue
@@ -36,7 +36,7 @@
 						:options="updatableAppOptions"
 						@update:selections="handleAppSelection"
 					/>
-					<p v-else class="text-center text-base text-gray-600">
+					<p v-else class="text-center text-base text-ink-gray-6">
 						No apps to update
 					</p>
 				</div>
@@ -57,7 +57,7 @@
 						@update:selections="handleSiteSelection"
 					/>
 					<p
-						class="text-center text-base font-medium text-gray-600"
+						class="text-center text-base font-medium text-ink-gray-6"
 						v-else-if="!benchDocResource.doc.deploy_information.sites.length"
 					>
 						No active sites to update
@@ -74,13 +74,13 @@
 						<a
 							href="https://docs.frappe.io/cloud/common-issues/build-might-fail"
 							target="_blank"
-							class="cursor-pointer rounded-full border border-gray-200 bg-gray-100 p-0.5 text-base text-gray-700"
+							class="cursor-pointer rounded-full border border-gray-200 bg-surface-gray-2 p-0.5 text-base text-ink-gray-7"
 						>
-							<lucide-help-circle :class="`h-4 w-4 text-red-600`" />
+							<lucide-help-circle :class="`h-4 w-4 text-ink-red-4`" />
 						</a>
 					</div>
 					<p
-						class="text-base font-medium text-gray-800"
+						class="text-base font-medium text-ink-gray-8"
 						v-html="restrictMessage"
 					></p>
 					<div class="mt-4">
@@ -103,7 +103,7 @@
 							href="https://docs.frappe.io/cloud/in-place-updates"
 							target="_blank"
 						>
-							<lucide-help-circle :class="`h-4 w-4 text-gray-600`" />
+							<lucide-help-circle :class="`h-4 w-4 text-ink-gray-6`" />
 						</a>
 					</Tooltip>
 				</div>
diff --git a/dashboard/src/components/marketplace/AppListingStepsDialog.vue b/dashboard/src/components/marketplace/AppListingStepsDialog.vue
index 4ce29044e0b..131243dccd8 100644
--- a/dashboard/src/components/marketplace/AppListingStepsDialog.vue
+++ b/dashboard/src/components/marketplace/AppListingStepsDialog.vue
@@ -8,7 +8,7 @@
 	>
 		<template #body-content>
 			<div v-if="appDoc.doc.review_stage === 'Ready for Review'">
-				<p class="text-p-base text-gray-700">
+				<p class="text-p-base text-ink-gray-7">
 					Your app is sent for review to our team. Please wait for the review to
 					be completed.
 				</p>
diff --git a/dashboard/src/components/marketplace/CodeReview.vue b/dashboard/src/components/marketplace/CodeReview.vue
index d648fd85d8d..6ee8db360d0 100644
--- a/dashboard/src/components/marketplace/CodeReview.vue
+++ b/dashboard/src/components/marketplace/CodeReview.vue
@@ -11,7 +11,7 @@
 				<div class="grid gap-3">
 					<div class="flex items-center mb-2">
 						<div class="flex items-center">
-							<span class="text-lg font-medium text-gray-700 mr-2"
+							<span class="text-lg font-medium text-ink-gray-7 mr-2"
 								>Status:</span
 							>
 							<Badge
@@ -75,12 +75,12 @@
 					</Dialog>
 
 					<div
-						class="card bg-white shadow-md rounded-md overflow-hidden"
+						class="card bg-surface-white shadow-md rounded-md overflow-hidden"
 						v-for="file in getResults"
 						:key="file.name"
 					>
-						<div class="card-header bg-gray-200 p-3">
-							<h2 class="text-md font-semibold text-gray-800">
+						<div class="card-header bg-surface-gray-3 p-3">
+							<h2 class="text-md font-semibold text-ink-gray-8">
 								{{ file.name }} - {{ file.score }} issues
 							</h2>
 						</div>
@@ -96,8 +96,10 @@
 									:key="issue.violation"
 								>
 									<div class="flex items-center mb-3">
-										<span class="text-red-600 mr-2">{{ issue.severity }}</span>
-										<span class="text-gray-800">({{ issue.violation }})</span>
+										<span class="text-ink-red-4 mr-2">{{
+											issue.severity
+										}}</span>
+										<span class="text-ink-gray-8">({{ issue.violation }})</span>
 										<span class="text-orange-500 font-semibold pl-2">
 											- {{ issue.match }}</span
 										>
@@ -146,19 +148,19 @@
 														size="md"
 													/>
 
-													<strong class="text-gray-900 pl-2 pr-2 text-lg">
+													<strong class="text-ink-gray-9 pl-2 pr-2 text-lg">
 														{{ comment.commented_by }}
 													</strong>
 													<Tooltip
 														:text="formatTime(comment.time)"
 														:placement="'top'"
 													>
-														<span class="text-gray-600 text-sm">
+														<span class="text-ink-gray-6 text-sm">
 															{{ $dayjs(comment.time).fromNow() }}
 														</span>
 													</Tooltip>
 												</div>
-												<p class="text-gray-800 text-base p-2 ml-6">
+												<p class="text-ink-gray-8 text-base p-2 ml-6">
 													{{ comment.comment }}
 												</p>
 											</div>
diff --git a/dashboard/src/components/marketplace/MarketplaceAppAnalytics.vue b/dashboard/src/components/marketplace/MarketplaceAppAnalytics.vue
index 27ed8c89a05..bb346a6f76b 100644
--- a/dashboard/src/components/marketplace/MarketplaceAppAnalytics.vue
+++ b/dashboard/src/components/marketplace/MarketplaceAppAnalytics.vue
@@ -15,11 +15,11 @@
 		<div class="col-span-2 mb-5 rounded-md border">
 			<div class="grid grid-cols-2 lg:grid-cols-5">
 				<div class="border-b border-r p-5 lg:border-b-0">
-					<div class="text-base text-gray-700">Total Installs</div>
+					<div class="text-base text-ink-gray-7">Total Installs</div>
 					<div class="mt-2 flex items-start justify-between">
 						<div>
 							<div class="leading-4">
-								<span class="text-base text-gray-900">
+								<span class="text-base text-ink-gray-9">
 									{{ installAnalytics.total_installs }}
 								</span>
 							</div>
@@ -28,11 +28,11 @@
 				</div>
 
 				<div class="border-b border-r p-5 lg:border-b-0">
-					<div class="text-base text-gray-700">Weekly Installs</div>
+					<div class="text-base text-ink-gray-7">Weekly Installs</div>
 					<div class="mt-2 flex items-start justify-between">
 						<div>
 							<div class="leading-4">
-								<span class="text-base text-gray-900">
+								<span class="text-base text-ink-gray-9">
 									{{ installAnalytics.installs_last_week }}
 								</span>
 							</div>
@@ -41,11 +41,11 @@
 				</div>
 
 				<div class="border-b border-r p-5 lg:border-b-0">
-					<div class="text-base text-gray-700">Active Sites</div>
+					<div class="text-base text-ink-gray-7">Active Sites</div>
 					<div class="mt-2 flex items-start justify-between">
 						<div>
 							<div class="leading-4">
-								<span class="text-base text-gray-900">
+								<span class="text-base text-ink-gray-9">
 									{{ installAnalytics.installs_active_sites }}
 								</span>
 							</div>
@@ -54,11 +54,11 @@
 				</div>
 
 				<div class="border-b border-r p-5 lg:border-b-0">
-					<div class="text-base text-gray-700">Active Benches</div>
+					<div class="text-base text-ink-gray-7">Active Benches</div>
 					<div class="mt-2 flex items-start justify-between">
 						<div>
 							<div class="leading-4">
-								<span class="text-base text-gray-900">
+								<span class="text-base text-ink-gray-9">
 									{{ installAnalytics.installs_active_benches }}
 								</span>
 							</div>
@@ -67,11 +67,11 @@
 				</div>
 
 				<div class="border-b border-r p-5 lg:border-b-0">
-					<div class="text-base text-gray-700">Total Earnings</div>
+					<div class="text-base text-ink-gray-7">Total Earnings</div>
 					<div class="mt-2 flex items-start justify-between">
 						<div>
 							<div class="leading-4">
-								<span class="text-base text-gray-900">
+								<span class="text-base text-ink-gray-9">
 									{{ $format.userCurrency(totalEarnings) }}
 								</span>
 							</div>
diff --git a/dashboard/src/components/marketplace/NewMarketplaceAppDialog.vue b/dashboard/src/components/marketplace/NewMarketplaceAppDialog.vue
index 01848f8bff2..a7d4b1cf9f3 100644
--- a/dashboard/src/components/marketplace/NewMarketplaceAppDialog.vue
+++ b/dashboard/src/components/marketplace/NewMarketplaceAppDialog.vue
@@ -28,14 +28,14 @@
 			<div class="mt-4 space-y-2">
 				<div
 					v-if="$resources.validateApp.loading && !appValidated"
-					class="flex text-base text-gray-700"
+					class="flex text-base text-ink-gray-7"
 				>
 					<LoadingIndicator class="mr-2 w-4" />
 					Validating app...
 				</div>
 				<div
 					v-if="appValidated"
-					class="flex flex-col text-base text-gray-700 space-y-2"
+					class="flex flex-col text-base text-ink-gray-7 space-y-2"
 				>
 					<div v-if="this.app.is_public" class="flex items-center gap-2">
 						<FeatherIcon
@@ -62,7 +62,7 @@
 						</div>
 						<Link
 							href="https://frappecloud.com/marketplace/terms"
-							class="font-medium text-blue-600 hover:underline"
+							class="font-medium text-ink-blue-2 hover:underline"
 						>
 							Read our Terms and Policy
 						</Link>
diff --git a/dashboard/src/components/marketplace/PlansDialog.vue b/dashboard/src/components/marketplace/PlansDialog.vue
index 7ebbb75b11e..7e3df67104b 100644
--- a/dashboard/src/components/marketplace/PlansDialog.vue
+++ b/dashboard/src/components/marketplace/PlansDialog.vue
@@ -6,10 +6,10 @@
 					<input
 						type="checkbox"
 						id="enabled-checkbox"
-						class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+						class="h-4 w-4 rounded border-gray-300 text-ink-blue-2 focus:ring-blue-500"
 						v-model="currentEditingPlan.enabled"
 					/>
-					<label for="enabled-checkbox" class="ml-1 text-sm text-gray-900">
+					<label for="enabled-checkbox" class="ml-1 text-sm text-ink-gray-9">
 						Enabled
 					</label>
 				</div>
@@ -41,7 +41,7 @@
 							class="mb-3.5 flex w-full items-stretch"
 						>
 							<div
-								class="mr-3 flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 text-xs"
+								class="mr-3 flex h-6 w-6 items-center justify-center rounded-full bg-surface-gray-2 text-xs"
 							>
 								{{ idx + 1 }}
 							</div>
diff --git a/dashboard/src/components/navigation/sidebar/Item.vue b/dashboard/src/components/navigation/sidebar/Item.vue
index 07ed1a1d52f..0d91690860e 100644
--- a/dashboard/src/components/navigation/sidebar/Item.vue
+++ b/dashboard/src/components/navigation/sidebar/Item.vue
@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 let props = defineProps({
 	item: {
 		type: Object,
@@ -9,11 +9,18 @@ let props = defineProps({
 
 <template>
 	<router-link custom v-slot="{ href, navigate }" :to="item.route">
-		<a :href="href" @click="navigate" class="flex items-center rounded px-2 py-1 text-ink-gray-6 transition" :class="[
-			item.isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100',
-			item.disabled ? 'pointer-events-none opacity-50' : '',
-			$attrs.class,
-		]">
+		<a
+			:href="href"
+			@click="navigate"
+			class="flex items-center rounded px-2 py-1 text-ink-gray-6"
+			:class="[
+				item.isActive
+					? 'bg-surface-white shadow-sm'
+					: 'hover:bg-surface-gray-3 dark:hover:bg-surface-gray-1',
+				item.disabled ? 'pointer-events-none opacity-50' : '',
+				$attrs.class,
+			]"
+		>
 			<div class="flex w-full items-center space-x-2">
 				<span class="grid h-5 w-6 place-items-center">
 					<component :is="item.icon" class="h-4 w-4 text-ink-gray-6" />
diff --git a/dashboard/src/components/navigation/sidebar/ItemGroup.vue b/dashboard/src/components/navigation/sidebar/ItemGroup.vue
index b12e52a640b..0443fe41f99 100644
--- a/dashboard/src/components/navigation/sidebar/ItemGroup.vue
+++ b/dashboard/src/components/navigation/sidebar/ItemGroup.vue
@@ -28,7 +28,7 @@ watch(
 <template>
 	<div
 		@click="toggle"
-		class="mt-0.5 flex cursor-pointer select-none items-center rounded px-2 py-1 text-ink-gray-6 transition hover:bg-gray-100"
+		class="mt-0.5 flex cursor-pointer select-none items-center rounded px-2 py-1 text-ink-gray-6 transition hover:bg-surface-gray-3 dark:hover:bg-surface-gray-1"
 		:class="[
 			item.disabled ? 'pointer-events-none opacity-50' : '',
 			$attrs.class,
@@ -42,7 +42,7 @@ watch(
 			<component :is="item.badge" />
 			<span class="!ml-auto">
 				<LucideChevronRight
-					class="size-4 text-gray-500 transition-transform duration-200"
+					class="size-4 text-ink-gray-5 transition-transform duration-200"
 					:class="{ 'rotate-90': isOpened }"
 				/>
 			</span>
diff --git a/dashboard/src/components/navigation/sidebar/NavList.vue b/dashboard/src/components/navigation/sidebar/NavList.vue
index 1f826081a8d..6bfee92a3f2 100644
--- a/dashboard/src/components/navigation/sidebar/NavList.vue
+++ b/dashboard/src/components/navigation/sidebar/NavList.vue
@@ -62,7 +62,7 @@ const navigation = computed(() => {
 					return h(
 						'span',
 						{
-							class: '!ml-auto px-1.5 py-0.5 text-xs text-gray-600',
+							class: '!ml-auto px-1.5 py-0.5 text-xs text-ink-gray-6',
 						},
 						unreadNotificationsCount.data > 99
 							? '99+'
diff --git a/dashboard/src/components/navigation/sidebar/Sidebar.vue b/dashboard/src/components/navigation/sidebar/Sidebar.vue
index 1cb4f6f3b72..5b64bf285b0 100644
--- a/dashboard/src/components/navigation/sidebar/Sidebar.vue
+++ b/dashboard/src/components/navigation/sidebar/Sidebar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Tooltip } from 'frappe-ui';
 import LucideChevronDown from '~icons/lucide/chevron-down';
+import LucideMoon from '~icons/lucide/moon';
 import { ref, defineAsyncComponent } from 'vue';
 
 import Item from './Item.vue';
@@ -9,6 +10,7 @@ import ItemGroup from './ItemGroup.vue';
 
 import { getTeam } from '@/data/team';
 import { session } from '@/data/session';
+import { setTheme } from '@/components/utils/UseTheme';
 
 const $team = getTeam();
 const $session = session;
@@ -30,7 +32,7 @@ const feedback = () => {
 
 <template>
 	<div
-		class="relative flex min-h-screen w-[220px] flex-col border-r bg-gray-50"
+		class="relative flex min-h-screen w-[220px] flex-col border-r bg-surface-gray-1 dark:bg-surface-white"
 	>
 		<div class="p-2">
 			<Dropdown
@@ -52,6 +54,28 @@ const feedback = () => {
 						icon: 'file-text',
 						onClick: feedback,
 					},
+					{
+						label: 'Theme',
+						icon: LucideMoon,
+						submenu: [
+							{
+								label: 'Light Mode',
+								icon: 'sun',
+								onClick: () => setTheme('light'),
+							},
+							{
+								label: 'Dark Mode',
+								icon: 'moon',
+								onClick: () => setTheme('dark'),
+							},
+							{
+								label: 'System Default',
+								icon: 'monitor',
+								onClick: () => setTheme('system'),
+							},
+						],
+					},
+
 					{
 						label: 'Logout',
 						icon: 'log-out',
@@ -62,16 +86,20 @@ const feedback = () => {
 				<template v-slot="{ open }">
 					<button
 						class="flex w-[204px] items-center rounded-md px-2 py-2 text-left"
-						:class="open ? 'bg-white shadow-sm' : 'hover:bg-gray-200'"
+						:class="
+							open
+								? 'bg-surface-white shadow-sm'
+								: 'hover:bg-surface-gray-3 dark:hover:bg-surface-gray-1'
+						"
 					>
 						<FCLogo class="mb-1 h-8 w-8 shrink-0 rounded" />
 						<div class="ml-2 flex flex-1 flex-col overflow-hidden">
-							<div class="text-base font-medium leading-none text-gray-900">
+							<div class="text-base font-medium leading-none text-ink-gray-9">
 								Frappe Cloud
 							</div>
 							<Tooltip :text="$team?.doc?.user || null">
 								<div
-									class="mt-1 hidden overflow-hidden text-ellipsis whitespace-nowrap pb-1 text-sm leading-none text-gray-700 sm:inline"
+									class="mt-1 hidden overflow-hidden text-ellipsis whitespace-nowrap pb-1 text-sm leading-none text-ink-gray-7 sm:inline"
 								>
 									{{ $team?.get.loading ? 'Loading...' : $team?.doc?.user }}
 								</div>
diff --git a/dashboard/src/components/partners/BuyPartnerCreditsRazorpay.vue b/dashboard/src/components/partners/BuyPartnerCreditsRazorpay.vue
index 343e852caa1..8b4f83d2d1d 100644
--- a/dashboard/src/components/partners/BuyPartnerCreditsRazorpay.vue
+++ b/dashboard/src/components/partners/BuyPartnerCreditsRazorpay.vue
@@ -2,7 +2,7 @@
 	<div>
 		<span
 			v-if="team.doc.currency === 'INR' || showPaypal"
-			class="mt-2.5 inline-flex gap-2 text-base text-gray-700"
+			class="mt-2.5 inline-flex gap-2 text-base text-ink-gray-7"
 		>
 			<FeatherIcon name="info" class="my-1 h-4" />
 			<span class="leading-5" v-if="team.doc.currency === 'INR'">
diff --git a/dashboard/src/components/partners/BuyPartnerCreditsStripe.vue b/dashboard/src/components/partners/BuyPartnerCreditsStripe.vue
index a019c7bbfd3..953d586b755 100644
--- a/dashboard/src/components/partners/BuyPartnerCreditsStripe.vue
+++ b/dashboard/src/components/partners/BuyPartnerCreditsStripe.vue
@@ -7,7 +7,7 @@
 				'mt-4': step == 'Add Card Details',
 			}"
 		>
-			<span class="text-sm leading-4 text-gray-700">
+			<span class="text-sm leading-4 text-ink-gray-7">
 				Credit or Debit Card
 			</span>
 			<div class="form-input mt-2 block w-full pl-3" ref="cardElementRef"></div>
@@ -15,7 +15,7 @@
 		</label>
 
 		<div v-if="step == 'Setting up Stripe'" class="mt-8 flex justify-center">
-			<Spinner class="h-4 w-4 text-gray-700" />
+			<Spinner class="h-4 w-4 text-ink-gray-7" />
 		</div>
 		<ErrorMessage
 			class="mt-2"
@@ -129,7 +129,7 @@ const createPaymentIntent = createResource({
 			style: style,
 			classes: {
 				complete: '',
-				focus: 'bg-gray-100',
+				focus: 'bg-surface-gray-2',
 			},
 		});
 
diff --git a/dashboard/src/components/partners/InvoiceDetail.vue b/dashboard/src/components/partners/InvoiceDetail.vue
index 0ebe6686e99..ba53bfcba54 100644
--- a/dashboard/src/components/partners/InvoiceDetail.vue
+++ b/dashboard/src/components/partners/InvoiceDetail.vue
@@ -2,10 +2,10 @@
 	<div>
 		<div class="overflow-x-auto">
 			<table
-				class="text w-full border-separate border-spacing-y-2 text-base font-normal text-gray-900"
+				class="text w-full border-separate border-spacing-y-2 text-base font-normal text-ink-gray-9"
 			>
-				<thead class="bg-gray-100">
-					<tr class="text-gray-600">
+				<thead class="bg-surface-gray-2">
+					<tr class="text-ink-gray-6">
 						<th class="rounded-l p-2 text-left font-normal">Resource</th>
 						<th class="rounded-l p-2 text-left font-normal">Description</th>
 						<th class="whitespace-nowrap p-2 text-right font-normal">Rate</th>
@@ -17,7 +17,7 @@
 				</thead>
 				<tbody>
 					<template v-for="(items, type) in groupedLineItems" :key="type">
-						<tr class="mt-1 bg-gray-50">
+						<tr class="mt-1 bg-surface-gray-1">
 							<td colspan="100" class="rounded p-2 text-base font-medium">
 								{{ type }}
 							</td>
@@ -28,7 +28,7 @@
 							</td>
 							<td class="py-1 pl-2 pr-2">
 								{{ row.document_name }}
-								<span v-if="row.plan" class="text-gray-700">
+								<span v-if="row.plan" class="text-ink-gray-7">
 									({{ formatPlan(row.plan) }}/mo)
 								</span>
 							</td>
diff --git a/dashboard/src/components/partners/LinkCertificate.vue b/dashboard/src/components/partners/LinkCertificate.vue
index ddcfed047ea..4393fd31c0c 100644
--- a/dashboard/src/components/partners/LinkCertificate.vue
+++ b/dashboard/src/components/partners/LinkCertificate.vue
@@ -25,7 +25,7 @@
 					@input="emailChange"
 				/>
 				<div class="mt-2">
-					<div v-if="certExist" class="text-sm text-green-600" role="alert">
+					<div v-if="certExist" class="text-sm text-ink-green-3" role="alert">
 						Found {{ certCount }} certificates with email {{ userEmail }} of
 						{{
 							courseTypes.find((course) => course.value === certificateType)
diff --git a/dashboard/src/components/partners/PartnerApprovalRequests.vue b/dashboard/src/components/partners/PartnerApprovalRequests.vue
index 9db2749a78e..17dd9f92d45 100644
--- a/dashboard/src/components/partners/PartnerApprovalRequests.vue
+++ b/dashboard/src/components/partners/PartnerApprovalRequests.vue
@@ -68,7 +68,7 @@ export default {
 									() =>
 										h(FeatherIcon, {
 											name: 'check-circle',
-											class: 'h-4 w-4 text-green-600',
+											class: 'h-4 w-4 text-ink-green-3',
 										}),
 								);
 							} else {
@@ -79,7 +79,7 @@ export default {
 									},
 									() =>
 										h(Clock, {
-											class: 'h-4 w-4 text-yellow-500',
+											class: 'h-4 w-4 text-ink-amber-2',
 										}),
 								);
 							}
@@ -101,7 +101,7 @@ export default {
 									() =>
 										h(FeatherIcon, {
 											name: 'check-circle',
-											class: 'h-4 w-4 text-green-600',
+											class: 'h-4 w-4 text-ink-green-3',
 										}),
 								);
 							} else {
@@ -112,7 +112,7 @@ export default {
 									},
 									() =>
 										h(Clock, {
-											class: 'h-4 w-4 text-yellow-500',
+											class: 'h-4 w-4 text-ink-amber-2',
 										}),
 								);
 							}
diff --git a/dashboard/src/components/partners/PartnerCertificates.vue b/dashboard/src/components/partners/PartnerCertificates.vue
index 01f04e3fb1f..9b10ecd1035 100644
--- a/dashboard/src/components/partners/PartnerCertificates.vue
+++ b/dashboard/src/components/partners/PartnerCertificates.vue
@@ -98,7 +98,7 @@ export default {
 									() =>
 										h(FeatherIcon, {
 											name: 'check-circle',
-											class: 'h-4 w-4 text-green-600',
+											class: 'h-4 w-4 text-ink-green-3',
 										}),
 								);
 							}
diff --git a/dashboard/src/components/partners/PartnerContributionList.vue b/dashboard/src/components/partners/PartnerContributionList.vue
index a490e99ea89..95d4b7cd014 100644
--- a/dashboard/src/components/partners/PartnerContributionList.vue
+++ b/dashboard/src/components/partners/PartnerContributionList.vue
@@ -12,7 +12,7 @@
 				<template v-if="showInvoice">
 					<div
 						v-if="showInvoice.status === 'Empty'"
-						class="text-base text-gray-600"
+						class="text-base text-ink-gray-6"
 					>
 						Nothing to show
 					</div>
diff --git a/dashboard/src/components/partners/PartnerCreditsForm.vue b/dashboard/src/components/partners/PartnerCreditsForm.vue
index bef6f95bdbf..c601b6ee03c 100644
--- a/dashboard/src/components/partners/PartnerCreditsForm.vue
+++ b/dashboard/src/components/partners/PartnerCreditsForm.vue
@@ -12,7 +12,7 @@
 				:max="maximumAmount"
 			>
 				<template #prefix>
-					<div class="grid w-4 place-items-center text-sm text-gray-700">
+					<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 						{{ team.doc.currency === 'INR' ? '₹' : '$' }}
 					</div>
 				</template>
@@ -29,7 +29,7 @@
 				type="number"
 			>
 				<template #prefix>
-					<div class="grid w-4 place-items-center text-sm text-gray-700">
+					<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 						{{ team.doc.currency === 'INR' ? '₹' : '$' }}
 					</div>
 				</template>
@@ -38,7 +38,7 @@
 
 		<!-- Payment Gateway -->
 		<div class="mt-4">
-			<div class="text-xs text-gray-600">Select Payment Gateway</div>
+			<div class="text-xs text-ink-gray-6">Select Payment Gateway</div>
 			<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
 				<Button
 					size="lg"
diff --git a/dashboard/src/components/partners/PartnerCustomers.vue b/dashboard/src/components/partners/PartnerCustomers.vue
index ad86fa0db09..7fe24aa1503 100644
--- a/dashboard/src/components/partners/PartnerCustomers.vue
+++ b/dashboard/src/components/partners/PartnerCustomers.vue
@@ -12,7 +12,7 @@
 				<template v-if="showInvoice">
 					<div
 						v-if="showInvoice.status === 'Empty'"
-						class="text-base text-gray-600"
+						class="text-base text-ink-gray-6"
 					>
 						Nothing to show
 					</div>
@@ -64,7 +64,7 @@
 					{{ formatCurrency(amount) }} credits have been transferred to
 					<strong>{{ customerTeam.billing_name }}</strong>
 				</p>
-				<span class="text-base font-medium text-gray-700"
+				<span class="text-base font-medium text-ink-gray-7"
 					>Credits available: {{ creditBalance() }}</span
 				>
 			</template>
diff --git a/dashboard/src/components/partners/PartnerLeadOverview.vue b/dashboard/src/components/partners/PartnerLeadOverview.vue
index d806ffb43d4..3f6361f6a60 100644
--- a/dashboard/src/components/partners/PartnerLeadOverview.vue
+++ b/dashboard/src/components/partners/PartnerLeadOverview.vue
@@ -37,7 +37,7 @@
 						</Dropdown>
 					</div>
 				</div>
-				<div class="rounded-lg text-base text-gray-900 border">
+				<div class="rounded-lg text-base text-ink-gray-9 border">
 					<div class="p-4">
 						<div class="flex items-center justify-between pb-2">
 							<div class="font-semibold text-xl">Company Information</div>
@@ -52,11 +52,11 @@
 								Edit
 							</Button>
 						</div>
-						<div class="my-1 h-px bg-gray-100" />
+						<div class="my-1 h-px bg-surface-gray-2" />
 						<div class="pt-2">
 							<div class="grid grid-cols-2 gap-4">
 								<div v-for="item in company_info" class="flex-1">
-									<div class="text-sm text-gray-600">
+									<div class="text-sm text-ink-gray-6">
 										{{ item.label }}
 									</div>
 									<div
@@ -79,16 +79,16 @@
 					</div>
 				</div>
 
-				<div class="rounded-lg text-base text-gray-900 border">
+				<div class="rounded-lg text-base text-ink-gray-9 border">
 					<div class="p-4">
 						<div class="flex items-center justify-between pb-2">
 							<div class="font-semibold text-xl">Contact Info</div>
 						</div>
-						<div class="my-1 h-px bg-gray-100" />
+						<div class="my-1 h-px bg-surface-gray-2" />
 						<div class="pt-2">
 							<div class="grid grid-cols-2 gap-4">
 								<div v-for="item in contact_info" class="flex-1">
-									<div class="text-sm text-gray-600">
+									<div class="text-sm text-ink-gray-6">
 										{{ item.label }}
 									</div>
 									<div class="text-lg font-medium py-2">
@@ -100,16 +100,16 @@
 					</div>
 				</div>
 
-				<div class="rounded-lg text-base text-gray-900 border">
+				<div class="rounded-lg text-base text-ink-gray-9 border">
 					<div class="p-4">
 						<div class="flex items-center justify-between pb-2">
 							<div class="font-semibold text-xl">Deal Info</div>
 						</div>
-						<div class="my-1 h-px bg-gray-100" />
+						<div class="my-1 h-px bg-surface-gray-2" />
 						<div class="pt-2">
 							<div class="grid grid-cols-2 gap-4">
 								<div v-for="item in deal_info" class="flex-1">
-									<div class="text-sm text-gray-600">
+									<div class="text-sm text-ink-gray-6">
 										{{ item.label }}
 									</div>
 									<div v-if="item.label === 'Probability'" class="py-1">
@@ -125,9 +125,9 @@
 									</div>
 								</div>
 							</div>
-							<!-- <div class="my-1 h-px bg-gray-100" /> -->
+							<!-- <div class="my-1 h-px bg-surface-gray-2" /> -->
 							<div class="pt-2">
-								<div class="text-sm text-gray-600">Requirement</div>
+								<div class="text-sm text-ink-gray-6">Requirement</div>
 								<div class="text-base leading-6 font-normal py-2">
 									<div v-html="lead?.requirement"></div>
 								</div>
@@ -183,9 +183,9 @@
 		</div>
 		<div
 			v-else
-			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
+			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-ink-gray-6"
 		>
-			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
+			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-ink-red-4" />
 			<ErrorMessage message="You aren't permitted to view the this page" />
 		</div>
 	</div>
diff --git a/dashboard/src/components/partners/PartnerLeads.vue b/dashboard/src/components/partners/PartnerLeads.vue
index 3c5c5b60b42..3d00be21c24 100644
--- a/dashboard/src/components/partners/PartnerLeads.vue
+++ b/dashboard/src/components/partners/PartnerLeads.vue
@@ -37,7 +37,7 @@
 		<div v-if="partnerLeadsList">
 			<ObjectList :options="partnerLeadsList" />
 		</div>
-		<div v-else class="text-base text-gray-600">
+		<div v-else class="text-base text-ink-gray-6">
 			No partner leads available.
 		</div>
 	</div>
diff --git a/dashboard/src/components/partners/PartnerLocalPaymentSetup.vue b/dashboard/src/components/partners/PartnerLocalPaymentSetup.vue
index e4d2c3e99f7..46d392d33b3 100644
--- a/dashboard/src/components/partners/PartnerLocalPaymentSetup.vue
+++ b/dashboard/src/components/partners/PartnerLocalPaymentSetup.vue
@@ -6,12 +6,12 @@
 				v-if="$team.doc.country === 'Kenya'"
 				class="flex flex-col gap-2 rounded-md border p-4 shadow"
 			>
-				<div class="flex justify-between items-center text-sm text-gray-700">
+				<div class="flex justify-between items-center text-sm text-ink-gray-7">
 					<div>M-Pesa Express Credentials</div>
 					<Button @click="showAddMpesaDialog = true">Edit</Button>
 				</div>
 				<div class="overflow-hidden text-ellipsis text-base font-medium">
-					<span class="font-normal text-gray-600">{{
+					<span class="font-normal text-ink-gray-6">{{
 						mpesaSetupId || 'Not Set'
 					}}</span>
 				</div>
@@ -25,7 +25,7 @@
 
 			<!-- Add Payment Gateway -->
 			<div class="flex flex-col gap-2 rounded-md border p-4 shadow">
-				<div class="flex justify-between items-center text-sm text-gray-700">
+				<div class="flex justify-between items-center text-sm text-ink-gray-7">
 					<div>Payment Gateway</div>
 					<Button
 						@click="showAddPaymentGatewayDialog = true"
@@ -34,7 +34,7 @@
 					>
 				</div>
 				<div class="overflow-hidden text-ellipsis text-base font-medium">
-					<span class="font-normal text-gray-600">{{
+					<span class="font-normal text-ink-gray-6">{{
 						paymentGatewayID || 'Not set'
 					}}</span>
 				</div>
@@ -48,12 +48,12 @@
 
 			<!--Submit Payment Transaction To Frappe-->
 			<div class="flex flex-col gap-2 rounded-md border p-4 shadow">
-				<div class="flex justify-between items-center text-sm text-gray-700">
+				<div class="flex justify-between items-center text-sm text-ink-gray-7">
 					<div>Partner Payment Payout</div>
 					<Button @click="showPartnerPaymentPayout = true">Edit</Button>
 				</div>
 				<div class="overflow-hidden text-ellipsis text-base font-medium">
-					<span class="font-normal text-gray-600">Not set</span>
+					<span class="font-normal text-ink-gray-6">Not set</span>
 				</div>
 			</div>
 			<!--End of payment transaction-->
diff --git a/dashboard/src/components/partners/PartnerOverview.vue b/dashboard/src/components/partners/PartnerOverview.vue
index 34a03455c25..45d4a3710a5 100644
--- a/dashboard/src/components/partners/PartnerOverview.vue
+++ b/dashboard/src/components/partners/PartnerOverview.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col gap-5 overflow-y-auto px-60 py-6">
 		<div class="flex flex-col">
-			<div class="text-gray-500">Welcome back!</div>
+			<div class="text-ink-gray-5">Welcome back!</div>
 			<div class="flex items-center gap-3">
 				<h1 class="text-3xl font-semibold">
 					{{ partnerDetails.data?.company_name }}
@@ -14,11 +14,11 @@
 			</div>
 		</div>
 
-		<div class="rounded-lg text-base text-gray-900 border">
+		<div class="rounded-lg text-base text-ink-gray-9 border">
 			<div class="flex flex-col gap-2.5 p-4">
 				<div class="flex">
 					<div class="flex items-center gap-0.5">
-						<FeatherIcon name="award" class="h-5 text-gray-700" />
+						<FeatherIcon name="award" class="h-5 text-ink-gray-7" />
 						<h3 class="text-xl font-semibold">
 							{{ partnerDetails.data?.partner_type }} Tier
 						</h3>
@@ -32,7 +32,7 @@
 						:hint="false"
 					>
 						<template #hint>
-							<span class="text-base font-medium text-gray-500">
+							<span class="text-base font-medium text-ink-gray-5">
 								{{ formatNumber(nextTierTarget) }} to reach {{ nextTier }}
 							</span>
 						</template>
@@ -42,7 +42,7 @@
 				<div class="flex justify-between gap-4">
 					<div class="flex-1">
 						<div class="flex items-center justify-between">
-							<div class="text-sm text-gray-600">
+							<div class="text-sm text-ink-gray-6">
 								Current Month Contribution
 							</div>
 							<Button
@@ -53,7 +53,7 @@
 						<div class="text-xl font-semibold py-2">
 							{{ formatCurrency(currentMonthContribution.data) || '0.0' }}
 						</div>
-						<div class="text-sm text-gray-600">
+						<div class="text-sm text-ink-gray-6">
 							<span
 								>Previous Month:
 								{{ formatCurrency(prevMonthContribution.data) || '0.0' }}</span
@@ -63,7 +63,7 @@
 					<div class="mx-1 w-px border-r" />
 					<div class="flex-1">
 						<div class="flex items-center justify-between">
-							<div class="text-sm text-gray-600">Certified Members</div>
+							<div class="text-sm text-ink-gray-6">Certified Members</div>
 							<Button label="View" @click="routeToCertification()" />
 						</div>
 						<div class="flex items-center">
@@ -79,25 +79,25 @@
 		</div>
 
 		<div class="flex justify-between gap-4">
-			<div class="rounded-lg text-base flex-1 text-gray-900 p-4 border">
+			<div class="rounded-lg text-base flex-1 text-ink-gray-9 p-4 border">
 				<div class="flex h-full flex-col justify-between gap-2">
 					<div class="flex">
 						<h3 class="font-semibold text-lg">Partner Referral Code</h3>
 					</div>
 					<ClickToCopyField :textContent="team.doc?.partner_referral_code" />
-					<span class="text-sm text-gray-600"
+					<span class="text-sm text-ink-gray-6"
 						>Share code with customers to link with your account.</span
 					>
 				</div>
 			</div>
-			<div class="rounded-lg text-base flex-1 text-gray-900 p-4 border">
+			<div class="rounded-lg text-base flex-1 text-ink-gray-9 p-4 border">
 				<div class="flex h-full flex-col justify-between">
 					<div class="flex">
 						<h3 class="font-semibold text-lg">Renewal Details</h3>
 					</div>
 					<div class="flex items-center justify-between">
 						<div class="flex">
-							<span class="text-base font-medium text-gray-700">
+							<span class="text-base font-medium text-ink-gray-7">
 								{{ formatDate(partnerDetails.data?.end_date) }}
 							</span>
 						</div>
@@ -110,7 +110,7 @@
 							/>
 						</div>
 					</div>
-					<span class="text-sm text-gray-600"
+					<span class="text-sm text-ink-gray-6"
 						>Renewal in {{ daysUntilRenewal }} days</span
 					>
 				</div>
@@ -164,7 +164,7 @@
 			}"
 		>
 			<template #body-content>
-				<p class="text-base leading-6 text-gray-700">
+				<p class="text-base leading-6 text-ink-gray-7">
 					By clicking "I Agree", you confirm that you have read and accepted the
 					terms and conditions of the
 					<a
diff --git a/dashboard/src/components/partners/PartnerWebsiteDetails.vue b/dashboard/src/components/partners/PartnerWebsiteDetails.vue
index 730965007c7..f36135db9e3 100644
--- a/dashboard/src/components/partners/PartnerWebsiteDetails.vue
+++ b/dashboard/src/components/partners/PartnerWebsiteDetails.vue
@@ -1,51 +1,51 @@
 <template>
 	<div class="flex flex-col gap-5 overflow-y-auto px-60 py-6 max-h-screen">
-		<div class="rounded-lg text-base text-gray-900 border">
+		<div class="rounded-lg text-base text-ink-gray-9 border">
 			<div class="flex h-full flex-col justify-between p-4 gap-2">
 				<div class="flex justify-between items-center">
 					<h3 class="font-semibold text-lg">Website Info</h3>
 					<Button label="Edit" @click="showUpdateWebsiteInfo = true" />
 				</div>
-				<div class="my-1 h-px bg-gray-100" />
+				<div class="my-1 h-px bg-surface-gray-2" />
 				<div class="flex flex-col gap-6">
 					<div class="flex">
 						<div class="flex-1 flex-col">
-							<div class="text-sm text-gray-600">Partner Website</div>
-							<div class="text-base font-medium text-gray-700 py-2">
+							<div class="text-sm text-ink-gray-6">Partner Website</div>
+							<div class="text-base font-medium text-ink-gray-7 py-2">
 								{{ partnerDetails.data?.partner_website || '' }}
 							</div>
 						</div>
 						<div class="flex-1 flex-col">
-							<div class="text-sm text-gray-600">Contact</div>
-							<div class="text-base font-medium text-gray-700 py-2">
+							<div class="text-sm text-ink-gray-6">Contact</div>
+							<div class="text-base font-medium text-ink-gray-7 py-2">
 								{{ partnerDetails.data?.phone_number || '' }}
 							</div>
 						</div>
 						<div class="flex-1 flex-col">
-							<div class="text-sm text-gray-600">Journey Blog Link</div>
-							<div class="text-base font-medium text-gray-700 py-2">
+							<div class="text-sm text-ink-gray-6">Journey Blog Link</div>
+							<div class="text-base font-medium text-ink-gray-7 py-2">
 								{{ partnerDetails.data?.custom_journey_blog_link || '-' }}
 							</div>
 						</div>
 					</div>
 					<div class="flex">
 						<div class="flex-1 flex-col">
-							<div class="text-sm text-gray-600">Foundation Date</div>
-							<div class="text-base font-medium text-gray-700 py-2">
+							<div class="text-sm text-ink-gray-6">Foundation Date</div>
+							<div class="text-base font-medium text-ink-gray-7 py-2">
 								{{
 									formatDate(partnerDetails.data?.custom_foundation_date) || '-'
 								}}
 							</div>
 						</div>
 						<div class="flex-1 flex-col">
-							<div class="text-sm text-gray-600">Team Size</div>
-							<div class="text-base font-medium text-gray-700 py-2">
+							<div class="text-sm text-ink-gray-6">Team Size</div>
+							<div class="text-base font-medium text-ink-gray-7 py-2">
 								{{ partnerDetails.data?.custom_team_size || '-' }}
 							</div>
 						</div>
 						<div class="flex-1 flex-col">
-							<div class="text-sm text-gray-600">Successfull Projects</div>
-							<div class="text-base font-medium text-gray-700 py-2">
+							<div class="text-sm text-ink-gray-6">Successfull Projects</div>
+							<div class="text-base font-medium text-ink-gray-7 py-2">
 								{{
 									partnerDetails.data?.custom_successful_projects_count || '-'
 								}}
@@ -54,29 +54,29 @@
 					</div>
 					<div class="flex gap-4 pt-4">
 						<div class="flex-1">
-							<div class="text-sm text-gray-600 pb-3">Introduction</div>
-							<div class="text-base leading-6 text-gray-700 py-1">
+							<div class="text-sm text-ink-gray-6 pb-3">Introduction</div>
+							<div class="text-base leading-6 text-ink-gray-7 py-1">
 								<div v-html="partnerDetails.data?.introduction"></div>
 							</div>
 						</div>
 						<div class="flex-1">
-							<div class="text-sm text-gray-600 pb-3">Customers</div>
+							<div class="text-sm text-ink-gray-6 pb-3">Customers</div>
 							<div
 								v-for="customer in customerList.slice(0, 10)"
-								class="text-base text-gray-700 py-1"
+								class="text-base text-ink-gray-7 py-1"
 							>
 								<li>{{ customer }}</li>
 							</div>
 							<div
 								v-if="customerList.length > 10"
-								class="text-sm text-gray-600 py-3"
+								class="text-sm text-ink-gray-6 py-3"
 							>
 								... And many more
 							</div>
 						</div>
 						<div class="flex-1 flex-col">
-							<div class="text-sm text-gray-600">Address</div>
-							<div class="text-base leading-6 text-gray-700 py-2">
+							<div class="text-sm text-ink-gray-6">Address</div>
+							<div class="text-base leading-6 text-ink-gray-7 py-2">
 								<div v-html="partnerDetails.data?.address"></div>
 							</div>
 						</div>
diff --git a/dashboard/src/components/partners/UpdateFollowupDialog.vue b/dashboard/src/components/partners/UpdateFollowupDialog.vue
index 7d032ec98dc..1218cf7f519 100644
--- a/dashboard/src/components/partners/UpdateFollowupDialog.vue
+++ b/dashboard/src/components/partners/UpdateFollowupDialog.vue
@@ -11,7 +11,7 @@
 					<div v-for="field in section.fields" :key="field.name">
 						<div
 							v-if="field.fieldtype === 'Date'"
-							class="text-gray-600 h-1.5 text-xs"
+							class="text-ink-gray-6 h-1.5 text-xs"
 						>
 							{{ field.label }}
 							<DatePicker
diff --git a/dashboard/src/components/server/AutoScaleSteps.vue b/dashboard/src/components/server/AutoScaleSteps.vue
index 1e0f0a528d4..7d32ec05a7a 100644
--- a/dashboard/src/components/server/AutoScaleSteps.vue
+++ b/dashboard/src/components/server/AutoScaleSteps.vue
@@ -9,7 +9,7 @@
 
 		<div class="mt-3">
 			<div class="flex w-full items-center">
-				<h2 class="text-lg font-medium text-gray-900">
+				<h2 class="text-lg font-medium text-ink-gray-9">
 					{{ autoScale.action }}
 				</h2>
 				<Badge class="ml-2" :label="autoScale.status" />
@@ -36,26 +36,26 @@
 			<div>
 				<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creation</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creation</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ $format.date(autoScale.creation, 'lll') }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creator</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creator</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ autoScale.owner }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Start</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Start</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ $format.date(autoScale.start_time, 'lll') }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Duration</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Duration</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{
 								autoScale.duration != null
 									? $format.duration(autoScale.duration)
diff --git a/dashboard/src/components/server/AutoScaleTabs.vue b/dashboard/src/components/server/AutoScaleTabs.vue
index 1410b423571..3768dd1e988 100644
--- a/dashboard/src/components/server/AutoScaleTabs.vue
+++ b/dashboard/src/components/server/AutoScaleTabs.vue
@@ -9,10 +9,10 @@
 			<template v-for="tab in tabs" :key="tab.value">
 				<router-link
 					:to="{ name: tab.value }"
-					class="flex cursor-pointer text-base hover:bg-gray-100"
+					class="flex cursor-pointer text-base hover:bg-surface-gray-2"
 					:class="{
-						'bg-gray-50 text-gray-800': isActiveTab(tab),
-						'text-gray-600': !isActiveTab(tab),
+						'bg-surface-gray-1 text-ink-gray-8': isActiveTab(tab),
+						'text-ink-gray-6': !isActiveTab(tab),
 						'border-b': !$isMobile,
 					}"
 				>
diff --git a/dashboard/src/components/server/AutoscaleScheduleDialog.vue b/dashboard/src/components/server/AutoscaleScheduleDialog.vue
index cf98919d7a0..5e583838b30 100644
--- a/dashboard/src/components/server/AutoscaleScheduleDialog.vue
+++ b/dashboard/src/components/server/AutoscaleScheduleDialog.vue
@@ -53,21 +53,21 @@
 			</div>
 			<div
 				v-else
-				class="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-6 text-center space-y-3"
+				class="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-surface-gray-1 p-6 text-center space-y-3"
 			>
-				<p class="text-gray-900">Autoscale scheduling is unavailable</p>
+				<p class="text-ink-gray-9">Autoscale scheduling is unavailable</p>
 
-				<p class="text-gray-600 max-w-md">
+				<p class="text-ink-gray-6 max-w-md">
 					You can only schedule autoscale records when automatic scaling is not
 					already configured for this server.
 				</p>
 
-				<p class="text-gray-600">
+				<p class="text-ink-gray-6">
 					Please read the
 					<a
 						href="https://docs.frappe.io/cloud/application-server-horizontal-scaling"
 						target="_blank"
-						class="text-gray-900 underline hover:text-gray-700"
+						class="text-ink-gray-9 underline hover:text-ink-gray-7"
 					>
 						documentation
 					</a>
diff --git a/dashboard/src/components/server/CleanupDialog.vue b/dashboard/src/components/server/CleanupDialog.vue
index c0f77b783ad..bd676367165 100644
--- a/dashboard/src/components/server/CleanupDialog.vue
+++ b/dashboard/src/components/server/CleanupDialog.vue
@@ -9,18 +9,18 @@
 		<template #body-content>
 			<div
 				v-if="$resources?.cleanupSpaceEstimation?.loading"
-				class="flex h-80 w-full items-center justify-center gap-2 text-base text-gray-700"
+				class="flex h-80 w-full items-center justify-center gap-2 text-base text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Analyzing ...
 			</div>
 
 			<div
 				v-else-if="$resources?.cleanupSpaceEstimation?.error"
-				class="flex h-80 w-full items-center justify-center text-red-600"
+				class="flex h-80 w-full items-center justify-center text-ink-red-4"
 			>
 				Failed to fetch cleanup data.
 			</div>
-			<div v-else-if="parsedData" class="flex flex-col gap-4 text-gray-800">
+			<div v-else-if="parsedData" class="flex flex-col gap-4 text-ink-gray-8">
 				<AlertBanner
 					title="Force cleanup is only allowed if the total reclaimable space is more than or equal to 500MB."
 					type="info"
diff --git a/dashboard/src/components/server/ConfigureAutomatedScaling.vue b/dashboard/src/components/server/ConfigureAutomatedScaling.vue
index df1c9282008..9d6d5f9b95f 100644
--- a/dashboard/src/components/server/ConfigureAutomatedScaling.vue
+++ b/dashboard/src/components/server/ConfigureAutomatedScaling.vue
@@ -9,7 +9,7 @@
 		<template #body-content>
 			<div
 				v-if="$resources.configuredAutoscales.loading"
-				class="flex w-full items-center justify-center gap-2 py-32 text-gray-700"
+				class="flex w-full items-center justify-center gap-2 py-32 text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Loading
 			</div>
diff --git a/dashboard/src/components/server/DatabaseBinlogsDialog.vue b/dashboard/src/components/server/DatabaseBinlogsDialog.vue
index 8431b767a82..430929949c4 100644
--- a/dashboard/src/components/server/DatabaseBinlogsDialog.vue
+++ b/dashboard/src/components/server/DatabaseBinlogsDialog.vue
@@ -9,7 +9,7 @@
 		<template #body-content>
 			<div
 				v-if="$resources.binlogs.loading"
-				class="flex w-full items-center justify-center gap-2 py-32 text-gray-700"
+				class="flex w-full items-center justify-center gap-2 py-32 text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Loading
 			</div>
@@ -35,10 +35,10 @@
 								100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 							</option>
 						</select>
-						<p class="text-sm text-gray-600">Per Page</p>
+						<p class="text-sm text-ink-gray-6">Per Page</p>
 					</div>
 					<div class="flex flex-shrink-0 items-center gap-2">
-						<p class="tnum text-sm text-gray-600">
+						<p class="tnum text-sm text-ink-gray-6">
 							{{ pageStart }} - {{ pageEnd }} of {{ totalBinlogs }} binlogs
 						</p>
 						<div class="flex gap-2">
@@ -185,7 +185,7 @@ export default {
 					{
 						label: 'Size',
 						fieldname: 'size',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						format(value) {
 							return bytes(value);
 						},
diff --git a/dashboard/src/components/server/DatabaseConfigurationDialog.vue b/dashboard/src/components/server/DatabaseConfigurationDialog.vue
index 8e27c73c017..8bf3b02da1b 100644
--- a/dashboard/src/components/server/DatabaseConfigurationDialog.vue
+++ b/dashboard/src/components/server/DatabaseConfigurationDialog.vue
@@ -9,7 +9,7 @@
 				class="flex h-[200px] w-full items-center justify-center"
 				v-if="this.$resources.mariadbVariables.loading"
 			>
-				<div class="flex flex-row items-center gap-2 text-gray-700">
+				<div class="flex flex-row items-center gap-2 text-ink-gray-7">
 					<Spinner class="w-4" />
 					Loading database configurations
 				</div>
diff --git a/dashboard/src/components/server/OnPremFailoverDialog.vue b/dashboard/src/components/server/OnPremFailoverDialog.vue
index 954dd49b09c..6ee88b82208 100644
--- a/dashboard/src/components/server/OnPremFailoverDialog.vue
+++ b/dashboard/src/components/server/OnPremFailoverDialog.vue
@@ -13,7 +13,7 @@
 					this.$resources?.onPremFailoverConfig?.loading && !initialDataFetched
 				"
 			>
-				<div class="flex flex-row items-center gap-2 text-gray-700">
+				<div class="flex flex-row items-center gap-2 text-ink-gray-7">
 					<Spinner class="w-4" />
 					Loading configuration...
 				</div>
@@ -21,7 +21,9 @@
 			<div v-else>
 				<!-- Status -->
 				<div class="flex flex-row justify-between items-center">
-					<div class="text-base font-medium text-gray-800">Current Status</div>
+					<div class="text-base font-medium text-ink-gray-8">
+						Current Status
+					</div>
 					<Button
 						variant="subtle"
 						theme="red"
@@ -45,15 +47,15 @@
 						<thead class="bg-surface-gray-2">
 							<tr>
 								<th
-									class="px-4 py-2 text-left text-sm font-medium text-gray-700 border-b"
+									class="px-4 py-2 text-left text-sm font-medium text-ink-gray-7 border-b"
 								></th>
 								<th
-									class="px-4 py-2 text-left text-sm font-medium text-gray-700 border-b"
+									class="px-4 py-2 text-left text-sm font-medium text-ink-gray-7 border-b"
 								>
 									App Server
 								</th>
 								<th
-									class="px-4 py-2 text-left text-sm font-medium text-gray-700 border-b"
+									class="px-4 py-2 text-left text-sm font-medium text-ink-gray-7 border-b"
 								>
 									Database Server
 								</th>
@@ -138,7 +140,7 @@
 							@click="toggleSetupGuide"
 						></Button>
 						<p
-							class="cursor-pointer text-gray-700 font-medium"
+							class="cursor-pointer text-ink-gray-7 font-medium"
 							@click="toggleSetupGuide"
 						>
 							On-Prem Server Setup Guide
@@ -150,8 +152,8 @@
 					>
 						<!-- Add SSH Key -->
 						<div class="flex flex-col gap-2">
-							<div class="font-medium text-gray-700">1. Add SSH Keys</div>
-							<div class="text-gray-600">
+							<div class="font-medium text-ink-gray-7">1. Add SSH Keys</div>
+							<div class="text-ink-gray-6">
 								&nbsp;&nbsp;&nbsp;Add the following authorized keys to your
 								on-prem server's
 								<b>/root/.ssh/authorized_keys</b>
@@ -161,7 +163,7 @@
 						</div>
 						<!-- Install necessary tools -->
 						<div class="flex flex-col gap-2">
-							<div class="font-medium text-gray-700">
+							<div class="font-medium text-ink-gray-7">
 								2. Install Necessary Tools
 							</div>
 							<ClickToCopyField
@@ -171,10 +173,10 @@ apt install -y wireguard resolvconf rsync gawk curl wget"
 						</div>
 						<!-- Configure Wireguard -->
 						<div class="flex flex-col gap-2">
-							<div class="font-medium text-gray-700">
+							<div class="font-medium text-ink-gray-7">
 								3. Update Wireguard Configuration
 							</div>
-							<div class="text-gray-600">
+							<div class="text-ink-gray-6">
 								&nbsp;&nbsp;&nbsp;Copy and paste the following config at
 								<b>/etc/wireguard/wg0.conf</b>
 							</div>
@@ -182,7 +184,7 @@ apt install -y wireguard resolvconf rsync gawk curl wget"
 						</div>
 						<!-- Start Wireguard Service -->
 						<div class="flex flex-col gap-2">
-							<div class="font-medium text-gray-700">
+							<div class="font-medium text-ink-gray-7">
 								4. Start Wireguard Service
 							</div>
 							<ClickToCopyField
@@ -191,10 +193,10 @@ apt install -y wireguard resolvconf rsync gawk curl wget"
 						</div>
 						<!-- Trigger Replication Setup -->
 						<div class="flex flex-col gap-2">
-							<div class="font-medium text-gray-700">
+							<div class="font-medium text-ink-gray-7">
 								5. Trigger Replication Setup
 							</div>
-							<div class="text-gray-600">
+							<div class="text-ink-gray-6">
 								&nbsp;&nbsp;&nbsp;Once the above steps are completed, click the
 								button to start the setup.
 							</div>
@@ -228,7 +230,7 @@ apt install -y wireguard resolvconf rsync gawk curl wget"
 
 				<!-- Jobs -->
 				<div
-					class="text-base font-medium text-gray-800 mt-4"
+					class="text-base font-medium text-ink-gray-8 mt-4"
 					v-if="jobs && jobs.length"
 				>
 					Recent Jobs
@@ -254,7 +256,7 @@ apt install -y wireguard resolvconf rsync gawk curl wget"
 									"
 								></Button>
 								<p
-									class="cursor-pointer text-gray-700 font-medium"
+									class="cursor-pointer text-ink-gray-7 font-medium"
 									@click="
 										openedJobSection =
 											openedJobSection === job.name ? null : job.name
@@ -271,20 +273,22 @@ apt install -y wireguard resolvconf rsync gawk curl wget"
 						>
 							<div class="mt-1 mb-1 flex flex-row justify-between w-full px-2">
 								<div>
-									<div class="text-sm font-medium text-gray-500">Start</div>
-									<div class="mt-2 text-sm text-gray-900">
+									<div class="text-sm font-medium text-ink-gray-5">Start</div>
+									<div class="mt-2 text-sm text-ink-gray-9">
 										{{ job.start ? $format.date(job.start, 'lll') : '-' }}
 									</div>
 								</div>
 								<div>
-									<div class="text-sm font-medium text-gray-500">End</div>
-									<div class="mt-2 text-sm text-gray-900">
+									<div class="text-sm font-medium text-ink-gray-5">End</div>
+									<div class="mt-2 text-sm text-ink-gray-9">
 										{{ job.end ? $format.date(job.end, 'lll') : '-' }}
 									</div>
 								</div>
 								<div>
-									<div class="text-sm font-medium text-gray-500">Duration</div>
-									<div class="mt-2 text-sm text-gray-900">
+									<div class="text-sm font-medium text-ink-gray-5">
+										Duration
+									</div>
+									<div class="mt-2 text-sm text-ink-gray-9">
 										{{ job.duration ? humanizeDuration(job.duration) : '-' }}
 									</div>
 								</div>
@@ -308,7 +312,7 @@ apt install -y wireguard resolvconf rsync gawk curl wget"
 </template>
 <style scoped>
 td {
-	@apply px-4 py-2 border-b text-sm text-gray-700;
+	@apply px-4 py-2 border-b text-sm text-ink-gray-7;
 }
 
 tbody tr:last-child td {
@@ -316,7 +320,7 @@ tbody tr:last-child td {
 }
 
 .output-container {
-	@apply rounded border px-2 py-2 text-base text-gray-700;
+	@apply rounded border px-2 py-2 text-base text-ink-gray-7;
 }
 </style>
 <script>
diff --git a/dashboard/src/components/server/SecondaryServerPlanDialog.vue b/dashboard/src/components/server/SecondaryServerPlanDialog.vue
index a104a4fd8b9..017fdc35a0b 100644
--- a/dashboard/src/components/server/SecondaryServerPlanDialog.vue
+++ b/dashboard/src/components/server/SecondaryServerPlanDialog.vue
@@ -32,9 +32,9 @@
 						@click="planType = c.name"
 						:class="[
 							planType === c.name
-								? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-								: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-							'flex w-full items-center rounded border p-3 text-left text-base text-gray-900',
+								? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+								: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+							'flex w-full items-center rounded border p-3 text-left text-base text-ink-gray-9',
 						]"
 					>
 						<div class="flex w-full items-center justify-between space-x-2">
@@ -42,7 +42,7 @@
 								{{ c.name }}
 							</span>
 							<Tooltip :text="c.description">
-								<lucide-info class="h-4 w-4 text-gray-500" />
+								<lucide-info class="h-4 w-4 text-ink-gray-5" />
 							</Tooltip>
 						</div>
 					</button>
diff --git a/dashboard/src/components/server/ServerActionCell.vue b/dashboard/src/components/server/ServerActionCell.vue
index 9c946ed0989..59057c54345 100644
--- a/dashboard/src/components/server/ServerActionCell.vue
+++ b/dashboard/src/components/server/ServerActionCell.vue
@@ -2,7 +2,7 @@
 	<div class="flex items-center justify-between gap-1">
 		<div>
 			<h3 class="text-base font-medium">{{ props.actionLabel }}</h3>
-			<p class="mt-1 text-p-base text-gray-600">{{ props.description }}</p>
+			<p class="mt-1 text-p-base text-ink-gray-6">{{ props.description }}</p>
 		</div>
 		<Button
 			v-if="server?.doc"
@@ -11,7 +11,7 @@
 		>
 			<p
 				:class="
-					group === 'Dangerous Actions' ? 'text-red-600' : 'text-gray-800'
+					group === 'Dangerous Actions' ? 'text-ink-red-4' : 'text-ink-gray-8'
 				"
 			>
 				{{ props.buttonLabel }}
@@ -103,7 +103,7 @@ function onTeardownSecondaryServer() {
 			while it is being removed.
 		</p>
 
-		<div class="mt-3 rounded-md bg-gray-50 border border-gray-200 p-3 text-sm">
+		<div class="mt-3 rounded-md bg-surface-gray-1 border border-gray-200 p-3 text-sm">
 			<div class="p-2">
 				<p>
 					This action <strong>archives the secondary server instance and fully disables auto-scaling</strong> until a new secondary server is set up.
@@ -164,7 +164,7 @@ function onSetupSecondaryServer() {
 			number and size of the benches on the server.
 		</p>
 
-		<div class="mt-3 rounded-md bg-gray-50 border border-gray-200 text-sm">
+		<div class="mt-3 rounded-md bg-surface-gray-1 border border-gray-200 text-sm">
 			<div class="p-2">
 				<p>
 					Select a <strong>secondary server plan</strong> — this is the plan the secondary server will run on.  
diff --git a/dashboard/src/components/server/ServerCharts.vue b/dashboard/src/components/server/ServerCharts.vue
index 61a4a5f1fa3..78c0906ca7b 100644
--- a/dashboard/src/components/server/ServerCharts.vue
+++ b/dashboard/src/components/server/ServerCharts.vue
@@ -161,7 +161,7 @@
 		>
 			<h2 class="text-lg font-semibold">Advanced Analytics</h2>
 			<FeatherIcon
-				class="h-5 w-5 text-gray-500 hover:text-gray-700"
+				class="h-5 w-5 text-ink-gray-5 hover:text-ink-gray-7"
 				:name="showAdvancedAnalytics ? 'chevron-down' : 'chevron-right'"
 			/>
 		</div>
@@ -343,7 +343,7 @@
 				/>
 				<template #action>
 					<router-link
-						class="text-base text-gray-600 hover:text-gray-700"
+						class="text-base text-ink-gray-6 hover:text-ink-gray-7"
 						:to="{
 							name: 'Server Detail Actions',
 							params: { name: this.serverName },
@@ -372,7 +372,7 @@
 				/>
 				<template #action>
 					<router-link
-						class="text-base text-gray-600 hover:text-gray-700"
+						class="text-base text-ink-gray-6 hover:text-ink-gray-7"
 						:to="{
 							name: 'Server Detail Actions',
 							params: { name: this.serverName },
diff --git a/dashboard/src/components/server/ServerLoadAverage.vue b/dashboard/src/components/server/ServerLoadAverage.vue
index a6e760b1c9e..06575b17b56 100644
--- a/dashboard/src/components/server/ServerLoadAverage.vue
+++ b/dashboard/src/components/server/ServerLoadAverage.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="rounded-md border">
 		<div class="flex h-12 items-center justify-between border-b px-5">
-			<h2 class="text-lg font-medium text-gray-900">Load Average</h2>
+			<h2 class="text-lg font-medium text-ink-gray-9">Load Average</h2>
 			<div class="flex items-center space-x-2">
 				<Button
 					icon="help-circle"
@@ -9,7 +9,7 @@
 					:link="'https://docs.frappe.io/cloud/server-analytics#load-average'"
 				/>
 				<router-link
-					class="text-base text-gray-600 hover:text-gray-700"
+					class="text-base text-ink-gray-6 hover:text-ink-gray-7"
 					:to="{ name: 'Server Detail Analytics', params: { name: server } }"
 				>
 					All analytics →
diff --git a/dashboard/src/components/server/ServerNewSnapshotDialog.vue b/dashboard/src/components/server/ServerNewSnapshotDialog.vue
index 3c1a9d78f1e..26a60049668 100644
--- a/dashboard/src/components/server/ServerNewSnapshotDialog.vue
+++ b/dashboard/src/components/server/ServerNewSnapshotDialog.vue
@@ -2,7 +2,7 @@
 	<Dialog v-model="show" :options="{ title: 'Create Snapshot', size: 'xl' }">
 		<template #body-content>
 			<div
-				class="prose prose-sm rounded mt-4 p-2 text-sm text-gray-700 bg-gray-100 border"
+				class="prose prose-sm rounded mt-4 p-2 text-sm text-ink-gray-7 bg-surface-gray-2 border"
 			>
 				This feature creates a snapshot of both the <b>App Server</b> and
 				<b>Database Server</b>.<br /><br />
@@ -24,7 +24,7 @@
 				The snapshot will cost <b>{{ snapshotPlanRate }}</b
 				>.
 			</div>
-			<div class="mt-4 text-sm text-gray-700" label="Consistent Snapshot">
+			<div class="mt-4 text-sm text-ink-gray-7" label="Consistent Snapshot">
 				<Checkbox
 					size="sm"
 					v-model="consistent_snapshot"
diff --git a/dashboard/src/components/server/ServerOverview.vue b/dashboard/src/components/server/ServerOverview.vue
index 6e77d53a5f7..6e712e29f57 100644
--- a/dashboard/src/components/server/ServerOverview.vue
+++ b/dashboard/src/components/server/ServerOverview.vue
@@ -42,7 +42,7 @@
 									v-if="d.type === 'header'"
 									class="mt-2 flex flex-col space-y-2"
 								>
-									<div class="flex items-center text-base text-gray-700">
+									<div class="flex items-center text-base text-ink-gray-7">
 										<span v-if="!$appServer?.doc?.is_unified_server">{{
 											d.label
 										}}</span>
@@ -61,7 +61,7 @@
 									</div>
 
 									<div class="space-y-1">
-										<div class="flex items-center text-base text-gray-900">
+										<div class="flex items-center text-base text-ink-gray-9">
 											{{ d.value }}
 											<Tooltip v-if="d.isPremium" text="Premium Server">
 												<!-- this icon isn't available in unplugin package yet -->
@@ -75,7 +75,7 @@
 													stroke-width="2"
 													stroke-linecap="round"
 													stroke-linejoin="round"
-													class="lucide lucide-circle-parking ml-2 h-4 w-4 text-gray-600"
+													class="lucide lucide-circle-parking ml-2 h-4 w-4 text-ink-gray-6"
 												>
 													<circle cx="12" cy="12" r="10" />
 													<path d="M9 17V7h4a3 3 0 0 1 0 6H9" />
@@ -83,9 +83,12 @@
 											</Tooltip>
 										</div>
 										<div class="flex space-x-1">
-											<div class="text-sm text-gray-600" v-html="d.subValue" />
+											<div
+												class="text-sm text-ink-gray-6"
+												v-html="d.subValue"
+											/>
 											<Tooltip v-if="d.help" :text="d.help">
-												<lucide-info class="h-3.5 w-3.5 text-gray-500" />
+												<lucide-info class="h-3.5 w-3.5 text-ink-gray-5" />
 											</Tooltip>
 										</div>
 									</div>
@@ -126,7 +129,7 @@
 							</div>
 							<div v-else-if="d.type === 'progress'">
 								<div class="flex items-center justify-between space-x-2">
-									<div class="text-base text-gray-700">{{ d.label }}</div>
+									<div class="text-base text-ink-gray-7">{{ d.label }}</div>
 									<div v-if="d.actions" class="flex items-center space-x-2">
 										<Badge
 											v-if="d.actionRequired"
@@ -146,21 +149,21 @@
 									<Progress size="md" :value="d.progress_value || 0" />
 									<div class="flex space-x-2">
 										<div class="mt-2 flex justify-between">
-											<div class="text-sm text-gray-600">
+											<div class="text-sm text-ink-gray-6">
 												{{ d.value }}
 											</div>
 										</div>
 										<Tooltip v-if="d.help" :text="d.help">
-											<lucide-info class="mt-2 h-4 w-4 text-gray-500" />
+											<lucide-info class="mt-2 h-4 w-4 text-ink-gray-5" />
 										</Tooltip>
 									</div>
 								</div>
 							</div>
 							<div v-else-if="d.type === 'info'">
 								<div class="flex items-center justify-between">
-									<div class="text-base text-gray-700">{{ d.label }}</div>
+									<div class="text-base text-ink-gray-7">{{ d.label }}</div>
 								</div>
-								<div class="mt-1 text-sm text-gray-600">
+								<div class="mt-1 text-sm text-ink-gray-6">
 									{{ d.value }}
 								</div>
 							</div>
@@ -171,15 +174,17 @@
 
 			<div class="rounded-md border">
 				<div class="h-12 border-b px-5 py-4">
-					<h2 class="text-lg font-medium text-gray-900">Server Information</h2>
+					<h2 class="text-lg font-medium text-ink-gray-9">
+						Server Information
+					</h2>
 				</div>
 				<div>
 					<div
 						v-for="d in serverInformation"
 						:key="d.label"
-						class="flex items-center px-5 py-3 last:pb-5 even:bg-gray-50/70"
+						class="flex items-center px-5 py-3 last:pb-5 even:bg-surface-gray-1/70"
 					>
-						<div class="w-1/3 text-base text-gray-700">{{ d.label }}</div>
+						<div class="w-1/3 text-base text-ink-gray-7">{{ d.label }}</div>
 						<div class="w-2/3 text-base font-medium">{{ d.value }}</div>
 					</div>
 				</div>
@@ -524,7 +529,7 @@ export default {
 												message: `Enter the disk size you want to increase to the server <b>${
 													doc.title || doc.name
 												}</b>
-									<div class="rounded mt-4 p-2 text-sm text-gray-700 bg-gray-100 border">
+									<div class="rounded mt-4 p-2 text-sm text-ink-gray-7 bg-surface-gray-2 border">
 									You will be charged at the rate of
 									<strong>
 										${this.$format.userCurrency(doc.storage_plan[priceField])}/mo
@@ -536,7 +541,7 @@ export default {
 											: ''
 									}
 									</div>
-									<p class="mt-4 text-sm text-gray-700"><strong>Note</strong>: You can increase the storage size of the server only once in 6 hours.
+									<p class="mt-4 text-sm text-ink-gray-7"><strong>Note</strong>: You can increase the storage size of the server only once in 6 hours.
 										</div>`,
 												fields: [
 													{
@@ -594,7 +599,7 @@ export default {
 										onClick: () => {
 											confirmDialog({
 												title: 'Configure Auto Increase Storage',
-												message: `<div class="rounded my-4 p-2 prose-sm prose bg-gray-50 border">
+												message: `<div class="rounded my-4 p-2 prose-sm prose bg-surface-gray-1 border">
 
 									This feature will automatically increases the storage as it reaches over <b>90%</b> of its capacity.
 
diff --git a/dashboard/src/components/server/ServerPlansDialog.vue b/dashboard/src/components/server/ServerPlansDialog.vue
index 4ae7fbc6db5..ce2056be882 100644
--- a/dashboard/src/components/server/ServerPlansDialog.vue
+++ b/dashboard/src/components/server/ServerPlansDialog.vue
@@ -39,9 +39,9 @@
 						@click="planType = c.name"
 						:class="[
 							planType === c.name
-								? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-								: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-							'flex w-full items-center rounded border p-3 text-left text-base text-gray-900',
+								? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+								: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+							'flex w-full items-center rounded border p-3 text-left text-base text-ink-gray-9',
 						]"
 					>
 						<div class="flex w-full items-center justify-between space-x-2">
@@ -49,7 +49,7 @@
 								{{ c.name }}
 							</span>
 							<Tooltip :text="c.description">
-								<lucide-info class="h-4 w-4 text-gray-500" />
+								<lucide-info class="h-4 w-4 text-ink-gray-5" />
 							</Tooltip>
 						</div>
 					</button>
@@ -112,19 +112,19 @@
 								serverPlanType === planType.name
 									? 'border-gray-900 ring-1 ring-gray-900'
 									: 'border-gray-300',
-								'flex w-full flex-col overflow-hidden rounded border text-left hover:bg-gray-50',
+								'flex w-full flex-col overflow-hidden rounded border text-left hover:bg-surface-gray-1',
 							]"
 						>
 							<div class="w-full p-3">
 								<div class="flex items-center justify-between">
 									<div class="flex w-full items-center">
-										<span class="truncate text-lg font-medium text-gray-900">
+										<span class="truncate text-lg font-medium text-ink-gray-9">
 											{{ planType.title }}
 										</span>
 									</div>
 								</div>
 								<div
-									class="mt-1 text-sm text-gray-600"
+									class="mt-1 text-sm text-ink-gray-6"
 									v-if="planType.description"
 								>
 									{{ planType.description }}
@@ -139,14 +139,14 @@
 					v-else-if="Object.keys(serverPlanTypes).length === 1"
 					class="flex flex-col rounded border border-gray-300 p-3 gap-2 mb-4"
 				>
-					<p class="text-base text-gray-900">
+					<p class="text-base text-ink-gray-9">
 						<span class="font-medium">{{
 							Object.values(serverPlanTypes)[0].title
 						}}</span>
 						machines are available.
 					</p>
 
-					<p class="text-base text-gray-600">
+					<p class="text-base text-ink-gray-6">
 						{{ Object.values(serverPlanTypes)[0].description }}
 					</p>
 				</div>
diff --git a/dashboard/src/components/server/ServerSnapshotDetailsDialog.vue b/dashboard/src/components/server/ServerSnapshotDetailsDialog.vue
index d48d188f28b..4494da26deb 100644
--- a/dashboard/src/components/server/ServerSnapshotDetailsDialog.vue
+++ b/dashboard/src/components/server/ServerSnapshotDetailsDialog.vue
@@ -5,30 +5,32 @@
 				<!-- Meta -->
 				<div class="flex flex-row justify-between">
 					<div>
-						<p class="text-xs text-gray-600">Status</p>
-						<p class="mt-2 text-sm text-gray-700">
+						<p class="text-xs text-ink-gray-6">Status</p>
+						<p class="mt-2 text-sm text-ink-gray-7">
 							{{ snapshot?.status }}
 						</p>
 					</div>
 					<div>
-						<p class="text-xs text-gray-600">Progress</p>
-						<p class="mt-2 text-sm text-gray-700">{{ snapshot?.progress }}%</p>
+						<p class="text-xs text-ink-gray-6">Progress</p>
+						<p class="mt-2 text-sm text-ink-gray-7">
+							{{ snapshot?.progress }}%
+						</p>
 					</div>
 					<div>
-						<p class="text-xs text-gray-600">Mode</p>
-						<p class="mt-2 text-sm text-gray-700">
+						<p class="text-xs text-ink-gray-6">Mode</p>
+						<p class="mt-2 text-sm text-ink-gray-7">
 							{{ snapshot.consistent ? 'Consistent' : 'Inconsistent' }}
 						</p>
 					</div>
 					<div>
-						<p class="text-xs text-gray-600">Cost</p>
-						<p class="mt-2 text-sm text-gray-700">
+						<p class="text-xs text-ink-gray-6">Cost</p>
+						<p class="mt-2 text-sm text-ink-gray-7">
 							{{ snapshot?.free ? 'Free' : 'Chargable' }}
 						</p>
 					</div>
 					<div>
-						<p class="text-xs text-gray-600">Size</p>
-						<p class="mt-2 text-sm text-gray-700">
+						<p class="text-xs text-ink-gray-6">Size</p>
+						<p class="mt-2 text-sm text-ink-gray-7">
 							{{
 								snapshot?.total_size_gb ? `${snapshot.total_size_gb} GB` : '--'
 							}}
@@ -41,15 +43,15 @@
 						<thead class="bg-surface-gray-2">
 							<tr>
 								<th
-									class="px-4 py-2 text-left text-sm font-medium text-gray-700 border-b"
+									class="px-4 py-2 text-left text-sm font-medium text-ink-gray-7 border-b"
 								></th>
 								<th
-									class="px-4 py-2 text-left text-sm font-medium text-gray-700 border-b"
+									class="px-4 py-2 text-left text-sm font-medium text-ink-gray-7 border-b"
 								>
 									App Server
 								</th>
 								<th
-									class="px-4 py-2 text-left text-sm font-medium text-gray-700 border-b"
+									class="px-4 py-2 text-left text-sm font-medium text-ink-gray-7 border-b"
 								>
 									Database Server
 								</th>
@@ -118,7 +120,7 @@
 						</Button>
 
 						<div class="flex flex-row items-center gap-1">
-							<p class="text-sm font-medium text-gray-800">
+							<p class="text-sm font-medium text-ink-gray-8">
 								{{ sites.length }} Site{{ sites.length > 1 ? 's' : '' }}
 								Recoverable
 							</p>
@@ -128,7 +130,7 @@
 					<div class="flex flex-col mt-2 px-2 gap-1.5" v-if="showSiteList">
 						<span
 							v-for="site in snapshot?.site_list_json ?? []"
-							class="text-sm text-gray-800"
+							class="text-sm text-ink-gray-8"
 						>
 							-> {{ site }}
 						</span>
@@ -198,7 +200,7 @@ export default {
 
 <style scoped>
 td {
-	@apply px-4 py-2 border-b text-sm text-gray-800;
+	@apply px-4 py-2 border-b text-sm text-ink-gray-8;
 }
 
 tbody tr:last-child td {
diff --git a/dashboard/src/components/server/ServerSnapshotRecoverSitesDialog.vue b/dashboard/src/components/server/ServerSnapshotRecoverSitesDialog.vue
index e6d8321e823..9d1b03428b0 100644
--- a/dashboard/src/components/server/ServerSnapshotRecoverSitesDialog.vue
+++ b/dashboard/src/components/server/ServerSnapshotRecoverSitesDialog.vue
@@ -18,7 +18,7 @@
 					</div>
 					<div class="w-full">
 						<p
-							class="rounded mb-4 p-2 text-sm text-gray-700 bg-gray-100 border"
+							class="rounded mb-4 p-2 text-sm text-ink-gray-7 bg-surface-gray-2 border"
 						>
 							Frappe Cloud will start temporary servers from the snapshot and
 							<b>backup the selected sites from the snapshot</b>. You will be
@@ -218,7 +218,7 @@ export default {
 
 <style scoped>
 td {
-	@apply px-4 py-2 border-b text-sm text-gray-800;
+	@apply px-4 py-2 border-b text-sm text-ink-gray-8;
 }
 
 tbody tr:last-child td {
diff --git a/dashboard/src/components/server/ServerSnapshotRecoveryDetails.vue b/dashboard/src/components/server/ServerSnapshotRecoveryDetails.vue
index 61c8eac8dfa..a198c980b76 100644
--- a/dashboard/src/components/server/ServerSnapshotRecoveryDetails.vue
+++ b/dashboard/src/components/server/ServerSnapshotRecoveryDetails.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex h-60 w-full items-center justify-center gap-2 text-base text-gray-700"
+		class="flex h-60 w-full items-center justify-center gap-2 text-base text-ink-gray-7"
 		v-if="$resources?.snapshotRecovery?.loading"
 	>
 		<Spinner class="w-4" /> Loading ...
diff --git a/dashboard/src/components/server/StorageBreakdownDialog.vue b/dashboard/src/components/server/StorageBreakdownDialog.vue
index 20deda905a2..6747b5f9283 100644
--- a/dashboard/src/components/server/StorageBreakdownDialog.vue
+++ b/dashboard/src/components/server/StorageBreakdownDialog.vue
@@ -12,7 +12,7 @@
 					$resources?.databaseServerStorageBreakdown?.loading ||
 					$resources?.applicationServerStorageBreakdown?.loading
 				"
-				class="flex h-80 w-full items-center justify-center gap-2 text-base text-gray-700"
+				class="flex h-80 w-full items-center justify-center gap-2 text-base text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Analyzing ...
 			</div>
@@ -21,7 +21,7 @@
 					$resources?.databaseServerStorageBreakdown?.error ||
 					$resources?.applicationServerStorageBreakdown?.error
 				"
-				class="flex h-80 w-full items-center justify-center gap-2 text-base text-gray-700"
+				class="flex h-80 w-full items-center justify-center gap-2 text-base text-ink-gray-7"
 			>
 				<ErrorMessage
 					:message="
@@ -51,7 +51,7 @@
 						class="my-3 flex flex-row items-center justify-between px-1.5"
 					>
 						<div class="flex flex-row items-center gap-1">
-							<p class="text-base font-semibold text-gray-800">
+							<p class="text-base font-semibold text-ink-gray-8">
 								Usage of
 								{{
 									noOfDatabases > topNDatabases && !showAllDatabases
diff --git a/dashboard/src/components/settings/ActivateWebhookDialog.vue b/dashboard/src/components/settings/ActivateWebhookDialog.vue
index b3ef47aecc1..10781815c34 100644
--- a/dashboard/src/components/settings/ActivateWebhookDialog.vue
+++ b/dashboard/src/components/settings/ActivateWebhookDialog.vue
@@ -8,9 +8,9 @@
 			<div class="space-y-4">
 				<FormControl label="Endpoint" v-model="webhook.endpoint" disabled />
 				<div v-if="request">
-					<p class="text-xs text-gray-600">Request</p>
+					<p class="text-xs text-ink-gray-6">Request</p>
 					<pre
-						class="mt-2 whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
+						class="mt-2 whitespace-pre-wrap rounded bg-surface-gray-1 px-2 py-1.5 text-sm text-ink-gray-6"
 						>{{ request }}</pre
 					>
 				</div>
@@ -22,15 +22,15 @@
 					disabled
 				/>
 				<div v-if="response">
-					<p class="text-xs text-gray-600">Response</p>
+					<p class="text-xs text-ink-gray-6">Response</p>
 					<pre
-						class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
+						class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-surface-gray-1 px-2 py-1.5 text-sm text-ink-gray-6"
 						>{{ response }}</pre
 					>
 				</div>
 				<div class="flex items-center" v-if="validated">
-					<ILucideCheck class="h-4 text-green-600" />
-					<div class="ml-2 text-sm font-medium text-gray-700">
+					<ILucideCheck class="h-4 text-ink-green-3" />
+					<div class="ml-2 text-sm font-medium text-ink-gray-7">
 						Endpoint has been validated
 					</div>
 				</div>
diff --git a/dashboard/src/components/settings/AddNewWebhookDialog.vue b/dashboard/src/components/settings/AddNewWebhookDialog.vue
index c7c7ec81539..233fd5ca696 100644
--- a/dashboard/src/components/settings/AddNewWebhookDialog.vue
+++ b/dashboard/src/components/settings/AddNewWebhookDialog.vue
@@ -25,7 +25,7 @@
 							/>
 						</template>
 					</FormControl>
-					<p class="mt-2 text-sm text-gray-700">
+					<p class="mt-2 text-sm text-ink-gray-7">
 						<strong>Note:</strong> Secret is optional. Check
 						<a
 							href="https://docs.frappe.io/cloud/webhook-introduction"
@@ -36,11 +36,11 @@
 						to learn more
 					</p>
 				</div>
-				<p class="text-base font-medium text-gray-900">
+				<p class="text-base font-medium text-ink-gray-9">
 					Select the webhook events
 				</p>
 				<div
-					class="text-center text-sm leading-10 text-gray-500"
+					class="text-center text-sm leading-10 text-ink-gray-5"
 					v-if="$resources.events.loading"
 				>
 					Loading...
diff --git a/dashboard/src/components/settings/DeveloperSettings.vue b/dashboard/src/components/settings/DeveloperSettings.vue
index 925024a1214..a57dd84eabe 100644
--- a/dashboard/src/components/settings/DeveloperSettings.vue
+++ b/dashboard/src/components/settings/DeveloperSettings.vue
@@ -18,7 +18,7 @@
 						:textContent="$team.doc.user_info.api_key"
 					/>
 				</div>
-				<div v-else class="pb-2 text-base text-gray-700">
+				<div v-else class="pb-2 text-base text-ink-gray-7">
 					You don't have an API key yet. Click the button above to create one.
 				</div>
 				<Dialog
@@ -48,19 +48,19 @@
 								again!
 							</p>
 							<label class="block pt-2">
-								<span class="mb-2 block text-sm leading-4 text-gray-700"
+								<span class="mb-2 block text-sm leading-4 text-ink-gray-7"
 									>API Key</span
 								>
 								<ClickToCopyField :textContent="createSecret.data.api_key" />
 							</label>
 							<label class="block pt-2">
-								<span class="mb-2 block text-sm leading-4 text-gray-700"
+								<span class="mb-2 block text-sm leading-4 text-ink-gray-7"
 									>API Secret</span
 								>
 								<ClickToCopyField :textContent="createSecret.data.api_secret" />
 							</label>
 						</div>
-						<div v-else class="text-base text-gray-700">
+						<div v-else class="text-base text-ink-gray-7">
 							API key and API secret pairs can be used to access the
 							<a href="/docs/api" class="underline" target="_blank"
 								>Frappe Cloud API</a
diff --git a/dashboard/src/components/settings/EditWebhookDialog.vue b/dashboard/src/components/settings/EditWebhookDialog.vue
index 0632f8a01f8..9d6ad839898 100644
--- a/dashboard/src/components/settings/EditWebhookDialog.vue
+++ b/dashboard/src/components/settings/EditWebhookDialog.vue
@@ -16,14 +16,14 @@
 			<div class="space-y-4">
 				<div>
 					<FormControl label="Endpoint" v-model="endpoint" />
-					<p class="mt-1.5 text-sm text-gray-700">
+					<p class="mt-1.5 text-sm text-ink-gray-7">
 						If you change the endpoint, make sure to activate the webhook again.
 					</p>
 				</div>
 				<div v-if="!updateSecret">
-					<p class="block text-xs text-gray-600">Secret</p>
+					<p class="block text-xs text-ink-gray-6">Secret</p>
 					<div
-						class="mt-1 flex items-center justify-between text-base text-gray-700"
+						class="mt-1 flex items-center justify-between text-base text-ink-gray-7"
 					>
 						<p>Want to change the secret?</p>
 						<Button @click="updateSecret = true">Edit Secret</Button>
@@ -39,7 +39,7 @@
 							/>
 						</template>
 					</FormControl>
-					<p class="mt-1.5 text-sm text-gray-700">
+					<p class="mt-1.5 text-sm text-ink-gray-7">
 						<secret>Note:</secret> Secret is optional. Check
 						<a
 							href="https://docs.frappe.io/cloud/webhook-introduction"
@@ -50,11 +50,11 @@
 						to learn more
 					</p>
 				</div>
-				<p class="text-base font-medium text-gray-900">
+				<p class="text-base font-medium text-ink-gray-9">
 					Select the webhook events
 				</p>
 				<div
-					class="text-center text-sm leading-10 text-gray-500"
+					class="text-center text-sm leading-10 text-ink-gray-5"
 					v-if="$resources.events.loading"
 				>
 					Loading...
diff --git a/dashboard/src/components/settings/InviteTeamMemberDialog.vue b/dashboard/src/components/settings/InviteTeamMemberDialog.vue
index 62e738cc31c..798e0c791e1 100644
--- a/dashboard/src/components/settings/InviteTeamMemberDialog.vue
+++ b/dashboard/src/components/settings/InviteTeamMemberDialog.vue
@@ -48,7 +48,7 @@
 						v-for="role in selectedRoles"
 					>
 						<div class="flex w-full items-center justify-between px-3 py-2">
-							<div class="text-base text-gray-800">{{ role.label }}</div>
+							<div class="text-base text-ink-gray-8">{{ role.label }}</div>
 						</div>
 						<Button
 							class="ml-auto"
diff --git a/dashboard/src/components/settings/Role.vue b/dashboard/src/components/settings/Role.vue
index 25ec95f1014..4cfeeadae8d 100644
--- a/dashboard/src/components/settings/Role.vue
+++ b/dashboard/src/components/settings/Role.vue
@@ -3,15 +3,15 @@
 		<Tooltip text="All Roles">
 			<Button :route="{ name: 'SettingsPermissionRoles' }">
 				<template #icon>
-					<lucide-arrow-left class="h-4 w-4 text-gray-700" />
+					<lucide-arrow-left class="h-4 w-4 text-ink-gray-7" />
 				</template>
 			</Button>
 		</Tooltip>
-		<h3 class="text-lg font-medium text-gray-900">
+		<h3 class="text-lg font-medium text-ink-gray-9">
 			{{ role.doc?.title }}
 		</h3>
 		<Tooltip text="Admin Role" v-if="role.doc?.admin_access">
-			<FeatherIcon name="shield" class="h-5 w-5 text-gray-700" />
+			<FeatherIcon name="shield" class="h-5 w-5 text-ink-gray-7" />
 		</Tooltip>
 	</div>
 	<div class="flex items-center justify-between mb-5">
diff --git a/dashboard/src/components/settings/RoleConfigureDialog.vue b/dashboard/src/components/settings/RoleConfigureDialog.vue
index 0aae478d444..a033aca6343 100644
--- a/dashboard/src/components/settings/RoleConfigureDialog.vue
+++ b/dashboard/src/components/settings/RoleConfigureDialog.vue
@@ -20,7 +20,7 @@
 			>
 				<template #tab-item="{ tab }">
 					<div
-						class="flex cursor-pointer items-center gap-1.5 py-3 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900 focus:outline-none focus:transition-none [&>div]:pl-0"
+						class="flex cursor-pointer items-center gap-1.5 py-3 text-base text-ink-gray-6 duration-300 ease-in-out hover:border-gray-400 hover:text-ink-gray-9 focus:outline-none focus:transition-none [&>div]:pl-0"
 					>
 						<span>{{ tab.label }}</span>
 					</div>
@@ -50,10 +50,10 @@
 							/>
 						</div>
 						<div class="rounded border px-3">
-							<div class="mt-2 text-gray-600">Members</div>
+							<div class="mt-2 text-ink-gray-6">Members</div>
 							<div
 								v-if="roleUsers.length === 0"
-								class="p-6 text-center text-gray-500"
+								class="p-6 text-center text-ink-gray-5"
 							>
 								<span>No members added to this role.</span>
 							</div>
@@ -70,7 +70,7 @@
 									/>
 									<Button variant="ghost" @click="() => removeUser(user.user)">
 										<template #icon>
-											<lucide-x class="h-4 w-4 text-gray-600" />
+											<lucide-x class="h-4 w-4 text-ink-gray-6" />
 										</template>
 									</Button>
 								</div>
diff --git a/dashboard/src/components/settings/RoleMembers.vue b/dashboard/src/components/settings/RoleMembers.vue
index 6d351ecd7dc..b7ea9a6160f 100644
--- a/dashboard/src/components/settings/RoleMembers.vue
+++ b/dashboard/src/components/settings/RoleMembers.vue
@@ -13,7 +13,7 @@
 					/>
 					<div
 						v-else
-						class="size-full bg-gray-200 flex items-center justify-center rounded-l text-gray-500 font-semibold text-3xl"
+						class="size-full bg-surface-gray-3 flex items-center justify-center rounded-l text-ink-gray-5 font-semibold text-3xl"
 					>
 						{{
 							user.full_name
@@ -26,7 +26,7 @@
 				</div>
 				<div class="px-4 py-2 flex flex-col justify-evenly">
 					<div class="font-medium">{{ user.full_name }}</div>
-					<div class="text-gray-800">{{ user.user }}</div>
+					<div class="text-ink-gray-8">{{ user.user }}</div>
 					<div>Joined: {{ dayjsLocal(user.creation).format('LL') }}</div>
 				</div>
 				<div
@@ -35,7 +35,7 @@
 					<Button
 						icon="trash-2"
 						variant="ghost"
-						class="text-red-600"
+						class="text-ink-red-4"
 						@click="$emit('remove', user.user)"
 					/>
 				</div>
diff --git a/dashboard/src/components/settings/RoleResources.vue b/dashboard/src/components/settings/RoleResources.vue
index 3e5fc8691db..67b2b79131f 100644
--- a/dashboard/src/components/settings/RoleResources.vue
+++ b/dashboard/src/components/settings/RoleResources.vue
@@ -12,7 +12,7 @@
 						}"
 					>
 						<div
-							class="size-full flex items-center justify-center rounded-l text-gray-500 font-semibold text-2xl"
+							class="size-full flex items-center justify-center rounded-l text-ink-gray-5 font-semibold text-2xl"
 						>
 							<FeatherIcon
 								class="size-6"
@@ -30,7 +30,7 @@
 						<Button
 							icon="trash-2"
 							variant="ghost"
-							class="text-red-600"
+							class="text-ink-red-4"
 							@click.prevent.stop="
 								$emit('remove', resource.document_type, resource.document_name)
 							"
diff --git a/dashboard/src/components/settings/WebhookAttemptDetails.vue b/dashboard/src/components/settings/WebhookAttemptDetails.vue
index 3ba37ea1cc7..1a16429023a 100644
--- a/dashboard/src/components/settings/WebhookAttemptDetails.vue
+++ b/dashboard/src/components/settings/WebhookAttemptDetails.vue
@@ -2,15 +2,15 @@
 	<div v-if="$resources.attempt.loading">Loading...</div>
 	<div v-else class="space-y-4">
 		<div>
-			<p class="text-xs text-gray-600">Endpoint</p>
-			<p class="mt-2 text-sm text-gray-700">
+			<p class="text-xs text-ink-gray-6">Endpoint</p>
+			<p class="mt-2 text-sm text-ink-gray-7">
 				{{ $resources.attempt?.data?.endpoint }}
 			</p>
 		</div>
 		<div>
-			<p class="text-xs text-gray-600">Request</p>
+			<p class="text-xs text-ink-gray-6">Request</p>
 			<pre
-				class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
+				class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-surface-gray-1 px-2 py-1.5 text-sm text-ink-gray-6"
 				>{{ $resources.attempt?.data?.request_payload }}</pre
 			>
 		</div>
@@ -19,21 +19,21 @@
 				is_valid_status_code($resources.attempt?.data?.response_status_code)
 			"
 		>
-			<p class="text-xs text-gray-600">Response Status Code</p>
-			<p class="mt-2 text-sm text-gray-700">
+			<p class="text-xs text-ink-gray-6">Response Status Code</p>
+			<p class="mt-2 text-sm text-ink-gray-7">
 				{{ $resources.attempt?.data?.response_status_code }}
 			</p>
 		</div>
 		<div v-if="$resources.attempt?.data?.response_body">
-			<p class="text-xs text-gray-600">Response</p>
+			<p class="text-xs text-ink-gray-6">Response</p>
 			<pre
-				class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
+				class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-surface-gray-1 px-2 py-1.5 text-sm text-ink-gray-6"
 				>{{ $resources.attempt?.data?.response_body }}</pre
 			>
 		</div>
 		<div>
-			<p class="text-xs text-gray-600">Timestamp</p>
-			<p class="mt-2 text-sm text-gray-700">
+			<p class="text-xs text-ink-gray-6">Timestamp</p>
+			<p class="mt-2 text-sm text-ink-gray-7">
 				{{ $resources.attempt?.data?.creation }}
 			</p>
 		</div>
diff --git a/dashboard/src/components/settings/WebhookAttemptsDialog.vue b/dashboard/src/components/settings/WebhookAttemptsDialog.vue
index 26ee01e510f..7f5f139f73e 100644
--- a/dashboard/src/components/settings/WebhookAttemptsDialog.vue
+++ b/dashboard/src/components/settings/WebhookAttemptsDialog.vue
@@ -8,7 +8,7 @@
 		}"
 	>
 		<template #body-content>
-			<p class="text-sm mb-2 text-gray-700" v-if="!selectedWebhookAttemptId">
+			<p class="text-sm mb-2 text-ink-gray-7" v-if="!selectedWebhookAttemptId">
 				<strong>Note:</strong> You can only view logs of last 24 hours
 			</p>
 			<ObjectList :options="listOptions" v-if="!selectedWebhookAttemptId" />
diff --git a/dashboard/src/components/settings/profile/AccountPartner.vue b/dashboard/src/components/settings/profile/AccountPartner.vue
index 00702f2814e..9e9b27c713b 100644
--- a/dashboard/src/components/settings/profile/AccountPartner.vue
+++ b/dashboard/src/components/settings/profile/AccountPartner.vue
@@ -23,7 +23,7 @@
 		</template>
 		<div class="py-4">
 			<span
-				class="text-base font-medium text-gray-700"
+				class="text-base font-medium text-ink-gray-7"
 				v-if="!$team.doc?.partner_email"
 			>
 				Have a Frappe Partner Referral Code? Click on
@@ -52,8 +52,8 @@
 				<p class="pb-2 text-p-base">
 					Enter the partner code provided by your Partner
 				</p>
-				<div class="rounded border border-gray-200 bg-gray-100 p-2 mb-4">
-					<span class="text-sm leading-[1.5] text-gray-700">
+				<div class="rounded border border-gray-200 bg-surface-gray-2 p-2 mb-4">
+					<span class="text-sm leading-[1.5] text-ink-gray-7">
 						<strong>Note</strong>: After linking with Partner, following details
 						shall be shared with your partner team:
 						<br />
@@ -67,7 +67,11 @@
 					@input="referralCodeChange"
 				/>
 				<div class="mt-1">
-					<div v-if="partnerExists" class="text-sm text-green-600" role="alert">
+					<div
+						v-if="partnerExists"
+						class="text-sm text-ink-green-3"
+						role="alert"
+					>
 						Referral Code {{ code }} belongs to {{ partner }}
 					</div>
 				</div>
@@ -94,7 +98,7 @@
 				<div class="text-p-base pb-2">
 					This will remove the Partner associated with your account. Are you
 					sure you want to remove the Partner? <br /><br />
-					<div class="text-gray-800 bg-gray-200 p-2 rounded-md">
+					<div class="text-ink-gray-8 bg-surface-gray-3 p-2 rounded-md">
 						Your partner will no longer have access to your sites and servers
 						and will be removed as team member from your team.
 					</div>
diff --git a/dashboard/src/components/settings/profile/AccountProfile.vue b/dashboard/src/components/settings/profile/AccountProfile.vue
index 5df308eeeb6..4cbe1065c71 100644
--- a/dashboard/src/components/settings/profile/AccountProfile.vue
+++ b/dashboard/src/components/settings/profile/AccountProfile.vue
@@ -30,7 +30,7 @@
 				<h3 class="text-base font-semibold">
 					{{ user.first_name }} {{ user.last_name }}
 				</h3>
-				<p class="mt-1 text-base text-gray-600">{{ user.email }}</p>
+				<p class="mt-1 text-base text-ink-gray-6">{{ user.email }}</p>
 			</div>
 			<div class="ml-auto">
 				<Button icon-left="edit" @click="showProfileEditDialog = true">
@@ -103,7 +103,7 @@
 							}
 						"
 					>
-						<span :class="{ 'text-red-600': teamEnabled }">{{
+						<span :class="{ 'text-ink-red-4': teamEnabled }">{{
 							teamEnabled ? 'Disable' : 'Enable'
 						}}</span>
 					</Button>
diff --git a/dashboard/src/components/settings/profile/AccountReferral.vue b/dashboard/src/components/settings/profile/AccountReferral.vue
index 64b9d3fc7ff..89bfc59d84b 100644
--- a/dashboard/src/components/settings/profile/AccountReferral.vue
+++ b/dashboard/src/components/settings/profile/AccountReferral.vue
@@ -7,7 +7,7 @@
 	>
 		<div class="flex flex-col space-y-4 overflow-hidden">
 			<ClickToCopyField :textContent="referralLink" />
-			<span class="text-sm font-medium leading-4 text-gray-700">
+			<span class="text-sm font-medium leading-4 text-ink-gray-7">
 				Invite someone to Frappe Cloud and
 				<strong>
 					get
diff --git a/dashboard/src/components/site/AnalyticsCard.vue b/dashboard/src/components/site/AnalyticsCard.vue
index 155270769f3..9baf62e694a 100644
--- a/dashboard/src/components/site/AnalyticsCard.vue
+++ b/dashboard/src/components/site/AnalyticsCard.vue
@@ -9,11 +9,11 @@
 	>
 		<div class="flex h-12 items-center justify-between border-b px-5 gap-2">
 			<div class="flex items-center">
-				<h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
+				<h3 class="text-lg font-medium text-ink-gray-9">{{ title }}</h3>
 				<div class="pl-2">
 					<Tooltip text="Share Link to this Card">
 						<CopyIcon
-							class="h-4 text-gray-600 outline-none duration-200 hover:text-current cursor-pointer"
+							class="h-4 text-ink-gray-6 outline-none duration-200 hover:text-current cursor-pointer"
 							@click="shareCard"
 						/>
 					</Tooltip>
diff --git a/dashboard/src/components/site/InstallAppDialog.vue b/dashboard/src/components/site/InstallAppDialog.vue
index 04130749aa4..77a539f7c36 100644
--- a/dashboard/src/components/site/InstallAppDialog.vue
+++ b/dashboard/src/components/site/InstallAppDialog.vue
@@ -130,13 +130,13 @@ export default {
 					{
 						label: 'Repo',
 						fieldname: 'repository_owner',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						width: '10rem',
 					},
 					{
 						label: 'Branch',
 						fieldname: 'branch',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						width: '10rem',
 					},
 					{
diff --git a/dashboard/src/components/site/NewSiteAppSelector.vue b/dashboard/src/components/site/NewSiteAppSelector.vue
index 41a08190091..8e326f9a61e 100644
--- a/dashboard/src/components/site/NewSiteAppSelector.vue
+++ b/dashboard/src/components/site/NewSiteAppSelector.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="availableApps.length" class="space-y-12">
 		<div v-if="publicApps">
-			<h2 class="text-sm font-medium leading-6 text-gray-900">
+			<h2 class="text-sm font-medium leading-6 text-ink-gray-9">
 				{{
 					!siteOnPublicBench && privateApps
 						? 'Select Marketplace Apps'
@@ -24,7 +24,7 @@
 			/>
 		</div>
 		<div v-if="!siteOnPublicBench && privateApps">
-			<h2 class="text-sm font-medium leading-6 text-gray-900">
+			<h2 class="text-sm font-medium leading-6 text-ink-gray-9">
 				Select Private Apps
 			</h2>
 			<div class="mt-2 w-full space-y-2">
@@ -122,7 +122,7 @@ export default {
 							return h(
 								'div',
 								{
-									class: 'flex items-center text-sm text-gray-600',
+									class: 'flex items-center text-sm text-ink-gray-6',
 								},
 								[
 									h(DownloadIcon, {
diff --git a/dashboard/src/components/site/SelectSiteForRestore.vue b/dashboard/src/components/site/SelectSiteForRestore.vue
index 3d926c2704c..4437856059a 100644
--- a/dashboard/src/components/site/SelectSiteForRestore.vue
+++ b/dashboard/src/components/site/SelectSiteForRestore.vue
@@ -52,7 +52,7 @@
 			/>
 
 			<div v-if="selectedSite" class="mt-4">
-				<p class="text text-base text-gray-800 font-semibold mb-4">
+				<p class="text text-base text-ink-gray-8 font-semibold mb-4">
 					Please select the data you want to restore :
 				</p>
 				<div class="flex flex-col gap-2">
diff --git a/dashboard/src/components/site/SiteAnalytics.vue b/dashboard/src/components/site/SiteAnalytics.vue
index f139501812e..d1c80be11d1 100644
--- a/dashboard/src/components/site/SiteAnalytics.vue
+++ b/dashboard/src/components/site/SiteAnalytics.vue
@@ -1,13 +1,15 @@
 <template>
 	<div
-		class="flex flex-col justify-end items-center sticky top-0 z-20 p-3 px-5 w-full bg-white border-b justify-self-center space-y-2"
+		class="flex flex-col justify-end items-center sticky top-0 z-20 p-3 px-5 w-full bg-surface-white border-b justify-self-center space-y-2"
 	>
 		<div class="flex space-x-4 w-full">
 			<!-- Group all content items so spacing is consistent -->
 			<div class="flex space-x-4 w-full">
 				<!-- Start date group -->
 				<div class="flex space-x-2">
-					<label class="text-base text-gray-600 self-center whitespace-nowrap">
+					<label
+						class="text-base text-ink-gray-6 self-center whitespace-nowrap"
+					>
 						Absolute <span class="text-black">from</span>
 					</label>
 					<DateTimePicker
@@ -34,11 +36,11 @@
 				</div>
 
 				<!-- Divider -->
-				<div class="w-px bg-gray-200" />
+				<div class="w-px bg-surface-gray-3" />
 
 				<!-- Duration group -->
 				<div class="flex space-x-2">
-					<label class="text-base self-center text-gray-600">Relative</label>
+					<label class="text-base self-center text-ink-gray-6">Relative</label>
 					<FormControl
 						type="select"
 						class="w-36"
@@ -55,7 +57,7 @@
 					<ActionButton
 						variant="subtle"
 						label="Share"
-						class="text-gray-300 hover:text-black duration-200"
+						class="text-ink-gray-3 hover:text-black duration-200"
 						@click="(e) => shareDashboard(e, `global`)"
 						:slots="{
 							prefix: shareDashboardActionPrefix,
@@ -65,7 +67,7 @@
 			</div>
 		</div>
 
-		<div v-if="!!dateRangeError" class="text-red-500 text-sm">
+		<div v-if="!!dateRangeError" class="text-ink-red-3 text-sm">
 			{{ dateRangeError }}
 		</div>
 	</div>
@@ -113,7 +115,7 @@
 				/>
 				<template #action>
 					<router-link
-						class="text-base text-gray-600 hover:text-gray-700"
+						class="text-base text-ink-gray-6 hover:text-ink-gray-7"
 						:to="{ name: 'Site Performance Request Logs' }"
 					>
 						Request Log Report →
@@ -142,7 +144,7 @@
 		>
 			<h2 class="text-lg font-semibold">Advanced Analytics</h2>
 			<FeatherIcon
-				class="h-5 w-5 text-gray-500 hover:text-gray-700"
+				class="h-5 w-5 text-ink-gray-5 hover:text-ink-gray-7"
 				:name="showAdvancedAnalytics ? 'chevron-down' : 'chevron-right'"
 			/>
 		</div>
@@ -226,7 +228,7 @@
 			>
 				<template #action>
 					<Tooltip text="Shown only as reports seem to take time">
-						<lucide-info class="ml-2 mr-auto h-3.5 w-3.5 text-gray-500" />
+						<lucide-info class="ml-2 mr-auto h-3.5 w-3.5 text-ink-gray-5" />
 					</Tooltip>
 				</template>
 				<BarChart
@@ -249,7 +251,7 @@
 			>
 				<template #action>
 					<Tooltip text="Shown only as run_doc_method calls seem to take time">
-						<lucide-info class="ml-2 mr-auto h-3.5 w-3.5 text-gray-500" />
+						<lucide-info class="ml-2 mr-auto h-3.5 w-3.5 text-ink-gray-5" />
 					</Tooltip>
 				</template>
 				<BarChart
@@ -339,7 +341,7 @@
 			>
 				<template #action>
 					<Tooltip text="Shown only as reports seem to take time">
-						<lucide-info class="ml-2 mr-auto h-3.5 w-3.5 text-gray-500" />
+						<lucide-info class="ml-2 mr-auto h-3.5 w-3.5 text-ink-gray-5" />
 					</Tooltip>
 				</template>
 				<BarChart
@@ -379,7 +381,7 @@
 				<template #action>
 					<Tooltip text="Show Detailed Reports">
 						<router-link
-							class="mr-auto text-base text-gray-600 hover:text-gray-700"
+							class="mr-auto text-base text-ink-gray-6 hover:text-ink-gray-7"
 							:to="{ name: 'Site Performance Slow Queries' }"
 						>
 							→
@@ -410,7 +412,7 @@
 				<template #action>
 					<Tooltip text="Show Detailed Reports">
 						<router-link
-							class="mr-auto text-base text-gray-600 hover:text-gray-700"
+							class="mr-auto text-base text-ink-gray-6 hover:text-ink-gray-7"
 							:to="{ name: 'Site Performance Slow Queries' }"
 						>
 							→
diff --git a/dashboard/src/components/site/SiteDatabaseRestoreFromURLDialog.vue b/dashboard/src/components/site/SiteDatabaseRestoreFromURLDialog.vue
index c53e12bcbe1..c3ba97a8d6b 100644
--- a/dashboard/src/components/site/SiteDatabaseRestoreFromURLDialog.vue
+++ b/dashboard/src/components/site/SiteDatabaseRestoreFromURLDialog.vue
@@ -7,7 +7,7 @@
 	>
 		<template #body-content>
 			<div
-				class="mb-6 flex items-center rounded border border-gray-200 bg-gray-100 p-4 text-sm text-gray-600"
+				class="mb-6 flex items-center rounded border border-gray-200 bg-surface-gray-2 p-4 text-sm text-ink-gray-6"
 			>
 				<lucide-alert-triangle class="mr-4 inline-block h-6 w-6" />
 				<div>
diff --git a/dashboard/src/components/site/SiteEnableMonitoringDialog.vue b/dashboard/src/components/site/SiteEnableMonitoringDialog.vue
index be1fbe57ab9..9af8c986127 100644
--- a/dashboard/src/components/site/SiteEnableMonitoringDialog.vue
+++ b/dashboard/src/components/site/SiteEnableMonitoringDialog.vue
@@ -9,16 +9,16 @@
 		<template #body-content>
 			<div
 				v-if="$resources.siteResource.loading"
-				class="flex w-full items-center justify-center gap-2 py-20 text-gray-700"
+				class="flex w-full items-center justify-center gap-2 py-20 text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Loading data...
 			</div>
 			<div v-else-if="siteDoc?.is_monitoring_disabled" class="w-full">
-				<p class="mb-2 text-gray-800 text-base font-medium">
+				<p class="mb-2 text-ink-gray-8 text-base font-medium">
 					Cause of disabling monitoring :
 				</p>
 				<div
-					class="rounded border bg-gray-50 p-2 text-base font-normalprose prose-sm space-y-2 whitespace-break-spaces w-ful"
+					class="rounded border bg-surface-gray-1 p-2 text-base font-normalprose prose-sm space-y-2 whitespace-break-spaces w-ful"
 				>
 					{{ siteDoc.reason_for_disabling_monitoring || 'Unknown Reason' }}
 				</div>
@@ -33,18 +33,18 @@
 						:showIcon="true"
 						title="Failed to enable monitoring"
 					/>
-					<p class="mt-1 text-gray-800 text-base font-medium">Reason -</p>
+					<p class="mt-1 text-ink-gray-8 text-base font-medium">Reason -</p>
 					<div
-						class="rounded border bg-gray-50 p-2 text-base font-normalprose prose-sm space-y-2 whitespace-break-spaces w-full"
+						class="rounded border bg-surface-gray-1 p-2 text-base font-normalprose prose-sm space-y-2 whitespace-break-spaces w-full"
 						style="line-height: inherit"
 					>
 						{{ reasonForFailureInEnablingMonitoring }}
 					</div>
-					<p class="mt-1 text-gray-800 text-base font-medium">
+					<p class="mt-1 text-ink-gray-8 text-base font-medium">
 						Possible Solution -
 					</p>
 					<div
-						class="rounded border bg-gray-50 p-2 text-base font-normalprose prose-sm space-y-2 whitespace-break-spaces w-full"
+						class="rounded border bg-surface-gray-1 p-2 text-base font-normalprose prose-sm space-y-2 whitespace-break-spaces w-full"
 						style="line-height: inherit"
 					>
 						{{ solutionToResolveIssue }}
diff --git a/dashboard/src/components/site/SiteInsights.vue b/dashboard/src/components/site/SiteInsights.vue
index 891b224e7ab..12cb6164edc 100644
--- a/dashboard/src/components/site/SiteInsights.vue
+++ b/dashboard/src/components/site/SiteInsights.vue
@@ -14,10 +14,10 @@
 			<template v-for="tab in tabs">
 				<router-link
 					:to="{ name: tab.value }"
-					class="flex cursor-pointer text-base text-gray-600 hover:bg-gray-100"
+					class="flex cursor-pointer text-base text-ink-gray-6 hover:bg-surface-gray-2"
 					:class="{
-						' bg-gray-50 text-gray-800': isActiveTab(tab),
-						'text-gray-600': !isActiveTab(tab),
+						' bg-surface-gray-1 text-ink-gray-8': isActiveTab(tab),
+						'text-ink-gray-6': !isActiveTab(tab),
 						'border-b': !$isMobile,
 					}"
 				>
diff --git a/dashboard/src/components/site/SiteLogs.vue b/dashboard/src/components/site/SiteLogs.vue
index 04f2c5fd1eb..0d82637c839 100644
--- a/dashboard/src/components/site/SiteLogs.vue
+++ b/dashboard/src/components/site/SiteLogs.vue
@@ -76,7 +76,7 @@ export default {
 						{
 							label: 'Size',
 							fieldname: 'size',
-							class: 'text-gray-600',
+							class: 'text-ink-gray-6',
 							format(value) {
 								return `${value} kB`;
 							},
diff --git a/dashboard/src/components/site/SiteMigration.vue b/dashboard/src/components/site/SiteMigration.vue
index 64aae0fe06e..9cbeb663147 100644
--- a/dashboard/src/components/site/SiteMigration.vue
+++ b/dashboard/src/components/site/SiteMigration.vue
@@ -23,12 +23,12 @@
 				v-if="this.$resources?.migrationOptions?.loading"
 				class="flex flex-col items-center justify-center h-[200px]"
 			>
-				<Spinner class="h-4 w-4 text-gray-600" />
+				<Spinner class="h-4 w-4 text-ink-gray-6" />
 			</div>
 			<div v-else class="flex flex-col gap-3">
 				<!-- Chose Migration Mode -->
 				<div class="flex flex-col gap-2">
-					<p class="text-base text-gray-800">Select Migration Type</p>
+					<p class="text-base text-ink-gray-8">Select Migration Type</p>
 					<FormControl
 						type="select"
 						:options="migrationChoices"
@@ -57,12 +57,12 @@
 				>
 					<!-- Choose Bench Type -->
 					<div
-						class="flex w-full flex-row gap-2 rounded-md border p-1 text-p-base text-gray-800"
+						class="flex w-full flex-row gap-2 rounded-md border p-1 text-p-base text-ink-gray-8"
 					>
 						<div
 							class="w-1/2 text-base cursor-pointer rounded-sm py-2 text-center transition-all"
 							:class="{
-								'bg-gray-100': benchMovementType == 'Create A New Bench',
+								'bg-surface-gray-2': benchMovementType == 'Create A New Bench',
 							}"
 							@click="benchMovementType = 'Create A New Bench'"
 						>
@@ -71,7 +71,7 @@
 						<div
 							class="w-1/2 text-base cursor-pointer rounded-sm py-2 text-center transition-all"
 							:class="{
-								'bg-gray-100': benchMovementType == 'Move To Existing Bench',
+								'bg-surface-gray-2': benchMovementType == 'Move To Existing Bench',
 							}"
 							@click="benchMovementType = 'Move To Existing Bench'"
 						>
@@ -84,7 +84,7 @@
 						class="flex flex-col gap-2"
 						v-if="benchMovementType == 'Move To Existing Bench'"
 					>
-						<p class="text-sm text-gray-700">Select Bench</p>
+						<p class="text-sm text-ink-gray-7">Select Bench</p>
 						<FormControl
 							type="combobox"
 							:options="
@@ -109,7 +109,7 @@
 							selectedReleaseGroupToMoveTo
 						"
 					>
-						<p class="text-sm text-gray-700">Select Server</p>
+						<p class="text-sm text-ink-gray-7">Select Server</p>
 						<FormControl
 							type="combobox"
 							:options="
@@ -131,7 +131,7 @@
 						class="flex flex-col gap-2"
 						v-if="benchMovementType == 'Create A New Bench'"
 					>
-						<p class="text-sm text-gray-700">Provide New Bench Name</p>
+						<p class="text-sm text-ink-gray-7">Provide New Bench Name</p>
 						<FormControl
 							type="text"
 							size="md"
@@ -147,7 +147,7 @@
 						class="flex flex-col gap-2"
 						v-if="benchMovementType == 'Create A New Bench'"
 					>
-						<p class="text-sm text-gray-700">Select Server Type</p>
+						<p class="text-sm text-ink-gray-7">Select Server Type</p>
 						<FormControl
 							type="select"
 							:options="[
@@ -176,7 +176,7 @@
 							selectedServerType == 'Dedicated Server'
 						"
 					>
-						<p class="text-sm text-gray-700">Select Server</p>
+						<p class="text-sm text-ink-gray-7">Select Server</p>
 						<FormControl
 							type="combobox"
 							:options="
@@ -201,7 +201,7 @@
 				>
 					<!-- Chose The Region -->
 					<div class="flex flex-col gap-2">
-						<p class="text-sm text-gray-700">Select Region</p>
+						<p class="text-sm text-ink-gray-7">Select Region</p>
 						<FormControl
 							type="combobox"
 							:options="
@@ -219,7 +219,7 @@
 
 						<p
 							v-if="!$site.doc.group_public"
-							class="mt-1 text-sm text-gray-600"
+							class="mt-1 text-sm text-ink-gray-6"
 							:showIcon="false"
 						>
 							If the region you're looking for isn't available, please follow
@@ -244,7 +244,7 @@
 
 				<!-- Scheduling Option -->
 				<div v-if="showSchedulingOption" class="flex flex-col gap-2">
-					<p class="text-sm text-gray-700">Choose Scheduled Time</p>
+					<p class="text-sm text-ink-gray-7">Choose Scheduled Time</p>
 					<DateTimeControl v-model="scheduledTime" :hideLabel="true" />
 				</div>
 
diff --git a/dashboard/src/components/site/SiteScheduleBackup.vue b/dashboard/src/components/site/SiteScheduleBackup.vue
index f1b451fe57e..be25a300392 100644
--- a/dashboard/src/components/site/SiteScheduleBackup.vue
+++ b/dashboard/src/components/site/SiteScheduleBackup.vue
@@ -17,7 +17,7 @@
 		<template #body-content>
 			<div class="flex flex-col gap-3">
 				<p
-					class="text-md text-base text-gray-800"
+					class="text-md text-base text-ink-gray-8"
 					v-if="!this.$site?.doc?.allow_physical_backup_by_user"
 				>
 					Are you sure you want to backup your site ?
diff --git a/dashboard/src/components/site/SiteUptime.vue b/dashboard/src/components/site/SiteUptime.vue
index 2cf85d8760f..4daa531d6a0 100644
--- a/dashboard/src/components/site/SiteUptime.vue
+++ b/dashboard/src/components/site/SiteUptime.vue
@@ -4,14 +4,14 @@
 			v-if="!data || data[0].date === undefined"
 			class="flex h-5/6 items-center justify-center"
 		>
-			<div class="text-base text-gray-700">No data</div>
+			<div class="text-base text-ink-gray-7">No data</div>
 		</div>
 		<template v-else-if="filteredData?.length > 0">
 			<div
 				class="w-full h-full flex flex-col justify-center items-center px-5 py-3"
 			>
 				<div
-					class="flex justify-between mb-1 w-full text-[11px] text-gray-700 font-normal mt-1"
+					class="flex justify-between mb-1 w-full text-[11px] text-ink-gray-7 font-normal mt-1"
 				>
 					<div>
 						<template v-if="hoveringOn.key">
@@ -73,7 +73,7 @@
 								:class="[
 									'hover:brightness-[110%] border-r border-white',
 									d.value === undefined
-										? 'bg-gray-100'
+										? 'bg-surface-gray-2'
 										: d.value === 1
 											? 'bg-green-500'
 											: d.value === 0
@@ -101,17 +101,17 @@
 					</Button>
 				</div>
 				<div
-					class="flex justify-between w-full text-[11px] text-gray-700 font-normal mt-1"
+					class="flex justify-between w-full text-[11px] text-ink-gray-7 font-normal mt-1"
 				>
 					<div
-						class="flex-shrink transition-all duration-300 bg-gray-200"
+						class="flex-shrink transition-all duration-300 bg-surface-gray-3"
 						:class="highlightDates ? 'bg-opacity-100' : 'bg-opacity-0'"
 					>
 						{{ firstDateTime }}
 					</div>
 
 					<div
-						class="w-fit flex-shrink transition-all duration-300 bg-gray-200"
+						class="w-fit flex-shrink transition-all duration-300 bg-surface-gray-3"
 						:class="highlightDates ? 'bg-opacity-100' : 'bg-opacity-0'"
 					>
 						{{ lastDateTime }}
@@ -232,10 +232,10 @@ export default {
 			const percentValue = (value * 100).toFixed(2);
 			const colour =
 				value === 1
-					? 'text-green-500'
+					? 'text-ink-green-2'
 					: value === 0
-						? 'text-red-500'
-						: 'text-yellow-500';
+						? 'text-ink-red-3'
+						: 'text-ink-amber-2';
 
 			this.hoveringOn = { key: date, value, percentValue, prettyDate, colour };
 		},
diff --git a/dashboard/src/components/site/SiteVersionUpgradeDialog.vue b/dashboard/src/components/site/SiteVersionUpgradeDialog.vue
index a52e47147c4..7a02eb56348 100644
--- a/dashboard/src/components/site/SiteVersionUpgradeDialog.vue
+++ b/dashboard/src/components/site/SiteVersionUpgradeDialog.vue
@@ -10,7 +10,7 @@
 				class="flex items-center justify-center py-8"
 			>
 				<LoadingIndicator class="w-5 h-5 mr-2" />
-				<span class="text-base text-gray-600"
+				<span class="text-base text-ink-gray-6"
 					>Checking upgrade compatibility...</span
 				>
 			</div>
@@ -80,10 +80,10 @@
 							class="space-y-6 mt-4"
 						>
 							<div v-if="appCompatibility.site_custom_apps?.length > 0">
-								<div class="text-sm font-medium text-gray-700 mb-2">
+								<div class="text-sm font-medium text-ink-gray-7 mb-2">
 									Select Branch for Custom Apps
 								</div>
-								<div class="text-xs text-gray-600 mb-3">
+								<div class="text-xs text-ink-gray-6 mb-3">
 									These apps are installed on your site, select a branch
 									compatible with {{ nextVersion }}
 								</div>
@@ -98,7 +98,7 @@
 													{{ app.title }}
 												</div>
 												<div
-													class="text-xs text-gray-600 truncate mt-1"
+													class="text-xs text-ink-gray-6 truncate mt-1"
 													:title="app.repository_url"
 												>
 													{{ app.repository_url }}
@@ -139,7 +139,7 @@
 							</div>
 
 							<div v-if="appCompatibility.other_custom_apps_on_rg?.length > 0">
-								<div class="text-sm font-medium text-gray-700 mb-2">
+								<div class="text-sm font-medium text-ink-gray-7 mb-2">
 									Other Custom Apps on Bench Group (Optional)
 								</div>
 								<table class="w-full table-fixed">
@@ -153,7 +153,7 @@
 													{{ app.title }}
 												</div>
 												<div
-													class="text-xs text-gray-600 truncate mt-1"
+													class="text-xs text-ink-gray-6 truncate mt-1"
 													:title="app.repository_url"
 												>
 													{{ app.repository_url }}
@@ -235,7 +235,7 @@
 					any failure rollback will not be possible."
 					type="warning"
 				></AlertBanner>
-				<p v-if="message && !errorMessage" class="text-sm text-gray-700">
+				<p v-if="message && !errorMessage" class="text-sm text-ink-gray-7">
 					{{ message }}
 				</p>
 				<ErrorMessage :message="errorMessage" />
diff --git a/dashboard/src/components/site/UninstallAppDialog.vue b/dashboard/src/components/site/UninstallAppDialog.vue
index 9fb37740ee9..3073bd6cd4d 100644
--- a/dashboard/src/components/site/UninstallAppDialog.vue
+++ b/dashboard/src/components/site/UninstallAppDialog.vue
@@ -15,7 +15,7 @@
 	>
 		<template #body-content>
 			<div class="space-y-4">
-				<p class="text-p-base text-gray-800">
+				<p class="text-p-base text-ink-gray-8">
 					Are you sure you want to uninstall the
 					<b>{{ app.title || app.app_title }}</b> app from the site
 					<b>{{ site.doc?.host_name || site.doc?.name }}</b>
diff --git a/dashboard/src/components/site/performance/PerformanceReport.vue b/dashboard/src/components/site/performance/PerformanceReport.vue
index f80042d4e31..4de06eacb35 100644
--- a/dashboard/src/components/site/performance/PerformanceReport.vue
+++ b/dashboard/src/components/site/performance/PerformanceReport.vue
@@ -8,7 +8,7 @@
 			<ObjectList :options="reportOptions" />
 		</div>
 		<div class="flex justify-center" v-else>
-			<span class="mt-16 p-2 text-base text-gray-800">
+			<span class="mt-16 p-2 text-base text-ink-gray-8">
 				Your plan doesn't support this feature. Please
 				<span class="cursor-pointer underline" @click="showPlanChangeDialog"
 					>upgrade your plan</span
diff --git a/dashboard/src/components/site/performance/SiteDatabaseProcess.vue b/dashboard/src/components/site/performance/SiteDatabaseProcess.vue
index 60220b18ff8..5affca66e4e 100644
--- a/dashboard/src/components/site/performance/SiteDatabaseProcess.vue
+++ b/dashboard/src/components/site/performance/SiteDatabaseProcess.vue
@@ -19,7 +19,7 @@
 				<div v-if="query">
 					<p class="ml-1 font-mono text-sm">Query:</p>
 					<pre
-						class="mt-1 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-gray-100 p-3 text-sm text-gray-700"
+						class="mt-1 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-surface-gray-2 p-3 text-sm text-ink-gray-7"
 						>{{ query }}</pre
 					>
 				</div>
diff --git a/dashboard/src/components/site/performance/SiteDeadlockReport.vue b/dashboard/src/components/site/performance/SiteDeadlockReport.vue
index 5e3649cc28a..5d9445deab5 100644
--- a/dashboard/src/components/site/performance/SiteDeadlockReport.vue
+++ b/dashboard/src/components/site/performance/SiteDeadlockReport.vue
@@ -76,7 +76,7 @@ export default {
 					{
 						label: 'Table',
 						fieldname: 'table',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						align: 'left',
 						width: '200px',
 					},
diff --git a/dashboard/src/components/site/performance/SitePerformance.vue b/dashboard/src/components/site/performance/SitePerformance.vue
index c2feaa8e626..eeba8586b1a 100644
--- a/dashboard/src/components/site/performance/SitePerformance.vue
+++ b/dashboard/src/components/site/performance/SitePerformance.vue
@@ -46,7 +46,7 @@ export default {
 					{
 						label: 'Description',
 						fieldname: 'description',
-						class: 'text-gray-700',
+						class: 'text-ink-gray-7',
 					},
 					{
 						label: '',
diff --git a/dashboard/src/components/site/performance/SiteRequestLogs.vue b/dashboard/src/components/site/performance/SiteRequestLogs.vue
index b21b20649ea..5a7595fc9cd 100644
--- a/dashboard/src/components/site/performance/SiteRequestLogs.vue
+++ b/dashboard/src/components/site/performance/SiteRequestLogs.vue
@@ -68,7 +68,7 @@ export default {
 						label: 'CPU Time (seconds)',
 						fieldname: 'cpu_time',
 						width: 1,
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						align: 'right',
 						format: (value) => value.toFixed(2),
 					},
diff --git a/dashboard/src/components/site/performance/SiteSlowQueries.vue b/dashboard/src/components/site/performance/SiteSlowQueries.vue
index 30290913483..7c535d3af54 100644
--- a/dashboard/src/components/site/performance/SiteSlowQueries.vue
+++ b/dashboard/src/components/site/performance/SiteSlowQueries.vue
@@ -55,7 +55,7 @@ export default {
 					{
 						label: 'Duration',
 						fieldname: 'duration',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						width: 0.3,
 						align: 'right',
 						format: (value) => value.toFixed(2),
@@ -63,21 +63,21 @@ export default {
 					{
 						label: 'Rows Examined',
 						fieldname: 'rows_examined',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						align: 'right',
 						width: 0.3,
 					},
 					{
 						label: 'Rows Sent',
 						fieldname: 'rows_sent',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						align: 'right',
 						width: 0.3,
 					},
 					{
 						label: 'Count',
 						fieldname: 'count',
-						class: 'text-gray-600',
+						class: 'text-ink-gray-6',
 						align: 'right',
 						width: 0.3,
 					},
diff --git a/dashboard/src/components/site/performance/SiteSlowQueryDialog.vue b/dashboard/src/components/site/performance/SiteSlowQueryDialog.vue
index 2aed6ac689b..96b58376096 100644
--- a/dashboard/src/components/site/performance/SiteSlowQueryDialog.vue
+++ b/dashboard/src/components/site/performance/SiteSlowQueryDialog.vue
@@ -8,7 +8,7 @@
 	>
 		<template #body-content>
 			<pre
-				class="mt-2 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-gray-100 p-3 text-sm text-gray-700"
+				class="mt-2 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-surface-gray-2 p-3 text-sm text-ink-gray-7"
 				>{{ query }}</pre
 			>
 			<div class="mt-2 flex text-sm">
diff --git a/dashboard/src/components/site_database_user/SiteDatabaseAddEditUserDialog.vue b/dashboard/src/components/site_database_user/SiteDatabaseAddEditUserDialog.vue
index 749db14ecc4..07788f00439 100644
--- a/dashboard/src/components/site_database_user/SiteDatabaseAddEditUserDialog.vue
+++ b/dashboard/src/components/site_database_user/SiteDatabaseAddEditUserDialog.vue
@@ -65,7 +65,7 @@
 				<div v-if="mode == 'granular'">
 					<div
 						v-if="isLoadingTableSchemas"
-						class="flex w-full flex-col items-center justify-center gap-2 text-base text-gray-700"
+						class="flex w-full flex-col items-center justify-center gap-2 text-base text-ink-gray-7"
 					>
 						<span class="flex flex-row gap-2 py-20">
 							<Spinner class="w-4" /> Fetching table schemas
@@ -73,7 +73,7 @@
 						<p class="text-sm">This can take upto 5 minutes</p>
 					</div>
 					<div v-else class="mt-2">
-						<p class="text-sm font-medium text-gray-600">
+						<p class="text-sm font-medium text-ink-gray-6">
 							Configure Permissions
 						</p>
 						<ObjectList :options="listOptions" />
diff --git a/dashboard/src/components/site_database_user/SiteDatabaseColumnsSelector.vue b/dashboard/src/components/site_database_user/SiteDatabaseColumnsSelector.vue
index 4a2263fcdde..447a23cbb1e 100644
--- a/dashboard/src/components/site_database_user/SiteDatabaseColumnsSelector.vue
+++ b/dashboard/src/components/site_database_user/SiteDatabaseColumnsSelector.vue
@@ -12,7 +12,7 @@
 		<template #body="{ isOpen, togglePopover }" class="w-full">
 			<div
 				v-show="isOpen"
-				class="bg-surface-white bg absolute right-0 z-[999] mt-1.5 flex max-h-[15rem] w-full list-none flex-col gap-2 overflow-y-auto overflow-x-hidden rounded-lg bg-white p-0 px-1.5 py-1.5 shadow-2xl"
+				class="bg-surface-white bg absolute right-0 z-[999] mt-1.5 flex max-h-[15rem] w-full list-none flex-col gap-2 overflow-y-auto overflow-x-hidden rounded-lg bg-surface-white p-0 px-1.5 py-1.5 shadow-2xl"
 			>
 				<FormControl
 					theme="outline"
diff --git a/dashboard/src/components/site_database_user/SiteDatabaseUserCredentialDialog.vue b/dashboard/src/components/site_database_user/SiteDatabaseUserCredentialDialog.vue
index 93f253bab27..83ae4e859fe 100644
--- a/dashboard/src/components/site_database_user/SiteDatabaseUserCredentialDialog.vue
+++ b/dashboard/src/components/site_database_user/SiteDatabaseUserCredentialDialog.vue
@@ -6,13 +6,13 @@
 		<template #body-content>
 			<div
 				v-if="$resources.databaseCredential.loading"
-				class="flex w-full items-center justify-center gap-2 py-20 text-gray-700"
+				class="flex w-full items-center justify-center gap-2 py-20 text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Loading
 			</div>
 			<div v-else>
 				<div v-if="databaseCredential">
-					<p class="mb-2 text-base font-semibold text-gray-700">
+					<p class="mb-2 text-base font-semibold text-ink-gray-7">
 						Using an Analytics or Business Intelligence Tool
 					</p>
 					<p class="mb-2 text-base">
@@ -42,7 +42,7 @@
 					</p>
 				</div>
 				<div class="pb-2 pt-5">
-					<p class="mb-2 text-base font-semibold text-gray-700">
+					<p class="mb-2 text-base font-semibold text-ink-gray-7">
 						Using MariaDB CLI
 					</p>
 					<p class="mb-2 text-base">
@@ -56,7 +56,7 @@
 					</p>
 				</div>
 				<div class="pb-2 pt-5">
-					<p class="mb-2 text-base font-semibold text-gray-700">SSL Info</p>
+					<p class="mb-2 text-base font-semibold text-ink-gray-7">SSL Info</p>
 					<p class="text-sm">
 						You need to <b>use SSL</b> to connect to the database.
 					</p>
@@ -73,7 +73,7 @@
 					/>
 				</div>
 				<div class="pb-2 pt-5">
-					<p class="mb-2 text-base font-semibold text-gray-700">Need Help?</p>
+					<p class="mb-2 text-base font-semibold text-ink-gray-7">Need Help?</p>
 					<p class="text-sm">
 						Please check out the
 						<a
diff --git a/dashboard/src/components/site_database_user/SiteDatabaseUserLogs.vue b/dashboard/src/components/site_database_user/SiteDatabaseUserLogs.vue
index 9c633291b29..e047c650a0c 100644
--- a/dashboard/src/components/site_database_user/SiteDatabaseUserLogs.vue
+++ b/dashboard/src/components/site_database_user/SiteDatabaseUserLogs.vue
@@ -64,7 +64,7 @@
 				<div class="mt-5">
 					<div
 						v-if="this.$resources.logs.loading"
-						class="flex h-[14.5rem] w-full items-center justify-center gap-2 py-20 text-base text-gray-700"
+						class="flex h-[14.5rem] w-full items-center justify-center gap-2 py-20 text-base text-ink-gray-7"
 					>
 						<Spinner class="w-4" /> Fetching logs...
 					</div>
@@ -76,7 +76,7 @@
 							:isTruncateText="true"
 							:truncateLength="70"
 						/>
-						<p class="mt-2 text-sm text-gray-700">
+						<p class="mt-2 text-sm text-ink-gray-7">
 							<span class="font-semibold">NOTE :</span> Search result will show
 							max 500 logs.
 						</p>
diff --git a/dashboard/src/components/utils/CommitChooser.vue b/dashboard/src/components/utils/CommitChooser.vue
index 259e719417b..6af93060981 100644
--- a/dashboard/src/components/utils/CommitChooser.vue
+++ b/dashboard/src/components/utils/CommitChooser.vue
@@ -33,7 +33,7 @@
 
 					<div
 						v-if="!searchQuery.length"
-						class="text-xs font-medium text-gray-500 py-2 pl-2"
+						class="text-xs font-medium text-ink-gray-5 py-2 pl-2"
 					>
 						Recent
 					</div>
@@ -45,7 +45,7 @@
 						v-for="option in displayedOptions"
 						:key="option.value"
 						@click="!option.is_yanked && selectOption(option, togglePopover)"
-						class="flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base hover:bg-gray-50"
+						class="flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base hover:bg-surface-gray-1"
 						:class="{
 							'bg-surface-gray-3': isSelected(option),
 							'opacity-50 cursor-not-allowed': option.is_yanked,
@@ -77,13 +77,13 @@
 							</span>
 							<span
 								v-if="option.is_yanked"
-								class="text-xs text-red-500 font-medium"
+								class="text-xs text-ink-red-3 font-medium"
 							>
 								Yanked
 							</span>
 						</div>
 					</div>
-					<div class="*:text-center *:mb-2 *:mt-3 *:text-xs *:text-gray-400">
+					<div class="*:text-center *:mb-2 *:mt-3 *:text-xs *:text-ink-gray-4">
 						<div v-if="$resources.releases.loading && !!searchQuery.length">
 							Searching...
 						</div>
diff --git a/dashboard/src/components/utils/UseTheme.ts b/dashboard/src/components/utils/UseTheme.ts
new file mode 100644
index 00000000000..b40c3da704e
--- /dev/null
+++ b/dashboard/src/components/utils/UseTheme.ts
@@ -0,0 +1,34 @@
+import { onMounted } from "vue";
+
+type Theme = "light" | "dark" | "system";
+
+const getSystemTheme = (): "light" | "dark" => {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+export const setTheme = (name: Theme) => {
+  let themeType = name == "system" ? getSystemTheme() : name;
+  document.documentElement.setAttribute("data-theme", themeType);
+  localStorage.setItem("theme", name);
+};
+
+export const initializeTheme = () => {
+  onMounted(() => {
+    let storedTheme = localStorage.getItem("theme") as Theme || 'system';
+    setTheme(storedTheme);
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    const handleSystemThemeChange = () => {
+      if (localStorage.theme === "system") setTheme("system");
+    };
+
+    mediaQuery.addEventListener("change", handleSystemThemeChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleSystemThemeChange);
+    };
+  });
+};
diff --git a/dashboard/src/dialogs/AppVersionsDialog.vue b/dashboard/src/dialogs/AppVersionsDialog.vue
index eebd8a2bdb3..9f6161de59f 100644
--- a/dashboard/src/dialogs/AppVersionsDialog.vue
+++ b/dashboard/src/dialogs/AppVersionsDialog.vue
@@ -9,13 +9,13 @@
 		<template #body-content>
 			<div
 				v-if="$resources?.showAppVersions?.loading"
-				class="flex h-80 w-full items-center justify-center gap-2 text-base text-gray-700"
+				class="flex h-80 w-full items-center justify-center gap-2 text-base text-ink-gray-7"
 			>
 				<Spinner class="w-4" /> Fetching app versions ...
 			</div>
 			<div
 				v-else-if="$resources?.showAppVersions?.error"
-				class="flex h-80 w-full items-center justify-center text-red-600"
+				class="flex h-80 w-full items-center justify-center text-ink-red-4"
 			>
 				Failed to fetch app versions
 			</div>
diff --git a/dashboard/src/dialogs/ConfirmDialog.vue b/dashboard/src/dialogs/ConfirmDialog.vue
index b8728dc298e..2f3c4003e0c 100644
--- a/dashboard/src/dialogs/ConfirmDialog.vue
+++ b/dashboard/src/dialogs/ConfirmDialog.vue
@@ -2,7 +2,11 @@
 	<Dialog v-model="showDialog" :options="{ title }">
 		<template #body-content>
 			<div class="space-y-4">
-				<p class="text-p-base text-gray-800" v-if="message" v-html="message" />
+				<p
+					class="text-p-base text-ink-gray-8"
+					v-if="message"
+					v-html="message"
+				/>
 				<div class="space-y-4">
 					<template v-for="field in fields" :key="field.fieldname">
 						<LinkControl
diff --git a/dashboard/src/objects/bench.ts b/dashboard/src/objects/bench.ts
index 5313eabbcb5..0074265f2f5 100644
--- a/dashboard/src/objects/bench.ts
+++ b/dashboard/src/objects/bench.ts
@@ -177,7 +177,7 @@ function getInPlaceUpdatesSuffix(row: Row) {
 		'div',
 		{
 			title,
-			class: 'rounded-full bg-gray-100 p-1'
+			class: 'rounded-full bg-surface-gray-2 p-1'
 		},
 		h(icon('star', 'w-3 h-3'))
 	);
@@ -188,7 +188,7 @@ function getAppPatchSuffix(row: Row) {
 		'div',
 		{
 			title: 'Apps in this bench may have been patched',
-			class: 'rounded-full bg-gray-100 p-1'
+			class: 'rounded-full bg-surface-gray-2 p-1'
 		},
 		h(icon('hash', 'w-3 h-3'))
 	);
diff --git a/dashboard/src/objects/common/apps.ts b/dashboard/src/objects/common/apps.ts
index f38ec90b619..20aefe8769b 100644
--- a/dashboard/src/objects/common/apps.ts
+++ b/dashboard/src/objects/common/apps.ts
@@ -88,7 +88,7 @@ function getAppsTabColumns(forSite: boolean) {
 					'div',
 					{
 						title: 'App has been patched',
-						class: 'rounded-full bg-gray-100 p-1',
+						class: 'rounded-full bg-surface-gray-2 p-1',
 					},
 					h(icon('hash', 'w-3 h-3'))
 				);
@@ -98,7 +98,7 @@ function getAppsTabColumns(forSite: boolean) {
 		{
 			label: 'Plan',
 			width: 0.75,
-			class: 'text-gray-600 text-sm',
+			class: 'text-ink-gray-6 text-sm',
 			format(_, row) {
 				const planText = planTitle(row.plan_info);
 				if (planText) return `${planText}/mo`;
diff --git a/dashboard/src/objects/group.js b/dashboard/src/objects/group.js
index 97d5270760d..d767f5b085b 100644
--- a/dashboard/src/objects/group.js
+++ b/dashboard/src/objects/group.js
@@ -95,7 +95,7 @@ export default {
 			{
 				label: 'Sites',
 				fieldname: 'site_count',
-				class: 'text-gray-600',
+				class: 'text-ink-gray-6',
 				width: 0.25,
 			},
 		],
@@ -227,7 +227,7 @@ export default {
 									{
 										text: "What's this?",
 										placement: 'top',
-										class: 'rounded-full bg-gray-100 p-1',
+										class: 'rounded-full bg-surface-gray-2 p-1',
 									},
 									() => [
 										h(
@@ -477,7 +477,7 @@ export default {
 									{
 										text: 'Attention required!',
 										placement: 'top',
-										class: 'rounded-full bg-gray-100 p-1',
+										class: 'rounded-full bg-surface-gray-2 p-1',
 									},
 									() => h(icon('alert-circle', 'w-3 h-3'), {}),
 								);
@@ -487,7 +487,7 @@ export default {
 							label: 'Duration',
 							fieldname: 'build_duration',
 							format: duration,
-							class: 'text-gray-600',
+							class: 'text-ink-gray-6',
 							width: 1,
 						},
 						{
@@ -510,9 +510,7 @@ export default {
 								} else if (group.doc.deploy_information.update_available) {
 									let UpdateReleaseGroupDialog = defineAsyncComponent(
 										() =>
-											import(
-												'../components/group/UpdateReleaseGroupDialog.vue'
-											),
+											import('../components/group/UpdateReleaseGroupDialog.vue'),
 									);
 									renderDialog(
 										h(UpdateReleaseGroupDialog, {
@@ -790,7 +788,7 @@ export default {
 									{
 										text: 'Custom version',
 										placement: 'top',
-										class: 'rounded-full bg-gray-100 p-1',
+										class: 'rounded-full bg-surface-gray-2 p-1',
 									},
 									() => h(icon('alert-circle', 'w-3 h-3'), {}),
 								);
@@ -886,9 +884,7 @@ export default {
 								onClick() {
 									let ConfigEditorDialog = defineAsyncComponent(
 										() =>
-											import(
-												'../components/EnvironmentVariableEditorDialog.vue'
-											),
+											import('../components/EnvironmentVariableEditorDialog.vue'),
 									);
 									renderDialog(
 										h(ConfigEditorDialog, {
diff --git a/dashboard/src/objects/marketplace.js b/dashboard/src/objects/marketplace.js
index 3b234cd0f96..bcb7f3c185c 100644
--- a/dashboard/src/objects/marketplace.js
+++ b/dashboard/src/objects/marketplace.js
@@ -46,7 +46,7 @@ export default {
 								'div',
 								{
 									class:
-										'w-6 h-6 rounded bg-gray-300 text-gray-600 flex items-center justify-center',
+										'w-6 h-6 rounded bg-surface-gray-4 text-ink-gray-6 flex items-center justify-center',
 								},
 								row.title[0].toUpperCase(),
 							);
diff --git a/dashboard/src/objects/notification.js b/dashboard/src/objects/notification.js
index e402cf66912..44a65a64028 100644
--- a/dashboard/src/objects/notification.js
+++ b/dashboard/src/objects/notification.js
@@ -105,7 +105,7 @@ export default {
 									h(
 										'div',
 										{
-											class: 'ml-2  text-red-500',
+											class: 'ml-2  text-ink-red-3',
 										},
 										h(AlertIcon),
 									),
@@ -121,7 +121,7 @@ export default {
 				width: '40rem',
 				component({ row }) {
 					return h('div', {
-						class: 'truncate text-base text-gray-600',
+						class: 'truncate text-base text-ink-gray-6',
 						// replace all html tags except <b>
 						innerHTML: row.message
 							.replace(/<(?!\/?b\b)[^>]*>/g, '')
diff --git a/dashboard/src/objects/server.js b/dashboard/src/objects/server.js
index 214fd4bd972..e43466f39e5 100644
--- a/dashboard/src/objects/server.js
+++ b/dashboard/src/objects/server.js
@@ -663,9 +663,7 @@ export default {
 									h(
 										defineAsyncComponent(
 											() =>
-												import(
-													'../components/server/ServerNewSnapshotDialog.vue'
-												),
+												import('../components/server/ServerNewSnapshotDialog.vue'),
 										),
 										{
 											server: server.name,
@@ -685,9 +683,7 @@ export default {
 								onClick() {
 									let ServerSnapshotDetailsDialog = defineAsyncComponent(
 										() =>
-											import(
-												'../components/server/ServerSnapshotDetailsDialog.vue'
-											),
+											import('../components/server/ServerSnapshotDetailsDialog.vue'),
 									);
 									renderDialog(
 										h(ServerSnapshotDetailsDialog, {
@@ -702,9 +698,7 @@ export default {
 								onClick() {
 									let ServerSnapshotRecoverSitesDialog = defineAsyncComponent(
 										() =>
-											import(
-												'../components/server/ServerSnapshotRecoverSitesDialog.vue'
-											),
+											import('../components/server/ServerSnapshotRecoverSitesDialog.vue'),
 									);
 									renderDialog(
 										h(ServerSnapshotRecoverSitesDialog, {
@@ -1013,7 +1007,7 @@ export default {
 						{
 							label: 'Description',
 							fieldname: 'reason',
-							class: 'text-gray-600',
+							class: 'text-ink-gray-6',
 						},
 						{
 							label: '',
diff --git a/dashboard/src/objects/site.js b/dashboard/src/objects/site.js
index 18032b42bc1..98ffcc35187 100644
--- a/dashboard/src/objects/site.js
+++ b/dashboard/src/objects/site.js
@@ -453,7 +453,7 @@ export default {
 													default: () => {
 														return h('pre', {
 															class:
-																'whitespace-pre-wrap text-sm rounded border-2 p-3 border-gray-200 bg-gray-100',
+																'whitespace-pre-wrap text-sm rounded border-2 p-3 border-gray-200 bg-surface-gray-2',
 															innerHTML: site.doc.broken_domain_error,
 														});
 													},
@@ -781,7 +781,7 @@ export default {
 									site.doc?.host_name || site.doc?.name
 								}</b> that was created on ${date(backup.creation, 'llll')}.${
 									!backup.offsite
-										? '<br><br><div class="p-2 bg-gray-100 rounded border-gray-200">You have to be logged in as a <b>System Manager</b> <em>in your site</em> to download the backup.<div>'
+										? '<br><br><div class="p-2 bg-surface-gray-2 rounded border-gray-200">You have to be logged in as a <b>System Manager</b> <em>in your site</em> to download the backup.<div>'
 										: ''
 								}`,
 								onSuccess({ hide }) {
@@ -1614,7 +1614,7 @@ export default {
 						{
 							label: 'Description',
 							fieldname: 'reason',
-							class: 'text-gray-600',
+							class: 'text-ink-gray-6',
 						},
 						{
 							label: '',
diff --git a/dashboard/src/objects/tabs/site/logs.ts b/dashboard/src/objects/tabs/site/logs.ts
index 11cb9e07d50..a96d907b51e 100644
--- a/dashboard/src/objects/tabs/site/logs.ts
+++ b/dashboard/src/objects/tabs/site/logs.ts
@@ -41,7 +41,7 @@ export function getLogsTab(forSite: boolean) {
 				{
 					label: 'Size',
 					fieldname: 'size',
-					class: 'text-gray-600',
+					class: 'text-ink-gray-6',
 					format(value) {
 						return `${value} kB`;
 					}
diff --git a/dashboard/src/pages/404.vue b/dashboard/src/pages/404.vue
index 1f365b6fb96..0bc5a1d68e1 100644
--- a/dashboard/src/pages/404.vue
+++ b/dashboard/src/pages/404.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex h-screen flex-col items-center justify-center p-5">
-		<div class="text-[4rem] text-gray-900">404</div>
-		<div class="text-base text-gray-600">Page not found</div>
+		<div class="text-[4rem] text-ink-gray-9">404</div>
+		<div class="text-base text-ink-gray-6">Page not found</div>
 		<Button class="mt-4" route="/sites" variant="outline">
 			Go to Site list
 		</Button>
diff --git a/dashboard/src/pages/Billing.vue b/dashboard/src/pages/Billing.vue
index 960e51d135f..59b79e33f0b 100644
--- a/dashboard/src/pages/Billing.vue
+++ b/dashboard/src/pages/Billing.vue
@@ -11,9 +11,9 @@
 		/>
 		<div
 			v-else
-			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
+			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-ink-gray-6"
 		>
-			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
+			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-ink-red-4" />
 			<ErrorMessage message="You aren't permitted to view the billing page" />
 		</div>
 	</div>
diff --git a/dashboard/src/pages/BillingForecast.vue b/dashboard/src/pages/BillingForecast.vue
index 3ff3758339a..2544cef13bd 100644
--- a/dashboard/src/pages/BillingForecast.vue
+++ b/dashboard/src/pages/BillingForecast.vue
@@ -51,7 +51,10 @@
 						<DonutChart :config="donutConfig" />
 					</div>
 				</div>
-				<div v-else class="flex h-64 items-center justify-center text-gray-500">
+				<div
+					v-else
+					class="flex h-64 items-center justify-center text-ink-gray-5"
+				>
 					No usage data available for this month
 				</div>
 			</div>
diff --git a/dashboard/src/pages/BillingInvoices.vue b/dashboard/src/pages/BillingInvoices.vue
index aa9c473614b..ed20a8f463d 100644
--- a/dashboard/src/pages/BillingInvoices.vue
+++ b/dashboard/src/pages/BillingInvoices.vue
@@ -9,7 +9,7 @@
 				<template v-if="showInvoice">
 					<div
 						v-if="showInvoice.status === 'Empty'"
-						class="text-base text-gray-600"
+						class="text-base text-ink-gray-6"
 					>
 						Nothing to show
 					</div>
@@ -212,7 +212,7 @@ export default {
 										e.stopPropagation();
 										confirmDialog({
 											title: 'Payment Failed',
-											message: `<div class="space-y-4"><p class="text-base">Your payment with the card ending <strong>${row.stripe_payment_failed_card}</strong> failed for this invoice due to the following reason:</p><div class="text-sm font-mono text-gray-600 rounded p-2 bg-gray-100">${row.stripe_payment_error}</div><p class="text-base">Please change your payment method to pay this invoice.</p></div>`,
+											message: `<div class="space-y-4"><p class="text-base">Your payment with the card ending <strong>${row.stripe_payment_failed_card}</strong> failed for this invoice due to the following reason:</p><div class="text-sm font-mono text-ink-gray-6 rounded p-2 bg-surface-gray-2">${row.stripe_payment_error}</div><p class="text-base">Please change your payment method to pay this invoice.</p></div>`,
 											primaryAction: {
 												label: 'Change Payment Method',
 												variant: 'solid',
diff --git a/dashboard/src/pages/BillingMarketplacePayouts.vue b/dashboard/src/pages/BillingMarketplacePayouts.vue
index 24f7499fdf7..0f1ca4e5265 100644
--- a/dashboard/src/pages/BillingMarketplacePayouts.vue
+++ b/dashboard/src/pages/BillingMarketplacePayouts.vue
@@ -9,7 +9,7 @@
 				<template v-if="showPayout">
 					<div
 						v-if="showPayout.status === 'Empty'"
-						class="text-base text-gray-600"
+						class="text-base text-ink-gray-6"
 					>
 						Nothing to show
 					</div>
diff --git a/dashboard/src/pages/BillingPaymentMethods.vue b/dashboard/src/pages/BillingPaymentMethods.vue
index 2017ef6af61..b159b49ee24 100644
--- a/dashboard/src/pages/BillingPaymentMethods.vue
+++ b/dashboard/src/pages/BillingPaymentMethods.vue
@@ -71,7 +71,7 @@ export default {
 							if (row.stripe_mandate_id) {
 								return h(FeatherIcon, {
 									name: 'check-circle',
-									class: 'h-4 w-4 text-green-600',
+									class: 'h-4 w-4 text-ink-green-3',
 								});
 							}
 						},
@@ -90,7 +90,7 @@ export default {
 									() =>
 										h(FeatherIcon, {
 											name: 'alert-circle',
-											class: 'h-4 w-4 text-red-600',
+											class: 'h-4 w-4 text-ink-red-4',
 										}),
 								);
 							}
diff --git a/dashboard/src/pages/CheckoutAddress.vue b/dashboard/src/pages/CheckoutAddress.vue
index 8d38283c2d0..56006d01072 100644
--- a/dashboard/src/pages/CheckoutAddress.vue
+++ b/dashboard/src/pages/CheckoutAddress.vue
@@ -54,7 +54,7 @@
 			</div>
 
 			<div v-show="currency === 'INR'">
-				<span class="mb-2 block text-sm leading-4 text-gray-700">
+				<span class="mb-2 block text-sm leading-4 text-ink-gray-7">
 					GSTIN(only for Indian customers)
 				</span>
 				<FormControl
diff --git a/dashboard/src/pages/CheckoutPayment.vue b/dashboard/src/pages/CheckoutPayment.vue
index 30406b358c0..16196902c0d 100644
--- a/dashboard/src/pages/CheckoutPayment.vue
+++ b/dashboard/src/pages/CheckoutPayment.vue
@@ -4,12 +4,12 @@
 			v-if="!ready"
 			class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-8 transform"
 		>
-			<Spinner class="h-5 w-5 text-gray-600" />
+			<Spinner class="h-5 w-5 text-ink-gray-6" />
 		</div>
 		<div :class="{ 'opacity-0': !ready }">
 			<div>
 				<label class="block">
-					<span class="block text-xs text-gray-600">
+					<span class="block text-xs text-ink-gray-6">
 						Credit or Debit Card
 					</span>
 					<div
@@ -104,7 +104,7 @@ export default {
 				style: style,
 				classes: {
 					complete: '',
-					focus: 'bg-gray-100',
+					focus: 'bg-surface-gray-2',
 				},
 			});
 			this.card.mount(this.$refs['card-element']);
diff --git a/dashboard/src/pages/CheckoutPlans.vue b/dashboard/src/pages/CheckoutPlans.vue
index 04984bc4ca3..5aed527abb5 100644
--- a/dashboard/src/pages/CheckoutPlans.vue
+++ b/dashboard/src/pages/CheckoutPlans.vue
@@ -5,7 +5,7 @@
 			class="m-2 flex flex-col justify-between rounded-2xl border border-gray-100 p-4 shadow"
 		>
 			<div>
-				<h4 class="flex justify-between text-xl font-semibold text-gray-900">
+				<h4 class="flex justify-between text-xl font-semibold text-ink-gray-9">
 					<div>
 						<span>
 							{{
@@ -13,7 +13,7 @@
 									? '₹' + plan.price_inr
 									: '$' + plan.price_usd
 							}}
-							<span class="text-base font-normal text-gray-600">
+							<span class="text-base font-normal text-ink-gray-6">
 								{{ plan.block_monthly === 1 ? '/year' : '/mo' }}
 							</span>
 						</span>
diff --git a/dashboard/src/pages/CreateSiteForMarketplaceApp.vue b/dashboard/src/pages/CreateSiteForMarketplaceApp.vue
index 639d665d690..e6b0d21e879 100644
--- a/dashboard/src/pages/CreateSiteForMarketplaceApp.vue
+++ b/dashboard/src/pages/CreateSiteForMarketplaceApp.vue
@@ -12,7 +12,7 @@
 		</Header>
 
 		<div class="m-12 mx-auto max-w-2xl px-5">
-			<div v-if="$resources.app.loading" class="py-4 text-base text-gray-600">
+			<div v-if="$resources.app.loading" class="py-4 text-base text-ink-gray-6">
 				Loading...
 			</div>
 			<div v-else class="space-y-6">
@@ -24,13 +24,13 @@
 					/>
 					<div class="my-1 ml-4 flex flex-col justify-between">
 						<h1 class="text-lg font-semibold">{{ appDoc.title }}</h1>
-						<p class="text-sm text-gray-600">{{ appDoc.description }}</p>
+						<p class="text-sm text-ink-gray-6">{{ appDoc.description }}</p>
 					</div>
 				</div>
 
 				<div
 					v-if="failure"
-					class="flex items-center space-x-2 rounded border border-gray-200 bg-gray-100 p-4 text-base text-gray-700"
+					class="flex items-center space-x-2 rounded border border-gray-200 bg-surface-gray-2 p-4 text-base text-ink-gray-7"
 				>
 					<lucide-alert-circle class="inline-block h-5 w-5" />
 					<p>
@@ -45,7 +45,7 @@
 						.
 					</p>
 				</div>
-				<div class="divide-y rounded-lg bg-gray-50 px-4">
+				<div class="divide-y rounded-lg bg-surface-gray-1 px-4">
 					<div
 						v-for="step in steps"
 						:key="step.id"
@@ -53,7 +53,7 @@
 					>
 						<div class="flex items-center space-x-4">
 							<LoadingIndicator
-								class="h-4 w-4 text-gray-900"
+								class="h-4 w-4 text-ink-gray-9"
 								v-if="step.icon() === 'loading'"
 							/>
 							<FeatherIcon
@@ -64,7 +64,7 @@
 								:class="{
 									'bg-green-500': step.icon() === 'check',
 									'bg-red-500': step.icon() === 'x',
-									'bg-gray-500': step.icon() === 'clock',
+									'bg-surface-gray-10': step.icon() === 'clock',
 								}"
 							/>
 							<div class="flex flex-col space-y-1">
diff --git a/dashboard/src/pages/DeployCandidate.vue b/dashboard/src/pages/DeployCandidate.vue
index 361b7bde5db..bc7f62a3403 100644
--- a/dashboard/src/pages/DeployCandidate.vue
+++ b/dashboard/src/pages/DeployCandidate.vue
@@ -32,7 +32,7 @@
 
 		<div class="mt-3">
 			<div class="flex w-full items-center">
-				<h2 class="text-lg font-large text-gray-900">
+				<h2 class="text-lg font-large text-ink-gray-9">
 					{{ deploy.deploy_candidate }}
 				</h2>
 				<Badge class="ml-2" :label="deploy.status" />
@@ -66,34 +66,34 @@
 			<div>
 				<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creation</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creation</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ $format.date(deploy.creation, 'lll') }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creator</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creator</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ deploy.owner }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Duration</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Duration</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{
 								deploy.build_end ? $format.duration(deploy.build_duration) : '-'
 							}}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Start</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Start</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ $format.date(deploy.build_start, 'lll') }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">End</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">End</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{
 								deploy.build_end ? $format.date(deploy.build_end, 'lll') : '-'
 							}}
@@ -284,7 +284,7 @@ export default {
 				title: 'Fail Running Build',
 				message: `
 				Are you sure you want to fail this running build?<br><br>
-				<div class="text-bg-base bg-gray-100 p-2 rounded-md">
+				<div class="text-bg-base bg-surface-gray-2 p-2 rounded-md">
 				This will <strong>stop the current build immediately</strong>.  
 				All progress made so far will be <strong>discarded</strong>, and the next triggered build will start from scratch.
 				<br><br>
diff --git a/dashboard/src/pages/DetailPage.vue b/dashboard/src/pages/DetailPage.vue
index 1b12e6996d4..e9b0fa86d61 100644
--- a/dashboard/src/pages/DetailPage.vue
+++ b/dashboard/src/pages/DetailPage.vue
@@ -1,5 +1,5 @@
 <template>
-	<Header class="sticky top-0 z-10 bg-white">
+	<Header class="sticky top-0 z-10 bg-surface-white">
 		<div class="w-full sm:flex sm:justify-between sm:items-center">
 			<div class="flex items-center space-x-2">
 				<FBreadcrumbs :items="breadcrumbs" />
diff --git a/dashboard/src/pages/EnableBenchGroups.vue b/dashboard/src/pages/EnableBenchGroups.vue
index 287400d85bf..425a4d7a068 100644
--- a/dashboard/src/pages/EnableBenchGroups.vue
+++ b/dashboard/src/pages/EnableBenchGroups.vue
@@ -6,18 +6,18 @@
 			<div class="prose prose-sm max-w-none">
 				<h1 class="text-2xl font-semibold">Benches</h1>
 				<p class="text-p-base">
-					With Benches, you get more control. You can choose which apps to
-					add, which apps to update, which region to deploy to and more.
+					With Benches, you get more control. You can choose which apps to add,
+					which apps to update, which region to deploy to and more.
 				</p>
 			</div>
 			<div class="space-y-3">
-				<h2 class="text-sm font-semibold tracking-wide text-gray-700">
+				<h2 class="text-sm font-semibold tracking-wide text-ink-gray-7">
 					Features
 				</h2>
 				<ul class="space-y-2">
 					<li v-for="f in features" :key="f" class="flex items-center gap-2">
 						<GreenCheckIcon class="h-4 w-4 shrink-0" />
-						<span class="text-sm text-gray-700">{{ f }}</span>
+						<span class="text-sm text-ink-gray-7">{{ f }}</span>
 					</li>
 				</ul>
 				<div>
@@ -29,7 +29,7 @@
 					>
 				</div>
 				<div v-if="!onboardingComplete" class="pt-2">
-					<p class="text-sm text-gray-700">
+					<p class="text-sm text-ink-gray-7">
 						Finish onboarding to start using Benches.
 					</p>
 					<Button
diff --git a/dashboard/src/pages/EnableServers.vue b/dashboard/src/pages/EnableServers.vue
index 13b620b65db..0b30d427e24 100644
--- a/dashboard/src/pages/EnableServers.vue
+++ b/dashboard/src/pages/EnableServers.vue
@@ -8,19 +8,18 @@
 				<p class="text-p-base">
 					With Servers on Frappe Cloud, you now get dedicated compute resources
 					for your sites. Servers come in pairs (Application + Database). You
-					can run as many sites and benches as you want. All other features
-					like Private Benches, SSH Access, Database Access work as is with
-					servers.
+					can run as many sites and benches as you want. All other features like
+					Private Benches, SSH Access, Database Access work as is with servers.
 				</p>
 			</div>
 			<div class="space-y-3">
-				<h2 class="text-sm font-semibold tracking-wide text-gray-700">
+				<h2 class="text-sm font-semibold tracking-wide text-ink-gray-7">
 					Features
 				</h2>
 				<ul class="space-y-2">
 					<li v-for="f in features" :key="f" class="flex items-center gap-2">
 						<GreenCheckIcon class="h-4 w-4 shrink-0" />
-						<span class="text-sm text-gray-700">{{ f }}</span>
+						<span class="text-sm text-ink-gray-7">{{ f }}</span>
 					</li>
 				</ul>
 				<div>
@@ -32,7 +31,7 @@
 					>
 				</div>
 				<div v-if="!onboardingComplete" class="pt-2">
-					<p class="text-sm text-gray-700">
+					<p class="text-sm text-ink-gray-7">
 						Finish onboarding to start using Servers.
 					</p>
 					<Button
diff --git a/dashboard/src/pages/Home.vue b/dashboard/src/pages/Home.vue
index 5525ebc9695..3405dd27958 100644
--- a/dashboard/src/pages/Home.vue
+++ b/dashboard/src/pages/Home.vue
@@ -14,7 +14,7 @@
 					:disabled="!$team.doc?.payment_mode"
 				>
 					<template #suffix>
-						<lucide-chevron-down class="h-4 w-4 text-gray-300" />
+						<lucide-chevron-down class="h-4 w-4 text-ink-gray-3" />
 					</template>
 				</Button>
 			</Dropdown>
diff --git a/dashboard/src/pages/InstallApp.vue b/dashboard/src/pages/InstallApp.vue
index 368ce9ac5b6..a29ec0c648f 100644
--- a/dashboard/src/pages/InstallApp.vue
+++ b/dashboard/src/pages/InstallApp.vue
@@ -13,7 +13,7 @@
 		<div class="m-12 mx-auto max-w-2xl px-5">
 			<div
 				v-if="$resources.installAppOptions.loading"
-				class="py-4 text-base text-gray-600"
+				class="py-4 text-base text-ink-gray-6"
 			>
 				Loading...
 			</div>
@@ -26,7 +26,7 @@
 					/>
 					<div class="my-1 ml-4 flex flex-col justify-between">
 						<h1 class="text-lg font-semibold">{{ appDoc.title }}</h1>
-						<p class="text-sm text-gray-600">{{ appDoc.description }}</p>
+						<p class="text-sm text-ink-gray-6">{{ appDoc.description }}</p>
 					</div>
 				</div>
 
@@ -34,7 +34,7 @@
 					<div v-if="$team.doc.onboarding.site_created">
 						<div v-if="plans.length">
 							<div class="flex items-center justify-between">
-								<h2 class="text-base font-medium leading-6 text-gray-900">
+								<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 									Select Plan
 								</h2>
 							</div>
@@ -44,9 +44,9 @@
 						</div>
 
 						<div v-if="options.private_groups.length">
-							<h2 class="text-base font-medium leading-6 text-gray-900">
+							<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 								Select Bench
-								<span class="text-sm text-gray-500"> (Optional) </span>
+								<span class="text-sm text-ink-gray-5"> (Optional) </span>
 							</h2>
 							<div class="mt-2 w-full space-y-2">
 								<FormControl
@@ -69,7 +69,7 @@
 					</div>
 
 					<div>
-						<h2 class="text-base font-medium leading-6 text-gray-900">
+						<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 							Select Region
 						</h2>
 						<div class="mt-2 w-full space-y-2">
@@ -80,9 +80,9 @@
 									@click="cluster = c.name"
 									:class="[
 										cluster === c.name
-											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-											: 'bg-white text-gray-900  hover:bg-gray-50',
-										'flex w-full items-center rounded border p-3 text-left text-base text-gray-900',
+											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+											: 'bg-surface-white text-ink-gray-9  hover:bg-surface-gray-1',
+										'flex w-full items-center rounded border p-3 text-left text-base text-ink-gray-9',
 									]"
 								>
 									<div class="flex w-full items-center justify-between">
@@ -100,7 +100,7 @@
 					</div>
 
 					<div>
-						<h2 class="text-base font-medium leading-6 text-gray-900">
+						<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 							Enter Subdomain
 						</h2>
 						<div class="mt-2 items-center">
@@ -111,7 +111,7 @@
 									v-model="subdomain"
 								/>
 								<div
-									class="flex items-center rounded-r bg-gray-100 px-4 text-base"
+									class="flex items-center rounded-r bg-surface-gray-2 px-4 text-base"
 								>
 									.{{ options.domain }}
 								</div>
@@ -122,7 +122,7 @@
 							<ErrorMessage :message="$resources.subdomainExists.error" />
 							<div
 								v-if="$resources.subdomainExists.loading"
-								class="text-sm text-gray-600"
+								class="text-sm text-ink-gray-6"
 							>
 								Checking...
 							</div>
@@ -134,11 +134,11 @@
 							>
 								<div
 									v-if="$resources.subdomainExists.data"
-									class="text-sm text-green-600"
+									class="text-sm text-ink-green-3"
 								>
 									{{ subdomain }}.{{ options.domain }} is available
 								</div>
-								<div v-else class="text-sm text-red-600">
+								<div v-else class="text-sm text-ink-red-4">
 									{{ subdomain }}.{{ options.domain }} is not available
 								</div>
 							</template>
@@ -168,7 +168,7 @@
 					</div>
 				</div>
 				<div class="flex space-x-1">
-					<div class="text-sm text-gray-600">
+					<div class="text-sm text-ink-gray-6">
 						Want to install <b>{{ appDoc.title }}</b> on an existing Site or
 						Bench?
 					</div>
diff --git a/dashboard/src/pages/JobPage.vue b/dashboard/src/pages/JobPage.vue
index 27f278716fd..fd1fee46d88 100644
--- a/dashboard/src/pages/JobPage.vue
+++ b/dashboard/src/pages/JobPage.vue
@@ -24,7 +24,9 @@
 		<div class="mt-3">
 			<div>
 				<div class="flex items-center">
-					<h2 class="text-lg font-medium text-gray-900">{{ job.job_type }}</h2>
+					<h2 class="text-lg font-medium text-ink-gray-9">
+						{{ job.job_type }}
+					</h2>
 					<Badge class="ml-2" :label="job.status" />
 					<div class="ml-auto flex items-center space-x-2">
 						<Button
@@ -51,32 +53,32 @@
 						class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5"
 					>
 						<div>
-							<div class="text-sm font-medium text-gray-500">Creation</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Creation</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ $format.date(job.creation, 'lll') }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">Creator</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Creator</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ job.owner }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">Duration</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Duration</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ job.end ? $format.duration(job.duration) : '-' }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">Start</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Start</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ $format.date(job.start, 'lll') }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">End</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">End</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ job.end ? $format.date(job.end, 'lll') : '-' }}
 							</div>
 						</div>
diff --git a/dashboard/src/pages/LogPage.vue b/dashboard/src/pages/LogPage.vue
index 16478b87002..d868e021a35 100644
--- a/dashboard/src/pages/LogPage.vue
+++ b/dashboard/src/pages/LogPage.vue
@@ -13,7 +13,7 @@
 					<lucide-arrow-left class="inline-block h-4 w-4" />
 				</template>
 			</Button>
-			<h2 class="text-lg font-medium text-gray-900">{{ logName }}</h2>
+			<h2 class="text-lg font-medium text-ink-gray-9">{{ logName }}</h2>
 			<div class="!ml-auto flex gap-2">
 				<Button
 					:route="{
@@ -44,7 +44,7 @@
 		<div class="mt-3">
 			<div class="mt-8 space-y-4">
 				<div
-					class="overflow-auto rounded border border-gray-100 bg-gray-900 px-2.5 py-2 text-sm text-gray-200"
+					class="overflow-auto rounded border border-gray-100 bg-gray-900 px-2.5 py-2 text-sm text-ink-gray-2"
 				>
 					<pre>{{
 						$resources.log.loading ? 'Loading...' : log || 'No output'
diff --git a/dashboard/src/pages/LoginSignup.vue b/dashboard/src/pages/LoginSignup.vue
index fd8dabe4254..c072ca9bbda 100644
--- a/dashboard/src/pages/LoginSignup.vue
+++ b/dashboard/src/pages/LoginSignup.vue
@@ -296,18 +296,18 @@
 							v-if="!hasForgotPassword && !isOauthLogin && !is2FA"
 						>
 							<div v-if="$route.name === 'Signup'">
-								<span class="text-base font-normal text-gray-600">
+								<span class="text-base font-normal text-ink-gray-6">
 									{{ 'By signing up, you agree to our ' }}
 								</span>
 								<a
-									class="text-base font-normal text-gray-900 underline hover:text-gray-700"
+									class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7"
 									href="https://frappecloud.com/policies"
 								>
 									Terms & Policies
 								</a>
 							</div>
 							<div v-if="!(otpRequested || resetPasswordEmailSent)">
-								<span class="text-base font-normal text-gray-600">
+								<span class="text-base font-normal text-ink-gray-6">
 									{{
 										$route.name == 'Login'
 											? 'New member? '
@@ -315,7 +315,7 @@
 									}}
 								</span>
 								<router-link
-									class="text-base font-normal text-gray-900 underline hover:text-gray-700"
+									class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7"
 									:to="{
 										name: $route.name == 'Login' ? 'Signup' : 'Login',
 										query: { ...$route.query, forgot: undefined },
@@ -379,18 +379,18 @@
 						</form>
 						<div class="mt-4 space-y-2">
 							<div v-if="$route.name === 'Signup'">
-								<span class="text-base font-normal text-gray-600">
+								<span class="text-base font-normal text-ink-gray-6">
 									{{ 'By signing up, you agree to our ' }}
 								</span>
 								<a
-									class="text-base font-normal text-gray-900 underline hover:text-gray-700"
+									class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7"
 									href="https://frappecloud.com/policies"
 								>
 									Terms & Policies
 								</a>
 							</div>
 							<div>
-								<span class="text-base font-normal text-gray-600">
+								<span class="text-base font-normal text-ink-gray-6">
 									{{
 										$route.name == 'Login'
 											? 'New member? '
@@ -398,7 +398,7 @@
 									}}
 								</span>
 								<router-link
-									class="text-base font-normal text-gray-900 underline hover:text-gray-700"
+									class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7"
 									:to="{
 										name: $route.name == 'Login' ? 'Signup' : 'Login',
 										query: { ...$route.query, forgot: undefined },
@@ -412,7 +412,7 @@
 						</div>
 					</div>
 					<div
-						class="text-p-base text-gray-700"
+						class="text-p-base text-ink-gray-7"
 						v-else-if="resetPasswordEmailSent"
 					>
 						<p>
@@ -491,7 +491,7 @@ export default {
 						h(CustomToast, {
 							html: `
 							You are not part of an active team<br/>
-							<span class="text-sm text-gray-800">
+							<span class="text-sm text-ink-gray-8">
 								If the issue persists, please contact 
 								<a href="https://support.frappe.io" class="font-medium underline" target="_blank" rel="noopener noreferrer">
 									support.
diff --git a/dashboard/src/pages/NewReleaseGroup.vue b/dashboard/src/pages/NewReleaseGroup.vue
index 92cdbe663ce..74b241ec517 100644
--- a/dashboard/src/pages/NewReleaseGroup.vue
+++ b/dashboard/src/pages/NewReleaseGroup.vue
@@ -29,9 +29,9 @@
 
 	<div
 		v-if="!$team.doc?.is_desk_user && !$session.hasBenchCreationAccess"
-		class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
+		class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-ink-gray-6"
 	>
-		<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
+		<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-ink-red-4" />
 		<ErrorMessage message="You aren't permitted to create new benches" />
 	</div>
 
@@ -39,7 +39,7 @@
 		<div v-if="options" class="space-y-12 pb-[50vh] pt-12">
 			<div>
 				<div class="flex items-center justify-between">
-					<h2 class="text-sm font-medium leading-6 text-gray-900">
+					<h2 class="text-sm font-medium leading-6 text-ink-gray-9">
 						Select Frappe Framework Version
 					</h2>
 				</div>
@@ -50,14 +50,14 @@
 							:key="version.name"
 							:class="[
 								benchVersion === version.name
-									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-									: 'bg-white text-gray-900  hover:bg-gray-50',
+									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+									: 'bg-surface-white text-ink-gray-9  hover:bg-surface-gray-1',
 								'flex cursor-pointer items-center justify-between rounded border border-gray-400 p-3 text-sm focus:outline-none',
 							]"
 							@click="benchVersion = version.name"
 						>
 							<span class="font-medium">{{ version.name }} </span>
-							<span class="ml-1 text-gray-600">
+							<span class="ml-1 text-ink-gray-6">
 								{{ version.status }}
 							</span>
 						</button>
@@ -68,7 +68,7 @@
 				class="flex flex-col"
 				v-if="options?.clusters.length && benchVersion && !server"
 			>
-				<h2 class="text-sm font-medium leading-6 text-gray-900">
+				<h2 class="text-sm font-medium leading-6 text-ink-gray-9">
 					Select Region
 				</h2>
 				<div class="mt-2 w-full space-y-2">
@@ -79,9 +79,9 @@
 							@click="benchRegion = c.name"
 							:class="[
 								benchRegion === c.name
-									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-									: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-								'flex w-full items-center rounded border p-3 text-left text-base text-gray-900',
+									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+									: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+								'flex w-full items-center rounded border p-3 text-left text-base text-ink-gray-9',
 							]"
 						>
 							<div class="flex w-full items-center justify-between">
@@ -98,7 +98,7 @@
 				</div>
 			</div>
 			<div v-if="benchVersion && (benchRegion || server)" class="flex flex-col">
-				<h2 class="text-sm font-medium leading-6 text-gray-900">
+				<h2 class="text-sm font-medium leading-6 text-ink-gray-9">
 					Enter Bench Title
 				</h2>
 				<div class="mt-2">
@@ -115,7 +115,7 @@
 				v-if="benchVersion && (benchRegion || server) && benchTitle"
 			>
 				<div
-					class="flex items-center rounded border border-gray-200 bg-gray-100 p-4 text-sm text-gray-600"
+					class="flex items-center rounded border border-gray-200 bg-surface-gray-2 p-4 text-sm text-ink-gray-6"
 				>
 					<lucide-info class="mr-4 inline-block h-6 w-6" />
 					<div>
diff --git a/dashboard/src/pages/NewServer.vue b/dashboard/src/pages/NewServer.vue
index 5ddf989e7ed..75f9127de5f 100644
--- a/dashboard/src/pages/NewServer.vue
+++ b/dashboard/src/pages/NewServer.vue
@@ -12,9 +12,9 @@
 
 	<div
 		v-if="!$team.doc?.is_desk_user && !$session.hasServerCreationAccess"
-		class="mx-auto mt-60 w-fit rounded-md border border-dashed px-12 py-8 text-center text-gray-600"
+		class="mx-auto mt-60 w-fit rounded-md border border-dashed px-12 py-8 text-center text-ink-gray-6"
 	>
-		<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
+		<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-ink-red-4" />
 		<ErrorMessage message="You aren't permitted to create new servers" />
 	</div>
 
@@ -29,7 +29,7 @@
 			<!-- Main configuration section -->
 			<div class="w-full lg:min-w-[42rem] lg:max-w-[42rem] space-y-8">
 				<div class="flex flex-col" v-if="$team.doc?.hybrid_servers_enabled">
-					<h2 class="text-base font-semibold leading-6 text-gray-900">
+					<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 						Choose Server Type
 					</h2>
 					<div class="mt-2 w-full space-y-2">
@@ -40,9 +40,9 @@
 								@click="serverType = c.name"
 								:class="[
 									serverType === c.name
-										? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-										: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-									'flex w-full items-center rounded-md border p-3 text-left text-base text-gray-900',
+										? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+										: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+									'flex w-full items-center rounded-md border p-3 text-left text-base text-ink-gray-9',
 								]"
 							>
 								<div class="flex w-full items-center justify-between space-x-2">
@@ -50,7 +50,7 @@
 										{{ c.title }}
 									</span>
 									<Tooltip :text="c.description">
-										<lucide-info class="h-4 w-4 text-gray-500" />
+										<lucide-info class="h-4 w-4 text-ink-gray-5" />
 									</Tooltip>
 								</div>
 							</button>
@@ -59,8 +59,10 @@
 				</div>
 
 				<div v-if="serverType" class="flex flex-col">
-					<h2 class="text-base font-semibold leading-6 text-gray-900">
-						Enter Name For Your Server<span class="text-red-500">&nbsp;*</span>
+					<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
+						Enter Name For Your Server<span class="text-ink-red-3"
+							>&nbsp;*</span
+						>
 					</h2>
 					<div class="mt-2">
 						<FormControl
@@ -74,7 +76,7 @@
 					<!-- Choose Server Provider -->
 					<div class="flex flex-col" v-if="allProviders.length">
 						<div class="flex items-center justify-between items-center">
-							<h2 class="text-base font-semibold leading-6 text-gray-900">
+							<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 								Select Provider
 							</h2>
 							<div>
@@ -84,7 +86,7 @@
 									size="sm"
 								>
 									<template #prefix>
-										<lucide-help-circle class="h-4 w-4 text-gray-700" />
+										<lucide-help-circle class="h-4 w-4 text-ink-gray-7" />
 									</template>
 									<span class="hidden sm:inline">Compare Features</span>
 									<span class="sm:hidden">Compare</span>
@@ -99,9 +101,9 @@
 									@click="serverProvider = provider.name"
 									:class="[
 										serverProvider === provider.name
-											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-											: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-										'flex w-full items-center rounded-md border p-2 text-left text-base text-gray-900',
+											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+											: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+										'flex w-full items-center rounded-md border p-2 text-left text-base text-ink-gray-9',
 									]"
 								>
 									<div class="flex w-full items-center justify-between">
@@ -136,7 +138,7 @@
 						class="flex flex-col"
 						v-if="serverProvider && regionsForProvider.length"
 					>
-						<h2 class="text-base font-semibold leading-6 text-gray-900">
+						<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 							Select Region
 						</h2>
 						<div class="mt-2 w-full space-y-2">
@@ -147,9 +149,9 @@
 									@click="serverRegion = r.name"
 									:class="[
 										serverRegion === r.name
-											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-											: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-										'flex w-full items-center rounded-md border p-2 text-left text-base text-gray-900',
+											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+											: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+										'flex w-full items-center rounded-md border p-2 text-left text-base text-ink-gray-9',
 									]"
 								>
 									<div class="flex w-full items-center justify-between">
@@ -167,9 +169,9 @@
 					<!-- Add a check if unified server plan is available here -->
 					<div
 						v-if="showUnifiedServerOption"
-						class="flex flex-col space-y-2 text-sm text-gray-600 w-full"
+						class="flex flex-col space-y-2 text-sm text-ink-gray-6 w-full"
 					>
-						<h2 class="text-base font-semibold leading-6 text-gray-900">
+						<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 							Deployment Mode
 						</h2>
 
@@ -194,9 +196,9 @@
 									@click="unifiedServer = c.unifiedServer"
 									:class="[
 										unifiedServer == c.unifiedServer
-											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-											: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-										'flex w-full items-center rounded-md border p-2.5 text-left text-base text-gray-900',
+											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+											: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+										'flex w-full items-center rounded-md border p-2.5 text-left text-base text-ink-gray-9',
 									]"
 								>
 									<div
@@ -206,7 +208,7 @@
 											{{ c.name }}
 										</span>
 										<Tooltip :text="c.description">
-											<lucide-info class="h-4 w-4 text-gray-500" />
+											<lucide-info class="h-4 w-4 text-ink-gray-5" />
 										</Tooltip>
 									</div>
 								</button>
@@ -220,7 +222,7 @@
 						class="flex flex-col"
 					>
 						<div class="flex items-center justify-between">
-							<h2 class="text-base font-semibold leading-6 text-gray-900">
+							<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 								Service Type
 							</h2>
 							<div>
@@ -229,7 +231,7 @@
 									variant="ghost"
 								>
 									<template #prefix>
-										<lucide-help-circle class="h-4 w-4 text-gray-700" />
+										<lucide-help-circle class="h-4 w-4 text-ink-gray-7" />
 									</template>
 									<span class="hidden sm:inline">Know More</span>
 									<span class="sm:hidden">More</span>
@@ -253,9 +255,9 @@
 									@click="serviceType = c.name"
 									:class="[
 										serviceType === c.name
-											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-											: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-										'flex w-full items-center rounded-md border p-2.5 text-left text-base text-gray-900',
+											? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+											: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+										'flex w-full items-center rounded-md border p-2.5 text-left text-base text-ink-gray-9',
 									]"
 								>
 									<div
@@ -265,7 +267,7 @@
 											{{ c.name }}
 										</span>
 										<Tooltip :text="c.description">
-											<lucide-info class="h-4 w-4 text-gray-500" />
+											<lucide-info class="h-4 w-4 text-ink-gray-5" />
 										</Tooltip>
 									</div>
 								</button>
@@ -283,13 +285,13 @@
 								<div class="flex flex-row justify-between items-center">
 									<h2
 										v-if="!unifiedServer"
-										class="text-base font-semibold leading-6 text-gray-900"
+										class="text-base font-semibold leading-6 text-ink-gray-9"
 									>
 										Select Application Server Plan
 									</h2>
 									<h2
 										v-else
-										class="text-base font-semibold leading-6 text-gray-900"
+										class="text-base font-semibold leading-6 text-ink-gray-9"
 									>
 										Select Unified Server Plan
 									</h2>
@@ -301,7 +303,7 @@
 											size="sm"
 										>
 											<template #prefix>
-												<lucide-help-circle class="h-4 w-4 text-gray-700" />
+												<lucide-help-circle class="h-4 w-4 text-ink-gray-7" />
 											</template>
 											<span class="hidden sm:inline"
 												>Learn About Instance Types</span
@@ -316,7 +318,7 @@
 											size="sm"
 										>
 											<template #prefix>
-												<lucide-help-circle class="h-4 w-4 text-gray-700" />
+												<lucide-help-circle class="h-4 w-4 text-ink-gray-7" />
 											</template>
 											<span class="hidden sm:inline"
 												>Learn About Unified Server</span
@@ -345,21 +347,21 @@
 													: index === availableAppPlanTypes.length - 1
 														? 'rounded-b-md sm:rounded-r-md sm:rounded-bl-none'
 														: 'rounded-none',
-												'relative flex w-full flex-col overflow-hidden border text-left hover:bg-gray-50',
+												'relative flex w-full flex-col overflow-hidden border text-left hover:bg-surface-gray-1',
 											]"
 										>
 											<div class="w-full p-3">
 												<div class="flex items-center justify-between">
 													<div class="flex w-full items-center">
 														<span
-															class="truncate text-base font-semibold text-gray-900"
+															class="truncate text-base font-semibold text-ink-gray-9"
 														>
 															{{ planType.title }}
 														</span>
 													</div>
 												</div>
 												<div
-													class="mt-1 text-base text-gray-600"
+													class="mt-1 text-base text-ink-gray-6"
 													v-if="planType.description"
 												>
 													{{ planType.description }}
@@ -374,14 +376,14 @@
 									v-else-if="availableAppPlanTypes.length === 1"
 									class="flex flex-col rounded-md border border-gray-300 p-3 gap-2"
 								>
-									<p class="text-base text-gray-900">
+									<p class="text-base text-ink-gray-9">
 										<span class="font-medium">{{
 											availableAppPlanTypes[0].title
 										}}</span>
 										machines are available.
 									</p>
 
-									<p class="text-base text-gray-600">
+									<p class="text-base text-ink-gray-6">
 										{{ availableAppPlanTypes[0].description }}
 									</p>
 								</div>
@@ -412,7 +414,7 @@
 						>
 							<div class="flex flex-col space-y-2">
 								<div class="flex flex-row justify-between items-center">
-									<h2 class="text-base font-semibold leading-6 text-gray-900">
+									<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 										Select Database Server Plan
 									</h2>
 									<div>
@@ -422,7 +424,7 @@
 											size="sm"
 										>
 											<template #prefix>
-												<lucide-help-circle class="h-4 w-4 text-gray-700" />
+												<lucide-help-circle class="h-4 w-4 text-ink-gray-7" />
 											</template>
 											<span class="hidden sm:inline"
 												>Learn About Instance Types</span
@@ -451,21 +453,21 @@
 													: index === availableDbPlanTypes.length - 1
 														? 'rounded-b-md sm:rounded-r-md sm:rounded-bl-none'
 														: 'rounded-none',
-												'relative flex w-full flex-col overflow-hidden border text-left hover:bg-gray-50',
+												'relative flex w-full flex-col overflow-hidden border text-left hover:bg-surface-gray-1',
 											]"
 										>
 											<div class="w-full p-3">
 												<div class="flex items-center justify-between">
 													<div class="flex w-full items-center">
 														<span
-															class="truncate text-base font-semibold text-gray-900"
+															class="truncate text-base font-semibold text-ink-gray-9"
 														>
 															{{ planType.title }}
 														</span>
 													</div>
 												</div>
 												<div
-													class="mt-1 text-base text-gray-600"
+													class="mt-1 text-base text-ink-gray-6"
 													v-if="planType.description"
 												>
 													{{ planType.description }}
@@ -480,14 +482,14 @@
 									v-else-if="availableDbPlanTypes.length === 1"
 									class="flex flex-col rounded-md border border-gray-300 p-3 gap-2"
 								>
-									<p class="text-base text-gray-900">
+									<p class="text-base text-ink-gray-9">
 										<span class="font-medium">{{
 											availableDbPlanTypes[0].title
 										}}</span>
 										machines are available.
 									</p>
 
-									<p class="text-base text-gray-600">
+									<p class="text-base text-ink-gray-6">
 										{{ availableDbPlanTypes[0].description }}
 									</p>
 								</div>
@@ -505,7 +507,7 @@
 				</div>
 				<div v-else-if="serverType === 'hybrid'" class="space-y-8">
 					<div class="flex flex-col space-y-2">
-						<h2 class="text-base font-semibold leading-6 text-gray-900">
+						<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 							App Server IP Addresses
 						</h2>
 						<div class="flex flex-col sm:flex-row gap-3">
@@ -524,7 +526,7 @@
 						</div>
 					</div>
 					<div class="flex flex-col space-y-2">
-						<h2 class="text-base font-semibold leading-6 text-gray-900">
+						<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 							Database Server IP Addresses
 						</h2>
 						<div class="flex flex-col sm:flex-row gap-3">
@@ -543,10 +545,10 @@
 						</div>
 					</div>
 					<div class="flex flex-col space-y-2">
-						<h2 class="text-base font-semibold leading-6 text-gray-900">
+						<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 							Add SSH Key
 						</h2>
-						<span class="text-xs text-gray-600">
+						<span class="text-xs text-ink-gray-6">
 							Add this SSH Key to
 							<span class="font-mono">~/.ssh/authorized_keys</span>
 							file on Application and Database server</span
@@ -557,10 +559,12 @@
 					</div>
 				</div>
 				<div class="flex flex-col space-y-3" v-if="showAutoAddStorageOption">
-					<h2 class="text-base font-semibold leading-6 text-gray-900">
+					<h2 class="text-base font-semibold leading-6 text-ink-gray-9">
 						Auto Add-on Storage
 					</h2>
-					<div class="my-4 rounded-md border bg-gray-50 p-2 prose-sm prose">
+					<div
+						class="my-4 rounded-md border bg-surface-gray-1 p-2 prose-sm prose"
+					>
 						This feature will automatically increases the storage as it reaches
 						over <b>90%</b> of its capacity.
 
@@ -602,14 +606,14 @@
 
 				<!-- Mobile only Summary -->
 				<div
-					class="lg:hidden rounded border-gray-400 bg-white text-gray-900 ring-gray-200 border p-6 space-y-4"
+					class="lg:hidden rounded border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 border p-6 space-y-4"
 					v-if="showSummary"
 				>
 					<h2 class="text-md font-semibold">Summary</h2>
 
 					<!-- Server Name -->
 					<div class="flex flex-col space-y-1" v-if="serverTitle">
-						<div class="text-base text-gray-700">Server Name</div>
+						<div class="text-base text-ink-gray-7">Server Name</div>
 						<div class="text-base font-medium">{{ serverTitle }}</div>
 					</div>
 
@@ -618,7 +622,7 @@
 						class="flex flex-col space-y-1"
 						v-if="serverType === 'dedicated' && serverProvider"
 					>
-						<div class="text-base text-gray-700">Server Provider</div>
+						<div class="text-base text-ink-gray-7">Server Provider</div>
 						<div class="text-base font-medium">{{ selectedProviderTitle }}</div>
 					</div>
 
@@ -627,7 +631,7 @@
 						class="flex flex-col space-y-1"
 						v-if="serverType === 'dedicated' && serverRegion"
 					>
-						<div class="text-base text-gray-700">Server Region</div>
+						<div class="text-base text-ink-gray-7">Server Region</div>
 						<div class="text-base font-medium">{{ serverRegion }}</div>
 					</div>
 
@@ -636,7 +640,7 @@
 						class="flex flex-col space-y-1"
 						v-if="serverType === 'dedicated' && appServerPlan"
 					>
-						<div class="text-base text-gray-700">
+						<div class="text-base text-ink-gray-7">
 							{{
 								unifiedServer
 									? 'Unified Server Plan'
@@ -647,7 +651,7 @@
 							{{ $format.planTitle(appServerPlan) }}/mo -
 							{{ getPlanTypeTitle(appServerPlan) }}
 						</div>
-						<div class="text-xs text-gray-700">
+						<div class="text-xs text-ink-gray-7">
 							{{ appServerPlan.vcpu }} vCPUs •
 							{{ $format.bytes(appServerPlan.memory, 0, 2) }} Memory •
 							{{ appServerPlan.disk }} GB Disk •
@@ -660,12 +664,12 @@
 						class="flex flex-col space-y-1"
 						v-if="serverType === 'dedicated' && !unifiedServer && dbServerPlan"
 					>
-						<div class="text-base text-gray-700">Database Server Plan</div>
+						<div class="text-base text-ink-gray-7">Database Server Plan</div>
 						<div class="text-base font-medium">
 							{{ $format.planTitle(dbServerPlan) }}/mo -
 							{{ getPlanTypeTitle(dbServerPlan) }}
 						</div>
-						<div class="text-xs text-gray-700">
+						<div class="text-xs text-ink-gray-7">
 							{{ dbServerPlan.vcpu }} vCPUs •
 							{{ $format.bytes(dbServerPlan.memory, 0, 2) }} Memory •
 							{{ dbServerPlan.disk }} GB Disk • {{ dbServerPlan.instance_type }}
@@ -677,7 +681,7 @@
 						class="flex flex-col space-y-1"
 						v-if="serverType === 'hybrid' && appPublicIP && appPrivateIP"
 					>
-						<div class="text-base text-gray-700">App Server IPs</div>
+						<div class="text-base text-ink-gray-7">App Server IPs</div>
 						<div class="text-base font-medium">
 							{{ appPublicIP }} / {{ appPrivateIP }}
 						</div>
@@ -687,7 +691,7 @@
 						class="flex flex-col space-y-1"
 						v-if="serverType === 'hybrid' && dbPublicIP && dbPrivateIP"
 					>
-						<div class="text-base text-gray-700">DB Server IPs</div>
+						<div class="text-base text-ink-gray-7">DB Server IPs</div>
 						<div class="text-base font-medium">
 							{{ dbPublicIP }} / {{ dbPrivateIP }}
 						</div>
@@ -701,7 +705,7 @@
 							$resources.hybridOptions?.data?.plans?.[0]
 						"
 					>
-						<div class="text-base text-gray-700">Plan</div>
+						<div class="text-base text-ink-gray-7">Plan</div>
 						<div class="text-base font-medium">
 							{{ $format.planTitle($resources.hybridOptions.data.plans[0]) }}/mo
 						</div>
@@ -709,7 +713,7 @@
 
 					<!-- Auto Add-on Storage -->
 					<div class="flex flex-col space-y-1" v-if="showAutoAddStorageOption">
-						<div class="text-base text-gray-700">Auto Add-on Storage</div>
+						<div class="text-base text-ink-gray-7">Auto Add-on Storage</div>
 						<div class="text-base font-medium text-green-900">
 							{{ enableAutoAddStorage ? 'Enabled' : 'Disabled' }}
 						</div>
@@ -719,12 +723,12 @@
 
 					<!-- Total Cost -->
 					<div class="flex flex-col space-y-2" v-if="_totalPerMonth">
-						<div class="text-base text-gray-700">Total Cost</div>
+						<div class="text-base text-ink-gray-7">Total Cost</div>
 						<div class="flex flex-col space-y-1">
 							<div class="text-lg font-semibold">
 								{{ totalPerMonth }} / month
 							</div>
-							<div class="text-base font-medium text-gray-700">
+							<div class="text-base font-medium text-ink-gray-7">
 								{{ totalPerDay }} per day
 							</div>
 						</div>
@@ -768,14 +772,14 @@
 
 			<!-- Desktop only Summary -->
 			<div
-				class="hidden lg:block sticky top-[4.5rem] rounded border-gray-400 bg-white text-gray-900 ring-gray-200 border p-6 h-fit w-[25rem] space-y-4"
+				class="hidden lg:block sticky top-[4.5rem] rounded border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 border p-6 h-fit w-[25rem] space-y-4"
 				v-if="showSummary"
 			>
 				<h2 class="text-md font-semibold">Summary</h2>
 
 				<!-- Server Name -->
 				<div class="flex flex-col space-y-1" v-if="serverTitle">
-					<div class="text-base text-gray-700">Server Name</div>
+					<div class="text-base text-ink-gray-7">Server Name</div>
 					<div class="text-base font-medium">{{ serverTitle }}</div>
 				</div>
 
@@ -784,7 +788,7 @@
 					class="flex flex-col space-y-1"
 					v-if="serverType === 'dedicated' && serverProvider"
 				>
-					<div class="text-base text-gray-700">Server Provider</div>
+					<div class="text-base text-ink-gray-7">Server Provider</div>
 					<div class="text-base font-medium">{{ selectedProviderTitle }}</div>
 				</div>
 
@@ -793,7 +797,7 @@
 					class="flex flex-col space-y-1"
 					v-if="serverType === 'dedicated' && serverRegion"
 				>
-					<div class="text-base text-gray-700">Server Region</div>
+					<div class="text-base text-ink-gray-7">Server Region</div>
 					<div class="text-base font-medium">{{ serverRegion }}</div>
 				</div>
 
@@ -802,7 +806,7 @@
 					class="flex flex-col space-y-1"
 					v-if="serverType === 'dedicated' && appServerPlan"
 				>
-					<div class="text-base text-gray-700">
+					<div class="text-base text-ink-gray-7">
 						{{
 							unifiedServer ? 'Unified Server Plan' : 'Application Server Plan'
 						}}
@@ -811,7 +815,7 @@
 						{{ $format.planTitle(appServerPlan) }}/mo -
 						{{ getPlanTypeTitle(appServerPlan) }}
 					</div>
-					<div class="text-sm text-gray-700">
+					<div class="text-sm text-ink-gray-7">
 						{{ appServerPlan.vcpu }} vCPUs •
 						{{ $format.bytes(appServerPlan.memory, 0, 2) }} Memory •
 						{{ appServerPlan.disk }} GB Disk • {{ appServerPlan.instance_type }}
@@ -823,12 +827,12 @@
 					class="flex flex-col space-y-1"
 					v-if="serverType === 'dedicated' && !unifiedServer && dbServerPlan"
 				>
-					<div class="text-base text-gray-700">Database Server Plan</div>
+					<div class="text-base text-ink-gray-7">Database Server Plan</div>
 					<div class="text-base font-medium">
 						{{ $format.planTitle(dbServerPlan) }}/mo -
 						{{ getPlanTypeTitle(dbServerPlan) }}
 					</div>
-					<div class="text-sm text-gray-700">
+					<div class="text-sm text-ink-gray-7">
 						{{ dbServerPlan.vcpu }} vCPUs •
 						{{ $format.bytes(dbServerPlan.memory, 0, 2) }} Memory •
 						{{ dbServerPlan.disk }} GB Disk • {{ dbServerPlan.instance_type }}
@@ -840,7 +844,7 @@
 					class="flex flex-col space-y-1"
 					v-if="serverType === 'hybrid' && appPublicIP && appPrivateIP"
 				>
-					<div class="text-base text-gray-700">App Server IPs</div>
+					<div class="text-base text-ink-gray-7">App Server IPs</div>
 					<div class="text-base font-medium">
 						{{ appPublicIP }} / {{ appPrivateIP }}
 					</div>
@@ -850,7 +854,7 @@
 					class="flex flex-col space-y-1"
 					v-if="serverType === 'hybrid' && dbPublicIP && dbPrivateIP"
 				>
-					<div class="text-base text-gray-700">DB Server IPs</div>
+					<div class="text-base text-ink-gray-7">DB Server IPs</div>
 					<div class="text-base font-medium">
 						{{ dbPublicIP }} / {{ dbPrivateIP }}
 					</div>
@@ -864,7 +868,7 @@
 						$resources.hybridOptions?.data?.plans?.[0]
 					"
 				>
-					<div class="text-base text-gray-700">Plan</div>
+					<div class="text-base text-ink-gray-7">Plan</div>
 					<div class="text-base font-medium">
 						{{ $format.planTitle($resources.hybridOptions.data.plans[0]) }}/mo
 					</div>
@@ -872,8 +876,8 @@
 
 				<!-- Auto Add-on Storage -->
 				<div class="flex flex-col space-y-1" v-if="showAutoAddStorageOption">
-					<div class="text-base text-gray-700">Auto Add-on Storage</div>
-					<div class="text-base font-medium text-gray-900">
+					<div class="text-base text-ink-gray-7">Auto Add-on Storage</div>
+					<div class="text-base font-medium text-ink-gray-9">
 						{{ enableAutoAddStorage ? 'Enabled' : 'Disabled' }}
 					</div>
 				</div>
@@ -882,10 +886,10 @@
 
 				<!-- Total Cost -->
 				<div class="flex flex-col space-y-2" v-if="_totalPerMonth">
-					<div class="text-base text-gray-700">Total Cost</div>
+					<div class="text-base text-ink-gray-7">Total Cost</div>
 					<div class="flex flex-col space-y-1">
 						<div class="text-lg font-semibold">{{ totalPerMonth }} / month</div>
-						<div class="text-base font-medium text-gray-700">
+						<div class="text-base font-medium text-ink-gray-7">
 							{{ totalPerDay }} per day
 						</div>
 					</div>
@@ -938,7 +942,7 @@
 	</div>
 	<div
 		v-else
-		class="mx-auto mt-60 w-fit rounded-md border-2 border-dashed px-12 py-8 text-center text-gray-600"
+		class="mx-auto mt-60 w-fit rounded-md border-2 border-dashed px-12 py-8 text-center text-ink-gray-6"
 	>
 		<LucideServer class="mx-auto mb-4 h-8 w-8" />
 		<p>Server feature isn't enabled for your account.</p>
diff --git a/dashboard/src/pages/NewSite.vue b/dashboard/src/pages/NewSite.vue
index 080a7bbb2b6..82c89db8dce 100644
--- a/dashboard/src/pages/NewSite.vue
+++ b/dashboard/src/pages/NewSite.vue
@@ -7,18 +7,21 @@
 
 	<div
 		v-if="!$team.doc?.is_desk_user && !$session.hasSiteCreationAccess"
-		class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
+		class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-ink-gray-6"
 	>
-		<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
+		<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-ink-red-4" />
 		<ErrorMessage message="You aren't permitted to create new sites" />
 	</div>
 
 	<div v-else class="mx-auto max-w-2xl px-5">
-		<div v-if="$resources.options.loading" class="py-4 text-base text-gray-600">
+		<div
+			v-if="$resources.options.loading"
+			class="py-4 text-base text-ink-gray-6"
+		>
 			Loading...
 		</div>
 		<div v-if="$route.name === 'NewBenchSite' && !bench">
-			<div class="py-4 text-base text-gray-600">Something went wrong</div>
+			<div class="py-4 text-base text-ink-gray-6">Something went wrong</div>
 		</div>
 		<div v-else-if="options" class="space-y-12 pb-[50vh] pt-12">
 			<NewSiteAppSelector
@@ -28,7 +31,7 @@
 			/>
 			<div v-if="!bench">
 				<div class="flex items-center justify-between">
-					<h2 class="text-base font-medium leading-6 text-gray-900">
+					<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 						Select Frappe Framework Version
 					</h2>
 				</div>
@@ -51,8 +54,8 @@
 							<button
 								:class="[
 									version === v.name
-										? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-										: 'bg-white text-gray-900  hover:bg-gray-50',
+										? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+										: 'bg-surface-white text-ink-gray-9  hover:bg-surface-gray-1',
 									v.disabled && 'opacity-50 hover:cursor-default',
 									'flex w-full cursor-pointer items-center justify-between rounded border border-gray-400 p-3 text-sm focus:outline-none',
 								]"
@@ -71,9 +74,9 @@
 									<Tooltip
 										text="This version is under development and may have bugs. Do not use for production sites."
 									>
-										<lucide-info class="h-4 w-4 text-gray-500" />
+										<lucide-info class="h-4 w-4 text-ink-gray-5" />
 									</Tooltip>
-									<span class="ml-1 text-gray-600">
+									<span class="ml-1 text-ink-gray-6">
 										{{ v.status }}
 									</span>
 								</div>
@@ -92,7 +95,7 @@
 					<Tooltip
 						text="A local compliance app allows creating transactions as per statutory compliance. They're maintained by community partners."
 					>
-						<lucide-info class="h-4 w-4 text-gray-500" />
+						<lucide-info class="h-4 w-4 text-ink-gray-5" />
 					</Tooltip>
 				</div>
 				<FormControl
@@ -124,7 +127,7 @@
 					label="Host this site on your dedicated server"
 				/>
 				<div v-if="shouldShowDedicatedServerDropdown">
-					<h2 class="text-base font-medium leading-6 text-gray-900 mb-2">
+					<h2 class="text-base font-medium leading-6 text-ink-gray-9 mb-2">
 						Select Dedicated Server
 					</h2>
 					<FormControl
@@ -149,7 +152,7 @@
 				"
 				class="flex flex-col"
 			>
-				<h2 class="text-base font-medium leading-6 text-gray-900">
+				<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 					Select Provider
 				</h2>
 				<div class="mt-2 w-full space-y-2">
@@ -160,9 +163,9 @@
 							@click="provider = p.name"
 							:class="[
 								provider === p.name
-									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-									: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
-								'flex w-full items-center rounded-md border p-2 text-left text-base text-gray-900',
+									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+									: 'border-gray-400 bg-surface-white text-ink-gray-9 ring-gray-200 hover:bg-surface-gray-1',
+								'flex w-full items-center rounded-md border p-2 text-left text-base text-ink-gray-9',
 							]"
 						>
 							<div class="flex w-full items-center justify-between">
@@ -190,7 +193,7 @@
 					(provider || bench)
 				"
 			>
-				<h2 class="text-base font-medium leading-6 text-gray-900">
+				<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 					Select Region
 				</h2>
 				<div class="mt-2 w-full space-y-2">
@@ -201,9 +204,9 @@
 							@click="cluster = c.name"
 							:class="[
 								cluster === c.name
-									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
-									: 'bg-white text-gray-900  hover:bg-gray-50',
-								'flex w-full items-center rounded border p-3 text-left text-base text-gray-900',
+									? 'border-gray-900 ring-1 ring-gray-900 hover:bg-surface-gray-2'
+									: 'bg-surface-white text-ink-gray-9  hover:bg-surface-gray-1',
+								'flex w-full items-center rounded border p-3 text-left text-base text-ink-gray-9',
 							]"
 						>
 							<div class="flex w-full items-center justify-between">
@@ -221,13 +224,13 @@
 			</div>
 			<div v-if="selectedVersion && cluster">
 				<div class="flex items-center justify-between">
-					<h2 class="text-base font-medium leading-6 text-gray-900">
+					<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 						Select Plan
 					</h2>
 					<div>
 						<Button link="https://frappecloud.com/pricing" variant="ghost">
 							<template #prefix>
-								<lucide-help-circle class="h-4 w-4 text-gray-700" />
+								<lucide-help-circle class="h-4 w-4 text-ink-gray-7" />
 							</template>
 							Help
 						</Button>
@@ -245,11 +248,11 @@
 						:hideRestrictedPlans="selectedLocalisationCountry"
 					/>
 				</div>
-				<div v-if="isPrivateBenchPlan" class="mt-4 text-xs text-gray-700">
+				<div v-if="isPrivateBenchPlan" class="mt-4 text-xs text-ink-gray-7">
 					<div
 						class="flex items-center rounded bg-blue-50 p-2 text-p-base font-medium text-blue-800"
 					>
-						<lucide-info class="h-4 w-8 text-blue-600" />
+						<lucide-info class="h-4 w-8 text-ink-blue-2" />
 						<span class="ml-4">
 							Your site will be created on a
 							<strong>private bench</strong>.<br />You can install custom apps
@@ -257,11 +260,11 @@
 						</span>
 					</div>
 				</div>
-				<div class="mt-4 text-xs text-gray-700">
+				<div class="mt-4 text-xs text-ink-gray-7">
 					<div
-						class="flex items-center rounded bg-gray-50 p-2 text-p-base font-medium text-gray-800"
+						class="flex items-center rounded bg-surface-gray-1 p-2 text-p-base font-medium text-ink-gray-8"
 					>
-						<lucide-badge-check class="h-4 w-8 text-gray-600" />
+						<lucide-badge-check class="h-4 w-8 text-ink-gray-6" />
 						<span class="ml-4">
 							<strong>Support</strong> covers only issues of Frappe apps and not
 							functional queries. You can raise a support ticket for Frappe
@@ -272,14 +275,14 @@
 			</div>
 			<div v-if="selectedVersion && plan && cluster">
 				<div class="flex justify-between items-center">
-					<h2 class="text-base font-medium leading-6 text-gray-900">
+					<h2 class="text-base font-medium leading-6 text-ink-gray-9">
 						Enter Subdomain
 					</h2>
 					<Tooltip
 						v-if="this.domain !== this.options.domain"
 						text="The root domain can change depending on the region you choose"
 					>
-						<lucide-help-circle class="h-4 w-4 text-gray-500" />
+						<lucide-help-circle class="h-4 w-4 text-ink-gray-5" />
 					</Tooltip>
 				</div>
 				<div class="mt-2 items-center">
@@ -289,7 +292,7 @@
 							placeholder="Subdomain"
 							v-model="subdomain"
 						/>
-						<div class="flex items-center rounded-r bg-gray-100 px-4 text-base">
+						<div class="flex items-center rounded-r bg-surface-gray-2 px-4 text-base">
 							.{{ domain }}
 						</div>
 					</div>
@@ -297,7 +300,7 @@
 				<div class="mt-1">
 					<div
 						v-if="$resources.subdomainExists.loading"
-						class="text-base text-gray-600"
+						class="text-base text-ink-gray-6"
 					>
 						Checking...
 					</div>
@@ -309,11 +312,11 @@
 					>
 						<div
 							v-if="$resources.subdomainExists.data"
-							class="text-sm text-green-600"
+							class="text-sm text-ink-green-3"
 						>
 							{{ subdomain }}.{{ domain }} is available
 						</div>
-						<div v-else class="text-sm text-red-600">
+						<div v-else class="text-sm text-ink-red-4">
 							{{ subdomain }}.{{ domain }} is not available
 						</div>
 					</template>
@@ -952,7 +955,7 @@ export default {
 						this.selectedVersionApps.find((a) => a.app === app.app).app_title
 					} ${
 						app.plan?.price_inr
-							? `- <span class="text-gray-600">${this.$format.userCurrency(
+							? `- <span class="text-ink-gray-6">${this.$format.userCurrency(
 									this.$team.doc.currency == 'INR'
 										? app.plan.price_inr
 										: app.plan.price_usd,
@@ -995,7 +998,7 @@ export default {
 				},
 				{
 					label: 'Total',
-					value: `${this.totalPerMonth} per month <div class="text-gray-600">${this.totalPerDay} per day</div>`,
+					value: `${this.totalPerMonth} per month <div class="text-ink-gray-6">${this.totalPerDay} per day</div>`,
 					condition: () => this._totalPerMonth,
 				},
 			];
diff --git a/dashboard/src/pages/NewSiteProgress.vue b/dashboard/src/pages/NewSiteProgress.vue
index af7e63b8025..3ec56d59008 100644
--- a/dashboard/src/pages/NewSiteProgress.vue
+++ b/dashboard/src/pages/NewSiteProgress.vue
@@ -11,13 +11,13 @@
 		</Header>
 
 		<div class="m-12 mx-auto max-w-2xl px-5">
-			<div v-if="!siteGroupDeployName" class="py-4 text-base text-gray-600">
+			<div v-if="!siteGroupDeployName" class="py-4 text-base text-ink-gray-6">
 				<p>Missing deployment information.</p>
-				<router-link to="/sites/new" class="mt-2 text-blue-600 underline">
+				<router-link to="/sites/new" class="mt-2 text-ink-blue-2 underline">
 					Go back to site creation
 				</router-link>
 			</div>
-			<div v-else-if="isLoading" class="py-4 text-base text-gray-600">
+			<div v-else-if="isLoading" class="py-4 text-base text-ink-gray-6">
 				Loading...
 			</div>
 			<div v-else class="space-y-6">
@@ -46,7 +46,7 @@
 					</p>
 				</div>
 
-				<div class="divide-y rounded-lg bg-gray-50 px-4">
+				<div class="divide-y rounded-lg bg-surface-gray-1 px-4">
 					<div
 						v-for="step in steps"
 						:key="step.id"
@@ -55,7 +55,7 @@
 						<div class="flex items-center space-x-4">
 							<LoadingIndicator
 								v-if="step.icon === 'loading'"
-								class="h-4 w-4 text-gray-900"
+								class="h-4 w-4 text-ink-gray-9"
 							/>
 							<FeatherIcon
 								v-else
@@ -65,12 +65,12 @@
 								:class="{
 									'bg-green-500': step.icon === 'check',
 									'bg-red-500': step.icon === 'x',
-									'bg-gray-500': step.icon === 'clock',
+									'bg-surface-gray-10': step.icon === 'clock',
 								}"
 							/>
 							<div class="flex flex-col space-y-1">
 								<h5 class="text-base">{{ step.title }}</h5>
-								<p class="text-sm text-gray-600">{{ step.message }}</p>
+								<p class="text-sm text-ink-gray-6">{{ step.message }}</p>
 							</div>
 						</div>
 					</div>
diff --git a/dashboard/src/pages/PartnerAdmin.vue b/dashboard/src/pages/PartnerAdmin.vue
index f93299cb73d..b9e8e61e98c 100644
--- a/dashboard/src/pages/PartnerAdmin.vue
+++ b/dashboard/src/pages/PartnerAdmin.vue
@@ -8,9 +8,9 @@
 		<TabsWithRouter v-if="$team?.doc?.is_desk_user" :tabs="tabs" />
 		<div
 			v-else
-			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
+			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-ink-gray-6"
 		>
-			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
+			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-ink-red-4" />
 			<ErrorMessage message="You aren't permitted to view the billing page" />
 		</div>
 	</div>
diff --git a/dashboard/src/pages/PartnerAdminCertificates.vue b/dashboard/src/pages/PartnerAdminCertificates.vue
index 675f44e935e..4d5c7a2ccbd 100644
--- a/dashboard/src/pages/PartnerAdminCertificates.vue
+++ b/dashboard/src/pages/PartnerAdminCertificates.vue
@@ -94,7 +94,7 @@ export default {
 									() =>
 										h(FeatherIcon, {
 											name: 'check-circle',
-											class: 'h-4 w-4 text-green-600',
+											class: 'h-4 w-4 text-ink-green-3',
 										}),
 								);
 							}
diff --git a/dashboard/src/pages/PartnerNewPayout.vue b/dashboard/src/pages/PartnerNewPayout.vue
index 902f49c4ca3..c3b458d1dfc 100644
--- a/dashboard/src/pages/PartnerNewPayout.vue
+++ b/dashboard/src/pages/PartnerNewPayout.vue
@@ -9,7 +9,7 @@
 		<div class="mx-5">
 			<!-- Filters Section -->
 			<div class="pt-[20px]">
-				<div class="bg-white rounded-lg shadow p-4 mb-6">
+				<div class="bg-surface-white rounded-lg shadow p-4 mb-6">
 					<h2 class="text-lg mb-4">Filters</h2>
 					<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
 						<div>
@@ -81,7 +81,7 @@
 			<!-- Transaction Table -->
 			<div
 				v-if="transactions.length > 0"
-				class="bg-white rounded-lg shadow p-4 mb-6"
+				class="bg-surface-white rounded-lg shadow p-4 mb-6"
 			>
 				<h2 class="text-lg mb-4">Fetched Transactions</h2>
 				<ObjectList :options="transactionOptions" />
@@ -89,27 +89,27 @@
 
 			<!-- Summary Section -->
 			<div
-				class="bg-white rounded-lg shadow p-4 mb-6"
+				class="bg-surface-white rounded-lg shadow p-4 mb-6"
 				v-if="transactions.length > 0"
 			>
 				<h2 class="text-lg mb-4">Summary</h2>
 				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-					<div class="bg-gray-50 p-3 rounded">
-						<div class="text-sm text-gray-500">Total Amount</div>
+					<div class="bg-surface-gray-1 p-3 rounded">
+						<div class="text-sm text-ink-gray-5">Total Amount</div>
 						<div class="text-xl font-semibold">
 							{{ formatCurrency(total_amount) }}
 						</div>
 					</div>
-					<div class="bg-gray-50 p-3 rounded">
-						<div class="text-sm text-gray-500">
+					<div class="bg-surface-gray-1 p-3 rounded">
+						<div class="text-sm text-ink-gray-5">
 							Commission ({{ partnerCommission }}%)
 						</div>
 						<div class="text-xl font-semibold">
 							{{ formatCurrency(commission) }}
 						</div>
 					</div>
-					<div class="bg-gray-50 p-3 rounded">
-						<div class="text-sm text-gray-500">Net Amount</div>
+					<div class="bg-surface-gray-1 p-3 rounded">
+						<div class="text-sm text-ink-gray-5">Net Amount</div>
 						<div class="text-xl font-semibold">
 							{{ formatCurrency(net_amount) }}
 						</div>
diff --git a/dashboard/src/pages/Partners.vue b/dashboard/src/pages/Partners.vue
index 07e3cef214b..22b338a4ffa 100644
--- a/dashboard/src/pages/Partners.vue
+++ b/dashboard/src/pages/Partners.vue
@@ -15,9 +15,9 @@
 		/>
 		<div
 			v-else
-			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
+			class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-ink-gray-6"
 		>
-			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
+			<lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-ink-red-4" />
 			<ErrorMessage
 				message="You aren't permitted to view the partner page. Please ask the team owner to provide permission for your role."
 			/>
@@ -58,8 +58,8 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.erpnext_partner &&
-								this.$team.doc.partner_status === 'Active' &&
-								this.$session.hasPartnerDashboardAccess,
+							this.$team.doc.partner_status === 'Active' &&
+							this.$session.hasPartnerDashboardAccess,
 						),
 				},
 				{
@@ -68,8 +68,8 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.erpnext_partner &&
-								this.$team.doc.partner_status === 'Active' &&
-								this.$session.hasPartnerCustomerAccess,
+							this.$team.doc.partner_status === 'Active' &&
+							this.$session.hasPartnerCustomerAccess,
 						),
 				},
 				{
@@ -78,8 +78,8 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.erpnext_partner &&
-								this.$team.doc.partner_status === 'Active' &&
-								this.$session.hasPartnerLeadsAccess,
+							this.$team.doc.partner_status === 'Active' &&
+							this.$session.hasPartnerLeadsAccess,
 						),
 				},
 				{
@@ -88,7 +88,7 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.erpnext_partner &&
-								this.$team.doc.partner_status === 'Active',
+							this.$team.doc.partner_status === 'Active',
 						),
 				},
 				{
@@ -97,7 +97,7 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.erpnext_partner &&
-								this.$team.doc.partner_status === 'Active',
+							this.$team.doc.partner_status === 'Active',
 						),
 				},
 				{
@@ -106,8 +106,8 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.erpnext_partner &&
-								this.$team.doc.partner_status === 'Active' &&
-								this.$session.hasPartnerContributionAccess,
+							this.$team.doc.partner_status === 'Active' &&
+							this.$session.hasPartnerContributionAccess,
 						),
 				},
 				{
@@ -116,9 +116,9 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.country === 'Kenya' &&
-								this.$team.doc.mpesa_enabled &&
-								this.$team.doc.erpnext_partner &&
-								this.$team.doc.partner_status === 'Active',
+							this.$team.doc.mpesa_enabled &&
+							this.$team.doc.erpnext_partner &&
+							this.$team.doc.partner_status === 'Active',
 						),
 				},
 				{
@@ -127,7 +127,7 @@ export default {
 					condition: () =>
 						Boolean(
 							this.$team.doc.country === 'Kenya' &&
-								this.$team.doc.mpesa_enabled,
+							this.$team.doc.mpesa_enabled,
 						),
 				},
 			],
diff --git a/dashboard/src/pages/PlayPage.vue b/dashboard/src/pages/PlayPage.vue
index 29614c5ec29..d7ffd342960 100644
--- a/dashboard/src/pages/PlayPage.vue
+++ b/dashboard/src/pages/PlayPage.vue
@@ -10,7 +10,7 @@
 		<div class="mt-3">
 			<div>
 				<div class="flex items-center">
-					<h2 class="text-lg font-medium text-gray-900">{{ play.play }}</h2>
+					<h2 class="text-lg font-medium text-ink-gray-9">{{ play.play }}</h2>
 					<Badge class="ml-2" :label="play.status" />
 					<div class="ml-auto space-x-2">
 						<Button
@@ -35,32 +35,32 @@
 				<div>
 					<div class="mt-4 grid grid-cols-5 gap-4">
 						<div>
-							<div class="text-sm font-medium text-gray-500">Creation</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Creation</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ $format.date(play.creation, 'lll') }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">Creator</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Creator</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ play.owner }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">Duration</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Duration</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ $format.duration(play.duration) }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">Start</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">Start</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ $format.date(play.start, 'lll') }}
 							</div>
 						</div>
 						<div>
-							<div class="text-sm font-medium text-gray-500">End</div>
-							<div class="mt-2 text-sm text-gray-900">
+							<div class="text-sm font-medium text-ink-gray-5">End</div>
+							<div class="mt-2 text-sm text-ink-gray-9">
 								{{ $format.date(play.end, 'lll') }}
 							</div>
 						</div>
diff --git a/dashboard/src/pages/PrivateStatusPage.vue b/dashboard/src/pages/PrivateStatusPage.vue
index 544ea0ee45a..e3a5b9718ad 100644
--- a/dashboard/src/pages/PrivateStatusPage.vue
+++ b/dashboard/src/pages/PrivateStatusPage.vue
@@ -1,5 +1,5 @@
 <template>
-	<Header class="sticky top-0 z-10 bg-white">
+	<Header class="sticky top-0 z-10 bg-surface-white">
 		<div class="flex items-center space-x-2">
 			<Breadcrumbs :items="[{ label: 'Status', route: '/status' }]" />
 		</div>
diff --git a/dashboard/src/pages/ReleaseGroupBenchSites.vue b/dashboard/src/pages/ReleaseGroupBenchSites.vue
index 4864038e02c..98cc6776d09 100644
--- a/dashboard/src/pages/ReleaseGroupBenchSites.vue
+++ b/dashboard/src/pages/ReleaseGroupBenchSites.vue
@@ -146,7 +146,7 @@ export default {
 						<div class="flex items-center">
 							<Tooltip text="View bench details">
 								<a
-									class="text-base font-medium leading-6 text-gray-900 cursor-pointer"
+									class="text-base font-medium leading-6 text-ink-gray-9 cursor-pointer"
 									href={`/dashboard/benches/${bench.name}`}
 								>
 									{bench.group}
@@ -158,7 +158,7 @@ export default {
 							{bench.has_app_patch_applied && (
 								<Tooltip text="Apps in this bench may have been patched">
 									<a
-										class="p-1 ml-2 text-gray-700 bg-gray-100 rounded"
+										class="p-1 ml-2 text-ink-gray-7 bg-surface-gray-2 rounded"
 										href="https://docs.frappe.io/cloud/benches/app-patches"
 										target="_blank"
 									>
@@ -169,7 +169,7 @@ export default {
 							{bench.has_updated_inplace && (
 								<Tooltip text="This bench has been updated in place">
 									<a
-										class="p-1 ml-2 text-gray-700 bg-gray-100 rounded"
+										class="p-1 ml-2 text-ink-gray-7 bg-surface-gray-2 rounded"
 										href="https://docs.frappe.io/cloud/in-place-updates"
 										target="_blank"
 									>
diff --git a/dashboard/src/pages/Settings.vue b/dashboard/src/pages/Settings.vue
index 05446bd57af..c6f991ddf48 100644
--- a/dashboard/src/pages/Settings.vue
+++ b/dashboard/src/pages/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-	<Header class="sticky top-0 z-10 bg-white">
+	<Header class="sticky top-0 z-10 bg-surface-white">
 		<div class="flex items-center space-x-2">
 			<Breadcrumbs :items="[{ label: 'Settings', route: '/settings' }]" />
 		</div>
diff --git a/dashboard/src/pages/SetupAccount.vue b/dashboard/src/pages/SetupAccount.vue
index fdf51d4930a..cc2248bfc6d 100644
--- a/dashboard/src/pages/SetupAccount.vue
+++ b/dashboard/src/pages/SetupAccount.vue
@@ -94,7 +94,7 @@
 							class="mt-4"
 							:message="$resources.setupAccount.error"
 						/>
-						<div v-if="showLeadsConsentCheckbox" class="mt-4 text-gray-600">
+						<div v-if="showLeadsConsentCheckbox" class="mt-4 text-ink-gray-6">
 							<input
 								id="share-details-consent"
 								type="checkbox"
@@ -124,11 +124,11 @@
 					</template>
 				</form>
 				<div class="mt-4" v-if="!is2FA && !isInvitation">
-					<span class="text-base font-normal text-gray-600">
+					<span class="text-base font-normal text-ink-gray-6">
 						{{ 'By signing up, you agree to our ' }}
 					</span>
 					<a
-						class="text-base font-normal text-gray-900 underline hover:text-gray-700"
+						class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7"
 						href="https://frappecloud.com/policies"
 					>
 						Terms & Policies
diff --git a/dashboard/src/pages/SiteLogin.vue b/dashboard/src/pages/SiteLogin.vue
index 2ce671b80cc..13b68d8b41e 100644
--- a/dashboard/src/pages/SiteLogin.vue
+++ b/dashboard/src/pages/SiteLogin.vue
@@ -145,7 +145,7 @@
 					</div>
 					<div v-else class="mt-10">
 						<div v-if="sites.data.length === 0">
-							<div class="text-center text-base leading-6 text-gray-700">
+							<div class="text-center text-base leading-6 text-ink-gray-7">
 								<div>No sites found for {{ email }}</div>
 								<Link :to="{ name: 'Signup' }">Sign up</Link> to create a new
 								site
@@ -155,14 +155,14 @@
 							<div
 								v-for="site in sites.data"
 								:key="site.name"
-								class="flex items-center justify-between rounded-md px-3 py-2 hover:cursor-pointer hover:bg-gray-100"
+								class="flex items-center justify-between rounded-md px-3 py-2 hover:cursor-pointer hover:bg-surface-gray-2"
 								@click="loginToSite(site.name)"
 							>
 								<div
 									class="flex min-h-[40px] w-full items-center justify-between"
 								>
 									<div class="space-y-2">
-										<div class="text-base text-gray-800">
+										<div class="text-base text-ink-gray-8">
 											{{ site.host_name || site.name }}
 										</div>
 									</div>
@@ -183,22 +183,22 @@
 			<template v-slot:footer>
 				<div class="flex w-full flex-col px-4 justify-center pb-8">
 					<div v-if="sites.fetched">
-						<span class="text-base font-normal text-gray-600">
+						<span class="text-base font-normal text-ink-gray-6">
 							Switch to a different account?
 						</span>
 						<span
-							class="text-base font-normal text-gray-900 underline hover:text-gray-700 cursor-pointer"
+							class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7 cursor-pointer"
 							@click="goBack"
 						>
 							Logout
 						</span>
 					</div>
 					<div>
-						<span class="text-base font-normal text-gray-600">
+						<span class="text-base font-normal text-ink-gray-6">
 							Manage your sites?
 						</span>
 						<router-link
-							class="text-base font-normal text-gray-900 underline hover:text-gray-700"
+							class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7"
 							:to="{
 								name: 'Login',
 							}"
diff --git a/dashboard/src/pages/SiteMigration.vue b/dashboard/src/pages/SiteMigration.vue
index 5e7df4fb273..1c19aca0560 100644
--- a/dashboard/src/pages/SiteMigration.vue
+++ b/dashboard/src/pages/SiteMigration.vue
@@ -19,7 +19,7 @@
 
 		<div class="mt-3">
 			<div class="flex w-full items-center">
-				<h2 class="text-lg font-medium text-gray-900">
+				<h2 class="text-lg font-medium text-ink-gray-9">
 					{{ siteAction.action_type }}
 				</h2>
 				<Badge class="ml-2" :label="siteAction.status" />
@@ -46,7 +46,7 @@
 			<div>
 				<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-7">
 					<div>
-						<div class="text-sm font-medium text-gray-500">
+						<div class="text-sm font-medium text-ink-gray-5">
 							Destination Bench
 						</div>
 						<div
@@ -58,10 +58,10 @@
 							{{ destinationReleaseGroupName || '-'
 							}}<span>&#8599;&#65038;</span>
 						</div>
-						<div class="mt-2 text-sm text-gray-900" v-else>-</div>
+						<div class="mt-2 text-sm text-ink-gray-9" v-else>-</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">
+						<div class="text-sm font-medium text-ink-gray-5">
 							Destination Server
 						</div>
 						<div
@@ -72,23 +72,23 @@
 						>
 							{{ destinationServerName || '-' }}<span>&#8599;&#65038;</span>
 						</div>
-						<div class="mt-2 text-sm text-gray-900" v-else>-</div>
+						<div class="mt-2 text-sm text-ink-gray-9" v-else>-</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creation</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creation</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ $format.date(siteAction.creation, 'lll') }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creator</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creator</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ siteAction.owner }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Duration</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Duration</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{
 								siteAction.duration
 									? this.format_seconds(siteAction.duration)
@@ -97,16 +97,16 @@
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Start</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Start</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{
 								siteAction.start ? $format.date(siteAction.start, 'lll') : '-'
 							}}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">End</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">End</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ siteAction.end ? $format.date(siteAction.end, 'lll') : '-' }}
 						</div>
 					</div>
diff --git a/dashboard/src/pages/SiteUpdate.vue b/dashboard/src/pages/SiteUpdate.vue
index 8daffdcee86..c059a57e328 100644
--- a/dashboard/src/pages/SiteUpdate.vue
+++ b/dashboard/src/pages/SiteUpdate.vue
@@ -9,7 +9,7 @@
 
 		<div class="mt-3">
 			<div class="flex w-full items-center">
-				<h2 class="text-lg font-medium text-gray-900">
+				<h2 class="text-lg font-medium text-ink-gray-9">
 					Update Site {{ siteUpdate.deploy_type }}
 				</h2>
 				<Badge class="ml-2" :label="siteUpdate.status" />
@@ -36,20 +36,20 @@
 			<div>
 				<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creation</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creation</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ $format.date(siteUpdate.creation, 'lll') }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Creator</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Creator</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ siteUpdate.owner }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Duration</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Duration</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{
 								siteUpdate.update_duration
 									? this.format_seconds(siteUpdate.update_duration)
@@ -58,14 +58,14 @@
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">Start</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">Start</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{ $format.date(siteUpdate.update_start, 'lll') }}
 						</div>
 					</div>
 					<div>
-						<div class="text-sm font-medium text-gray-500">End</div>
-						<div class="mt-2 text-sm text-gray-900">
+						<div class="text-sm font-medium text-ink-gray-5">End</div>
+						<div class="mt-2 text-sm text-ink-gray-9">
 							{{
 								siteUpdate.update_end
 									? $format.date(siteUpdate.update_end, 'lll')
diff --git a/dashboard/src/pages/Subscription.vue b/dashboard/src/pages/Subscription.vue
index 7f48c766525..e4cb50a2854 100644
--- a/dashboard/src/pages/Subscription.vue
+++ b/dashboard/src/pages/Subscription.vue
@@ -1,13 +1,13 @@
 <template>
-	<div class="min-h-screen bg-gray-50">
+	<div class="min-h-screen bg-surface-gray-1">
 		<LoginBox>
-			<h1 class="text-base text-gray-600">Manage Subscription</h1>
+			<h1 class="text-base text-ink-gray-6">Manage Subscription</h1>
 			<div class="mt-4">
-				<div class="text-xl font-medium text-gray-900">
+				<div class="text-xl font-medium text-ink-gray-9">
 					{{ site }}
 				</div>
 				<div
-					class="mt-1 text-base text-gray-700"
+					class="mt-1 text-base text-ink-gray-7"
 					v-if="$resources.subscription.data?.trial_end_date"
 				>
 					Trial ends
@@ -21,10 +21,10 @@
 			<div class="mt-8" v-if="$resources.subscription.data">
 				<div>
 					<button
-						class="flex w-full items-center justify-between rounded-sm bg-gray-100 p-2 hover:bg-gray-200"
+						class="flex w-full items-center justify-between rounded-sm bg-surface-gray-2 p-2 hover:bg-surface-gray-3"
 						@click="currentStep = 1"
 					>
-						<span class="text-sm font-medium text-gray-700">
+						<span class="text-sm font-medium text-ink-gray-7">
 							{{
 								$resources.subscription.data.current_plan
 									? 'Change plan'
@@ -32,7 +32,7 @@
 							}}
 						</span>
 						<span
-							class="text-sm font-bold text-gray-900"
+							class="text-sm font-bold text-ink-gray-9"
 							v-if="currentStep === 2"
 						>
 							{{ selectedPlan.plan_title }}<span class="font-normal">/mo</span>
@@ -52,10 +52,10 @@
 						>
 							<div class="flex items-center justify-between">
 								<div>
-									<span class="text-base font-medium text-gray-900">
+									<span class="text-base font-medium text-ink-gray-9">
 										{{ plan.plan_title }}
 									</span>
-									<span class="text-base text-gray-600">/mo</span>
+									<span class="text-base text-ink-gray-6">/mo</span>
 								</div>
 								<Badge
 									v-if="$resources.subscription.data.current_plan == plan.name"
@@ -67,7 +67,7 @@
 									class="h-5 w-5"
 								/>
 							</div>
-							<div class="mt-1 text-sm text-gray-600">
+							<div class="mt-1 text-sm text-ink-gray-6">
 								<span>
 									CPU {{ plan.cpu_time_per_day }}
 									{{ plan.cpu_time_per_day == 1 ? 'hour' : 'hours' }}/day
@@ -102,7 +102,7 @@
 				</div>
 				<div class="mt-2" v-if="currentStep == 2">
 					<div
-						class="rounded-sm bg-gray-100 p-2 text-sm font-medium text-gray-700"
+						class="rounded-sm bg-surface-gray-2 p-2 text-sm font-medium text-ink-gray-7"
 					>
 						Step 2: Setup billing
 					</div>
diff --git a/dashboard/src/pages/devtools/database/BinlogBrowser.vue b/dashboard/src/pages/devtools/database/BinlogBrowser.vue
index 6da1c99e8b0..22d68852968 100644
--- a/dashboard/src/pages/devtools/database/BinlogBrowser.vue
+++ b/dashboard/src/pages/devtools/database/BinlogBrowser.vue
@@ -7,7 +7,7 @@
 				!binlog_indexer_enabled,
 		}"
 	>
-		<Header class="sticky top-0 z-10 bg-white">
+		<Header class="sticky top-0 z-10 bg-surface-white">
 			<div
 				class="flex w-full flex-col gap-2 md:flex-row md:items-center md:justify-between"
 			>
@@ -27,7 +27,7 @@
 						</div>
 					</Tooltip>
 					<Tooltip text="View documentation">
-						<div class="rounded-md bg-gray-100 p-1.5">
+						<div class="rounded-md bg-surface-gray-2 p-1.5">
 							<a
 								href="https://docs.frappe.io/cloud/binlog-browser"
 								target="_blank"
@@ -62,13 +62,13 @@
 		<div class="mx-5 my-2.5">
 			<div
 				v-if="!site"
-				class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-gray-700"
+				class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 			>
 				Select a site to get started
 			</div>
 			<div
 				v-else-if="!binlog_index_state_loaded"
-				class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-gray-700"
+				class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 			>
 				<Spinner class="w-4" />
 				Loading Binlog Browser...
@@ -208,7 +208,7 @@
 					<div class="mt-3" v-if="isBinlogSearchAccessible">
 						<div
 							v-if="this.$resources?.searchBinlogs?.loading"
-							class="flex h-80 w-full items-center justify-center gap-2 text-base text-gray-700"
+							class="flex h-80 w-full items-center justify-center gap-2 text-base text-ink-gray-7"
 						>
 							<Spinner class="w-4" /> Searching for binlogs...
 						</div>
@@ -232,10 +232,10 @@
 
 					<!-- Block  -->
 					<div
-						class="z-1000 h-80 bg-white-overlay-900 absolute inset-0 flex justify-center items-center"
+						class="z-1000 h-80 bg-surface-white-overlay-900 absolute inset-0 flex justify-center items-center"
 						v-else
 					>
-						<div class="flex text-md text-gray-800 items-center gap-1.5">
+						<div class="flex text-md text-ink-gray-8 items-center gap-1.5">
 							<lucide-triangle-alert class="h-5 w-5 text-amber-600" />
 							To view or search SQL queries, choose a time range of less than 6
 							hours
@@ -247,25 +247,25 @@
 
 		<!-- Overlay to hide controls while building timeline -->
 		<div
-			class="z-1000 bg-white-overlay-800 absolute inset-0 flex justify-center items-center"
+			class="z-1000 bg-surface-white-overlay-800 absolute inset-0 flex justify-center items-center"
 			v-if="binlog_index_state_loaded && this.$resources?.timeline?.loading"
 		>
-			<div class="flex gap-2 text-base text-gray-800">
+			<div class="flex gap-2 text-base text-ink-gray-8">
 				<Spinner class="w-4" />
 				Building timeline...
 			</div>
 		</div>
 
 		<div
-			class="z-2000 bg-white absolute inset-0 flex justify-center items-center"
+			class="z-2000 bg-surface-white absolute inset-0 flex justify-center items-center"
 			v-if="binlog_index_state_loaded && binlog_indexer_running"
 		>
 			<div class="flex flex-col items-center gap-3 text-center px-6 max-w-lg">
-				<lucide-construction class="h-8 w-8 text-gray-800 mb-1" />
-				<h2 class="text-xl font-semibold text-gray-900">
+				<lucide-construction class="h-8 w-8 text-ink-gray-8 mb-1" />
+				<h2 class="text-xl font-semibold text-ink-gray-9">
 					Binlog Browser Temporarily Unavailable
 				</h2>
-				<p class="text-gray-600">
+				<p class="text-ink-gray-6">
 					We are indexing new binlogs. This can take up to
 					<strong>5 minutes</strong>.
 					<br />
@@ -275,28 +275,31 @@
 		</div>
 
 		<div
-			class="z-3000 bg-white absolute inset-0 flex justify-center items-center"
+			class="z-3000 bg-surface-white absolute inset-0 flex justify-center items-center"
 			v-if="binlog_index_state_loaded && !binlog_indexer_enabled"
 		>
 			<div class="flex flex-col items-center gap-3 text-center px-6 max-w-lg">
-				<lucide-construction class="h-8 w-8 text-gray-800 mb-1" />
+				<lucide-construction class="h-8 w-8 text-ink-gray-8 mb-1" />
 				<h2
-					class="text-xl font-semibold text-gray-900"
+					class="text-xl font-semibold text-ink-gray-9"
 					v-if="
 						site_hosted_on_shared_server || database_server_memory < 8 * 1024
 					"
 				>
 					Binlog Browser Not Available
 				</h2>
-				<h2 class="text-xl font-semibold text-gray-900" v-else>
+				<h2 class="text-xl font-semibold text-ink-gray-9" v-else>
 					Binlog Indexing Disabled
 				</h2>
-				<p class="text-gray-600" v-if="site_hosted_on_shared_server">
+				<p class="text-ink-gray-6" v-if="site_hosted_on_shared_server">
 					Binlog Browser is only available for sites on dedicated servers.
 					<br />
 					This site is currently on shared hosting.
 				</p>
-				<p class="text-gray-600" v-else-if="database_server_memory < 8 * 1024">
+				<p
+					class="text-ink-gray-6"
+					v-else-if="database_server_memory < 8 * 1024"
+				>
 					<span
 						>This feature requires at least <strong>8 GB RAM</strong> on the db
 						server.</span
@@ -306,11 +309,11 @@
 					<strong>{{ Math.round(database_server_memory / 1024) }} GB RAM</strong
 					>.
 				</p>
-				<p class="text-gray-600" v-else>
+				<p class="text-ink-gray-6" v-else>
 					Follow the
 					<a
 						href="https://docs.frappe.io/cloud/database-server-actions#enable--disable-binlog-indexer"
-						class="text-blue-600 underline"
+						class="text-ink-blue-2 underline"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
diff --git a/dashboard/src/pages/devtools/database/DatabaseAnalyzer.vue b/dashboard/src/pages/devtools/database/DatabaseAnalyzer.vue
index ed3fb95a2ff..c4a9e8d40aa 100644
--- a/dashboard/src/pages/devtools/database/DatabaseAnalyzer.vue
+++ b/dashboard/src/pages/devtools/database/DatabaseAnalyzer.vue
@@ -1,5 +1,5 @@
 <template>
-	<Header class="sticky top-0 z-10 bg-white">
+	<Header class="sticky top-0 z-10 bg-surface-white">
 		<div
 			class="flex w-full flex-col gap-2 md:flex-row md:items-center md:justify-between"
 		>
@@ -43,7 +43,7 @@
 			<!-- Database Size Analyzer -->
 			<div>
 				<div class="flex flex-row items-center justify-between">
-					<p class="text-base font-medium text-gray-800">
+					<p class="text-base font-medium text-ink-gray-8">
 						Database Size Breakup
 					</p>
 					<div class="flex flex-row gap-2">
@@ -61,7 +61,7 @@
 
 				<!-- Slider -->
 				<div
-					class="mb-4 mt-4 flex h-7 w-full cursor-pointer items-start justify-start overflow-clip rounded border bg-gray-50 pl-0"
+					class="mb-4 mt-4 flex h-7 w-full cursor-pointer items-start justify-start overflow-clip rounded border bg-surface-gray-1 pl-0"
 					@click="showTableSchemaSizeDetailsDialog = true"
 				>
 					<div
@@ -95,8 +95,8 @@
 							class="h-2 w-2 rounded-full"
 							style="background-color: #e86c13"
 						></div>
-						<span class="text-sm text-gray-800">Data Size</span
-						><span class="ml-auto text-sm text-gray-800">{{
+						<span class="text-sm text-ink-gray-8">Data Size</span
+						><span class="ml-auto text-sm text-ink-gray-8">{{
 							formatSizeInMB(this.databaseSizeBreakup.data_size)
 						}}</span>
 					</div>
@@ -107,8 +107,8 @@
 							class="h-2 w-2 rounded-full"
 							style="background-color: #34bae3"
 						></div>
-						<span class="text-sm text-gray-800">Index Size</span
-						><span class="ml-auto text-sm text-gray-800"
+						<span class="text-sm text-ink-gray-8">Index Size</span
+						><span class="ml-auto text-sm text-ink-gray-8"
 							>{{ formatSizeInMB(this.databaseSizeBreakup.index_size) }}
 						</span>
 					</div>
@@ -119,8 +119,8 @@
 							class="h-2 w-2 rounded-full"
 							style="background-color: #ffbf00"
 						></div>
-						<span class="text-sm text-gray-800">Claimable Space</span
-						><span class="ml-auto text-sm text-gray-800"
+						<span class="text-sm text-ink-gray-8">Claimable Space</span
+						><span class="ml-auto text-sm text-ink-gray-8"
 							>{{ formatSizeInMB(this.databaseSizeBreakup.claimable_size) }}
 						</span>
 					</div>
@@ -131,8 +131,8 @@
 							class="h-2 w-2 rounded-full"
 							style="background-color: #e2e2e2"
 						></div>
-						<span class="text-sm text-gray-800">Free Space</span
-						><span class="ml-auto text-sm text-gray-800"
+						<span class="text-sm text-ink-gray-8">Free Space</span
+						><span class="ml-auto text-sm text-ink-gray-8"
 							>{{ formatSizeInMB(this.databaseSizeBreakup.free_size) }}
 						</span>
 					</div>
@@ -174,7 +174,7 @@
 				<template #default>
 					<div
 						v-if="this.$resources.databaseProcesses.loading"
-						class="flex h-60 w-full items-center justify-center gap-2 text-base text-gray-700"
+						class="flex h-60 w-full items-center justify-center gap-2 text-base text-ink-gray-7"
 					>
 						<Spinner class="w-4" /> Loading Database Processes
 					</div>
@@ -276,7 +276,7 @@
 										"
 										>Suggest Indexes</Button
 									>
-									<p class="text-base text-gray-700">
+									<p class="text-base text-ink-gray-7">
 										This may take a while to analyze
 									</p>
 								</div>
@@ -332,12 +332,12 @@
 		</div>
 		<div
 			v-else-if="!site"
-			class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-gray-700"
+			class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 		>
 			Select a site to get started
 		</div>
 		<div
-			class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-gray-700"
+			class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 			v-else
 		>
 			<Spinner class="w-4" /> Loading Table Schemas
diff --git a/dashboard/src/pages/devtools/database/DatabaseSQLPlayground.vue b/dashboard/src/pages/devtools/database/DatabaseSQLPlayground.vue
index 439e6a1226d..e310033311a 100644
--- a/dashboard/src/pages/devtools/database/DatabaseSQLPlayground.vue
+++ b/dashboard/src/pages/devtools/database/DatabaseSQLPlayground.vue
@@ -1,5 +1,5 @@
 <template>
-	<Header class="sticky top-0 z-10 bg-white">
+	<Header class="sticky top-0 z-10 bg-surface-white">
 		<div
 			class="flex w-full flex-col gap-2 md:flex-row md:items-center md:justify-between"
 		>
@@ -62,7 +62,7 @@
 		<!-- body -->
 		<div
 			v-if="!site"
-			class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-gray-700"
+			class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 		>
 			Select a site to get started
 		</div>
@@ -150,7 +150,7 @@
 </template>
 <style scoped>
 .output-container {
-	@apply rounded border p-4 text-base text-gray-700;
+	@apply rounded border p-4 text-base text-ink-gray-7;
 }
 </style>
 <script>
@@ -355,7 +355,7 @@ Are you sure you want to run the query?`,
 				message: `
 Are you sure you want to run the query?
 <br>
-<pre class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-700">${this.selectedQuery}</pre>
+<pre class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-surface-gray-1 px-2 py-1.5 text-sm text-ink-gray-7">${this.selectedQuery}</pre>
 				`,
 				primaryAction: {
 					label: 'Run Query',
diff --git a/dashboard/src/pages/devtools/log-browser/LogBrowser.vue b/dashboard/src/pages/devtools/log-browser/LogBrowser.vue
index b1d3c6ee887..553bbe57a31 100644
--- a/dashboard/src/pages/devtools/log-browser/LogBrowser.vue
+++ b/dashboard/src/pages/devtools/log-browser/LogBrowser.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col">
-		<Header class="bg-white">
+		<Header class="bg-surface-white">
 			<div
 				class="flex w-full flex-col gap-2 md:flex-row md:items-center md:justify-between"
 			>
@@ -100,7 +100,7 @@
 				class="w-full"
 			>
 				<p
-					class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-gray-700"
+					class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 				>
 					Select a {{ mode }} to view logs
 				</p>
@@ -110,7 +110,7 @@
 				<div class="m-4 flex h-full w-3/4 flex-col">
 					<div
 						v-if="$resources.log.loading"
-						class="flex h-full min-h-[90vh] w-full items-center justify-center gap-2 text-gray-700"
+						class="flex h-full min-h-[90vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 					>
 						<Spinner class="h-4 w-4" />
 						<span> Fetching the log... </span>
@@ -122,7 +122,7 @@
 					<LogViewer v-else-if="logId" :log="log" />
 					<div
 						v-else
-						class="flex h-full min-h-[90vh] w-full items-center justify-center gap-2 text-gray-700"
+						class="flex h-full min-h-[90vh] w-full items-center justify-center gap-2 text-ink-gray-7"
 					>
 						Select a log to view
 					</div>
diff --git a/dashboard/src/pages/devtools/log-browser/LogList.vue b/dashboard/src/pages/devtools/log-browser/LogList.vue
index 2368909926b..159cde9cad1 100644
--- a/dashboard/src/pages/devtools/log-browser/LogList.vue
+++ b/dashboard/src/pages/devtools/log-browser/LogList.vue
@@ -6,26 +6,26 @@
 			v-model="searchLogQuery"
 		>
 			<template #prefix>
-				<lucide-search class="h-4 w-4 text-gray-500" />
+				<lucide-search class="h-4 w-4 text-ink-gray-5" />
 			</template>
 		</FormControl>
 		<div class="h-[81.5vh] space-y-2 overflow-auto pr-4">
 			<div
 				v-if="$resources.benchLogs?.loading || $resources.siteLogs?.loading"
-				class="mt-20 flex justify-center space-x-2 text-sm text-gray-700"
+				class="mt-20 flex justify-center space-x-2 text-sm text-ink-gray-7"
 			>
 				<Spinner class="w-4" />
 				<span> Fetching logs... </span>
 			</div>
 			<div
 				v-else-if="logs.length === 0"
-				class="mt-20 flex justify-center text-sm text-gray-700"
+				class="mt-20 flex justify-center text-sm text-ink-gray-7"
 			>
 				No logs found
 			</div>
 			<template v-else v-for="log in logs">
 				<div
-					class="cursor-pointer rounded border border-gray-200 p-3 hover:bg-gray-50"
+					class="cursor-pointer rounded border border-gray-200 p-3 hover:bg-surface-gray-1"
 					:class="{
 						'border-gray-800': logId === log.name,
 					}"
@@ -45,12 +45,12 @@
 				>
 					<div class="flex items-center justify-between">
 						<div class="space-y-1">
-							<p class="text-base text-gray-700">{{ log.name }}</p>
-							<p class="text-xs text-gray-500">
+							<p class="text-base text-ink-gray-7">{{ log.name }}</p>
+							<p class="text-xs text-ink-gray-5">
 								{{ $format.date(log.modified, 'YYYY-MM-DD HH:mm') }}
 							</p>
 						</div>
-						<p class="text-sm text-gray-500">
+						<p class="text-sm text-ink-gray-5">
 							{{ $format.bytes(log.size) }}
 						</p>
 					</div>
diff --git a/dashboard/src/pages/devtools/log-browser/LogViewer.vue b/dashboard/src/pages/devtools/log-browser/LogViewer.vue
index f75603fc044..792daee17c4 100644
--- a/dashboard/src/pages/devtools/log-browser/LogViewer.vue
+++ b/dashboard/src/pages/devtools/log-browser/LogViewer.vue
@@ -38,7 +38,7 @@
 							v-model="searchLogQuery"
 						>
 							<template #prefix>
-								<lucide-search class="h-4 w-4 text-gray-500" />
+								<lucide-search class="h-4 w-4 text-ink-gray-5" />
 							</template>
 						</FormControl>
 					</div>
@@ -51,7 +51,7 @@
 							v-if="columns?.length || props.log?.length"
 							class="w-full border-separate border-spacing-0"
 						>
-							<thead class="z-5 sticky top-0 z-10 w-full rounded bg-gray-100">
+							<thead class="z-5 sticky top-0 z-10 w-full rounded bg-surface-gray-2">
 								<tr
 									v-for="headerGroup in table.getHeaderGroups()"
 									:key="headerGroup.id"
@@ -60,7 +60,7 @@
 										v-for="header in headerGroup.headers"
 										:key="header.id"
 										:colSpan="header.colSpan"
-										class="text-gray-800"
+										class="text-ink-gray-8"
 										:class="{
 											'w-2/12': header.column.columnDef.id === 'level',
 											'w-3/12': header.column.columnDef.id === 'time',
@@ -83,7 +83,7 @@
 									v-for="(row, index) in table.getRowModel().rows"
 									:key="row.id"
 								>
-									<tr class="hover:bg-gray-50">
+									<tr class="hover:bg-surface-gray-1">
 										<td
 											v-for="cell in row.getVisibleCells()"
 											:key="cell.id"
@@ -103,22 +103,22 @@
 												/>
 												<lucide-alert-triangle
 													v-else-if="getBadgeLabel(cell) === 'Warning'"
-													class="h-4 w-4 text-yellow-500"
+													class="h-4 w-4 text-ink-amber-2"
 												/>
 												<lucide-alert-circle
 													v-else-if="
 														getBadgeLabel(cell) === 'Error' ||
 														getBadgeLabel(cell) === 'Critical'
 													"
-													class="h-4 w-4 text-red-500"
+													class="h-4 w-4 text-ink-red-3"
 												/>
 												<span
 													class="text-xs"
 													:class="{
 														'text-blue-500': getBadgeLabel(cell) === 'Info',
-														'text-yellow-500':
+														'text-ink-amber-2':
 															getBadgeLabel(cell) === 'Warning',
-														'text-red-500':
+														'text-ink-red-3':
 															getBadgeLabel(cell) === 'Error' ||
 															getBadgeLabel(cell) === 'Critical',
 													}"
@@ -130,7 +130,7 @@
 												class="truncate font-mono text-sm"
 												:class="{
 													'font-mono ': cell.column.columnDef.id === 'time',
-													'font-mono text-gray-600':
+													'font-mono text-ink-gray-6':
 														cell.column.columnDef.id === 'description',
 												}"
 											>
@@ -145,7 +145,7 @@
 										<td
 											v-if="row.getIsExpanded()"
 											:colspan="row.getAllCells().length"
-											class="max-w-[39.75rem] whitespace-pre-wrap break-words border-b bg-gray-900 px-3 py-4 font-mono text-sm text-gray-200"
+											class="max-w-[39.75rem] whitespace-pre-wrap break-words border-b bg-gray-900 px-3 py-4 font-mono text-sm text-ink-gray-2"
 										>
 											{{ row.original.description }}
 										</td>
@@ -156,7 +156,7 @@
 						</table>
 
 						<div v-if="table.getRowModel().rows.length === 0" class="p-8">
-							<p class="text-center text-sm text-gray-500">
+							<p class="text-center text-sm text-ink-gray-5">
 								No log entries found
 							</p>
 						</div>
@@ -165,7 +165,7 @@
 					<div class="flex justify-between rounded rounded-t-none border-t p-1">
 						<div></div>
 						<div class="flex flex-shrink-0 items-center justify-end gap-3">
-							<p class="tnum text-sm text-gray-600">
+							<p class="tnum text-sm text-ink-gray-6">
 								{{ pageStart }} - {{ pageEnd }} of {{ totalRows }} rows
 							</p>
 							<div class="flex gap-2">
diff --git a/dashboard/src/pages/signup/AppSelector.vue b/dashboard/src/pages/signup/AppSelector.vue
index dccfd24484d..8e9cdc110cb 100644
--- a/dashboard/src/pages/signup/AppSelector.vue
+++ b/dashboard/src/pages/signup/AppSelector.vue
@@ -29,8 +29,8 @@
 						<div
 							class="flex cursor-pointer items-center rounded border border-gray-100 p-2"
 							:class="{
-								'bg-gray-100': selectedApp?.name === app.name,
-								'border-gray-100 hover:bg-gray-50':
+								'bg-surface-gray-2': selectedApp?.name === app.name,
+								'border-gray-100 hover:bg-surface-gray-1':
 									selectedApp?.name !== app.name,
 							}"
 							@click="selectedApp = app"
@@ -42,7 +42,7 @@
 							/>
 							<div class="space-y-1">
 								<p class="text-lg font-medium">{{ app.title }}</p>
-								<p class="line-clamp-1 text-sm text-gray-600">
+								<p class="line-clamp-1 text-sm text-ink-gray-6">
 									{{ app.description }}
 								</p>
 							</div>
@@ -58,11 +58,11 @@
 				/>
 			</div>
 			<template #footer>
-				<span class="ml-4 text-base font-normal text-gray-600">
+				<span class="ml-4 text-base font-normal text-ink-gray-6">
 					{{ 'Skip creating a site? ' }}
 				</span>
 				<router-link
-					class="text-base font-normal text-gray-900 underline hover:text-gray-700"
+					class="text-base font-normal text-ink-gray-9 underline hover:text-ink-gray-7"
 					:to="{
 						name: 'Site List',
 					}"
@@ -118,7 +118,7 @@ export default {
 		if (window.posthog?.__loaded) {
 			window.posthog.identify(this.email || window.posthog.get_distinct_id(), {
 				app: 'frappe_cloud',
-				action: 'login_signup'
+				action: 'login_signup',
 			});
 
 			window.posthog.startSessionRecording();
diff --git a/dashboard/src/pages/signup/Login.vue b/dashboard/src/pages/signup/Login.vue
index 16cd3634fea..42125003c82 100644
--- a/dashboard/src/pages/signup/Login.vue
+++ b/dashboard/src/pages/signup/Login.vue
@@ -4,9 +4,9 @@
 		v-if="$resources.signupSettings.loading"
 	>
 		<Spinner class="mr-2 w-4" />
-		<p class="text-gray-800">Loading</p>
+		<p class="text-ink-gray-8">Loading</p>
 	</div>
-	<div class="flex h-screen overflow-hidden sm:bg-gray-50" v-else>
+	<div class="flex h-screen overflow-hidden sm:bg-surface-gray-1" v-else>
 		<div class="w-full overflow-auto">
 			<LoginBox
 				title="Welcome back"
@@ -99,7 +99,7 @@
 
 					<div class="mt-6 text-center">
 						<router-link
-							class="text-center text-base font-medium text-gray-900 hover:text-gray-700"
+							class="text-center text-base font-medium text-ink-gray-9 hover:text-ink-gray-7"
 							:to="{
 								name: 'SaaSSignup',
 								params: $route.params,
diff --git a/dashboard/src/pages/signup/LoginToSite.vue b/dashboard/src/pages/signup/LoginToSite.vue
index 5829ffdb622..cea2a361ac6 100644
--- a/dashboard/src/pages/signup/LoginToSite.vue
+++ b/dashboard/src/pages/signup/LoginToSite.vue
@@ -19,7 +19,7 @@
 				</template>
 				<template v-slot:default>
 					<div class="flex h-40 flex-col justify-center">
-						<div class="text-base leading-5 text-gray-800">
+						<div class="text-base leading-5 text-ink-gray-8">
 							<p>It looks like something went wrong!</p>
 							<p class="">
 								Contact
@@ -56,7 +56,7 @@
 							:label="currentBuildStep"
 						/>
 						<div
-							class="flex w-full items-center space-x-2 pt-4 text-sm text-gray-600"
+							class="flex w-full items-center space-x-2 pt-4 text-sm text-ink-gray-6"
 						>
 							<lucide-info class="h-4 w-4" />
 							<span>{{ currentHelpText }}</span>
diff --git a/dashboard/src/pages/signup/OAuthSetupAccount.vue b/dashboard/src/pages/signup/OAuthSetupAccount.vue
index 913c2ebed53..c7b5d5081ba 100644
--- a/dashboard/src/pages/signup/OAuthSetupAccount.vue
+++ b/dashboard/src/pages/signup/OAuthSetupAccount.vue
@@ -4,9 +4,9 @@
 		v-if="$resources.signupSettings.loading"
 	>
 		<Spinner class="mr-2 w-4" />
-		<p class="text-gray-800">Loading</p>
+		<p class="text-ink-gray-8">Loading</p>
 	</div>
-	<div class="flex h-screen overflow-hidden sm:bg-gray-50" v-else>
+	<div class="flex h-screen overflow-hidden sm:bg-surface-gray-1" v-else>
 		<div class="w-full overflow-auto">
 			<LoginBox
 				title="Get started in minutes"
diff --git a/dashboard/src/pages/signup/SetupSite.vue b/dashboard/src/pages/signup/SetupSite.vue
index e61c5fd7b64..e628b655b02 100644
--- a/dashboard/src/pages/signup/SetupSite.vue
+++ b/dashboard/src/pages/signup/SetupSite.vue
@@ -20,7 +20,7 @@
 							<Tooltip
 								text="You will be able to access your site via your site name"
 							>
-								<lucide-info class="h-4 w-4 text-gray-500" />
+								<lucide-info class="h-4 w-4 text-ink-gray-5" />
 							</Tooltip>
 						</div>
 						<div class="col-span-2 flex w-full">
@@ -35,7 +35,7 @@
 								ref="subdomainInput"
 							/>
 							<div
-								class="flex cursor-default items-center rounded-r bg-gray-100 px-2 text-base"
+								class="flex cursor-default items-center rounded-r bg-surface-gray-2 px-2 text-base"
 							>
 								.{{ domain }}
 							</div>
diff --git a/dashboard/src/pages/signup/Signup.vue b/dashboard/src/pages/signup/Signup.vue
index ba9770ed32e..0719422301b 100644
--- a/dashboard/src/pages/signup/Signup.vue
+++ b/dashboard/src/pages/signup/Signup.vue
@@ -4,9 +4,9 @@
 		v-if="$resources.signupSettings.loading"
 	>
 		<Spinner class="mr-2 w-4" />
-		<p class="text-gray-800">Loading</p>
+		<p class="text-ink-gray-8">Loading</p>
 	</div>
-	<div class="flex h-screen overflow-hidden sm:bg-gray-50" v-else>
+	<div class="flex h-screen overflow-hidden sm:bg-surface-gray-1" v-else>
 		<div class="w-full overflow-auto">
 			<LoginBox
 				title="Get started in minutes"
@@ -114,7 +114,7 @@
 					</form>
 					<div class="mt-6 text-center">
 						<router-link
-							class="text-center text-base font-medium text-gray-900 hover:text-gray-700"
+							class="text-center text-base font-medium text-ink-gray-9 hover:text-ink-gray-7"
 							:to="{
 								name: 'SaaSLogin',
 								params: $route.params,
diff --git a/dashboard/src/pages/signup/VerifyEmail.vue b/dashboard/src/pages/signup/VerifyEmail.vue
index d8e2a26ebf2..246cce76ecb 100644
--- a/dashboard/src/pages/signup/VerifyEmail.vue
+++ b/dashboard/src/pages/signup/VerifyEmail.vue
@@ -4,9 +4,9 @@
 		v-if="$resources.signupSettings.loading"
 	>
 		<Spinner class="mr-2 w-4" />
-		<p class="text-gray-800">Loading</p>
+		<p class="text-ink-gray-8">Loading</p>
 	</div>
-	<div class="flex h-screen overflow-hidden sm:bg-gray-50" v-else>
+	<div class="flex h-screen overflow-hidden sm:bg-surface-gray-1" v-else>
 		<div class="w-full overflow-auto">
 			<SaaSLoginBox
 				title="Verify your email"