diff --git a/src/page/workspace/settings/members.tsx b/src/page/workspace/settings/members.tsx
index 6c92ec7..77a4f58 100644
--- a/src/page/workspace/settings/members.tsx
+++ b/src/page/workspace/settings/members.tsx
@@ -46,7 +46,7 @@ const MemberRow = memo(function MemberRow({
       </div>
 
       {member.owner ? (
-        <span className="inline-flex items-center gap-1.5 rounded bg-amber-500/10 px-2.5 py-1 text-[11px] font-medium text-amber-600 dark:text-amber-400">
+        <span className="inline-flex items-center gap-1.5 rounded bg-warning/10 px-2.5 py-1 text-[11px] font-medium text-warning dark:text-warning">
           <Crown className="size-3" /> Owner
         </span>
       ) : (
diff --git a/src/page/workspace/workplan/chat-list.tsx b/src/page/workspace/workplan/chat-list.tsx
index 5c3a10d..a517aae 100644
--- a/src/page/workspace/workplan/chat-list.tsx
+++ b/src/page/workspace/workplan/chat-list.tsx
@@ -11,7 +11,6 @@ interface SuggestionCard {
   title: string;
   body: string;
   icon: React.ComponentType<{ className?: string }>;
-  gradient: string;
 }
 
 const SUGGESTIONS: SuggestionCard[] = [
@@ -19,25 +18,21 @@ const SUGGESTIONS: SuggestionCard[] = [
     title: "Code Review",
     body: "Review my pull request for bugs and improvements",
     icon: Code2,
-    gradient: "from-emerald-500/10 to-emerald-500/[0.02]",
   },
   {
     title: "Debug Help",
     body: "Help me diagnose this failing test case",
     icon: Bug,
-    gradient: "from-amber-500/10 to-amber-500/[0.02]",
   },
   {
     title: "Explain Code",
     body: "Explain how this algorithm works step by step",
     icon: Lightbulb,
-    gradient: "from-violet-500/10 to-violet-500/[0.02]",
   },
   {
     title: "Refactor",
     body: "Suggest refactoring for better readability",
     icon: Wand2,
-    gradient: "from-sky-500/10 to-sky-500/[0.02]",
   },
 ];
 
@@ -134,12 +129,7 @@ export default function WorkplanChatList() {
                 }}
                 whileTap={{ scale: 0.98 }}
                 type="button"
-                className={`
-                  group cursor-pointer rounded-xl border border-border/40 bg-gradient-to-br ${suggestion.gradient}
-                  px-4 py-3.5 text-left transition-all duration-200
-                  hover:border-border/80 hover:shadow-sm hover:ring-1 hover:ring-primary/10
-                  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
-                `}
+                className="group cursor-pointer rounded-xl border border-border/40 bg-card px-4 py-3.5 text-left transition-[background-color,border-color,box-shadow,transform] duration-200 hover:border-border/80 hover:bg-muted/30 hover:shadow-sm hover:ring-1 hover:ring-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 onClick={() =>
                   handleQuickStart(suggestion.title, suggestion.body)
                 }
diff --git a/src/page/workspace/workplan/chat/chat-item.tsx b/src/page/workspace/workplan/chat/chat-item.tsx
index 61dd248..8749ce5 100644
--- a/src/page/workspace/workplan/chat/chat-item.tsx
+++ b/src/page/workspace/workplan/chat/chat-item.tsx
@@ -26,9 +26,9 @@ export const ChatItem = memo(function ChatItem({
       aria-current={active ? "page" : undefined}
       aria-label={conv.title || "Untitled chat"}
       className={cn(
-        "group relative flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "group relative flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-[background-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         active
-          ? "bg-primary/[0.08] text-foreground shadow-[inset_0_0_0_1px_var(--color-primary)/15]"
+          ? "bg-primary/[0.08] text-foreground ring-1 ring-primary/15"
           : "text-muted-foreground hover:bg-accent/50 hover:text-foreground hover:shadow-sm",
       )}
       onClick={onSelect}
@@ -72,7 +72,7 @@ export const ChatItem = memo(function ChatItem({
       {/* Delete */}
       <button
         type="button"
-        className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground/30 opacity-0 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
+        className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground/30 opacity-0 transition-[background-color,color,opacity] duration-200 hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
         onClick={(e) => {
           e.stopPropagation();
           onDelete(conv.id);
diff --git a/src/page/workspace/workplan/chat/code-preview-panel.tsx b/src/page/workspace/workplan/chat/code-preview-panel.tsx
index b71e7a3..e901bfe 100644
--- a/src/page/workspace/workplan/chat/code-preview-panel.tsx
+++ b/src/page/workspace/workplan/chat/code-preview-panel.tsx
@@ -79,7 +79,7 @@ export const CodePreviewPanel = memo(function CodePreviewPanel() {
                 {showPreviewToggle && (
                   <div className="mr-1.5 flex items-center overflow-hidden rounded-lg border border-border/60 bg-muted/30 p-0.5">
                     <button
-                      className={`flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-all ${
+                      className={`flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-[background-color,border-color,color,box-shadow] ${
                         viewMode === "code"
                           ? "bg-card text-foreground shadow-sm"
                           : "text-muted-foreground/60 hover:text-foreground"
@@ -91,7 +91,7 @@ export const CodePreviewPanel = memo(function CodePreviewPanel() {
                       Code
                     </button>
                     <button
-                      className={`flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-all ${
+                      className={`flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-[background-color,border-color,color,box-shadow] ${
                         viewMode === "preview"
                           ? "bg-card text-foreground shadow-sm"
                           : "text-muted-foreground/60 hover:text-foreground"
diff --git a/src/page/workspace/workplan/chat/model-selector-popover.tsx b/src/page/workspace/workplan/chat/model-selector-popover.tsx
index bd34ed1..7ec2994 100644
--- a/src/page/workspace/workplan/chat/model-selector-popover.tsx
+++ b/src/page/workspace/workplan/chat/model-selector-popover.tsx
@@ -119,7 +119,7 @@ export function ModelSelectorPopover({
     <ModelSelector open={open} onOpenChange={setOpen}>
       <ModelSelectorTrigger
         className={cn(
-          "flex cursor-pointer items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground transition-all",
+          "flex cursor-pointer items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground transition-[background-color,border-color,color,box-shadow]",
           "hover:bg-muted/70 hover:text-foreground hover:border-border/80 hover:shadow-sm",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         )}
diff --git a/src/page/workspace/workplan/chat/repo-mention-popover.tsx b/src/page/workspace/workplan/chat/repo-mention-popover.tsx
index bfc2063..04bb36e 100644
--- a/src/page/workspace/workplan/chat/repo-mention-popover.tsx
+++ b/src/page/workspace/workplan/chat/repo-mention-popover.tsx
@@ -213,7 +213,7 @@ export function RepoMentionPopover({
                   )}
                 </div>
                 {repo.is_archived && (
-                  <span className="shrink-0 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                  <span className="shrink-0 rounded bg-warning/10 px-1.5 py-0.5 text-[10px] font-medium text-warning dark:bg-warning/20 dark:text-warning">
                     archived
                   </span>
                 )}
diff --git a/src/page/workspace/workplan/chat/tool-call-list.tsx b/src/page/workspace/workplan/chat/tool-call-list.tsx
index abd5860..2310ab3 100644
--- a/src/page/workspace/workplan/chat/tool-call-list.tsx
+++ b/src/page/workspace/workplan/chat/tool-call-list.tsx
@@ -90,7 +90,7 @@ const SubAgentCard = memo(function SubAgentCard({
         {/* Status icon */}
         <span className="shrink-0">
           {isPending ? (
-            <Loader2 className="size-3.5 animate-spin text-blue-500" />
+            <Loader2 className="size-3.5 animate-spin text-info" />
           ) : isOk ? (
             <CheckCircle2 className="size-3.5 text-emerald-500" />
           ) : isError ? (