diff --git a/src/components/ChatBox/TaskBox/TaskCard.tsx b/src/components/ChatBox/TaskBox/TaskCard.tsx
index 0ef41393..1cb72db4 100644
--- a/src/components/ChatBox/TaskBox/TaskCard.tsx
+++ b/src/components/ChatBox/TaskBox/TaskCard.tsx
@@ -435,31 +435,31 @@ export function TaskCard({
                         key={`taskList-${task.id}`}
                         className={`gap-2 rounded-lg px-sm py-sm ease-in-out animate-in fade-in-0 slide-in-from-left-2 flex transition-all duration-300 ${
                           task.status === TaskStatus.COMPLETED
-                            ? 'bg-[var(--ds-bg-status-completed-subtle-default)]'
+                            ? 'bg-ds-bg-completed-subtle-default'
                             : task.status === TaskStatus.FAILED
-                              ? 'bg-[var(--ds-bg-status-error-subtle-default)]'
+                              ? 'bg-ds-bg-error-subtle-default'
                               : task.status === TaskStatus.RUNNING
-                                ? 'bg-[var(--ds-bg-status-running-subtle-default)]'
+                                ? 'bg-ds-bg-running-subtle-default'
                                 : task.status === TaskStatus.BLOCKED
-                                  ? 'bg-[var(--ds-bg-status-blocked-subtle-default)]'
+                                  ? 'bg-ds-bg-blocked-subtle-default'
                                   : task.status === TaskStatus.SKIPPED ||
                                       task.status === TaskStatus.WAITING ||
                                       task.status === TaskStatus.EMPTY
-                                    ? 'bg-[var(--ds-bg-status-pending-subtle-default)]'
-                                    : 'bg-[var(--ds-bg-status-running-subtle-default)]'
+                                    ? 'bg-ds-bg-pending-subtle-default'
+                                    : 'bg-ds-bg-running-subtle-default'
                         } cursor-pointer border border-solid border-transparent ${
                           task.status === TaskStatus.COMPLETED
-                            ? 'hover:border-[color:var(--ds-border-status-completed-default-focus)]'
+                            ? 'hover:border-ds-border-status-completed-default-focus'
                             : task.status === TaskStatus.FAILED
-                              ? 'hover:border-[color:var(--ds-border-status-error-default-focus)]'
+                              ? 'hover:border-ds-border-status-error-default-focus'
                               : task.status === TaskStatus.RUNNING
-                                ? 'hover:border-[color:var(--ds-border-status-running-default-focus)]'
+                                ? 'hover:border-ds-border-status-running-default-focus'
                                 : task.status === TaskStatus.BLOCKED
-                                  ? 'hover:border-[color:var(--ds-border-status-blocked-default-focus)]'
+                                  ? 'hover:border-ds-border-status-blocked-default-focus'
                                   : task.status === TaskStatus.SKIPPED ||
                                       task.status === TaskStatus.WAITING ||
                                       task.status === TaskStatus.EMPTY
-                                    ? 'hover:border-[color:var(--ds-border-status-pending-default-hover)]'
+                                    ? 'hover:border-ds-border-status-pending-default-hover'
                                     : 'border-transparent'
                         } `}
                       >
@@ -467,7 +467,7 @@ export function TaskCard({
                           {task.status === TaskStatus.RUNNING && (
                             <LoaderCircle
                               size={16}
-                              className={`text-[color:var(--ds-icon-information-default-default)] ${
+                              className={`text-ds-icon-information-default-default ${
                                 activeTaskStatus === ChatTaskStatus.RUNNING &&
                                 'animate-spin'
                               } `}
@@ -476,32 +476,32 @@ export function TaskCard({
                           {task.status === TaskStatus.SKIPPED && (
                             <LoaderCircle
                               size={16}
-                              className="text-[color:var(--ds-icon-status-pending-default-default)]"
+                              className="text-ds-icon-status-pending-default-default"
                             />
                           )}
                           {task.status === TaskStatus.COMPLETED && (
                             <CircleCheckBig
                               size={16}
-                              className="text-[color:var(--ds-icon-success-default-default)]"
+                              className="text-ds-icon-success-default-default"
                             />
                           )}
                           {task.status === TaskStatus.FAILED && (
                             <CircleSlash
                               size={16}
-                              className="text-[color:var(--ds-icon-caution-default-default)]"
+                              className="text-ds-icon-caution-default-default"
                             />
                           )}
                           {task.status === TaskStatus.BLOCKED && (
                             <TriangleAlert
                               size={16}
-                              className="text-[color:var(--ds-icon-warning-default-default)]"
+                              className="text-ds-icon-warning-default-default"
                             />
                           )}
                           {(task.status === TaskStatus.EMPTY ||
                             task.status === TaskStatus.WAITING) && (
                             <Circle
                               size={16}
-                              className="text-[color:var(--ds-icon-status-pending-default-default)]"
+                              className="text-ds-icon-status-pending-default-default"
                             />
                           )}
                         </div>
@@ -509,14 +509,14 @@ export function TaskCard({
                           <div
                             className={`min-w-0 w-full [overflow-wrap:anywhere] break-words whitespace-pre-line ${
                               task.status === TaskStatus.FAILED
-                                ? 'text-[color:var(--ds-text-caution-default-default)]'
+                                ? 'text-ds-text-caution-default-default'
                                 : task.status === TaskStatus.BLOCKED
-                                  ? 'text-[color:var(--ds-text-warning-default-default)]'
+                                  ? 'text-ds-text-warning-default-default'
                                   : task.status === TaskStatus.SKIPPED ||
                                       task.status === TaskStatus.WAITING ||
                                       task.status === TaskStatus.EMPTY
-                                    ? 'text-[color:var(--ds-text-status-pending-default-default)]'
-                                    : 'text-[color:var(--ds-text-neutral-default-default)]'
+                                    ? 'text-ds-text-status-pending-default-default'
+                                    : 'text-ds-text-neutral-default-default'
                             } text-sm font-medium leading-13`}
                           >
                             {task.content}
diff --git a/src/components/ChatBox/TaskBox/TaskItem.tsx b/src/components/ChatBox/TaskBox/TaskItem.tsx
index 2d9a3f96..52b7dc68 100644
--- a/src/components/ChatBox/TaskBox/TaskItem.tsx
+++ b/src/components/ChatBox/TaskBox/TaskItem.tsx
@@ -77,10 +77,10 @@ export function TaskItem({
           {taskInfo.id === '' ? (
             <CircleDashed
               size={13}
-              className="text-[color:var(--ds-icon-neutral-muted-default)]"
+              className="text-ds-icon-neutral-muted-default"
             />
           ) : (
-            <div className="h-2 w-2 rounded-full bg-[var(--ds-icon-information-default-default)]"></div>
+            <div className="h-2 w-2 bg-ds-icon-information-default-default rounded-full"></div>
           )}
         </div>
         <div className="min-h-4 min-w-0 py-0.5 relative flex flex-1 items-center self-stretch overflow-hidden transition-all duration-300">
@@ -140,10 +140,7 @@ export function TaskItem({
             size="xs"
             buttonContent="icon-only"
           >
-            <Trash2
-              size={16}
-              className="text-[color:var(--ds-icon-neutral-muted-default)]"
-            />
+            <Trash2 size={16} className="text-ds-icon-neutral-muted-default" />
           </Button>
         </div>
       </div>
diff --git a/src/components/Session/HeaderBox/ChatTimeline.tsx b/src/components/Session/HeaderBox/ChatTimeline.tsx
index 57747ea7..a0402cc9 100644
--- a/src/components/Session/HeaderBox/ChatTimeline.tsx
+++ b/src/components/Session/HeaderBox/ChatTimeline.tsx
@@ -22,13 +22,10 @@ import { ChatTaskStatus } from '@/types/constants';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 const TASK_LIST_ROW_BG = {
-  information:
-    'bg-[var(--ds-bg-status-splitting-subtle-default)] hover:brightness-[0.98]',
-  success:
-    'bg-[var(--ds-bg-status-completed-subtle-default)] hover:brightness-[0.98]',
-  caution:
-    'bg-[var(--ds-bg-status-error-subtle-default)] hover:brightness-[0.98]',
-  idle: 'bg-transparent hover:bg-[var(--ds-bg-neutral-default-hover)]',
+  information: 'bg-ds-bg-splitting-subtle-default hover:brightness-[0.98]',
+  success: 'bg-ds-bg-completed-subtle-default hover:brightness-[0.98]',
+  caution: 'bg-ds-bg-error-subtle-default hover:brightness-[0.98]',
+  idle: 'bg-transparent hover:bg-ds-bg-neutral-default-hover',
 } as const;
 
 /** Brief success highlight after a run completes; then idle (transparent). */
@@ -87,7 +84,7 @@ function TaskQueryScrollLabel({
     <div
       ref={outerRef}
       className={cn(
-        'min-w-0 w-full overflow-hidden text-[color:var(--ds-text-neutral-muted-default)]'
+        'min-w-0 text-ds-text-neutral-muted-default w-full overflow-hidden'
       )}
     >
       <span
@@ -228,13 +225,13 @@ export function ChatTimeline({
           collapsed && 'hidden'
         )}
       >
-        <span className="min-w-0 text-xs font-semibold truncate text-[color:var(--ds-text-neutral-muted-default)]">
+        <span className="min-w-0 text-xs font-semibold text-ds-text-neutral-muted-default truncate">
           {title}
         </span>
       </div>
       <div className="min-h-0 min-w-0 w-full flex-1 overflow-x-hidden overflow-y-auto">
         {entries.length === 0 ? (
-          <p className="px-3 text-xs w-full text-[color:var(--ds-text-neutral-muted-default)]">
+          <p className="px-3 text-xs text-ds-text-neutral-muted-default w-full">
             {emptyLabel}
           </p>
         ) : (