diff --git a/apps/web/app/(all)/profile/sidebar.tsx b/apps/web/app/(all)/profile/sidebar.tsx
index 505d811051..daaad3d2ee 100644
--- a/apps/web/app/(all)/profile/sidebar.tsx
+++ b/apps/web/app/(all)/profile/sidebar.tsx
@@ -198,7 +198,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
                   >
                     <span
                       className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-11 uppercase ${
-                        !workspace?.logo_url && "rounded-sm bg-custom-primary-500 text-on-color"
+                        !workspace?.logo_url && "rounded-sm bg-accent-primary text-on-color"
                       }`}
                     >
                       {workspace?.logo_url && workspace.logo_url !== "" ? (
diff --git a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
index d48bed7ba8..68d26fae1f 100644
--- a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
@@ -22,7 +22,7 @@ export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props:
     <div className="flex w-full items-center cursor-pointer py-1 animate-slide-up">
       <div
         className={cn(
-          "flex space-x-1 rounded-md bg-custom-primary-200/10 p-0.5 w-full",
+          "flex space-x-1 rounded-md bg-accent-primary/80/10 p-0.5 w-full",
           getSubscriptionBackgroundColor(subscriptionType, "50")
         )}
       >
diff --git a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
index 8d9c8a1f29..4eee50976d 100644
--- a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
@@ -25,7 +25,7 @@ export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }:
         type="button"
         onClick={(e) => onSubmit(e)}
         disabled={isEmpty || isSubmitting}
-        className="p-1 bg-accent-primary hover:bg-custom-primary-200 disabled:bg-custom-text-400 disabled:text-secondary text-primary rounded-sm transition-colors"
+        className="p-1 bg-accent-primary hover:bg-accent-primary/80 disabled:bg-layer-1 disabled:text-secondary text-primary rounded-sm transition-colors"
       >
         <ArrowUp className="size-3" />
       </button>
diff --git a/apps/web/core/components/estimates/radio-select.tsx b/apps/web/core/components/estimates/radio-select.tsx
index 715ddb6285..c1b653f573 100644
--- a/apps/web/core/components/estimates/radio-select.tsx
+++ b/apps/web/core/components/estimates/radio-select.tsx
@@ -54,7 +54,7 @@ export function RadioInput({
             onClick={() => !disabled && setSelected(value)}
             className={cn(
               "flex items-center gap-2 text-14",
-              disabled ? `bg-custom-background-200 border-subtle cursor-not-allowed` : ``,
+              disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
               inputFieldClassName
             )}
           >
@@ -63,8 +63,8 @@ export function RadioInput({
               name={name}
               className={cn(
                 `group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-custom-background-500 cursor-pointer`,
-                selected === value ? `bg-custom-primary-200 border-accent-strong ` : ``,
-                disabled ? `bg-custom-background-200 border-subtle cursor-not-allowed` : ``,
+                selected === value ? `bg-accent-primary/80 border-accent-strong ` : ``,
+                disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
                 inputButtonClassName
               )}
               type="radio"
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 9280e31f87..a2ef9e0e1a 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -73,7 +73,7 @@ export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
 
   if (!issueIds || issueIds.length === 0) return <></>;
   return (
-    <div className="relative flex h-full w-full flex-col overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-secondary">
+    <div className="relative flex h-full w-full flex-col overflow-x-hidden whitespace-nowrap rounded-lg bg-layer-1 text-secondary">
       <div ref={portalRef} className="spreadsheet-menu-portal" />
       <MultipleSelectGroup
         containerRef={containerRef}
diff --git a/apps/web/core/components/navigation/project-header-button.tsx b/apps/web/core/components/navigation/project-header-button.tsx
index 0a942907ca..3dbb088d38 100644
--- a/apps/web/core/components/navigation/project-header-button.tsx
+++ b/apps/web/core/components/navigation/project-header-button.tsx
@@ -16,7 +16,7 @@ export function ProjectHeaderButton({ project }: TProjectHeaderButtonProps) {
           <Logo logo={project.logo_props} size={16} />
         </div>
         <div className="relative flex-1 min-w-0">
-          <p className="truncate text-base font-medium text-custom-sidebar-text-200 px-2">{project.name}</p>
+          <p className="truncate text-base font-medium text-secondary px-2">{project.name}</p>
           <div className="absolute right-0 top-0 bottom-0 flex items-center justify-end pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200">
             <div className="relative h-full w-8 flex items-center justify-end">
               <div className="absolute inset-0 bg-gradient-to-r from-transparent via-custom-background-90 to-custom-background-90 rounded-r" />
diff --git a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
index dfba73ed5f..c872479cfa 100644
--- a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
@@ -37,7 +37,7 @@ export const TabNavigationVisibleItem: React.FC<TTabNavigationVisibleItemProps>
   return (
     <div className="relative h-full flex items-center transition-all duration-300">
       {isActive && (
-        <span className="absolute bottom-0 w-[80%] left-1/2 -translate-x-1/2 h-0.5 bg-custom-text-300 rounded-t-md transition-all duration-300" />
+        <span className="absolute bottom-0 w-[80%] left-1/2 -translate-x-1/2 h-0.5 bg-layer-1 rounded-t-md transition-all duration-300" />
       )}
       <div key={`${item.key}-measure`} ref={itemRef}>
         <ContextMenu>
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index bae7116c26..ee45af689b 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -131,7 +131,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
             onClick={handleCurrentViewChange}
           >
             I want to join invited workspaces{" "}
-            <span className="bg-custom-primary-200 h-4 w-4 flex items-center justify-center rounded-xs text-11 font-medium text-on-color">
+            <span className="bg-accent-primary/80 h-4 w-4 flex items-center justify-center rounded-xs text-11 font-medium text-on-color">
               {invitedWorkspaces}
             </span>
           </Button>
diff --git a/apps/web/core/components/pages/header/offline-badge.tsx b/apps/web/core/components/pages/header/offline-badge.tsx
index d8b36abd96..fcb6adea1d 100644
--- a/apps/web/core/components/pages/header/offline-badge.tsx
+++ b/apps/web/core/components/pages/header/offline-badge.tsx
@@ -22,7 +22,7 @@ export const PageOfflineBadge = observer(function PageOfflineBadge({ page }: Pro
       tooltipContent="You can continue making changes. They will be synced when you are back online."
     >
       <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
-        <span className="flex-shrink-0 size-1.5 rounded-full bg-custom-text-300" />
+        <span className="flex-shrink-0 size-1.5 rounded-full bg-layer-1" />
         <span>Offline</span>
       </div>
     </Tooltip>
diff --git a/apps/web/core/components/power-k/ui/modal/context-indicator.tsx b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
index 9c45051499..0cf65341a8 100644
--- a/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
+++ b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
@@ -27,7 +27,7 @@ export function PowerKModalContextIndicator(props: Props) {
       <div className="max-w-full bg-layer-1 pl-2 pr-1 py-0.5 rounded-sm inline-flex items-center gap-1 truncate">
         <div className="flex items-center gap-1.5 text-11 font-medium truncate">
           <span className="shrink-0 text-secondary">{t(contextEntity.i18n_indicator)}</span>
-          <span className="shrink-0 bg-custom-text-200 size-1 rounded-full" />
+          <span className="shrink-0 bg-layer-1 size-1 rounded-full" />
           <p className="truncate">{contextIndicator}</p>
         </div>
         <button
diff --git a/apps/web/core/components/rich-filters/filters-toggle.tsx b/apps/web/core/components/rich-filters/filters-toggle.tsx
index 5da419b269..2789ee5e24 100644
--- a/apps/web/core/components/rich-filters/filters-toggle.tsx
+++ b/apps/web/core/components/rich-filters/filters-toggle.tsx
@@ -66,7 +66,7 @@ export const FiltersToggle = observer(function FiltersToggle<P extends TFilterPr
         {showFilterRowChangesPill && (
           <span
             className={cn("p-[3px] rounded-full bg-accent-primary absolute top-[0.2px] -right-[0.4px]", {
-              "bg-custom-text-300": hasAnyConditions === false && filter?.hasChanges === true, // If there are no conditions and there are changes, show the pill in the background color
+              "bg-layer-1": hasAnyConditions === false && filter?.hasChanges === true, // If there are no conditions and there are changes, show the pill in the background color
             })}
           />
         )}
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
index 28af118d69..2afe7f4b6f 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -108,7 +108,7 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
                 ) : (
                   <div className="flex items-center gap-1.5 overflow-hidden mr-2">
                     {range(30).map((index) => (
-                      <div key={index} className="h-1 w-1 rounded-full bg-custom-text-400 flex-shrink-0" />
+                      <div key={index} className="h-1 w-1 rounded-full bg-layer-1 flex-shrink-0" />
                     ))}
                   </div>
                 )}
diff --git a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
index ec3bba0d9e..064d9ee08b 100644
--- a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -68,7 +68,7 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
               </div>
               <div className="text-13 text-tertiary flex gap-2 capitalize w-fit">
                 <span>{getUserRole(workspace.role)?.toLowerCase() || "guest"}</span>
-                <div className="w-1 h-1 bg-custom-text-300/50 rounded-full m-auto" />
+                <div className="w-1 h-1 bg-layer-1/50 rounded-full m-auto" />
                 <span className="capitalize">{t("member", { count: workspace.total_members || 0 })}</span>
               </div>
             </div>
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
index 0e18ef438c..ba237eb509 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -76,7 +76,7 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
       closeOnSelect
     >
       <div className="flex flex-col gap-2">
-        <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
+        <span className="px-2 text-secondary truncate">{currentUser?.email}</span>
         <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account`)}>
           <div className="flex w-full items-center gap-2 rounded-sm text-11">
             <Settings className="h-4 w-4 stroke-[1.5]" />