From e656f97c2857a8a372e1ffbdfc74669383ba6dcb Mon Sep 17 00:00:00 2001
From: Umar Abid <75561750+umrkhn@users.noreply.github.com>
Date: Thu, 23 Nov 2023 21:11:31 +0500
Subject: [PATCH] [FEAT-1092]: Update color names and box-shadows to match
 Design-System (#1143)

* feat: update colors in tailwind config

* fix: update color class-names to match new palette

* fix: update primary & secondary color class-names to match new palette

* fix: update box-shadows to match design system

* fix: update tailwind config and class-names
---
 .../account-details/AwsAccountDetails.tsx     |   6 +-
 .../account-details/AzureAccountDetails.tsx   |   4 +-
 .../account-details/CivoAccountDetails.tsx    |   4 +-
 .../DigitalOceanAccountDetails.tsx            |   4 +-
 .../account-details/GcpAccountDetails.tsx     |   4 +-
 .../KubernetesAccountDetails.tsx              |   4 +-
 .../account-details/LinodeAccountDetails.tsx  |   4 +-
 .../MongoDBAtlasAccountDetails.tsx            |   4 +-
 .../account-details/OciAccountDetails.tsx     |   4 +-
 .../ScalewayAccountDetails.tsx                |   4 +-
 .../account-details/TencentAccountDetails.tsx |   4 +-
 dashboard/components/banner/Banner.tsx        |   6 +-
 dashboard/components/button/Button.tsx        |  12 +-
 dashboard/components/card/Card.tsx            |   6 +-
 dashboard/components/card/CardSkeleton.tsx    |   6 +-
 dashboard/components/checkbox/Checkbox.tsx    |   2 +-
 .../components/CloudAccountDeleteContents.tsx |   2 +-
 .../components/CloudAccountItem.tsx           |  10 +-
 .../components/CloudAccountsHeader.tsx        |   2 +-
 .../components/CloudAccountsLayout.tsx        |   8 +-
 .../components/CloudAccountsSidePanel.tsx     |   8 +-
 .../dashboard/components/DashboardLayout.tsx  |   2 +-
 .../cloud-map/DashboardCloudMapCard.tsx       |  12 +-
 .../cloud-map/DashboardCloudMapError.tsx      |  10 +-
 .../cloud-map/DashboardCloudMapSkeleton.tsx   |  16 +-
 .../cloud-map/DashboardCloudMapTooltip.tsx    |   4 +-
 .../DashboardCostExplorerCard.tsx             |   6 +-
 .../DashboardCostExplorerError.tsx            |  24 +--
 .../DashboardCostExplorerSkeleton.tsx         |  32 ++--
 .../DashboardResourcesManagerCard.tsx         |   8 +-
 .../DashboardResourcesManagerError.tsx        |  24 +--
 .../DashboardResourcesManagerSkeleton.tsx     |  26 +--
 .../top-stats/DashboardTopStatsError.tsx      |   2 +-
 .../components/empty-state/EmptyState.tsx     |   4 +-
 .../components/error-state/ErrorState.tsx     |   4 +-
 .../components/explorer/DependencyGraph.tsx   |  10 +-
 .../explorer/DependencyGraphError.tsx         |   8 +-
 .../explorer/DependencyGraphSkeleton.tsx      |   4 +-
 .../explorer/DependencyGraphWrapper.tsx       |   8 +-
 .../filter/DependencyGraphFilterDropdown.tsx  |   4 +-
 .../filter/DependencyGraphFilterSummary.tsx   |   4 +-
 .../filter/DependendencyGraphFilter.tsx       |  10 +-
 .../feedback-widget/FeedbackWidget.tsx        |  19 +-
 .../components/icons/ClearFilterIcon.tsx      |   2 +-
 dashboard/components/input/Input.tsx          |   8 +-
 .../components/InventoryActiveFilters.tsx     |  10 +-
 .../components/InventoryFilterDropdown.tsx    |   4 +-
 .../inventory/components/InventoryHeader.tsx  |   2 +-
 .../inventory/components/InventoryLayout.tsx  |  14 +-
 .../components/InventorySearchBar.tsx         |   2 +-
 .../components/InventorySearchNoResults.tsx   |   4 +-
 .../components/InventorySidePanel.tsx         |  34 ++--
 .../components/InventoryStatsCards.tsx        |  24 +--
 .../inventory/components/InventoryTable.tsx   |   4 +-
 .../components/InventoryTableBulkActions.tsx  |   2 +-
 .../components/InventoryTableRow.tsx          |   4 +-
 .../components/InventoryTableTags.tsx         |  14 +-
 .../filter/InventoryFilterBreadcrumbs.tsx     |  14 +-
 .../filter/InventoryFilterSummary.tsx         |   4 +-
 .../components/view/InventoryView.tsx         |  16 +-
 .../components/view/InventoryViewHeader.tsx   |  12 +-
 .../InventoryViewAlertsChooseAlertMethod.tsx  |  12 +-
 .../alerts/InventoryViewAlertsDeleteAlert.tsx |   6 +-
 .../alerts/InventoryViewAlertsDisplay.tsx     |   6 +-
 .../alerts/InventoryViewAlertsEditAlert.tsx   |  36 ++--
 .../view/alerts/InventoryViewAlertsError.tsx  |   4 +-
 .../alerts/InventoryViewAlertsHasNoAlerts.tsx |   4 +-
 .../alerts/InventoryViewAlertsSkeleton.tsx    |  10 +-
 dashboard/components/layout/Layout.tsx        |   2 +-
 dashboard/components/modal/Modal.tsx          |   4 +-
 dashboard/components/navbar/Navbar.tsx        |  16 +-
 .../components/number-input/NumberInput.tsx   |   8 +-
 .../DatabaseErrorMessage.tsx                  |   2 +-
 .../onboarding-wizard/DatabasePurplin.tsx     |   2 +-
 .../onboarding-wizard/InputFileSelect.tsx     |  12 +-
 .../onboarding-wizard/LabelledInput.tsx       |   4 +-
 .../OnboardingWizardLayout.tsx                |   4 +-
 .../onboarding-wizard/ProgressBar.tsx         |   2 +-
 .../onboarding-wizard/ProviderContent.tsx     |   2 +-
 .../onboarding-wizard/SelectInput.tsx         |  14 +-
 .../select-checkbox/SelectCheckbox.tsx        |  30 ++--
 dashboard/components/select/Select.tsx        |  16 +-
 dashboard/components/sidepanel/Sidepanel.tsx  |   4 +-
 .../components/sidepanel/SidepanelHeader.tsx  |   8 +-
 .../components/sidepanel/SidepanelPage.tsx    |   2 +-
 .../components/sidepanel/SidepanelTabs.tsx    |   6 +-
 .../components/skeleton/SkeletonFilters.tsx   |   8 +-
 .../components/skeleton/SkeletonInventory.tsx |  14 +-
 .../components/skeleton/SkeletonStats.tsx     |   6 +-
 dashboard/components/template/Template.tsx    |   2 +-
 dashboard/components/toast/Toast.tsx          |  16 +-
 dashboard/components/tooltip/Tooltip.tsx      |   2 +-
 dashboard/components/upload/Upload.tsx        |  10 +-
 dashboard/pages/cloud-accounts.tsx            |   2 +-
 .../pages/onboarding/choose-database.tsx      |   6 +-
 .../pages/onboarding/cloud-accounts/index.tsx |  66 +++----
 dashboard/pages/onboarding/complete.tsx       |   2 +-
 dashboard/tailwind.config.js                  | 169 +++++++++++++-----
 98 files changed, 562 insertions(+), 480 deletions(-)

diff --git a/dashboard/components/account-details/AwsAccountDetails.tsx b/dashboard/components/account-details/AwsAccountDetails.tsx
index b64bcecc5..fe0e829ad 100644
--- a/dashboard/components/account-details/AwsAccountDetails.tsx
+++ b/dashboard/components/account-details/AwsAccountDetails.tsx
@@ -103,7 +103,7 @@ function AwsAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <div>
@@ -117,7 +117,7 @@ function AwsAccountDetails({
             values={options.map(option => option.value)}
           />
           {[options[2].value, options[3].value].includes(credentialType) && (
-            <div className="mt-2 text-sm text-black-400">
+            <div className="mt-2 text-sm text-gray-700">
               {credentialType === options[3].value
                 ? 'Komiser will fetch the credentials from AWS'
                 : 'Komiser will load credentials from AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.'}
@@ -180,7 +180,7 @@ function AwsAccountDetails({
         )}
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your AWS account. Please check if the file
           is correct.
         </div>
diff --git a/dashboard/components/account-details/AzureAccountDetails.tsx b/dashboard/components/account-details/AzureAccountDetails.tsx
index 19cfe0652..3799a7690 100644
--- a/dashboard/components/account-details/AzureAccountDetails.tsx
+++ b/dashboard/components/account-details/AzureAccountDetails.tsx
@@ -27,7 +27,7 @@ function AzureAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -115,7 +115,7 @@ function AzureAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Azure account. Please check if the
           file is correct.
         </div>
diff --git a/dashboard/components/account-details/CivoAccountDetails.tsx b/dashboard/components/account-details/CivoAccountDetails.tsx
index 1d8fb3a7e..274d12466 100644
--- a/dashboard/components/account-details/CivoAccountDetails.tsx
+++ b/dashboard/components/account-details/CivoAccountDetails.tsx
@@ -27,7 +27,7 @@ function CivoAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -50,7 +50,7 @@ function CivoAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Civo account. Please check if the
           file is correct.
         </div>
diff --git a/dashboard/components/account-details/DigitalOceanAccountDetails.tsx b/dashboard/components/account-details/DigitalOceanAccountDetails.tsx
index 4db9ad4b1..1ad505cd4 100644
--- a/dashboard/components/account-details/DigitalOceanAccountDetails.tsx
+++ b/dashboard/components/account-details/DigitalOceanAccountDetails.tsx
@@ -27,7 +27,7 @@ function DigitalOceanAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -49,7 +49,7 @@ function DigitalOceanAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Digital Ocean account. Please check
           if the file is correct.
         </div>
diff --git a/dashboard/components/account-details/GcpAccountDetails.tsx b/dashboard/components/account-details/GcpAccountDetails.tsx
index 366a64180..f83c61029 100644
--- a/dashboard/components/account-details/GcpAccountDetails.tsx
+++ b/dashboard/components/account-details/GcpAccountDetails.tsx
@@ -60,7 +60,7 @@ function GcpAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <div>
@@ -83,7 +83,7 @@ function GcpAccountDetails({
         </div>
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your GCP account. Please check if the file
           is correct.
         </div>
diff --git a/dashboard/components/account-details/KubernetesAccountDetails.tsx b/dashboard/components/account-details/KubernetesAccountDetails.tsx
index b906a66cd..1699edcfd 100644
--- a/dashboard/components/account-details/KubernetesAccountDetails.tsx
+++ b/dashboard/components/account-details/KubernetesAccountDetails.tsx
@@ -83,7 +83,7 @@ function KubernetesAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <SelectInput
@@ -113,7 +113,7 @@ function KubernetesAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Kubernetes account. Please check if
           the file is correct.
         </div>
diff --git a/dashboard/components/account-details/LinodeAccountDetails.tsx b/dashboard/components/account-details/LinodeAccountDetails.tsx
index 200c9e5ab..ad63de8ea 100644
--- a/dashboard/components/account-details/LinodeAccountDetails.tsx
+++ b/dashboard/components/account-details/LinodeAccountDetails.tsx
@@ -26,7 +26,7 @@ function LinodeAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -40,7 +40,7 @@ function LinodeAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Linode account. Please check if the
           file is correct.
         </div>
diff --git a/dashboard/components/account-details/MongoDBAtlasAccountDetails.tsx b/dashboard/components/account-details/MongoDBAtlasAccountDetails.tsx
index 31b6dbfbf..24a669a53 100644
--- a/dashboard/components/account-details/MongoDBAtlasAccountDetails.tsx
+++ b/dashboard/components/account-details/MongoDBAtlasAccountDetails.tsx
@@ -26,7 +26,7 @@ function MongoDbAtlasAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -55,7 +55,7 @@ function MongoDbAtlasAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your MongoDB Atlas account. Please check
           if the file is correct.
         </div>
diff --git a/dashboard/components/account-details/OciAccountDetails.tsx b/dashboard/components/account-details/OciAccountDetails.tsx
index 1cd052786..37fa56678 100644
--- a/dashboard/components/account-details/OciAccountDetails.tsx
+++ b/dashboard/components/account-details/OciAccountDetails.tsx
@@ -60,7 +60,7 @@ function OciAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <div>
@@ -83,7 +83,7 @@ function OciAccountDetails({
         </div>
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your OCI account. Please check if the file
           is correct.
         </div>
diff --git a/dashboard/components/account-details/ScalewayAccountDetails.tsx b/dashboard/components/account-details/ScalewayAccountDetails.tsx
index 3152a2b69..384ae864d 100644
--- a/dashboard/components/account-details/ScalewayAccountDetails.tsx
+++ b/dashboard/components/account-details/ScalewayAccountDetails.tsx
@@ -26,7 +26,7 @@ function ScalewayAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -55,7 +55,7 @@ function ScalewayAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Scaleway account. Please check if the
           file is correct.
         </div>
diff --git a/dashboard/components/account-details/TencentAccountDetails.tsx b/dashboard/components/account-details/TencentAccountDetails.tsx
index e3a3cd513..abdaeebad 100644
--- a/dashboard/components/account-details/TencentAccountDetails.tsx
+++ b/dashboard/components/account-details/TencentAccountDetails.tsx
@@ -26,7 +26,7 @@ function TencentAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -40,7 +40,7 @@ function TencentAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Tencent account. Please check if the
           file is correct.
         </div>
diff --git a/dashboard/components/banner/Banner.tsx b/dashboard/components/banner/Banner.tsx
index 7f3f78275..ff4e32b04 100644
--- a/dashboard/components/banner/Banner.tsx
+++ b/dashboard/components/banner/Banner.tsx
@@ -15,7 +15,7 @@ function Banner({ githubStars }: BannerProps) {
   return (
     <div
       className={classNames(
-        'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br from-primary to-secondary py-3 opacity-0',
+        'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br from-darkcyan-500 to-darkcyan-700 py-3 opacity-0',
         {
           fixed: displayBanner,
           hidden: !displayBanner
@@ -44,7 +44,7 @@ function Banner({ githubStars }: BannerProps) {
             <StarIcon
               width={16}
               height={16}
-              className="group-hover:fill-warning-600 group-hover:text-warning-600"
+              className="group-hover:fill-orange-400 group-hover:text-orange-400"
             />
             {formatNumber(githubStars)}
           </div>
@@ -53,7 +53,7 @@ function Banner({ githubStars }: BannerProps) {
 
       <button
         onClick={dismissBanner}
-        className="absolute right-8 cursor-pointer rounded-lg p-3 text-white transition-colors hover:bg-white/10 active:bg-black-900/10"
+        className="absolute right-8 cursor-pointer rounded-lg p-3 text-white transition-colors hover:bg-white/10 active:bg-gray-950"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/dashboard/components/button/Button.tsx b/dashboard/components/button/Button.tsx
index 6393f4673..12a6db3ae 100644
--- a/dashboard/components/button/Button.tsx
+++ b/dashboard/components/button/Button.tsx
@@ -58,17 +58,17 @@ function Button({
     transition ? 'transition-colors' : ''
   }`;
 
-  const primary = `${base} font-semibold bg-gradient-to-br from-primary bg-secondary hover:bg-primary active:from-secondary active:bg-secondary text-white disabled:from-primary disabled:bg-secondary disabled:opacity-50`;
+  const primary = `${base} font-semibold bg-gradient-to-br from-darkcyan-500 bg-darkcyan-700 hover:bg-darkcyan-500 active:from-darkcyan-700 active:bg-darkcyan-700 text-white disabled:from-darkcyan-500 disabled:bg-darkcyan-700 disabled:opacity-50`;
 
-  const secondary = `${base} bg-transparent text-primary border-[1.5px] border-primary hover:bg-komiser-130 active:bg-komiser-200 active:text-primary disabled:bg-transparent disabled:opacity-50`;
+  const secondary = `${base} bg-transparent text-darkcyan-500 border-[1.5px] border-darkcyan-500 hover:bg-darkcyan-100 active:bg-cyan-200 active:text-darkcyan-500 disabled:bg-transparent disabled:opacity-50`;
 
-  const ghost = `${base} bg-transparent hover:bg-black-100 active:bg-black-400/20 text-black-800  disabled:bg-transparent disabled:opacity-50`;
+  const ghost = `${base} bg-transparent hover:bg-gray-50 active:bg-gray-300 text-gray-950  disabled:bg-transparent disabled:opacity-50`;
 
-  const text = `font-semibold text-sm text-komiser-700 hover:underline active:text-black-800`;
+  const text = `font-semibold text-sm text-darkcyan-700 hover:underline active:text-gray-950`;
 
-  const dropdown = `text-sm font-medium flex items-center gap-2 justify-start p-2 bg-transparent text-black-400 hover:bg-black-150 active:bg-black-200 rounded disabled:bg-transparent disabled:opacity-50`;
+  const dropdown = `text-sm font-medium flex items-center gap-2 justify-start p-2 bg-transparent text-gray-700 hover:bg-background-ds active:bg-gray-300 rounded disabled:bg-transparent disabled:opacity-50`;
 
-  const deleteStyle = `${base} border-[1.5px] border-error-600 text-error-600 hover:bg-error-100 active:bg-error-600/20 disabled:opacity-50`;
+  const deleteStyle = `${base} border-[1.5px] border-red-500 text-red-500 hover:bg-red-50 active:bg-red-100 disabled:opacity-50`;
 
   function handleStyle() {
     let buttonStyle;
diff --git a/dashboard/components/card/Card.tsx b/dashboard/components/card/Card.tsx
index 5cce9248d..0b5740c47 100644
--- a/dashboard/components/card/Card.tsx
+++ b/dashboard/components/card/Card.tsx
@@ -12,8 +12,8 @@ export type CardProps = {
 
 function Card({ label, value, tooltip, icon, formatter }: CardProps) {
   return (
-    <div className="relative flex w-full items-center gap-4 rounded-lg bg-white px-6 py-8 text-black-900 transition-colors">
-      <div className="rounded-lg bg-komiser-100 p-4" data-testid="icon">
+    <div className="relative flex w-full items-center gap-4 rounded-lg bg-white px-6 py-8 text-gray-950 transition-colors">
+      <div className="rounded-lg bg-gray-50 p-4" data-testid="icon">
         {icon}
       </div>
       <div className="peer flex flex-col">
@@ -23,7 +23,7 @@ function Card({ label, value, tooltip, icon, formatter }: CardProps) {
             formatter === 'currency' ? 'currency' : undefined
           )}
         </p>
-        <p className="text-sm text-black-300">{label}</p>
+        <p className="text-sm text-gray-500">{label}</p>
       </div>
       {tooltip && <Tooltip>{tooltip}</Tooltip>}
     </div>
diff --git a/dashboard/components/card/CardSkeleton.tsx b/dashboard/components/card/CardSkeleton.tsx
index 6fcae04cc..5edbebe0b 100644
--- a/dashboard/components/card/CardSkeleton.tsx
+++ b/dashboard/components/card/CardSkeleton.tsx
@@ -2,10 +2,10 @@ function CardSkeleton() {
   return (
     <div className="flex h-[7.5rem] animate-pulse items-center rounded-lg bg-white px-6 text-sm">
       <div className="flex w-full gap-6">
-        <div className="h-10 w-10 flex-shrink-0 rounded-xl bg-komiser-200/50"></div>
+        <div className="h-10 w-10 flex-shrink-0 rounded-xl bg-cyan-200"></div>
         <div className="flex w-full flex-col gap-3">
-          <div className="h-4 w-[36%] rounded-lg bg-komiser-200/50"></div>
-          <div className="h-4 w-[86%] rounded-lg bg-komiser-200/50"></div>
+          <div className="h-4 w-[36%] rounded-lg bg-cyan-200"></div>
+          <div className="h-4 w-[86%] rounded-lg bg-cyan-200"></div>
         </div>
       </div>
     </div>
diff --git a/dashboard/components/checkbox/Checkbox.tsx b/dashboard/components/checkbox/Checkbox.tsx
index a75272f66..142bda9b2 100644
--- a/dashboard/components/checkbox/Checkbox.tsx
+++ b/dashboard/components/checkbox/Checkbox.tsx
@@ -13,7 +13,7 @@ function Checkbox({ id, checked, onChange }: CheckboxProps) {
       checked={checked}
       onChange={onChange}
       type="checkbox"
-      className="grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-300 bg-transparent before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-komiser-600 checked:bg-komiser-600 checked:before:scale-100 hover:border-gray-400 checked:hover:border-transparent checked:hover:bg-komiser-700"
+      className="grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-300 bg-transparent before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-darkcyan-500 checked:bg-darkcyan-500 checked:before:scale-100 hover:border-gray-400 checked:hover:border-transparent checked:hover:bg-darkcyan-700"
     />
   );
 }
diff --git a/dashboard/components/cloud-account/components/CloudAccountDeleteContents.tsx b/dashboard/components/cloud-account/components/CloudAccountDeleteContents.tsx
index 90f4996ce..c7d4d1ba0 100644
--- a/dashboard/components/cloud-account/components/CloudAccountDeleteContents.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountDeleteContents.tsx
@@ -51,7 +51,7 @@ function CloudAccountDeleteContents({
     <>
       <div className="flex flex-col items-center gap-y-6">
         <AlertCircleIcon className="h-16 w-16" />
-        <h1 className="text-center text-xl font-semibold text-black-800">
+        <h1 className="text-center text-xl font-semibold text-gray-950">
           Are you sure you want to
           <br />
           remove this cloud account?
diff --git a/dashboard/components/cloud-account/components/CloudAccountItem.tsx b/dashboard/components/cloud-account/components/CloudAccountItem.tsx
index 6ec687b35..8210e4795 100644
--- a/dashboard/components/cloud-account/components/CloudAccountItem.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountItem.tsx
@@ -45,12 +45,12 @@ export default function CloudAccountItem({
     <div
       key={id}
       onClick={() => openModal(account)}
-      className="relative my-5 flex w-full items-center gap-4 rounded-lg border-2 border-black-170 bg-white p-6 text-black-900 transition-colors"
+      className="relative my-5 flex w-full items-center gap-4 rounded-lg border-2 border-gray-200 bg-white p-6 text-gray-950 transition-colors"
     >
       <Avatar avatarName={cloudProvider} size={48} />
       <div className="mr-auto">
         <p className="font-bold">{name}</p>
-        <p className="text-black-300">{platform.getLabel(cloudProvider)}</p>
+        <p className="text-gray-500">{platform.getLabel(cloudProvider)}</p>
       </div>
 
       <CloudAccountStatus status={status} />
@@ -63,11 +63,11 @@ export default function CloudAccountItem({
       {isOpen && (
         <div
           ref={optionsRef}
-          className="absolute right-0 top-0 mr-5 mt-[70px] items-center rounded-md border border-black-130 bg-white p-4 shadow-xl"
+          className="absolute right-0 top-0 mr-5 mt-[70px] items-center rounded-md border border-gray-100 bg-white p-4 shadow-right"
           style={{ zIndex: 1000 }}
         >
           <button
-            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-black-400 hover:bg-black-150"
+            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-gray-700 hover:bg-background-ds"
             onClick={() => {
               setIsOpen(false);
               setEditCloudAccount(true);
@@ -77,7 +77,7 @@ export default function CloudAccountItem({
             Edit cloud account
           </button>
           <button
-            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-error-600 hover:bg-black-150"
+            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-red-500 hover:bg-background-ds"
             onClick={() => {
               setIsOpen(false);
               setIsDeleteModalOpen(true);
diff --git a/dashboard/components/cloud-account/components/CloudAccountsHeader.tsx b/dashboard/components/cloud-account/components/CloudAccountsHeader.tsx
index dd62c5f38..99fc376d3 100644
--- a/dashboard/components/cloud-account/components/CloudAccountsHeader.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountsHeader.tsx
@@ -10,7 +10,7 @@ function CloudAccountsHeader({ isNotCustomView }: CloudAccountsHeaderProps) {
     <div className="flex min-h-[40px] items-center justify-between gap-8">
       {isNotCustomView && (
         <>
-          <p className="flex items-center gap-2 text-lg font-medium text-black-900">
+          <p className="flex items-center gap-2 text-lg font-medium text-gray-950">
             Your Cloud Accounts
           </p>
         </>
diff --git a/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx b/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx
index d21791bb5..11cbdd61b 100644
--- a/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx
@@ -34,8 +34,8 @@ function CloudAccountsLayout({
           className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
               ${
                 !router.query.view
-                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
-                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+                  ? 'border-l-2 border-darkcyan-500 bg-cyan-100 text-darkcyan-500'
+                  : 'text-gray-700 transition-colors hover:bg-gray-50'
               }
             `}
         >
@@ -66,8 +66,8 @@ function CloudAccountsLayout({
                     className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
               ${
                 isActive
-                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
-                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+                  ? 'border-l-2 border-darkcyan-500 bg-cyan-100 text-darkcyan-500'
+                  : 'text-gray-700 transition-colors hover:bg-gray-50'
               }
             `}
                   >
diff --git a/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx b/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx
index 05047608f..d137e63df 100644
--- a/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx
@@ -133,11 +133,11 @@ function CloudAccountsSidePanel({
                 <Avatar avatarName={cloudAccount.provider} size={40} />
                 <div className="flex flex-col gap-1">
                   <div className="flex max-w-[14rem] items-center gap-1">
-                    <p className="truncate font-medium text-black-900">
+                    <p className="truncate font-medium text-gray-950">
                       {cloudAccount.name}
                     </p>
                   </div>
-                  <p className="flex items-center gap-2 text-xs text-black-300">
+                  <p className="flex items-center gap-2 text-xs text-gray-500">
                     {cloudAccount.resources} resources in this cloud account
                   </p>
                 </div>
@@ -164,7 +164,7 @@ function CloudAccountsSidePanel({
           </div>
 
           {isDeleteOpen ? (
-            <div className="mt-4 flex flex-col gap-6 rounded-lg bg-black-100 p-8">
+            <div className="mt-4 flex flex-col gap-6 rounded-lg bg-gray-50 p-8">
               <CloudAccountDeleteContents
                 cloudAccount={cloudAccount}
                 onCancel={() => setIsDeleteOpen(false)}
@@ -205,7 +205,7 @@ function CloudAccountsSidePanel({
                     <CloudAccountStatus status={cloudAccount?.status} />
                     <AccountDetails cloudAccountData={cloudAccount} />
                   </div>
-                  <div className="-mx-4 mb-4 h-px bg-black-200"></div>
+                  <div className="-mx-4 mb-4 h-px bg-gray-300"></div>
                   <div className="mb-4 flex flex-shrink-0 items-center justify-end gap-6">
                     <Button size="lg" style="ghost" onClick={closeModal}>
                       Cancel
diff --git a/dashboard/components/dashboard/components/DashboardLayout.tsx b/dashboard/components/dashboard/components/DashboardLayout.tsx
index 76549c4e1..e8230c31c 100644
--- a/dashboard/components/dashboard/components/DashboardLayout.tsx
+++ b/dashboard/components/dashboard/components/DashboardLayout.tsx
@@ -7,7 +7,7 @@ type DashboardLayoutProps = {
 function DashboardLayout({ children }: DashboardLayoutProps) {
   return (
     <div className="flex flex-col gap-6">
-      <p className="flex items-center gap-2 text-lg font-medium text-black-900">
+      <p className="flex items-center gap-2 text-lg font-medium text-gray-950">
         Dashboard overview
       </p>
       {children}
diff --git a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapCard.tsx b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapCard.tsx
index f272e4e5b..13e33c77e 100644
--- a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapCard.tsx
+++ b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapCard.tsx
@@ -19,11 +19,11 @@ function DashboardCloudMapCard({ data }: DashboardCloudMapCardProps) {
         isOpen ? 'fixed inset-0 z-30 origin-left animate-scale' : ''
       } w-full rounded-lg bg-white px-6 py-4 pb-6`}
     >
-      <div className="-mx-6 flex items-center justify-between border-b border-black-200/40 px-6 pb-4">
+      <div className="-mx-6 flex items-center justify-between border-b border-gray-300 px-6 pb-4">
         <div>
-          <p className="text-sm font-semibold text-black-900">Cloud map</p>
+          <p className="text-sm font-semibold text-gray-950">Cloud map</p>
           <div className="mt-1"></div>
-          <p className="text-xs text-black-300">
+          <p className="text-xs text-gray-500">
             Analyze which regions have active resources
           </p>
         </div>
@@ -61,12 +61,12 @@ function DashboardCloudMapCard({ data }: DashboardCloudMapCardProps) {
           />
         </>
       )}
-      <div className="flex gap-4 text-xs text-black-300">
+      <div className="flex gap-4 text-xs text-gray-500">
         <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-info-600"></div>Active region
+          <div className="h-2 w-2 rounded-full bg-blue-500"></div>Active region
         </div>
         <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-black-300"></div>
+          <div className="h-2 w-2 rounded-full bg-gray-500"></div>
           Inactive region
         </div>
       </div>
diff --git a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx
index b283da1a5..72322ac20 100644
--- a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx
+++ b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx
@@ -10,8 +10,8 @@ function DashboardCloudMapError({ fetch }: DashboardCloudMapErrorProps) {
       data-testid="error"
       className="min-h-[396px] w-full rounded-lg bg-white px-6 py-4 pb-6"
     >
-      <div className="-mx-6 flex items-center justify-center gap-6 border-b border-black-200/40 px-6 pb-4">
-        <p className="text-sm text-black-400">
+      <div className="-mx-6 flex items-center justify-center gap-6 border-b border-gray-300 px-6 pb-4">
+        <p className="text-sm text-gray-700">
           There was an error loading the cloud map.
         </p>
         <div className="flex-shrink-0">
@@ -43,12 +43,12 @@ function DashboardCloudMapError({ fetch }: DashboardCloudMapErrorProps) {
         </picture>
       </div>
       <div className="mt-12"></div>
-      <div className="flex gap-4 text-xs text-black-300">
+      <div className="flex gap-4 text-xs text-gray-500">
         <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-info-600"></div>Active region
+          <div className="h-2 w-2 rounded-full bg-blue-500"></div>Active region
         </div>
         <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-black-300"></div>
+          <div className="h-2 w-2 rounded-full bg-gray-500"></div>
           Inactive region
         </div>
       </div>
diff --git a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapSkeleton.tsx b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapSkeleton.tsx
index 0d7c1fe21..5f8020857 100644
--- a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapSkeleton.tsx
+++ b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapSkeleton.tsx
@@ -4,11 +4,11 @@ function DashboardCloudMapSkeleton() {
       data-testid="loading"
       className="min-h-[396px] w-full animate-pulse rounded-lg bg-white px-6 py-4 pb-6"
     >
-      <div className="-mx-6 flex items-center justify-between border-b border-black-200/40 px-6 pb-4">
+      <div className="-mx-6 flex items-center justify-between border-b border-gray-300 px-6 pb-4">
         <div>
-          <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           <div className="mt-2"></div>
-          <div className="h-3 w-48 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-48 rounded-lg bg-cyan-200"></div>
         </div>
         <div className="h-[60px]"></div>
       </div>
@@ -19,14 +19,14 @@ function DashboardCloudMapSkeleton() {
         </picture>
       </div>
       <div className="mt-12"></div>
-      <div className="flex gap-4 text-xs text-black-300">
+      <div className="flex gap-4 text-xs text-gray-500">
         <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-info-600"></div>
-          <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-2 w-2 rounded-full bg-blue-500"></div>
+          <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
         </div>
         <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-black-300"></div>
-          <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-2 w-2 rounded-full bg-gray-500"></div>
+          <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
         </div>
       </div>
     </div>
diff --git a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapTooltip.tsx b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapTooltip.tsx
index 54f15bef7..d3d73f6ac 100644
--- a/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapTooltip.tsx
+++ b/dashboard/components/dashboard/components/cloud-map/DashboardCloudMapTooltip.tsx
@@ -15,7 +15,7 @@ function DashboardCloudMap({
     <>
       {tooltip && sumOfResources && (
         <div
-          className="absolute z-20 flex animate-fade-in flex-col gap-2 rounded-lg bg-[#013220] px-3 py-2 text-xs text-black-300 opacity-0"
+          className="absolute z-20 flex animate-fade-in flex-col gap-2 rounded-lg bg-[#013220] px-3 py-2 text-xs text-gray-500 opacity-0"
           style={{
             top: `${tooltip.y - 60}px`,
             left: `${tooltip.x + 10}px`
@@ -24,7 +24,7 @@ function DashboardCloudMap({
           <div className="-mx-3 flex items-center gap-2 border-b border-white/30 px-3 pb-2">
             <div
               className={`h-2 w-2 rounded-full ${
-                tooltip.resources === 0 ? 'bg-black-300' : 'bg-info-600'
+                tooltip.resources === 0 ? 'bg-gray-500' : 'bg-blue-500'
               }`}
             ></div>
             <span className="font-medium text-white">{tooltip.name} </span>
diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
index cb6eb9a13..83318b374 100644
--- a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
+++ b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
@@ -74,11 +74,11 @@ function DashboardCostExplorerCard({
 
   return (
     <div className="w-full rounded-lg bg-white px-6 py-4 pb-6">
-      <div className="-mx-6 flex flex-wrap items-center justify-between gap-4 border-b border-black-200/40 px-6 pb-4">
+      <div className="-mx-6 flex flex-wrap items-center justify-between gap-4 border-b border-gray-300 px-6 pb-4">
         <div>
-          <p className="text-sm font-semibold text-black-900">Cost explorer</p>
+          <p className="text-sm font-semibold text-gray-950">Cost explorer</p>
           <div className="mt-1"></div>
-          <p className="text-xs text-black-300">
+          <p className="text-xs text-gray-500">
             Visualise, understand, and manage your infrastructure costs and
             usage
           </p>
diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerError.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerError.tsx
index 4d075df74..fe1383af2 100644
--- a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerError.tsx
+++ b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerError.tsx
@@ -20,8 +20,8 @@ function DashboardCostExplorerError({
 
   return (
     <div className="w-full rounded-lg bg-white px-6 py-4 pb-6">
-      <div className="-mx-6 flex items-center justify-center gap-6 border-b border-black-200/40 px-6 pb-4">
-        <p className="text-sm text-black-400">
+      <div className="-mx-6 flex items-center justify-center gap-6 border-b border-gray-300 px-6 pb-4">
+        <p className="text-sm text-gray-700">
           There was an error loading the cost explorer.
         </p>
         <div className="flex-shrink-0">
@@ -52,10 +52,10 @@ function DashboardCostExplorerError({
           <tbody>
             {rows.map(idx => (
               <tr key={idx}>
-                <td className="border border-black-150"></td>
-                <td className="border border-black-150"></td>
-                <td className="border border-black-150"></td>
-                <td className="border border-black-150"></td>
+                <td className="border border-background-ds"></td>
+                <td className="border border-background-ds"></td>
+                <td className="border border-background-ds"></td>
+                <td className="border border-background-ds"></td>
               </tr>
             ))}
           </tbody>
@@ -63,16 +63,16 @@ function DashboardCostExplorerError({
         <div className="mt-4"></div>
         <div className="flex justify-center gap-8">
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-full bg-black-200/50"></div>
-            <div className="h-3 w-24 rounded-lg bg-black-200/50"></div>
+            <div className="h-5 w-5 rounded-full bg-gray-300"></div>
+            <div className="h-3 w-24 rounded-lg bg-gray-300"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-full bg-black-200/50"></div>
-            <div className="h-3 w-12 rounded-lg bg-black-200/50"></div>
+            <div className="h-5 w-5 rounded-full bg-gray-300"></div>
+            <div className="h-3 w-12 rounded-lg bg-gray-300"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-full bg-black-200/50"></div>
-            <div className="h-3 w-36 rounded-lg bg-black-200/50"></div>
+            <div className="h-5 w-5 rounded-full bg-gray-300"></div>
+            <div className="h-3 w-36 rounded-lg bg-gray-300"></div>
           </div>
         </div>
       </div>
diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerSkeleton.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerSkeleton.tsx
index 557683cd0..ed758d198 100644
--- a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerSkeleton.tsx
+++ b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerSkeleton.tsx
@@ -2,16 +2,16 @@ function DashboardCostExplorerSkeleton() {
   const rows: number[] = Array.from(Array(8).keys());
   return (
     <div className="w-full animate-pulse rounded-lg bg-white px-6 py-4 pb-6">
-      <div className="-mx-6 flex flex-wrap items-center justify-between border-b border-black-200/40">
+      <div className="-mx-6 flex flex-wrap items-center justify-between border-b border-gray-300">
         <div className="px-6 pb-4">
-          <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           <div className="mt-2"></div>
-          <div className="h-3 w-36 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-36 rounded-lg bg-cyan-200"></div>
         </div>
         <div className="flex flex-col gap-4 px-6 pb-4 md:flex-row md:flex-wrap">
-          <div className="h-[60px] w-[177.5px] rounded-lg bg-komiser-200/50"></div>
-          <div className="h-[60px] w-[177.5px] rounded-lg bg-komiser-200/50"></div>
-          <div className="h-[60px] w-[177.5px] rounded-lg bg-komiser-200/50"></div>
+          <div className="h-[60px] w-[177.5px] rounded-lg bg-cyan-200"></div>
+          <div className="h-[60px] w-[177.5px] rounded-lg bg-cyan-200"></div>
+          <div className="h-[60px] w-[177.5px] rounded-lg bg-cyan-200"></div>
         </div>
       </div>
       <div className="mt-8"></div>
@@ -20,10 +20,10 @@ function DashboardCostExplorerSkeleton() {
           <tbody>
             {rows.map(idx => (
               <tr key={idx}>
-                <td className="border border-black-150"></td>
-                <td className="border border-black-150"></td>
-                <td className="border border-black-150"></td>
-                <td className="border border-black-150"></td>
+                <td className="border border-background-ds"></td>
+                <td className="border border-background-ds"></td>
+                <td className="border border-background-ds"></td>
+                <td className="border border-background-ds"></td>
               </tr>
             ))}
           </tbody>
@@ -31,16 +31,16 @@ function DashboardCostExplorerSkeleton() {
         <div className="mt-4"></div>
         <div className="flex justify-center gap-8">
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-full bg-komiser-200/50"></div>
-            <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+            <div className="h-5 w-5 rounded-full bg-cyan-200"></div>
+            <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-full bg-komiser-200/50"></div>
-            <div className="h-3 w-12 rounded-lg bg-komiser-200/50"></div>
+            <div className="h-5 w-5 rounded-full bg-cyan-200"></div>
+            <div className="h-3 w-12 rounded-lg bg-cyan-200"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-full bg-komiser-200/50"></div>
-            <div className="h-3 w-36 rounded-lg bg-komiser-200/50"></div>
+            <div className="h-5 w-5 rounded-full bg-cyan-200"></div>
+            <div className="h-3 w-36 rounded-lg bg-cyan-200"></div>
           </div>
         </div>
       </div>
diff --git a/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerCard.tsx b/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerCard.tsx
index f015b23fa..4a712d866 100644
--- a/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerCard.tsx
+++ b/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerCard.tsx
@@ -36,13 +36,13 @@ function DashboardResourcesManagerCard({
 
   return (
     <div className="w-full rounded-lg bg-white px-6 py-4 pb-6">
-      <div className="-mx-6 flex items-center justify-between border-b border-black-200/40 px-6 pb-4">
+      <div className="-mx-6 flex items-center justify-between border-b border-gray-300 px-6 pb-4">
         <div>
-          <p className="text-sm font-semibold text-black-900">
+          <p className="text-sm font-semibold text-gray-950">
             Resources manager
           </p>
           <div className="mt-1"></div>
-          <p className="text-xs text-black-300">
+          <p className="text-xs text-gray-500">
             Uncover how your resources are distributed
           </p>
         </div>
@@ -75,7 +75,7 @@ function DashboardResourcesManagerCard({
               height={200}
               alt="No data to display image"
             />
-            <p className="text-center text-lg text-black-900">
+            <p className="text-center text-lg text-gray-950">
               No resource data
               <br />
               to display
diff --git a/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerError.tsx b/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerError.tsx
index a3ef896f1..536d1e6a5 100644
--- a/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerError.tsx
+++ b/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerError.tsx
@@ -9,8 +9,8 @@ function DashboardResourcesManagerError({
 }: DashboardResourcesManagerErrorProps) {
   return (
     <div className="flex min-h-[360px] w-full flex-col gap-4 overflow-hidden rounded-lg bg-white px-6 py-4 pb-6">
-      <div className="-mx-6 flex items-center justify-center gap-6 border-b border-black-200/40 px-6 pb-4">
-        <p className="text-sm text-black-400">
+      <div className="-mx-6 flex items-center justify-center gap-6 border-b border-gray-300 px-6 pb-4">
+        <p className="text-sm text-gray-700">
           There was an error loading the resources manager.
         </p>
         <div className="flex-shrink-0">
@@ -35,25 +35,25 @@ function DashboardResourcesManagerError({
         </div>
         <div className="h-[60px]"></div>
       </div>
-      <div className="h-[60px] w-full rounded-lg bg-black-100"></div>
+      <div className="h-[60px] w-full rounded-lg bg-gray-50"></div>
       <div className="flex items-center justify-between px-6">
-        <div className="min-h-[250px] min-w-[250px] rounded-full border-[50px] border-black-100 bg-white"></div>
+        <div className="min-h-[250px] min-w-[250px] rounded-full border-[50px] border-gray-50 bg-white"></div>
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-black-100"></div>
-            <div className="h-3 w-24 rounded-lg bg-black-100"></div>
+            <div className="h-4 w-4 rounded-lg bg-gray-50"></div>
+            <div className="h-3 w-24 rounded-lg bg-gray-50"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-black-100"></div>
-            <div className="h-3 w-24 rounded-lg bg-black-100"></div>
+            <div className="h-4 w-4 rounded-lg bg-gray-50"></div>
+            <div className="h-3 w-24 rounded-lg bg-gray-50"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-black-100"></div>
-            <div className="h-3 w-24 rounded-lg bg-black-100"></div>
+            <div className="h-4 w-4 rounded-lg bg-gray-50"></div>
+            <div className="h-3 w-24 rounded-lg bg-gray-50"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-black-100"></div>
-            <div className="h-3 w-24 rounded-lg bg-black-100"></div>
+            <div className="h-4 w-4 rounded-lg bg-gray-50"></div>
+            <div className="h-3 w-24 rounded-lg bg-gray-50"></div>
           </div>
         </div>
       </div>
diff --git a/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerSkeleton.tsx b/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerSkeleton.tsx
index 6e85db57b..403b208f4 100644
--- a/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerSkeleton.tsx
+++ b/dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerSkeleton.tsx
@@ -1,35 +1,35 @@
 function DashboardResourcesManagerSkeleton() {
   return (
     <div className="flex min-h-[360px] w-full animate-pulse flex-col gap-4 overflow-hidden rounded-lg bg-white px-6 py-4 pb-6">
-      <div className=" -mx-6 flex items-center justify-between border-b border-black-200/40">
+      <div className=" -mx-6 flex items-center justify-between border-b border-gray-300">
         <div className="px-6 pb-4">
-          <div className="h-3 w-48 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-48 rounded-lg bg-cyan-200"></div>
           <div className="mt-2"></div>
-          <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
         </div>
         <div className="px-6 pb-4">
           <div className="h-[60px] w-[9rem]"></div>
         </div>
       </div>
-      <div className="h-[60px] w-full rounded-lg bg-komiser-200/50"></div>
+      <div className="h-[60px] w-full rounded-lg bg-cyan-200"></div>
       <div className="flex items-center justify-between px-6">
-        <div className="min-h-[250px] min-w-[250px] rounded-full border-[50px] border-komiser-200/50 bg-white"></div>
+        <div className="min-h-[250px] min-w-[250px] rounded-full border-[50px] border-cyan-200 bg-white"></div>
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-komiser-200/50"></div>
-            <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+            <div className="h-4 w-4 rounded-lg bg-cyan-200"></div>
+            <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-komiser-200/50"></div>
-            <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+            <div className="h-4 w-4 rounded-lg bg-cyan-200"></div>
+            <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-komiser-200/50"></div>
-            <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+            <div className="h-4 w-4 rounded-lg bg-cyan-200"></div>
+            <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded-lg bg-komiser-200/50"></div>
-            <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+            <div className="h-4 w-4 rounded-lg bg-cyan-200"></div>
+            <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           </div>
         </div>
       </div>
diff --git a/dashboard/components/dashboard/components/top-stats/DashboardTopStatsError.tsx b/dashboard/components/dashboard/components/top-stats/DashboardTopStatsError.tsx
index 62e20bd6b..6fb38e334 100644
--- a/dashboard/components/dashboard/components/top-stats/DashboardTopStatsError.tsx
+++ b/dashboard/components/dashboard/components/top-stats/DashboardTopStatsError.tsx
@@ -10,7 +10,7 @@ function DashboardTopStatsError({ fetch }: DashboardTopStatsErrorProps) {
       data-testid="error"
       className="flex h-[7.5rem] items-center justify-center gap-4 rounded-lg bg-white"
     >
-      <p className="text-sm text-black-400">
+      <p className="text-sm text-gray-700">
         There was an error loading the top stats.
       </p>
       <div className="flex-shrink-0">
diff --git a/dashboard/components/empty-state/EmptyState.tsx b/dashboard/components/empty-state/EmptyState.tsx
index a251863ec..61cf08051 100644
--- a/dashboard/components/empty-state/EmptyState.tsx
+++ b/dashboard/components/empty-state/EmptyState.tsx
@@ -57,8 +57,8 @@ function EmptyState({
           />
         )}
         <div className="flex flex-col items-center gap-2 text-center">
-          <p className="text-xl font-semibold text-black-900">{title}</p>
-          <p className="text-sm text-black-400">{message}</p>
+          <p className="text-xl font-semibold text-gray-950">{title}</p>
+          <p className="text-sm text-gray-700">{message}</p>
         </div>
         {action && (
           <div className="flex flex-wrap-reverse items-center gap-4 sm:flex-nowrap">
diff --git a/dashboard/components/error-state/ErrorState.tsx b/dashboard/components/error-state/ErrorState.tsx
index 237ea7ce4..ac22e9f10 100644
--- a/dashboard/components/error-state/ErrorState.tsx
+++ b/dashboard/components/error-state/ErrorState.tsx
@@ -18,8 +18,8 @@ function ErrorState({ title, message, action }: ErrorStateProps) {
               alt="Purplin"
             />
           </picture>
-          <p className="font-medium text-black-900">{title}</p>
-          <p className="text-center text-sm text-black-300">{message}</p>
+          <p className="font-medium text-gray-950">{title}</p>
+          <p className="text-center text-sm text-gray-500">{message}</p>
           {action && <>{action}</>}
         </div>
       </div>
diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
index 660695505..2bc87067e 100644
--- a/dashboard/components/explorer/DependencyGraph.tsx
+++ b/dashboard/components/explorer/DependencyGraph.tsx
@@ -102,13 +102,13 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
             return `<div><p style="font-size: 10px; text-shadow: 0 0 5px #F4F9F9,0 0 5px #F4F9F9,
                  0 0 5px #F4F9F9,0 0 5px #F4F9F9,
                  0 0 5px #F4F9F9,0 0 5px #F4F9F9,
-                 0 0 5px #F4F9F9,0 0 5px #F4F9F9;" class="text-black-700 text-ellipsis max-w-[100px] overflow-hidden whitespace-nowrap text-center" title="${
+                 0 0 5px #F4F9F9,0 0 5px #F4F9F9;" class="text-gray-900 text-ellipsis max-w-[100px] overflow-hidden whitespace-nowrap text-center" title="${
                    templateData.label
                  }">${templateData.label || '&nbsp;'}</p>
               <p style="font-size: 10px; text-shadow: 0 0 5px #F4F9F9,0 0 5px #F4F9F9,
                  0 0 5px #F4F9F9,0 0 5px #F4F9F9,
                  0 0 5px #F4F9F9,0 0 5px #F4F9F9,
-                 0 0 5px #F4F9F9,0 0 5px #F4F9F9;" class="text-black-400 text-ellipsis max-w-[100px] overflow-hidden whitespace-nowrap text-center font-thin" title="${
+                 0 0 5px #F4F9F9,0 0 5px #F4F9F9;" class="text-gray-700 text-ellipsis max-w-[100px] overflow-hidden whitespace-nowrap text-center font-thin" title="${
                    templateData.label
                  }">${templateData.service || '&nbsp;'}</p></div>`;
           }
@@ -291,8 +291,8 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
           </div>
           <div className="flex max-h-11 gap-4">
             <button
-              className={`peer relative flex items-center rounded border-[1.2px] border-black-200 bg-white p-2.5 ${
-                isNodeDraggingEnabled && 'border-primary'
+              className={`peer relative flex items-center rounded border-[1.2px] border-gray-300 bg-white p-2.5 ${
+                isNodeDraggingEnabled && 'border-darkcyan-500'
               }`}
               onClick={toggleNodeDragging}
             >
@@ -314,7 +314,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
                 maxLength={3}
               />
               <span
-                className={`absolute left-1/2 top-1/2 ${translateXClass} -translate-y-1/2 text-sm text-neutral-900`}
+                className={`absolute left-1/2 top-1/2 ${translateXClass} text-neutral-900 -translate-y-1/2 text-sm`}
               >
                 %
               </span>
diff --git a/dashboard/components/explorer/DependencyGraphError.tsx b/dashboard/components/explorer/DependencyGraphError.tsx
index f996e2ec4..65d7565dd 100644
--- a/dashboard/components/explorer/DependencyGraphError.tsx
+++ b/dashboard/components/explorer/DependencyGraphError.tsx
@@ -8,13 +8,13 @@ function DependencyGraphError({ fetch }: DashboardDependencyGraphErrorProps) {
   return (
     <>
       <div className={`w-full rounded-lg bg-white px-6 py-4 pb-6`}>
-        <div className="-mx-6 flex items-center justify-between border-b border-black-200/40 px-6 pb-4">
+        <div className="-mx-6 flex items-center justify-between border-b border-gray-300 px-6 pb-4">
           <div>
-            <p className="text-sm font-semibold text-black-900">
+            <p className="text-sm font-semibold text-gray-950">
               Dependency Graph
             </p>
             <div className="mt-1"></div>
-            <p className="text-xs text-black-300">
+            <p className="text-xs text-gray-500">
               Analyze account resource associations
             </p>
           </div>
@@ -34,7 +34,7 @@ function DependencyGraphError({ fetch }: DashboardDependencyGraphErrorProps) {
             <path stroke="none" d="M0 0h24v24H0z" />
             <path d="M4 8V6a2 2 0 012-2h2M4 16v2a2 2 0 002 2h2M16 4h2a2 2 0 012 2v2M16 20h2a2 2 0 002-2v-2M9 10h.01M15 10h.01M9.5 15.05a3.5 3.5 0 015 0" />
           </svg>
-          <p className="text-sm font-semibold text-black-900">
+          <p className="text-sm font-semibold text-gray-950">
             Cannot fetch Relationships
           </p>
           <div className="m-2 flex-shrink-0">
diff --git a/dashboard/components/explorer/DependencyGraphSkeleton.tsx b/dashboard/components/explorer/DependencyGraphSkeleton.tsx
index 34af17184..f03b038f3 100644
--- a/dashboard/components/explorer/DependencyGraphSkeleton.tsx
+++ b/dashboard/components/explorer/DependencyGraphSkeleton.tsx
@@ -6,9 +6,9 @@ function DependencyGraphSkeleton() {
         className="relative flex h-full items-center justify-center bg-dependency-graph bg-[length:40px_40px] align-middle"
       >
         <div>
-          <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-24 rounded-lg bg-cyan-200"></div>
           <div className="mt-2"></div>
-          <div className="h-3 w-48 rounded-lg bg-komiser-200/50"></div>
+          <div className="h-3 w-48 rounded-lg bg-cyan-200"></div>
         </div>
       </div>
     </>
diff --git a/dashboard/components/explorer/DependencyGraphWrapper.tsx b/dashboard/components/explorer/DependencyGraphWrapper.tsx
index 8987dc347..c20fe3e39 100644
--- a/dashboard/components/explorer/DependencyGraphWrapper.tsx
+++ b/dashboard/components/explorer/DependencyGraphWrapper.tsx
@@ -58,18 +58,18 @@ function DependencyGraphWrapper() {
     <>
       <div className="flex h-[calc(100vh-145px)] w-full flex-col">
         <div className="flex flex-row justify-between gap-2">
-          <p className="text-lg font-medium text-black-900">
+          <p className="text-lg font-medium text-gray-950">
             Resources Explorer
           </p>
           <div
             className={cn(
-              'absolute -top-1 right-24 z-20 flex translate-y-0 cursor-pointer items-center justify-start gap-4 rounded-b-[4px] border-x border-b border-black-170 bg-white px-4 py-2 text-sm transition',
+              'absolute -top-1 right-24 z-20 flex translate-y-0 cursor-pointer items-center justify-start gap-4 rounded-b-[4px] border-x border-b border-gray-200 bg-white px-4 py-2 text-sm transition',
               { 'translate-y-[105px]': filterOpen }
             )}
             onClick={() => setFilterOpen(!filterOpen)}
           >
             {displayedFilters && displayedFilters?.length > 0 && (
-              <span className="bg-komiser-130 px-[6px] pb-[3px] pt-[2px] text-xs text-komiser-600">
+              <span className="bg-darkcyan-100 px-[6px] pb-[3px] pt-[2px] text-xs text-darkcyan-500">
                 {displayedFilters?.length}
               </span>
             )}
@@ -85,7 +85,7 @@ function DependencyGraphWrapper() {
         </div>
         <div
           className={cn(
-            'absolute left-0 top-0 z-10 m-0 h-[102px] w-full origin-top scale-y-0 border-b border-black-170 bg-white px-24 transition',
+            'absolute left-0 top-0 z-10 m-0 h-[102px] w-full origin-top scale-y-0 border-b border-gray-200 bg-white px-24 transition',
             { 'scale-y-100': filterOpen }
           )}
         >
diff --git a/dashboard/components/explorer/filter/DependencyGraphFilterDropdown.tsx b/dashboard/components/explorer/filter/DependencyGraphFilterDropdown.tsx
index 20e0e1b78..92ebb0332 100644
--- a/dashboard/components/explorer/filter/DependencyGraphFilterDropdown.tsx
+++ b/dashboard/components/explorer/filter/DependencyGraphFilterDropdown.tsx
@@ -51,7 +51,7 @@ export default function InventoryFilterDropdown({
         className="fixed left-0 top-0 z-20 hidden h-screen w-screen animate-fade-in bg-transparent opacity-0 sm:block"
       ></div>
       <div
-        className={`absolute ${position} z-[21] inline-flex min-w-[16rem] max-w-[21rem] rounded-lg bg-white p-4 text-sm shadow-xl`}
+        className={`absolute ${position} z-[21] inline-flex min-w-[16rem] max-w-[21rem] rounded-lg bg-white p-4 text-sm shadow-right`}
       >
         <div className="flex w-full flex-col">
           {/* Filter breadcrumbs */}
@@ -99,7 +99,7 @@ export default function InventoryFilterDropdown({
                 />
               </div>
               {inlineError.hasError && (
-                <p className="pb-4 text-xs font-medium text-error-600">
+                <p className="pb-4 text-xs font-medium text-red-500">
                   {inlineError.message}
                 </p>
               )}
diff --git a/dashboard/components/explorer/filter/DependencyGraphFilterSummary.tsx b/dashboard/components/explorer/filter/DependencyGraphFilterSummary.tsx
index c3692840f..edf527cd3 100644
--- a/dashboard/components/explorer/filter/DependencyGraphFilterSummary.tsx
+++ b/dashboard/components/explorer/filter/DependencyGraphFilterSummary.tsx
@@ -51,8 +51,8 @@ function DependencyGraphFilterSummary({
   return (
     <div
       className={`${
-        bg ? 'bg-white' : 'bg-black-150'
-      }  relative flex h-6 w-fit max-w-[calc(100vw-250px)] items-center gap-1 overflow-hidden rounded px-2 text-xs text-black-900/70 md:max-w-[calc(100vw-400px)]`}
+        bg ? 'bg-white' : 'bg-background-ds'
+      }  relative flex h-6 w-fit max-w-[calc(100vw-250px)] items-center gap-1 overflow-hidden rounded px-2 text-xs text-gray-950 md:max-w-[calc(100vw-400px)]`}
     >
       <div className="flex items-center gap-1 whitespace-nowrap">
         <div className="scale-75">{getField('icon')}</div>
diff --git a/dashboard/components/explorer/filter/DependendencyGraphFilter.tsx b/dashboard/components/explorer/filter/DependendencyGraphFilter.tsx
index 906f85ef2..a3960b1df 100644
--- a/dashboard/components/explorer/filter/DependendencyGraphFilter.tsx
+++ b/dashboard/components/explorer/filter/DependendencyGraphFilter.tsx
@@ -32,11 +32,11 @@ function DependendencyGraphFilter({
       {!hasFilters ? (
         <>
           <div
-            className="flex w-fit cursor-pointer items-center gap-1 overflow-hidden rounded-md border-2 border-dashed border-black-200 border-opacity-60 px-3 py-1"
+            className="flex w-fit cursor-pointer items-center gap-1 overflow-hidden rounded-md border-2 border-dashed border-gray-300 border-opacity-60 px-3 py-1"
             onClick={toggle}
           >
             <PlusIcon width={16} height={16} />
-            <span className="font-sans text-sm text-black-400">Filter</span>
+            <span className="font-sans text-sm text-gray-700">Filter</span>
           </div>
           {isOpen && (
             <DependencyGraphFilterDropdown
@@ -48,7 +48,7 @@ function DependendencyGraphFilter({
         </>
       ) : (
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-          <div className="h-full text-sm text-black-400">Filters</div>
+          <div className="h-full text-sm text-gray-700">Filters</div>
           {displayedFilters &&
             displayedFilters.map((activeFilter, idx) => (
               <DependencyGraphFilterSummary
@@ -62,7 +62,7 @@ function DependendencyGraphFilter({
           <div className="flex items-center gap-3">
             <div className="relative">
               <div className="cursor-pointer" onClick={toggle}>
-                <PlusIcon className="h-6 w-6 rounded-full border-dashed border-black-200 p-1 hover:border hover:bg-black-400 hover:bg-opacity-10" />
+                <PlusIcon className="h-6 w-6 rounded-full border-dashed border-gray-300 p-1 hover:border hover:bg-gray-700 hover:bg-opacity-10" />
               </div>
               {isOpen && (
                 <DependencyGraphFilterDropdown
@@ -75,7 +75,7 @@ function DependendencyGraphFilter({
 
             <div className="border-x-1 h-7 border"></div>
             <div
-              className="flex cursor-pointer items-center gap-1 text-black-400 hover:text-black-900"
+              className="flex cursor-pointer items-center gap-1 text-gray-700 hover:text-gray-950"
               onClick={() => router.push(router.pathname)}
             >
               <span className="font-sans text-[14px] font-semibold ">
diff --git a/dashboard/components/feedback-widget/FeedbackWidget.tsx b/dashboard/components/feedback-widget/FeedbackWidget.tsx
index effefb537..0c1233fef 100644
--- a/dashboard/components/feedback-widget/FeedbackWidget.tsx
+++ b/dashboard/components/feedback-widget/FeedbackWidget.tsx
@@ -161,17 +161,17 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
           id={FEEDBACK_MODAL_ID}
         >
           <div className="w-[546px]">
-            <div className="fixed left-0 top-0 p-8 border-b border-gray-200">
-              <h3 className="text-lg font-bold text-black-900">
+            <div className="fixed left-0 top-0 border-b border-gray-200 p-8">
+              <h3 className="text-lg font-bold text-gray-950">
                 Describe your issue
               </h3>
-              <p className="text-base text-black-400">
+              <p className="text-base text-gray-700">
                 By providing details of the issue you’ve encountered and
                 outlining the steps to reproduce it, we’ll be able to give you
                 better support.
               </p>
             </div>
-            <div className="mt-[130px] h-[420px] overflow-y-auto overflow-x-hidden pl-[16px] pr-[16px] pt-[1px] pb-[10px]">
+            <div className="mt-[130px] h-[420px] overflow-y-auto overflow-x-hidden pb-[10px] pl-[16px] pr-[16px] pt-[1px]">
               <form onSubmit={uploadFeedback}>
                 <Input
                   disabled={isSendingFeedback}
@@ -188,7 +188,7 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
                   disabled={isSendingFeedback}
                   rows={13}
                   placeholder={textAreaPlaceholder}
-                  className="peer mt-4 w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary"
+                  className="peer mt-4 w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-gray-950 caret-darkcyan-500 outline outline-[0.063rem] outline-gray-300 focus:outline-[0.12rem] focus:outline-darkcyan-500"
                   onChange={event => updateDescription(event?.target?.value)}
                   value={description}
                   required
@@ -199,7 +199,7 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
                       <>
                         <div
                           onClick={() => takeScreenshot()}
-                          className="flex-1 grow cursor-pointer rounded border-2 border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100"
+                          className="flex-1 grow cursor-pointer rounded border-2 border-gray-200 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-gray-50"
                         >
                           <svg
                             className="mb-2 inline-block"
@@ -238,14 +238,13 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
                               strokeLinejoin="round"
                             />
                           </svg>
-
                           <p>
                             {isTakingScreenCapture
                               ? 'Taking screencapture...'
                               : 'Capture current screen'}
                           </p>
                         </div>
-                        <span className="self-center justify-self-center text-sm text-black-400">
+                        <span className="self-center justify-self-center text-sm text-gray-700">
                           or
                         </span>
                       </>
@@ -280,13 +279,13 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
                   </div>
                 </div>
                 <div className="mt-4 flex justify-between">
-                  <p className="text-xs text-black-400">
+                  <p className="text-xs text-gray-700">
                     Need in depth assistance?
                     <br />
                     Email us at{' '}
                     <a
                       href="mailto:support@tailwarden.com"
-                      className="text-primary"
+                      className="text-darkcyan-500"
                     >
                       support@tailwarden.com
                     </a>
diff --git a/dashboard/components/icons/ClearFilterIcon.tsx b/dashboard/components/icons/ClearFilterIcon.tsx
index f09449fc7..bb670008f 100644
--- a/dashboard/components/icons/ClearFilterIcon.tsx
+++ b/dashboard/components/icons/ClearFilterIcon.tsx
@@ -7,7 +7,7 @@ const ClearFilterIcon = (props: SVGProps<SVGSVGElement>) => (
     height="16"
     fill="none"
     viewBox="0 0 24 24"
-    className="text-black-400"
+    className="text-gray-700"
   >
     <path
       stroke="currentColor"
diff --git a/dashboard/components/input/Input.tsx b/dashboard/components/input/Input.tsx
index ed5d5d510..ece16e7ed 100644
--- a/dashboard/components/input/Input.tsx
+++ b/dashboard/components/input/Input.tsx
@@ -66,8 +66,8 @@ function Input({
       <div className="relative">
         <input
           name={name}
-          className={`peer w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary ${
-            isValid === false && `outline-error-600 focus:outline-error-600`
+          className={`peer w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-gray-950 caret-darkcyan-500 outline outline-[0.063rem] outline-gray-300 focus:outline-[0.12rem] focus:outline-darkcyan-500 ${
+            isValid === false && `outline-red-500 focus:outline-red-500`
           }`}
           placeholder=" "
           onFocus={handleFocus}
@@ -86,12 +86,12 @@ function Input({
           data-form-type="other"
           {...otherProps}
         />
-        <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-black-300 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
+        <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-gray-500 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
           {label}
         </span>
       </div>
       {isValid === false && (
-        <p className="mt-2 text-xs text-error-600">{error}</p>
+        <p className="mt-2 text-xs text-red-500">{error}</p>
       )}
     </div>
   );
diff --git a/dashboard/components/inventory/components/InventoryActiveFilters.tsx b/dashboard/components/inventory/components/InventoryActiveFilters.tsx
index a96918d3c..3f6971abb 100644
--- a/dashboard/components/inventory/components/InventoryActiveFilters.tsx
+++ b/dashboard/components/inventory/components/InventoryActiveFilters.tsx
@@ -34,11 +34,11 @@ function InventoryActiveFilters({
       {!hasFilters ? (
         <>
           <div
-            className="flex w-fit cursor-pointer items-center gap-1 rounded-md border-2 border-dashed border-black-200 border-opacity-60 px-3 py-1"
+            className="flex w-fit cursor-pointer items-center gap-1 rounded-md border-2 border-dashed border-gray-300 border-opacity-60 px-3 py-1"
             onClick={toggle}
           >
             <PlusIcon width={16} height={16} />
-            <span className="font-sans text-sm text-black-400">Filter</span>
+            <span className="font-sans text-sm text-gray-700">Filter</span>
           </div>
           {isOpen && (
             <InventoryFilterDropdown
@@ -50,7 +50,7 @@ function InventoryActiveFilters({
         </>
       ) : (
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-          <div className="h-full text-sm text-black-400">Filters</div>
+          <div className="h-full text-sm text-gray-700">Filters</div>
           {displayedFilters &&
             displayedFilters.map((activeFilter, idx) => (
               <InventoryFilterSummary
@@ -65,7 +65,7 @@ function InventoryActiveFilters({
             <div className="flex items-center gap-3">
               <div className="relative">
                 <div className="cursor-pointer" onClick={toggle}>
-                  <PlusIcon className="h-6 w-6 rounded-full border-dashed border-black-200 p-1 hover:border hover:bg-black-400 hover:bg-opacity-10" />
+                  <PlusIcon className="h-6 w-6 rounded-full border-dashed border-gray-300 p-1 hover:border hover:bg-gray-700 hover:bg-opacity-10" />
                 </div>
                 {isOpen && (
                   <InventoryFilterDropdown
@@ -78,7 +78,7 @@ function InventoryActiveFilters({
 
               <div className="border-x-1 h-7 border"></div>
               <div
-                className="flex cursor-pointer items-center gap-1 text-black-400 hover:text-black-900"
+                className="flex cursor-pointer items-center gap-1 text-gray-700 hover:text-gray-950"
                 onClick={() => router.push(router.pathname)}
               >
                 <span className="font-sans text-[14px] font-semibold ">
diff --git a/dashboard/components/inventory/components/InventoryFilterDropdown.tsx b/dashboard/components/inventory/components/InventoryFilterDropdown.tsx
index 118e74a4e..6c89e4081 100644
--- a/dashboard/components/inventory/components/InventoryFilterDropdown.tsx
+++ b/dashboard/components/inventory/components/InventoryFilterDropdown.tsx
@@ -51,7 +51,7 @@ export default function InventoryFilterDropdown({
         className="fixed left-0 top-0 z-20 hidden h-screen w-screen animate-fade-in bg-transparent opacity-0 sm:block"
       ></div>
       <div
-        className={`absolute ${position} z-[21] inline-flex min-w-[16rem] max-w-[21rem] rounded-lg bg-white p-4 text-sm shadow-xl`}
+        className={`absolute ${position} z-[21] inline-flex min-w-[16rem] max-w-[21rem] rounded-lg bg-white p-4 text-sm shadow-right`}
       >
         <div className="flex w-full flex-col">
           {/* Filter breadcrumbs */}
@@ -97,7 +97,7 @@ export default function InventoryFilterDropdown({
                 />
               </div>
               {inlineError.hasError && (
-                <p className="pb-4 text-xs font-medium text-error-600">
+                <p className="pb-4 text-xs font-medium text-red-500">
                   {inlineError.message}
                 </p>
               )}
diff --git a/dashboard/components/inventory/components/InventoryHeader.tsx b/dashboard/components/inventory/components/InventoryHeader.tsx
index 1cf5390b0..292095d54 100644
--- a/dashboard/components/inventory/components/InventoryHeader.tsx
+++ b/dashboard/components/inventory/components/InventoryHeader.tsx
@@ -8,7 +8,7 @@ function InventoryHeader({ isNotCustomView }: InventoryHeaderProps) {
   return (
     <div className="flex min-h-[40px] items-center justify-between gap-8">
       {isNotCustomView && (
-        <p className="flex items-center gap-2 text-lg font-medium text-black-900">
+        <p className="flex items-center gap-2 text-lg font-medium text-gray-950">
           All Resources
         </p>
       )}
diff --git a/dashboard/components/inventory/components/InventoryLayout.tsx b/dashboard/components/inventory/components/InventoryLayout.tsx
index e4bac8129..c82f57306 100644
--- a/dashboard/components/inventory/components/InventoryLayout.tsx
+++ b/dashboard/components/inventory/components/InventoryLayout.tsx
@@ -60,8 +60,8 @@ function InventoryLayout({
             className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
               ${
                 !router.query.view
-                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
-                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+                  ? 'border-l-2 border-darkcyan-500 bg-cyan-100 text-darkcyan-500'
+                  : 'text-gray-700 transition-colors hover:bg-gray-50'
               }
             `}
           >
@@ -77,7 +77,7 @@ function InventoryLayout({
                   value={query}
                   maxLength={64}
                   onChange={e => setQuery(e.target.value)}
-                  className="flex w-full items-center rounded-lg border border-black-200 px-4 py-3 pl-10 text-sm font-medium text-black-400 transition-colors hover:border-black-300 focus-visible:outline-primary"
+                  className="flex w-full items-center rounded-lg border border-gray-300 px-4 py-3 pl-10 text-sm font-medium text-gray-700 transition-colors hover:border-gray-500 focus-visible:outline-darkcyan-500"
                 />
                 <div
                   className={`absolute left-4 top-[0.95rem] ${
@@ -108,7 +108,7 @@ function InventoryLayout({
                       height="16"
                       fill="none"
                       viewBox="0 0 24 24"
-                      className="hover:bg-black-100"
+                      className="hover:bg-gray-50"
                     >
                       <path
                         stroke="currentColor"
@@ -136,8 +136,8 @@ function InventoryLayout({
                         className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
               ${
                 isActive
-                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
-                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+                  ? 'border-l-2 border-darkcyan-500 bg-cyan-100 text-darkcyan-500'
+                  : 'text-gray-700 transition-colors hover:bg-gray-50'
               }
             `}
                       >
@@ -151,7 +151,7 @@ function InventoryLayout({
             </>
           )}
           {query && newView && newView.length === 0 && (
-            <div className="flex items-center text-xs text-black-400">
+            <div className="flex items-center text-xs text-gray-700">
               There are no views with this name.
             </div>
           )}
diff --git a/dashboard/components/inventory/components/InventorySearchBar.tsx b/dashboard/components/inventory/components/InventorySearchBar.tsx
index b9f1faad2..6c5b180ae 100644
--- a/dashboard/components/inventory/components/InventorySearchBar.tsx
+++ b/dashboard/components/inventory/components/InventorySearchBar.tsx
@@ -38,7 +38,7 @@ function InventorySearchBar({
             onChange={e => setQuery(e.target.value)}
             type="text"
             placeholder="Search by tags, service, name, region..."
-            className="w-full rounded-t-lg border-b border-black-200/30 bg-white py-6 pl-14 pr-6 text-sm text-black-900 caret-secondary placeholder:text-black-300 focus:outline-none"
+            className="w-full rounded-t-lg border-b border-gray-300 bg-white py-6 pl-14 pr-6 text-sm text-gray-950 caret-darkcyan-700 placeholder:text-gray-500 focus:outline-none"
             autoComplete="off"
             data-lpignore="true"
             data-form-type="other"
diff --git a/dashboard/components/inventory/components/InventorySearchNoResults.tsx b/dashboard/components/inventory/components/InventorySearchNoResults.tsx
index 69e62b655..72cb3f01c 100644
--- a/dashboard/components/inventory/components/InventorySearchNoResults.tsx
+++ b/dashboard/components/inventory/components/InventorySearchNoResults.tsx
@@ -21,11 +21,11 @@ function InventorySearchNoResults({ query, setQuery, router }: Props) {
         <div>
           {query ? (
             <>
-              <p className="text-black-300">No results were found for:</p>
+              <p className="text-gray-500">No results were found for:</p>
               <p className="font-medium">{query}</p>
             </>
           ) : (
-            <p className="text-black-300">
+            <p className="text-gray-500">
               No results were found for this filter.
             </p>
           )}
diff --git a/dashboard/components/inventory/components/InventorySidePanel.tsx b/dashboard/components/inventory/components/InventorySidePanel.tsx
index 9d20dcfa4..4f845aeb1 100644
--- a/dashboard/components/inventory/components/InventorySidePanel.tsx
+++ b/dashboard/components/inventory/components/InventorySidePanel.tsx
@@ -87,11 +87,11 @@ function InventorySidePanel({
           >
             {!data && bulkItems && (
               <div className="flex flex-col gap-1 py-1">
-                <p className="font-medium text-black-900">
+                <p className="font-medium text-gray-950">
                   Managing tags for {formatNumber(bulkItems.length)}{' '}
                   {bulkItems.length > 1 ? 'resources' : 'resource'}
                 </p>
-                <p className="text-xs text-black-300">
+                <p className="text-xs text-gray-500">
                   All actions will overwrite previous tags for these resources
                 </p>
               </div>
@@ -107,34 +107,34 @@ function InventorySidePanel({
           <SidepanelPage page={page} param={'resource details'}>
             <div className="space-y-6 pt-1">
               <div className="space-y-2">
-                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                <h2 className="font-['Noto Sans'] text-neutral-500 text-sm font-normal leading-tight">
                   Cloud account
                 </h2>
-                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-900">
+                <h2 className="font-['Noto Sans'] text-neutral-900 text-sm font-normal leading-tight">
                   {!data && (
-                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-cyan-200"></p>
                   )}
                   {data && <span>{data.account}</span>}
                 </h2>
               </div>
               <div className="space-y-2">
-                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                <h2 className="font-['Noto Sans'] text-neutral-500 text-sm font-normal leading-tight">
                   Region
                 </h2>
-                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-900">
+                <h2 className="font-['Noto Sans'] text-neutral-900 text-sm font-normal leading-tight">
                   {!data && (
-                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-cyan-200"></p>
                   )}
                   {data && <span>{data.region}</span>}
                 </h2>
               </div>
               <div className="space-y-2">
-                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                <h2 className="font-['Noto Sans'] text-neutral-500 text-sm font-normal leading-tight">
                   Cost
                 </h2>
                 <h2 className=" flex items-center gap-2 text-sm">
                   {!data && (
-                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-cyan-200"></p>
                   )}
                   {data && <span>{data?.cost.toFixed(2)}$</span>}
                   {data && (
@@ -145,12 +145,12 @@ function InventorySidePanel({
                 </h2>
               </div>
               <div className="space-y-2">
-                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                <h2 className="font-['Noto Sans'] text-neutral-500 text-sm font-normal leading-tight">
                   Relations
                 </h2>
-                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-900">
+                <h2 className="font-['Noto Sans'] text-neutral-900 text-sm font-normal leading-tight">
                   {!data && (
-                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-cyan-200"></p>
                   )}
                   {data && (
                     <span>{data.relations.length} related resources</span>
@@ -236,8 +236,8 @@ function InventorySidePanel({
         <div>
           {page === 'delete' && (
             <>
-              <div className="flex flex-col gap-6 bg-black-100 p-6">
-                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-error-100 text-error-600">
+              <div className="flex flex-col gap-6 bg-gray-50 p-6">
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-50 text-red-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -255,12 +255,12 @@ function InventorySidePanel({
                   </svg>
                 </div>
                 <div className="flex flex-col items-center gap-6">
-                  <p className="text-center font-medium text-black-900">
+                  <p className="text-center font-medium text-gray-950">
                     Are you sure you want to delete all tags from{' '}
                     {formatNumber(bulkItems.length)}{' '}
                     {bulkItems.length > 1 ? 'resources' : 'resource'}?
                   </p>
-                  <p className="text-sm text-black-400">
+                  <p className="text-sm text-gray-700">
                     This is a permanent action, and it will also delete previous
                     tags you have added to these resources.
                   </p>
diff --git a/dashboard/components/inventory/components/InventoryStatsCards.tsx b/dashboard/components/inventory/components/InventoryStatsCards.tsx
index 971dae8ee..cdd4d70d2 100644
--- a/dashboard/components/inventory/components/InventoryStatsCards.tsx
+++ b/dashboard/components/inventory/components/InventoryStatsCards.tsx
@@ -33,8 +33,8 @@ function InventoryStatsCards({
               router.query.view ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
             } gap-8`}
           >
-            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
-              <div className=" rounded-lg bg-komiser-100 p-4">
+            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-gray-950 transition-colors">
+              <div className=" rounded-lg bg-gray-50 p-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"
@@ -63,12 +63,12 @@ function InventoryStatsCards({
                 <p className="text-xl font-medium">
                   {formatNumber(inventoryStats.resources, 'full')}
                 </p>
-                <p className="text-sm text-black-300">Resources</p>
+                <p className="text-sm text-gray-500">Resources</p>
               </div>
               <Tooltip>Number of active cloud services</Tooltip>
             </div>
-            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
-              <div className=" rounded-lg bg-komiser-100 p-4">
+            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-gray-950 transition-colors">
+              <div className=" rounded-lg bg-gray-50 p-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"
@@ -102,14 +102,14 @@ function InventoryStatsCards({
               </div>
               <div className="peer flex flex-col">
                 <p className="text-xl font-medium">{inventoryStats.regions}</p>
-                <p className="text-sm text-black-300">Regions</p>
+                <p className="text-sm text-gray-500">Regions</p>
               </div>
               <Tooltip>
                 Number of regions where you have active cloud services
               </Tooltip>
             </div>
-            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
-              <div className=" rounded-lg bg-komiser-100 p-4">
+            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-gray-950 transition-colors">
+              <div className=" rounded-lg bg-gray-50 p-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"
@@ -138,13 +138,13 @@ function InventoryStatsCards({
                 <p className="text-xl font-medium">
                   ${formatNumber(inventoryStats.costs)}
                 </p>
-                <p className="text-sm text-black-300">Cost</p>
+                <p className="text-sm text-gray-500">Cost</p>
               </div>
               <Tooltip>Up-to-date monthly cost</Tooltip>
             </div>
             {router.query.view && hiddenResources && (
-              <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
-                <div className=" rounded-lg bg-komiser-100 p-4">
+              <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-gray-950 transition-colors">
+                <div className=" rounded-lg bg-gray-50 p-4">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -180,7 +180,7 @@ function InventoryStatsCards({
                   <p className="text-xl font-medium">
                     {formatNumber(hiddenResources.length)}
                   </p>
-                  <p className="text-sm text-black-300">Hidden resources</p>
+                  <p className="text-sm text-gray-500">Hidden resources</p>
                 </div>
                 <Tooltip>
                   Resources that will be hidden from the inventory
diff --git a/dashboard/components/inventory/components/InventoryTable.tsx b/dashboard/components/inventory/components/InventoryTable.tsx
index 8ab2cc48c..9d53bef1d 100644
--- a/dashboard/components/inventory/components/InventoryTable.tsx
+++ b/dashboard/components/inventory/components/InventoryTable.tsx
@@ -136,7 +136,7 @@ function InventoryTable({
                         <p className="... w-56 truncate 2xl:w-96">
                           {item.name}
                         </p>
-                        <div className="absolute left-4 top-12 z-10 hidden flex-col gap-2 rounded-lg bg-black-900 px-4 py-3 text-xs text-black-200 shadow-lg group-hover:flex">
+                        <div className="absolute left-4 top-12 z-10 hidden flex-col gap-2 rounded-lg bg-gray-950 px-4 py-3 text-xs text-gray-300 shadow-right group-hover:flex">
                           {item.name}
                         </div>
                       </td>
@@ -215,7 +215,7 @@ function InventoryTable({
                         <p className="... w-56 truncate 2xl:w-96">
                           {item.name}
                         </p>
-                        <div className="absolute left-4 top-12 z-10 hidden flex-col gap-2 rounded-lg bg-black-900 px-4 py-3 text-xs text-black-200 shadow-lg group-hover:flex">
+                        <div className="absolute left-4 top-12 z-10 hidden flex-col gap-2 rounded-lg bg-gray-950 px-4 py-3 text-xs text-gray-300 shadow-right group-hover:flex">
                           {item.name}
                         </div>
                       </td>
diff --git a/dashboard/components/inventory/components/InventoryTableBulkActions.tsx b/dashboard/components/inventory/components/InventoryTableBulkActions.tsx
index 80102e790..d2a30f4d5 100644
--- a/dashboard/components/inventory/components/InventoryTableBulkActions.tsx
+++ b/dashboard/components/inventory/components/InventoryTableBulkActions.tsx
@@ -23,7 +23,7 @@ function InventoryTableBulkActions({
     <>
       {bulkItems && bulkItems.length > 0 && (
         <div className="border-purplin-650 sticky bottom-0 flex w-full items-center justify-between bg-white px-6 py-4 text-sm font-medium shadow-[0px_-2px_4px_rgba(0,0,0,0.05)]">
-          <p className="text-black-900">
+          <p className="text-gray-950">
             {bulkItems.length} {resourceText} {''}
             selected
           </p>
diff --git a/dashboard/components/inventory/components/InventoryTableRow.tsx b/dashboard/components/inventory/components/InventoryTableRow.tsx
index 076fc7786..d8f12eb63 100644
--- a/dashboard/components/inventory/components/InventoryTableRow.tsx
+++ b/dashboard/components/inventory/components/InventoryTableRow.tsx
@@ -14,8 +14,8 @@ function InventoryTableRow({
     <tr
       className={`${
         bulkItems && bulkItems.find(currentId => currentId === id)
-          ? 'border-black-200/70 bg-komiser-120'
-          : 'border-black-200/30 bg-white hover:bg-black-100/50'
+          ? 'border-gray-300 bg-darkcyan-100'
+          : 'border-gray-300 bg-white hover:bg-gray-50'
       } border-b last:border-none`}
     >
       {children}
diff --git a/dashboard/components/inventory/components/InventoryTableTags.tsx b/dashboard/components/inventory/components/InventoryTableTags.tsx
index ae01ea9e5..84c8de59f 100644
--- a/dashboard/components/inventory/components/InventoryTableTags.tsx
+++ b/dashboard/components/inventory/components/InventoryTableTags.tsx
@@ -40,20 +40,20 @@ function InventoryTableTags({
               ></path>
             </svg>
             <span
-              className={`text-black-900" absolute left-[2.375rem] top-3 flex h-4 w-4 items-center justify-center rounded-full bg-white text-[10px] font-bold ${
+              className={`text-gray-950" absolute left-[2.375rem] top-3 flex h-4 w-4 items-center justify-center rounded-full bg-white text-[10px] font-bold ${
                 bulkItems && bulkItems.find(currentId => currentId === id)
-                  ? 'bg-komiser-120'
+                  ? 'bg-darkcyan-100'
                   : ''
               }`}
             >
               {tags.length}
             </span>
           </div>
-          <div className="absolute right-6 top-11 z-10 hidden max-w-xs flex-col gap-2 rounded-lg bg-black-900 px-4 py-3 shadow-lg group-hover:flex">
+          <div className="absolute right-6 top-11 z-10 hidden max-w-xs flex-col gap-2 rounded-lg bg-gray-950 px-4 py-3 shadow-right group-hover:flex">
             {tags.map((tag, index) => (
               <div
                 key={index}
-                className="-mx-4 flex items-center gap-2 border-t border-white/20 px-4 pt-2 text-xs text-black-200 first:border-none first:pt-0"
+                className="-mx-4 flex items-center gap-2 border-t border-white/20 px-4 pt-2 text-xs text-gray-300 first:border-none first:pt-0"
               >
                 <div className="flex items-center gap-1">
                   <svg
@@ -62,7 +62,7 @@ function InventoryTableTags({
                     height="14"
                     fill="none"
                     viewBox="0 0 24 24"
-                    className="text-black-400"
+                    className="text-gray-700"
                   >
                     <path
                       stroke="currentColor"
@@ -82,14 +82,14 @@ function InventoryTableTags({
                     onClick={e => {
                       setQuery(tag.key);
                     }}
-                    className="line-clamp-2 cursor-pointer hover:text-komiser-500"
+                    className="line-clamp-2 cursor-pointer hover:text-cyan-500"
                   >
                     {tag.key}:
                   </span>
                 </div>
                 <span
                   onClick={() => setQuery(tag.value)}
-                  className="line-clamp-2 cursor-pointer font-medium hover:text-komiser-500"
+                  className="line-clamp-2 cursor-pointer font-medium hover:text-cyan-500"
                 >
                   {tag.value}
                 </span>
diff --git a/dashboard/components/inventory/components/filter/InventoryFilterBreadcrumbs.tsx b/dashboard/components/inventory/components/filter/InventoryFilterBreadcrumbs.tsx
index b178719ef..55d99ecd7 100644
--- a/dashboard/components/inventory/components/filter/InventoryFilterBreadcrumbs.tsx
+++ b/dashboard/components/inventory/components/filter/InventoryFilterBreadcrumbs.tsx
@@ -8,12 +8,12 @@ function InventoryFilterBreadcrumbs({
   goTo
 }: InventoryFilterBreadcrumbsProps) {
   return (
-    <div className="flex gap-2 text-xs text-black-300">
+    <div className="flex gap-2 text-xs text-gray-500">
       <p
         className={`cursor-pointer ${
           step === 0
-            ? 'text-black-900 hover:text-black-900'
-            : 'hover:text-black-400'
+            ? 'text-gray-950 hover:text-gray-950'
+            : 'hover:text-gray-700'
         }`}
         onClick={() => goTo(0)}
       >
@@ -25,8 +25,8 @@ function InventoryFilterBreadcrumbs({
           <p
             className={`cursor-pointer ${
               step === 1
-                ? 'text-black-900 hover:text-black-900'
-                : 'hover:text-black-400'
+                ? 'text-gray-950 hover:text-gray-950'
+                : 'hover:text-gray-700'
             }`}
             onClick={() => goTo(1)}
           >
@@ -38,8 +38,8 @@ function InventoryFilterBreadcrumbs({
               <p
                 className={`cursor-pointer ${
                   step === 2
-                    ? 'text-black-900 hover:text-black-900'
-                    : 'hover:text-black-400'
+                    ? 'text-gray-950 hover:text-gray-950'
+                    : 'hover:text-gray-700'
                 }`}
                 onClick={() => goTo(2)}
               >
diff --git a/dashboard/components/inventory/components/filter/InventoryFilterSummary.tsx b/dashboard/components/inventory/components/filter/InventoryFilterSummary.tsx
index b5566743e..29376ec30 100644
--- a/dashboard/components/inventory/components/filter/InventoryFilterSummary.tsx
+++ b/dashboard/components/inventory/components/filter/InventoryFilterSummary.tsx
@@ -51,8 +51,8 @@ function InventoryFilterSummary({
   return (
     <div
       className={`${
-        bg ? 'bg-white' : 'bg-black-150'
-      }  relative flex h-6 w-fit max-w-[calc(100vw-250px)] items-center gap-1 overflow-hidden rounded px-2 text-xs text-black-900/70 md:max-w-[calc(100vw-400px)]`}
+        bg ? 'bg-white' : 'bg-background-ds'
+      }  relative flex h-6 w-fit max-w-[calc(100vw-250px)] items-center gap-1 overflow-hidden rounded px-2 text-xs text-gray-950 md:max-w-[calc(100vw-400px)]`}
     >
       <div className="flex items-center gap-1 whitespace-nowrap">
         <div className="scale-75">{getField('icon')}</div>
diff --git a/dashboard/components/inventory/components/view/InventoryView.tsx b/dashboard/components/inventory/components/view/InventoryView.tsx
index 7bf5b77a1..3faed992c 100644
--- a/dashboard/components/inventory/components/view/InventoryView.tsx
+++ b/dashboard/components/inventory/components/view/InventoryView.tsx
@@ -107,7 +107,7 @@ function InventoryView({
       {!router.query.view && (
         <div
           onClick={() => openModal(filters)}
-          className="cursor-pointer font-sans text-[14px] font-semibold text-komiser-600"
+          className="cursor-pointer font-sans text-[14px] font-semibold text-darkcyan-500"
         >
           Save as view
         </div>
@@ -165,7 +165,7 @@ function InventoryView({
                 disabled={!view.name}
               >
                 {router.query.view ? 'Update view' : 'Save as a view'}{' '}
-                <span className="flex items-center justify-center rounded-lg bg-black-900/20 px-2 py-1 text-xs">
+                <span className="flex items-center justify-center rounded-lg bg-gray-950 px-2 py-1 text-xs">
                   {inventoryStats?.resources}
                 </span>
               </Button>
@@ -204,11 +204,11 @@ function InventoryView({
                     {hiddenResources.map(item => (
                       <tr
                         key={item.id}
-                        className={`border-b border-black-200/30 last:border-none ${
+                        className={`border-b border-gray-300 last:border-none ${
                           bulkItems &&
                           bulkItems.find(currentId => currentId === item.id)
-                            ? 'border-black-200/70 bg-komiser-120'
-                            : 'border-black-200/30 bg-white hover:bg-black-100/50'
+                            ? 'border-gray-300 bg-darkcyan-100'
+                            : 'border-gray-300 bg-white hover:bg-gray-50'
                         } border-b last:border-none`}
                       >
                         <td className="px-2 py-4">
@@ -263,7 +263,7 @@ function InventoryView({
           )}
 
           {hiddenResources && hiddenResources.length === 0 && (
-            <div className="rounded-lg bg-black-100 p-6">
+            <div className="rounded-lg bg-gray-50 p-6">
               <div className="flex flex-col items-center gap-6">
                 <Image
                   src="/assets/img/purplin/dashboard.svg"
@@ -272,10 +272,10 @@ function InventoryView({
                   height={100}
                 />
                 <div className="flex flex-col items-center justify-center gap-2 px-24 text-center">
-                  <p className="font-semibold text-black-900">
+                  <p className="font-semibold text-gray-950">
                     No hidden resources in this view
                   </p>
-                  <p className="text-sm text-black-400">
+                  <p className="text-sm text-gray-700">
                     To hide a resource from this view, select and hide them on
                     the inventory table.
                   </p>
diff --git a/dashboard/components/inventory/components/view/InventoryViewHeader.tsx b/dashboard/components/inventory/components/view/InventoryViewHeader.tsx
index 711731b01..13ef875ce 100644
--- a/dashboard/components/inventory/components/view/InventoryViewHeader.tsx
+++ b/dashboard/components/inventory/components/view/InventoryViewHeader.tsx
@@ -75,7 +75,7 @@ function InventoryViewHeader({
     <div className="absolute -top-14 left-0">
       {currentView && (
         <>
-          <div className="flex items-center gap-2 text-lg font-medium text-black-900">
+          <div className="flex items-center gap-2 text-lg font-medium text-gray-950">
             <span>{currentView.name}</span>
             <Button style="ghost" size="xxs" onClick={openDropdown}>
               <ChevronDownIcon width={16} height={16} />
@@ -88,7 +88,7 @@ function InventoryViewHeader({
                 onClick={closeDropdown}
                 className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
               ></div>
-              <div className="absolute left-0 top-10 z-[21] inline-flex w-[16rem] rounded-lg bg-white p-4 text-sm shadow-xl">
+              <div className="absolute left-0 top-10 z-[21] inline-flex w-[16rem] rounded-lg bg-white p-4 text-sm shadow-right">
                 <div className="flex w-full flex-col gap-1">
                   <Button
                     style="dropdown"
@@ -145,7 +145,7 @@ function InventoryViewHeader({
                     Copy view link
                   </Button>
                   <ExportCSV showToast={showToast} />
-                  <span className="m-2 -mx-4 border-b border-black-200/40"></span>
+                  <span className="m-2 -mx-4 border-b border-gray-300"></span>
                   <Button
                     style="dropdown"
                     size="sm"
@@ -166,14 +166,14 @@ function InventoryViewHeader({
           <Modal isOpen={modalIsOpen} closeModal={closeDoubleConfirmationModal}>
             <div className="flex w-full flex-col gap-6 rounded-lg">
               <div className="flex flex-col gap-6">
-                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-error-100 text-error-600">
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-50 text-red-500">
                   <WarningIcon width={24} height={24} />
                 </div>
                 <div className="flex flex-col items-center gap-2">
-                  <p className="text-center text-lg font-medium text-black-900">
+                  <p className="text-center text-lg font-medium text-gray-950">
                     Are you sure you want to delete this view?
                   </p>
-                  <p className="text-sm text-black-400">
+                  <p className="text-sm text-gray-700">
                     This is a permanent action.
                   </p>
                 </div>
diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsChooseAlertMethod.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsChooseAlertMethod.tsx
index 201296b76..f9fcfd03c 100644
--- a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsChooseAlertMethod.tsx
+++ b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsChooseAlertMethod.tsx
@@ -35,7 +35,7 @@ function InventoryViewAlertsChooseAlertMethod({
     <div className="flex flex-col gap-4">
       <div
         onClick={() => setViewControllerOnClickingBackButton()}
-        className="flex cursor-pointer items-center gap-2 self-start text-sm text-black-900"
+        className="flex cursor-pointer items-center gap-2 self-start text-sm text-gray-950"
       >
         <ArrowLeftIcon width={24} height={24} />
         Pick a Handler
@@ -49,7 +49,7 @@ function InventoryViewAlertsChooseAlertMethod({
                 setAlertMethodInViewController(alert.id);
               }
             }}
-            className={`flex cursor-pointer select-none items-center justify-between rounded-lg border border-black-170 p-6 hover:border-black-200 
+            className={`flex cursor-pointer select-none items-center justify-between rounded-lg border border-gray-200 p-6 hover:border-gray-300 
                         ${
                           alert.id === AlertMethod.SLACK && !isSlackConfigured
                             ? 'pointer-events-none bg-gray-200'
@@ -59,8 +59,8 @@ function InventoryViewAlertsChooseAlertMethod({
             <div className="flex items-center gap-4">
               <Image src={alert.image} height={42} width={42} alt={alert.alt} />
               <div className="flex flex-col">
-                <p className="font-semibold text-black-900">{alert.name}</p>
-                <p className="text-xs text-black-400">{alert.message}</p>
+                <p className="font-semibold text-gray-950">{alert.name}</p>
+                <p className="text-xs text-gray-700">{alert.message}</p>
               </div>
             </div>
             <ChevronRightIcon width={24} height={24} />
@@ -68,14 +68,14 @@ function InventoryViewAlertsChooseAlertMethod({
 
           {alert.id === AlertMethod.SLACK && !isSlackConfigured && (
             <div className="mt-2">
-              <p className="text-xs text-black-400">
+              <p className="text-xs text-gray-700">
                 You have not set up your Slack integration. Learn how through
                 our{' '}
                 <a
                   href="https://docs.komiser.io/docs/introduction/getting-started/#slack-integration-alerts"
                   target="_blank"
                   rel="noreferrer"
-                  className="text-primary"
+                  className="text-darkcyan-500"
                 >
                   <u>guide</u>
                 </a>
diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDeleteAlert.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDeleteAlert.tsx
index 82f4108cb..908e2917e 100644
--- a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDeleteAlert.tsx
+++ b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDeleteAlert.tsx
@@ -29,7 +29,7 @@ function InventoryViewAlertsDeleteAlert({
     showToast
   });
   return (
-    <div className="rounded-lg bg-komiser-100 p-6">
+    <div className="rounded-lg bg-gray-50 p-6">
       <div className="flex flex-col items-center gap-6">
         <Image
           src="/assets/img/others/warning.svg"
@@ -39,10 +39,10 @@ function InventoryViewAlertsDeleteAlert({
           className="mx-auto flex-shrink-0"
         />
         <div className="mb-8 flex flex-col items-center gap-2 px-4">
-          <p className="text-center font-semibold text-black-900">
+          <p className="text-center font-semibold text-gray-950">
             Are you sure you want to delete this alert?
           </p>
-          <p className="text-center text-sm text-black-400">
+          <p className="text-center text-sm text-gray-700">
             By deleting the “{currentAlert?.name}”{' '}
             {currentAlert?.isSlack ? 'slack' : 'webhook'} alert, you won’t
             receive any more notifications regarding the cost limit you set up.
diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDisplay.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDisplay.tsx
index 1277a144d..5309e94a7 100644
--- a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDisplay.tsx
+++ b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsDisplay.tsx
@@ -21,7 +21,7 @@ function InventoryViewAlertDisplayAlerts({
         <div
           onClick={() => createOrEditAlert(alert.id)}
           key={alert.id}
-          className="flex cursor-pointer select-none items-center justify-between rounded-lg border border-black-170 p-6 hover:border-black-200"
+          className="flex cursor-pointer select-none items-center justify-between rounded-lg border border-gray-200 p-6 hover:border-gray-300"
         >
           <div className="flex items-center gap-4">
             <Image
@@ -35,8 +35,8 @@ function InventoryViewAlertDisplayAlerts({
               alt={alert.isSlack ? 'Slack logo' : 'Webhook logo'}
             />
             <div className="flex flex-col">
-              <p className="font-semibold text-black-900">{alert.name}</p>
-              <p className="text-xs text-black-400">
+              <p className="font-semibold text-gray-950">{alert.name}</p>
+              <p className="text-xs text-gray-700">
                 {alert.budget
                   ? `When total cost is over $${formatNumber(
                       Number(alert.budget)
diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx
index 58dd81603..a72d2efc2 100644
--- a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx
+++ b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx
@@ -101,7 +101,7 @@ function InventoryViewAlertsCreateOrEditAlert({
       {!currentAlert && (
         <div
           onClick={() => setViewControllerOnClickingBackButton()}
-          className="flex cursor-pointer items-center gap-2 self-start text-black-900"
+          className="flex cursor-pointer items-center gap-2 self-start text-gray-950"
         >
           <ArrowLeftIcon width={24} height={24} />
           Setup {alertName} Alert
@@ -111,7 +111,7 @@ function InventoryViewAlertsCreateOrEditAlert({
       {currentAlert && (
         <div
           onClick={() => closeAlert()}
-          className="flex cursor-pointer items-center gap-2 self-start text-black-900"
+          className="flex cursor-pointer items-center gap-2 self-start text-gray-950"
         >
           <ArrowLeftIcon width={24} height={24} />
           Edit {currentAlert.isSlack ? 'Slack' : 'Webhook'} alert
@@ -119,7 +119,7 @@ function InventoryViewAlertsCreateOrEditAlert({
       )}
 
       <div className="flex flex-col gap-4">
-        <p className="text-black-400">Type</p>
+        <p className="text-gray-700">Type</p>
 
         {/* Displaying the slack alert types when creating a new alert */}
         {!currentAlert && (
@@ -131,9 +131,9 @@ function InventoryViewAlertsCreateOrEditAlert({
                   key={option.label}
                   onClick={() => changeAlertType(option.type)}
                   className={classNames(
-                    'flex cursor-pointer flex-col items-start justify-center rounded-lg px-6 py-4 outline outline-black-200 hover:outline-black-300',
+                    'flex cursor-pointer flex-col items-start justify-center rounded-lg px-6 py-4 outline outline-gray-300 hover:outline-gray-500',
                     {
-                      'outline-2 outline-primary hover:outline-primary':
+                      'outline-2 outline-darkcyan-500 hover:outline-darkcyan-500':
                         isActive
                     }
                   )}
@@ -146,10 +146,10 @@ function InventoryViewAlertsCreateOrEditAlert({
                       width={42}
                     />
                     <div className="flex flex-col">
-                      <p className="text-base font-semibold text-black-900">
+                      <p className="text-base font-semibold text-gray-950">
                         {option.label}
                       </p>
-                      <p className="text-xs text-black-400">
+                      <p className="text-xs text-gray-700">
                         {option.description}
                       </p>
                     </div>
@@ -163,17 +163,17 @@ function InventoryViewAlertsCreateOrEditAlert({
         {/* Displaying the chosen slack alert type when editing an alert */}
         {currentAlert && (
           <div className="flex flex-col items-start justify-center">
-            <p className="text-base font-semibold text-black-900">
+            <p className="text-base font-semibold text-gray-950">
               {findWhichOption?.label}
             </p>
-            <p className="text-xs text-black-400">
+            <p className="text-xs text-gray-700">
               {findWhichOption?.description}
             </p>
           </div>
         )}
       </div>
       <div className="flex flex-col gap-4">
-        <p className="text-black-400">Details</p>
+        <p className="text-gray-700">Details</p>
 
         {selected === 'BUDGET' && (
           <Grid gap="sm">
@@ -221,16 +221,16 @@ function InventoryViewAlertsCreateOrEditAlert({
       {alertName === 'Webhook' && (
         <div>
           <div className="flex flex-col gap-4">
-            <p className="text-black-400">Output</p>
+            <p className="text-gray-700">Output</p>
             <div className="relative">
               <div>
                 <div className="relative">
                   <input
                     type="text"
                     name="endpoint"
-                    className={`peer mr-6 w-full rounded bg-white pb-[0.75rem] pl-4 pr-32 pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-black-200 focus:outline-2 focus:outline-primary ${
+                    className={`peer mr-6 w-full rounded bg-white pb-[0.75rem] pl-4 pr-32 pt-[1.75rem] text-sm text-gray-950 caret-darkcyan-500 outline outline-gray-300 focus:outline-2 focus:outline-darkcyan-500 ${
                       testResultData?.success === false &&
-                      `outline-error-600 focus:outline-error-600`
+                      `outline-red-500 focus:outline-red-500`
                     }`}
                     placeholder=""
                     onChange={e => {
@@ -242,13 +242,13 @@ function InventoryViewAlertsCreateOrEditAlert({
                     data-lpignore="true"
                     data-form-type="other"
                   />
-                  <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-black-300 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
+                  <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-gray-500 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
                     Endpoint
                   </span>
                 </div>
               </div>
               <span
-                className={`absolute right-4 top-1/2 flex w-full -translate-y-1/2 transform cursor-pointer items-center gap-2 rounded bg-transparent text-sm font-medium text-primary text-primary active:bg-komiser-200 active:text-primary disabled:cursor-not-allowed sm:w-auto ${
+                className={`absolute right-4 top-1/2 flex w-full -translate-y-1/2 transform cursor-pointer items-center gap-2 rounded bg-transparent text-sm font-medium text-darkcyan-500 text-darkcyan-500 active:bg-cyan-200 active:text-darkcyan-500 disabled:cursor-not-allowed sm:w-auto ${
                   testingEndpoint ? 'pointer-events-none opacity-50' : ''
                 }`}
                 onClick={testEndpoint}
@@ -280,7 +280,7 @@ function InventoryViewAlertsCreateOrEditAlert({
               </span>
             </div>
             {testResultData?.success === false && (
-              <p className="-mt-2 text-xs text-error-600">
+              <p className="-mt-2 text-xs text-red-500">
                 {testResultData.message}
               </p>
             )}
@@ -294,14 +294,14 @@ function InventoryViewAlertsCreateOrEditAlert({
             />
           </div>
           <div className="mt-2">
-            <p className="text-xs text-black-400">
+            <p className="text-xs text-gray-700">
               We’ll send a POST request to the endpoint. More information can be
               found in our{' '}
               <a
                 href="https://docs.komiser.io/docs/guides/how-to-komiser/alerts#request-details"
                 target="_blank"
                 rel="noreferrer"
-                className="text-primary"
+                className="text-darkcyan-500"
               >
                 <u>developer documentation</u>
               </a>
diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsError.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsError.tsx
index 2dd77b913..163a77068 100644
--- a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsError.tsx
+++ b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsError.tsx
@@ -10,10 +10,10 @@ function InventoryViewAlertsError({
 }: InventoryViewAlertsErrorProps) {
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex select-none items-center justify-between rounded-lg border border-black-170 p-6">
+      <div className="flex select-none items-center justify-between rounded-lg border border-gray-200 p-6">
         <div className="flex items-center gap-4">
           <div className="flex flex-col gap-2">
-            <p className="text-sm text-black-400">
+            <p className="text-sm text-gray-700">
               There was an error fetching the alerts
             </p>
           </div>
diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsHasNoAlerts.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsHasNoAlerts.tsx
index e09059f4b..f532bb4f3 100644
--- a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsHasNoAlerts.tsx
+++ b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsHasNoAlerts.tsx
@@ -19,10 +19,10 @@ function InventoryViewAlertHasNoExistingAlerts({
           className="flex-shrink-0"
         />
         <div className="flex flex-col items-start gap-2 px-4">
-          <p className="font-semibold text-black-900">
+          <p className="font-semibold text-gray-950">
             It seems you have no alerts set up
           </p>
-          <p className="text-sm text-black-400">
+          <p className="text-sm text-gray-700">
             Set up budget or resources alerts to stay updated on your cloud
             infrastructure
           </p>
diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsSkeleton.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsSkeleton.tsx
index d7e7b262f..e07e8eea5 100644
--- a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsSkeleton.tsx
+++ b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsSkeleton.tsx
@@ -7,16 +7,16 @@ function InventoryViewAlertsSkeleton() {
       {rows.map((row, idx) => (
         <div
           key={idx}
-          className="flex animate-pulse cursor-pointer select-none items-center justify-between rounded-lg border border-black-170 p-6 hover:border-black-200"
+          className="flex animate-pulse cursor-pointer select-none items-center justify-between rounded-lg border border-gray-200 p-6 hover:border-gray-300"
         >
           <div className="flex items-center gap-4">
-            <div className="h-[42px] w-[42px] rounded-full bg-komiser-200/50"></div>
+            <div className="h-[42px] w-[42px] rounded-full bg-cyan-200"></div>
             <div className="flex flex-col gap-2">
-              <div className="h-3 w-20 rounded-full bg-komiser-200/50"></div>
-              <div className="h-2 w-48 rounded-full bg-komiser-200/50"></div>
+              <div className="h-3 w-20 rounded-full bg-cyan-200"></div>
+              <div className="h-2 w-48 rounded-full bg-cyan-200"></div>
             </div>
           </div>
-          <div className="h-6 w-6 rounded-full bg-komiser-200/50"></div>
+          <div className="h-6 w-6 rounded-full bg-cyan-200"></div>
         </div>
       ))}
     </div>
diff --git a/dashboard/components/layout/Layout.tsx b/dashboard/components/layout/Layout.tsx
index 0ca6e3c3e..bc88261de 100644
--- a/dashboard/components/layout/Layout.tsx
+++ b/dashboard/components/layout/Layout.tsx
@@ -82,7 +82,7 @@ function Layout({ children }: LayoutProps) {
             <Navbar />
             <main
               className={classNames(
-                'relative bg-black-100 p-6 pb-12 xl:px-8 2xl:px-24',
+                'relative bg-gray-50 p-6 pb-12 xl:px-8 2xl:px-24',
                 displayBanner
                   ? 'mt-[145px] min-h-[calc(100vh-145px)]'
                   : 'mt-[73px] min-h-[calc(100vh-73px)]'
diff --git a/dashboard/components/modal/Modal.tsx b/dashboard/components/modal/Modal.tsx
index fbd2ea591..b6acd73d0 100644
--- a/dashboard/components/modal/Modal.tsx
+++ b/dashboard/components/modal/Modal.tsx
@@ -29,11 +29,11 @@ function Modal({ isOpen, closeModal, id, children }: ModalProps) {
           <div
             id={`${id}-wrapper`}
             onClick={closeModal}
-            className="fixed inset-0 z-30 hidden animate-fade-in bg-black-900/10 opacity-0 sm:block"
+            className="fixed inset-0 z-30 hidden animate-fade-in bg-gray-950 opacity-0 sm:block"
           ></div>
           <div
             id={`${id}-modal`}
-            className="fixed inset-0 z-30 w-full animate-fade-in-down-short bg-white p-8 opacity-0 shadow-2xl sm:bottom-auto sm:top-[15%] sm:m-auto sm:max-w-fit sm:rounded-lg"
+            className="fixed inset-0 z-30 w-full animate-fade-in-down-short bg-white p-8 opacity-0 shadow-left sm:bottom-auto sm:top-[15%] sm:m-auto sm:max-w-fit sm:rounded-lg"
           >
             {children}
           </div>
diff --git a/dashboard/components/navbar/Navbar.tsx b/dashboard/components/navbar/Navbar.tsx
index 26194e2db..01aef2683 100644
--- a/dashboard/components/navbar/Navbar.tsx
+++ b/dashboard/components/navbar/Navbar.tsx
@@ -31,9 +31,9 @@ function Navbar() {
     <nav
       className={`fixed ${
         displayBanner ? 'top-[72px]' : 'top-0'
-      } z-30 flex w-full items-center justify-between gap-10 border-b border-black-200/30 bg-white px-6 py-4 shadow-[0_2px_9px_rgba(105,115,114,0.16)] xl:pr-8 2xl:pr-24`}
+      } z-30 flex w-full items-center justify-between gap-10 border-b border-gray-300 bg-white px-6 py-4 shadow-right xl:pr-8 2xl:pr-24`}
     >
-      <div className="flex items-center gap-8 text-sm font-semibold text-black-400">
+      <div className="flex items-center gap-8 text-sm font-semibold text-gray-700">
         <Link href="/dashboard">
           <Image
             src="/assets/img/komiser.svg"
@@ -48,17 +48,17 @@ function Navbar() {
             href={navItem.href}
             className={
               router.pathname === navItem.href
-                ? 'text-primary'
-                : 'text-black-400'
+                ? 'text-darkcyan-500'
+                : 'text-gray-700'
             }
           >
             {navItem.label}
           </Link>
         ))}
       </div>
-      <div className="flex gap-4 text-sm font-medium text-black-900 lg:gap-10">
+      <div className="flex gap-4 text-sm font-medium text-gray-950 lg:gap-10">
         <a
-          className="hidden items-center gap-2 transition-colors hover:text-primary md:flex"
+          className="hidden items-center gap-2 transition-colors hover:text-darkcyan-500 md:flex"
           href="https://docs.komiser.io/docs/intro?utm_source=komiser&utm_medium=referral&utm_campaign=static"
           target="_blank"
           rel="noopener noreferrer"
@@ -90,7 +90,7 @@ function Navbar() {
           Docs
         </a>
         <a
-          className="hidden items-center gap-2 transition-colors hover:text-primary md:flex"
+          className="hidden items-center gap-2 transition-colors hover:text-darkcyan-500 md:flex"
           href="https://www.tailwarden.com/changelog/komiser"
           target="_blank"
           rel="noopener noreferrer"
@@ -121,7 +121,7 @@ function Navbar() {
           Changelog
         </a>
         <a
-          className="hidden cursor-pointer items-center gap-2 transition-colors hover:text-primary md:flex"
+          className="hidden cursor-pointer items-center gap-2 transition-colors hover:text-darkcyan-500 md:flex"
           rel="noopener noreferrer"
           onClick={() => openFeedbackModal()}
         >
diff --git a/dashboard/components/number-input/NumberInput.tsx b/dashboard/components/number-input/NumberInput.tsx
index 4100b7b8b..288da8686 100644
--- a/dashboard/components/number-input/NumberInput.tsx
+++ b/dashboard/components/number-input/NumberInput.tsx
@@ -88,8 +88,8 @@ function NumberInput({
           name={name}
           className={`peer w-full rounded bg-white px-12 py-[0.75rem] ${
             label && 'pt-[1.75rem]'
-          } text-center text-sm text-neutral-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary ${
-            isValid === false && `outline-error-600 focus:outline-error-600`
+          } text-neutral-900 text-center text-sm caret-darkcyan-500 outline outline-[0.063rem] outline-gray-300 focus:outline-[0.12rem] focus:outline-darkcyan-500 ${
+            isValid === false && `outline-red-500 focus:outline-red-500`
           }`}
           type="number"
           placeholder=" "
@@ -120,13 +120,13 @@ function NumberInput({
           <PlusIcon className={iconStyle} />
         </button>
         {label && (
-          <span className="font-['Noto Sans'] pointer-events-none absolute bottom-[1.925rem] left-1/2 -translate-x-1/2 select-none text-xs font-normal text-neutral-500 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem]">
+          <span className="font-['Noto Sans'] text-neutral-500 pointer-events-none absolute bottom-[1.925rem] left-1/2 -translate-x-1/2 select-none text-xs font-normal transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem]">
             {label}
           </span>
         )}
       </div>
       {isValid === false && (
-        <p className="mt-2 text-xs text-error-600">{error}</p>
+        <p className="mt-2 text-xs text-red-500">{error}</p>
       )}
     </div>
   );
diff --git a/dashboard/components/onboarding-wizard/DatabaseErrorMessage.tsx b/dashboard/components/onboarding-wizard/DatabaseErrorMessage.tsx
index 8939b9b76..297da06f5 100644
--- a/dashboard/components/onboarding-wizard/DatabaseErrorMessage.tsx
+++ b/dashboard/components/onboarding-wizard/DatabaseErrorMessage.tsx
@@ -1,6 +1,6 @@
 function DatabaseErrorMessage() {
   return (
-    <div className="mt-8 rounded-md bg-error-100 px-3 py-1.5 text-sm text-error-600">
+    <div className="mt-8 rounded-md bg-red-50 px-3 py-1.5 text-sm text-red-500">
       We&apos;re sorry, but we were unable to connect to your database using the
       information provided. Please ensure that the information are correct and
       try again. If you continue to experience issues, please{' '}
diff --git a/dashboard/components/onboarding-wizard/DatabasePurplin.tsx b/dashboard/components/onboarding-wizard/DatabasePurplin.tsx
index f81391554..5ff1514a1 100644
--- a/dashboard/components/onboarding-wizard/DatabasePurplin.tsx
+++ b/dashboard/components/onboarding-wizard/DatabasePurplin.tsx
@@ -7,7 +7,7 @@ interface DatabasePurplinProps {
 function DatabasePurplin({ database }: DatabasePurplinProps) {
   return (
     <div className="relative">
-      <div className="-mb-14 -ml-12 flex w-24 items-center justify-center rounded-3xl bg-komiser-200 p-4">
+      <div className="-mb-14 -ml-12 flex w-24 items-center justify-center rounded-3xl bg-cyan-200 p-4">
         <Image
           src={`/assets/img/database/${
             database === 'postgres' ? 'postgresql' : 'sqlite'
diff --git a/dashboard/components/onboarding-wizard/InputFileSelect.tsx b/dashboard/components/onboarding-wizard/InputFileSelect.tsx
index c8f9fd9b3..4d0bba52b 100644
--- a/dashboard/components/onboarding-wizard/InputFileSelect.tsx
+++ b/dashboard/components/onboarding-wizard/InputFileSelect.tsx
@@ -46,7 +46,7 @@ function InputFileSelect({
       </label>
 
       {subLabel && (
-        <span className="-mt-[5px] mb-2 block text-xs leading-4 text-black-400">
+        <span className="-mt-[5px] mb-2 block text-xs leading-4 text-gray-700">
           {subLabel}
         </span>
       )}
@@ -68,9 +68,9 @@ function InputFileSelect({
           placeholder={placeholder}
           className={classNames(
             hasError
-              ? 'outline-error-600 focus:outline-error-700'
-              : 'outline-gray-200 focus:outline-primary',
-            'block w-full rounded border py-4 pl-5 text-sm text-black-900 outline focus:outline-2 '
+              ? 'outline-red-500 focus:outline-red-500'
+              : 'outline-gray-200 focus:outline-darkcyan-500',
+            'block w-full rounded border py-4 pl-5 text-sm text-gray-950 outline focus:outline-2 '
           )}
           onChange={handleInputChange}
         />
@@ -78,14 +78,14 @@ function InputFileSelect({
         {icon && (
           <button
             onClick={iconClick}
-            className="absolute inset-y-0 right-5 flex items-center pl-3 text-komiser-600"
+            className="absolute inset-y-0 right-5 flex items-center pl-3 text-darkcyan-500"
           >
             {icon}
           </button>
         )}
       </div>
       {hasError && errorMessage && (
-        <div className="mt-2 flex items-center text-sm text-error-600">
+        <div className="mt-2 flex items-center text-sm text-red-500">
           <AlertCircleIconFilled className="mr-1 inline-block h-4 w-4" />
           {errorMessage}
         </div>
diff --git a/dashboard/components/onboarding-wizard/LabelledInput.tsx b/dashboard/components/onboarding-wizard/LabelledInput.tsx
index 2e98f107e..629028be6 100644
--- a/dashboard/components/onboarding-wizard/LabelledInput.tsx
+++ b/dashboard/components/onboarding-wizard/LabelledInput.tsx
@@ -34,7 +34,7 @@ function LabelledInput({
       </label>
 
       {subLabel && (
-        <span className="-mt-[5px] mb-2 block text-xs leading-4 text-black-400">
+        <span className="-mt-[5px] mb-2 block text-xs leading-4 text-gray-700">
           {subLabel}
         </span>
       )}
@@ -53,7 +53,7 @@ function LabelledInput({
           disabled={disabled}
           placeholder={placeholder}
           required={required}
-          className={`block w-full rounded py-[14.5px] text-sm text-black-900 outline outline-black-200 focus:outline-2 focus:outline-primary ${
+          className={`block w-full rounded py-[14.5px] text-sm text-gray-950 outline outline-gray-300 focus:outline-2 focus:outline-darkcyan-500 ${
             icon ? 'pl-10' : 'pl-3'
           }`}
           onChange={onChange}
diff --git a/dashboard/components/onboarding-wizard/OnboardingWizardLayout.tsx b/dashboard/components/onboarding-wizard/OnboardingWizardLayout.tsx
index 1b2d9de58..8c949264d 100644
--- a/dashboard/components/onboarding-wizard/OnboardingWizardLayout.tsx
+++ b/dashboard/components/onboarding-wizard/OnboardingWizardLayout.tsx
@@ -47,11 +47,11 @@ function RightSideLayout({
   return (
     <>
       {isCustom ? (
-        <div className={`col-span-5 bg-komiser-100 ${customClasses}`}>
+        <div className={`col-span-5 bg-gray-50 ${customClasses}`}>
           {children}
         </div>
       ) : (
-        <div className="col-span-5 flex items-center justify-center bg-komiser-100 p-7">
+        <div className="col-span-5 flex items-center justify-center bg-gray-50 p-7">
           {children}
         </div>
       )}
diff --git a/dashboard/components/onboarding-wizard/ProgressBar.tsx b/dashboard/components/onboarding-wizard/ProgressBar.tsx
index 108d0f876..26ee3c505 100644
--- a/dashboard/components/onboarding-wizard/ProgressBar.tsx
+++ b/dashboard/components/onboarding-wizard/ProgressBar.tsx
@@ -1,7 +1,7 @@
 function OnboardingWizardProgressBar({ width }: { width: string }) {
   return (
     <div className="sticky top-0 z-10 h-1 w-full bg-gray-100">
-      <div className="h-1 bg-komiser-600" style={{ width }}></div>
+      <div className="h-1 bg-darkcyan-500" style={{ width }}></div>
     </div>
   );
 }
diff --git a/dashboard/components/onboarding-wizard/ProviderContent.tsx b/dashboard/components/onboarding-wizard/ProviderContent.tsx
index 94b18a6db..91bdf6711 100644
--- a/dashboard/components/onboarding-wizard/ProviderContent.tsx
+++ b/dashboard/components/onboarding-wizard/ProviderContent.tsx
@@ -55,7 +55,7 @@ export default function ProviderContent({
               <a
                 target="_blank"
                 href={`https://docs.komiser.io/configuration/cloud-providers/${provider}`}
-                className="text-komiser-600"
+                className="text-darkcyan-500"
                 rel="noreferrer"
               >
                 adding an {providerName} account to Komiser.
diff --git a/dashboard/components/onboarding-wizard/SelectInput.tsx b/dashboard/components/onboarding-wizard/SelectInput.tsx
index 913854a39..d634a5f96 100644
--- a/dashboard/components/onboarding-wizard/SelectInput.tsx
+++ b/dashboard/components/onboarding-wizard/SelectInput.tsx
@@ -38,7 +38,7 @@ function SelectInput({
     <div className="relative">
       <div
         className="pointer-events-none absolute bottom-[1.15rem]
-        right-4 text-komiser-600 transition-all"
+        right-4 text-darkcyan-500 transition-all"
       >
         {icon}
       </div>
@@ -49,11 +49,11 @@ function SelectInput({
       <button
         onClick={toggle}
         className={classNames(
-          'h-[60px] w-full overflow-hidden rounded bg-white text-left outline outline-black-200/50 hover:outline-black-200 focus:outline-primary',
-          { 'outline-2 outline-primary': isOpen }
+          'h-[60px] w-full overflow-hidden rounded bg-white text-left outline outline-gray-300 hover:outline-gray-300 focus:outline-darkcyan-500',
+          { 'outline-2 outline-darkcyan-500': isOpen }
         )}
       >
-        <div className="pointer-events-none flex w-full appearance-none items-center gap-2 rounded bg-white pb-[0.75rem] pl-4 pr-16 pt-[0.75rem] text-sm text-black-900">
+        <div className="pointer-events-none flex w-full appearance-none items-center gap-2 rounded bg-white pb-[0.75rem] pl-4 pr-16 pt-[0.75rem] text-sm text-gray-950">
           {displayValues[index].icon && displayValues[index].icon}
           {displayValues[index].label}
         </div>
@@ -65,7 +65,7 @@ function SelectInput({
             onClick={toggle}
             className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
           ></div>
-          <div className="absolute top-[96px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-black-130 bg-white px-3 py-2 shadow-lg">
+          <div className="absolute top-[96px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white px-3 py-2 shadow-right">
             <div className="flex w-full flex-col gap-1">
               {values.map((item, idx) => {
                 const isActive = value === item;
@@ -73,8 +73,8 @@ function SelectInput({
                   <button
                     key={idx}
                     className={classNames(
-                      'flex items-center rounded px-3 py-2 text-left text-sm text-black-400 hover:bg-black-150',
-                      { 'bg-komiser-150': isActive }
+                      'flex items-center rounded px-3 py-2 text-left text-sm text-gray-700 hover:bg-background-ds',
+                      { 'bg-cyan-100': isActive }
                     )}
                     onClick={() => handleClick(item)}
                   >
diff --git a/dashboard/components/select-checkbox/SelectCheckbox.tsx b/dashboard/components/select-checkbox/SelectCheckbox.tsx
index 1425de4a3..65de4b564 100644
--- a/dashboard/components/select-checkbox/SelectCheckbox.tsx
+++ b/dashboard/components/select-checkbox/SelectCheckbox.tsx
@@ -66,32 +66,32 @@ function SelectCheckbox({
     <div className="relative">
       <div
         className="pointer-events-none absolute bottom-[1.15rem]
-        right-4 text-black-900 transition-all"
+        right-4 text-gray-950 transition-all"
       >
         <ChevronDownIcon width={24} height={24} />
       </div>
       <button
         onClick={toggle}
-        className={`h-[60px] w-full overflow-hidden rounded text-left outline hover:outline-black-200 focus:outline-2 focus:outline-primary ${
-          isOpen ? 'outline-2 outline-primary' : 'outline-black-200/50'
+        className={`h-[60px] w-full overflow-hidden rounded text-left outline hover:outline-gray-300 focus:outline-2 focus:outline-darkcyan-500 ${
+          isOpen ? 'outline-2 outline-darkcyan-500' : 'outline-gray-300'
         }`}
       >
         <div className="absolute right-0 top-1 h-[50px] w-6 bg-gradient-to-r from-transparent via-white to-white"></div>
-        <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-black-300">
+        <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-gray-500">
           {label}
         </span>
-        <div className="pointer-events-none flex w-full appearance-none items-center gap-2 rounded bg-white pb-[0.75rem] pl-4 pr-16 pt-[1.75rem] text-sm text-black-900">
+        <div className="pointer-events-none flex w-full appearance-none items-center gap-2 rounded bg-white pb-[0.75rem] pl-4 pr-16 pt-[1.75rem] text-sm text-gray-950">
           {exclude.length > 0 &&
             exclude.slice(0, 3).map((resource, idx) => (
               <p
                 key={idx}
-                className="whitespace-nowrap rounded bg-black-100 px-3 py-1 text-xs"
+                className="whitespace-nowrap rounded bg-gray-50 px-3 py-1 text-xs"
               >
                 {resource}
               </p>
             ))}
           {exclude.length > 3 && (
-            <p className="rounded-full bg-black-100 px-3 py-1 text-xs">
+            <p className="rounded-full bg-gray-50 px-3 py-1 text-xs">
               +{exclude.length - 3}
             </p>
           )}
@@ -106,7 +106,7 @@ function SelectCheckbox({
             onClick={toggle}
             className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
           ></div>
-          <div className="absolute top-[4.15rem] z-[21] w-full rounded-lg border border-black-100 bg-white shadow-lg">
+          <div className="absolute top-[4.15rem] z-[21] w-full rounded-lg border border-gray-50 bg-white shadow-right">
             <div className="relative m-4 ">
               {!search ? (
                 <svg
@@ -155,13 +155,13 @@ function SelectCheckbox({
                 onChange={e => setSearch(e.target.value)}
                 type="text"
                 placeholder="Search"
-                className="h-10 w-full rounded-md border border-black-200/50 bg-white py-4 pl-10 pr-6 text-sm text-black-900 caret-secondary placeholder:text-black-300 focus:outline-none"
+                className="h-10 w-full rounded-md border border-gray-300 bg-white py-4 pl-10 pr-6 text-sm text-gray-950 caret-darkcyan-700 placeholder:text-gray-500 focus:outline-none"
                 autoFocus
                 maxLength={64}
               />
             </div>
             {error && (
-              <p className="text-sm text-black-400">
+              <p className="text-sm text-gray-700">
                 There was an error fetching the options for: {query}
               </p>
             )}
@@ -178,13 +178,13 @@ function SelectCheckbox({
                     />
                     <label
                       htmlFor="all"
-                      className="w-full text-sm text-black-400"
+                      className="w-full text-sm text-gray-700"
                     >
                       Exclude All
                     </label>
                   </div>
                 )}
-                <hr className="m-4 mb-0 h-px border-t-0 bg-neutral-100 opacity-100 dark:opacity-50" />
+                <hr className="bg-neutral-100 m-4 mb-0 h-px border-t-0 opacity-100 dark:opacity-50" />
                 <div className="scrollbar mb-2 mr-3 mt-2 overflow-auto">
                   <div className="mt-2 flex max-h-[12rem] flex-col gap-3 p-4 pb-4 pl-6 pt-0">
                     {resources.map((resource, idx) => (
@@ -201,20 +201,20 @@ function SelectCheckbox({
                         />
                         <label
                           htmlFor={resource}
-                          className="w-full text-black-400"
+                          className="w-full text-gray-700"
                         >
                           {resource}
                         </label>
                       </div>
                     ))}
                     {resources.length === 0 && (
-                      <p className="text-sm text-black-400">
+                      <p className="text-sm text-gray-700">
                         There are no results for {search}
                       </p>
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col border-t border-black-200/50 p-4">
+                <div className="flex flex-col border-t border-gray-300 p-4">
                   <Button onClick={submit}>Apply</Button>
                 </div>
               </>
diff --git a/dashboard/components/select/Select.tsx b/dashboard/components/select/Select.tsx
index 969a96518..d05ae8d1c 100644
--- a/dashboard/components/select/Select.tsx
+++ b/dashboard/components/select/Select.tsx
@@ -28,22 +28,22 @@ function Select({
     <div className="relative">
       <div
         className="pointer-events-none absolute bottom-[1.15rem]
-        right-4 text-black-900 transition-all"
+        right-4 text-gray-950 transition-all"
       >
         <ChevronDownIcon width={24} height={24} />
       </div>
       <button
         onClick={toggle}
         className={classNames(
-          'h-[60px] w-full overflow-hidden rounded text-left outline outline-black-200/50 hover:outline-black-200 focus:outline-primary',
-          { 'outline-2 outline-primary': isOpen }
+          'h-[60px] w-full overflow-hidden rounded text-left outline outline-gray-300 hover:outline-gray-300 focus:outline-darkcyan-500',
+          { 'outline-2 outline-darkcyan-500': isOpen }
         )}
       >
         <div className="absolute right-0 top-1 h-[50px] w-6"></div>
-        <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-black-300">
+        <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-gray-500">
           {label}
         </span>
-        <div className="pointer-events-none flex w-full appearance-none items-center gap-2 rounded bg-white pb-[0.75rem] pl-4 pr-16 pt-[1.75rem] text-sm text-black-900">
+        <div className="pointer-events-none flex w-full appearance-none items-center gap-2 rounded bg-white pb-[0.75rem] pl-4 pr-16 pt-[1.75rem] text-sm text-gray-950">
           {displayValues[index]}
         </div>
       </button>
@@ -54,7 +54,7 @@ function Select({
             onClick={toggle}
             className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
           ></div>
-          <div className="absolute top-[66px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-black-130 bg-white px-3 py-2 shadow-lg">
+          <div className="absolute top-[66px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white px-3 py-2 shadow-right">
             <div className="flex w-full flex-col gap-1">
               {values.map((item, idx) => {
                 const isActive = value === item;
@@ -62,8 +62,8 @@ function Select({
                   <button
                     key={idx}
                     className={classNames(
-                      'flex items-center justify-between rounded px-3 py-2 text-left text-sm text-black-400 hover:bg-black-150',
-                      { 'bg-komiser-150': isActive }
+                      'flex items-center justify-between rounded px-3 py-2 text-left text-sm text-gray-700 hover:bg-background-ds',
+                      { 'bg-cyan-100': isActive }
                     )}
                     onClick={() => handleChange(item)}
                   >
diff --git a/dashboard/components/sidepanel/Sidepanel.tsx b/dashboard/components/sidepanel/Sidepanel.tsx
index 52bbbbe0d..9086753f4 100644
--- a/dashboard/components/sidepanel/Sidepanel.tsx
+++ b/dashboard/components/sidepanel/Sidepanel.tsx
@@ -29,10 +29,10 @@ function Sidepanel({ isOpen, closeModal, children, noScroll }: SidepanelProps) {
         <>
           <div
             onClick={closeModal}
-            className="fixed inset-0 z-30 hidden animate-fade-in bg-black-900/10 opacity-0 sm:block"
+            className="fixed inset-0 z-30 hidden animate-fade-in bg-gray-950 opacity-0 sm:block"
           ></div>
           <div
-            className={`fixed inset-0 z-30 flex w-full animate-fade-in-up flex-col gap-4 overflow-auto bg-white px-8 pt-4 opacity-0 shadow-2xl sm:bottom-4 sm:left-auto sm:right-4 sm:top-4 sm:w-[38rem] sm:animate-fade-in-left sm:rounded-lg ${
+            className={`fixed inset-0 z-30 flex w-full animate-fade-in-up flex-col gap-4 overflow-auto bg-white px-8 pt-4 opacity-0 shadow-left sm:bottom-4 sm:left-auto sm:right-4 sm:top-4 sm:w-[38rem] sm:animate-fade-in-left sm:rounded-lg ${
               noScroll ? 'overflow-hidden' : 'overflow-auto'
             }`}
           >
diff --git a/dashboard/components/sidepanel/SidepanelHeader.tsx b/dashboard/components/sidepanel/SidepanelHeader.tsx
index 089b406fe..eea94dcd3 100644
--- a/dashboard/components/sidepanel/SidepanelHeader.tsx
+++ b/dashboard/components/sidepanel/SidepanelHeader.tsx
@@ -38,18 +38,18 @@ function SidepanelHeader({
         <div className="flex flex-wrap items-center gap-2 sm:flex-nowrap">
           {cloudProvider && <Avatar avatarName={cloudProvider} size={40} />}
           <div className="flex flex-col gap-0.5">
-            <p className="font-['Noto Sans'] inline-flex w-48 items-center gap-2 truncate text-base font-medium leading-normal text-neutral-900">
+            <p className="font-['Noto Sans'] text-neutral-900 inline-flex w-48 items-center gap-2 truncate text-base font-medium leading-normal">
               {title}
               <a
                 target="_blank"
                 href={href}
                 rel="noreferrer"
-                className="hover:text-primary"
+                className="hover:text-darkcyan-500"
               >
                 <HyperLinkIcon />
               </a>
             </p>
-            <p className="font-['Noto Sans'] text-xs font-normal text-neutral-500">
+            <p className="font-['Noto Sans'] text-neutral-500 text-xs font-normal">
               {subtitle}
             </p>
           </div>
@@ -62,7 +62,7 @@ function SidepanelHeader({
             <ArrowLeftIcon className="h-6 w-6" />
           </button>
           <div className="flex flex-col gap-0.5">
-            <p className="font-['Noto Sans'] text-center text-xl font-semibold leading-loose text-neutral-900">
+            <p className="font-['Noto Sans'] text-neutral-900 text-center text-xl font-semibold leading-loose">
               {title}
             </p>
           </div>
diff --git a/dashboard/components/sidepanel/SidepanelPage.tsx b/dashboard/components/sidepanel/SidepanelPage.tsx
index 124fbe6e3..3fe551318 100644
--- a/dashboard/components/sidepanel/SidepanelPage.tsx
+++ b/dashboard/components/sidepanel/SidepanelPage.tsx
@@ -18,7 +18,7 @@ function SidepanelPage({
       {page === param && (
         <div
           className={
-            container ? 'rounded-lg bg-black-100 p-6' : ' h-full overflow-auto'
+            container ? 'rounded-lg bg-gray-50 p-6' : ' h-full overflow-auto'
           }
         >
           <div className="flex flex-col gap-6">{children}</div>
diff --git a/dashboard/components/sidepanel/SidepanelTabs.tsx b/dashboard/components/sidepanel/SidepanelTabs.tsx
index 5b40e4d9d..01e9b5d28 100644
--- a/dashboard/components/sidepanel/SidepanelTabs.tsx
+++ b/dashboard/components/sidepanel/SidepanelTabs.tsx
@@ -8,7 +8,7 @@ export type SidepanelTabsProps = {
 
 function SidepanelTabs({ goTo, page, tabs }: SidepanelTabsProps) {
   return (
-    <div className="border-b-2 border-black-150 text-center text-sm font-medium text-black-300">
+    <div className="border-b-2 border-gray-200 text-center text-sm font-medium text-gray-500">
       <ul className="-mb-[2px] flex justify-between sm:justify-start">
         {tabs.map((tab, idx) => (
           <li key={idx} className="mr-2">
@@ -17,8 +17,8 @@ function SidepanelTabs({ goTo, page, tabs }: SidepanelTabsProps) {
               className={`inline-block cursor-pointer select-none rounded-t-lg border-b-2 px-2 py-4 sm:p-4 
                      ${
                        page === tab.toLowerCase()
-                         ? 'border-komiser-600 text-komiser-600 hover:text-komiser-600'
-                         : 'border-transparent hover:text-komiser-700'
+                         ? 'border-darkcyan-500 text-darkcyan-500 hover:text-darkcyan-500'
+                         : 'border-transparent hover:text-darkcyan-700'
                      }`}
             >
               {capitalizeString(tab)} {/* capitalize first letter */}
diff --git a/dashboard/components/skeleton/SkeletonFilters.tsx b/dashboard/components/skeleton/SkeletonFilters.tsx
index a97721ef5..ae1b260e3 100644
--- a/dashboard/components/skeleton/SkeletonFilters.tsx
+++ b/dashboard/components/skeleton/SkeletonFilters.tsx
@@ -1,10 +1,10 @@
 function SkeletonFilters() {
   return (
     <div className="mb-6 flex h-14 flex-wrap items-center gap-x-4 gap-y-2 rounded-lg bg-white px-6 py-2">
-      <div className="text-sm text-black-400">Filters</div>
-      <div className="flex h-10 w-[20%] animate-pulse items-center gap-2 rounded bg-komiser-100 px-3 py-2">
-        <div className="h-5 w-5 flex-shrink-0 rounded-full bg-komiser-200/50"></div>
-        <div className="h-5 w-full rounded bg-komiser-200/50"></div>
+      <div className="text-sm text-gray-700">Filters</div>
+      <div className="flex h-10 w-[20%] animate-pulse items-center gap-2 rounded bg-gray-50 px-3 py-2">
+        <div className="h-5 w-5 flex-shrink-0 rounded-full bg-cyan-200"></div>
+        <div className="h-5 w-full rounded bg-cyan-200"></div>
       </div>
     </div>
   );
diff --git a/dashboard/components/skeleton/SkeletonInventory.tsx b/dashboard/components/skeleton/SkeletonInventory.tsx
index e6f8a0bfd..2074afb54 100644
--- a/dashboard/components/skeleton/SkeletonInventory.tsx
+++ b/dashboard/components/skeleton/SkeletonInventory.tsx
@@ -9,13 +9,13 @@ function SkeletonInventory() {
           className="flex h-[57px] items-center border-b bg-white px-6 text-sm"
         >
           <div className="flex w-full items-center gap-6">
-            <div className="h-6 w-6 flex-shrink-0 rounded-full bg-komiser-200/50"></div>
-            <div className="h-4 w-[5%] rounded-lg bg-komiser-200/50"></div>
-            <div className="h-4 w-[20%] rounded-lg bg-komiser-200/50"></div>
-            <div className="h-4 w-[10%] rounded-lg bg-komiser-200/50"></div>
-            <div className="h-4 w-[30%] rounded-lg bg-komiser-200/50"></div>
-            <div className="h-4 w-[15%] rounded-lg bg-komiser-200/50"></div>
-            <div className="h-4 w-[5%] rounded-lg bg-komiser-200/50"></div>
+            <div className="h-6 w-6 flex-shrink-0 rounded-full bg-cyan-200"></div>
+            <div className="h-4 w-[5%] rounded-lg bg-cyan-200"></div>
+            <div className="h-4 w-[20%] rounded-lg bg-cyan-200"></div>
+            <div className="h-4 w-[10%] rounded-lg bg-cyan-200"></div>
+            <div className="h-4 w-[30%] rounded-lg bg-cyan-200"></div>
+            <div className="h-4 w-[15%] rounded-lg bg-cyan-200"></div>
+            <div className="h-4 w-[5%] rounded-lg bg-cyan-200"></div>
           </div>
         </div>
       ))}
diff --git a/dashboard/components/skeleton/SkeletonStats.tsx b/dashboard/components/skeleton/SkeletonStats.tsx
index 0df8609e3..a4b4db7c0 100644
--- a/dashboard/components/skeleton/SkeletonStats.tsx
+++ b/dashboard/components/skeleton/SkeletonStats.tsx
@@ -17,10 +17,10 @@ function SkeletonStats({ NumOfCards = 3 }) {
           className="flex h-[7.5rem] animate-pulse items-center rounded-lg bg-white px-6 text-sm"
         >
           <div className="flex w-full gap-6">
-            <div className="h-10 w-10 flex-shrink-0 rounded-xl bg-komiser-200/50"></div>
+            <div className="h-10 w-10 flex-shrink-0 rounded-xl bg-cyan-200"></div>
             <div className="flex w-full flex-col gap-3">
-              <div className="h-4 w-[36%] rounded-lg bg-komiser-200/50"></div>
-              <div className="h-4 w-[86%] rounded-lg bg-komiser-200/50"></div>
+              <div className="h-4 w-[36%] rounded-lg bg-cyan-200"></div>
+              <div className="h-4 w-[86%] rounded-lg bg-cyan-200"></div>
             </div>
           </div>
         </div>
diff --git a/dashboard/components/template/Template.tsx b/dashboard/components/template/Template.tsx
index aa6a64604..aa511df10 100644
--- a/dashboard/components/template/Template.tsx
+++ b/dashboard/components/template/Template.tsx
@@ -4,7 +4,7 @@ export type TemplateProps = {
 
 function Template({ sampleTextProp }: TemplateProps) {
   return (
-    <div className="rounded-lg bg-primary p-6 text-sm text-white">
+    <div className="rounded-lg bg-darkcyan-500 p-6 text-sm text-white">
       {sampleTextProp}
     </div>
   );
diff --git a/dashboard/components/toast/Toast.tsx b/dashboard/components/toast/Toast.tsx
index 4a4ccc702..1e4fca092 100644
--- a/dashboard/components/toast/Toast.tsx
+++ b/dashboard/components/toast/Toast.tsx
@@ -19,10 +19,10 @@ function Toast({ hasError, title, message, dismissToast }: ToastProp) {
     <>
       <div
         className={classNames(
-          'fixed bottom-4 left-4 right-4 z-40 flex max-w-2xl animate-fade-in-up items-center justify-between overflow-hidden rounded-lg px-6 py-4 text-black-900 opacity-0 shadow-2xl sm:left-8',
+          'fixed bottom-4 left-4 right-4 z-40 flex max-w-2xl animate-fade-in-up items-center justify-between overflow-hidden rounded-lg px-6 py-4 text-gray-950 opacity-0 shadow-right sm:left-8',
           {
-            'bg-error-100': hasError,
-            'bg-success-100': !hasError
+            'bg-red-50': hasError,
+            'bg-green-100': !hasError
           }
         )}
       >
@@ -30,16 +30,16 @@ function Toast({ hasError, title, message, dismissToast }: ToastProp) {
           className={classNames(
             'absolute bottom-0 left-0 h-1 animate-width-to-fit',
             {
-              'bg-error-600/60': hasError,
-              'bg-success-600/60': !hasError
+              'bg-red-50': hasError,
+              'bg-green-500': !hasError
             }
           )}
         ></div>
         <div className="flex items-start">
           <div
             className={classNames({
-              'mt-4 text-error-600 ': hasError,
-              'mt-4 text-success-600': !hasError
+              'mt-4 text-red-500 ': hasError,
+              'mt-4 text-green-500': !hasError
             })}
           >
             {hasError ? (
@@ -51,7 +51,7 @@ function Toast({ hasError, title, message, dismissToast }: ToastProp) {
           <div className="p-3">
             <p className="pb-2 text-sm font-medium">{title}</p>
             <p
-              className="text-sm text-black-900/60 "
+              className="text-sm text-gray-950 "
               dangerouslySetInnerHTML={{ __html: message }}
             />
           </div>
diff --git a/dashboard/components/tooltip/Tooltip.tsx b/dashboard/components/tooltip/Tooltip.tsx
index 7fdec818a..eb9c1035e 100644
--- a/dashboard/components/tooltip/Tooltip.tsx
+++ b/dashboard/components/tooltip/Tooltip.tsx
@@ -20,7 +20,7 @@ function Tooltip({
     <div
       role="tooltip"
       className={classNames(
-        'absolute z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
+        'absolute z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-gray-950 px-4 py-2 text-xs font-medium text-gray-300 opacity-0 peer-hover:flex',
         { 'top-0': top === 'xs' && !bottom },
         { 'top-[3rem]': top === 'sm' && !bottom },
         { 'top-24': top === 'md' && !bottom },
diff --git a/dashboard/components/upload/Upload.tsx b/dashboard/components/upload/Upload.tsx
index 0fcd76d72..f6ff28e66 100644
--- a/dashboard/components/upload/Upload.tsx
+++ b/dashboard/components/upload/Upload.tsx
@@ -79,7 +79,7 @@ function Upload({
 }: UploadProps) {
   const defaultChildClassName =
     fileOrFiles === null
-      ? `grow bg-white cursor-pointer rounded border-2 border-dashed border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100 w-full`
+      ? `grow bg-white cursor-pointer rounded border-2 border-dashed border-gray-200 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-gray-50 w-full`
       : `grow bg-white min-h-full rounded border-2 border-[#B6EAEA] text-center text-xs transition w-full`;
 
   return (
@@ -145,7 +145,9 @@ function Upload({
             </svg>
             <p>
               Drag and drop or{' '}
-              <span className="cursor-pointer text-primary">choose a file</span>
+              <span className="cursor-pointer text-darkcyan-500">
+                choose a file
+              </span>
             </p>
           </div>
         )}
@@ -198,7 +200,7 @@ function Upload({
                     </svg>
                     <div className="flex-1 text-left">
                       <p>{file.name}</p>
-                      <p className="text-black-400">
+                      <p className="text-gray-700">
                         {(file.size / (1024 * 1024)).toFixed(2)}
                         MB
                       </p>
@@ -280,7 +282,7 @@ function Upload({
                   </svg>
                   <div className="flex-1 text-left">
                     <p>{(fileOrFiles as File).name}</p>
-                    <p className="text-black-400">
+                    <p className="text-gray-700">
                       {((fileOrFiles as File).size / (1024 * 1024)).toFixed(2)}
                       MB
                     </p>
diff --git a/dashboard/pages/cloud-accounts.tsx b/dashboard/pages/cloud-accounts.tsx
index 79be7073b..7164ccdb9 100644
--- a/dashboard/pages/cloud-accounts.tsx
+++ b/dashboard/pages/cloud-accounts.tsx
@@ -126,7 +126,7 @@ function CloudAccounts() {
 
       {/* Delete Modal */}
       <Modal isOpen={isDeleteModalOpen} closeModal={() => closeRemoveModal()}>
-        <div className="flex max-w-xl flex-col gap-y-6 p-8 text-black-400">
+        <div className="flex max-w-xl flex-col gap-y-6 p-8 text-gray-700">
           {cloudAccountItem && (
             <CloudAccountDeleteContents
               cloudAccount={cloudAccountItem}
diff --git a/dashboard/pages/onboarding/choose-database.tsx b/dashboard/pages/onboarding/choose-database.tsx
index b6f5ebb54..3976a3767 100644
--- a/dashboard/pages/onboarding/choose-database.tsx
+++ b/dashboard/pages/onboarding/choose-database.tsx
@@ -33,8 +33,8 @@ function DatabaseLeftItem({
       onClick={onClick}
       className={`flex cursor-pointer flex-col items-center justify-center rounded-lg border-[1.5px] p-6 ${
         selected === value
-          ? 'border-komiser-600'
-          : 'border-gray-200 hover:border-komiser-400'
+          ? 'border-darkcyan-500'
+          : 'border-gray-200 hover:border-cyan-400'
       }`}
     >
       <Image
@@ -62,7 +62,7 @@ function DatabaseRightItem({
       onClick={onClick}
       key={value}
       className={`flex w-32 items-center justify-center rounded-3xl p-6 ${
-        selected === value ? 'bg-komiser-200' : 'bg-white'
+        selected === value ? 'bg-cyan-200' : 'bg-white'
       }`}
     >
       <Image
diff --git a/dashboard/pages/onboarding/cloud-accounts/index.tsx b/dashboard/pages/onboarding/cloud-accounts/index.tsx
index 218598b4b..476eb9d20 100644
--- a/dashboard/pages/onboarding/cloud-accounts/index.tsx
+++ b/dashboard/pages/onboarding/cloud-accounts/index.tsx
@@ -64,7 +64,7 @@ export default function CloudAccounts() {
           <div className="mb-4 space-y-4">
             <Link
               href={'/onboarding/choose-cloud/'}
-              className="flex w-full items-center rounded border-[1.5px] border-primary bg-transparent p-6 text-primary hover:bg-komiser-130"
+              className="flex w-full items-center rounded border-[1.5px] border-darkcyan-500 bg-transparent p-6 text-darkcyan-500 hover:bg-darkcyan-100"
             >
               <PlusIcon className="my-4 ml-2 mr-6 h-6 w-6" />
               Add cloud account
@@ -72,24 +72,24 @@ export default function CloudAccounts() {
             {cloudAccounts.map(account => (
               <div
                 key={account.id}
-                className="flex items-center justify-between rounded-lg border border-black-200 p-6"
+                className="flex items-center justify-between rounded-lg border border-gray-300 p-6"
               >
                 <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
                   <Avatar avatarName={account.provider} size={40} />
                   <div className="flex flex-col gap-1">
                     <div className="flex max-w-[14rem] items-center gap-1">
-                      <p className="truncate font-medium text-black-900">
+                      <p className="truncate font-medium text-gray-950">
                         {account.name}
                       </p>
                     </div>
-                    <p className="flex items-center gap-2 text-xs text-black-300">
+                    <p className="flex items-center gap-2 text-xs text-gray-500">
                       {platform.getLabel(account.provider)}
                     </p>
                   </div>
                 </div>
                 <div className="flex gap-5">
                   <button
-                    className="hidden items-center gap-2 transition-colors hover:text-primary md:flex"
+                    className="hidden items-center gap-2 transition-colors hover:text-darkcyan-500 md:flex"
                     onClick={() => handleDelete(account)}
                   >
                     <DeleteIcon className="h-4 w-4" />
@@ -98,7 +98,7 @@ export default function CloudAccounts() {
               </div>
             ))}
           </div>
-          <div className="fixed bottom-0 -mx-20 flex w-[calc(100%*6/11)] justify-end border-t border-black-200 bg-white px-20 py-4">
+          <div className="fixed bottom-0 -mx-20 flex w-[calc(100%*6/11)] justify-end border-t border-gray-300 bg-white px-20 py-4">
             <Button onClick={() => router.push('/onboarding/choose-database')}>
               Next
             </Button>
@@ -112,68 +112,68 @@ export default function CloudAccounts() {
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-300"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-300"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
 
             {/* Row 2 */}
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200">
-              <div className="relative bottom-3 left-3 h-full w-full scale-110 overflow-clip rounded-lg shadow-xl">
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200">
+              <div className="relative bottom-3 left-3 h-full w-full scale-110 overflow-clip rounded-lg shadow-right">
                 <Avatar avatarName="aws" />
               </div>
             </div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
 
             {/* Row 3 */}
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200">
-              <div className="relative h-full w-full overflow-clip rounded-lg shadow-xl">
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200">
+              <div className="relative h-full w-full overflow-clip rounded-lg shadow-right">
                 <Avatar avatarName="civo" />
               </div>
             </div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-400"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-400"></div>
 
             {/* Row 4 */}
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-400">
-              <div className="relative h-full w-full overflow-clip rounded-lg bg-white shadow-xl">
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-400">
+              <div className="relative h-full w-full overflow-clip rounded-lg bg-white shadow-right">
                 <Avatar avatarName="gcp" />
               </div>
             </div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
 
             {/* Row 5 */}
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-400"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200">
-              <div className="relative left-3 top-3  h-full w-full overflow-clip rounded-lg bg-black-800 shadow-xl">
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-400"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200">
+              <div className="relative left-3 top-3  h-full w-full overflow-clip rounded-lg bg-gray-950 shadow-right">
                 <Avatar avatarName="azure" />
               </div>
             </div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
 
             {/* Row 6 */}
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-400"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-400"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
 
@@ -181,7 +181,7 @@ export default function CloudAccounts() {
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
-            <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
+            <div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
@@ -190,7 +190,7 @@ export default function CloudAccounts() {
       </OnboardingWizardLayout>
 
       <Modal isOpen={isDeleteModalOpen} closeModal={() => closeRemoveModal()}>
-        <div className="flex max-w-xl flex-col gap-y-6 p-8 text-black-400">
+        <div className="flex max-w-xl flex-col gap-y-6 p-8 text-gray-700">
           {cloudAccountItem && (
             <CloudAccountDeleteContents
               cloudAccount={cloudAccountItem}
diff --git a/dashboard/pages/onboarding/complete.tsx b/dashboard/pages/onboarding/complete.tsx
index 3f7f3355c..1b5b4d3d0 100644
--- a/dashboard/pages/onboarding/complete.tsx
+++ b/dashboard/pages/onboarding/complete.tsx
@@ -28,7 +28,7 @@ export default function OnboardingComplete() {
               height={0}
               className="mb-8 h-56 w-56"
             />
-            <h2 className="mb-3 text-2xl font-semibold leading-8 text-black-900">
+            <h2 className="mb-3 text-2xl font-semibold leading-8 text-gray-950">
               Your data is being synced
             </h2>
             <div className="mb-10 font-normal">
diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
index a90bf1875..236ac5349 100644
--- a/dashboard/tailwind.config.js
+++ b/dashboard/tailwind.config.js
@@ -6,51 +6,132 @@ module.exports = {
     './components/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
-    extend: {
-      colors: {
-        primary: '#008484',
-        secondary: '#065555',
-        komiser: {
-          100: '#F5FDFD',
-          120: '#e5f8f8',
-          130: '#E2F6F6',
-          150: '#DFF5F5',
-          200: '#CCF2F2',
-          300: '#99E5E5',
-          400: '#66D9D9',
-          500: '#33CCCC',
-          600: '#008484',
-          700: '#065555'
-        },
-        info: {
-          600: '#387BEB'
-        },
-        warning: {
-          100: '#FFF5DA',
-          600: '#EDC16B'
-        },
-        error: {
-          100: '#FFE8E8',
-          600: '#DE5E5E',
-          700: '#ae4242',
-          900: '#362033'
-        },
-        success: {
-          100: '#E1FFE3',
-          600: '#56BA5B'
-        },
-        black: {
-          100: '#F4F9F9',
-          130: '#F4F2F7',
-          150: '#F5F5F5',
-          170: '#EDEBEE',
-          200: '#CFD7D7',
-          300: '#95A3A3',
-          400: '#697372',
-          800: '#0C1717',
-          900: '#070011'
-        }
+    colors: {
+      inherit: 'inherit',
+      transparent: 'transparent',
+      current: 'currentColor',
+      black: '#000000',
+      white: '#FFFFFF',
+      cyan: {
+        50: '#ECFAFA',
+        100: '#DFF5F5',
+        200: '#CCF2F2',
+        300: '#99E5E5',
+        400: '#66D9D9',
+        500: '#33CCCC',
+        600: '#2AA7A7',
+        700: '#208282',
+        800: '#175D5D',
+        900: '#0E3838',
+        950: '#051313'
+      },
+      darkcyan: {
+        50: '#EDFAFA',
+        100: '#E2F6F6',
+        200: '#B6EAEA',
+        300: '#63CBCB',
+        400: '#2EA8A8',
+        500: '#008484',
+        600: '#006D6E',
+        700: '#065555',
+        800: '#004344',
+        900: '#002E2F',
+        950: '#00191A'
+      },
+      gray: {
+        50: '#F4F9F9',
+        100: '#F4F2F7',
+        200: '#EDEBEE',
+        300: '#CFD7D7',
+        400: '#B3BDBD',
+        500: '#95A3A3',
+        600: '#7F8B8B',
+        700: '#697372',
+        800: '#515959',
+        900: '#3A4040',
+        950: '#0C1717'
       },
+      red: {
+        50: '#FFE8E8',
+        100: '#F7D1D1',
+        200: '#F2BABA',
+        300: '#EDA3A3',
+        400: '#E37575',
+        500: '#DE5E5E',
+        600: '#BF4F4F',
+        700: '#9D4040',
+        800: '#7B3131',
+        900: '#592222',
+        950: '#371313'
+      },
+      green: {
+        50: '#EEFDEE',
+        100: '#E1FFE3',
+        200: '#CAF5CA',
+        300: '#A3E7A6',
+        400: '#81CF84',
+        500: '#56BA5B',
+        600: '#489E4E',
+        700: '#3B8240',
+        800: '#2E6632',
+        900: '#214A24',
+        950: '#142E16'
+      },
+      orange: {
+        50: '#FFF8EB',
+        100: '#FFF5DA',
+        200: '#FCE0AC',
+        300: '#F6C879',
+        400: '#ECAD4E',
+        500: '#ED8F2B',
+        600: '#D5721F',
+        700: '#A85924',
+        800: '#844B2A',
+        900: '#664029',
+        950: '#422D24'
+      },
+      blue: {
+        50: '#E8EFFD',
+        100: '#D4E4FF',
+        200: '#ACC7F7',
+        300: '#72A1F1',
+        400: '#558EEE',
+        500: '#387BEB',
+        600: '#2F69C6',
+        700: '#2656A3',
+        800: '#1D4380',
+        900: '#14305D',
+        950: '#0B1D3A'
+      },
+      purple: {
+        50: '#F7F6FE',
+        100: '#EDE8FC',
+        200: '#E0DBFB',
+        300: '#C9BDF4',
+        400: '#AF99EA',
+        500: '#9470E0',
+        600: '#8157C5',
+        700: '#714DA6',
+        800: '#5F4585',
+        900: '#4B3966',
+        950: '#372B4A'
+      },
+      background: {
+        DEFAULT: '#F2FFFF',
+        base: '#F2F7F8',
+        disabled: '#EFEDF1',
+        ds: '#F5F5F5' /* ds => design-system */
+      },
+      komiser: {
+        dark: '#009999'
+      }
+    },
+    boxShadow: {
+      right: '2px 4px 8px 0px rgba(105, 115, 114, 0.16)',
+      left: '-2px 4px 8px 0px rgba(105, 115, 114, 0.16)',
+      none: '0 0 #0000'
+    },
+    extend: {
       fontFamily: {
         sans: [
           'Noto Sans',