diff --git a/frontend/src/lib/components/TagPill.svelte b/frontend/src/lib/components/TagPill.svelte
index 8c401d3..166343e 100644
--- a/frontend/src/lib/components/TagPill.svelte
+++ b/frontend/src/lib/components/TagPill.svelte
@@ -4,13 +4,13 @@
 
   let { tag = '', clickable = true } = $props();
 
-  // 계층별 색상
+  // 계층별 색상 (의미 토큰)
   function getColor(t) {
-    if (t.startsWith('@상태/') || t.startsWith('@')) return { bg: 'bg-amber-900/30', text: 'text-amber-400' };
-    if (t.startsWith('#주제/') || t.startsWith('#')) return { bg: 'bg-blue-900/30', text: 'text-blue-400' };
-    if (t.startsWith('$유형/') || t.startsWith('$')) return { bg: 'bg-emerald-900/30', text: 'text-emerald-400' };
-    if (t.startsWith('!우선순위/') || t.startsWith('!')) return { bg: 'bg-red-900/30', text: 'text-red-400' };
-    return { bg: 'bg-[var(--border)]', text: 'text-[var(--text-dim)]' };
+    if (t.startsWith('@상태/') || t.startsWith('@')) return { bg: 'bg-warning/30', text: 'text-warning' };
+    if (t.startsWith('#주제/') || t.startsWith('#')) return { bg: 'bg-accent/30', text: 'text-accent' };
+    if (t.startsWith('$유형/') || t.startsWith('$')) return { bg: 'bg-success/30', text: 'text-success' };
+    if (t.startsWith('!우선순위/') || t.startsWith('!')) return { bg: 'bg-error/30', text: 'text-error' };
+    return { bg: 'bg-default', text: 'text-dim' };
   }
 
   function handleClick(e) {
diff --git a/frontend/src/lib/components/UploadDropzone.svelte b/frontend/src/lib/components/UploadDropzone.svelte
index 7229380..6c44e6b 100644
--- a/frontend/src/lib/components/UploadDropzone.svelte
+++ b/frontend/src/lib/components/UploadDropzone.svelte
@@ -98,27 +98,27 @@
 
 <!-- 전체 페이지 드래그 오버레이 -->
 {#if dragging}
-  <div class="fixed inset-0 z-50 bg-[var(--accent)]/10 border-2 border-dashed border-[var(--accent)] flex items-center justify-center">
-    <div class="bg-[var(--surface)] rounded-xl px-8 py-6 shadow-xl text-center">
-      <Upload size={32} class="mx-auto mb-2 text-[var(--accent)]" />
-      <p class="text-sm font-medium text-[var(--accent)]">여기에 파일을 놓으세요</p>
+  <div class="fixed inset-0 z-50 bg-accent/10 border-2 border-dashed border-accent flex items-center justify-center">
+    <div class="bg-surface rounded-xl px-8 py-6 shadow-xl text-center">
+      <Upload size={32} class="mx-auto mb-2 text-accent" />
+      <p class="text-sm font-medium text-accent">여기에 파일을 놓으세요</p>
     </div>
   </div>
 {/if}
 
 <!-- 업로드 진행 상태 -->
 {#if uploading && uploadFiles.length > 0}
-  <div class="mb-3 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-3">
-    <p class="text-xs text-[var(--text-dim)] mb-2">업로드 중...</p>
+  <div class="mb-3 bg-surface border border-default rounded-lg p-3">
+    <p class="text-xs text-dim mb-2">업로드 중...</p>
     <div class="space-y-1 max-h-32 overflow-y-auto">
       {#each uploadFiles as f}
         <div class="flex items-center justify-between text-xs">
           <span class="truncate">{f.name}</span>
           <span class={
-            f.status === 'done' ? 'text-[var(--success)]' :
-            f.status === 'failed' ? 'text-[var(--error)]' :
-            f.status === 'uploading' ? 'text-[var(--accent)]' :
-            'text-[var(--text-dim)]'
+            f.status === 'done' ? 'text-success' :
+            f.status === 'failed' ? 'text-error' :
+            f.status === 'uploading' ? 'text-accent' :
+            'text-dim'
           }>
             {f.status === 'done' ? '✓' : f.status === 'failed' ? '✗' : f.status === 'uploading' ? '↑' : '…'}
           </span>