diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index ca345a92c..a855f167d 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -65,6 +65,18 @@ export const theme = {
         medium: "var(--color-primary-110)",
         strong: "var(--color-primary-120)",
       },
+      10: "var(--color-primary-10)",
+      20: "var(--color-primary-20)",
+      30: "var(--color-primary-30)",
+      40: "var(--color-primary-40)",
+      50: "var(--color-primary-50)",
+      60: "var(--color-primary-60)",
+      70: "var(--color-primary-70)",
+      80: "var(--color-primary-80)",
+      90: "var(--color-primary-90)",
+      100: "var(--color-primary-100)",
+      110: "var(--color-primary-110)",
+      120: "var(--color-primary-120)",
       DEFAULT: "var(--color-primary-90)",
     },
     neutral: {
@@ -89,6 +101,18 @@ export const theme = {
         medium: "var(--color-neutral-110)",
         strong: "var(--color-neutral-120)",
       },
+      10: "var(--color-neutral-10)",
+      20: "var(--color-neutral-20)",
+      30: "var(--color-neutral-30)",
+      40: "var(--color-neutral-40)",
+      50: "var(--color-neutral-50)",
+      60: "var(--color-neutral-60)",
+      70: "var(--color-neutral-70)",
+      80: "var(--color-neutral-80)",
+      90: "var(--color-neutral-90)",
+      100: "var(--color-neutral-100)",
+      110: "var(--color-neutral-110)",
+      120: "var(--color-neutral-120)",
       DEFAULT: "var(--color-neutral-90)",
     },
     success: {
@@ -113,6 +137,18 @@ export const theme = {
         medium: "var(--color-success-110)",
         strong: "var(--color-success-120)",
       },
+      10: "var(--color-success-10)",
+      20: "var(--color-success-20)",
+      30: "var(--color-success-30)",
+      40: "var(--color-success-40)",
+      50: "var(--color-success-50)",
+      60: "var(--color-success-60)",
+      70: "var(--color-success-70)",
+      80: "var(--color-success-80)",
+      90: "var(--color-success-90)",
+      100: "var(--color-success-100)",
+      110: "var(--color-success-110)",
+      120: "var(--color-success-120)",
       DEFAULT: "var(--color-success-90)",
     },
     warning: {
@@ -137,31 +173,55 @@ export const theme = {
         medium: "var(--color-warning-110)",
         strong: "var(--color-warning-120)",
       },
+      10: "var(--color-warning-10)",
+      20: "var(--color-warning-20)",
+      30: "var(--color-warning-30)",
+      40: "var(--color-warning-40)",
+      50: "var(--color-warning-50)",
+      60: "var(--color-warning-60)",
+      70: "var(--color-warning-70)",
+      80: "var(--color-warning-80)",
+      90: "var(--color-warning-90)",
+      100: "var(--color-warning-100)",
+      110: "var(--color-warning-110)",
+      120: "var(--color-warning-120)",
       DEFAULT: "var(--color-warning-90)",
     },
-    error: {
+    danger: {
       page: {
-        "surface-default": "var(--color-error-0)",
-        "surface-light": "var(--color-error-10)",
-        "surface-medium": "var(--color-error-20)",
+        "surface-default": "var(--color-danger-0)",
+        "surface-light": "var(--color-danger-10)",
+        "surface-medium": "var(--color-danger-20)",
       },
       component: {
-        "surface-light": "var(--color-error-30)",
-        "surface-medium": "var(--color-error-40)",
-        "surface-dark": "var(--color-error-50)",
+        "surface-light": "var(--color-danger-30)",
+        "surface-medium": "var(--color-danger-40)",
+        "surface-dark": "var(--color-danger-50)",
       },
       border: {
-        subtle: "var(--color-error-60)",
-        medium: "var(--color-error-70)",
-        strong: "var(--color-error-80)",
+        subtle: "var(--color-danger-60)",
+        medium: "var(--color-danger-70)",
+        strong: "var(--color-danger-80)",
       },
-      solid: "var(--color-error-90)",
+      solid: "var(--color-danger-90)",
       text: {
-        subtle: "var(--color-error-100)",
-        medium: "var(--color-error-110)",
-        strong: "var(--color-error-120)",
+        subtle: "var(--color-danger-100)",
+        medium: "var(--color-danger-110)",
+        strong: "var(--color-danger-120)",
       },
-      DEFAULT: "var(--color-error-90)",
+      10: "var(--color-danger-10)",
+      20: "var(--color-danger-20)",
+      30: "var(--color-danger-30)",
+      40: "var(--color-danger-40)",
+      50: "var(--color-danger-50)",
+      60: "var(--color-danger-60)",
+      70: "var(--color-danger-70)",
+      80: "var(--color-danger-80)",
+      90: "var(--color-danger-90)",
+      100: "var(--color-danger-100)",
+      110: "var(--color-danger-110)",
+      120: "var(--color-danger-120)",
+      DEFAULT: "var(--color-danger-90)",
     },
     info: {
       page: {
@@ -185,8 +245,34 @@ export const theme = {
         medium: "var(--color-info-110)",
         strong: "var(--color-info-120)",
       },
+      10: "var(--color-info-10)",
+      20: "var(--color-info-20)",
+      30: "var(--color-info-30)",
+      40: "var(--color-info-40)",
+      50: "var(--color-info-50)",
+      60: "var(--color-info-60)",
+      70: "var(--color-info-70)",
+      80: "var(--color-info-80)",
+      90: "var(--color-info-90)",
+      100: "var(--color-info-100)",
+      110: "var(--color-info-110)",
+      120: "var(--color-info-120)",
       DEFAULT: "var(--color-info-90)",
     },
+    orange: {
+      10: "var(--color-orange-10)",
+      20: "var(--color-orange-20)",
+      30: "var(--color-orange-30)",
+      40: "var(--color-orange-40)",
+      50: "var(--color-orange-50)",
+      60: "var(--color-orange-60)",
+      70: "var(--color-orange-70)",
+      80: "var(--color-orange-80)",
+      90: "var(--color-orange-90)",
+      100: "var(--color-orange-100)",
+      110: "var(--color-orange-110)",
+      120: "var(--color-orange-120)",
+    },
   },
   extend: {
     keyframes: {
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index 4c8908701..44e8c2c59 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -16,11 +16,11 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
   const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
 
   const priorityClasses = {
-    urgent: "bg-red-500 text-red-500 border-red-500",
-    high: "bg-orange-500/20 text-orange-500 border-orange-500",
-    medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
-    low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
-    none: "bg-custom-background-80 text-custom-text-200 border-neutral-border-medium",
+    urgent: "bg-danger-110 text-red-500 border-danger-110",
+    high: "bg-orange-30 text-orange-80 border-orange-80",
+    medium: "bg-warning-20 text-warning-80 border-warning-80",
+    low: "bg-primary-30 text-primary-90 border-primary-90",
+    none: "bg-neutral-40 text-neutral-text-medium border-neutral-border-strong",
   };
 
   // get priority icon
diff --git a/web/styles/globals.css b/web/styles/globals.css
index c9f3b2a32..845d05237 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -155,6 +155,20 @@
     --color-info-100: #74daf8;
     --color-info-110: #00749e;
     --color-info-120: #1d3e56;
+
+    /* saturated colors */
+    --color-orange-10: #fefcfb;
+    --color-orange-20: #fff7ed;
+    --color-orange-30: #ffefd6;
+    --color-orange-40: #ffdfb5;
+    --color-orange-50: #ffd19a;
+    --color-orange-60: #ffc182;
+    --color-orange-70: #f5ae73;
+    --color-orange-80: #ec9455;
+    --color-orange-90: #f76b15;
+    --color-orange-100: #ef5f00;
+    --color-orange-110: #cc4e00;
+    --color-orange-120: #582d1d;
   }
 
   [data-theme="light-contrast"] {
@@ -277,6 +291,20 @@
     --color-info-100: #3b9eff;
     --color-info-110: #70b8ff;
     --color-info-120: #c2e6ff;
+
+    /* saturated colors */
+    --color-orange-10: #fefcfb;
+    --color-orange-20: #fff7ed;
+    --color-orange-30: #ffefd6;
+    --color-orange-40: #ffdfb5;
+    --color-orange-50: #ffd19a;
+    --color-orange-60: #ffc182;
+    --color-orange-70: #f5ae73;
+    --color-orange-80: #ec9455;
+    --color-orange-90: #f76b15;
+    --color-orange-100: #ef5f00;
+    --color-orange-110: #cc4e00;
+    --color-orange-120: #582d1d;
   }
 
   [data-theme="dark-contrast"] {