diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index 58520b4d..4d3185fb 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -448,19 +448,19 @@ export function ArtifactFileDetail({
                 >
                   <path
                     d="M5 6L2 9L5 12"
-                    stroke="#150033"
+                    stroke="currentColor"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                   />
                   <path
                     d="M11 3L7 15"
-                    stroke="#150033"
+                    stroke="currentColor"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                   />
                   <path
                     d="M13 6L16 9L13 12"
-                    stroke="#150033"
+                    stroke="currentColor"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                   />
@@ -476,9 +476,9 @@ export function ArtifactFileDetail({
                 >
                   <path
                     d="M8 0.5C10.4943 0.5 12.8473 1.84466 14.792 4.21973C15.1644 4.67466 15.1644 5.32534 14.792 5.78027C12.8473 8.15534 10.4943 9.5 8 9.5C5.50561 9.49989 3.15269 8.15543 1.20801 5.78027C0.835561 5.32534 0.835562 4.67466 1.20801 4.21973C3.15269 1.84457 5.50561 0.500106 8 0.5Z"
-                    stroke="#666666"
+                    stroke="currentColor"
                   />
-                  <circle cx="8" cy="5" r="1.5" stroke="#666666" />
+                  <circle cx="8" cy="5" r="1.5" stroke="currentColor" />
                 </svg>
               </ToggleGroupItem>
             </ToggleGroup>
@@ -530,7 +530,7 @@ export function ArtifactFileDetail({
                 >
                   <path
                     d="M6 2H13C14.1046 2 15 2.89543 15 4V13"
-                    stroke="#666666"
+                    stroke="currentColor"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                   />
@@ -540,7 +540,7 @@ export function ArtifactFileDetail({
                     width="10"
                     height="11"
                     rx="1.5"
-                    stroke="#666666"
+                    stroke="currentColor"
                   />
                 </svg>
               </ArtifactAction>
@@ -564,12 +564,12 @@ export function ArtifactFileDetail({
                       >
                         <path
                           d="M16 9V14C16 15.1046 15.1046 16 14 16H4C2.89543 16 2 15.1046 2 14V9"
-                          stroke="#666666"
+                          stroke="currentColor"
                           strokeLinecap="round"
                         />
                         <path
                           d="M9 2V13M9 13L5 9M9 13L13 9"
-                          stroke="#666666"
+                          stroke="currentColor"
                           strokeLinecap="round"
                           strokeLinejoin="round"
                         />
@@ -710,7 +710,7 @@ export function ArtifactFileDetail({
                 >
                   <path
                     d="M4 14L14 4M4 4L14 14"
-                    stroke="#666666"
+                    stroke="currentColor"
                     strokeLinecap="round"
                   />
                 </svg>
@@ -1046,7 +1046,7 @@ function ArtifactPdfPreview({
 
           const pageWrapper = document.createElement("div");
           pageWrapper.className =
-            "mx-auto mb-4 w-fit rounded-md border border-[#e4e7ec] bg-white p-2 shadow-sm";
+            "mx-auto mb-4 w-fit rounded-md border border-ws-e4e7ec bg-white p-2 shadow-sm";
 
           const canvas = document.createElement("canvas");
           canvas.style.width = `${viewport.width}px`;
@@ -1089,8 +1089,8 @@ function ArtifactPdfPreview({
 
   if (error) {
     return (
-      <div className={cn("relative overflow-auto bg-[#f8f9fb] p-4", className)}>
-        <div className="mx-auto grid max-w-xl gap-3 rounded-md border border-[#e4e7ec] bg-white p-5 text-center">
+      <div className={cn("relative overflow-auto bg-ws-f9f8fa p-4", className)}>
+        <div className="mx-auto grid max-w-xl gap-3 rounded-md border border-ws-e4e7ec bg-white p-5 text-center">
           <p className="text-sm font-medium break-all">{fileName}</p>
           <p className="text-muted-foreground text-sm">{error}</p>
           <a
@@ -1107,8 +1107,8 @@ function ArtifactPdfPreview({
   }
 
   return (
-    <div className={cn("relative overflow-auto bg-[#f8f9fb] p-4", className)}>
-      <div className="mb-3 text-center text-xs text-[#667085]">
+    <div className={cn("relative overflow-auto bg-ws-f9f8fa p-4", className)}>
+      <div className="mb-3 text-center text-xs text-ws-667085">
         {pageCount > 0
           ? t.artifactPreview.pageCountLabel(fileName, pageCount)
           : fileName}
@@ -1323,7 +1323,7 @@ function ArtifactOfficePreview({
               className={cn(
                 "rounded px-4 py-3 text-xs whitespace-nowrap",
                 activeSheet === sheetName
-                  ? "bg-[#1500331a] text-[#000000]"
+                  ? "bg-ws-1500331a text-foreground"
                   : "text-muted-foreground hover:text-foreground",
               )}
               onClick={() => setActiveSheet(sheetName)}
@@ -1713,14 +1713,14 @@ export const ArtifactZoomSelector = ({
               viewBox="0 0 16 16"
               fill="none"
             >
-              <circle cx="7.55558" cy="7.55534" r="6.16667" stroke="#666666" />
+              <circle cx="7.55558" cy="7.55534" r="6.16667" stroke="currentColor" />
               <path
                 d="M13.8688 15.4646C14.064 15.6598 14.3806 15.6598 14.5759 15.4646C14.7711 15.2693 14.7711 14.9527 14.5759 14.7574L14.2223 15.111L13.8688 15.4646ZM14.2223 15.111L14.5759 14.7574L11.9092 12.0908L11.5557 12.4443L11.2021 12.7979L13.8688 15.4646L14.2223 15.111Z"
-                fill="#666666"
+                fill="currentColor"
               />
               <path
                 d="M5.33325 7.5H9.7777M7.55547 5V10"
-                stroke="#666666"
+                stroke="currentColor"
                 strokeLinecap="round"
                 strokeLinejoin="round"
               />
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
index 54ea9b16..9af0554b 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
@@ -102,7 +102,10 @@ export function ArtifactFileList({
                   </div>
                 </CardTitle>
                 <div className="absolute top-5 left-4">
-                  {getFileIcon(file, "size-9 stroke-[1px] stroke-[#333333]")}
+                  {getFileIcon(
+                    file,
+                    "size-9 stroke-1 text-ws-333333 stroke-current",
+                  )}
                 </div>
                 <CardDescription className="pl-10 text-xs">
                   {getFileExtensionDisplayName(file)} file
@@ -134,7 +137,7 @@ export function ArtifactFileList({
                     >
                       <Button
                         variant="ghost"
-                        className="h-full! text-[var(--muted-foreground)]! hover:bg-transparent! hover:text-[#333333]!"
+                        className="text-muted-foreground h-full! hover:bg-transparent! hover:text-ws-333333!"
                       >
                         <DownloadIcon className="size-4" />
                         {t.common.download}