diff --git a/apps/admin/app/(all)/(dashboard)/ai/form.tsx b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
index 473f6b739b..64c8200895 100644
--- a/apps/admin/app/(all)/(dashboard)/ai/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
@@ -42,7 +42,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/docs/models/overview"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -63,7 +63,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/api-keys"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -119,7 +119,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
 
-        <div className="relative inline-flex items-center gap-2 rounded-sm border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-11 text-custom-primary-200">
+        <div className="relative inline-flex items-center gap-2 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-4 py-2 text-11 text-custom-primary-200">
           <Lightbulb height="14" width="14" />
           <div>
             If you have a preferred AI models vendor, please get in{" "}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
index 1e04c9ec02..bb0655ba30 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
@@ -69,7 +69,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Gitea OAuth application settings.
@@ -91,7 +91,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Gitea OAuth application settings.
@@ -117,7 +117,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
index 519faa78c8..aebffbb523 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
@@ -60,7 +60,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -82,7 +82,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -116,7 +116,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -139,7 +139,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
index 2b5a93849e..ae48048e64 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
@@ -71,7 +71,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -94,7 +94,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -120,7 +120,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
index 10c8526859..3270597088 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
@@ -58,7 +58,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -80,7 +80,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -105,7 +105,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -127,7 +127,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
diff --git a/apps/admin/app/(all)/(dashboard)/general/form.tsx b/apps/admin/app/(all)/(dashboard)/general/form.tsx
index f21ae61c44..a7f88b84e6 100644
--- a/apps/admin/app/(all)/(dashboard)/general/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/form.tsx
@@ -123,7 +123,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
                 <a
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
-                  className="text-custom-primary-100 hover:underline"
+                  className="text-accent-primary hover:underline"
                   rel="noreferrer"
                 >
                   our Telemetry Policy.
diff --git a/apps/admin/app/(all)/(dashboard)/image/form.tsx b/apps/admin/app/(all)/(dashboard)/image/form.tsx
index 9227a5ba9b..c576835248 100644
--- a/apps/admin/app/(all)/(dashboard)/image/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/image/form.tsx
@@ -56,7 +56,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
               <a
                 href="https://unsplash.com/documentation#creating-a-developer-account"
                 target="_blank"
-                className="text-custom-primary-100 hover:underline"
+                className="text-accent-primary hover:underline"
                 rel="noreferrer"
               >
                 Learn more.
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
index 2d7f563e58..c1cd13de58 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
@@ -55,7 +55,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
           <a
             href={redirectionLink}
-            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded-sm border border-custom-primary-100/20 bg-custom-primary-100/10 text-11 text-custom-primary-200 whitespace-nowrap`}
+            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded-sm border border-accent-strong/20 bg-accent-primary/10 text-11 text-custom-primary-200 whitespace-nowrap`}
           >
             <ExternalLink size={14} />
             {!isSidebarCollapsed && "Redirect to Plane"}
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
index 5864d9c031..538f077eb3 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
@@ -72,7 +72,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
                   className={cn(
                     `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
                     isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      ? "bg-accent-primary/10 text-accent-primary"
                       : "text-secondary hover:bg-layer-1 focus:bg-layer-1",
                     isSidebarCollapsed ? "justify-center" : "w-[260px]"
                   )}
@@ -83,7 +83,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
                       <div
                         className={cn(
                           `text-13 font-medium transition-colors`,
-                          isActive ? "text-custom-primary-100" : "text-secondary"
+                          isActive ? "text-accent-primary" : "text-secondary"
                         )}
                       >
                         {item.name}
diff --git a/apps/admin/app/(all)/(home)/auth-banner.tsx b/apps/admin/app/(all)/(home)/auth-banner.tsx
index f1f45239da..61fc194719 100644
--- a/apps/admin/app/(all)/(home)/auth-banner.tsx
+++ b/apps/admin/app/(all)/(home)/auth-banner.tsx
@@ -14,13 +14,13 @@ export function AuthBanner(props: TAuthBanner) {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
       <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
+        <Info size={16} className="text-accent-primary" />
       </div>
-      <div className="w-full text-13 font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
         <CloseIcon className="w-4 h-4 flex-shrink-0" />
diff --git a/apps/space/core/components/account/auth-forms/auth-banner.tsx b/apps/space/core/components/account/auth-forms/auth-banner.tsx
index ba6cb25829..689fde5e94 100644
--- a/apps/space/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-banner.tsx
@@ -13,13 +13,13 @@ export function AuthBanner(props: TAuthBanner) {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
       <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
+        <Info size={16} className="text-accent-primary" />
       </div>
-      <div className="w-full text-13 font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
         <CloseIcon className="w-4 h-4 flex-shrink-0" />
diff --git a/apps/space/core/components/editor/embeds/mentions/user.tsx b/apps/space/core/components/editor/embeds/mentions/user.tsx
index c548eaaa87..33265537b2 100644
--- a/apps/space/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/space/core/components/editor/embeds/mentions/user.tsx
@@ -27,12 +27,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   return (
     <div
-      className={cn(
-        "not-prose inline px-1 py-0.5 rounded-sm bg-custom-primary-100/20 text-custom-primary-100 no-underline",
-        {
-          "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
-        }
-      )}
+      className={cn("not-prose inline px-1 py-0.5 rounded-sm bg-accent-primary/20 text-accent-primary no-underline", {
+        "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+      })}
     >
       @{userDetails?.member__display_name}
     </div>
diff --git a/apps/space/core/components/issues/filters/helpers/filter-option.tsx b/apps/space/core/components/issues/filters/helpers/filter-option.tsx
index 5b11d50c30..5d4cc9d45b 100644
--- a/apps/space/core/components/issues/filters/helpers/filter-option.tsx
+++ b/apps/space/core/components/issues/filters/helpers/filter-option.tsx
@@ -21,7 +21,7 @@ export function FilterOption(props: Props) {
     >
       <div
         className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-surface-2 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-strong"
+          isChecked ? "border-accent-strong bg-accent-primary text-white" : "border-strong"
         } ${multiple ? "rounded-xs" : "rounded-full"}`}
       >
         {isChecked && <Check size={10} strokeWidth={3} />}
diff --git a/apps/space/core/components/issues/filters/labels.tsx b/apps/space/core/components/issues/filters/labels.tsx
index aa8cc749b6..3db53f0253 100644
--- a/apps/space/core/components/issues/filters/labels.tsx
+++ b/apps/space/core/components/issues/filters/labels.tsx
@@ -59,7 +59,7 @@ export function FilterLabels(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/apps/space/core/components/issues/filters/state.tsx b/apps/space/core/components/issues/filters/state.tsx
index 4d5e0c673a..6ea374eb53 100644
--- a/apps/space/core/components/issues/filters/state.tsx
+++ b/apps/space/core/components/issues/filters/state.tsx
@@ -59,7 +59,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index ee97e6d07d..3eada89fb8 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -88,7 +88,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <KanbanIssueBlockLoader />
   ) : (
     <div
-      className="w-full p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+      className="w-full p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
       onClick={loadMoreIssuesInThisGroup}
     >
       {" "}
diff --git a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx b/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
index 9b01da965f..fcb3d4fed0 100644
--- a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
@@ -94,7 +94,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   ) : (
     <div
       className={
-        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
       }
       onClick={() => loadMoreIssues(group.id)}
     >
diff --git a/apps/space/core/components/issues/issue-layouts/properties/priority.tsx b/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
index b2c69b727c..f622ffaeeb 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
@@ -22,7 +22,7 @@ export function IssueBlockPriority({
     urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
     high: "bg-orange-500/20 text-orange-950 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
+    low: "bg-accent-primary/20 text-custom-primary-950 border-accent-strong",
     none: "hover:bg-layer-1 border-strong",
   };
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
index 697f74b282..c6fe1fc33a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -29,7 +29,7 @@ export function ProfileNavbar(props: Props) {
             <span
               className={`flex whitespace-nowrap border-b-2 p-4 text-13 font-medium outline-none ${
                 pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
-                  ? "border-custom-primary-100 text-custom-primary-100"
+                  ? "border-accent-strong text-accent-primary"
                   : "border-transparent"
               }`}
             >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index 43ba954a9e..ce8f2d82f1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -93,7 +93,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
               tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
               position="bottom"
             >
-              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-11 font-semibold rounded-xl">
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl">
                 {issueCount}
               </span>
             </Tooltip>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 17b3f1fca8..7ac559c47c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -173,7 +173,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
                 } in this cycle`}
                 position="bottom"
               >
-                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-11 font-semibold text-custom-primary-100">
+                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
                   {workItemsCount}
                 </span>
               </Tooltip>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 6b5e9fdc23..fb1d517d09 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -163,7 +163,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
                 } in this module`}
                 position="bottom"
               >
-                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-11 font-semibold text-custom-primary-100">
+                <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
                   {workItemsCount}
                 </span>
               </Tooltip>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx
index e27bfd2be9..89ccd32dcb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx
@@ -25,7 +25,7 @@ export const MobileWorkspaceSettingsTabs = observer(function MobileWorkspaceSett
             <div
               className={`${
                 item.highlight(pathname, `/${workspaceSlug}`)
-                  ? "text-custom-primary-100 text-13 py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
+                  ? "text-accent-primary text-13 py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
                   : "text-secondary flex flex-grow cursor-pointer justify-around border-b border-subtle-1 text-13 py-2 px-3 whitespace-nowrap"
               }`}
               key={index}
diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx
index 164919799a..078353067e 100644
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -153,7 +153,7 @@ function UserInvitationsPage() {
                       <div
                         key={invitation.id}
                         className={`flex cursor-pointer items-center gap-2 rounded-sm border px-3.5 py-5 ${
-                          isSelected ? "border-custom-primary-100" : "border-subtle-1 hover:bg-layer-1"
+                          isSelected ? "border-accent-strong" : "border-subtle-1 hover:bg-layer-1"
                         }`}
                         onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                       >
@@ -168,7 +168,7 @@ function UserInvitationsPage() {
                           <div className="text-13 font-medium">{truncateText(invitation.workspace.name, 30)}</div>
                           <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
                         </div>
-                        <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-secondary"}`}>
+                        <span className={`flex-shrink-0 ${isSelected ? "text-accent-primary" : "text-secondary"}`}>
                           <CheckCircle2 className="h-5 w-5" />
                         </span>
                       </div>
diff --git a/apps/web/app/error/prod.tsx b/apps/web/app/error/prod.tsx
index 06457190e6..0bb21c3627 100644
--- a/apps/web/app/error/prod.tsx
+++ b/apps/web/app/error/prod.tsx
@@ -65,7 +65,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
                   href={link.value}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-custom-primary-100 hover:underline text-13"
+                  className="text-accent-primary hover:underline text-13"
                 >
                   {link.label}
                 </a>
diff --git a/apps/web/ce/components/global/product-updates/header.tsx b/apps/web/ce/components/global/product-updates/header.tsx
index cbcb031e07..0f6d26e572 100644
--- a/apps/web/ce/components/global/product-updates/header.tsx
+++ b/apps/web/ce/components/global/product-updates/header.tsx
@@ -12,7 +12,7 @@ export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
         <div className="flex gap-2 text-18 font-medium">{t("whats_new")}</div>
         <div
           className={cn(
-            "px-2 mx-2 py-0.5 text-center text-11 font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100"
+            "px-2 mx-2 py-0.5 text-center text-11 font-medium rounded-full bg-accent-primary/20 text-accent-primary"
           )}
         >
           {t("version")}: v{packageJson.version}
diff --git a/apps/web/ce/components/instance/maintenance-message.tsx b/apps/web/ce/components/instance/maintenance-message.tsx
index 69449b7378..e8dc103529 100644
--- a/apps/web/ce/components/instance/maintenance-message.tsx
+++ b/apps/web/ce/components/instance/maintenance-message.tsx
@@ -25,7 +25,7 @@ export function MaintenanceMessage() {
               href={link.value}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-custom-primary-100 hover:underline text-13"
+              className="text-accent-primary hover:underline text-13"
             >
               {link.label}
             </a>
diff --git a/apps/web/ce/components/issues/header.tsx b/apps/web/ce/components/issues/header.tsx
index 58b6ab1c3d..d04591a3ef 100644
--- a/apps/web/ce/components/issues/header.tsx
+++ b/apps/web/ce/components/issues/header.tsx
@@ -89,7 +89,7 @@ export const IssuesHeader = observer(function IssuesHeader() {
         {currentProjectDetails?.anchor ? (
           <a
             href={publishedURL}
-            className="group flex items-center gap-1.5 rounded-sm bg-custom-primary-100/10 px-2.5 py-1 text-11 font-medium text-custom-primary-100"
+            className="group flex items-center gap-1.5 rounded-sm bg-accent-primary/10 px-2.5 py-1 text-11 font-medium text-accent-primary"
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/apps/web/ce/components/onboarding/tour/root.tsx b/apps/web/ce/components/onboarding/tour/root.tsx
index f4499a22a0..b8e8f938bb 100644
--- a/apps/web/ce/components/onboarding/tour/root.tsx
+++ b/apps/web/ce/components/onboarding/tour/root.tsx
@@ -91,7 +91,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
       {step === "welcome" ? (
         <div className="w-4/5 overflow-hidden rounded-[10px] bg-surface-1 md:w-1/2 lg:w-2/5">
           <div className="h-full overflow-hidden">
-            <div className="grid h-64 place-items-center bg-custom-primary-100">
+            <div className="grid h-64 place-items-center bg-accent-primary">
               <PlaneLockup className="h-10 w-auto text-white" />
             </div>
             <div className="flex flex-col overflow-y-auto p-6">
@@ -117,7 +117,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                   </Button>
                   <button
                     type="button"
-                    className="bg-transparent text-11 font-medium text-custom-primary-100 outline-custom-text-100"
+                    className="bg-transparent text-11 font-medium text-accent-primary outline-custom-text-100"
                     onClick={() => {
                       captureClick({
                         elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,
@@ -144,7 +144,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
             <div
-              className={`flex h-1/2 items-end overflow-hidden bg-custom-primary-100 sm:h-3/5 ${
+              className={`flex h-1/2 items-end overflow-hidden bg-accent-primary sm:h-3/5 ${
                 currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
               }`}
             >
diff --git a/apps/web/ce/components/onboarding/tour/sidebar.tsx b/apps/web/ce/components/onboarding/tour/sidebar.tsx
index 956404b92f..2a41cd503b 100644
--- a/apps/web/ce/components/onboarding/tour/sidebar.tsx
+++ b/apps/web/ce/components/onboarding/tour/sidebar.tsx
@@ -54,9 +54,7 @@ export function TourSidebar({ step, setStep }: Props) {
           <h5
             key={option.key}
             className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-13 font-medium capitalize ${
-              step === option.key
-                ? "border-custom-primary-100 text-custom-primary-100"
-                : "border-transparent text-secondary"
+              step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
             }`}
             onClick={() => setStep(option.key)}
             role="button"
diff --git a/apps/web/ce/components/pages/editor/ai/menu.tsx b/apps/web/ce/components/pages/editor/ai/menu.tsx
index a56d1aa2f4..46fd74f8e7 100644
--- a/apps/web/ce/components/pages/editor/ai/menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/menu.tsx
@@ -271,7 +271,7 @@ export function EditorAIMenu(props: Props) {
                     className={cn(
                       "p-1 text-11 text-secondary font-medium bg-layer-1 rounded-sm transition-colors outline-none",
                       {
-                        "bg-custom-primary-100/20 text-custom-primary-100": tone.key === "default",
+                        "bg-accent-primary/20 text-accent-primary": tone.key === "default",
                       }
                     )}
                     onClick={(e) => {
diff --git a/apps/web/ce/components/pages/header/lock-control.tsx b/apps/web/ce/components/pages/header/lock-control.tsx
index 766e915733..dddc7e6bf3 100644
--- a/apps/web/ce/components/pages/header/lock-control.tsx
+++ b/apps/web/ce/components/pages/header/lock-control.tsx
@@ -93,7 +93,7 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
           type="button"
           onClick={toggleLock}
           data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
-          className="h-6 flex items-center gap-1 px-2 rounded-sm text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
+          className="h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20 hover:bg-accent-primary/30 transition-colors"
           aria-label="Locked"
         >
           <LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />
diff --git a/apps/web/ce/components/workspace-notifications/notification-card/root.tsx b/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
index 59edaaf020..fa15b8a56b 100644
--- a/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
+++ b/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
@@ -44,7 +44,7 @@ export const NotificationCardListRoot = observer(function NotificationCardListRo
             </div>
           ) : (
             <div className="py-4 flex justify-center items-center text-13 font-medium" onClick={getNextNotifications}>
-              <div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">
+              <div className="text-custom-primary-90 hover:text-accent-primary transition-all cursor-pointer">
                 {t("load_more")}
               </div>
             </div>
diff --git a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
index a89e539fa2..a8a2e8357b 100644
--- a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
@@ -69,7 +69,7 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
         <div className="flex w-full gap-2 items-center text-18 font-medium">
           <span className="transition-all duration-300">{subscriptionName}</span>
           {subscriptionType === EProductSubscriptionEnum.PRO && (
-            <span className="px-2 rounded-sm text-custom-primary-200 bg-custom-primary-100/20 text-11">Popular</span>
+            <span className="px-2 rounded-sm text-custom-primary-200 bg-accent-primary/20 text-11">Popular</span>
           )}
         </div>
         <div className="flex gap-x-2 items-start text-tertiary pb-1 transition-all duration-300 animate-slide-up">
diff --git a/apps/web/ce/components/workspace/upgrade-badge.tsx b/apps/web/ce/components/workspace/upgrade-badge.tsx
index 36e36b4db7..e9116b9139 100644
--- a/apps/web/ce/components/workspace/upgrade-badge.tsx
+++ b/apps/web/ce/components/workspace/upgrade-badge.tsx
@@ -16,7 +16,7 @@ export function UpgradeBadge(props: TUpgradeBadge) {
   return (
     <div
       className={cn(
-        "w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-custom-primary-100/20 text-center font-medium outline-none",
+        "w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-accent-primary/20 text-center font-medium outline-none",
         {
           "text-13 px-3": size === "md",
           "text-11 px-2": size === "sm",
diff --git a/apps/web/core/components/account/auth-forms/auth-banner.tsx b/apps/web/core/components/account/auth-forms/auth-banner.tsx
index 359781f4d4..d8268c576b 100644
--- a/apps/web/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-banner.tsx
@@ -21,15 +21,15 @@ export function AuthBanner(props: TAuthBanner) {
   return (
     <div
       role="alert"
-      className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10"
+      className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10"
     >
       <div className="size-4 flex-shrink-0 grid place-items-center">
-        <Info size={16} className="text-custom-primary-100" />
+        <Info size={16} className="text-accent-primary" />
       </div>
-      <p className="w-full text-13 font-medium text-custom-primary-100">{bannerData?.message}</p>
+      <p className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</p>
       <button
         type="button"
-        className="relative ml-auto size-6 rounded-xs grid place-items-center transition-all hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        className="relative ml-auto size-6 rounded-xs grid place-items-center transition-all hover:bg-accent-primary/20 text-accent-primary/80"
         onClick={() => handleBannerData?.(undefined)}
         aria-label={t("aria_labels.auth_forms.close_alert")}
       >
diff --git a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
index ff0854db83..5b6c50d512 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
@@ -30,7 +30,7 @@ export function ForgotPasswordPopover() {
         <button
           type="button"
           ref={setReferenceElement}
-          className="text-11 font-medium text-custom-primary-100 outline-none"
+          className="text-11 font-medium text-accent-primary outline-none"
         >
           {t("auth.common.forgot_password")}
         </button>
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 2e5b1c2a62..162805ecee 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -84,7 +84,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           <Link
             data-ph-element={AUTH_TRACKER_ELEMENTS.FORGOT_PASSWORD_FROM_SIGNIN}
             href={`/accounts/forgot-password?email=${encodeURIComponent(email)}`}
-            className="text-11 font-medium text-custom-primary-100"
+            className="text-11 font-medium text-accent-primary"
           >
             {t("auth.common.forgot_password")}
           </Link>
@@ -130,7 +130,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           </div>
           <div className="w-full text-13 font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
           <div
-            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
+            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-accent-primary/80"
             onClick={() => setBannerMessage(false)}
           >
             <CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" />
diff --git a/apps/web/core/components/archives/archive-tabs-list.tsx b/apps/web/core/components/archives/archive-tabs-list.tsx
index 8574ef98a3..9abed7b8ec 100644
--- a/apps/web/core/components/archives/archive-tabs-list.tsx
+++ b/apps/web/core/components/archives/archive-tabs-list.tsx
@@ -50,7 +50,7 @@ export const ArchiveTabsList = observer(function ArchiveTabsList() {
               <span
                 className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 py-4 px-4 text-13 font-medium outline-none ${
                   pathname.includes(tab.key)
-                    ? "border-custom-primary-100 text-custom-primary-100"
+                    ? "border-accent-strong text-accent-primary"
                     : "border-transparent hover:border-subtle-1 text-tertiary hover:text-placeholder"
                 }`}
               >
diff --git a/apps/web/core/components/auth-screens/header.tsx b/apps/web/core/components/auth-screens/header.tsx
index 215b268cb7..28e3b61aff 100644
--- a/apps/web/core/components/auth-screens/header.tsx
+++ b/apps/web/core/components/auth-screens/header.tsx
@@ -46,7 +46,7 @@ export const AuthHeader = observer(function AuthHeader({ type }: AuthHeaderProps
             <Link
               data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP}
               href={authContentMap[type].linkHref}
-              className="font-semibold text-custom-primary-100 hover:underline"
+              className="font-semibold text-accent-primary hover:underline"
             >
               {t(authContentMap[type].linkText)}
             </Link>
diff --git a/apps/web/core/components/comments/card/display.tsx b/apps/web/core/components/comments/card/display.tsx
index 4fd6ecabcb..452942e9c3 100644
--- a/apps/web/core/components/comments/card/display.tsx
+++ b/apps/web/core/components/comments/card/display.tsx
@@ -49,7 +49,7 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: Pr
 
   useEffect(() => {
     if (!isHashMatch) return;
-    setHighlightClassName("border-custom-primary-100");
+    setHighlightClassName("border-accent-strong");
     const timeout = setTimeout(() => {
       setHighlightClassName("");
     }, 8000);
diff --git a/apps/web/core/components/common/count-chip.tsx b/apps/web/core/components/common/count-chip.tsx
index 3dc4caef03..31dee984ae 100644
--- a/apps/web/core/components/common/count-chip.tsx
+++ b/apps/web/core/components/common/count-chip.tsx
@@ -13,7 +13,7 @@ export function CountChip(props: TCountChip) {
   return (
     <div
       className={cn(
-        "relative flex justify-center items-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-11 font-semibold rounded-xl",
+        "relative flex justify-center items-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl",
         className
       )}
     >
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
index 9cbd1335cb..c3ba0eaea7 100644
--- a/apps/web/core/components/common/filters/created-by.tsx
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -85,7 +85,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/core/content-overflow-HOC.tsx b/apps/web/core/components/core/content-overflow-HOC.tsx
index 8b17d07755..bb912a4494 100644
--- a/apps/web/core/components/core/content-overflow-HOC.tsx
+++ b/apps/web/core/components/core/content-overflow-HOC.tsx
@@ -18,7 +18,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
   const {
     children,
     maxHeight = 625,
-    buttonClassName = "text-13 font-medium text-custom-primary-100",
+    buttonClassName = "text-13 font-medium text-accent-primary",
     containerClassName,
     fallback = null,
     customButton,
@@ -142,7 +142,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
           {customButton || (
             <button
               className={cn(
-                "gap-1 w-full text-custom-primary-100 text-13 font-medium transition-opacity duration-300",
+                "gap-1 w-full text-accent-primary text-13 font-medium transition-opacity duration-300",
                 buttonClassName
               )}
               onClick={handleToggle}
diff --git a/apps/web/core/components/cycles/list/cycles-list-item.tsx b/apps/web/core/components/cycles/list/cycles-list-item.tsx
index 0f651ee8fa..15a0c763ed 100644
--- a/apps/web/core/components/cycles/list/cycles-list-item.tsx
+++ b/apps/web/core/components/cycles/list/cycles-list-item.tsx
@@ -82,7 +82,7 @@ export const CyclesListItem = observer(function CyclesListItem(props: TCyclesLis
       prependTitleElement={
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {progress === 100 ? (
-            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            <Check className="h-3 w-3 stroke-[2] text-accent-primary" />
           ) : (
             <span className="text-9 text-primary">{`${progress}%`}</span>
           )}
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index eb9d6b33c5..899b506530 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -67,7 +67,7 @@ function BorderButton(props: ButtonProps) {
     urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
     high: "bg-orange-500/20 text-orange-950 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
+    low: "bg-accent-primary/20 text-custom-primary-950 border-accent-strong",
     none: "hover:bg-layer-1 border-strong",
   };
 
diff --git a/apps/web/core/components/editor/embeds/mentions/user.tsx b/apps/web/core/components/editor/embeds/mentions/user.tsx
index afe0e0b697..907d7380dc 100644
--- a/apps/web/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/user.tsx
@@ -41,12 +41,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   return (
     <div
-      className={cn(
-        "not-prose inline px-1 py-0.5 rounded-sm bg-custom-primary-100/20 text-custom-primary-100 no-underline",
-        {
-          "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
-        }
-      )}
+      className={cn("not-prose inline px-1 py-0.5 rounded-sm bg-accent-primary/20 text-accent-primary no-underline", {
+        "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+      })}
     >
       <Popover delay={100} openOnHover>
         <Popover.Button>
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 e25783d31a..8d9c8a1f29 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-custom-primary-100 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-custom-primary-200 disabled:bg-custom-text-400 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 369cd93c8c..7d0113d234 100644
--- a/apps/web/core/components/estimates/radio-select.tsx
+++ b/apps/web/core/components/estimates/radio-select.tsx
@@ -63,7 +63,7 @@ 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-custom-primary-100 ` : ``,
+                selected === value ? `bg-custom-primary-200 border-accent-strong ` : ``,
                 disabled ? `bg-custom-background-200 border-subtle-1 cursor-not-allowed` : ``,
                 inputButtonClassName
               )}
diff --git a/apps/web/core/components/estimates/root.tsx b/apps/web/core/components/estimates/root.tsx
index 8aaf3051d0..6fa3dddf55 100644
--- a/apps/web/core/components/estimates/root.tsx
+++ b/apps/web/core/components/estimates/root.tsx
@@ -103,7 +103,7 @@ export const EstimateRoot = observer(function EstimateRoot(props: TEstimateRoot)
                   <a
                     href={"https://docs.plane.so/core-concepts/projects/run-project#estimate"}
                     target="_blank"
-                    className="text-custom-primary-100/80 hover:text-custom-primary-100"
+                    className="text-accent-primary/80 hover:text-accent-primary"
                   >
                     here.
                   </a>
diff --git a/apps/web/core/components/exporter/column.tsx b/apps/web/core/components/exporter/column.tsx
index 349705c095..468ff01391 100644
--- a/apps/web/core/components/exporter/column.tsx
+++ b/apps/web/core/components/exporter/column.tsx
@@ -94,7 +94,7 @@ export const useExportColumns = () => {
           <>
             {rowData.status == "completed" ? (
               <a target="_blank" href={rowData?.url} rel="noopener noreferrer">
-                <button className="w-full flex items-center gap-1 text-custom-primary-100 font-medium">
+                <button className="w-full flex items-center gap-1 text-accent-primary font-medium">
                   <Download className="h-4 w-4" />
                   <div>Download</div>
                 </button>
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index efbce953d5..58da07ee73 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -79,9 +79,9 @@ export const PrevExports = observer(function PrevExports(props: Props) {
           <button
             disabled={!exporterServices?.prev_page_results}
             onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
-            className={`flex items-center rounded-sm border border-custom-primary-100 px-1 text-custom-primary-100 ${
+            className={`flex items-center rounded-sm border border-accent-strong px-1 text-accent-primary ${
               exporterServices?.prev_page_results
-                ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                ? "cursor-pointer hover:bg-accent-primary hover:text-white"
                 : "cursor-not-allowed opacity-75"
             }`}
           >
@@ -91,9 +91,9 @@ export const PrevExports = observer(function PrevExports(props: Props) {
           <button
             disabled={!exporterServices?.next_page_results}
             onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
-            className={`flex items-center rounded-sm border border-custom-primary-100 px-1 text-custom-primary-100 ${
+            className={`flex items-center rounded-sm border border-accent-strong px-1 text-accent-primary ${
               exporterServices?.next_page_results
-                ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                ? "cursor-pointer hover:bg-accent-primary hover:text-white"
                 : "cursor-not-allowed opacity-75"
             }`}
           >
diff --git a/apps/web/core/components/gantt-chart/blocks/block-row.tsx b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
index 982a40eb3d..b6fcb22c37 100644
--- a/apps/web/core/components/gantt-chart/blocks/block-row.tsx
+++ b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
@@ -86,8 +86,8 @@ export const BlockRow = observer(function BlockRow(props: Props) {
         className={cn("relative h-full", {
           "rounded-l-sm border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
           "bg-surface-2": isBlockHoveredOn,
-          "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isBlockSelected,
-          "bg-custom-primary-100/10": isBlockSelected && isBlockHoveredOn,
+          "bg-accent-primary/5 hover:bg-accent-primary/10": isBlockSelected,
+          "bg-accent-primary/10": isBlockSelected && isBlockHoveredOn,
           "border border-r-0 border-strong-1": isBlockFocused,
         })}
       >
diff --git a/apps/web/core/components/gantt-chart/chart/views/month.tsx b/apps/web/core/components/gantt-chart/chart/views/month.tsx
index 8fe7318bd1..f7fdb66343 100644
--- a/apps/web/core/components/gantt-chart/chart/views/month.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/month.tsx
@@ -50,7 +50,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
                   >
                     {monthBlock?.title}
                     {monthBlock.today && (
-                      <span className={cn("rounded-sm ml-2 font-medium bg-custom-primary-100 px-1 text-9 text-white")}>
+                      <span className={cn("rounded-sm ml-2 font-medium bg-accent-primary px-1 text-9 text-white")}>
                         Current
                       </span>
                     )}
@@ -66,7 +66,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
                   className={cn(
                     "flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
                     {
-                      "bg-custom-primary-100/20": weekBlock.today,
+                      "bg-accent-primary/20": weekBlock.today,
                     }
                   )}
                   style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
@@ -74,7 +74,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
                   <div className="space-x-1 text-11 font-medium text-placeholder">
                     <span
                       className={cn({
-                        "rounded-sm bg-custom-primary-100 px-1 text-white": weekBlock.today,
+                        "rounded-sm bg-accent-primary px-1 text-white": weekBlock.today,
                       })}
                     >
                       {weekBlock.startDate.getDate()}-{weekBlock.endDate.getDate()}
@@ -91,7 +91,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
               <div
                 key={`column-${weekBlock.startDate}-${weekBlock.endDate}`}
                 className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
-                  "bg-custom-primary-100/20": weekBlock.today,
+                  "bg-accent-primary/20": weekBlock.today,
                 })}
                 style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
               />
diff --git a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
index 2ad8895b95..14ba3ed176 100644
--- a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
@@ -40,7 +40,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
                 >
                   {quarterBlock?.title}
                   {quarterBlock.today && (
-                    <span className={cn("rounded-sm ml-2 font-medium  bg-custom-primary-100 px-1 text-9 text-white")}>
+                    <span className={cn("rounded-sm ml-2 font-medium  bg-accent-primary px-1 text-9 text-white")}>
                       Current
                     </span>
                   )}
@@ -57,7 +57,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
                     className={cn(
                       "flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline outline-subtle-1",
                       {
-                        "bg-custom-primary-100/20": monthBlock.today,
+                        "bg-accent-primary/20": monthBlock.today,
                       }
                     )}
                     style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
@@ -65,7 +65,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
                     <div className="space-x-1 flex items-center justify-center text-11 font-medium h-full">
                       <span
                         className={cn({
-                          "rounded-lg bg-custom-primary-100 px-2 text-white": monthBlock.today,
+                          "rounded-lg bg-accent-primary px-2 text-white": monthBlock.today,
                         })}
                       >
                         {monthBlock.monthData.shortTitle}
@@ -81,7 +81,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
                 <div
                   key={`column-${rootIndex}-${index}`}
                   className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", {
-                    "bg-custom-primary-100/20": monthBlock.today,
+                    "bg-accent-primary/20": monthBlock.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
                 />
diff --git a/apps/web/core/components/gantt-chart/chart/views/week.tsx b/apps/web/core/components/gantt-chart/chart/views/week.tsx
index fb09b4d18a..0be60c93b8 100644
--- a/apps/web/core/components/gantt-chart/chart/views/week.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/week.tsx
@@ -49,7 +49,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
                     className={cn(
                       "flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline outline-subtle-1",
                       {
-                        "bg-custom-primary-100/20": weekDay.today,
+                        "bg-accent-primary/20": weekDay.today,
                       }
                     )}
                     style={{ width: `${currentViewData?.data.dayWidth}px` }}
@@ -58,7 +58,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
                     <div className="space-x-1 text-11 font-medium">
                       <span
                         className={cn({
-                          "rounded-sm bg-custom-primary-100 px-1 text-white": weekDay.today,
+                          "rounded-sm bg-accent-primary px-1 text-white": weekDay.today,
                         })}
                       >
                         {weekDay.date.getDate()}
@@ -74,7 +74,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
                 <div
                   key={`column-${rootIndex}-${index}`}
                   className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", {
-                    "bg-custom-primary-100/20": weekDay.today,
+                    "bg-accent-primary/20": weekDay.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth}px` }}
                 >
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
index c061245ded..d386862d90 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -49,8 +49,8 @@ export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Pr
       <Row
         className={cn("group w-full flex items-center gap-2 pr-4", {
           "bg-surface-2": isBlockHoveredOn,
-          "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
-          "bg-custom-primary-100/10": isIssueSelected && isBlockHoveredOn,
+          "bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
+          "bg-accent-primary/10": isIssueSelected && isBlockHoveredOn,
         })}
         style={{
           height: `${BLOCK_HEIGHT}px`,
diff --git a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
index 8f5472e059..35174025a6 100644
--- a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -153,7 +153,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
             <div key={item.id} className="flex flex-col p-4 bg-surface-1 rounded-xl border border-subtle-1/40">
               <div
                 className={cn("grid place-items-center bg-surface-2 rounded-full size-9 mb-3 text-placeholder", {
-                  "text-custom-primary-100 bg-custom-primary-100/10": !isStateComplete,
+                  "text-accent-primary bg-accent-primary/10": !isStateComplete,
                 })}
               >
                 <span className="text-24 my-auto">{item.icon}</span>
@@ -162,7 +162,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
               <p className="text-11 text-tertiary mb-2">{t(item.description)}</p>
               {isStateComplete ? (
                 <div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1 w-fit">
-                  <Check className="size-3 text-custom-primary-100 text-white" />
+                  <Check className="size-3 text-accent-primary text-white" />
                 </div>
               ) : (
                 !item.cta.disabled &&
@@ -180,14 +180,14 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
                         [item.flag]: true,
                       });
                     }}
-                    className={cn("text-custom-primary-100 hover:text-custom-primary-200 text-13 font-medium", {})}
+                    className={cn("text-accent-primary hover:text-custom-primary-200 text-13 font-medium", {})}
                   >
                     {t(item.cta.text)}
                   </Link>
                 ) : (
                   <button
                     type="button"
-                    className="text-custom-primary-100 hover:text-custom-primary-200 text-13 font-medium"
+                    className="text-accent-primary hover:text-custom-primary-200 text-13 font-medium"
                     onClick={item.cta.onClick}
                   >
                     {t(item.cta.text)}
diff --git a/apps/web/core/components/home/widgets/links/root.tsx b/apps/web/core/components/home/widgets/links/root.tsx
index e880221023..12f245a47b 100644
--- a/apps/web/core/components/home/widgets/links/root.tsx
+++ b/apps/web/core/components/home/widgets/links/root.tsx
@@ -44,7 +44,7 @@ export const DashboardQuickLinks = observer(function DashboardQuickLinks(props:
           <div className="text-14 font-semibold text-custom-text-350">{t("home.quick_links.title_plural")}</div>
           <button
             onClick={handleCreateLinkModal}
-            className="flex gap-1 text-13 font-medium text-custom-primary-100 my-auto"
+            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
           >
             <Plus className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
           </button>
diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index 35d3bc9291..17d3cb93de 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -92,10 +92,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
       )}
       <PanelLeft
         onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-        className={cn(
-          "w-4 h-4 flex-shrink-0 mr-2 my-auto",
-          isMobileSidebar ? "text-custom-primary-100" : "text-secondary"
-        )}
+        className={cn("w-4 h-4 flex-shrink-0 mr-2 my-auto", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
       />
       <div className="flex items-center gap-2 w-full bg-surface-1 z-[15]">
         <div className="flex items-center gap-x-2">
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
index 20d147511a..7d7884c26b 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -65,7 +65,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
index 241452603d..a9831be68e 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -94,7 +94,7 @@ export const FilterMember = observer(function FilterMember(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
index 4b7679c13e..147e402014 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -70,7 +70,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/inbox/root.tsx b/apps/web/core/components/inbox/root.tsx
index ae883c2478..8a10db48f4 100644
--- a/apps/web/core/components/inbox/root.tsx
+++ b/apps/web/core/components/inbox/root.tsx
@@ -74,7 +74,7 @@ export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssu
         <div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-subtle-1">
           <PanelLeft
             onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-            className={cn("w-4 h-4 ", isMobileSidebar ? "text-custom-primary-100" : " text-secondary")}
+            className={cn("w-4 h-4 ", isMobileSidebar ? "text-accent-primary" : " text-secondary")}
           />
         </div>
       )}
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
index 14d115071c..84b1915854 100644
--- a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
+++ b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -60,7 +60,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
         <Row
           className={cn(
             `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
-            { "border-custom-primary-100 border": selectedInboxIssueId === issue.id }
+            { "border-accent-strong border": selectedInboxIssueId === issue.id }
           )}
         >
           <div className="space-y-1">
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index e67d45eaff..7d89f271d8 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -85,7 +85,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
               key={option?.key}
               className={cn(
                 `text-13 relative flex items-center gap-1 h-full px-3 cursor-pointer transition-all font-medium`,
-                currentTab === option?.key ? `text-custom-primary-100` : `hover:text-secondary`
+                currentTab === option?.key ? `text-accent-primary` : `hover:text-secondary`
               )}
               onClick={() => {
                 if (currentTab != option?.key) {
@@ -96,14 +96,14 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
             >
               <div>{t(option?.i18n_label)}</div>
               {option?.key === "open" && currentTab === option?.key && (
-                <div className="rounded-full p-1.5 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 text-11 font-semibold">
+                <div className="rounded-full p-1.5 py-0.5 bg-accent-primary/20 text-accent-primary text-11 font-semibold">
                   {inboxIssuePaginationInfo?.total_results || 0}
                 </div>
               )}
               <div
                 className={cn(
                   `border absolute bottom-0 right-0 left-0 rounded-t-md`,
-                  currentTab === option?.key ? `border-custom-primary-100` : `border-transparent`
+                  currentTab === option?.key ? `border-accent-strong` : `border-transparent`
                 )}
               />
             </div>
diff --git a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
index 20e527fb35..acca0861ec 100644
--- a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -11,8 +11,8 @@ export function BulkOperationsUpgradeBanner(props: Props) {
 
   return (
     <div className={cn("sticky bottom-0 left-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
-      <div className="h-14 w-full bg-custom-primary-100/10 border-[0.5px] border-custom-primary-100/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
-        <p className="text-custom-primary-100 font-medium">
+      <div className="h-14 w-full bg-accent-primary/10 border-[0.5px] border-accent-strong/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
+        <p className="text-accent-primary font-medium">
           Change state, priority, and more for several work items at once. Save three minutes on an average per
           operation.
         </p>
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
index 518d7eb9f8..569929a432 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
@@ -50,7 +50,7 @@ export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(p
                 isFilterApplied && "bg-custom-primary-60/20"
               )}
             >
-              {isFilterApplied && <span className="p-1 rounded-full bg-custom-primary-100 absolute -top-1 -right-1" />}
+              {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}
               <SlidersHorizontal className="h-3.5 w-3.5 text-primary" />
             </div>
           }
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
index bd2b75f8e2..7a1f55e8f9 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
@@ -48,7 +48,7 @@ export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssu
               isFilterApplied && "bg-custom-primary-60/20"
             )}
           >
-            {isFilterApplied && <span className="p-1 rounded-full bg-custom-primary-100 absolute -top-1 -right-1" />}
+            {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}
             <ListFilter className="h-3.5 w-3.5 text-primary" />
           </div>
         }
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
index aec8b3ec41..886e91f136 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -32,7 +32,7 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
         >
           <span className="text-secondary">{t("common.filters")}</span>
           {selectedFilters.length < filterOptions.length && (
-            <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
+            <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
           )}
         </Button>
       }
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index 1ec5f86489..7f379505a3 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -80,7 +80,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
         size="sm"
         prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
         variant="outline-primary"
-        className="hover:!bg-custom-primary-100/20"
+        className="hover:!bg-accent-primary/20"
         onClick={handleSubscription}
         disabled={!isEditable || loading}
       >
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
index 98ecd422e7..01ba0ac4f8 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -158,7 +158,7 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
         >
           {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
           {isToday ? (
-            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-primary-100 text-white">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-accent-primary text-white">
               {date.date.getDate()}
             </span>
           ) : (
@@ -207,8 +207,8 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
         >
           <div
             className={cn("size-6 flex items-center justify-center rounded-full", {
-              "bg-custom-primary-100 text-white": isSelectedDate,
-              "bg-custom-primary-100/10 text-custom-primary-100 ": isToday && !isSelectedDate,
+              "bg-accent-primary text-white": isSelectedDate,
+              "bg-accent-primary/10 text-accent-primary ": isToday && !isSelectedDate,
             })}
           >
             {date.date.getDate()}
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 b273adf899..39a60970cd 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
@@ -107,7 +107,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-custom-primary-100": isDragging,
+                      "bg-surface-2 shadow-custom-shadow-rg border-accent-strong": isDragging,
                       "bg-surface-1 hover:bg-surface-2": !isDragging,
                       "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
                     }
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
index 746fbdd6c6..04a0e251d4 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -99,7 +99,7 @@ export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props:
         <div className="flex items-center px-2.5 py-1">
           <button
             type="button"
-            className="w-min whitespace-nowrap rounded-sm text-11 px-1.5 py-1 font-medium  hover:bg-layer-1 text-custom-primary-100 hover:text-custom-primary-200"
+            className="w-min whitespace-nowrap rounded-sm text-11 px-1.5 py-1 font-medium  hover:bg-layer-1 text-accent-primary hover:text-custom-primary-200"
             onClick={() => loadMoreIssues(formattedDatePayload)}
           >
             {t("common.load_more")}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
index 7b22b01c59..542f81e931 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
@@ -27,7 +27,7 @@ export const CalendarWeekHeader = observer(function CalendarWeekHeader(props: Pr
       }`}
     >
       {isLoading && (
-        <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
+        <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-accent-primary" />
       )}
       {orderedDays.map((day) => {
         if (!showWeekends && (day.value === EStartOfTheWeek.SUNDAY || day.value === EStartOfTheWeek.SATURDAY))
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
index a8d580745f..f15c98d266 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
@@ -74,7 +74,7 @@ export const FilterDisplayProperties = observer(function FilterDisplayProperties
                 type="button"
                 className={`rounded-sm border px-2 py-0.5 text-11 transition-all ${
                   displayProperties?.[displayProperty.key]
-                    ? "border-custom-primary-100 bg-custom-primary-100 text-white"
+                    ? "border-accent-strong bg-accent-primary text-white"
                     : "border-subtle-1 hover:bg-layer-1"
                 }`}
                 onClick={() =>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 7dc7645932..0bd2c18e33 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -85,7 +85,7 @@ export const FilterAssignees = observer(function FilterAssignees(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 0f585ca993..b04b5b2056 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -78,7 +78,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index e813fe5ad0..d9a11c7f78 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -81,7 +81,7 @@ export const FilterCycle = observer(function FilterCycle(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
index 20cf64a05f..e296676cfe 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -71,7 +71,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index 5bf69df801..bb41b99b88 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -85,7 +85,7 @@ export const FilterMentions = observer(function FilterMentions(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
index b265fa3fe6..31a64db28a 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -71,7 +71,7 @@ export const FilterModule = observer(function FilterModule(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
index 4b1e9eed73..5abd5ca778 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -72,7 +72,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index cf683d906d..cd9edcc068 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -52,7 +52,7 @@ export const FilterStateGroup = observer(function FilterStateGroup(props: Props)
               {filteredOptions.length > 5 && (
                 <button
                   type="button"
-                  className="ml-8 text-11 font-medium text-custom-primary-100"
+                  className="ml-8 text-11 font-medium text-accent-primary"
                   onClick={handleViewToggle}
                 >
                   {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
index 2317b15747..c301c8ec59 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -70,7 +70,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index 903f670217..3854cc4026 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -75,7 +75,7 @@ export function FiltersDropdown(props: Props) {
                           <span>{title}</span>
                         </div>
                         {isFiltersApplied && (
-                          <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
+                          <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
                         )}
                       </>
                     </Button>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
index 24ca797856..ffdf8adec0 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -22,7 +22,7 @@ export function FilterOption(props: Props) {
     >
       <div
         className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-surface-2 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-strong"
+          isChecked ? "border-accent-strong bg-accent-primary text-white" : "border-strong"
         } ${multiple ? "rounded-xs" : "rounded-full"}`}
       >
         {isChecked && <Check size={10} strokeWidth={3} />}
@@ -32,7 +32,7 @@ export function FilterOption(props: Props) {
         <div className="flex-grow truncate text-11 text-secondary">{title}</div>
       </div>
       {activePulse && (
-        <div className="flex-shrink-0 text-11 w-2 h-2 rounded-full bg-custom-primary-100 animate-pulse ml-auto" />
+        <div className="flex-shrink-0 text-11 w-2 h-2 rounded-full bg-accent-primary animate-pulse ml-auto" />
       )}
     </button>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index 77d421e191..d2a565af6a 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -255,7 +255,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <KanbanIssueBlockLoader />
   ) : (
     <div
-      className="w-full sticky bottom-0 p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+      className="w-full sticky bottom-0 p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
       onClick={loadMoreIssuesInThisGroup}
     >
       {t("common.load_more")} &darr;
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
index d537a5876f..b01bbcc402 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -178,7 +178,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
             "border-custom-primary-70": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
             "border-strong-1": isIssueActive,
             "last:border-b-transparent": !getIsIssuePeeked(issue.id) && !isIssueActive,
-            "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
+            "bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
             "bg-layer-1": isCurrentBlockDragging,
             "md:flex-row md:items-center": isSidebarCollapsed,
             "lg:flex-row lg:items-center": !isSidebarCollapsed,
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 71f8771718..e0826879bc 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
@@ -128,7 +128,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   ) : (
     <div
       className={
-        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-8 p-3 text-13 font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-8 p-3 text-13 font-medium text-accent-primary hover:text-custom-primary-200 hover:underline cursor-pointer"
       }
       onClick={() => loadMoreIssues(group.id)}
     >
@@ -251,7 +251,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
     <div
       ref={groupRef}
       className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
-        "border-custom-primary-100": isDraggingOverColumn,
+        "border-accent-strong": isDraggingOverColumn,
         "border-custom-error-200": isDraggingOverColumn && isDropDisabled,
       })}
     >
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index aa2b80dd0b..6bf5f3c6e1 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -36,7 +36,7 @@ export const SpreadsheetAssigneeColumn = observer(function SpreadsheetAssigneeCo
         buttonVariant={
           issue?.assignee_ids && issue.assignee_ids.length > 1 ? "transparent-without-text" : "transparent-with-text"
         }
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         optionsClassName="z-[9]"
         onClose={onClose}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index 0df2cd1022..cf1c20f966 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -12,7 +12,7 @@ export const SpreadsheetAttachmentColumn = observer(function SpreadsheetAttachme
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {issue?.attachment_count ?? 0} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 8f0da4c994..d141646730 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -14,7 +14,7 @@ export const SpreadsheetCreatedOnColumn = observer(function SpreadsheetCreatedOn
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {renderFormattedDate(issue.created_at)}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
index 008a56c2ba..c58e01e4ff 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -49,7 +49,7 @@ export const SpreadsheetCycleColumn = observer(function SpreadsheetCycleColumn(p
         disabled={disabled}
         placeholder="Select cycle"
         buttonVariant="transparent-with-text"
-        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent px-0"
         onClose={onClose}
       />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 1e7faf478a..e71884c866 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -46,7 +46,7 @@ export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColu
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full"
         buttonClassName={cn(
-          "rounded-none text-left group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x",
+          "rounded-none text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x",
           {
             "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index b7661813c8..25a7361260 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -25,7 +25,7 @@ export const SpreadsheetEstimateColumn = observer(function SpreadsheetEstimateCo
         projectId={issue.project_id ?? undefined}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index e253b1dc6b..7e9e4dac7f 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -29,7 +29,7 @@ export const SpreadsheetLabelColumn = observer(function SpreadsheetLabelColumn(p
         defaultOptions={defaultLabelOptions}
         onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
         className="h-full w-full "
-        buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 rounded-none"
+        buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 rounded-none"
         hideDropdownArrow
         maxRender={1}
         disabled={disabled}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index c3431704f8..bae8551334 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -12,7 +12,7 @@ export const SpreadsheetLinkColumn = observer(function SpreadsheetLinkColumn(pro
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 px-2.5 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 px-2.5 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x">
       {issue?.link_count ?? 0} {issue?.link_count === 1 ? "link" : "links"}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
index e153fc82bf..93f802e79a 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -59,7 +59,7 @@ export const SpreadsheetModuleColumn = observer(function SpreadsheetModuleColumn
         disabled={disabled}
         placeholder="Select modules"
         buttonVariant="transparent-with-text"
-        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent !px-0"
         onClose={onClose}
         multiple
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 5db451056a..9e0f2886e9 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -22,7 +22,7 @@ export const SpreadsheetPriorityColumn = observer(function SpreadsheetPriorityCo
         onChange={(data) => onChange(issue, { priority: data }, { changed_property: "priority", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index bf21e3388b..1d1b0976e8 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -38,7 +38,7 @@ export const SpreadsheetStartDateColumn = observer(function SpreadsheetStartDate
         placeholder="Start date"
         icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         optionsClassName="z-[9]"
         onClose={onClose}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 203f40156b..d88539e17f 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -23,7 +23,7 @@ export const SpreadsheetStateColumn = observer(function SpreadsheetStateColumn(p
         onChange={(data) => onChange(issue, { state_id: data }, { changed_property: "state", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
         showTooltip
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index 2eee78c914..6edc07eb5e 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -36,7 +36,7 @@ export const SpreadsheetSubIssueColumn = observer(function SpreadsheetSubIssueCo
     <Row
       onClick={subIssueCount ? redirectToIssueDetail : () => {}}
       className={cn(
-        "flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 py-1 text-11 hover:bg-surface-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-90",
+        "flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 py-1 text-11 hover:bg-surface-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-custom-primary-90",
         {
           "cursor-pointer": subIssueCount,
         }
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index 726d37eb0e..8ac0a4770b 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -14,7 +14,7 @@ export const SpreadsheetUpdatedOnColumn = observer(function SpreadsheetUpdatedOn
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {renderFormattedDate(issue.updated_at)}
     </Row>
   );
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 b9a1f1e0d8..e6c8ea9e07 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
@@ -269,7 +269,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
         >
           <Row
             className={cn(
-              "group clickable cursor-pointer h-11 w-full flex items-center text-13 after:absolute border-r-[0.5px] z-10 border-subtle-1 bg-transparent group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
+              "group clickable cursor-pointer h-11 w-full flex items-center text-13 after:absolute border-r-[0.5px] z-10 border-subtle-1 bg-transparent group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10",
               {
                 "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
                 "border border-custom-primary-70 hover:border-custom-primary-70":
diff --git a/apps/web/core/components/issues/workspace-draft/root.tsx b/apps/web/core/components/issues/workspace-draft/root.tsx
index 766e6d5b5f..b84c99d33b 100644
--- a/apps/web/core/components/issues/workspace-draft/root.tsx
+++ b/apps/web/core/components/issues/workspace-draft/root.tsx
@@ -98,7 +98,7 @@ export const WorkspaceDraftIssuesRoot = observer(function WorkspaceDraftIssuesRo
           ) : (
             <div
               className={cn("h-11 pl-6 p-3 text-13 font-medium bg-surface-1 border-b border-subtle-1 transition-all", {
-                "text-custom-primary-100 hover:text-custom-primary-200 cursor-pointer underline-offset-2 hover:underline":
+                "text-accent-primary hover:text-custom-primary-200 cursor-pointer underline-offset-2 hover:underline":
                   paginationInfo?.next_page_results,
               })}
               onClick={handleNextIssues}
diff --git a/apps/web/core/components/labels/project-setting-label-group.tsx b/apps/web/core/components/labels/project-setting-label-group.tsx
index db15c1a3dc..ac801b7910 100644
--- a/apps/web/core/components/labels/project-setting-label-group.tsx
+++ b/apps/web/core/components/labels/project-setting-label-group.tsx
@@ -83,7 +83,7 @@ export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGro
     <LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
       {(isDragging, isDroppingInLabel, dragHandleRef) => (
         <div
-          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
+          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-accent-strong" : "border-[1.5px] border-transparent"}`}
         >
           <Disclosure
             as="div"
diff --git a/apps/web/core/components/labels/project-setting-label-item.tsx b/apps/web/core/components/labels/project-setting-label-item.tsx
index 80e0f76170..73f1c48581 100644
--- a/apps/web/core/components/labels/project-setting-label-item.tsx
+++ b/apps/web/core/components/labels/project-setting-label-item.tsx
@@ -87,7 +87,7 @@ export function ProjectSettingLabelItem(props: Props) {
     <LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}>
       {(isDragging, isDroppingInLabel, dragHandleRef) => (
         <div
-          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
+          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-accent-strong" : "border-[1.5px] border-transparent"}`}
         >
           <div
             className={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded-sm  ${
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 5caa46ad80..5f2979c692 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -457,7 +457,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
                             {isEditingAllowed && !isArchived && (
                               <div className="flex w-full items-center justify-end">
                                 <button
-                                  className="flex items-center gap-1.5 text-13 font-medium text-custom-primary-100"
+                                  className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
                                   onClick={() => setModuleLinkModal(true)}
                                 >
                                   <Plus className="h-3 w-3" />
@@ -483,7 +483,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
                             </div>
                             {isEditingAllowed && !isArchived && (
                               <button
-                                className="flex items-center gap-1.5 text-13 font-medium text-custom-primary-100"
+                                className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
                                 onClick={() => setModuleLinkModal(true)}
                               >
                                 <Plus className="h-3 w-3" />
diff --git a/apps/web/core/components/modules/dropdowns/filters/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
index 63fa8d4a20..5a1fef606e 100644
--- a/apps/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -85,7 +85,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/modules/dropdowns/filters/members.tsx b/apps/web/core/components/modules/dropdowns/filters/members.tsx
index 7189e837ce..72f0d9bff4 100644
--- a/apps/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -85,7 +85,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/modules/module-list-item.tsx b/apps/web/core/components/modules/module-list-item.tsx
index caf2a94fa7..e0f7c2c12e 100644
--- a/apps/web/core/components/modules/module-list-item.tsx
+++ b/apps/web/core/components/modules/module-list-item.tsx
@@ -72,12 +72,12 @@ export const ModuleListItem = observer(function ModuleListItem(props: Props) {
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {completedModuleCheck ? (
             progress === 100 ? (
-              <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+              <Check className="h-3 w-3 stroke-[2] text-accent-primary" />
             ) : (
-              <span className="text-13 text-custom-primary-100">{`!`}</span>
+              <span className="text-13 text-accent-primary">{`!`}</span>
             )
           ) : progress === 100 ? (
-            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            <Check className="h-3 w-3 stroke-[2] text-accent-primary" />
           ) : (
             <span className="text-9 text-tertiary">{`${progress}%`}</span>
           )}
diff --git a/apps/web/core/components/navigation/customize-navigation-dialog.tsx b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
index cffa99fe8e..3ea4c8441f 100644
--- a/apps/web/core/components/navigation/customize-navigation-dialog.tsx
+++ b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
@@ -266,7 +266,7 @@ export const CustomizeNavigationDialog: FC<TCustomizeNavigationDialogProps> = ob
                       value="accordion"
                       checked={projectPreferences.navigationMode === "accordion"}
                       onChange={() => updateNavigationMode("accordion")}
-                      className="size-4 text-custom-primary-100 focus:ring-custom-primary-100"
+                      className="size-4 text-accent-primary focus:ring-custom-primary-100"
                     />
                     <div className="flex-1">
                       <div className="text-13 text-secondary">{t("accordion_navigation_control")}</div>
@@ -283,7 +283,7 @@ export const CustomizeNavigationDialog: FC<TCustomizeNavigationDialogProps> = ob
                       value="horizontal"
                       checked={projectPreferences.navigationMode === "horizontal"}
                       onChange={() => updateNavigationMode("horizontal")}
-                      className="size-4 text-custom-primary-100 focus:ring-custom-primary-100"
+                      className="size-4 text-accent-primary focus:ring-custom-primary-100"
                     />
                     <div className="flex-1">
                       <div className="text-13 text-secondary">{t("horizontal_navigation_bar")}</div>
@@ -321,7 +321,7 @@ export const CustomizeNavigationDialog: FC<TCustomizeNavigationDialogProps> = ob
                               "bg-surface-2 border",
                               "text-secondary",
                               parseInt(projectCountInput) >= 1
-                                ? "border-strong focus:border-custom-primary-100 focus:ring-1 focus:ring-custom-primary-100"
+                                ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-custom-primary-100"
                                 : "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
                             )}
                           />
diff --git a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
index c5d680913c..a92bd7e3c2 100644
--- a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
+++ b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
@@ -69,7 +69,7 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
               />
             ) : (
               <div className="flex h-96 w-full items-center justify-center">
-                <div className="flex gap-2.5 w-full items-start justify-center text-13 leading-5 mt-4 px-6 py-4 rounded-sm border border-custom-primary-100/20 bg-custom-primary-100/10 text-custom-primary-200">
+                <div className="flex gap-2.5 w-full items-start justify-center text-13 leading-5 mt-4 px-6 py-4 rounded-sm border border-accent-strong/20 bg-accent-primary/10 text-custom-primary-200">
                   <OctagonAlert className="flex-shrink-0 size-5 mt-1" />
                   <span>
                     You don&apos;t seem to have any invites to a workspace and your instance admin has restricted
diff --git a/apps/web/core/components/onboarding/header.tsx b/apps/web/core/components/onboarding/header.tsx
index f345517438..1378bf2384 100644
--- a/apps/web/core/components/onboarding/header.tsx
+++ b/apps/web/core/components/onboarding/header.tsx
@@ -63,7 +63,7 @@ export const OnboardingHeader = observer(function OnboardingHeader(props: Onboar
       <div className="h-1.5 rounded-t-lg w-full bg-surface-1 overflow-hidden cursor-pointer">
         <Tooltip tooltipContent={`${currentStepNumber}/${totalSteps}`} position="bottom-end">
           <div
-            className="h-full bg-custom-primary-100 transition-all duration-700 ease-out"
+            className="h-full bg-accent-primary transition-all duration-700 ease-out"
             style={{ width: `${(currentStepNumber / totalSteps) * 100}%` }}
           />
         </Tooltip>
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index 0e518dc5ea..99dec429e3 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -387,7 +387,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-custom-primary-100 outline-custom-primary-100"
+                className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
                 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 5401be3a6d..efe690e65c 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -520,7 +520,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                         <div
                           key={userRole}
                           className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-surface-2 ${
-                            value === userRole ? "border-custom-primary-100" : "border-strong"
+                            value === userRole ? "border-accent-strong" : "border-strong"
                           } rounded-sm px-3 py-1.5 text-13 font-medium`}
                           onClick={() => onChange(userRole)}
                         >
@@ -551,7 +551,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                         <div
                           key={userDomain}
                           className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-surface-2 ${
-                            value === userDomain ? "border-custom-primary-100" : "border-strong"
+                            value === userDomain ? "border-accent-strong" : "border-strong"
                           } rounded-sm px-3 py-1.5 text-13 font-medium`}
                           onClick={() => onChange(userDomain)}
                         >
diff --git a/apps/web/core/components/onboarding/steps/profile/consent.tsx b/apps/web/core/components/onboarding/steps/profile/consent.tsx
index 5d120b6bc9..33be6670f8 100644
--- a/apps/web/core/components/onboarding/steps/profile/consent.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/consent.tsx
@@ -13,7 +13,7 @@ export function MarketingConsent({ isChecked, handleChange }: Props) {
         type="button"
         onClick={() => handleChange(!isChecked)}
         className={`size-4 rounded-sm border-2 flex items-center justify-center ${
-          isChecked ? "bg-custom-primary-100 border-custom-primary-100" : "border-strong"
+          isChecked ? "bg-accent-primary border-accent-strong" : "border-strong"
         }`}
       >
         {isChecked && <Check className="w-3 h-3 text-white" />}
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 3590f7c84d..0aa0fff9c5 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -130,7 +130,7 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
                     }}
                     className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-between ${
                       isSelected
-                        ? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
+                        ? "border-accent-strong bg-custom-primary-10 text-accent-primary"
                         : "border-subtle-1 hover:border-strong text-tertiary"
                     }`}
                   >
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index 93962ca214..23eb77685d 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -387,7 +387,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-custom-primary-100 outline-custom-primary-100"
+          className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-custom-primary-100"
           onClick={appendField}
         >
           <Plus className="h-4 w-4" strokeWidth={2} />
diff --git a/apps/web/core/components/onboarding/steps/usecase/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
index 73d87b9cc7..eedb6f02fb 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -122,13 +122,13 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
                     }}
                     className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center gap-2 ${
                       isSelected
-                        ? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
+                        ? "border-accent-strong bg-custom-primary-10 text-accent-primary"
                         : "border-subtle-1 hover:border-strong text-tertiary"
                     }`}
                   >
                     <span
                       className={cn(`size-4 rounded-sm border-2 flex items-center justify-center`, {
-                        "bg-custom-primary-100 border-custom-primary-100": isSelected,
+                        "bg-accent-primary border-accent-strong": isSelected,
                         "border-strong": !isSelected,
                       })}
                     >
diff --git a/apps/web/core/components/onboarding/switch-account-modal.tsx b/apps/web/core/components/onboarding/switch-account-modal.tsx
index 034935bc36..358f59ba97 100644
--- a/apps/web/core/components/onboarding/switch-account-modal.tsx
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -80,8 +80,8 @@ export function SwitchAccountModal(props: Props) {
                 <div className="p-6 pb-1">
                   <div className="flex gap-x-4">
                     <div className="flex items-start">
-                      <div className="grid place-items-center rounded-full bg-custom-primary-100/20 p-4">
-                        <ArrowRightLeft className="h-5 w-5 text-custom-primary-100" aria-hidden="true" />
+                      <div className="grid place-items-center rounded-full bg-accent-primary/20 p-4">
+                        <ArrowRightLeft className="h-5 w-5 text-accent-primary" aria-hidden="true" />
                       </div>
                     </div>
                     <div className="flex flex-col py-3 gap-y-6">
@@ -90,7 +90,7 @@ export function SwitchAccountModal(props: Props) {
                       </Dialog.Title>
                       {userData?.email && (
                         <div className="text-14 font-regular text-secondary">
-                          If you have signed up via <span className="text-custom-primary-100">{userData.email}</span>{" "}
+                          If you have signed up via <span className="text-accent-primary">{userData.email}</span>{" "}
                           un-intentionally, you can switch your account to a different one from here.
                         </div>
                       )}
diff --git a/apps/web/core/components/pages/editor/summary/heading-components.tsx b/apps/web/core/components/pages/editor/summary/heading-components.tsx
index 3e6beccf8f..c5d3d3b250 100644
--- a/apps/web/core/components/pages/editor/summary/heading-components.tsx
+++ b/apps/web/core/components/pages/editor/summary/heading-components.tsx
@@ -8,7 +8,7 @@ export type THeadingComponentProps = {
 };
 
 const COMMON_CLASSNAME =
-  "flex-shrink-0 w-full py-1 text-left font-medium text-tertiary hover:text-custom-primary-100 truncate transition-colors";
+  "flex-shrink-0 w-full py-1 text-left font-medium text-tertiary hover:text-accent-primary truncate transition-colors";
 
 export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
   return (
diff --git a/apps/web/core/components/pages/header/archived-badge.tsx b/apps/web/core/components/pages/header/archived-badge.tsx
index 5db7406e07..2bd7e17423 100644
--- a/apps/web/core/components/pages/header/archived-badge.tsx
+++ b/apps/web/core/components/pages/header/archived-badge.tsx
@@ -13,7 +13,7 @@ export const PageArchivedBadge = observer(function PageArchivedBadge({ page }: P
   if (!page.archived_at) return null;
 
   return (
-    <div className="flex-shrink-0 h-6 flex items-center gap-1 px-2 rounded-sm text-custom-primary-100 bg-custom-primary-100/20">
+    <div className="flex-shrink-0 h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20">
       <ArchiveIcon className="flex-shrink-0 size-3.5" />
       <span className="text-11 font-medium">Archived at {renderFormattedDate(page.archived_at)}</span>
     </div>
diff --git a/apps/web/core/components/pages/list/tab-navigation.tsx b/apps/web/core/components/pages/list/tab-navigation.tsx
index 35841be9a9..56863d666a 100644
--- a/apps/web/core/components/pages/list/tab-navigation.tsx
+++ b/apps/web/core/components/pages/list/tab-navigation.tsx
@@ -43,14 +43,14 @@ export function PageTabNavigation(props: TPageTabNavigation) {
         >
           <span
             className={cn(`block p-3 py-4 text-13 font-medium transition-all`, {
-              "text-custom-primary-100": tab.key === pageType,
+              "text-accent-primary": tab.key === pageType,
             })}
           >
             {tab.label}
           </span>
           <div
             className={cn(`rounded-t border-t-2 transition-all border-transparent`, {
-              "border-custom-primary-100": tab.key === pageType,
+              "border-accent-strong": tab.key === pageType,
             })}
           />
         </Link>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
index 3591d77702..ff35e2e435 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
@@ -114,8 +114,8 @@ export const PageNavigationPaneInfoTabVersionHistory = observer(function PageNav
           {/* end timeline line */}
           <li className="relative flex items-center gap-x-4 text-11 font-medium">
             {/* timeline icon */}
-            <div className="relative size-6 flex-none rounded-full grid place-items-center bg-custom-primary-100/20">
-              <div className="size-2.5 rounded-full bg-custom-primary-100/40" />
+            <div className="relative size-6 flex-none rounded-full grid place-items-center bg-accent-primary/20">
+              <div className="size-2.5 rounded-full bg-accent-primary/40" />
             </div>
             {/* end timeline icon */}
             <Link
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
index 1313d958de..1f20b710ef 100644
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -101,7 +101,7 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
                   ? `${renderFormattedDate(versionDetails.last_saved_at)} ${renderFormattedTime(versionDetails.last_saved_at)}`
                   : "Loading version details"}
               </h6>
-              <span className="flex-shrink-0 flex items-center gap-1 text-11 font-medium text-custom-primary-100 bg-custom-primary-100/20 py-1 px-1.5 rounded-sm">
+              <span className="flex-shrink-0 flex items-center gap-1 text-11 font-medium text-accent-primary bg-accent-primary/20 py-1 px-1.5 rounded-sm">
                 <EyeIcon className="flex-shrink-0 size-3" />
                 View only
               </span>
diff --git a/apps/web/core/components/profile/form.tsx b/apps/web/core/components/profile/form.tsx
index fc76c19e30..43bbe09228 100644
--- a/apps/web/core/components/profile/form.tsx
+++ b/apps/web/core/components/profile/form.tsx
@@ -197,7 +197,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
           />
         )}
       />
-      <div className="w-full flex text-custom-primary-200 bg-custom-primary-100/10 rounded-md p-2 gap-2 items-center mb-4">
+      <div className="w-full flex text-custom-primary-200 bg-accent-primary/10 rounded-md p-2 gap-2 items-center mb-4">
         <InfoIcon className="h-4 w-4 flex-shrink-0" />
         <div className="text-13 font-medium flex-1">{t("settings_moved_to_preferences")}</div>
         <Link
diff --git a/apps/web/core/components/project-states/group-item.tsx b/apps/web/core/components/project-states/group-item.tsx
index 2d74e373b2..c50f562233 100644
--- a/apps/web/core/components/project-states/group-item.tsx
+++ b/apps/web/core/components/project-states/group-item.tsx
@@ -78,7 +78,7 @@ export const GroupItem = observer(function GroupItem(props: TGroupItem) {
           type="button"
           data-ph-element={STATE_TRACKER_ELEMENTS.STATE_GROUP_ADD_BUTTON}
           className={cn(
-            "flex-shrink-0 w-6 h-6 rounded-sm flex justify-center items-center overflow-hidden transition-colors hover:bg-layer-1 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100",
+            "flex-shrink-0 w-6 h-6 rounded-sm flex justify-center items-center overflow-hidden transition-colors hover:bg-layer-1 cursor-pointer text-accent-primary/80 hover:text-accent-primary",
             (!isEditable || createState) && "cursor-not-allowed text-placeholder hover:text-placeholder"
           )}
           onClick={() => {
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index 63fa8d4a20..5a1fef606e 100644
--- a/apps/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -85,7 +85,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/project/dropdowns/filters/member-list.tsx b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
index 5849e6dfdf..7eb29ade99 100644
--- a/apps/web/core/components/project/dropdowns/filters/member-list.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -100,7 +100,7 @@ export const MemberListFiltersDropdown = observer(function MemberListFiltersDrop
             <ChevronDownIcon className="h-3 w-3" />
           </Button>
           {appliedFiltersCount > 0 && (
-            <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-custom-primary-100" />
+            <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-accent-primary" />
           )}
         </div>
       }
diff --git a/apps/web/core/components/project/dropdowns/filters/members.tsx b/apps/web/core/components/project/dropdowns/filters/members.tsx
index 7189e837ce..72f0d9bff4 100644
--- a/apps/web/core/components/project/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -85,7 +85,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-11 font-medium text-custom-primary-100"
+                    className="ml-8 text-11 font-medium text-accent-primary"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index ae831df88c..b427095e2e 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -220,10 +220,10 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
                     </button>
                   </div>
                 </div>
-                <p className="text-13 font-medium text-custom-primary-100 flex items-center gap-1 mt-3">
+                <p className="text-13 font-medium text-accent-primary flex items-center gap-1 mt-3">
                   <span className="relative grid place-items-center size-2.5">
-                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-custom-primary-100 opacity-75" />
-                    <span className="relative inline-flex rounded-full size-1.5 bg-custom-primary-100" />
+                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-accent-primary opacity-75" />
+                    <span className="relative inline-flex rounded-full size-1.5 bg-accent-primary" />
                   </span>
                   This project is now live on web
                 </p>
diff --git a/apps/web/core/components/rich-filters/filters-toggle.tsx b/apps/web/core/components/rich-filters/filters-toggle.tsx
index bd8ace4a84..aef26d256d 100644
--- a/apps/web/core/components/rich-filters/filters-toggle.tsx
+++ b/apps/web/core/components/rich-filters/filters-toggle.tsx
@@ -51,7 +51,7 @@ export const FiltersToggle = observer(function FiltersToggle<P extends TFilterPr
   return (
     <div
       className={cn(COMMON_CLASSNAME, {
-        "border-transparent bg-custom-primary-100/10 hover:bg-custom-primary-100/20": isFilterRowVisible,
+        "border-transparent bg-accent-primary/10 hover:bg-accent-primary/20": isFilterRowVisible,
         "border-subtle-1 hover:bg-surface-2": !isFilterRowVisible,
       })}
       onClick={handleToggleFilter}
@@ -59,13 +59,13 @@ export const FiltersToggle = observer(function FiltersToggle<P extends TFilterPr
       <div className="relative">
         <ListFilter
           className={cn("size-4", {
-            "text-custom-primary-100": isFilterRowVisible,
+            "text-accent-primary": isFilterRowVisible,
             "text-tertiary": !isFilterRowVisible,
           })}
         />
         {showFilterRowChangesPill && (
           <span
-            className={cn("p-[3px] rounded-full bg-custom-primary-100 absolute top-[0.2px] -right-[0.4px]", {
+            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
             })}
           />
diff --git a/apps/web/core/components/settings/sidebar/nav-item.tsx b/apps/web/core/components/settings/sidebar/nav-item.tsx
index bf602e9a76..9a7596f8c3 100644
--- a/apps/web/core/components/settings/sidebar/nav-item.tsx
+++ b/apps/web/core/components/settings/sidebar/nav-item.tsx
@@ -39,7 +39,7 @@ const SettingsSidebarNavItem = observer(function SettingsSidebarNavItem(props: T
   // derived
   const buttonClass = cn(
     "flex w-full items-center px-2 py-1.5 rounded-sm text-secondary justify-between",
-    "hover:bg-custom-primary-100/10",
+    "hover:bg-accent-primary/10",
     {
       "text-secondary bg-layer-1/75": typeof isActive === "function" ? isActive(setting) : isActive,
       "text-secondary hover:bg-surface-2 active:bg-surface-2":
diff --git a/apps/web/core/components/sidebar/search-button.tsx b/apps/web/core/components/sidebar/search-button.tsx
index 8f382b649d..13b1f4f43d 100644
--- a/apps/web/core/components/sidebar/search-button.tsx
+++ b/apps/web/core/components/sidebar/search-button.tsx
@@ -12,7 +12,7 @@ export function SidebarSearchButton(props: Props) {
       className={cn(
         "flex-shrink-0 size-8 aspect-square grid place-items-center rounded-md shadow-sm hover:bg-surface-2 outline-none border-[0.5px] border-strong",
         {
-          "bg-custom-primary-100/10 hover:bg-custom-primary-100/10 border-custom-primary-200": isActive,
+          "bg-accent-primary/10 hover:bg-accent-primary/10 border-custom-primary-200": isActive,
         }
       )}
     >
diff --git a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
index 5daf7359ad..8d26dd5735 100644
--- a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
+++ b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
@@ -11,7 +11,7 @@ export const AppSidebarToggleButton = observer(function AppSidebarToggleButton()
   if (!isSidebarToggleVisible()) return null;
   return (
     <button
-      className="flex items-center justify-center size-6 rounded-md text-placeholder hover:text-custom-primary-100 hover:bg-surface-2"
+      className="flex items-center justify-center size-6 rounded-md text-placeholder hover:text-accent-primary hover:bg-surface-2"
       onClick={() => {
         if (sidebarPeek) toggleSidebarPeek(false);
         toggleSidebar();
diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
index 4a85b41f05..8c6b038942 100644
--- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx
+++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
@@ -53,7 +53,7 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
               <div className="flex items-center gap-2">
                 <button
                   type="button"
-                  className="flex items-center justify-center size-6 rounded-md text-placeholder hover:text-custom-primary-100 hover:bg-surface-2"
+                  className="flex items-center justify-center size-6 rounded-md text-placeholder hover:text-accent-primary hover:bg-surface-2"
                   onClick={() => setIsCustomizeNavDialogOpen(true)}
                 >
                   <PreferencesIcon className="size-4" />
diff --git a/apps/web/core/components/stickies/action-bar.tsx b/apps/web/core/components/stickies/action-bar.tsx
index 49e93f95dd..c34fece85c 100644
--- a/apps/web/core/components/stickies/action-bar.tsx
+++ b/apps/web/core/components/stickies/action-bar.tsx
@@ -50,7 +50,7 @@ export const StickyActionBar = observer(function StickyActionBar() {
   return (
     <div
       ref={ref}
-      className="sticky-action-bar__item flex flex-col bg-surface-2 rounded-full p-[2px] border-2 border-custom-primary-100/10 overflow-hidden"
+      className="sticky-action-bar__item flex flex-col bg-surface-2 rounded-full p-[2px] border-2 border-accent-strong/10 overflow-hidden"
     >
       <div
         className={`flex flex-col gap-2 transition-all duration-300 ease-in-out origin-bottom ${isExpanded ? "scale-y-100 opacity-100 mb-2 " : "scale-y-0 opacity-0 h-0"}`}
diff --git a/apps/web/core/components/stickies/layout/stickies-truncated.tsx b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
index 2c7fab2465..8343239361 100644
--- a/apps/web/core/components/stickies/layout/stickies-truncated.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
@@ -38,7 +38,7 @@ export const StickiesTruncated = observer(function StickiesTruncated(props: Stic
         <Link
           href={`/${workspaceSlug}/stickies`}
           className={cn(
-            "gap-1 w-full text-custom-primary-100 text-13 font-medium transition-opacity duration-300 bg-surface-2/20"
+            "gap-1 w-full text-accent-primary text-13 font-medium transition-opacity duration-300 bg-surface-2/20"
           )}
           onClick={handleClose}
         >
diff --git a/apps/web/core/components/stickies/modal/stickies.tsx b/apps/web/core/components/stickies/modal/stickies.tsx
index 6eca2b4dd8..7081d00df4 100644
--- a/apps/web/core/components/stickies/modal/stickies.tsx
+++ b/apps/web/core/components/stickies/modal/stickies.tsx
@@ -40,14 +40,14 @@ export const Stickies = observer(function Stickies(props: TProps) {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-13 font-medium text-custom-primary-100 my-auto"
+            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
             disabled={creatingSticky}
           >
             <Plus className="size-4 my-auto" /> <span>Add sticky</span>
             {creatingSticky && (
               <div className="flex items-center justify-center ml-2">
                 <div
-                  className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-custom-primary-100`}
+                  className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-accent-strong`}
                   role="status"
                   aria-label="loading"
                 />
diff --git a/apps/web/core/components/stickies/widget.tsx b/apps/web/core/components/stickies/widget.tsx
index e00558a572..e36820a1b5 100644
--- a/apps/web/core/components/stickies/widget.tsx
+++ b/apps/web/core/components/stickies/widget.tsx
@@ -33,14 +33,14 @@ export const StickiesWidget = observer(function StickiesWidget() {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-13 font-medium text-custom-primary-100 my-auto"
+            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
             disabled={creatingSticky}
           >
             <Plus className="size-4 my-auto" />
             <span>{t("stickies.add")}</span>
             {creatingSticky && (
               <div
-                className="size-4 border-2 border-t-transparent border-custom-primary-100 rounded-full animate-spin"
+                className="size-4 border-2 border-t-transparent border-accent-strong rounded-full animate-spin"
                 role="status"
                 aria-label="loading"
               />
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
index c8518da09b..e6ad4cc189 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -67,12 +67,12 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
       className={cn(
         "relative py-4 flex items-center gap-2 border-b border-subtle-1 cursor-pointer transition-all group",
         currentSelectedNotificationId === notification?.id ? "bg-layer-1/30" : "",
-        notification.read_at === null ? "bg-custom-primary-100/5" : ""
+        notification.read_at === null ? "bg-accent-primary/5" : ""
       )}
       onClick={handleNotificationIssuePeekOverview}
     >
       {notification.read_at === null && (
-        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-custom-primary-100 absolute top-[50%] left-2" />
+        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-accent-primary absolute top-[50%] left-2" />
       )}
 
       <div className="relative w-full flex gap-2">
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
index 64962646ff..5a9ca2c614 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -202,9 +202,7 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
                                   setValue("period", "AM");
                                 }}
                                 className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
-                                  watch("period") === "AM"
-                                    ? "bg-custom-primary-100/90 text-custom-primary-0"
-                                    : "bg-layer-1"
+                                  watch("period") === "AM" ? "bg-accent-primary/90 text-custom-primary-0" : "bg-layer-1"
                                 }`}
                               >
                                 AM
@@ -214,9 +212,7 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
                                   setValue("period", "PM");
                                 }}
                                 className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
-                                  watch("period") === "PM"
-                                    ? "bg-custom-primary-100/90 text-custom-primary-0"
-                                    : "bg-layer-1"
+                                  watch("period") === "PM" ? "bg-accent-primary/90 text-custom-primary-0" : "bg-layer-1"
                                 }`}
                               >
                                 PM
diff --git a/apps/web/core/components/workspace-notifications/sidebar/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
index 2f9ad0b83b..bd8f8b4e95 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -71,7 +71,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
               <div
                 className={cn(
                   `relative h-full flex justify-center items-center gap-1 text-13 transition-all`,
-                  currentNotificationTab === tab.value ? "text-custom-primary-100" : "text-primary hover:text-secondary"
+                  currentNotificationTab === tab.value ? "text-accent-primary" : "text-primary hover:text-secondary"
                 )}
               >
                 <div className="font-medium">{t(tab.i18n_label)}</div>
@@ -80,7 +80,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
                 )}
               </div>
               {currentNotificationTab === tab.value && (
-                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
+                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-accent-strong" />
               )}
             </div>
           ))}
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index b2fc5c3ca8..21d778d213 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -173,7 +173,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
             }/${currentWorkspace.slug}`}</button>
             {isAdmin && (
               <button
-                className="flex items-center gap-1.5 text-left text-11 font-medium text-custom-primary-100"
+                className="flex items-center gap-1.5 text-left text-11 font-medium text-accent-primary"
                 onClick={() => setIsImageUploadModalOpen(true)}
               >
                 {workspaceLogo && workspaceLogo !== "" ? (
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index dc48b529cf..84649141a9 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -147,7 +147,7 @@ export function FavoriteFolder(props: Props) {
             // id={`sidebar-${projectId}-${projectListType}`}
             className={cn("relative", {
               "bg-layer-1 opacity-60": isDragging,
-              "border-[2px] border-custom-primary-100": instruction === "make-child",
+              "border-[2px] border-accent-strong": instruction === "make-child",
             })}
           >
             {/* draggable drop top indicator */}
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 c909aa7191..659d5e1d83 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -104,7 +104,7 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
           <div className="px-1">
             <Link href={GOD_MODE_URL}>
               <CustomMenu.MenuItem>
-                <div className="flex w-full items-center justify-center rounded-sm bg-custom-primary-100/20 px-2 py-1 text-11 font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                <div className="flex w-full items-center justify-center rounded-sm bg-accent-primary/20 px-2 py-1 text-11 font-medium text-accent-primary hover:bg-accent-primary/30 hover:text-custom-primary-200">
                   {t("enter_god_mode")}
                 </div>
               </CustomMenu.MenuItem>
diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index 166a0ba654..e025409357 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -310,7 +310,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
           <>
             <div
               className={cn(
-                "absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
+                "absolute inset-0 border-2 border-accent-strong pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
                 {
                   "opacity-100": isResizing,
                   "opacity-0 group-hover/image-component:opacity-100": !isResizing,
@@ -319,7 +319,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
             />
             <div
               className={cn(
-                "absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white transition-opacity duration-100 ease-in-out",
+                "absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-accent-primary border-2 border-white transition-opacity duration-100 ease-in-out",
                 {
                   "opacity-100 pointer-events-auto": isResizing,
                   "opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":
diff --git a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index a456634883..2e9aaf7321 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -200,7 +200,7 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
         {
           "hover:text-secondary hover:bg-layer-1 cursor-pointer": editor.isEditable,
           "bg-layer-1 text-secondary": draggedInside && editor.isEditable,
-          "text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
+          "text-custom-primary-200 bg-accent-primary/10 border-custom-primary-200/10 hover:bg-accent-primary/10 hover:text-custom-primary-200":
             selected && editor.isEditable,
           "text-red-500 cursor-default": failedToLoadImage || hasDuplicationFailed,
           "hover:text-red-500": (failedToLoadImage || hasDuplicationFailed) && editor.isEditable,
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 ad2061f1e1..95a231de96 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
@@ -187,10 +187,13 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
           {...getReferenceProps()}
           type="button"
           onMouseDown={handleMouseDown}
-          className={cn("px-1 bg-surface-2 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
-            "!opacity-100 bg-custom-primary-100 border-custom-primary-100": isDropdownOpen,
-            "hover:bg-layer-1": !isDropdownOpen,
-          })}
+          className={cn(
+            "px-1 bg-surface-2 border border-strong-1 rounded-sm outline-none transition-all duration-200",
+            {
+              "!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
+              "hover:bg-layer-1": !isDropdownOpen,
+            }
+          )}
         >
           <Ellipsis className="size-4 text-primary" />
         </button>
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 db7eefbb1b..a3673acb3a 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
@@ -186,10 +186,13 @@ export function RowDragHandle(props: RowDragHandleProps) {
           {...getReferenceProps()}
           type="button"
           onMouseDown={handleMouseDown}
-          className={cn("py-1 bg-surface-2 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
-            "!opacity-100 bg-custom-primary-100 border-custom-primary-100": isDropdownOpen,
-            "hover:bg-layer-1": !isDropdownOpen,
-          })}
+          className={cn(
+            "py-1 bg-surface-2 border border-strong-1 rounded-sm outline-none transition-all duration-200",
+            {
+              "!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
+              "hover:bg-layer-1": !isDropdownOpen,
+            }
+          )}
         >
           <Ellipsis className="size-4 text-primary rotate-90" />
         </button>
diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
index 0cb6f22a51..f39670dc71 100644
--- a/packages/propel/src/animated-counter/animated-counter.stories.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.stories.tsx
@@ -146,7 +146,7 @@ export const Countdown: Story = {
             <AnimatedCounter count={count} size="lg" className="text-20" />
           </div>
           <button
-            className="px-6 py-2 bg-custom-primary-100 text-white font-medium rounded-lg hover:bg-custom-primary-200"
+            className="px-6 py-2 bg-accent-primary text-white font-medium rounded-lg hover:bg-custom-primary-200"
             onClick={handleStart}
             disabled={isRunning}
           >
@@ -283,7 +283,7 @@ export const InBadge: Story = {
             </div>
           </div>
           <button
-            className="px-4 py-2 bg-custom-primary-100 text-white rounded-sm hover:bg-custom-primary-200"
+            className="px-4 py-2 bg-accent-primary text-white rounded-sm hover:bg-custom-primary-200"
             onClick={() => setNotifications((prev) => prev + 1)}
           >
             Add Notification
@@ -312,7 +312,7 @@ export const FastAnimation: Story = {
           </div>
           <div className="flex gap-2">
             <button
-              className="px-4 py-2 bg-custom-primary-100 text-white rounded-sm hover:bg-custom-primary-200"
+              className="px-4 py-2 bg-accent-primary text-white rounded-sm hover:bg-custom-primary-200"
               onClick={incrementFast}
             >
               +10 Fast
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
index d8c44adb9e..e5d3747753 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -38,21 +38,21 @@ enum buttonIconStyling {
 
 export const buttonStyling: IButtonStyling = {
   primary: {
-    default: `text-white bg-custom-primary-100`,
+    default: `text-white bg-accent-primary`,
     hover: `hover:bg-custom-primary-200`,
     pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
     disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
   },
   "accent-primary": {
-    default: `bg-custom-primary-100/20 text-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/10 hover:text-custom-primary-200`,
-    pressed: `focus:bg-custom-primary-100/10`,
+    default: `bg-accent-primary/20 text-accent-primary`,
+    hover: `hover:bg-accent-primary/10 hover:text-custom-primary-200`,
+    pressed: `focus:bg-accent-primary/10`,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-transparent border border-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/20`,
-    pressed: `focus:text-custom-primary-100 focus:bg-custom-primary-100/30`,
+    default: `text-accent-primary bg-transparent border border-accent-strong`,
+    hover: `hover:bg-accent-primary/20`,
+    pressed: `focus:text-accent-primary focus:bg-accent-primary/30`,
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
   "neutral-primary": {
@@ -62,7 +62,7 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !text-placeholder`,
   },
   "link-primary": {
-    default: `text-custom-primary-100 bg-surface-1`,
+    default: `text-accent-primary bg-surface-1`,
     hover: `hover:text-custom-primary-200`,
     pressed: `focus:text-custom-primary-80 `,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
index 7d778db17e..65bc60f373 100644
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -182,7 +182,7 @@ export const OnFileCard: Story = {
         <ContextMenu.Trigger>
           <div className="w-64 p-4 border border-subtle-1 rounded-lg hover:bg-layer-1 cursor-pointer">
             <div className="flex items-center gap-3">
-              <div className="w-12 h-12 bg-custom-primary-100 rounded-sm flex items-center justify-center text-white text-16">
+              <div className="w-12 h-12 bg-accent-primary rounded-sm flex items-center justify-center text-white text-16">
                 📄
               </div>
               <div className="flex-1">
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
index f6514e0c81..dd9ec4b990 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
@@ -425,7 +425,7 @@ export const InFormContext: Story = {
           </div>
           <button
             type="submit"
-            className="w-full px-4 py-2 bg-custom-primary-100 text-white rounded-sm hover:bg-custom-primary-200"
+            className="w-full px-4 py-2 bg-accent-primary text-white rounded-sm hover:bg-custom-primary-200"
           >
             Create Project
           </button>
diff --git a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
index 48386fdb94..d1fe68ad91 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-1 text-16 p-0 h-full w-full flex-grow-0 focus:border-custom-primary-100"
+            className="block rounded-md bg-transparent placeholder-custom-text-400 focus:outline-none px-3 py-2 border-[0.5px] border-subtle-1 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 f500395dd2..ab2cc92489 100644
--- a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
@@ -36,7 +36,7 @@ export function IconRoot(props: IconRootProps) {
           <div className="flex items-center px-2 py-[15px] w-full ">
             <div
               className={cn("relative flex items-center gap-2 bg-surface-2 h-10 rounded-lg w-full px-[30px] border", {
-                "border-custom-primary-100": isInputFocused,
+                "border-accent-strong": isInputFocused,
                 "border-transparent": !isInputFocused,
               })}
               onFocus={() => setIsInputFocused(true)}
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
index cf7bdf22ef..351257f56e 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
@@ -134,7 +134,7 @@ export const InlineReactions: Story = {
           onChange={handleReactionAdd}
           closeOnSelect
           label={
-            <button className="inline-flex items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5 h-7 w-7">
+            <button className="inline-flex items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5 h-7 w-7">
               <SmilePlus className="h-3.5 w-3.5" />
             </button>
           }
@@ -360,7 +360,7 @@ export const InMessageContext: Story = {
     return (
       <div className="max-w-md border border-subtle-1 rounded-lg p-4 space-y-3">
         <div className="flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-custom-primary-100 flex items-center justify-center text-white text-13">
+          <div className="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center text-white text-13">
             AB
           </div>
           <div className="flex-1">
@@ -378,7 +378,7 @@ export const InMessageContext: Story = {
             onChange={handleReactionAdd}
             closeOnSelect
             label={
-              <button className="inline-flex items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5 h-7 w-7">
+              <button className="inline-flex items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5 h-7 w-7">
                 <SmilePlus className="h-3.5 w-3.5" />
               </button>
             }
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
index 0daac89ebb..29294f8b20 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -209,7 +209,7 @@ export const InMessageContext: Story = {
     return (
       <div className="max-w-md border border-subtle-1 rounded-lg p-4 space-y-3">
         <div className="flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-custom-primary-100 flex items-center justify-center text-white text-13">
+          <div className="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center text-white text-13">
             AB
           </div>
           <div className="flex-1">
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
index 1e9b263ed0..9145892db1 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
@@ -77,7 +77,7 @@ const EmojiReaction = React.forwardRef(function EmojiReaction(
       className={cn(
         "inline-flex items-center rounded-full border px-1.5 text-11 gap-0.5 transition-all duration-200",
         reacted
-          ? "bg-custom-primary-100/10 border-custom-primary-100 text-custom-primary-100"
+          ? "bg-accent-primary/10 border-accent-strong text-accent-primary"
           : "bg-surface-1 border-subtle-1 text-tertiary hover:border-strong hover:bg-surface-2",
         className
       )}
@@ -106,7 +106,7 @@ const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
       className={cn(
         "inline-flex items-center justify-center rounded-full border border-dashed border-strong",
         "bg-surface-1 text-placeholder transition-all duration-200",
-        "hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5",
+        "hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5",
         "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1",
         "h-6 w-6",
         className
diff --git a/packages/propel/src/icons/priority-icon.tsx b/packages/propel/src/icons/priority-icon.tsx
index 397c4f5b71..85f5ad89ec 100644
--- a/packages/propel/src/icons/priority-icon.tsx
+++ b/packages/propel/src/icons/priority-icon.tsx
@@ -19,7 +19,7 @@ export function PriorityIcon(props: IPriorityIcon) {
     urgent: "bg-red-600/20 text-red-600 border-red-600",
     high: "bg-orange-500/20 text-orange-500 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
+    low: "bg-accent-primary/20 text-accent-primary border-accent-strong",
     none: "bg-layer-1 text-secondary border-strong",
   };
 
@@ -66,7 +66,7 @@ export function PriorityIcon(props: IPriorityIcon) {
               "text-red-600": priority === "urgent",
               "text-orange-500": priority === "high",
               "text-yellow-500": priority === "medium",
-              "text-custom-primary-100": priority === "low",
+              "text-accent-primary": priority === "low",
               "text-secondary": priority === "none",
             },
             className
diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx
index 60a2428d76..3db4898a65 100644
--- a/packages/propel/src/pill/pill.tsx
+++ b/packages/propel/src/pill/pill.tsx
@@ -35,7 +35,7 @@ export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
 
 const pillVariants = {
   [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
-  [EPillVariant.PRIMARY]: "bg-custom-primary-100/10 text-custom-primary-100 border border-custom-primary-100/20",
+  [EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
   [EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
   [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
   [EPillVariant.ERROR]: "bg-red-50 text-red-700 border border-red-200",
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
index 413f4cf9df..5d398350aa 100644
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -182,7 +182,7 @@ export const ListExample: Story = {
                 key={i}
                 className="flex items-center gap-3 p-3 bg-layer-1 rounded-sm hover:bg-surface-2 cursor-pointer"
               >
-                <div className="w-10 h-10 rounded-full bg-custom-primary-100 flex items-center justify-center text-white font-medium">
+                <div className="w-10 h-10 rounded-full bg-accent-primary flex items-center justify-center text-white font-medium">
                   {String.fromCharCode(65 + (i % 26))}
                 </div>
                 <div>
@@ -249,9 +249,7 @@ export const ChatMessages: Story = {
           {[...Array(20)].map((_, i) => (
             <div key={i} className={`flex ${i % 3 === 0 ? "justify-end" : "justify-start"}`}>
               <div
-                className={`max-w-[70%] p-3 rounded-lg ${
-                  i % 3 === 0 ? "bg-custom-primary-100 text-white" : "bg-layer-1"
-                }`}
+                className={`max-w-[70%] p-3 rounded-lg ${i % 3 === 0 ? "bg-accent-primary text-white" : "bg-layer-1"}`}
               >
                 <div className="text-13">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
                 <div className="mt-1">Message content for message number {i + 1}</div>
diff --git a/packages/propel/src/switch/root.tsx b/packages/propel/src/switch/root.tsx
index 9cb075be74..961e8ff4f8 100644
--- a/packages/propel/src/switch/root.tsx
+++ b/packages/propel/src/switch/root.tsx
@@ -26,7 +26,7 @@ function Switch({ value, onChange, label, size = "sm", disabled, className }: IT
         disabled
           ? "cursor-not-allowed bg-layer-1"
           : value
-            ? "cursor-pointer bg-custom-primary-100"
+            ? "cursor-pointer bg-accent-primary"
             : "cursor-pointer bg-surface-2",
         className
       )}
diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx
index 6094c0fcae..2dfb5d9d5d 100644
--- a/packages/propel/src/toolbar/toolbar.tsx
+++ b/packages/propel/src/toolbar/toolbar.tsx
@@ -124,10 +124,10 @@ const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
 });
 
 const buttonVariants = {
-  primary: "bg-custom-primary-100 text-white hover:bg-custom-primary-200 focus:bg-custom-primary-200",
+  primary: "bg-accent-primary text-white hover:bg-custom-primary-200 focus:bg-custom-primary-200",
   secondary: "bg-surface-1 text-secondary border border-subtle-1 hover:bg-surface-2 focus:bg-surface-2",
   outline:
-    "border border-custom-primary-100 text-custom-primary-100 bg-transparent hover:bg-custom-primary-100/10 focus:bg-custom-primary-100/20",
+    "border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20",
   ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2",
   destructive: "bg-red-500 text-white hover:bg-red-600 focus:bg-red-600",
 };
diff --git a/packages/ui/src/auth-form/auth-forgot-password.tsx b/packages/ui/src/auth-form/auth-forgot-password.tsx
index 1b1143fc99..f56a5cb41f 100644
--- a/packages/ui/src/auth-form/auth-forgot-password.tsx
+++ b/packages/ui/src/auth-form/auth-forgot-password.tsx
@@ -27,7 +27,7 @@ export function AuthForgotPassword({
       onClick={handleClick}
       disabled={disabled}
       className={cn(
-        "text-13 text-custom-primary-100 hover:text-custom-primary-200 transition-colors duration-200",
+        "text-13 text-accent-primary hover:text-custom-primary-200 transition-colors duration-200",
         {
           "opacity-50 cursor-not-allowed": disabled,
           "cursor-pointer": !disabled,
diff --git a/packages/ui/src/auth-form/auth-form.tsx b/packages/ui/src/auth-form/auth-form.tsx
index 6002e509e8..6d3fe5e5e6 100644
--- a/packages/ui/src/auth-form/auth-form.tsx
+++ b/packages/ui/src/auth-form/auth-form.tsx
@@ -194,7 +194,7 @@ export function AuthForm({
             <button
               type="button"
               onClick={handleModeChange}
-              className="ml-1 text-13 text-custom-primary-100 hover:text-custom-primary-200 transition-colors duration-200"
+              className="ml-1 text-13 text-accent-primary hover:text-custom-primary-200 transition-colors duration-200"
               disabled={disabled}
             >
               {getAlternateModeButtonText()}
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
index 87a03bc7fc..2c80460e35 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -68,7 +68,7 @@ export function AvatarGroup(props: Props) {
         <Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
           <div
             className={cn(
-              "grid place-items-center rounded-full bg-custom-primary-10 text-9 text-custom-primary-100 ring-1 ring-custom-background-100",
+              "grid place-items-center rounded-full bg-custom-primary-10 text-9 text-accent-primary ring-1 ring-custom-background-100",
               {
                 [sizeInfo.avatarSize]: !isAValidNumber(size),
               }
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index f4eb28ca48..53053ea596 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -44,17 +44,17 @@ enum badgeIconStyling {
 
 export const badgeStyling: IBadgeStyling = {
   primary: {
-    default: `text-white bg-custom-primary-100`,
+    default: `text-white bg-accent-primary`,
     hover: `hover:bg-custom-primary-200`,
     disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
   },
   "accent-primary": {
-    default: `bg-custom-primary-10 text-custom-primary-100`,
+    default: `bg-custom-primary-10 text-accent-primary`,
     hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-surface-1 border border-custom-primary-100`,
+    default: `text-accent-primary bg-surface-1 border border-accent-strong`,
     hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index d8c44adb9e..e5d3747753 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -38,21 +38,21 @@ enum buttonIconStyling {
 
 export const buttonStyling: IButtonStyling = {
   primary: {
-    default: `text-white bg-custom-primary-100`,
+    default: `text-white bg-accent-primary`,
     hover: `hover:bg-custom-primary-200`,
     pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
     disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
   },
   "accent-primary": {
-    default: `bg-custom-primary-100/20 text-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/10 hover:text-custom-primary-200`,
-    pressed: `focus:bg-custom-primary-100/10`,
+    default: `bg-accent-primary/20 text-accent-primary`,
+    hover: `hover:bg-accent-primary/10 hover:text-custom-primary-200`,
+    pressed: `focus:bg-accent-primary/10`,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-transparent border border-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/20`,
-    pressed: `focus:text-custom-primary-100 focus:bg-custom-primary-100/30`,
+    default: `text-accent-primary bg-transparent border border-accent-strong`,
+    hover: `hover:bg-accent-primary/20`,
+    pressed: `focus:text-accent-primary focus:bg-accent-primary/30`,
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
   "neutral-primary": {
@@ -62,7 +62,7 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !text-placeholder`,
   },
   "link-primary": {
-    default: `text-custom-primary-100 bg-surface-1`,
+    default: `text-accent-primary bg-surface-1`,
     hover: `hover:text-custom-primary-200`,
     pressed: `focus:text-custom-primary-80 `,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index 6f67f2f736..4b5f787b68 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -25,7 +25,7 @@ function ToggleSwitch(props: IToggleSwitchProps) {
         {
           "h-4 w-6": size === "sm",
           "h-5 w-8": size === "md",
-          "bg-custom-primary-100": value,
+          "bg-accent-primary": value,
           "cursor-not-allowed bg-layer-1": disabled,
         },
         className
diff --git a/packages/ui/src/drop-indicator.tsx b/packages/ui/src/drop-indicator.tsx
index 8036f33ff5..4b1f1be2d7 100644
--- a/packages/ui/src/drop-indicator.tsx
+++ b/packages/ui/src/drop-indicator.tsx
@@ -16,7 +16,7 @@ export function DropIndicator(props: Props) {
     before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded-sm
     after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] after:h-[6px] after:w-[6px] after:rounded-sm`,
         {
-          "bg-custom-primary-100 before:bg-custom-primary-100 after:bg-custom-primary-100": isVisible,
+          "bg-accent-primary before:bg-accent-primary after:bg-accent-primary": isVisible,
         },
         classNames
       )}
diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx
index 3989144013..fea0668538 100644
--- a/packages/ui/src/form-fields/checkbox.tsx
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -34,7 +34,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
           {
             "border-subtle-1 bg-layer-1 cursor-not-allowed": disabled,
             "border-strong hover:border-strong-1 bg-transparent": !disabled,
-            "border-custom-primary-40 hover:border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200":
+            "border-custom-primary-40 hover:border-custom-primary-40 bg-accent-primary hover:bg-custom-primary-200":
               !disabled && (checked || indeterminate),
           },
           className
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
index 479b7a6c01..e95b031a68 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -42,7 +42,7 @@ const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
 
 const VARIANT_CLASSES: Record<TModalVariant, string> = {
   danger: "bg-red-500/20 text-red-500",
-  primary: "bg-custom-primary-100/20 text-custom-primary-100",
+  primary: "bg-accent-primary/20 text-accent-primary",
 };
 
 export function AlertModalCore(props: Props) {