From 1f06b67c66301b48be4a331a3b9314e77b10ec56 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 17 Dec 2025 16:28:22 +0530
Subject: [PATCH] regression: replace old css vars with the new design system
 tokens (#8354)

* chore: replace old css vars

* fix: replace shadow and primary colors

* chore: remove hardcoded colors
---
 .../(dashboard)/sidebar-help-section.tsx      |  2 +-
 apps/admin/styles/globals.css                 | 12 ++--
 .../components/account/auth-forms/email.tsx   |  2 +-
 .../account/auth-forms/password.tsx           | 10 +--
 .../account/auth-forms/unique-code.tsx        |  2 +-
 .../core/components/common/powered-by.tsx     |  2 +-
 .../issues/filters/helpers/dropdown.tsx       |  2 +-
 .../components/issues/navbar/user-avatar.tsx  |  2 +-
 apps/space/styles/globals.css                 | 10 +--
 .../settings/account/security/page.tsx        | 12 ++--
 apps/web/app/(all)/profile/security/page.tsx  | 12 ++--
 apps/web/ce/components/issues/header.tsx      |  2 +-
 .../ce/components/onboarding/tour/root.tsx    |  2 +-
 .../ce/components/pages/editor/ai/menu.tsx    |  2 +-
 .../editor/embed/issue-embed-upgrade-card.tsx |  2 +-
 .../components/account/auth-forms/email.tsx   |  2 +-
 .../account/auth-forms/password.tsx           | 10 +--
 .../account/auth-forms/reset-password.tsx     |  8 +--
 .../account/auth-forms/set-password.tsx       |  8 +--
 .../account/auth-forms/unique-code.tsx        |  2 +-
 .../base-layouts/layout-switcher.tsx          |  2 +-
 .../components/core/content-overflow-HOC.tsx  |  2 +-
 .../components/core/image-picker-popover.tsx  |  2 +-
 .../cycles/list/cycle-list-item-action.tsx    |  2 +-
 .../cycles/transfer-issues-modal.tsx          |  2 +-
 .../dropdowns/cycle/cycle-options.tsx         |  2 +-
 apps/web/core/components/dropdowns/date.tsx   |  2 +-
 .../core/components/dropdowns/estimate.tsx    |  2 +-
 .../dropdowns/intake-state/base.tsx           |  2 +-
 .../dropdowns/member/member-options.tsx       |  2 +-
 .../dropdowns/module/module-options.tsx       |  2 +-
 .../core/components/dropdowns/priority.tsx    |  2 +-
 .../components/dropdowns/project/base.tsx     |  2 +-
 .../core/components/dropdowns/state/base.tsx  |  2 +-
 .../editor/embeds/mentions/user.tsx           |  2 +-
 .../editor/sticky-editor/color-palette.tsx    |  2 +-
 .../icons/attachment/setting-icon.tsx         |  2 +-
 .../label/select/label-select.tsx             |  2 +-
 .../calendar/dropdowns/months-dropdown.tsx    |  2 +-
 .../calendar/dropdowns/options-dropdown.tsx   |  2 +-
 .../issue-layouts/calendar/issue-block.tsx    |  2 +-
 .../issues/issue-layouts/list/list-group.tsx  |  2 +-
 .../issue-layouts/quick-add/form/calendar.tsx |  2 +-
 .../issue-layouts/quick-add/form/gantt.tsx    |  2 +-
 .../issue-layouts/quick-add/form/kanban.tsx   |  2 +-
 .../issue-layouts/quick-add/form/list.tsx     |  2 +-
 .../quick-add/form/spreadsheet.tsx            |  2 +-
 .../issue-layouts/spreadsheet/issue-row.tsx   |  2 +-
 .../components/issues/issue-modal/form.tsx    |  2 +-
 .../components/issues/issue-update-status.tsx |  2 +-
 .../issues/layout-quick-actions.tsx           |  4 +-
 .../components/issues/preview-card/root.tsx   |  2 +-
 .../core/components/issues/select/base.tsx    |  2 +-
 .../labels/create-update-label-inline.tsx     |  2 +-
 .../components/onboarding/invite-members.tsx  |  6 +-
 .../components/onboarding/profile-setup.tsx   | 10 +--
 .../onboarding/steps/profile/root.tsx         |  2 +-
 .../components/onboarding/steps/team/root.tsx |  6 +-
 .../onboarding/switch-account-dropdown.tsx    |  2 +-
 .../pages/editor/content-limit-banner.tsx     | 11 +--
 .../pages/editor/summary/content-browser.tsx  |  2 +-
 .../pages/editor/toolbar/color-dropdown.tsx   |  2 +-
 .../components/power-k/ui/modal/header.tsx    |  2 +-
 .../profile/overview/state-distribution.tsx   |  3 +-
 apps/web/core/components/profile/sidebar.tsx  |  2 +-
 .../workspace/sidebar/workspace-menu-root.tsx |  2 +-
 apps/web/styles/emoji.css                     | 11 ++-
 apps/web/styles/globals.css                   | 68 ++-----------------
 packages/constants/src/graph.ts               |  4 +-
 .../editors/document/page-renderer.tsx        |  2 +-
 .../src/core/components/menus/block-menu.tsx  |  2 +-
 .../menus/bubble-menu/color-selector.tsx      |  2 +-
 .../menus/bubble-menu/link-selector.tsx       |  2 +-
 .../menus/bubble-menu/node-selector.tsx       |  2 +-
 .../components/menus/bubble-menu/root.tsx     |  2 +-
 .../extensions/callout/color-selector.tsx     |  2 +-
 .../emoji/components/emojis-list.tsx          |  2 +-
 .../mentions/mentions-list-dropdown.tsx       |  2 +-
 .../slash-commands/command-items-list.tsx     |  2 +-
 .../slash-commands/command-menu.tsx           |  2 +-
 .../drag-handles/column/drag-handle.tsx       |  2 +-
 .../plugins/drag-handles/row/drag-handle.tsx  |  2 +-
 .../src/core/extensions/table/table/icons.ts  | 14 ++--
 packages/editor/src/core/plugins/highlight.ts |  2 +-
 packages/editor/src/styles/drag-drop.css      |  4 +-
 packages/editor/src/styles/editor.css         |  2 +-
 packages/propel/src/card/helper.tsx           |  2 +-
 packages/propel/src/charts/bar-chart/root.tsx |  2 +-
 packages/propel/src/charts/pie-chart/root.tsx |  2 +-
 .../design-system-philosophy.stories.tsx      |  2 +-
 .../src/emoji-icon-picker/emoji/emoji.tsx     |  2 +-
 .../src/emoji-icon-picker/icon/icon-root.tsx  |  4 +-
 .../propel/src/icons/calendar-after-icon.tsx  |  2 +-
 .../propel/src/icons/calendar-before-icon.tsx |  6 +-
 packages/propel/src/icons/github-icon.tsx     |  2 +-
 packages/propel/src/icons/gitlab-icon.tsx     |  2 +-
 packages/propel/src/menu/menu.stories.tsx     |  4 +-
 packages/propel/src/menu/menu.tsx             |  2 +-
 .../propel/src/spinners/circular-spinner.tsx  |  2 +-
 packages/tailwind-config/AGENTS.md            |  2 +-
 packages/tailwind-config/index.css            | 10 +--
 packages/ui/src/auth-form/auth-input.tsx      |  2 +-
 packages/ui/src/card/helper.tsx               |  2 +-
 packages/ui/src/drag-handle.tsx               |  4 +-
 packages/ui/src/dropdown/multi-select.tsx     |  2 +-
 packages/ui/src/dropdown/single-select.tsx    |  2 +-
 packages/ui/src/form-fields/checkbox.tsx      |  2 +-
 .../ui/src/form-fields/input-color-picker.tsx |  2 +-
 packages/ui/src/form-fields/textarea.tsx      |  2 +-
 packages/ui/src/popovers/popover-menu.tsx     |  2 +-
 packages/ui/src/spinners/circular-spinner.tsx |  2 +-
 111 files changed, 180 insertions(+), 245 deletions(-)

diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
index 8d0b87ac9..3d8d0b77a 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
@@ -98,7 +98,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
           <div
             className={`absolute bottom-2 min-w-[10rem] z-[15] ${
               isSidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-subtle-1 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-custom-shadow-xs`}
+            } divide-y divide-subtle-1 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-raised-100`}
             ref={helpOptionsRef}
           >
             <div className="space-y-1 pb-2">
diff --git a/apps/admin/styles/globals.css b/apps/admin/styles/globals.css
index 12417088e..7f7f2483a 100644
--- a/apps/admin/styles/globals.css
+++ b/apps/admin/styles/globals.css
@@ -11,12 +11,12 @@
 /* progress bar */
 .progress-bar {
   fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
+  color: var(--background-color-surface-1);
 }
 
 /* Progress Bar Styles */
 :root {
-  --bprogress-color: rgb(var(--color-primary-100)) !important;
+  --bprogress-color: var(--background-color-accent-primary);
   --bprogress-height: 2.5px !important;
 }
 
@@ -27,8 +27,8 @@
 .bprogress .bar {
   background: linear-gradient(
     90deg,
-    rgba(var(--color-primary-100), 0.8) 0%,
-    rgba(var(--color-primary-100), 1) 100%
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
   ) !important;
   will-change: width, opacity;
 }
@@ -36,7 +36,7 @@
 .bprogress .peg {
   display: block;
   box-shadow:
-    0 0 8px rgba(var(--color-primary-100), 0.6),
-    0 0 4px rgba(var(--color-primary-100), 0.4) !important;
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
   will-change: transform, opacity;
 }
diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/core/components/account/auth-forms/email.tsx
index f407219b0..46ecea0f0 100644
--- a/apps/space/core/components/account/auth-forms/email.tsx
+++ b/apps/space/core/components/account/auth-forms/email.tsx
@@ -83,7 +83,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
               }}
               tabIndex={-1}
             >
-              <XCircle className="h-10 w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-11" />
+              <XCircle className="h-10 w-11 px-3 stroke-placeholder hover:cursor-pointer text-11" />
             </button>
           )}
         </div>
diff --git a/apps/space/core/components/account/auth-forms/password.tsx b/apps/space/core/components/account/auth-forms/password.tsx
index cf622f92f..7d265cee0 100644
--- a/apps/space/core/components/account/auth-forms/password.tsx
+++ b/apps/space/core/components/account/auth-forms/password.tsx
@@ -132,7 +132,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           />
           {passwordFormData.email.length > 0 && (
             <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={handleEmailClear}
             />
           )}
@@ -158,12 +158,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           />
           {showPassword?.password ? (
             <EyeOff
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
             />
           ) : (
             <Eye
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
             />
           )}
@@ -189,12 +189,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             />
             {showPassword?.retypePassword ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             )}
diff --git a/apps/space/core/components/account/auth-forms/unique-code.tsx b/apps/space/core/components/account/auth-forms/unique-code.tsx
index fd347bfd9..7e7543e56 100644
--- a/apps/space/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/core/components/account/auth-forms/unique-code.tsx
@@ -96,7 +96,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           />
           {uniqueCodeFormData.email.length > 0 && (
             <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
               onClick={handleEmailClear}
             />
           )}
diff --git a/apps/space/core/components/common/powered-by.tsx b/apps/space/core/components/common/powered-by.tsx
index e43c27ca6..2edac3781 100644
--- a/apps/space/core/components/common/powered-by.tsx
+++ b/apps/space/core/components/common/powered-by.tsx
@@ -15,7 +15,7 @@ export function PoweredBy(props: TPoweredBy) {
   return (
     <a
       href={WEBSITE_URL}
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-custom-shadow-2xs"
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-raised-100"
       target="_blank"
       rel="noreferrer noopener"
     >
diff --git a/apps/space/core/components/issues/filters/helpers/dropdown.tsx b/apps/space/core/components/issues/filters/helpers/dropdown.tsx
index 032de9f1a..b4987a9df 100644
--- a/apps/space/core/components/issues/filters/helpers/dropdown.tsx
+++ b/apps/space/core/components/issues/filters/helpers/dropdown.tsx
@@ -46,7 +46,7 @@ export function FiltersDropdown(props: Props) {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
diff --git a/apps/space/core/components/issues/navbar/user-avatar.tsx b/apps/space/core/components/issues/navbar/user-avatar.tsx
index c2b827695..7cbdc6a88 100644
--- a/apps/space/core/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/core/components/issues/navbar/user-avatar.tsx
@@ -87,7 +87,7 @@ export const UserAvatar = observer(function UserAvatar() {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg p-1"
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200 p-1"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index d179aec6b..ba7f052d1 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -52,7 +52,7 @@
 
 /* Progress Bar Styles */
 :root {
-  --bprogress-color: rgb(var(--color-primary-100)) !important;
+  --bprogress-color: var(--background-color-accent-primary);
   --bprogress-height: 2.5px !important;
 }
 
@@ -63,8 +63,8 @@
 .bprogress .bar {
   background: linear-gradient(
     90deg,
-    rgba(var(--color-primary-100), 0.8) 0%,
-    rgba(var(--color-primary-100), 1) 100%
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
   ) !important;
   will-change: width, opacity;
 }
@@ -72,7 +72,7 @@
 .bprogress .peg {
   display: block;
   box-shadow:
-    0 0 8px rgba(var(--color-primary-100), 0.6),
-    0 0 4px rgba(var(--color-primary-100), 0.4) !important;
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
   will-change: transform, opacity;
 }
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
index cf8ff8c07..e68070da1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
@@ -149,12 +149,12 @@ function SecurityPage() {
                 />
                 {showPassword?.oldPassword ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("oldPassword")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("oldPassword")}
                   />
                 )}
@@ -187,12 +187,12 @@ function SecurityPage() {
               />
               {showPassword?.password ? (
                 <EyeOff
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                   onClick={() => handleShowPassword("password")}
                 />
               ) : (
                 <Eye
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                   onClick={() => handleShowPassword("password")}
                 />
               )}
@@ -227,12 +227,12 @@ function SecurityPage() {
               />
               {showPassword?.confirmPassword ? (
                 <EyeOff
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                   onClick={() => handleShowPassword("confirmPassword")}
                 />
               ) : (
                 <Eye
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                   onClick={() => handleShowPassword("confirmPassword")}
                 />
               )}
diff --git a/apps/web/app/(all)/profile/security/page.tsx b/apps/web/app/(all)/profile/security/page.tsx
index f12188007..99f19bce8 100644
--- a/apps/web/app/(all)/profile/security/page.tsx
+++ b/apps/web/app/(all)/profile/security/page.tsx
@@ -147,12 +147,12 @@ function SecurityPage() {
                   />
                   {showPassword?.oldPassword ? (
                     <EyeOff
-                      className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                      className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                       onClick={() => handleShowPassword("oldPassword")}
                     />
                   ) : (
                     <Eye
-                      className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                      className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                       onClick={() => handleShowPassword("oldPassword")}
                     />
                   )}
@@ -185,12 +185,12 @@ function SecurityPage() {
                 />
                 {showPassword?.password ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("password")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("password")}
                   />
                 )}
@@ -225,12 +225,12 @@ function SecurityPage() {
                 />
                 {showPassword?.confirmPassword ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("confirmPassword")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                     onClick={() => handleShowPassword("confirmPassword")}
                   />
                 )}
diff --git a/apps/web/ce/components/issues/header.tsx b/apps/web/ce/components/issues/header.tsx
index 0953bc0bd..c42f42400 100644
--- a/apps/web/ce/components/issues/header.tsx
+++ b/apps/web/ce/components/issues/header.tsx
@@ -93,7 +93,7 @@ export const IssuesHeader = observer(function IssuesHeader() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+            <Circle className="h-1.5 w-1.5 fill-accent-primary" strokeWidth={2} />
             {t("workspace_projects.network.public.title")}
             <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
           </a>
diff --git a/apps/web/ce/components/onboarding/tour/root.tsx b/apps/web/ce/components/onboarding/tour/root.tsx
index 08ab90be6..f5498b046 100644
--- a/apps/web/ce/components/onboarding/tour/root.tsx
+++ b/apps/web/ce/components/onboarding/tour/root.tsx
@@ -117,7 +117,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                   </Button>
                   <button
                     type="button"
-                    className="bg-transparent text-11 font-medium text-accent-primary outline-custom-text-100"
+                    className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
                     onClick={() => {
                       captureClick({
                         elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,
diff --git a/apps/web/ce/components/pages/editor/ai/menu.tsx b/apps/web/ce/components/pages/editor/ai/menu.tsx
index 513b566b2..448fbd07a 100644
--- a/apps/web/ce/components/pages/editor/ai/menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/menu.tsx
@@ -138,7 +138,7 @@ export function EditorAIMenu(props: Props) {
   return (
     <div
       className={cn(
-        "w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg transition-all",
+        "w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
         {
           "w-[700px]": activeTask,
         }
diff --git a/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx b/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
index b7805b08c..d8f8b91b5 100644
--- a/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
+++ b/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
@@ -8,7 +8,7 @@ export function IssueEmbedUpgradeCard(props: any) {
   return (
     <div
       className={cn(
-        "w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-custom-shadow-2xs flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
+        "w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-raised-100 flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
         {
           "border-2": props.selected,
         }
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 513d18c97..5cbcdfc2f 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -83,7 +83,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
               aria-label={t("aria_labels.auth_forms.clear_email")}
               tabIndex={-1}
             >
-              <XCircle className="size-5 stroke-custom-text-400" />
+              <XCircle className="size-5 stroke-placeholder" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 76c882600..9c71eb98b 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -203,7 +203,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 onClick={handleEmailClear}
                 aria-label={t("aria_labels.auth_forms.clear_email")}
               >
-                <XCircle className="size-5 stroke-custom-text-400" />
+                <XCircle className="size-5 stroke-placeholder" />
               </button>
             )}
           </div>
@@ -236,9 +236,9 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               )}
             >
               {showPassword?.password ? (
-                <EyeOff className="size-5 stroke-custom-text-400" />
+                <EyeOff className="size-5 stroke-placeholder" />
               ) : (
-                <Eye className="size-5 stroke-custom-text-400" />
+                <Eye className="size-5 stroke-placeholder" />
               )}
             </button>
           </div>
@@ -273,9 +273,9 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 onClick={() => handleShowPassword("retypePassword")}
               >
                 {showPassword?.retypePassword ? (
-                  <EyeOff className="size-5 stroke-custom-text-400" />
+                  <EyeOff className="size-5 stroke-placeholder" />
                 ) : (
-                  <Eye className="size-5 stroke-custom-text-400" />
+                  <Eye className="size-5 stroke-placeholder" />
                 )}
               </button>
             </div>
diff --git a/apps/web/core/components/account/auth-forms/reset-password.tsx b/apps/web/core/components/account/auth-forms/reset-password.tsx
index a5fbf9386..0e0256a24 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -143,12 +143,12 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
             />
             {showPassword.password ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             )}
@@ -172,12 +172,12 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
             />
             {showPassword.retypePassword ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             )}
diff --git a/apps/web/core/components/account/auth-forms/set-password.tsx b/apps/web/core/components/account/auth-forms/set-password.tsx
index 701caed17..15005caf6 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -160,12 +160,12 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
             />
             {showPassword.password ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             )}
@@ -189,12 +189,12 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
             />
             {showPassword.retypePassword ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
               />
             )}
diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx
index 4c3583966..6d2b72337 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -137,7 +137,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
               aria-label={t("aria_labels.auth_forms.clear_email")}
               onClick={handleEmailClear}
             >
-              <XCircle className="size-5 stroke-custom-text-400" />
+              <XCircle className="size-5 stroke-placeholder" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/base-layouts/layout-switcher.tsx b/apps/web/core/components/base-layouts/layout-switcher.tsx
index 63f48c837..a02745fda 100644
--- a/apps/web/core/components/base-layouts/layout-switcher.tsx
+++ b/apps/web/core/components/base-layouts/layout-switcher.tsx
@@ -29,7 +29,7 @@ export function LayoutSwitcher(props: Props) {
             <button
               type="button"
               className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-surface-1 ${
-                selectedLayout === layout.key ? "bg-surface-1 shadow-custom-shadow-2xs" : ""
+                selectedLayout === layout.key ? "bg-surface-1 shadow-raised-100" : ""
               }`}
               onClick={() => handleOnChange(layout.key)}
             >
diff --git a/apps/web/core/components/core/content-overflow-HOC.tsx b/apps/web/core/components/core/content-overflow-HOC.tsx
index bb912a449..cb60eaaee 100644
--- a/apps/web/core/components/core/content-overflow-HOC.tsx
+++ b/apps/web/core/components/core/content-overflow-HOC.tsx
@@ -128,7 +128,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
         <div
           className={cn(
             "bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
-            `bg-gradient-to-t from-custom-background-100 to-transparent flex flex-col items-center justify-end`,
+            `bg-gradient-to-t from-surface-1 to-transparent flex flex-col items-center justify-end`,
             "text-center",
             {
               "absolute h-[100px] opacity-100": !showAll,
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index cfd13e61a..98530630f 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -190,7 +190,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
 
       {isOpen && (
         <Popover.Panel
-          className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-custom-shadow-sm"
+          className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-raised-200"
           static
         >
           <div
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
index 30f8fb13e..2b0054ecc 100644
--- a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -228,7 +228,7 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
             setTransferIssuesModal(true);
           }}
         >
-          <TransferIcon className="fill-custom-primary-200 w-4" />
+          <TransferIcon className="fill-accent-primary w-4" />
           <span>{t("project_cycles.transfer_work_items", { count: transferableIssuesCount })}</span>
         </div>
       )}
diff --git a/apps/web/core/components/cycles/transfer-issues-modal.tsx b/apps/web/core/components/cycles/transfer-issues-modal.tsx
index 817e5cc45..a02f690b8 100644
--- a/apps/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -110,7 +110,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-1">
-                      <TransferIcon className="w-5 fill-custom-text-100" />
+                      <TransferIcon className="w-5 fill-primary" />
                       <h4 className="text-18 font-medium text-primary">Transfer work items</h4>
                     </div>
                     <button onClick={handleClose}>
diff --git a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
index 93cc739c8..aedbd75ab 100644
--- a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
+++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -122,7 +122,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
   return (
     <Combobox.Options className="fixed z-10" static>
       <div
-        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
index c45fa3c43..cb5986d8e 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -174,7 +174,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-surface-1 shadow-custom-shadow-rg border-[0.5px] border-strong rounded-md overflow-hidden z-30",
+                "my-1 bg-surface-1 shadow-raised-200 border-[0.5px] border-strong rounded-md overflow-hidden z-30",
                 optionsClassName
               )}
               ref={setPopperElement}
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
index 7d325c12e..4e1b0f313 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -225,7 +225,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/apps/web/core/components/dropdowns/intake-state/base.tsx b/apps/web/core/components/dropdowns/intake-state/base.tsx
index 4fda3ee96..6b0e9d7d9 100644
--- a/apps/web/core/components/dropdowns/intake-state/base.tsx
+++ b/apps/web/core/components/dropdowns/intake-state/base.tsx
@@ -211,7 +211,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
index 9af7e5b57..d45f83987 100644
--- a/apps/web/core/components/dropdowns/member/member-options.tsx
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -119,7 +119,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
     <Combobox.Options data-prevent-outside-click static>
       <div
         className={cn(
-          "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none z-30",
+          "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none z-30",
           optionsClassName
         )}
         ref={setPopperElement}
diff --git a/apps/web/core/components/dropdowns/module/module-options.tsx b/apps/web/core/components/dropdowns/module/module-options.tsx
index 9fe6b2469..afbb13069 100644
--- a/apps/web/core/components/dropdowns/module/module-options.tsx
+++ b/apps/web/core/components/dropdowns/module/module-options.tsx
@@ -107,7 +107,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
   return (
     <Combobox.Options className="fixed z-10" static>
       <div
-        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index 7f80a39f3..26de3aa6b 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -447,7 +447,7 @@ export function PriorityDropdown(props: Props) {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
index 09f849422..9da40e181 100644
--- a/apps/web/core/components/dropdowns/project/base.tsx
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -232,7 +232,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
index 0d99aab2e..fcd16056e 100644
--- a/apps/web/core/components/dropdowns/state/base.tsx
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -213,7 +213,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/apps/web/core/components/editor/embeds/mentions/user.tsx b/apps/web/core/components/editor/embeds/mentions/user.tsx
index 907d7380d..cb92aa538 100644
--- a/apps/web/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/user.tsx
@@ -50,7 +50,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
           <Link to={profileLink}>@{userDetails?.display_name}</Link>
         </Popover.Button>
         <Popover.Panel side="bottom" align="start">
-          <div className="w-60 bg-surface-1 shadow-custom-shadow-rg rounded-lg p-3 border-[0.5px] border-strong">
+          <div className="w-60 bg-surface-1 shadow-raised-200 rounded-lg p-3 border-[0.5px] border-strong">
             <div className="flex items-center gap-3">
               <div className="flex-shrink-0 size-10 grid place-items-center">
                 <Avatar
diff --git a/apps/web/core/components/editor/sticky-editor/color-palette.tsx b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
index 83596d52a..1b2566bcb 100644
--- a/apps/web/core/components/editor/sticky-editor/color-palette.tsx
+++ b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
@@ -8,7 +8,7 @@ export const STICKY_COLORS_LIST: {
   {
     key: "gray",
     label: "Gray",
-    backgroundColor: "rgba(var(--color-background-90))",
+    backgroundColor: "var(--background-color-layer-2)",
   },
   {
     key: "peach",
diff --git a/apps/web/core/components/icons/attachment/setting-icon.tsx b/apps/web/core/components/icons/attachment/setting-icon.tsx
index dee77f934..aedcc87bb 100644
--- a/apps/web/core/components/icons/attachment/setting-icon.tsx
+++ b/apps/web/core/components/icons/attachment/setting-icon.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import type { Props } from "../types";
 
-export function SettingIcon({ width = "24", height = "24", color = "rgb(var(--color-text-200))", className }: Props) {
+export function SettingIcon({ width = "24", height = "24", color = "var(--text-color-secondary)", className }: Props) {
   return (
     <svg
       width={width}
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index 1ee4a1969..808cda46e 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -142,7 +142,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
 
         <Combobox.Options className="fixed z-10">
           <div
-            className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none`}
+            className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 43e09132c..dff887c26 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -102,7 +102,7 @@ export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(p
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
-            className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-custom-shadow-rg"
+            className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-raised-200"
           >
             <div className="flex items-center justify-between gap-2 pb-3">
               <button
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 65f27b58d..b26e37a8d 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -129,7 +129,7 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}
-                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-custom-shadow-sm"
+                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
               >
                 <div>
                   {Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
index eacc045cf..1f440609c 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -106,7 +106,7 @@ export const CalendarIssueBlock = observer(
                   className={cn(
                     "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm  md:px-1 px-4 py-1.5 ",
                     {
-                      "bg-surface-2 shadow-custom-shadow-rg border-accent-strong": isDragging,
+                      "bg-surface-2 shadow-raised-200 border-accent-strong": isDragging,
                       "bg-surface-1 hover:bg-surface-2": !isDragging,
                       "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
                     }
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
index 253aab34b..ee5b81f27 100644
--- a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -252,7 +252,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
       ref={groupRef}
       className={cn(`relative flex flex-shrink-0 flex-col`, {
         "border-accent-strong": isDraggingOverColumn,
-        "border-custom-error-200": isDraggingOverColumn && isDropDisabled,
+        "border-danger-subtle": isDraggingOverColumn && isDropDisabled,
       })}
     >
       <Row
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
index 7683f7dd1..0aa630e71 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
@@ -14,7 +14,7 @@ export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssue
       <form
         ref={ref}
         onSubmit={onSubmit}
-        className="z-50 flex w-full items-center gap-x-2 rounded-sm md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-custom-shadow-2xs transition-opacity"
+        className="z-50 flex w-full items-center gap-x-2 rounded-sm md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-raised-100 transition-opacity"
       >
         <h4 className="text-13 md:text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
         <input
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
index f2a717f6c..78e4a2913 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
   const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className={cn("shadow-custom-shadow-sm", hasError && "border border-red-500/20 bg-red-500/10")}>
+    <div className={cn("shadow-raised-200", hasError && "border border-red-500/20 bg-red-500/10")}>
       <form
         ref={ref}
         onSubmit={onSubmit}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
index a1ae8ec49..bb60fea3d 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
@@ -7,7 +7,7 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className="m-1 overflow-hidden rounded-sm shadow-custom-shadow-sm">
+    <div className="m-1 overflow-hidden rounded-sm shadow-raised-200">
       <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 bg-surface-1 p-3">
         <div className="w-full">
           <h4 className="text-11 font-medium leading-5 text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
index 474a030fa..d2886977a 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
@@ -7,7 +7,7 @@ export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(pro
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className="shadow-custom-shadow-sm">
+    <div className="shadow-raised-200">
       <form
         ref={ref}
         onSubmit={onSubmit}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
index 283221d2d..84e99b1d8 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
@@ -11,7 +11,7 @@ export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAd
       <form
         ref={ref}
         onSubmit={onSubmit}
-        className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-custom-shadow-sm"
+        className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-raised-200"
       >
         <h4 className="w-20 text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
         <input
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index b9b9ace13..5626b74dd 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -277,7 +277,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
             {/* Identifier section - conditionally rendered */}
             {displayProperties?.key && (
               <div className="flex-shrink-0 flex items-center h-full min-w-24">
-                <div className="relative flex cursor-pointer items-center text-11 hover:text-custom-text-100">
+                <div className="relative flex cursor-pointer items-center text-11 hover:text-primary">
                   {issueDetail.project_id && (
                     <IssueIdentifier
                       issueId={issueDetail.id}
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index 4d5945f7c..1648d9d99 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -485,7 +485,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
             <div
               className={cn(
                 "px-4 py-3 border-t-[0.5px] border-subtle rounded-b-lg bg-surface-1",
-                activeAdditionalPropertiesLength > 0 && "shadow-custom-shadow-xs"
+                activeAdditionalPropertiesLength > 0 && "shadow-raised-100"
               )}
             >
               <div className="pb-3">
diff --git a/apps/web/core/components/issues/issue-update-status.tsx b/apps/web/core/components/issues/issue-update-status.tsx
index 97f3ddc13..8cdce83ce 100644
--- a/apps/web/core/components/issues/issue-update-status.tsx
+++ b/apps/web/core/components/issues/issue-update-status.tsx
@@ -19,7 +19,7 @@ export const NameDescriptionUpdateStatus = observer(function NameDescriptionUpda
         }`}
       >
         {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-          <RefreshCw className="animate-spin size-3.5 stroke-custom-text-300" />
+          <RefreshCw className="animate-spin size-3.5 stroke-tertiary" />
         )}
         <span className="text-13 text-tertiary">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
       </div>
diff --git a/apps/web/core/components/issues/layout-quick-actions.tsx b/apps/web/core/components/issues/layout-quick-actions.tsx
index ab3d198dc..34941c720 100644
--- a/apps/web/core/components/issues/layout-quick-actions.tsx
+++ b/apps/web/core/components/issues/layout-quick-actions.tsx
@@ -48,7 +48,7 @@ export const LayoutQuickActions: React.FC<Props> = observer((props) => {
         placement="bottom-end"
         closeOnSelect
         maxHeight="lg"
-        className="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
+        className="flex-shrink-0 flex items-center justify-center size-[26px] rounded"
       >
         {MENU_ITEMS.map((item) => {
           if (item.shouldRender === false) return null;
@@ -57,7 +57,7 @@ export const LayoutQuickActions: React.FC<Props> = observer((props) => {
               key={item.key}
               onClick={item.action}
               className={cn("flex items-center gap-2", {
-                "text-custom-text-400": item.disabled,
+                "text-placeholder": item.disabled,
               })}
               disabled={item.disabled}
             >
diff --git a/apps/web/core/components/issues/preview-card/root.tsx b/apps/web/core/components/issues/preview-card/root.tsx
index e944a765e..c506abb4f 100644
--- a/apps/web/core/components/issues/preview-card/root.tsx
+++ b/apps/web/core/components/issues/preview-card/root.tsx
@@ -32,7 +32,7 @@ export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props:
   const stateName = stateDetails?.name ?? fallbackStateDetails?.name;
 
   return (
-    <div className="p-3 space-y-2 w-72 rounded-lg shadow-custom-shadow-rg bg-surface-1 border-[0.5px] border-strong">
+    <div className="p-3 space-y-2 w-72 rounded-lg shadow-raised-200 bg-surface-1 border-[0.5px] border-strong">
       <div className="flex items-center justify-between gap-3 text-secondary">
         <IssueIdentifier
           size="xs"
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index e5cab201b..59dffab85 100644
--- a/apps/web/core/components/issues/select/base.tsx
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -188,7 +188,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       {isDropdownOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/apps/web/core/components/labels/create-update-label-inline.tsx b/apps/web/core/components/labels/create-update-label-inline.tsx
index 52744bde2..ad77edcd7 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -34,7 +34,7 @@ type TCreateUpdateLabelInlineProps = {
 
 const defaultValues: Partial<IIssueLabel> = {
   name: "",
-  color: "rgb(var(--color-text-200))",
+  color: "var(--text-color-secondary)",
 };
 
 export const CreateUpdateLabelInline = observer(
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index 26572c18f..d05ddc6cd 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -197,9 +197,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
 
                   <ChevronDownIcon
                     className={`size-3 ${
-                      !getValues(`emails.${index}.role_active`)
-                        ? "stroke-onboarding-text-400"
-                        : "stroke-onboarding-text-100"
+                      !getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
                     }`}
                   />
                 </Listbox.Button>
@@ -387,7 +385,7 @@ export function InviteMembers(props: Props) {
               </div>
               <button
                 type="button"
-                className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
+                className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
                 onClick={appendField}
               >
                 <Plus className="h-4 w-4" strokeWidth={2} />
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index c63b38483..6be30a456 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -315,7 +315,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                   {!userAvatar || userAvatar === "" ? (
                     <div className="flex flex-col items-center justify-between">
                       <div className="relative h-14 w-14 overflow-hidden">
-                        <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-[#9747FF] uppercase">
+                        <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-accent-primary uppercase">
                           {watch("first_name")[0] ?? "R"}
                         </div>
                       </div>
@@ -437,12 +437,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                           />
                           {showPassword.password ? (
                             <EyeOff
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("password")}
                             />
                           ) : (
                             <Eye
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("password")}
                             />
                           )}
@@ -477,12 +477,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                           />
                           {showPassword.retypePassword ? (
                             <EyeOff
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("retypePassword")}
                             />
                           ) : (
                             <Eye
-                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              className="absolute right-3 h-4 w-4 stroke-placeholder hover:cursor-pointer"
                               onClick={() => handleShowPassword("retypePassword")}
                             />
                           )}
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index 794c3f381..9253c4798 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -172,7 +172,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
       />
       <div className="flex items-center gap-4">
         <button
-          className="size-12 rounded-full bg-[#028375] flex items-center justify-center text-on-color font-semibold text-18"
+          className="size-12 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-semibold text-18"
           type="button"
           onClick={() => setIsImageUploadModalOpen(true)}
         >
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index 115923ebe..346de5c74 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -198,9 +198,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
 
                   <ChevronDownIcon
                     className={`size-3 ${
-                      !getValues(`emails.${index}.role_active`)
-                        ? "stroke-onboarding-text-400"
-                        : "stroke-onboarding-text-100"
+                      !getValues(`emails.${index}.role_active`) ? "stroke-placeholder" : "stroke-primary"
                     }`}
                   />
                 </Listbox.Button>
@@ -387,7 +385,7 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         </div>
         <button
           type="button"
-          className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
+          className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
           onClick={appendField}
         >
           <Plus className="h-4 w-4" strokeWidth={2} />
diff --git a/apps/web/core/components/onboarding/switch-account-dropdown.tsx b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
index 3208865d9..02f81aaab 100644
--- a/apps/web/core/components/onboarding/switch-account-dropdown.tsx
+++ b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -55,7 +55,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
           leaveFrom="transform scale-100 opacity-100"
           leaveTo="transform scale-95 opacity-0"
         >
-          <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] shadow-custom-shadow-rg">
+          <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] shadow-raised-200">
             <Menu.Item
               as="button"
               type="button"
diff --git a/apps/web/core/components/pages/editor/content-limit-banner.tsx b/apps/web/core/components/pages/editor/content-limit-banner.tsx
index 1195fa4e1..13f453d08 100644
--- a/apps/web/core/components/pages/editor/content-limit-banner.tsx
+++ b/apps/web/core/components/pages/editor/content-limit-banner.tsx
@@ -8,13 +8,8 @@ type Props = {
 
 export function ContentLimitBanner({ className, onDismiss }: Props) {
   return (
-    <div
-      className={cn(
-        "flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
-        className
-      )}
-    >
-      <div className="flex items-center gap-2 text-custom-text-200 mx-auto">
+    <div className={cn("flex items-center gap-2 bg-layer-2 border-b border-subtle-1 px-4 py-2.5 text-sm", className)}>
+      <div className="flex items-center gap-2 text-secondary mx-auto">
         <span className="text-amber-500">
           <TriangleAlert />
         </span>
@@ -26,7 +21,7 @@ export function ContentLimitBanner({ className, onDismiss }: Props) {
         <button
           type="button"
           onClick={onDismiss}
-          className="ml-auto text-custom-text-300 hover:text-custom-text-200"
+          className="ml-auto text-placeholder hover:text-secondary"
           aria-label="Dismiss content limit warning"
         >
           ✕
diff --git a/apps/web/core/components/pages/editor/summary/content-browser.tsx b/apps/web/core/components/pages/editor/summary/content-browser.tsx
index 9485875e3..dda98d306 100644
--- a/apps/web/core/components/pages/editor/summary/content-browser.tsx
+++ b/apps/web/core/components/pages/editor/summary/content-browser.tsx
@@ -63,7 +63,7 @@ export function PageContentBrowser(props: Props) {
           return (
             <div
               key={`${marking.level}-${marking.sequence}`}
-              className="flex-shrink-0 h-0.5 bg-custom-border-400 self-end rounded-xs"
+              className="flex-shrink-0 h-0.5 bg-layer-3 self-end rounded-xs"
               style={{
                 width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
               }}
diff --git a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
index f83e9f178..591f8f314 100644
--- a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
@@ -59,7 +59,7 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
           </Popover.Button>
           <Popover.Panel
             as="div"
-            className="fixed z-20 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg p-2 space-y-2"
+            className="fixed z-20 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 p-2 space-y-2"
           >
             <div className="space-y-1.5">
               <p className="text-11 text-tertiary font-semibold">Text colors</p>
diff --git a/apps/web/core/components/power-k/ui/modal/header.tsx b/apps/web/core/components/power-k/ui/modal/header.tsx
index 92f072119..9ed4f0c74 100644
--- a/apps/web/core/components/power-k/ui/modal/header.tsx
+++ b/apps/web/core/components/power-k/ui/modal/header.tsx
@@ -41,7 +41,7 @@ export function PowerKModalHeader(props: Props) {
           value={searchTerm}
           onValueChange={onSearchChange}
           placeholder={placeholder}
-          className="flex-1 bg-transparent text-13 text-primary placeholder-custom-text-400 outline-none"
+          className="flex-1 bg-transparent text-13 text-primary placeholder-(--text-color-placeholder) outline-none"
           autoFocus
         />
         {searchTerm && (
diff --git a/apps/web/core/components/profile/overview/state-distribution.tsx b/apps/web/core/components/profile/overview/state-distribution.tsx
index 0161de90e..e7403142a 100644
--- a/apps/web/core/components/profile/overview/state-distribution.tsx
+++ b/apps/web/core/components/profile/overview/state-distribution.tsx
@@ -59,7 +59,8 @@ export function ProfileStateDistribution({ stateDistribution, userProfile }: Pro
                       <div
                         className="h-2.5 w-2.5 rounded-xs"
                         style={{
-                          backgroundColor: STATE_GROUPS[group.state_group]?.color ?? "rgb(var(--color-primary-100))",
+                          backgroundColor:
+                            STATE_GROUPS[group.state_group]?.color ?? "var(--background-color-accent-primary)",
                         }}
                       />
                       <div className="whitespace-nowrap">{STATE_GROUPS[group.state_group].label}</div>
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 87ee6d17b..5d987cd55 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -117,7 +117,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                   className="h-full w-full rounded-sm object-cover"
                 />
               ) : (
-                <div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-[#028375] capitalize text-on-color">
+                <div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-accent-primary capitalize text-on-color">
                   {userData?.first_name?.[0]}
                 </div>
               )}
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index 7f779e950..8c491671e 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -141,7 +141,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
               <Menu.Items as={Fragment}>
                 <div
                   className={cn(
-                    "fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-custom-shadow-rg outline-none",
+                    "fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 outline-none",
                     {
                       "top-11 left-14": variant === "sidebar",
                       "top-10 left-4": variant === "top-navigation",
diff --git a/apps/web/styles/emoji.css b/apps/web/styles/emoji.css
index 85dd9ffd0..50e50648e 100644
--- a/apps/web/styles/emoji.css
+++ b/apps/web/styles/emoji.css
@@ -6,7 +6,7 @@
     --epr-picker-border-radius: 0.25rem !important;
     --epr-horizontal-padding: 0.5rem !important;
     --epr-emoji-padding: 0.5rem !important;
-    background-color: rgba(var(--color-background-100)) !important;
+    @apply bg-surface-1!;
   }
 
   .epr-main {
@@ -16,8 +16,7 @@
 
   .epr-emoji-category-label {
     font-size: 0.7875rem !important;
-    background-color: rgba(var(--color-background-100), 0.8) !important;
-    @apply text-tertiary!;
+    @apply bg-surface-1/80! text-tertiary!;
   }
 
   .epr-category-nav,
@@ -27,7 +26,7 @@
 
   button.epr-emoji:hover > *,
   button.epr-emoji:focus > * {
-    background-color: rgba(var(--color-background-80)) !important;
+    @apply bg-layer-2!;
   }
 
   input.epr-search {
@@ -43,12 +42,12 @@
   }
 
   button.epr-btn-clear-search:hover {
-    background-color: rgba(var(--color-background-80)) !important;
+    @apply bg-layer-2!;
     @apply text-tertiary!;
   }
 
   .epr-emoji-variation-picker {
-    background-color: rgba(var(--color-background-100)) !important;
+    @apply bg-surface-1!;
     @apply border-subtle-1!;
   }
 }
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index dd034d814..ab520abe2 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -5,62 +5,6 @@
 @import "./emoji.css";
 @plugin "@tailwindcss/typography";
 
-:root {
-  /* Plane subscriptions */
-  --color-subscription-free-200: 69, 80, 104;
-  --color-subscription-free-400: 51, 59, 77;
-
-  --color-subscription-one-200: 101, 42, 14;
-  --color-subscription-one-400: 90, 37, 12;
-
-  --color-subscription-pro-200: 32, 128, 138;
-  --color-subscription-pro-400: 24, 96, 104;
-
-  --color-subscription-business-200: 142, 33, 87;
-  --color-subscription-business-400: 103, 24, 63;
-
-  --color-subscription-enterprise-200: 86, 5, 145;
-  --color-subscription-enterprise-400: 73, 4, 123;
-}
-
-[data-theme="light"],
-[data-theme="light-contrast"] {
-  /* Plane subscriptions */
-  --color-subscription-free-200: 69, 80, 104;
-  --color-subscription-free-400: 51, 59, 77;
-
-  --color-subscription-one-200: 101, 42, 14;
-  --color-subscription-one-400: 90, 37, 12;
-
-  --color-subscription-pro-200: 32, 128, 138;
-  --color-subscription-pro-400: 24, 96, 104;
-
-  --color-subscription-business-200: 142, 33, 87;
-  --color-subscription-business-400: 103, 24, 63;
-
-  --color-subscription-enterprise-200: 86, 5, 145;
-  --color-subscription-enterprise-400: 73, 4, 123;
-}
-
-[data-theme="dark"],
-[data-theme="dark-contrast"] {
-  /* Plane subscriptions */
-  --color-subscription-free-200: 206, 213, 232;
-  --color-subscription-free-400: 152, 166, 206;
-
-  --color-subscription-one-200: 255, 148, 153;
-  --color-subscription-one-400: 200, 118, 121;
-
-  --color-subscription-pro-200: 12, 170, 192;
-  --color-subscription-pro-400: 9, 130, 154;
-
-  --color-subscription-business-200: 206, 34, 119;
-  --color-subscription-business-400: 140, 23, 81;
-
-  --color-subscription-enterprise-200: 182, 71, 255;
-  --color-subscription-enterprise-400: 134, 11, 203;
-}
-
 /* stickies and editor colors */
 :root {
   /* text colors */
@@ -219,7 +163,7 @@
 
 @keyframes highlight {
   0% {
-    background-color: rgba(var(--color-background-90), 1);
+    background-color: var(--background-color-layer-2);
     border-radius: 4px;
   }
   100% {
@@ -230,7 +174,7 @@
 
 /* Progress Bar Styles */
 :root {
-  --bprogress-color: rgb(var(--color-primary-100)) !important;
+  --bprogress-color: var(--background-color-accent-primary);
   --bprogress-height: 2.5px !important;
 }
 
@@ -241,8 +185,8 @@
 .bprogress .bar {
   background: linear-gradient(
     90deg,
-    rgba(var(--color-primary-100), 0.8) 0%,
-    rgba(var(--color-primary-100), 1) 100%
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
   ) !important;
   will-change: width, opacity;
 }
@@ -250,7 +194,7 @@
 .bprogress .peg {
   display: block;
   box-shadow:
-    0 0 8px rgba(var(--color-primary-100), 0.6),
-    0 0 4px rgba(var(--color-primary-100), 0.4) !important;
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
   will-change: transform, opacity;
 }
diff --git a/packages/constants/src/graph.ts b/packages/constants/src/graph.ts
index 1b671dc80..43058bdf8 100644
--- a/packages/constants/src/graph.ts
+++ b/packages/constants/src/graph.ts
@@ -6,14 +6,14 @@ export const CHARTS_THEME = {
   axis: {
     domain: {
       line: {
-        stroke: "rgb(var(--color-background-80))",
+        stroke: "var(--background-color-layer-2)",
         strokeWidth: 0.5,
       },
     },
   },
   tooltip: {
     container: {
-      background: "rgb(var(--color-background-80))",
+      background: "var(--background-color-layer-2)",
       color: "var(--text-color-secondary)",
       fontSize: "0.8rem",
       border: "1px solid var(--border-color-strong)",
diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx
index af45e54b2..591c5e55b 100644
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -76,7 +76,7 @@ export function PageRenderer(props: Props) {
                   editor={titleEditor}
                   id={id + "-title"}
                   tabIndex={tabIndex}
-                  className="no-scrollbar placeholder-custom-text-400 bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
+                  className="no-scrollbar placeholder-placeholder bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
                 />
               </EditorContainer>
             </div>
diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx
index e647c4795..69d9f3cc1 100644
--- a/packages/editor/src/core/components/menus/block-menu.tsx
+++ b/packages/editor/src/core/components/menus/block-menu.tsx
@@ -216,7 +216,7 @@ export function BlockMenu(props: Props) {
           zIndex: 100,
         }}
         className={cn(
-          "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-custom-shadow-rg",
+          "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-raised-200",
           "transition-all duration-300 transform origin-top-right",
           isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
         )}
diff --git a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
index 4ad7be4ff..c6fc542ed 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
@@ -58,7 +58,7 @@ export function BubbleMenuColorSelector(props: Props) {
       getFloatingProps={getFloatingProps}
       getReferenceProps={getReferenceProps}
     >
-      <section className="mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-2 shadow-custom-shadow-rg">
+      <section className="mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-2 shadow-raised-200">
         <div className="space-y-1.5">
           <p className="text-11 text-tertiary font-semibold">Text colors</p>
           <div className="flex items-center gap-2">
diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
index 88431e5ea..57d50c31a 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
@@ -63,7 +63,7 @@ export function BubbleMenuLinkSelector(props: Props) {
       }
       options={options}
     >
-      <div className="w-60 mt-1 rounded-md bg-surface-1 shadow-custom-shadow-rg">
+      <div className="w-60 mt-1 rounded-md bg-surface-1 shadow-raised-200">
         <div
           className={cn("flex rounded-sm  border-[0.5px] border-strong transition-colors", {
             "border-red-500": error,
diff --git a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
index 0247edd65..d28ee912b 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
@@ -75,7 +75,7 @@ export function BubbleMenuNodeSelector(props: Props) {
       getFloatingProps={getFloatingProps}
       getReferenceProps={getReferenceProps}
     >
-      <section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg">
+      <section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
         {items.map((item) => (
           <button
             key={item.name}
diff --git a/packages/editor/src/core/components/menus/bubble-menu/root.tsx b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
index cbf8a3010..0de70f9aa 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
@@ -186,7 +186,7 @@ export function EditorBubbleMenu(props: Props) {
       {!isSelecting && (
         <div
           ref={menuRef}
-          className="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-custom-shadow-rg overflow-x-scroll horizontal-scrollbar scrollbar-xs"
+          className="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-raised-200 overflow-x-scroll horizontal-scrollbar scrollbar-xs"
         >
           <div className="px-2">
             <BubbleMenuNodeSelector editor={editor} />
diff --git a/packages/editor/src/core/extensions/callout/color-selector.tsx b/packages/editor/src/core/extensions/callout/color-selector.tsx
index bf7242cfb..db032d4e8 100644
--- a/packages/editor/src/core/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/color-selector.tsx
@@ -47,7 +47,7 @@ export function CalloutBlockColorSelector(props: Props) {
           <ChevronDownIcon className="flex-shrink-0 size-3" />
         </button>
         {isOpen && (
-          <section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
+          <section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200 animate-in fade-in slide-in-from-top-1">
             <div className="flex items-center gap-2">
               {COLORS_LIST.map((color) => (
                 <button
diff --git a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
index e74673605..faf31601e 100644
--- a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
+++ b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
@@ -124,7 +124,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
       <div
         ref={dropdownContainerRef}
         className={cn(
-          "relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2 opacity-0 invisible transition-opacity",
+          "relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2 opacity-0 invisible transition-opacity",
           {
             "opacity-100 visible": isVisible,
           }
diff --git a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
index dad04e8e5..d532290f2 100644
--- a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
+++ b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
@@ -124,7 +124,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
       />
       <div
         ref={dropdownContainer}
-        className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
+        className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
         style={{
           zIndex: 100,
         }}
diff --git a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
index bbd8a9379..81050caf5 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
@@ -254,7 +254,7 @@ export const getSlashCommandFilteredSections =
             icon: <ALargeSmall className="size-3.5" />,
             iconContainerStyle: {
               borderRadius: "4px",
-              backgroundColor: "rgba(var(--color-background-100))",
+              backgroundColor: "var(--background-color-surface-1)",
               border: "1px solid var(--border-color-strong)",
             },
             command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
index 4ff7ee304..6ab15766a 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
@@ -131,7 +131,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
       <div
         id="slash-command"
         ref={commandListContainer}
-        className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
+        className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
         style={{
           zIndex: 100,
         }}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index 780165c21..0dba2b1e3 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -205,7 +205,7 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
             lockScroll
           />
           <div
-            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg"
+            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
             ref={refs.setFloating}
             {...getFloatingProps()}
             style={{
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index 642f12b97..1d9ef420a 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -204,7 +204,7 @@ export function RowDragHandle(props: RowDragHandleProps) {
             lockScroll
           />
           <div
-            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-custom-shadow-rg"
+            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
             ref={refs.setFloating}
             {...getFloatingProps()}
             style={{
diff --git a/packages/editor/src/core/extensions/table/table/icons.ts b/packages/editor/src/core/extensions/table/table/icons.ts
index 51c778411..96c0dbcbe 100644
--- a/packages/editor/src/core/extensions/table/table/icons.ts
+++ b/packages/editor/src/core/extensions/table/table/icons.ts
@@ -1,5 +1,5 @@
 export const icons = {
-  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="var(--text-color-tertiary)" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
   deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
   deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
   insertLeftTableIcon: `<svg
@@ -9,7 +9,7 @@ export const icons = {
       >
     <path
       d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
@@ -20,7 +20,7 @@ export const icons = {
   >
     <path
       d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
@@ -31,12 +31,12 @@ export const icons = {
   >
     <path
       d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
-  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
-  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
   insertBottomTableIcon: `<svg
     xmlns="http://www.w3.org/2000/svg"
     length={24}
@@ -44,7 +44,7 @@ export const icons = {
   >
     <path
       d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
+      fill="var(--text-color-tertiary)"
     />
   </svg>
 `,
diff --git a/packages/editor/src/core/plugins/highlight.ts b/packages/editor/src/core/plugins/highlight.ts
index 2ea623c6c..3c65c90ea 100644
--- a/packages/editor/src/core/plugins/highlight.ts
+++ b/packages/editor/src/core/plugins/highlight.ts
@@ -18,7 +18,7 @@ const buildDecorations = (doc: Parameters<typeof DecorationSet.create>[0], highl
   }
 
   const decorations: Decoration[] = [];
-  const highlightClassNames = ["bg-custom-primary-100/20", "transition-all", "duration-300", "rounded"];
+  const highlightClassNames = ["bg-accent-primary/20", "transition-all", "duration-300", "rounded"];
 
   doc.descendants((node, pos) => {
     // Check if this node has the id we're looking for
diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css
index 7b9577cc4..7ccb76163 100644
--- a/packages/editor/src/styles/drag-drop.css
+++ b/packages/editor/src/styles/drag-drop.css
@@ -55,7 +55,7 @@
     left: calc(-1 * var(--horizontal-offset));
     height: 100%;
     width: calc(100% + (var(--horizontal-offset) * 2));
-    background-color: rgba(var(--color-primary-100), 0.2);
+    background-color: --alpha(var(--background-color-accent-primary) / 20%);
     border-radius: 4px;
     pointer-events: none;
   }
@@ -66,7 +66,7 @@
     --horizontal-offset: 0px;
 
     &::after {
-      background-color: rgba(var(--color-background-100), 0.2);
+      background-color: --alpha(var(--background-color-surface-1) / 20%);
     }
   }
 }
diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
index c34c1d441..a842193d1 100644
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@@ -76,7 +76,7 @@
     }
 
     &.ProseMirror-selectednode {
-      outline: 3px solid rgba(var(--color-primary-100));
+      outline: 3px solid var(--border-color-accent-strong);
       filter: brightness(90%);
     }
   }
diff --git a/packages/propel/src/card/helper.tsx b/packages/propel/src/card/helper.tsx
index 69dbea3f3..fabaeb74e 100644
--- a/packages/propel/src/card/helper.tsx
+++ b/packages/propel/src/card/helper.tsx
@@ -21,7 +21,7 @@ export interface ICardProperties {
 const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
 export const containerStyle: ICardProperties = {
   [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
 };
 export const spacings = {
   [ECardSpacing.SM]: "p-4",
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 0e373203e..a770c1b85 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -127,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
           barSize={barSize}
           className="recharts-wrapper"
         >
-          <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
+          <CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
             tick={(props) => {
diff --git a/packages/propel/src/charts/pie-chart/root.tsx b/packages/propel/src/charts/pie-chart/root.tsx
index fd1630985..f515268c2 100644
--- a/packages/propel/src/charts/pie-chart/root.tsx
+++ b/packages/propel/src/charts/pie-chart/root.tsx
@@ -84,7 +84,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
                       y={props.y}
                       textAnchor={props.textAnchor}
                       dominantBaseline={props.dominantBaseline}
-                      fill="rgba(var(--color-text-200))"
+                      fill="var(--text-color-secondary)"
                       opacity={!!activeLegend && activeLegend !== payload.key ? 0.1 : 1}
                     >
                       {customLabel?.(payload.count) ?? payload.count}
diff --git a/packages/propel/src/design-system/design-system-philosophy.stories.tsx b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
index b408efd54..be7a9b3f9 100644
--- a/packages/propel/src/design-system/design-system-philosophy.stories.tsx
+++ b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
@@ -305,7 +305,7 @@ export const TextColorHierarchy: Story = {
           <p className="text-secondary mb-3">Secondary text for descriptions and supporting content</p>
           <p className="text-tertiary mb-3 text-13">Tertiary text for labels and metadata</p>
           <input
-            className="placeholder-placeholder border-subtle rounded border px-3 py-2"
+            className="placeholder-(--text-color-placeholder) border-subtle rounded border px-3 py-2"
             placeholder="Placeholder text for inputs"
           />
         </div>
diff --git a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
index 6a0c4f8ac..c37200319 100644
--- a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
@@ -36,7 +36,7 @@ export function EmojiRoot(props: EmojiRootProps) {
           <EmojiPicker.Search
             placeholder={searchPlaceholder}
             disabled={searchDisabled}
-            className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
+            className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
           />
         </div>
         <EmojiPicker.SkinToneSelector
diff --git a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
index ff8116d8c..8ef663a97 100644
--- a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
@@ -48,7 +48,7 @@ export function IconRoot(props: IconRootProps) {
                 placeholder="Search"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
-                className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
+                className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
               />
             </div>
           </div>
@@ -72,7 +72,7 @@ export function IconRoot(props: IconRootProps) {
                   setHexValue(value);
                   if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
                 }}
-                className="block placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
+                className="block placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
                 autoFocus
               />
             </div>
diff --git a/packages/propel/src/icons/calendar-after-icon.tsx b/packages/propel/src/icons/calendar-after-icon.tsx
index 3cb03c116..3d1c133ce 100644
--- a/packages/propel/src/icons/calendar-after-icon.tsx
+++ b/packages/propel/src/icons/calendar-after-icon.tsx
@@ -8,7 +8,7 @@ export function CalendarAfterIcon({ className = "fill-current", ...rest }: ISvgI
       <g clipPath="url(#clip0_3309_70901)">
         <path
           d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
-          fill="rgb(var(--color-text-200))"
+          fill="var(--text-color-secondary)"
         />
       </g>
       <defs>
diff --git a/packages/propel/src/icons/calendar-before-icon.tsx b/packages/propel/src/icons/calendar-before-icon.tsx
index d832ca9ad..7833b2ea7 100644
--- a/packages/propel/src/icons/calendar-before-icon.tsx
+++ b/packages/propel/src/icons/calendar-before-icon.tsx
@@ -8,13 +8,13 @@ export function CalendarBeforeIcon({ className = "fill-current", ...rest }: ISvg
       <g clipPath="url(#clip0_3309_70907)">
         <path
           d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
-          fill="rgb(var(--color-text-200))"
+          fill="var(--text-color-secondary)"
         />
         <g clipPath="url(#clip1_3309_70907)">
           <path
             d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
-            fill="rgb(var(--color-text-200))"
-            stroke="rgb(var(--color-text-200))"
+            fill="var(--text-color-secondary)"
+            stroke="var(--text-color-secondary)"
             strokeWidth="0.5"
           />
         </g>
diff --git a/packages/propel/src/icons/github-icon.tsx b/packages/propel/src/icons/github-icon.tsx
index 9ed2d8909..3307ccfc6 100644
--- a/packages/propel/src/icons/github-icon.tsx
+++ b/packages/propel/src/icons/github-icon.tsx
@@ -17,7 +17,7 @@ export function GithubIcon({ width = "24", height = "24", className, color }: IS
           fillRule="evenodd"
           clipRule="evenodd"
           d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "rgb(var(--color-text-200))"}
+          fill={color ? color : "var(--text-color-secondary)"}
         />
       </g>
       <defs>
diff --git a/packages/propel/src/icons/gitlab-icon.tsx b/packages/propel/src/icons/gitlab-icon.tsx
index ae29da747..41fa4aecf 100644
--- a/packages/propel/src/icons/gitlab-icon.tsx
+++ b/packages/propel/src/icons/gitlab-icon.tsx
@@ -17,7 +17,7 @@ export function GitlabIcon({ width = "24", height = "24", className, color }: IS
           fillRule="evenodd"
           clipRule="evenodd"
           d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-          fill={color ? color : "rgb(var(--color-text-200))"}
+          fill={color ? color : "var(--text-color-secondary)"}
         />
       </g>
       <defs>
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
index 4b2261060..c23d01ad1 100644
--- a/packages/propel/src/menu/menu.stories.tsx
+++ b/packages/propel/src/menu/menu.stories.tsx
@@ -161,7 +161,7 @@ export const WithSubmenu: Story = {
         <Menu.MenuItem onClick={() => alert("Open")}>Open</Menu.MenuItem>
         <Menu.SubMenu
           trigger="Export"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
         >
           <Menu.MenuItem onClick={() => alert("Export as PDF")}>Export as PDF</Menu.MenuItem>
           <Menu.MenuItem onClick={() => alert("Export as CSV")}>Export as CSV</Menu.MenuItem>
@@ -220,7 +220,7 @@ export const ComplexMenu: Story = {
         </Menu.MenuItem>
         <Menu.SubMenu
           trigger="Settings"
-          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
         >
           <Menu.MenuItem onClick={() => alert("General Settings")}>General</Menu.MenuItem>
           <Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
index 6b4d6da16..586b197be 100644
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@@ -180,7 +180,7 @@ function Menu(props: TMenuProps) {
           <BaseMenu.Popup
             tabIndex={tabIndex}
             className={cn(
-              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none min-w-[12rem] whitespace-nowrap",
               {
                 "max-h-60": maxHeight === "lg",
                 "max-h-48": maxHeight === "md",
diff --git a/packages/propel/src/spinners/circular-spinner.tsx b/packages/propel/src/spinners/circular-spinner.tsx
index e4081cada..5b12166d7 100644
--- a/packages/propel/src/spinners/circular-spinner.tsx
+++ b/packages/propel/src/spinners/circular-spinner.tsx
@@ -25,7 +25,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
           fill="currentColor"
         />
         <path
-          className="fill-custom-primary-100"
+          className="fill-accent-primary"
           d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
         />
       </svg>
diff --git a/packages/tailwind-config/AGENTS.md b/packages/tailwind-config/AGENTS.md
index 9a6ecdf50..57e4876ae 100644
--- a/packages/tailwind-config/AGENTS.md
+++ b/packages/tailwind-config/AGENTS.md
@@ -478,7 +478,7 @@ Use semantic text colors that match the hierarchy:
   <h2 className="text-primary font-semibold">Title</h2>
   <p className="text-secondary">Description text</p>
   <span className="text-tertiary text-13">Metadata</span>
-  <input className="placeholder-placeholder" placeholder="Enter text..." />
+  <input className="placeholder-(--text-color-placeholder)" placeholder="Enter text..." />
 </div>
 ```
 
diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css
index 2111e0343..ecebd1a56 100644
--- a/packages/tailwind-config/index.css
+++ b/packages/tailwind-config/index.css
@@ -34,13 +34,13 @@ body {
 /* progress bar */
 @utility progress-bar {
   fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
+  color: var(--text-color-secondary);
 }
 
 ::-webkit-input-placeholder,
 ::placeholder,
 :-ms-input-placeholder {
-  color: rgb(var(--color-text-400));
+  @apply text-placeholder;
 }
 
 @utility vertical-lr {
@@ -172,12 +172,12 @@ body {
 
 /* highlight class */
 @utility highlight {
-  border: 1px solid rgb(var(--color-primary-100)) !important;
+  border: 1px solid var(--border-color-accent-strong) !important;
 }
 
 @utility highlight-with-line {
-  border-left: 5px solid rgb(var(--color-primary-100)) !important;
-  background: rgb(var(--color-background-80));
+  border-left: 5px solid var(--border-color-accent-strong) !important;
+  background: var(--background-color-layer-2);
 }
 
 /* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
diff --git a/packages/ui/src/auth-form/auth-input.tsx b/packages/ui/src/auth-form/auth-input.tsx
index 3db799306..526cd4f35 100644
--- a/packages/ui/src/auth-form/auth-input.tsx
+++ b/packages/ui/src/auth-form/auth-input.tsx
@@ -51,7 +51,7 @@ export function AuthInput({
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+            className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
           >
             {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
           </button>
diff --git a/packages/ui/src/card/helper.tsx b/packages/ui/src/card/helper.tsx
index 69dbea3f3..fabaeb74e 100644
--- a/packages/ui/src/card/helper.tsx
+++ b/packages/ui/src/card/helper.tsx
@@ -21,7 +21,7 @@ export interface ICardProperties {
 const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
 export const containerStyle: ICardProperties = {
   [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
 };
 export const spacings = {
   [ECardSpacing.SM]: "p-4",
diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
index 0d27ba9ee..da140272c 100644
--- a/packages/ui/src/drag-handle.tsx
+++ b/packages/ui/src/drag-handle.tsx
@@ -28,8 +28,8 @@ export const DragHandle = forwardRef(function DragHandle(
       }}
       ref={ref}
     >
-      <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
-      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" />
+      <MoreVertical className="h-3.5 w-3.5 stroke-placeholder" />
+      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-placeholder" />
     </button>
   );
 });
diff --git a/packages/ui/src/dropdown/multi-select.tsx b/packages/ui/src/dropdown/multi-select.tsx
index a3bcc7362..bc67130ae 100644
--- a/packages/ui/src/dropdown/multi-select.tsx
+++ b/packages/ui/src/dropdown/multi-select.tsx
@@ -138,7 +138,7 @@ export function MultiSelectDropdown(props: IMultiSelectDropdown) {
         <Combobox.Options className="fixed z-10" static>
           <div
             className={cn(
-              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none",
+              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
               optionsContainerClassName
             )}
             ref={setPopperElement}
diff --git a/packages/ui/src/dropdown/single-select.tsx b/packages/ui/src/dropdown/single-select.tsx
index 5f3e90670..9c8911a76 100644
--- a/packages/ui/src/dropdown/single-select.tsx
+++ b/packages/ui/src/dropdown/single-select.tsx
@@ -137,7 +137,7 @@ export function Dropdown(props: ISingleSelectDropdown) {
         <Combobox.Options className="fixed z-10" static>
           <div
             className={cn(
-              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-custom-shadow-rg focus:outline-none",
+              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
               optionsContainerClassName
             )}
             ref={setPopperElement}
diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx
index f8db580a9..a01a35556 100644
--- a/packages/ui/src/form-fields/checkbox.tsx
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -67,7 +67,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
         className={cn(
           "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none stroke-white hidden",
           {
-            "stroke-custom-text-400 opacity-40": disabled,
+            "stroke-placeholder opacity-40": disabled,
             block: indeterminate && !checked,
           },
           iconClassName
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index 80d419929..0e3a30ed4 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -88,7 +88,7 @@ export function InputColorPicker(props: InputColorPickerProps) {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index 178eb6c31..419d2c33f 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -37,7 +37,7 @@ const TextArea = React.forwardRef(function TextArea(
       ref={textAreaRef}
       value={value}
       className={cn(
-        "no-scrollbar w-full bg-transparent placeholder-custom-text-400 outline-none",
+        "no-scrollbar w-full bg-transparent placeholder-(--text-color-placeholder) outline-none",
         {
           "rounded-md border-[0.5px] border-subtle": mode === "primary",
           "focus:ring-theme rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1":
diff --git a/packages/ui/src/popovers/popover-menu.tsx b/packages/ui/src/popovers/popover-menu.tsx
index dbf7bd384..896f49893 100644
--- a/packages/ui/src/popovers/popover-menu.tsx
+++ b/packages/ui/src/popovers/popover-menu.tsx
@@ -29,7 +29,7 @@ export function PopoverMenu<T>(props: TPopoverMenu<T>) {
       button={button}
       disabled={disabled}
       panelClassName={cn(
-        "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-custom-shadow-rg focus:outline-none",
+        "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
         panelClassName
       )}
       popoverClassName={popoverClassName}
diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
index 8a41f4ebc..1516c029d 100644
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -15,7 +15,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
         aria-hidden="true"
         height={height}
         width={width}
-        className={cn("animate-spin fill-custom-primary-100 text-secondary", className)}
+        className={cn("animate-spin fill-accent-primary text-secondary", className)}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"