diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index f9298822..9ec2e452 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -96,7 +96,7 @@ export default function ChatPage() {
     sloganIndex % motivationSlogans.length
   ] ?? {
     text: t.chatPage.defaultSlogan,
-    color: "#333333",
+    color: "var(--color-ws-333333)",
   };
   const tickerCharacterList = useMemo(() => {
     const seen = new Set<string>();
@@ -357,7 +357,7 @@ export default function ChatPage() {
                   <Button
                     size="sm"
                     variant="ghost"
-                    className="px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]/80"
+                    className="px-[10px] py-[5px] text-sm font-medium text-ws-150033 hover:text-ws-150033/80"
                     disabled={isStreaming}
                     onClick={() => setShowExitDialog(true)}
                   >
@@ -370,7 +370,8 @@ export default function ChatPage() {
                     >
                       <path
                         d="M3.5 10H13.25H15.6875H16.5M3.5 10L7.5625 6M3.5 10L7.5625 14"
-                        stroke="#666666"
+                        className="text-ws-667085"
+                        stroke="currentColor"
                         strokeWidth="1.5"
                         strokeLinecap="round"
                         strokeLinejoin="round"
@@ -379,7 +380,7 @@ export default function ChatPage() {
                   </Button>
                 </div>
                 <div
-                  className="flex items-center justify-center overflow-hidden text-sm font-bold font-medium whitespace-nowrap text-[#333333]"
+                  className="flex items-center justify-center overflow-hidden text-sm font-bold font-medium whitespace-nowrap text-ws-333333"
                   style={{
                     color: currentSlogan.color,
                   }}
@@ -408,7 +409,7 @@ export default function ChatPage() {
                       <Button
                         size="sm"
                         variant="ghost"
-                        className="h-full px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]"
+                        className="h-full px-[10px] py-[5px] text-sm font-medium text-ws-150033 hover:text-ws-150033"
                       >
                         <ListTodoIcon className="size-4" /> To-dos
                       </Button>
@@ -419,7 +420,7 @@ export default function ChatPage() {
                     <Tooltip content={t.chatPage.viewArtifactsTooltip}>
                       <Button
                         data-testid="artifacts-open-button"
-                        className="text-[#150033] hover:text-[#150033]/80"
+                        className="text-ws-150033 hover:text-ws-150033/80"
                         variant="ghost"
                         onClick={() => {
                           setArtifactsOpen(true);
@@ -500,7 +501,7 @@ export default function ChatPage() {
                   ) : (
                     <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center">
                       <header className="flex shrink-0 items-center justify-between border-b">
-                        <h2 className="h-[58px] text-[14px] leading-[58px] font-bold text-[#333333]">
+                        <h2 className="h-[58px] text-sm leading-[58px] font-bold text-ws-333333">
                           <span>{t.common.artifacts}</span>
                         </h2>
                         <Button
@@ -548,7 +549,7 @@ export default function ChatPage() {
             {!(showWelcomeStyle && thread.isThreadLoading) ? (
               <>
                 <InputBox
-                  className={cn("w-full rounded-[20px] bg-[#FBFAFC]")}
+                  className={cn("w-full rounded-[20px] bg-ws-fbfafc")}
                   threadId={threadId}
                   showWelcomeStyle={showWelcomeStyle}
                   hasSubmitted={hasSubmitted}
@@ -608,14 +609,14 @@ export default function ChatPage() {
             </p>
             <DevDialogFooter>
               <Button
-                className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
+                className="w-full bg-ws-f9f8fa hover:bg-ws-8e47f0 hover:text-white"
                 variant="ghost"
                 onClick={() => setShowExitDialog(false)}
               >
                 {t.common.cancel}
               </Button>
               <Button
-                className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
+                className="w-full bg-ws-f9f8fa hover:bg-ws-8e47f0 hover:text-white"
                 variant="ghost"
                 onClick={async () => {
                   // 如果正在生成，先终止再退出
@@ -664,7 +665,7 @@ export default function ChatPage() {
             </p>
             <DevDialogFooter singleColumn>
               <Button
-                className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
+                className="w-full bg-ws-f9f8fa hover:bg-ws-8e47f0 hover:text-white"
                 variant="ghost"
                 onClick={clearSelectedSkillError}
               >
diff --git a/frontend/src/app/workspace/layout.tsx b/frontend/src/app/workspace/layout.tsx
index 110de7a6..721779a6 100644
--- a/frontend/src/app/workspace/layout.tsx
+++ b/frontend/src/app/workspace/layout.tsx
@@ -130,7 +130,7 @@ export default function WorkspaceLayout({
               /* 灰色圆角矩形容器 */
               "rounded-[20px] border-none",
               /* 浅灰色背景 + 轻微透明 */
-              "bg-[#999999]! backdrop-blur-sm",
+              "bg-ws-999999! backdrop-blur-sm",
               /* 阴影极轻 */
               "shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]",
               /* 内边距：宽松居中 */
diff --git a/frontend/src/components/workspace/workspace-header.tsx b/frontend/src/components/workspace/workspace-header.tsx
index 5f8e661b..5379cbc4 100644
--- a/frontend/src/components/workspace/workspace-header.tsx
+++ b/frontend/src/components/workspace/workspace-header.tsx
@@ -43,7 +43,7 @@ export function WorkspaceHeader({ className }: { className?: string }) {
             ) : (
               <div className="text-primary ml-2 cursor-default font-serif">
                 {/* TODO: 测试标识 */}
-                XClaw <span className="text-sm text-[#000000c5]">v3.2.8</span>
+                XClaw <span className="text-sm text-ws-000000c5">v3.2.8</span>
               </div>
             )}
             <SidebarTrigger />