diff --git a/src/components/HistorySidebar/SearchInput.tsx b/src/components/HistorySidebar/SearchInput.tsx
index 9ec624ee..06ab8f9f 100644
--- a/src/components/HistorySidebar/SearchInput.tsx
+++ b/src/components/HistorySidebar/SearchInput.tsx
@@ -45,7 +45,7 @@ export default function SearchInput({
         placeholder={placeholder ?? t('layout.search')}
         leadingIcon={
           leadingIcon ?? (
-            <Search className="h-5 w-5 text-[color:var(--ds-icon-neutral-muted-default)]" />
+            <Search className="h-5 w-5 text-ds-icon-neutral-muted-default" />
           )
         }
       />
diff --git a/src/components/ProjectPageSidebar/HeaderAction.tsx b/src/components/ProjectPageSidebar/HeaderAction.tsx
index b011e708..53091ad0 100644
--- a/src/components/ProjectPageSidebar/HeaderAction.tsx
+++ b/src/components/ProjectPageSidebar/HeaderAction.tsx
@@ -303,8 +303,8 @@ export function HeaderAction() {
               </AccordionTrigger>
               <AccordionContent className="px-3 py-3">
                 <div className="gap-3 pl-7 -mr-1 flex flex-col">
-                  <div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-[var(--ds-bg-neutral-subtle-default)] hover:ring-2 hover:ring-[var(--ds-bg-neutral-subtle-default)] hover:ring-offset-2 hover:ring-offset-[var(--ds-bg-neutral-subtle-default)]">
-                    <span className="min-w-0 text-body-sm font-medium flex-1 text-[color:var(--ds-text-neutral-muted-default)]">
+                  <div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-ds-bg-neutral-subtle-default hover:ring-2 hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-2 hover:ring-offset-ds-bg-neutral-subtle-default">
+                    <span className="min-w-0 text-body-sm font-medium flex-1 text-ds-text-neutral-muted-default">
                       {instructionsHint}
                     </span>
                     <Button
@@ -319,8 +319,8 @@ export function HeaderAction() {
                       <PenLine className="h-4 w-4 shrink-0" aria-hidden />
                     </Button>
                   </div>
-                  <div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-[var(--ds-bg-neutral-subtle-default)] hover:ring-2 hover:ring-[var(--ds-bg-neutral-subtle-default)] hover:ring-offset-2 hover:ring-offset-[var(--ds-bg-neutral-subtle-default)]">
-                    <span className="min-w-0 text-body-sm font-medium text-[color:var(--ds-text-neutral-muted-default)]">
+                  <div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-ds-bg-neutral-subtle-default hover:ring-2 hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-2 hover:ring-offset-ds-bg-neutral-subtle-default">
+                    <span className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default">
                       {memoryLabel}
                     </span>
                     <Button
@@ -335,8 +335,8 @@ export function HeaderAction() {
                       {memoryOn ? memoryOnLabel : memoryOffLabel}
                     </Button>
                   </div>
-                  <div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-[var(--ds-bg-neutral-subtle-default)] hover:ring-2 hover:ring-[var(--ds-bg-neutral-subtle-default)] hover:ring-offset-2 hover:ring-offset-[var(--ds-bg-neutral-subtle-default)]">
-                    <span className="min-w-0 text-body-sm font-medium text-[color:var(--ds-text-neutral-muted-default)]">
+                  <div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-ds-bg-neutral-subtle-default hover:ring-2 hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-2 hover:ring-offset-ds-bg-neutral-subtle-default">
+                    <span className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default">
                       {workforceSettingLabel}
                     </span>
                     <Button
diff --git a/src/components/ProjectPageSidebar/NavList.tsx b/src/components/ProjectPageSidebar/NavList.tsx
index 0e1cc4bb..c3cf0689 100644
--- a/src/components/ProjectPageSidebar/NavList.tsx
+++ b/src/components/ProjectPageSidebar/NavList.tsx
@@ -76,10 +76,10 @@ export function NavList({
 
   const sessionLeadIconClass = (taskStatus: ChatTaskStatusType | undefined) => {
     if (taskStatus === ChatTaskStatus.RUNNING)
-      return 'text-[color:var(--ds-icon-status-splitting-default-default)]';
+      return 'text-ds-icon-status-splitting-default-default';
     if (taskStatus === ChatTaskStatus.FINISHED)
-      return 'text-[color:var(--ds-icon-status-completed-default-default)]';
-    return 'text-[color:var(--ds-icon-neutral-default-default)]';
+      return 'text-ds-icon-status-completed-default-default';
+    return 'text-ds-icon-neutral-default-default';
   };
 
   return (
@@ -103,8 +103,8 @@ export function NavList({
               size="sm"
               buttonContent="icon-only"
               className={cn(
-                'no-drag mr-1 rounded-xl shrink-0 hover:bg-[var(--ds-bg-neutral-strong-default)]',
-                'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--ds-border-neutral-default-default)] focus-visible:outline-none'
+                'no-drag mr-1 rounded-xl shrink-0 hover:bg-ds-bg-neutral-strong-default',
+                'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ds-border-neutral-default-default focus-visible:outline-none'
               )}
               aria-label={newSessionLabel}
               onClick={(e) => {
@@ -114,7 +114,7 @@ export function NavList({
               }}
             >
               <Plus
-                className="h-4 w-4 text-[color:var(--ds-icon-neutral-muted-default)]"
+                className="h-4 w-4 text-ds-icon-neutral-muted-default"
                 aria-hidden
               />
             </Button>
@@ -141,7 +141,7 @@ export function NavList({
               aria-label={newSessionLabel}
             >
               <Plus
-                className="h-4 w-4 shrink-0 text-[color:var(--ds-icon-neutral-muted-default)]"
+                className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default"
                 aria-hidden
               />
             </button>
diff --git a/src/components/ProjectPageSidebar/index.tsx b/src/components/ProjectPageSidebar/index.tsx
index a509cccb..4cb462c1 100644
--- a/src/components/ProjectPageSidebar/index.tsx
+++ b/src/components/ProjectPageSidebar/index.tsx
@@ -345,7 +345,7 @@ export default function ProjectPageSidebar({
                   label="Scheduled"
                   trailing={
                     showTriggersDisconnectedTag ? (
-                      <span className="rounded-md px-1.5 font-medium leading-tight max-w-[5.5rem] shrink-0 truncate bg-[var(--ds-bg-neutral-default-default)] py-px text-[10px] text-[color:var(--ds-text-status-error-strong-default)]">
+                      <span className="rounded-md px-1.5 font-medium leading-tight max-w-[5.5rem] shrink-0 truncate bg-ds-bg-neutral-default-default py-px text-[10px] text-ds-text-status-error-strong-default">
                         {t('layout.triggers-disconnected')}
                       </span>
                     ) : undefined
@@ -372,8 +372,8 @@ export default function ProjectPageSidebar({
                       size="sm"
                       buttonContent="icon-only"
                       className={cn(
-                        'no-drag mr-1 rounded-xl shrink-0 hover:bg-[var(--ds-bg-neutral-strong-default)]',
-                        'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--ds-border-neutral-default-default)] focus-visible:outline-none'
+                        'no-drag mr-1 rounded-xl shrink-0 hover:bg-ds-bg-neutral-strong-default',
+                        'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ds-border-neutral-default-default focus-visible:outline-none'
                       )}
                       aria-label={t('triggers.add-trigger')}
                       onClick={(e) => {
@@ -383,7 +383,7 @@ export default function ProjectPageSidebar({
                       }}
                     >
                       <Plus
-                        className="h-4 w-4 text-[color:var(--ds-icon-neutral-muted-default)]"
+                        className="h-4 w-4 text-ds-icon-neutral-muted-default"
                         aria-hidden
                       />
                     </Button>
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index 14b16159..d1b1c6eb 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -296,7 +296,7 @@ function HeaderWin() {
                     aria-current="page"
                   >
                     <Sparkles
-                      className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
+                      className="h-4 w-4 text-ds-icon-neutral-default-default"
                       aria-hidden
                     />
                   </Button>
@@ -316,7 +316,7 @@ function HeaderWin() {
                     aria-current="page"
                   >
                     <House
-                      className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
+                      className="h-4 w-4 text-ds-icon-neutral-default-default"
                       aria-hidden
                     />
                   </Button>
@@ -336,7 +336,7 @@ function HeaderWin() {
                   aria-label={t('layout.back')}
                 >
                   <ChevronLeft
-                    className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
+                    className="h-4 w-4 text-ds-icon-neutral-default-default"
                     aria-hidden
                   />
                 </Button>
@@ -355,7 +355,7 @@ function HeaderWin() {
                   aria-label={t('layout.forward')}
                 >
                   <ChevronRight
-                    className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
+                    className="h-4 w-4 text-ds-icon-neutral-default-default"
                     aria-hidden
                   />
                 </Button>