diff --git a/frontend/src/components/ai-elements/suggestion.tsx b/frontend/src/components/ai-elements/suggestion.tsx
index c5b840a0..432d102a 100644
--- a/frontend/src/components/ai-elements/suggestion.tsx
+++ b/frontend/src/components/ai-elements/suggestion.tsx
@@ -61,9 +61,9 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "cursor-pointer rounded-full px-[20px] py-[15px] text-[14px] font-normal",
-        "border-none bg-[#F9F8FA] text-[#666666]",
-        "hover:bg-[#EAE9EB] hover:text-[#150033]",
+        "cursor-pointer rounded-full px-[20px] py-[15px] text-sm font-normal",
+        "border-none bg-ws-f9f8fa text-ws-667085",
+        "hover:bg-ws-fbfafc hover:text-ws-150033",
         className,
       )}
       onClick={handleClick}
diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index 0271d3c2..8a9cb54b 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -149,8 +149,7 @@ function WorkspaceToolButton({
   return (
     <PromptInputButton
       className={cn(
-        // border border-[rgba(0,0,0,0.08)] 
-        "group h-full p-[10px]!  rounded-[10px] hover:bg-[#EAE2F5] hover:text-[#8E47F0]",
+        "group h-full rounded-[10px] p-[10px]! hover:bg-ws-f9f8fa hover:text-ws-8e47f0",
         className,
       )}
       {...props}
@@ -890,7 +889,7 @@ export function InputBox({
                 textareaRef.current?.focus();
               }}
             >
-              <DropdownMenuLabel className="p-0 text-[14px] text-[#333333]">
+              <DropdownMenuLabel className="p-0 text-sm text-ws-333333">
                 {t.inputBox.addReference}
               </DropdownMenuLabel>
               <DropdownMenuSeparator className="mx-0 mt-[20px] mb-0" />
@@ -927,7 +926,7 @@ export function InputBox({
                             className="h-10 w-10 shrink-0 rounded-md border object-cover object-top"
                           />
                         ) : (
-                          <div className="bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-md border text-[10px] font-semibold">
+                          <div className="bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-md border text-xs font-semibold">
                             {fileExtensionLabel(candidate.filename)}
                           </div>
                         )}
@@ -1234,29 +1233,29 @@ function AddAttachmentsButton({ className }: { className?: string }) {
   const attachments = usePromptInputAttachments();
   return (
     <Tooltip content={t.inputBox.addAttachments}>
-    <WorkspaceToolButton
-      className={className}
-      onClick={() => attachments.openFileDialog()}
-    >
-      <svg
-        width="18"
-        height="15"
-        viewBox="0 0 18 15"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="transition-[stroke] duration-200 [&>path]:transition-[fill,stroke] [&>path]:duration-200 [&>path:first-child]:group-hover:fill-[#8E47F0] [&>path:last-child]:group-hover:stroke-[#8E47F0]"
+      <WorkspaceToolButton
+        className={cn("text-ws-150033 hover:text-ws-8e47f0", className)}
+        onClick={() => attachments.openFileDialog()}
       >
-        <path
-          d="M7.05042 7.65254C6.9754 7.72756 6.90039 7.80257 6.90039 7.95258C6.90039 8.02759 6.9754 8.1776 7.05042 8.25262C7.20043 8.40263 7.42545 8.40263 7.57546 8.25262L8.8506 6.97747V10.7279C8.8506 10.9529 9.00061 11.1029 9.22563 11.1029C9.30065 11.1029 9.45066 11.0279 9.52567 11.0279C9.60067 10.9529 9.67568 10.8779 9.67568 10.7279V6.97747L10.9508 8.25262C11.1008 8.40263 11.3259 8.40263 11.4759 8.25262C11.5509 8.1776 11.6259 8.10259 11.6259 7.95258C11.6259 7.87757 11.5509 7.72756 11.4759 7.65254L9.52567 5.70235C9.37564 5.55234 9.15062 5.55234 9.00061 5.70235L7.05042 7.65254Z"
-          fill="#150033"
-        />
-        <path
-          d="M1.12695 0.5H6.67871C6.87077 0.500077 7.01409 0.574515 7.07324 0.648438L7.09082 0.669922L8.30762 1.88672C8.6222 2.20119 9.01344 2.3681 9.44629 2.36816H16.875C17.2382 2.36842 17.5012 2.63339 17.5 2.99414V13.8848C17.5048 14.2408 17.2454 14.5056 16.8818 14.5059H1.12695C0.764649 14.5057 0.5 14.2401 0.5 13.877V1.12793C0.500049 0.810129 0.702664 0.567404 0.996094 0.511719L1.12695 0.5Z"
-          stroke="#150033"
-        />
-      </svg>
-    </WorkspaceToolButton>
-    </Tooltip> 
+        <svg
+          width="18"
+          height="15"
+          viewBox="0 0 18 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="transition-[color] duration-200"
+        >
+          <path
+            d="M7.05042 7.65254C6.9754 7.72756 6.90039 7.80257 6.90039 7.95258C6.90039 8.02759 6.9754 8.1776 7.05042 8.25262C7.20043 8.40263 7.42545 8.40263 7.57546 8.25262L8.8506 6.97747V10.7279C8.8506 10.9529 9.00061 11.1029 9.22563 11.1029C9.30065 11.1029 9.45066 11.0279 9.52567 11.0279C9.60067 10.9529 9.67568 10.8779 9.67568 10.7279V6.97747L10.9508 8.25262C11.1008 8.40263 11.3259 8.40263 11.4759 8.25262C11.5509 8.1776 11.6259 8.10259 11.6259 7.95258C11.6259 7.87757 11.5509 7.72756 11.4759 7.65254L9.52567 5.70235C9.37564 5.55234 9.15062 5.55234 9.00061 5.70235L7.05042 7.65254Z"
+            fill="currentColor"
+          />
+          <path
+            d="M1.12695 0.5H6.67871C6.87077 0.500077 7.01409 0.574515 7.07324 0.648438L7.09082 0.669922L8.30762 1.88672C8.6222 2.20119 9.01344 2.3681 9.44629 2.36816H16.875C17.2382 2.36842 17.5012 2.63339 17.5 2.99414V13.8848C17.5048 14.2408 17.2454 14.5056 16.8818 14.5059H1.12695C0.764649 14.5057 0.5 14.2401 0.5 13.877V1.12793C0.500049 0.810129 0.702664 0.567404 0.996094 0.511719L1.12695 0.5Z"
+            stroke="currentColor"
+          />
+        </svg>
+      </WorkspaceToolButton>
+    </Tooltip>
   );
 }
 
@@ -1272,34 +1271,34 @@ function HistoryButton({
   const { t } = useI18n();
   return (
     <Tooltip content={t.inputBox.history}>
-    <WorkspaceToolButton
-      className={className}
-      onClick={() =>
-        router.replace(`/workspace/chats/${threadId}?is_chatting=true`)
-      }
-    >
-      <svg
-        className="transition-[stroke] duration-200"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+      <WorkspaceToolButton
+        className={cn("text-ws-150033 hover:text-ws-8e47f0", className)}
+        onClick={() =>
+          router.replace(`/workspace/chats/${threadId}?is_chatting=true`)
+        }
       >
-        <circle
-          className="stroke-[#150033] transition-[stroke] duration-200 group-hover:stroke-[#8E47F0]"
-          cx="9"
-          cy="9"
-          r="8.5"
-        />
-        <path
-          className="stroke-[#150033] transition-[stroke] duration-200 group-hover:stroke-[#8E47F0]"
-          d="M9 6V10H12"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    </WorkspaceToolButton>
+        <svg
+          className="transition-[color] duration-200"
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            className="stroke-current transition-[stroke] duration-200"
+            cx="9"
+            cy="9"
+            r="8.5"
+          />
+          <path
+            className="stroke-current transition-[stroke] duration-200"
+            d="M9 6V10H12"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </WorkspaceToolButton>
     </Tooltip>
   );
 }
@@ -1331,13 +1330,13 @@ function IframeSkillDialogButton({
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="size-4 transition-[stroke] duration-200 [&>path]:transition-[stroke] [&>path]:duration-200 [&>path]:group-hover:stroke-[#8E47F0]"
+              className="size-4 text-ws-150033 transition-[color] duration-200 group-hover:text-ws-8e47f0"
               viewBox="0 0 12 16"
               fill="none"
             >
               <path
                 d="M3.7998 0.5H9.19922C9.24033 0.5 9.26852 0.518136 9.28516 0.541992C9.30124 0.565318 9.30411 0.588767 9.29395 0.613281H9.29297L7.43066 5.07422L7.1416 5.76758H11.3994C11.4295 5.76765 11.4474 5.77552 11.459 5.7832C11.4724 5.79207 11.4846 5.80503 11.4922 5.82129C11.4997 5.83745 11.5013 5.85253 11.5 5.86328C11.4989 5.87156 11.4953 5.88556 11.4785 5.9043L2.87891 15.4629V15.4639C2.85396 15.4914 2.83406 15.4971 2.82031 15.499C2.80144 15.5016 2.77553 15.4981 2.74902 15.4844C2.72225 15.4705 2.70837 15.453 2.70312 15.4424C2.70056 15.4372 2.69457 15.4253 2.70312 15.3936V15.3926L4.30273 9.49512L4.47461 8.86426H0.600586C0.559682 8.86424 0.531324 8.84587 0.514648 8.82227C0.498608 8.79944 0.496551 8.777 0.505859 8.75293L3.70508 0.558594C3.71075 0.544183 3.72173 0.529788 3.73828 0.518555C3.74688 0.51277 3.75704 0.508037 3.76758 0.504883L3.7998 0.5Z"
-                stroke="#150033"
+                stroke="currentColor"
               />
             </svg>
           </WorkspaceToolButton>
@@ -1362,7 +1361,7 @@ function IframeSkillDialogButton({
               key={`${skill.skill_id}-${skill.title}-${index}`}
               className="shrink-0"
             >
-              <span className="text-[12px]/[12px]">{skill.title}</span>
+              <span className="text-xs leading-3">{skill.title}</span>
               {/* TODO: 因为后端接口不支持取消选择skill，所以暂时禁用取消选择按钮 */}
               <button
                 onClick={() => clearSkill(skill.skill_id)}
diff --git a/frontend/src/components/workspace/streaming-indicator.tsx b/frontend/src/components/workspace/streaming-indicator.tsx
index 2edf2533..3edf0abf 100644
--- a/frontend/src/components/workspace/streaming-indicator.tsx
+++ b/frontend/src/components/workspace/streaming-indicator.tsx
@@ -14,19 +14,19 @@ export function StreamingIndicator({
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100",
+          "animate-bouncing rounded-full bg-ws-a3a1a1 opacity-100",
         )}
       />
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.2s]",
+          "animate-bouncing rounded-full bg-ws-a3a1a1 opacity-100 [animation-delay:0.2s]",
         )}
       />
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.4s]",
+          "animate-bouncing rounded-full bg-ws-a3a1a1 opacity-100 [animation-delay:0.4s]",
         )}
       />
     </div>