From fd1fc288c6cf1597bf46f3b01a42a6894edbb574 Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Wed, 10 Dec 2025 18:11:55 +0530
Subject: [PATCH] chore: updated color tokens for work item detail page

---
 .../core/components/dropdowns/priority.tsx    | 20 ++++++----
 .../issue-detail-widgets/widget-button.tsx    |  2 +-
 .../actions/helpers/activity-block.tsx        |  4 +-
 .../issue-detail/issue-activity/sort-root.tsx | 14 ++++---
 .../issue-detail/label/label-list-item.tsx    | 13 +++++--
 .../links/create-update-link-modal.tsx        |  6 +--
 .../issues/issue-detail/links/link-item.tsx   |  8 ++--
 .../issues/issue-detail/parent-select.tsx     |  6 +--
 .../issues/issue-detail/relation-select.tsx   |  6 +--
 .../issues/issue-detail/sidebar.tsx           | 38 +++++++++----------
 .../issues/issue-layouts/kanban/block.tsx     |  4 +-
 .../issues/issue-layouts/list/block.tsx       |  4 +-
 .../properties/all-properties.tsx             | 10 ++---
 .../properties/label-dropdown.tsx             | 29 ++++++++++----
 .../issue-layouts/properties/labels.tsx       |  6 +--
 .../components/default-properties.tsx         |  6 +--
 .../components/description-editor.tsx         |  4 +-
 .../issue-modal/components/parent-tag.tsx     |  2 +-
 .../issue-modal/components/title-input.tsx    |  4 +-
 .../components/issues/issue-modal/form.tsx    |  6 +--
 .../issues/peek-overview/properties.tsx       | 36 +++++++++---------
 .../components/issues/peek-overview/root.tsx  |  2 +
 .../components/issues/peek-overview/view.tsx  |  2 +-
 packages/ui/src/avatar/avatar-group.tsx       |  4 +-
 24 files changed, 134 insertions(+), 102 deletions(-)

diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index eb60f81a805..4f634942891 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -84,7 +84,7 @@ function BorderButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] rounded-sm text-11 px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] rounded-sm px-2  py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -121,7 +121,9 @@ function BorderButton(props: ButtonProps) {
           ) : (
             <SignalHigh className="size-3" />
           ))}
-        {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
+        {!hideText && (
+          <span className="flex-grow truncate text-caption-sm-medium">{priorityDetails?.title ?? placeholder}</span>
+        )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
@@ -167,7 +169,7 @@ function BackgroundButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 rounded-sm text-11 px-2 py-0.5",
+          "h-full flex items-center gap-1.5 rounded-sm  px-2 py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -205,7 +207,9 @@ function BackgroundButton(props: ButtonProps) {
             <SignalHigh className="size-3" />
           ))}
         {!hideText && (
-          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+          <span className="flex-grow truncate text-caption-sm-medium">
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
         )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -253,7 +257,7 @@ function TransparentButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full w-full flex items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 hover:bg-layer-1",
+          "h-full w-full flex items-center gap-1.5 rounded-sm  px-2 py-0.5 hover:bg-layer-1",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -292,7 +296,9 @@ function TransparentButton(props: ButtonProps) {
             <SignalHigh className="size-3" />
           ))}
         {!hideText && (
-          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+          <span className="flex-grow truncate text-caption-sm-medium">
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
         )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -502,4 +508,4 @@ export function PriorityDropdown(props: Props) {
       )}
     </ComboDropDown>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
index 5e4ce1455d2..fdb4c9ca2ab 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -22,7 +22,7 @@ export function IssueDetailWidgetButton(props: Props) {
       )}
     >
       {icon && icon}
-      <span className="text-13 font-medium">{title}</span>
+      <span className="text-body-xs-medium">{title}</span>
     </div>
   );
 }
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index 64b487f01d9..95879e568d9 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -34,8 +34,8 @@ export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent)
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-layer-1" aria-hidden />
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-layer-1 text-secondary">
+      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-layer-3" aria-hidden />
+      <div className="flex-shrink-0 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-layer-3 text-secondary">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
       <div className="w-full truncate text-secondary">
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
index f2d030e1342..1ae69db97dd 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
@@ -1,9 +1,9 @@
 import { memo } from "react";
 import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react";
 // plane package imports
-import type { E_SORT_ORDER } from "@plane/constants";
-import { getButtonStyling } from "@plane/propel/button";
+import { E_SORT_ORDER } from "@plane/constants";
 import { cn } from "@plane/utils";
+import { Button } from "@plane/propel/button";
 
 export type TActivitySortRoot = {
   sortOrder: E_SORT_ORDER;
@@ -13,18 +13,20 @@ export type TActivitySortRoot = {
 };
 export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
   return (
-    <div
-      className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-tertiary cursor-pointer", props.className)}
+    <Button
+      variant="ghost"
+      size="sm"
+      className={props.className}
       onClick={() => {
         props.toggleSort();
       }}
     >
-      {props.sortOrder === "asc" ? (
+      {props.sortOrder === E_SORT_ORDER.ASC ? (
         <ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
       ) : (
         <ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
       )}
-    </div>
+    </Button>
   );
 });
 
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index d3f9b4f7939..5a9514e80dd 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
+import { cn } from "@plane/utils";
 // types
 import { useLabel } from "@/hooks/store/use-label";
 import type { TLabelOperations } from "./root";
@@ -32,9 +33,13 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
   return (
     <div
       key={labelId}
-      className={`transition-all relative flex items-center gap-1 truncate border border-subtle rounded-full text-11 p-0.5 px-1 group ${
-        !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
-      } `}
+      className={cn(
+        "transition-all relative flex items-center gap-1 truncate border border-subtle rounded-full text-caption-sm-regular p-0.5 px-1 group",
+        {
+          "cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled,
+          "cursor-not-allowed": disabled,
+        }
+      )}
       onClick={handleLabel}
     >
       <div
@@ -46,7 +51,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
       <div className="truncate">{label.name}</div>
       {!disabled && (
         <div className="flex-shrink-0">
-          <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
+          <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
index cdfcb40b207..232957b661e 100644
--- a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -73,7 +73,7 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
     <ModalCore isOpen={isModalOpen} handleClose={onClose}>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="space-y-5 p-5">
-          <h3 className="text-18 font-medium text-secondary">
+          <h3 className="text-h4-medium text-secondary">
             {preloadedData?.id ? t("common.update_link") : t("common.add_link")}
           </h3>
           <div className="mt-2 space-y-3">
@@ -100,12 +100,12 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
                   />
                 )}
               />
-              {errors.url && <span className="text-11 text-red-500">{t("common.url_is_invalid")}</span>}
+              {errors.url && <span className="text-caption-sm-regular text-danger">{t("common.url_is_invalid")}</span>}
             </div>
             <div>
               <label htmlFor="title" className="mb-2 text-secondary">
                 {t("common.display_title")}
-                <span className="text-10 block">{t("common.optional")}</span>
+                <span className="text-caption-xs-regular block">{t("common.optional")}</span>
               </label>
               <Controller
                 control={control}
diff --git a/apps/web/core/components/issues/issue-detail/links/link-item.tsx b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
index b59e853db56..c6acfe36d3b 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -60,16 +60,18 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
               href={linkDetail.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="truncate text-13 cursor-pointer flex-grow flex items-center gap-3"
+              className="truncate text-body-xs-regular cursor-pointer flex-grow flex items-center gap-3"
             >
               {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
 
-              {linkTitle && linkTitle !== "" && <span className="text-placeholder text-11">{linkTitle}</span>}
+              {linkTitle && linkTitle !== "" && (
+                <span className="text-placeholder text-caption-sm-regular">{linkTitle}</span>
+              )}
             </a>
           </Tooltip>
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">
-          <p className="p-1 text-11 align-bottom leading-5 text-placeholder group-hover-text-secondary">
+          <p className="p-1 text-caption-sm-regular align-bottom leading-5 text-placeholder group-hover-text-secondary">
             {calculateTimeAgo(linkDetail.created_at)}
           </p>
           <span
diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
index c21f53ecd51..148ac1b8896 100644
--- a/apps/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -84,7 +84,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
         disabled={disabled}
       >
         {issue.parent_id && parentIssue ? (
-          <div className="flex items-center gap-1 bg-green-500/20 rounded-sm px-1.5 py-1">
+          <div className="flex items-center gap-1 bg-success-subtle rounded-sm px-1.5 py-1">
             <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name} isMobile={isMobile}>
               <Link href={workItemLink} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                 {parentIssue?.project_id && parentIssueProjectDetails && (
@@ -109,13 +109,13 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
                     handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
                   }}
                 >
-                  <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-red-500" />
+                  <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" />
                 </span>
               </Tooltip>
             )}
           </div>
         ) : (
-          <span className="text-13 text-placeholder">{t("issue.add.parent")}</span>
+          <span className="text-body-xs-regular text-placeholder">{t("issue.add.parent")}</span>
         )}
         {!disabled && (
           <span
diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
index c12975625ae..52c9aba5e1b 100644
--- a/apps/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -124,7 +124,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                         })}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-11 font-medium"
+                        className="text-caption-sm-medium"
                         onClick={(e) => e.stopPropagation()}
                       >
                         {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
@@ -139,7 +139,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                             removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
                           }}
                         >
-                          <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-red-500" />
+                          <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" />
                         </span>
                       </Tooltip>
                     )}
@@ -148,7 +148,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
               })}
             </div>
           ) : (
-            <span className="text-13 text-placeholder">{currRelationOption?.placeholder}</span>
+            <span className="text-body-xs-regular text-placeholder">{currRelationOption?.placeholder}</span>
           )}
           {!disabled && (
             <span
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index 5e3b458dda9..96fd93e6a99 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -80,11 +80,11 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
     <>
       <div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
         <div className="h-full w-full overflow-y-auto px-6">
-          <h5 className="mt-6 text-13 font-medium">{t("common.properties")}</h5>
+          <h5 className="mt-6 text-body-xs-medium">{t("common.properties")}</h5>
           {/* TODO: render properties using a common component */}
           <div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                 <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.state")}</span>
               </div>
@@ -96,14 +96,14 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 buttonVariant="transparent-with-text"
                 className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName="text-13"
+                buttonClassName="text-body-xs-regular"
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
               />
             </div>
 
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                 <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.assignees")}</span>
               </div>
@@ -117,7 +117,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
                 className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-13 justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
+                buttonClassName={`text-body-xs-regular justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
@@ -125,7 +125,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
             </div>
 
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                 <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.priority")}</span>
               </div>
@@ -142,11 +142,11 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
             {createdByDetails && (
               <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                   <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.created_by")}</span>
                 </div>
-                <div className="w-full h-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-13 justify-between cursor-not-allowed">
+                <div className="w-full h-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-body-xs-regular justify-between cursor-not-allowed">
                   <ButtonAvatars showTooltip userIds={createdByDetails.id} />
                   <span className="flex-grow truncate text-11 leading-5">{createdByDetails?.display_name}</span>
                 </div>
@@ -154,7 +154,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
             )}
 
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                 <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.order_by.start_date")}</span>
               </div>
@@ -171,7 +171,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 buttonVariant="transparent-with-text"
                 className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-13 ${issue?.start_date ? "" : "text-placeholder"}`}
+                buttonClassName={`text-body-xs-regular ${issue?.start_date ? "" : "text-placeholder"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
                 // TODO: add this logic
@@ -180,7 +180,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
             </div>
 
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                 <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.order_by.due_date")}</span>
               </div>
@@ -198,9 +198,9 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   buttonVariant="transparent-with-text"
                   className="group w-3/5 flex-grow"
                   buttonContainerClassName="w-full text-left"
-                  buttonClassName={cn("text-13", {
+                  buttonClassName={cn("text-body-xs-regular", {
                     "text-placeholder": !issue.target_date,
-                    "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+                    "text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
                   })}
                   hideIcon
                   clearIconClassName="h-3 w-3 hidden group-hover:inline !text-primary"
@@ -213,7 +213,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
             {projectId && areEstimateEnabledByProjectId(projectId) && (
               <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                   <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.estimate")}</span>
                 </div>
@@ -227,7 +227,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   buttonVariant="transparent-with-text"
                   className="group w-3/5 flex-grow"
                   buttonContainerClassName="w-full text-left"
-                  buttonClassName={`text-13 ${issue?.estimate_point !== null ? "" : "text-placeholder"}`}
+                  buttonClassName={`text-body-xs-regular ${issue?.estimate_point !== null ? "" : "text-placeholder"}`}
                   placeholder={t("common.none")}
                   hideIcon
                   dropdownArrow
@@ -238,7 +238,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
             {projectDetails?.module_view && (
               <div className="flex min-h-8 gap-2">
-                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-13 text-tertiary">
+                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-body-xs-regular text-tertiary">
                   <ModuleIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.modules")}</span>
                 </div>
@@ -255,7 +255,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
             {projectDetails?.cycle_view && (
               <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                   <CycleIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.cycle")}</span>
                   <TransferHopInfo workItem={issue} />
@@ -272,7 +272,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
             )}
 
             <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
                 <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.parent")}</span>
               </div>
@@ -287,7 +287,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
             </div>
 
             <div className="flex min-h-8 gap-2">
-              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-13 text-tertiary">
+              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-body-xs-regular text-tertiary">
                 <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.labels")}</span>
               </div>
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
index 7b60001a051..d7de2d5e3d9 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -119,7 +119,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
       </div>
 
       <Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}>
-        <div className="w-full line-clamp-1 text-13 text-primary">
+        <div className="w-full line-clamp-1 text-body-xs-regular text-primary">
           <span>{issue.name}</span>
         </div>
       </Tooltip>
@@ -269,7 +269,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
           href={workItemLink}
           ref={cardRef}
           className={cn(
-            "block rounded-sm border-[1px] outline-[0.5px] outline-transparent w-full border-subtle bg-surface-1 text-13 transition-all hover:border-strong-1",
+            "block rounded-sm border-[1px] outline-[0.5px] outline-transparent w-full border-subtle bg-surface-1 text-body-xs-regular transition-all hover:border-strong-1",
             { "hover:cursor-pointer": isDragAllowed },
             { "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) },
             { "bg-layer-1 z-[100]": isCurrentBlockDragging }
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 ab7a6520a7b..bc74c816ac6 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -173,7 +173,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
       <Row
         ref={issueRef}
         className={cn(
-          "group/list-block min-h-11 relative flex flex-col gap-3 bg-surface-1 hover:bg-surface-2 py-3 text-13 transition-colors border border-transparent",
+          "group/list-block min-h-11 relative flex flex-col gap-3 bg-surface-1 hover:bg-surface-2 py-3 text-body-xs-regular transition-colors border border-transparent",
           {
             "border-accent-strong": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
             "border-strong-1": isIssueActive,
@@ -271,7 +271,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               disabled={isCurrentBlockDragging}
               renderByDefault={false}
             >
-              <p className="truncate cursor-pointer text-13 text-primary">{issue.name}</p>
+              <p className="truncate cursor-pointer text-body-xs-regular text-primary">{issue.name}</p>
             </Tooltip>
             {isEpic && displayProperties && (
               <WithDisplayPropertiesHOC
diff --git a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index 119f7a784cd..a0ee2de2f64 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -299,7 +299,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             isClearable
             mergeDates
             buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
+            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""}
             clearIconClassName="!text-primary"
             disabled={isReadOnly}
             renderByDefault={isMobile}
@@ -346,7 +346,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             placeholder={t("common.order_by.due_date")}
             icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
+            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""}
             clearIconClassName="!text-primary"
             optionsClassName="z-10"
             disabled={isReadOnly}
@@ -466,7 +466,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
               )}
             >
               <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-              <div className="text-11">{subIssueCount}</div>
+              <div className="text-caption-sm-regular">{subIssueCount}</div>
             </div>
           </Tooltip>
         </WithDisplayPropertiesHOC>
@@ -490,7 +490,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             onClick={handleEventPropagation}
           >
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-11">{issue.attachment_count}</div>
+            <div className="text-caption-sm-regular">{issue.attachment_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
@@ -513,7 +513,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             onClick={handleEventPropagation}
           >
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-11">{issue.link_count}</div>
+            <div className="text-caption-sm-regular">{issue.link_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
diff --git a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
index 5567c873624..bd014f651db 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -130,14 +130,18 @@ export function LabelDropdown(props: ILabelDropdownProps) {
 
   const onOpen = useCallback(() => {
     if (!storeLabels && workspaceSlug && projectId)
-      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
-  }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels]);
+      fetchProjectLabels(workspaceSlug, projectId)
+        .then(() => setIsLoading(false))
+        .catch(() => {
+          setIsLoading(false);
+        });
+  }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels, setIsLoading]);
 
   const toggleDropdown = useCallback(() => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
     if (isOpen && onClose) onClose();
-  }, [onOpen, onClose, isOpen]);
+  }, [onOpen, onClose, isOpen, setIsOpen]);
 
   const handleClose = () => {
     if (!isOpen) return;
@@ -159,6 +163,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
     e.stopPropagation();
     if (query !== "" && e.key === "Escape") {
       setQuery("");
+      e.preventDefault();
     }
 
     if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && canCreateLabel) {
@@ -190,7 +195,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
       <button
         ref={setReferenceElement}
         type="button"
-        className={`clickable flex w-full h-full items-center justify-center gap-1 text-11 ${fullWidth && "hover:bg-layer-1"} ${
+        className={`clickable flex w-full h-full items-center justify-center gap-1 text-caption-sm-regular ${fullWidth && "hover:bg-layer-1"} ${
           disabled
             ? "cursor-not-allowed text-secondary"
             : value.length <= maxRender
@@ -204,7 +209,17 @@ export function LabelDropdown(props: ILabelDropdownProps) {
         {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
       </button>
     ),
-    [buttonClassName, disabled, fullWidth, handleOnClick, hideDropdownArrow, label, maxRender, value.length]
+    [
+      buttonClassName,
+      disabled,
+      fullWidth,
+      handleOnClick,
+      hideDropdownArrow,
+      label,
+      maxRender,
+      value.length,
+      setReferenceElement,
+    ]
   );
 
   const preventPropagation = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -229,7 +244,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
         {isOpen && (
           <Combobox.Options className="fixed z-10" static>
             <div
-              className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+              className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-caption-sm-regular shadow-raised-200 focus:outline-none ${optionsClassName}`}
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
@@ -238,7 +253,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                 <Search className="h-3.5 w-3.5 text-tertiary" />
                 <Combobox.Input
                   ref={inputRef}
-                  className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                  className="w-full bg-transparent px-2 py-1 text-caption-sm-regular text-secondary placeholder:text-placeholder focus:outline-none"
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder={t("common.search.label")}
diff --git a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
index b84d879890e..dbdf25e962f 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -56,7 +56,7 @@ const NoLabel = observer(function NoLabel({ isMobile, noLabelBorder, fullWidth,
     >
       <div
         className={cn(
-          "flex h-full items-center justify-center gap-2 rounded-sm px-2.5 py-1 text-11 hover:bg-layer-1",
+          "flex h-full items-center justify-center gap-2 rounded-sm px-2.5 py-1 text-caption-sm-regular hover:bg-layer-1",
           noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong",
           fullWidth && "w-full"
         )}
@@ -82,7 +82,7 @@ function LabelSummary({ isMobile, fullWidth, noLabelBorder, disabled, projectLab
   return (
     <div
       className={cn(
-        "flex h-5 flex-shrink-0 items-center justify-center rounded-sm px-2.5 text-11",
+        "flex h-5 flex-shrink-0 items-center justify-center rounded-sm px-2.5 text-caption-sm-regular",
         fullWidth && "w-full",
         noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong",
         disabled ? "cursor-not-allowed" : "cursor-pointer"
@@ -136,7 +136,7 @@ const LabelItem = observer(function LabelItem({
     >
       <div
         className={cn(
-          "flex overflow-hidden justify-center hover:bg-layer-1 max-w-full h-full flex-shrink-0 items-center rounded-sm px-2.5 text-11",
+          "flex overflow-hidden justify-center hover:bg-layer-1 max-w-full h-full flex-shrink-0 items-center rounded-sm px-2.5 text-caption-sm-regular",
           !disabled && "cursor-pointer",
           fullWidth && "w-full",
           noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong"
diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index f2f9f329c0a..76bfb7d2f3c 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -265,7 +265,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
             customButton={
               <button
                 type="button"
-                className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
+                className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
               >
                 {selectedParentIssue?.project_id && (
                   <IssueIdentifier
@@ -307,7 +307,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
         ) : (
           <button
             type="button"
-            className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
+            className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
             onClick={() => setParentIssueListModalOpen(true)}
           >
             <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
diff --git a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
index 038273be22a..ab010a29ae1 100644
--- a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -241,7 +241,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
             {issueName && issueName.trim() !== "" && config?.has_llm_configured && (
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded-sm bg-surface-2 hover:bg-layer-1 px-1.5 py-1 text-11 ${
+                className={`flex items-center gap-1 rounded-sm bg-surface-2 hover:bg-layer-1 px-1.5 py-1 text-caption-sm-regular ${
                   iAmFeelingLucky ? "cursor-wait" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
@@ -272,7 +272,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
                 button={
                   <button
                     type="button"
-                    className="flex items-center gap-1 rounded-sm px-1.5 py-1 text-11 bg-surface-2 hover:bg-layer-1"
+                    className="flex items-center gap-1 rounded-sm px-1.5 py-1 text-caption-sm-regular bg-surface-2 hover:bg-layer-1"
                     onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     tabIndex={-1}
                   >
diff --git a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
index 1ee0b4b8b74..d6f774e2798 100644
--- a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
@@ -33,7 +33,7 @@ export const IssueParentTag = observer(function IssueParentTag(props: TIssuePare
       control={control}
       name="parent_id"
       render={({ field: { onChange } }) => (
-        <div className="flex w-min items-center gap-2 whitespace-nowrap rounded-sm bg-surface-2 p-2 text-11">
+        <div className="flex w-min items-center gap-2 whitespace-nowrap rounded-sm bg-surface-2 p-2 text-caption-sm-regular">
           <div className="flex items-center gap-2">
             <span
               className="block h-1.5 w-1.5 rounded-full"
diff --git a/apps/web/core/components/issues/issue-modal/components/title-input.tsx b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
index 4aa8af45809..77a6bed1bce 100644
--- a/apps/web/core/components/issues/issue-modal/components/title-input.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
@@ -66,13 +66,13 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: TIssueTi
             ref={issueTitleRef || ref}
             hasError={Boolean(errors.name)}
             placeholder={t("title")}
-            className="w-full text-14"
+            className="w-full text-body-sm-regular"
             autoFocus
             tabIndex={getIndex("name")}
           />
         )}
       />
-      <span className="text-11 font-medium text-red-500">{errors?.name?.message}</span>
+      <span className="text-caption-sm-medium text-red-500">{errors?.name?.message}</span>
     </div>
   );
 });
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index f9a1e0cfdb4..cd984b5d7c4 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -380,7 +380,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
             className="flex flex-col w-full"
           >
             <div className="p-5 rounded-t-lg bg-surface-1">
-              <h3 className="text-18 font-medium text-secondary pb-2">{modalTitle}</h3>
+              <h3 className="text-h4-medium text-secondary pb-2">{modalTitle}</h3>
               <div className="flex items-center justify-between pt-2 pb-4">
                 <div className="flex items-center gap-x-1">
                   <IssueProjectSelect
@@ -518,7 +518,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                       role="button"
                     >
                       <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
-                      <span className="text-11">{t("create_more")}</span>
+                      <span className="text-caption-sm-regular">{t("create_more")}</span>
                     </div>
                   )}
                   <div className="flex items-center gap-2">
@@ -542,7 +542,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                     </div>
                     <div tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}>
                       <Button
-                        variant={moveToIssue ? "neutral-primary" : "primary"}
+                        variant={moveToIssue ? "secondary" : "primary"}
                         type="submit"
                         ref={submitBtnRef}
                         loading={isSubmitting}
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index 3a95fe47d17..97f057b636d 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -74,12 +74,12 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
   return (
     <div>
-      <h6 className="text-13 font-medium">{t("common.properties")}</h6>
+      <h6 className="text-body-xs-medium">{t("common.properties")}</h6>
       {/* TODO: render properties using a common component */}
       <div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
         {/* state */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
             <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.state")}</span>
           </div>
@@ -91,7 +91,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             buttonVariant="transparent-with-text"
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName="text-13"
+            buttonClassName="text-body-xs-regular"
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
           />
@@ -99,7 +99,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {/* assignee */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
             <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.assignees")}</span>
           </div>
@@ -113,7 +113,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-13 justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
+            buttonClassName={`text-body-xs-regular justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
             hideIcon={issue.assignee_ids?.length === 0}
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
@@ -122,7 +122,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {/* priority */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
             <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.priority")}</span>
           </div>
@@ -140,11 +140,11 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
         {/* created by */}
         {createdByDetails && (
           <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
               <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.created_by")}</span>
             </div>
-            <div className="w-full h-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-13 justify-between cursor-not-allowed">
+            <div className="w-full h-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-body-xs-regular justify-between cursor-not-allowed">
               <ButtonAvatars
                 showTooltip
                 userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
@@ -158,7 +158,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {/* start date */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
             <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.order_by.start_date")}</span>
           </div>
@@ -175,7 +175,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             disabled={disabled}
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-13 ${issue?.start_date ? "" : "text-placeholder"}`}
+            buttonClassName={`text-body-xs-regular ${issue?.start_date ? "" : "text-placeholder"}`}
             hideIcon
             clearIconClassName="h-3 w-3 hidden group-hover:inline"
             // TODO: add this logic
@@ -185,7 +185,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {/* due date */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
             <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.order_by.due_date")}</span>
           </div>
@@ -203,7 +203,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               disabled={disabled}
               className="w-3/4 flex-grow group"
               buttonContainerClassName="w-full text-left"
-              buttonClassName={cn("text-13", {
+              buttonClassName={cn("text-body-xs-regular", {
                 "text-placeholder": !issue.target_date,
                 "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
               })}
@@ -219,7 +219,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
         {/* estimate */}
         {isEstimateEnabled && (
           <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
               <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.estimate")}</span>
             </div>
@@ -231,7 +231,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               buttonVariant="transparent-with-text"
               className="w-3/4 flex-grow group"
               buttonContainerClassName="w-full text-left"
-              buttonClassName={`text-13 ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
+              buttonClassName={`text-body-xs-regular ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
               placeholder="None"
               hideIcon
               dropdownArrow
@@ -242,7 +242,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {projectDetails?.module_view && (
           <div className="flex w-full items-center gap-3 min-h-8 h-full">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
               <ModuleIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.modules")}</span>
             </div>
@@ -259,7 +259,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {projectDetails?.cycle_view && (
           <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
               <CycleIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.cycle")}</span>
               <TransferHopInfo workItem={issue} />
@@ -277,7 +277,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {/* parent */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
             <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <p>{t("common.parent")}</p>
           </div>
@@ -293,7 +293,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         {/* label */}
         <div className="flex w-full items-center gap-3 min-h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
             <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.labels")}</span>
           </div>
diff --git a/apps/web/core/components/issues/peek-overview/root.tsx b/apps/web/core/components/issues/peek-overview/root.tsx
index ed702f3d6ff..ac75b4d67fa 100644
--- a/apps/web/core/components/issues/peek-overview/root.tsx
+++ b/apps/web/core/components/issues/peek-overview/root.tsx
@@ -81,6 +81,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
                 eventName: WORK_ITEM_TRACKER_EVENTS.update,
                 payload: { id: issueId },
               });
+              return
             })
             .catch((error) => {
               captureError({
@@ -104,6 +105,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWor
               payload: { id: issueId },
             });
             removeRoutePeekId();
+            return
           });
         } catch (error) {
           setToast({
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index 138791166cc..b5d091e35a2 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -128,7 +128,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
 
   const content = (
-    <div className="w-full !text-14">
+    <div className="w-full text-body-sm-regular">
       {issueId && (
         <div
           ref={issuePeekOverviewRef}
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
index b9c8b11ccff..77aede4489a 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -60,7 +60,7 @@ export function AvatarGroup(props: Props) {
   return (
     <div className={cn("flex", sizeInfo.spacing)}>
       {avatarsWithUpdatedProps.map((avatar, index) => (
-        <div key={index} className="rounded-full ring-1 ring-custom-background-100">
+        <div key={index} className="rounded-full border border-subtle-1">
           {avatar}
         </div>
       ))}
@@ -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-accent-subtle text-9 text-accent-primary ring-1 ring-custom-background-100",
+              "grid place-items-center rounded-full bg-accent-subtle text-9 text-accent-primary border border-subtle-1",
               {
                 [sizeInfo.avatarSize]: !isAValidNumber(size),
               }