chore: update border colors

apps/admin/app/(all)/(dashboard)/ai/page.tsx

@@ -16,7 +16,7 @@ const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentP
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure your AI API credentials so Plane AI features are turned on for all your workspaces.

apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx

@@ -58,7 +58,7 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Gitea"
             description="Allow members to login or sign up to plane with their Gitea accounts."

apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -67,7 +67,7 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="GitHub"
             description="Allow members to login or sign up to plane with their GitHub accounts."

apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx

@@ -58,7 +58,7 @@ const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthent
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="GitLab"
             description="Allow members to login or sign up to plane with their GitLab accounts."

apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -58,7 +58,7 @@ const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthent
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Google"
             description="Allow members to login or sign up to plane with their Google

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

@@ -57,7 +57,7 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Manage authentication modes for your instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure authentication modes for your team and restrict sign-ups to be invite only.

apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

@@ -162,7 +162,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
               value={emailSecurityKey}
               label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
               onChange={handleEmailSecurityChange}
-              buttonClassName="rounded-md border-custom-border-200"
+              buttonClassName="rounded-md border-subtle-1"
               optionsClassName="w-full"
               input
             >
@@ -174,7 +174,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             </CustomSelect>
           </div>
         </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
+        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-subtle">
           <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
             <div className="mr-8 flex items-center gap-10 pt-4">
               <div className="grow">

apps/admin/app/(all)/(dashboard)/email/page.tsx

@@ -51,7 +51,7 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="flex items-center justify-between gap-4 border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="py-4 space-y-1 flex-shrink-0">
             <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
             <div className="text-sm font-normal text-custom-text-300">

apps/admin/app/(all)/(dashboard)/general/form.tsx

@@ -108,7 +108,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       <div className="space-y-3">
         <div className="text-lg font-medium">Chat + telemetry</div>
         <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
-        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+        <div className="flex items-center gap-14 px-4 py-3 border border-subtle-1 rounded">
           <div className="grow flex items-center gap-4">
             <div className="shrink-0">
               <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">

apps/admin/app/(all)/(dashboard)/general/intercom.tsx

@@ -49,7 +49,7 @@ export const IntercomConfig = observer(function IntercomConfig(props: TIntercomC
 
   return (
     <>
-      <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+      <div className="flex items-center gap-14 px-4 py-3 border border-subtle-1 rounded">
         <div className="grow flex items-center gap-4">
           <div className="shrink-0">
             <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">

apps/admin/app/(all)/(dashboard)/general/page.tsx

@@ -11,7 +11,7 @@ function GeneralPage() {
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">General settings</div>
           <div className="text-sm font-normal text-custom-text-300">
             Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your

apps/admin/app/(all)/(dashboard)/image/page.tsx

@@ -16,7 +16,7 @@ const InstanceImagePage = observer(function InstanceImagePage(_props: Route.Comp
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
           <div className="text-sm font-normal text-custom-text-300">
             Let your users search and choose images from third-party libraries

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -45,7 +45,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
+        "flex w-full items-center justify-between gap-1 self-baseline border-t border-subtle-1 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
         {
           "flex-col h-auto py-1.5": isSidebarCollapsed,
         }

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

@@ -123,7 +123,7 @@ export function WorkspaceCreateForm() {
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-sm text-custom-text-300">Set your workspace&apos;s URL</h4>
-          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
+          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-subtle-1 px-3">
             <span className="whitespace-nowrap text-sm text-custom-text-200">{workspaceBaseURL}</span>
             <Controller
               control={control}
@@ -175,7 +175,7 @@ export function WorkspaceCreateForm() {
                       <span className="text-custom-text-400">Select a range</span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  buttonClassName="!border-[0.5px] !border-subtle-1 !shadow-none"
                   input
                   optionsClassName="w-full"
                 >

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

@@ -6,7 +6,7 @@ import { WorkspaceCreateForm } from "./form";
 const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
   return (
     <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-      <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
         <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
         <div className="text-sm font-normal text-custom-text-300">
           You will need to invite users from Workspace Settings after you create this workspace.

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

@@ -69,7 +69,7 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
 
   return (
     <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="flex items-center justify-between gap-4 border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
         <div className="flex flex-col gap-1">
           <div className="text-xl font-medium text-custom-text-100">Workspaces on this instance</div>
           <div className="text-sm font-normal text-custom-text-300">

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -132,7 +132,7 @@ export function InstanceSignInForm() {
                 Email <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-custom-background-100 placeholder:text-custom-text-400"
                 id="email"
                 name="email"
                 type="email"
@@ -151,7 +151,7 @@ export function InstanceSignInForm() {
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-custom-background-100 placeholder:text-custom-text-400"
                   id="password"
                   name="password"
                   type={showPassword ? "text" : "password"}

apps/admin/core/components/authentication/authentication-method-card.tsx

@@ -17,7 +17,7 @@ export function AuthenticationMethodCard(props: Props) {
   return (
     <div
       className={cn("w-full flex items-center gap-14 rounded", {
-        "px-4 py-3 border border-custom-border-200": withBorder,
+        "px-4 py-3 border border-subtle-1": withBorder,
       })}
     >
       <div

apps/admin/core/components/common/code-block.tsx

@@ -10,9 +10,9 @@ export function CodeBlock({ children, className, darkerShade }: TProps) {
   return (
     <span
       className={cn(
-        "px-0.5 text-xs text-custom-text-300 bg-custom-background-90 font-semibold rounded-md border border-custom-border-100",
+        "px-0.5 text-xs text-custom-text-300 bg-custom-background-90 font-semibold rounded-md border border-subtle",
         {
-          "text-custom-text-200 bg-custom-background-80 border-custom-border-200": darkerShade,
+          "text-custom-text-200 bg-custom-background-80 border-subtle-1": darkerShade,
         },
         className
       )}

apps/admin/core/components/instance/setup-form.tsx

@@ -160,7 +160,7 @@ export function InstanceSetupForm() {
                   First name <span className="text-red-500">*</span>
                 </label>
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-custom-background-100 placeholder:text-custom-text-400"
                   id="first_name"
                   name="first_name"
                   type="text"
@@ -177,7 +177,7 @@ export function InstanceSetupForm() {
                   Last name <span className="text-red-500">*</span>
                 </label>
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-custom-background-100 placeholder:text-custom-text-400"
                   id="last_name"
                   name="last_name"
                   type="text"
@@ -195,7 +195,7 @@ export function InstanceSetupForm() {
                 Email <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-custom-background-100 placeholder:text-custom-text-400"
                 id="email"
                 name="email"
                 type="email"
@@ -216,7 +216,7 @@ export function InstanceSetupForm() {
                 Company name <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-custom-background-100 placeholder:text-custom-text-400"
                 id="company_name"
                 name="company_name"
                 type="text"
@@ -233,7 +233,7 @@ export function InstanceSetupForm() {
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-custom-background-100 placeholder:text-custom-text-400"
                   id="password"
                   name="password"
                   type={showPassword.password ? "text" : "password"}
@@ -285,7 +285,7 @@ export function InstanceSetupForm() {
                   value={formData.confirm_password}
                   onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                   placeholder="Confirm password"
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
                   onFocus={() => setIsRetryPasswordInputFocused(true)}
                   onBlur={() => setIsRetryPasswordInputFocused(false)}
                 />

apps/admin/core/components/new-user-popup.tsx

@@ -18,7 +18,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
 
   if (!isNewUserPopup) return <></>;
   return (
-    <div className="absolute bottom-8 right-8 p-6 w-96 border border-custom-border-100 shadow-md rounded-lg bg-custom-background-100">
+    <div className="absolute bottom-8 right-8 p-6 w-96 border border-subtle shadow-md rounded-lg bg-custom-background-100">
       <div className="flex gap-4">
         <div className="grow">
           <div className="text-base font-semibold">Create workspace</div>

apps/admin/core/components/workspace/list-item.tsx

@@ -23,7 +23,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
       key={workspaceId}
       href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
       target="_blank"
-      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-custom-border-200/70 hover:border-custom-border-200 hover:bg-custom-background-90 rounded-md"
+      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-subtle-1/70 hover:border-subtle-1 hover:bg-custom-background-90 rounded-md"
     >
       <div className="flex items-start gap-4">
         <span

apps/api/plane/seeds/data/issues.json

@@ -30,7 +30,7 @@
     "id": 3,
     "name": "2. Invite your team 🤜🤛",
     "sequence_id": 3,
-    "description_html": "<p class=\"editor-paragraph-block\">Let's get your teammates on board!</p><p class=\"editor-paragraph-block\">First, you'll need to invite them to your workspace before they can join specific projects:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on your workspace name in the top-left corner, then select <strong>Settings</strong> from the dropdown.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/31.png\" width=\"395px\" height=\"367px\" id=\"26b0f613-b9d8-48b8-a10d-1a75501f19e0\" aspectratio=\"1.074766355140187\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Head over to the <strong>Members</strong> tab - this is your user management hub. Click <strong>Add member</strong> on the top right.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/32.png\" width=\"1144.380859375px\" height=\"206.3244316692872px\" id=\"7c64e9b0-4f6d-4958-917d-f77119cd48bd\" aspectratio=\"5.546511627906977\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">To do this, go to your project's <strong>Settings</strong> page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/33.png\" width=\"1119.380859375px\" height=\"329.9601265352615px\" id=\"3029c693-19fc-458e-9f5c-fdf3511dd2b6\" aspectratio=\"3.39247311827957\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Find the <strong>Members</strong> section, select your teammate, and assign them a project role - this controls what they can do within just this project.</p></li></ol><p class=\"editor-paragraph-block\"><br>That's it!</p><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">To learn more about user management, see <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/workspaces/members\">Manage users and roles</a>.</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">Let's get your teammates on board!</p><p class=\"editor-paragraph-block\">First, you'll need to invite them to your workspace before they can join specific projects:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on your workspace name in the top-left corner, then select <strong>Settings</strong> from the dropdown.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/31.png\" width=\"395px\" height=\"367px\" id=\"26b0f613-b9d8-48b8-a10d-1a75501f19e0\" aspectratio=\"1.074766355140187\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Head over to the <strong>Members</strong> tab - this is your user management hub. Click <strong>Add member</strong> on the top right.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/32.png\" width=\"1144.380859375px\" height=\"206.3244316692872px\" id=\"7c64e9b0-4f6d-4958-917d-f77119cd48bd\" aspectratio=\"5.546511627906977\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">To do this, go to your project's <strong>Settings</strong> page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/33.png\" width=\"1119.380859375px\" height=\"329.9601265352615px\" id=\"3029c693-19fc-458e-9f5c-fdf3511dd2b6\" aspectratio=\"3.39247311827957\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Find the <strong>Members</strong> section, select your teammate, and assign them a project role - this controls what they can do within just this project.</p></li></ol><p class=\"editor-paragraph-block\"><br>That's it!</p><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">To learn more about user management, see <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/workspaces/members\">Manage users and roles</a>.</p>",
     "description_stripped": "Let's get your teammates on board!First, you'll need to invite them to your workspace before they can join specific projects:Click on your workspace name in the top-left corner, then select Settings from the dropdown.Head over to the Members tab - this is your user management hub. Click Add member on the top right.Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.To do this, go to your project's Settings page.Find the Members section, select your teammate, and assign them a project role - this controls what they can do within just this project.That's it!To learn more about user management, see Manage users and roles.",
     "sort_order": 3000,
     "state_id": 1,
@@ -44,7 +44,7 @@
     "id": 4,
     "name": "3. Create and assign Work Items ✏️",
     "sequence_id": 4,
-    "description_html": "<p class=\"editor-paragraph-block\">A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.</p><p class=\"editor-paragraph-block\">Ready to add something to your project's to-do list? Here's how:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add work item</strong> button in the top-right corner of the Work Items page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/41.png\" width=\"1085.380859375px\" height=\"482.53758375605696px\" id=\"ba055bc3-4162-4750-9ad4-9434fc0e7121\" aspectratio=\"2.249318801089918\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Give your task a clear title and add any details in the description.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Set up the essentials:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Assign it to a team member (or yourself!)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose a priority level</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add start and due dates if there's a timeline</p></li></ul></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Save time by using the keyboard shortcut <strong>C</strong> from anywhere in your project to quickly create a new work item!</p></div><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to dive deeper into all the things you can do with work items? Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/overview\">documentation</a>.</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.</p><p class=\"editor-paragraph-block\">Ready to add something to your project's to-do list? Here's how:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add work item</strong> button in the top-right corner of the Work Items page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/41.png\" width=\"1085.380859375px\" height=\"482.53758375605696px\" id=\"ba055bc3-4162-4750-9ad4-9434fc0e7121\" aspectratio=\"2.249318801089918\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Give your task a clear title and add any details in the description.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Set up the essentials:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Assign it to a team member (or yourself!)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose a priority level</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add start and due dates if there's a timeline</p></li></ul></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Save time by using the keyboard shortcut <strong>C</strong> from anywhere in your project to quickly create a new work item!</p></div><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to dive deeper into all the things you can do with work items? Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/overview\">documentation</a>.</p>",
     "description_stripped": "A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.Ready to add something to your project's to-do list? Here's how:Click the Add work item button in the top-right corner of the Work Items page.Give your task a clear title and add any details in the description.Set up the essentials:Assign it to a team member (or yourself!)Choose a priority levelAdd start and due dates if there's a timelineTip: Save time by using the keyboard shortcut C from anywhere in your project to quickly create a new work item!Want to dive deeper into all the things you can do with work items? Check out our documentation.",
     "sort_order": 4000,
     "state_id": 3,
@@ -72,7 +72,7 @@
     "id": 6,
     "name": "5. Use Cycles to time box tasks 🗓️",
     "sequence_id": 6,
-    "description_html": "<p class=\"editor-paragraph-block\">A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.</p><h2 class=\"editor-heading-block\"><strong>Setup Cycles</strong></h2><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Go to the <strong>Cycles</strong> section in your project (you can find it in the left sidebar)</p><image-component src=\"https://media.docs.plane.so/seed_assets/61.png\" width=\"1144.380859375px\" height=\"341.8747850334119px\" id=\"9c3aea94-703a-4d4c-8c39-4201e994711d\" aspectratio=\"3.3473684210526318\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add cycle </strong>button in the top-right corner</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter details and set the start and end dates for your cycle.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click <strong>Create cycle</strong> and you're ready to go!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add existing work items to the Cycle or create new ones.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> To create a new Cycle quickly, just press <code class=\"rounded bg-custom-background-80 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200\" spellcheck=\"false\">Q</code> from anywhere in your project!</p></div><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to learn more?</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Starting and stopping cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Transferring work items between cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Tracking progress with charts</p></li></ul><p class=\"editor-paragraph-block\">Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/cycles\">detailed documentation</a> for everything you need to know!</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.</p><h2 class=\"editor-heading-block\"><strong>Setup Cycles</strong></h2><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Go to the <strong>Cycles</strong> section in your project (you can find it in the left sidebar)</p><image-component src=\"https://media.docs.plane.so/seed_assets/61.png\" width=\"1144.380859375px\" height=\"341.8747850334119px\" id=\"9c3aea94-703a-4d4c-8c39-4201e994711d\" aspectratio=\"3.3473684210526318\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add cycle </strong>button in the top-right corner</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter details and set the start and end dates for your cycle.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click <strong>Create cycle</strong> and you're ready to go!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add existing work items to the Cycle or create new ones.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> To create a new Cycle quickly, just press <code class=\"rounded bg-custom-background-80 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-subtle-1\" spellcheck=\"false\">Q</code> from anywhere in your project!</p></div><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to learn more?</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Starting and stopping cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Transferring work items between cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Tracking progress with charts</p></li></ul><p class=\"editor-paragraph-block\">Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/cycles\">detailed documentation</a> for everything you need to know!</p>",
     "description_stripped": "A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.Setup CyclesGo to the Cycles section in your project (you can find it in the left sidebar)Click the Add cycle button in the top-right cornerEnter details and set the start and end dates for your cycle.Click Create cycle and you're ready to go!Add existing work items to the Cycle or create new ones.Tip: To create a new Cycle quickly, just press Q from anywhere in your project!Want to learn more?Starting and stopping cyclesTransferring work items between cyclesTracking progress with chartsCheck out our detailed documentation for everything you need to know!",
     "sort_order": 6000,
     "state_id": 1,
@@ -86,7 +86,7 @@
     "id": 7,
     "name": "6. Customize your settings ⚙️",
     "sequence_id": 7,
-    "description_html": "<p class=\"editor-paragraph-block\">Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!</p><h2 class=\"editor-heading-block\">Workspace settings</h2><p class=\"editor-paragraph-block\">Remember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite and manage workspace members</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Upgrade plans and manage billing</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Import data from other tools</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Export your data</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Manage integrations</p></li></ul><h2 class=\"editor-heading-block\">Project Settings</h2><p class=\"editor-paragraph-block\">Each project has its own settings where you can:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Change project details and visibility</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite specific members to just this project</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Customize your workflow States (like adding a \"Testing\" state)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Create and organize Labels</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enable or disable features you need (or don't need)</p></li></ul><h2 class=\"editor-heading-block\">Your Profile Settings</h2><p class=\"editor-paragraph-block\">You can also customize your own personal experience! Click on your profile icon in the top-right corner to find:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Profile settings (update your name, photo, etc.)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose your timezone and preferred language for the interface</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Email notification preferences (what you want to be alerted about)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Appearance settings (light/dark mode)<br></p></li></ul><p class=\"editor-paragraph-block\">Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!</p><div data-emoji-unicode=\"128278\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f516.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note:</strong> Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.</p></div><p class=\"editor-paragraph-block\"></p><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\"></p>",
+    "description_html": "<p class=\"editor-paragraph-block\">Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!</p><h2 class=\"editor-heading-block\">Workspace settings</h2><p class=\"editor-paragraph-block\">Remember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite and manage workspace members</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Upgrade plans and manage billing</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Import data from other tools</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Export your data</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Manage integrations</p></li></ul><h2 class=\"editor-heading-block\">Project Settings</h2><p class=\"editor-paragraph-block\">Each project has its own settings where you can:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Change project details and visibility</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite specific members to just this project</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Customize your workflow States (like adding a \"Testing\" state)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Create and organize Labels</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enable or disable features you need (or don't need)</p></li></ul><h2 class=\"editor-heading-block\">Your Profile Settings</h2><p class=\"editor-paragraph-block\">You can also customize your own personal experience! Click on your profile icon in the top-right corner to find:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Profile settings (update your name, photo, etc.)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose your timezone and preferred language for the interface</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Email notification preferences (what you want to be alerted about)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Appearance settings (light/dark mode)<br></p></li></ul><p class=\"editor-paragraph-block\">Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!</p><div data-emoji-unicode=\"128278\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f516.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note:</strong> Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.</p></div><p class=\"editor-paragraph-block\"></p><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\"></p>",
     "description_stripped": "Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!Workspace settingsRemember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:Invite and manage workspace membersUpgrade plans and manage billingImport data from other toolsExport your dataManage integrationsProject SettingsEach project has its own settings where you can:Change project details and visibilityInvite specific members to just this projectCustomize your workflow States (like adding a \"Testing\" state)Create and organize LabelsEnable or disable features you need (or don't need)Your Profile SettingsYou can also customize your own personal experience! Click on your profile icon in the top-right corner to find:Profile settings (update your name, photo, etc.)Choose your timezone and preferred language for the interfaceEmail notification preferences (what you want to be alerted about)Appearance settings (light/dark mode)Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!Note: Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.",
     "sort_order": 7000,
     "state_id": 1,

apps/space/app/issues/[anchor]/layout.tsx

@@ -127,7 +127,7 @@ function IssuesLayout(props: Route.ComponentProps) {
   return (
     <>
       <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
-        <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+        <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-strong bg-custom-sidebar-background-100">
           <IssuesNavbarRoot publishSettings={publishSettings} />
         </div>
         <div className="relative h-full w-full overflow-hidden bg-custom-background-90">

apps/space/core/components/account/auth-forms/email.tsx

@@ -52,7 +52,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
         <div
           className={cn(
             `relative flex items-center rounded-md bg-custom-background-100 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-custom-border-100`
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-subtle`
           )}
           onFocus={() => {
             setIsFocused(true);

apps/space/core/components/account/auth-forms/password.tsx

@@ -119,9 +119,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
         <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
           Email
         </label>
-        <div
-          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
-        >
+        <div className={`relative flex items-center rounded-md bg-custom-background-100 border border-subtle`}>
           <Input
             id="email"
             name="email"
@@ -152,7 +150,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             value={passwordFormData.password}
             onChange={(e) => handleFormChange("password", e.target.value)}
             placeholder="Enter password"
-            className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+            className="disable-autofill-style h-10 w-full border border-subtle !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
             onFocus={() => setIsPasswordInputFocused(true)}
             onBlur={() => setIsPasswordInputFocused(false)}
             autoComplete="on"
@@ -185,7 +183,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               value={passwordFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder="Confirm password"
-              className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="disable-autofill-style h-10 w-full border border-subtle !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
             />

apps/space/core/components/account/auth-forms/unique-code.tsx

@@ -83,9 +83,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
         <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
           Email
         </label>
-        <div
-          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
-        >
+        <div className={`relative flex items-center rounded-md bg-custom-background-100 border border-subtle`}>
           <Input
             id="email"
             name="email"
@@ -114,7 +112,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder="gets-sets-flys"
-          className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+          className="disable-autofill-style h-10 w-full border border-subtle !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
           autoFocus
         />
         <div className="flex w-full items-center justify-between px-1 text-xs pt-1">

apps/space/core/components/account/user-logged-in.tsx

@@ -16,7 +16,7 @@ export const UserLoggedIn = observer(function UserLoggedIn() {
 
   return (
     <div className="flex flex-col h-screen w-screen">
-      <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
+      <div className="relative flex w-full items-center justify-between gap-4 border-b border-subtle-1 px-6 py-5">
         <PlaneLockup className="h-6 w-auto text-custom-text-100" />
         <UserAvatar />
       </div>

apps/space/core/components/common/powered-by.tsx

@@ -15,7 +15,7 @@ export function PoweredBy(props: TPoweredBy) {
   return (
     <a
       href={WEBSITE_URL}
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-subtle-1 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
       target="_blank"
       rel="noreferrer noopener"
     >

apps/space/core/components/editor/lite-text-editor.tsx

@@ -59,7 +59,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
   });
 
   return (
-    <div className="border border-custom-border-200 rounded p-3 space-y-3">
+    <div className="border border-subtle-1 rounded p-3 space-y-3">
       <LiteTextEditorWithRef
         ref={ref}
         disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}

apps/space/core/components/editor/toolbar.tsx

@@ -49,12 +49,12 @@ export function IssueCommentToolbar(props: Props) {
 
   return (
     <div className="flex h-9 w-full items-stretch gap-1.5 bg-custom-background-90 overflow-x-scroll">
-      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 p-1">
+      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-subtle-1 p-1">
         <div className="flex items-stretch">
           {Object.keys(toolbarItems).map((key, index) => (
             <div
               key={key}
-              className={cn("flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5", {
+              className={cn("flex items-stretch gap-0.5 border-r border-subtle-1 px-2.5", {
                 "pl-0": index === 0,
               })}
             >

apps/space/core/components/issues/filters/applied-filters/filters-list.tsx

@@ -30,7 +30,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-subtle-1 px-2 py-1 capitalize"
           >
             <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             <div className="flex flex-wrap items-center gap-1">
@@ -62,7 +62,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
       <button
         type="button"
         onClick={handleRemoveAllFilters}
-        className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        className="flex items-center gap-2 rounded-md border border-subtle-1 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
       >
         {t("common.clear_all")}
         <CloseIcon height={12} width={12} strokeWidth={2} />

apps/space/core/components/issues/filters/applied-filters/root.tsx

@@ -89,7 +89,7 @@ export const IssueAppliedFilters = observer(function IssueAppliedFilters(props:
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="border-b border-custom-border-200 bg-custom-background-100 p-4">
+    <div className="border-b border-subtle-1 bg-custom-background-100 p-4">
       <AppliedFiltersList
         appliedFilters={appliedFilters || {}}
         handleRemoveFilter={handleFilters as any}

apps/space/core/components/issues/filters/helpers/dropdown.tsx

@@ -46,7 +46,7 @@ export function FiltersDropdown(props: Props) {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded border border-subtle-1 bg-custom-background-100 shadow-custom-shadow-rg"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}

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-custom-background-90 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
+          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-strong"
         } ${multiple ? "rounded-sm" : "rounded-full"}`}
       >
         {isChecked && <Check size={10} strokeWidth={3} />}

apps/space/core/components/issues/filters/selection.tsx

@@ -24,7 +24,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-subtle-1 bg-custom-background-90 px-1.5 py-1 text-xs">
           <Search className="text-custom-text-400" size={12} strokeWidth={2} />
           <input
             type="text"

apps/space/core/components/issues/issue-layouts/kanban/block.tsx

@@ -87,7 +87,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
     <div className={cn("group/kanban-block relative p-1.5")}>
       <div
         className={cn(
-          "relative block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+          "relative block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-subtle-1 bg-custom-background-100 text-sm transition-all hover:border-strong-1",
           { "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id) }
         )}
       >

apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -269,7 +269,7 @@ const SubGroup = observer(function SubGroup(props: ISubGroup) {
   return (
     <>
       <div className="flex flex-shrink-0 flex-col">
-        <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
+        <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-subtle-1">
           <div className="sticky left-0 flex-shrink-0">
             <HeaderSubGroupByCard
               icon={group.icon as any}

apps/space/core/components/issues/issue-layouts/list/list-group.tsx

@@ -41,7 +41,7 @@ const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
-    <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-custom-border-200">
+    <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-subtle-1">
       <div className="flex items-center gap-3">
         <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
         <span className={`h-5 w-52 bg-custom-background-80 rounded animate-pulse`} />
@@ -115,7 +115,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
 
   return validateEmptyIssueGroups(groupIssueCount) ? (
     <div ref={groupRef} className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`)}>
-      <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pl-2 pr-3 py-1">
+      <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle-1 bg-custom-background-90 pl-2 pr-3 py-1">
         <HeaderGroupByCard
           groupID={group.id}
           icon={group.icon}

apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -135,7 +135,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         <Tooltip tooltipHeading="Sub-work items" tooltipContent={`${issue.sub_issues_count}`}>
           <div
             className={cn(
-              "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1",
+              "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-strong px-2.5 py-1",
               {
                 "hover:bg-custom-background-80 cursor-pointer": issue.sub_issues_count,
               }
@@ -154,7 +154,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-strong px-2.5 py-1">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.attachment_count}</div>
           </div>
@@ -168,7 +168,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-strong px-2.5 py-1">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.link_count}</div>
           </div>

apps/space/core/components/issues/issue-layouts/properties/cycle.tsx

@@ -22,7 +22,7 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
       <div
         className={cn(
           "flex h-full w-full items-center justify-between gap-1 rounded px-2.5 py-1 text-xs  duration-300 focus:outline-none",
-          { "border-[0.5px] border-custom-border-300": shouldShowBorder }
+          { "border-[0.5px] border-strong": shouldShowBorder }
         )}
       >
         <div className="flex w-full items-center text-xs gap-1.5">

apps/space/core/components/issues/issue-layouts/properties/due-date.tsx

@@ -28,7 +28,7 @@ export const IssueBlockDate = observer(function IssueBlockDate(props: Props) {
       <div
         className={cn("flex h-full items-center gap-1 rounded px-2.5 py-1 text-xs text-custom-text-100", {
           "text-red-500": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
-          "border-[0.5px] border-custom-border-300": shouldShowBorder,
+          "border-[0.5px] border-strong": shouldShowBorder,
         })}
       >
         <DueDatePropertyIcon className="size-3 flex-shrink-0" />

apps/space/core/components/issues/issue-layouts/properties/labels.tsx

@@ -21,7 +21,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
     return (
       <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
         <div
-          className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs border-[0.5px] border-custom-border-300`}
+          className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs border-[0.5px] border-strong`}
         >
           <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
           {shouldShowLabel && <span>No Labels</span>}
@@ -37,7 +37,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
             <Tooltip key={label.id} position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
               <div
                 key={label?.id}
-                className={`flex overflow-hidden h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs`}
+                className={`flex overflow-hidden h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-strong px-2.5 py-1 text-xs`}
               >
                 <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
                   <span
@@ -54,7 +54,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
         </>
       ) : (
         <div
-          className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs cursor-not-allowed"
+          className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-strong px-2.5 py-1 text-xs cursor-not-allowed"
             `}
         >
           <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelsString}>

apps/space/core/components/issues/issue-layouts/properties/member.tsx

@@ -63,7 +63,7 @@ export const IssueBlockMembers = observer(function IssueBlockMembers({ memberIds
     <div className="relative h-full flex flex-wrap items-center gap-1">
       <div
         className={cn("flex flex-shrink-0 cursor-default items-center rounded-md text-xs", {
-          "border-[0.5px] border-custom-border-300 px-2.5 py-1": shouldShowBorder && !members?.length,
+          "border-[0.5px] border-strong px-2.5 py-1": shouldShowBorder && !members?.length,
         })}
       >
         <div className="flex items-center gap-1.5 text-custom-text-200">

apps/space/core/components/issues/issue-layouts/properties/modules.tsx

@@ -26,7 +26,7 @@ export const IssueBlockModules = observer(function IssueBlockModules({ moduleIds
           <div
             key={modules?.[0]?.id}
             className={cn("flex h-full flex-shrink-0 cursor-default items-center rounded-md px-2.5 py-1 text-xs", {
-              "border-[0.5px] border-custom-border-300": shouldShowBorder,
+              "border-[0.5px] border-strong": shouldShowBorder,
             })}
           >
             <div className="flex items-center gap-1.5 text-custom-text-200">
@@ -35,7 +35,7 @@ export const IssueBlockModules = observer(function IssueBlockModules({ moduleIds
             </div>
           </div>
         ) : (
-          <div className="flex h-full flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs">
+          <div className="flex h-full flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-xs">
             <div className="flex items-center gap-1.5 text-custom-text-200">
               <div className="text-xs">{modules.length} Modules</div>
             </div>

apps/space/core/components/issues/issue-layouts/properties/priority.tsx

@@ -23,7 +23,7 @@ export function IssueBlockPriority({
     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",
-    none: "hover:bg-custom-background-80 border-custom-border-300",
+    none: "hover:bg-custom-background-80 border-strong",
   };
 
   if (priority_detail === null) return <></>;

apps/space/core/components/issues/issue-layouts/properties/state.tsx

@@ -36,7 +36,7 @@ export const IssueBlockState: React.FC<Props> = observer((props) => {
     <Tooltip tooltipHeading="State" tooltipContent={state.name}>
       <div
         className={cn("flex h-full w-full items-center justify-between gap-1 rounded px-2.5 py-1 text-xs", {
-          "border-[0.5px] border-custom-border-300": shouldShowBorder,
+          "border-[0.5px] border-strong": shouldShowBorder,
         })}
       >
         <div className="flex w-full items-center gap-1.5">

apps/space/core/components/issues/navbar/user-avatar.tsx

@@ -60,10 +60,7 @@ export const UserAvatar = observer(function UserAvatar() {
         <div>
           <Popover as="div">
             <Popover.Button as={Fragment}>
-              <button
-                ref={setReferenceElement}
-                className="flex items-center gap-2 rounded border border-custom-border-200 p-2"
-              >
+              <button ref={setReferenceElement} className="flex items-center gap-2 rounded border border-subtle-1 p-2">
                 <Avatar
                   name={currentUser?.display_name}
                   src={getFileURL(currentUser?.avatar_url)}
@@ -90,7 +87,7 @@ export const UserAvatar = observer(function UserAvatar() {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg p-1"
+                  className="z-10 overflow-hidden rounded border border-subtle-1 bg-custom-background-100 shadow-custom-shadow-rg p-1"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -71,7 +71,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             }
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle-1"
           />
         ) : (
           <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
@@ -179,7 +179,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
+            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-strong bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">

apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -31,7 +31,7 @@ export const FullScreenPeekView = observer(function FullScreenPeekView(props: Pr
               <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
             </div>
             {/* divider */}
-            <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+            <div className="my-5 h-[1] w-full border-t border-subtle-1" />
             {/* issue activity/comments */}
             <div className="w-full pb-5">
               <PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />

apps/space/core/components/issues/peek-overview/header.tsx

@@ -86,7 +86,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-strong bg-custom-background-90 text-xs shadow-lg focus:outline-none">
                 <div className="space-y-1 p-2">
                   {PEEK_MODES.map((mode) => (
                     <Listbox.Option

apps/space/core/components/issues/peek-overview/issue-activity.tsx

@@ -52,7 +52,7 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
               )}
             </>
           ) : (
-            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
+            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-strong bg-custom-background-80 px-2 py-2.5">
               <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
                 <Icon iconName="lock" className="!text-sm" />
                 Sign in to add your comment

apps/space/core/components/issues/peek-overview/issue-properties.tsx

@@ -91,7 +91,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
                       ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
                       : priority?.key === "low"
                         ? "border-green-500/20 bg-green-500/20 text-green-500"
-                        : "border-custom-border-200 bg-custom-background-80"
+                        : "border-subtle-1 bg-custom-background-80"
               }`}
             >
               {priority && (

apps/space/core/components/issues/peek-overview/side-peek-view.tsx

@@ -38,7 +38,7 @@ export const SidePeekView = observer(function SidePeekView(props: Props) {
             <PeekOverviewIssueProperties issueDetails={issueDetails} />
           </div>
           {/* divider */}
-          <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+          <div className="my-5 h-[1] w-full border-t border-subtle-1" />
           {/* issue activity/comments */}
           {canComment && (
             <div className="w-full pb-5">

apps/space/core/components/issues/reactions/issue-vote-reactions.tsx

@@ -103,7 +103,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             votingDimensions,
             {
               "border-custom-primary-200 text-custom-primary-200": isUpVotedByUser,
-              "border-custom-border-300": !isUpVotedByUser,
+              "border-strong": !isUpVotedByUser,
               "cursor-default": isInIframe,
             }
           )}
@@ -144,7 +144,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             votingDimensions,
             {
               "border-red-600 text-red-600": isDownVotedByUser,
-              "border-custom-border-300": !isDownVotedByUser,
+              "border-strong": !isDownVotedByUser,
               "cursor-default": isInIframe,
             }
           )}

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx

@@ -74,7 +74,7 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                 <div className={"flex flex-col w-full h-full"}>
                   <div
                     className={cn(
-                      "px-6 py-2 border-b border-custom-border-200 flex items-center gap-4 overflow-hidden w-full justify-between"
+                      "px-6 py-2 border-b border-subtle-1 flex items-center gap-4 overflow-hidden w-full justify-between"
                     )}
                   >
                     <Tabs.List className={"my-2 overflow-x-auto flex w-fit"}>

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx

@@ -32,7 +32,7 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
     <>
       {projectPreferences.navigationMode === "horizontal" && (
         <div className="z-20">
-          <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
+          <Row className="h-header flex gap-2 w-full items-center border-b border-subtle-1 bg-custom-sidebar-background-100">
             <div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
               <div className="flex items-center gap-2 size-full flex-1">
                 {sidebarCollapsed && (

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -122,7 +122,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
               </Tooltip>
             )}
           </div>
-          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
+          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-subtle-1 bg-custom-background-100 px-2.5 py-1 w-full">
             <Search className="h-3.5 w-3.5 text-custom-text-400" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"

apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx

@@ -9,7 +9,7 @@ function WorkspaceLayout() {
   return (
     <>
       <ProjectsAppPowerKProvider />
-      <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+      <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-subtle-1">
         <div id="full-screen-portal" className="inset-0 absolute w-full" />
         <div className="relative flex size-full overflow-hidden">
           <ProjectAppSidebar />

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx

@@ -71,7 +71,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
             className="flex flex-grow justify-center text-sm text-custom-text-200"
             placement="bottom-start"
             customButton={
-              <div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
+              <div className="flex items-center gap-2 rounded-md border border-subtle-1 px-2 py-1.5">
                 <span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
                 <ChevronDownIcon className="h-4 w-4 text-custom-text-400" />
               </div>

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx

@@ -78,7 +78,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
   );
 
   return (
-    <div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
+    <div className="flex justify-evenly border-b border-subtle-1 py-2 md:hidden">
       <CustomMenu
         maxHeight={"md"}
         className="flex flex-grow justify-center text-sm text-custom-text-200"
@@ -108,7 +108,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
           );
         })}
       </CustomMenu>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex flex-grow items-center justify-center border-l border-subtle-1 text-sm text-custom-text-200">
         <FiltersDropdown
           title={t("common.display")}
           placement="bottom-end"

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx

@@ -74,7 +74,7 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
                 Go to archives
               </Button>
             }
-            className="border-b border-custom-border-200"
+            className="border-b border-subtle-1"
           />
           <div className="flex h-full overflow-hidden">
             <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -66,7 +66,7 @@ function CycleDetailPage({ params }: Route.ComponentProps) {
             {!isSidebarCollapsed && (
               <div
                 className={cn(
-                  "flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+                  "flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
                 )}
                 style={{
                   boxShadow:

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx

@@ -90,7 +90,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="flex justify-evenly py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100">
+      <div className="flex justify-evenly py-2 border-b border-subtle-1 md:hidden bg-custom-background-100">
         <CustomMenu
           maxHeight={"md"}
           className="flex flex-grow justify-center text-custom-text-200 text-sm"
@@ -114,7 +114,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-l border-subtle-1 items-center text-custom-text-200 text-sm">
           <FiltersDropdown
             title={t("common.display")}
             placement="bottom-end"
@@ -142,7 +142,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
 
         <span
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-subtle-1"
         >
           {t("common.analytics")}
         </span>

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx

@@ -40,7 +40,7 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
     <div className="flex justify-center sm:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-subtle-1 bg-custom-sidebar-background-100"
         // placement="bottom-start"
         customButton={
           <span className="flex items-center gap-2">

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx

@@ -65,12 +65,12 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
+      <div className="md:hidden flex justify-evenly border-b border-subtle-1 py-2 z-[13] bg-custom-background-100">
         <MobileLayoutSelection
           layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
           onChange={handleLayoutChange}
         />
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle-1 text-sm text-custom-text-200">
           <FiltersDropdown
             title={t("common.display")}
             placement="bottom-end"
@@ -97,7 +97,7 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+          className="flex flex-grow justify-center border-l border-subtle-1 text-sm text-custom-text-200"
         >
           {t("common.analytics")}
         </button>

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx

@@ -26,7 +26,7 @@ function ProjectLayout({ params }: Route.ComponentProps) {
     <>
       {projectPreferences.navigationMode === "horizontal" && (
         <div className="z-20">
-          <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
+          <Row className="h-header flex gap-2 w-full items-center border-b border-subtle-1 bg-custom-sidebar-background-100">
             <div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
               <div className="flex items-center gap-2 size-full flex-1">
                 {sidebarCollapsed && (

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx

@@ -62,7 +62,7 @@ function ModuleIssuesPage({ params }: Route.ComponentProps) {
           {!isSidebarCollapsed && (
             <div
               className={cn(
-                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
               )}
               style={{
                 boxShadow:

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx

@@ -76,7 +76,7 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
         moduleDetails={moduleDetails ?? undefined}
         projectDetails={currentProjectDetails}
       />
-      <div className="flex justify-evenly border-b border-custom-border-200 bg-custom-background-100 py-2">
+      <div className="flex justify-evenly border-b border-subtle-1 bg-custom-background-100 py-2">
         <CustomMenu
           maxHeight={"md"}
           className="flex flex-grow justify-center text-sm text-custom-text-200"
@@ -98,7 +98,7 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle-1 text-sm text-custom-text-200">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
@@ -126,7 +126,7 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+          className="flex flex-grow justify-center border-l border-subtle-1 text-sm text-custom-text-200"
         >
           Analytics
         </button>

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx

@@ -16,7 +16,7 @@ export const ModulesListMobileHeader = observer(function ModulesListMobileHeader
     <div className="flex justify-start md:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-start text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        className="flex flex-grow justify-start text-custom-text-200 text-sm py-2 border-b border-subtle-1 bg-custom-sidebar-background-100"
         // placement="bottom-start"
         customButton={
           <Row className="flex flex-grow justify-center text-custom-text-200 text-sm gap-2">

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx

@@ -20,8 +20,8 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
 
   return (
     <>
-      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
-        <Row className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="md:hidden flex justify-evenly border-b border-subtle-1 py-2 z-[13] bg-custom-background-100">
+        <Row className="flex flex-grow items-center justify-center border-l border-subtle-1 text-sm text-custom-text-200">
           <ViewOrderByDropdown
             sortBy={filters.sortBy}
             sortKey={filters.sortKey}
@@ -32,7 +32,7 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
             isMobile
           />
         </Row>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle-1 text-sm text-custom-text-200">
           <FiltersDropdown
             icon={<ListFilter className="h-3 w-3" />}
             title="Filters"

apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx

@@ -24,7 +24,7 @@ function WorkspaceViewsPage() {
     <>
       <PageHead title={pageTitle} />
       <div className="flex flex-col h-full w-full overflow-hidden">
-        <div className="flex h-11 w-full items-center gap-2.5  px-5 py-3 overflow-hidden border-b border-custom-border-200">
+        <div className="flex h-11 w-full items-center gap-2.5  px-5 py-3 overflow-hidden border-b border-subtle-1">
           <Search className="text-custom-text-200" size={14} strokeWidth={2} />
           <Input
             className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"

apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx

@@ -8,7 +8,7 @@ export default function SettingsLayout() {
   return (
     <>
       <ProjectsAppPowerKProvider />
-      <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+      <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-subtle-1">
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
           {/* Header */}
           <SettingsHeader />

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx

@@ -131,7 +131,7 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
             )}
           </h4>
           <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
+            <div className="flex items-center gap-1.5 rounded-md border border-subtle-1 bg-custom-background-100 px-2.5 py-1.5">
               <Search className="h-3.5 w-3.5 text-custom-text-400" />
               <input
                 className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx

@@ -26,7 +26,7 @@ export const MobileWorkspaceSettingsTabs = observer(function MobileWorkspaceSett
               className={`${
                 item.highlight(pathname, `/${workspaceSlug}`)
                   ? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
-                  : "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
+                  : "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-subtle-1 text-sm py-2 px-3 whitespace-nowrap"
               }`}
               key={index}
               onClick={() => router.push(`/${workspaceSlug}${item.href}`)}

apps/web/app/(all)/create-workspace/page.tsx

@@ -54,7 +54,7 @@ function CreateWorkspacePage() {
     <AuthenticationWrapper>
       <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle-1 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <Link
             className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
             href="/"

apps/web/app/(all)/invitations/page.tsx

@@ -128,7 +128,7 @@ function UserInvitationsPage() {
     <AuthenticationWrapper>
       <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle-1 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <Link
             href="/"
             className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
@@ -153,9 +153,7 @@ function UserInvitationsPage() {
                       <div
                         key={invitation.id}
                         className={`flex cursor-pointer items-center gap-2 rounded border px-3.5 py-5 ${
-                          isSelected
-                            ? "border-custom-primary-100"
-                            : "border-custom-border-200 hover:bg-custom-background-80"
+                          isSelected ? "border-custom-primary-100" : "border-subtle-1 hover:bg-custom-background-80"
                         }`}
                         onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                       >

apps/web/app/(all)/onboarding/page.tsx

@@ -42,7 +42,7 @@ function OnboardingPage() {
     <AuthenticationWrapper pageType={EPageTypes.ONBOARDING}>
       <div className="flex relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
         <div className="size-full p-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden">
-          <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-custom-background-100 shadow-md border border-custom-border-200">
+          <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-custom-background-100 shadow-md border border-subtle-1">
             {user && !invitationsLoader ? (
               <OnboardingRoot invitations={invitations ?? []} />
             ) : (

apps/web/app/(all)/profile/layout.tsx

@@ -11,7 +11,7 @@ export default function ProfileSettingsLayout() {
     <>
       <ProjectsAppPowerKProvider />
       <AuthenticationWrapper>
-        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-subtle-1">
           <ProfileLayoutSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
             <div className="h-full w-full overflow-hidden">

apps/web/app/(all)/workspace-invitations/page.tsx

@@ -75,7 +75,7 @@ function WorkspaceInvitationPage() {
       <div className="flex h-full w-full flex-col items-center justify-center px-3">
         {invitationDetail && !invitationDetail.responded_at ? (
           error ? (
-            <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
+            <div className="flex w-full flex-col space-y-4 rounded border border-subtle-1 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
               <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
             </div>
           ) : (

apps/web/app/error/dev.tsx

@@ -94,7 +94,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
               {error.stack && (
                 <div className="space-y-2">
                   <h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Stack Trace</h3>
-                  <div className="bg-custom-background-80 rounded-md border border-custom-border-200 max-h-96 overflow-auto">
+                  <div className="bg-custom-background-80 rounded-md border border-subtle-1 max-h-96 overflow-auto">
                     <pre className="p-4 text-xs text-custom-text-200 font-mono whitespace-pre-wrap break-words">
                       {error.stack}
                     </pre>

apps/web/ce/components/cycles/active-cycle/root.tsx

@@ -59,7 +59,7 @@ const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
   }
 
   return (
-    <div className="flex flex-col border-b border-custom-border-200">
+    <div className="flex flex-col border-b border-subtle-1">
       <CyclesListItem
         key={cycleId}
         cycleId={cycleId}
@@ -114,7 +114,7 @@ export const ActiveCycleRoot = observer(function ActiveCycleRoot(props: IActiveC
         <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
           {({ open }) => (
             <>
-              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
+              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle-1 bg-custom-background-90 cursor-pointer">
                 <CycleListGroupHeader title={t("project_cycles.active_cycle.label")} type="current" isExpanded={open} />
               </Disclosure.Button>
               <Disclosure.Panel>

apps/web/ce/components/navigations/top-navigation-root.tsx

@@ -14,7 +14,7 @@ export const TopNavigationRoot = observer(() => {
 
   return (
     <div
-      className={cn("flex items-center min-h-11 w-full px-3.5 z-[27] transition-all duration-300", {
+      className={cn("flex items-center min-h-11 w-full px-3.5 bg-canvas z-[27] transition-all duration-300", {
         "px-2": !showLabel,
       })}
     >

apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx

@@ -33,7 +33,7 @@ export function AskPiMenu(props: Props) {
           "items-start": response,
         })}
       >
-        <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+        <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-subtle-1">
           <Sparkles className="size-3" />
         </span>
         {response ? (
@@ -92,7 +92,7 @@ export function AskPiMenu(props: Props) {
         )}
       </div>
       <div className="py-3 px-4">
-        <div className="flex items-center gap-2 border border-custom-border-200 rounded-md p-2">
+        <div className="flex items-center gap-2 border border-subtle-1 rounded-md p-2">
           <span className="flex-shrink-0 size-3 grid place-items-center">
             <Sparkles className="size-3 text-custom-text-200" />
           </span>

apps/web/ce/components/pages/editor/ai/menu.tsx

@@ -138,7 +138,7 @@ export function EditorAIMenu(props: Props) {
   return (
     <div
       className={cn(
-        "w-[210px] flex flex-col rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg transition-all",
+        "w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-custom-background-100 shadow-custom-shadow-rg transition-all",
         {
           "w-[700px]": activeTask,
         }
@@ -203,7 +203,7 @@ export function EditorAIMenu(props: Props) {
                   "items-start": response,
                 })}
               >
-                <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+                <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-subtle-1">
                   <Sparkles className="size-3" />
                 </span>
                 {response ? (
@@ -289,7 +289,7 @@ export function EditorAIMenu(props: Props) {
         </div>
       </div>
       {activeTask && (
-        <div className="bg-custom-background-90 rounded-b-md py-2 px-4 text-custom-text-300 flex items-center gap-2 border-t border-custom-border-200">
+        <div className="bg-custom-background-90 rounded-b-md py-2 px-4 text-custom-text-300 flex items-center gap-2 border-t border-subtle-1">
           <span className="flex-shrink-0 size-4 grid place-items-center">
             <TriangleAlert className="size-3" />
           </span>

apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx

@@ -8,7 +8,7 @@ export function IssueEmbedUpgradeCard(props: any) {
   return (
     <div
       className={cn(
-        "w-full bg-custom-background-80 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
+        "w-full bg-custom-background-80 rounded-md border-[0.5px] border-subtle-1 shadow-custom-shadow-2xs flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
         {
           "border-2": props.selected,
         }

apps/web/ce/components/projects/mobile-header.tsx

@@ -52,7 +52,7 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
   const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
 
   return (
-    <div className="flex py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100 w-full">
+    <div className="flex py-2 border-b border-subtle-1 md:hidden bg-custom-background-100 w-full">
       <ProjectOrderByDropdown
         value={displayFilters?.order_by}
         onChange={(val) => {
@@ -63,7 +63,7 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
         }}
         isMobile
       />
-      <div className="border-l border-custom-border-200 flex justify-around w-full">
+      <div className="border-l border-subtle-1 flex justify-around w-full">
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
           title={t("common.filters")}

apps/web/ce/components/workspace/billing/root.tsx

@@ -46,7 +46,7 @@ export const BillingRoot = observer(function BillingRoot() {
       />
       <div className={cn("transition-all duration-500 ease-in-out will-change-[height,opacity]")}>
         <div className="py-6">
-          <div className={cn("px-6 py-4 border border-custom-border-200 rounded-lg")}>
+          <div className={cn("px-6 py-4 border border-subtle-1 rounded-lg")}>
             <div className="flex gap-2 font-medium items-center justify-between">
               <div className="flex flex-col gap-1">
                 <h4

apps/web/ce/components/workspace/delete-workspace-section.tsx

@@ -30,7 +30,7 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
         isOpen={deleteWorkspaceModal}
         onClose={() => setDeleteWorkspaceModal(false)}
       />
-      <div className="border-t border-custom-border-100">
+      <div className="border-t border-subtle">
         <div className="w-full">
           <Collapsible
             isOpen={isOpen}

apps/web/core/components/account/auth-forms/email.tsx

@@ -51,7 +51,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
         <div
           className={cn(
             `relative flex items-center rounded-md bg-custom-background-100 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-custom-border-300`
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-strong`
           )}
           onFocus={() => {
             setIsFocused(true);

apps/web/core/components/account/auth-forms/forgot-password-popover.tsx

@@ -38,7 +38,7 @@ export function ForgotPasswordPopover() {
       <Popover.Panel className="fixed z-10">
         {({ close }) => (
           <div
-            className="border border-custom-border-300 bg-custom-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
+            className="border border-strong bg-custom-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}

apps/web/core/components/account/auth-forms/forgot-password.tsx

@@ -112,7 +112,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
                 ref={ref}
                 hasError={Boolean(errors.email)}
                 placeholder={t("auth.common.email.placeholder")}
-                className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                className="h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
                 autoComplete="on"
                 disabled={resendTimerCode > 0}
               />

apps/web/core/components/account/auth-forms/password.tsx

@@ -185,9 +185,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           <label htmlFor="email" className="text-sm font-medium text-custom-text-300">
             {t("auth.common.email.label")}
           </label>
-          <div
-            className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-300`}
-          >
+          <div className={`relative flex items-center rounded-md bg-custom-background-100 border border-strong`}>
             <Input
               id="email"
               name="email"
@@ -223,7 +221,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               value={passwordFormData.password}
               onChange={(e) => handleFormChange("password", e.target.value)}
               placeholder={t("auth.common.password.placeholder")}
-              className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="disable-autofill-style h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
               autoComplete="on"
@@ -260,7 +258,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 value={passwordFormData.confirm_password}
                 onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                 placeholder={t("auth.common.password.confirm_password.placeholder")}
-                className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                className="disable-autofill-style h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
               />

apps/web/core/components/account/auth-forms/reset-password.tsx

@@ -116,7 +116,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               value={resetFormData.email}
               //hasError={Boolean(errors.email)}
               placeholder={t("auth.common.email.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
+              className="h-10 w-full border border-strong !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
               autoComplete="on"
               disabled
             />
@@ -134,7 +134,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               onChange={(e) => handleFormChange("password", e.target.value)}
               //hasError={Boolean(errors.password)}
               placeholder={t("auth.common.password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
               minLength={8}
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
@@ -166,7 +166,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               value={resetFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder={t("auth.common.password.confirm_password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
             />

apps/web/core/components/account/auth-forms/set-password.tsx

@@ -133,7 +133,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               value={user?.email}
               //hasError={Boolean(errors.email)}
               placeholder={t("auth.common.email.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
+              className="h-10 w-full border border-strong !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
               autoComplete="on"
               disabled
             />
@@ -151,7 +151,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               onChange={(e) => handleFormChange("password", e.target.value)}
               //hasError={Boolean(errors.password)}
               placeholder={t("auth.common.password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
               minLength={8}
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
@@ -183,7 +183,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               value={passwordFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder={t("auth.common.password.confirm_password.placeholder")}
-              className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              className="h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
             />

apps/web/core/components/account/auth-forms/unique-code.tsx

@@ -118,9 +118,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
         <label htmlFor="email" className="text-sm font-medium text-custom-text-300">
           {t("auth.common.email.label")}
         </label>
-        <div
-          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-300`}
-        >
+        <div className={`relative flex items-center rounded-md bg-custom-background-100 border border-strong`}>
           <Input
             id="email"
             name="email"
@@ -155,7 +153,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder={t("auth.common.unique_code.placeholder")}
-          className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+          className="disable-autofill-style h-10 w-full border border-strong !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
           autoFocus
         />
         <div className="flex w-full items-center justify-between px-1 text-xs pt-1">

apps/web/core/components/analytics/empty-state.tsx

@@ -20,7 +20,7 @@ function AnalyticsEmptyState({ title, description, assetPath, className }: Props
   return (
     <div
       className={cn(
-        "flex h-full w-full items-center justify-center overflow-y-auto rounded-lg border border-custom-border-100 px-5 py-10 md:px-20",
+        "flex h-full w-full items-center justify-center overflow-y-auto rounded-lg border border-subtle px-5 py-10 md:px-20",
         className
       )}
     >

apps/web/core/components/analytics/insight-table/data-table.tsx

@@ -83,7 +83,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
             className={cn(
               "mr-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 opacity-0 transition-[width] ease-linear",
               {
-                "w-64 border-custom-border-200 px-2.5 py-1.5 opacity-100": isSearchOpen,
+                "w-64 border-subtle-1 px-2.5 py-1.5 opacity-100": isSearchOpen,
               }
             )}
           >
@@ -155,7 +155,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
                   <EmptyStateCompact
                     assetKey="unknown"
                     assetClassName="size-20"
-                    rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+                    rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
                     title={t("workspace_empty_state.analytics_work_items.title")}
                   />
                 </TableCell>

apps/web/core/components/analytics/overview/project-insights.tsx

@@ -57,7 +57,7 @@ const ProjectInsights = observer(function ProjectInsights() {
         <EmptyStateCompact
           assetKey="unknown"
           assetClassName="size-20"
-          rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+          rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
           title={t("workspace_empty_state.analytics_work_items.title")}
         />
       ) : (
@@ -91,7 +91,7 @@ const ProjectInsights = observer(function ProjectInsights() {
           )}
           <div className="w-full lg:w-2/5">
             <div className="text-sm text-custom-text-300">{t("workspace_analytics.summary_of_projects")}</div>
-            <div className=" mb-3 border-b border-custom-border-100 py-2">{t("workspace_analytics.all_projects")}</div>
+            <div className=" mb-3 border-b border-subtle py-2">{t("workspace_analytics.all_projects")}</div>
             <div className="flex flex-col gap-4">
               <div className="flex items-center justify-between text-sm text-custom-text-300">
                 <div>{t("workspace_analytics.trend_on_charts")}</div>