diff --git a/apps/admin/app/(all)/(dashboard)/email/page.tsx b/apps/admin/app/(all)/(dashboard)/email/page.tsx
index 5dbd9adae..f376cffc4 100644
--- a/apps/admin/app/(all)/(dashboard)/email/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/page.tsx
@@ -60,7 +60,7 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
             Plane can send useful emails to you and your users from your own instance without talking to the Internet.
             <div className="text-13 font-regular text-tertiary">
               Set it up below and please test your settings before you save them.&nbsp;
-              <span className="text-danger">Misconfigs can lead to email bounces and errors.</span>
+              <span className="text-danger-primary">Misconfigs can lead to email bounces and errors.</span>
             </div>
           </>
         ),
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
index 334e960e9..270a81fee 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
@@ -118,7 +118,7 @@ export function WorkspaceCreateForm() {
                 />
               )}
             />
-            <span className="text-11 text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
         </div>
         <div className="flex flex-col gap-1">
@@ -153,11 +153,11 @@ export function WorkspaceCreateForm() {
               )}
             />
           </div>
-          {slugError && <p className="text-13 text-red-500">This URL is taken. Try something else.</p>}
+          {slugError && <p className="text-13 text-danger-primary">This URL is taken. Try something else.</p>}
           {invalidSlug && (
-            <p className="text-13 text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+            <p className="text-13 text-danger-primary">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
           )}
-          {errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
@@ -187,7 +187,7 @@ export function WorkspaceCreateForm() {
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
diff --git a/apps/admin/app/(all)/(home)/sign-in-form.tsx b/apps/admin/app/(all)/(home)/sign-in-form.tsx
index 6ac660544..cd40a4c77 100644
--- a/apps/admin/app/(all)/(home)/sign-in-form.tsx
+++ b/apps/admin/app/(all)/(home)/sign-in-form.tsx
@@ -129,7 +129,7 @@ export function InstanceSignInForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 text-tertiary font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
+                Email <span className="text-danger-primary">*</span>
               </label>
               <Input
                 className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -147,7 +147,7 @@ export function InstanceSignInForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 text-tertiary font-medium" htmlFor="password">
-                Password <span className="text-red-500">*</span>
+                Password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
diff --git a/apps/admin/core/components/common/banner.tsx b/apps/admin/core/components/common/banner.tsx
index 861e8f634..292d3bc5c 100644
--- a/apps/admin/core/components/common/banner.tsx
+++ b/apps/admin/core/components/common/banner.tsx
@@ -10,20 +10,22 @@ export function Banner(props: TBanner) {
 
   return (
     <div
-      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-red-500/5 border-red-400" : "bg-green-500/5 border-green-400"}`}
+      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-primary border-danger-strong" : "bg-success-primary border-success-strong"}`}
     >
       <div className="flex items-center justify-center">
         <div className="flex-shrink-0">
           {type === "error" ? (
             <span className="flex items-center justify-center h-6 w-6 rounded-full">
-              <AlertCircle className="h-5 w-5 text-red-600" aria-hidden="true" />
+              <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
             </span>
           ) : (
-            <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
+            <CheckCircle2 className="h-5 w-5 text-success-primary" aria-hidden="true" />
           )}
         </div>
         <div className="ml-1">
-          <p className={`text-13 font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
+          <p className={`text-13 font-medium ${type === "error" ? "text-danger-primary" : "text-success-primary"}`}>
+            {message}
+          </p>
         </div>
       </div>
     </div>
diff --git a/apps/admin/core/components/instance/setup-form.tsx b/apps/admin/core/components/instance/setup-form.tsx
index 4d98885e5..f463dfc59 100644
--- a/apps/admin/core/components/instance/setup-form.tsx
+++ b/apps/admin/core/components/instance/setup-form.tsx
@@ -157,7 +157,7 @@ export function InstanceSetupForm() {
             <div className="flex flex-col sm:flex-row items-center gap-4">
               <div className="w-full space-y-1">
                 <label className="text-13 text-tertiary font-medium" htmlFor="first_name">
-                  First name <span className="text-red-500">*</span>
+                  First name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
                   className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -174,7 +174,7 @@ export function InstanceSetupForm() {
               </div>
               <div className="w-full space-y-1">
                 <label className="text-13 text-tertiary font-medium" htmlFor="last_name">
-                  Last name <span className="text-red-500">*</span>
+                  Last name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
                   className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -192,7 +192,7 @@ export function InstanceSetupForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 text-tertiary font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
+                Email <span className="text-danger-primary">*</span>
               </label>
               <Input
                 className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -207,13 +207,13 @@ export function InstanceSetupForm() {
                 autoComplete="on"
               />
               {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-                <p className="px-1 text-11 text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
               )}
             </div>
 
             <div className="w-full space-y-1">
               <label className="text-13 text-tertiary font-medium" htmlFor="company_name">
-                Company name <span className="text-red-500">*</span>
+                Company name <span className="text-danger-primary">*</span>
               </label>
               <Input
                 className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -229,7 +229,7 @@ export function InstanceSetupForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 text-tertiary font-medium" htmlFor="password">
-                Set a password <span className="text-red-500">*</span>
+                Set a password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
@@ -267,14 +267,14 @@ export function InstanceSetupForm() {
                 )}
               </div>
               {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-                <p className="px-1 text-11 text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
               )}
               <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
             </div>
 
             <div className="w-full space-y-1">
               <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
-                Confirm password <span className="text-red-500">*</span>
+                Confirm password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
@@ -311,7 +311,9 @@ export function InstanceSetupForm() {
               </div>
               {!!formData.confirm_password &&
                 formData.password !== formData.confirm_password &&
-                renderPasswordMatchError && <span className="text-13 text-red-500">Passwords don{"'"}t match</span>}
+                renderPasswordMatchError && (
+                  <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>
+                )}
             </div>
 
             <div className="relative flex gap-2">
diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/core/components/account/auth-forms/email.tsx
index 46ecea0f0..63c3c6bcc 100644
--- a/apps/space/core/components/account/auth-forms/email.tsx
+++ b/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-surface-1 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-subtle`
+            !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-subtle`
           )}
           onFocus={() => {
             setIsFocused(true);
@@ -68,7 +68,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
             autoComplete="on"
             autoFocus
             ref={inputRef}
@@ -88,7 +88,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           )}
         </div>
         {emailError?.email && !isFocused && (
-          <p className="flex items-center gap-1 text-11 text-red-600 px-0.5">
+          <p className="flex items-center gap-1 text-11 text-danger-primary px-0.5">
             <CircleAlert height={12} width={12} />
             {emailError.email}
           </p>
diff --git a/apps/space/core/components/account/auth-forms/password.tsx b/apps/space/core/components/account/auth-forms/password.tsx
index 7d265cee0..45426d4d9 100644
--- a/apps/space/core/components/account/auth-forms/password.tsx
+++ b/apps/space/core/components/account/auth-forms/password.tsx
@@ -201,7 +201,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           </div>
           {!!passwordFormData.confirm_password &&
             passwordFormData.password !== passwordFormData.confirm_password &&
-            renderPasswordMatchError && <span className="text-13 text-red-500">Passwords don{"'"}t match</span>}
+            renderPasswordMatchError && <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>}
         </div>
       )}
 
diff --git a/apps/space/core/components/account/auth-forms/unique-code.tsx b/apps/space/core/components/account/auth-forms/unique-code.tsx
index 7e7543e56..d04984291 100644
--- a/apps/space/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/core/components/account/auth-forms/unique-code.tsx
@@ -116,7 +116,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           autoFocus
         />
         <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
-          <p className="flex items-center gap-1 font-medium text-green-700">
+          <p className="flex items-center gap-1 font-medium text-success-primary">
             <CircleCheck height={12} width={12} />
             Paste the code sent to your email
           </p>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx b/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
index 07bb29ad6..1f6ddb34a 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
@@ -27,7 +27,7 @@ export const IssueBlockDate = observer(function IssueBlockDate(props: Props) {
     <Tooltip tooltipHeading="Due Date" tooltipContent={formattedDate}>
       <div
         className={cn("flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-11 text-primary", {
-          "text-red-500": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
+          "text-danger-primary": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
           "border-[0.5px] border-strong": shouldShowBorder,
         })}
       >
diff --git a/apps/space/core/components/issues/navbar/user-avatar.tsx b/apps/space/core/components/issues/navbar/user-avatar.tsx
index 7cbdc6a88..59c9fbcb4 100644
--- a/apps/space/core/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/core/components/issues/navbar/user-avatar.tsx
@@ -100,7 +100,7 @@ export const UserAvatar = observer(function UserAvatar() {
                         type="submit"
                         className="flex items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-transparent-hover text-13 min-w-36 cursor-pointer"
                       >
-                        <LogOut size={12} className="shrink-0 text-red-500" />
+                        <LogOut size={12} className="shrink-0 text-danger-primary" />
                         <div>Sign out</div>
                       </button>
                     </form>
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
index b6849e2df..65606ad6b 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -132,16 +132,22 @@ export const CommentCard = observer(function CommentCard(props: Props) {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="group rounded-sm border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+                className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-green-500"
               >
-                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-on-color" strokeWidth={2} />
+                <Check
+                  className="h-3 w-3 text-success-primary duration-300 group-hover:text-on-color"
+                  strokeWidth={2}
+                />
               </button>
               <button
                 type="button"
-                className="group rounded-sm border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover"
                 onClick={() => setIsEditing(false)}
               >
-                <CloseIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-on-color" strokeWidth={2} />
+                <CloseIcon
+                  className="h-3 w-3 text-danger-primary duration-300 group-hover:text-on-color"
+                  strokeWidth={2}
+                />
               </button>
             </div>
           </form>
diff --git a/apps/space/core/components/issues/peek-overview/issue-properties.tsx b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
index 0b73eed7b..5e2ea10d0 100644
--- a/apps/space/core/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
@@ -114,7 +114,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
             {issueDetails.target_date ? (
               <div
                 className={cn("flex items-center gap-1.5 rounded-sm py-0.5 text-11 text-primary", {
-                  "text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
+                  "text-danger-primary": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
                 })}
               >
                 <DueDatePropertyIcon className="size-3" />
diff --git a/apps/space/core/components/issues/peek-overview/layout.tsx b/apps/space/core/components/issues/peek-overview/layout.tsx
index d8b5a29ce..3d2930e36 100644
--- a/apps/space/core/components/issues/peek-overview/layout.tsx
+++ b/apps/space/core/components/issues/peek-overview/layout.tsx
@@ -85,7 +85,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-20 bg-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 z-20 bg-backdrop transition-opacity" />
           </Transition.Child>
           <Transition.Child
             as={Fragment}
diff --git a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx b/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
index 73e14cd0d..b57d1410e 100644
--- a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
+++ b/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
@@ -144,7 +144,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border focus:outline-none hover:bg-layer-transparent-hover",
             votingDimensions,
             {
-              "border-red-600 text-red-600": isDownVotedByUser,
+              "border-danger-strong text-danger-primary": isDownVotedByUser,
               "border-strong": !isDownVotedByUser,
               "cursor-default": isInIframe,
             }
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
index e68070da1..cd03a7ca0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
@@ -159,7 +159,9 @@ function SecurityPage() {
                   />
                 )}
               </div>
-              {errors.old_password && <span className="text-11 text-red-500">{errors.old_password.message}</span>}
+              {errors.old_password && (
+                <span className="text-11 text-danger-primary">{errors.old_password.message}</span>
+              )}
             </div>
           )}
           <div className="space-y-1">
@@ -199,7 +201,9 @@ function SecurityPage() {
             </div>
             {passwordSupport}
             {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
-              <span className="text-11 text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
+              <span className="text-11 text-danger-primary">
+                {t("new_password_must_be_different_from_old_password")}
+              </span>
             )}
           </div>
           <div className="space-y-1">
@@ -238,7 +242,7 @@ function SecurityPage() {
               )}
             </div>
             {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
-              <span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span>
+              <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
           </div>
         </div>
diff --git a/apps/web/app/(all)/profile/security/page.tsx b/apps/web/app/(all)/profile/security/page.tsx
index 99f19bce8..aad3001fa 100644
--- a/apps/web/app/(all)/profile/security/page.tsx
+++ b/apps/web/app/(all)/profile/security/page.tsx
@@ -157,7 +157,9 @@ function SecurityPage() {
                     />
                   )}
                 </div>
-                {errors.old_password && <span className="text-11 text-red-500">{errors.old_password.message}</span>}
+                {errors.old_password && (
+                  <span className="text-11 text-danger-primary">{errors.old_password.message}</span>
+                )}
               </div>
             )}
             <div className="space-y-1">
@@ -197,7 +199,9 @@ function SecurityPage() {
               </div>
               {passwordSupport}
               {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
-                <span className="text-11 text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
+                <span className="text-11 text-danger-primary">
+                  {t("new_password_must_be_different_from_old_password")}
+                </span>
               )}
             </div>
             <div className="space-y-1">
@@ -236,7 +240,7 @@ function SecurityPage() {
                 )}
               </div>
               {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
-                <span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span>
+                <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
               )}
             </div>
           </div>
diff --git a/apps/web/app/(all)/profile/sidebar.tsx b/apps/web/app/(all)/profile/sidebar.tsx
index daaad3d2e..c4ded1df2 100644
--- a/apps/web/app/(all)/profile/sidebar.tsx
+++ b/apps/web/app/(all)/profile/sidebar.tsx
@@ -249,7 +249,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
             <button
               type="button"
               onClick={handleSignOut}
-              className="flex items-center justify-center gap-2 text-13 font-medium text-red-500"
+              className="flex items-center justify-center gap-2 text-13 font-medium text-danger-primary"
               disabled={isSigningOut}
             >
               <LogOut className="h-3.5 w-3.5" />
diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx
index 2e87859f4..8dd696f0b 100644
--- a/apps/web/app/error/dev.tsx
+++ b/apps/web/app/error/dev.tsx
@@ -46,7 +46,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
               <div>
-                <h2 className="text-20 font-semibold text-red-500 mb-2">
+                <h2 className="text-20 font-semibold text-danger-primary mb-2">
                   {error.status} {error.statusText}
                 </h2>
                 <div className="h-px w-full bg-subtle-1" />
@@ -80,7 +80,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
               <div>
-                <h2 className="text-20 font-semibold text-red-500 mb-2">Error</h2>
+                <h2 className="text-20 font-semibold text-danger-primary mb-2">Error</h2>
                 <div className="h-px w-full bg-subtle-1" />
               </div>
 
diff --git a/apps/web/ce/components/navigations/top-navigation-root.tsx b/apps/web/ce/components/navigations/top-navigation-root.tsx
index b853f05a4..9035e3147 100644
--- a/apps/web/ce/components/navigations/top-navigation-root.tsx
+++ b/apps/web/ce/components/navigations/top-navigation-root.tsx
@@ -63,7 +63,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
                 <div className="relative">
                   <InboxIcon className="size-5" />
                   {totalNotifications > 0 && (
-                    <span className="absolute -top-0 -right-0 size-2 rounded-full bg-red-500" />
+                    <span className="absolute top-0 right-0 size-2 rounded-full bg-danger-primary" />
                   )}
                 </div>
               ),
diff --git a/apps/web/ce/components/relations/index.tsx b/apps/web/ce/components/relations/index.tsx
index 9e833feb5..1752fa226 100644
--- a/apps/web/ce/components/relations/index.tsx
+++ b/apps/web/ce/components/relations/index.tsx
@@ -23,7 +23,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
   blocked_by: {
     key: "blocked_by",
     i18n_label: "issue.relation.blocked_by",
-    className: "bg-red-500/20 text-red-700",
+    className: "bg-danger-primary text-danger-primary",
     icon: (size) => <CircleDot size={size} className="text-secondary" />,
     placeholder: "None",
   },
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 5cbcdfc2f..27a975c75 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/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-surface-1 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-strong`
+            !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-strong`
           )}
           onFocus={() => {
             setIsFocused(true);
@@ -88,7 +88,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           )}
         </div>
         {emailError?.email && !isFocused && (
-          <p className="flex items-center gap-1 text-11 text-red-600 px-0.5">
+          <p className="flex items-center gap-1 text-11 text-danger-primary px-0.5">
             <CircleAlert height={12} width={12} />
             {t(emailError.email)}
           </p>
diff --git a/apps/web/core/components/account/auth-forms/forgot-password.tsx b/apps/web/core/components/account/auth-forms/forgot-password.tsx
index 49b1ec43d..0c210530e 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -119,7 +119,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
             )}
           />
           {resendTimerCode > 0 && (
-            <p className="flex items-start w-full gap-1 px-1 text-11 font-medium text-green-700">
+            <p className="flex items-start w-full gap-1 px-1 text-11 font-medium text-success-primary">
               <CircleCheck height={12} width={12} className="mt-0.5" />
               {t("auth.forgot_password.email_sent")}
             </p>
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 9c71eb98b..4d2276f1a 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -124,16 +124,18 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
   return (
     <>
       {isBannerMessage && mode === EAuthModes.SIGN_UP && (
-        <div className="relative flex items-center p-2 rounded-md gap-2 border border-red-500/50 bg-red-500/10">
+        <div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-primary">
           <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-            <Info size={16} className="text-red-500" />
+            <Info size={16} className="text-danger-primary" />
+          </div>
+          <div className="w-full text-13 font-medium text-danger-primary">
+            {t("auth.sign_up.errors.password.strength")}
           </div>
-          <div className="w-full text-13 font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
           <div
-            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-accent-primary/80"
+            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-primary text-accent-primary/80"
             onClick={() => setBannerMessage(false)}
           >
-            <CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" />
+            <CloseIcon className="w-4 h-4 flex-shrink-0 text-danger-primary" />
           </div>
         </div>
       )}
@@ -282,7 +284,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             {!!passwordFormData.confirm_password &&
               passwordFormData.password !== passwordFormData.confirm_password &&
               renderPasswordMatchError && (
-                <span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span>
+                <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
               )}
           </div>
         )}
diff --git a/apps/web/core/components/account/auth-forms/reset-password.tsx b/apps/web/core/components/account/auth-forms/reset-password.tsx
index 12c2a6c14..5ac2bb601 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -185,7 +185,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
           {!!resetFormData.confirm_password &&
             resetFormData.password !== resetFormData.confirm_password &&
             renderPasswordMatchError && (
-              <span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span>
+              <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
diff --git a/apps/web/core/components/account/auth-forms/set-password.tsx b/apps/web/core/components/account/auth-forms/set-password.tsx
index 15005caf6..d3cfc167c 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -202,7 +202,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
           {!!passwordFormData.confirm_password &&
             passwordFormData.password !== passwordFormData.confirm_password &&
             renderPasswordMatchError && (
-              <span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span>
+              <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx
index 6d2b72337..dabe028fa 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -157,7 +157,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           autoFocus
         />
         <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
-          <p className="flex items-center gap-1 font-medium text-green-700">
+          <p className="flex items-center gap-1 font-medium text-success-primary">
             <CircleCheck height={12} width={12} />
             {t("auth.common.unique_code.paste_code")}
           </p>
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index ae10f1c94..0cd13cb1c 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -67,8 +67,11 @@ export function DeactivateAccountModal(props: Props) {
       <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
         <div className="">
           <div className="flex items-start gap-x-4">
-            <div className="mt-3 grid place-items-center rounded-full bg-red-500/20 p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
-              <Trash2 className="h-4 w-4 text-red-600 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6" aria-hidden="true" />
+            <div className="mt-3 grid place-items-center rounded-full bg-danger-primary p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
+              <Trash2
+                className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
+                aria-hidden="true"
+              />
             </div>
             <div>
               <h3 className="my-4 text-20 font-medium leading-6 text-primary">{t("deactivate_your_account")}</h3>
diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx
index 12ef53221..0b7648e9c 100644
--- a/apps/web/core/components/analytics/overview/active-project-item.tsx
+++ b/apps/web/core/components/analytics/overview/active-project-item.tsx
@@ -16,7 +16,8 @@ type Props = {
 };
 
 function CompletionPercentage({ percentage }: { percentage: number }) {
-  const percentageColor = percentage > 50 ? "bg-green-500/30 text-green-500" : "bg-red-500/30 text-red-500";
+  const percentageColor =
+    percentage > 50 ? "bg-success-primary text-success-primary" : "bg-danger-primary text-danger-primary";
   return (
     <div className={cn("flex items-center gap-2 rounded-sm p-1 text-11", percentageColor)}>
       <span>{percentage}%</span>
diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx
index c0fa6c6b1..56c1275b0 100644
--- a/apps/web/core/components/analytics/overview/project-insights.tsx
+++ b/apps/web/core/components/analytics/overview/project-insights.tsx
@@ -72,8 +72,8 @@ const ProjectInsights = observer(function ProjectInsights() {
                   {
                     key: "count",
                     name: "Count",
-                    fill: "var(--color-brand-default)",
-                    stroke: "var(--color-brand-default)",
+                    fill: "var(--text-color-accent-primary)",
+                    stroke: "var(--text-color-accent-primary)",
                     fillOpacity: 0.6,
                     dot: {
                       r: 4,
diff --git a/apps/web/core/components/analytics/trend-piece.tsx b/apps/web/core/components/analytics/trend-piece.tsx
index e20f40e2e..691292c99 100644
--- a/apps/web/core/components/analytics/trend-piece.tsx
+++ b/apps/web/core/components/analytics/trend-piece.tsx
@@ -33,19 +33,19 @@ const sizeConfig = {
 
 const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtrack" | "atrisk", string>> = {
   simple: {
-    ontrack: "text-green-500",
+    ontrack: "text-success-primary",
     offtrack: "text-yellow-500",
-    atrisk: "text-red-500",
+    atrisk: "text-danger-primary",
   },
   outlined: {
-    ontrack: "text-green-500 border border-green-500",
+    ontrack: "text-success-primary border border-success-strong",
     offtrack: "text-yellow-500 border border-yellow-500",
-    atrisk: "text-red-500 border border-red-500",
+    atrisk: "text-danger-primary border border-danger-strong",
   },
   tinted: {
-    ontrack: "text-green-500 bg-green-500/10",
+    ontrack: "text-success-primary bg-success-primary",
     offtrack: "text-yellow-500 bg-yellow-500/10",
-    atrisk: "text-red-500 bg-red-500/10",
+    atrisk: "text-danger-primary bg-danger-primary",
   },
 } as const;
 
diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 93f862811..56086afa9 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -147,7 +147,7 @@ export function CreateApiTokenForm(props: Props) {
                 />
               )}
             />
-            {errors.label && <span className="text-11 text-red-500">{errors.label.message}</span>}
+            {errors.label && <span className="text-11 text-danger-primary">{errors.label.message}</span>}
           </div>
           <Controller
             control={control}
diff --git a/apps/web/core/components/api-token/token-list-item.tsx b/apps/web/core/components/api-token/token-list-item.tsx
index 4e0253bd8..56ee64a33 100644
--- a/apps/web/core/components/api-token/token-list-item.tsx
+++ b/apps/web/core/components/api-token/token-list-item.tsx
@@ -31,14 +31,14 @@ export function ApiTokenListItem(props: Props) {
             className="absolute right-4 hidden place-items-center group-hover:grid"
             data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.LIST_ITEM_DELETE_ICON}
           >
-            <XCircle className="h-4 w-4 text-red-500" />
+            <XCircle className="h-4 w-4 text-danger-primary" />
           </button>
         </Tooltip>
         <div className="flex w-4/5 items-center">
           <h5 className="truncate text-13 font-medium">{token.label}</h5>
           <span
             className={`${
-              token.is_active ? "bg-green-500/10 text-green-500" : "bg-layer-1 text-placeholder"
+              token.is_active ? "bg-success-primary text-success-primary" : "bg-layer-1 text-placeholder"
             } ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index 54072fd89..c808e064d 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -94,7 +94,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded-sm bg-layer-3 p-3">
-              <ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" />
+              <ArchiveX className="h-4 w-4 flex-shrink-0 text-danger-primary" />
             </div>
             <div className="">
               <h4 className="text-13 font-medium">{t("project_settings.automations.auto-close.title")}</h4>
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
index db7a2c5b8..f1459c107 100644
--- a/apps/web/core/components/automation/select-month-modal.tsx
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -76,7 +76,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
                   />
 
                   {errors.close_in && (
-                    <span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span>
+                    <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
                   )}
                 </>
               ) : (
@@ -109,7 +109,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
                     )}
                   />
                   {errors.archive_in && (
-                    <span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span>
+                    <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
                   )}
                 </>
               )}
diff --git a/apps/web/core/components/comments/card/edit-form.tsx b/apps/web/core/components/comments/card/edit-form.tsx
index 8bd761d88..bff2ef528 100644
--- a/apps/web/core/components/comments/card/edit-form.tsx
+++ b/apps/web/core/components/comments/card/edit-form.tsx
@@ -114,14 +114,14 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
             className={cn(
               "group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
               isDisabled
-                ? "cursor-not-allowed border-green-500/50 bg-green-500/10"
-                : "border-green-500 bg-green-500/20 hover:bg-green-500"
+                ? "cursor-not-allowed border-success-strong/50 bg-success-primary"
+                : "border-success-strong bg-success-primary hover:bg-green-500"
             )}
           >
             <Check
               className={cn(
                 "size-4 duration-300",
-                isDisabled ? "text-green-500/50" : "text-green-500 group-hover:text-on-color"
+                isDisabled ? "text-success-primary/50" : "text-success-primary group-hover:text-on-color"
               )}
             />
           </button>
@@ -132,8 +132,8 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
           className={cn(
             "group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
             isSubmitting
-              ? "cursor-not-allowed border-red-500/50 bg-red-500/10"
-              : "border-red-500 bg-red-500/20 hover:bg-red-500"
+              ? "cursor-not-allowed border-danger-strong/50 bg-danger-primary"
+              : "border-danger-strong bg-danger-primary hover:bg-red-500"
           )}
           onClick={() => {
             setIsEditing(false);
@@ -143,7 +143,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
           <CloseIcon
             className={cn(
               "size-5 duration-300",
-              isSubmitting ? "text-red-500/50" : "text-red-500 group-hover:text-on-color"
+              isSubmitting ? "text-danger-primary/50" : "text-danger-primary group-hover:text-on-color"
             )}
           />
         </button>
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index e4f3dedf0..a1b21ddd0 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -331,7 +331,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </div>
                     </div>
                     {fileRejections.length > 0 && (
-                      <p className="text-13 text-red-500">
+                      <p className="text-13 text-danger-primary">
                         {fileRejections[0].errors[0].code === "file-too-large"
                           ? "The image size cannot exceed 5 MB."
                           : "Please upload a file in a valid format."}
diff --git a/apps/web/core/components/core/modals/change-email-modal.tsx b/apps/web/core/components/core/modals/change-email-modal.tsx
index 46d79e3a5..8917d0786 100644
--- a/apps/web/core/components/core/modals/change-email-modal.tsx
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -154,12 +154,15 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
                 ref={ref}
                 hasError={Boolean(errors.email)}
                 placeholder={changeEmailT("form.email.placeholder")}
-                className={cn({ "border-red-500": errors.email }, { "cursor-not-allowed !bg-surface-2": secondStep })}
+                className={cn(
+                  { "border-danger-strong": errors.email },
+                  { "cursor-not-allowed !bg-surface-2": secondStep }
+                )}
                 disabled={secondStep}
               />
             )}
           />
-          {errors?.email && <span className="text-11 text-red-500">{errors?.email?.message}</span>}
+          {errors?.email && <span className="text-11 text-danger-primary">{errors?.email?.message}</span>}
         </div>
 
         {secondStep && (
@@ -177,15 +180,15 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
                   onChange={onChange}
                   ref={ref}
                   placeholder={changeEmailT("form.code.placeholder")}
-                  className={cn({ "border-red-500": errors.code })}
+                  className={cn({ "border-danger-strong": errors.code })}
                   autoFocus
                 />
               )}
             />
             {errors?.code ? (
-              <span className="text-11 text-red-500">{errors?.code?.message}</span>
+              <span className="text-11 text-danger-primary">{errors?.code?.message}</span>
             ) : (
-              <span className="text-11 text-green-700">{changeEmailT("form.code.helper_text")}</span>
+              <span className="text-11 text-success-primary">{changeEmailT("form.code.helper_text")}</span>
             )}
           </div>
         )}
diff --git a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
index df68c08aa..0e64a12c5 100644
--- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -244,7 +244,7 @@ export function GptAssistantPopover(props: Props) {
               </div>
             )}
             {invalidResponse && (
-              <div className="text-13 text-red-500">
+              <div className="text-13 text-danger-primary">
                 No response could be generated. This may be due to insufficient content or task information. Please try
                 again.
               </div>
diff --git a/apps/web/core/components/core/modals/user-image-upload-modal.tsx b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
index 899992107..72f4f18d9 100644
--- a/apps/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -128,7 +128,7 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
             </div>
           </div>
           {fileRejections.length > 0 && (
-            <p className="text-13 text-red-500">
+            <p className="text-13 text-danger-primary">
               {fileRejections[0].errors[0].code === "file-too-large"
                 ? "The image size cannot exceed 5 MB."
                 : "Please upload a file in a valid format."}
diff --git a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
index 081840693..6915bfd2f 100644
--- a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -141,7 +141,7 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
             </div>
           </div>
           {fileRejections.length > 0 && (
-            <p className="text-13 text-red-500">
+            <p className="text-13 text-danger-primary">
               {fileRejections[0].errors[0].code === "file-too-large"
                 ? "The image size cannot exceed 5 MB."
                 : "Please upload a file in a valid format."}
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index 289bfbf8a..a046dd7a2 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -121,7 +121,7 @@ export function CycleForm(props: Props) {
                 />
               )}
             />
-            <span className="text-11 text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
index a2ea4561d..2d6d68c71 100644
--- a/apps/web/core/components/dropdowns/module/button-content.tsx
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -93,7 +93,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
                           onChange(newModuleIds);
                         }}
                       >
-                        <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-red-500" />
+                        <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
                       </button>
                     </Tooltip>
                   )}
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
index 830c35fad..54392b5e1 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -187,7 +187,7 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
             />
           )}
           {/* {isEstimatePointError && (
-            <div className="pt-5 text-13 text-red-500">
+            <div className="pt-5 text-13 text-danger-primary">
               Estimate points can&apos;t be empty. Enter a value in each field or remove those you don&apos;t have
               values for.
             </div>
diff --git a/apps/web/core/components/estimates/points/create.tsx b/apps/web/core/components/estimates/points/create.tsx
index 0072169ee..1f649c988 100644
--- a/apps/web/core/components/estimates/points/create.tsx
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -171,7 +171,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
       <div
         className={cn(
           "relative w-full border rounded-sm flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-subtle`
+          estimatePointError?.message ? `border-danger-strong` : `border-subtle`
         )}
       >
         <EstimateInputRoot
@@ -181,7 +181,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
         />
         {estimatePointError?.message && (
           <Tooltip tooltipContent={estimatePointError?.message} position="bottom">
-            <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+            <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-danger-primary">
               <Info size={14} />
             </div>
           </Tooltip>
@@ -191,7 +191,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
       {estimateInputValue && estimateInputValue.length > 0 && (
         <button
           type="submit"
-          className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-green-500"
+          className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
           disabled={loader}
         >
           {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
diff --git a/apps/web/core/components/estimates/points/update.tsx b/apps/web/core/components/estimates/points/update.tsx
index abcfa2cd6..06f54165c 100644
--- a/apps/web/core/components/estimates/points/update.tsx
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -170,7 +170,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
       <div
         className={cn(
           "relative w-full border rounded-sm flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-subtle`
+          estimatePointError?.message ? `border-danger-strong` : `border-subtle`
         )}
       >
         <EstimateInputRoot
@@ -188,7 +188,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
               }
               position="bottom"
             >
-              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-danger-primary">
                 <Info size={14} />
               </div>
             </Tooltip>
@@ -199,7 +199,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
       {estimateInputValue && estimateInputValue.length > 0 && (
         <button
           type="submit"
-          className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-green-500"
+          className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
           disabled={loader}
         >
           {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
diff --git a/apps/web/core/components/exporter/column.tsx b/apps/web/core/components/exporter/column.tsx
index 154306dbe..6e10650ca 100644
--- a/apps/web/core/components/exporter/column.tsx
+++ b/apps/web/core/components/exporter/column.tsx
@@ -72,11 +72,11 @@ export const useExportColumns = () => {
         <span
           className={`rounded-sm text-11 px-2 py-1 capitalize ${
             rowData.status === "completed"
-              ? "bg-green-500/20 text-green-500"
+              ? "bg-success-primary text-success-primary"
               : rowData.status === "processing"
                 ? "bg-yellow-500/20 text-yellow-500"
                 : rowData.status === "failed"
-                  ? "bg-red-500/20 text-red-500"
+                  ? "bg-danger-primary text-danger-primary"
                   : rowData.status === "expired"
                     ? "bg-orange-500/20 text-orange-500"
                     : "bg-gray-500/20 text-gray-500"
@@ -104,7 +104,7 @@ export const useExportColumns = () => {
             )}
           </>
         ) : (
-          <div className="text-11 text-red-500">Expired</div>
+          <div className="text-11 text-danger-primary">Expired</div>
         ),
     },
   ];
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
index fc80b1a0d..a86f1ed12 100644
--- a/apps/web/core/components/exporter/single-export.tsx
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -38,11 +38,11 @@ export function SingleExport({ service, refreshing }: Props) {
           <span
             className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
               service.status === "completed"
-                ? "bg-green-500/20 text-green-500"
+                ? "bg-success-primary text-success-primary"
                 : service.status === "processing"
                   ? "bg-yellow-500/20 text-yellow-500"
                   : service.status === "failed"
-                    ? "bg-red-500/20 text-red-500"
+                    ? "bg-danger-primary text-danger-primary"
                     : service.status === "expired"
                       ? "bg-orange-500/20 text-orange-500"
                       : ""
@@ -69,7 +69,7 @@ export function SingleExport({ service, refreshing }: Props) {
           )}
         </>
       ) : (
-        <div className="text-11 text-red-500">Expired</div>
+        <div className="text-11 text-danger-primary">Expired</div>
       )}
     </div>
   );
diff --git a/apps/web/core/components/global/timezone-select.tsx b/apps/web/core/components/global/timezone-select.tsx
index 61688c841..59f3285e7 100644
--- a/apps/web/core/components/global/timezone-select.tsx
+++ b/apps/web/core/components/global/timezone-select.tsx
@@ -39,7 +39,7 @@ export const TimezoneSelect = observer(function TimezoneSelect(props: TTimezoneS
         options={isDisabled || disabled ? [] : timezones}
         onChange={onChange}
         buttonClassName={cn(buttonClassName, {
-          "border-red-500": error,
+          "border-danger-strong": error,
         })}
         className={cn("rounded-md border-[0.5px] !border-subtle", className)}
         optionsClassName={cn("w-72", optionsClassName)}
diff --git a/apps/web/core/components/home/root.tsx b/apps/web/core/components/home/root.tsx
index d38e71410..2712c3ac8 100644
--- a/apps/web/core/components/home/root.tsx
+++ b/apps/web/core/components/home/root.tsx
@@ -52,7 +52,7 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
   return (
     <>
       {currentUserProfile && !currentUserProfile.is_tour_completed && (
-        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-backdrop bg-opacity-50 transition-opacity overflow-y-auto">
+        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-backdrop transition-opacity overflow-y-auto">
           <TourRoot onComplete={handleTourCompleted} />
         </div>
       )}
diff --git a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
index 3310dd9d7..f412b6e75 100644
--- a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -94,7 +94,7 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
                   />
                 )}
               />
-              {errors.url && <span className="text-11 text-red-500">{t("link.modal.url.required")}</span>}
+              {errors.url && <span className="text-11 text-danger-primary">{t("link.modal.url.required")}</span>}
             </div>
             <div>
               <label htmlFor="title" className="mb-2 text-secondary text-14 font-medium">
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
index 6aaab1f5a..9ebf2b45a 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -314,7 +314,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                 <Button
                   variant="secondary"
                   prependIcon={<CircleCheck className="w-3 h-3" />}
-                  className="text-green-500 border border-green-500 bg-green-500/20 focus:bg-green-500/20 focus:text-green-500 hover:bg-green-500/40 bg-opacity-20"
+                  className="text-success-primary border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
                   onClick={() =>
                     handleActionWithPermission(
                       isProjectAdmin,
@@ -333,7 +333,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                 <Button
                   variant="secondary"
                   prependIcon={<CircleX className="w-3 h-3" />}
-                  className="text-red-500 border border-red-500 bg-red-500/20 focus:bg-red-500/20 focus:text-red-500 hover:bg-red-500/40 bg-opacity-20"
+                  className="text-danger-primary border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
                   onClick={() =>
                     handleActionWithPermission(
                       isProjectAdmin,
diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index a7a216cb0..9916c4322 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -177,7 +177,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
                   )
                 }
               >
-                <div className="flex items-center gap-2 text-green-500">
+                <div className="flex items-center gap-2 text-success-primary">
                   <CircleCheck size={14} strokeWidth={2} />
                   Accept
                 </div>
@@ -193,7 +193,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
                   )
                 }
               >
-                <div className="flex items-center gap-2 text-red-500">
+                <div className="flex items-center gap-2 text-danger-primary">
                   <CircleX size={14} strokeWidth={2} />
                   Decline
                 </div>
@@ -201,7 +201,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
             )}
             {canDelete && !isAcceptedOrDeclined && (
               <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
-                <div className="flex items-center gap-2 text-red-500">
+                <div className="flex items-center gap-2 text-danger-primary">
                   <Trash2 size={14} strokeWidth={2} />
                   Delete
                 </div>
diff --git a/apps/web/core/components/inbox/inbox-status-icon.tsx b/apps/web/core/components/inbox/inbox-status-icon.tsx
index 1893a0653..65cb395f3 100644
--- a/apps/web/core/components/inbox/inbox-status-icon.tsx
+++ b/apps/web/core/components/inbox/inbox-status-icon.tsx
@@ -16,8 +16,8 @@ export const ICON_PROPERTIES = {
   },
   [EInboxIssueStatus.SNOOZED]: {
     icon: Clock,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-placeholder"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-red-500/10" : "bg-[#E0E1E6]"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-primary" : "bg-[#E0E1E6]"),
   },
   [EInboxIssueStatus.ACCEPTED]: {
     icon: CheckCircle2,
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
index ceaa2a6ab..116d352af 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
@@ -37,7 +37,7 @@ export const InboxIssueTitle = observer(function InboxIssueTitle(props: TInboxIs
         required
       />
       {isTitleLengthMoreThan255Character && (
-        <span className="text-11 text-red-500">{t("title_should_be_less_than_255_characters")}</span>
+        <span className="text-11 text-danger-primary">{t("title_should_be_less_than_255_characters")}</span>
       )}
     </div>
   );
diff --git a/apps/web/core/components/integration/delete-import-modal.tsx b/apps/web/core/components/integration/delete-import-modal.tsx
index 3f90d6073..7ca547657 100644
--- a/apps/web/core/components/integration/delete-import-modal.tsx
+++ b/apps/web/core/components/integration/delete-import-modal.tsx
@@ -59,8 +59,8 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <div className="flex flex-col gap-6 p-6">
         <div className="flex w-full items-center justify-start gap-6">
-          <span className="place-items-center rounded-full bg-red-500/20 p-4">
-            <AlertTriangle className="h-6 w-6 text-red-500" aria-hidden="true" />
+          <span className="place-items-center rounded-full bg-danger-primary p-4">
+            <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </span>
           <span className="flex items-center justify-start">
             <h3 className="text-18 font-medium 2xl:text-20">Delete project</h3>
diff --git a/apps/web/core/components/integration/github/root.tsx b/apps/web/core/components/integration/github/root.tsx
index 40a25416e..3174a79f0 100644
--- a/apps/web/core/components/integration/github/root.tsx
+++ b/apps/web/core/components/integration/github/root.tsx
@@ -173,10 +173,10 @@ export function GithubImporterRoot() {
                   <div
                     className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
                       index <= activeIntegrationState()
-                        ? `border-accent-strong bg-accent-primary ${
+                        ? `border-accent-strong ${
                             index === activeIntegrationState()
-                              ? "border-opacity-100 bg-opacity-100"
-                              : "border-opacity-80 bg-opacity-80"
+                              ? "border-opacity-100 bg-accent-primary"
+                              : "border-opacity-80 bg-accent-primary/80"
                           }`
                         : "border-subtle"
                     }`}
diff --git a/apps/web/core/components/integration/jira/give-details.tsx b/apps/web/core/components/integration/jira/give-details.tsx
index 5b6824711..2fc140d88 100644
--- a/apps/web/core/components/integration/jira/give-details.tsx
+++ b/apps/web/core/components/integration/jira/give-details.tsx
@@ -59,7 +59,9 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
               />
             )}
           />
-          {errors.metadata?.api_token && <p className="text-11 text-red-500">{errors.metadata.api_token.message}</p>}
+          {errors.metadata?.api_token && (
+            <p className="text-11 text-danger-primary">{errors.metadata.api_token.message}</p>
+          )}
         </div>
       </div>
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
@@ -88,7 +90,7 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
             )}
           />
           {errors.metadata?.project_key && (
-            <p className="text-11 text-red-500">{errors.metadata.project_key.message}</p>
+            <p className="text-11 text-danger-primary">{errors.metadata.project_key.message}</p>
           )}
         </div>
       </div>
@@ -118,7 +120,7 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
               />
             )}
           />
-          {errors.metadata?.email && <p className="text-11 text-red-500">{errors.metadata.email.message}</p>}
+          {errors.metadata?.email && <p className="text-11 text-danger-primary">{errors.metadata.email.message}</p>}
         </div>
       </div>
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
@@ -147,7 +149,7 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
             )}
           />
           {errors.metadata?.cloud_hostname && (
-            <p className="text-11 text-red-500">{errors.metadata.cloud_hostname.message}</p>
+            <p className="text-11 text-danger-primary">{errors.metadata.cloud_hostname.message}</p>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/integration/jira/root.tsx b/apps/web/core/components/integration/jira/root.tsx
index d506ae0ea..79b2457f0 100644
--- a/apps/web/core/components/integration/jira/root.tsx
+++ b/apps/web/core/components/integration/jira/root.tsx
@@ -116,12 +116,12 @@ export function JiraImporterRoot() {
                     index > activeIntegrationState() + 1 ||
                     Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
                   }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-subtle ${
+                  className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-subtle ${
                     index <= activeIntegrationState()
-                      ? `border-accent-strong bg-accent-primary ${
+                      ? `border-accent-strong ${
                           index === activeIntegrationState()
-                            ? "border-opacity-100 bg-opacity-100"
-                            : "border-opacity-80 bg-opacity-80"
+                            ? "border-opacity-100 bg-accent-primary"
+                            : "border-opacity-80 bg-accent-primary/80"
                         }`
                       : "border-subtle"
                   }`}
diff --git a/apps/web/core/components/integration/single-import.tsx b/apps/web/core/components/integration/single-import.tsx
index ec9e10418..ec127adec 100644
--- a/apps/web/core/components/integration/single-import.tsx
+++ b/apps/web/core/components/integration/single-import.tsx
@@ -35,11 +35,11 @@ export const SingleImport = observer(function SingleImport({ service, refreshing
           <span
             className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
               service.status === "completed"
-                ? "bg-green-500/20 text-green-500"
+                ? "bg-success-primary text-success-primary"
                 : service.status === "processing"
                   ? "bg-yellow-500/20 text-yellow-500"
                   : service.status === "failed"
-                    ? "bg-red-500/20 text-red-500"
+                    ? "bg-danger-primary text-danger-primary"
                     : ""
             }`}
           >
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index 4834217dc..926625821 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -114,7 +114,7 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
           <h3 className="flex items-center gap-2 text-body-xs-medium">
             {integration.title}
             {workspaceIntegrations
-              ? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-green-500" />
+              ? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-success-primary" />
               : null}
           </h3>
           <p className="text-body-xs-regular text-secondary">
diff --git a/apps/web/core/components/issues/attachment/attachment-upload.tsx b/apps/web/core/components/issues/attachment/attachment-upload.tsx
index 59af790db..9ecb101b4 100644
--- a/apps/web/core/components/issues/attachment/attachment-upload.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-upload.tsx
@@ -47,14 +47,14 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
       {...getRootProps()}
       className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
         isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
-      } ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
+      } ${isDragReject ? "bg-danger-subtle" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
     >
       <input {...getInputProps()} />
       <span className="flex items-center gap-2">
         {isDragActive ? (
           <p>Drop here...</p>
         ) : fileError ? (
-          <p className="text-center text-red-500">{fileError}</p>
+          <p className="text-center text-danger-primary">{fileError}</p>
         ) : isLoading ? (
           <p className="text-center">Uploading...</p>
         ) : (
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
index 15eb06814..921b8daba 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
@@ -143,7 +143,7 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
             isClearable
             mergeDates
             buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlight ? "text-red-500" : ""}
+            buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
             disabled={!canEdit}
             showTooltip
             customTooltipHeading="Date Range"
@@ -187,7 +187,7 @@ export const SubIssuesListItemProperties = observer(function SubIssuesListItemPr
             placeholder={t("common.order_by.due_date")}
             icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlight ? "text-red-500" : ""}
+            buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
             clearIconClassName="text-primary"
             optionsClassName="z-30"
             disabled={!canEdit}
diff --git a/apps/web/core/components/issues/issue-detail/identifier-text.tsx b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
index 02723e927..4c1282079 100644
--- a/apps/web/core/components/issues/issue-detail/identifier-text.tsx
+++ b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
@@ -16,7 +16,7 @@ const VARIANT_MAP: Record<TIdentifierTextVariant, string> = {
   tertiary: "text-tertiary",
   primary: "text-primary",
   "primary-subtle": "text-primary/80",
-  success: "text-success",
+  success: "text-success-primary",
 };
 
 export function IdentifierText(props: TIdentifierTextProps) {
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index 0d2bdbc9b..90f457e28 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -34,7 +34,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
     <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
       <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
       <span className="text-body-xs-regular">{label.name}</span>
-      {!disabled && <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />}
+      {!disabled && <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger-primary" />}
     </Button>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
index 14113d311..b68eb6ca3 100644
--- a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -100,7 +100,9 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
                   />
                 )}
               />
-              {errors.url && <span className="text-caption-sm-regular text-danger">{t("common.url_is_invalid")}</span>}
+              {errors.url && (
+                <span className="text-caption-sm-regular text-danger-primary">{t("common.url_is_invalid")}</span>
+              )}
             </div>
             <div>
               <label htmlFor="title" className="mb-2 text-secondary">
diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
index 625b0b57a..94c3923da 100644
--- a/apps/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -109,7 +109,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
                     handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
                   }}
                 >
-                  <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" />
+                  <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
                 </span>
               </Tooltip>
             )}
diff --git a/apps/web/core/components/issues/issue-detail/parent/root.tsx b/apps/web/core/components/issues/issue-detail/parent/root.tsx
index 7b5e5165b..043f793da 100644
--- a/apps/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/root.tsx
@@ -93,7 +93,7 @@ export const IssueParentDetail = observer(function IssueParentDetail(props: TIss
 
           <CustomMenu.MenuItem
             onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}
-            className="flex items-center gap-2 py-2 text-red-500"
+            className="flex items-center gap-2 py-2 text-danger-primary"
           >
             <MinusCircle className="h-4 w-4" />
             <span>{t("issue.remove.parent.label")}</span>
diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
index 52c9aba5e..48b227c91 100644
--- a/apps/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -139,7 +139,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                             removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
                           }}
                         >
-                          <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger" />
+                          <CloseIcon className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
                         </span>
                       </Tooltip>
                     )}
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index d64665467..67dfcfa24 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -173,7 +173,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   buttonContainerClassName="w-full text-left h-7.5"
                   buttonClassName={cn("text-body-xs-regular", {
                     "text-placeholder": !issue.target_date,
-                    "text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+                    "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
                   })}
                   hideIcon
                   clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
diff --git a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
index 7e236da62..dfa754489 100644
--- a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
+++ b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -48,7 +48,7 @@ export function GroupDragOverlay(props: Props) {
         `absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`,
         {
           "flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible,
-          "bg-red-200/60": workflowDisabledSource && isDropDisabled,
+          "bg-danger-primary": workflowDisabledSource && isDropDisabled,
         },
         { hidden: !shouldOverlayBeVisible }
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 65d84f7f7..2b864a04d 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -257,7 +257,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
         <div
           className={`${
             isDragging ? `opacity-100` : `opacity-0`
-          } flex w-full items-center justify-center rounded-sm border-2 border-red-500/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-red-500 ${
+          } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-danger-primary ${
             isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
           } transition duration-300`}
         >
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
index 043954af8..70a849e76 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -119,7 +119,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
       </div>
 
       <Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}>
-        <div className="w-full line-clamp-1 text-14 text-primary">
+        <div className="w-full line-clamp-1 text-body-sm-medium text-primary">
           <span>{issue.name}</span>
         </div>
       </Tooltip>
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
index 3fdbbbc85..70c22a6e3 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -276,7 +276,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               disabled={isCurrentBlockDragging}
               renderByDefault={false}
             >
-              <p className="truncate cursor-pointer text-body-xs-regular text-primary">{issue.name}</p>
+              <p className="truncate cursor-pointer text-body-xs-medium text-primary">{issue.name}</p>
             </Tooltip>
             {isEpic && displayProperties && (
               <WithDisplayPropertiesHOC
diff --git a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index f7f1f64e1..84397028e 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -298,8 +298,10 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             isClearable
             mergeDates
             buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""}
-            clearIconClassName="!text-primary"
+            buttonClassName={
+              shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
+            }
+            clearIconClassName="text-primary!"
             disabled={isReadOnly}
             renderByDefault={isMobile}
             showTooltip
@@ -344,10 +346,12 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             onChange={handleTargetDate}
             minDate={minDate}
             placeholder={t("common.order_by.due_date")}
-            icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
+            icon={<DueDatePropertyIcon className="h-3 w-3 shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""}
-            clearIconClassName="!text-primary"
+            buttonClassName={
+              shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
+            }
+            clearIconClassName="text-primary!"
             optionsClassName="z-10"
             disabled={isReadOnly}
             renderByDefault={isMobile}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
index 78e4a2913..faf3d20b1 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
   const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className={cn("shadow-raised-200", hasError && "border border-red-500/20 bg-red-500/10")}>
+    <div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-primary")}>
       <form
         ref={ref}
         onSubmit={onSubmit}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
index e3e16bb24..64fea95f9 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -150,7 +150,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
     <div
       className={cn(
         containerClassName,
-        errors && errors?.name && errors?.name?.message ? `border-red-500 bg-red-500/10` : ``
+        errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-primary` : ``
       )}
     >
       {isOpen ? (
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index d9899dcd6..91caed64b 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -48,7 +48,7 @@ export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColu
         buttonClassName={cn(
           "rounded-none text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x",
           {
-            "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+            "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
         )}
         optionsClassName="z-[9]"
diff --git a/apps/web/core/components/issues/issue-modal/components/title-input.tsx b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
index 77a6bed1b..c844dc846 100644
--- a/apps/web/core/components/issues/issue-modal/components/title-input.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
@@ -72,7 +72,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: TIssueTi
           />
         )}
       />
-      <span className="text-caption-sm-medium text-red-500">{errors?.name?.message}</span>
+      <span className="text-caption-sm-medium text-danger-primary">{errors?.name?.message}</span>
     </div>
   );
 });
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index da3f77518..73fb91007 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -174,7 +174,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               buttonContainerClassName="w-full text-left h-7.5"
               buttonClassName={cn("text-body-xs-medium", {
                 "text-placeholder": !issue.target_date,
-                "text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+                "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
               })}
               hideIcon
               clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
diff --git a/apps/web/core/components/issues/preview-card/date.tsx b/apps/web/core/components/issues/preview-card/date.tsx
index 4c0a9c407..dc1a016ac 100644
--- a/apps/web/core/components/issues/preview-card/date.tsx
+++ b/apps/web/core/components/issues/preview-card/date.tsx
@@ -23,7 +23,7 @@ export function WorkItemPreviewCardDate(props: Props) {
       {isDateRangeEnabled ? (
         <div
           className={cn("h-full flex items-center gap-1", {
-            "text-red-500": shouldHighlightDate,
+            "text-danger-primary": shouldHighlightDate,
           })}
         >
           <CalendarDays className="shrink-0 size-3" />
@@ -39,7 +39,7 @@ export function WorkItemPreviewCardDate(props: Props) {
       ) : (
         <div
           className={cn("h-full flex items-center gap-1", {
-            "text-red-500": shouldHighlightDate,
+            "text-danger-primary": shouldHighlightDate,
           })}
         >
           <DueDatePropertyIcon className="shrink-0 size-3" />
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index 82c04cc8e..fac79d4ee 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -147,7 +147,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
           className={cn(
             "block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium outline-none ring-0",
             {
-              "ring-1 ring-red-400 mx-2.5": title?.length === 0,
+              "ring-1 ring-danger-strong mx-2.5": title?.length === 0,
             },
             className
           )}
@@ -167,11 +167,15 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
             }
           )}
         >
-          <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
+          <span className={`${title.length === 0 || title.length > 255 ? "text-danger-primary" : ""}`}>
+            {title.length}
+          </span>
           /255
         </div>
       </div>
-      {title?.length === 0 && <span className="text-13 font-medium text-red-500">{t("form.title.required")}</span>}
+      {title?.length === 0 && (
+        <span className="text-13 font-medium text-danger-primary">{t("form.title.required")}</span>
+      )}
     </div>
   );
 });
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
index 9b9ed1d57..a3d3d8e5b 100644
--- a/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
@@ -193,7 +193,7 @@ export const DraftIssueProperties = observer(function DraftIssueProperties(props
           icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
           buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
           buttonClassName={
-            shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : ""
+            shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-danger-primary" : ""
           }
           clearIconClassName="!text-primary"
           optionsClassName="z-10"
diff --git a/apps/web/core/components/labels/create-update-label-inline.tsx b/apps/web/core/components/labels/create-update-label-inline.tsx
index ad77edcd7..e9c2fc85d 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -273,7 +273,7 @@ export const CreateUpdateLabelInline = observer(
             {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
           </Button>
         </div>
-        {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-red-500">{errors.name?.message}</p>}
+        {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-danger-primary">{errors.name?.message}</p>}
       </>
     );
   })
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 322f62b3d..4f9f8b12c 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -132,7 +132,7 @@ export function ModuleForm(props: Props) {
                 />
               )}
             />
-            <span className="text-11 text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
index 394dbcf1f..fc265e587 100644
--- a/apps/web/core/components/modules/select/status.tsx
+++ b/apps/web/core/components/modules/select/status.tsx
@@ -31,14 +31,16 @@ export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
           <CustomSelect
             value={value}
             label={
-              <div className={`flex items-center justify-center gap-2 text-11 py-0.5 ${error ? "text-red-500" : ""}`}>
+              <div
+                className={`flex items-center justify-center gap-2 text-11 py-0.5 ${error ? "text-danger-primary" : ""}`}
+              >
                 {value ? (
                   <ModuleStatusIcon status={value} />
                 ) : (
-                  <StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-secondary"}`} />
+                  <StatePropertyIcon className={`h-3 w-3 ${error ? "text-danger-primary" : "text-secondary"}`} />
                 )}
                 {(selectedValue && t(selectedValue?.i18n_label)) ?? (
-                  <span className={`${error ? "text-red-500" : "text-secondary"}`}>Status</span>
+                  <span className={`${error ? "text-danger-primary" : "text-secondary"}`}>Status</span>
                 )}
               </div>
             }
diff --git a/apps/web/core/components/navigation/customize-navigation-dialog.tsx b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
index c453e9110..b2815c777 100644
--- a/apps/web/core/components/navigation/customize-navigation-dialog.tsx
+++ b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
@@ -324,12 +324,12 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                               "text-secondary",
                               parseInt(projectCountInput) >= 1
                                 ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
-                                : "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
+                                : "border-danger-strong focus:border-danger-strong focus:ring-1 focus:ring-danger-strong"
                             )}
                           />
                         </div>
                         {parseInt(projectCountInput) < 1 && projectCountInput !== "" && (
-                          <span className="text-11 text-red-500 pl-0.5">Minimum value is 1</span>
+                          <span className="text-11 text-danger-primary pl-0.5">Minimum value is 1</span>
                         )}
                       </div>
                     </div>
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index 37c1a1cc1..163c606cb 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -149,7 +149,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
       <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
         <div className="space-y-1">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -189,11 +189,11 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
               </div>
             )}
           />
-          {errors.name && <span className="text-13 text-red-500">{errors.name.message}</span>}
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
         </div>
         <div className="space-y-1">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -211,7 +211,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
             render={({ field: { value, ref, onChange } }) => (
               <div
                 className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
-                  invalidSlug ? "border-red-500" : "border-strong"
+                  invalidSlug ? "border-danger-strong" : "border-strong"
                 }`}
               >
                 <span className="whitespace-nowrap text-13">{window && window.location.host}/</span>
@@ -235,17 +235,19 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
           />
           <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
           {slugError && (
-            <p className="-mt-3 text-13 text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
           )}
           {invalidSlug && (
-            <p className="text-13 text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-13 text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
         </div>
         <hr className="w-full border-strong" />
         <div className="space-y-1">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
@@ -278,7 +280,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index d05ddc6cd..02abf4f75 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -250,7 +250,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
       {email && !emailRegex.test(email) && (
         <div className="mx-8 my-1">
           <span className="text-13">🤥</span>{" "}
-          <span className="mt-1 text-11 text-red-500">That doesn{"'"}t look like an email address.</span>
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index 6be30a456..95bc3c221 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -338,7 +338,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div className="space-y-1">
                   <label
-                    className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
                     htmlFor="first_name"
                   >
                     First name
@@ -369,11 +369,13 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                       />
                     )}
                   />
-                  {errors.first_name && <span className="text-13 text-red-500">{errors.first_name.message}</span>}
+                  {errors.first_name && (
+                    <span className="text-13 text-danger-primary">{errors.first_name.message}</span>
+                  )}
                 </div>
                 <div className="space-y-1">
                   <label
-                    className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
                     htmlFor="last_name"
                   >
                     Last name
@@ -403,7 +405,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                       />
                     )}
                   />
-                  {errors.last_name && <span className="text-13 text-red-500">{errors.last_name.message}</span>}
+                  {errors.last_name && <span className="text-13 text-danger-primary">{errors.last_name.message}</span>}
                 </div>
               </div>
 
@@ -490,7 +492,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                       )}
                     />
                     {errors.confirm_password && (
-                      <span className="text-13 text-red-500">{errors.confirm_password.message}</span>
+                      <span className="text-13 text-danger-primary">{errors.confirm_password.message}</span>
                     )}
                   </div>
                 </>
@@ -503,7 +505,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
             <>
               <div className="space-y-1">
                 <label
-                  className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                  className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
                   htmlFor="role"
                 >
                   What role are you working on? Choose one.
@@ -534,11 +536,11 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     </div>
                   )}
                 />
-                {errors.role && <span className="text-13 text-red-500">{errors.role.message}</span>}
+                {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
               </div>
               <div className="space-y-1">
                 <label
-                  className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                  className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
                   htmlFor="use_case"
                 >
                   What is your domain expertise? Choose one or more.
@@ -576,7 +578,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     </div>
                   )}
                 />
-                {errors.use_case && <span className="text-13 text-red-500">{errors.use_case.message}</span>}
+                {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
               </div>
             </>
           )}
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index 0870d6367..a6530e47c 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -202,7 +202,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         {/* Name Input */}
         <div className="flex flex-col gap-2">
           <label
-            className="block text-13 font-medium text-tertiary after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="block text-13 font-medium text-tertiary after:content-['*'] after:ml-0.5 after:text-danger-primary"
             htmlFor="first_name"
           >
             Name
@@ -230,7 +230,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
                   "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
                   {
                     "border-strong": !errors.first_name,
-                    "border-red-500": errors.first_name,
+                    "border-danger-strong": errors.first_name,
                   }
                 )}
                 placeholder="Enter your full name"
@@ -238,7 +238,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
               />
             )}
           />
-          {errors.first_name && <span className="text-13 text-red-500">{errors.first_name.message}</span>}
+          {errors.first_name && <span className="text-13 text-danger-primary">{errors.first_name.message}</span>}
         </div>
 
         {/* setting up password for the first time */}
diff --git a/apps/web/core/components/onboarding/steps/profile/set-password.tsx b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
index 12d395ef1..5087740fa 100644
--- a/apps/web/core/components/onboarding/steps/profile/set-password.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -118,8 +118,8 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
               placeholder="Confirm password"
               className="transition-all duration-200"
             />
-            {hasPasswordMismatch && <p className="text-11 text-red-500 mt-1">Passwords do not match</p>}
-            {isPasswordValid && <p className="text-11 text-green-500 mt-1">✓ Passwords match</p>}
+            {hasPasswordMismatch && <p className="text-11 text-danger-primary mt-1">Passwords do not match</p>}
+            {isPasswordValid && <p className="text-11 text-success-primary mt-1">✓ Passwords match</p>}
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 7b3cbb347..14a282524 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -153,7 +153,7 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
             </div>
           )}
         />
-        {errors.role && <span className="text-13 text-red-500">{errors.role.message}</span>}
+        {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
       </div>
       {/* Action Buttons */}
       <div className="space-y-3">
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index 346de5c74..8a6dc9205 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -251,7 +251,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
       {email && !emailRegex.test(email) && (
         <div className="mx-8 my-1">
           <span className="text-13">🤥</span>{" "}
-          <span className="mt-1 text-11 text-red-500">That doesn{"'"}t look like an email address.</span>
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/onboarding/steps/usecase/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
index d0af839b2..2d1a0c35c 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -155,7 +155,7 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
             </div>
           )}
         />
-        {errors.use_case && <span className="text-13 text-red-500">{errors.use_case.message}</span>}
+        {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
       </div>
 
       {/* Action Buttons */}
diff --git a/apps/web/core/components/onboarding/steps/workspace/create.tsx b/apps/web/core/components/onboarding/steps/workspace/create.tsx
index b97698c41..53a5c454a 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -145,7 +145,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
       <div className="flex flex-col gap-8">
         <div className="flex flex-col gap-2">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -182,7 +182,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                     "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
                     {
                       "border-strong": !errors.name,
-                      "border-red-500": errors.name,
+                      "border-danger-strong": errors.name,
                     }
                   )}
                   // eslint-disable-next-line jsx-a11y/no-autofocus
@@ -191,11 +191,11 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
               </div>
             )}
           />
-          {errors.name && <span className="text-13 text-red-500">{errors.name.message}</span>}
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
         </div>
         <div className="flex flex-col gap-2">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -216,7 +216,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                   "flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong focus:border-transparent transition-all duration-200",
                   {
                     "border-strong": !errors.name,
-                    "border-red-500": errors.name,
+                    "border-danger-strong": errors.name,
                   }
                 )}
               >
@@ -244,16 +244,18 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
           />
           <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
           {slugError && (
-            <p className="-mt-3 text-13 text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
           )}
           {invalidSlug && (
-            <p className="text-13 text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-13 text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
         </div>
         <div className="flex flex-col gap-2">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
@@ -291,7 +293,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
diff --git a/apps/web/core/components/onboarding/switch-account-dropdown.tsx b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
index 02f81aaab..5d395bce8 100644
--- a/apps/web/core/components/onboarding/switch-account-dropdown.tsx
+++ b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -60,7 +60,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
               as="button"
               type="button"
               className={({ active }) =>
-                cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded-sm w-full", {
+                cn("text-danger-primary px-1 py-1.5 whitespace-nowrap text-left rounded-sm w-full", {
                   "bg-layer-1": active,
                 })
               }
diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
index 9de765ffb..73c398d49 100644
--- a/apps/web/core/components/pages/editor/title.tsx
+++ b/apps/web/core/components/pages/editor/title.tsx
@@ -70,7 +70,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
           >
             <span
               className={cn({
-                "text-red-500": title && title.length > 255,
+                "text-danger-primary": title && title.length > 255,
               })}
             >
               {title?.length}
diff --git a/apps/web/core/components/pages/header/copy-link-control.tsx b/apps/web/core/components/pages/header/copy-link-control.tsx
index 613ff5fd7..9a0234b7f 100644
--- a/apps/web/core/components/pages/header/copy-link-control.tsx
+++ b/apps/web/core/components/pages/header/copy-link-control.tsx
@@ -57,7 +57,7 @@ export const PageCopyLinkControl = observer(function PageCopyLinkControl({ page
         icon={isCopied ? Check : Link}
         onClick={handleCopy}
         aria-label={isCopied ? "Copied link" : "Copy link"}
-        className={cn(isCopied && "text-green-500")}
+        className={cn(isCopied && "text-success-primary")}
       />
     </Tooltip>
   );
diff --git a/apps/web/core/components/pages/header/favorite-control.tsx b/apps/web/core/components/pages/header/favorite-control.tsx
index 1a7b2338d..ea5ea44c8 100644
--- a/apps/web/core/components/pages/header/favorite-control.tsx
+++ b/apps/web/core/components/pages/header/favorite-control.tsx
@@ -37,7 +37,9 @@ export const PageFavoriteControl = observer(function PageFavoriteControl({ page
         pageOperations.toggleFavorite();
       }}
       aria-label={is_favorite ? "Remove favorite" : "Add to favorites"}
-      className={is_favorite ? "*:fill-(--color-label-yellow-icon) *:stroke-(--color-label-yellow-icon)" : ""}
+      className={
+        is_favorite ? "[&_svg]:fill-(--color-label-yellow-icon) [&_svg]:stroke-(--color-label-yellow-icon)" : ""
+      }
     />
   );
 });
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 169a5cb30..8e18e7620 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -119,7 +119,9 @@ export function PageForm(props: Props) {
               autoFocus
             />
             {isTitleLengthMoreThan255Character && (
-              <span className="text-11 text-red-500">Max length of the name should be less than 255 characters</span>
+              <span className="text-11 text-danger-primary">
+                Max length of the name should be less than 255 characters
+              </span>
             )}
           </div>
         </div>
diff --git a/apps/web/core/components/profile/form.tsx b/apps/web/core/components/profile/form.tsx
index c0dd3c0c3..2a25b24e9 100644
--- a/apps/web/core/components/profile/form.tsx
+++ b/apps/web/core/components/profile/form.tsx
@@ -257,7 +257,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
               <div className="flex flex-col gap-1">
                 <h4 className="text-13 font-medium text-secondary">
                   {t("first_name")}&nbsp;
-                  <span className="text-red-500">*</span>
+                  <span className="text-danger-primary">*</span>
                 </h4>
                 <Controller
                   control={control}
@@ -275,13 +275,13 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                       ref={ref}
                       hasError={Boolean(errors.first_name)}
                       placeholder="Enter your first name"
-                      className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
+                      className={`w-full rounded-md ${errors.first_name ? "border-danger-strong" : ""}`}
                       maxLength={24}
                       autoComplete="on"
                     />
                   )}
                 />
-                {errors.first_name && <span className="text-11 text-red-500">{errors.first_name.message}</span>}
+                {errors.first_name && <span className="text-11 text-danger-primary">{errors.first_name.message}</span>}
               </div>
               <div className="flex flex-col gap-1">
                 <h4 className="text-13 font-medium text-secondary">{t("last_name")}</h4>
@@ -308,7 +308,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
               <div className="flex flex-col gap-1">
                 <h4 className="text-13 font-medium text-secondary">
                   {t("display_name")}&nbsp;
-                  <span className="text-red-500">*</span>
+                  <span className="text-danger-primary">*</span>
                 </h4>
                 <Controller
                   control={control}
@@ -334,17 +334,19 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                       ref={ref}
                       hasError={Boolean(errors?.display_name)}
                       placeholder="Enter your display name"
-                      className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
+                      className={`w-full ${errors?.display_name ? "border-danger-strong" : ""}`}
                       maxLength={24}
                     />
                   )}
                 />
-                {errors?.display_name && <span className="text-11 text-red-500">{errors?.display_name?.message}</span>}
+                {errors?.display_name && (
+                  <span className="text-11 text-danger-primary">{errors?.display_name?.message}</span>
+                )}
               </div>
               <div className="flex flex-col gap-1">
                 <h4 className="text-13 font-medium text-secondary">
                   {t("auth.common.email.label")}&nbsp;
-                  <span className="text-red-500">*</span>
+                  <span className="text-danger-primary">*</span>
                 </h4>
                 <Controller
                   control={control}
@@ -362,7 +364,7 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
                       hasError={Boolean(errors.email)}
                       placeholder="Enter your email"
                       className={`w-full cursor-not-allowed rounded-md !bg-surface-2 ${
-                        errors.email ? "border-red-500" : ""
+                        errors.email ? "border-danger-strong" : ""
                       }`}
                       autoComplete="on"
                       disabled
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index aa332b631..69384344a 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -167,10 +167,10 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                                 <div
                                   className={`rounded-sm px-1 py-0.5 text-11 font-medium ${
                                     completedIssuePercentage <= 35
-                                      ? "bg-red-500/10 text-red-500"
+                                      ? "bg-danger-primary text-danger-primary"
                                       : completedIssuePercentage <= 70
                                         ? "bg-yellow-500/10 text-yellow-500"
-                                        : "bg-green-500/10 text-green-500"
+                                        : "bg-success-primary text-success-primary"
                                   }`}
                                 >
                                   {completedIssuePercentage}%
diff --git a/apps/web/core/components/project-states/options/delete.tsx b/apps/web/core/components/project-states/options/delete.tsx
index 27fab3f3f..dc554012b 100644
--- a/apps/web/core/components/project-states/options/delete.tsx
+++ b/apps/web/core/components/project-states/options/delete.tsx
@@ -95,7 +95,7 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
         type="button"
         className={cn(
           "flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center overflow-hidden transition-colors cursor-pointer focus:outline-none",
-          isDeleteDisabled ? "bg-surface-2 text-secondary" : "text-red-500 hover:bg-layer-1"
+          isDeleteDisabled ? "bg-surface-2 text-secondary" : "text-danger-primary hover:bg-layer-1"
         )}
         disabled={isDeleteDisabled}
         onClick={() => setIsDeleteModal(true)}
diff --git a/apps/web/core/components/project/confirm-project-member-remove.tsx b/apps/web/core/components/project/confirm-project-member-remove.tsx
index e38787d2d..da06e7623 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -50,8 +50,8 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
         <div className="sm:flex sm:items-start">
-          <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-            <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+          <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-primary sm:mx-0 sm:h-10 sm:w-10">
+            <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </div>
           <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
             <h3 className="text-16 font-medium leading-6 text-primary">
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
index a666d314b..126eff58b 100644
--- a/apps/web/core/components/project/create/common-attributes.tsx
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -78,7 +78,7 @@ function ProjectCommonAttributes(props: Props) {
             />
           )}
         />
-        <span className="text-11 text-red-500">{errors?.name?.message}</span>
+        <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
       </div>
       <div className="relative">
         <Controller
@@ -122,7 +122,7 @@ function ProjectCommonAttributes(props: Props) {
         >
           <Info className="absolute right-2 top-2.5 h-3 w-3 text-placeholder" />
         </Tooltip>
-        <span className="text-11 text-red-500">{errors?.identifier?.message}</span>
+        <span className="text-11 text-danger-primary">{errors?.identifier?.message}</span>
       </div>
       <div className="md:col-span-4">
         <Controller
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
index 23dce2bee..7d8541ea0 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -91,8 +91,8 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
         <div className="flex w-full items-center justify-start gap-6">
-          <span className="place-items-center rounded-full bg-red-500/20 p-4">
-            <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+          <span className="place-items-center rounded-full bg-danger-primary p-4">
+            <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </span>
           <span className="flex items-center justify-start">
             <h3 className="text-18 font-medium 2xl:text-20">Delete project</h3>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index 0fd4ad6b5..f1e1201f3 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -299,7 +299,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
               />
             )}
           />
-          <span className="text-11 text-red-500">{errors?.name?.message}</span>
+          <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-13">{t("description")}</h4>
@@ -363,7 +363,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                 <Info className="absolute right-2 top-2.5 h-4 w-4 text-placeholder" />
               </Tooltip>
             </div>
-            <span className="text-11 text-red-500">
+            <span className="text-11 text-danger-primary">
               <>{errors?.identifier?.message}</>
             </span>
           </div>
@@ -431,7 +431,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                 </>
               )}
             />
-            {errors.timezone && <span className="text-11 text-red-500">{errors.timezone.message}</span>}
+            {errors.timezone && <span className="text-11 text-danger-primary">{errors.timezone.message}</span>}
           </div>
         </div>
         <div className="flex items-center justify-between py-2">
diff --git a/apps/web/core/components/project/leave-project-modal.tsx b/apps/web/core/components/project/leave-project-modal.tsx
index d3de91c7f..19a6d22ee 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -110,8 +110,8 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
         <div className="flex w-full items-center justify-start gap-6">
-          <span className="place-items-center rounded-full bg-red-500/20 p-4">
-            <AlertTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+          <span className="place-items-center rounded-full bg-danger-primary p-4">
+            <AlertTriangleIcon className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </span>
           <span className="flex items-center justify-start">
             <h3 className="text-18 font-medium 2xl:text-20">Leave Project</h3>
diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx
index 8ab0dc010..a461a6779 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -149,7 +149,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
         } ${memberDetails?.member.display_name.toLowerCase()}`,
         content: (
           <div className="flex w-full items-center gap-2">
-            <div className="flex-shrink-0 pt-0.5">
+            <div className="shrink-0 pt-0.5">
               <Avatar name={memberDetails?.member.display_name} src={getFileURL(memberDetails?.member.avatar_url)} />
             </div>
             <div className="truncate">
@@ -195,7 +195,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
           <div className="mb-3 space-y-4">
             {fields.map((field, index) => (
               <div key={field.id} className="group mb-1 flex items-start justify-between gap-x-4 text-13 w-full">
-                <div className="flex flex-col gap-1 flex-grow w-full">
+                <div className="flex flex-col gap-1 grow w-full">
                   <Controller
                     control={control}
                     name={`members.${index}.member_id`}
@@ -239,11 +239,13 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                     }}
                   />
                   {errors.members && errors.members[index]?.member_id && (
-                    <span className="px-1 text-13 text-red-500">{errors.members[index]?.member_id?.message}</span>
+                    <span className="px-1 text-13 text-danger-primary">
+                      {errors.members[index]?.member_id?.message}
+                    </span>
                   )}
                 </div>
 
-                <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+                <div className="flex items-center justify-between gap-2 shrink-0">
                   <div className="flex flex-col gap-1">
                     <Controller
                       name={`members.${index}.role`}
@@ -275,7 +277,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                       )}
                     />
                     {errors.members && errors.members[index]?.role && (
-                      <span className="px-1 text-13 text-red-500">{errors.members[index]?.role?.message}</span>
+                      <span className="px-1 text-13 text-danger-primary">{errors.members[index]?.role?.message}</span>
                     )}
                   </div>
 
diff --git a/apps/web/core/components/project/settings/member-columns.tsx b/apps/web/core/components/project/settings/member-columns.tsx
index a7e90a612..d304a005f 100644
--- a/apps/web/core/components/project/settings/member-columns.tsx
+++ b/apps/web/core/components/project/settings/member-columns.tsx
@@ -71,7 +71,7 @@ export function NameColumn(props: NameProps) {
               >
                 <CustomMenu.MenuItem>
                   <div
-                    className="flex items-center gap-x-1 cursor-pointer text-red-600 font-medium"
+                    className="flex items-center gap-x-1 cursor-pointer text-danger-primary font-medium"
                     data-ph-element={MEMBER_TRACKER_ELEMENTS.PROJECT_MEMBER_TABLE_CONTEXT_MENU}
                     onClick={() => setRemoveMemberModal(rowData)}
                   >
@@ -167,7 +167,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
                   <span>{roleLabel}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-red-500" : "border-none"}`}
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
               className="rounded-md p-0 w-32"
               input
             >
diff --git a/apps/web/core/components/rich-filters/filter-item/container.tsx b/apps/web/core/components/rich-filters/filter-item/container.tsx
index d08f2b389..f9a4db55a 100644
--- a/apps/web/core/components/rich-filters/filter-item/container.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/container.tsx
@@ -54,7 +54,7 @@ export function FilterItemContainer(props: FilterItemContainerProps) {
         ref={itemRef}
         className={cn("flex h-7 items-stretch rounded-sm overflow-hidden border transition-all duration-200", {
           "border-subtle bg-surface-1": variant === "default",
-          "border-red-500 bg-surface-2": variant === "error",
+          "border-danger-strong bg-surface-2": variant === "error",
         })}
       >
         {children}
diff --git a/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx b/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
index 641515fc1..818f4565c 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
@@ -47,7 +47,7 @@ export const DateRangeFilterValueInput = observer(function DateRangeFilterValueI
       buttonVariant="transparent-with-text"
       buttonClassName={cn("rounded-none", {
         [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
-        "text-red-500": isIncomplete,
+        "text-danger-primary": isIncomplete,
         "hover:bg-surface-1": isDisabled,
       })}
       renderPlaceholder
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 0251c0c3e..10e34a3da 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -171,7 +171,7 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
                   />
                 )}
               />
-              <span className="text-11 text-red-500">{errors?.name?.message?.toString()}</span>
+              <span className="text-11 text-danger-primary">{errors?.name?.message?.toString()}</span>
             </div>
           </div>
           <div>
diff --git a/apps/web/core/components/views/view-list-item-action.tsx b/apps/web/core/components/views/view-list-item-action.tsx
index bc0955f12..259832c46 100644
--- a/apps/web/core/components/views/view-list-item-action.tsx
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -95,7 +95,7 @@ export const ViewListItemAction = observer(function ViewListItemAction(props: Pr
 
       {view?.anchor && publishLink ? (
         <div
-          className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
+          className="px-3 py-1.5 bg-success-primary text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
           onClick={() => setPublishModalOpen(true)}
         >
           <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
diff --git a/apps/web/core/components/web-hooks/form/form.tsx b/apps/web/core/components/web-hooks/form/form.tsx
index 6a2c9cdde..43fa78a24 100644
--- a/apps/web/core/components/web-hooks/form/form.tsx
+++ b/apps/web/core/components/web-hooks/form/form.tsx
@@ -80,7 +80,7 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
                 <WebhookInput value={value} onChange={onChange} hasError={Boolean(errors.url)} />
               )}
             />
-            {errors.url && <div className="text-11 text-red-500">{errors.url.message}</div>}
+            {errors.url && <div className="text-11 text-danger-primary">{errors.url.message}</div>}
           </div>
           {data && <WebhookToggle control={control} />}
           <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index fd1d2add7..25c8003cb 100644
--- a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -56,7 +56,7 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                       <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
diff --git a/apps/web/core/components/workspace/create-workspace-form.tsx b/apps/web/core/components/workspace/create-workspace-form.tsx
index 578b53d9d..8b380da8d 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -128,7 +128,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
         <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceName">
             {t("workspace_creation.form.name.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="ml-0.5 text-danger-primary">*</span>
           </label>
           <div className="flex flex-col gap-1">
             <Controller
@@ -162,13 +162,13 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                 />
               )}
             />
-            <span className="text-11 text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
         </div>
         <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceUrl">
             {t("workspace_creation.form.url.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="ml-0.5 text-danger-primary">*</span>
           </label>
           <div className="flex w-full items-center rounded-md border border-subtle px-3 bg-layer-2">
             <span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
@@ -201,17 +201,19 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
             />
           </div>
           {slugError && (
-            <p className="-mt-3 text-13 text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
           )}
           {invalidSlug && (
-            <p className="text-13 text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
         </div>
         <div className="flex flex-col gap-2 text-13">
           <span>
             {t("workspace_creation.form.organization_size.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="ml-0.5 text-danger-primary">*</span>
           </span>
           <div className="w-full">
             <Controller
@@ -241,7 +243,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
diff --git a/apps/web/core/components/workspace/delete-workspace-form.tsx b/apps/web/core/components/workspace/delete-workspace-form.tsx
index a184b09ef..52603caab 100644
--- a/apps/web/core/components/workspace/delete-workspace-form.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -93,7 +93,7 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
       <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
         <span
           className={cn(
-            "shrink-0 grid place-items-center rounded-full size-12 sm:size-10 bg-danger-subtle text-danger"
+            "shrink-0 grid place-items-center rounded-full size-12 sm:size-10 bg-danger-subtle text-danger-primary"
           )}
         >
           <AlertTriangle className="size-5 text-danger-primary" aria-hidden="true" />
diff --git a/apps/web/core/components/workspace/invite-modal/fields.tsx b/apps/web/core/components/workspace/invite-modal/fields.tsx
index 569bc2830..340fa549b 100644
--- a/apps/web/core/components/workspace/invite-modal/fields.tsx
+++ b/apps/web/core/components/workspace/invite-modal/fields.tsx
@@ -68,7 +68,7 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
                     className="w-full text-caption-sm-regular sm:text-body-xs-regular"
                   />
                   {errors.emails?.[index]?.email && (
-                    <span className="ml-1 text-caption-sm-regular text-danger">
+                    <span className="ml-1 text-caption-sm-regular text-danger-primary">
                       {errors.emails?.[index]?.email?.message}
                     </span>
                   )}
diff --git a/apps/web/core/components/workspace/settings/invitations-list-item.tsx b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
index 9e538b896..027cd954d 100644
--- a/apps/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -107,8 +107,8 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
       title: t("common.remove"),
       icon: Trash2,
       shouldRender: isAdmin,
-      className: "text-danger",
-      iconClassName: "text-danger",
+      className: "text-danger-primary",
+      iconClassName: "text-danger-primary",
     },
   ];
 
diff --git a/apps/web/core/components/workspace/settings/member-columns.tsx b/apps/web/core/components/workspace/settings/member-columns.tsx
index d7b584326..6a70bf923 100644
--- a/apps/web/core/components/workspace/settings/member-columns.tsx
+++ b/apps/web/core/components/workspace/settings/member-columns.tsx
@@ -173,7 +173,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
                   <span>{ROLE[rowData.role]}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-red-500" : "border-none"}`}
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
               className="rounded-md p-0 w-32"
               input
             >
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index 8c491671e..8475fe194 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -207,7 +207,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       <Menu.Item
                         as="button"
                         type="button"
-                        className="flex w-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-danger hover:bg-layer-transparent-hover"
+                        className="flex w-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-danger-primary hover:bg-layer-transparent-hover"
                         onClick={handleSignOut}
                       >
                         <LogOut className="size-4 flex-shrink-0" />
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index f0665ee77..8dbdb5104 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -98,7 +98,7 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
                 />
               )}
             />
-            <span className="text-11 text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
diff --git a/packages/constants/src/cycle.ts b/packages/constants/src/cycle.ts
index 4f8535195..046fb8a85 100644
--- a/packages/constants/src/cycle.ts
+++ b/packages/constants/src/cycle.ts
@@ -28,7 +28,7 @@ export const CYCLE_STATUS: {
     value: "completed",
     i18n_title: "project_cycles.status.completed",
     color: "#16A34A",
-    textColor: "text-green-600",
+    textColor: "text-success-primary",
     bgColor: "bg-green-50",
   },
   {
diff --git a/packages/constants/src/dashboard.ts b/packages/constants/src/dashboard.ts
index f79bb7c41..f35fa6175 100644
--- a/packages/constants/src/dashboard.ts
+++ b/packages/constants/src/dashboard.ts
@@ -44,8 +44,8 @@ export const DURATION_FILTER_OPTIONS: {
 // random background colors for project cards
 export const PROJECT_BACKGROUND_COLORS = [
   "bg-gray-500/20",
-  "bg-green-500/20",
-  "bg-red-500/20",
+  "bg-success-primary",
+  "bg-danger-primary",
   "bg-orange-500/20",
   "bg-blue-500/20",
   "bg-yellow-500/20",
diff --git a/packages/constants/src/module.ts b/packages/constants/src/module.ts
index 833a5cec5..48c2aa761 100644
--- a/packages/constants/src/module.ts
+++ b/packages/constants/src/module.ts
@@ -51,14 +51,14 @@ export const MODULE_STATUS: {
     i18n_label: "project_modules.status.completed",
     value: "completed",
     color: MODULE_STATUS_COLORS.completed,
-    textColor: "text-green-600",
+    textColor: "text-success-primary",
     bgColor: "bg-green-100",
   },
   {
     i18n_label: "project_modules.status.cancelled",
     value: "cancelled",
     color: MODULE_STATUS_COLORS.cancelled,
-    textColor: "text-red-500",
+    textColor: "text-danger-primary",
     bgColor: "bg-red-50",
   },
 ];
diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
index 57d50c31a..eea52639e 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
@@ -66,7 +66,7 @@ export function BubbleMenuLinkSelector(props: Props) {
       <div className="w-60 mt-1 rounded-md bg-surface-1 shadow-raised-200">
         <div
           className={cn("flex rounded-sm  border-[0.5px] border-strong transition-colors", {
-            "border-red-500": error,
+            "border-danger-strong": error,
           })}
         >
           <input
@@ -89,7 +89,7 @@ export function BubbleMenuLinkSelector(props: Props) {
           {editor.getAttributes("link").href ? (
             <button
               type="button"
-              className="grid place-items-center rounded-xs p-1 text-red-500 hover:bg-red-500/20 transition-all"
+              className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-primary transition-all"
               onClick={(e) => {
                 unsetLinkEditor(editor);
                 e.stopPropagation();
@@ -112,7 +112,7 @@ export function BubbleMenuLinkSelector(props: Props) {
           )}
         </div>
         {error && (
-          <p className="text-11 text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
+          <p className="text-11 text-danger-primary my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
             Please enter a valid URL
           </p>
         )}
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index 2d4cbe95d..44fd4026a 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -40,13 +40,13 @@ export function CodeBlockComponent({ node }: Props) {
           className={cn(
             "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
             {
-              "bg-green-500/30 hover:bg-green-500/30 active:bg-green-500/30": copied,
+              "bg-success-primary hover:bg-success-primary active:bg-success-primary": copied,
             }
           )}
           onClick={copyToClipboard}
         >
           {copied ? (
-            <CheckIcon className="h-3 w-3 text-green-500" strokeWidth={3} />
+            <CheckIcon className="h-3 w-3 text-success-primary" strokeWidth={3} />
           ) : (
             <CopyIcon className="h-3 w-3 text-tertiary group-hover/button:text-primary" />
           )}
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
index e35dc4b45..4632c009e 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -34,7 +34,7 @@ export function ImageAlignmentAction(props: Props) {
       <Tooltip disabled={isTouchDevice} tooltipContent="Align">
         <button
           type="button"
-          className="h-full flex items-center gap-1 text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
+          className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors"
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
           {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
@@ -42,12 +42,12 @@ export function ImageAlignmentAction(props: Props) {
         </button>
       </Tooltip>
       {isDropdownOpen && (
-        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-alpha-black-1000 flex items-center gap-2 px-2 rounded-sm">
+        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded-sm">
           {IMAGE_ALIGNMENT_OPTIONS.map((option) => (
             <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
               <button
                 type="button"
-                className="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
+                className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
                 onClick={() => {
                   handleChange(option.value);
                   setIsDropdownOpen(false);
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
index d9a3eff97..fa0952340 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
@@ -14,7 +14,7 @@ export function ImageDownloadAction(props: Props) {
       <button
         type="button"
         onClick={() => window.open(src, "_blank")}
-        className="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
+        className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
         aria-label="Download image"
       >
         <Download className="size-3" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index 1f693c4b2..8588b3e20 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -193,14 +193,11 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
 
   return (
     <div
-      className={cn(
-        "fixed inset-0 size-full z-50 bg-alpha-black-1100 opacity-0 pointer-events-none transition-opacity",
-        {
-          "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
-          "cursor-default": !isDragging,
-          "cursor-grabbing": isDragging,
-        }
-      )}
+      className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
+        "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
+        "cursor-default": !isDragging,
+        "cursor-grabbing": isDragging,
+      })}
       role="dialog"
       aria-modal="true"
       aria-label="Fullscreen image viewer"
@@ -216,7 +213,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
           className="absolute top-10 right-10 size-8 grid place-items-center"
           aria-label="Close image viewer"
         >
-          <CloseIcon className="size-8 text-alpha-white-800 hover:text-alpha-white-1200 transition-colors" />
+          <CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
         </button>
         <img
           ref={setImageRef}
@@ -234,7 +231,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
           }}
           onMouseDown={handleMouseDown}
         />
-        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-alpha-black-1200">
+        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-black">
           <div className="flex items-center">
             <button
               type="button"
@@ -245,13 +242,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("decrease");
               }}
-              className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
+              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
               disabled={magnification <= MIN_ZOOM}
               aria-label="Zoom out"
             >
               <Minus className="size-4" />
             </button>
-            <span className="text-13 w-12 text-center text-alpha-white-1200">{Math.round(100 * magnification)}%</span>
+            <span className="text-13 w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
             <button
               type="button"
               onClick={(e) => {
@@ -261,7 +258,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("increase");
               }}
-              className="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
+              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
               disabled={magnification >= MAX_ZOOM}
               aria-label="Zoom in"
             >
@@ -272,7 +269,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
             <button
               type="button"
               onClick={() => window.open(downloadSrc, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
+              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
               aria-label="Download image"
             >
               <Download className="size-4" />
@@ -282,7 +279,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
             <button
               type="button"
               onClick={() => window.open(src, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
+              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
               aria-label="Open image in new tab"
             >
               <ExternalLink className="size-4" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index 0edf9f858..0f567a8e6 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -31,7 +31,7 @@ export function ImageToolbarRoot(props: Props) {
     <>
       <div
         className={cn(
-          "absolute top-1 right-1 h-7 z-20 bg-alpha-black-1000 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
+          "absolute top-1 right-1 h-7 z-20 bg-black/80 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
           {
             "opacity-100 pointer-events-auto": shouldShowToolbar,
           }
diff --git a/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
index 5a5aea581..03979770a 100644
--- a/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
@@ -53,7 +53,7 @@ export function ImageUploadStatus(props: Props) {
   if (uploadStatus === undefined) return null;
 
   return (
-    <div className="absolute top-1 right-1 z-20 bg-alpha-black-800 rounded-sm text-11 font-medium w-10 text-center">
+    <div className="absolute top-1 right-1 z-20 bg-black/60 rounded-sm text-11 font-medium w-10 text-center">
       {displayStatus}%
     </div>
   );
diff --git a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index 273121944..969945957 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -212,10 +212,10 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
           "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
           "text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
             selected && editor.isEditable && !isErrorState,
-          "text-red-500 cursor-default": isErrorState,
-          "hover:text-red-500 hover:bg-red-500/10": isErrorState && editor.isEditable,
-          "bg-red-500/10": isErrorState && selected,
-          "hover:bg-red-500/20": isErrorState && selected && editor.isEditable,
+          "text-danger-primary cursor-default": isErrorState,
+          "hover:text-danger-primary hover:bg-danger-primary": isErrorState && editor.isEditable,
+          "bg-danger-primary": isErrorState && selected,
+          "hover:bg-danger-primary": isErrorState && selected && editor.isEditable,
         }
       )}
       style={borderColor ? { borderColor } : undefined}
@@ -236,9 +236,9 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
           type="button"
           onClick={handleRetryClick}
           className={cn(
-            "flex items-center gap-1 px-2 py-1 font-medium text-red-500 rounded-md transition-all duration-200 ease-in-out hover:bg-red-500/20 hover:text-red-500",
+            "flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-primary hover:text-danger-primary",
             {
-              "hover:bg-red-500/20": selected,
+              "hover:bg-danger-primary": selected,
             }
           )}
           title="Retry duplication"
diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
index 89ea5fa8c..b2c17d527 100644
--- a/packages/propel/src/animated-counter/animated-counter.stories.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.stories.tsx
@@ -26,7 +26,7 @@ export const Default: Story = {
       <div className="space-y-6 p-4">
         <div className="flex items-center justify-center gap-6">
           <button
-            className="px-4 py-2 bg-red-500 text-on-color font-medium rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 transition-colors shadow-md"
+            className="px-4 py-2 bg-red-500 text-on-color font-medium rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-danger-strong focus:ring-offset-2 transition-colors shadow-md"
             onClick={() => setCount((prev) => Math.max(0, prev - 1))}
           >
             -1
@@ -35,7 +35,7 @@ export const Default: Story = {
             <AnimatedCounter {...args} count={count} />
           </div>
           <button
-            className="px-4 py-2 bg-green-500 text-on-color font-medium rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors shadow-md"
+            className="px-4 py-2 bg-green-500 text-on-color font-medium rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-success-strong focus:ring-offset-2 transition-colors shadow-md"
             onClick={() => setCount((prev) => prev + 1)}
           >
             +1
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
index 2947fdbe9..bb43d5a07 100644
--- a/packages/propel/src/avatar/avatar.tsx
+++ b/packages/propel/src/avatar/avatar.tsx
@@ -107,8 +107,8 @@ export function Avatar(props: Props) {
         <AvatarPrimitive.Fallback
           className={cn(sizeInfo.fontSize, "grid h-full w-full place-items-center", getBorderRadius(shape), className)}
           style={{
-            backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
-            color: fallbackTextColor ?? "#ffffff",
+            backgroundColor: fallbackBackgroundColor ?? "var(--background-color-accent-primary)",
+            color: fallbackTextColor ?? "var(--text-color-on-color)",
           }}
         >
           {fallbackLetter}
diff --git a/packages/propel/src/badge/helper.tsx b/packages/propel/src/badge/helper.tsx
index 527b53edd..6e45d2822 100644
--- a/packages/propel/src/badge/helper.tsx
+++ b/packages/propel/src/badge/helper.tsx
@@ -6,9 +6,9 @@ export const badgeVariants = cva("inline-flex items-center justify-center gap-1
     variant: {
       neutral: "bg-layer-3 text-tertiary",
       brand: "bg-accent-subtle-hover text-accent-primary",
-      warning: "bg-warning-subtle text-warning",
-      success: "bg-success-subtle-1 text-success",
-      danger: "bg-danger-subtle text-danger",
+      warning: "bg-warning-subtle text-warning-primary",
+      success: "bg-success-subtle-1 text-success-primary",
+      danger: "bg-danger-subtle text-danger-primary",
     },
     size: {
       sm: "h-4 px-1 text-caption-sm-medium rounded-sm",
diff --git a/packages/propel/src/banner/banner.stories.tsx b/packages/propel/src/banner/banner.stories.tsx
index b53de818f..9270d6b2b 100644
--- a/packages/propel/src/banner/banner.stories.tsx
+++ b/packages/propel/src/banner/banner.stories.tsx
@@ -44,7 +44,7 @@ function SuccessIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="text-green-600"
+      className="text-success-primary"
     >
       <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
       <polyline points="22 4 12 14.01 9 11.01" />
@@ -63,7 +63,7 @@ function ErrorIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="text-red-600"
+      className="text-danger-primary"
     >
       <circle cx="12" cy="12" r="10" />
       <line x1="15" y1="9" x2="9" y2="15" />
@@ -116,7 +116,7 @@ function CloseButton({ onClick }: { onClick?: () => void }) {
   return (
     <button
       onClick={onClick}
-      className="rounded-sm p-1 hover:bg-alpha-black-100 dark:hover:bg-alpha-white-100 transition-colors"
+      className="rounded-sm p-1 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
       aria-label="Dismiss"
     >
       <svg
diff --git a/packages/propel/src/banner/helper.tsx b/packages/propel/src/banner/helper.tsx
index 4c749797b..19041c13c 100644
--- a/packages/propel/src/banner/helper.tsx
+++ b/packages/propel/src/banner/helper.tsx
@@ -14,8 +14,8 @@ export const bannerSizeStyling = {
 // TODO: update this with new color once its implemented
 // Banner variant styling
 export const bannerStyling: IBannerStyling = {
-  success: "bg-green-500/10",
-  error: "bg-red-500/10",
+  success: "bg-success-primary",
+  error: "bg-danger-primary",
   warning: "bg-yellow-500/10",
   info: "bg-blue-500/10",
 };
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
index 71a91aa0f..20e60093a 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -11,7 +11,7 @@ export const buttonVariants = cva(
         "error-fill":
           "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
         "error-outline":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-primary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
         secondary:
           "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active  disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
         tertiary:
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 2435d8318..2f89f368a 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -174,7 +174,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
           {showTooltip && (
             <Tooltip
               cursor={{
-                fill: "var(--color-alpha-black-300)",
+                fill: "var(--alpha-black-300)",
                 className: "bg-layer-1 cursor-pointer",
               }}
               wrapperStyle={{
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
index 8281a598b..02abf334e 100644
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -80,8 +80,8 @@ export const WithIcons: Story = {
               Share
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <Trash className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -126,8 +126,8 @@ export const WithSubmenus: Story = {
             </ContextMenu.Submenu>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <Trash className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -165,8 +165,8 @@ export const DisabledItems: Story = {
               Share (Disabled)
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <Trash className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -212,8 +212,8 @@ export const OnFileCard: Story = {
               Archive
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <Trash className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -327,8 +327,8 @@ export const NestedSubmenus: Story = {
             </ContextMenu.Submenu>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <Trash className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -365,8 +365,8 @@ export const WithKeyboardShortcuts: Story = {
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Trash className="mr-2 h-4 w-4 text-red-500" />
-              <span className="text-red-500">Delete</span>
+              <Trash className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
               <span className="ml-auto text-11 text-placeholder">⌘⌫</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
diff --git a/packages/propel/src/design-system/design-system-philosophy.stories.tsx b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
index be7a9b3f9..5dacdb1aa 100644
--- a/packages/propel/src/design-system/design-system-philosophy.stories.tsx
+++ b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
@@ -42,7 +42,7 @@ const Info: React.FC<{ title: string; children?: React.ReactNode; tone?: "info"
   tone = "info",
 }) => (
   <div
-    className={`mb-4 rounded-md border ${tone === "warn" ? "border-red-500 bg-red-50 p-4" : "border-subtle bg-layer-1 p-4"}`}
+    className={`mb-4 rounded-md border ${tone === "warn" ? "border-danger-strong bg-red-50 p-4" : "border-subtle bg-layer-1 p-4"}`}
   >
     <h3 className={`text-primary mb-2 text-16 font-semibold`}>{title}</h3>
     <div className="text-secondary text-13">{children}</div>
@@ -376,7 +376,7 @@ export const CommonMistakes: Story = {
       </Info>
 
       <div className="space-y-6">
-        <div className="border-2 border-red-500 rounded-md p-4">
+        <div className="border-2 border-danger-strong rounded-md p-4">
           <h4 className="text-primary mb-2 font-semibold">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
           <Surface>
             <p className="text-secondary mb-2 text-13">Surface 1</p>
@@ -389,7 +389,7 @@ export const CommonMistakes: Story = {
           </p>
         </div>
 
-        <div className="border-2 border-red-500 rounded-md p-4">
+        <div className="border-2 border-danger-strong rounded-md p-4">
           <h4 className="text-primary mb-2 font-semibold">❌ Mistake 2: Wrong Layer-Surface Association</h4>
           <Surface>
             <p className="text-secondary mb-2 text-13">Surface 1</p>
@@ -403,7 +403,7 @@ export const CommonMistakes: Story = {
           </p>
         </div>
 
-        <div className="border-2 border-red-500 rounded-md p-4">
+        <div className="border-2 border-danger-strong rounded-md p-4">
           <h4 className="text-primary mb-2 font-semibold">❌ Mistake 3: Mismatched Hover State</h4>
           <Surface>
             <div className="bg-layer-1 hover:bg-layer-2-hover rounded-md p-4 transition-colors">
@@ -413,7 +413,7 @@ export const CommonMistakes: Story = {
           <p className="text-tertiary mt-2 text-11">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
         </div>
 
-        <div className="border-2 border-red-500 rounded-md p-4">
+        <div className="border-2 border-danger-strong rounded-md p-4">
           <h4 className="text-primary mb-2 font-semibold">❌ Mistake 4: Canvas for Pages</h4>
           <div className="bg-canvas rounded-md p-4">
             <p className="text-secondary text-13">Using bg-canvas for a page or component - WRONG!</p>
diff --git a/packages/propel/src/icon-button/helper.tsx b/packages/propel/src/icon-button/helper.tsx
index e012e1f25..d7a587640 100644
--- a/packages/propel/src/icon-button/helper.tsx
+++ b/packages/propel/src/icon-button/helper.tsx
@@ -12,7 +12,7 @@ export const iconButtonVariants = cva(
         "error-fill":
           "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
         "error-outline":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-primary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
         secondary:
           "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
         tertiary:
diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx
index b7b655c1f..b1d36ad7e 100644
--- a/packages/propel/src/input/input.tsx
+++ b/packages/propel/src/input/input.tsx
@@ -35,7 +35,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
           "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
             mode === "transparent",
           "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
-          "border-red-500": hasError,
+          "border-danger-strong": hasError,
           "px-1.5 py-1": inputSize === "xs",
           "px-3 py-2": inputSize === "sm",
           "p-3": inputSize === "md",
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
index c23d01ad1..94109698b 100644
--- a/packages/propel/src/menu/menu.stories.tsx
+++ b/packages/propel/src/menu/menu.stories.tsx
@@ -228,7 +228,7 @@ export const ComplexMenu: Story = {
         </Menu.SubMenu>
         <div className="my-1 border-t border-gray-200" />
         <Menu.MenuItem onClick={() => alert("Logout")}>
-          <div className="flex items-center gap-2 text-red-500">
+          <div className="flex items-center gap-2 text-danger-primary">
             <LogOut className="h-4 w-4" />
             <span>Logout</span>
           </div>
diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx
index 262e4f141..4362c622c 100644
--- a/packages/propel/src/pill/pill.tsx
+++ b/packages/propel/src/pill/pill.tsx
@@ -44,9 +44,9 @@ export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
 const pillVariants = {
   [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
   [EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
-  [EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
+  [EPillVariant.SUCCESS]: "bg-green-50 text-success-primary border border-success-subtle",
   [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
-  [EPillVariant.ERROR]: "bg-red-50 text-red-700 border border-red-200",
+  [EPillVariant.ERROR]: "bg-red-50 text-danger-primary border border-danger-subtle",
   [EPillVariant.INFO]: "bg-blue-50 text-blue-700 border border-blue-200",
 };
 
diff --git a/packages/propel/src/portal/modal-portal.tsx b/packages/propel/src/portal/modal-portal.tsx
index 8aa9663d9..284b0a26a 100644
--- a/packages/propel/src/portal/modal-portal.tsx
+++ b/packages/propel/src/portal/modal-portal.tsx
@@ -95,7 +95,7 @@ export function ModalPortal({
     >
       {showOverlay && (
         <div
-          className={cn("absolute inset-0 bg-alpha-black-700 transition-opacity duration-300", overlayClassName)}
+          className={cn("absolute inset-0 bg-black/50 transition-colors duration-300", overlayClassName)}
           onClick={handleOverlayClick}
           aria-hidden="true"
         />
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
index 4714a1283..3cb1bab57 100644
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -283,7 +283,7 @@ export const DataTable: Story = {
                 <td className="px-4 py-2">user{i + 1}@example.com</td>
                 <td className="px-4 py-2">
                   <span
-                    className={`px-2 py-1 rounded-sm text-11 ${i % 3 === 0 ? "bg-green-500/20 text-green-500" : "bg-gray-500/20 text-gray-500"}`}
+                    className={`px-2 py-1 rounded-sm text-11 ${i % 3 === 0 ? "bg-success-primary text-success-primary" : "bg-gray-500/20 text-gray-500"}`}
                   >
                     {i % 3 === 0 ? "Active" : "Inactive"}
                   </span>
diff --git a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
index e32cfacff..c0df9621e 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
@@ -49,7 +49,7 @@ export const ExtraLarge: Story = {
 
 export const CustomColor: Story = {
   args: {
-    className: "text-green-500",
+    className: "text-success-primary",
   },
 };
 
@@ -91,11 +91,11 @@ export const ColorVariations: Story = {
           <p className="mt-2 text-11 text-gray-600">Blue</p>
         </div>
         <div className="text-center">
-          <CircularBarSpinner className="text-green-500" height="24px" width="24px" />
+          <CircularBarSpinner className="text-success-primary" height="24px" width="24px" />
           <p className="mt-2 text-11 text-gray-600">Green</p>
         </div>
         <div className="text-center">
-          <CircularBarSpinner className="text-red-500" height="24px" width="24px" />
+          <CircularBarSpinner className="text-danger-primary" height="24px" width="24px" />
           <p className="mt-2 text-11 text-gray-600">Red</p>
         </div>
         <div className="text-center">
diff --git a/packages/propel/src/spinners/circular-spinner.stories.tsx b/packages/propel/src/spinners/circular-spinner.stories.tsx
index 42d88dc5b..ca1aabe94 100644
--- a/packages/propel/src/spinners/circular-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-spinner.stories.tsx
@@ -91,11 +91,11 @@ export const ColorVariations: Story = {
           <p className="mt-2 text-11 text-gray-600">Blue</p>
         </div>
         <div className="text-center">
-          <Spinner className="text-green-500" />
+          <Spinner className="text-success-primary" />
           <p className="mt-2 text-11 text-gray-600">Green</p>
         </div>
         <div className="text-center">
-          <Spinner className="text-red-500" />
+          <Spinner className="text-danger-primary" />
           <p className="mt-2 text-11 text-gray-600">Red</p>
         </div>
         <div className="text-center">
diff --git a/packages/propel/src/switch/switch.stories.tsx b/packages/propel/src/switch/switch.stories.tsx
index fd913b3e7..5c1ce7df0 100644
--- a/packages/propel/src/switch/switch.stories.tsx
+++ b/packages/propel/src/switch/switch.stories.tsx
@@ -185,7 +185,7 @@ export const Interactive: Story = {
           <p className="text-13 text-gray-700">
             Status: <span className="font-semibold">{enabled ? "Enabled" : "Disabled"}</span>
           </p>
-          {enabled && <p className="mt-2 text-11 text-green-600">Feature is now active and ready to use!</p>}
+          {enabled && <p className="mt-2 text-11 text-success-primary">Feature is now active and ready to use!</p>}
         </div>
       </div>
     );
diff --git a/packages/propel/src/table/table.stories.tsx b/packages/propel/src/table/table.stories.tsx
index 4e0c4026d..1e2a1519a 100644
--- a/packages/propel/src/table/table.stories.tsx
+++ b/packages/propel/src/table/table.stories.tsx
@@ -139,7 +139,7 @@ export const WithActions: Story = {
             <TableCell>Admin</TableCell>
             <TableCell className="text-right">
               <button className="mr-2 text-blue-500 hover:underline">Edit</button>
-              <button className="text-red-500 hover:underline">Delete</button>
+              <button className="text-danger-primary hover:underline">Delete</button>
             </TableCell>
           </TableRow>
           <TableRow>
@@ -148,7 +148,7 @@ export const WithActions: Story = {
             <TableCell>User</TableCell>
             <TableCell className="text-right">
               <button className="mr-2 text-blue-500 hover:underline">Edit</button>
-              <button className="text-red-500 hover:underline">Delete</button>
+              <button className="text-danger-primary hover:underline">Delete</button>
             </TableCell>
           </TableRow>
         </TableBody>
@@ -173,10 +173,10 @@ export const WithBadges: Story = {
           <TableRow>
             <TableCell>Website Redesign</TableCell>
             <TableCell>
-              <span className="rounded-full bg-green-100 px-2 py-1 text-11 text-green-800">In Progress</span>
+              <span className="rounded-full bg-green-100 px-2 py-1 text-11 text-success-primary">In Progress</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-red-100 px-2 py-1 text-11 text-red-800">High</span>
+              <span className="rounded-full bg-red-100 px-2 py-1 text-11 text-danger-primary">High</span>
             </TableCell>
             <TableCell>John Doe</TableCell>
           </TableRow>
@@ -196,7 +196,7 @@ export const WithBadges: Story = {
               <span className="rounded-full bg-gray-100 px-2 py-1 text-11 text-gray-800">Completed</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-green-100 px-2 py-1 text-11 text-green-800">Low</span>
+              <span className="rounded-full bg-green-100 px-2 py-1 text-11 text-success-primary">Low</span>
             </TableCell>
             <TableCell>Bob Wilson</TableCell>
           </TableRow>
@@ -297,7 +297,7 @@ export const LargeDataset: Story = {
               <TableCell>
                 <span
                   className={`rounded-full px-2 py-1 text-11 ${
-                    i % 2 === 0 ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                    i % 2 === 0 ? "bg-green-100 text-success-primary" : "bg-gray-100 text-gray-800"
                   }`}
                 >
                   {i % 2 === 0 ? "Active" : "Inactive"}
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
index 10f40bfac..cc0fca6bc 100644
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -252,7 +252,7 @@ export const DynamicTabs: Story = {
                       e.stopPropagation();
                       removeTab(tab.value);
                     }}
-                    className="ml-2 hover:text-red-500"
+                    className="ml-2 hover:text-danger-primary"
                   >
                     ×
                   </button>
diff --git a/packages/propel/src/tooltip/tooltip.stories.tsx b/packages/propel/src/tooltip/tooltip.stories.tsx
index 1ba3cc709..b681afd71 100644
--- a/packages/propel/src/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/tooltip/tooltip.stories.tsx
@@ -237,7 +237,7 @@ export const IconButtons: Story = {
         <Tooltip tooltipContent="Delete" position="top">
           <button className="rounded-sm p-2 hover:bg-gray-100">
             <svg
-              className="h-5 w-5 text-red-600"
+              className="h-5 w-5 text-danger-primary"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css
index a23cbbbd9..bab1f015b 100644
--- a/packages/tailwind-config/variables.css
+++ b/packages/tailwind-config/variables.css
@@ -2,45 +2,657 @@
 @custom-variant dark-high-contrast (&:where([data-theme="dark-contrast"], [data-theme="dark-contrast"] *));
 @custom-variant light-high-contrast (&:where([data-theme="light-contrast"], [data-theme="light-contrast"] *));
 
+@layer base {
+  :root,
+  :host {
+    /* ---------- Alpha colors ---------- */
+    /* White alpha */
+    --alpha-white-0: oklch(1 0 0 / 0%);
+    --alpha-white-100: oklch(1 0 0 / 5%);
+    --alpha-white-200: oklch(1 0 0 / 10%);
+    --alpha-white-300: oklch(1 0 0 / 15%);
+    --alpha-white-400: oklch(1 0 0 / 20%);
+    --alpha-white-500: oklch(1 0 0 / 30%);
+    --alpha-white-600: oklch(1 0 0 / 40%);
+    --alpha-white-700: oklch(1 0 0 / 50%);
+    --alpha-white-800: oklch(1 0 0 / 60%);
+    --alpha-white-900: oklch(1 0 0 / 70%);
+    --alpha-white-1000: oklch(1 0 0 / 80%);
+    --alpha-white-1100: oklch(1 0 0 / 90%);
+    --alpha-white-1200: oklch(1 0 0 / 95%);
+    /* Black alpha */
+    --alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
+    --alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
+    --alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
+    --alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%);
+    --alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%);
+    --alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
+    --alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%);
+    --alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
+    --alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%);
+    --alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%);
+    --alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%);
+    --alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
+    --alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
+    /* --------- Extended colors ---------- */
+    /* Purple */
+    --extended-color-purple-25: oklch(0.981 0.0054 297.73);
+    --extended-color-purple-50: oklch(0.9421 0.0162 293.74);
+    --extended-color-purple-100: oklch(0.8808 0.0343 293.03);
+    --extended-color-purple-200: oklch(0.779 0.0639 293.01);
+    --extended-color-purple-300: oklch(0.6978 0.0888 291.44);
+    --extended-color-purple-400: oklch(0.6139 0.1164 290.19);
+    --extended-color-purple-500: oklch(0.5527 0.1361 288.8);
+    --extended-color-purple-600: oklch(0.4895 0.157 286.65);
+    --extended-color-purple-700: oklch(0.42 0.1303 287.25);
+    --extended-color-purple-800: oklch(0.3617 0.1077 287.53);
+    --extended-color-purple-900: oklch(0.2861 0.0795 287.41);
+    --extended-color-purple-950: oklch(0.219 0.0552 288.93);
+    /* Orange */
+    --extended-color-orange-25: oklch(0.9856 0.0084 56.32);
+    --extended-color-orange-50: oklch(0.964 0.0219 58.79);
+    --extended-color-orange-100: oklch(0.9152 0.0522 56.77);
+    --extended-color-orange-200: oklch(0.8504 0.097 56.87);
+    --extended-color-orange-300: oklch(0.801 0.1323 55.27);
+    --extended-color-orange-400: oklch(0.7563 0.1644 52.56);
+    --extended-color-orange-500: oklch(0.7177 0.1905 47.86);
+    --extended-color-orange-600: oklch(0.6601 0.1884 45.09);
+    --extended-color-orange-700: oklch(0.5737 0.162 45.72);
+    --extended-color-orange-800: oklch(0.5059 0.141467 46.3267);
+    --extended-color-orange-900: oklch(0.3897 0.105571 48.3415);
+    --extended-color-orange-950: oklch(0.2896 0.0746 51.86);
+    /* Crimson */
+    --extended-color-crimson-25: oklch(0.9805 0.0066 28.83);
+    --extended-color-crimson-50: oklch(0.9503 0.0186 21.57);
+    --extended-color-crimson-100: oklch(0.8847 0.0455 23.1);
+    --extended-color-crimson-200: oklch(0.791 0.0874 23.59);
+    --extended-color-crimson-300: oklch(0.72 0.124 24.83);
+    --extended-color-crimson-400: oklch(0.6556 0.1604 26.47);
+    --extended-color-crimson-500: oklch(0.5954 0.1956 28.51);
+    --extended-color-crimson-600: oklch(0.5284 0.185 28.96);
+    --extended-color-crimson-700: oklch(0.4754 0.1647 28.98);
+    --extended-color-crimson-800: oklch(0.4209 0.1438 29.01);
+    --extended-color-crimson-900: oklch(0.3249 0.106 28.39);
+    --extended-color-crimson-950: oklch(0.2457 0.0742 27.56);
+    /* Emerald */
+    --extended-color-emerald-25: oklch(0.9884 0.0082 157.1);
+    --extended-color-emerald-50: oklch(0.9563 0.0256 154.47);
+    --extended-color-emerald-100: oklch(0.9153 0.0531 153.59);
+    --extended-color-emerald-200: oklch(0.8679 0.0829 153.02);
+    --extended-color-emerald-300: oklch(0.8221 0.1121 152.16);
+    --extended-color-emerald-400: oklch(0.7785 0.1398 151.07);
+    --extended-color-emerald-500: oklch(0.7401 0.166 149.61);
+    --extended-color-emerald-600: oklch(0.6567 0.1599 148.98);
+    --extended-color-emerald-700: oklch(0.5883 0.1413 149.06);
+    --extended-color-emerald-800: oklch(0.4965 0.1172 149.18);
+    --extended-color-emerald-900: oklch(0.4003 0.0918 149.37);
+    --extended-color-emerald-950: oklch(0.2982 0.0631 150.55);
+    /* Pink */
+    --extended-color-pink-25: oklch(0.9828 0.005 345.28);
+    --extended-color-pink-50: oklch(0.9394 0.0201 340.71);
+    --extended-color-pink-100: oklch(0.8759 0.0418 339.71);
+    --extended-color-pink-200: oklch(0.805 0.0664 341.18);
+    --extended-color-pink-300: oklch(0.736 0.0938 342.16);
+    --extended-color-pink-400: oklch(0.6673 0.1206 342.89);
+    --extended-color-pink-500: oklch(0.6185 0.1388 344.06);
+    --extended-color-pink-600: oklch(0.5704 0.1574 345.25);
+    --extended-color-pink-700: oklch(0.4947 0.1333 344.88);
+    --extended-color-pink-800: oklch(0.4162 0.1108 344.66);
+    --extended-color-pink-900: oklch(0.326 0.0807 344.57);
+    --extended-color-pink-950: oklch(0.2474 0.0553 344.95);
+    /* Yellow */
+    --extended-color-yellow-25: oklch(0.989 0.0073 80.72);
+    --extended-color-yellow-50: oklch(0.9631 0.0268 85.66);
+    --extended-color-yellow-100: oklch(0.9297 0.0545 86.15);
+    --extended-color-yellow-200: oklch(0.8893 0.0843 85.3);
+    --extended-color-yellow-300: oklch(0.8522 0.1121 85.14);
+    --extended-color-yellow-400: oklch(0.8167 0.1342 83.9);
+    --extended-color-yellow-500: oklch(0.79 0.1466 82.04);
+    --extended-color-yellow-600: oklch(0.7399 0.1487 79.36);
+    --extended-color-yellow-700: oklch(0.683 0.1365 79.84);
+    --extended-color-yellow-800: oklch(0.5522 0.1093 80.44);
+    --extended-color-yellow-900: oklch(0.425 0.0824 81.46);
+    --extended-color-yellow-950: oklch(0.3142 0.0586 82.21);
+    /* Indigo */
+    --extended-color-indigo-25: oklch(0.9813 0.0074 260.73);
+    --extended-color-indigo-50: oklch(0.9415 0.022 263.19);
+    --extended-color-indigo-100: oklch(0.8828 0.045 263.07);
+    --extended-color-indigo-200: oklch(0.7852 0.086 263.89);
+    --extended-color-indigo-300: oklch(0.7066 0.121 263.57);
+    --extended-color-indigo-400: oklch(0.6322 0.1556 262.59);
+    --extended-color-indigo-500: oklch(0.579 0.1807 262.31);
+    --extended-color-indigo-600: oklch(0.5291 0.2045 262.05);
+    --extended-color-indigo-700: oklch(0.458 0.1753 262.2);
+    --extended-color-indigo-800: oklch(0.3862 0.1436 262.12);
+    --extended-color-indigo-900: oklch(0.3019 0.1051 262.16);
+    --extended-color-indigo-950: oklch(0.2308 0.0713 261.96);
+    /* Grey */
+    --extended-color-grey-25: oklch(0.9851 0 0);
+    --extended-color-grey-50: oklch(0.9461 0 0);
+    --extended-color-grey-100: oklch(0.9067 0 0);
+    --extended-color-grey-200: oklch(0.8297 0 0);
+    --extended-color-grey-300: oklch(0.7668 0 0);
+    --extended-color-grey-400: oklch(0.6993 0 0);
+    --extended-color-grey-500: oklch(0.65 0 0);
+    --extended-color-grey-600: oklch(0.5999 0 0);
+    --extended-color-grey-700: oklch(0.5208 0 0);
+    --extended-color-grey-800: oklch(0.4386 0 0);
+    --extended-color-grey-900: oklch(0.3407 0 0);
+    --extended-color-grey-950: oklch(0.2603 0 0);
+    /* Priority */
+    --priority-urgent: oklch(0.5798 0.1766 26.99);
+    --priority-high: oklch(0.6802 0.1633 50.67);
+    --priority-medium: oklch(0.79 0.1466 82.04);
+    --priority-low: oklch(0.579 0.1807 262.31);
+    --priority-none: oklch(0.6376 0.0129 231.77);
+
+    /* -------------------- Light mode color tokens -------------------- */
+    /* Neutral colors */
+    --neutral-white: oklch(1 0 0);
+    --neutral-100: oklch(0.9848 0.0003 230.66);
+    --neutral-200: oklch(0.9696 0.0007 230.67);
+    --neutral-300: oklch(0.9543 0.001 230.67);
+    --neutral-400: oklch(0.9389 0.0014 230.68);
+    --neutral-500: oklch(0.9235 0.001733 230.6853);
+    --neutral-600: oklch(0.8925 0.0024 230.7);
+    --neutral-700: oklch(0.8612 0.0032 230.71);
+    --neutral-800: oklch(0.6668 0.0079 230.82);
+    --neutral-900: oklch(0.6161 0.009153 230.867);
+    --neutral-1000: oklch(0.5288 0.0083 230.88);
+    --neutral-1100: oklch(0.4377 0.0066 230.87);
+    --neutral-1200: oklch(0.2378 0.0029 230.83);
+    --neutral-black: oklch(0.1472 0.0034 230.83);
+    /* Brand colors */
+    --brand-100: oklch(0.9847 0.0083 236.56);
+    --brand-200: oklch(0.9715 0.0167 230.9);
+    --brand-300: oklch(0.9428 0.0341 230.22);
+    --brand-400: oklch(0.9008 0.0587 232);
+    --brand-500: oklch(0.8414 0.0947 233.08);
+    --brand-600: oklch(0.7649 0.1392 236.3);
+    --brand-700: oklch(0.6766 0.1665 243.91);
+    --brand-900: oklch(0.4347 0.104093 242.4823);
+    --brand-1000: oklch(0.3399 0.0783 240.32);
+    --brand-1100: oklch(0.2626 0.0578 237.5);
+    --brand-1200: oklch(0.2093 0.0438 234.02);
+    --brand-default: oklch(0.4799 0.1158 242.91);
+    /* Green/Success colors */
+    --green-100: oklch(0.9819 0.0181 155.83);
+    --green-200: oklch(0.9624 0.0434 156.74);
+    --green-300: oklch(0.9258 0.0845 155.86);
+    --green-400: oklch(0.8704 0.149 154.62);
+    --green-500: oklch(0.7914 0.2091 151.66);
+    --green-600: oklch(0.7289 0.2119 147.82);
+    --green-700: oklch(0.632 0.185972 147.3695);
+    --green-800: oklch(0.5296 0.149485 148.9899);
+    --green-900: oklch(0.4468 0.1187 151.4);
+    --green-1000: oklch(0.3935 0.0957 152.28);
+    --green-1100: oklch(0.2654 0.0651 152.77);
+    /* Amber/Warning colors */
+    --amber-100: oklch(0.9869 0.0214 95.28);
+    --amber-200: oklch(0.9617 0.0592 95.89);
+    --amber-300: oklch(0.9244 0.1203 95.85);
+    --amber-400: oklch(0.8781 0.1688 91.86);
+    --amber-500: oklch(0.829 0.1712 81.04);
+    --amber-600: oklch(0.7724 0.172798 65.367);
+    --amber-700: oklch(0.6671 0.1685 53.38);
+    --amber-800: oklch(0.557 0.158291 45.3594);
+    --amber-900: oklch(0.4747 0.135757 44.9806);
+    --amber-1000: oklch(0.4149 0.1126 45.88);
+    --amber-1100: oklch(0.279 0.0773 45.6);
+    /* Red/Danger colors */
+    --red-100: oklch(0.9705 0.0129 17.38);
+    --red-200: oklch(0.9365 0.032 17.74);
+    --red-300: oklch(0.8834 0.0616 18.39);
+    --red-400: oklch(0.8053 0.1109 19.78);
+    --red-500: oklch(0.7022 0.1892 22.23);
+    --red-600: oklch(0.6378 0.2373 25.44);
+    --red-700: oklch(0.583 0.238666 28.4765);
+    --red-800: oklch(0.5095 0.208583 28.513);
+    --red-900: oklch(0.4446 0.1774 26.79);
+    --red-1000: oklch(0.3967 0.1408 25.71);
+    --red-1100: oklch(0.3493 0.1215 25.21);
+
+    /* -------------------- Light mode custom(derived) colors -------------------- */
+    /* Scrollbar colors */
+    --scrollbar-thumb: var(--alpha-black-200);
+    --scrollbar-thumb-surface-hover: var(--alpha-black-300);
+    --scrollbar-thumb-hover: var(--alpha-black-400);
+    --scrollbar-thumb-active: var(--alpha-black-500);
+    /* Background colors */
+    --bg-canvas: var(--neutral-300);
+    --bg-surface-1: var(--neutral-white);
+    --bg-surface-2: var(--neutral-100);
+    --bg-layer-1: var(--neutral-200);
+    --bg-layer-1-hover: var(--neutral-300);
+    --bg-layer-1-active: var(--neutral-400);
+    --bg-layer-1-selected: var(--neutral-400);
+    --bg-layer-2: var(--neutral-white);
+    --bg-layer-2-hover: var(--neutral-100);
+    --bg-layer-2-active: var(--neutral-200);
+    --bg-layer-2-selected: var(--neutral-200);
+    --bg-layer-3: var(--neutral-300);
+    --bg-layer-3-hover: var(--neutral-400);
+    --bg-layer-3-active: var(--neutral-500);
+    --bg-layer-3-selected: var(--neutral-500);
+    --bg-layer-transparent: var(--alpha-white-0);
+    --bg-layer-transparent-hover: var(--alpha-black-100);
+    --bg-layer-transparent-active: var(--alpha-black-200);
+    --bg-layer-transparent-selected: var(--alpha-black-300);
+    --bg-layer-disabled: var(--neutral-400);
+    --bg-accent-primary: var(--brand-default);
+    --bg-accent-primary-hover: var(--brand-900);
+    --bg-accent-primary-active: var(--brand-1000);
+    --bg-accent-subtle: var(--brand-100);
+    --bg-accent-subtle-hover: var(--brand-200);
+    --bg-accent-subtle-active: var(--brand-300);
+    --bg-success-primary: var(--green-700);
+    --bg-success-subtle: var(--green-100);
+    --bg-success-subtle-1: var(--green-200);
+    --bg-warning-primary: var(--amber-600);
+    --bg-warning-subtle: var(--amber-100);
+    --bg-danger-primary: var(--red-700);
+    --bg-danger-primary-hover: var(--red-800);
+    --bg-danger-primary-active: var(--red-900);
+    --bg-danger-primary-selected: var(--red-900);
+    --bg-danger-subtle: var(--red-100);
+    --bg-danger-subtle-hover: var(--red-200);
+    --bg-danger-subtle-active: var(--red-300);
+    --bg-danger-subtle-selected: var(--red-300);
+    --bg-danger-transparent: var(--red-100);
+    --bg-danger-transparent-hover: var(--red-100);
+    --bg-danger-transparent-active: var(--red-100);
+    --bg-danger-transparent-selected: var(--red-100);
+    --bg-backdrop: var(--alpha-black-500);
+    --bg-inverse: var(--alpha-black-1000);
+    /* Border colors */
+    --border-subtle: var(--neutral-400);
+    --border-subtle-1: var(--neutral-500);
+    --border-strong: var(--neutral-600);
+    --border-strong-1: var(--neutral-700);
+    --border-inverse: var(--neutral-white);
+    --border-disabled: var(--neutral-300);
+    --border-accent-strong: var(--brand-default);
+    --border-accent-subtle: var(--brand-300);
+    --border-success-strong: var(--green-700);
+    --border-success-subtle: var(--green-300);
+    --border-warning-strong: var(--amber-700);
+    --border-warning-subtle: var(--amber-400);
+    --border-danger-strong: var(--red-700);
+    --border-danger-subtle: var(--red-400);
+    /* Text colors */
+    --txt-primary: var(--neutral-1200);
+    --txt-secondary: var(--neutral-1100);
+    --txt-tertiary: var(--neutral-1000);
+    --txt-placeholder: var(--neutral-900);
+    --txt-disabled: var(--neutral-800);
+    --txt-accent-primary: var(--brand-default);
+    --txt-accent-secondary: var(--brand-700);
+    --txt-on-color: var(--neutral-100);
+    --txt-on-color-disabled: var(--alpha-black-400);
+    --txt-inverse: var(--neutral-white);
+    --txt-success-primary: var(--green-900);
+    --txt-success-secondary: var(--green-700);
+    --txt-warning-primary: var(--amber-900);
+    --txt-warning-secondary: var(--amber-700);
+    --txt-danger-primary: var(--red-900);
+    --txt-danger-secondary: var(--red-700);
+    /* Icon colors */
+    --txt-icon-primary: var(--neutral-1200);
+    --txt-icon-accent-subtle: var(--brand-500);
+    --txt-icon-accent-primary: var(--brand-default);
+    --txt-icon-danger-primary: var(--red-900);
+    --txt-icon-danger-secondary: var(--red-700);
+    --txt-icon-success-primary: var(--green-900);
+    --txt-icon-success-secondary: var(--green-700);
+    --txt-icon-warning-primary: var(--amber-900);
+    --txt-icon-warning-secondary: var(--amber-700);
+    --txt-icon-accent-primary-inverse: var(--brand-900);
+    --txt-icon-accent-secondary: var(--brand-1200);
+    --txt-icon-secondary: var(--neutral-1100);
+    --txt-icon-tertiary: var(--neutral-900);
+    --txt-icon-placeholder: var(--neutral-800);
+    --txt-icon-disabled: var(--neutral-700);
+    --txt-icon-danger: var(--red-700);
+    --txt-icon-on-color: var(--neutral-white);
+    --txt-icon-on-color-disabled: var(--alpha-black-400);
+    --txt-icon-inverse: var(--neutral-white);
+    /* Link colors */
+    --txt-link-primary: var(--brand-default);
+    --txt-link-primary-hover: var(--brand-900);
+    --txt-link-secondary: var(--neutral-900);
+    /* Label colors */
+    --label-indigo-bg: var(--extended-color-indigo-100);
+    --label-indigo-bg-strong: var(--extended-color-indigo-700);
+    --label-indigo-hover: var(--extended-color-indigo-300);
+    --label-indigo-icon: var(--extended-color-indigo-700);
+    --label-indigo-text: var(--extended-color-indigo-700);
+    --label-indigo-border: var(--extended-color-indigo-700);
+    --label-indigo-focus: var(--extended-color-indigo-500);
+    --label-emerald-bg: var(--extended-color-emerald-50);
+    --label-emerald-bg-strong: var(--extended-color-emerald-600);
+    --label-emerald-hover: var(--extended-color-emerald-200);
+    --label-emerald-icon: var(--extended-color-emerald-600);
+    --label-emerald-text: var(--extended-color-emerald-800);
+    --label-emerald-border: var(--extended-color-emerald-800);
+    --label-emerald-focus: var(--extended-color-emerald-700);
+    --label-grey-bg: var(--extended-color-grey-50);
+    --label-grey-bg-strong: var(--extended-color-grey-700);
+    --label-grey-hover: var(--extended-color-grey-100);
+    --label-grey-icon: var(--extended-color-grey-700);
+    --label-grey-text: var(--extended-color-grey-700);
+    --label-grey-border: var(--extended-color-grey-700);
+    --label-grey-focus: var(--extended-color-grey-500);
+    --label-crimson-bg: var(--extended-color-crimson-50);
+    --label-crimson-bg-strong: var(--extended-color-crimson-700);
+    --label-crimson-hover: var(--extended-color-crimson-100);
+    --label-crimson-icon: var(--extended-color-crimson-700);
+    --label-crimson-text: var(--extended-color-crimson-700);
+    --label-crimson-border: var(--extended-color-crimson-700);
+    --label-crimson-focus: var(--extended-color-crimson-500);
+    --label-yellow-bg: var(--extended-color-yellow-50);
+    --label-yellow-bg-strong: var(--extended-color-yellow-600);
+    --label-yellow-hover: var(--extended-color-yellow-100);
+    --label-yellow-icon: var(--extended-color-yellow-600);
+    --label-yellow-text: var(--extended-color-yellow-600);
+    --label-yellow-border: var(--extended-color-yellow-600);
+    --label-yellow-focus: var(--extended-color-yellow-400);
+    /* Illustration colors */
+    --illustration-fill-primary: var(--neutral-white);
+    --illustration-fill-secondary: var(--neutral-200);
+    --illustration-fill-tertiary: var(--neutral-400);
+    --illustration-fill-quaternary: var(--neutral-700);
+    --illustration-stroke-primary: var(--neutral-700);
+    --illustration-stroke-secondary: var(--neutral-800);
+    --illustration-stroke-tertiary: var(--neutral-1200);
+    /* Neutral plan colors */
+    --txt-plans-neutral-primary: var(--neutral-1000);
+    --txt-plans-neutral-color: var(--neutral-100);
+    --bg-plans-neutral-subtle: var(--neutral-400);
+    --bg-plans-neutral-solid: var(--neutral-1200);
+    /* Brand plan colors */
+    --txt-plans-brand-primary: var(--brand-1200);
+    --txt-plans-brand-color: var(--neutral-100);
+    --bg-plans-brand-subtle: var(--brand-200);
+    --bg-plans-brand-solid: var(--brand-1200);
+
+    /* ---------- Dark mode color tokens ---------- */
+    @variant dark {
+      /* Neutral colors */
+      --neutral-black: oklch(0.1689 0.0021 230.81);
+      --neutral-100: oklch(0.1932 0.002 230.81);
+      --neutral-200: oklch(0.2158 0.0025 230.82);
+      --neutral-300: oklch(0.2378 0.0029 230.83);
+      --neutral-400: oklch(0.2593 0.0033 230.84);
+      --neutral-500: oklch(0.3011 0.0041 230.85);
+      --neutral-600: oklch(0.3415 0.0049 230.86);
+      --neutral-700: oklch(0.3999 0.0059 230.87);
+      --neutral-800: oklch(0.5989 0.0096 230.88);
+      --neutral-900: oklch(0.6835 0.0074 230.81);
+      --neutral-1000: oklch(0.7655 0.0054 230.76);
+      --neutral-1100: oklch(0.8455 0.0035 230.72);
+      --neutral-1200: oklch(0.9235 0.001733 230.6853);
+      --neutral-white: oklch(0.9702 0 0);
+      /* Brand colors */
+      --brand-100: oklch(0.2029 0.03 232.24);
+      --brand-200: oklch(0.2513 0.0418 234.6);
+      --brand-300: oklch(0.3208 0.05806 236.44);
+      --brand-400: oklch(0.4088 0.077702 237.13);
+      --brand-500: oklch(0.4511 0.087024 237.37);
+      --brand-700: oklch(0.7408 0.100309 233.89);
+      --brand-800: oklch(0.8318 0.065614 232.07);
+      --brand-900: oklch(0.8969 0.040089 231.35);
+      --brand-1000: oklch(0.9409 0.022883 231.01);
+      --brand-1100: oklch(0.9704 0.011421 230.82);
+      --brand-1200: oklch(0.9856 0.005 228.82);
+      --brand-default: oklch(0.6311 0.126281 238.01);
+      /* Green colors */
+      --green-100: oklch(0.2721 0.067322 152.52);
+      --green-200: oklch(0.3935 0.0957 152.28);
+      --green-300: oklch(0.4468 0.1187 151.4);
+      --green-400: oklch(0.5296 0.149485 148.9899);
+      --green-500: oklch(0.632 0.185972 147.3695);
+      --green-600: oklch(0.7289 0.2119 147.82);
+      --green-700: oklch(0.7914 0.2091 151.66);
+      --green-800: oklch(0.8704 0.149 154.62);
+      --green-900: oklch(0.9258 0.0845 155.86);
+      --green-1000: oklch(0.9624 0.0434 156.74);
+      --green-1100: oklch(0.9819 0.0181 155.83);
+      /* Amber colors */
+      --amber-100: oklch(0.3042 0.0853 45.16);
+      --amber-200: oklch(0.4149 0.1126 45.88);
+      --amber-300: oklch(0.4747 0.135757 44.9806);
+      --amber-400: oklch(0.557 0.158291 45.3594);
+      --amber-500: oklch(0.6671 0.1685 53.38);
+      --amber-600: oklch(0.7724 0.172798 65.367);
+      --amber-700: oklch(0.829 0.1712 81.04);
+      --amber-800: oklch(0.8781 0.1688 91.86);
+      --amber-900: oklch(0.9244 0.1203 95.85);
+      --amber-1000: oklch(0.9617 0.0592 95.89);
+      --amber-1100: oklch(0.9869 0.0214 95.28);
+      /* Red colors */
+      --red-100: oklch(0.2615 0.085 24.41);
+      --red-200: oklch(0.3967 0.1408 25.71);
+      --red-300: oklch(0.4446 0.1774 26.79);
+      --red-400: oklch(0.5095 0.208583 28.513);
+      --red-500: oklch(0.583 0.238666 28.4765);
+      --red-600: oklch(0.6378 0.2373 25.44);
+      --red-700: oklch(0.7022 0.1892 22.23);
+      --red-800: oklch(0.8053 0.1109 19.78);
+      --red-900: oklch(0.8834 0.0616 18.39);
+      --red-1000: oklch(0.9365 0.032 17.74);
+      --red-1100: oklch(0.9705 0.0129 17.38);
+      /* -------------------- Dark mode derived colors -------------------- */
+      /* Scrollbar colors */
+      --scrollbar-thumb: var(--alpha-white-200);
+      --scrollbar-thumb-surface-hover: var(--alpha-white-300);
+      --scrollbar-thumb-hover: var(--alpha-white-400);
+      --scrollbar-thumb-active: var(--alpha-white-500);
+      /* Background colors */
+      --bg-canvas: var(--neutral-black);
+      --bg-surface-1: var(--neutral-100);
+      --bg-surface-2: var(--neutral-200);
+      --bg-layer-1: var(--neutral-200);
+      --bg-layer-1-hover: var(--neutral-300);
+      --bg-layer-1-active: var(--neutral-400);
+      --bg-layer-1-selected: var(--neutral-400);
+      --bg-layer-2: var(--neutral-300);
+      --bg-layer-2-hover: var(--neutral-400);
+      --bg-layer-2-active: var(--neutral-500);
+      --bg-layer-2-selected: var(--neutral-500);
+      --bg-layer-3: var(--neutral-400);
+      --bg-layer-3-hover: var(--neutral-500);
+      --bg-layer-3-active: var(--neutral-600);
+      --bg-layer-3-selected: var(--neutral-600);
+      --bg-layer-transparent: var(--alpha-black-0);
+      --bg-layer-transparent-hover: var(--alpha-white-100);
+      --bg-layer-transparent-active: var(--alpha-white-200);
+      --bg-layer-transparent-selected: var(--alpha-white-300);
+      --bg-layer-disabled: var(--neutral-700);
+      --bg-accent-primary: var(--brand-default);
+      --bg-accent-primary-hover: var(--brand-500);
+      --bg-accent-primary-active: var(--brand-400);
+      --bg-accent-subtle: var(--brand-100);
+      --bg-accent-subtle-hover: var(--brand-200);
+      --bg-accent-subtle-active: var(--brand-300);
+      --bg-success-primary: var(--green-700);
+      --bg-success-subtle: var(--green-100);
+      --bg-success-subtle-1: var(--green-100);
+      --bg-warning-primary: var(--amber-600);
+      --bg-warning-subtle: var(--amber-100);
+      --bg-danger-primary: var(--red-300);
+      --bg-danger-primary-hover: var(--red-400);
+      --bg-danger-primary-active: var(--red-500);
+      --bg-danger-primary-selected: var(--red-500);
+      --bg-danger-subtle: var(--red-100);
+      --bg-danger-subtle-hover: var(--red-200);
+      --bg-danger-subtle-active: var(--red-300);
+      --bg-danger-subtle-selected: var(--red-300);
+      --bg-danger-transparent: var(--red-100);
+      --bg-danger-transparent-hover: var(--red-100);
+      --bg-danger-transparent-active: var(--red-100);
+      --bg-danger-transparent-selected: var(--red-100);
+      --bg-backdrop: var(--alpha-black-1000);
+      --bg-inverse: var(--alpha-white-1000);
+      /* Border colors */
+      --border-subtle: var(--neutral-400);
+      --border-subtle-1: var(--neutral-500);
+      --border-strong: var(--neutral-600);
+      --border-strong-1: var(--neutral-700);
+      --border-inverse: var(--neutral-100);
+      --border-disabled: var(--neutral-300);
+      --border-accent-strong: var(--brand-default);
+      --border-accent-subtle: var(--brand-300);
+      --border-success-strong: var(--green-400);
+      --border-success-subtle: var(--green-200);
+      --border-warning-strong: var(--amber-400);
+      --border-warning-subtle: var(--amber-200);
+      --border-danger-strong: var(--red-400);
+      --border-danger-subtle: var(--red-200);
+      /* Text colors */
+      --txt-primary: var(--neutral-1200);
+      --txt-secondary: var(--neutral-1100);
+      --txt-tertiary: var(--neutral-1000);
+      --txt-placeholder: var(--neutral-900);
+      --txt-disabled: var(--neutral-800);
+      --txt-accent-primary: var(--brand-default);
+      --txt-accent-secondary: var(--brand-700);
+      --txt-on-color: var(--neutral-1200);
+      --txt-on-color-disabled: var(--alpha-white-400);
+      --txt-inverse: var(--neutral-black);
+      --txt-success-primary: var(--green-900);
+      --txt-success-secondary: var(--green-700);
+      --txt-warning-primary: var(--amber-900);
+      --txt-warning-secondary: var(--amber-700);
+      --txt-danger-primary: var(--red-900);
+      --txt-danger-secondary: var(--red-700);
+      /* Icon colors */
+      --txt-icon-primary: var(--neutral-1200);
+      --txt-icon-accent-subtle: var(--brand-700);
+      --txt-icon-accent-primary: var(--brand-default);
+      --txt-icon-accent-primary-inverse: var(--brand-900);
+      --txt-icon-accent-secondary: var(--brand-1200);
+      --txt-icon-danger-primary: var(--red-900);
+      --txt-icon-danger-secondary: var(--red-700);
+      --txt-icon-success-primary: var(--green-900);
+      --txt-icon-success-secondary: var(--green-700);
+      --txt-icon-warning-primary: var(--amber-900);
+      --txt-icon-warning-secondary: var(--amber-700);
+      --txt-icon-secondary: var(--neutral-1100);
+      --txt-icon-tertiary: var(--neutral-1000);
+      --txt-icon-placeholder: var(--neutral-800);
+      --txt-icon-disabled: var(--neutral-700);
+      --txt-icon-danger: var(--red-700);
+      --txt-icon-on-color: var(--neutral-white);
+      --txt-icon-on-color-disabled: var(--alpha-white-400);
+      --txt-icon-inverse: var(--neutral-black);
+      /* Link colors */
+      --txt-link-primary: var(--brand-default);
+      --txt-link-primary-hover: var(--brand-700);
+      --txt-link-secondary: var(--neutral-1100);
+      /* Label colors */
+      --label-indigo-bg: var(--extended-color-indigo-800);
+      --label-indigo-bg-strong: var(--extended-color-indigo-500);
+      --label-indigo-hover: var(--extended-color-indigo-700);
+      --label-indigo-icon: var(--extended-color-indigo-500);
+      --label-indigo-text: var(--extended-color-indigo-500);
+      --label-indigo-border: var(--extended-color-indigo-500);
+      --label-indigo-focus: var(--extended-color-indigo-400);
+      --label-emerald-bg: var(--extended-color-emerald-700);
+      --label-emerald-bg-strong: var(--extended-color-emerald-600);
+      --label-emerald-hover: var(--extended-color-emerald-800);
+      --label-emerald-icon: var(--extended-color-emerald-600);
+      --label-emerald-text: var(--extended-color-emerald-400);
+      --label-emerald-border: var(--extended-color-emerald-400);
+      --label-emerald-focus: var(--extended-color-emerald-700);
+      --label-grey-bg: var(--extended-color-grey-800);
+      --label-grey-bg-strong: var(--extended-color-grey-500);
+      --label-grey-hover: var(--extended-color-grey-700);
+      --label-grey-icon: var(--extended-color-grey-500);
+      --label-grey-text: var(--extended-color-grey-500);
+      --label-grey-border: var(--extended-color-grey-500);
+      --label-grey-focus: var(--extended-color-grey-400);
+      --label-crimson-bg: var(--extended-color-crimson-800);
+      --label-crimson-bg-strong: var(--extended-color-crimson-500);
+      --label-crimson-hover: var(--extended-color-crimson-700);
+      --label-crimson-icon: var(--extended-color-crimson-500);
+      --label-crimson-text: var(--extended-color-crimson-500);
+      --label-crimson-border: var(--extended-color-crimson-500);
+      --label-crimson-focus: var(--extended-color-crimson-400);
+      --label-yellow-bg: var(--extended-color-yellow-900);
+      --label-yellow-bg-strong: var(--extended-color-yellow-500);
+      --label-yellow-hover: var(--extended-color-yellow-800);
+      --label-yellow-icon: var(--extended-color-yellow-500);
+      --label-yellow-text: var(--extended-color-yellow-500);
+      --label-yellow-border: var(--extended-color-yellow-500);
+      --label-yellow-focus: var(--extended-color-yellow-400);
+      /* Illustration colors */
+      --illustration-fill-primary: var(--neutral-400);
+      --illustration-fill-secondary: var(--neutral-500);
+      --illustration-fill-tertiary: var(--neutral-700);
+      --illustration-fill-quaternary: var(--neutral-700);
+      --illustration-stroke-primary: var(--neutral-700);
+      --illustration-stroke-secondary: var(--neutral-800);
+      --illustration-stroke-tertiary: var(--neutral-1000);
+      /* Neutral plan colors */
+      --txt-plans-neutral-primary: var(--neutral-1000);
+      --txt-plans-neutral-color: var(--neutral-100);
+      --bg-plans-neutral-subtle: var(--neutral-500);
+      --bg-plans-neutral-solid: var(--neutral-1100);
+      /* Brand plan colors */
+      --txt-plans-brand-primary: var(--brand-1000);
+      --txt-plans-brand-color: var(--brand-100);
+      --bg-plans-brand-subtle: var(--brand-200);
+      --bg-plans-brand-solid: var(--brand-1100);
+    }
+
+    /* -------------------- Dark high contrast mode color tokens -------------------- */
+    @variant dark-high-contrast {
+      /* Border colors */
+      --border-subtle: var(--neutral-1200);
+      --border-subtle-1: var(--neutral-1100);
+      --border-strong: var(--neutral-1000);
+      --border-strong-1: var(--neutral-900);
+      --border-inverse: var(--neutral-white);
+      --border-disabled: var(--neutral-700);
+      --border-accent-strong: var(--brand-default);
+      --border-accent-subtle: var(--brand-300);
+      --border-success-strong: var(--green-400);
+      --border-success-subtle: var(--green-200);
+      --border-warning-strong: var(--amber-400);
+      --border-warning-subtle: var(--amber-200);
+      --border-danger-strong: var(--red-400);
+      --border-danger-subtle: var(--red-200);
+    }
+
+    /* -------------------- Light high contrast mode color tokens -------------------- */
+
+    @variant light-high-contrast {
+      /* Border colors */
+      --border-subtle: var(--neutral-1200);
+      --border-subtle-1: var(--neutral-1100);
+      --border-strong: var(--neutral-1000);
+      --border-strong-1: var(--neutral-900);
+      --border-inverse: var(--neutral-black);
+      --border-disabled: var(--neutral-700);
+      --border-accent-strong: var(--brand-default);
+      --border-accent-subtle: var(--brand-300);
+      --border-success-strong: var(--green-700);
+      --border-success-subtle: var(--green-600);
+      --border-warning-strong: var(--amber-700);
+      --border-warning-subtle: var(--amber-400);
+      --border-danger-strong: var(--red-700);
+      --border-danger-subtle: var(--red-400);
+    }
+  }
+}
+
+/* -------------------- Theme tokens -------------------- */
 @theme {
   --color-*: initial;
-
-  /* ---------- Alpha colors ---------- */
-  /* White alpha */
   --color-white: oklch(1 0 0);
-  --color-alpha-white-0: oklch(1 0 0 / 0%);
-  --color-alpha-white-100: oklch(1 0 0 / 5%);
-  --color-alpha-white-200: oklch(1 0 0 / 10%);
-  --color-alpha-white-300: oklch(1 0 0 / 15%);
-  --color-alpha-white-400: oklch(1 0 0 / 20%);
-  --color-alpha-white-500: oklch(1 0 0 / 30%);
-  --color-alpha-white-600: oklch(1 0 0 / 40%);
-  --color-alpha-white-700: oklch(1 0 0 / 50%);
-  --color-alpha-white-800: oklch(1 0 0 / 60%);
-  --color-alpha-white-900: oklch(1 0 0 / 70%);
-  --color-alpha-white-1000: oklch(1 0 0 / 80%);
-  --color-alpha-white-1100: oklch(1 0 0 / 90%);
-  --color-alpha-white-1200: oklch(1 0 0 / 95%);
-
-  /* Black alpha */
   --color-black: oklch(0.1482 0.0034 196.79);
-  --color-alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
-  --color-alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
-  --color-alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
-  --color-alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%);
-  --color-alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%);
-  --color-alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
-  --color-alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%);
-  --color-alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
-  --color-alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%);
-  --color-alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%);
-  --color-alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%);
-  --color-alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
-  --color-alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
-
   /* ---------- Border radius ---------- */
   --radius-4xl: initial;
-
   /* ---------- Border width ---------- */
   --border-width-*: initial;
   --border-width-sm: 1px;
@@ -48,23 +660,10 @@
   --border-width-lg: 2px;
   --border-width-xl: 2.5px;
   --default-border-width: 1px;
-
   /* ---------- Outline width ---------- */
   --outline-width-*: initial;
-  --outline-width-sm: var(--border-width-sm);
-  --outline-width-md: var(--border-width-md);
-  --outline-width-lg: var(--border-width-lg);
-  --outline-width-xl: var(--border-width-xl);
-  --default-outline-width: var(--default-border-width);
-
   /* ---------- Ring width ---------- */
   --ring-width-*: initial;
-  --ring-width-sm: var(--border-width-sm);
-  --ring-width-md: var(--border-width-md);
-  --ring-width-lg: var(--border-width-lg);
-  --ring-width-xl: var(--border-width-xl);
-  --default-ring-width: var(--default-border-width);
-
   /* ---------- Shadow ---------- */
   --shadow-*: initial;
   --shadow-raised-100: 0px 1px 6px -1px #292f3d08, 0px 1px 4px 0px #292f3d0a;
@@ -74,289 +673,94 @@
   --shadow-overlay-200: 0px 10px 10px -10px #292f3d0a, 0px 30px 60px -12px #292f3d1a;
   --shadow-direction-left: -10px 0px 30px -5px #292f3d05, -5px 0px 80px -5px #292f3d0a;
   --shadow-direction-right: 10px 0px 30px -5px #0000000a, 5px 0px 80px -5px #0000000a;
-
   /* --------- Height --------- */
   --height-header: 3.25rem;
-
   /* --------- Padding --------- */
   --padding-page: 1.35rem;
-
-  /* --------- Priority colors --------- */
-  --color-priority-urgent: oklch(0.5798 0.1766 26.99);
-  --color-priority-high: oklch(0.6802 0.1633 50.67);
-  --color-priority-medium: oklch(0.79 0.1466 82.04);
-  --color-priority-low: oklch(0.579 0.1807 262.31);
-  --color-priority-none: oklch(0.6376 0.0129 231.77);
-
-  /* Priority text colors */
-  --text-color-priority-urgent: var(--color-priority-urgent);
-  --text-color-priority-high: var(--color-priority-high);
-  --text-color-priority-medium: var(--color-priority-medium);
-  --text-color-priority-low: var(--color-priority-low);
-  --text-color-priority-none: var(--color-priority-none);
-
-  /* Priority border colors */
-  --border-color-priority-urgent: var(--color-priority-urgent);
-  --border-color-priority-high: var(--color-priority-high);
-  --border-color-priority-medium: var(--color-priority-medium);
-  --border-color-priority-low: var(--color-priority-low);
-  --border-color-priority-none: var(--color-priority-none);
-
-  /* --------- Extended colors ---------- */
-  /* Purple colors */
-  --extended-color-purple-25: oklch(0.981 0.0054 297.73);
-  --extended-color-purple-50: oklch(0.9421 0.0162 293.74);
-  --extended-color-purple-100: oklch(0.8808 0.0343 293.03);
-  --extended-color-purple-200: oklch(0.779 0.0639 293.01);
-  --extended-color-purple-300: oklch(0.6978 0.0888 291.44);
-  --extended-color-purple-400: oklch(0.6139 0.1164 290.19);
-  --extended-color-purple-500: oklch(0.5527 0.1361 288.8);
-  --extended-color-purple-600: oklch(0.4895 0.157 286.65);
-  --extended-color-purple-700: oklch(0.42 0.1303 287.25);
-  --extended-color-purple-800: oklch(0.3617 0.1077 287.53);
-  --extended-color-purple-900: oklch(0.2861 0.0795 287.41);
-  --extended-color-purple-950: oklch(0.219 0.0552 288.93);
-
-  /* Orange colors */
-  --extended-color-orange-25: oklch(0.9856 0.0084 56.32);
-  --extended-color-orange-50: oklch(0.964 0.0219 58.79);
-  --extended-color-orange-100: oklch(0.9152 0.0522 56.77);
-  --extended-color-orange-200: oklch(0.8504 0.097 56.87);
-  --extended-color-orange-300: oklch(0.801 0.1323 55.27);
-  --extended-color-orange-400: oklch(0.7563 0.1644 52.56);
-  --extended-color-orange-500: oklch(0.7177 0.1905 47.86);
-  --extended-color-orange-600: oklch(0.6601 0.1884 45.09);
-  --extended-color-orange-700: oklch(0.5737 0.162 45.72);
-  --extended-color-orange-800: oklch(0.5059 0.141467 46.3267);
-  --extended-color-orange-900: oklch(0.3897 0.105571 48.3415);
-  --extended-color-orange-950: oklch(0.2896 0.0746 51.86);
-
-  /* Crimson colors */
-  --extended-color-crimson-25: oklch(0.9805 0.0066 28.83);
-  --extended-color-crimson-50: oklch(0.9503 0.0186 21.57);
-  --extended-color-crimson-100: oklch(0.8847 0.0455 23.1);
-  --extended-color-crimson-200: oklch(0.791 0.0874 23.59);
-  --extended-color-crimson-300: oklch(0.72 0.124 24.83);
-  --extended-color-crimson-400: oklch(0.6556 0.1604 26.47);
-  --extended-color-crimson-500: oklch(0.5954 0.1956 28.51);
-  --extended-color-crimson-600: oklch(0.5284 0.185 28.96);
-  --extended-color-crimson-700: oklch(0.4754 0.1647 28.98);
-  --extended-color-crimson-800: oklch(0.4209 0.1438 29.01);
-  --extended-color-crimson-900: oklch(0.3249 0.106 28.39);
-  --extended-color-crimson-950: oklch(0.2457 0.0742 27.56);
-
-  /* Emerald colors */
-  --extended-color-emerald-25: oklch(0.9884 0.0082 157.1);
-  --extended-color-emerald-50: oklch(0.9563 0.0256 154.47);
-  --extended-color-emerald-100: oklch(0.9153 0.0531 153.59);
-  --extended-color-emerald-200: oklch(0.8679 0.0829 153.02);
-  --extended-color-emerald-300: oklch(0.8221 0.1121 152.16);
-  --extended-color-emerald-400: oklch(0.7785 0.1398 151.07);
-  --extended-color-emerald-500: oklch(0.7401 0.166 149.61);
-  --extended-color-emerald-600: oklch(0.6567 0.1599 148.98);
-  --extended-color-emerald-700: oklch(0.5883 0.1413 149.06);
-  --extended-color-emerald-800: oklch(0.4965 0.1172 149.18);
-  --extended-color-emerald-900: oklch(0.4003 0.0918 149.37);
-  --extended-color-emerald-950: oklch(0.2982 0.0631 150.55);
-
-  /* Pink colors */
-  --extended-color-pink-25: oklch(0.9828 0.005 345.28);
-  --extended-color-pink-50: oklch(0.9394 0.0201 340.71);
-  --extended-color-pink-100: oklch(0.8759 0.0418 339.71);
-  --extended-color-pink-200: oklch(0.805 0.0664 341.18);
-  --extended-color-pink-300: oklch(0.736 0.0938 342.16);
-  --extended-color-pink-400: oklch(0.6673 0.1206 342.89);
-  --extended-color-pink-500: oklch(0.6185 0.1388 344.06);
-  --extended-color-pink-600: oklch(0.5704 0.1574 345.25);
-  --extended-color-pink-700: oklch(0.4947 0.1333 344.88);
-  --extended-color-pink-800: oklch(0.4162 0.1108 344.66);
-  --extended-color-pink-900: oklch(0.326 0.0807 344.57);
-  --extended-color-pink-950: oklch(0.2474 0.0553 344.95);
-
-  /* yellow colors */
-  --extended-color-yellow-25: oklch(0.989 0.0073 80.72);
-  --extended-color-yellow-50: oklch(0.9631 0.0268 85.66);
-  --extended-color-yellow-100: oklch(0.9297 0.0545 86.15);
-  --extended-color-yellow-200: oklch(0.8893 0.0843 85.3);
-  --extended-color-yellow-300: oklch(0.8522 0.1121 85.14);
-  --extended-color-yellow-400: oklch(0.8167 0.1342 83.9);
-  --extended-color-yellow-500: oklch(0.79 0.1466 82.04);
-  --extended-color-yellow-600: oklch(0.7399 0.1487 79.36);
-  --extended-color-yellow-700: oklch(0.683 0.1365 79.84);
-  --extended-color-yellow-800: oklch(0.5522 0.1093 80.44);
-  --extended-color-yellow-900: oklch(0.425 0.0824 81.46);
-  --extended-color-yellow-950: oklch(0.3142 0.0586 82.21);
-
-  /* indigo colors */
-  --extended-color-indigo-25: oklch(0.9813 0.0074 260.73);
-  --extended-color-indigo-50: oklch(0.9415 0.022 263.19);
-  --extended-color-indigo-100: oklch(0.8828 0.045 263.07);
-  --extended-color-indigo-200: oklch(0.7852 0.086 263.89);
-  --extended-color-indigo-300: oklch(0.7066 0.121 263.57);
-  --extended-color-indigo-400: oklch(0.6322 0.1556 262.59);
-  --extended-color-indigo-500: oklch(0.579 0.1807 262.31);
-  --extended-color-indigo-600: oklch(0.5291 0.2045 262.05);
-  --extended-color-indigo-700: oklch(0.458 0.1753 262.2);
-  --extended-color-indigo-800: oklch(0.3862 0.1436 262.12);
-  --extended-color-indigo-900: oklch(0.3019 0.1051 262.16);
-  --extended-color-indigo-950: oklch(0.2308 0.0713 261.96);
-
-  /* grey colors */
-  --extended-color-grey-25: oklch(0.9851 0 0);
-  --extended-color-grey-50: oklch(0.9461 0 0);
-  --extended-color-grey-100: oklch(0.9067 0 0);
-  --extended-color-grey-200: oklch(0.8297 0 0);
-  --extended-color-grey-300: oklch(0.7668 0 0);
-  --extended-color-grey-400: oklch(0.6993 0 0);
-  --extended-color-grey-500: oklch(0.65 0 0);
-  --extended-color-grey-600: oklch(0.5999 0 0);
-  --extended-color-grey-700: oklch(0.5208 0 0);
-  --extended-color-grey-800: oklch(0.4386 0 0);
-  --extended-color-grey-900: oklch(0.3407 0 0);
-  --extended-color-grey-950: oklch(0.2603 0 0);
+  --padding-page-x: 1.35rem;
+  --padding-page-y: 1.35rem;
 }
 
-/* -------------------- Light mode color tokens -------------------- */
-@theme {
-  /* Neutral colors */
-  --color-neutral-white: oklch(1 0 0);
-  --color-neutral-100: oklch(0.9848 0.0003 230.66);
-  --color-neutral-200: oklch(0.9696 0.0007 230.67);
-  --color-neutral-300: oklch(0.9543 0.001 230.67);
-  --color-neutral-400: oklch(0.9389 0.0014 230.68);
-  --color-neutral-500: oklch(0.9235 0.001733 230.6853);
-  --color-neutral-600: oklch(0.8925 0.0024 230.7);
-  --color-neutral-700: oklch(0.8612 0.0032 230.71);
-  --color-neutral-800: oklch(0.6668 0.0079 230.82);
-  --color-neutral-900: oklch(0.6161 0.009153 230.867);
-  --color-neutral-1000: oklch(0.5288 0.0083 230.88);
-  --color-neutral-1100: oklch(0.4377 0.0066 230.87);
-  --color-neutral-1200: oklch(0.2378 0.0029 230.83);
-  --color-neutral-black: oklch(0.1472 0.0034 230.83);
-
-  /* Brand colors */
-  --color-brand-100: oklch(0.9847 0.0083 236.56);
-  --color-brand-200: oklch(0.9715 0.0167 230.9);
-  --color-brand-300: oklch(0.9428 0.0341 230.22);
-  --color-brand-400: oklch(0.9008 0.0587 232);
-  --color-brand-500: oklch(0.8414 0.0947 233.08);
-  --color-brand-600: oklch(0.7649 0.1392 236.3);
-  --color-brand-700: oklch(0.6766 0.1665 243.91);
-  --color-brand-900: oklch(0.4347 0.104093 242.4823);
-  --color-brand-1000: oklch(0.3399 0.0783 240.32);
-  --color-brand-1100: oklch(0.2626 0.0578 237.5);
-  --color-brand-1200: oklch(0.2093 0.0438 234.02);
-  --color-brand-default: oklch(0.4799 0.1158 242.91);
-
-  /* Green/Success colors */
-  --color-green-100: oklch(0.9819 0.0181 155.83);
-  --color-green-200: oklch(0.9624 0.0434 156.74);
-  --color-green-300: oklch(0.9258 0.0845 155.86);
-  --color-green-400: oklch(0.8704 0.149 154.62);
-  --color-green-500: oklch(0.7914 0.2091 151.66);
-  --color-green-600: oklch(0.7289 0.2119 147.82);
-  --color-green-700: oklch(0.632 0.185972 147.3695);
-  --color-green-800: oklch(0.5296 0.149485 148.9899);
-  --color-green-900: oklch(0.4468 0.1187 151.4);
-  --color-green-1000: oklch(0.3935 0.0957 152.28);
-  --color-green-1100: oklch(0.2654 0.0651 152.77);
-
-  /* Amber/Warning colors */
-  --color-amber-100: oklch(0.9869 0.0214 95.28);
-  --color-amber-200: oklch(0.9617 0.0592 95.89);
-  --color-amber-300: oklch(0.9244 0.1203 95.85);
-  --color-amber-400: oklch(0.8781 0.1688 91.86);
-  --color-amber-500: oklch(0.829 0.1712 81.04);
-  --color-amber-600: oklch(0.7724 0.172798 65.367);
-  --color-amber-700: oklch(0.6671 0.1685 53.38);
-  --color-amber-800: oklch(0.557 0.158291 45.3594);
-  --color-amber-900: oklch(0.4747 0.135757 44.9806);
-  --color-amber-1000: oklch(0.4149 0.1126 45.88);
-  --color-amber-1100: oklch(0.279 0.0773 45.6);
-
-  /* Red/Danger colors */
-  --color-red-100: oklch(0.9705 0.0129 17.38);
-  --color-red-200: oklch(0.9365 0.032 17.74);
-  --color-red-300: oklch(0.8834 0.0616 18.39);
-  --color-red-400: oklch(0.8053 0.1109 19.78);
-  --color-red-500: oklch(0.7022 0.1892 22.23);
-  --color-red-600: oklch(0.6378 0.2373 25.44);
-  --color-red-700: oklch(0.583 0.238666 28.4765);
-  --color-red-800: oklch(0.5095 0.208583 28.513);
-  --color-red-900: oklch(0.4446 0.1774 26.79);
-  --color-red-1000: oklch(0.3967 0.1408 25.71);
-  --color-red-1100: oklch(0.3493 0.1215 25.21);
-
+/* -------------------- Semantic colors (Final colors to be used in components) -------------------- */
+@theme inline {
+  /* ---------- Outline width ---------- */
+  --outline-width-sm: var(--border-width-sm);
+  --outline-width-md: var(--border-width-md);
+  --outline-width-lg: var(--border-width-lg);
+  --outline-width-xl: var(--border-width-xl);
+  --default-outline-width: var(--default-border-width);
+  /* ---------- Ring width ---------- */
+  --ring-width-sm: var(--border-width-sm);
+  --ring-width-md: var(--border-width-md);
+  --ring-width-lg: var(--border-width-lg);
+  --ring-width-xl: var(--border-width-xl);
+  --default-ring-width: var(--default-border-width);
   /* Scrollbar colors */
-  --color-scrollbar-thumb: var(--color-alpha-black-200);
-  --color-scrollbar-thumb-surface-hover: var(--color-alpha-black-300);
-  --color-scrollbar-thumb-hover: var(--color-alpha-black-400);
-  --color-scrollbar-thumb-active: var(--color-alpha-black-500);
-
-  /* -------------------- Light mode custom(derived) colors -------------------- */
+  --background-color-scrollbar-thumb: var(--scrollbar-thumb);
+  --background-color-scrollbar-thumb-surface-hover: var(--scrollbar-thumb-surface-hover);
+  --background-color-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
+  --background-color-scrollbar-thumb-active: var(--scrollbar-thumb-active);
   /* Background colors */
-  --background-color-canvas: var(--color-neutral-300);
-  --background-color-surface-1: var(--color-neutral-white);
-  --background-color-surface-2: var(--color-neutral-100);
-  --background-color-layer-1: var(--color-neutral-200);
-  --background-color-layer-1-hover: var(--color-neutral-300);
-  --background-color-layer-1-active: var(--color-neutral-400);
-  --background-color-layer-1-selected: var(--color-neutral-400);
-  --background-color-layer-2: var(--color-neutral-white);
-  --background-color-layer-2-hover: var(--color-neutral-100);
-  --background-color-layer-2-active: var(--color-neutral-200);
-  --background-color-layer-2-selected: var(--color-neutral-200);
-  --background-color-layer-3: var(--color-neutral-300);
-  --background-color-layer-3-hover: var(--color-neutral-400);
-  --background-color-layer-3-active: var(--color-neutral-500);
-  --background-color-layer-3-selected: var(--color-neutral-500);
-  --background-color-layer-transparent: var(--color-alpha-white-0);
-  --background-color-layer-transparent-hover: var(--color-alpha-black-100);
-  --background-color-layer-transparent-active: var(--color-alpha-black-200);
-  --background-color-layer-transparent-selected: var(--color-alpha-black-300);
-  --background-color-layer-disabled: var(--color-neutral-400);
-  --background-color-accent-primary: var(--color-brand-default);
-  --background-color-accent-primary-hover: var(--color-brand-900);
-  --background-color-accent-primary-active: var(--color-brand-1000);
-  --background-color-accent-subtle: var(--color-brand-100);
-  --background-color-accent-subtle-hover: var(--color-brand-200);
-  --background-color-accent-subtle-active: var(--color-brand-300);
-  --background-color-success-primary: var(--color-green-700);
-  --background-color-success-subtle: var(--color-green-100);
-  --background-color-success-subtle-1: var(--color-green-200);
-  --background-color-warning-primary: var(--color-amber-600);
-  --background-color-warning-subtle: var(--color-amber-100);
-  --background-color-danger-primary: var(--color-red-700);
-  --background-color-danger-primary-hover: var(--color-red-800);
-  --background-color-danger-primary-active: var(--color-red-900);
-  --background-color-danger-primary-selected: var(--color-red-900);
-  --background-color-danger-subtle: var(--color-red-100);
-  --background-color-danger-subtle-hover: var(--color-red-200);
-  --background-color-danger-subtle-active: var(--color-red-300);
-  --background-color-danger-subtle-selected: var(--color-red-300);
-  --background-color-danger-transparent: var(--color-red-100);
-  --background-color-danger-transparent-hover: var(--color-red-100);
-  --background-color-danger-transparent-active: var(--color-red-100);
-  --background-color-danger-transparent-selected: var(--color-red-100);
-  --background-color-backdrop: var(--color-alpha-black-500);
-  --background-color-inverse: var(--color-alpha-black-1000);
-
+  --background-color-canvas: var(--bg-canvas);
+  --background-color-surface-1: var(--bg-surface-1);
+  --background-color-surface-2: var(--bg-surface-2);
+  --background-color-layer-1: var(--bg-layer-1);
+  --background-color-layer-1-hover: var(--bg-layer-1-hover);
+  --background-color-layer-1-active: var(--bg-layer-1-active);
+  --background-color-layer-1-selected: var(--bg-layer-1-selected);
+  --background-color-layer-2: var(--bg-layer-2);
+  --background-color-layer-2-hover: var(--bg-layer-2-hover);
+  --background-color-layer-2-active: var(--bg-layer-2-active);
+  --background-color-layer-2-selected: var(--bg-layer-2-selected);
+  --background-color-layer-3: var(--bg-layer-3);
+  --background-color-layer-3-hover: var(--bg-layer-3-hover);
+  --background-color-layer-3-active: var(--bg-layer-3-active);
+  --background-color-layer-3-selected: var(--bg-layer-3-selected);
+  --background-color-layer-transparent: var(--bg-layer-transparent);
+  --background-color-layer-transparent-hover: var(--bg-layer-transparent-hover);
+  --background-color-layer-transparent-active: var(--bg-layer-transparent-active);
+  --background-color-layer-transparent-selected: var(--bg-layer-transparent-selected);
+  --background-color-layer-disabled: var(--bg-layer-disabled);
+  --background-color-accent-primary: var(--bg-accent-primary);
+  --background-color-accent-primary-hover: var(--bg-accent-primary-hover);
+  --background-color-accent-primary-active: var(--bg-accent-primary-active);
+  --background-color-accent-subtle: var(--bg-accent-subtle);
+  --background-color-accent-subtle-hover: var(--bg-accent-subtle-hover);
+  --background-color-accent-subtle-active: var(--bg-accent-subtle-active);
+  --background-color-success-primary: var(--bg-success-primary);
+  --background-color-success-subtle: var(--bg-success-subtle);
+  --background-color-success-subtle-1: var(--bg-success-subtle-1);
+  --background-color-warning-primary: var(--bg-warning-primary);
+  --background-color-warning-subtle: var(--bg-warning-subtle);
+  --background-color-danger-primary: var(--bg-danger-primary);
+  --background-color-danger-primary-hover: var(--bg-danger-primary-hover);
+  --background-color-danger-primary-active: var(--bg-danger-primary-active);
+  --background-color-danger-primary-selected: var(--bg-danger-primary-selected);
+  --background-color-danger-subtle: var(--bg-danger-subtle);
+  --background-color-danger-subtle-hover: var(--bg-danger-subtle-hover);
+  --background-color-danger-subtle-active: var(--bg-danger-subtle-active);
+  --background-color-danger-subtle-selected: var(--bg-danger-subtle-selected);
+  --background-color-danger-transparent: var(--bg-danger-transparent);
+  --background-color-danger-transparent-hover: var(--bg-danger-transparent-hover);
+  --background-color-danger-transparent-active: var(--bg-danger-transparent-active);
+  --background-color-danger-transparent-selected: var(--bg-danger-transparent-selected);
+  --background-color-backdrop: var(--bg-backdrop);
+  --background-color-inverse: var(--bg-inverse);
   /* Border colors */
-  --border-color-subtle: var(--color-neutral-400);
-  --border-color-subtle-1: var(--color-neutral-500);
-  --border-color-strong: var(--color-neutral-600);
-  --border-color-strong-1: var(--color-neutral-700);
-  --border-color-inverse: var(--color-neutral-white);
-  --border-color-disabled: var(--color-neutral-300);
-  --border-color-accent-strong: var(--color-brand-default);
-  --border-color-accent-subtle: var(--color-brand-300);
-  --border-color-success-strong: var(--color-green-700);
-  --border-color-success-subtle: var(--color-green-300);
-  --border-color-warning-strong: var(--color-amber-700);
-  --border-color-warning-subtle: var(--color-amber-400);
-  --border-color-danger-strong: var(--color-red-700);
-  --border-color-danger-subtle: var(--color-red-400);
-
+  --border-color-subtle: var(--border-subtle);
+  --border-color-subtle-1: var(--border-subtle-1);
+  --border-color-strong: var(--border-strong);
+  --border-color-strong-1: var(--border-strong-1);
+  --border-color-inverse: var(--border-inverse);
+  --border-color-disabled: var(--border-disabled);
+  --border-color-accent-strong: var(--border-accent-strong);
+  --border-color-accent-subtle: var(--border-accent-subtle);
+  --border-color-success-strong: var(--border-success-strong);
+  --border-color-success-subtle: var(--border-success-subtle);
+  --border-color-warning-strong: var(--border-warning-strong);
+  --border-color-warning-subtle: var(--border-warning-subtle);
+  --border-color-danger-strong: var(--border-danger-strong);
+  --border-color-danger-subtle: var(--border-danger-subtle);
   /* Outline colors */
   --outline-color-subtle: var(--border-color-subtle);
   --outline-color-subtle-1: var(--border-color-subtle-1);
@@ -372,7 +776,6 @@
   --outline-color-warning-subtle: var(--border-color-warning-subtle);
   --outline-color-danger-strong: var(--border-color-danger-strong);
   --outline-color-danger-subtle: var(--border-color-danger-subtle);
-
   /* Ring colors */
   --ring-color-subtle: var(--border-color-subtle);
   --ring-color-subtle-1: var(--border-color-subtle-1);
@@ -388,28 +791,23 @@
   --ring-color-warning-subtle: var(--border-color-warning-subtle);
   --ring-color-danger-strong: var(--border-color-danger-strong);
   --ring-color-danger-subtle: var(--border-color-danger-subtle);
-
   /* Text colors */
-  --text-color-primary: var(--color-neutral-1200);
-  --text-color-secondary: var(--color-neutral-1100);
-  --text-color-tertiary: var(--color-neutral-1000);
-  --text-color-placeholder: var(--color-neutral-900);
-  --text-color-disabled: var(--color-neutral-800);
-  --text-color-accent-primary: var(--color-brand-default);
-  --text-color-accent-secondary: var(--color-brand-700);
-  --text-color-on-color: var(--color-neutral-100);
-  --text-color-on-color-disabled: var(--color-alpha-black-400);
-  --text-color-inverse: var(--color-neutral-white);
-  --text-color-success: var(--color-green-700);
-  --text-color-success-primary: var(--color-green-900);
-  --text-color-success-secondary: var(--color-green-700);
-  --text-color-warning: var(--color-amber-700);
-  --text-color-warning-primary: var(--color-amber-900);
-  --text-color-warning-secondary: var(--color-amber-700);
-  --text-color-danger: var(--color-red-700);
-  --text-color-danger-primary: var(--color-red-900);
-  --text-color-danger-secondary: var(--color-red-700);
-
+  --text-color-primary: var(--txt-primary);
+  --text-color-secondary: var(--txt-secondary);
+  --text-color-tertiary: var(--txt-tertiary);
+  --text-color-placeholder: var(--txt-placeholder);
+  --text-color-disabled: var(--txt-disabled);
+  --text-color-accent-primary: var(--txt-accent-primary);
+  --text-color-accent-secondary: var(--txt-accent-secondary);
+  --text-color-on-color: var(--txt-on-color);
+  --text-color-on-color-disabled: var(--txt-on-color-disabled);
+  --text-color-inverse: var(--txt-inverse);
+  --text-color-success-primary: var(--txt-success-primary);
+  --text-color-success-secondary: var(--txt-success-secondary);
+  --text-color-warning-primary: var(--txt-warning-primary);
+  --text-color-warning-secondary: var(--txt-warning-secondary);
+  --text-color-danger-primary: var(--txt-danger-primary);
+  --text-color-danger-secondary: var(--txt-danger-secondary);
   /* Stroke colors */
   --stroke-primary: var(--text-color-primary);
   --stroke-secondary: var(--text-color-secondary);
@@ -430,7 +828,6 @@
   --stroke-danger: var(--text-color-danger);
   --stroke-danger-primary: var(--text-color-danger-primary);
   --stroke-danger-secondary: var(--text-color-danger-secondary);
-
   /* Fill colors */
   --fill-primary: var(--text-color-primary);
   --fill-secondary: var(--text-color-secondary);
@@ -451,380 +848,89 @@
   --fill-danger: var(--text-color-danger);
   --fill-danger-primary: var(--text-color-danger-primary);
   --fill-danger-secondary: var(--text-color-danger-secondary);
-
   /* Icon colors */
-  --text-color-icon-primary: var(--color-neutral-1200);
-  --text-color-icon-accent-subtle: var(--color-brand-500);
-  --text-color-icon-accent-primary: var(--color-brand-default);
-  --text-color-icon-danger-primary: var(--color-red-900);
-  --text-color-icon-danger-secondary: var(--color-red-700);
-  --text-color-icon-success-primary: var(--color-green-900);
-  --text-color-icon-success-secondary: var(--color-green-700);
-  --text-color-icon-warning-primary: var(--color-amber-900);
-  --text-color-icon-warning-secondary: var(--color-amber-700);
-  --text-color-icon-accent-primary-inverse: var(--color-brand-900);
-  --text-color-icon-accent-secondary: var(--color-brand-1200);
-  --text-color-icon-secondary: var(--color-neutral-1100);
-  --text-color-icon-tertiary: var(--color-neutral-900);
-  --text-color-icon-placeholder: var(--color-neutral-800);
-  --text-color-icon-disabled: var(--color-neutral-700);
-  --text-color-icon-danger: var(--color-red-700);
-  --text-color-icon-on-color: var(--color-neutral-white);
-  --text-color-icon-on-color-disabled: var(--color-alpha-black-400);
-  --text-color-icon-inverse: var(--color-neutral-white);
-
+  --text-color-icon-primary: var(--txt-icon-primary);
+  --text-color-icon-accent-subtle: var(--txt-icon-accent-subtle);
+  --text-color-icon-accent-primary: var(--txt-icon-accent-primary);
+  --text-color-icon-danger-primary: var(--txt-icon-danger-primary);
+  --text-color-icon-danger-secondary: var(--txt-icon-danger-secondary);
+  --text-color-icon-success-primary: var(--txt-icon-success-primary);
+  --text-color-icon-success-secondary: var(--txt-icon-success-secondary);
+  --text-color-icon-warning-primary: var(--txt-icon-warning-primary);
+  --text-color-icon-warning-secondary: var(--txt-icon-warning-secondary);
+  --text-color-icon-accent-primary-inverse: var(--txt-icon-accent-primary-inverse);
+  --text-color-icon-accent-secondary: var(--txt-icon-accent-secondary);
+  --text-color-icon-secondary: var(--txt-icon-secondary);
+  --text-color-icon-tertiary: var(--txt-icon-tertiary);
+  --text-color-icon-placeholder: var(--txt-icon-placeholder);
+  --text-color-icon-disabled: var(--txt-icon-disabled);
+  --text-color-icon-danger: var(--txt-icon-danger);
+  --text-color-icon-on-color: var(--txt-icon-on-color);
+  --text-color-icon-on-color-disabled: var(--txt-icon-on-color-disabled);
+  --text-color-icon-inverse: var(--txt-icon-inverse);
   /* Link colors */
-  --text-color-link-primary: var(--color-brand-default);
-  --text-color-link-primary-hover: var(--color-brand-900);
-  --text-color-link-secondary: var(--color-neutral-900);
-
-  /* Label colors */
-  --color-label-indigo-bg: var(--extended-color-indigo-100);
-  --color-label-indigo-bg-strong: var(--extended-color-indigo-700);
-  --color-label-indigo-hover: var(--extended-color-indigo-300);
-  --color-label-indigo-icon: var(--extended-color-indigo-700);
-  --color-label-indigo-text: var(--extended-color-indigo-700);
-  --color-label-indigo-border: var(--extended-color-indigo-700);
-  --color-label-indigo-focus: var(--extended-color-indigo-500);
-  --color-label-emerald-bg: var(--extended-color-emerald-50);
-  --color-label-emerald-bg-strong: var(--extended-color-emerald-600);
-  --color-label-emerald-hover: var(--extended-color-emerald-200);
-  --color-label-emerald-icon: var(--extended-color-emerald-600);
-  --color-label-emerald-text: var(--extended-color-emerald-800);
-  --color-label-emerald-border: var(--extended-color-emerald-800);
-  --color-label-emerald-focus: var(--extended-color-emerald-700);
-  --color-label-grey-bg: var(--extended-color-grey-50);
-  --color-label-grey-bg-strong: var(--extended-color-grey-700);
-  --color-label-grey-hover: var(--extended-color-grey-100);
-  --color-label-grey-icon: var(--extended-color-grey-700);
-  --color-label-grey-text: var(--extended-color-grey-700);
-  --color-label-grey-border: var(--extended-color-grey-700);
-  --color-label-grey-focus: var(--extended-color-grey-500);
-  --color-label-crimson-bg: var(--extended-color-crimson-50);
-  --color-label-crimson-bg-strong: var(--extended-color-crimson-700);
-  --color-label-crimson-hover: var(--extended-color-crimson-100);
-  --color-label-crimson-icon: var(--extended-color-crimson-700);
-  --color-label-crimson-text: var(--extended-color-crimson-700);
-  --color-label-crimson-border: var(--extended-color-crimson-700);
-  --color-label-crimson-focus: var(--extended-color-crimson-500);
-  --color-label-yellow-bg: var(--extended-color-yellow-50);
-  --color-label-yellow-bg-strong: var(--extended-color-yellow-600);
-  --color-label-yellow-hover: var(--extended-color-yellow-100);
-  --color-label-yellow-icon: var(--extended-color-yellow-600);
-  --color-label-yellow-text: var(--extended-color-yellow-600);
-  --color-label-yellow-border: var(--extended-color-yellow-600);
-  --color-label-yellow-focus: var(--extended-color-yellow-400);
-
-  /* Illustration colors */
-  --illustration-fill-primary: var(--color-neutral-white);
-  --illustration-fill-secondary: var(--color-neutral-200);
-  --illustration-fill-tertiary: var(--color-neutral-400);
-  --illustration-fill-quaternary: var(--color-neutral-700);
-  --illustration-stroke-primary: var(--color-neutral-700);
-  --illustration-stroke-secondary: var(--color-neutral-800);
-  --illustration-stroke-tertiary: var(--color-neutral-1200);
-
+  --text-color-link-primary: var(--txt-link-primary);
+  --text-color-link-primary-hover: var(--txt-link-primary-hover);
+  --text-color-link-secondary: var(--txt-link-secondary);
   /* Neutral plan colors */
-  --text-color-plans-neutral-primary: var(--color-neutral-1000);
-  --text-color-plans-neutral-color: var(--color-neutral-100);
-  --background-color-plans-neutral-subtle: var(--color-neutral-400);
-  --background-color-plans-neutral-solid: var(--color-neutral-1200);
-
+  --text-color-plans-neutral-primary: var(--txt-plans-neutral-primary);
+  --text-color-plans-neutral-color: var(--txt-plans-neutral-color);
+  --background-color-plans-neutral-subtle: var(--bg-plans-neutral-subtle);
+  --background-color-plans-neutral-solid: var(--bg-plans-neutral-solid);
   /* Brand plan colors */
-  --text-color-plans-brand-primary: var(--color-brand-1200);
-  --text-color-plans-brand-color: var(--color-neutral-100);
-  --background-color-plans-brand-subtle: var(--color-brand-200);
-  --background-color-plans-brand-solid: var(--color-brand-1200);
-}
-
-@layer theme {
-  :root,
-  :host {
-    /* ---------- Dark mode color tokens ---------- */
-    @variant dark {
-      /* Neutral colors */
-      --color-neutral-black: oklch(0.1689 0.0021 230.81);
-      --color-neutral-100: oklch(0.1932 0.002 230.81);
-      --color-neutral-200: oklch(0.2158 0.0025 230.82);
-      --color-neutral-300: oklch(0.2378 0.0029 230.83);
-      --color-neutral-400: oklch(0.2593 0.0033 230.84);
-      --color-neutral-500: oklch(0.3011 0.0041 230.85);
-      --color-neutral-600: oklch(0.3415 0.0049 230.86);
-      --color-neutral-700: oklch(0.3999 0.0059 230.87);
-      --color-neutral-800: oklch(0.5989 0.0096 230.88);
-      --color-neutral-900: oklch(0.6835 0.0074 230.81);
-      --color-neutral-1000: oklch(0.7655 0.0054 230.76);
-      --color-neutral-1100: oklch(0.8455 0.0035 230.72);
-      --color-neutral-1200: oklch(0.9235 0.001733 230.6853);
-      --color-neutral-white: oklch(0.9702 0 0);
-
-      /* Brand colors */
-      --color-brand-100: oklch(0.2029 0.03 232.24);
-      --color-brand-200: oklch(0.2513 0.0418 234.6);
-      --color-brand-300: oklch(0.3208 0.05806 236.44);
-      --color-brand-400: oklch(0.4088 0.077702 237.13);
-      --color-brand-500: oklch(0.4511 0.087024 237.37);
-      --color-brand-700: oklch(0.7408 0.100309 233.89);
-      --color-brand-800: oklch(0.8318 0.065614 232.07);
-      --color-brand-900: oklch(0.8969 0.040089 231.35);
-      --color-brand-1000: oklch(0.9409 0.022883 231.01);
-      --color-brand-1100: oklch(0.9704 0.011421 230.82);
-      --color-brand-1200: oklch(0.9856 0.005 228.82);
-      --color-brand-default: oklch(0.6311 0.126281 238.01);
-
-      /* Green colors */
-      --color-green-100: oklch(0.2721 0.067322 152.52);
-      --color-green-200: oklch(0.3935 0.0957 152.28);
-      --color-green-300: oklch(0.4468 0.1187 151.4);
-      --color-green-400: oklch(0.5296 0.149485 148.9899);
-      --color-green-500: oklch(0.632 0.185972 147.3695);
-      --color-green-600: oklch(0.7289 0.2119 147.82);
-      --color-green-700: oklch(0.7914 0.2091 151.66);
-      --color-green-800: oklch(0.8704 0.149 154.62);
-      --color-green-900: oklch(0.9258 0.0845 155.86);
-      --color-green-1000: oklch(0.9624 0.0434 156.74);
-      --color-green-1100: oklch(0.9819 0.0181 155.83);
-
-      /* Amber colors */
-      --color-amber-100: oklch(0.3042 0.0853 45.16);
-      --color-amber-200: oklch(0.4149 0.1126 45.88);
-      --color-amber-300: oklch(0.4747 0.135757 44.9806);
-      --color-amber-400: oklch(0.557 0.158291 45.3594);
-      --color-amber-500: oklch(0.6671 0.1685 53.38);
-      --color-amber-600: oklch(0.7724 0.172798 65.367);
-      --color-amber-700: oklch(0.829 0.1712 81.04);
-      --color-amber-800: oklch(0.8781 0.1688 91.86);
-      --color-amber-900: oklch(0.9244 0.1203 95.85);
-      --color-amber-1000: oklch(0.9617 0.0592 95.89);
-      --color-amber-1100: oklch(0.9869 0.0214 95.28);
-
-      /* Red colors */
-      --color-red-100: oklch(0.2615 0.085 24.41);
-      --color-red-200: oklch(0.3967 0.1408 25.71);
-      --color-red-300: oklch(0.4446 0.1774 26.79);
-      --color-red-400: oklch(0.5095 0.208583 28.513);
-      --color-red-500: oklch(0.583 0.238666 28.4765);
-      --color-red-600: oklch(0.6378 0.2373 25.44);
-      --color-red-700: oklch(0.7022 0.1892 22.23);
-      --color-red-800: oklch(0.8053 0.1109 19.78);
-      --color-red-900: oklch(0.8834 0.0616 18.39);
-      --color-red-1000: oklch(0.9365 0.032 17.74);
-      --color-red-1100: oklch(0.9705 0.0129 17.38);
-
-      /* Scrollbar colors */
-      --color-scrollbar-thumb: var(--color-alpha-white-200);
-      --color-scrollbar-thumb-surface-hover: var(--color-alpha-white-300);
-      --color-scrollbar-thumb-hover: var(--color-alpha-white-400);
-      --color-scrollbar-thumb-active: var(--color-alpha-white-500);
-
-      /* -------------------- Dark mode derived colors -------------------- */
-      /* Background colors */
-      --background-color-canvas: var(--color-neutral-black);
-      --background-color-surface-1: var(--color-neutral-100);
-      --background-color-surface-2: var(--color-neutral-200);
-      --background-color-layer-1: var(--color-neutral-200);
-      --background-color-layer-1-hover: var(--color-neutral-300);
-      --background-color-layer-1-active: var(--color-neutral-400);
-      --background-color-layer-1-selected: var(--color-neutral-400);
-      --background-color-layer-2: var(--color-neutral-300);
-      --background-color-layer-2-hover: var(--color-neutral-400);
-      --background-color-layer-2-active: var(--color-neutral-500);
-      --background-color-layer-2-selected: var(--color-neutral-500);
-      --background-color-layer-3: var(--color-neutral-400);
-      --background-color-layer-3-hover: var(--color-neutral-500);
-      --background-color-layer-3-active: var(--color-neutral-600);
-      --background-color-layer-3-selected: var(--color-neutral-600);
-      --background-color-layer-transparent: var(--color-alpha-black-0);
-      --background-color-layer-transparent-hover: var(--color-alpha-white-100);
-      --background-color-layer-transparent-active: var(--color-alpha-white-200);
-      --background-color-layer-transparent-selected: var(--color-alpha-white-300);
-      --background-color-layer-disabled: var(--color-neutral-700);
-      --background-color-accent-primary: var(--color-brand-default);
-      --background-color-accent-primary-hover: var(--color-brand-500);
-      --background-color-accent-primary-active: var(--color-brand-400);
-      --background-color-accent-subtle: var(--color-brand-100);
-      --background-color-accent-subtle-hover: var(--color-brand-200);
-      --background-color-accent-subtle-active: var(--color-brand-300);
-      --background-color-success-primary: var(--color-green-700);
-      --background-color-success-subtle: var(--color-green-100);
-      --background-color-success-subtle-1: var(--color-green-100);
-      --background-color-warning-primary: var(--color-amber-600);
-      --background-color-warning-subtle: var(--color-amber-100);
-      --background-color-danger-primary: var(--color-red-300);
-      --background-color-danger-primary-hover: var(--color-red-400);
-      --background-color-danger-primary-active: var(--color-red-500);
-      --background-color-danger-primary-selected: var(--color-red-500);
-      --background-color-danger-subtle: var(--color-red-100);
-      --background-color-danger-subtle-hover: var(--color-red-200);
-      --background-color-danger-subtle-active: var(--color-red-300);
-      --background-color-danger-subtle-selected: var(--color-red-300);
-      --background-color-danger-transparent: var(--color-red-100);
-      --background-color-danger-transparent-hover: var(--color-red-100);
-      --background-color-danger-transparent-active: var(--color-red-100);
-      --background-color-danger-transparent-selected: var(--color-red-100);
-      --background-color-backdrop: var(--color-alpha-black-1000);
-      --background-color-inverse: var(--color-alpha-white-1000);
-
-      /* Border colors */
-      --border-color-subtle: var(--color-neutral-400);
-      --border-color-subtle-1: var(--color-neutral-500);
-      --border-color-strong: var(--color-neutral-600);
-      --border-color-strong-1: var(--color-neutral-700);
-      --border-color-inverse: var(--color-neutral-100);
-      --border-color-disabled: var(--color-neutral-300);
-      --border-color-accent-strong: var(--color-brand-default);
-      --border-color-accent-subtle: var(--color-brand-300);
-      --border-color-success-strong: var(--color-green-400);
-      --border-color-success-subtle: var(--color-green-200);
-      --border-color-warning-strong: var(--color-amber-400);
-      --border-color-warning-subtle: var(--color-amber-200);
-      --border-color-danger-strong: var(--color-red-400);
-      --border-color-danger-subtle: var(--color-red-200);
-
-      /* Text colors */
-      --text-color-primary: var(--color-neutral-1200);
-      --text-color-secondary: var(--color-neutral-1100);
-      --text-color-tertiary: var(--color-neutral-1000);
-      --text-color-placeholder: var(--color-neutral-900);
-      --text-color-disabled: var(--color-neutral-800);
-      --text-color-accent-primary: var(--color-brand-default);
-      --text-color-accent-secondary: var(--color-brand-700);
-      --text-color-on-color: var(--color-neutral-1200);
-      --text-color-on-color-disabled: var(--color-alpha-white-400);
-      --text-color-inverse: var(--color-neutral-black);
-      --text-color-success: var(--color-green-700);
-      --text-color-success-primary: var(--color-green-900);
-      --text-color-success-secondary: var(--color-green-700);
-      --text-color-warning: var(--color-amber-700);
-      --text-color-warning-primary: var(--color-amber-900);
-      --text-color-warning-secondary: var(--color-amber-700);
-      --text-color-danger: var(--color-red-700);
-      --text-color-danger-primary: var(--color-red-900);
-      --text-color-danger-secondary: var(--color-red-700);
-
-      /* Icon colors */
-      --text-color-icon-primary: var(--color-neutral-1200);
-      --text-color-icon-accent-subtle: var(--color-brand-700);
-      --text-color-icon-accent-primary: var(--color-brand-default);
-      --text-color-icon-accent-primary-inverse: var(--color-brand-900);
-      --text-color-icon-accent-secondary: var(--color-brand-1200);
-      --text-color-icon-danger-primary: var(--color-red-900);
-      --text-color-icon-danger-secondary: var(--color-red-700);
-      --text-color-icon-success-primary: var(--color-green-900);
-      --text-color-icon-success-secondary: var(--color-green-700);
-      --text-color-icon-warning-primary: var(--color-amber-900);
-      --text-color-icon-warning-secondary: var(--color-amber-700);
-      --text-color-icon-secondary: var(--color-neutral-1100);
-      --text-color-icon-tertiary: var(--color-neutral-1000);
-      --text-color-icon-placeholder: var(--color-neutral-800);
-      --text-color-icon-disabled: var(--color-neutral-700);
-      --text-color-icon-danger: var(--color-red-700);
-      --text-color-icon-on-color: var(--color-neutral-white);
-      --text-color-icon-on-color-disabled: var(--color-alpha-white-400);
-      --text-color-icon-inverse: var(--color-neutral-black);
-
-      /* Link colors */
-      --text-color-link-primary: var(--color-brand-default);
-      --text-color-link-primary-hover: var(--color-brand-700);
-      --text-color-link-secondary: var(--color-neutral-1100);
-
-      /* Label colors */
-      --color-label-indigo-bg: var(--extended-color-indigo-800);
-      --color-label-indigo-bg-strong: var(--extended-color-indigo-500);
-      --color-label-indigo-hover: var(--extended-color-indigo-700);
-      --color-label-indigo-icon: var(--extended-color-indigo-500);
-      --color-label-indigo-text: var(--extended-color-indigo-500);
-      --color-label-indigo-border: var(--extended-color-indigo-500);
-      --color-label-indigo-focus: var(--extended-color-indigo-400);
-      --color-label-emerald-bg: var(--extended-color-emerald-700);
-      --color-label-emerald-bg-strong: var(--extended-color-emerald-600);
-      --color-label-emerald-hover: var(--extended-color-emerald-800);
-      --color-label-emerald-icon: var(--extended-color-emerald-600);
-      --color-label-emerald-text: var(--extended-color-emerald-400);
-      --color-label-emerald-border: var(--extended-color-emerald-400);
-      --color-label-emerald-focus: var(--extended-color-emerald-700);
-      --color-label-grey-bg: var(--extended-color-grey-800);
-      --color-label-grey-bg-strong: var(--extended-color-grey-500);
-      --color-label-grey-hover: var(--extended-color-grey-700);
-      --color-label-grey-icon: var(--extended-color-grey-500);
-      --color-label-grey-text: var(--extended-color-grey-500);
-      --color-label-grey-border: var(--extended-color-grey-500);
-      --color-label-grey-focus: var(--extended-color-grey-400);
-      --color-label-crimson-bg: var(--extended-color-crimson-800);
-      --color-label-crimson-bg-strong: var(--extended-color-crimson-500);
-      --color-label-crimson-hover: var(--extended-color-crimson-700);
-      --color-label-crimson-icon: var(--extended-color-crimson-500);
-      --color-label-crimson-text: var(--extended-color-crimson-500);
-      --color-label-crimson-border: var(--extended-color-crimson-500);
-      --color-label-crimson-focus: var(--extended-color-crimson-400);
-      --color-label-yellow-bg: var(--extended-color-yellow-900);
-      --color-label-yellow-bg-strong: var(--extended-color-yellow-500);
-      --color-label-yellow-hover: var(--extended-color-yellow-800);
-      --color-label-yellow-icon: var(--extended-color-yellow-500);
-      --color-label-yellow-text: var(--extended-color-yellow-500);
-      --color-label-yellow-border: var(--extended-color-yellow-500);
-      --color-label-yellow-focus: var(--extended-color-yellow-400);
-
-      /* Illustration colors */
-      --illustration-fill-primary: var(--color-neutral-400);
-      --illustration-fill-secondary: var(--color-neutral-500);
-      --illustration-fill-tertiary: var(--color-neutral-700);
-      --illustration-fill-quaternary: var(--color-neutral-700);
-      --illustration-stroke-primary: var(--color-neutral-700);
-      --illustration-stroke-secondary: var(--color-neutral-800);
-      --illustration-stroke-tertiary: var(--color-neutral-1000);
-
-      /* Neutral plan colors */
-      --text-color-plans-neutral-primary: var(--color-neutral-1000);
-      --text-color-plans-neutral-color: var(--color-neutral-100);
-      --background-color-plans-neutral-subtle: var(--color-neutral-500);
-      --background-color-plans-neutral-solid: var(--color-neutral-1100);
-
-      /* Brand plan colors */
-      --text-color-plans-brand-primary: var(--color-brand-1000);
-      --text-color-plans-brand-color: var(--color-brand-100);
-      --background-color-plans-brand-subtle: var(--color-brand-200);
-      --background-color-plans-brand-solid: var(--colo-brand-1100);
-    }
-
-    /* -------------------- Dark high contrast mode derived colors -------------------- */
-    @variant dark-high-contrast {
-      /* Border colors */
-      --border-color-subtle: var(--color-neutral-1200);
-      --border-color-subtle-1: var(--color-neutral-1100);
-      --border-color-strong: var(--color-neutral-1000);
-      --border-color-strong-1: var(--color-neutral-900);
-      --border-color-inverse: var(--color-neutral-white);
-      --border-color-disabled: var(--color-neutral-700);
-      --border-color-accent-strong: var(--color-brand-default);
-      --border-color-accent-subtle: var(--color-brand-300);
-      --border-color-success-strong: var(--color-green-400);
-      --border-color-success-subtle: var(--color-green-200);
-      --border-color-warning-strong: var(--color-amber-400);
-      --border-color-warning-subtle: var(--color-amber-200);
-      --border-color-danger-strong: var(--color-red-400);
-      --border-color-danger-subtle: var(--color-red-200);
-    }
-
-    /* -------------------- Light high contrast mode derived colors -------------------- */
-    @variant light-high-contrast {
-      /* Border colors */
-      --border-color-subtle: var(--color-neutral-1200);
-      --border-color-subtle-1: var(--color-neutral-1100);
-      --border-color-strong: var(--color-neutral-1000);
-      --border-color-strong-1: var(--color-neutral-900);
-      --border-color-inverse: var(--color-neutral-black);
-      --border-color-disabled: var(--color-neutral-700);
-      --border-color-accent-strong: var(--color-brand-default);
-      --border-color-accent-subtle: var(--color-brand-300);
-      --border-color-success-strong: var(--color-green-700);
-      --border-color-success-subtle: var(--color-green-600);
-      --border-color-warning-strong: var(--color-amber-700);
-      --border-color-warning-subtle: var(--color-amber-400);
-      --border-color-danger-strong: var(--color-red-700);
-      --border-color-danger-subtle: var(--color-red-400);
-    }
-  }
+  --text-color-plans-brand-primary: var(--txt-plans-brand-primary);
+  --text-color-plans-brand-color: var(--txt-plans-brand-color);
+  --background-color-plans-brand-subtle: var(--bg-plans-brand-subtle);
+  --background-color-plans-brand-solid: var(--bg-plans-brand-solid);
+  /* Label colors */
+  --color-label-indigo-bg: var(--label-indigo-bg);
+  --color-label-indigo-bg-strong: var(--label-indigo-bg-strong);
+  --color-label-indigo-hover: var(--label-indigo-hover);
+  --color-label-indigo-icon: var(--label-indigo-icon);
+  --color-label-indigo-text: var(--label-indigo-text);
+  --color-label-indigo-border: var(--label-indigo-border);
+  --color-label-indigo-focus: var(--label-indigo-focus);
+  --color-label-emerald-bg: var(--label-emerald-bg);
+  --color-label-emerald-bg-strong: var(--label-emerald-bg-strong);
+  --color-label-emerald-hover: var(--label-emerald-hover);
+  --color-label-emerald-icon: var(--label-emerald-icon);
+  --color-label-emerald-text: var(--label-emerald-text);
+  --color-label-emerald-border: var(--label-emerald-border);
+  --color-label-emerald-focus: var(--label-emerald-focus);
+  --color-label-grey-bg: var(--label-grey-bg);
+  --color-label-grey-bg-strong: var(--label-grey-bg-strong);
+  --color-label-grey-hover: var(--label-grey-hover);
+  --color-label-grey-icon: var(--label-grey-icon);
+  --color-label-grey-text: var(--label-grey-text);
+  --color-label-grey-border: var(--label-grey-border);
+  --color-label-grey-focus: var(--label-grey-focus);
+  --color-label-crimson-bg: var(--label-crimson-bg);
+  --color-label-crimson-bg-strong: var(--label-crimson-bg-strong);
+  --color-label-crimson-hover: var(--label-crimson-hover);
+  --color-label-crimson-icon: var(--label-crimson-icon);
+  --color-label-crimson-text: var(--label-crimson-text);
+  --color-label-crimson-border: var(--label-crimson-border);
+  --color-label-crimson-focus: var(--label-crimson-focus);
+  --color-label-yellow-bg: var(--label-yellow-bg);
+  --color-label-yellow-bg-strong: var(--label-yellow-bg-strong);
+  --color-label-yellow-hover: var(--label-yellow-hover);
+  --color-label-yellow-icon: var(--label-yellow-icon);
+  --color-label-yellow-text: var(--label-yellow-text);
+  --color-label-yellow-border: var(--label-yellow-border);
+  --color-label-yellow-focus: var(--label-yellow-focus);
+  /* ---------- Priority colors ---------- */
+  /* Text */
+  --text-color-priority-urgent: var(--priority-urgent);
+  --text-color-priority-high: var(--priority-high);
+  --text-color-priority-medium: var(--priority-medium);
+  --text-color-priority-low: var(--priority-low);
+  --text-color-priority-none: var(--priority-none);
+  /* Border */
+  --border-color-priority-urgent: var(--priority-urgent);
+  --border-color-priority-high: var(--priority-high);
+  --border-color-priority-medium: var(--priority-medium);
+  --border-color-priority-low: var(--priority-low);
+  --border-color-priority-none: var(--priority-none);
 }
 
 /* ---------- Typography tokens ---------- */
@@ -1115,24 +1221,7 @@
   --text-caption-xs-bold--font-weight: var(--font-weight-bold);
 }
 
-@utility p-page-x {
-  padding: 1.35rem;
-}
-
-@utility px-page-x {
-  padding-left: 1.35rem;
-  padding-right: 1.35rem;
-}
-
-@utility py-page-y {
-  padding-top: 1.35rem;
-  padding-bottom: 1.35rem;
-}
-
-@utility pt-page-y {
-  padding-top: 1.35rem;
-}
-
+/* -------------------- Utility classes -------------------- */
 @utility scrollbar-hide {
   -ms-overflow-style: none;
   scrollbar-width: none;
diff --git a/packages/ui/src/auth-form/auth-confirm-password-input.tsx b/packages/ui/src/auth-form/auth-confirm-password-input.tsx
index 5c7501559..92129c928 100644
--- a/packages/ui/src/auth-form/auth-confirm-password-input.tsx
+++ b/packages/ui/src/auth-form/auth-confirm-password-input.tsx
@@ -73,7 +73,7 @@ export function AuthConfirmPasswordInput({
         onBlur={handleBlur}
         autoComplete="on"
       />
-      {confirmPassword && passwordsMatch && <p className="text-13 text-green-500">Passwords match</p>}
+      {confirmPassword && passwordsMatch && <p className="text-13 text-success-primary">Passwords match</p>}
     </div>
   );
 }
diff --git a/packages/ui/src/auth-form/auth-input.tsx b/packages/ui/src/auth-form/auth-input.tsx
index 526cd4f35..42ae865ee 100644
--- a/packages/ui/src/auth-form/auth-input.tsx
+++ b/packages/ui/src/auth-form/auth-input.tsx
@@ -42,7 +42,7 @@ export function AuthInput({
           className={cn(
             "rounded-md disable-autofill-style h-6 w-full placeholder:text-14 placeholder:text-placeholder p-0 border-none",
             {
-              "border-red-500": error,
+              "border-danger-strong": error,
             },
             className
           )}
@@ -58,7 +58,7 @@ export function AuthInput({
         )}
       </div>
 
-      {error && <p className={cn("text-13 text-red-500", errorClassName)}>{error}</p>}
+      {error && <p className={cn("text-13 text-danger-primary", errorClassName)}>{error}</p>}
     </div>
   );
 }
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 73d1fee7f..bb7e0acbe 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -81,14 +81,14 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-green-300`,
   },
   "accent-success": {
-    default: `text-green-500 bg-green-50`,
-    hover: `hover:bg-green-100 hover:text-green-600`,
-    disabled: `cursor-not-allowed !text-green-300`,
+    default: `text-success-primary bg-green-50`,
+    hover: `hover:bg-green-100 hover:text-success-primary`,
+    disabled: `cursor-not-allowed text-success-secondary!`,
   },
   "outline-success": {
-    default: `text-green-500 bg-surface-1 border border-green-500`,
-    hover: `hover:text-green-600 hover:bg-green-50`,
-    disabled: `cursor-not-allowed !text-green-300 border-green-300`,
+    default: `text-success-primary bg-surface-1 border border-success-strong`,
+    hover: `hover:text-success-primary hover:bg-green-50`,
+    disabled: `cursor-not-allowed text-success-secondary! border-success-subtle`,
   },
 
   warning: {
@@ -113,14 +113,14 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-red-300`,
   },
   "accent-destructive": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:bg-red-100 hover:text-red-600`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    default: `text-danger-primary bg-red-50`,
+    hover: `hover:bg-red-100 hover:text-danger-primary`,
+    disabled: `cursor-not-allowed text-danger-secondary!`,
   },
   "outline-destructive": {
-    default: `text-red-500 bg-surface-1 border border-red-500`,
-    hover: `hover:text-red-600 hover:bg-red-50`,
-    disabled: `cursor-not-allowed !text-red-300 border-red-300`,
+    default: `text-danger-primary bg-surface-1 border border-danger-strong`,
+    hover: `hover:text-danger-primary hover:bg-red-50`,
+    disabled: `cursor-not-allowed text-danger-secondary! border-danger-subtle`,
   },
 };
 
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index af923cdf5..e54367fe0 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -74,27 +74,27 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
   },
   "accent-danger": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:text-red-600 hover:bg-red-100`,
-    pressed: `focus:text-red-500 focus:bg-red-100`,
+    default: `text-danger-primary bg-red-50`,
+    hover: `hover:text-danger-primary hover:bg-red-100`,
+    pressed: `focus:text-danger-primary focus:bg-red-100`,
     disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "outline-danger": {
-    default: `bg-layer-2 text-danger border border-danger-strong`,
+    default: `bg-layer-2 text-danger-primary border border-danger-strong`,
     hover: `hover:bg-danger-subtle`,
     pressed: `focus:bg-danger-subtle-hover`,
     disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
   },
   "link-danger": {
-    default: `text-red-500 bg-surface-1`,
-    hover: `hover:text-red-400`,
-    pressed: `focus:text-red-400`,
+    default: `text-danger-primary bg-surface-1`,
+    hover: `hover:text-danger-primary`,
+    pressed: `focus:text-danger-primary`,
     disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "tertiary-danger": {
-    default: `text-red-500 bg-surface-1 border border-red-200`,
-    hover: `hover:bg-red-50 hover:border-red-300`,
-    pressed: `focus:text-red-400`,
+    default: `text-danger-primary bg-surface-1 border border-danger-subtle`,
+    hover: `hover:bg-red-50 hover:border-danger-subtle`,
+    pressed: `focus:text-danger-primary`,
     disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "link-neutral": {
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index a9094977f..292b44a3c 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -36,7 +36,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
           "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
             mode === "transparent",
           "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
-          "border-red-500": hasError,
+          "border-danger-strong": hasError,
           "px-1.5 py-1": inputSize === "xs",
           "px-3 py-2": inputSize === "sm",
           "p-3": inputSize === "md",
diff --git a/packages/ui/src/form-fields/password/helper.tsx b/packages/ui/src/form-fields/password/helper.tsx
index 33f80b145..3af639e61 100644
--- a/packages/ui/src/form-fields/password/helper.tsx
+++ b/packages/ui/src/form-fields/password/helper.tsx
@@ -20,7 +20,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
     case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
       return {
         message: "Password is too short",
-        textColor: "text-red-500",
+        textColor: "text-danger-primary",
         activeFragments: 1,
       };
     case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID:
@@ -32,7 +32,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
     case E_PASSWORD_STRENGTH.STRENGTH_VALID:
       return {
         message: "Password is strong",
-        textColor: "text-green-500",
+        textColor: "text-success-primary",
         activeFragments: 3,
       };
     default:
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/ui/src/form-fields/password/indicator.tsx
index 95534fa6e..87e5f89f7 100644
--- a/packages/ui/src/form-fields/password/indicator.tsx
+++ b/packages/ui/src/form-fields/password/indicator.tsx
@@ -53,14 +53,14 @@ export function PasswordStrengthIndicator({
               <div className="flex items-center justify-center p-0.5">
                 <CircleCheck
                   className={cn("h-3 w-3 flex-shrink-0", {
-                    "text-green-500": criterion.isValid,
+                    "text-success-primary": criterion.isValid,
                     "text-primary": !criterion.isValid,
                   })}
                 />
               </div>
               <span
                 className={cn("!text-11", {
-                  "text-green-500": criterion.isValid,
+                  "text-success-primary": criterion.isValid,
                   "text-primary": !criterion.isValid,
                 })}
               >
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/ui/src/form-fields/password/password-input.tsx
index 34e99a8af..0c453c864 100644
--- a/packages/ui/src/form-fields/password/password-input.tsx
+++ b/packages/ui/src/form-fields/password/password-input.tsx
@@ -34,7 +34,7 @@ export function PasswordInput({
           "w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
           {
             "border-strong": !error,
-            "border-red-500": error,
+            "border-danger-strong": error,
           },
           className
         )}
diff --git a/packages/ui/src/form-fields/root.tsx b/packages/ui/src/form-fields/root.tsx
index 03f7d39af..70ee40c05 100644
--- a/packages/ui/src/form-fields/root.tsx
+++ b/packages/ui/src/form-fields/root.tsx
@@ -50,8 +50,8 @@ export function ValidationMessage({ type, message, className }: ValidationMessag
       className={cn(
         "text-13",
         {
-          "text-red-500": type === "error",
-          "text-green-500": type === "success",
+          "text-danger-primary": type === "error",
+          "text-success-primary": type === "success",
         },
         className
       )}
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index 5f1b5ed94..a38300e94 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -46,7 +46,7 @@ const TextArea = React.forwardRef(function TextArea(
           "px-1.5 py-1": textAreaSize === "xs",
           "px-3 py-2": textAreaSize === "sm",
           "p-3": textAreaSize === "md",
-          "border-red-500": hasError,
+          "border-danger-strong": hasError,
           "bg-red-100": hasError && mode === "primary",
         },
         className
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
index 9d9705732..2b7b534d0 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -42,7 +42,7 @@ const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
 };
 
 const VARIANT_CLASSES: Record<TModalVariant, string> = {
-  danger: "bg-red-500/20 text-red-500",
+  danger: "bg-danger-primary text-danger-primary",
   primary: "bg-accent-primary/20 text-accent-primary",
 };
 
diff --git a/packages/utils/src/theme/constants.ts b/packages/utils/src/theme/constants.ts
index a30b7683c..739cb0e9f 100644
--- a/packages/utils/src/theme/constants.ts
+++ b/packages/utils/src/theme/constants.ts
@@ -126,7 +126,7 @@ export const EDITOR_COLORS_LIGHT = {
   "light-blue": "#c5eff9",
   "dark-blue": "#c9dafb",
   purple: "#e3d8fd",
-};
+} as const;
 
 /**
  * Editor color backgrounds for dark mode
diff --git a/packages/utils/src/theme/theme-application.ts b/packages/utils/src/theme/theme-application.ts
index 5e8ce421f..dffb2ef05 100644
--- a/packages/utils/src/theme/theme-application.ts
+++ b/packages/utils/src/theme/theme-application.ts
@@ -112,23 +112,23 @@ export function applyCustomTheme(brandColor: string, neutralColor: string, mode:
   // Apply base palette colors
   // This updates the source palette variables that semantic colors reference
   Object.entries(neutralMapping).forEach(([key, value]) => {
-    themeElement.style.setProperty(`--color-neutral-${key}`, value);
+    themeElement.style.setProperty(`--neutral-${key}`, value);
   });
 
   Object.entries(brandMapping).forEach(([key, value]) => {
-    themeElement.style.setProperty(`--color-brand-${key}`, value);
+    themeElement.style.setProperty(`--brand-${key}`, value);
   });
 
   Object.entries(ALPHA_MAPPING).forEach(([key, value]) => {
-    themeElement.style.setProperty(`--color-alpha-white-${key}`, oklchToCSS(neutralOKLCH, value * 100));
-    themeElement.style.setProperty(`--color-alpha-black-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+    themeElement.style.setProperty(`--alpha-white-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+    themeElement.style.setProperty(`--alpha-black-${key}`, oklchToCSS(neutralOKLCH, value * 100));
   });
 
   // Apply contrasting text colors for use on colored backgrounds
   // Uses WCAG relative luminance for accurate contrast determination
   const { textColor, iconColor } = getOnColorTextColors(brandColor, "wcag");
-  themeElement.style.setProperty(`--text-color-on-color`, oklchToCSS(textColor));
-  themeElement.style.setProperty(`--text-color-icon-on-color`, oklchToCSS(iconColor));
+  themeElement.style.setProperty(`--txt-on-color`, oklchToCSS(textColor));
+  themeElement.style.setProperty(`--txt-icon-on-color`, oklchToCSS(iconColor));
 
   // Apply editor color backgrounds based on mode
   const editorColors = mode === "dark" ? EDITOR_COLORS_DARK : EDITOR_COLORS_LIGHT;
@@ -163,22 +163,22 @@ export function clearCustomTheme(): void {
     "black",
   ];
   neutralKeys.forEach((key) => {
-    themeElement.style.removeProperty(`--color-neutral-${key}`);
+    themeElement.style.removeProperty(`--neutral-${key}`);
   });
 
   // Clear brand base palette colors
   const brandKeys = ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000", "1100", "1200", "default"];
   brandKeys.forEach((key) => {
-    themeElement.style.removeProperty(`--color-brand-${key}`);
+    themeElement.style.removeProperty(`--brand-${key}`);
   });
 
   Object.keys(ALPHA_MAPPING).forEach((key) => {
-    themeElement.style.removeProperty(`--color-alpha-white-${key}`);
-    themeElement.style.removeProperty(`--color-alpha-black-${key}`);
+    themeElement.style.removeProperty(`--alpha-white-${key}`);
+    themeElement.style.removeProperty(`--alpha-black-${key}`);
   });
 
-  themeElement.style.removeProperty(`--text-color-on-color`);
-  themeElement.style.removeProperty(`--text-color-icon-on-color`);
+  themeElement.style.removeProperty(`--txt-on-color`);
+  themeElement.style.removeProperty(`--txt-icon-on-color`);
 
   // Clear editor color background overrides
   Object.keys(EDITOR_COLORS_LIGHT).forEach((color) => {