diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index 4078cd19ed..86524d4cdc 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -128,6 +128,372 @@ button:focus-within {
   line-height: 1.5;
 }
 
+/* font define start */
+.system-kbd {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.system-2xs-regular-uppercase {
+  font-size: 10px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.system-2xs-medium {
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.system-2xs-medium-uppercase {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.system-2xs-semibold-uppercase {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.system-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.system-xs-regular-uppercase {
+  font-size: 12px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.system-xs-medium {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.system-xs-medium-uppercase {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.system-xs-semibold {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.system-xs-semibold-uppercase {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.system-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.system-sm-medium {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.system-sm-medium-uppercase {
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.system-sm-semibold {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.system-sm-semibold-uppercase {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.system-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.system-md-medium {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.system-md-semibold {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.system-md-semibold-uppercase {
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.system-xl-regular {
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.system-xl-medium {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.system-xl-semibold {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.code-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.code-xs-semibold {
+  font-size: 12px;
+  font-weight: undefined;
+}
+
+.code-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.code-sm-semibold {
+  font-size: 13px;
+  font-weight: undefined;
+}
+
+.code-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.code-md-semibold {
+  font-size: 14px;
+  font-weight: undefined;
+}
+
+.body-xs-light {
+  font-size: 12px;
+  font-weight: undefined;
+}
+
+.body-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.body-xs-medium {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.body-sm-light {
+  font-size: 13px;
+  font-weight: undefined;
+}
+
+.body-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.body-sm-medium {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.body-md-light {
+  font-size: 14px;
+  font-weight: undefined;
+}
+
+.body-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.body-md-medium {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.body-lg-light {
+  font-size: 15px;
+  font-weight: undefined;
+}
+
+.body-lg-regular {
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.body-lg-medium {
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.body-xl-regular {
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.body-xl-medium {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.body-xl-light {
+  font-size: 16px;
+  font-weight: undefined;
+}
+
+.body-2xl-light {
+  font-size: 18px;
+  font-weight: undefined;
+}
+
+.body-2xl-regular {
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.body-2xl-medium {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.title-xs-semi-bold {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.title-xs-bold {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.title-sm-semi-bold {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.title-sm-bold {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.title-md-semi-bold {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.title-md-bold {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.title-lg-semi-bold {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.title-lg-bold {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.title-xl-semi-bold {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.title-xl-bold {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.title-2xl-semi-bold {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.title-2xl-bold {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.title-3xl-semi-bold {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.title-3xl-bold {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.title-4xl-semi-bold {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.title-4xl-bold {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.title-5xl-semi-bold {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.title-5xl-bold {
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.title-6xl-semi-bold {
+  font-size: 36px;
+  font-weight: 600;
+}
+
+.title-6xl-bold {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+.title-7xl-semi-bold {
+  font-size: 48px;
+  font-weight: 600;
+}
+
+.title-7xl-bold {
+  font-size: 48px;
+  font-weight: 700;
+}
+
+.title-8xl-semi-bold {
+  font-size: 60px;
+  font-weight: 600;
+}
+
+.title-8xl-bold {
+  font-size: 60px;
+  font-weight: 700;
+}
+/* font define end */
+
 .link {
   @apply text-blue-600 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;
 }
diff --git a/web/themes/dark.css b/web/themes/dark.css
index 1c7db596e3..60512c4b30 100644
--- a/web/themes/dark.css
+++ b/web/themes/dark.css
@@ -352,6 +352,9 @@ html[data-theme="dark"] {
   --color-workflow-display-disabled-vignette-color: #C8CEDA40;
   --color-workflow-display-disabled-outline: #18181BF2;
 
+  --color-workflow-workflow-progress-bg-1: #18181B40;
+  --color-workflow-workflow-progress-bg-2: #18181B0A;
+
   --color-divider-subtle: #C8CEDA14;
   --color-divider-regular: #C8CEDA24;
   --color-divider-deep: #C8CEDA33;
diff --git a/web/themes/light.css b/web/themes/light.css
index 64b37f6d96..6133a161c4 100644
--- a/web/themes/light.css
+++ b/web/themes/light.css
@@ -262,7 +262,7 @@ html[data-theme="light"] {
   --color-background-gradient-bg-fill-chat-bg-1: #F9FAFB;
   --color-background-gradient-bg-fill-chat-bg-2: #F2F4F7;
   --color-background-gradient-bg-fill-chat-bubble-bg-1: #FFFFFF;
-  --color-background-gradient-bg-fill-chat-bubble-bg-2: #FFFFFF80;
+  --color-background-gradient-bg-fill-chat-bubble-bg-2: #FFFFFF99;
 
   --color-background-gradient-mask-gray: #C8CEDA33;
   --color-background-gradient-mask-transparent: #FFFFFF00;
@@ -352,6 +352,9 @@ html[data-theme="light"] {
   --color-workflow-display-disabled-vignette-color: #C8CEDA66;
   --color-workflow-display-disabled-outline: #00000000;
 
+  --color-workflow-workflow-progress-bg-1: #C8CEDA33;
+  --color-workflow-workflow-progress-bg-2: #C8CEDA0A;
+
   --color-divider-subtle: #1018280A;
   --color-divider-regular: #10182814;
   --color-divider-deep: #10182824;
diff --git a/web/themes/tailwind-theme-var-define.ts b/web/themes/tailwind-theme-var-define.ts
index 3140ca2d82..b66a8632fd 100644
--- a/web/themes/tailwind-theme-var-define.ts
+++ b/web/themes/tailwind-theme-var-define.ts
@@ -352,11 +352,14 @@ const vars = {
   'workflow-display-disabled-vignette-color': 'var(--color-workflow-display-disabled-vignette-color)',
   'workflow-display-disabled-outline': 'var(--color-workflow-display-disabled-outline)',
 
+  'workflow-workflow-progress-bg-1': 'var(--color-workflow-workflow-progress-bg-1)',
+  'workflow-workflow-progress-bg-2': 'var(--color-workflow-workflow-progress-bg-2)',
+
   'divider-subtle': 'var(--color-divider-subtle)',
   'divider-regular': 'var(--color-divider-regular)',
-  'divider-darker': 'var(--color-divider-darker)',
+  'divider-deep': 'var(--color-divider-deep)',
   'divider-burn': 'var(--color-divider-burn)',
-  'divider-darker+': 'var(--color-divider-darker+)',
+  'divider-intense': 'var(--color-divider-intense)',
   'divider-soild': 'var(--color-divider-soild)',
   'divider-soild-alt': 'var(--color-divider-soild-alt)',
 
@@ -556,6 +559,7 @@ const vars = {
 
   'third-party-LangChain': 'var(--color-third-party-LangChain)',
   'third-party-Langfuse': 'var(--color-third-party-Langfuse)',
+
 }
 
 export default vars