diff --git a/frontend/app/(main)/admin/audit-log/page.tsx b/frontend/app/(main)/admin/audit-log/page.tsx
index aa72386f..74cb550b 100644
--- a/frontend/app/(main)/admin/audit-log/page.tsx
+++ b/frontend/app/(main)/admin/audit-log/page.tsx
@@ -69,33 +69,33 @@ const RESOURCE_TYPE_CONFIG: Record<
   string,
   { label: string; icon: React.ElementType; color: string }
 > = {
-  MENU: { label: "메뉴", icon: Layout, color: "bg-blue-100 text-blue-700" },
+  MENU: { label: "메뉴", icon: Layout, color: "bg-primary/10 text-primary" },
   SCREEN: { label: "화면", icon: Monitor, color: "bg-purple-100 text-purple-700" },
   SCREEN_LAYOUT: { label: "레이아웃", icon: Monitor, color: "bg-purple-100 text-purple-700" },
-  FLOW: { label: "플로우", icon: GitBranch, color: "bg-green-100 text-green-700" },
-  FLOW_STEP: { label: "플로우 스텝", icon: GitBranch, color: "bg-green-100 text-green-700" },
-  USER: { label: "사용자", icon: User, color: "bg-orange-100 text-orange-700" },
-  ROLE: { label: "권한", icon: Shield, color: "bg-red-100 text-red-700" },
-  PERMISSION: { label: "권한", icon: Shield, color: "bg-red-100 text-red-700" },
+  FLOW: { label: "플로우", icon: GitBranch, color: "bg-emerald-100 text-emerald-700" },
+  FLOW_STEP: { label: "플로우 스텝", icon: GitBranch, color: "bg-emerald-100 text-emerald-700" },
+  USER: { label: "사용자", icon: User, color: "bg-amber-100 text-orange-700" },
+  ROLE: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
+  PERMISSION: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
   COMPANY: { label: "회사", icon: Building2, color: "bg-indigo-100 text-indigo-700" },
   CODE_CATEGORY: { label: "코드 카테고리", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
   CODE: { label: "코드", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
-  DATA: { label: "데이터", icon: Database, color: "bg-gray-100 text-gray-700" },
-  TABLE: { label: "테이블", icon: Database, color: "bg-gray-100 text-gray-700" },
+  DATA: { label: "데이터", icon: Database, color: "bg-muted text-foreground" },
+  TABLE: { label: "테이블", icon: Database, color: "bg-muted text-foreground" },
   NUMBERING_RULE: { label: "채번 규칙", icon: FileText, color: "bg-amber-100 text-amber-700" },
   BATCH: { label: "배치", icon: RefreshCw, color: "bg-teal-100 text-teal-700" },
 };
 
 const ACTION_CONFIG: Record<string, { label: string; color: string }> = {
   CREATE: { label: "생성", color: "bg-emerald-100 text-emerald-700" },
-  UPDATE: { label: "수정", color: "bg-blue-100 text-blue-700" },
-  DELETE: { label: "삭제", color: "bg-red-100 text-red-700" },
+  UPDATE: { label: "수정", color: "bg-primary/10 text-primary" },
+  DELETE: { label: "삭제", color: "bg-destructive/10 text-destructive" },
   COPY: { label: "복사", color: "bg-violet-100 text-violet-700" },
-  LOGIN: { label: "로그인", color: "bg-gray-100 text-gray-700" },
+  LOGIN: { label: "로그인", color: "bg-muted text-foreground" },
   STATUS_CHANGE: { label: "상태변경", color: "bg-amber-100 text-amber-700" },
   BATCH_CREATE: { label: "배치생성", color: "bg-emerald-100 text-emerald-700" },
-  BATCH_UPDATE: { label: "배치수정", color: "bg-blue-100 text-blue-700" },
-  BATCH_DELETE: { label: "배치삭제", color: "bg-red-100 text-red-700" },
+  BATCH_UPDATE: { label: "배치수정", color: "bg-primary/10 text-primary" },
+  BATCH_DELETE: { label: "배치삭제", color: "bg-destructive/10 text-destructive" },
 };
 
 function formatDateTime(dateStr: string): string {
@@ -203,12 +203,12 @@ function renderChanges(changes: Record<string, unknown>) {
           <tr className="bg-muted/50">
             <th className="px-3 py-1.5 text-left font-medium">항목</th>
             {hasBefore && (
-              <th className="px-3 py-1.5 text-left font-medium text-red-600">
+              <th className="px-3 py-1.5 text-left font-medium text-destructive">
                 변경 전
               </th>
             )}
             {hasAfter && (
-              <th className="px-3 py-1.5 text-left font-medium text-blue-600">
+              <th className="px-3 py-1.5 text-left font-medium text-primary">
                 변경 후
               </th>
             )}
@@ -234,7 +234,7 @@ function renderChanges(changes: Record<string, unknown>) {
                   {hasBefore && (
                     <td className="px-3 py-1.5">
                       {row.beforeVal !== null ? (
-                        <span className="rounded bg-red-50 px-1.5 py-0.5 text-red-700">
+                        <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-destructive">
                           {row.beforeVal}
                         </span>
                       ) : (
@@ -245,7 +245,7 @@ function renderChanges(changes: Record<string, unknown>) {
                   {hasAfter && (
                     <td className="px-3 py-1.5">
                       {row.afterVal !== null ? (
-                        <span className="rounded bg-blue-50 px-1.5 py-0.5 text-blue-700">
+                        <span className="rounded bg-primary/10 px-1.5 py-0.5 text-primary">
                           {row.afterVal}
                         </span>
                       ) : (
diff --git a/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx b/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx
index 1647523e..a4e1095c 100644
--- a/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx
@@ -311,10 +311,10 @@ export default function BatchCreatePage() {
       {/* 매핑 설정 */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* FROM 섹션 */}
-        <Card className="border-green-200">
-          <CardHeader className="bg-green-50">
-            <CardTitle className="text-green-700">FROM (원본 데이터베이스)</CardTitle>
-            <p className="text-sm text-green-600">
+        <Card className="border-emerald-200">
+          <CardHeader className="bg-emerald-50">
+            <CardTitle className="text-emerald-700">FROM (원본 데이터베이스)</CardTitle>
+            <p className="text-sm text-emerald-600">
               1단계: 커넥션을 선택하세요 → 2단계: 테이블을 선택하세요 → 3단계: 컬럼을 클릭해서 매핑하세요
             </p>
           </CardHeader>
@@ -365,7 +365,7 @@ export default function BatchCreatePage() {
             {/* FROM 컬럼 목록 */}
             {fromTable && (
               <div className="space-y-2">
-                <Label className="text-blue-600 font-semibold">{fromTable} 테이블</Label>
+                <Label className="text-primary font-semibold">{fromTable} 테이블</Label>
                 <div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
                   {fromColumns.map((column) => (
                     <div
@@ -373,16 +373,16 @@ export default function BatchCreatePage() {
                       onClick={() => handleFromColumnClick(column)}
                       className={`p-3 border rounded cursor-pointer transition-colors ${
                         selectedFromColumn?.column_name === column.column_name
-                          ? 'bg-green-100 border-green-300'
-                          : 'hover:bg-gray-50 border-gray-200'
+                          ? 'bg-emerald-100 border-green-300'
+                          : 'hover:bg-muted border-border'
                       }`}
                     >
                       <div className="font-medium">{column.column_name}</div>
-                      <div className="text-sm text-gray-500">{column.data_type}</div>
+                      <div className="text-sm text-muted-foreground">{column.data_type}</div>
                     </div>
                   ))}
                   {fromColumns.length === 0 && fromTable && (
-                    <div className="text-center text-gray-500 py-4">
+                    <div className="text-center text-muted-foreground py-4">
                       컬럼을 불러오는 중...
                     </div>
                   )}
@@ -393,10 +393,10 @@ export default function BatchCreatePage() {
         </Card>
 
         {/* TO 섹션 */}
-        <Card className="border-red-200">
-          <CardHeader className="bg-red-50">
-            <CardTitle className="text-red-700">TO (대상 데이터베이스)</CardTitle>
-            <p className="text-sm text-red-600">
+        <Card className="border-destructive/20">
+          <CardHeader className="bg-destructive/10">
+            <CardTitle className="text-destructive">TO (대상 데이터베이스)</CardTitle>
+            <p className="text-sm text-destructive">
               FROM에서 컬럼을 선택한 후, 여기서 대상 컬럼을 클릭하면 매핑됩니다
             </p>
           </CardHeader>
@@ -447,7 +447,7 @@ export default function BatchCreatePage() {
             {/* TO 컬럼 목록 */}
             {toTable && (
               <div className="space-y-2">
-                <Label className="text-blue-600 font-semibold">{toTable} 테이블</Label>
+                <Label className="text-primary font-semibold">{toTable} 테이블</Label>
                 <div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
                   {toColumns.map((column) => (
                     <div
@@ -455,16 +455,16 @@ export default function BatchCreatePage() {
                       onClick={() => handleToColumnClick(column)}
                       className={`p-3 border rounded cursor-pointer transition-colors ${
                         selectedFromColumn 
-                          ? 'hover:bg-red-50 border-gray-200'
-                          : 'bg-gray-100 border-gray-300 cursor-not-allowed'
+                          ? 'hover:bg-destructive/10 border-border'
+                          : 'bg-muted border-input cursor-not-allowed'
                       }`}
                     >
                       <div className="font-medium">{column.column_name}</div>
-                      <div className="text-sm text-gray-500">{column.data_type}</div>
+                      <div className="text-sm text-muted-foreground">{column.data_type}</div>
                     </div>
                   ))}
                   {toColumns.length === 0 && toTable && (
-                    <div className="text-center text-gray-500 py-4">
+                    <div className="text-center text-muted-foreground py-4">
                       컬럼을 불러오는 중...
                     </div>
                   )}
@@ -484,22 +484,22 @@ export default function BatchCreatePage() {
           <CardContent>
             <div className="space-y-3">
               {mappings.map((mapping, index) => (
-                <div key={index} className="flex items-center justify-between p-4 border rounded-lg bg-yellow-50">
+                <div key={index} className="flex items-center justify-between p-4 border rounded-lg bg-amber-50">
                   <div className="flex items-center space-x-4">
                     <div className="text-sm">
                       <div className="font-medium">
                         {mapping.from_table_name}.{mapping.from_column_name}
                       </div>
-                      <div className="text-gray-500">
+                      <div className="text-muted-foreground">
                         {mapping.from_column_type}
                       </div>
                     </div>
-                    <ArrowRight className="h-4 w-4 text-gray-400" />
+                    <ArrowRight className="h-4 w-4 text-muted-foreground/70" />
                     <div className="text-sm">
                       <div className="font-medium">
                         {mapping.to_table_name}.{mapping.to_column_name}
                       </div>
-                      <div className="text-gray-500">
+                      <div className="text-muted-foreground">
                         {mapping.to_column_type}
                       </div>
                     </div>
@@ -508,7 +508,7 @@ export default function BatchCreatePage() {
                     variant="ghost"
                     size="sm"
                     onClick={() => removeMapping(index)}
-                    className="text-red-600 hover:text-red-700"
+                    className="text-destructive hover:text-destructive"
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>
diff --git a/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx b/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx
index c72bfc40..554cd9a5 100644
--- a/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx
@@ -815,7 +815,7 @@ export default function BatchEditPage() {
                       </SelectContent>
                     </Select>
                   )}
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     {authTokenMode === "direct"
                       ? "API 호출 시 Authorization 헤더에 사용할 토큰을 입력하세요."
                       : "auth_tokens 테이블에서 선택한 서비스의 최신 토큰을 사용합니다."}
@@ -874,7 +874,7 @@ export default function BatchEditPage() {
                     onChange={(e) => setDataArrayPath(e.target.value)}
                     placeholder="response (예: data.items, results)"
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
                     <br />
                     예시: response, data.items, result.list
@@ -902,7 +902,7 @@ export default function BatchEditPage() {
                       className="min-h-[100px]"
                       rows={5}
                     />
-                    <p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
+                    <p className="mt-1 text-xs text-muted-foreground">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
                   </div>
                 )}
 
@@ -910,7 +910,7 @@ export default function BatchEditPage() {
                 <div className="space-y-4">
                   <div className="border-t pt-4">
                     <Label className="text-base font-medium">API 파라미터 설정</Label>
-                    <p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
+                    <p className="mt-1 text-sm text-muted-foreground">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
                   </div>
 
                   <div>
@@ -967,26 +967,26 @@ export default function BatchEditPage() {
                           }
                         />
                         {apiParamSource === "dynamic" && (
-                          <p className="mt-1 text-xs text-gray-500">
+                          <p className="mt-1 text-xs text-muted-foreground">
                             동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
                           </p>
                         )}
                       </div>
 
                       {apiParamType === "url" && (
-                        <div className="rounded-lg bg-blue-50 p-3">
-                          <div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-blue-700">
+                        <div className="rounded-lg bg-primary/10 p-3">
+                          <div className="text-sm font-medium text-primary">URL 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-primary">
                             엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
                           </div>
-                          <div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
+                          <div className="text-sm text-primary">실제 호출: /api/users/{apiParamValue || "123"}</div>
                         </div>
                       )}
 
                       {apiParamType === "query" && (
-                        <div className="rounded-lg bg-green-50 p-3">
-                          <div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-green-700">
+                        <div className="rounded-lg bg-emerald-50 p-3">
+                          <div className="text-sm font-medium text-emerald-800">쿼리 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-emerald-700">
                             실제 호출: {mappings[0]?.from_table_name || "/api/users"}?{apiParamName || "userId"}=
                             {apiParamValue || "123"}
                           </div>
diff --git a/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx b/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx
index c492a526..65acd785 100644
--- a/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx
@@ -294,7 +294,7 @@ export default function FlowEditorPage() {
           onNodeDragStop={handleNodeDragStop}
           nodeTypes={nodeTypes}
           fitView
-          className="bg-gray-50"
+          className="bg-muted"
         >
           <Background />
           <Controls />
diff --git a/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx b/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx
index d283f72d..6435274e 100644
--- a/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx
@@ -996,7 +996,7 @@ export default function FlowManagementPage() {
                                     <div className="flex flex-col">
                                       <span className="font-medium">{table.displayName || table.tableName}</span>
                                       {table.description && (
-                                        <span className="text-[10px] text-gray-500">{table.description}</span>
+                                        <span className="text-[10px] text-muted-foreground">{table.description}</span>
                                       )}
                                     </div>
                                   </CommandItem>
diff --git a/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx
index e6a85942..4dc9626d 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx
@@ -409,7 +409,7 @@ example2@example.com,김철수,XYZ회사`;
                 {recipients.length > 0 && (
                   <div className="rounded-md border bg-muted p-4">
                     <div className="flex items-center gap-2 text-sm">
-                      <CheckCircle2 className="h-4 w-4 text-green-600" />
+                      <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                       <span className="font-medium">{recipients.length}명의 수신자</span>
                     </div>
                     <p className="mt-1 text-xs text-muted-foreground">
diff --git a/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx
index b51a464f..a6d48424 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx
@@ -101,8 +101,8 @@ export default function MailDashboardPage() {
       value: stats.totalAccounts,
       icon: Users,
       color: "blue",
-      bgColor: "bg-blue-100",
-      iconColor: "text-blue-600",
+      bgColor: "bg-primary/10",
+      iconColor: "text-primary",
       href: "/admin/mail/accounts",
     },
     {
@@ -110,8 +110,8 @@ export default function MailDashboardPage() {
       value: stats.totalTemplates,
       icon: FileText,
       color: "green",
-      bgColor: "bg-green-100",
-      iconColor: "text-green-600",
+      bgColor: "bg-emerald-100",
+      iconColor: "text-emerald-600",
       href: "/admin/mail/templates",
     },
     {
@@ -119,8 +119,8 @@ export default function MailDashboardPage() {
       value: stats.sentToday,
       icon: Send,
       color: "orange",
-      bgColor: "bg-orange-100",
-      iconColor: "text-orange-600",
+      bgColor: "bg-amber-100",
+      iconColor: "text-amber-600",
       href: "/admin/mail/sent",
     },
     {
diff --git a/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
index bcb2775b..9e11fca7 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
@@ -438,8 +438,8 @@ export default function MailReceivePage() {
               <div
                 className={`mt-4 p-3 rounded-lg flex items-center gap-2 ${
                   testResult.success
-                    ? "bg-green-50 text-green-800 border border-green-200"
-                    : "bg-red-50 text-red-800 border border-red-200"
+                    ? "bg-emerald-50 text-emerald-800 border border-emerald-200"
+                    : "bg-destructive/10 text-red-800 border border-destructive/20"
                 }`}
               >
                 {testResult.success ? (
@@ -460,7 +460,7 @@ export default function MailReceivePage() {
               <div className="flex flex-col md:flex-row gap-3">
                 {/* 검색 */}
                 <div className="flex-1 relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
                   <input
                     type="text"
                     value={searchTerm}
@@ -511,7 +511,7 @@ export default function MailReceivePage() {
                   {filteredAndSortedMails.length}개의 메일이 검색되었습니다
                   {searchTerm && (
                     <span className="ml-2">
-                      (검색어: <span className="font-medium text-orange-600">{searchTerm}</span>)
+                      (검색어: <span className="font-medium text-amber-600">{searchTerm}</span>)
                     </span>
                   )}
                 </div>
@@ -527,14 +527,14 @@ export default function MailReceivePage() {
             {loading ? (
               <Card className="">
                 <CardContent className="flex justify-center items-center py-16">
-                  <Loader2 className="w-8 h-8 animate-spin text-orange-500" />
+                  <Loader2 className="w-8 h-8 animate-spin text-amber-500" />
                   <span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
                 </CardContent>
               </Card>
             ) : filteredAndSortedMails.length === 0 ? (
               <Card className="text-center py-16 bg-card ">
                 <CardContent className="pt-6">
-                  <Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+                  <Mail className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
                   <p className="text-muted-foreground mb-4">
                     {!selectedAccountId
                       ? "메일 계정을 선택하세요"
@@ -560,9 +560,9 @@ export default function MailReceivePage() {
               </Card>
             ) : (
               <Card className="">
-                <CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
+                <CardHeader className="bg-gradient-to-r from-slate-50 to-muted border-b">
                   <CardTitle className="flex items-center gap-2">
-                    <Inbox className="w-5 h-5 text-orange-500" />
+                    <Inbox className="w-5 h-5 text-amber-500" />
                     받은 메일함 ({filteredAndSortedMails.length}/{mails.length}개)
                   </CardTitle>
                 </CardHeader>
@@ -573,14 +573,14 @@ export default function MailReceivePage() {
                         key={mail.id}
                         onClick={() => handleMailClick(mail)}
                         className={`p-4 hover:bg-background transition-colors cursor-pointer ${
-                          !mail.isRead ? "bg-blue-50/30" : ""
+                          !mail.isRead ? "bg-primary/10/30" : ""
                         } ${selectedMailId === mail.id ? "bg-accent border-l-4 border-l-primary" : ""}`}
                       >
                         <div className="flex items-start gap-4">
                           {/* 읽음 표시 */}
                           <div className="flex-shrink-0 w-2 h-2 mt-2">
                             {!mail.isRead && (
-                              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                              <div className="w-2 h-2 bg-primary rounded-full"></div>
                             )}
                           </div>
 
@@ -598,7 +598,7 @@ export default function MailReceivePage() {
                               </span>
                               <div className="flex items-center gap-2">
                                 {mail.hasAttachments && (
-                                  <Paperclip className="w-4 h-4 text-gray-400" />
+                                  <Paperclip className="w-4 h-4 text-muted-foreground/70" />
                                 )}
                                 <span className="text-xs text-muted-foreground">
                                   {formatDate(mail.date)}
@@ -882,14 +882,14 @@ export default function MailReceivePage() {
             ) : loadingDetail ? (
               <Card className="sticky top-6">
                 <CardContent className="flex justify-center items-center py-16">
-                  <Loader2 className="w-8 h-8 animate-spin text-orange-500" />
+                  <Loader2 className="w-8 h-8 animate-spin text-amber-500" />
                   <span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
                 </CardContent>
               </Card>
             ) : (
               <Card className="sticky top-6">
                 <CardContent className="flex flex-col justify-center items-center py-16 text-center">
-                  <Mail className="w-16 h-16 mb-4 text-gray-300" />
+                  <Mail className="w-16 h-16 mb-4 text-muted-foreground/50" />
                   <p className="text-muted-foreground">
                     메일을 선택하면 내용이 표시됩니다
                   </p>
@@ -900,10 +900,10 @@ export default function MailReceivePage() {
         </div>
 
         {/* 안내 정보 */}
-        <Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 ">
+        <Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-emerald-200 ">
           <CardHeader>
             <CardTitle className="text-lg flex items-center">
-              <CheckCircle className="w-5 h-5 mr-2 text-green-600" />
+              <CheckCircle className="w-5 h-5 mr-2 text-emerald-600" />
               메일 수신 기능 완성! 🎉
             </CardTitle>
           </CardHeader>
@@ -913,81 +913,81 @@ export default function MailReceivePage() {
             </p>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               <div>
-                <p className="font-medium text-gray-800 mb-2">📬 기본 기능</p>
+                <p className="font-medium text-foreground mb-2">📬 기본 기능</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>IMAP 프로토콜 메일 수신</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>메일 목록 표시</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>읽음/안읽음 상태</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>첨부파일 유무 표시</span>
                   </li>
                 </ul>
               </div>
               <div>
-                <p className="font-medium text-gray-800 mb-2">📄 상세보기</p>
+                <p className="font-medium text-foreground mb-2">📄 상세보기</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>HTML 본문 렌더링</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>텍스트 본문 보기</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>자동 읽음 처리</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>첨부파일 다운로드</span>
                   </li>
                 </ul>
               </div>
               <div>
-                <p className="font-medium text-gray-800 mb-2">🔍 고급 기능</p>
+                <p className="font-medium text-foreground mb-2">🔍 고급 기능</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>통합 검색 (제목/발신자/내용)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>필터링 (읽음/첨부파일)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>정렬 (날짜/발신자)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>자동 새로고침 (30초)</span>
                   </li>
                 </ul>
               </div>
               <div>
-                <p className="font-medium text-gray-800 mb-2">🔒 보안</p>
+                <p className="font-medium text-foreground mb-2">🔒 보안</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>XSS 방지 (DOMPurify)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>비밀번호 암호화</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>안전한 파일명 생성</span>
                   </li>
                 </ul>
diff --git a/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx
index cdd8feae..ad80ff48 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx
@@ -516,12 +516,12 @@ ${data.originalBody}`;
       toast({
         title: (
           <div className="flex items-center gap-2">
-            <CheckCircle2 className="w-5 h-5 text-green-500" />
+            <CheckCircle2 className="w-5 h-5 text-emerald-500" />
             <span>메일 발송 완료!</span>
           </div>
         ) as any,
         description: `${to.length}명${cc.length > 0 ? ` (참조 ${cc.length}명)` : ""}${bcc.length > 0 ? ` (숨은참조 ${bcc.length}명)` : ""}${attachments.length > 0 ? ` (첨부파일 ${attachments.length}개)` : ""}에게 메일이 성공적으로 발송되었습니다.`,
-        className: "border-green-500 bg-green-50",
+        className: "border-emerald-500 bg-emerald-50",
       });
 
       // 알림 갱신 이벤트 발생
@@ -544,7 +544,7 @@ ${data.originalBody}`;
       toast({
         title: (
           <div className="flex items-center gap-2">
-            <AlertCircle className="w-5 h-5 text-red-500" />
+            <AlertCircle className="w-5 h-5 text-destructive" />
             <span>메일 발송 실패</span>
           </div>
         ) as any,
@@ -781,7 +781,7 @@ ${data.originalBody}`;
                   </>
                 ) : (
                   <>
-                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                     <span>
                       {new Date(lastSaved).toLocaleTimeString('ko-KR', {
                         hour: '2-digit',
@@ -895,7 +895,7 @@ ${data.originalBody}`;
                     {to.map((email) => (
                       <div
                         key={email}
-                        className="flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-md text-sm"
+                        className="flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm"
                       >
                         <span>{email}</span>
                         <button
@@ -933,12 +933,12 @@ ${data.originalBody}`;
                     {cc.map((email) => (
                       <div
                         key={email}
-                        className="flex items-center gap-1 px-2 py-1 bg-green-100 text-green-700 rounded-md text-sm"
+                        className="flex items-center gap-1 px-2 py-1 bg-emerald-100 text-emerald-700 rounded-md text-sm"
                       >
                         <span>{email}</span>
                         <button
                           onClick={() => removeEmail(email, "cc")}
-                          className="hover:bg-green-200 rounded p-0.5"
+                          className="hover:bg-emerald-200 rounded p-0.5"
                         >
                           <X className="w-3 h-3" />
                         </button>
@@ -1222,7 +1222,7 @@ ${data.originalBody}`;
                                 <div 
                                   key={component.id} 
                                   style={{ height: `${component.height || 20}px` }}
-                                  className="bg-background rounded flex items-center justify-center text-xs text-gray-400"
+                                  className="bg-background rounded flex items-center justify-center text-xs text-muted-foreground/70"
                                 >
                                   여백
                                 </div>
@@ -1236,7 +1236,7 @@ ${data.originalBody}`;
                                       {component.logoSrc && <img src={component.logoSrc} alt="로고" className="h-10" />}
                                       <span className="font-bold text-lg">{component.brandName}</span>
                                     </div>
-                                    <span className="text-sm text-gray-500">{component.sendDate}</span>
+                                    <span className="text-sm text-muted-foreground">{component.sendDate}</span>
                                   </div>
                                 </div>
                               );
@@ -1245,13 +1245,13 @@ ${data.originalBody}`;
                               return (
                                 <div key={component.id} className="border rounded-lg overflow-hidden">
                                   {component.tableTitle && (
-                                    <div className="bg-gray-50 px-4 py-2 font-semibold border-b">{component.tableTitle}</div>
+                                    <div className="bg-muted px-4 py-2 font-semibold border-b">{component.tableTitle}</div>
                                   )}
                                   <table className="w-full">
                                     <tbody>
                                       {component.rows?.map((row: any, i: number) => (
-                                        <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                                          <td className="px-4 py-2 font-medium text-gray-600 w-1/3 border-r">{row.label}</td>
+                                        <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-muted'}>
+                                          <td className="px-4 py-2 font-medium text-muted-foreground w-1/3 border-r">{row.label}</td>
                                           <td className="px-4 py-2">{row.value}</td>
                                         </tr>
                                       ))}
@@ -1263,9 +1263,9 @@ ${data.originalBody}`;
                             case 'alertBox':
                               return (
                                 <div key={component.id} className={`p-4 rounded-lg border-l-4 ${
-                                  component.alertType === 'info' ? 'bg-blue-50 border-blue-500 text-blue-800' :
+                                  component.alertType === 'info' ? 'bg-primary/10 border-primary text-primary' :
                                   component.alertType === 'warning' ? 'bg-amber-50 border-amber-500 text-amber-800' :
-                                  component.alertType === 'danger' ? 'bg-red-50 border-red-500 text-red-800' :
+                                  component.alertType === 'danger' ? 'bg-destructive/10 border-destructive text-red-800' :
                                   'bg-emerald-50 border-emerald-500 text-emerald-800'
                                 }`}>
                                   {component.alertTitle && <div className="font-bold mb-1">{component.alertTitle}</div>}
@@ -1275,13 +1275,13 @@ ${data.originalBody}`;
 
                             case 'divider':
                               return (
-                                <hr key={component.id} className="border-gray-300" style={{ borderWidth: `${component.height || 1}px` }} />
+                                <hr key={component.id} className="border-input" style={{ borderWidth: `${component.height || 1}px` }} />
                               );
 
                             case 'footer':
                               return (
-                                <div key={component.id} className="text-center text-sm text-gray-500 py-4 border-t bg-gray-50">
-                                  {component.companyName && <div className="font-semibold text-gray-700">{component.companyName}</div>}
+                                <div key={component.id} className="text-center text-sm text-muted-foreground py-4 border-t bg-muted">
+                                  {component.companyName && <div className="font-semibold text-foreground">{component.companyName}</div>}
                                   {(component.ceoName || component.businessNumber) && (
                                     <div className="mt-1">
                                       {component.ceoName && <span>대표: {component.ceoName}</span>}
@@ -1297,7 +1297,7 @@ ${data.originalBody}`;
                                       {component.email && <span>Email: {component.email}</span>}
                                     </div>
                                   )}
-                                  {component.copyright && <div className="mt-2 text-xs text-gray-400">{component.copyright}</div>}
+                                  {component.copyright && <div className="mt-2 text-xs text-muted-foreground/70">{component.copyright}</div>}
                                 </div>
                               );
 
@@ -1318,9 +1318,9 @@ ${data.originalBody}`;
                           }
                         })}
                       </div>
-                      <div className="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-3 border-t border-green-200">
-                        <p className="text-sm text-green-800 flex items-center gap-2 font-medium">
-                          <CheckCircle2 className="w-4 h-4 text-green-600" />
+                      <div className="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-3 border-t border-emerald-200">
+                        <p className="text-sm text-emerald-800 flex items-center gap-2 font-medium">
+                          <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                           위 내용으로 메일이 발송됩니다
                         </p>
                       </div>
@@ -1396,7 +1396,7 @@ ${data.originalBody}`;
                   onChange={handleFileSelect}
                   className="hidden"
                 />
-                <Upload className="w-12 h-12 mx-auto text-gray-400 mb-3" />
+                <Upload className="w-12 h-12 mx-auto text-muted-foreground/70 mb-3" />
                 <p className="text-sm text-muted-foreground mb-1">
                   파일을 드래그하거나 클릭하여 선택하세요
                 </p>
@@ -1430,7 +1430,7 @@ ${data.originalBody}`;
                           variant="ghost"
                           size="sm"
                           onClick={() => removeFile(index)}
-                          className="flex-shrink-0 text-red-500 hover:text-red-600 hover:bg-red-50"
+                          className="flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                         >
                           <X className="w-4 h-4" />
                         </Button>
@@ -1530,7 +1530,7 @@ ${data.originalBody}`;
                             <div key={index} className="flex items-center gap-2 text-xs text-muted-foreground">
                               <File className="w-3 h-3" />
                               <span className="truncate">{file.name}</span>
-                              <span className="text-gray-400">({formatFileSize(file.size)})</span>
+                              <span className="text-muted-foreground/70">({formatFileSize(file.size)})</span>
                             </div>
                           ))}
                         </div>
diff --git a/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx
index 229217d2..1af1c562 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx
@@ -371,8 +371,8 @@ export default function SentMailPage() {
                   {stats.successCount}
                 </p>
               </div>
-              <div className="p-3 bg-green-500/10 rounded-lg">
-                <CheckCircle2 className="w-6 h-6 text-green-600" />
+              <div className="p-3 bg-emerald-500/10 rounded-lg">
+                <CheckCircle2 className="w-6 h-6 text-emerald-600" />
               </div>
             </div>
           </CardContent>
@@ -387,8 +387,8 @@ export default function SentMailPage() {
                   {stats.failedCount}
                 </p>
               </div>
-              <div className="p-3 bg-red-500/10 rounded-lg">
-                <XCircle className="w-6 h-6 text-red-600" />
+              <div className="p-3 bg-destructive/10 rounded-lg">
+                <XCircle className="w-6 h-6 text-destructive" />
               </div>
             </div>
           </CardContent>
@@ -403,8 +403,8 @@ export default function SentMailPage() {
                   {stats.todayCount}
                 </p>
               </div>
-              <div className="p-3 bg-blue-500/10 rounded-lg">
-                <Calendar className="w-6 h-6 text-blue-600" />
+              <div className="p-3 bg-primary/10 rounded-lg">
+                <Calendar className="w-6 h-6 text-primary" />
               </div>
             </div>
           </CardContent>
diff --git a/frontend/app/(main)/admin/batch-management-new/page.tsx b/frontend/app/(main)/admin/batch-management-new/page.tsx
index 6b282ed4..b7eeb969 100644
--- a/frontend/app/(main)/admin/batch-management-new/page.tsx
+++ b/frontend/app/(main)/admin/batch-management-new/page.tsx
@@ -592,19 +592,19 @@ export default function BatchManagementNewPage() {
                 <div
                   key={option.value}
                   className={`cursor-pointer rounded-lg border p-3 transition-all ${
-                    batchType === option.value ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
+                    batchType === option.value ? "border-primary bg-primary/10" : "border-border hover:border-input"
                   }`}
                   onClick={() => setBatchType(option.value)}
                 >
                   <div className="flex items-center space-x-2">
                     {option.value === "restapi-to-db" ? (
-                      <Globe className="h-4 w-4 text-blue-600" />
+                      <Globe className="h-4 w-4 text-primary" />
                     ) : (
-                      <Database className="h-4 w-4 text-green-600" />
+                      <Database className="h-4 w-4 text-emerald-600" />
                     )}
                     <div>
                       <div className="text-sm font-medium">{option.label}</div>
-                      <div className="mt-1 text-xs text-gray-500">{option.description}</div>
+                      <div className="mt-1 text-xs text-muted-foreground">{option.description}</div>
                     </div>
                   </div>
                 </div>
@@ -739,7 +739,7 @@ export default function BatchManagementNewPage() {
                       </SelectContent>
                     </Select>
                   )}
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     {authTokenMode === "direct"
                       ? "API 호출 시 Authorization 헤더에 사용할 토큰을 입력하세요."
                       : "auth_tokens 테이블에서 선택한 서비스의 최신 토큰을 사용합니다."}
@@ -782,7 +782,7 @@ export default function BatchManagementNewPage() {
                     onChange={(e) => setDataArrayPath(e.target.value)}
                     placeholder="response (예: data.items, results)"
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
                     <br />
                     예시: response, data.items, result.list
@@ -801,7 +801,7 @@ export default function BatchManagementNewPage() {
                       className="min-h-[100px]"
                       rows={5}
                     />
-                    <p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
+                    <p className="mt-1 text-xs text-muted-foreground">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
                   </div>
                 )}
 
@@ -809,7 +809,7 @@ export default function BatchManagementNewPage() {
                 <div className="space-y-4">
                   <div className="border-t pt-4">
                     <Label className="text-base font-medium">API 파라미터 설정</Label>
-                    <p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
+                    <p className="mt-1 text-sm text-muted-foreground">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
                   </div>
 
                   <div>
@@ -868,26 +868,26 @@ export default function BatchManagementNewPage() {
                           }
                         />
                         {apiParamSource === "dynamic" && (
-                          <p className="mt-1 text-xs text-gray-500">
+                          <p className="mt-1 text-xs text-muted-foreground">
                             동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
                           </p>
                         )}
                       </div>
 
                       {apiParamType === "url" && (
-                        <div className="rounded-lg bg-blue-50 p-3">
-                          <div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-blue-700">
+                        <div className="rounded-lg bg-primary/10 p-3">
+                          <div className="text-sm font-medium text-primary">URL 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-primary">
                             엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
                           </div>
-                          <div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
+                          <div className="text-sm text-primary">실제 호출: /api/users/{apiParamValue || "123"}</div>
                         </div>
                       )}
 
                       {apiParamType === "query" && (
-                        <div className="rounded-lg bg-green-50 p-3">
-                          <div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-green-700">
+                        <div className="rounded-lg bg-emerald-50 p-3">
+                          <div className="text-sm font-medium text-emerald-800">쿼리 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-emerald-700">
                             실제 호출: {fromEndpoint || "/api/users"}?{apiParamName || "userId"}=
                             {apiParamValue || "123"}
                           </div>
@@ -899,9 +899,9 @@ export default function BatchManagementNewPage() {
 
                 {/* API 호출 미리보기 정보 */}
                 {fromApiUrl && fromEndpoint && (
-                  <div className="rounded-lg bg-gray-50 p-3">
-                    <div className="text-sm font-medium text-gray-700">API 호출 정보</div>
-                    <div className="mt-1 text-sm text-gray-600">
+                  <div className="rounded-lg bg-muted p-3">
+                    <div className="text-sm font-medium text-foreground">API 호출 정보</div>
+                    <div className="mt-1 text-sm text-muted-foreground">
                       {fromApiMethod} {fromApiUrl}
                       {apiParamType === "url" && apiParamName && apiParamValue
                         ? fromEndpoint.replace(`{${apiParamName}}`, apiParamValue) || fromEndpoint + `/${apiParamValue}`
@@ -911,14 +911,14 @@ export default function BatchManagementNewPage() {
                         : ""}
                     </div>
                     {((authTokenMode === "direct" && fromApiKey) || (authTokenMode === "db" && authServiceName)) && (
-                      <div className="mt-1 text-xs text-gray-500">
+                      <div className="mt-1 text-xs text-muted-foreground">
                         {authTokenMode === "direct"
                           ? `Authorization: Bearer ${fromApiKey.substring(0, 15)}...`
                           : `Authorization: DB 토큰 (${authServiceName})`}
                       </div>
                     )}
                     {apiParamType !== "none" && apiParamName && apiParamValue && (
-                      <div className="mt-1 text-xs text-blue-600">
+                      <div className="mt-1 text-xs text-primary">
                         파라미터: {apiParamName} = {apiParamValue} ({apiParamSource === "static" ? "고정값" : "동적값"})
                       </div>
                     )}
@@ -988,7 +988,7 @@ export default function BatchManagementNewPage() {
                                 setSelectedColumns(selectedColumns.filter((col) => col !== column.column_name));
                               }
                             }}
-                            className="rounded border-gray-300"
+                            className="rounded border-input"
                           />
                           <label
                             htmlFor={`col-${column.column_name}`}
@@ -1002,14 +1002,14 @@ export default function BatchManagementNewPage() {
                     </div>
 
                     {/* 선택된 컬럼 개수 표시 */}
-                    <div className="mt-2 text-xs text-gray-500">
+                    <div className="mt-2 text-xs text-muted-foreground">
                       선택된 컬럼: {selectedColumns.length}개 / 전체: {fromColumns.length}개
                     </div>
 
                     {/* 빠른 매핑 버튼들 */}
                     {selectedColumns.length > 0 && toApiFields.length > 0 && (
-                      <div className="mt-3 rounded-lg border border-green-200 bg-green-50 p-3">
-                        <div className="mb-2 text-sm font-medium text-green-800">빠른 매핑</div>
+                      <div className="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
+                        <div className="mb-2 text-sm font-medium text-emerald-800">빠른 매핑</div>
                         <div className="flex flex-wrap gap-2">
                           <button
                             type="button"
@@ -1051,7 +1051,7 @@ export default function BatchManagementNewPage() {
                               setDbToApiFieldMapping(mapping);
                               toast.success(`${Object.keys(mapping).length}개 컬럼이 자동 매핑되었습니다.`);
                             }}
-                            className="rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+                            className="rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
                           >
                             스마트 자동 매핑
                           </button>
@@ -1061,7 +1061,7 @@ export default function BatchManagementNewPage() {
                               setDbToApiFieldMapping({});
                               toast.success("매핑이 초기화되었습니다.");
                             }}
-                            className="rounded bg-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-700"
+                            className="rounded bg-foreground/80 px-3 py-1 text-xs text-white hover:bg-foreground/90"
                           >
                             매핑 초기화
                           </button>
@@ -1071,9 +1071,9 @@ export default function BatchManagementNewPage() {
 
                     {/* 자동 생성된 JSON 미리보기 */}
                     {selectedColumns.length > 0 && (
-                      <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-                        <div className="mb-2 text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
-                        <pre className="overflow-x-auto font-mono text-xs text-blue-600">
+                      <div className="mt-3 rounded-lg border border-primary/20 bg-primary/10 p-3">
+                        <div className="mb-2 text-sm font-medium text-primary">자동 생성된 JSON 구조</div>
+                        <pre className="overflow-x-auto font-mono text-xs text-primary">
                           {JSON.stringify(
                             selectedColumns.reduce(
                               (obj, col) => {
@@ -1105,7 +1105,7 @@ export default function BatchManagementNewPage() {
                             setToApiBody(autoJson);
                             toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
                           }}
-                          className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+                          className="mt-2 rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
                         >
                           Request Body에 적용
                         </button>
@@ -1231,7 +1231,7 @@ export default function BatchManagementNewPage() {
                       ))}
                     </SelectContent>
                   </Select>
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     이 컬럼 값이 같으면 UPDATE, 없으면 INSERT 합니다. (예: device_serial_number)
                   </p>
                 </div>
@@ -1273,7 +1273,7 @@ export default function BatchManagementNewPage() {
                     placeholder="/api/users"
                   />
                   {(toApiMethod === "PUT" || toApiMethod === "DELETE") && (
-                    <p className="mt-1 text-xs text-gray-500">
+                    <p className="mt-1 text-xs text-muted-foreground">
                       실제 URL: {toEndpoint}/{urlPathColumn ? `{${urlPathColumn}}` : "{ID}"}
                     </p>
                   )}
@@ -1310,7 +1310,7 @@ export default function BatchManagementNewPage() {
                         ))}
                       </SelectContent>
                     </Select>
-                    <p className="mt-1 text-xs text-gray-500">
+                    <p className="mt-1 text-xs text-muted-foreground">
                       PUT/DELETE 요청 시 URL 경로에 포함될 컬럼을 선택하세요. (예: USER_ID → /api/users/user123)
                     </p>
                   </div>
@@ -1321,7 +1321,7 @@ export default function BatchManagementNewPage() {
                   <button
                     type="button"
                     onClick={previewToApiData}
-                    className="flex items-center space-x-2 rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700"
+                    className="flex items-center space-x-2 rounded-md bg-emerald-600 px-4 py-2 text-white hover:bg-green-700"
                   >
                     <Eye className="h-4 w-4" />
                     <span>API 필드 미리보기</span>
@@ -1330,13 +1330,13 @@ export default function BatchManagementNewPage() {
 
                 {/* TO API 필드 표시 */}
                 {toApiFields.length > 0 && (
-                  <div className="rounded-lg border border-green-200 bg-green-50 p-3">
-                    <div className="mb-2 text-sm font-medium text-green-800">
+                  <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
+                    <div className="mb-2 text-sm font-medium text-emerald-800">
                       API 필드 목록 ({toApiFields.length}개)
                     </div>
                     <div className="flex flex-wrap gap-2">
                       {toApiFields.map((field) => (
-                        <span key={field} className="rounded bg-green-100 px-2 py-1 text-xs text-green-700">
+                        <span key={field} className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-700">
                           {field}
                         </span>
                       ))}
@@ -1355,7 +1355,7 @@ export default function BatchManagementNewPage() {
                       placeholder='{"id": "{{id}}", "name": "{{name}}", "email": "{{email}}"}'
                       className="h-24 w-full rounded-md border p-2 font-mono text-sm"
                     />
-                    <div className="mt-1 text-xs text-gray-500">
+                    <div className="mt-1 text-xs text-muted-foreground">
                       DB 컬럼 값을 {"{{컬럼명}}"} 형태로 매핑하세요. 예: {"{{user_id}}, {{user_name}}"}
                     </div>
                   </div>
@@ -1363,15 +1363,15 @@ export default function BatchManagementNewPage() {
 
                 {/* API 호출 정보 */}
                 {toApiUrl && toApiKey && toEndpoint && (
-                  <div className="rounded-lg bg-gray-50 p-3">
-                    <div className="text-sm font-medium text-gray-700">API 호출 정보</div>
-                    <div className="mt-1 text-sm text-gray-600">
+                  <div className="rounded-lg bg-muted p-3">
+                    <div className="text-sm font-medium text-foreground">API 호출 정보</div>
+                    <div className="mt-1 text-sm text-muted-foreground">
                       {toApiMethod} {toApiUrl}
                       {toEndpoint}
                     </div>
-                    <div className="mt-1 text-xs text-gray-500">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
+                    <div className="mt-1 text-xs text-muted-foreground">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
                     {toApiBody && (
-                      <div className="mt-1 text-xs text-blue-600">Body: {toApiBody.substring(0, 50)}...</div>
+                      <div className="mt-1 text-xs text-primary">Body: {toApiBody.substring(0, 50)}...</div>
                     )}
                   </div>
                 )}
@@ -1394,7 +1394,7 @@ export default function BatchManagementNewPage() {
             데이터 불러오고 매핑하기
           </Button>
           {(!fromApiUrl || !fromEndpoint || !toTable) && (
-            <p className="ml-4 flex items-center text-xs text-gray-500">
+            <p className="ml-4 flex items-center text-xs text-muted-foreground">
               FROM 섹션과 TO 섹션의 필수 값을 모두 입력해야 합니다.
             </p>
           )}
@@ -1693,17 +1693,17 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
       <CardContent>
         <div className="max-h-96 space-y-3 overflow-y-auto rounded-lg border p-4">
           {selectedColumnObjects.map((column) => (
-            <div key={column.column_name} className="flex items-center space-x-4 rounded-lg bg-gray-50 p-3">
+            <div key={column.column_name} className="flex items-center space-x-4 rounded-lg bg-muted p-3">
               {/* DB 컬럼 정보 */}
               <div className="flex-1">
                 <div className="text-sm font-medium">{column.column_name}</div>
-                <div className="text-xs text-gray-500">
+                <div className="text-xs text-muted-foreground">
                   타입: {column.data_type} | NULL: {column.is_nullable ? "Y" : "N"}
                 </div>
               </div>
 
               {/* 화살표 */}
-              <div className="text-gray-400">→</div>
+              <div className="text-muted-foreground/70">→</div>
 
               {/* API 필드 선택 드롭다운 */}
               <div className="flex-1">
@@ -1735,7 +1735,7 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
                   <input
                     type="text"
                     placeholder="API 필드명을 직접 입력하세요"
-                    className="mt-2 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    className="mt-2 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-2 focus:ring-ring focus:outline-none"
                     onChange={(e) => {
                       setDbToApiFieldMapping((prev) => ({
                         ...prev,
@@ -1745,7 +1745,7 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
                   />
                 )}
 
-                <div className="mt-1 text-xs text-gray-500">
+                <div className="mt-1 text-xs text-muted-foreground">
                   {dbToApiFieldMapping[column.column_name]
                     ? `매핑: ${column.column_name} → ${dbToApiFieldMapping[column.column_name]}`
                     : `기본값: ${column.column_name} (DB 컬럼명 사용)`}
@@ -1755,32 +1755,32 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
               {/* 템플릿 미리보기 */}
               <div className="flex-1">
                 <div className="rounded border bg-white p-2 font-mono text-sm">{`{{${column.column_name}}}`}</div>
-                <div className="mt-1 text-xs text-gray-500">실제 DB 값으로 치환됩니다</div>
+                <div className="mt-1 text-xs text-muted-foreground">실제 DB 값으로 치환됩니다</div>
               </div>
             </div>
           ))}
         </div>
 
         {selectedColumns.length > 0 && (
-          <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
-            <div className="text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
-            <pre className="mt-1 overflow-x-auto font-mono text-xs text-blue-600">{autoJsonPreview}</pre>
+          <div className="mt-4 rounded-lg border border-primary/20 bg-primary/10 p-3">
+            <div className="text-sm font-medium text-primary">자동 생성된 JSON 구조</div>
+            <pre className="mt-1 overflow-x-auto font-mono text-xs text-primary">{autoJsonPreview}</pre>
             <button
               type="button"
               onClick={() => {
                 setToApiBody(autoJsonPreview);
                 toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
               }}
-              className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+              className="mt-2 rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
             >
               Request Body에 적용
             </button>
           </div>
         )}
 
-        <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
-          <div className="text-sm font-medium text-blue-800">매핑 사용 예시</div>
-          <div className="mt-1 font-mono text-xs text-blue-600">
+        <div className="mt-4 rounded-lg border border-primary/20 bg-primary/10 p-3">
+          <div className="text-sm font-medium text-primary">매핑 사용 예시</div>
+          <div className="mt-1 font-mono text-xs text-primary">
             {'{"id": "{{id}}", "name": "{{user_name}}", "email": "{{email}}"}'}
           </div>
         </div>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx
index b93e1797..d5b58018 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx
@@ -381,7 +381,7 @@ export default function AutoFillTab() {
                         <Pencil className="h-4 w-4" />
                       </Button>
                       <Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(group.groupCode)}>
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </TableCell>
                   </TableRow>
@@ -676,7 +676,7 @@ export default function AutoFillTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx
index 9cdfc1c1..e540a20b 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx
@@ -577,9 +577,9 @@ export default function CascadingRelationsTab() {
                       </TableCell>
                       <TableCell>
                         <div className="flex items-center gap-2 text-sm">
-                          <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-700">{relation.parent_table}</span>
+                          <span className="rounded bg-primary/10 px-2 py-0.5 text-primary">{relation.parent_table}</span>
                           <ChevronRight className="text-muted-foreground h-4 w-4" />
-                          <span className="rounded bg-green-100 px-2 py-0.5 text-green-700">
+                          <span className="rounded bg-emerald-100 px-2 py-0.5 text-emerald-700">
                             {relation.child_table}
                           </span>
                         </div>
@@ -619,7 +619,7 @@ export default function CascadingRelationsTab() {
           <div className="space-y-4">
             {/* Step 1: 부모 테이블 */}
             <div className="rounded-lg border p-4">
-              <h4 className="mb-3 text-sm font-semibold text-blue-600">1. 부모 (상위 선택)</h4>
+              <h4 className="mb-3 text-sm font-semibold text-primary">1. 부모 (상위 선택)</h4>
               <div className="grid grid-cols-2 gap-3">
                 <div className="space-y-1.5">
                   <Label className="text-xs">테이블</Label>
@@ -696,7 +696,7 @@ export default function CascadingRelationsTab() {
 
             {/* Step 2: 자식 테이블 */}
             <div className="rounded-lg border p-4">
-              <h4 className="mb-3 text-sm font-semibold text-green-600">2. 자식 (하위 옵션)</h4>
+              <h4 className="mb-3 text-sm font-semibold text-emerald-600">2. 자식 (하위 옵션)</h4>
               <div className="grid grid-cols-2 gap-3">
                 <div className="space-y-1.5">
                   <Label className="text-xs">테이블</Label>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx
index 3bc452c9..c4fa67e6 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx
@@ -304,7 +304,7 @@ export default function ConditionTab() {
                     <TableCell>
                       <div className="text-sm">
                         <span className="text-muted-foreground">{condition.conditionField}</span>
-                        <span className="mx-1 text-blue-600">{getOperatorLabel(condition.conditionOperator)}</span>
+                        <span className="mx-1 text-primary">{getOperatorLabel(condition.conditionOperator)}</span>
                         <span className="font-medium">{condition.conditionValue}</span>
                       </div>
                     </TableCell>
@@ -329,7 +329,7 @@ export default function ConditionTab() {
                         size="icon"
                         onClick={() => handleDeleteConfirm(condition.conditionId!)}
                       >
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </TableCell>
                   </TableRow>
@@ -491,7 +491,7 @@ export default function ConditionTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx
index 2e5d7172..ebc0342b 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx
@@ -501,7 +501,7 @@ export default function HierarchyTab() {
                           <Pencil className="h-4 w-4" />
                         </Button>
                         <Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(group.groupCode)}>
-                          <Trash2 className="h-4 w-4 text-red-500" />
+                          <Trash2 className="h-4 w-4 text-destructive" />
                         </Button>
                       </div>
                     </div>
@@ -548,7 +548,7 @@ export default function HierarchyTab() {
                                     size="icon"
                                     onClick={() => handleDeleteLevel(level.levelId!, group.groupCode)}
                                   >
-                                    <Trash2 className="h-4 w-4 text-red-500" />
+                                    <Trash2 className="h-4 w-4 text-destructive" />
                                   </Button>
                                 </TableCell>
                               </TableRow>
@@ -836,7 +836,7 @@ export default function HierarchyTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx
index 92210818..b9cc9220 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx
@@ -354,7 +354,7 @@ export default function MutualExclusionTab() {
                         <Pencil className="h-4 w-4" />
                       </Button>
                       <Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(exclusion.exclusionId!)}>
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </TableCell>
                   </TableRow>
@@ -404,7 +404,7 @@ export default function MutualExclusionTab() {
                     />
                     {fieldList.length > 2 && (
                       <Button variant="ghost" size="icon" onClick={() => removeField(index)}>
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     )}
                   </div>
@@ -571,7 +571,7 @@ export default function MutualExclusionTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/debug-layout/page.tsx b/frontend/app/(main)/admin/debug-layout/page.tsx
index 30674bca..736d5283 100644
--- a/frontend/app/(main)/admin/debug-layout/page.tsx
+++ b/frontend/app/(main)/admin/debug-layout/page.tsx
@@ -133,7 +133,7 @@ export default function DebugLayoutPage() {
       <h1 className="mb-4 text-2xl font-bold">관리자 레이아웃 디버깅</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-green-100 p-4">
+        <div className="rounded bg-emerald-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 상태</h2>
           <p>토큰 존재: {debugInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
           <p>토큰 길이: {debugInfo.tokenLength}</p>
@@ -142,14 +142,14 @@ export default function DebugLayoutPage() {
           <p>SessionStorage 토큰: {debugInfo.sessionToken ? "✅ 존재" : "❌ 없음"}</p>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">페이지 정보</h2>
           <p>현재 URL: {debugInfo.currentUrl}</p>
           <p>Pathname: {debugInfo.pathname}</p>
           <p>시간: {debugInfo.timestamp}</p>
         </div>
 
-        <div className="rounded bg-yellow-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 관리</h2>
           <div className="space-x-2">
             <button
@@ -157,11 +157,11 @@ export default function DebugLayoutPage() {
                 const token = localStorage.getItem("authToken");
                 alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
               }}
-              className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+              className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
             >
               토큰 확인
             </button>
-            <button onClick={handleTokenSync} className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600">
+            <button onClick={handleTokenSync} className="rounded bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600">
               토큰 동기화
             </button>
             <button
@@ -173,13 +173,13 @@ export default function DebugLayoutPage() {
           </div>
         </div>
 
-        <div className="rounded bg-orange-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">API 테스트</h2>
           <div className="mb-4 space-x-2">
-            <button onClick={handleApiTest} className="rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600">
+            <button onClick={handleApiTest} className="rounded bg-amber-500 px-4 py-2 text-white hover:bg-orange-600">
               인증 상태 API 테스트
             </button>
-            <button onClick={handleUserApiTest} className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
+            <button onClick={handleUserApiTest} className="rounded bg-destructive px-4 py-2 text-white hover:bg-destructive">
               사용자 API 테스트
             </button>
             <button
@@ -194,7 +194,7 @@ export default function DebugLayoutPage() {
             <div
               className={`rounded p-3 ${
                 apiTestResult.status === "success"
-                  ? "bg-green-200"
+                  ? "bg-emerald-200"
                   : apiTestResult.status === "error"
                     ? "bg-red-200"
                     : "bg-yellow-200"
diff --git a/frontend/app/(main)/admin/debug-simple/page.tsx b/frontend/app/(main)/admin/debug-simple/page.tsx
index 7861bfb5..5a9d65be 100644
--- a/frontend/app/(main)/admin/debug-simple/page.tsx
+++ b/frontend/app/(main)/admin/debug-simple/page.tsx
@@ -28,27 +28,27 @@ export default function SimpleDebugPage() {
       <h1 className="mb-4 text-2xl font-bold">간단한 토큰 디버깅</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-green-100 p-4">
+        <div className="rounded bg-emerald-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 상태</h2>
           <p>토큰 존재: {tokenInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
           <p>토큰 길이: {tokenInfo.tokenLength}</p>
           <p>토큰 시작: {tokenInfo.tokenStart}</p>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">페이지 정보</h2>
           <p>현재 URL: {tokenInfo.currentUrl}</p>
           <p>시간: {tokenInfo.timestamp}</p>
         </div>
 
-        <div className="rounded bg-yellow-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">테스트 버튼</h2>
           <button
             onClick={() => {
               const token = localStorage.getItem("authToken");
               alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
             }}
-            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+            className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
           >
             토큰 확인
           </button>
diff --git a/frontend/app/(main)/admin/debug/page.tsx b/frontend/app/(main)/admin/debug/page.tsx
index eb3174f5..4e3646b4 100644
--- a/frontend/app/(main)/admin/debug/page.tsx
+++ b/frontend/app/(main)/admin/debug/page.tsx
@@ -15,16 +15,16 @@ export default function AdminDebugPage() {
         <h1 className="mb-4 text-2xl font-bold">어드민 권한 디버깅</h1>
 
         <div className="space-y-4">
-          <div className="rounded bg-gray-100 p-4">
+          <div className="rounded bg-muted p-4">
             <h2 className="mb-2 font-semibold">인증 상태</h2>
             <p>로딩: {loading ? "예" : "아니오"}</p>
             <p>로그인: {isLoggedIn ? "예" : "아니오"}</p>
             <p>관리자: {isAdmin ? "예" : "아니오"}</p>
-            {error && <p className="text-red-500">에러: {error}</p>}
+            {error && <p className="text-destructive">에러: {error}</p>}
           </div>
 
           {user && (
-            <div className="rounded bg-blue-100 p-4">
+            <div className="rounded bg-primary/10 p-4">
               <h2 className="mb-2 font-semibold">사용자 정보</h2>
               <p>ID: {user.userId}</p>
               <p>이름: {user.userName}</p>
@@ -34,7 +34,7 @@ export default function AdminDebugPage() {
             </div>
           )}
 
-          <div className="rounded bg-green-100 p-4">
+          <div className="rounded bg-emerald-100 p-4">
             <h2 className="mb-2 font-semibold">토큰 정보</h2>
             <p>
               localStorage 토큰: {typeof window !== "undefined" && localStorage.getItem("authToken") ? "존재" : "없음"}
diff --git a/frontend/app/(main)/admin/layouts/page.tsx b/frontend/app/(main)/admin/layouts/page.tsx
index 6f7da62a..322db584 100644
--- a/frontend/app/(main)/admin/layouts/page.tsx
+++ b/frontend/app/(main)/admin/layouts/page.tsx
@@ -220,13 +220,13 @@ export default function LayoutManagementPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 페이지 제목 */}
         <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">레이아웃 관리</h1>
-            <p className="mt-2 text-gray-600">화면 레이아웃을 생성하고 관리합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">레이아웃 관리</h1>
+            <p className="mt-2 text-muted-foreground">화면 레이아웃을 생성하고 관리합니다</p>
           </div>
           <Button className="flex items-center gap-2 shadow-sm" onClick={() => setCreateModalOpen(true)}>
             <Plus className="h-4 w-4" />새 레이아웃
@@ -239,7 +239,7 @@ export default function LayoutManagementPage() {
           <div className="flex items-center gap-4">
             <div className="flex-1">
               <div className="relative">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
                 <Input
                   placeholder="레이아웃 이름 또는 설명으로 검색..."
                   value={searchTerm}
@@ -276,7 +276,7 @@ export default function LayoutManagementPage() {
           {loading ? (
             <div className="py-8 text-center">로딩 중...</div>
           ) : layouts.length === 0 ? (
-            <div className="py-8 text-center text-gray-500">레이아웃이 없습니다.</div>
+            <div className="py-8 text-center text-muted-foreground">레이아웃이 없습니다.</div>
           ) : (
             <>
               {/* 레이아웃 그리드 */}
@@ -288,7 +288,7 @@ export default function LayoutManagementPage() {
                       <CardHeader className="pb-3">
                         <div className="flex items-start justify-between">
                           <div className="flex items-center gap-2">
-                            <CategoryIcon className="h-5 w-5 text-gray-600" />
+                            <CategoryIcon className="h-5 w-5 text-muted-foreground" />
                             <Badge variant="secondary">
                               {CATEGORY_NAMES[layout.category as keyof typeof CATEGORY_NAMES]}
                             </Badge>
@@ -312,7 +312,7 @@ export default function LayoutManagementPage() {
                                 <Copy className="mr-2 h-4 w-4" />
                                 복제
                               </DropdownMenuItem>
-                              <DropdownMenuItem onClick={() => handleDelete(layout)} className="text-red-600">
+                              <DropdownMenuItem onClick={() => handleDelete(layout)} className="text-destructive">
                                 <Trash2 className="mr-2 h-4 w-4" />
                                 삭제
                               </DropdownMenuItem>
@@ -321,17 +321,17 @@ export default function LayoutManagementPage() {
                         </div>
                         <CardTitle className="text-lg">{layout.layoutName}</CardTitle>
                         {layout.description && (
-                          <p className="line-clamp-2 text-sm text-gray-600">{layout.description}</p>
+                          <p className="line-clamp-2 text-sm text-muted-foreground">{layout.description}</p>
                         )}
                       </CardHeader>
                       <CardContent>
                         <div className="space-y-2">
                           <div className="flex items-center justify-between text-sm">
-                            <span className="text-gray-500">타입:</span>
+                            <span className="text-muted-foreground">타입:</span>
                             <Badge variant="outline">{layout.layoutType}</Badge>
                           </div>
                           <div className="flex items-center justify-between text-sm">
-                            <span className="text-gray-500">존 개수:</span>
+                            <span className="text-muted-foreground">존 개수:</span>
                             <span>{layout.zonesConfig.length}개</span>
                           </div>
                           {layout.isPublic === "Y" && (
@@ -397,7 +397,7 @@ export default function LayoutManagementPage() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
+            <AlertDialogAction onClick={confirmDelete} className="bg-destructive hover:bg-red-700">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/monitoring/page.tsx b/frontend/app/(main)/admin/monitoring/page.tsx
index 7be9d405..48b3501c 100644
--- a/frontend/app/(main)/admin/monitoring/page.tsx
+++ b/frontend/app/(main)/admin/monitoring/page.tsx
@@ -59,25 +59,25 @@ export default function MonitoringPage() {
   const getStatusIcon = (status: string) => {
     switch (status) {
       case 'completed':
-        return <CheckCircle className="h-4 w-4 text-green-500" />;
+        return <CheckCircle className="h-4 w-4 text-emerald-500" />;
       case 'failed':
-        return <AlertCircle className="h-4 w-4 text-red-500" />;
+        return <AlertCircle className="h-4 w-4 text-destructive" />;
       case 'running':
-        return <Play className="h-4 w-4 text-blue-500" />;
+        return <Play className="h-4 w-4 text-primary" />;
       case 'pending':
-        return <Clock className="h-4 w-4 text-yellow-500" />;
+        return <Clock className="h-4 w-4 text-amber-500" />;
       default:
-        return <Clock className="h-4 w-4 text-gray-500" />;
+        return <Clock className="h-4 w-4 text-muted-foreground" />;
     }
   };
 
   const getStatusBadge = (status: string) => {
     const variants = {
-      completed: "bg-green-100 text-green-800",
+      completed: "bg-emerald-100 text-emerald-800",
       failed: "bg-destructive/20 text-red-800",
-      running: "bg-primary/20 text-blue-800",
-      pending: "bg-yellow-100 text-yellow-800",
-      cancelled: "bg-gray-100 text-gray-800",
+      running: "bg-primary/20 text-primary",
+      pending: "bg-amber-100 text-yellow-800",
+      cancelled: "bg-muted text-foreground",
     };
 
     const labels = {
@@ -120,7 +120,7 @@ export default function MonitoringPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 헤더 */}
         <div>
@@ -191,7 +191,7 @@ export default function MonitoringPage() {
                 <div className="text-2xl">✅</div>
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold text-green-600">{monitoring.successful_jobs_today}</div>
+                <div className="text-2xl font-bold text-emerald-600">{monitoring.successful_jobs_today}</div>
                 <p className="text-xs text-muted-foreground">
                   성공률: {getSuccessRate()}%
                 </p>
diff --git a/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx b/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
index 8d55ca5c..2906dbb2 100644
--- a/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
@@ -16,7 +16,7 @@ export default function BarcodeLabelDesignerPage() {
   return (
     <DndProvider backend={HTML5Backend}>
       <BarcodeDesignerProvider labelId={labelId}>
-        <div className="flex h-screen flex-col overflow-hidden bg-gray-50">
+        <div className="flex h-screen flex-col overflow-hidden bg-muted">
           <BarcodeDesignerToolbar />
           <div className="flex flex-1 overflow-hidden">
             <BarcodeDesignerLeftPanel />
diff --git a/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx b/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
index 914e111a..f69955ad 100644
--- a/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
@@ -29,12 +29,12 @@ export default function BarcodeLabelManagementPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none space-y-8 px-4 py-8">
         <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">바코드 라벨 관리</h1>
-            <p className="mt-2 text-gray-600">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">바코드 라벨 관리</h1>
+            <p className="mt-2 text-muted-foreground">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
           </div>
           <Button onClick={handleCreateNew} className="gap-2">
             <Plus className="h-4 w-4" />
@@ -43,7 +43,7 @@ export default function BarcodeLabelManagementPage() {
         </div>
 
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center gap-2">
               <Search className="h-5 w-5" />
               검색
@@ -75,7 +75,7 @@ export default function BarcodeLabelManagementPage() {
         </Card>
 
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center justify-between">
               <span className="flex items-center gap-2">
                 바코드 라벨 목록
diff --git a/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx b/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx
index 55972a18..1375eeb3 100644
--- a/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx
@@ -67,7 +67,7 @@ export default function ReportDesignerPage() {
   return (
     <DndProvider backend={HTML5Backend}>
       <ReportDesignerProvider reportId={reportId}>
-        <div className="flex h-screen flex-col overflow-hidden bg-gray-50">
+        <div className="flex h-screen flex-col overflow-hidden bg-muted">
           {/* 상단 툴바 */}
           <ReportDesignerToolbar />
 
diff --git a/frontend/app/(main)/admin/screenMng/reportList/page.tsx b/frontend/app/(main)/admin/screenMng/reportList/page.tsx
index 4b3816be..e3f1e890 100644
--- a/frontend/app/(main)/admin/screenMng/reportList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/reportList/page.tsx
@@ -30,13 +30,13 @@ export default function ReportManagementPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none space-y-8 px-4 py-8">
         {/* 페이지 제목 */}
         <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">리포트 관리</h1>
-            <p className="mt-2 text-gray-600">리포트를 생성하고 관리합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">리포트 관리</h1>
+            <p className="mt-2 text-muted-foreground">리포트를 생성하고 관리합니다</p>
           </div>
           <Button onClick={handleCreateNew} className="gap-2">
             <Plus className="h-4 w-4" />새 리포트
@@ -45,7 +45,7 @@ export default function ReportManagementPage() {
 
         {/* 검색 영역 */}
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center gap-2">
               <Search className="h-5 w-5" />
               검색
@@ -78,7 +78,7 @@ export default function ReportManagementPage() {
 
         {/* 리포트 목록 */}
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center justify-between">
               <span className="flex items-center gap-2">
                 📋 리포트 목록
diff --git a/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx b/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
index f9475759..cbe0cc97 100644
--- a/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
+++ b/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
@@ -204,7 +204,7 @@ export default function EditWebTypePage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
       {/* 헤더 */}
       <div className="mb-6 flex items-center gap-4">
@@ -244,7 +244,7 @@ export default function EditWebTypePage() {
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="type_name">
-                  웹타입명 <span className="text-red-500">*</span>
+                  웹타입명 <span className="text-destructive">*</span>
                 </Label>
                 <Input
                   id="type_name"
@@ -267,7 +267,7 @@ export default function EditWebTypePage() {
             {/* 카테고리 */}
             <div className="space-y-2">
               <Label htmlFor="category">
-                카테고리 <span className="text-red-500">*</span>
+                카테고리 <span className="text-destructive">*</span>
               </Label>
               <Select value={formData.category || ""} onValueChange={(value) => handleInputChange("category", value)}>
                 <SelectTrigger>
@@ -286,7 +286,7 @@ export default function EditWebTypePage() {
             {/* 연결된 컴포넌트 */}
             <div className="space-y-2">
               <Label htmlFor="component_name">
-                연결된 컴포넌트 <span className="text-red-500">*</span>
+                연결된 컴포넌트 <span className="text-destructive">*</span>
               </Label>
               <Select
                 value={formData.component_name || "TextWidget"}
@@ -338,15 +338,15 @@ export default function EditWebTypePage() {
                 </SelectContent>
               </Select>
               {formData.config_panel && (
-                <div className="rounded-lg border border-green-200 bg-green-50 p-3">
+                <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
                   <div className="flex items-center gap-2">
-                    <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                    <span className="text-sm font-medium text-green-700">
+                    <div className="h-2 w-2 rounded-full bg-emerald-500"></div>
+                    <span className="text-sm font-medium text-emerald-700">
                       현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
                     </span>
                   </div>
                   {getConfigPanelInfo(formData.config_panel)?.description && (
-                    <p className="mt-1 ml-4 text-xs text-green-600">
+                    <p className="mt-1 ml-4 text-xs text-emerald-600">
                       {getConfigPanelInfo(formData.config_panel)?.description}
                     </p>
                   )}
@@ -427,7 +427,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
+                {jsonErrors.default_config && <p className="text-xs text-destructive">{jsonErrors.default_config}</p>}
               </div>
 
               {/* 유효성 검사 규칙 */}
@@ -441,7 +441,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
+                {jsonErrors.validation_rules && <p className="text-xs text-destructive">{jsonErrors.validation_rules}</p>}
               </div>
 
               {/* 기본 스타일 */}
@@ -455,7 +455,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
+                {jsonErrors.default_style && <p className="text-xs text-destructive">{jsonErrors.default_style}</p>}
               </div>
 
               {/* 입력 속성 */}
@@ -469,7 +469,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
+                {jsonErrors.input_properties && <p className="text-xs text-destructive">{jsonErrors.input_properties}</p>}
               </div>
             </div>
           </CardContent>
@@ -498,8 +498,8 @@ export default function EditWebTypePage() {
 
       {/* 에러 메시지 */}
       {updateError && (
-        <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
-          <p className="text-red-600">
+        <div className="mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-4">
+          <p className="text-destructive">
             수정 중 오류가 발생했습니다: {updateError instanceof Error ? updateError.message : "알 수 없는 오류"}
           </p>
         </div>
diff --git a/frontend/app/(main)/admin/standards/[webType]/page.tsx b/frontend/app/(main)/admin/standards/[webType]/page.tsx
index 36b660cf..fd6f5a89 100644
--- a/frontend/app/(main)/admin/standards/[webType]/page.tsx
+++ b/frontend/app/(main)/admin/standards/[webType]/page.tsx
@@ -56,7 +56,7 @@ export default function WebTypeDetailPage() {
     return (
       <div className="flex h-96 items-center justify-center">
         <div className="text-center">
-          <div className="mb-2 text-lg text-red-600">웹타입 정보를 불러오는데 실패했습니다.</div>
+          <div className="mb-2 text-lg text-destructive">웹타입 정보를 불러오는데 실패했습니다.</div>
           <Link href="/admin/standards">
             <Button variant="outline">목록으로 돌아가기</Button>
           </Link>
@@ -80,7 +80,7 @@ export default function WebTypeDetailPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
       {/* 헤더 */}
       <div className="mb-6 flex items-center justify-between">
diff --git a/frontend/app/(main)/admin/standards/new/page.tsx b/frontend/app/(main)/admin/standards/new/page.tsx
index 31d02312..9ae45447 100644
--- a/frontend/app/(main)/admin/standards/new/page.tsx
+++ b/frontend/app/(main)/admin/standards/new/page.tsx
@@ -159,7 +159,7 @@ export default function NewWebTypePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
       {/* 헤더 */}
       <div className="mb-6 flex items-center gap-4">
@@ -186,7 +186,7 @@ export default function NewWebTypePage() {
             {/* 웹타입 코드 */}
             <div className="space-y-2">
               <Label htmlFor="web_type">
-                웹타입 코드 <span className="text-red-500">*</span>
+                웹타입 코드 <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="web_type"
@@ -202,7 +202,7 @@ export default function NewWebTypePage() {
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="type_name">
-                  웹타입명 <span className="text-red-500">*</span>
+                  웹타입명 <span className="text-destructive">*</span>
                 </Label>
                 <Input
                   id="type_name"
@@ -225,7 +225,7 @@ export default function NewWebTypePage() {
             {/* 카테고리 */}
             <div className="space-y-2">
               <Label htmlFor="category">
-                카테고리 <span className="text-red-500">*</span>
+                카테고리 <span className="text-destructive">*</span>
               </Label>
               <Select value={formData.category} onValueChange={(value) => handleInputChange("category", value)}>
                 <SelectTrigger>
@@ -244,7 +244,7 @@ export default function NewWebTypePage() {
             {/* 연결된 컴포넌트 */}
             <div className="space-y-2">
               <Label htmlFor="component_name">
-                연결된 컴포넌트 <span className="text-red-500">*</span>
+                연결된 컴포넌트 <span className="text-destructive">*</span>
               </Label>
               <Select
                 value={formData.component_name || "TextWidget"}
@@ -296,15 +296,15 @@ export default function NewWebTypePage() {
                 </SelectContent>
               </Select>
               {formData.config_panel && (
-                <div className="rounded-lg border border-green-200 bg-green-50 p-3">
+                <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
                   <div className="flex items-center gap-2">
-                    <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                    <span className="text-sm font-medium text-green-700">
+                    <div className="h-2 w-2 rounded-full bg-emerald-500"></div>
+                    <span className="text-sm font-medium text-emerald-700">
                       현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
                     </span>
                   </div>
                   {getConfigPanelInfo(formData.config_panel)?.description && (
-                    <p className="mt-1 ml-4 text-xs text-green-600">
+                    <p className="mt-1 ml-4 text-xs text-emerald-600">
                       {getConfigPanelInfo(formData.config_panel)?.description}
                     </p>
                   )}
@@ -385,7 +385,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
+                {jsonErrors.default_config && <p className="text-xs text-destructive">{jsonErrors.default_config}</p>}
               </div>
 
               {/* 유효성 검사 규칙 */}
@@ -399,7 +399,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
+                {jsonErrors.validation_rules && <p className="text-xs text-destructive">{jsonErrors.validation_rules}</p>}
               </div>
 
               {/* 기본 스타일 */}
@@ -413,7 +413,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
+                {jsonErrors.default_style && <p className="text-xs text-destructive">{jsonErrors.default_style}</p>}
               </div>
 
               {/* 입력 속성 */}
@@ -427,7 +427,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
+                {jsonErrors.input_properties && <p className="text-xs text-destructive">{jsonErrors.input_properties}</p>}
               </div>
             </div>
           </CardContent>
@@ -448,8 +448,8 @@ export default function NewWebTypePage() {
 
       {/* 에러 메시지 */}
       {createError && (
-        <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
-          <p className="text-red-600">
+        <div className="mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-4">
+          <p className="text-destructive">
             생성 중 오류가 발생했습니다: {createError instanceof Error ? createError.message : "알 수 없는 오류"}
           </p>
         </div>
diff --git a/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx b/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx
index 0b211a79..9d9b2905 100644
--- a/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx
@@ -142,28 +142,28 @@ export default function CollectionManagementPage() {
 
   const getStatusBadge = (isActive: string) => {
     return isActive === "Y" ? (
-      <Badge className="bg-green-100 text-green-800">활성</Badge>
+      <Badge className="bg-emerald-100 text-emerald-800">활성</Badge>
     ) : (
-      <Badge className="bg-red-100 text-red-800">비활성</Badge>
+      <Badge className="bg-destructive/10 text-red-800">비활성</Badge>
     );
   };
 
   const getTypeBadge = (type: string) => {
     const option = collectionTypeOptions.find(opt => opt.value === type);
     const colors = {
-      full: "bg-blue-100 text-blue-800",
+      full: "bg-primary/10 text-primary",
       incremental: "bg-purple-100 text-purple-800",
-      delta: "bg-orange-100 text-orange-800",
+      delta: "bg-amber-100 text-orange-800",
     };
     return (
-      <Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
+      <Badge className={colors[type as keyof typeof colors] || "bg-muted text-foreground"}>
         {option?.label || type}
       </Badge>
     );
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 헤더 */}
         <div className="flex items-center justify-between">
diff --git a/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx b/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx
index 94ea23a8..f3a8a895 100644
--- a/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx
@@ -51,8 +51,8 @@ export default function DataFlowEditPage() {
     return (
       <div className="flex h-64 items-center justify-center">
         <div className="text-center">
-          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
-          <p className="text-gray-500">관계도 정보를 불러오는 중...</p>
+          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
+          <p className="text-muted-foreground">관계도 정보를 불러오는 중...</p>
         </div>
       </div>
     );
@@ -68,16 +68,16 @@ export default function DataFlowEditPage() {
             <span>목록으로</span>
           </Button>
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">📊 관계도 편집</h1>
-            <p className="mt-1 text-gray-600">
-              <span className="font-medium text-blue-600">{diagramName}</span> 관계도를 편집하고 있습니다
+            <h1 className="text-2xl font-bold text-foreground">📊 관계도 편집</h1>
+            <p className="mt-1 text-muted-foreground">
+              <span className="font-medium text-primary">{diagramName}</span> 관계도를 편집하고 있습니다
             </p>
           </div>
         </div>
       </div>
 
       {/* 데이터플로우 디자이너 */}
-      <div className="rounded-lg border border-gray-200 bg-white">
+      <div className="rounded-lg border border-border bg-white">
         <DataFlowDesigner
           key={diagramId}
           selectedDiagram={diagramName}
diff --git a/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx b/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx
index 55435ab2..5930ecb9 100644
--- a/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx
@@ -17,8 +17,8 @@ export default function NodeEditorPage() {
   }, [router]);
 
   return (
-    <div className="flex h-screen items-center justify-center bg-gray-50">
-      <div className="text-gray-500">제어 관리 페이지로 이동중...</div>
+    <div className="flex h-screen items-center justify-center bg-muted">
+      <div className="text-muted-foreground">제어 관리 페이지로 이동중...</div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
index 79264d72..0ce088fb 100644
--- a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
@@ -528,14 +528,14 @@ export default function I18nPage() {
             ? "공통"
             : companies.find((c) => c.code === row.original.companyCode)?.name || row.original.companyCode;
 
-        return <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{companyName}</span>;
+        return <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{companyName}</span>;
       },
     },
     {
       accessorKey: "menuName",
       header: "메뉴명",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.menuName}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.menuName}</span>
       ),
     },
     {
@@ -543,8 +543,8 @@ export default function I18nPage() {
       header: "언어 키",
       cell: ({ row }: any) => (
         <div
-          className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
-            row.original.isActive === "N" ? "text-gray-400" : ""
+          className={`cursor-pointer rounded p-1 hover:bg-muted ${
+            row.original.isActive === "N" ? "text-muted-foreground/70" : ""
           }`}
           onDoubleClick={() => handleEditKey(row.original)}
         >
@@ -556,7 +556,7 @@ export default function I18nPage() {
       accessorKey: "description",
       header: "설명",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.description}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.description}</span>
       ),
     },
     {
@@ -567,8 +567,8 @@ export default function I18nPage() {
           onClick={() => handleToggleStatus(row.original.keyId)}
           className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
             row.original.isActive === "Y"
-              ? "bg-green-100 text-green-800 hover:bg-green-200"
-              : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+              ? "bg-emerald-100 text-emerald-800 hover:bg-emerald-200"
+              : "bg-muted text-foreground hover:bg-muted/80"
           }`}
         >
           {row.original.isActive === "Y" ? "활성" : "비활성"}
@@ -605,8 +605,8 @@ export default function I18nPage() {
       header: "언어 코드",
       cell: ({ row }: any) => (
         <div
-          className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
-            row.original.isActive === "N" ? "text-gray-400" : ""
+          className={`cursor-pointer rounded p-1 hover:bg-muted ${
+            row.original.isActive === "N" ? "text-muted-foreground/70" : ""
           }`}
           onDoubleClick={() => handleEditLanguage(row.original)}
         >
@@ -618,14 +618,14 @@ export default function I18nPage() {
       accessorKey: "langName",
       header: "언어명 (영문)",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langName}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.langName}</span>
       ),
     },
     {
       accessorKey: "langNative",
       header: "언어명 (원어)",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langNative}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.langNative}</span>
       ),
     },
     {
@@ -636,8 +636,8 @@ export default function I18nPage() {
           onClick={() => handleToggleLanguageStatus(row.original.langCode)}
           className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
             row.original.isActive === "Y"
-              ? "bg-green-100 text-green-800 hover:bg-green-200"
-              : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+              ? "bg-emerald-100 text-emerald-800 hover:bg-emerald-200"
+              : "bg-muted text-foreground hover:bg-muted/80"
           }`}
         >
           {row.original.isActive === "Y" ? "활성" : "비활성"}
@@ -651,7 +651,7 @@ export default function I18nPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8">
         <div className="container mx-auto p-2">
           {/* 탭 네비게이션 */}
@@ -659,7 +659,7 @@ export default function I18nPage() {
             <button
               onClick={() => setActiveTab("keys")}
               className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-                activeTab === "keys" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                activeTab === "keys" ? "bg-accent0 text-white" : "bg-muted text-foreground hover:bg-muted/80"
               }`}
             >
               다국어 키 관리
@@ -667,7 +667,7 @@ export default function I18nPage() {
             <button
               onClick={() => setActiveTab("languages")}
               className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-                activeTab === "languages" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                activeTab === "languages" ? "bg-accent0 text-white" : "bg-muted text-foreground hover:bg-muted/80"
               }`}
             >
               언어 관리
@@ -854,7 +854,7 @@ export default function I18nPage() {
                         </div>
                       </div>
                     ) : (
-                      <div className="flex h-64 items-center justify-center text-gray-500">
+                      <div className="flex h-64 items-center justify-center text-muted-foreground">
                         <div className="text-center">
                           <div className="mb-2 text-lg font-medium">언어 키를 선택하세요</div>
                           <div className="text-sm">좌측 목록에서 편집할 언어 키를 클릭하세요</div>
diff --git a/frontend/app/(main)/admin/templates/page.tsx b/frontend/app/(main)/admin/templates/page.tsx
index 151bb9b4..8c6123de 100644
--- a/frontend/app/(main)/admin/templates/page.tsx
+++ b/frontend/app/(main)/admin/templates/page.tsx
@@ -120,12 +120,12 @@ export default function TemplatesManagePage() {
 
     // 간단한 아이콘 매핑 (실제로는 더 복잡한 시스템 필요)
     const iconMap: Record<string, JSX.Element> = {
-      table: <div className="h-4 w-4 border border-gray-400" />,
-      "mouse-pointer": <div className="h-4 w-4 rounded bg-blue-500" />,
-      upload: <div className="h-4 w-4 border-2 border-dashed border-gray-400" />,
+      table: <div className="h-4 w-4 border border-input" />,
+      "mouse-pointer": <div className="h-4 w-4 rounded bg-primary" />,
+      upload: <div className="h-4 w-4 border-2 border-dashed border-input" />,
     };
 
-    return iconMap[iconName] || <div className="h-4 w-4 rounded bg-gray-300" />;
+    return iconMap[iconName] || <div className="h-4 w-4 rounded bg-muted/60" />;
   };
 
   if (error) {
@@ -133,7 +133,7 @@ export default function TemplatesManagePage() {
       <div className="w-full max-w-none px-4 py-8">
         <Card>
           <CardContent className="flex flex-col items-center justify-center py-8">
-            <p className="mb-4 text-red-600">템플릿 목록을 불러오는 중 오류가 발생했습니다.</p>
+            <p className="mb-4 text-destructive">템플릿 목록을 불러오는 중 오류가 발생했습니다.</p>
             <Button onClick={() => refetch()} variant="outline">
               <RefreshCw className="mr-2 h-4 w-4" />
               다시 시도
@@ -145,13 +145,13 @@ export default function TemplatesManagePage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 페이지 제목 */}
         <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">템플릿 관리</h1>
-            <p className="mt-2 text-gray-600">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">템플릿 관리</h1>
+            <p className="mt-2 text-muted-foreground">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
           </div>
           <div className="flex space-x-2">
             <Button asChild className="shadow-sm">
@@ -164,9 +164,9 @@ export default function TemplatesManagePage() {
 
       {/* 필터 및 검색 */}
       <Card className="shadow-sm">
-        <CardHeader className="bg-gray-50/50">
+        <CardHeader className="bg-muted/50">
           <CardTitle className="flex items-center">
-            <Filter className="mr-2 h-5 w-5 text-gray-600" />
+            <Filter className="mr-2 h-5 w-5 text-muted-foreground" />
             필터 및 검색
           </CardTitle>
         </CardHeader>
@@ -176,7 +176,7 @@ export default function TemplatesManagePage() {
             <div className="space-y-2">
               <label className="text-sm font-medium">검색</label>
               <div className="relative">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
                 <Input
                   placeholder="템플릿명, 설명 검색..."
                   value={searchTerm}
@@ -232,7 +232,7 @@ export default function TemplatesManagePage() {
 
       {/* 템플릿 목록 테이블 */}
       <Card className="shadow-sm">
-        <CardHeader className="bg-gray-50/50">
+        <CardHeader className="bg-muted/50">
           <CardTitle>템플릿 목록 ({filteredAndSortedTemplates.length}개)</CardTitle>
         </CardHeader>
         <CardContent>
@@ -293,7 +293,7 @@ export default function TemplatesManagePage() {
                   </TableRow>
                 ) : filteredAndSortedTemplates.length === 0 ? (
                   <TableRow>
-                    <TableCell colSpan={11} className="py-8 text-center text-gray-500">
+                    <TableCell colSpan={11} className="py-8 text-center text-muted-foreground">
                       검색 조건에 맞는 템플릿이 없습니다.
                     </TableCell>
                   </TableRow>
@@ -357,7 +357,7 @@ export default function TemplatesManagePage() {
                           </Button>
                           <AlertDialog>
                             <AlertDialogTrigger asChild>
-                              <Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700">
+                              <Button size="sm" variant="ghost" className="text-destructive hover:text-destructive">
                                 <Trash2 className="h-4 w-4" />
                               </Button>
                             </AlertDialogTrigger>
@@ -373,7 +373,7 @@ export default function TemplatesManagePage() {
                                 <AlertDialogCancel>취소</AlertDialogCancel>
                                 <AlertDialogAction
                                   onClick={() => handleDelete(template.template_code, template.template_name)}
-                                  className="bg-red-600 hover:bg-red-700"
+                                  className="bg-destructive hover:bg-red-700"
                                   disabled={isDeleting}
                                 >
                                   삭제
diff --git a/frontend/app/(main)/admin/test/page.tsx b/frontend/app/(main)/admin/test/page.tsx
index e1ee0e58..5d8c6df0 100644
--- a/frontend/app/(main)/admin/test/page.tsx
+++ b/frontend/app/(main)/admin/test/page.tsx
@@ -25,27 +25,27 @@ export default function TestPage() {
       <h1 className="mb-4 text-2xl font-bold">토큰 테스트 페이지</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-green-100 p-4">
+        <div className="rounded bg-emerald-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 상태</h2>
           <p>토큰 존재: {tokenInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
           <p>토큰 길이: {tokenInfo.tokenLength}</p>
           <p>토큰 시작: {tokenInfo.tokenStart}</p>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">페이지 정보</h2>
           <p>현재 URL: {tokenInfo.currentUrl}</p>
           <p>시간: {tokenInfo.timestamp}</p>
         </div>
 
-        <div className="rounded bg-yellow-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">테스트 버튼</h2>
           <button
             onClick={() => {
               const token = localStorage.getItem("authToken");
               alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
             }}
-            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+            className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
           >
             토큰 확인
           </button>
diff --git a/frontend/app/(main)/admin/token-test/page.tsx b/frontend/app/(main)/admin/token-test/page.tsx
index f931b7cc..6c2916e6 100644
--- a/frontend/app/(main)/admin/token-test/page.tsx
+++ b/frontend/app/(main)/admin/token-test/page.tsx
@@ -31,12 +31,12 @@ export default function TokenTestPage() {
       <h1 className="mb-4 text-2xl font-bold">토큰 상태 테스트</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-gray-100 p-4">
+        <div className="rounded bg-muted p-4">
           <h2 className="mb-2 font-semibold">토큰 정보</h2>
           <pre className="text-sm">{JSON.stringify(tokenInfo, null, 2)}</pre>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">테스트 버튼</h2>
           <button
             onClick={() => {
@@ -44,7 +44,7 @@ export default function TokenTestPage() {
               console.log("현재 토큰:", token);
               alert(`토큰: ${token ? "존재" : "없음"}`);
             }}
-            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+            className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
           >
             토큰 확인
           </button>
diff --git a/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx b/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx
index 30552af4..4609312c 100644
--- a/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx
+++ b/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx
@@ -259,7 +259,7 @@ export default function RoleDetailPage({ params }: { params: Promise<{ id: strin
             </div>
             <span
               className={`rounded-full px-3 py-1 text-sm font-medium ${
-                roleGroup.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                roleGroup.status === "active" ? "bg-emerald-100 text-emerald-800" : "bg-muted text-foreground"
               }`}
             >
               {roleGroup.status === "active" ? "활성" : "비활성"}
diff --git a/frontend/app/(main)/admin/userMng/rolesList/page.tsx b/frontend/app/(main)/admin/userMng/rolesList/page.tsx
index eeac1dec..48a4ff32 100644
--- a/frontend/app/(main)/admin/userMng/rolesList/page.tsx
+++ b/frontend/app/(main)/admin/userMng/rolesList/page.tsx
@@ -273,7 +273,7 @@ export default function RolesPage() {
                     </div>
                     <span
                       className={`rounded-full px-2 py-1 text-xs font-medium ${
-                        role.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                        role.status === "active" ? "bg-emerald-100 text-emerald-800" : "bg-muted text-foreground"
                       }`}
                     >
                       {role.status === "active" ? "활성" : "비활성"}
diff --git a/frontend/app/(main)/admin/validation-demo/page.tsx b/frontend/app/(main)/admin/validation-demo/page.tsx
index a4607ec0..8f8b7e18 100644
--- a/frontend/app/(main)/admin/validation-demo/page.tsx
+++ b/frontend/app/(main)/admin/validation-demo/page.tsx
@@ -388,7 +388,7 @@ export default function ValidationDemoPage() {
                 <CardDescription>실시간 검증이 적용된 폼입니다. 입력하면서 검증 결과를 확인해보세요.</CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="relative min-h-[400px] rounded-lg border border-dashed border-gray-300 p-4">
+                <div className="relative min-h-[400px] rounded-lg border border-dashed border-input p-4">
                   <EnhancedInteractiveScreenViewer
                     component={TEST_COMPONENTS[0]} // container
                     allComponents={TEST_COMPONENTS}
@@ -485,7 +485,7 @@ export default function ValidationDemoPage() {
 
               <div className="space-y-2">
                 <h4 className="font-semibold">폼 데이터</h4>
-                <pre className="max-h-60 overflow-auto rounded-md bg-gray-100 p-3 text-sm">
+                <pre className="max-h-60 overflow-auto rounded-md bg-muted p-3 text-sm">
                   {JSON.stringify(formData, null, 2)}
                 </pre>
               </div>
@@ -493,15 +493,15 @@ export default function ValidationDemoPage() {
               <div className="space-y-2">
                 <h4 className="font-semibold">검증 통계</h4>
                 <div className="grid grid-cols-2 gap-4">
-                  <div className="rounded-md bg-green-50 p-3">
-                    <div className="text-lg font-bold text-green-600">
+                  <div className="rounded-md bg-emerald-50 p-3">
+                    <div className="text-lg font-bold text-emerald-600">
                       {Object.values(validationState.fieldStates).filter((f) => f.status === "valid").length}
                     </div>
-                    <div className="text-sm text-green-700">유효한 필드</div>
+                    <div className="text-sm text-emerald-700">유효한 필드</div>
                   </div>
-                  <div className="rounded-md bg-red-50 p-3">
-                    <div className="text-lg font-bold text-red-600">{validationState.errors.length}</div>
-                    <div className="text-sm text-red-700">오류 개수</div>
+                  <div className="rounded-md bg-destructive/10 p-3">
+                    <div className="text-lg font-bold text-destructive">{validationState.errors.length}</div>
+                    <div className="text-sm text-destructive">오류 개수</div>
                   </div>
                 </div>
               </div>
diff --git a/frontend/app/(main)/approval/page.tsx b/frontend/app/(main)/approval/page.tsx
index 26af713c..4b57371b 100644
--- a/frontend/app/(main)/approval/page.tsx
+++ b/frontend/app/(main)/approval/page.tsx
@@ -29,7 +29,7 @@ const statusConfig: Record<string, { label: string; variant: "default" | "second
 const lineStatusConfig: Record<string, { label: string; icon: React.ReactNode }> = {
   waiting: { label: "대기", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
   pending: { label: "진행 중", icon: <Clock className="h-3 w-3 text-primary" /> },
-  approved: { label: "승인", icon: <CheckCircle2 className="h-3 w-3 text-green-600" /> },
+  approved: { label: "승인", icon: <CheckCircle2 className="h-3 w-3 text-emerald-600" /> },
   rejected: { label: "반려", icon: <XCircle className="h-3 w-3 text-destructive" /> },
   skipped: { label: "건너뜀", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
 };
diff --git a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx b/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
index 44ca30b2..26385e75 100644
--- a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
+++ b/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
@@ -107,18 +107,18 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
   return (
     <div className="h-screen">
       {/* 대시보드 헤더 - 보기 모드에서는 숨김 */}
-      {/* <div className="border-b border-gray-200 bg-white px-6 py-4">
+      {/* <div className="border-b border-border bg-white px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-800">{dashboard.title}</h1>
-            {dashboard.description && <p className="mt-1 text-sm text-gray-600">{dashboard.description}</p>}
+            <h1 className="text-2xl font-bold text-foreground">{dashboard.title}</h1>
+            {dashboard.description && <p className="mt-1 text-sm text-muted-foreground">{dashboard.description}</p>}
           </div>
 
           <div className="flex items-center gap-3">
             {/* 새로고침 버튼 *\/}
             <button
               onClick={loadDashboard}
-              className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+              className="rounded-lg border border-input px-3 py-2 text-muted-foreground hover:bg-muted hover:text-foreground"
               title="새로고침"
             >
               🔄
@@ -133,7 +133,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
                   document.documentElement.requestFullscreen();
                 }
               }}
-              className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+              className="rounded-lg border border-input px-3 py-2 text-muted-foreground hover:bg-muted hover:text-foreground"
               title="전체화면"
             >
               ⛶
@@ -144,7 +144,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
               onClick={() => {
                 router.push(`/admin/screenMng/dashboardList?load=${resolvedParams.dashboardId}`);
               }}
-              className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+              className="rounded-lg bg-primary px-4 py-2 text-white hover:bg-primary"
             >
               편집
             </button>
@@ -152,7 +152,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
         </div>
 
         {/* 메타 정보 *\/}
-        <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
+        <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
           <span>생성: {new Date(dashboard.createdAt).toLocaleString()}</span>
           <span>수정: {new Date(dashboard.updatedAt).toLocaleString()}</span>
           <span>요소: {dashboard.elements.length}개</span>
diff --git a/frontend/app/(main)/main/page.tsx b/frontend/app/(main)/main/page.tsx
index adad4d1b..615aaf70 100644
--- a/frontend/app/(main)/main/page.tsx
+++ b/frontend/app/(main)/main/page.tsx
@@ -5,7 +5,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar } from "lucide-react";
 
 const quickAccessItems = [
-  { label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-blue-600 bg-blue-50" },
+  { label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-primary bg-primary/10" },
   { label: "메뉴 관리", icon: Menu, href: "/admin/menu", color: "text-violet-600 bg-violet-50" },
   { label: "사용자 관리", icon: Users, href: "/admin/userMng", color: "text-emerald-600 bg-emerald-50" },
   { label: "공지사항", icon: Bell, href: "/admin/system-notices", color: "text-amber-600 bg-amber-50" },
diff --git a/frontend/app/(main)/multilang/page.tsx b/frontend/app/(main)/multilang/page.tsx
index 34a51ec0..93fbc1b0 100644
--- a/frontend/app/(main)/multilang/page.tsx
+++ b/frontend/app/(main)/multilang/page.tsx
@@ -385,13 +385,13 @@ export default function MultiLangPage() {
                   </div>
 
                   <div className="flex items-end">
-                    <div className="text-sm text-gray-600">검색 결과: {filteredLangKeys.length}건</div>
+                    <div className="text-sm text-muted-foreground">검색 결과: {filteredLangKeys.length}건</div>
                   </div>
                 </div>
               </div>
 
               <div className="mb-4 flex items-center justify-between">
-                <div className="text-sm text-gray-600">전체: {filteredLangKeys.length}건</div>
+                <div className="text-sm text-muted-foreground">전체: {filteredLangKeys.length}건</div>
               </div>
 
               <DataTable
@@ -417,7 +417,7 @@ export default function MultiLangPage() {
                 {languages.map((lang) => (
                   <div key={lang.langCode} className="rounded-lg border p-4">
                     <div className="font-semibold">{lang.langName}</div>
-                    <div className="text-sm text-gray-600">{lang.langNative}</div>
+                    <div className="text-sm text-muted-foreground">{lang.langNative}</div>
                     <Badge variant={lang.isActive === "Y" ? "default" : "secondary"} className="mt-2">
                       {lang.isActive === "Y" ? "활성" : "비활성"}
                     </Badge>
@@ -440,7 +440,7 @@ export default function MultiLangPage() {
                     <h3 className="mb-2 font-semibold">{company.name}</h3>
                     <div className="space-y-1">
                       {menus.map((menu) => (
-                        <div key={menu.code} className="text-sm text-gray-600">
+                        <div key={menu.code} className="text-sm text-muted-foreground">
                           {menu.name}
                         </div>
                       ))}
diff --git a/frontend/app/(main)/page.tsx b/frontend/app/(main)/page.tsx
index 906d74b9..292e4bbd 100644
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
@@ -5,7 +5,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar, ArrowRight } from "lucide-react";
 
 const quickAccessItems = [
-  { label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-blue-600 bg-blue-50" },
+  { label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-primary bg-primary/10" },
   { label: "메뉴 관리", icon: Menu, href: "/admin/menu", color: "text-violet-600 bg-violet-50" },
   { label: "사용자 관리", icon: Users, href: "/admin/userMng", color: "text-emerald-600 bg-emerald-50" },
   { label: "공지사항", icon: Bell, href: "/admin/system-notices", color: "text-amber-600 bg-amber-50" },
diff --git a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
index bbc2182e..ec16c27d 100644
--- a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
+++ b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
@@ -174,10 +174,10 @@ function PopScreenViewPage() {
 
   if (loading) {
     return (
-      <div className="flex h-screen w-full items-center justify-center bg-gray-100">
+      <div className="flex h-screen w-full items-center justify-center bg-muted">
         <div className="text-center">
-          <Loader2 className="mx-auto h-10 w-10 animate-spin text-blue-500" />
-          <p className="mt-4 text-gray-600">POP 화면 로딩 중...</p>
+          <Loader2 className="mx-auto h-10 w-10 animate-spin text-primary" />
+          <p className="mt-4 text-muted-foreground">POP 화면 로딩 중...</p>
         </div>
       </div>
     );
@@ -185,13 +185,13 @@ function PopScreenViewPage() {
 
   if (error || !screen) {
     return (
-      <div className="flex h-screen w-full items-center justify-center bg-gray-100">
+      <div className="flex h-screen w-full items-center justify-center bg-muted">
         <div className="text-center max-w-md p-6">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
             <span className="text-2xl">!</span>
           </div>
-          <h2 className="mb-2 text-xl font-bold text-gray-800">화면을 찾을 수 없습니다</h2>
-          <p className="mb-4 text-gray-600">{error || "요청하신 POP 화면이 존재하지 않습니다."}</p>
+          <h2 className="mb-2 text-xl font-bold text-foreground">화면을 찾을 수 없습니다</h2>
+          <p className="mb-4 text-muted-foreground">{error || "요청하신 POP 화면이 존재하지 않습니다."}</p>
           <Button onClick={() => router.back()} variant="outline">
             <ArrowLeft className="mr-2 h-4 w-4" />
             돌아가기
@@ -205,7 +205,7 @@ function PopScreenViewPage() {
     <ScreenPreviewProvider isPreviewMode={isPreviewMode}>
       <ActiveTabProvider>
         <TableOptionsProvider>
-          <div className="h-screen bg-gray-100 flex flex-col">
+          <div className="h-screen bg-muted flex flex-col">
             {/* 상단 툴바 (프리뷰 모드에서만) */}
             {isPreviewMode && (
               <div className="sticky top-0 z-50 bg-white border-b shadow-sm">
@@ -216,13 +216,13 @@ function PopScreenViewPage() {
                       닫기
                     </Button>
                     <span className="text-sm font-medium">{screen.screenName}</span>
-                    <span className="text-xs text-gray-400">
+                    <span className="text-xs text-muted-foreground/70">
                       ({currentModeKey.replace("_", " ")})
                     </span>
                   </div>
 
                   <div className="flex items-center gap-2">
-                    <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+                    <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
                       <Button
                         variant={deviceType === "mobile" ? "default" : "ghost"}
                         size="sm"
@@ -243,7 +243,7 @@ function PopScreenViewPage() {
                       </Button>
                     </div>
 
-                    <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+                    <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
                       <Button
                         variant={isLandscape ? "default" : "ghost"}
                         size="sm"
@@ -295,7 +295,7 @@ function PopScreenViewPage() {
               )}
 
               <div
-                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full min-h-full"}`}
+                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-foreground" : "w-full min-h-full"}`}
                 style={isPreviewMode ? {
                   width: currentDevice.width,
                   maxHeight: "80vh",
@@ -333,13 +333,13 @@ function PopScreenViewPage() {
                 ) : (
                   // 빈 화면
                   <div className="flex flex-col items-center justify-center min-h-[400px] p-8 text-center">
-                    <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
-                      <Smartphone className="h-8 w-8 text-gray-400" />
+                    <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+                      <Smartphone className="h-8 w-8 text-muted-foreground/70" />
                     </div>
-                    <h3 className="text-lg font-semibold text-gray-800 mb-2">
+                    <h3 className="text-lg font-semibold text-foreground mb-2">
                       화면이 비어있습니다
                     </h3>
-                    <p className="text-sm text-gray-500 max-w-xs">
+                    <p className="text-sm text-muted-foreground max-w-xs">
                       POP 화면 디자이너에서 컴포넌트를 추가하여 화면을 구성하세요.
                     </p>
                   </div>
diff --git a/frontend/app/test-type-safety/simple-test.tsx b/frontend/app/test-type-safety/simple-test.tsx
index 99f9b372..f9387d8a 100644
--- a/frontend/app/test-type-safety/simple-test.tsx
+++ b/frontend/app/test-type-safety/simple-test.tsx
@@ -227,9 +227,9 @@ export default function SimpleTypeSafetyTest() {
             </div>
 
             {passedTests === totalTests && totalTests > 0 && (
-              <div className="mt-4 rounded-lg border border-green-200 bg-green-50 p-4">
-                <div className="font-medium text-green-800">🎉 모든 타입 안전성 테스트가 통과되었습니다!</div>
-                <div className="mt-2 text-sm text-green-600">
+              <div className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-4">
+                <div className="font-medium text-emerald-800">🎉 모든 타입 안전성 테스트가 통과되었습니다!</div>
+                <div className="mt-2 text-sm text-emerald-600">
                   화면관리, 제어관리, 테이블타입관리 시스템이 안전하게 작동합니다.
                 </div>
               </div>
diff --git a/frontend/app/test-type-safety/stress-test.tsx b/frontend/app/test-type-safety/stress-test.tsx
index 5d780f29..26dd11ff 100644
--- a/frontend/app/test-type-safety/stress-test.tsx
+++ b/frontend/app/test-type-safety/stress-test.tsx
@@ -138,7 +138,7 @@ export default function StressTestPage() {
       <div className="space-y-4 text-center">
         <h1 className="text-3xl font-bold">🔥 타입 시스템 스트레스 테스트</h1>
         <p className="text-muted-foreground">극한 상황에서 타입 시스템의 견고함과 성능을 검증합니다</p>
-        <div className="rounded-lg bg-orange-50 p-3 text-sm text-orange-600">
+        <div className="rounded-lg bg-amber-50 p-3 text-sm text-amber-600">
           ⚠️ 주의: 이 테스트는 시스템에 높은 부하를 가할 수 있습니다
         </div>
 
@@ -184,19 +184,19 @@ export default function StressTestPage() {
             <CardContent className="space-y-4">
               <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-green-600">{testResults.passedTests}</div>
+                  <div className="text-2xl font-bold text-emerald-600">{testResults.passedTests}</div>
                   <div className="text-muted-foreground text-sm">통과</div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-red-600">{testResults.failedTests}</div>
+                  <div className="text-2xl font-bold text-destructive">{testResults.failedTests}</div>
                   <div className="text-muted-foreground text-sm">실패</div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-yellow-600">{testResults.warningTests}</div>
+                  <div className="text-2xl font-bold text-amber-600">{testResults.warningTests}</div>
                   <div className="text-muted-foreground text-sm">경고</div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-blue-600">{Math.round(testResults.totalDuration)}ms</div>
+                  <div className="text-2xl font-bold text-primary">{Math.round(testResults.totalDuration)}ms</div>
                   <div className="text-muted-foreground text-sm">총 소요시간</div>
                 </div>
               </div>
@@ -212,16 +212,16 @@ export default function StressTestPage() {
               </div>
 
               {testResults.success ? (
-                <div className="rounded-lg border border-green-200 bg-green-50 p-4">
-                  <div className="font-medium text-green-800">🎉 모든 스트레스 테스트 통과!</div>
-                  <div className="mt-2 text-sm text-green-600">
+                <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4">
+                  <div className="font-medium text-emerald-800">🎉 모든 스트레스 테스트 통과!</div>
+                  <div className="mt-2 text-sm text-emerald-600">
                     타입 시스템이 극한 상황에서도 안정적으로 작동합니다.
                   </div>
                 </div>
               ) : (
-                <div className="rounded-lg border border-red-200 bg-red-50 p-4">
+                <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-4">
                   <div className="font-medium text-red-800">⚠️ 일부 스트레스 테스트 실패</div>
-                  <div className="mt-2 text-sm text-red-600">
+                  <div className="mt-2 text-sm text-destructive">
                     개선이 필요한 영역이 있습니다. 아래 권장사항을 확인하세요.
                   </div>
                 </div>
@@ -253,7 +253,7 @@ export default function StressTestPage() {
 
                   {/* 메트릭스 표시 */}
                   {result.metrics && (
-                    <div className="mt-3 rounded bg-gray-50 p-3 text-xs">
+                    <div className="mt-3 rounded bg-muted p-3 text-xs">
                       <div className="mb-1 font-medium">📊 상세 메트릭스:</div>
                       <div className="grid grid-cols-2 gap-2">
                         {Object.entries(result.metrics).map(([key, value]) => (
@@ -286,7 +286,7 @@ export default function StressTestPage() {
                 <ul className="space-y-2">
                   {testResults.recommendation.map((rec, index) => (
                     <li key={index} className="flex items-start gap-2">
-                      <span className="mt-0.5 text-blue-500">•</span>
+                      <span className="mt-0.5 text-primary">•</span>
                       <span className="text-sm">{rec}</span>
                     </li>
                   ))}
@@ -304,7 +304,7 @@ export default function StressTestPage() {
             <CardTitle className="text-lg">📋 테스트 로그 (최근 10개)</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-40 overflow-y-auto rounded bg-black p-4 font-mono text-xs text-green-400">
+            <div className="h-40 overflow-y-auto rounded bg-black p-4 font-mono text-xs text-emerald-400">
               {testLogs.slice(-10).map((log, index) => (
                 <div key={index}>{log}</div>
               ))}
diff --git a/frontend/components/GlobalFileViewer.tsx b/frontend/components/GlobalFileViewer.tsx
index 34cf8e60..be0f306c 100644
--- a/frontend/components/GlobalFileViewer.tsx
+++ b/frontend/components/GlobalFileViewer.tsx
@@ -66,10 +66,10 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
       return <Video {...iconProps} className="text-purple-600" />;
     }
     if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(extension)) {
-      return <Music {...iconProps} className="text-green-600" />;
+      return <Music {...iconProps} className="text-emerald-600" />;
     }
     if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
-      return <Archive {...iconProps} className="text-yellow-600" />;
+      return <Archive {...iconProps} className="text-amber-600" />;
     }
     if (['txt', 'md', 'doc', 'docx', 'pdf', 'rtf'].includes(extension)) {
       return <FileText {...iconProps} className="text-destructive" />;
@@ -192,7 +192,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
           {showControls && (
             <div className="flex items-center gap-2">
               <div className="relative flex-1">
-                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
                 <Input
                   placeholder="파일명으로 검색..."
                   value={searchQuery}
@@ -219,7 +219,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
                 style={{ maxHeight }}
               >
                 {filteredFiles.length === 0 ? (
-                  <div className="text-center py-8 text-gray-500">
+                  <div className="text-center py-8 text-muted-foreground">
                     {searchQuery ? "검색 결과가 없습니다." : "저장된 파일이 없습니다."}
                   </div>
                 ) : (
@@ -232,7 +232,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
                             <div className="font-medium truncate">
                               {file.realFileName || file.savedFileName}
                             </div>
-                            <div className="text-sm text-gray-500 flex items-center gap-2">
+                            <div className="text-sm text-muted-foreground flex items-center gap-2">
                               <span>{formatFileSize(file.fileSize)}</span>
                               <div className="flex items-center gap-1">
                                 <Clock className="w-3 h-3" />
@@ -273,7 +273,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
                             variant="ghost"
                             size="sm"
                             onClick={() => handleRemove(file)}
-                            className="flex items-center gap-1 text-destructive hover:text-red-700"
+                            className="flex items-center gap-1 text-destructive hover:text-destructive"
                           >
                             <Trash2 className="w-3 h-3" />
                           </Button>
diff --git a/frontend/components/admin/AddColumnModal.tsx b/frontend/components/admin/AddColumnModal.tsx
index 550c46fc..92ab76ea 100644
--- a/frontend/components/admin/AddColumnModal.tsx
+++ b/frontend/components/admin/AddColumnModal.tsx
@@ -225,7 +225,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="columnName">
-                컬럼명 <span className="text-red-500">*</span>
+                컬럼명 <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="columnName"
@@ -233,7 +233,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
                 onChange={(e) => updateColumn({ name: e.target.value })}
                 placeholder="column_name"
                 disabled={loading}
-                className={validationErrors.some((e) => e.includes("컬럼명")) ? "border-red-300" : ""}
+                className={validationErrors.some((e) => e.includes("컬럼명")) ? "border-destructive/30" : ""}
               />
               <p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
             </div>
@@ -255,7 +255,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label>
-                입력타입 <span className="text-red-500">*</span>
+                입력타입 <span className="text-destructive">*</span>
               </Label>
               <Select value={column.inputType} onValueChange={handleInputTypeChange} disabled={loading}>
                 <SelectTrigger>
@@ -354,7 +354,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
           <Button
             onClick={handleAddColumn}
             disabled={!isFormValid || loading}
-            className="bg-blue-600 hover:bg-blue-700"
+            className="bg-primary hover:bg-primary/90"
           >
             {loading ? (
               <>
diff --git a/frontend/components/admin/AuthenticationConfig.tsx b/frontend/components/admin/AuthenticationConfig.tsx
index da403add..cbfb8471 100644
--- a/frontend/components/admin/AuthenticationConfig.tsx
+++ b/frontend/components/admin/AuthenticationConfig.tsx
@@ -49,7 +49,7 @@ export function AuthenticationConfig({
 
       {/* 인증 타입별 설정 필드 */}
       {authType === "api-key" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">API Key 설정</h4>
 
           {/* 키 위치 */}
@@ -96,7 +96,7 @@ export function AuthenticationConfig({
       )}
 
       {authType === "bearer" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">Bearer Token 설정</h4>
 
           {/* 토큰 */}
@@ -111,14 +111,14 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">
+          <p className="text-xs text-muted-foreground">
             * Authorization 헤더에 &quot;Bearer &#123;token&#125;&quot; 형식으로 전송됩니다.
           </p>
         </div>
       )}
 
       {authType === "basic" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">Basic Auth 설정</h4>
 
           {/* 사용자명 */}
@@ -145,12 +145,12 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
+          <p className="text-xs text-muted-foreground">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
         </div>
       )}
 
       {authType === "oauth2" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">OAuth 2.0 설정</h4>
 
           {/* Client ID */}
@@ -189,12 +189,12 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
+          <p className="text-xs text-muted-foreground">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
         </div>
       )}
 
       {authType === "db-token" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">DB 기반 토큰 설정</h4>
 
           <div className="space-y-2">
@@ -275,14 +275,14 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">
+          <p className="text-xs text-muted-foreground">
             company_code는 현재 로그인한 사용자의 회사 코드로 자동 필터링됩니다.
           </p>
         </div>
       )}
 
       {authType === "none" && (
-        <div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
+        <div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
           인증이 필요하지 않은 공개 API입니다.
         </div>
       )}
diff --git a/frontend/components/admin/CreateTableModal.tsx b/frontend/components/admin/CreateTableModal.tsx
index 63d42c88..a237f47a 100644
--- a/frontend/components/admin/CreateTableModal.tsx
+++ b/frontend/components/admin/CreateTableModal.tsx
@@ -341,14 +341,14 @@ export function CreateTableModal({
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="tableName">
-                테이블명 <span className="text-red-500">*</span>
+                테이블명 <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="tableName"
                 value={tableName}
                 onChange={(e) => handleTableNameChange(e.target.value)}
                 placeholder="예: customer_info"
-                className={tableNameError ? "border-red-300" : ""}
+                className={tableNameError ? "border-destructive/30" : ""}
               />
               {tableNameError && <p className="text-destructive text-sm">{tableNameError}</p>}
               <p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
@@ -369,7 +369,7 @@ export function CreateTableModal({
           <div className="space-y-3">
             <div className="flex items-center justify-between">
               <Label>
-                컬럼 정의 <span className="text-red-500">*</span>
+                컬럼 정의 <span className="text-destructive">*</span>
               </Label>
               <Button type="button" variant="outline" size="sm" onClick={addColumn} disabled={loading}>
                 <Plus className="mr-1 h-4 w-4" />
@@ -440,7 +440,7 @@ export function CreateTableModal({
                     <div className="font-medium">경고:</div>
                     <ul className="list-inside list-disc space-y-1">
                       {validationResult.warnings.map((warning: string, index: number) => (
-                        <li key={index} className="text-sm text-orange-600">
+                        <li key={index} className="text-sm text-amber-600">
                           {warning}
                         </li>
                       ))}
@@ -471,7 +471,7 @@ export function CreateTableModal({
           <Button
             onClick={handleCreateTable}
             disabled={!isFormValid || loading || (validationResult && !validationResult.isValid)}
-            className="bg-green-600 hover:bg-green-700"
+            className="bg-emerald-600 hover:bg-green-700"
           >
             {loading ? (
               <>
diff --git a/frontend/components/admin/DDLLogViewer.tsx b/frontend/components/admin/DDLLogViewer.tsx
index 0889f1bc..e8949be4 100644
--- a/frontend/components/admin/DDLLogViewer.tsx
+++ b/frontend/components/admin/DDLLogViewer.tsx
@@ -276,11 +276,11 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                           <TableCell>
                             <div className="flex items-center gap-2">
                               {log.success ? (
-                                <CheckCircle2 className="h-4 w-4 text-green-600" />
+                                <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                               ) : (
                                 <XCircle className="h-4 w-4 text-destructive" />
                               )}
-                              <span className={log.success ? "text-green-600" : "text-destructive"}>
+                              <span className={log.success ? "text-emerald-600" : "text-destructive"}>
                                 {log.success ? "성공" : "실패"}
                               </span>
                             </div>
@@ -323,7 +323,7 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                       <CardTitle className="text-sm font-medium">성공</CardTitle>
                     </CardHeader>
                     <CardContent>
-                      <div className="text-2xl font-bold text-green-600">{statistics.successfulExecutions}</div>
+                      <div className="text-2xl font-bold text-emerald-600">{statistics.successfulExecutions}</div>
                     </CardContent>
                   </Card>
 
diff --git a/frontend/components/admin/ExternalDbConnectionModal.tsx b/frontend/components/admin/ExternalDbConnectionModal.tsx
index f5631297..28b2ad46 100644
--- a/frontend/components/admin/ExternalDbConnectionModal.tsx
+++ b/frontend/components/admin/ExternalDbConnectionModal.tsx
@@ -484,7 +484,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
                 <div
                   className={`rounded-md border p-3 text-sm ${
                     testResult.success
-                      ? "border-green-200 bg-green-50 text-green-800"
+                      ? "border-emerald-200 bg-emerald-50 text-emerald-800"
                       : "border-destructive/20 bg-destructive/10 text-red-800"
                   }`}
                 >
@@ -527,7 +527,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
             </Button>
 
             {showAdvanced && (
-              <div className="space-y-4 border-l-2 border-gray-200 pl-6">
+              <div className="space-y-4 border-l-2 border-border pl-6">
                 <div className="grid grid-cols-3 gap-4">
                   <div>
                     <Label htmlFor="connection_timeout">연결 타임아웃 (초)</Label>
diff --git a/frontend/components/admin/HeadersManager.tsx b/frontend/components/admin/HeadersManager.tsx
index 2a7e1f16..d9d04391 100644
--- a/frontend/components/admin/HeadersManager.tsx
+++ b/frontend/components/admin/HeadersManager.tsx
@@ -116,7 +116,7 @@ export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
                       variant="ghost"
                       size="sm"
                       onClick={() => removeHeader(index)}
-                      className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+                      className="h-8 w-8 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -127,12 +127,12 @@ export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
           </Table>
         </div>
       ) : (
-        <div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
+        <div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
           헤더가 없습니다. 헤더 추가 버튼을 클릭하여 추가하세요.
         </div>
       )}
 
-      <p className="text-xs text-gray-500">
+      <p className="text-xs text-muted-foreground">
         * 공통으로 사용할 HTTP 헤더를 설정합니다. 인증 헤더는 별도의 인증 설정에서 관리됩니다.
       </p>
     </div>
diff --git a/frontend/components/admin/LayoutFormModal.tsx b/frontend/components/admin/LayoutFormModal.tsx
index ad17198d..3a5b3b19 100644
--- a/frontend/components/admin/LayoutFormModal.tsx
+++ b/frontend/components/admin/LayoutFormModal.tsx
@@ -239,30 +239,30 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
         <div className="mb-6 flex items-center justify-center">
           <div className="flex items-center gap-4">
             <div
-              className={`flex items-center gap-2 ${step === "basic" ? "text-primary" : step === "template" || step === "advanced" ? "text-green-600" : "text-gray-400"}`}
+              className={`flex items-center gap-2 ${step === "basic" ? "text-primary" : step === "template" || step === "advanced" ? "text-emerald-600" : "text-muted-foreground/70"}`}
             >
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-primary/20 text-primary" : step === "template" || step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-primary/20 text-primary" : step === "template" || step === "advanced" ? "bg-emerald-100 text-emerald-600" : "bg-muted"}`}
               >
                 1
               </div>
               <span className="text-sm font-medium">기본 정보</span>
             </div>
-            <div className="h-px w-8 bg-gray-300" />
+            <div className="h-px w-8 bg-muted/60" />
             <div
-              className={`flex items-center gap-2 ${step === "template" ? "text-primary" : step === "advanced" ? "text-green-600" : "text-gray-400"}`}
+              className={`flex items-center gap-2 ${step === "template" ? "text-primary" : step === "advanced" ? "text-emerald-600" : "text-muted-foreground/70"}`}
             >
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-primary/20 text-primary" : step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-primary/20 text-primary" : step === "advanced" ? "bg-emerald-100 text-emerald-600" : "bg-muted"}`}
               >
                 2
               </div>
               <span className="text-sm font-medium">템플릿 선택</span>
             </div>
-            <div className="h-px w-8 bg-gray-300" />
-            <div className={`flex items-center gap-2 ${step === "advanced" ? "text-primary" : "text-gray-400"}`}>
+            <div className="h-px w-8 bg-muted/60" />
+            <div className={`flex items-center gap-2 ${step === "advanced" ? "text-primary" : "text-muted-foreground/70"}`}>
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-primary/20 text-primary" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-primary/20 text-primary" : "bg-muted"}`}
               >
                 3
               </div>
@@ -305,7 +305,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                       <Card
                         key={category.id}
                         className={`cursor-pointer transition-all ${
-                          formData.category === category.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
+                          formData.category === category.id ? "bg-accent ring-2 ring-ring" : "hover:bg-muted"
                         }`}
                         onClick={() => setFormData((prev) => ({ ...prev, category: category.id }))}
                       >
@@ -314,7 +314,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                             <IconComponent className="h-5 w-5 text-muted-foreground" />
                             <div>
                               <div className="font-medium">{category.name}</div>
-                              <div className="text-xs text-gray-500">{category.description}</div>
+                              <div className="text-xs text-muted-foreground">{category.description}</div>
                             </div>
                           </div>
                         </CardContent>
@@ -341,13 +341,13 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
             <div className="space-y-4">
               <div>
                 <Label>레이아웃 템플릿 *</Label>
-                <p className="mb-3 text-sm text-gray-500">원하는 레이아웃 구조를 선택하세요</p>
+                <p className="mb-3 text-sm text-muted-foreground">원하는 레이아웃 구조를 선택하세요</p>
                 <div className="grid grid-cols-2 gap-3">
                   {LAYOUT_TEMPLATES.map((template) => (
                     <Card
                       key={template.id}
                       className={`cursor-pointer transition-all ${
-                        formData.template === template.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
+                        formData.template === template.id ? "bg-accent ring-2 ring-ring" : "hover:bg-muted"
                       }`}
                       onClick={() =>
                         setFormData((prev) => ({
@@ -364,8 +364,8 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                             <Badge variant="secondary">{template.zones}개 영역</Badge>
                           </div>
                           <div className="text-sm text-muted-foreground">{template.description}</div>
-                          <div className="text-xs text-gray-500">예: {template.example}</div>
-                          <div className="rounded bg-gray-100 p-2 text-center font-mono text-xs">{template.icon}</div>
+                          <div className="text-xs text-muted-foreground">예: {template.example}</div>
+                          <div className="rounded bg-muted p-2 text-center font-mono text-xs">{template.icon}</div>
                         </div>
                       </CardContent>
                     </Card>
@@ -418,7 +418,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                   >
                     <Plus className="h-4 w-4" />
                   </Button>
-                  <span className="text-sm text-gray-500">개 영역</span>
+                  <span className="text-sm text-muted-foreground">개 영역</span>
                 </div>
               </div>
             </div>
@@ -428,17 +428,17 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
             <div className="space-y-4">
               {generationResult ? (
                 <Alert
-                  className={generationResult.success ? "border-green-200 bg-green-50" : "border-destructive/20 bg-destructive/10"}
+                  className={generationResult.success ? "border-emerald-200 bg-emerald-50" : "border-destructive/20 bg-destructive/10"}
                 >
                   <Info className="h-4 w-4" />
-                  <AlertDescription className={generationResult.success ? "text-green-800" : "text-red-800"}>
+                  <AlertDescription className={generationResult.success ? "text-emerald-800" : "text-red-800"}>
                     {generationResult.message}
                     {generationResult.success && generationResult.files && (
                       <div className="mt-2">
                         <div className="text-sm font-medium">생성된 파일들:</div>
                         <ul className="mt-1 space-y-1 text-xs">
                           {generationResult.files.map((file, index) => (
-                            <li key={index} className="text-green-700">
+                            <li key={index} className="text-emerald-700">
                               • {file}
                             </li>
                           ))}
diff --git a/frontend/components/admin/MenuFormModal.tsx b/frontend/components/admin/MenuFormModal.tsx
index c9940d78..7771ed76 100644
--- a/frontend/components/admin/MenuFormModal.tsx
+++ b/frontend/components/admin/MenuFormModal.tsx
@@ -748,7 +748,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               </SelectContent>
             </Select>
             {!isEdit && level !== 1 && (
-              <p className="text-xs text-gray-500">{getText(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
+              <p className="text-xs text-muted-foreground">{getText(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
             )}
           </div>
 
@@ -817,7 +817,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                           }}
                         >
                           <div className="font-medium">{key.langKey}</div>
-                          {key.description && <div className="text-xs text-gray-500">{key.description}</div>}
+                          {key.description && <div className="text-xs text-muted-foreground">{key.description}</div>}
                         </div>
                       ))}
                   </div>
@@ -825,7 +825,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               )}
             </div>
             {selectedLangKeyInfo && (
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 {getText(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECTED)
                   .replace("{key}", selectedLangKeyInfo.langKey)
                   .replace("{description}", selectedLangKeyInfo.description)}
@@ -896,7 +896,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                       {/* 검색 입력 */}
                       <div className="sticky top-0 border-b bg-white p-2">
                         <div className="relative">
-                          <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                          <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
                           <Input
                             placeholder="화면 검색..."
                             value={screenSearchText}
@@ -918,14 +918,14 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                             <div
                               key={`screen-${screen.screenId || screen.id || index}-${screen.screenCode || index}`}
                               onClick={() => handleScreenSelect(screen)}
-                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
+                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-muted"
                             >
                               <div className="flex items-center justify-between">
                                 <div>
                                   <div className="text-sm font-medium">{screen.screenName}</div>
-                                  <div className="text-xs text-gray-500">{screen.screenCode}</div>
+                                  <div className="text-xs text-muted-foreground">{screen.screenCode}</div>
                                 </div>
-                                <div className="text-xs text-gray-400">ID: {screen.screenId || screen.id || "N/A"}</div>
+                                <div className="text-xs text-muted-foreground/70">ID: {screen.screenId || screen.id || "N/A"}</div>
                               </div>
                             </div>
                           ))}
@@ -933,7 +933,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                           (screen) =>
                             screen.screenName.toLowerCase().includes(screenSearchText.toLowerCase()) ||
                             screen.screenCode.toLowerCase().includes(screenSearchText.toLowerCase()),
-                        ).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
+                        ).length === 0 && <div className="px-3 py-2 text-sm text-muted-foreground">검색 결과가 없습니다.</div>}
                       </div>
                     </div>
                   )}
@@ -942,7 +942,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                 {/* 선택된 화면 정보 표시 */}
                 {selectedScreen && (
                   <div className="bg-accent rounded-md border p-3">
-                    <div className="text-sm font-medium text-blue-900">{selectedScreen.screenName}</div>
+                    <div className="text-sm font-medium text-primary">{selectedScreen.screenName}</div>
                     <div className="text-primary text-xs">코드: {selectedScreen.screenCode}</div>
                     <div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
                   </div>
@@ -971,7 +971,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                       {/* 검색창 */}
                       <div className="border-b p-2">
                         <div className="relative">
-                          <Search className="absolute top-2.5 left-2 h-4 w-4 text-gray-400" />
+                          <Search className="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground/70" />
                           <Input
                             type="text"
                             placeholder="대시보드 검색..."
@@ -995,13 +995,13 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                             <div
                               key={dashboard.id}
                               onClick={() => handleDashboardSelect(dashboard)}
-                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
+                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-muted"
                             >
                               <div className="flex items-center justify-between">
                                 <div>
                                   <div className="text-sm font-medium">{dashboard.title}</div>
                                   {dashboard.description && (
-                                    <div className="text-xs text-gray-500">{dashboard.description}</div>
+                                    <div className="text-xs text-muted-foreground">{dashboard.description}</div>
                                   )}
                                 </div>
                               </div>
@@ -1012,7 +1012,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                             dashboard.title.toLowerCase().includes(dashboardSearchText.toLowerCase()) ||
                             (dashboard.description &&
                               dashboard.description.toLowerCase().includes(dashboardSearchText.toLowerCase())),
-                        ).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
+                        ).length === 0 && <div className="px-3 py-2 text-sm text-muted-foreground">검색 결과가 없습니다.</div>}
                       </div>
                     </div>
                   )}
@@ -1021,7 +1021,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                 {/* 선택된 대시보드 정보 표시 */}
                 {selectedDashboard && (
                   <div className="bg-accent rounded-md border p-3">
-                    <div className="text-sm font-medium text-blue-900">{selectedDashboard.title}</div>
+                    <div className="text-sm font-medium text-primary">{selectedDashboard.title}</div>
                     {selectedDashboard.description && (
                       <div className="text-primary text-xs">설명: {selectedDashboard.description}</div>
                     )}
diff --git a/frontend/components/admin/MenuPermissionsTable.tsx b/frontend/components/admin/MenuPermissionsTable.tsx
index 6cc887d2..61a7d577 100644
--- a/frontend/components/admin/MenuPermissionsTable.tsx
+++ b/frontend/components/admin/MenuPermissionsTable.tsx
@@ -745,7 +745,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <span>생성 (C)</span>
                     <Checkbox
                       onCheckedChange={(checked) => handleSelectAll("createYn", checked as boolean)}
-                      className="data-[state=checked]:bg-green-600"
+                      className="data-[state=checked]:bg-emerald-600"
                     />
                   </div>
                 </TableHead>
@@ -754,7 +754,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <span>조회 (R)</span>
                     <Checkbox
                       onCheckedChange={(checked) => handleSelectAll("readYn", checked as boolean)}
-                      className="data-[state=checked]:bg-blue-600"
+                      className="data-[state=checked]:bg-primary"
                     />
                   </div>
                 </TableHead>
@@ -772,7 +772,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <span>삭제 (D)</span>
                     <Checkbox
                       onCheckedChange={(checked) => handleSelectAll("deleteYn", checked as boolean)}
-                      className="data-[state=checked]:bg-red-600"
+                      className="data-[state=checked]:bg-destructive"
                     />
                   </div>
                 </TableHead>
@@ -834,7 +834,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <Checkbox
                       checked={menu.createYn === "Y"}
                       onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "createYn", checked as boolean)}
-                      className="data-[state=checked]:bg-green-600"
+                      className="data-[state=checked]:bg-emerald-600"
                     />
                   </div>
                   <div className="flex items-center justify-between text-sm">
@@ -842,7 +842,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <Checkbox
                       checked={menu.readYn === "Y"}
                       onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "readYn", checked as boolean)}
-                      className="data-[state=checked]:bg-blue-600"
+                      className="data-[state=checked]:bg-primary"
                     />
                   </div>
                   <div className="flex items-center justify-between text-sm">
@@ -858,7 +858,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <Checkbox
                       checked={menu.deleteYn === "Y"}
                       onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "deleteYn", checked as boolean)}
-                      className="data-[state=checked]:bg-red-600"
+                      className="data-[state=checked]:bg-destructive"
                     />
                   </div>
                 </div>
diff --git a/frontend/components/admin/RestApiConnectionModal.tsx b/frontend/components/admin/RestApiConnectionModal.tsx
index 4c60c5af..eae5677d 100644
--- a/frontend/components/admin/RestApiConnectionModal.tsx
+++ b/frontend/components/admin/RestApiConnectionModal.tsx
@@ -564,7 +564,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
             {testResult && (
               <div
                 className={`rounded-md border p-4 ${
-                  testResult.success ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"
+                  testResult.success ? "border-emerald-200 bg-emerald-50" : "border-destructive/20 bg-destructive/10"
                 }`}
               >
                 <div className="mb-2 flex items-center justify-between">
@@ -572,17 +572,17 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
                     {testResult.success ? "성공" : "실패"}
                   </Badge>
                   {testResult.response_time && (
-                    <span className="text-sm text-gray-600">응답 시간: {testResult.response_time}ms</span>
+                    <span className="text-sm text-muted-foreground">응답 시간: {testResult.response_time}ms</span>
                   )}
                 </div>
 
                 <p className="text-sm">{testResult.message}</p>
 
                 {testResult.status_code && (
-                  <p className="mt-1 text-xs text-gray-500">상태 코드: {testResult.status_code}</p>
+                  <p className="mt-1 text-xs text-muted-foreground">상태 코드: {testResult.status_code}</p>
                 )}
 
-                {testResult.error_details && <p className="mt-2 text-xs text-red-600">{testResult.error_details}</p>}
+                {testResult.error_details && <p className="mt-2 text-xs text-destructive">{testResult.error_details}</p>}
               </div>
             )}
           </div>
diff --git a/frontend/components/admin/RoleDeleteModal.tsx b/frontend/components/admin/RoleDeleteModal.tsx
index 9f3cf75a..8f7c6d3b 100644
--- a/frontend/components/admin/RoleDeleteModal.tsx
+++ b/frontend/components/admin/RoleDeleteModal.tsx
@@ -79,9 +79,9 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
 
         <div className="space-y-4">
           {/* 경고 메시지 */}
-          <div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
+          <div className="rounded-lg border border-orange-300 bg-amber-50 p-4">
             <div className="flex items-start gap-3">
-              <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
+              <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
               <div className="space-y-2">
                 <p className="text-sm font-semibold text-orange-900">정말로 삭제하시겠습니까?</p>
                 <p className="text-xs text-orange-800">
@@ -124,7 +124,7 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
             <div
               className={`rounded-lg border p-3 text-sm ${
                 alertType === "success"
-                  ? "border-green-300 bg-green-50 text-green-800"
+                  ? "border-green-300 bg-emerald-50 text-emerald-800"
                   : "border-destructive/50 bg-destructive/10 text-destructive"
               }`}
             >
diff --git a/frontend/components/admin/RoleFormModal.tsx b/frontend/components/admin/RoleFormModal.tsx
index cdeeccc5..b6e0fd0b 100644
--- a/frontend/components/admin/RoleFormModal.tsx
+++ b/frontend/components/admin/RoleFormModal.tsx
@@ -194,7 +194,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           {/* 권한 그룹명 */}
           <div>
             <Label htmlFor="authName" className="text-xs sm:text-sm">
-              권한 그룹명 <span className="text-red-500">*</span>
+              권한 그룹명 <span className="text-destructive">*</span>
             </Label>
             <Input
               id="authName"
@@ -210,7 +210,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           {/* 권한 코드 */}
           <div>
             <Label htmlFor="authCode" className="text-xs sm:text-sm">
-              권한 코드 <span className="text-red-500">*</span>
+              권한 코드 <span className="text-destructive">*</span>
             </Label>
             <Input
               id="authCode"
@@ -243,7 +243,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           ) : (
             <div>
               <Label htmlFor="companyCode" className="text-xs sm:text-sm">
-                회사 <span className="text-red-500">*</span>
+                회사 <span className="text-destructive">*</span>
               </Label>
               {isSuperAdmin ? (
                 <>
@@ -345,10 +345,10 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
             <div
               className={`rounded-lg border p-3 text-sm ${
                 alertType === "success"
-                  ? "border-green-300 bg-green-50 text-green-800"
+                  ? "border-green-300 bg-emerald-50 text-emerald-800"
                   : alertType === "error"
                     ? "border-destructive/50 bg-destructive/10 text-destructive"
-                    : "border-blue-300 bg-blue-50 text-blue-800"
+                    : "border-primary/40 bg-primary/10 text-primary"
               }`}
             >
               <div className="flex items-start gap-2">
diff --git a/frontend/components/admin/ScreenAssignmentTab.tsx b/frontend/components/admin/ScreenAssignmentTab.tsx
index 8513e410..f97bcaf5 100644
--- a/frontend/components/admin/ScreenAssignmentTab.tsx
+++ b/frontend/components/admin/ScreenAssignmentTab.tsx
@@ -223,7 +223,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
             </div>
 
             {selectedMenu && (
-              <div className="rounded-lg border bg-gray-50 p-4">
+              <div className="rounded-lg border bg-muted p-4">
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="font-medium">
@@ -267,7 +267,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                 <Monitor className="h-5 w-5" />
                 할당된 화면 ({assignedScreens.length}개)
               </CardTitle>
-              <Button onClick={openAssignDialog} className="bg-blue-600 hover:bg-blue-700">
+              <Button onClick={openAssignDialog} className="bg-primary hover:bg-primary/90">
                 <Plus className="mr-2 h-4 w-4" />
                 화면 할당
               </Button>
@@ -275,15 +275,15 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           </CardHeader>
           <CardContent>
             {loading ? (
-              <div className="py-8 text-center text-gray-500">로딩 중...</div>
+              <div className="py-8 text-center text-muted-foreground">로딩 중...</div>
             ) : assignedScreens.length === 0 ? (
-              <div className="py-8 text-center text-gray-500">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
+              <div className="py-8 text-center text-muted-foreground">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
             ) : (
               <div className="space-y-3">
                 {assignedScreens.map((screen) => (
                   <div
                     key={screen.screenId}
-                    className="flex items-center justify-between rounded-lg border p-4 hover:bg-gray-50"
+                    className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted"
                   >
                     <div className="flex-1">
                       <div className="flex items-center gap-3">
@@ -298,7 +298,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                       <p className="mt-1 text-sm text-muted-foreground">
                         테이블: {screen.tableName} | 생성일: {screen.createdDate.toLocaleDateString()}
                       </p>
-                      {screen.description && <p className="mt-1 text-sm text-gray-500">{screen.description}</p>}
+                      {screen.description && <p className="mt-1 text-sm text-muted-foreground">{screen.description}</p>}
                     </div>
                     <Button
                       variant="outline"
@@ -307,7 +307,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                         setSelectedScreen(screen);
                         setShowUnassignDialog(true);
                       }}
-                      className="text-destructive hover:text-red-700"
+                      className="text-destructive hover:text-destructive"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -330,7 +330,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           <div className="space-y-4">
             {/* 검색 */}
             <div className="relative">
-              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
               <Input
                 placeholder="화면명 또는 코드로 검색..."
                 value={searchTerm}
@@ -342,13 +342,13 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
             {/* 화면 목록 */}
             <div className="max-h-64 space-y-2 overflow-y-auto">
               {filteredAvailableScreens.length === 0 ? (
-                <div className="py-4 text-center text-gray-500">할당 가능한 화면이 없습니다.</div>
+                <div className="py-4 text-center text-muted-foreground">할당 가능한 화면이 없습니다.</div>
               ) : (
                 filteredAvailableScreens.map((screen) => (
                   <div
                     key={screen.screenId}
                     className={`cursor-pointer rounded-lg border p-3 transition-colors ${
-                      selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-gray-50"
+                      selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-muted"
                     }`}
                     onClick={() => setSelectedScreen(screen)}
                   >
@@ -385,7 +385,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel onClick={() => setSelectedScreen(null)}>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleUnassignScreen} className="bg-red-600 hover:bg-red-700">
+            <AlertDialogAction onClick={handleUnassignScreen} className="bg-destructive hover:bg-red-700">
               할당 해제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/components/admin/SortableCodeItem.tsx b/frontend/components/admin/SortableCodeItem.tsx
index 6d6da7d8..ade1a49e 100644
--- a/frontend/components/admin/SortableCodeItem.tsx
+++ b/frontend/components/admin/SortableCodeItem.tsx
@@ -116,7 +116,7 @@ export function SortableCodeItem({
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
                   onMouseDown={(e) => e.stopPropagation()}
-                  className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-gray-100"
+                  className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-muted"
                   title={isExpanded ? "접기" : "펼치기"}
                 >
                   {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
@@ -135,12 +135,12 @@ export function SortableCodeItem({
                 </Badge>
               )}
               {depth === 2 && (
-                <Badge variant="outline" className="bg-blue-50 px-1.5 py-0 text-[10px] text-blue-600">
+                <Badge variant="outline" className="bg-primary/10 px-1.5 py-0 text-[10px] text-primary">
                   중분류
                 </Badge>
               )}
               {depth === 3 && (
-                <Badge variant="outline" className="bg-green-50 px-1.5 py-0 text-[10px] text-green-600">
+                <Badge variant="outline" className="bg-emerald-50 px-1.5 py-0 text-[10px] text-emerald-600">
                   소분류
                 </Badge>
               )}
@@ -196,7 +196,7 @@ export function SortableCodeItem({
                   onAddChild();
                 }}
                 title="하위 코드 추가"
-                className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                className="text-primary hover:bg-primary/10 hover:text-primary"
               >
                 <Plus className="h-3 w-3" />
               </Button>
diff --git a/frontend/components/admin/TableLogViewer.tsx b/frontend/components/admin/TableLogViewer.tsx
index 9f0541b6..f5c7cf32 100644
--- a/frontend/components/admin/TableLogViewer.tsx
+++ b/frontend/components/admin/TableLogViewer.tsx
@@ -102,11 +102,11 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
   const getOperationBadge = (type: string) => {
     switch (type) {
       case "INSERT":
-        return <Badge className="bg-green-500">추가</Badge>;
+        return <Badge className="bg-emerald-500">추가</Badge>;
       case "UPDATE":
-        return <Badge className="bg-blue-500">수정</Badge>;
+        return <Badge className="bg-primary">수정</Badge>;
       case "DELETE":
-        return <Badge className="bg-red-500">삭제</Badge>;
+        return <Badge className="bg-destructive">삭제</Badge>;
       default:
         return <Badge>{type}</Badge>;
     }
@@ -150,7 +150,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
 
           <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
             <div>
-              <label className="mb-1 block text-sm text-gray-600">작업 유형</label>
+              <label className="mb-1 block text-sm text-muted-foreground">작업 유형</label>
               {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
               <Select 
                 value={operationType || "__all__"} 
@@ -169,22 +169,22 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">시작 날짜</label>
+              <label className="mb-1 block text-sm text-muted-foreground">시작 날짜</label>
               <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">종료 날짜</label>
+              <label className="mb-1 block text-sm text-muted-foreground">종료 날짜</label>
               <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">변경자</label>
+              <label className="mb-1 block text-sm text-muted-foreground">변경자</label>
               <Input placeholder="사용자 ID" value={changedBy} onChange={(e) => setChangedBy(e.target.value)} />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">원본 ID</label>
+              <label className="mb-1 block text-sm text-muted-foreground">원본 ID</label>
               <Input placeholder="레코드 ID" value={originalId} onChange={(e) => setOriginalId(e.target.value)} />
             </div>
 
@@ -204,7 +204,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
               <LoadingSpinner />
             </div>
           ) : logs.length === 0 ? (
-            <div className="flex h-64 items-center justify-center text-gray-500">변경 이력이 없습니다.</div>
+            <div className="flex h-64 items-center justify-center text-muted-foreground">변경 이력이 없습니다.</div>
           ) : (
             <Table>
               <TableHeader>
@@ -243,7 +243,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
 
         {/* 페이지네이션 */}
         <div className="flex items-center justify-between border-t pt-4">
-          <div className="text-sm text-gray-600">
+          <div className="text-sm text-muted-foreground">
             전체 {total}건 (페이지 {page} / {totalPages})
           </div>
           <div className="flex gap-2">
diff --git a/frontend/components/admin/TemplateImportExport.tsx b/frontend/components/admin/TemplateImportExport.tsx
index e11dada6..5f3ff17e 100644
--- a/frontend/components/admin/TemplateImportExport.tsx
+++ b/frontend/components/admin/TemplateImportExport.tsx
@@ -157,12 +157,12 @@ export function TemplateImportExport({ onTemplateImported }: TemplateImportExpor
               </CardHeader>
               <CardContent className="space-y-4">
                 <div
-                  className="cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-8 text-center transition-colors hover:border-gray-400"
+                  className="cursor-pointer rounded-lg border-2 border-dashed border-input p-8 text-center transition-colors hover:border-input"
                   onClick={triggerFileSelect}
                 >
-                  <Upload className="mx-auto mb-4 h-12 w-12 text-gray-400" />
-                  <p className="mb-2 text-lg font-medium text-gray-900">템플릿 JSON 파일을 선택하세요</p>
-                  <p className="text-sm text-gray-500">또는 아래에 JSON 내용을 직접 입력하세요</p>
+                  <Upload className="mx-auto mb-4 h-12 w-12 text-muted-foreground/70" />
+                  <p className="mb-2 text-lg font-medium text-foreground">템플릿 JSON 파일을 선택하세요</p>
+                  <p className="text-sm text-muted-foreground">또는 아래에 JSON 내용을 직접 입력하세요</p>
                 </div>
                 <input ref={fileInputRef} type="file" accept=".json" onChange={handleFileUpload} className="hidden" />
               </CardContent>
@@ -196,7 +196,7 @@ export function TemplateImportExport({ onTemplateImported }: TemplateImportExpor
               <Card>
                 <CardHeader>
                   <CardTitle className="flex items-center text-lg">
-                    <CheckCircle className="mr-2 h-5 w-5 text-green-600" />
+                    <CheckCircle className="mr-2 h-5 w-5 text-emerald-600" />
                     3. 템플릿 미리보기
                   </CardTitle>
                 </CardHeader>
diff --git a/frontend/components/admin/UserAuthEditModal.tsx b/frontend/components/admin/UserAuthEditModal.tsx
index 34379b64..7ce04f4c 100644
--- a/frontend/components/admin/UserAuthEditModal.tsx
+++ b/frontend/components/admin/UserAuthEditModal.tsx
@@ -54,28 +54,28 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
       label: "회사 관리자",
       description: "자기 회사 데이터 및 사용자 관리 가능",
       icon: <Building2 className="h-4 w-4" />,
-      color: "text-blue-600",
+      color: "text-primary",
     },
     {
       value: "USER",
       label: "일반 사용자",
       description: "자기 회사 데이터 조회/수정만 가능",
       icon: <User className="h-4 w-4" />,
-      color: "text-gray-600",
+      color: "text-muted-foreground",
     },
     {
       value: "GUEST",
       label: "게스트",
       description: "제한된 조회 권한",
       icon: <Users className="h-4 w-4" />,
-      color: "text-green-600",
+      color: "text-emerald-600",
     },
     {
       value: "PARTNER",
       label: "협력업체",
       description: "협력업체 전용 권한",
       icon: <Shield className="h-4 w-4" />,
-      color: "text-orange-600",
+      color: "text-amber-600",
     },
   ];
 
@@ -158,7 +158,7 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
           {/* 권한 선택 */}
           <div className="space-y-2">
             <Label htmlFor="userType" className="text-sm font-medium">
-              새로운 권한 <span className="text-red-500">*</span>
+              새로운 권한 <span className="text-destructive">*</span>
             </Label>
             <Select value={selectedUserType} onValueChange={setSelectedUserType}>
               <SelectTrigger className="h-10">
@@ -180,9 +180,9 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
 
           {/* SUPER_ADMIN 경고 */}
           {showConfirmation && selectedUserType === "SUPER_ADMIN" && (
-            <div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
+            <div className="rounded-lg border border-orange-300 bg-amber-50 p-4">
               <div className="flex items-start gap-3">
-                <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
+                <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
                 <div className="space-y-2">
                   <p className="text-sm font-semibold text-orange-900">최고 관리자 권한 부여 경고</p>
                   <p className="text-xs text-orange-800">
diff --git a/frontend/components/admin/UserFormModal.tsx b/frontend/components/admin/UserFormModal.tsx
index 39bbefbc..eef0c538 100644
--- a/frontend/components/admin/UserFormModal.tsx
+++ b/frontend/components/admin/UserFormModal.tsx
@@ -23,7 +23,7 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
   const getTypeColor = () => {
     switch (type) {
       case "success":
-        return "text-green-600";
+        return "text-emerald-600";
       case "error":
         return "text-destructive";
       default:
@@ -446,7 +446,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="userId" className="text-sm font-medium">
-                  사용자 ID <span className="text-red-500">*</span>
+                  사용자 ID <span className="text-destructive">*</span>
                 </Label>
                 {isEditMode ? (
                   <Input id="userId" value={formData.userId} disabled className="bg-muted cursor-not-allowed" />
@@ -474,7 +474,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
                     {/* 중복확인 결과 메시지 */}
                     {duplicateCheckMessage && (
                       <div
-                        className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-green-600" : "text-destructive"}`}
+                        className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-emerald-600" : "text-destructive"}`}
                       >
                         {duplicateCheckMessage}
                       </div>
@@ -485,7 +485,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
 
               <div className="space-y-2">
                 <Label htmlFor="userName" className="text-sm font-medium">
-                  사용자명 <span className="text-red-500">*</span>
+                  사용자명 <span className="text-destructive">*</span>
                 </Label>
                 <Input
                   id="userName"
@@ -501,7 +501,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
             {!isEditMode && (
               <div className="space-y-2">
                 <Label htmlFor="userPassword" className="text-sm font-medium">
-                  비밀번호 <span className="text-red-500">*</span>
+                  비밀번호 <span className="text-destructive">*</span>
                 </Label>
                 <div className="relative">
                   <Input
@@ -532,7 +532,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
             {/* 회사 선택 */}
             <div className="space-y-2">
               <Label htmlFor="companyCode" className="text-sm font-medium">
-                회사 <span className="text-red-500">*</span>
+                회사 <span className="text-destructive">*</span>
               </Label>
               {isSuperAdmin ? (
                 <>
diff --git a/frontend/components/admin/UserPasswordResetModal.tsx b/frontend/components/admin/UserPasswordResetModal.tsx
index 086b1556..e79d09ff 100644
--- a/frontend/components/admin/UserPasswordResetModal.tsx
+++ b/frontend/components/admin/UserPasswordResetModal.tsx
@@ -136,7 +136,7 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
         <div className="space-y-4" onKeyDown={handleKeyDown}>
           {/* 대상 사용자 정보 */}
           <div>
-            <Label className="text-sm font-medium text-gray-700">
+            <Label className="text-sm font-medium text-foreground">
               대상 사용자:{" "}
               <span className="font-semibold">
                 {userName} ({userId})
@@ -197,10 +197,10 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
 
             {/* 비밀번호 일치 여부 표시 */}
             {showMismatchError && <p className="text-sm text-destructive">비밀번호가 일치하지 않습니다.</p>}
-            {isPasswordMatch && <p className="text-sm text-green-600">비밀번호가 일치합니다.</p>}
+            {isPasswordMatch && <p className="text-sm text-emerald-600">비밀번호가 일치합니다.</p>}
           </div>
 
-          <div className="text-xs text-gray-500">* 비밀번호는 영문, 숫자, 특수문자만 사용할 수 있습니다.</div>
+          <div className="text-xs text-muted-foreground">* 비밀번호는 영문, 숫자, 특수문자만 사용할 수 있습니다.</div>
         </div>
 
         <div className="mt-6 flex justify-end space-x-2">
diff --git a/frontend/components/admin/dashboard/widgets/DriverListView.tsx b/frontend/components/admin/dashboard/widgets/DriverListView.tsx
index 51862926..4f70e65b 100644
--- a/frontend/components/admin/dashboard/widgets/DriverListView.tsx
+++ b/frontend/components/admin/dashboard/widgets/DriverListView.tsx
@@ -59,7 +59,7 @@ export function DriverListView({ drivers, config, isCompact = false }: DriverLis
 
   return (
     <div className="h-full w-full overflow-auto">
-      <table className="min-w-full divide-y divide-gray-200">
+      <table className="min-w-full divide-y divide-border">
         <thead className="sticky top-0 z-10 bg-muted">
           <tr>
             {visibleColumns.includes("status") && (
@@ -96,7 +96,7 @@ export function DriverListView({ drivers, config, isCompact = false }: DriverLis
             )}
           </tr>
         </thead>
-        <tbody className="divide-y divide-gray-200 bg-background">
+        <tbody className="divide-y divide-border bg-background">
           {drivers.map((driver) => {
             const statusColors = getStatusColor(driver.status);
             return (
diff --git a/frontend/components/admin/dashboard/widgets/ListWidget.tsx b/frontend/components/admin/dashboard/widgets/ListWidget.tsx
index 194f7210..0561a38d 100644
--- a/frontend/components/admin/dashboard/widgets/ListWidget.tsx
+++ b/frontend/components/admin/dashboard/widgets/ListWidget.tsx
@@ -180,16 +180,16 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
   const renderIcon = (icon?: string, color?: string) => {
     const colorClass =
       color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     switch (icon) {
       case "truck":
@@ -209,16 +209,16 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
   const renderFieldGroup = (group: FieldGroup, data: Record<string, any>) => {
     const colorClass =
       group.color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : group.color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : group.color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : group.color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : group.color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     return (
       <div key={group.id} className="rounded-lg border p-4">
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
index 6ee36ca1..e4fd9a8a 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
@@ -1592,11 +1592,11 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
       <div className="bg-muted flex items-center justify-center gap-2 border-b p-4">
         <span className="text-muted-foreground text-sm font-medium">도구:</span>
         {[
-          { type: "area" as ToolType, label: "영역", icon: Grid3x3, color: "text-blue-500" },
-          { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-blue-600" },
-          { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-gray-500" },
-          // { type: "crane-gantry" as ToolType, label: "겐트리", icon: Combine, color: "text-green-500" },
-          { type: "crane-mobile" as ToolType, label: "크레인", icon: Truck, color: "text-yellow-500" },
+          { type: "area" as ToolType, label: "영역", icon: Grid3x3, color: "text-primary" },
+          { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-primary" },
+          { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-muted-foreground" },
+          // { type: "crane-gantry" as ToolType, label: "겐트리", icon: Combine, color: "text-emerald-500" },
+          { type: "crane-mobile" as ToolType, label: "크레인", icon: Truck, color: "text-amber-500" },
           { type: "rack" as ToolType, label: "랙", icon: Box, color: "text-purple-500" },
         ].map((tool) => {
           const Icon = tool.icon;
@@ -1919,7 +1919,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
                             </div>
                           </div>
                           {isLocationPlaced ? (
-                            <Check className="h-4 w-4 text-green-500" />
+                            <Check className="h-4 w-4 text-emerald-500" />
                           ) : locationType === "location-stp" ? (
                             <ParkingCircle className="text-muted-foreground h-4 w-4" />
                           ) : (
@@ -2052,7 +2052,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
         </div>
 
         {/* 중앙: 3D 캔버스 */}
-        <div className="relative h-full flex-1 bg-gray-100">
+        <div className="relative h-full flex-1 bg-muted">
           {isLoading ? (
             <div className="flex h-full items-center justify-center">
               <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
index ae98c795..cbb2517e 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
@@ -716,7 +716,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
                                   </p>
                                 )}
                                 {obj.materialCount !== undefined && obj.materialCount > 0 && (
-                                  <p className="text-xs text-yellow-600">
+                                  <p className="text-xs text-amber-600">
                                     자재: <span className="font-semibold">{obj.materialCount}개</span>
                                   </p>
                                 )}
@@ -802,7 +802,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
                                         </p>
                                       )}
                                       {locationObj.materialCount !== undefined && locationObj.materialCount > 0 && (
-                                        <p className="mt-0.5 text-[10px] text-yellow-600">
+                                        <p className="mt-0.5 text-[10px] text-amber-600">
                                           자재: <span className="font-semibold">{locationObj.materialCount}개</span>
                                         </p>
                                       )}
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
index ad8add20..c6fde7aa 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
@@ -1239,7 +1239,7 @@ export default function Yard3DCanvas({
   };
 
   return (
-    <div className="h-full w-full bg-gray-100" onClick={handleCanvasClick}>
+    <div className="h-full w-full bg-muted" onClick={handleCanvasClick}>
       <Canvas
         camera={{
           position: [50, 30, 50],
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts b/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts
index d4959a6c..fe40ddc2 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts
@@ -15,16 +15,16 @@ export const OBJECT_COLORS: Record<string, string> = {
 
 // Tailwind 색상 클래스 매핑 (아이콘용)
 export const OBJECT_COLOR_CLASSES: Record<string, string> = {
-  area: "text-blue-500",
-  "location-bed": "text-blue-600",
-  "location-stp": "text-gray-500",
-  "location-temp": "text-orange-500",
+  area: "text-primary",
+  "location-bed": "text-primary",
+  "location-stp": "text-muted-foreground",
+  "location-temp": "text-amber-500",
   "location-dest": "text-emerald-500",
   "crane-mobile": "text-purple-500",
-  rack: "text-red-500",
+  rack: "text-destructive",
 };
 
 // 기본 색상
 export const DEFAULT_COLOR = "#3b82f6";
-export const DEFAULT_COLOR_CLASS = "text-blue-500";
+export const DEFAULT_COLOR_CLASS = "text-primary";
 
diff --git a/frontend/components/admin/multilang/CategoryTree.tsx b/frontend/components/admin/multilang/CategoryTree.tsx
index 2e1238cf..9dca27ce 100644
--- a/frontend/components/admin/multilang/CategoryTree.tsx
+++ b/frontend/components/admin/multilang/CategoryTree.tsx
@@ -71,7 +71,7 @@ function CategoryNode({
             <Folder className="h-4 w-4 shrink-0 text-amber-500" />
           )
         ) : (
-          <Tag className="h-4 w-4 shrink-0 text-blue-500" />
+          <Tag className="h-4 w-4 shrink-0 text-primary" />
         )}
 
         {/* 카테고리 이름 */}
diff --git a/frontend/components/admin/multilang/KeyGenerateModal.tsx b/frontend/components/admin/multilang/KeyGenerateModal.tsx
index c595adbc..536915ef 100644
--- a/frontend/components/admin/multilang/KeyGenerateModal.tsx
+++ b/frontend/components/admin/multilang/KeyGenerateModal.tsx
@@ -309,8 +309,8 @@ export function KeyGenerateModal({
               preview?.exists 
                 ? "border-destructive bg-destructive/10"
                 : preview?.isOverride
-                ? "border-blue-500 bg-blue-500/10"
-                : "border-green-500 bg-green-500/10"
+                ? "border-primary bg-primary/10"
+                : "border-emerald-500 bg-emerald-500/10"
             )}>
               <div className="flex items-center gap-2">
                 {previewLoading ? (
@@ -318,9 +318,9 @@ export function KeyGenerateModal({
                 ) : preview?.exists ? (
                   <AlertCircle className="h-4 w-4 text-destructive" />
                 ) : preview?.isOverride ? (
-                  <Info className="h-4 w-4 text-blue-500" />
+                  <Info className="h-4 w-4 text-primary" />
                 ) : (
-                  <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                 )}
                 <code className="text-xs font-mono sm:text-sm">
                   {generatedKeyPreview}
@@ -332,7 +332,7 @@ export function KeyGenerateModal({
                 </p>
               )}
               {preview?.isOverride && !preview?.exists && (
-                <p className="mt-1 text-xs text-blue-600">
+                <p className="mt-1 text-xs text-primary">
                   공통 키가 존재합니다. 회사별 오버라이드로 생성됩니다.
                 </p>
               )}
diff --git a/frontend/components/auth/ErrorMessage.tsx b/frontend/components/auth/ErrorMessage.tsx
index 039c2ccd..ba4846a2 100644
--- a/frontend/components/auth/ErrorMessage.tsx
+++ b/frontend/components/auth/ErrorMessage.tsx
@@ -9,6 +9,6 @@ export function ErrorMessage({ message }: ErrorMessageProps) {
   if (!message) return null;
 
   return (
-    <div className="my-4 rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-red-700">{message}</div>
+    <div className="my-4 rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">{message}</div>
   );
 }
diff --git a/frontend/components/barcode/designer/BarcodeComponentPalette.tsx b/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
index e28ff12d..c9f22bdc 100644
--- a/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
+++ b/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
@@ -61,7 +61,7 @@ function DraggableItem({
   return (
     <div
       ref={drag}
-      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm hover:border-blue-500 hover:bg-blue-50 ${
+      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm hover:border-primary hover:bg-primary/10 ${
         isDragging ? "opacity-50" : ""
       }`}
     >
diff --git a/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx b/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
index 15136668..1eadfc32 100644
--- a/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
+++ b/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
@@ -51,7 +51,7 @@ export function BarcodeDesignerCanvas() {
   }), [widthPx, heightPx, components.length, addComponent, snapValueToGrid]);
 
   return (
-    <div className="flex flex-1 items-center justify-center overflow-auto bg-gray-100 p-6">
+    <div className="flex flex-1 items-center justify-center overflow-auto bg-muted p-6">
       <div
         key={`canvas-${widthMm}-${heightMm}`}
         ref={(r) => {
diff --git a/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx b/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
index 3552f5fe..3567d916 100644
--- a/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
+++ b/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
@@ -202,7 +202,7 @@ export function BarcodeLabelCanvasComponent({ component }: Props) {
             }}
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center bg-gray-100 text-xs text-gray-400">
+          <div className="flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground/70">
             이미지
           </div>
         );
@@ -244,7 +244,7 @@ export function BarcodeLabelCanvasComponent({ component }: Props) {
       {selected && component.type !== "line" && (
         <div
           data-resize-handle
-          className="absolute bottom-0 right-0 h-2 w-2 cursor-se-resize bg-blue-500"
+          className="absolute bottom-0 right-0 h-2 w-2 cursor-se-resize bg-primary"
           onMouseDown={(e) => {
             e.stopPropagation();
             setIsResizing(true);
diff --git a/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx b/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
index 0db9b65e..e732118c 100644
--- a/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
+++ b/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
@@ -151,7 +151,7 @@ export function BarcodePrintPreviewModal({
           </p>
 
           {/* 미리보기 캔버스 (축소) */}
-          <div className="flex justify-center rounded border bg-gray-100 p-4">
+          <div className="flex justify-center rounded border bg-muted p-4">
             <div
               className="relative bg-white shadow"
               style={{
diff --git a/frontend/components/common/AlertModal.tsx b/frontend/components/common/AlertModal.tsx
index bca7c76b..f9deca57 100644
--- a/frontend/components/common/AlertModal.tsx
+++ b/frontend/components/common/AlertModal.tsx
@@ -27,26 +27,26 @@ interface AlertModalProps {
 const alertConfig = {
   success: {
     icon: CheckCircle,
-    iconColor: "text-green-500",
-    titleColor: "text-green-700",
+    iconColor: "text-emerald-500",
+    titleColor: "text-emerald-700",
     buttonVariant: "default" as const,
   },
   error: {
     icon: XCircle,
-    iconColor: "text-red-500",
-    titleColor: "text-red-700",
+    iconColor: "text-destructive",
+    titleColor: "text-destructive",
     buttonVariant: "destructive" as const,
   },
   warning: {
     icon: AlertTriangle,
-    iconColor: "text-yellow-500",
+    iconColor: "text-amber-500",
     titleColor: "text-yellow-700",
     buttonVariant: "default" as const,
   },
   info: {
     icon: Info,
-    iconColor: "text-blue-500",
-    titleColor: "text-blue-700",
+    iconColor: "text-primary",
+    titleColor: "text-primary",
     buttonVariant: "default" as const,
   },
 };
diff --git a/frontend/components/common/ExcelUploadModal.tsx b/frontend/components/common/ExcelUploadModal.tsx
index f3c2ff2d..1efcbf39 100644
--- a/frontend/components/common/ExcelUploadModal.tsx
+++ b/frontend/components/common/ExcelUploadModal.tsx
@@ -1131,7 +1131,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
             <FileSpreadsheet className="h-5 w-5" />
             엑셀 데이터 업로드
             {isMasterDetail && (
-              <span className="ml-2 rounded bg-blue-100 px-2 py-0.5 text-xs font-normal text-blue-700">
+              <span className="ml-2 rounded bg-primary/10 px-2 py-0.5 text-xs font-normal text-primary">
                 마스터-디테일
               </span>
             )}
@@ -1322,15 +1322,15 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                     isDragOver
                       ? "border-primary bg-primary/5"
                       : file
-                        ? "border-green-500 bg-green-50"
+                        ? "border-emerald-500 bg-emerald-50"
                         : "border-muted-foreground/25 hover:border-primary hover:bg-muted/50"
                   )}
                 >
                   {file ? (
                     <div className="flex items-center gap-3">
-                      <FileSpreadsheet className="h-8 w-8 text-green-600" />
+                      <FileSpreadsheet className="h-8 w-8 text-emerald-600" />
                       <div>
-                        <p className="text-sm font-medium text-green-700">{file.name}</p>
+                        <p className="text-sm font-medium text-emerald-700">{file.name}</p>
                         <p className="text-xs text-muted-foreground">
                           클릭하여 다른 파일 선택
                         </p>
@@ -1561,11 +1561,11 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
 
               {/* 중복 체크 안내 */}
               {duplicateCheckCount > 0 ? (
-                <div className="rounded-md border border-blue-200 bg-blue-50 p-3">
+                <div className="rounded-md border border-primary/20 bg-primary/10 p-3">
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex items-start gap-2">
-                      <Copy className="mt-0.5 h-4 w-4 text-blue-600" />
-                      <div className="text-[10px] text-blue-700 sm:text-xs">
+                      <Copy className="mt-0.5 h-4 w-4 text-primary" />
+                      <div className="text-[10px] text-primary sm:text-xs">
                         <p className="font-medium">
                           중복 키: {columnMappings
                             .filter((m) => m.checkDuplicate && m.systemColumn)
@@ -1581,12 +1581,12 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                       </div>
                     </div>
                     <div className="flex items-center gap-2 shrink-0">
-                      <span className="text-[10px] text-blue-700 sm:text-xs">중복 시:</span>
+                      <span className="text-[10px] text-primary sm:text-xs">중복 시:</span>
                       <Select
                         value={duplicateAction}
                         onValueChange={(value) => setDuplicateAction(value as "overwrite" | "skip")}
                       >
-                        <SelectTrigger className="h-7 w-[100px] text-[10px] sm:text-xs border-blue-300 bg-white">
+                        <SelectTrigger className="h-7 w-[100px] text-[10px] sm:text-xs border-primary/40 bg-white">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -1686,7 +1686,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                           <span className="font-medium">{mapping.excelColumn}</span> →{" "}
                           {col?.label || mapping.systemColumn}
                           {mapping.checkDuplicate && (
-                            <span className="ml-2 text-blue-600">
+                            <span className="ml-2 text-primary">
                               (중복 체크: {mapping.duplicateAction === "overwrite" ? "덮어쓰기" : "건너뛰기"})
                             </span>
                           )}
@@ -1701,9 +1701,9 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
 
               {/* 중복 체크 요약 */}
               {duplicateCheckCount > 0 && (
-                <div className="rounded-md border border-blue-200 bg-blue-50 p-4">
-                  <h3 className="text-sm font-medium text-blue-800 sm:text-base">중복 체크 설정</h3>
-                  <div className="mt-2 space-y-1 text-[10px] text-blue-700 sm:text-xs">
+                <div className="rounded-md border border-primary/20 bg-primary/10 p-4">
+                  <h3 className="text-sm font-medium text-primary sm:text-base">중복 체크 설정</h3>
+                  <div className="mt-2 space-y-1 text-[10px] text-primary sm:text-xs">
                     <p>
                       <span className="font-medium">중복 키:</span>{" "}
                       {columnMappings
diff --git a/frontend/components/common/FormValidationIndicator.tsx b/frontend/components/common/FormValidationIndicator.tsx
index a907fa28..3d445020 100644
--- a/frontend/components/common/FormValidationIndicator.tsx
+++ b/frontend/components/common/FormValidationIndicator.tsx
@@ -140,9 +140,9 @@ const CompactValidationIndicator: React.FC<{
           <span className="text-destructive">{validationState.errors.length}개 오류</span>
         )}
         {validationState.warnings.length > 0 && (
-          <span className="ml-2 text-orange-600">{validationState.warnings.length}개 경고</span>
+          <span className="ml-2 text-amber-600">{validationState.warnings.length}개 경고</span>
         )}
-        {validationState.isValid && <span className="text-green-600">검증 통과</span>}
+        {validationState.isValid && <span className="text-emerald-600">검증 통과</span>}
       </div>
 
       <Button size="sm" onClick={onSave} disabled={!canSave || saveState.status === "saving"} className="h-8">
@@ -176,7 +176,7 @@ const ValidationStatusBadge: React.FC<{ status: FormValidationState["status"] }>
           variant: "default" as const,
           icon: CheckCircle,
           text: "유효함",
-          className: "bg-green-500 hover:bg-green-600",
+          className: "bg-emerald-500 hover:bg-emerald-600",
         };
       case "invalid":
         return {
@@ -238,14 +238,14 @@ const ValidationSummary: React.FC<{ validationState: FormValidationState }> = ({
         )}
 
         {validationState.warnings.length > 0 && (
-          <div className="flex items-center gap-1 text-orange-600">
+          <div className="flex items-center gap-1 text-amber-600">
             <AlertTriangle className="h-4 w-4" />
             <span>{validationState.warnings.length}개 경고</span>
           </div>
         )}
 
         {validationState.isValid && validationState.errors.length === 0 && validationState.warnings.length === 0 && (
-          <div className="flex items-center gap-1 text-green-600">
+          <div className="flex items-center gap-1 text-emerald-600">
             <CheckCircle className="h-4 w-4" />
             <span>모든 검증 통과</span>
           </div>
@@ -307,8 +307,8 @@ const ValidationErrorItem: React.FC<{ error: ValidationError }> = ({ error }) =>
  */
 const ValidationWarningItem: React.FC<{ warning: ValidationWarning }> = ({ warning }) => {
   return (
-    <Alert className="border-orange-200 bg-orange-50 py-2">
-      <AlertTriangle className="h-4 w-4 text-orange-600" />
+    <Alert className="border-orange-200 bg-amber-50 py-2">
+      <AlertTriangle className="h-4 w-4 text-amber-600" />
       <AlertDescription className="text-sm">
         <span className="font-medium">{warning.field}:</span> {warning.message}
         {warning.suggestion && <span className="mt-1 block text-xs text-orange-700">💡 {warning.suggestion}</span>}
@@ -364,15 +364,15 @@ export const FieldValidationIndicator: React.FC<{
       {showIcon && (
         <>
           {status === "validating" && <Clock className="text-muted-foreground h-3 w-3 animate-spin" />}
-          {status === "valid" && !error && <CheckCircle className="h-3 w-3 text-green-600" />}
+          {status === "valid" && !error && <CheckCircle className="h-3 w-3 text-emerald-600" />}
           {error && <AlertCircle className="text-destructive h-3 w-3" />}
-          {warning && !error && <AlertTriangle className="h-3 w-3 text-orange-600" />}
+          {warning && !error && <AlertTriangle className="h-3 w-3 text-amber-600" />}
         </>
       )}
 
       {error && <span className="text-destructive">{error.message}</span>}
 
-      {warning && !error && <span className="text-orange-600">{warning.message}</span>}
+      {warning && !error && <span className="text-amber-600">{warning.message}</span>}
     </div>
   );
 };
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index f75ded8f..d093e7ca 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -1028,7 +1028,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
-                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
                 <p className="text-muted-foreground">화면을 불러오는 중...</p>
               </div>
             </div>
diff --git a/frontend/components/common/TableHistoryModal.tsx b/frontend/components/common/TableHistoryModal.tsx
index 91299457..a08fff3d 100644
--- a/frontend/components/common/TableHistoryModal.tsx
+++ b/frontend/components/common/TableHistoryModal.tsx
@@ -102,26 +102,26 @@ export function TableHistoryModal({
   const getOperationIcon = (type: string) => {
     switch (type) {
       case "INSERT":
-        return <Plus className="h-4 w-4 text-green-600" />;
+        return <Plus className="h-4 w-4 text-emerald-600" />;
       case "UPDATE":
-        return <FileEdit className="h-4 w-4 text-blue-600" />;
+        return <FileEdit className="h-4 w-4 text-primary" />;
       case "DELETE":
-        return <Trash2 className="h-4 w-4 text-red-600" />;
+        return <Trash2 className="h-4 w-4 text-destructive" />;
       default:
-        return <Clock className="h-4 w-4 text-gray-600" />;
+        return <Clock className="h-4 w-4 text-muted-foreground" />;
     }
   };
 
   const getOperationBadge = (type: string) => {
     switch (type) {
       case "INSERT":
-        return <span className="text-sm font-medium text-green-600">추가</span>;
+        return <span className="text-sm font-medium text-emerald-600">추가</span>;
       case "UPDATE":
-        return <span className="text-sm font-medium text-blue-600">수정</span>;
+        return <span className="text-sm font-medium text-primary">수정</span>;
       case "DELETE":
-        return <span className="text-sm font-medium text-red-600">삭제</span>;
+        return <span className="text-sm font-medium text-destructive">삭제</span>;
       default:
-        return <span className="text-sm font-medium text-gray-600">{type}</span>;
+        return <span className="text-sm font-medium text-muted-foreground">{type}</span>;
     }
   };
 
@@ -301,8 +301,8 @@ export function TableHistoryModal({
                 ) : (
                   <div className="space-y-6">
                     {timeline.map((event, index) => (
-                      <div key={index} className="relative border-l-2 border-gray-200 pb-6 pl-8 last:border-l-0">
-                        <div className="absolute top-0 -left-3 rounded-full border-2 border-gray-200 bg-white p-1">
+                      <div key={index} className="relative border-l-2 border-border pb-6 pl-8 last:border-l-0">
+                        <div className="absolute top-0 -left-3 rounded-full border-2 border-border bg-white p-1">
                           {getOperationIcon(event.operation_type)}
                         </div>
 
@@ -325,12 +325,12 @@ export function TableHistoryModal({
                               <p className="text-muted-foreground text-xs font-medium">변경된 항목:</p>
                               <div className="space-y-1">
                                 {event.changes.map((change, idx) => (
-                                  <div key={idx} className="rounded bg-gray-50 p-2 text-xs">
+                                  <div key={idx} className="rounded bg-muted p-2 text-xs">
                                     <span className="font-mono font-medium">{change.column}</span>
                                     <div className="mt-1 flex items-center gap-2">
-                                      <span className="text-red-600 line-through">{change.oldValue || "(없음)"}</span>
+                                      <span className="text-destructive line-through">{change.oldValue || "(없음)"}</span>
                                       <span>→</span>
-                                      <span className="font-medium text-green-600">{change.newValue || "(없음)"}</span>
+                                      <span className="font-medium text-emerald-600">{change.newValue || "(없음)"}</span>
                                     </div>
                                   </div>
                                 ))}
@@ -355,7 +355,7 @@ export function TableHistoryModal({
                   </div>
                 ) : (
                   <table className="w-full text-xs">
-                    <thead className="sticky top-0 border-b bg-gray-50">
+                    <thead className="sticky top-0 border-b bg-muted">
                       <tr>
                         {!recordId && <th className="p-2 text-left font-medium">레코드</th>}
                         <th className="p-2 text-left font-medium">작업</th>
@@ -370,11 +370,11 @@ export function TableHistoryModal({
                       {detailRecords.map((record) => {
                         const displayValue = getDisplayValue(record);
                         return (
-                          <tr key={record.log_id} className="border-b hover:bg-gray-50">
+                          <tr key={record.log_id} className="border-b hover:bg-muted">
                             {!recordId && (
                               <td className="p-2">
                                 {displayValue ? (
-                                  <span className="font-medium text-gray-900">{displayValue}</span>
+                                  <span className="font-medium text-foreground">{displayValue}</span>
                                 ) : (
                                   <span className="text-muted-foreground text-xs">-</span>
                                 )}
@@ -382,8 +382,8 @@ export function TableHistoryModal({
                             )}
                             <td className="p-2">{getOperationBadge(record.operation_type)}</td>
                             <td className="p-2 font-mono">{record.changed_column}</td>
-                            <td className="max-w-[200px] truncate p-2 text-red-600">{record.old_value || "-"}</td>
-                            <td className="max-w-[200px] truncate p-2 text-green-600">{record.new_value || "-"}</td>
+                            <td className="max-w-[200px] truncate p-2 text-destructive">{record.old_value || "-"}</td>
+                            <td className="max-w-[200px] truncate p-2 text-emerald-600">{record.new_value || "-"}</td>
                             <td className="p-2">{record.changed_by}</td>
                             <td className="text-muted-foreground p-2">{formatDate(record.changed_at)}</td>
                           </tr>
diff --git a/frontend/components/common/ValidationMessage.tsx b/frontend/components/common/ValidationMessage.tsx
index b46653b7..e524dd38 100644
--- a/frontend/components/common/ValidationMessage.tsx
+++ b/frontend/components/common/ValidationMessage.tsx
@@ -10,7 +10,7 @@ interface ValidationMessageProps {
 
 export function ValidationMessage({ message, isValid, isLoading, className }: ValidationMessageProps) {
   if (isLoading) {
-    return <p className={cn("text-sm text-gray-500", className)}>검사 중...</p>;
+    return <p className={cn("text-sm text-muted-foreground", className)}>검사 중...</p>;
   }
 
   if (!message) {
@@ -18,6 +18,6 @@ export function ValidationMessage({ message, isValid, isLoading, className }: Va
   }
 
   return (
-    <p className={cn("text-sm transition-colors", isValid ? "text-green-600" : "text-destructive", className)}>{message}</p>
+    <p className={cn("text-sm transition-colors", isValid ? "text-emerald-600" : "text-destructive", className)}>{message}</p>
   );
 }
diff --git a/frontend/components/dashboard/widgets/ListTestWidget.tsx b/frontend/components/dashboard/widgets/ListTestWidget.tsx
index d1303d10..bc735833 100644
--- a/frontend/components/dashboard/widgets/ListTestWidget.tsx
+++ b/frontend/components/dashboard/widgets/ListTestWidget.tsx
@@ -212,16 +212,16 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
   const renderIcon = (icon?: string, color?: string) => {
     const colorClass =
       color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     switch (icon) {
       case "truck":
@@ -241,16 +241,16 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
   const renderFieldGroup = (group: FieldGroup, groupData: Record<string, any>) => {
     const colorClass =
       group.color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : group.color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : group.color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : group.color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : group.color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     return (
       <div key={group.id} className="rounded-lg border p-4">
diff --git a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
index 151c7eff..5a546dbf 100644
--- a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
+++ b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
@@ -1352,8 +1352,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
           {/* 이동경로 날짜 선택 */}
           {selectedUserId && (
-            <div className="flex items-center gap-1 rounded border bg-blue-50 px-2 py-1">
-              <span className="text-xs text-blue-600">🛣️</span>
+            <div className="flex items-center gap-1 rounded border bg-primary/10 px-2 py-1">
+              <span className="text-xs text-primary">🛣️</span>
               <input
                 type="date"
                 value={routeDate}
@@ -1363,10 +1363,10 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                     loadRoute(selectedUserId, e.target.value);
                   }
                 }}
-                className="h-6 rounded border-none bg-transparent px-1 text-xs text-blue-600 focus:outline-none"
+                className="h-6 rounded border-none bg-transparent px-1 text-xs text-primary focus:outline-none"
               />
-              <span className="text-xs text-blue-600">({routePoints.length}개)</span>
-              <button onClick={clearRoute} className="ml-1 text-xs text-blue-400 hover:text-blue-600">
+              <span className="text-xs text-primary">({routePoints.length}개)</span>
+              <button onClick={clearRoute} className="ml-1 text-xs text-primary/80 hover:text-primary">
                 ✕
               </button>
             </div>
@@ -1494,15 +1494,15 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                         const parsed = JSON.parse(matchingPolygon.description);
                         popupContent = `
                           <div class="min-w-[200px]">
-                            ${matchingPolygon.source ? `<div class="mb-2 border-b pb-2"><div class="text-gray-500 text-xs">📡 ${matchingPolygon.source}</div></div>` : ""}
-                            <div class="bg-gray-100 rounded p-2">
-                              <div class="text-gray-900 mb-1 text-xs font-semibold">상세 정보</div>
+                            ${matchingPolygon.source ? `<div class="mb-2 border-b pb-2"><div class="text-muted-foreground text-xs">📡 ${matchingPolygon.source}</div></div>` : ""}
+                            <div class="bg-muted rounded p-2">
+                              <div class="text-foreground mb-1 text-xs font-semibold">상세 정보</div>
                               <div class="space-y-2">
                                 ${popupFields
                                   .map((field) => {
                                     const value = parsed[field.fieldName];
                                     if (value === undefined || value === null) return "";
-                                    return `<div class="text-xs"><span class="text-gray-600 font-medium">${field.label}:</span> <span class="text-gray-900">${value}</span></div>`;
+                                    return `<div class="text-xs"><span class="text-muted-foreground font-medium">${field.label}:</span> <span class="text-foreground">${value}</span></div>`;
                                   })
                                   .join("")}
                               </div>
@@ -1980,7 +1980,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                   <button
                                     onClick={() => loadTripInfo(identifier)}
                                     disabled={tripInfoLoading === identifier}
-                                    className="w-full rounded bg-gray-100 px-2 py-1.5 text-xs text-gray-700 hover:bg-gray-200 disabled:opacity-50"
+                                    className="w-full rounded bg-muted px-2 py-1.5 text-xs text-foreground hover:bg-muted/80 disabled:opacity-50"
                                   >
                                     {tripInfoLoading === identifier ? "로딩 중..." : "📊 운행/공차 정보 보기"}
                                   </button>
@@ -1996,10 +1996,10 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                 {/* 운행 정보 */}
                                 {hasTripInfo && (
                                   <div className="mb-2">
-                                    <div className="text-xs font-semibold text-blue-600 mb-1">🚛 최근 운행</div>
-                                    <div className="bg-blue-50 rounded p-2 space-y-1">
+                                    <div className="text-xs font-semibold text-primary mb-1">🚛 최근 운행</div>
+                                    <div className="bg-primary/10 rounded p-2 space-y-1">
                                       {(info.last_trip_start || info.last_trip_end) && (
-                                        <div className="text-[10px] text-gray-600">
+                                        <div className="text-[10px] text-muted-foreground">
                                           <span className="font-medium">시간:</span>{" "}
                                           {formatDateTime(info.last_trip_start)} ~ {formatDateTime(info.last_trip_end)}
                                         </div>
@@ -2007,20 +2007,20 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                       <div className="flex gap-3 text-[10px]">
                                         {info.last_trip_distance !== undefined && info.last_trip_distance !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">거리:</span>{" "}
-                                            <span className="text-blue-700 font-semibold">{formatDistance(info.last_trip_distance)}</span>
+                                            <span className="font-medium text-muted-foreground">거리:</span>{" "}
+                                            <span className="text-primary font-semibold">{formatDistance(info.last_trip_distance)}</span>
                                           </span>
                                         )}
                                         {info.last_trip_time !== undefined && info.last_trip_time !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">소요:</span>{" "}
-                                            <span className="text-blue-700 font-semibold">{formatTime(info.last_trip_time)}</span>
+                                            <span className="font-medium text-muted-foreground">소요:</span>{" "}
+                                            <span className="text-primary font-semibold">{formatTime(info.last_trip_time)}</span>
                                           </span>
                                         )}
                                       </div>
                                       {/* 출발지/도착지 */}
                                       {(info.departure || info.arrival) && (
-                                        <div className="text-[10px] text-gray-600 pt-1 border-t border-blue-100">
+                                        <div className="text-[10px] text-muted-foreground pt-1 border-t border-primary/10">
                                           {info.departure && <span>출발: {info.departure}</span>}
                                           {info.departure && info.arrival && " → "}
                                           {info.arrival && <span>도착: {info.arrival}</span>}
@@ -2033,10 +2033,10 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                 {/* 공차 정보 */}
                                 {hasEmptyTripInfo && (
                                   <div>
-                                    <div className="text-xs font-semibold text-orange-600 mb-1">📦 최근 공차</div>
-                                    <div className="bg-orange-50 rounded p-2 space-y-1">
+                                    <div className="text-xs font-semibold text-amber-600 mb-1">📦 최근 공차</div>
+                                    <div className="bg-amber-50 rounded p-2 space-y-1">
                                       {(info.last_empty_start || info.last_empty_end) && (
-                                        <div className="text-[10px] text-gray-600">
+                                        <div className="text-[10px] text-muted-foreground">
                                           <span className="font-medium">시간:</span>{" "}
                                           {formatDateTime(info.last_empty_start)} ~ {formatDateTime(info.last_empty_end)}
                                         </div>
@@ -2044,13 +2044,13 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                       <div className="flex gap-3 text-[10px]">
                                         {info.last_empty_distance !== undefined && info.last_empty_distance !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">거리:</span>{" "}
+                                            <span className="font-medium text-muted-foreground">거리:</span>{" "}
                                             <span className="text-orange-700 font-semibold">{formatDistance(info.last_empty_distance)}</span>
                                           </span>
                                         )}
                                         {info.last_empty_time !== undefined && info.last_empty_time !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">소요:</span>{" "}
+                                            <span className="font-medium text-muted-foreground">소요:</span>{" "}
                                             <span className="text-orange-700 font-semibold">{formatTime(info.last_empty_time)}</span>
                                           </span>
                                         )}
@@ -2085,7 +2085,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                   <button
                                     onClick={() => loadRoute(visibleUserId)}
                                     disabled={routeLoading}
-                                    className="w-full rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50"
+                                    className="w-full rounded bg-primary px-2 py-1 text-xs text-white hover:bg-primary disabled:opacity-50"
                                   >
                                     {routeLoading && selectedUserId === visibleUserId ? "로딩 중..." : "🛣️ 이동경로 보기"}
                                   </button>
diff --git a/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx b/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
index 6234c984..dd73e6dd 100644
--- a/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
+++ b/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
@@ -357,7 +357,7 @@ export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000
                           <button
                             onClick={() => loadRoute(vehicle)}
                             disabled={isRouteLoading}
-                            className="w-full rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50"
+                            className="w-full rounded bg-primary px-2 py-1 text-xs text-white hover:bg-primary disabled:opacity-50"
                           >
                             {isRouteLoading && selectedVehicle?.id === vehicle.id
                               ? "로딩 중..."
@@ -391,7 +391,7 @@ export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000
 
           {/* 이동경로 정보 표시 - 상단으로 이동하여 주석 처리 */}
           {/* {selectedVehicle && routePoints.length > 0 && (
-            <div className="absolute bottom-2 right-2 z-[1000] rounded-lg bg-blue-500/90 p-2 shadow-lg backdrop-blur-sm">
+            <div className="absolute bottom-2 right-2 z-[1000] rounded-lg bg-primary/90 p-2 shadow-lg backdrop-blur-sm">
               <div className="flex items-center gap-2">
                 <div className="text-xs text-white">
                   <div className="font-semibold">🛣️ {selectedVehicle.name} 이동경로</div>
diff --git a/frontend/components/dataflow/ConnectionSetupModal.tsx b/frontend/components/dataflow/ConnectionSetupModal.tsx
index 9b6482a4..d2ddf035 100644
--- a/frontend/components/dataflow/ConnectionSetupModal.tsx
+++ b/frontend/components/dataflow/ConnectionSetupModal.tsx
@@ -733,13 +733,13 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle className="flex items-center gap-2">
-              <CheckCircle className="h-5 w-5 text-green-500" />
+              <CheckCircle className="h-5 w-5 text-emerald-500" />
               연결 생성 완료
             </AlertDialogTitle>
             <AlertDialogDescription className="text-base">
-              <span className="font-medium text-green-600">{createdConnectionName}</span> 연결이 생성되었습니다.
+              <span className="font-medium text-emerald-600">{createdConnectionName}</span> 연결이 생성되었습니다.
               <br />
-              <span className="mt-2 block text-sm text-gray-500">
+              <span className="mt-2 block text-sm text-muted-foreground">
                 생성된 연결은 데이터플로우 다이어그램에서 확인할 수 있습니다.
               </span>
             </AlertDialogDescription>
diff --git a/frontend/components/dataflow/DataFlowDesigner.tsx b/frontend/components/dataflow/DataFlowDesigner.tsx
index 5b9989a4..64c7576a 100644
--- a/frontend/components/dataflow/DataFlowDesigner.tsx
+++ b/frontend/components/dataflow/DataFlowDesigner.tsx
@@ -800,7 +800,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
   ]);
 
   return (
-    <div className="data-flow-designer h-screen bg-gray-100">
+    <div className="data-flow-designer h-screen bg-muted">
       <div className="flex h-full">
         {/* 사이드바 */}
         <DataFlowSidebar
@@ -892,12 +892,12 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
           {/* 안내 메시지 */}
           {nodes.length === 0 && (
             <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-              <div className="text-center text-gray-500">
+              <div className="text-center text-muted-foreground">
                 <div className="mb-2 text-2xl">📊</div>
                 <div className="mb-1 text-lg font-medium">테이블 간 데이터 관계 설정을 시작하세요</div>
                 <div className="text-sm">
                   <div>왼쪽 사이드바에서 테이블을 더블클릭하여 추가하세요</div>
-                  <div className="mt-1 text-xs text-gray-400">테이블 선택 후 Del 키로 삭제 가능</div>
+                  <div className="mt-1 text-xs text-muted-foreground/70">테이블 선택 후 Del 키로 삭제 가능</div>
                 </div>
               </div>
             </div>
diff --git a/frontend/components/dataflow/DataFlowSidebar.tsx b/frontend/components/dataflow/DataFlowSidebar.tsx
index f38f4c3a..0b9162f6 100644
--- a/frontend/components/dataflow/DataFlowSidebar.tsx
+++ b/frontend/components/dataflow/DataFlowSidebar.tsx
@@ -35,9 +35,9 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
   getSelectedTableNames,
 }) => {
   return (
-    <div className="w-80 border-r border-gray-200 bg-white shadow-lg">
+    <div className="w-80 border-r border-border bg-white shadow-lg">
       <div className="p-6">
-        <h2 className="mb-6 text-xl font-bold text-gray-800">테이블 간 데이터 관계 설정</h2>
+        <h2 className="mb-6 text-xl font-bold text-foreground">테이블 간 데이터 관계 설정</h2>
 
         {/* 테이블 선택기 */}
         <TableSelector companyCode={companyCode} onTableAdd={onTableAdd} selectedTables={getSelectedTableNames()} />
@@ -46,7 +46,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
         <div className="space-y-3">
           <button
             onClick={onRemoveOrphanedNodes}
-            className="w-full rounded-lg bg-orange-500 p-3 font-medium text-white transition-colors hover:bg-orange-600"
+            className="w-full rounded-lg bg-amber-500 p-3 font-medium text-white transition-colors hover:bg-orange-600"
             disabled={nodes.length === 0}
           >
             🧹 고립된 노드 정리
@@ -54,14 +54,14 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
 
           <button
             onClick={onClearAll}
-            className="w-full rounded-lg bg-destructive/100 p-3 font-medium text-white transition-colors hover:bg-red-600"
+            className="w-full rounded-lg bg-destructive/100 p-3 font-medium text-white transition-colors hover:bg-destructive"
           >
             🗑️ 전체 삭제
           </button>
 
           <button
             onClick={onOpenSaveModal}
-            className={`w-full rounded-lg bg-green-500 p-3 font-medium text-white transition-colors hover:bg-green-600 ${
+            className={`w-full rounded-lg bg-emerald-500 p-3 font-medium text-white transition-colors hover:bg-emerald-600 ${
               hasUnsavedChanges ? "animate-pulse" : ""
             }`}
           >
@@ -70,8 +70,8 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
         </div>
 
         {/* 통계 정보 */}
-        <div className="mt-6 rounded-lg bg-gray-50 p-4">
-          <div className="mb-2 text-sm font-semibold text-gray-700">통계</div>
+        <div className="mt-6 rounded-lg bg-muted p-4">
+          <div className="mb-2 text-sm font-semibold text-foreground">통계</div>
           <div className="space-y-1 text-sm text-muted-foreground">
             <div className="flex justify-between">
               <span>테이블 노드:</span>
@@ -83,7 +83,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
             </div>
             <div className="flex justify-between">
               <span>메모리 관계:</span>
-              <span className="font-medium text-orange-600">{tempRelationships.length}개</span>
+              <span className="font-medium text-amber-600">{tempRelationships.length}개</span>
             </div>
             <div className="flex justify-between">
               <span>관계도 ID:</span>
@@ -98,7 +98,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
               </span>
             </div>
             {hasUnsavedChanges && (
-              <div className="mt-2 text-xs font-medium text-orange-600">⚠️ 저장되지 않은 변경사항이 있습니다</div>
+              <div className="mt-2 text-xs font-medium text-amber-600">⚠️ 저장되지 않은 변경사항이 있습니다</div>
             )}
           </div>
         </div>
diff --git a/frontend/components/dataflow/EdgeInfoPanel.tsx b/frontend/components/dataflow/EdgeInfoPanel.tsx
index 2fcfffd6..676755a2 100644
--- a/frontend/components/dataflow/EdgeInfoPanel.tsx
+++ b/frontend/components/dataflow/EdgeInfoPanel.tsx
@@ -24,7 +24,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
 
   return (
     <div
-      className="fixed z-50 rounded-xl border border-gray-200 bg-white shadow-2xl"
+      className="fixed z-50 rounded-xl border border-border bg-white shadow-2xl"
       style={{
         left: position.x - 160,
         top: position.y - 100,
@@ -33,7 +33,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       }}
     >
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-xl border-b border-gray-200 bg-blue-600 p-4">
+      <div className="flex items-center justify-between rounded-t-xl border-b border-border bg-primary p-4">
         <div className="flex items-center gap-3">
           <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
             <span className="text-sm text-white">🔗</span>
@@ -52,10 +52,10 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       </div>
 
       {/* 관계 정보 요약 */}
-      <div className="border-b border-gray-100 bg-gray-50 p-3">
+      <div className="border-b border-border bg-muted p-3">
         <div className="flex items-center justify-center gap-4">
           <div className="text-center">
-            <div className="text-xs font-medium tracking-wide text-gray-500 uppercase">연결 유형</div>
+            <div className="text-xs font-medium tracking-wide text-muted-foreground uppercase">연결 유형</div>
             <div className="mt-1 inline-flex items-center rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-800">
               {edgeInfo.connectionType}
             </div>
@@ -68,7 +68,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
         {/* From 테이블 */}
         <div className="rounded-lg border-l-4 border-emerald-400 bg-emerald-50 p-3">
           <div className="mb-2 text-xs font-bold tracking-wide text-emerald-700 uppercase">FROM</div>
-          <div className="mb-2 text-base font-bold text-gray-800">{edgeInfo.fromTable}</div>
+          <div className="mb-2 text-base font-bold text-foreground">{edgeInfo.fromTable}</div>
           <div className="space-y-1">
             <div className="flex flex-wrap gap-2">
               {edgeInfo.fromColumns.map((column, index) => (
@@ -89,15 +89,15 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
         </div>
 
         {/* To 테이블 */}
-        <div className="rounded-lg border-l-4 border-blue-400 bg-accent p-3">
-          <div className="mb-2 text-xs font-bold tracking-wide text-blue-700 uppercase">TO</div>
-          <div className="mb-2 text-base font-bold text-gray-800">{edgeInfo.toTable}</div>
+        <div className="rounded-lg border-l-4 border-primary/60 bg-accent p-3">
+          <div className="mb-2 text-xs font-bold tracking-wide text-primary uppercase">TO</div>
+          <div className="mb-2 text-base font-bold text-foreground">{edgeInfo.toTable}</div>
           <div className="space-y-1">
             <div className="flex flex-wrap gap-2">
               {edgeInfo.toColumns.map((column, index) => (
                 <span
                   key={index}
-                  className="inline-flex items-center rounded-md bg-primary/20 px-2.5 py-0.5 text-xs font-medium text-blue-800 ring-1 ring-blue-200"
+                  className="inline-flex items-center rounded-md bg-primary/20 px-2.5 py-0.5 text-xs font-medium text-primary ring-1 ring-primary/20"
                 >
                   {column}
                 </span>
@@ -108,16 +108,16 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       </div>
 
       {/* 액션 버튼 */}
-      <div className="flex gap-2 border-t border-gray-200 bg-gray-50 p-3">
+      <div className="flex gap-2 border-t border-border bg-muted p-3">
         <button
           onClick={onEdit}
-          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
+          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-primary/90 hover:shadow-md"
         >
           <span>수정</span>
         </button>
         <button
           onClick={onDelete}
-          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-red-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-red-700 hover:shadow-md"
+          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-destructive px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-red-700 hover:shadow-md"
         >
           <span>삭제</span>
         </button>
diff --git a/frontend/components/dataflow/RelationshipListModal.tsx b/frontend/components/dataflow/RelationshipListModal.tsx
index fbbc445b..d5ba9b9e 100644
--- a/frontend/components/dataflow/RelationshipListModal.tsx
+++ b/frontend/components/dataflow/RelationshipListModal.tsx
@@ -136,16 +136,16 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
   return (
     <div className="pointer-events-auto absolute top-4 right-4 z-40 w-80 rounded-xl border border-primary/20 bg-white shadow-lg">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
+      <div className="flex items-center justify-between rounded-t-xl border-b border-primary/10 bg-gradient-to-r from-primary/5 to-indigo-50 p-3">
         <div className="flex items-center gap-2">
           <div className="rounded-full bg-primary/20 p-1">
             <span className="text-sm text-primary">🔗</span>
           </div>
-          <div className="text-sm font-semibold text-gray-800">테이블 간 관계 목록</div>
+          <div className="text-sm font-semibold text-foreground">테이블 간 관계 목록</div>
         </div>
         <button
           onClick={onClose}
-          className="flex h-6 w-6 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-muted-foreground"
+          className="flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground/70 transition-colors hover:bg-muted hover:text-muted-foreground"
         >
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -159,10 +159,10 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
           {relationships.map((relationship) => (
             <div
               key={relationship.id}
-              className="rounded-lg border border-gray-200 p-3 transition-all hover:border-blue-300 hover:bg-accent"
+              className="rounded-lg border border-border p-3 transition-all hover:border-primary/40 hover:bg-accent"
             >
               <div className="mb-1 flex items-center justify-between">
-                <h4 className="text-sm font-medium text-gray-900">
+                <h4 className="text-sm font-medium text-foreground">
                   {relationship.relationshipName || `${relationship.fromTable} → ${relationship.toTable}`}
                 </h4>
                 <div className="flex items-center gap-1">
@@ -172,7 +172,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
                       e.stopPropagation();
                       handleEdit(relationship);
                     }}
-                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-primary/20 hover:text-primary"
+                    className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-primary/20 hover:text-primary"
                     title="관계 편집"
                   >
                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -190,7 +190,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
                       e.stopPropagation();
                       handleDelete(relationship);
                     }}
-                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-destructive/20 hover:text-destructive"
+                    className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-destructive/20 hover:text-destructive"
                     title="관계 삭제"
                   >
                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/frontend/components/dataflow/SaveDiagramModal.tsx b/frontend/components/dataflow/SaveDiagramModal.tsx
index af7f004f..53d67afa 100644
--- a/frontend/components/dataflow/SaveDiagramModal.tsx
+++ b/frontend/components/dataflow/SaveDiagramModal.tsx
@@ -161,13 +161,13 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
             </div>
 
             {/* 관계 요약 정보 */}
-            <div className="grid grid-cols-3 gap-4 rounded-lg bg-gray-50 p-4">
+            <div className="grid grid-cols-3 gap-4 rounded-lg bg-muted p-4">
               <div className="text-center">
                 <div className="text-2xl font-bold text-primary">{relationships.length}</div>
                 <div className="text-sm text-muted-foreground">관계 수</div>
               </div>
               <div className="text-center">
-                <div className="text-2xl font-bold text-green-600">{connectedTables.length}</div>
+                <div className="text-2xl font-bold text-emerald-600">{connectedTables.length}</div>
                 <div className="text-sm text-muted-foreground">연결된 테이블</div>
               </div>
               <div className="text-center">
@@ -207,7 +207,7 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
                     {relationships.map((relationship, index) => (
                       <div
                         key={relationship.id || index}
-                        className="flex items-center justify-between rounded-lg border bg-white p-3 hover:bg-gray-50"
+                        className="flex items-center justify-between rounded-lg border bg-white p-3 hover:bg-muted"
                       >
                         <div className="flex-1">
                           <div className="flex items-center gap-2 text-sm">
@@ -234,10 +234,10 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
 
             {/* 관계가 없는 경우 안내 */}
             {relationships.length === 0 && (
-              <div className="py-8 text-center text-gray-500">
+              <div className="py-8 text-center text-muted-foreground">
                 <div className="mb-2 text-4xl">📭</div>
                 <div className="text-sm">생성된 관계가 없습니다.</div>
-                <div className="mt-1 text-xs text-gray-400">테이블을 추가하고 컬럼을 연결해서 관계를 생성해보세요.</div>
+                <div className="mt-1 text-xs text-muted-foreground/70">테이블을 추가하고 컬럼을 연결해서 관계를 생성해보세요.</div>
               </div>
             )}
           </div>
@@ -249,7 +249,7 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
             <Button
               onClick={handleSave}
               disabled={isLoading || relationships.length === 0}
-              className="bg-blue-600 hover:bg-blue-700"
+              className="bg-primary hover:bg-primary/90"
             >
               {isLoading ? (
                 <div className="flex items-center gap-2">
@@ -269,13 +269,13 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle className="flex items-center gap-2">
-              <CheckCircle className="h-5 w-5 text-green-500" />
+              <CheckCircle className="h-5 w-5 text-emerald-500" />
               관계도 저장 완료
             </AlertDialogTitle>
             <AlertDialogDescription className="text-base">
-              <span className="font-medium text-green-600">{savedDiagramName}</span> 관계도가 성공적으로 저장되었습니다.
+              <span className="font-medium text-emerald-600">{savedDiagramName}</span> 관계도가 성공적으로 저장되었습니다.
               <br />
-              <span className="mt-2 block text-sm text-gray-500">
+              <span className="mt-2 block text-sm text-muted-foreground">
                 저장된 관계도는 관리 메뉴에서 확인하고 수정할 수 있습니다.
               </span>
             </AlertDialogDescription>
diff --git a/frontend/components/dataflow/SelectedTablesPanel.tsx b/frontend/components/dataflow/SelectedTablesPanel.tsx
index 9f1f1c55..e4bd0927 100644
--- a/frontend/components/dataflow/SelectedTablesPanel.tsx
+++ b/frontend/components/dataflow/SelectedTablesPanel.tsx
@@ -26,14 +26,14 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
   return (
     <div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-xl border border-primary/20 bg-white shadow-lg">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
+      <div className="flex items-center justify-between rounded-t-xl border-b border-primary/10 bg-gradient-to-r from-primary/5 to-indigo-50 p-3">
         <div className="flex items-center gap-2">
           <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/20">
             <span className="text-sm text-primary">📋</span>
           </div>
           <div>
-            <div className="text-sm font-semibold text-gray-800">선택된 테이블</div>
-            <div className="text-xs text-gray-500">
+            <div className="text-sm font-semibold text-foreground">선택된 테이블</div>
+            <div className="text-xs text-muted-foreground">
               {selectedNodes.length === 1
                 ? "FROM 테이블 선택됨"
                 : selectedNodes.length === 2
@@ -44,7 +44,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
         </div>
         <button
           onClick={onClose}
-          className="flex h-5 w-5 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-muted-foreground"
+          className="flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 hover:bg-muted hover:text-muted-foreground"
         >
           ✕
         </button>
@@ -66,14 +66,14 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                     index === 0
                       ? "border-l-4 border-emerald-400 bg-emerald-50"
                       : index === 1
-                        ? "border-l-4 border-blue-400 bg-accent"
+                        ? "border-l-4 border-primary/60 bg-accent"
                         : "bg-muted"
                   }`}
                 >
                   <div className="mb-1 flex items-center justify-between">
                     <div
                       className={`text-xs font-medium ${
-                        index === 0 ? "text-emerald-700" : index === 1 ? "text-blue-700" : "text-gray-700"
+                        index === 0 ? "text-emerald-700" : index === 1 ? "text-primary" : "text-foreground"
                       }`}
                     >
                       {displayName}
@@ -81,7 +81,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                     {selectedNodes.length === 2 && (
                       <div
                         className={`rounded-full px-2 py-0.5 text-xs font-bold ${
-                          index === 0 ? "bg-emerald-200 text-emerald-800" : "bg-blue-200 text-blue-800"
+                          index === 0 ? "bg-emerald-200 text-emerald-800" : "bg-blue-200 text-primary"
                         }`}
                       >
                         {index === 0 ? "FROM" : "TO"}
@@ -94,7 +94,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                 {/* 연결 화살표 (마지막이 아닌 경우) */}
                 {index < selectedNodes.length - 1 && (
                   <div className="flex justify-center py-1">
-                    <div className="text-gray-400">→</div>
+                    <div className="text-muted-foreground/70">→</div>
                   </div>
                 )}
               </div>
@@ -104,14 +104,14 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
       </div>
 
       {/* 액션 버튼 */}
-      <div className="flex gap-2 border-t border-blue-100 p-3">
+      <div className="flex gap-2 border-t border-primary/10 p-3">
         <button
           onClick={onOpenConnectionModal}
           disabled={!canCreateConnection}
           className={`flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-medium transition-colors ${
             canCreateConnection
-              ? "bg-accent0 text-white hover:bg-blue-600"
-              : "cursor-not-allowed bg-gray-300 text-gray-500"
+              ? "bg-accent0 text-white hover:bg-primary"
+              : "cursor-not-allowed bg-muted/60 text-muted-foreground"
           }`}
         >
           <span>🔗</span>
@@ -119,7 +119,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
         </button>
         <button
           onClick={onClear}
-          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-gray-200 px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-gray-300"
+          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-muted/80 px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-muted/60"
         >
           <span>🗑️</span>
           <span>초기화</span>
diff --git a/frontend/components/dataflow/TableNode.tsx b/frontend/components/dataflow/TableNode.tsx
index 6837efc0..f1b3872f 100644
--- a/frontend/components/dataflow/TableNode.tsx
+++ b/frontend/components/dataflow/TableNode.tsx
@@ -32,13 +32,13 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
   const { table, onColumnClick, onScrollAreaEnter, onScrollAreaLeave, selectedColumns = [] } = data;
 
   return (
-    <div className="relative flex min-w-[280px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-gray-300 bg-white shadow-lg transition-all hover:shadow-xl">
+    <div className="relative flex min-w-[280px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-input bg-white shadow-lg transition-all hover:shadow-xl">
       {/* React Flow Handles - 숨김 처리 */}
       <Handle type="target" position={Position.Left} id="left" className="!invisible !h-1 !w-1" />
       <Handle type="source" position={Position.Right} id="right" className="!invisible !h-1 !w-1" />
 
       {/* 테이블 헤더 - 통일된 디자인 */}
-      <div className="bg-blue-600 p-3 text-white">
+      <div className="bg-primary p-3 text-white">
         <h3 className="truncate text-sm font-semibold">{table.displayName}</h3>
         {table.description && <p className="mt-1 truncate text-xs opacity-75">{table.description}</p>}
       </div>
@@ -56,7 +56,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
               <div
                 key={columnKey}
                 className={`relative cursor-pointer rounded px-2 py-1 text-xs transition-colors ${
-                  isSelected ? "bg-primary/20 text-blue-800 ring-2 ring-blue-500" : "text-gray-700 hover:bg-gray-100"
+                  isSelected ? "bg-primary/20 text-primary ring-2 ring-ring" : "text-foreground hover:bg-muted"
                 }`}
                 onClick={() => onColumnClick(table.tableName, columnKey)}
               >
@@ -64,9 +64,9 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
 
                 <div className="flex items-center justify-between">
                   <span className="font-mono font-medium">{columnDisplayName}</span>
-                  <span className="text-gray-500">{columnType}</span>
+                  <span className="text-muted-foreground">{columnType}</span>
                 </div>
-                {column.description && <div className="mt-0.5 text-gray-500">{column.description}</div>}
+                {column.description && <div className="mt-0.5 text-muted-foreground">{column.description}</div>}
               </div>
             );
           })}
diff --git a/frontend/components/dataflow/TableSelector.tsx b/frontend/components/dataflow/TableSelector.tsx
index d2aa68ac..161ca6ce 100644
--- a/frontend/components/dataflow/TableSelector.tsx
+++ b/frontend/components/dataflow/TableSelector.tsx
@@ -74,7 +74,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold text-gray-800">테이블 선택</h3>
+        <h3 className="text-lg font-semibold text-foreground">테이블 선택</h3>
         <Button onClick={loadTables} variant="outline" size="sm" disabled={loading}>
           {loading ? "로딩중..." : "새로고침"}
         </Button>
@@ -82,7 +82,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
 
       {/* 검색 입력 */}
       <div className="relative">
-        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
         <Input
           placeholder="테이블명으로 검색..."
           value={searchTerm}
@@ -99,11 +99,11 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
       <div className="max-h-96 space-y-2 overflow-y-auto">
         {loading ? (
           <div className="flex items-center justify-center py-8">
-            <div className="text-sm text-gray-500">테이블 목록을 불러오는 중...</div>
+            <div className="text-sm text-muted-foreground">테이블 목록을 불러오는 중...</div>
           </div>
         ) : filteredTables.length === 0 ? (
           <div className="flex items-center justify-center py-8">
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-center text-sm text-muted-foreground">
               {searchTerm ? "검색 결과가 없습니다." : "등록된 테이블이 없습니다."}
             </div>
           </div>
@@ -114,14 +114,14 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
               <Card
                 key={table.tableName}
                 className={`cursor-pointer transition-all hover:shadow-md ${
-                  isSelected ? "cursor-not-allowed border-primary bg-accent opacity-60" : "hover:border-gray-300"
+                  isSelected ? "cursor-not-allowed border-primary bg-accent opacity-60" : "hover:border-input"
                 }`}
                 onDoubleClick={() => !isSelected && handleAddTable(table)}
               >
                 <CardHeader className="pb-2">
                   <div>
                     <CardTitle className="text-sm font-medium">{table.displayName}</CardTitle>
-                    <div className="mt-1 text-xs text-gray-500">{table.columnCount}개 컬럼</div>
+                    <div className="mt-1 text-xs text-muted-foreground">{table.columnCount}개 컬럼</div>
                   </div>
                 </CardHeader>
                 <CardContent className="pt-0">
@@ -132,7 +132,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
                       {isSelected && <span className="font-medium text-primary">(추가됨)</span>}
                     </div>
 
-                    {table.description && <p className="line-clamp-2 text-xs text-gray-500">{table.description}</p>}
+                    {table.description && <p className="line-clamp-2 text-xs text-muted-foreground">{table.description}</p>}
                   </div>
                 </CardContent>
               </Card>
@@ -142,7 +142,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
       </div>
 
       {/* 통계 정보 */}
-      <div className="rounded-lg bg-gray-50 p-3 text-xs text-muted-foreground">
+      <div className="rounded-lg bg-muted p-3 text-xs text-muted-foreground">
         <div className="flex items-center justify-between">
           <span>전체 테이블: {tables.length}개</span>
           {searchTerm && <span>검색 결과: {filteredTables.length}개</span>}
diff --git a/frontend/components/dataflow/condition/ConditionRenderer.tsx b/frontend/components/dataflow/condition/ConditionRenderer.tsx
index 4cb5b915..6eec3455 100644
--- a/frontend/components/dataflow/condition/ConditionRenderer.tsx
+++ b/frontend/components/dataflow/condition/ConditionRenderer.tsx
@@ -63,7 +63,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
   return (
     <div className="space-y-2">
       {conditions.length === 0 ? (
-        <div className="rounded-lg border border-dashed p-3 text-center text-xs text-gray-500">
+        <div className="rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground">
           조건을 추가하면 해당 조건을 만족할 때만 실행됩니다.
           <br />
           조건이 없으면 항상 실행됩니다.
@@ -92,7 +92,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
                   )}
                   {/* 그룹 레벨에 따른 들여쓰기 */}
                   <div
-                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-accent/50 p-2"
+                    className="flex items-center gap-2 rounded border-2 border-dashed border-primary/40 bg-accent/50 p-2"
                     style={{ marginLeft: `${(condition.groupLevel || 0) * 20}px` }}
                   >
                     <span className="font-mono text-sm text-primary">(</span>
@@ -110,7 +110,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
               return (
                 <div key={condition.id} className="flex items-center gap-2">
                   <div
-                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-accent/50 p-2"
+                    className="flex items-center gap-2 rounded border-2 border-dashed border-primary/40 bg-accent/50 p-2"
                     style={{ marginLeft: `${(condition.groupLevel || 0) * 20}px` }}
                   >
                     <span className="font-mono text-sm text-primary">)</span>
diff --git a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
index c902ae75..949aca04 100644
--- a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
@@ -114,7 +114,7 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
             value={settings.actions[actionIndex].conditions![condIndex - 1]?.logicalOperator || "AND"}
             onValueChange={(value: "AND" | "OR") => updateLogicalOperator(condIndex - 1, value)}
           >
-            <SelectTrigger className="h-6 w-24 border-green-200 bg-green-50 text-xs">
+            <SelectTrigger className="h-6 w-24 border-emerald-200 bg-emerald-50 text-xs">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -124,11 +124,11 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
           </Select>
         )}
         <div
-          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-green-50/50 p-1"
+          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-emerald-50/50 p-1"
           style={{ marginLeft: `${(condition.groupLevel || 0) * 15}px` }}
         >
-          <span className="font-mono text-xs text-green-600">(</span>
-          <span className="text-xs text-green-600">그룹 시작</span>
+          <span className="font-mono text-xs text-emerald-600">(</span>
+          <span className="text-xs text-emerald-600">그룹 시작</span>
           <Button
             size="sm"
             variant="ghost"
@@ -147,11 +147,11 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
     return (
       <div className="flex items-center gap-2">
         <div
-          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-green-50/50 p-1"
+          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-emerald-50/50 p-1"
           style={{ marginLeft: `${(condition.groupLevel || 0) * 15}px` }}
         >
-          <span className="font-mono text-xs text-green-600">)</span>
-          <span className="text-xs text-green-600">그룹 끝</span>
+          <span className="font-mono text-xs text-emerald-600">)</span>
+          <span className="text-xs text-emerald-600">그룹 끝</span>
           <Button
             size="sm"
             variant="ghost"
@@ -174,7 +174,7 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
           value={settings.actions[actionIndex].conditions![condIndex - 1]?.logicalOperator || "AND"}
           onValueChange={(value: "AND" | "OR") => updateLogicalOperator(condIndex - 1, value)}
         >
-          <SelectTrigger className="h-6 w-24 border-green-200 bg-green-50 text-xs">
+          <SelectTrigger className="h-6 w-24 border-emerald-200 bg-emerald-50 text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
diff --git a/frontend/components/dataflow/connection/ActionConditionsSection.tsx b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
index b22391ba..e57050f8 100644
--- a/frontend/components/dataflow/connection/ActionConditionsSection.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
@@ -82,21 +82,21 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
     <div className="mt-3">
       <details className="group">
         <summary
-          className={`flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium hover:bg-gray-50 hover:text-gray-900 ${
+          className={`flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium hover:bg-muted hover:text-foreground ${
             isConditionRequired && !hasValidConditions
-              ? "border-red-300 bg-destructive/10 text-red-700"
-              : "border-gray-200 text-gray-700"
+              ? "border-destructive/30 bg-destructive/10 text-destructive"
+              : "border-border text-foreground"
           }`}
         >
           <div className="flex items-center gap-2">
             🔍 이 액션의 실행 조건
             {isConditionRequired ? (
-              <span className="rounded bg-destructive/20 px-1 py-0.5 text-xs font-semibold text-red-700">필수</span>
+              <span className="rounded bg-destructive/20 px-1 py-0.5 text-xs font-semibold text-destructive">필수</span>
             ) : (
-              <span className="text-gray-500">(선택사항)</span>
+              <span className="text-muted-foreground">(선택사항)</span>
             )}
             {action.conditions && action.conditions.length > 0 && (
-              <span className="rounded-full bg-primary/20 px-2 py-0.5 text-xs text-blue-700">
+              <span className="rounded-full bg-primary/20 px-2 py-0.5 text-xs text-primary">
                 {action.conditions.length}개
               </span>
             )}
@@ -113,14 +113,14 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
                 e.stopPropagation();
                 clearAllConditions();
               }}
-              className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+              className="h-5 w-5 p-0 text-destructive hover:text-destructive"
               title="조건 모두 삭제"
             >
               <Trash2 className="h-3 w-3" />
             </Button>
           )}
         </summary>
-        <div className="mt-2 space-y-2 border-l-2 border-gray-100 pl-4">
+        <div className="mt-2 space-y-2 border-l-2 border-border pl-4">
           <div className="mb-2 flex items-center justify-between">
             <div className="flex gap-1">
               <Button size="sm" variant="outline" onClick={addActionCondition} className="h-6 text-xs">
@@ -151,13 +151,13 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
             <div
               className={`rounded border p-3 text-xs ${
                 isConditionRequired
-                  ? "border-destructive/20 bg-destructive/10 text-red-700"
-                  : "border-gray-200 bg-gray-50 text-muted-foreground"
+                  ? "border-destructive/20 bg-destructive/10 text-destructive"
+                  : "border-border bg-muted text-muted-foreground"
               }`}
             >
               {isConditionRequired ? (
                 <div className="flex items-start gap-2">
-                  <span className="text-red-500">⚠️</span>
+                  <span className="text-destructive">⚠️</span>
                   <div>
                     <div className="font-medium">실행조건이 필요합니다</div>
                     <div className="mt-1">
diff --git a/frontend/components/dataflow/connection/ActionFieldMappings.tsx b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
index 91e5e1c9..4e13a86e 100644
--- a/frontend/components/dataflow/connection/ActionFieldMappings.tsx
+++ b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
@@ -277,13 +277,13 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                       updateFieldMapping(mappingIndex, "sourceTable", "");
                       updateFieldMapping(mappingIndex, "sourceField", "");
                     }}
-                    className="ml-1 flex h-4 w-4 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 hover:text-muted-foreground"
+                    className="ml-1 flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground/70 hover:bg-muted/80 hover:text-muted-foreground"
                     title="소스 테이블 지우기"
                   >
                     ×
                   </button>
                 )}
-                <span className="text-gray-400">.</span>
+                <span className="text-muted-foreground/70">.</span>
                 <Select
                   value={mapping.sourceField}
                   onValueChange={(value) => {
@@ -312,10 +312,10 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                 </Select>
               </div>
 
-              <div className="text-gray-400">→</div>
+              <div className="text-muted-foreground/70">→</div>
 
               {/* 타겟 */}
-              <div className="flex items-center gap-1 rounded bg-green-50 px-2 py-1">
+              <div className="flex items-center gap-1 rounded bg-emerald-50 px-2 py-1">
                 <Select
                   value={mapping.targetTable || ""}
                   onValueChange={(value) => {
@@ -336,7 +336,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                     ))}
                   </SelectContent>
                 </Select>
-                <span className="text-gray-400">.</span>
+                <span className="text-muted-foreground/70">.</span>
                 <Select
                   value={mapping.targetField}
                   onValueChange={(value) => updateFieldMapping(mappingIndex, "targetField", value)}
@@ -380,7 +380,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                 size="sm"
                 variant="ghost"
                 onClick={() => removeFieldMapping(mappingIndex)}
-                className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
               >
                 <Trash2 className="h-3 w-3" />
               </Button>
@@ -390,9 +390,9 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
 
         {/* 필드 매핑이 없을 때 안내 메시지 */}
         {action.fieldMappings.length === 0 && (
-          <div className="rounded border border-destructive/20 bg-destructive/10 p-3 text-xs text-red-700">
+          <div className="rounded border border-destructive/20 bg-destructive/10 p-3 text-xs text-destructive">
             <div className="flex items-start gap-2">
-              <span className="text-red-500">⚠️</span>
+              <span className="text-destructive">⚠️</span>
               <div>
                 <div className="font-medium">필드 매핑이 필요합니다</div>
                 <div className="mt-1">
diff --git a/frontend/components/dataflow/connection/ActionSplitConfig.tsx b/frontend/components/dataflow/connection/ActionSplitConfig.tsx
index bb8d49e1..60de8753 100644
--- a/frontend/components/dataflow/connection/ActionSplitConfig.tsx
+++ b/frontend/components/dataflow/connection/ActionSplitConfig.tsx
@@ -52,11 +52,11 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
   return (
     <div className="mt-3">
       <details className="group">
-        <summary className="flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">
+        <summary className="flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium text-foreground hover:bg-muted hover:text-foreground">
           <div className="flex items-center gap-2">
             ✂️ 데이터 분할 설정 (선택사항)
             {action.splitConfig && action.splitConfig.sourceField && (
-              <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">설정됨</span>
+              <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700">설정됨</span>
             )}
           </div>
           {action.splitConfig && action.splitConfig.sourceField && (
@@ -68,18 +68,18 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
                 e.stopPropagation();
                 clearSplitConfig();
               }}
-              className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+              className="h-5 w-5 p-0 text-destructive hover:text-destructive"
               title="분할 설정 초기화"
             >
               <Trash2 className="h-3 w-3" />
             </Button>
           )}
         </summary>
-        <div className="mt-2 space-y-2 border-l-2 border-gray-100 pl-4">
+        <div className="mt-2 space-y-2 border-l-2 border-border pl-4">
           <Label className="text-xs font-medium">데이터 분할 설정</Label>
           <div className="mt-1 grid grid-cols-3 gap-2">
             <div>
-              <Label className="text-xs text-gray-500">분할할 필드</Label>
+              <Label className="text-xs text-muted-foreground">분할할 필드</Label>
               <Select
                 value={action.splitConfig?.sourceField || ""}
                 onValueChange={(value) => updateSplitConfig("sourceField", value)}
@@ -99,7 +99,7 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
               </Select>
             </div>
             <div>
-              <Label className="text-xs text-gray-500">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={action.splitConfig?.delimiter || ""}
                 onChange={(e) => updateSplitConfig("delimiter", e.target.value)}
@@ -108,7 +108,7 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
               />
             </div>
             <div>
-              <Label className="text-xs text-gray-500">저장할 필드</Label>
+              <Label className="text-xs text-muted-foreground">저장할 필드</Label>
               <Select
                 value={action.splitConfig?.targetField || ""}
                 onValueChange={(value) => updateSplitConfig("targetField", value)}
diff --git a/frontend/components/dataflow/connection/ColumnTableSection.tsx b/frontend/components/dataflow/connection/ColumnTableSection.tsx
index 631403b0..1057f19a 100644
--- a/frontend/components/dataflow/connection/ColumnTableSection.tsx
+++ b/frontend/components/dataflow/connection/ColumnTableSection.tsx
@@ -101,14 +101,14 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
   return (
     <div className="flex-1">
       {/* 헤더 */}
-      <div className="rounded-t-lg bg-gray-600 px-4 py-3 text-white">
+      <div className="rounded-t-lg bg-foreground/80 px-4 py-3 text-white">
         <h3 className="text-sm font-semibold">
           {isFromTable ? "From" : "To"}: {tableName} ({columns.length}/{columns.length})
         </h3>
       </div>
 
       {/* 검색 및 필터 */}
-      <div className="border-r border-l border-gray-200 bg-gray-50 p-3">
+      <div className="border-r border-l border-border bg-muted p-3">
         <div className="flex flex-col gap-3">
           <Input
             placeholder="컬럼명 검색..."
@@ -140,7 +140,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                   if (showUnmappedOnly) onShowUnmappedOnlyChange(false);
                 }}
                 className={`rounded px-2 py-1 text-xs transition-colors hover:cursor-pointer ${
-                  showMappedOnly ? "bg-gray-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                  showMappedOnly ? "bg-foreground/80 text-white" : "bg-muted/80 text-foreground hover:bg-muted/60"
                 }`}
               >
                 설정됨
@@ -151,7 +151,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                   if (showMappedOnly) onShowMappedOnlyChange(false);
                 }}
                 className={`rounded px-2 py-1 text-xs transition-colors hover:cursor-pointer ${
-                  showUnmappedOnly ? "bg-gray-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                  showUnmappedOnly ? "bg-foreground/80 text-white" : "bg-muted/80 text-foreground hover:bg-muted/60"
                 }`}
               >
                 미설정
@@ -162,7 +162,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
       </div>
 
       {/* 컬럼 리스트 */}
-      <div className="h-96 overflow-y-auto border-r border-l border-gray-200">
+      <div className="h-96 overflow-y-auto border-r border-l border-border">
         {filteredColumns.map((column) => {
           const isSelected = selectedColumn === column.columnName;
           const isClickable = isColumnClickable(column);
@@ -184,16 +184,16 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
               <div
                 key={column.columnName}
                 onClick={isClickable ? () => onColumnClick(column.columnName) : undefined}
-                className={`border-b border-gray-200 px-3 py-2 text-xs transition-colors ${
+                className={`border-b border-border px-3 py-2 text-xs transition-colors ${
                   isSelected
-                    ? "bg-gray-200 text-gray-800"
+                    ? "bg-muted/80 text-foreground"
                     : isMapped
-                      ? "bg-gray-100 text-gray-700"
+                      ? "bg-muted text-foreground"
                       : oppositeSelectedColumn && !isTypeCompatible
-                        ? "cursor-not-allowed bg-destructive/10 text-red-400 opacity-60"
+                        ? "cursor-not-allowed bg-destructive/10 text-destructive/80 opacity-60"
                         : isClickable
-                          ? "cursor-pointer hover:bg-gray-50"
-                          : "cursor-not-allowed bg-gray-100 text-gray-400"
+                          ? "cursor-pointer hover:bg-muted"
+                          : "cursor-not-allowed bg-muted text-muted-foreground/70"
                 }`}
               >
                 <div className="flex items-start justify-between gap-2">
@@ -204,24 +204,24 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                           ? column.displayName
                           : column.columnName}
                       </span>
-                      {isSelected && <span className="flex-shrink-0 text-blue-500">●</span>}
-                      {isMapped && <span className="flex-shrink-0 text-green-500">✓</span>}
+                      {isSelected && <span className="flex-shrink-0 text-primary">●</span>}
+                      {isMapped && <span className="flex-shrink-0 text-emerald-500">✓</span>}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="flex-shrink-0 text-red-500" title="데이터 타입이 호환되지 않음">
+                        <span className="flex-shrink-0 text-destructive" title="데이터 타입이 호환되지 않음">
                           ⚠
                         </span>
                       )}
                     </div>
                     <div
-                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-red-400" : "text-gray-500"}`}
+                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-destructive/80" : "text-muted-foreground"}`}
                     >
                       {column.dataType}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="ml-1 text-red-400">(호환 불가)</span>
+                        <span className="ml-1 text-destructive/80">(호환 불가)</span>
                       )}
                     </div>
                     {isMapped && mappedToColumn && (
-                      <div className="mt-1 truncate text-xs text-green-600">→ {mappedToColumn}</div>
+                      <div className="mt-1 truncate text-xs text-emerald-600">→ {mappedToColumn}</div>
                     )}
                   </div>
                 </div>
@@ -242,13 +242,13 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
             return (
               <div
                 key={column.columnName}
-                className={`border-b border-gray-200 transition-colors ${
+                className={`border-b border-border transition-colors ${
                   isSelected
-                    ? "bg-gray-200"
+                    ? "bg-muted/80"
                     : isMapped
-                      ? "bg-gray-100"
+                      ? "bg-muted"
                       : hasDefaultValue
-                        ? "bg-gray-100"
+                        ? "bg-muted"
                         : oppositeSelectedColumn && !isTypeCompatible
                           ? "bg-destructive/10 opacity-60"
                           : "bg-white"
@@ -259,7 +259,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                   onClick={isClickable && isTypeCompatible ? () => onColumnClick(column.columnName) : undefined}
                   className={`px-3 py-2 text-xs ${
                     isClickable && isTypeCompatible
-                      ? "cursor-pointer hover:bg-gray-50"
+                      ? "cursor-pointer hover:bg-muted"
                       : oppositeSelectedColumn && !isTypeCompatible
                         ? "cursor-not-allowed"
                         : hasDefaultValue
@@ -274,19 +274,19 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                           ? column.displayName
                           : column.columnName}
                       </span>
-                      {isSelected && <span className="flex-shrink-0 text-green-500">●</span>}
+                      {isSelected && <span className="flex-shrink-0 text-emerald-500">●</span>}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="flex-shrink-0 text-red-500" title="데이터 타입이 호환되지 않음">
+                        <span className="flex-shrink-0 text-destructive" title="데이터 타입이 호환되지 않음">
                           ⚠
                         </span>
                       )}
                     </div>
                     <div
-                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-red-400" : "text-gray-500"}`}
+                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-destructive/80" : "text-muted-foreground"}`}
                     >
                       {column.dataType}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="ml-1 text-red-400">(호환 불가)</span>
+                        <span className="ml-1 text-destructive/80">(호환 불가)</span>
                       )}
                     </div>
 
@@ -298,7 +298,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                             e.stopPropagation();
                             onRemoveMapping?.(column.columnName);
                           }}
-                          className="flex-shrink-0 text-red-500 hover:text-red-700"
+                          className="flex-shrink-0 text-destructive hover:text-destructive"
                           title="매핑 제거"
                         >
                           ✕
@@ -312,7 +312,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                           column={column}
                           value={mapping?.defaultValue || ""}
                           onChange={(value) => onDefaultValueChange(column.columnName, value)}
-                          className="h-6 border-gray-200 text-xs focus:border-green-400 focus:ring-0"
+                          className="h-6 border-border text-xs focus:border-green-400 focus:ring-0"
                           placeholder="기본값 입력..."
                           tableName={tableName}
                         />
@@ -327,7 +327,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
       </div>
 
       {/* 하단 통계 */}
-      <div className="rounded-b-lg border border-gray-200 bg-gray-50 p-3 text-xs text-muted-foreground">
+      <div className="rounded-b-lg border border-border bg-muted p-3 text-xs text-muted-foreground">
         <div className="flex items-center justify-between">
           <span>
             {isFromTable ? "매핑됨" : "설정됨"}: {mappedCount}/{columns.length}
diff --git a/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx b/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx
index 9148a035..9ace97ee 100644
--- a/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx
+++ b/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx
@@ -179,23 +179,23 @@ export const ConnectionSelectionPanel: React.FC<ConnectionSelectionPanelProps> =
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <div className="h-4 w-4 animate-pulse rounded bg-gray-300" />
-                <div className="h-4 w-32 animate-pulse rounded bg-gray-300" />
+                <div className="h-4 w-4 animate-pulse rounded bg-muted/60" />
+                <div className="h-4 w-32 animate-pulse rounded bg-muted/60" />
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="h-10 w-full animate-pulse rounded bg-gray-200" />
+              <div className="h-10 w-full animate-pulse rounded bg-muted/80" />
             </CardContent>
           </Card>
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <div className="h-4 w-4 animate-pulse rounded bg-gray-300" />
-                <div className="h-4 w-32 animate-pulse rounded bg-gray-300" />
+                <div className="h-4 w-4 animate-pulse rounded bg-muted/60" />
+                <div className="h-4 w-32 animate-pulse rounded bg-muted/60" />
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="h-10 w-full animate-pulse rounded bg-gray-200" />
+              <div className="h-10 w-full animate-pulse rounded bg-muted/80" />
             </CardContent>
           </Card>
         </div>
diff --git a/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
index b4218bde..dede9fc7 100644
--- a/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
+++ b/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
@@ -19,11 +19,11 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
           className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
             config.connectionType === "simple-key"
               ? "border-primary bg-accent"
-              : "border-gray-200 hover:border-gray-300"
+              : "border-border hover:border-input"
           }`}
           onClick={() => onConfigChange({ ...config, connectionType: "simple-key" })}
         >
-          <Key className="mx-auto h-6 w-6 text-blue-500" />
+          <Key className="mx-auto h-6 w-6 text-primary" />
           <div className="mt-1 text-xs font-medium">단순 키값 연결</div>
           <div className="text-xs text-muted-foreground">중계 테이블 생성</div>
         </div>
@@ -31,12 +31,12 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
         <div
           className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
             config.connectionType === "data-save"
-              ? "border-green-500 bg-green-50"
-              : "border-gray-200 hover:border-gray-300"
+              ? "border-emerald-500 bg-emerald-50"
+              : "border-border hover:border-input"
           }`}
           onClick={() => onConfigChange({ ...config, connectionType: "data-save" })}
         >
-          <Save className="mx-auto h-6 w-6 text-green-500" />
+          <Save className="mx-auto h-6 w-6 text-emerald-500" />
           <div className="mt-1 text-xs font-medium">데이터 저장</div>
           <div className="text-xs text-muted-foreground">필드 매핑 저장</div>
         </div>
@@ -44,15 +44,15 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
         <div
           className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
             config.connectionType === "external-call"
-              ? "border-orange-500 bg-orange-50"
-              : "border-gray-200 hover:border-gray-300"
+              ? "border-orange-500 bg-amber-50"
+              : "border-border hover:border-input"
           }`}
           onClick={() => {
             console.log("🔄 [ConnectionTypeSelector] External call selected");
             onConfigChange({ ...config, connectionType: "external-call" });
           }}
         >
-          <Globe className="mx-auto h-6 w-6 text-orange-500" />
+          <Globe className="mx-auto h-6 w-6 text-amber-500" />
           <div className="mt-1 text-xs font-medium">외부 호출</div>
           <div className="text-xs text-muted-foreground">API/이메일 호출</div>
         </div>
diff --git a/frontend/components/dataflow/connection/ExternalCallSettings.tsx b/frontend/components/dataflow/connection/ExternalCallSettings.tsx
index b109a645..88acf153 100644
--- a/frontend/components/dataflow/connection/ExternalCallSettings.tsx
+++ b/frontend/components/dataflow/connection/ExternalCallSettings.tsx
@@ -123,10 +123,10 @@ const handleTestExternalCall = async (settings: ExternalCallSettingsType) => {
 
 export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ settings, onSettingsChange }) => {
   return (
-    <div className="rounded-lg border border-l-4 border-l-orange-500 bg-orange-50/30 p-4">
+    <div className="rounded-lg border border-l-4 border-l-orange-500 bg-amber-50/30 p-4">
       <div className="mb-3 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Globe className="h-4 w-4 text-orange-500" />
+          <Globe className="h-4 w-4 text-amber-500" />
           <span className="text-sm font-medium">외부 호출 설정</span>
         </div>
         <Button
@@ -234,7 +234,7 @@ export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ sett
               <>
                 <div>
                   <Label htmlFor="kakaoAccessToken" className="text-sm">
-                    카카오 액세스 토큰 <span className="text-red-500">*</span>
+                    카카오 액세스 토큰 <span className="text-destructive">*</span>
                   </Label>
                   <Input
                     id="kakaoAccessToken"
@@ -266,7 +266,7 @@ export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ sett
               <>
                 <div>
                   <Label htmlFor="discordWebhookUrl" className="text-sm">
-                    디스코드 웹훅 URL <span className="text-red-500">*</span>
+                    디스코드 웹훅 URL <span className="text-destructive">*</span>
                   </Label>
                   <Input
                     id="discordWebhookUrl"
diff --git a/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx b/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
index b5b33362..bd756de0 100644
--- a/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
+++ b/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
@@ -330,7 +330,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
   return (
     <div className="mt-4">
       {/* 헤더 섹션 */}
-      <p className="mb-4 text-sm leading-relaxed text-gray-700">
+      <p className="mb-4 text-sm leading-relaxed text-foreground">
         양쪽 테이블의 컬럼을 클릭하여 매핑하거나, 대상 컬럼에 기본값을 입력하세요. 같은 데이터 타입의 컬럼만 매핑
         가능합니다. 하나의 FROM 컬럼은 하나의 TO 컬럼에만 매핑 가능합니다.
       </p>
@@ -382,7 +382,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
       {/* 빠른 필터 액션 */}
       <Card className="mt-6 border-none py-2 shadow-none">
         <CardContent className="flex flex-wrap gap-2 p-3">
-          <span className="self-center text-sm font-medium text-gray-700">빠른 필터:</span>
+          <span className="self-center text-sm font-medium text-foreground">빠른 필터:</span>
           <Button
             variant="secondary"
             size="sm"
@@ -410,7 +410,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               setToShowMappedOnly(false);
               setToShowUnmappedOnly(true);
             }}
-            className="h-7 bg-orange-100 text-xs text-orange-700 hover:bg-orange-200"
+            className="h-7 bg-amber-100 text-xs text-orange-700 hover:bg-orange-200"
           >
             미매핑만 보기
           </Button>
@@ -424,7 +424,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               setToShowMappedOnly(true);
               setToShowUnmappedOnly(false);
             }}
-            className="h-7 bg-green-100 text-xs text-green-700 hover:bg-green-200"
+            className="h-7 bg-emerald-100 text-xs text-emerald-700 hover:bg-emerald-200"
           >
             매핑됨만 보기
           </Button>
@@ -440,12 +440,12 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
       </Card>
 
       {/* 매핑 통계 */}
-      <Card className="mt-4 bg-gradient-to-r from-gray-50 to-gray-100 py-2">
+      <Card className="mt-4 bg-gradient-to-r from-muted to-muted py-2">
         <CardContent className="p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               <div>
-                <div className="font-semibold text-gray-800">매핑 진행 상황</div>
+                <div className="font-semibold text-foreground">매핑 진행 상황</div>
                 <div className="text-sm text-muted-foreground">
                   총 {toTableColumns.length}개 컬럼 중{" "}
                   <span className="font-bold text-primary">
@@ -457,7 +457,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               </div>
             </div>
             <div className="text-right">
-              <div className="text-2xl font-bold text-gray-800">
+              <div className="text-2xl font-bold text-foreground">
                 {Math.round(
                   (columnMappings.filter((m) => m.fromColumnName || (m.defaultValue && m.defaultValue.trim())).length /
                     actualToColumns.length) *
@@ -465,7 +465,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
                 )}
                 %
               </div>
-              <div className="text-xs text-gray-500">완료율</div>
+              <div className="text-xs text-muted-foreground">완료율</div>
             </div>
           </div>
           <div className="mt-3">
diff --git a/frontend/components/dataflow/connection/SimpleKeySettings.tsx b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
index 018fbb06..d22a58bf 100644
--- a/frontend/components/dataflow/connection/SimpleKeySettings.tsx
+++ b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
@@ -38,7 +38,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
   return (
     <div className="space-y-4">
       {/* 테이블 및 컬럼 선택 */}
-      <div className="rounded-lg border bg-gray-50 p-4">
+      <div className="rounded-lg border bg-muted p-4">
         <div className="mb-4 text-sm font-medium">테이블 및 컬럼 선택</div>
 
         {/* 현재 선택된 테이블 표시 */}
@@ -46,20 +46,20 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
           <div>
             <Label className="text-xs font-medium text-muted-foreground">From 테이블</Label>
             <div className="mt-1">
-              <span className="text-sm font-medium text-gray-800">
+              <span className="text-sm font-medium text-foreground">
                 {availableTables.find((t) => t.tableName === selectedFromTable)?.displayName || selectedFromTable}
               </span>
-              <span className="ml-2 text-xs text-gray-500">({selectedFromTable})</span>
+              <span className="ml-2 text-xs text-muted-foreground">({selectedFromTable})</span>
             </div>
           </div>
 
           <div>
             <Label className="text-xs font-medium text-muted-foreground">To 테이블</Label>
             <div className="mt-1">
-              <span className="text-sm font-medium text-gray-800">
+              <span className="text-sm font-medium text-foreground">
                 {availableTables.find((t) => t.tableName === selectedToTable)?.displayName || selectedToTable}
               </span>
-              <span className="ml-2 text-xs text-gray-500">({selectedToTable})</span>
+              <span className="ml-2 text-xs text-muted-foreground">({selectedToTable})</span>
             </div>
           </div>
         </div>
@@ -88,11 +88,11 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                       ? column.displayName
                       : column.columnName}
                   </span>
-                  <span className="text-xs text-gray-500">({column.dataType})</span>
+                  <span className="text-xs text-muted-foreground">({column.dataType})</span>
                 </label>
               ))}
               {fromTableColumns.length === 0 && (
-                <div className="py-2 text-xs text-gray-500">
+                <div className="py-2 text-xs text-muted-foreground">
                   {selectedFromTable ? "컬럼을 불러오는 중..." : "테이블을 먼저 선택해주세요"}
                 </div>
               )}
@@ -121,11 +121,11 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                       ? column.displayName
                       : column.columnName}
                   </span>
-                  <span className="text-xs text-gray-500">({column.dataType})</span>
+                  <span className="text-xs text-muted-foreground">({column.dataType})</span>
                 </label>
               ))}
               {toTableColumns.length === 0 && (
-                <div className="py-2 text-xs text-gray-500">
+                <div className="py-2 text-xs text-muted-foreground">
                   {selectedToTable ? "컬럼을 불러오는 중..." : "테이블을 먼저 선택해주세요"}
                 </div>
               )}
@@ -150,7 +150,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                     );
                   })
                 ) : (
-                  <span className="text-xs text-gray-400">선택된 컬럼 없음</span>
+                  <span className="text-xs text-muted-foreground/70">선택된 컬럼 없음</span>
                 )}
               </div>
             </div>
@@ -169,7 +169,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                     );
                   })
                 ) : (
-                  <span className="text-xs text-gray-400">선택된 컬럼 없음</span>
+                  <span className="text-xs text-muted-foreground/70">선택된 컬럼 없음</span>
                 )}
               </div>
             </div>
@@ -180,7 +180,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
       {/* 단순 키값 연결 설정 */}
       <div className="rounded-lg border border-l-4 border-l-blue-500 bg-accent/30 p-4">
         <div className="mb-3 flex items-center gap-2">
-          <Key className="h-4 w-4 text-blue-500" />
+          <Key className="h-4 w-4 text-primary" />
           <span className="text-sm font-medium">단순 키값 연결 설정</span>
         </div>
         <div className="space-y-3">
diff --git a/frontend/components/dataflow/connection/TableSelectionPanel.tsx b/frontend/components/dataflow/connection/TableSelectionPanel.tsx
index 40d0ee4b..e67ed064 100644
--- a/frontend/components/dataflow/connection/TableSelectionPanel.tsx
+++ b/frontend/components/dataflow/connection/TableSelectionPanel.tsx
@@ -187,14 +187,14 @@ export const TableSelectionPanel: React.FC<TableSelectionPanelProps> = ({
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
-          <div className="h-4 w-4 animate-pulse rounded bg-gray-300" />
+          <div className="h-4 w-4 animate-pulse rounded bg-muted/60" />
           {title}
         </CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-2">
-          <div className="h-9 w-full animate-pulse rounded bg-gray-200" />
-          <div className="h-10 w-full animate-pulse rounded bg-gray-200" />
+          <div className="h-9 w-full animate-pulse rounded bg-muted/80" />
+          <div className="h-10 w-full animate-pulse rounded bg-muted/80" />
         </div>
       </CardContent>
     </Card>
@@ -357,7 +357,7 @@ export const TableSelectionPanel: React.FC<TableSelectionPanelProps> = ({
               })()}
             </Badge>
             {selectedFromTable === selectedToTable && (
-              <Badge variant="outline" className="text-orange-600">
+              <Badge variant="outline" className="text-amber-600">
                 자기 자신
               </Badge>
             )}
diff --git a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
index cec7c238..2deeb78e 100644
--- a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
+++ b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
@@ -32,9 +32,9 @@ export const DataConnectionDesigner: React.FC = () => {
   const { isMobile, isTablet } = useResponsive();
 
   return (
-    <div className="h-screen bg-gradient-to-br from-slate-50 to-gray-100">
-      <div className="bg-white border-b border-gray-200 px-6 py-4">
-        <h1 className="text-2xl font-bold text-gray-900">
+    <div className="h-screen bg-gradient-to-br from-slate-50 to-muted">
+      <div className="bg-white border-b border-border px-6 py-4">
+        <h1 className="text-2xl font-bold text-foreground">
           🎨 제어관리 - 데이터 연결 설정
         </h1>
         <p className="text-muted-foreground mt-1">
@@ -43,7 +43,7 @@ export const DataConnectionDesigner: React.FC = () => {
               </div>
 
       <div className="flex h-[calc(100vh-80px)]">
-        <div className="w-[30%] bg-white border-r border-gray-200 flex flex-col">
+        <div className="w-[30%] bg-white border-r border-border flex flex-col">
           <ConnectionTypeSelector
             connectionType={state.connectionType}
             onConnectionTypeChange={(type) => setState(prev => ({ ...prev, connectionType: type }))}
@@ -59,7 +59,7 @@ export const DataConnectionDesigner: React.FC = () => {
           </div>
         </div>
 
-        <div className="w-[70%] bg-gray-50 flex flex-col">
+        <div className="w-[70%] bg-muted flex flex-col">
           <StepProgress
             currentStep={state.currentStep}
             onStepChange={(step) => setState(prev => ({ ...prev, currentStep: step }))}
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx
index 18785aae..9d6839d8 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx
@@ -102,7 +102,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({ state, actions }) => {
         <div className="text-muted-foreground border-t pt-2 text-center text-xs">
           {state.fieldMappings.length}개 매핑 설정됨
           {state.validationErrors.length > 0 && (
-            <span className="ml-1 text-orange-600">({state.validationErrors.length}개 오류)</span>
+            <span className="ml-1 text-amber-600">({state.validationErrors.length}개 오류)</span>
           )}
         </div>
       )}
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx
index 8628135e..9ac4d1de 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx
@@ -44,9 +44,9 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
           <Settings className="h-4 w-4" />
           액션 설정
           {isConfigured ? (
-            <CheckCircle className="h-4 w-4 text-green-600" />
+            <CheckCircle className="h-4 w-4 text-emerald-600" />
           ) : (
-            <AlertCircle className="h-4 w-4 text-orange-500" />
+            <AlertCircle className="h-4 w-4 text-amber-500" />
           )}
         </CardTitle>
       </CardHeader>
@@ -79,15 +79,15 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
             </div>
 
             {actionConditions.length === 0 && (
-              <p className="text-xs text-orange-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
+              <p className="text-xs text-amber-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
             )}
           </div>
         )}
 
         {/* INSERT 액션 안내 */}
         {actionType === "insert" && (
-          <div className="rounded-md border border-green-200 bg-green-50 p-2">
-            <p className="text-xs text-green-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
+          <div className="rounded-md border border-emerald-200 bg-emerald-50 p-2">
+            <p className="text-xs text-emerald-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
           </div>
         )}
 
@@ -96,13 +96,13 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
           <div className="flex items-center gap-2">
             {isConfigured ? (
               <>
-                <CheckCircle className="h-3 w-3 text-green-600" />
-                <span className="text-xs font-medium text-green-600">설정 완료</span>
+                <CheckCircle className="h-3 w-3 text-emerald-600" />
+                <span className="text-xs font-medium text-emerald-600">설정 완료</span>
               </>
             ) : (
               <>
-                <AlertCircle className="h-3 w-3 text-orange-500" />
-                <span className="text-xs font-medium text-orange-600">설정 필요</span>
+                <AlertCircle className="h-3 w-3 text-amber-500" />
+                <span className="text-xs font-medium text-amber-600">설정 필요</span>
               </>
             )}
           </div>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
index fa2cc2ad..d2cb12ab 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
@@ -54,7 +54,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                   <h4 className="text-xs font-medium text-muted-foreground">🔄 트랜잭션 설정</h4>
                   <div className="grid grid-cols-3 gap-2">
                     <div>
-                      <Label htmlFor="batchSize" className="text-xs text-gray-500">
+                      <Label htmlFor="batchSize" className="text-xs text-muted-foreground">
                         배치
                       </Label>
                       <Input
@@ -66,7 +66,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                       />
                     </div>
                     <div>
-                      <Label htmlFor="timeout" className="text-xs text-gray-500">
+                      <Label htmlFor="timeout" className="text-xs text-muted-foreground">
                         타임아웃
                       </Label>
                       <Input
@@ -78,7 +78,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                       />
                     </div>
                     <div>
-                      <Label htmlFor="retryCount" className="text-xs text-gray-500">
+                      <Label htmlFor="retryCount" className="text-xs text-muted-foreground">
                         재시도
                       </Label>
                       <Input
@@ -101,7 +101,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                   <h4 className="text-xs font-medium text-muted-foreground">🌐 API 호출 설정</h4>
                   <div className="grid grid-cols-2 gap-2">
                     <div>
-                      <Label htmlFor="timeout" className="text-xs text-gray-500">
+                      <Label htmlFor="timeout" className="text-xs text-muted-foreground">
                         타임아웃 (초)
                       </Label>
                       <Input
@@ -113,7 +113,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                       />
                     </div>
                     <div>
-                      <Label htmlFor="retryCount" className="text-xs text-gray-500">
+                      <Label htmlFor="retryCount" className="text-xs text-muted-foreground">
                         재시도 횟수
                       </Label>
                       <Input
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
index 8c704beb..6e97ec22 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
@@ -29,8 +29,8 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
   onConnectionTypeChange,
 }) => {
   return (
-    <div className="p-6 border-b border-gray-200">
-      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+    <div className="p-6 border-b border-border">
+      <h2 className="text-lg font-semibold text-foreground mb-4">
         연결 타입 선택
       </h2>
       
@@ -40,21 +40,21 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
             key={type.id}
             className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
               connectionType === type.id
-                ? "border-orange-500 bg-orange-50 shadow-md"
-                : "border-gray-200 bg-white hover:border-orange-300 hover:bg-orange-25"
+                ? "border-orange-500 bg-amber-50 shadow-md"
+                : "border-border bg-white hover:border-orange-300 hover:bg-orange-25"
             }`}
             onClick={() => onConnectionTypeChange(type.id)}
           >
             <div className="flex items-center gap-3">
               <div className={`p-2 rounded-lg ${
                 connectionType === type.id
-                  ? "bg-orange-100 text-orange-600"
-                  : "bg-gray-100 text-muted-foreground"
+                  ? "bg-amber-100 text-amber-600"
+                  : "bg-muted text-muted-foreground"
               }`}>
                 {type.icon}
               </div>
               <div>
-                <h3 className="font-medium text-gray-900">{type.label}</h3>
+                <h3 className="font-medium text-foreground">{type.label}</h3>
                 <p className="text-sm text-muted-foreground">{type.description}</p>
               </div>
             </div>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
index be62206b..fb637aba 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
@@ -89,7 +89,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
             <>
               <Separator />
               <div className="rounded-md bg-accent p-3">
-                <h3 className="mb-1 text-sm font-medium text-blue-800">외부 호출 모드</h3>
+                <h3 className="mb-1 text-sm font-medium text-primary">외부 호출 모드</h3>
                 <p className="text-xs text-primary">우측 패널에서 REST API 설정을 구성하세요.</p>
               </div>
             </>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx
index 8a8cf831..916d3762 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx
@@ -73,12 +73,12 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
                       </h4>
                       <div className="mt-1 flex items-center gap-2">
                         {mapping.isValid ? (
-                          <Badge variant="outline" className="text-xs text-green-600">
+                          <Badge variant="outline" className="text-xs text-emerald-600">
                             <CheckCircle className="mr-1 h-3 w-3" />
                             {mapping.fromField?.webType || "Unknown"} → {mapping.toField?.webType || "Unknown"}
                           </Badge>
                         ) : (
-                          <Badge variant="outline" className="text-xs text-orange-600">
+                          <Badge variant="outline" className="text-xs text-amber-600">
                             <AlertTriangle className="mr-1 h-3 w-3" />
                             타입 불일치
                           </Badge>
@@ -119,7 +119,7 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
 
                   {/* 검증 메시지 */}
                   {mapping.validationMessage && (
-                    <div className="mt-1 text-xs text-orange-600">{mapping.validationMessage}</div>
+                    <div className="mt-1 text-xs text-amber-600">{mapping.validationMessage}</div>
                   )}
                 </div>
               ));
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
index 0618bcc6..455eea3e 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
@@ -19,16 +19,16 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
 }) => {
   return (
     <div className="p-6">
-      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+      <h2 className="text-lg font-semibold text-foreground mb-4">
         매핑 정보
       </h2>
 
       {/* 통계 카드 */}
       <div className="grid grid-cols-2 gap-3 mb-6">
-        <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+        <div className="bg-emerald-50 p-3 rounded-lg border border-emerald-200">
           <div className="flex items-center gap-2">
-            <CheckCircle className="w-4 h-4 text-green-600" />
-            <span className="text-sm font-medium text-green-800">유효한 매핑</span>
+            <CheckCircle className="w-4 h-4 text-emerald-600" />
+            <span className="text-sm font-medium text-emerald-800">유효한 매핑</span>
           </div>
           <div className="text-2xl font-bold text-green-900 mt-1">
             {mappingStats.validMappings}
@@ -48,16 +48,16 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
         <div className="bg-accent p-3 rounded-lg border border-primary/20">
           <div className="flex items-center gap-2">
             <Database className="w-4 h-4 text-primary" />
-            <span className="text-sm font-medium text-blue-800">총 매핑</span>
+            <span className="text-sm font-medium text-primary">총 매핑</span>
           </div>
-          <div className="text-2xl font-bold text-blue-900 mt-1">
+          <div className="text-2xl font-bold text-primary mt-1">
             {mappingStats.totalMappings}
           </div>
         </div>
 
-        <div className="bg-yellow-50 p-3 rounded-lg border border-yellow-200">
+        <div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
           <div className="flex items-center gap-2">
-            <AlertCircle className="w-4 h-4 text-yellow-600" />
+            <AlertCircle className="w-4 h-4 text-amber-600" />
             <span className="text-sm font-medium text-yellow-800">누락 필드</span>
           </div>
           <div className="text-2xl font-bold text-yellow-900 mt-1">
@@ -68,12 +68,12 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
 
       {/* 매핑 목록 */}
       <div className="space-y-2">
-        <h3 className="text-sm font-medium text-gray-700 mb-2">
+        <h3 className="text-sm font-medium text-foreground mb-2">
           필드 매핑 목록
         </h3>
         
         {fieldMappings.length === 0 ? (
-          <div className="text-center py-8 text-gray-500">
+          <div className="text-center py-8 text-muted-foreground">
             <Database className="w-8 h-8 mx-auto mb-2 opacity-50" />
             <p className="text-sm">아직 매핑이 없습니다</p>
             <p className="text-xs">3단계에서 필드를 매핑하세요</p>
@@ -85,37 +85,37 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
                 key={mapping.id}
                 className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
                   selectedMapping === mapping.id
-                    ? "border-orange-500 bg-orange-50"
+                    ? "border-orange-500 bg-amber-50"
                     : mapping.isValid
-                    ? "border-green-200 bg-green-50 hover:border-green-300"
-                    : "border-destructive/20 bg-destructive/10 hover:border-red-300"
+                    ? "border-emerald-200 bg-emerald-50 hover:border-green-300"
+                    : "border-destructive/20 bg-destructive/10 hover:border-destructive/30"
                 }`}
                 onClick={() => onMappingSelect(mapping.id)}
               >
                 <div className="flex items-center justify-between">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium text-gray-900 truncate">
+                      <span className="text-sm font-medium text-foreground truncate">
                         {mapping.fromField.name}
                       </span>
-                      <span className="text-gray-400">→</span>
-                      <span className="text-sm font-medium text-gray-900 truncate">
+                      <span className="text-muted-foreground/70">→</span>
+                      <span className="text-sm font-medium text-foreground truncate">
                         {mapping.toField.name}
                       </span>
                     </div>
                     <div className="flex items-center gap-2 mt-1">
                       <span className={`text-xs px-2 py-1 rounded ${
                         mapping.fromField.type === mapping.toField.type
-                          ? "bg-green-100 text-green-800"
-                          : "bg-yellow-100 text-yellow-800"
+                          ? "bg-emerald-100 text-emerald-800"
+                          : "bg-amber-100 text-yellow-800"
                       }`}>
                         {mapping.fromField.type}
                       </span>
-                      <span className="text-gray-400">→</span>
+                      <span className="text-muted-foreground/70">→</span>
                       <span className={`text-xs px-2 py-1 rounded ${
                         mapping.fromField.type === mapping.toField.type
-                          ? "bg-green-100 text-green-800"
-                          : "bg-yellow-100 text-yellow-800"
+                          ? "bg-emerald-100 text-emerald-800"
+                          : "bg-amber-100 text-yellow-800"
                       }`}>
                         {mapping.toField.type}
                       </span>
@@ -124,7 +124,7 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
                   
                   <div className="ml-2">
                     {mapping.isValid ? (
-                      <CheckCircle className="w-4 h-4 text-green-600" />
+                      <CheckCircle className="w-4 h-4 text-emerald-600" />
                     ) : (
                       <XCircle className="w-4 h-4 text-destructive" />
                     )}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
index 7b13e38c..be08029e 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
@@ -293,7 +293,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                   .map((column) => (
                     <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                       <div className="flex items-center gap-2">
-                        <span className="text-green-600">📥</span>
+                        <span className="text-emerald-600">📥</span>
                         <span>{column.displayName || column.columnName}</span>
                         <Badge variant="outline" className="text-xs">
                           {column.webType || column.dataType}
@@ -419,7 +419,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
 
           {/* 선택된 숫자 타입에 대한 설명 */}
           {mapping.value?.startsWith("#") && mapping.value !== "#custom" && (
-            <div className="text-muted-foreground rounded bg-green-50 p-2 text-xs">
+            <div className="text-muted-foreground rounded bg-emerald-50 p-2 text-xs">
               {mapping.value === "#AUTO_INCREMENT" && "🔢 데이터베이스에서 자동으로 증가하는 값이 할당됩니다"}
               {mapping.value === "#RANDOM_INT" && "🎲 1부터 1000 사이의 랜덤한 정수가 생성됩니다"}
               {mapping.value === "#ZERO" && "0️⃣ 0 값이 저장됩니다"}
@@ -514,7 +514,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                             .map((column) => (
                               <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                                 <div className="flex items-center gap-2">
-                                  <span className="text-green-600">📥</span>
+                                  <span className="text-emerald-600">📥</span>
                                   <span>{column.displayName || column.columnName}</span>
                                 </div>
                               </SelectItem>
@@ -642,7 +642,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                                       .map((column) => (
                                         <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                                           <div className="flex items-center gap-2">
-                                            <span className="text-green-600">📥</span>
+                                            <span className="text-emerald-600">📥</span>
                                             <span>{column.displayName || column.columnName}</span>
                                           </div>
                                         </SelectItem>
@@ -698,9 +698,9 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
           <CardContent className="space-y-3">
             {/* 매핑되지 않은 필드가 없는 경우 */}
             {getUnmappedToColumns().length === 0 ? (
-              <div className="rounded-lg border bg-green-50 p-4 text-center">
-                <div className="mb-2 text-green-600">✅ 모든 필드가 매핑되었습니다</div>
-                <p className="text-sm text-green-700">
+              <div className="rounded-lg border bg-emerald-50 p-4 text-center">
+                <div className="mb-2 text-emerald-600">✅ 모든 필드가 매핑되었습니다</div>
+                <p className="text-sm text-emerald-700">
                   컬럼 매핑으로 모든 TO 테이블 필드가 처리되고 있어 별도의 기본값 설정이 필요하지 않습니다.
                 </p>
               </div>
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
index 11b59d15..cbe268f2 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
@@ -77,7 +77,7 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
   return (
     <div className="space-y-8">
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+        <h2 className="text-2xl font-bold text-foreground mb-2">
           연결 선택
         </h2>
         <p className="text-muted-foreground">
@@ -92,8 +92,8 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
             <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
               <span className="text-primary font-bold">1</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">FROM 연결</h3>
-            <span className="text-sm text-gray-500">(데이터 소스)</span>
+            <h3 className="text-lg font-semibold text-foreground">FROM 연결</h3>
+            <span className="text-sm text-muted-foreground">(데이터 소스)</span>
           </div>
           
           <div className="space-y-2">
@@ -103,16 +103,16 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedFrom === connection.id
                     ? "border-primary bg-accent shadow-md"
-                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
+                    : "border-border bg-white hover:border-primary/40 hover:bg-blue-25"
                 }`}
                 onClick={() => handleFromSelect(connection.id)}
               >
                 <div className="flex items-center gap-3">
                   <Database className="w-6 h-6 text-primary" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
+                    <h4 className="font-medium text-foreground">{connection.name}</h4>
                     <p className="text-sm text-muted-foreground">{connection.type}</p>
-                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
+                    <p className="text-xs text-muted-foreground">{connection.host}:{connection.port}</p>
                   </div>
                   {selectedFrom === connection.id && (
                     <CheckCircle className="w-5 h-5 text-primary" />
@@ -125,19 +125,19 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
 
         {/* 화살표 */}
         <div className="hidden lg:flex items-center justify-center">
-          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
-            <ArrowRight className="w-6 h-6 text-orange-600" />
+          <div className="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
+            <ArrowRight className="w-6 h-6 text-amber-600" />
           </div>
         </div>
 
         {/* TO 연결 */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-              <span className="text-green-600 font-bold">2</span>
+            <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
+              <span className="text-emerald-600 font-bold">2</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">TO 연결</h3>
-            <span className="text-sm text-gray-500">(데이터 대상)</span>
+            <h3 className="text-lg font-semibold text-foreground">TO 연결</h3>
+            <span className="text-sm text-muted-foreground">(데이터 대상)</span>
           </div>
           
           <div className="space-y-2">
@@ -146,20 +146,20 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
                 key={connection.id}
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedTo === connection.id
-                    ? "border-green-500 bg-green-50 shadow-md"
-                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
+                    ? "border-emerald-500 bg-emerald-50 shadow-md"
+                    : "border-border bg-white hover:border-green-300 hover:bg-green-25"
                 }`}
                 onClick={() => handleToSelect(connection.id)}
               >
                 <div className="flex items-center gap-3">
-                  <Database className="w-6 h-6 text-green-600" />
+                  <Database className="w-6 h-6 text-emerald-600" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
+                    <h4 className="font-medium text-foreground">{connection.name}</h4>
                     <p className="text-sm text-muted-foreground">{connection.type}</p>
-                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
+                    <p className="text-xs text-muted-foreground">{connection.host}:{connection.port}</p>
                   </div>
                   {selectedTo === connection.id && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                   )}
                 </div>
               </div>
@@ -175,8 +175,8 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
           disabled={!canProceed}
           className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
             canProceed
-              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
-              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+              ? "bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
+              : "bg-muted/60 text-muted-foreground cursor-not-allowed"
           }`}
         >
           다음 단계: 테이블 선택
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
index 9513d42d..95b0a316 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
@@ -68,7 +68,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
   return (
     <div className="space-y-8">
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+        <h2 className="text-2xl font-bold text-foreground mb-2">
           필드 매핑
         </h2>
         <p className="text-muted-foreground">
@@ -79,22 +79,22 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
       {/* 매핑 통계 */}
       <div className="grid grid-cols-4 gap-4">
         <div className="bg-accent p-4 rounded-lg border border-primary/20">
-          <div className="text-2xl font-bold text-blue-900">{fieldMappings.length}</div>
-          <div className="text-sm text-blue-700">총 매핑</div>
+          <div className="text-2xl font-bold text-primary">{fieldMappings.length}</div>
+          <div className="text-sm text-primary">총 매핑</div>
         </div>
-        <div className="bg-green-50 p-4 rounded-lg border border-green-200">
+        <div className="bg-emerald-50 p-4 rounded-lg border border-emerald-200">
           <div className="text-2xl font-bold text-green-900">
             {fieldMappings.filter(m => m.isValid).length}
           </div>
-          <div className="text-sm text-green-700">유효한 매핑</div>
+          <div className="text-sm text-emerald-700">유효한 매핑</div>
         </div>
         <div className="bg-destructive/10 p-4 rounded-lg border border-destructive/20">
           <div className="text-2xl font-bold text-red-900">
             {fieldMappings.filter(m => !m.isValid).length}
           </div>
-          <div className="text-sm text-red-700">오류 매핑</div>
+          <div className="text-sm text-destructive">오류 매핑</div>
         </div>
-        <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
+        <div className="bg-amber-50 p-4 rounded-lg border border-amber-200">
           <div className="text-2xl font-bold text-yellow-900">
             {(toTable?.columns.length || 0) - fieldMappings.length}
           </div>
@@ -106,7 +106,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
         {/* FROM 테이블 필드들 */}
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+          <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
             <div className="w-6 h-6 bg-primary/20 rounded-full flex items-center justify-center">
               <span className="text-primary font-bold text-sm">FROM</span>
             </div>
@@ -121,22 +121,22 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                 onDragStart={() => handleDragStart(field)}
                 className={`p-3 rounded-lg border-2 cursor-move transition-all duration-200 ${
                   isFieldMapped(field.name)
-                    ? "border-green-300 bg-green-50 opacity-60"
-                    : "border-primary/20 bg-accent hover:border-blue-400 hover:bg-primary/20"
+                    ? "border-green-300 bg-emerald-50 opacity-60"
+                    : "border-primary/20 bg-accent hover:border-primary/60 hover:bg-primary/20"
                 }`}
               >
                 <div className="flex items-center justify-between">
                   <div>
-                    <div className="font-medium text-gray-900">{field.name}</div>
+                    <div className="font-medium text-foreground">{field.name}</div>
                     <div className="text-sm text-muted-foreground">{field.type}</div>
                     {field.primaryKey && (
-                      <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                      <span className="text-xs bg-amber-100 text-yellow-800 px-2 py-1 rounded">
                         PK
                       </span>
                     )}
                   </div>
                   {isFieldMapped(field.name) && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                   )}
                 </div>
               </div>
@@ -146,9 +146,9 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
 
         {/* TO 테이블 필드들 */}
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-            <div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center">
-              <span className="text-green-600 font-bold text-sm">TO</span>
+          <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
+            <div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center">
+              <span className="text-emerald-600 font-bold text-sm">TO</span>
             </div>
             {toTable?.name} 필드들
           </h3>
@@ -163,21 +163,21 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                   onDrop={(e) => handleDrop(e, field)}
                   className={`p-3 rounded-lg border-2 transition-all duration-200 ${
                     mappedFromField
-                      ? "border-green-300 bg-green-50"
-                      : "border-gray-200 bg-gray-50 hover:border-green-300 hover:bg-green-25"
+                      ? "border-green-300 bg-emerald-50"
+                      : "border-border bg-muted hover:border-green-300 hover:bg-green-25"
                   }`}
                 >
                   <div className="flex items-center justify-between">
                     <div>
-                      <div className="font-medium text-gray-900">{field.name}</div>
+                      <div className="font-medium text-foreground">{field.name}</div>
                       <div className="text-sm text-muted-foreground">{field.type}</div>
                       {field.primaryKey && (
-                        <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                        <span className="text-xs bg-amber-100 text-yellow-800 px-2 py-1 rounded">
                           PK
                         </span>
                       )}
                       {mappedFromField && (
-                        <div className="text-xs text-green-700 mt-1">
+                        <div className="text-xs text-emerald-700 mt-1">
                           ← {mappedFromField.name} ({mappedFromField.type})
                         </div>
                       )}
@@ -186,7 +186,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                       {mappedFromField && (
                         <button
                           onClick={() => removeMapping(`${mappedFromField.name}-${field.name}`)}
-                          className="text-red-500 hover:text-red-700"
+                          className="text-destructive hover:text-destructive"
                         >
                           <XCircle className="w-4 h-4" />
                         </button>
@@ -194,7 +194,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                       {mappedFromField && (
                         <div>
                           {fieldMappings.find(m => m.toField.name === field.name)?.isValid ? (
-                            <CheckCircle className="w-5 h-5 text-green-600" />
+                            <CheckCircle className="w-5 h-5 text-emerald-600" />
                           ) : (
                             <AlertCircle className="w-5 h-5 text-destructive" />
                           )}
@@ -213,7 +213,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
       <div className="flex justify-between">
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-muted hover:bg-muted/80 transition-all duration-200"
         >
           <ArrowLeft className="w-4 h-4" />
           이전 단계
@@ -221,7 +221,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
         
         <button
           onClick={onSave}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg transition-all duration-200"
         >
           <Save className="w-4 h-4" />
           연결 설정 저장
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
index f81b48fe..dc1ab1d0 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
@@ -89,7 +89,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     value={state.relationshipName || ""}
                     onChange={(e) => actions.setRelationshipName(e.target.value)}
                     placeholder="외부호출 관계의 이름을 입력하세요"
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
                   />
                 </div>
                 <div>
@@ -99,7 +99,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     onChange={(e) => actions.setDescription(e.target.value)}
                     placeholder="외부호출의 용도나 설명을 입력하세요"
                     rows={2}
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
                   />
                 </div>
               </div>
@@ -135,7 +135,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
               <div className="flex gap-3">
                 <Button
                   onClick={actions.saveMappings}
-                  className="w-full bg-blue-600 hover:bg-blue-700"
+                  className="w-full bg-primary hover:bg-primary/90"
                   disabled={state.isLoading}
                 >
                   {state.isLoading ? "저장 중..." : "저장"}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
index d4d2eea3..16db816e 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
@@ -19,7 +19,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
   onStepChange,
 }) => {
   return (
-    <div className="bg-white border-b border-gray-200 px-6 py-4">
+    <div className="bg-white border-b border-border px-6 py-4">
       <div className="flex items-center justify-between">
         {steps.map((step, index) => (
           <React.Fragment key={step.id}>
@@ -32,10 +32,10 @@ export const StepProgress: React.FC<StepProgressProps> = ({
               <div
                 className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-200 ${
                   step.id < currentStep
-                    ? "bg-green-500 text-white"
+                    ? "bg-emerald-500 text-white"
                     : step.id === currentStep
-                    ? "bg-orange-500 text-white"
-                    : "bg-gray-200 text-muted-foreground"
+                    ? "bg-amber-500 text-white"
+                    : "bg-muted/80 text-muted-foreground"
                 }`}
               >
                 {step.id < currentStep ? (
@@ -47,12 +47,12 @@ export const StepProgress: React.FC<StepProgressProps> = ({
               
               <div>
                 <h3 className={`text-sm font-medium ${
-                  step.id <= currentStep ? "text-gray-900" : "text-gray-500"
+                  step.id <= currentStep ? "text-foreground" : "text-muted-foreground"
                 }`}>
                   {step.title}
                 </h3>
                 <p className={`text-xs ${
-                  step.id <= currentStep ? "text-muted-foreground" : "text-gray-400"
+                  step.id <= currentStep ? "text-muted-foreground" : "text-muted-foreground/70"
                 }`}>
                   {step.description}
                 </p>
@@ -60,7 +60,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
             </div>
             
             {index < steps.length - 1 && (
-              <ArrowRight className="w-4 h-4 text-gray-400 mx-4" />
+              <ArrowRight className="w-4 h-4 text-muted-foreground/70 mx-4" />
             )}
           </React.Fragment>
         ))}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
index cb9bc04b..1ece6d1e 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
@@ -87,7 +87,7 @@ export const TableStep: React.FC<TableStepProps> = ({
   return (
     <div className="space-y-8">
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+        <h2 className="text-2xl font-bold text-foreground mb-2">
           테이블 선택
         </h2>
         <p className="text-muted-foreground">
@@ -96,14 +96,14 @@ export const TableStep: React.FC<TableStepProps> = ({
       </div>
 
       {/* 연결 정보 표시 */}
-      <div className="bg-gray-50 rounded-lg p-4">
+      <div className="bg-muted rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <Database className="w-5 h-5 text-primary" />
-            <span className="font-medium text-gray-900">{fromConnection?.name}</span>
-            <span className="text-sm text-gray-500">→</span>
-            <Database className="w-5 h-5 text-green-600" />
-            <span className="font-medium text-gray-900">{toConnection?.name}</span>
+            <span className="font-medium text-foreground">{fromConnection?.name}</span>
+            <span className="text-sm text-muted-foreground">→</span>
+            <Database className="w-5 h-5 text-emerald-600" />
+            <span className="font-medium text-foreground">{toConnection?.name}</span>
           </div>
         </div>
       </div>
@@ -115,8 +115,8 @@ export const TableStep: React.FC<TableStepProps> = ({
             <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
               <span className="text-primary font-bold">1</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">소스 테이블</h3>
-            <span className="text-sm text-gray-500">(FROM)</span>
+            <h3 className="text-lg font-semibold text-foreground">소스 테이블</h3>
+            <span className="text-sm text-muted-foreground">(FROM)</span>
           </div>
           
           <div className="space-y-2">
@@ -126,16 +126,16 @@ export const TableStep: React.FC<TableStepProps> = ({
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedFromTable === table.name
                     ? "border-primary bg-accent shadow-md"
-                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
+                    : "border-border bg-white hover:border-primary/40 hover:bg-blue-25"
                 }`}
                 onClick={() => handleFromTableSelect(table.name)}
               >
                 <div className="flex items-center gap-3">
                   <Table className="w-6 h-6 text-primary" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <h4 className="font-medium text-foreground">{table.name}</h4>
                     <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
-                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                    <p className="text-xs text-muted-foreground">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedFromTable === table.name && (
                     <CheckCircle className="w-5 h-5 text-primary" />
@@ -149,11 +149,11 @@ export const TableStep: React.FC<TableStepProps> = ({
         {/* TO 테이블 */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-              <span className="text-green-600 font-bold">2</span>
+            <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
+              <span className="text-emerald-600 font-bold">2</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">대상 테이블</h3>
-            <span className="text-sm text-gray-500">(TO)</span>
+            <h3 className="text-lg font-semibold text-foreground">대상 테이블</h3>
+            <span className="text-sm text-muted-foreground">(TO)</span>
           </div>
           
           <div className="space-y-2">
@@ -162,20 +162,20 @@ export const TableStep: React.FC<TableStepProps> = ({
                 key={table.name}
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedToTable === table.name
-                    ? "border-green-500 bg-green-50 shadow-md"
-                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
+                    ? "border-emerald-500 bg-emerald-50 shadow-md"
+                    : "border-border bg-white hover:border-green-300 hover:bg-green-25"
                 }`}
                 onClick={() => handleToTableSelect(table.name)}
               >
                 <div className="flex items-center gap-3">
-                  <Table className="w-6 h-6 text-green-600" />
+                  <Table className="w-6 h-6 text-emerald-600" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <h4 className="font-medium text-foreground">{table.name}</h4>
                     <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
-                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                    <p className="text-xs text-muted-foreground">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedToTable === table.name && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                   )}
                 </div>
               </div>
@@ -188,7 +188,7 @@ export const TableStep: React.FC<TableStepProps> = ({
       <div className="flex justify-between">
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-muted hover:bg-muted/80 transition-all duration-200"
         >
           <ArrowLeft className="w-4 h-4" />
           이전 단계
@@ -199,8 +199,8 @@ export const TableStep: React.FC<TableStepProps> = ({
           disabled={!canProceed}
           className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
             canProceed
-              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
-              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+              ? "bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
+              : "bg-muted/60 text-muted-foreground cursor-not-allowed"
           }`}
         >
           다음 단계: 필드 매핑
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
index b3deefd6..536a4878 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
@@ -126,11 +126,11 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
             : isSelected
               ? "border-primary bg-primary/10 shadow-md"
               : isMapped
-                ? "border-green-500 bg-green-50 shadow-sm"
+                ? "border-emerald-500 bg-emerald-50 shadow-sm"
                 : isBlockedDropTarget
-                  ? "border-red-400 bg-destructive/10 shadow-md"
+                  ? "border-destructive/60 bg-destructive/10 shadow-md"
                   : isDropTarget
-                    ? "border-blue-400 bg-accent shadow-md"
+                    ? "border-primary/60 bg-accent shadow-md"
                     : "border-border hover:bg-muted/50 hover:shadow-sm"
         } `}
         draggable={type === "from" && !isMapped}
@@ -146,8 +146,8 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
             isSelected
               ? "bg-primary border-primary"
               : isMapped
-                ? "border-green-500 bg-green-500"
-                : "border-gray-300 bg-white"
+                ? "border-emerald-500 bg-emerald-500"
+                : "border-input bg-white"
           } `}
           style={{
             [type === "from" ? "right" : "left"]: "-6px",
@@ -156,9 +156,9 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
 
         <div className="flex items-center justify-between">
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            {type === "from" && !isMapped && <GripVertical className="h-3 w-3 flex-shrink-0 text-gray-400" />}
+            {type === "from" && !isMapped && <GripVertical className="h-3 w-3 flex-shrink-0 text-muted-foreground/70" />}
             <span className="truncate text-sm font-medium">{displayName}</span>
-            {isMapped && <Link className="h-3 w-3 flex-shrink-0 text-green-600" />}
+            {isMapped && <Link className="h-3 w-3 flex-shrink-0 text-emerald-600" />}
           </div>
           <Badge variant="outline" className="flex-shrink-0 text-xs">
             {field.webType || field.dataType || "unknown"}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx
index 570ac517..df311456 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx
@@ -91,9 +91,9 @@ const MappingControls: React.FC<MappingControlsProps> = ({
               </Badge>
               {/* 타입 호환성 아이콘 */}
               {selectedFromField.webType === selectedToField.webType ? (
-                <span className="text-xs text-green-600">✅</span>
+                <span className="text-xs text-emerald-600">✅</span>
               ) : (
-                <span className="text-xs text-orange-600">⚠️</span>
+                <span className="text-xs text-amber-600">⚠️</span>
               )}
             </div>
           </div>
diff --git a/frontend/components/dataflow/external-call/ExternalCallPanel.tsx b/frontend/components/dataflow/external-call/ExternalCallPanel.tsx
index ea8add8d..3feb48b7 100644
--- a/frontend/components/dataflow/external-call/ExternalCallPanel.tsx
+++ b/frontend/components/dataflow/external-call/ExternalCallPanel.tsx
@@ -222,7 +222,7 @@ const ExternalCallPanel: React.FC<ExternalCallPanelProps> = ({
         <CardHeader className="pt-3 pb-2">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Globe className="h-5 w-5 text-blue-500" />
+              <Globe className="h-5 w-5 text-primary" />
               <CardTitle className="text-lg">외부 호출 설정</CardTitle>
               <Badge variant={isConfigValid ? "default" : "secondary"}>
                 {isConfigValid ? "설정 완료" : "설정 필요"}
diff --git a/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx b/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
index 811e4b60..f00d8e8c 100644
--- a/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
+++ b/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
@@ -208,7 +208,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <TestTube className="h-5 w-5 text-blue-500" />
+              <TestTube className="h-5 w-5 text-primary" />
               <CardTitle className="text-lg">API 테스트</CardTitle>
               {testResult && (
                 <Badge variant={testResult.success ? "default" : "destructive"}>
@@ -253,9 +253,9 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
               <div className="space-y-1">
                 <div className="flex items-center justify-center gap-1">
                   {testResult.success ? (
-                    <CheckCircle className="h-4 w-4 text-green-500" />
+                    <CheckCircle className="h-4 w-4 text-emerald-500" />
                   ) : (
-                    <XCircle className="h-4 w-4 text-red-500" />
+                    <XCircle className="h-4 w-4 text-destructive" />
                   )}
                   <span className="text-sm font-medium">상태</span>
                 </div>
@@ -264,7 +264,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
 
               <div className="space-y-1">
                 <div className="flex items-center justify-center gap-1">
-                  <Network className="h-4 w-4 text-blue-500" />
+                  <Network className="h-4 w-4 text-primary" />
                   <span className="text-sm font-medium">상태 코드</span>
                 </div>
                 <div className="text-muted-foreground text-xs">{testResult.statusCode || "N/A"}</div>
@@ -272,7 +272,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
 
               <div className="space-y-1">
                 <div className="flex items-center justify-center gap-1">
-                  <Timer className="h-4 w-4 text-orange-500" />
+                  <Timer className="h-4 w-4 text-amber-500" />
                   <span className="text-sm font-medium">응답 시간</span>
                 </div>
                 <div className="text-muted-foreground text-xs">{testResult.responseTime}ms</div>
@@ -402,8 +402,8 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
                     {testResult.statusCode && (
                       <div>
                         <Label className="text-muted-foreground text-xs">상태 코드</Label>
-                        <div className="mt-1 rounded border bg-green-50 p-2">
-                          <span className="font-mono text-sm text-green-700">{testResult.statusCode}</span>
+                        <div className="mt-1 rounded border bg-emerald-50 p-2">
+                          <span className="font-mono text-sm text-emerald-700">{testResult.statusCode}</span>
                         </div>
                       </div>
                     )}
@@ -413,7 +413,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
                       <div>
                         <Label className="text-muted-foreground text-xs">응답 시간</Label>
                         <div className="mt-1 rounded border bg-accent p-2">
-                          <span className="font-mono text-sm text-blue-700">{testResult.responseTime}ms</span>
+                          <span className="font-mono text-sm text-primary">{testResult.responseTime}ms</span>
                         </div>
                       </div>
                     )}
diff --git a/frontend/components/dataflow/external-call/FieldMappingEditor.tsx b/frontend/components/dataflow/external-call/FieldMappingEditor.tsx
index f1fd22b8..c0882d54 100644
--- a/frontend/components/dataflow/external-call/FieldMappingEditor.tsx
+++ b/frontend/components/dataflow/external-call/FieldMappingEditor.tsx
@@ -188,9 +188,9 @@ export const FieldMappingEditor: React.FC<FieldMappingEditorProps> = ({
                   <Label className="text-xs">{direction === "inbound" ? "외부 필드" : "내부 필드"}</Label>
                   <div className="mt-1 flex items-center gap-1">
                     {direction === "inbound" ? (
-                      <Globe className="h-3 w-3 text-blue-500" />
+                      <Globe className="h-3 w-3 text-primary" />
                     ) : (
-                      <Database className="h-3 w-3 text-green-500" />
+                      <Database className="h-3 w-3 text-emerald-500" />
                     )}
                     <Input
                       value={mapping.sourceField}
@@ -212,9 +212,9 @@ export const FieldMappingEditor: React.FC<FieldMappingEditorProps> = ({
                   <Label className="text-xs">{direction === "inbound" ? "내부 필드" : "외부 필드"}</Label>
                   <div className="mt-1 flex items-center gap-1">
                     {direction === "inbound" ? (
-                      <Database className="h-3 w-3 text-green-500" />
+                      <Database className="h-3 w-3 text-emerald-500" />
                     ) : (
-                      <Globe className="h-3 w-3 text-blue-500" />
+                      <Globe className="h-3 w-3 text-primary" />
                     )}
                     {direction === "inbound" && currentTable ? (
                       <Select
diff --git a/frontend/components/dataflow/external-call/RestApiSettings.tsx b/frontend/components/dataflow/external-call/RestApiSettings.tsx
index 66a8e651..dd9075a3 100644
--- a/frontend/components/dataflow/external-call/RestApiSettings.tsx
+++ b/frontend/components/dataflow/external-call/RestApiSettings.tsx
@@ -377,7 +377,7 @@ const RestApiSettings: React.FC<RestApiSettingsProps> = ({ settings, onSettingsC
                         variant="ghost"
                         size="sm"
                         onClick={() => handleRemoveHeader(key)}
-                        className="text-red-500 hover:text-red-700"
+                        className="text-destructive hover:text-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -635,13 +635,13 @@ const RestApiSettings: React.FC<RestApiSettingsProps> = ({ settings, onSettingsC
             <div className="flex items-center gap-2">
               {validationErrors.length === 0 ? (
                 <>
-                  <CheckCircle className="h-4 w-4 text-green-500" />
-                  <span className="text-sm text-green-600">설정이 완료되었습니다</span>
+                  <CheckCircle className="h-4 w-4 text-emerald-500" />
+                  <span className="text-sm text-emerald-600">설정이 완료되었습니다</span>
                 </>
               ) : (
                 <>
-                  <AlertCircle className="h-4 w-4 text-orange-500" />
-                  <span className="text-sm text-orange-600">{validationErrors.length}개의 설정이 필요합니다</span>
+                  <AlertCircle className="h-4 w-4 text-amber-500" />
+                  <span className="text-sm text-amber-600">{validationErrors.length}개의 설정이 필요합니다</span>
                 </>
               )}
             </div>
diff --git a/frontend/components/dataflow/node-editor/FlowEditor.tsx b/frontend/components/dataflow/node-editor/FlowEditor.tsx
index 60a92803..6c9c2ca2 100644
--- a/frontend/components/dataflow/node-editor/FlowEditor.tsx
+++ b/frontend/components/dataflow/node-editor/FlowEditor.tsx
@@ -370,7 +370,7 @@ function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: Fl
           onDrop={onDrop}
           nodeTypes={nodeTypes}
           fitView
-          className="bg-gray-50"
+          className="bg-muted"
           deleteKeyCode={["Delete", "Backspace"]}
         >
           {/* 배경 그리드 */}
diff --git a/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx b/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
index d5cc9b18..4e68ed3e 100644
--- a/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
+++ b/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
@@ -105,12 +105,12 @@ export function LoadFlowDialog({ open, onOpenChange, onLoad }: LoadFlowDialogPro
 
         {loading ? (
           <div className="flex items-center justify-center py-12">
-            <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground/70" />
           </div>
         ) : flows.length === 0 ? (
           <div className="py-12 text-center">
-            <FileJson className="mx-auto mb-4 h-12 w-12 text-gray-300" />
-            <p className="text-sm text-gray-500">저장된 플로우가 없습니다.</p>
+            <FileJson className="mx-auto mb-4 h-12 w-12 text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground">저장된 플로우가 없습니다.</p>
           </div>
         ) : (
           <ScrollArea className="h-[400px]">
@@ -118,19 +118,19 @@ export function LoadFlowDialog({ open, onOpenChange, onLoad }: LoadFlowDialogPro
               {flows.map((flow) => (
                 <div
                   key={flow.flowId}
-                  className={`cursor-pointer rounded-lg border-2 p-4 transition-all hover:border-blue-300 hover:bg-blue-50 ${
-                    selectedFlowId === flow.flowId ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"
+                  className={`cursor-pointer rounded-lg border-2 p-4 transition-all hover:border-primary/40 hover:bg-primary/10 ${
+                    selectedFlowId === flow.flowId ? "border-primary bg-primary/10" : "border-border bg-white"
                   }`}
                   onClick={() => setSelectedFlowId(flow.flowId)}
                 >
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
-                        <h3 className="font-semibold text-gray-900">{flow.flowName}</h3>
-                        <span className="text-xs text-gray-400">#{flow.flowId}</span>
+                        <h3 className="font-semibold text-foreground">{flow.flowName}</h3>
+                        <span className="text-xs text-muted-foreground/70">#{flow.flowId}</span>
                       </div>
-                      {flow.flowDescription && <p className="mt-1 text-sm text-gray-600">{flow.flowDescription}</p>}
-                      <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
+                      {flow.flowDescription && <p className="mt-1 text-sm text-muted-foreground">{flow.flowDescription}</p>}
+                      <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
                         <div className="flex items-center gap-1">
                           <Calendar className="h-3 w-3" />
                           <span>수정: {formatDate(flow.updatedAt)}</span>
@@ -145,7 +145,7 @@ export function LoadFlowDialog({ open, onOpenChange, onLoad }: LoadFlowDialogPro
                         handleDelete(flow.flowId, flow.flowName);
                       }}
                       disabled={deleting === flow.flowId}
-                      className="text-red-600 hover:bg-red-50 hover:text-red-700"
+                      className="text-destructive hover:bg-destructive/10 hover:text-destructive"
                     >
                       {deleting === flow.flowId ? (
                         <Loader2 className="h-4 w-4 animate-spin" />
diff --git a/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx b/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx
index 4f172e95..3ec9df2e 100644
--- a/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx
+++ b/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx
@@ -40,7 +40,7 @@ export const SaveConfirmDialog = memo(
           <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
             <DialogHeader>
               <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
-                <AlertCircle className="h-5 w-5 text-red-500" />
+                <AlertCircle className="h-5 w-5 text-destructive" />
                 저장할 수 없습니다
               </DialogTitle>
               <DialogDescription className="text-xs sm:text-sm">
@@ -55,7 +55,7 @@ export const SaveConfirmDialog = memo(
                   오류 {summary.errorCount}
                 </Badge>
                 {summary.warningCount > 0 && (
-                  <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
+                  <Badge className="gap-1 bg-amber-500 hover:bg-yellow-600">
                     <AlertTriangle className="h-3 w-3" />
                     경고 {summary.warningCount}
                   </Badge>
@@ -69,9 +69,9 @@ export const SaveConfirmDialog = memo(
                     .map((validation, index) => (
                       <div
                         key={index}
-                        className="rounded-lg border-2 border-red-200 bg-red-50 p-3"
+                        className="rounded-lg border-2 border-destructive/20 bg-destructive/10 p-3"
                       >
-                        <div className="mb-1 text-xs font-medium text-red-600">
+                        <div className="mb-1 text-xs font-medium text-destructive">
                           {validation.type}
                         </div>
                         <div className="text-sm text-red-800">
@@ -82,7 +82,7 @@ export const SaveConfirmDialog = memo(
                 </div>
               </ScrollArea>
 
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 위의 오류를 먼저 해결해주세요. 경고는 저장 후에도 확인할 수
                 있습니다.
               </p>
@@ -107,7 +107,7 @@ export const SaveConfirmDialog = memo(
         <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
-              <AlertTriangle className="h-5 w-5 text-yellow-500" />
+              <AlertTriangle className="h-5 w-5 text-amber-500" />
               경고가 있습니다
             </DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
@@ -119,7 +119,7 @@ export const SaveConfirmDialog = memo(
           <div className="space-y-3">
             <div className="flex items-center gap-2">
               {summary.warningCount > 0 && (
-                <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
+                <Badge className="gap-1 bg-amber-500 hover:bg-yellow-600">
                   <AlertTriangle className="h-3 w-3" />
                   경고 {summary.warningCount}
                 </Badge>
@@ -139,9 +139,9 @@ export const SaveConfirmDialog = memo(
                   .map((validation, index) => (
                     <div
                       key={index}
-                      className="rounded-lg border-2 border-yellow-200 bg-yellow-50 p-3"
+                      className="rounded-lg border-2 border-amber-200 bg-amber-50 p-3"
                     >
-                      <div className="mb-1 text-xs font-medium text-yellow-600">
+                      <div className="mb-1 text-xs font-medium text-amber-600">
                         {validation.type}
                       </div>
                       <div className="text-sm text-yellow-800">
@@ -154,12 +154,12 @@ export const SaveConfirmDialog = memo(
                   .map((validation, index) => (
                     <div
                       key={index}
-                      className="rounded-lg border-2 border-blue-200 bg-blue-50 p-3"
+                      className="rounded-lg border-2 border-primary/20 bg-primary/10 p-3"
                     >
-                      <div className="mb-1 text-xs font-medium text-blue-600">
+                      <div className="mb-1 text-xs font-medium text-primary">
                         {validation.type}
                       </div>
-                      <div className="text-sm text-blue-800">
+                      <div className="text-sm text-primary">
                         {validation.message}
                       </div>
                     </div>
@@ -167,8 +167,8 @@ export const SaveConfirmDialog = memo(
               </div>
             </ScrollArea>
 
-            <div className="rounded-lg bg-gray-50 p-3">
-              <p className="text-xs text-gray-600">
+            <div className="rounded-lg bg-muted p-3">
+              <p className="text-xs text-muted-foreground">
                 ⚠️ 이 경고들은 플로우의 동작에 영향을 줄 수 있습니다.
                 <br />
                 그래도 저장하시겠습니까?
@@ -186,7 +186,7 @@ export const SaveConfirmDialog = memo(
             </Button>
             <Button
               onClick={onConfirm}
-              className="h-8 flex-1 bg-yellow-500 text-xs hover:bg-yellow-600 sm:h-10 sm:flex-none sm:text-sm"
+              className="h-8 flex-1 bg-amber-500 text-xs hover:bg-yellow-600 sm:h-10 sm:flex-none sm:text-sm"
             >
               경고 무시하고 저장
             </Button>
diff --git a/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx b/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx
index 7556e248..ea32f301 100644
--- a/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx
+++ b/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx
@@ -177,7 +177,7 @@ export function VariableTagEditor({
   return (
     <div className={cn("relative rounded-md border", className)}>
       {/* 툴바 */}
-      <div className="flex items-center justify-between border-b bg-gray-50 px-2 py-1">
+      <div className="flex items-center justify-between border-b bg-muted px-2 py-1">
         <div className="flex items-center gap-1">
           <Popover
             open={isVariablePopoverOpen}
@@ -214,15 +214,15 @@ export function VariableTagEditor({
                       >
                         <div className="flex flex-col">
                           <div className="flex items-center gap-2">
-                            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700">
+                            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
                               {variable.displayName}
                             </span>
-                            <span className="text-xs text-gray-500">
+                            <span className="text-xs text-muted-foreground">
                               {variable.name}
                             </span>
                           </div>
                           {variable.description && (
-                            <span className="mt-0.5 text-xs text-gray-400">
+                            <span className="mt-0.5 text-xs text-muted-foreground/70">
                               {variable.description}
                             </span>
                           )}
@@ -236,9 +236,9 @@ export function VariableTagEditor({
           </Popover>
         </div>
 
-        <div className="text-xs text-gray-400">
-          <kbd className="rounded bg-gray-200 px-1">@</kbd> 또는{" "}
-          <kbd className="rounded bg-gray-200 px-1">/</kbd> 로 변수 삽입
+        <div className="text-xs text-muted-foreground/70">
+          <kbd className="rounded bg-muted/80 px-1">@</kbd> 또는{" "}
+          <kbd className="rounded bg-muted/80 px-1">/</kbd> 로 변수 삽입
         </div>
       </div>
 
diff --git a/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx b/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx
index 51ed5371..f54a6020 100644
--- a/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx
@@ -28,7 +28,7 @@ export const AggregateNode = memo(({ data, selected }: NodeProps<AggregateNodeDa
   return (
     <div
       className={`min-w-[280px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-purple-500 shadow-lg" : "border-gray-200"
+        selected ? "border-purple-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -71,28 +71,28 @@ export const AggregateNode = memo(({ data, selected }: NodeProps<AggregateNodeDa
         {aggregationCount > 0 ? (
           <div className="space-y-2">
             {data.aggregations.slice(0, 4).map((agg, idx) => (
-              <div key={agg.id || idx} className="rounded bg-gray-50 p-2">
+              <div key={agg.id || idx} className="rounded bg-muted p-2">
                 <div className="flex items-center justify-between">
                   <span className="rounded bg-purple-600 px-1.5 py-0.5 text-xs font-medium text-white">
                     {AGGREGATE_FUNCTION_LABELS[agg.function] || agg.function}
                   </span>
-                  <span className="text-xs text-gray-500">
+                  <span className="text-xs text-muted-foreground">
                     {agg.outputFieldLabel || agg.outputField}
                   </span>
                 </div>
-                <div className="mt-1 text-xs text-gray-600">
+                <div className="mt-1 text-xs text-muted-foreground">
                   {agg.sourceFieldLabel || agg.sourceField}
                 </div>
               </div>
             ))}
             {data.aggregations.length > 4 && (
-              <div className="text-xs text-gray-400 text-center">
+              <div className="text-xs text-muted-foreground/70 text-center">
                 ... 외 {data.aggregations.length - 4}개
               </div>
             )}
           </div>
         ) : (
-          <div className="py-4 text-center text-xs text-gray-400">집계 연산 없음</div>
+          <div className="py-4 text-center text-xs text-muted-foreground/70">집계 연산 없음</div>
         )}
       </div>
 
diff --git a/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx b/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
index 986cf399..d61b37dc 100644
--- a/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
@@ -12,16 +12,16 @@ import type { CommentNodeData } from "@/types/node-editor";
 export const CommentNode = memo(({ data, selected }: NodeProps<CommentNodeData>) => {
   return (
     <div
-      className={`max-w-[350px] min-w-[200px] rounded-lg border-2 border-dashed bg-yellow-50 shadow-sm transition-all ${
-        selected ? "border-yellow-500 shadow-md" : "border-yellow-300"
+      className={`max-w-[350px] min-w-[200px] rounded-lg border-2 border-dashed bg-amber-50 shadow-sm transition-all ${
+        selected ? "border-yellow-500 shadow-md" : "border-amber-300"
       }`}
     >
       <div className="p-3">
         <div className="mb-2 flex items-center gap-2">
-          <MessageSquare className="h-4 w-4 text-yellow-600" />
+          <MessageSquare className="h-4 w-4 text-amber-600" />
           <span className="text-xs font-semibold text-yellow-800">메모</span>
         </div>
-        <div className="text-sm whitespace-pre-wrap text-gray-700">{data.content || "메모를 입력하세요..."}</div>
+        <div className="text-sm whitespace-pre-wrap text-foreground">{data.content || "메모를 입력하세요..."}</div>
       </div>
     </div>
   );
diff --git a/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
index 4cf5e32d..ad89a130 100644
--- a/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
@@ -35,14 +35,14 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
   return (
     <div
       className={`min-w-[280px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-yellow-500 shadow-lg" : "border-gray-200"
+        selected ? "border-yellow-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
       <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-yellow-500 !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-yellow-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-amber-500 px-3 py-2 text-white">
         <Zap className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">조건 검사</div>
@@ -54,15 +54,15 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
       <div className="p-3">
         {data.conditions && data.conditions.length > 0 ? (
           <div className="space-y-2">
-            <div className="text-xs font-medium text-gray-700">조건식: ({data.conditions.length}개)</div>
+            <div className="text-xs font-medium text-foreground">조건식: ({data.conditions.length}개)</div>
             <div className="max-h-[150px] space-y-1.5 overflow-y-auto">
               {data.conditions.slice(0, 4).map((condition, idx) => (
-                <div key={idx} className="rounded bg-yellow-50 px-2 py-1.5 text-xs">
+                <div key={idx} className="rounded bg-amber-50 px-2 py-1.5 text-xs">
                   {idx > 0 && (
-                    <div className="mb-1 text-center text-xs font-semibold text-yellow-600">{data.logic}</div>
+                    <div className="mb-1 text-center text-xs font-semibold text-amber-600">{data.logic}</div>
                   )}
                   <div className="flex flex-wrap items-center gap-1">
-                    <span className="font-mono text-gray-700">{condition.field}</span>
+                    <span className="font-mono text-foreground">{condition.field}</span>
                     <span
                       className={`rounded px-1 py-0.5 ${
                         isExistsOperator(condition.operator)
@@ -82,7 +82,7 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
                       // 일반 연산자인 경우 값 표시
                       condition.value !== null &&
                       condition.value !== undefined && (
-                        <span className="text-gray-600">
+                        <span className="text-muted-foreground">
                           {typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
                         </span>
                       )
@@ -91,12 +91,12 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
                 </div>
               ))}
               {data.conditions.length > 4 && (
-                <div className="text-xs text-gray-400">... 외 {data.conditions.length - 4}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.conditions.length - 4}개</div>
               )}
             </div>
           </div>
         ) : (
-          <div className="text-center text-xs text-gray-400">조건 없음</div>
+          <div className="text-center text-xs text-muted-foreground/70">조건 없음</div>
         )}
       </div>
 
@@ -105,28 +105,28 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
         {/* TRUE 출력 - 오른쪽 위 */}
         <div className="relative border-b p-2">
           <div className="flex items-center justify-end gap-1 pr-6 text-xs">
-            <Check className="h-3 w-3 text-green-600" />
-            <span className="font-medium text-green-600">TRUE</span>
+            <Check className="h-3 w-3 text-emerald-600" />
+            <span className="font-medium text-emerald-600">TRUE</span>
           </div>
           <Handle
             type="source"
             position={Position.Right}
             id="true"
-            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-green-500 !bg-white"
+            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-emerald-500 !bg-white"
           />
         </div>
 
         {/* FALSE 출력 - 오른쪽 아래 */}
         <div className="relative p-2">
           <div className="flex items-center justify-end gap-1 pr-6 text-xs">
-            <X className="h-3 w-3 text-red-600" />
-            <span className="font-medium text-red-600">FALSE</span>
+            <X className="h-3 w-3 text-destructive" />
+            <span className="font-medium text-destructive">FALSE</span>
           </div>
           <Handle
             type="source"
             position={Position.Right}
             id="false"
-            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-red-500 !bg-white"
+            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-destructive !bg-white"
           />
         </div>
       </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx b/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
index f5ed2e77..cbadbeb7 100644
--- a/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
@@ -13,11 +13,11 @@ export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransfo
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-indigo-600 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-primary px-3 py-2 text-white">
         <Wand2 className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">{data.displayName || "데이터 변환"}</div>
@@ -40,29 +40,29 @@ export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransfo
                   <div className="mb-1 flex items-center gap-2 text-xs">
                     <span className="font-medium text-indigo-700">{transform.type}</span>
                   </div>
-                  <div className="text-xs text-gray-600">
+                  <div className="text-xs text-muted-foreground">
                     {sourceLabel}
-                    <span className="mx-1 text-gray-400">→</span>
+                    <span className="mx-1 text-muted-foreground/70">→</span>
                     {isInPlace ? (
-                      <span className="font-medium text-indigo-600">(자기자신)</span>
+                      <span className="font-medium text-primary">(자기자신)</span>
                     ) : (
                       <span>{targetLabel}</span>
                     )}
                   </div>
                   {/* 타입별 추가 정보 */}
                   {transform.type === "EXPLODE" && transform.delimiter && (
-                    <div className="mt-1 text-xs text-gray-500">구분자: {transform.delimiter}</div>
+                    <div className="mt-1 text-xs text-muted-foreground">구분자: {transform.delimiter}</div>
                   )}
                   {transform.type === "CONCAT" && transform.separator && (
-                    <div className="mt-1 text-xs text-gray-500">구분자: {transform.separator}</div>
+                    <div className="mt-1 text-xs text-muted-foreground">구분자: {transform.separator}</div>
                   )}
                   {transform.type === "REPLACE" && (
-                    <div className="mt-1 text-xs text-gray-500">
+                    <div className="mt-1 text-xs text-muted-foreground">
                       "{transform.searchValue}" → "{transform.replaceValue}"
                     </div>
                   )}
                   {transform.expression && (
-                    <div className="mt-1 text-xs text-gray-500">
+                    <div className="mt-1 text-xs text-muted-foreground">
                       <code className="rounded bg-white px-1 py-0.5">{transform.expression}</code>
                     </div>
                   )}
@@ -70,17 +70,17 @@ export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransfo
               );
             })}
             {data.transformations.length > 3 && (
-              <div className="text-xs text-gray-400">... 외 {data.transformations.length - 3}개</div>
+              <div className="text-xs text-muted-foreground/70">... 외 {data.transformations.length - 3}개</div>
             )}
           </div>
         ) : (
-          <div className="py-4 text-center text-xs text-gray-400">변환 규칙 없음</div>
+          <div className="py-4 text-center text-xs text-muted-foreground/70">변환 규칙 없음</div>
         )}
       </div>
 
       {/* 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-indigo-500" />
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-indigo-500" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-primary" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-primary" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
index 0c76ed78..05573ab4 100644
--- a/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
@@ -13,14 +13,14 @@ export const DeleteActionNode = memo(({ data, selected }: NodeProps<DeleteAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-red-500 shadow-lg" : "border-gray-200"
+        selected ? "border-destructive shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-red-500 !bg-white" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-destructive !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-red-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-destructive px-3 py-2 text-white">
         <Trash2 className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">DELETE</div>
@@ -30,30 +30,30 @@ export const DeleteActionNode = memo(({ data, selected }: NodeProps<DeleteAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">타겟: {data.targetTable}</div>
+        <div className="mb-2 text-xs font-medium text-muted-foreground">타겟: {data.targetTable}</div>
 
         {/* WHERE 조건 */}
         {data.whereConditions && data.whereConditions.length > 0 ? (
           <div className="space-y-1">
-            <div className="text-xs font-medium text-gray-700">WHERE 조건:</div>
+            <div className="text-xs font-medium text-foreground">WHERE 조건:</div>
             <div className="max-h-[120px] space-y-1 overflow-y-auto">
               {data.whereConditions.map((condition, idx) => (
-                <div key={idx} className="rounded bg-red-50 px-2 py-1 text-xs">
-                  <span className="font-mono text-gray-700">{condition.field}</span>
-                  <span className="mx-1 text-red-600">{condition.operator}</span>
-                  <span className="text-gray-600">{condition.sourceField || condition.staticValue || "?"}</span>
+                <div key={idx} className="rounded bg-destructive/10 px-2 py-1 text-xs">
+                  <span className="font-mono text-foreground">{condition.field}</span>
+                  <span className="mx-1 text-destructive">{condition.operator}</span>
+                  <span className="text-muted-foreground">{condition.sourceField || condition.staticValue || "?"}</span>
                 </div>
               ))}
             </div>
           </div>
         ) : (
-          <div className="rounded bg-yellow-50 p-2 text-xs text-yellow-700">⚠️ 조건 없음 - 모든 데이터 삭제 주의!</div>
+          <div className="rounded bg-amber-50 p-2 text-xs text-yellow-700">⚠️ 조건 없음 - 모든 데이터 삭제 주의!</div>
         )}
 
         {/* 경고 메시지 */}
-        <div className="mt-3 flex items-start gap-2 rounded border border-red-200 bg-red-50 p-2">
-          <AlertTriangle className="h-3 w-3 flex-shrink-0 text-red-600" />
-          <div className="text-xs text-red-700">
+        <div className="mt-3 flex items-start gap-2 rounded border border-destructive/20 bg-destructive/10 p-2">
+          <AlertTriangle className="h-3 w-3 flex-shrink-0 text-destructive" />
+          <div className="text-xs text-destructive">
             <div className="font-medium">주의</div>
             <div className="mt-0.5">삭제된 데이터는 복구할 수 없습니다</div>
           </div>
@@ -62,13 +62,13 @@ export const DeleteActionNode = memo(({ data, selected }: NodeProps<DeleteAction
         {/* 옵션 */}
         {data.options?.requireConfirmation && (
           <div className="mt-2">
-            <span className="rounded bg-red-100 px-1.5 py-0.5 text-xs text-red-700">실행 전 확인 필요</span>
+            <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-xs text-destructive">실행 전 확인 필요</span>
           </div>
         )}
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-red-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-destructive !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx
index 4efc5b6a..ab5d316f 100644
--- a/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx
@@ -18,7 +18,7 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-pink-500 shadow-lg" : "border-gray-200"
+        selected ? "border-pink-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -40,36 +40,36 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
       <div className="space-y-2 p-3">
         {/* 발송 계정 상태 */}
         <div className="flex items-center gap-2 text-xs">
-          <User className="h-3 w-3 text-gray-400" />
-          <span className="text-gray-600">
+          <User className="h-3 w-3 text-muted-foreground/70" />
+          <span className="text-muted-foreground">
             {hasAccount ? (
-              <span className="flex items-center gap-1 text-green-600">
+              <span className="flex items-center gap-1 text-emerald-600">
                 <CheckCircle className="h-3 w-3" />
                 계정 선택됨
               </span>
             ) : (
-              <span className="text-orange-500">발송 계정 선택 필요</span>
+              <span className="text-amber-500">발송 계정 선택 필요</span>
             )}
           </span>
         </div>
 
         {/* 수신자 */}
         <div className="text-xs">
-          <span className="text-gray-500">수신자: </span>
+          <span className="text-muted-foreground">수신자: </span>
           {hasRecipient ? (
-            <span className="text-gray-700">{data.to}</span>
+            <span className="text-foreground">{data.to}</span>
           ) : (
-            <span className="text-orange-500">미설정</span>
+            <span className="text-amber-500">미설정</span>
           )}
         </div>
 
         {/* 제목 */}
         <div className="text-xs">
-          <span className="text-gray-500">제목: </span>
+          <span className="text-muted-foreground">제목: </span>
           {hasSubject ? (
-            <span className="truncate text-gray-700">{data.subject}</span>
+            <span className="truncate text-foreground">{data.subject}</span>
           ) : (
-            <span className="text-orange-500">미설정</span>
+            <span className="text-amber-500">미설정</span>
           )}
         </div>
 
@@ -77,7 +77,7 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
         <div className="flex items-center gap-2">
           <span
             className={`rounded px-1.5 py-0.5 text-xs ${
-              data.bodyType === "html" ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"
+              data.bodyType === "html" ? "bg-primary/10 text-primary" : "bg-muted text-foreground"
             }`}
           >
             {data.bodyType === "html" ? "HTML" : "TEXT"}
diff --git a/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
index 2088bced..a3017ddc 100644
--- a/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
@@ -32,7 +32,7 @@ export const ExternalDBSourceNode = memo(({ data, selected }: NodeProps<External
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -48,27 +48,27 @@ export const ExternalDBSourceNode = memo(({ data, selected }: NodeProps<External
       {/* 본문 */}
       <div className="p-3">
         <div className="mb-2 flex items-center gap-1 text-xs">
-          <div className="rounded bg-orange-100 px-2 py-0.5 font-medium text-orange-700">{data.dbType || "DB"}</div>
-          <div className="flex-1 text-gray-500">외부 DB</div>
+          <div className="rounded bg-amber-100 px-2 py-0.5 font-medium text-orange-700">{data.dbType || "DB"}</div>
+          <div className="flex-1 text-muted-foreground">외부 DB</div>
         </div>
 
         {/* 필드 목록 */}
         <div className="space-y-1">
-          <div className="text-xs font-medium text-gray-700">출력 필드:</div>
+          <div className="text-xs font-medium text-foreground">출력 필드:</div>
           <div className="max-h-[150px] overflow-y-auto">
             {data.fields && data.fields.length > 0 ? (
               data.fields.slice(0, 5).map((field) => (
-                <div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
+                <div key={field.name} className="flex items-center gap-2 text-xs text-muted-foreground">
                   <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: dbColor }} />
                   <span className="font-mono">{field.name}</span>
-                  <span className="text-gray-400">({field.type})</span>
+                  <span className="text-muted-foreground/70">({field.type})</span>
                 </div>
               ))
             ) : (
-              <div className="text-xs text-gray-400">필드 없음</div>
+              <div className="text-xs text-muted-foreground/70">필드 없음</div>
             )}
             {data.fields && data.fields.length > 5 && (
-              <div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
+              <div className="text-xs text-muted-foreground/70">... 외 {data.fields.length - 5}개</div>
             )}
           </div>
         </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx b/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
index 991e1bd4..87fda069 100644
--- a/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
@@ -13,10 +13,10 @@ import type { FormulaTransformNodeData, FormulaType } from "@/types/node-editor"
 
 // 수식 타입별 라벨
 const FORMULA_TYPE_LABELS: Record<FormulaType, { label: string; color: string }> = {
-  arithmetic: { label: "산술", color: "bg-orange-500" },
-  function: { label: "함수", color: "bg-blue-500" },
-  condition: { label: "조건", color: "bg-yellow-500" },
-  static: { label: "정적", color: "bg-gray-500" },
+  arithmetic: { label: "산술", color: "bg-amber-500" },
+  function: { label: "함수", color: "bg-primary" },
+  condition: { label: "조건", color: "bg-amber-500" },
+  static: { label: "정적", color: "bg-muted0" },
 };
 
 // 연산자 표시
@@ -83,11 +83,11 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
   return (
     <div
       className={`min-w-[300px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-orange-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-amber-500 px-3 py-2 text-white">
         <Calculator className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">{data.displayName || "수식 변환"}</div>
@@ -101,18 +101,18 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
       <div className="space-y-3 p-3">
         {/* 타겟 테이블 조회 설정 */}
         {hasTargetLookup && (
-          <div className="rounded bg-blue-50 p-2">
+          <div className="rounded bg-primary/10 p-2">
             <div className="mb-1 flex items-center gap-1">
-              <Database className="h-3 w-3 text-blue-600" />
-              <span className="text-xs font-medium text-blue-700">타겟 조회</span>
+              <Database className="h-3 w-3 text-primary" />
+              <span className="text-xs font-medium text-primary">타겟 조회</span>
             </div>
-            <div className="text-xs text-blue-600">{data.targetLookup?.tableLabel || data.targetLookup?.tableName}</div>
+            <div className="text-xs text-primary">{data.targetLookup?.tableLabel || data.targetLookup?.tableName}</div>
             {data.targetLookup?.lookupKeys && data.targetLookup.lookupKeys.length > 0 && (
               <div className="mt-1 flex flex-wrap gap-1">
                 {data.targetLookup.lookupKeys.slice(0, 2).map((key, idx) => (
                   <span
                     key={idx}
-                    className="inline-flex items-center gap-1 rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700"
+                    className="inline-flex items-center gap-1 rounded bg-primary/10 px-1.5 py-0.5 text-xs text-primary"
                   >
                     {key.sourceFieldLabel || key.sourceField}
                     <ArrowRight className="h-2 w-2" />
@@ -120,7 +120,7 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
                   </span>
                 ))}
                 {data.targetLookup.lookupKeys.length > 2 && (
-                  <span className="text-xs text-blue-500">+{data.targetLookup.lookupKeys.length - 2}</span>
+                  <span className="text-xs text-primary">+{data.targetLookup.lookupKeys.length - 2}</span>
                 )}
               </div>
             )}
@@ -133,31 +133,31 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
             {data.transformations.slice(0, 4).map((trans, idx) => {
               const typeInfo = FORMULA_TYPE_LABELS[trans.formulaType];
               return (
-                <div key={trans.id || idx} className="rounded bg-gray-50 p-2">
+                <div key={trans.id || idx} className="rounded bg-muted p-2">
                   <div className="flex items-center justify-between">
                     <span className={`rounded px-1.5 py-0.5 text-xs font-medium text-white ${typeInfo.color}`}>
                       {typeInfo.label}
                     </span>
-                    <span className="text-xs font-medium text-gray-700">
+                    <span className="text-xs font-medium text-foreground">
                       {trans.outputFieldLabel || trans.outputField}
                     </span>
                   </div>
-                  <div className="mt-1 truncate font-mono text-xs text-gray-500">{getFormulaSummary(trans)}</div>
+                  <div className="mt-1 truncate font-mono text-xs text-muted-foreground">{getFormulaSummary(trans)}</div>
                 </div>
               );
             })}
             {data.transformations.length > 4 && (
-              <div className="text-center text-xs text-gray-400">... 외 {data.transformations.length - 4}개</div>
+              <div className="text-center text-xs text-muted-foreground/70">... 외 {data.transformations.length - 4}개</div>
             )}
           </div>
         ) : (
-          <div className="py-4 text-center text-xs text-gray-400">변환 규칙 없음</div>
+          <div className="py-4 text-center text-xs text-muted-foreground/70">변환 규칙 없음</div>
         )}
       </div>
 
       {/* 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-orange-500" />
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-orange-500" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-amber-500" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-amber-500" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx
index 25677933..7fb6d3cc 100644
--- a/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx
@@ -12,12 +12,12 @@ import type { HttpRequestActionNodeData } from "@/types/node-editor";
 
 // HTTP 메서드별 색상
 const METHOD_COLORS: Record<string, { bg: string; text: string }> = {
-  GET: { bg: "bg-green-100", text: "text-green-700" },
-  POST: { bg: "bg-blue-100", text: "text-blue-700" },
-  PUT: { bg: "bg-orange-100", text: "text-orange-700" },
-  PATCH: { bg: "bg-yellow-100", text: "text-yellow-700" },
-  DELETE: { bg: "bg-red-100", text: "text-red-700" },
-  HEAD: { bg: "bg-gray-100", text: "text-gray-700" },
+  GET: { bg: "bg-emerald-100", text: "text-emerald-700" },
+  POST: { bg: "bg-primary/10", text: "text-primary" },
+  PUT: { bg: "bg-amber-100", text: "text-orange-700" },
+  PATCH: { bg: "bg-amber-100", text: "text-yellow-700" },
+  DELETE: { bg: "bg-destructive/10", text: "text-destructive" },
+  HEAD: { bg: "bg-muted", text: "text-foreground" },
   OPTIONS: { bg: "bg-purple-100", text: "text-purple-700" },
 };
 
@@ -39,7 +39,7 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-cyan-500 shadow-lg" : "border-gray-200"
+        selected ? "border-cyan-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -65,12 +65,12 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
             {data.method}
           </span>
           {hasAuth ? (
-            <span className="flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs text-green-700">
+            <span className="flex items-center gap-1 rounded bg-emerald-100 px-1.5 py-0.5 text-xs text-emerald-700">
               <Lock className="h-3 w-3" />
               {data.authentication?.type}
             </span>
           ) : (
-            <span className="flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500">
+            <span className="flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
               <Unlock className="h-3 w-3" />
               인증없음
             </span>
@@ -79,28 +79,28 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
 
         {/* URL */}
         <div className="text-xs">
-          <span className="text-gray-500">URL: </span>
+          <span className="text-muted-foreground">URL: </span>
           {hasUrl ? (
-            <span className="truncate text-gray-700" title={data.url}>
+            <span className="truncate text-foreground" title={data.url}>
               {getDomain(data.url)}
             </span>
           ) : (
-            <span className="text-orange-500">URL 설정 필요</span>
+            <span className="text-amber-500">URL 설정 필요</span>
           )}
         </div>
 
         {/* 바디 타입 */}
         {data.bodyType && data.bodyType !== "none" && (
           <div className="text-xs">
-            <span className="text-gray-500">Body: </span>
-            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-gray-600">
+            <span className="text-muted-foreground">Body: </span>
+            <span className="rounded bg-muted px-1.5 py-0.5 text-muted-foreground">
               {data.bodyType.toUpperCase()}
             </span>
           </div>
         )}
 
         {/* 타임아웃 & 재시도 */}
-        <div className="flex gap-2 text-xs text-gray-500">
+        <div className="flex gap-2 text-xs text-muted-foreground">
           {data.options?.timeout && (
             <span>타임아웃: {Math.round(data.options.timeout / 1000)}초</span>
           )}
diff --git a/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
index 18f4d157..26ed0998 100644
--- a/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
@@ -13,14 +13,14 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-green-500 shadow-lg" : "border-gray-200"
+        selected ? "border-emerald-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-green-500 !bg-white" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-emerald-500 !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-green-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-emerald-500 px-3 py-2 text-white">
         <Plus className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">INSERT</div>
@@ -30,29 +30,29 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
           타겟: {data.displayName || data.targetTable}
           {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
-            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+            <span className="ml-1 font-mono text-muted-foreground/70">({data.targetTable})</span>
           )}
         </div>
 
         {/* 필드 매핑 */}
         {data.fieldMappings && data.fieldMappings.length > 0 && (
           <div className="space-y-1">
-            <div className="text-xs font-medium text-gray-700">삽입 필드:</div>
+            <div className="text-xs font-medium text-foreground">삽입 필드:</div>
             <div className="max-h-[120px] space-y-1 overflow-y-auto">
               {data.fieldMappings.slice(0, 4).map((mapping, idx) => (
-                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-muted px-2 py-1 text-xs">
+                  <span className="text-muted-foreground">
                     {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
                   </span>
-                  <span className="mx-1 text-gray-400">→</span>
-                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                  <span className="mx-1 text-muted-foreground/70">→</span>
+                  <span className="font-mono text-foreground">{mapping.targetFieldLabel || mapping.targetField}</span>
                 </div>
               ))}
               {data.fieldMappings.length > 4 && (
-                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 4}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.fieldMappings.length - 4}개</div>
               )}
             </div>
           </div>
@@ -62,10 +62,10 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
         {data.options && (
           <div className="mt-2 flex flex-wrap gap-1">
             {data.options.ignoreDuplicates && (
-              <span className="rounded bg-green-100 px-1.5 py-0.5 text-xs text-green-700">중복 무시</span>
+              <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-xs text-emerald-700">중복 무시</span>
             )}
             {data.options.batchSize && (
-              <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">
+              <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
                 배치 {data.options.batchSize}건
               </span>
             )}
@@ -74,7 +74,7 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-green-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-emerald-500 !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/LogNode.tsx b/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
index 8f2fa295..270f7b0d 100644
--- a/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
@@ -10,10 +10,10 @@ import { FileText, AlertCircle, Info, AlertTriangle } from "lucide-react";
 import type { LogNodeData } from "@/types/node-editor";
 
 const LOG_LEVEL_CONFIG = {
-  debug: { icon: Info, color: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200" },
-  info: { icon: Info, color: "text-green-600", bg: "bg-green-50", border: "border-green-200" },
-  warn: { icon: AlertTriangle, color: "text-yellow-600", bg: "bg-yellow-50", border: "border-yellow-200" },
-  error: { icon: AlertCircle, color: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
+  debug: { icon: Info, color: "text-primary", bg: "bg-primary/10", border: "border-primary/20" },
+  info: { icon: Info, color: "text-emerald-600", bg: "bg-emerald-50", border: "border-emerald-200" },
+  warn: { icon: AlertTriangle, color: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
+  error: { icon: AlertCircle, color: "text-destructive", bg: "bg-destructive/10", border: "border-destructive/20" },
 };
 
 export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
@@ -23,7 +23,7 @@ export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
   return (
     <div
       className={`min-w-[200px] rounded-lg border-2 bg-white shadow-sm transition-all ${
-        selected ? `${config.border} shadow-md` : "border-gray-200"
+        selected ? `${config.border} shadow-md` : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -31,7 +31,7 @@ export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
         <FileText className={`h-4 w-4 ${config.color}`} />
         <div className="flex-1">
           <div className={`text-sm font-semibold ${config.color}`}>로그</div>
-          <div className="text-xs text-gray-600">{data.level.toUpperCase()}</div>
+          <div className="text-xs text-muted-foreground">{data.level.toUpperCase()}</div>
         </div>
         <Icon className={`h-4 w-4 ${config.color}`} />
       </div>
@@ -39,19 +39,19 @@ export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
       {/* 본문 */}
       <div className="p-3">
         {data.message ? (
-          <div className="text-sm text-gray-700">{data.message}</div>
+          <div className="text-sm text-foreground">{data.message}</div>
         ) : (
-          <div className="text-sm text-gray-400">로그 메시지 없음</div>
+          <div className="text-sm text-muted-foreground/70">로그 메시지 없음</div>
         )}
 
         {data.includeData && (
-          <div className="mt-2 rounded bg-gray-50 px-2 py-1 text-xs text-gray-600">✓ 데이터 포함</div>
+          <div className="mt-2 rounded bg-muted px-2 py-1 text-xs text-muted-foreground">✓ 데이터 포함</div>
         )}
       </div>
 
       {/* 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-gray-400" />
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-gray-400" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-muted-foreground" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-muted-foreground" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx b/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx
index 90c1039e..7368f8ec 100644
--- a/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx
@@ -44,16 +44,16 @@ export const NodeWithValidation = memo(
       if (hasError) {
         return {
           Icon: AlertCircle,
-          bgColor: "bg-red-500",
-          textColor: "text-red-700",
-          borderColor: "border-red-500",
-          hoverBgColor: "hover:bg-red-600",
+          bgColor: "bg-destructive",
+          textColor: "text-destructive",
+          borderColor: "border-destructive",
+          hoverBgColor: "hover:bg-destructive",
         };
       }
       if (hasWarning) {
         return {
           Icon: AlertTriangle,
-          bgColor: "bg-yellow-500",
+          bgColor: "bg-amber-500",
           textColor: "text-yellow-700",
           borderColor: "border-yellow-500",
           hoverBgColor: "hover:bg-yellow-600",
@@ -61,10 +61,10 @@ export const NodeWithValidation = memo(
       }
       return {
         Icon: Info,
-        bgColor: "bg-blue-500",
-        textColor: "text-blue-700",
-        borderColor: "border-blue-500",
-        hoverBgColor: "hover:bg-blue-600",
+        bgColor: "bg-primary",
+        textColor: "text-primary",
+        borderColor: "border-primary",
+        hoverBgColor: "hover:bg-primary",
       };
     };
 
@@ -97,7 +97,7 @@ export const NodeWithValidation = memo(
               <div className={`rounded-lg border-2 ${borderColor} bg-white p-3 shadow-lg`}>
                 <div className="mb-2 flex items-center gap-2">
                   <Icon className={`h-4 w-4 ${textColor}`} />
-                  <span className="font-semibold text-gray-900">
+                  <span className="font-semibold text-foreground">
                     {hasError
                       ? "오류"
                       : hasWarning
@@ -109,16 +109,16 @@ export const NodeWithValidation = memo(
                   {nodeValidations.map((validation, index) => (
                     <div
                       key={index}
-                      className="rounded border-l-2 border-gray-300 bg-gray-50 p-2"
+                      className="rounded border-l-2 border-input bg-muted p-2"
                     >
-                      <div className="mb-1 text-xs font-medium text-gray-500">
+                      <div className="mb-1 text-xs font-medium text-muted-foreground">
                         {validation.type}
                       </div>
-                      <div className="text-sm text-gray-700">
+                      <div className="text-sm text-foreground">
                         {validation.message}
                       </div>
                       {validation.affectedNodes && validation.affectedNodes.length > 1 && (
-                        <div className="mt-1 text-xs text-gray-500">
+                        <div className="mt-1 text-xs text-muted-foreground">
                           영향받는 노드: {validation.affectedNodes.length}개
                         </div>
                       )}
diff --git a/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx
index d54478a9..189bc054 100644
--- a/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx
@@ -19,7 +19,7 @@ export const ProcedureCallActionNode = memo(
     return (
       <div
         className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-          selected ? "border-violet-500 shadow-lg" : "border-gray-200"
+          selected ? "border-violet-500 shadow-lg" : "border-border"
         }`}
       >
         {/* 입력 핸들 */}
@@ -43,14 +43,14 @@ export const ProcedureCallActionNode = memo(
         <div className="space-y-2 p-3">
           {/* DB 소스 */}
           <div className="flex items-center gap-2">
-            <Database className="h-3 w-3 text-gray-400" />
-            <span className="text-xs text-gray-600">
+            <Database className="h-3 w-3 text-muted-foreground/70" />
+            <span className="text-xs text-muted-foreground">
               {data.dbSource === "external" ? (
                 <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-700">
                   {data.connectionName || "외부 DB"}
                 </span>
               ) : (
-                <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-700">
+                <span className="rounded bg-primary/10 px-2 py-0.5 text-primary">
                   내부 DB
                 </span>
               )}
@@ -68,39 +68,39 @@ export const ProcedureCallActionNode = memo(
 
           {/* 프로시저명 */}
           <div className="flex items-center gap-2 text-xs">
-            <Workflow className="h-3 w-3 text-gray-400" />
+            <Workflow className="h-3 w-3 text-muted-foreground/70" />
             {hasProcedure ? (
-              <span className="font-mono text-green-600 truncate">
+              <span className="font-mono text-emerald-600 truncate">
                 {data.procedureSchema && data.procedureSchema !== "public"
                   ? `${data.procedureSchema}.`
                   : ""}
                 {data.procedureName}()
               </span>
             ) : (
-              <span className="text-orange-500">프로시저 선택 필요</span>
+              <span className="text-amber-500">프로시저 선택 필요</span>
             )}
           </div>
 
           {/* 파라미터 수 */}
           {hasProcedure && inParams.length > 0 && (
-            <div className="text-xs text-gray-500">
+            <div className="text-xs text-muted-foreground">
               입력 파라미터: {inParams.length}개
             </div>
           )}
 
           {/* 반환 필드 */}
           {hasProcedure && outParams.length > 0 && (
-            <div className="mt-1 space-y-1 border-t border-gray-100 pt-1">
-              <div className="text-[10px] font-medium text-green-600">
+            <div className="mt-1 space-y-1 border-t border-border pt-1">
+              <div className="text-[10px] font-medium text-emerald-600">
                 반환 필드:
               </div>
               {outParams.map((p) => (
                 <div
                   key={p.name}
-                  className="flex items-center justify-between rounded bg-green-50 px-2 py-0.5 text-[10px]"
+                  className="flex items-center justify-between rounded bg-emerald-50 px-2 py-0.5 text-[10px]"
                 >
-                  <span className="font-mono text-green-700">{p.name}</span>
-                  <span className="text-gray-400">{p.dataType}</span>
+                  <span className="font-mono text-emerald-700">{p.name}</span>
+                  <span className="text-muted-foreground/70">{p.dataType}</span>
                 </div>
               ))}
             </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
index d6713f85..e25db7d7 100644
--- a/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
@@ -10,20 +10,20 @@ import { Globe, Lock } from "lucide-react";
 import type { RestAPISourceNodeData } from "@/types/node-editor";
 
 const METHOD_COLORS: Record<string, string> = {
-  GET: "bg-green-100 text-green-700",
-  POST: "bg-blue-100 text-blue-700",
-  PUT: "bg-yellow-100 text-yellow-700",
-  DELETE: "bg-red-100 text-red-700",
+  GET: "bg-emerald-100 text-emerald-700",
+  POST: "bg-primary/10 text-primary",
+  PUT: "bg-amber-100 text-yellow-700",
+  DELETE: "bg-destructive/10 text-destructive",
   PATCH: "bg-purple-100 text-purple-700",
 };
 
 export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISourceNodeData>) => {
-  const methodColor = METHOD_COLORS[data.method] || "bg-gray-100 text-gray-700";
+  const methodColor = METHOD_COLORS[data.method] || "bg-muted text-foreground";
 
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -41,24 +41,24 @@ export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISour
         {/* HTTP 메서드 */}
         <div className="mb-2 flex items-center gap-2">
           <span className={`rounded px-2 py-1 text-xs font-semibold ${methodColor}`}>{data.method}</span>
-          {data.timeout && <span className="text-xs text-gray-500">{data.timeout}ms</span>}
+          {data.timeout && <span className="text-xs text-muted-foreground">{data.timeout}ms</span>}
         </div>
 
         {/* 헤더 */}
         {data.headers && Object.keys(data.headers).length > 0 && (
           <div className="mb-2">
-            <div className="text-xs font-medium text-gray-700">헤더:</div>
+            <div className="text-xs font-medium text-foreground">헤더:</div>
             <div className="mt-1 space-y-1">
               {Object.entries(data.headers)
                 .slice(0, 2)
                 .map(([key, value]) => (
-                  <div key={key} className="flex items-center gap-2 text-xs text-gray-600">
+                  <div key={key} className="flex items-center gap-2 text-xs text-muted-foreground">
                     <span className="font-mono">{key}:</span>
-                    <span className="truncate text-gray-500">{value}</span>
+                    <span className="truncate text-muted-foreground">{value}</span>
                   </div>
                 ))}
               {Object.keys(data.headers).length > 2 && (
-                <div className="text-xs text-gray-400">... 외 {Object.keys(data.headers).length - 2}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {Object.keys(data.headers).length - 2}개</div>
               )}
             </div>
           </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx
index c4027047..52756763 100644
--- a/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx
@@ -12,11 +12,11 @@ import type { ScriptActionNodeData } from "@/types/node-editor";
 
 // 스크립트 타입별 아이콘 색상
 const SCRIPT_TYPE_COLORS: Record<string, { bg: string; text: string; label: string }> = {
-  python: { bg: "bg-yellow-100", text: "text-yellow-700", label: "Python" },
-  shell: { bg: "bg-green-100", text: "text-green-700", label: "Shell" },
-  powershell: { bg: "bg-blue-100", text: "text-blue-700", label: "PowerShell" },
+  python: { bg: "bg-amber-100", text: "text-yellow-700", label: "Python" },
+  shell: { bg: "bg-emerald-100", text: "text-emerald-700", label: "Shell" },
+  powershell: { bg: "bg-primary/10", text: "text-primary", label: "PowerShell" },
   node: { bg: "bg-emerald-100", text: "text-emerald-700", label: "Node.js" },
-  executable: { bg: "bg-gray-100", text: "text-gray-700", label: "실행파일" },
+  executable: { bg: "bg-muted", text: "text-foreground", label: "실행파일" },
 };
 
 export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptActionNodeData>) => {
@@ -26,7 +26,7 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-emerald-500 shadow-lg" : "border-gray-200"
+        selected ? "border-emerald-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -51,7 +51,7 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
           <span className={`rounded px-2 py-0.5 text-xs font-medium ${scriptTypeInfo.bg} ${scriptTypeInfo.text}`}>
             {scriptTypeInfo.label}
           </span>
-          <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+          <span className="rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
             {data.executionMode === "inline" ? "인라인" : "파일"}
           </span>
         </div>
@@ -60,25 +60,25 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
         <div className="flex items-center gap-2 text-xs">
           {data.executionMode === "inline" ? (
             <>
-              <FileCode className="h-3 w-3 text-gray-400" />
-              <span className="text-gray-600">
+              <FileCode className="h-3 w-3 text-muted-foreground/70" />
+              <span className="text-muted-foreground">
                 {hasScript ? (
-                  <span className="text-green-600">
+                  <span className="text-emerald-600">
                     {data.inlineScript!.split("\n").length}줄 스크립트
                   </span>
                 ) : (
-                  <span className="text-orange-500">스크립트 입력 필요</span>
+                  <span className="text-amber-500">스크립트 입력 필요</span>
                 )}
               </span>
             </>
           ) : (
             <>
-              <Play className="h-3 w-3 text-gray-400" />
-              <span className="text-gray-600">
+              <Play className="h-3 w-3 text-muted-foreground/70" />
+              <span className="text-muted-foreground">
                 {hasScript ? (
-                  <span className="truncate text-green-600">{data.scriptPath}</span>
+                  <span className="truncate text-emerald-600">{data.scriptPath}</span>
                 ) : (
-                  <span className="text-orange-500">파일 경로 필요</span>
+                  <span className="text-amber-500">파일 경로 필요</span>
                 )}
               </span>
             </>
@@ -87,8 +87,8 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
 
         {/* 입력 방식 */}
         <div className="text-xs">
-          <span className="text-gray-500">입력: </span>
-          <span className="text-gray-700">
+          <span className="text-muted-foreground">입력: </span>
+          <span className="text-foreground">
             {data.inputMethod === "stdin" && "표준입력 (stdin)"}
             {data.inputMethod === "args" && "명령줄 인자"}
             {data.inputMethod === "env" && "환경변수"}
@@ -98,7 +98,7 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
 
         {/* 타임아웃 */}
         {data.options?.timeout && (
-          <div className="text-xs text-gray-500">
+          <div className="text-xs text-muted-foreground">
             타임아웃: {Math.round(data.options.timeout / 1000)}초
           </div>
         )}
diff --git a/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
index f9a253c7..fd038c99 100644
--- a/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
@@ -18,11 +18,11 @@ export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNo
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-blue-500 shadow-lg" : "border-gray-200"
+        selected ? "border-primary shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-blue-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-primary px-3 py-2 text-white">
         <Database className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">{data.displayName || data.tableName || "테이블 소스"}</div>
@@ -34,35 +34,35 @@ export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNo
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">📍 내부 데이터베이스</div>
+        <div className="mb-2 text-xs font-medium text-muted-foreground">📍 내부 데이터베이스</div>
 
         {/* 필드 목록 */}
         <div className="space-y-1">
-          <div className="text-xs font-medium text-gray-700">출력 필드:</div>
+          <div className="text-xs font-medium text-foreground">출력 필드:</div>
           <div className="max-h-[150px] overflow-y-auto">
             {data.fields && data.fields.length > 0 ? (
               data.fields.slice(0, 5).map((field) => (
-                <div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
-                  <div className="h-1.5 w-1.5 rounded-full bg-blue-400" />
+                <div key={field.name} className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <div className="h-1.5 w-1.5 rounded-full bg-primary/70" />
                   <span className="font-medium">{field.label || field.displayName || field.name}</span>
                   {(field.label || field.displayName) && field.label !== field.name && (
-                    <span className="font-mono text-gray-400">({field.name})</span>
+                    <span className="font-mono text-muted-foreground/70">({field.name})</span>
                   )}
-                  <span className="text-gray-400">{field.type}</span>
+                  <span className="text-muted-foreground/70">{field.type}</span>
                 </div>
               ))
             ) : (
-              <div className="text-xs text-gray-400">필드 없음</div>
+              <div className="text-xs text-muted-foreground/70">필드 없음</div>
             )}
             {data.fields && data.fields.length > 5 && (
-              <div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
+              <div className="text-xs text-muted-foreground/70">... 외 {data.fields.length - 5}개</div>
             )}
           </div>
         </div>
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-primary !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
index b7b0dfee..51a4d027 100644
--- a/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
@@ -13,14 +13,14 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-blue-500 shadow-lg" : "border-gray-200"
+        selected ? "border-primary shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-primary !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-blue-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-primary px-3 py-2 text-white">
         <Edit className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">UPDATE</div>
@@ -30,29 +30,29 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
           타겟: {data.displayName || data.targetTable}
           {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
-            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+            <span className="ml-1 font-mono text-muted-foreground/70">({data.targetTable})</span>
           )}
         </div>
 
         {/* WHERE 조건 */}
         {data.whereConditions && data.whereConditions.length > 0 && (
           <div className="mb-3 space-y-1">
-            <div className="text-xs font-medium text-gray-700">WHERE 조건:</div>
+            <div className="text-xs font-medium text-foreground">WHERE 조건:</div>
             <div className="max-h-[80px] space-y-1 overflow-y-auto">
               {data.whereConditions.slice(0, 2).map((condition, idx) => (
-                <div key={idx} className="rounded bg-blue-50 px-2 py-1 text-xs">
-                  <span className="font-mono text-gray-700">{condition.fieldLabel || condition.field}</span>
-                  <span className="mx-1 text-blue-600">{condition.operator}</span>
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-primary/10 px-2 py-1 text-xs">
+                  <span className="font-mono text-foreground">{condition.fieldLabel || condition.field}</span>
+                  <span className="mx-1 text-primary">{condition.operator}</span>
+                  <span className="text-muted-foreground">
                     {condition.sourceFieldLabel || condition.sourceField || condition.staticValue || "?"}
                   </span>
                 </div>
               ))}
               {data.whereConditions.length > 2 && (
-                <div className="text-xs text-gray-400">... 외 {data.whereConditions.length - 2}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.whereConditions.length - 2}개</div>
               )}
             </div>
           </div>
@@ -61,19 +61,19 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
         {/* 필드 매핑 */}
         {data.fieldMappings && data.fieldMappings.length > 0 && (
           <div className="space-y-1">
-            <div className="text-xs font-medium text-gray-700">업데이트 필드:</div>
+            <div className="text-xs font-medium text-foreground">업데이트 필드:</div>
             <div className="max-h-[100px] space-y-1 overflow-y-auto">
               {data.fieldMappings.slice(0, 3).map((mapping, idx) => (
-                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-muted px-2 py-1 text-xs">
+                  <span className="text-muted-foreground">
                     {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
                   </span>
-                  <span className="mx-1 text-gray-400">→</span>
-                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                  <span className="mx-1 text-muted-foreground/70">→</span>
+                  <span className="font-mono text-foreground">{mapping.targetFieldLabel || mapping.targetField}</span>
                 </div>
               ))}
               {data.fieldMappings.length > 3 && (
-                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 3}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.fieldMappings.length - 3}개</div>
               )}
             </div>
           </div>
@@ -82,7 +82,7 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
         {/* 옵션 */}
         {data.options && data.options.batchSize && (
           <div className="mt-2">
-            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">
+            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
               배치 {data.options.batchSize}건
             </span>
           </div>
@@ -90,7 +90,7 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-primary !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
index 4e5bdeba..ece58159 100644
--- a/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
@@ -14,7 +14,7 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -29,17 +29,17 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
           타겟: {data.displayName || data.targetTable}
           {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
-            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+            <span className="ml-1 font-mono text-muted-foreground/70">({data.targetTable})</span>
           )}
         </div>
 
         {/* 충돌 키 */}
         {data.conflictKeys && data.conflictKeys.length > 0 && (
           <div className="mb-2">
-            <div className="text-xs font-medium text-gray-700">충돌 키:</div>
+            <div className="text-xs font-medium text-foreground">충돌 키:</div>
             <div className="mt-1 flex flex-wrap gap-1">
               {data.conflictKeys.map((key, idx) => (
                 <span key={idx} className="rounded bg-purple-100 px-2 py-0.5 text-xs text-purple-700">
@@ -53,19 +53,19 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
         {/* 필드 매핑 */}
         {data.fieldMappings && data.fieldMappings.length > 0 && (
           <div className="mb-2">
-            <div className="text-xs font-medium text-gray-700">필드 매핑:</div>
+            <div className="text-xs font-medium text-foreground">필드 매핑:</div>
             <div className="mt-1 space-y-1">
               {data.fieldMappings.slice(0, 3).map((mapping, idx) => (
-                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-muted px-2 py-1 text-xs">
+                  <span className="text-muted-foreground">
                     {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
                   </span>
-                  <span className="mx-1 text-gray-400">→</span>
-                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                  <span className="mx-1 text-muted-foreground/70">→</span>
+                  <span className="font-mono text-foreground">{mapping.targetFieldLabel || mapping.targetField}</span>
                 </div>
               ))}
               {data.fieldMappings.length > 3 && (
-                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 3}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.fieldMappings.length - 3}개</div>
               )}
             </div>
           </div>
@@ -74,10 +74,10 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
         {/* 옵션 */}
         <div className="flex flex-wrap gap-1">
           {data.options?.updateOnConflict && (
-            <span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">충돌 시 업데이트</span>
+            <span className="rounded bg-primary/10 px-2 py-0.5 text-xs text-primary">충돌 시 업데이트</span>
           )}
           {data.options?.batchSize && (
-            <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+            <span className="rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
               배치: {data.options.batchSize}
             </span>
           )}
diff --git a/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx b/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
index 316f93b0..ddfc47e3 100644
--- a/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
+++ b/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
@@ -51,9 +51,9 @@ export function PropertiesPanel() {
         className="flex items-center justify-between border-b bg-white p-4"
       >
         <div>
-          <h3 className="text-sm font-semibold text-gray-900">속성</h3>
+          <h3 className="text-sm font-semibold text-foreground">속성</h3>
           {selectedNode && (
-            <p className="mt-0.5 text-xs text-gray-500">{getNodeTypeLabel(selectedNode.type as NodeType)}</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">{getNodeTypeLabel(selectedNode.type as NodeType)}</p>
           )}
         </div>
         <Button variant="ghost" size="sm" onClick={() => setShowPropertiesPanel(false)} className="h-6 w-6 p-0">
@@ -72,7 +72,7 @@ export function PropertiesPanel() {
       >
         {selectedNodes.length === 0 ? (
           <div className="flex h-full items-center justify-center p-4">
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-center text-sm text-muted-foreground">
               <div className="mb-2 text-2xl">📝</div>
               <p>노드를 선택하여</p>
               <p>속성을 편집하세요</p>
@@ -82,7 +82,7 @@ export function PropertiesPanel() {
           <NodePropertiesRenderer node={selectedNode} />
         ) : (
           <div className="flex h-full items-center justify-center p-4">
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-center text-sm text-muted-foreground">
               <div className="mb-2 text-2xl">📋</div>
               <p>{selectedNodes.length}개의 노드가</p>
               <p>선택되었습니다</p>
@@ -154,14 +154,14 @@ function NodePropertiesRenderer({ node }: { node: any }) {
     default:
       return (
         <div className="p-4">
-          <div className="rounded border border-yellow-200 bg-yellow-50 p-4 text-sm">
+          <div className="rounded border border-amber-200 bg-amber-50 p-4 text-sm">
             <p className="font-medium text-yellow-800">🚧 속성 편집 준비 중</p>
             <p className="mt-2 text-xs text-yellow-700">
               {getNodeTypeLabel(node.type as NodeType)} 노드의 속성 편집 UI는 곧 구현될 예정입니다.
             </p>
             <div className="mt-3 rounded bg-white p-2 text-xs">
-              <p className="font-medium text-gray-700">노드 ID:</p>
-              <p className="font-mono text-gray-600">{node.id}</p>
+              <p className="font-medium text-foreground">노드 ID:</p>
+              <p className="font-mono text-muted-foreground">{node.id}</p>
             </div>
           </div>
         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx b/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx
index a8a5b149..4222f961 100644
--- a/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx
+++ b/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx
@@ -78,9 +78,9 @@ export const ValidationPanel = memo(
 
     if (validations.length === 0) {
       return (
-        <div className="flex h-full flex-col border-l border-gray-200 bg-white">
-          <div className="flex items-center justify-between border-b border-gray-200 p-4">
-            <h3 className="text-sm font-semibold text-gray-900">검증 결과</h3>
+        <div className="flex h-full flex-col border-l border-border bg-white">
+          <div className="flex items-center justify-between border-b border-border p-4">
+            <h3 className="text-sm font-semibold text-foreground">검증 결과</h3>
             {onClose && (
               <Button
                 variant="ghost"
@@ -94,11 +94,11 @@ export const ValidationPanel = memo(
           </div>
           <div className="flex flex-1 items-center justify-center p-8 text-center">
             <div>
-              <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                <Info className="h-6 w-6 text-green-600" />
+              <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100">
+                <Info className="h-6 w-6 text-emerald-600" />
               </div>
-              <p className="text-sm font-medium text-gray-900">문제 없음</p>
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-sm font-medium text-foreground">문제 없음</p>
+              <p className="mt-1 text-xs text-muted-foreground">
                 플로우에 문제가 발견되지 않았습니다
               </p>
             </div>
@@ -108,10 +108,10 @@ export const ValidationPanel = memo(
     }
 
     return (
-      <div className="flex h-full flex-col border-l border-gray-200 bg-white">
+      <div className="flex h-full flex-col border-l border-border bg-white">
         {/* 헤더 */}
-        <div className="flex items-center justify-between border-b border-gray-200 p-4">
-          <h3 className="text-sm font-semibold text-gray-900">검증 결과</h3>
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <h3 className="text-sm font-semibold text-foreground">검증 결과</h3>
           {onClose && (
             <Button
               variant="ghost"
@@ -125,7 +125,7 @@ export const ValidationPanel = memo(
         </div>
 
         {/* 요약 */}
-        <div className="border-b border-gray-200 bg-gray-50 p-4">
+        <div className="border-b border-border bg-muted p-4">
           <div className="flex items-center gap-3">
             {summary.errorCount > 0 && (
               <Badge variant="destructive" className="gap-1">
@@ -134,7 +134,7 @@ export const ValidationPanel = memo(
               </Badge>
             )}
             {summary.warningCount > 0 && (
-              <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
+              <Badge className="gap-1 bg-amber-500 hover:bg-yellow-600">
                 <AlertTriangle className="h-3 w-3" />
                 경고 {summary.warningCount}
               </Badge>
@@ -147,7 +147,7 @@ export const ValidationPanel = memo(
             )}
           </div>
           {summary.hasBlockingIssues && (
-            <p className="mt-2 text-xs text-red-600">
+            <p className="mt-2 text-xs text-destructive">
               ⛔ 오류를 해결해야 저장할 수 있습니다
             </p>
           )}
@@ -174,34 +174,34 @@ export const ValidationPanel = memo(
                     className={cn(
                       "flex w-full items-center gap-2 rounded-lg p-3 text-left transition-colors",
                       firstValidation.severity === "error"
-                        ? "bg-red-50 hover:bg-red-100"
+                        ? "bg-destructive/10 hover:bg-destructive/10"
                         : firstValidation.severity === "warning"
-                          ? "bg-yellow-50 hover:bg-yellow-100"
-                          : "bg-blue-50 hover:bg-blue-100"
+                          ? "bg-amber-50 hover:bg-amber-100"
+                          : "bg-primary/10 hover:bg-primary/10"
                     )}
                   >
                     <Icon
                       className={cn(
                         "h-4 w-4 shrink-0",
                         firstValidation.severity === "error"
-                          ? "text-red-600"
+                          ? "text-destructive"
                           : firstValidation.severity === "warning"
-                            ? "text-yellow-600"
-                            : "text-blue-600"
+                            ? "text-amber-600"
+                            : "text-primary"
                       )}
                     />
                     <div className="flex-1">
-                      <div className="text-sm font-medium text-gray-900">
+                      <div className="text-sm font-medium text-foreground">
                         {getTypeLabel(type)}
                       </div>
-                      <div className="text-xs text-gray-500">
+                      <div className="text-xs text-muted-foreground">
                         {typeValidations.length}개 발견
                       </div>
                     </div>
                     {isExpanded ? (
-                      <ChevronUp className="h-4 w-4 text-gray-400" />
+                      <ChevronUp className="h-4 w-4 text-muted-foreground/70" />
                     ) : (
-                      <ChevronDown className="h-4 w-4 text-gray-400" />
+                      <ChevronDown className="h-4 w-4 text-muted-foreground/70" />
                     )}
                   </button>
 
@@ -211,10 +211,10 @@ export const ValidationPanel = memo(
                       {typeValidations.map((validation, index) => (
                         <div
                           key={index}
-                          className="group cursor-pointer rounded-lg border border-gray-200 bg-white p-3 transition-all hover:border-gray-300 hover:shadow-sm"
+                          className="group cursor-pointer rounded-lg border border-border bg-white p-3 transition-all hover:border-input hover:shadow-sm"
                           onClick={() => onNodeClick?.(validation.nodeId)}
                         >
-                          <div className="text-xs text-gray-700">
+                          <div className="text-xs text-foreground">
                             {validation.message}
                           </div>
                           {validation.affectedNodes && validation.affectedNodes.length > 1 && (
@@ -224,7 +224,7 @@ export const ValidationPanel = memo(
                               </Badge>
                             </div>
                           )}
-                          <div className="mt-2 text-[10px] text-gray-400 opacity-0 transition-opacity group-hover:opacity-100">
+                          <div className="mt-2 text-[10px] text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100">
                             클릭하여 노드 보기
                           </div>
                         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx
index 6d3d7311..dfacc3a3 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx
@@ -234,16 +234,16 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
             <Layers className="h-4 w-4 text-purple-600" />
             <h3 className="text-sm font-semibold">그룹 기준 필드</h3>
           </div>
-          <p className="mb-2 text-xs text-gray-500">
+          <p className="mb-2 text-xs text-muted-foreground">
             선택한 필드를 기준으로 데이터를 그룹화합니다. 선택하지 않으면 전체 데이터를 하나의 그룹으로 처리합니다.
           </p>
 
           {sourceFields.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
               연결된 소스 노드가 없습니다
             </div>
           ) : (
-            <div className="max-h-40 overflow-y-auto rounded border bg-gray-50 p-2">
+            <div className="max-h-40 overflow-y-auto rounded border bg-muted p-2">
               <div className="space-y-1">
                 {sourceFields.map((field) => {
                   const isChecked = groupByFields.some((f) => f.field === field.name);
@@ -263,7 +263,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                       >
                         <span className="font-medium">{field.label || field.name}</span>
                         {field.label && field.label !== field.name && (
-                          <span className="ml-1 text-gray-400">({field.name})</span>
+                          <span className="ml-1 text-muted-foreground/70">({field.name})</span>
                         )}
                       </label>
                     </div>
@@ -299,10 +299,10 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
               연산 추가
             </Button>
           </div>
-          <p className="mb-2 text-xs text-gray-500">SUM, COUNT, AVG 등 집계 연산을 설정합니다.</p>
+          <p className="mb-2 text-xs text-muted-foreground">SUM, COUNT, AVG 등 집계 연산을 설정합니다.</p>
 
           {aggregations.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-4 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-4 text-center text-xs text-muted-foreground">
               집계 연산을 추가하세요
             </div>
           ) : (
@@ -315,7 +315,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                       size="sm"
                       variant="ghost"
                       onClick={() => handleRemoveAggregation(index)}
-                      className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -324,7 +324,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                   <div className="space-y-2">
                     {/* 집계 함수 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">집계 함수</Label>
+                      <Label className="text-xs text-muted-foreground">집계 함수</Label>
                       <Select
                         value={agg.function}
                         onValueChange={(value) =>
@@ -339,7 +339,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                             <SelectItem key={func.value} value={func.value} className="text-xs">
                               <div>
                                 <div className="font-medium">{func.label}</div>
-                                <div className="text-gray-400">{func.description}</div>
+                                <div className="text-muted-foreground/70">{func.description}</div>
                               </div>
                             </SelectItem>
                           ))}
@@ -349,7 +349,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
 
                     {/* 소스 필드 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">소스 필드</Label>
+                      <Label className="text-xs text-muted-foreground">소스 필드</Label>
                       <Select
                         value={agg.sourceField || ""}
                         onValueChange={(value) => handleAggregationChange(index, "sourceField", value)}
@@ -359,7 +359,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                         </SelectTrigger>
                         <SelectContent>
                           {sourceFields.length === 0 ? (
-                            <div className="p-2 text-center text-xs text-gray-400">
+                            <div className="p-2 text-center text-xs text-muted-foreground/70">
                               연결된 소스 노드가 없습니다
                             </div>
                           ) : (
@@ -382,21 +382,21 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
 
                     {/* 출력 필드명 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드명</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드명</Label>
                       <Input
                         value={agg.outputField || ""}
                         onChange={(e) => handleAggregationChange(index, "outputField", e.target.value)}
                         placeholder="예: total_amount"
                         className="mt-1 h-8 text-xs"
                       />
-                      <p className="mt-1 text-xs text-gray-400">
+                      <p className="mt-1 text-xs text-muted-foreground/70">
                         집계 결과가 저장될 필드명입니다
                       </p>
                     </div>
 
                     {/* 출력 필드 라벨 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드 라벨 (선택)</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드 라벨 (선택)</Label>
                       <Input
                         value={agg.outputFieldLabel || ""}
                         onChange={(e) => handleAggregationChange(index, "outputFieldLabel", e.target.value)}
@@ -429,16 +429,16 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
               조건 추가
             </Button>
           </div>
-          <p className="mb-2 text-xs text-gray-500">집계 결과에 대한 필터링 조건을 설정합니다 (선택 사항).</p>
+          <p className="mb-2 text-xs text-muted-foreground">집계 결과에 대한 필터링 조건을 설정합니다 (선택 사항).</p>
 
           {havingConditions.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-400">
+            <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground/70">
               집계 후 필터링이 필요하면 조건을 추가하세요
             </div>
           ) : (
             <div className="space-y-2">
               {havingConditions.map((condition, index) => (
-                <div key={index} className="flex items-center gap-2 rounded border bg-gray-50 p-2">
+                <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
                   {/* 집계 결과 필드 선택 */}
                   <Select
                     value={condition.field || ""}
@@ -486,7 +486,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                     size="sm"
                     variant="ghost"
                     onClick={() => handleRemoveHavingCondition(index)}
-                    className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                    className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -498,9 +498,9 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
 
         {/* 미리보기 */}
         {(groupByFields.length > 0 || aggregations.length > 0) && (
-          <div className="rounded border bg-gray-50 p-3">
-            <h4 className="mb-2 text-xs font-semibold text-gray-700">집계 결과 미리보기</h4>
-            <div className="text-xs text-gray-600">
+          <div className="rounded border bg-muted p-3">
+            <h4 className="mb-2 text-xs font-semibold text-foreground">집계 결과 미리보기</h4>
+            <div className="text-xs text-muted-foreground">
               <div className="mb-1">
                 <span className="font-medium">그룹 기준:</span>{" "}
                 {groupByFields.length > 0
diff --git a/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
index 0636210a..c4910fd4 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
@@ -30,9 +30,9 @@ export function CommentProperties({ nodeId, data }: CommentPropertiesProps) {
 
   return (
     <div className="space-y-4 p-4 pb-8">
-      <div className="flex items-center gap-2 rounded-md bg-yellow-50 p-2">
-        <MessageSquare className="h-4 w-4 text-yellow-600" />
-        <span className="font-semibold text-yellow-600">주석</span>
+      <div className="flex items-center gap-2 rounded-md bg-amber-50 p-2">
+        <MessageSquare className="h-4 w-4 text-amber-600" />
+        <span className="font-semibold text-amber-600">주석</span>
       </div>
 
       <div>
@@ -47,7 +47,7 @@ export function CommentProperties({ nodeId, data }: CommentPropertiesProps) {
           className="mt-1 text-sm"
           rows={8}
         />
-        <p className="mt-1 text-xs text-gray-500">이 노드는 플로우 실행에 영향을 주지 않습니다.</p>
+        <p className="mt-1 text-xs text-muted-foreground">이 노드는 플로우 실행에 영향을 주지 않습니다.</p>
       </div>
 
       <Button onClick={handleApply} className="w-full">
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
index 76354925..16799cb7 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
@@ -92,7 +92,7 @@ function TableCombobox({
           {selectedTable ? (
             <span className="truncate">
               {selectedTable.tableLabel}
-              <span className="ml-1 text-gray-400">({selectedTable.tableName})</span>
+              <span className="ml-1 text-muted-foreground/70">({selectedTable.tableName})</span>
             </span>
           ) : (
             <span className="text-muted-foreground">테이블 선택</span>
@@ -119,7 +119,7 @@ function TableCombobox({
                   <Check className={cn("mr-2 h-3 w-3", value === table.tableName ? "opacity-100" : "opacity-0")} />
                   <div className="flex flex-col">
                     <span className="font-medium">{table.tableLabel}</span>
-                    <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                    <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                   </div>
                 </CommandItem>
               ))}
@@ -159,7 +159,7 @@ function ColumnCombobox({
           {selectedColumn ? (
             <span className="truncate">
               {selectedColumn.columnLabel}
-              <span className="ml-1 text-gray-400">({selectedColumn.columnName})</span>
+              <span className="ml-1 text-muted-foreground/70">({selectedColumn.columnName})</span>
             </span>
           ) : (
             <span className="text-muted-foreground">컬럼 선택</span>
@@ -185,7 +185,7 @@ function ColumnCombobox({
                 >
                   <Check className={cn("mr-2 h-3 w-3", value === col.columnName ? "opacity-100" : "opacity-0")} />
                   <span className="font-medium">{col.columnLabel}</span>
-                  <span className="ml-1 text-[10px] text-gray-400">({col.columnName})</span>
+                  <span className="ml-1 text-[10px] text-muted-foreground/70">({col.columnName})</span>
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -224,18 +224,18 @@ function ColumnSelectSection({
 
   return (
     <div>
-      <Label className="text-xs text-gray-600">
+      <Label className="text-xs text-muted-foreground">
         <Search className="mr-1 inline h-3 w-3" />
         비교할 컬럼
       </Label>
       {isLoading ? (
-        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+        <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
           컬럼 목록 로딩 중...
         </div>
       ) : columns && columns.length > 0 ? (
         <ColumnCombobox columns={columns} value={lookupField} onSelect={onSelect} placeholder="컬럼 검색..." />
       ) : (
-        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+        <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
           컬럼 목록을 로드할 수 없습니다
         </div>
       )}
@@ -669,7 +669,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
 
           {!targetLookup ? (
             <div className="space-y-2">
-              <div className="rounded border border-dashed p-3 text-center text-xs text-gray-400">
+              <div className="rounded border border-dashed p-3 text-center text-xs text-muted-foreground/70">
                 DB의 기존값과 비교하려면 타겟 테이블을 설정하세요.
               </div>
               <Button
@@ -686,14 +686,14 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
               </Button>
             </div>
           ) : (
-            <div className="space-y-2 rounded border bg-orange-50 p-3">
+            <div className="space-y-2 rounded border bg-amber-50 p-3">
               <div className="flex items-center justify-between">
                 <span className="text-xs font-medium text-orange-700">타겟 테이블</span>
                 <Button
                   size="sm"
                   variant="ghost"
                   onClick={handleRemoveTargetLookup}
-                  className="h-5 px-1 text-xs text-orange-500 hover:text-orange-700"
+                  className="h-5 px-1 text-xs text-amber-500 hover:text-orange-700"
                 >
                   제거
                 </Button>
@@ -708,7 +708,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                   placeholder="비교할 테이블 검색..."
                 />
               ) : (
-                <div className="rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                <div className="rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                   테이블 로딩 중...
                 </div>
               )}
@@ -716,7 +716,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
               {/* 키 필드 매핑 */}
               {targetLookup.tableName && (
                 <div className="space-y-1.5">
-                  <Label className="text-xs text-orange-600">조회 키 (소스 → 타겟)</Label>
+                  <Label className="text-xs text-amber-600">조회 키 (소스 → 타겟)</Label>
                   <div className="flex items-center gap-1.5">
                     <Select
                       value={targetLookup.lookupKeys?.[0]?.sourceField || ""}
@@ -736,7 +736,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                         ))}
                       </SelectContent>
                     </Select>
-                    <span className="text-xs text-gray-400">=</span>
+                    <span className="text-xs text-muted-foreground/70">=</span>
                     {targetLookupColumns.length > 0 ? (
                       <Select
                         value={targetLookup.lookupKeys?.[0]?.targetField || ""}
@@ -757,12 +757,12 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                         </SelectContent>
                       </Select>
                     ) : (
-                      <div className="flex-1 rounded border border-dashed bg-gray-50 p-1 text-center text-[10px] text-gray-400">
+                      <div className="flex-1 rounded border border-dashed bg-muted p-1 text-center text-[10px] text-muted-foreground/70">
                         컬럼 로딩 중...
                       </div>
                     )}
                   </div>
-                  <div className="rounded bg-orange-100 p-1.5 text-[10px] text-orange-600">
+                  <div className="rounded bg-amber-100 p-1.5 text-[10px] text-amber-600">
                     비교 값 타입에서 "타겟 필드 (DB 기존값)"을 선택하면 이 테이블의 기존값과 비교합니다.
                   </div>
                 </div>
@@ -784,7 +784,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
           {conditions.length > 0 ? (
             <div className="space-y-2">
               {conditions.map((condition, index) => (
-                <div key={index} className="rounded border bg-yellow-50 p-3">
+                <div key={index} className="rounded border bg-amber-50 p-3">
                   <div className="mb-2 flex items-center justify-between">
                     <div className="flex items-center gap-2">
                       <span className="text-xs font-medium text-yellow-700">조건 #{index + 1}</span>
@@ -806,7 +806,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
 
                   <div className="space-y-2">
                     <div>
-                      <Label className="text-xs text-gray-600">필드명</Label>
+                      <Label className="text-xs text-muted-foreground">필드명</Label>
                       {availableFields.length > 0 ? (
                         <Select
                           value={condition.field}
@@ -819,20 +819,20 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                             {availableFields.map((field) => (
                               <SelectItem key={field.name} value={field.name}>
                                 {field.label || field.name}
-                                {field.type && <span className="ml-2 text-xs text-gray-400">({field.type})</span>}
+                                {field.type && <span className="ml-2 text-xs text-muted-foreground/70">({field.type})</span>}
                               </SelectItem>
                             ))}
                           </SelectContent>
                         </Select>
                       ) : (
-                        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                        <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                           소스 노드를 연결하세요
                         </div>
                       )}
                     </div>
 
                     <div>
-                      <Label className="text-xs text-gray-600">연산자</Label>
+                      <Label className="text-xs text-muted-foreground">연산자</Label>
                       <Select
                         value={condition.operator}
                         onValueChange={(value) => handleConditionChange(index, "operator", value)}
@@ -854,12 +854,12 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                     {isExistsOperator(condition.operator) && (
                       <>
                         <div>
-                          <Label className="text-xs text-gray-600">
+                          <Label className="text-xs text-muted-foreground">
                             <Database className="mr-1 inline h-3 w-3" />
                             조회할 테이블
                           </Label>
                           {loadingTables ? (
-                            <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                            <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                               테이블 목록 로딩 중...
                             </div>
                           ) : allTables.length > 0 ? (
@@ -870,7 +870,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                               placeholder="테이블 검색..."
                             />
                           ) : (
-                            <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                            <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                               테이블 목록을 로드할 수 없습니다
                             </div>
                           )}
@@ -901,7 +901,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                       !isExistsOperator(condition.operator) && (
                         <>
                           <div>
-                            <Label className="text-xs text-gray-600">비교 값 타입</Label>
+                            <Label className="text-xs text-muted-foreground">비교 값 타입</Label>
                             <Select
                               value={(condition as any).valueType || "static"}
                               onValueChange={(value) => handleConditionChange(index, "valueType", value)}
@@ -920,7 +920,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                           </div>
 
                           <div>
-                            <Label className="text-xs text-gray-600">
+                            <Label className="text-xs text-muted-foreground">
                               {(condition as any).valueType === "target"
                                 ? "타겟 필드 (DB 기존값)"
                                 : (condition as any).valueType === "field"
@@ -941,13 +941,13 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                                     {targetLookupColumns.map((col) => (
                                       <SelectItem key={col.columnName} value={col.columnName}>
                                         {col.columnLabel || col.columnName}
-                                        <span className="ml-2 text-xs text-gray-400">({col.dataType})</span>
+                                        <span className="ml-2 text-xs text-muted-foreground/70">({col.dataType})</span>
                                       </SelectItem>
                                     ))}
                                   </SelectContent>
                                 </Select>
                               ) : (
-                                <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                                <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                                   타겟 조회를 먼저 설정하세요
                                 </div>
                               )
@@ -966,14 +966,14 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                                       <SelectItem key={field.name} value={field.name}>
                                         {field.label || field.name}
                                         {field.type && (
-                                          <span className="ml-2 text-xs text-gray-400">({field.type})</span>
+                                          <span className="ml-2 text-xs text-muted-foreground/70">({field.type})</span>
                                         )}
                                       </SelectItem>
                                     ))}
                                   </SelectContent>
                                 </Select>
                               ) : (
-                                <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                                <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                                   소스 노드를 연결하세요
                                 </div>
                               )
@@ -994,7 +994,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
               ))}
             </div>
           ) : (
-            <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
+            <div className="rounded border border-dashed p-4 text-center text-xs text-muted-foreground/70">
               조건식이 없습니다. "추가" 버튼을 클릭하세요.
             </div>
           )}
@@ -1003,10 +1003,10 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
 
         {/* 안내 */}
         <div className="space-y-2">
-          <div className="rounded bg-blue-50 p-3 text-xs text-blue-700">
+          <div className="rounded bg-primary/10 p-3 text-xs text-primary">
             <strong>소스 노드 연결</strong>: 테이블/외부DB 노드를 연결하면 자동으로 필드 목록이 표시됩니다.
           </div>
-          <div className="rounded bg-green-50 p-3 text-xs text-green-700">
+          <div className="rounded bg-emerald-50 p-3 text-xs text-emerald-700">
             <strong>비교 값 타입</strong>:<br />
             - <strong>고정값</strong>: 직접 입력한 값과 비교 (예: age &gt; 30)
             <br />- <strong>필드 참조</strong>: 다른 필드의 값과 비교 (예: 주문수량 &gt; 재고수량)
@@ -1018,13 +1018,13 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
             <br />
             (예: 품명이 품목정보 테이블에 없으면 자동 등록)
           </div>
-          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+          <div className="rounded bg-amber-50 p-3 text-xs text-yellow-700">
             <strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
           </div>
-          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+          <div className="rounded bg-amber-50 p-3 text-xs text-yellow-700">
             <strong>OR</strong>: 하나라도 참이면 TRUE 출력
           </div>
-          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+          <div className="rounded bg-amber-50 p-3 text-xs text-yellow-700">
             TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
           </div>
         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
index dbe81803..d641a5f3 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
@@ -135,7 +135,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
         {/* 소스 필드 */}
         {transform.type !== "CONCAT" && (
           <div>
-            <Label className="text-xs text-gray-600">소스 필드</Label>
+            <Label className="text-xs text-muted-foreground">소스 필드</Label>
             <Select
               value={transform.sourceField || ""}
               onValueChange={(value) => handleTransformationChange(index, "sourceField", value)}
@@ -145,7 +145,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               </SelectTrigger>
               <SelectContent>
                 {sourceFields.length === 0 ? (
-                  <div className="p-2 text-center text-xs text-gray-400">연결된 소스 노드가 없습니다</div>
+                  <div className="p-2 text-center text-xs text-muted-foreground/70">연결된 소스 노드가 없습니다</div>
                 ) : (
                   sourceFields.map((field) => (
                     <SelectItem key={field.name} value={field.name} className="text-xs">
@@ -165,22 +165,22 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
 
         {/* 타겟 필드 */}
         <div>
-          <Label className="text-xs text-gray-600">타겟 필드명 (선택)</Label>
+          <Label className="text-xs text-muted-foreground">타겟 필드명 (선택)</Label>
           <Input
             value={transform.targetField || ""}
             onChange={(e) => handleTransformationChange(index, "targetField", e.target.value)}
             placeholder="비어있으면 소스 필드에 적용"
             className="mt-1 h-8 text-xs"
           />
-          <p className="mt-1 text-xs text-gray-400">
+          <p className="mt-1 text-xs text-muted-foreground/70">
             {transform.targetField ? (
               transform.targetField === transform.sourceField ? (
-                <span className="text-indigo-600">✓ 소스 필드를 덮어씁니다</span>
+                <span className="text-primary">✓ 소스 필드를 덮어씁니다</span>
               ) : (
-                <span className="text-green-600">✓ 새 필드를 생성합니다</span>
+                <span className="text-emerald-600">✓ 새 필드를 생성합니다</span>
               )
             ) : (
-              <span className="text-indigo-600">비어있음: 소스 필드를 덮어씁니다</span>
+              <span className="text-primary">비어있음: 소스 필드를 덮어씁니다</span>
             )}
           </p>
         </div>
@@ -194,14 +194,14 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={transform.delimiter || ","}
                 onChange={(e) => handleTransformationChange(index, "delimiter", e.target.value)}
                 placeholder="예: , 또는 ; 또는 |"
                 className="mt-1 h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-gray-400">이 문자로 분리하여 여러 행으로 확장합니다</p>
+              <p className="mt-1 text-xs text-muted-foreground/70">이 문자로 분리하여 여러 행으로 확장합니다</p>
             </div>
           </>
         );
@@ -211,7 +211,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {/* CONCAT은 다중 소스 필드를 지원 - 간소화 버전 */}
             <div>
-              <Label className="text-xs text-gray-600">첫 번째 필드</Label>
+              <Label className="text-xs text-muted-foreground">첫 번째 필드</Label>
               <Select
                 value={transform.sourceField || ""}
                 onValueChange={(value) => handleTransformationChange(index, "sourceField", value)}
@@ -229,7 +229,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               </Select>
             </div>
             <div>
-              <Label className="text-xs text-gray-600">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={transform.separator || " "}
                 onChange={(e) => handleTransformationChange(index, "separator", e.target.value)}
@@ -246,7 +246,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={transform.delimiter || ","}
                 onChange={(e) => handleTransformationChange(index, "delimiter", e.target.value)}
@@ -255,7 +255,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               />
             </div>
             <div>
-              <Label className="text-xs text-gray-600">인덱스 (0부터 시작)</Label>
+              <Label className="text-xs text-muted-foreground">인덱스 (0부터 시작)</Label>
               <Input
                 type="number"
                 value={transform.splitIndex !== undefined ? transform.splitIndex : 0}
@@ -263,7 +263,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                 placeholder="0"
                 className="mt-1 h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-gray-400">분리된 값 중 몇 번째를 가져올지 지정 (0=첫번째)</p>
+              <p className="mt-1 text-xs text-muted-foreground/70">분리된 값 중 몇 번째를 가져올지 지정 (0=첫번째)</p>
             </div>
           </>
         );
@@ -273,7 +273,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">찾을 문자열</Label>
+              <Label className="text-xs text-muted-foreground">찾을 문자열</Label>
               <Input
                 value={transform.searchValue || ""}
                 onChange={(e) => handleTransformationChange(index, "searchValue", e.target.value)}
@@ -282,7 +282,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               />
             </div>
             <div>
-              <Label className="text-xs text-gray-600">바꿀 문자열</Label>
+              <Label className="text-xs text-muted-foreground">바꿀 문자열</Label>
               <Input
                 value={transform.replaceValue || ""}
                 onChange={(e) => handleTransformationChange(index, "replaceValue", e.target.value)}
@@ -298,7 +298,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">변환할 타입</Label>
+              <Label className="text-xs text-muted-foreground">변환할 타입</Label>
               <Select
                 value={transform.castType || "string"}
                 onValueChange={(value) => handleTransformationChange(index, "castType", value)}
@@ -333,14 +333,14 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">표현식</Label>
+              <Label className="text-xs text-muted-foreground">표현식</Label>
               <Input
                 value={transform.expression || ""}
                 onChange={(e) => handleTransformationChange(index, "expression", e.target.value)}
                 placeholder="예: field1 + field2"
                 className="mt-1 h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-gray-400">
+              <p className="mt-1 text-xs text-muted-foreground/70">
                 {transform.type === "CALCULATE" && "계산 수식을 입력하세요 (예: field1 + field2)"}
                 {transform.type === "FORMAT" && "형식 문자열을 입력하세요 (예: {0}-{1})"}
                 {transform.type === "JSON_EXTRACT" && "JSON 경로를 입력하세요 (예: $.data.name)"}
@@ -361,8 +361,8 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
       <div className="space-y-4 p-4 pb-8">
         {/* 헤더 */}
         <div className="flex items-center gap-2 rounded-md bg-indigo-50 p-2">
-          <Wand2 className="h-4 w-4 text-indigo-600" />
-          <span className="font-semibold text-indigo-600">데이터 변환</span>
+          <Wand2 className="h-4 w-4 text-primary" />
+          <span className="font-semibold text-primary">데이터 변환</span>
         </div>
 
         {/* 기본 정보 */}
@@ -387,7 +387,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <div className="mb-2 flex items-center justify-between">
             <div>
               <h3 className="text-sm font-semibold">변환 규칙</h3>
-              <p className="text-xs text-gray-500">데이터를 변환할 규칙을 추가하세요</p>
+              <p className="text-xs text-muted-foreground">데이터를 변환할 규칙을 추가하세요</p>
             </div>
             <Button size="sm" variant="outline" onClick={handleAddTransformation} className="h-7 px-2 text-xs">
               <Plus className="mr-1 h-3 w-3" />
@@ -396,7 +396,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           </div>
 
           {transformations.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-4 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-4 text-center text-xs text-muted-foreground">
               변환 규칙을 추가하세요
             </div>
           ) : (
@@ -409,7 +409,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                       size="sm"
                       variant="ghost"
                       onClick={() => handleRemoveTransformation(index)}
-                      className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -418,7 +418,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                   <div className="space-y-2">
                     {/* 변환 타입 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">변환 타입</Label>
+                      <Label className="text-xs text-muted-foreground">변환 타입</Label>
                       <Select
                         value={transform.type}
                         onValueChange={(value) => handleTransformationChange(index, "type", value)}
@@ -427,13 +427,13 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                          <div className="px-2 py-1 text-xs font-semibold text-gray-500">기본 변환</div>
+                          <div className="px-2 py-1 text-xs font-semibold text-muted-foreground">기본 변환</div>
                           {TRANSFORM_TYPES.filter((t) => t.category === "기본").map((type) => (
                             <SelectItem key={type.value} value={type.value} className="text-xs">
                               {type.label}
                             </SelectItem>
                           ))}
-                          <div className="px-2 py-1 text-xs font-semibold text-gray-500">고급 변환</div>
+                          <div className="px-2 py-1 text-xs font-semibold text-muted-foreground">고급 변환</div>
                           {TRANSFORM_TYPES.filter((t) => t.category === "고급").map((type) => (
                             <SelectItem key={type.value} value={type.value} className="text-xs">
                               {type.label}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
index b30bc1f4..4a46bf31 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
@@ -396,12 +396,12 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
     <div>
       <div className="space-y-4 p-4 pb-8">
         {/* 경고 */}
-        <div className="rounded-lg border-2 border-red-200 bg-red-50 p-4">
+        <div className="rounded-lg border-2 border-destructive/20 bg-destructive/10 p-4">
           <div className="flex items-start gap-3">
-            <AlertTriangle className="h-5 w-5 flex-shrink-0 text-red-600" />
+            <AlertTriangle className="h-5 w-5 flex-shrink-0 text-destructive" />
             <div className="text-sm">
               <p className="font-semibold text-red-800">위험한 작업입니다!</p>
-              <p className="mt-1 text-xs text-red-700">
+              <p className="mt-1 text-xs text-destructive">
                 DELETE 작업은 되돌릴 수 없습니다. WHERE 조건을 반드시 설정하세요.
               </p>
             </div>
@@ -434,16 +434,16 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                   onClick={() => handleTargetTypeChange("internal")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
                   )}
                 >
-                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
                   >
                     내부 DB
                   </span>
-                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
                 </button>
 
                 <button
@@ -452,20 +452,20 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
                     targetType === "external"
-                      ? "border-green-500 bg-green-50"
-                      : "border-gray-200 hover:border-gray-300",
+                      ? "border-emerald-500 bg-emerald-50"
+                      : "border-border hover:border-input",
                   )}
                 >
-                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
                   <span
                     className={cn(
                       "text-xs font-medium",
-                      targetType === "external" ? "text-green-700" : "text-gray-600",
+                      targetType === "external" ? "text-emerald-700" : "text-muted-foreground",
                     )}
                   >
                     외부 DB
                   </span>
-                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
                 </button>
 
                 <button
@@ -473,12 +473,12 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                   onClick={() => handleTargetTypeChange("api")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
                   )}
                 >
-                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
+                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}
                   >
                     REST API
                   </span>
@@ -567,15 +567,15 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                     </SelectTrigger>
                     <SelectContent>
                       {externalConnectionsLoading ? (
-                        <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                       ) : externalConnections.length === 0 ? (
-                        <div className="p-2 text-center text-xs text-gray-500">사용 가능한 커넥션이 없습니다</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">사용 가능한 커넥션이 없습니다</div>
                       ) : (
                         externalConnections.map((conn) => (
                           <SelectItem key={conn.id} value={conn.id!.toString()}>
                             <div className="flex items-center gap-2">
                               <span className="font-medium">{conn.db_type}</span>
-                              <span className="text-gray-500">-</span>
+                              <span className="text-muted-foreground">-</span>
                               <span>{conn.name}</span>
                             </div>
                           </SelectItem>
@@ -604,15 +604,15 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                       </SelectTrigger>
                       <SelectContent>
                         {externalTablesLoading ? (
-                          <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                         ) : externalTables.length === 0 ? (
-                          <div className="p-2 text-center text-xs text-gray-500">테이블이 없습니다</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">테이블이 없습니다</div>
                         ) : (
                           externalTables.map((table) => (
                             <SelectItem key={table.table_name} value={table.table_name}>
                               <div className="flex items-center gap-2">
                                 <span className="font-medium">{table.table_name}</span>
-                                {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                                {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                               </div>
                             </SelectItem>
                           ))
@@ -625,11 +625,11 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                 {externalTargetTable && externalColumns.length > 0 && (
                   <div>
                     <Label className="mb-1.5 block text-xs font-medium">컬럼 목록</Label>
-                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-muted p-2">
                       {externalColumns.map((col) => (
                         <div key={col.column_name} className="flex items-center justify-between text-xs">
                           <span className="font-medium">{col.column_name}</span>
-                          <span className="text-gray-500">{col.data_type}</span>
+                          <span className="text-muted-foreground">{col.data_type}</span>
                         </div>
                       ))}
                     </div>
@@ -676,7 +676,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                 </div>
 
                 {apiAuthType !== "none" && (
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     <Label className="block text-xs font-medium">인증 정보</Label>
 
                     {apiAuthType === "bearer" && (
@@ -747,7 +747,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
 
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     {Object.entries(apiHeaders).map(([key, value], index) => (
                       <div key={index} className="flex gap-2">
                         <Input
@@ -819,14 +819,14 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
 
           {/* 컬럼 로딩 상태 */}
           {targetType === "internal" && targetTable && columnsLoading && (
-            <div className="rounded border border-gray-200 bg-gray-50 p-3 text-center text-xs text-gray-500">
+            <div className="rounded border border-border bg-muted p-3 text-center text-xs text-muted-foreground">
               컬럼 정보를 불러오는 중...
             </div>
           )}
 
           {/* 테이블 미선택 안내 */}
           {targetType === "internal" && !targetTable && (
-            <div className="rounded border border-dashed border-gray-300 bg-gray-50 p-3 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed border-input bg-muted p-3 text-center text-xs text-muted-foreground">
               먼저 타겟 테이블을 선택하세요
             </div>
           )}
@@ -848,9 +848,9 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                       : [];
 
                 return (
-                  <div key={index} className="rounded border-2 border-red-200 bg-red-50 p-2">
+                  <div key={index} className="rounded border-2 border-destructive/20 bg-destructive/10 p-2">
                     <div className="mb-2 flex items-center justify-between">
-                      <span className="text-xs font-medium text-red-700">조건 #{index + 1}</span>
+                      <span className="text-xs font-medium text-destructive">조건 #{index + 1}</span>
                       <Button
                         size="sm"
                         variant="ghost"
@@ -864,7 +864,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                     <div className="space-y-2">
                       {/* 필드 - Combobox */}
                       <div>
-                        <Label className="text-xs text-gray-600">필드</Label>
+                        <Label className="text-xs text-muted-foreground">필드</Label>
                         {availableColumns.length > 0 ? (
                           <Popover
                             open={fieldOpenState[index]}
@@ -949,7 +949,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                       </div>
 
                       <div>
-                        <Label className="text-xs text-gray-600">연산자</Label>
+                        <Label className="text-xs text-muted-foreground">연산자</Label>
                         <Select
                           value={condition.operator}
                           onValueChange={(value) => handleConditionChange(index, "operator", value)}
@@ -969,7 +969,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
 
                       {/* 🆕 소스 필드 - Combobox */}
                       <div>
-                        <Label className="text-xs text-gray-600">소스 필드 (선택)</Label>
+                        <Label className="text-xs text-muted-foreground">소스 필드 (선택)</Label>
                         {sourceFields.length > 0 ? (
                           <Popover
                             open={sourceFieldsOpenState[index]}
@@ -1022,7 +1022,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                                         newState[index] = false;
                                         setSourceFieldsOpenState(newState);
                                       }}
-                                      className="text-xs text-gray-400 sm:text-sm"
+                                      className="text-xs text-muted-foreground/70 sm:text-sm"
                                     >
                                       <Check
                                         className={cn(
@@ -1066,16 +1066,16 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                             </PopoverContent>
                           </Popover>
                         ) : (
-                          <div className="mt-1 rounded border border-dashed border-gray-300 bg-gray-50 p-2 text-center text-xs text-gray-500">
+                          <div className="mt-1 rounded border border-dashed border-input bg-muted p-2 text-center text-xs text-muted-foreground">
                             연결된 소스 노드가 없습니다
                           </div>
                         )}
-                        <p className="mt-1 text-xs text-gray-400">소스 데이터에서 값을 가져올 필드</p>
+                        <p className="mt-1 text-xs text-muted-foreground/70">소스 데이터에서 값을 가져올 필드</p>
                       </div>
 
                       {/* 정적 값 */}
                       <div>
-                        <Label className="text-xs text-gray-600">정적 값</Label>
+                        <Label className="text-xs text-muted-foreground">정적 값</Label>
                         <Input
                           value={condition.staticValue || condition.value || ""}
                           onChange={(e) => {
@@ -1085,7 +1085,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                           placeholder="비교할 고정 값"
                           className="mt-1 h-8 text-xs"
                         />
-                        <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때 사용됩니다</p>
+                        <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때 사용됩니다</p>
                       </div>
                     </div>
                   </div>
@@ -1093,17 +1093,17 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
               })}
             </div>
           ) : (
-            <div className="rounded border-2 border-dashed border-red-300 bg-red-50 p-4 text-center text-xs text-red-600">
+            <div className="rounded border-2 border-dashed border-destructive/30 bg-destructive/10 p-4 text-center text-xs text-destructive">
               ⚠️ WHERE 조건이 없습니다! 모든 데이터가 삭제됩니다!
             </div>
           )}
         </div>
 
         <div className="space-y-2">
-          <div className="rounded bg-red-50 p-3 text-xs text-red-700">
+          <div className="rounded bg-destructive/10 p-3 text-xs text-destructive">
             🚨 WHERE 조건 없이 삭제하면 테이블의 모든 데이터가 영구 삭제됩니다!
           </div>
-          <div className="rounded bg-red-50 p-3 text-xs text-red-700">💡 실행 전 WHERE 조건을 꼭 확인하세요.</div>
+          <div className="rounded bg-destructive/10 p-3 text-xs text-destructive">💡 실행 전 WHERE 조건을 꼭 확인하세요.</div>
         </div>
       </div>
     </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx
index 24c5cdc1..2e28bf05 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx
@@ -282,7 +282,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
             </div>
             
             {accountError && (
-              <div className="flex items-center gap-2 text-xs text-red-500">
+              <div className="flex items-center gap-2 text-xs text-destructive">
                 <AlertCircle className="h-3 w-3" />
                 {accountError}
               </div>
@@ -298,7 +298,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
               </SelectTrigger>
               <SelectContent>
                 {mailAccounts.length === 0 ? (
-                  <div className="p-2 text-xs text-gray-500">
+                  <div className="p-2 text-xs text-muted-foreground">
                     등록된 메일 계정이 없습니다.
                     <br />
                     관리자 &gt; 메일관리 &gt; 계정관리에서 추가하세요.
@@ -308,7 +308,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
                     <SelectItem key={account.id} value={account.id}>
                       <div className="flex items-center gap-2">
                         <span className="font-medium">{account.name}</span>
-                        <span className="text-xs text-gray-500">({account.email})</span>
+                        <span className="text-xs text-muted-foreground">({account.email})</span>
                       </div>
                     </SelectItem>
                   ))
@@ -319,13 +319,13 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
 
           {/* 선택된 계정 정보 표시 */}
           {selectedAccount && (
-            <Card className="bg-green-50 border-green-200">
+            <Card className="bg-emerald-50 border-emerald-200">
               <CardContent className="p-3 space-y-2">
-                <div className="flex items-center gap-2 text-green-700">
+                <div className="flex items-center gap-2 text-emerald-700">
                   <CheckCircle className="h-4 w-4" />
                   <span className="text-sm font-medium">선택된 계정</span>
                 </div>
-                <div className="text-xs space-y-1 text-green-800">
+                <div className="text-xs space-y-1 text-emerald-800">
                   <div><strong>이름:</strong> {selectedAccount.name}</div>
                   <div><strong>이메일:</strong> {selectedAccount.email}</div>
                   <div><strong>SMTP:</strong> {selectedAccount.smtpHost}:{selectedAccount.smtpPort}</div>
@@ -335,7 +335,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           )}
 
           {!selectedAccount && mailAccounts.length > 0 && (
-            <Card className="bg-yellow-50 border-yellow-200">
+            <Card className="bg-amber-50 border-amber-200">
               <CardContent className="p-3 text-xs text-yellow-700">
                 <div className="flex items-center gap-2">
                   <AlertCircle className="h-4 w-4" />
@@ -346,8 +346,8 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           )}
 
           {mailAccounts.length === 0 && !isLoadingAccounts && (
-            <Card className="bg-gray-50">
-              <CardContent className="p-3 text-xs text-gray-600">
+            <Card className="bg-muted">
+              <CardContent className="p-3 text-xs text-muted-foreground">
                 <div className="space-y-2">
                   <div className="font-medium">메일 계정 등록 방법:</div>
                   <ol className="list-decimal list-inside space-y-1">
@@ -368,20 +368,20 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           {selectedAccount && (
             <div className="space-y-2">
               <Label className="text-xs">발신자 (From)</Label>
-              <div className="h-8 px-3 py-2 text-sm bg-gray-100 rounded-md border flex items-center">
+              <div className="h-8 px-3 py-2 text-sm bg-muted rounded-md border flex items-center">
                 {selectedAccount.email}
               </div>
-              <p className="text-xs text-gray-500">선택한 계정의 이메일 주소가 자동으로 사용됩니다.</p>
+              <p className="text-xs text-muted-foreground">선택한 계정의 이메일 주소가 자동으로 사용됩니다.</p>
             </div>
           )}
 
           {/* 🆕 수신자 컴포넌트 사용 옵션 */}
-          <Card className={useRecipientComponent ? "bg-blue-50 border-blue-200" : "bg-gray-50"}>
+          <Card className={useRecipientComponent ? "bg-primary/10 border-primary/20" : "bg-muted"}>
             <CardContent className="p-3 space-y-3">
               <div className="flex items-center justify-between">
                 <div className="space-y-1">
                   <Label className="text-xs font-medium">수신자 컴포넌트 사용</Label>
-                  <p className="text-xs text-gray-500">
+                  <p className="text-xs text-muted-foreground">
                     화면에 배치한 "메일 수신자 선택" 컴포넌트의 값을 자동으로 사용합니다.
                   </p>
                 </div>
@@ -415,7 +415,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
               
               {/* 필드명 설정 (수신자 컴포넌트 사용 시) */}
               {useRecipientComponent && (
-                <div className="space-y-2 pt-2 border-t border-blue-200">
+                <div className="space-y-2 pt-2 border-t border-primary/20">
                   <div className="grid grid-cols-2 gap-2">
                     <div className="space-y-1">
                       <Label className="text-xs">수신자 필드명</Label>
@@ -452,7 +452,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
                       />
                     </div>
                   </div>
-                  <div className="text-xs text-blue-600 bg-blue-100 p-2 rounded">
+                  <div className="text-xs text-primary bg-primary/10 p-2 rounded">
                     <strong>자동 설정됨:</strong>
                     <br />
                     수신자: <code className="bg-white px-1 rounded">{`{{${recipientToField}}}`}</code>
@@ -591,8 +591,8 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
 
           {/* 변수 안내 (HTML 모드에서만 표시) */}
           {bodyType === "html" && (
-            <Card className="bg-gray-50">
-              <CardContent className="p-3 text-xs text-gray-600">
+            <Card className="bg-muted">
+              <CardContent className="p-3 text-xs text-muted-foreground">
                 <div className="font-medium mb-1">사용 가능한 템플릿 변수:</div>
                 {availableVariables.slice(0, 5).map((v) => (
                   <code key={v.name} className="block">
@@ -600,7 +600,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
                   </code>
                 ))}
                 {availableVariables.length > 5 && (
-                  <span className="text-gray-400">...외 {availableVariables.length - 5}개</span>
+                  <span className="text-muted-foreground/70">...외 {availableVariables.length - 5}개</span>
                 )}
               </CardContent>
             </Card>
@@ -608,11 +608,11 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           
           {/* 변수 태그 에디터 안내 (텍스트 모드에서만 표시) */}
           {bodyType === "text" && (
-            <Card className="bg-blue-50 border-blue-200">
-              <CardContent className="p-3 text-xs text-blue-700">
+            <Card className="bg-primary/10 border-primary/20">
+              <CardContent className="p-3 text-xs text-primary">
                 <div className="font-medium mb-1">변수 삽입 방법:</div>
                 <ul className="list-disc list-inside space-y-0.5">
-                  <li><kbd className="bg-blue-100 px-1 rounded">@</kbd> 또는 <kbd className="bg-blue-100 px-1 rounded">/</kbd> 키를 눌러 변수 목록 열기</li>
+                  <li><kbd className="bg-primary/10 px-1 rounded">@</kbd> 또는 <kbd className="bg-primary/10 px-1 rounded">/</kbd> 키를 눌러 변수 목록 열기</li>
                   <li>툴바의 "변수 삽입" 버튼 클릭</li>
                   <li>삽입된 변수는 파란색 태그로 표시됩니다</li>
                 </ul>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
index 9dadabd5..8296fc38 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
@@ -244,7 +244,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
               <p className="text-sm font-semibold" style={{ color: dbInfo.color }}>
                 {dbInfo.label}
               </p>
-              <p className="text-xs text-gray-600">외부 데이터베이스</p>
+              <p className="text-xs text-muted-foreground">외부 데이터베이스</p>
             </div>
           </div>
         </div>
@@ -269,7 +269,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
             >
               <RefreshCw className={`h-3 w-3 ${loadingConnections ? "animate-spin" : ""}`} />
               {remainingCooldown > 0 && !loadingConnections && (
-                <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-orange-500 text-[9px] text-white">
+                <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-[9px] text-white">
                   {remainingCooldown}
                 </span>
               )}
@@ -293,15 +293,15 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                       <div className="flex items-center gap-2">
                         <span>{DB_TYPE_INFO[conn.db_type]?.icon || "💾"}</span>
                         <span>{conn.connection_name}</span>
-                        <span className="text-xs text-gray-500">({conn.db_type})</span>
+                        <span className="text-xs text-muted-foreground">({conn.db_type})</span>
                       </div>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
-              {loadingConnections && <p className="mt-1 text-xs text-gray-500">테스트 중... ⏳</p>}
+              {loadingConnections && <p className="mt-1 text-xs text-muted-foreground">테스트 중... ⏳</p>}
               {connections.length === 0 && !loadingConnections && (
-                <p className="mt-1 text-xs text-orange-600">⚠️ 테스트에 성공한 커넥션이 없습니다.</p>
+                <p className="mt-1 text-xs text-amber-600">⚠️ 테스트에 성공한 커넥션이 없습니다.</p>
               )}
             </div>
 
@@ -338,13 +338,13 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                         <div className="flex items-center gap-2">
                           <span>📋</span>
                           <span>{table.table_name}</span>
-                          {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                          {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                         </div>
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-                {loadingTables && <p className="mt-1 text-xs text-gray-500">테이블 목록 로딩 중... ⏳</p>}
+                {loadingTables && <p className="mt-1 text-xs text-muted-foreground">테이블 목록 로딩 중... ⏳</p>}
               </div>
             </div>
           </div>
@@ -389,7 +389,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                 </Select>
                 
                 {/* 설명 텍스트 */}
-                <div className="mt-2 rounded bg-blue-50 p-3 text-xs text-blue-700">
+                <div className="mt-2 rounded bg-primary/10 p-3 text-xs text-primary">
                   {dataSourceType === "context-data" ? (
                     <>
                       <p className="font-medium mb-1">💡 컨텍스트 데이터 모드</p>
@@ -399,7 +399,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                     <>
                       <p className="font-medium mb-1">📊 테이블 전체 데이터 모드</p>
                       <p>외부 DB의 **모든 행**을 직접 조회합니다.</p>
-                      <p className="mt-1 text-orange-600 font-medium">⚠️ 대량 데이터 시 성능 주의</p>
+                      <p className="mt-1 text-amber-600 font-medium">⚠️ 대량 데이터 시 성능 주의</p>
                     </>
                   )}
                 </div>
@@ -413,9 +413,9 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
           <div>
             <h3 className="mb-3 text-sm font-semibold">출력 필드 ({columns.length}개)</h3>
             {loadingColumns ? (
-              <p className="text-xs text-gray-500">컬럼 목록 로딩 중... ⏳</p>
+              <p className="text-xs text-muted-foreground">컬럼 목록 로딩 중... ⏳</p>
             ) : (
-              <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+              <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-muted p-2">
                 {columns.map((col, index) => (
                   <div
                     key={index}
@@ -424,7 +424,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                     <span className="truncate font-medium" title={col.column_name}>
                       {col.column_name}
                     </span>
-                    <span className="ml-2 shrink-0 font-mono text-gray-500">{col.data_type}</span>
+                    <span className="ml-2 shrink-0 font-mono text-muted-foreground">{col.data_type}</span>
                   </div>
                 ))}
               </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
index d9a9a20c..7651100c 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
@@ -440,7 +440,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
             </SelectTrigger>
             <SelectContent>
               {sourceFields.length === 0 ? (
-                <div className="p-2 text-center text-xs text-gray-400">연결된 소스 없음</div>
+                <div className="p-2 text-center text-xs text-muted-foreground/70">연결된 소스 없음</div>
               ) : (
                 sourceFields.map((f) => (
                   <SelectItem key={f.name} value={f.name}>
@@ -465,7 +465,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
             </SelectTrigger>
             <SelectContent>
               {targetColumns.length === 0 ? (
-                <div className="p-2 text-center text-xs text-gray-400">타겟 테이블 선택 필요</div>
+                <div className="p-2 text-center text-xs text-muted-foreground/70">타겟 테이블 선택 필요</div>
               ) : (
                 targetColumns.map((c) => (
                   <SelectItem key={c.columnName} value={c.columnName}>
@@ -514,9 +514,9 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
     <div>
       <div className="space-y-4 p-4 pb-8">
         {/* 헤더 */}
-        <div className="flex items-center gap-2 rounded-md bg-orange-50 p-2">
-          <Calculator className="h-4 w-4 text-orange-600" />
-          <span className="font-semibold text-orange-600">수식 변환 노드</span>
+        <div className="flex items-center gap-2 rounded-md bg-amber-50 p-2">
+          <Calculator className="h-4 w-4 text-amber-600" />
+          <span className="font-semibold text-amber-600">수식 변환 노드</span>
         </div>
 
         {/* 기본 정보 */}
@@ -542,10 +542,10 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
         {/* 타겟 테이블 조회 설정 */}
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <Database className="h-4 w-4 text-blue-600" />
+            <Database className="h-4 w-4 text-primary" />
             <h3 className="text-sm font-semibold">타겟 테이블 조회 (선택)</h3>
           </div>
-          <p className="mb-2 text-xs text-gray-500">
+          <p className="mb-2 text-xs text-muted-foreground">
             UPSERT 시 기존 값을 참조하려면 타겟 테이블을 설정하세요. 수식에서 target.* 로 참조 가능합니다.
           </p>
 
@@ -611,13 +611,13 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
               </div>
 
               {(targetLookup.lookupKeys || []).length === 0 ? (
-                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   조회 키를 추가하세요 (예: item_code, lot_number)
                 </div>
               ) : (
                 <div className="space-y-2">
                   {targetLookup.lookupKeys.map((key, idx) => (
-                    <div key={idx} className="flex items-center gap-2 rounded border bg-gray-50 p-2">
+                    <div key={idx} className="flex items-center gap-2 rounded border bg-muted p-2">
                       <Select
                         value={key.sourceField}
                         onValueChange={(v) => handleLookupKeyChange(idx, "sourceField", v)}
@@ -634,7 +634,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </SelectContent>
                       </Select>
 
-                      <ArrowRight className="h-4 w-4 text-gray-400" />
+                      <ArrowRight className="h-4 w-4 text-muted-foreground/70" />
 
                       <Select
                         value={key.targetField}
@@ -656,7 +656,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         size="sm"
                         variant="ghost"
                         onClick={() => handleRemoveLookupKey(idx)}
-                        className="h-6 w-6 p-0 text-red-600"
+                        className="h-6 w-6 p-0 text-destructive"
                       >
                         <Trash2 className="h-3 w-3" />
                       </Button>
@@ -672,7 +672,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
         <div>
           <div className="mb-2 flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Calculator className="h-4 w-4 text-orange-600" />
+              <Calculator className="h-4 w-4 text-amber-600" />
               <h3 className="text-sm font-semibold">변환 규칙</h3>
             </div>
             <Button size="sm" variant="outline" onClick={handleAddTransformation} className="h-7 px-2 text-xs">
@@ -682,20 +682,20 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
           </div>
 
           {transformations.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-4 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-4 text-center text-xs text-muted-foreground">
               변환 규칙을 추가하세요
             </div>
           ) : (
             <div className="space-y-3">
               {transformations.map((trans, index) => (
-                <div key={trans.id || index} className="rounded border bg-orange-50 p-3">
+                <div key={trans.id || index} className="rounded border bg-amber-50 p-3">
                   <div className="mb-3 flex items-center justify-between">
                     <span className="text-xs font-medium text-orange-700">변환 #{index + 1}</span>
                     <Button
                       size="sm"
                       variant="ghost"
                       onClick={() => handleRemoveTransformation(index)}
-                      className="h-6 w-6 p-0 text-red-600"
+                      className="h-6 w-6 p-0 text-destructive"
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -704,7 +704,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                   <div className="space-y-3">
                     {/* 출력 필드명 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드명</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드명</Label>
                       <Input
                         value={trans.outputField || ""}
                         onChange={(e) => handleTransformationChange(index, { outputField: e.target.value })}
@@ -715,7 +715,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {/* 출력 필드 라벨 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드 라벨 (선택)</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드 라벨 (선택)</Label>
                       <Input
                         value={trans.outputFieldLabel || ""}
                         onChange={(e) => handleTransformationChange(index, { outputFieldLabel: e.target.value })}
@@ -726,7 +726,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {/* 수식 타입 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">수식 타입</Label>
+                      <Label className="text-xs text-muted-foreground">수식 타입</Label>
                       <Select
                         value={trans.formulaType}
                         onValueChange={(value) => handleFormulaTypeChange(index, value as FormulaType)}
@@ -739,7 +739,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                             <SelectItem key={ft.value} value={ft.value}>
                               <div>
                                 <div className="font-medium">{ft.label}</div>
-                                <div className="text-xs text-gray-400">{ft.description}</div>
+                                <div className="text-xs text-muted-foreground/70">{ft.description}</div>
                               </div>
                             </SelectItem>
                           ))}
@@ -750,11 +750,11 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                     {/* 수식 타입별 설정 */}
                     {trans.formulaType === "arithmetic" && trans.arithmetic && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">산술 연산</Label>
+                        <Label className="text-xs text-muted-foreground">산술 연산</Label>
 
                         {/* 좌측 피연산자 */}
-                        <div className="rounded bg-gray-50 p-2">
-                          <div className="mb-1 text-xs text-gray-500">좌측</div>
+                        <div className="rounded bg-muted p-2">
+                          <div className="mb-1 text-xs text-muted-foreground">좌측</div>
                           {renderOperandSelector(
                             trans.arithmetic.leftOperand,
                             (updates) => {
@@ -786,8 +786,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </Select>
 
                         {/* 우측 피연산자 */}
-                        <div className="rounded bg-gray-50 p-2">
-                          <div className="mb-1 text-xs text-gray-500">우측</div>
+                        <div className="rounded bg-muted p-2">
+                          <div className="mb-1 text-xs text-muted-foreground">우측</div>
                           {renderOperandSelector(
                             trans.arithmetic.rightOperand,
                             (updates) => {
@@ -801,9 +801,9 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         {/* 추가 연산 목록 */}
                         {trans.arithmetic.additionalOperations && trans.arithmetic.additionalOperations.length > 0 && (
                           <div className="space-y-2 border-t pt-2">
-                            <Label className="text-xs text-gray-500">추가 연산</Label>
+                            <Label className="text-xs text-muted-foreground">추가 연산</Label>
                             {trans.arithmetic.additionalOperations.map((addOp: any, addIndex: number) => (
-                              <div key={addIndex} className="flex items-center gap-2 rounded bg-orange-50 p-2">
+                              <div key={addIndex} className="flex items-center gap-2 rounded bg-amber-50 p-2">
                                 <Select
                                   value={addOp.operator}
                                   onValueChange={(value) => {
@@ -841,7 +841,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                                 <Button
                                   variant="ghost"
                                   size="sm"
-                                  className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                  className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                   onClick={() => {
                                     const newAdditionalOps = trans.arithmetic!.additionalOperations!.filter(
                                       (_: any, i: number) => i !== addIndex
@@ -881,7 +881,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {trans.formulaType === "function" && trans.function && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">함수</Label>
+                        <Label className="text-xs text-muted-foreground">함수</Label>
 
                         <Select
                           value={trans.function.name}
@@ -907,7 +907,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                               <SelectItem key={f.value} value={f.value}>
                                 <div>
                                   <div className="font-mono font-medium">{f.label}</div>
-                                  <div className="text-xs text-gray-400">{f.description}</div>
+                                  <div className="text-xs text-muted-foreground/70">{f.description}</div>
                                 </div>
                               </SelectItem>
                             ))}
@@ -918,8 +918,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         {trans.function.arguments.length > 0 && (
                           <div className="space-y-2">
                             {trans.function.arguments.map((arg, argIdx) => (
-                              <div key={argIdx} className="rounded bg-gray-50 p-2">
-                                <div className="mb-1 text-xs text-gray-500">인자 {argIdx + 1}</div>
+                              <div key={argIdx} className="rounded bg-muted p-2">
+                                <div className="mb-1 text-xs text-muted-foreground">인자 {argIdx + 1}</div>
                                 {renderOperandSelector(
                                   arg,
                                   (updates) => {
@@ -940,10 +940,10 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {trans.formulaType === "condition" && trans.condition && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">조건 (CASE WHEN)</Label>
+                        <Label className="text-xs text-muted-foreground">조건 (CASE WHEN)</Label>
 
                         {/* WHEN 절 */}
-                        <div className="rounded bg-yellow-50 p-2">
+                        <div className="rounded bg-amber-50 p-2">
                           <div className="mb-1 text-xs font-medium text-yellow-700">WHEN</div>
                           <div className="space-y-2">
                             {renderOperandSelector(
@@ -997,8 +997,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </div>
 
                         {/* THEN 절 */}
-                        <div className="rounded bg-green-50 p-2">
-                          <div className="mb-1 text-xs font-medium text-green-700">THEN</div>
+                        <div className="rounded bg-emerald-50 p-2">
+                          <div className="mb-1 text-xs font-medium text-emerald-700">THEN</div>
                           {renderOperandSelector(
                             trans.condition.then,
                             (updates) => {
@@ -1010,8 +1010,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </div>
 
                         {/* ELSE 절 */}
-                        <div className="rounded bg-red-50 p-2">
-                          <div className="mb-1 text-xs font-medium text-red-700">ELSE</div>
+                        <div className="rounded bg-destructive/10 p-2">
+                          <div className="mb-1 text-xs font-medium text-destructive">ELSE</div>
                           {renderOperandSelector(
                             trans.condition.else,
                             (updates) => {
@@ -1026,14 +1026,14 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {trans.formulaType === "static" && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">정적 값</Label>
+                        <Label className="text-xs text-muted-foreground">정적 값</Label>
                         <Input
                           value={trans.staticValue ?? ""}
                           onChange={(e) => handleTransformationChange(index, { staticValue: e.target.value })}
                           placeholder="고정 값 입력"
                           className="h-8 text-xs"
                         />
-                        <p className="text-xs text-gray-400">문자열, 숫자, true/false 입력 가능</p>
+                        <p className="text-xs text-muted-foreground/70">문자열, 숫자, true/false 입력 가능</p>
                       </div>
                     )}
                   </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx
index 82f5b6ac..90d6aed9 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx
@@ -309,7 +309,7 @@ export function HttpRequestActionProperties({ nodeId, data }: HttpRequestActionP
                   className="h-8 text-sm"
                 />
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeQueryParam(index)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -341,7 +341,7 @@ export function HttpRequestActionProperties({ nodeId, data }: HttpRequestActionP
                   className="h-8 text-sm"
                 />
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeHeader(index)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -378,8 +378,8 @@ export function HttpRequestActionProperties({ nodeId, data }: HttpRequestActionP
             </div>
           )}
 
-          <Card className="bg-gray-50">
-            <CardContent className="p-3 text-xs text-gray-600">
+          <Card className="bg-muted">
+            <CardContent className="p-3 text-xs text-muted-foreground">
               <div className="font-medium mb-1">템플릿 변수 사용:</div>
               <code className="block">{"{{sourceData}}"}</code>
               <code className="block">{"{{필드명}}"}</code>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
index 513f0338..0dfe739a 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
@@ -788,16 +788,16 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               onClick={() => handleTargetTypeChange("internal")}
               className={cn(
                 "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
               )}
             >
-              <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+              <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
               <span
-                className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
               >
                 내부 DB
               </span>
-              {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+              {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
             </button>
 
             <button
@@ -805,16 +805,16 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               onClick={() => handleTargetTypeChange("external")}
               className={cn(
                 "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                targetType === "external" ? "border-green-500 bg-green-50" : "border-gray-200 hover:border-gray-300",
+                targetType === "external" ? "border-emerald-500 bg-emerald-50" : "border-border hover:border-input",
               )}
             >
-              <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+              <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
               <span
-                className={cn("text-xs font-medium", targetType === "external" ? "text-green-700" : "text-gray-600")}
+                className={cn("text-xs font-medium", targetType === "external" ? "text-emerald-700" : "text-muted-foreground")}
               >
                 외부 DB
               </span>
-              {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+              {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
             </button>
 
             <button
@@ -822,11 +822,11 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               onClick={() => handleTargetTypeChange("api")}
               className={cn(
                 "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
               )}
             >
-              <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
-              <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}>
+              <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
+              <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}>
                 REST API
               </span>
               {targetType === "api" && <Check className="absolute top-2 right-2 h-4 w-4 text-purple-600" />}
@@ -916,7 +916,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                   </Popover>
                   {targetTable && selectedTableLabel !== targetTable && (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      실제 테이블명: <code className="rounded bg-gray-100 px-1 py-0.5">{targetTable}</code>
+                      실제 테이블명: <code className="rounded bg-muted px-1 py-0.5">{targetTable}</code>
                     </p>
                   )}
                 </div>
@@ -966,7 +966,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                   </Select>
                   {externalConnectionsLoading && <p className="text-muted-foreground mt-1 text-xs">로딩 중...</p>}
                   {externalConnections.length === 0 && !externalConnectionsLoading && (
-                    <p className="mt-1 text-xs text-orange-600">⚠️ 테스트에 성공한 외부 커넥션이 없습니다.</p>
+                    <p className="mt-1 text-xs text-amber-600">⚠️ 테스트에 성공한 외부 커넥션이 없습니다.</p>
                   )}
                 </div>
 
@@ -1008,13 +1008,13 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
 
                 {/* 외부 컬럼 정보 표시 */}
                 {selectedExternalConnectionId && externalTargetTable && externalColumns.length > 0 && (
-                  <div className="rounded-lg border bg-gray-50 p-3">
-                    <p className="text-xs font-medium text-gray-700">타겟 컬럼 ({externalColumns.length}개)</p>
+                  <div className="rounded-lg border bg-muted p-3">
+                    <p className="text-xs font-medium text-foreground">타겟 컬럼 ({externalColumns.length}개)</p>
                     <div className="mt-2 max-h-[150px] space-y-1 overflow-y-auto">
                       {externalColumns.map((col) => (
                         <div key={col.column_name} className="flex items-center justify-between text-xs">
-                          <span className="font-mono text-gray-700">{col.column_name}</span>
-                          <span className="text-gray-500">{col.data_type}</span>
+                          <span className="font-mono text-foreground">{col.column_name}</span>
+                          <span className="text-muted-foreground">{col.data_type}</span>
                         </div>
                       ))}
                     </div>
@@ -1085,7 +1085,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
 
                 {/* 인증 설정 */}
                 {apiAuthType !== "none" && (
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     <Label className="block text-xs font-medium">인증 정보</Label>
 
                     {apiAuthType === "bearer" && (
@@ -1157,7 +1157,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                 {/* 커스텀 헤더 */}
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     {Object.entries(apiHeaders).map(([key, value], index) => (
                       <div key={index} className="flex gap-2">
                         <Input
@@ -1217,7 +1217,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">
                     요청 바디 템플릿
-                    <span className="ml-1 text-gray-500">{"{{fieldName}}"}으로 소스 필드 참조</span>
+                    <span className="ml-1 text-muted-foreground">{"{{fieldName}}"}으로 소스 필드 참조</span>
                   </Label>
                   <textarea
                     placeholder={'{\n  "name": "{{name}}",\n  "email": "{{email}}",\n  "age": "{{age}}"\n}'}
@@ -1229,7 +1229,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                     className="w-full rounded border p-2 font-mono text-xs"
                     rows={8}
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     소스 데이터의 필드명을 {"{{필드명}}"} 형태로 참조할 수 있습니다.
                   </p>
                 </div>
@@ -1251,25 +1251,25 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
 
             {/* 🔥 로딩 상태 (타입별) */}
             {(columnsLoading || externalColumnsLoading) && (
-              <div className="rounded border p-3 text-center text-xs text-gray-500">컬럼 목록을 불러오는 중...</div>
+              <div className="rounded border p-3 text-center text-xs text-muted-foreground">컬럼 목록을 불러오는 중...</div>
             )}
 
             {/* 🔥 테이블 미선택 경고 (타입별) */}
             {targetType === "internal" && !targetTable && !columnsLoading && (
-              <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
                 ⚠️ 먼저 타겟 테이블을 선택하세요
               </div>
             )}
 
             {targetType === "external" && !externalTargetTable && !externalColumnsLoading && (
-              <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
                 ⚠️ 먼저 외부 커넥션과 테이블을 선택하세요
               </div>
             )}
 
             {/* 🔥 컬럼 로드 실패 (타입별) */}
             {targetType === "internal" && targetTable && !columnsLoading && targetColumns.length === 0 && (
-              <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+              <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
                 ❌ 컬럼 정보를 불러올 수 없습니다
               </div>
             )}
@@ -1278,7 +1278,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               externalTargetTable &&
               !externalColumnsLoading &&
               externalColumns.length === 0 && (
-                <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+                <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
                   ❌ 외부 DB 컬럼 정보를 불러올 수 없습니다
                 </div>
               )}
@@ -1290,14 +1290,14 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                 {fieldMappings.length > 0 ? (
                   <div className="space-y-3">
                     {fieldMappings.map((mapping, index) => (
-                      <div key={index} className="rounded border bg-gray-50 p-3">
+                      <div key={index} className="rounded border bg-muted p-3">
                         <div className="mb-2 flex items-center justify-between">
-                          <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                          <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                           <Button
                             size="sm"
                             variant="ghost"
                             onClick={() => handleRemoveMapping(index)}
-                            className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                            className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
@@ -1306,7 +1306,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                         <div className="space-y-2">
                           {/* 🔥 값 생성 유형 선택 */}
                           <div>
-                            <Label className="text-xs text-gray-600">값 생성 방식</Label>
+                            <Label className="text-xs text-muted-foreground">값 생성 방식</Label>
                             <div className="mt-1 grid grid-cols-3 gap-1">
                               <button
                                 type="button"
@@ -1314,8 +1314,8 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 className={cn(
                                   "rounded border px-2 py-1 text-xs transition-all",
                                   (mapping.valueType === "source" || !mapping.valueType)
-                                    ? "border-blue-500 bg-blue-50 text-blue-700"
-                                    : "border-gray-200 hover:border-gray-300",
+                                    ? "border-primary bg-primary/10 text-primary"
+                                    : "border-border hover:border-input",
                                 )}
                               >
                                 소스 필드
@@ -1326,8 +1326,8 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 className={cn(
                                   "rounded border px-2 py-1 text-xs transition-all",
                                   mapping.valueType === "static"
-                                    ? "border-orange-500 bg-orange-50 text-orange-700"
-                                    : "border-gray-200 hover:border-gray-300",
+                                    ? "border-orange-500 bg-amber-50 text-orange-700"
+                                    : "border-border hover:border-input",
                                 )}
                               >
                                 고정값
@@ -1339,7 +1339,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                   "rounded border px-2 py-1 text-xs transition-all flex items-center justify-center gap-1",
                                   mapping.valueType === "autoGenerate"
                                     ? "border-purple-500 bg-purple-50 text-purple-700"
-                                    : "border-gray-200 hover:border-gray-300",
+                                    : "border-border hover:border-input",
                                 )}
                               >
                                 <Sparkles className="h-3 w-3" />
@@ -1351,7 +1351,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           {/* 🔥 소스 필드 입력/선택 (valueType === "source" 일 때만) */}
                           {(mapping.valueType === "source" || !mapping.valueType) && (
                             <div>
-                              <Label className="text-xs text-gray-600">
+                              <Label className="text-xs text-muted-foreground">
                                 소스 필드
                                 {hasRestAPISource && <span className="ml-1 text-teal-600">(REST API - 직접 입력)</span>}
                               </Label>
@@ -1447,7 +1447,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 </Popover>
                               )}
                               {hasRestAPISource && (
-                                <p className="mt-1 text-xs text-gray-500">API 응답 JSON의 필드명을 입력하세요</p>
+                                <p className="mt-1 text-xs text-muted-foreground">API 응답 JSON의 필드명을 입력하세요</p>
                               )}
                             </div>
                           )}
@@ -1455,7 +1455,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           {/* 🔥 고정값 입력 (valueType === "static" 일 때) */}
                           {mapping.valueType === "static" && (
                             <div>
-                              <Label className="text-xs text-gray-600">고정값</Label>
+                              <Label className="text-xs text-muted-foreground">고정값</Label>
                               <Input
                                 value={mapping.staticValue || ""}
                                 onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
@@ -1468,9 +1468,9 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           {/* 🔥 채번 규칙 선택 (valueType === "autoGenerate" 일 때) */}
                           {mapping.valueType === "autoGenerate" && (
                             <div>
-                              <Label className="text-xs text-gray-600">
+                              <Label className="text-xs text-muted-foreground">
                                 채번 규칙
-                                {numberingRulesLoading && <span className="ml-1 text-gray-400">(로딩 중...)</span>}
+                                {numberingRulesLoading && <span className="ml-1 text-muted-foreground/70">(로딩 중...)</span>}
                               </Label>
                               <Popover
                                 open={mappingNumberingRulesOpenState[index]}
@@ -1549,7 +1549,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 </PopoverContent>
                               </Popover>
                               {numberingRules.length === 0 && !numberingRulesLoading && (
-                                <p className="mt-1 text-xs text-orange-600">
+                                <p className="mt-1 text-xs text-amber-600">
                                   등록된 채번 규칙이 없습니다. 시스템 관리에서 먼저 채번 규칙을 생성하세요.
                                 </p>
                               )}
@@ -1557,12 +1557,12 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           )}
 
                           <div className="flex items-center justify-center py-1">
-                            <ArrowRight className="h-4 w-4 text-green-600" />
+                            <ArrowRight className="h-4 w-4 text-emerald-600" />
                           </div>
 
                           {/* 타겟 필드 Combobox (🔥 타입별 컬럼 사용) */}
                           <div>
-                            <Label className="text-xs text-gray-600">타겟 필드</Label>
+                            <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                             <Popover
                               open={mappingTargetFieldsOpenState[index]}
                               onOpenChange={(open) => {
@@ -1589,7 +1589,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                               </span>
                                               <span className="text-muted-foreground text-xs">
                                                 {col?.dataType}
-                                                {col && !col.isNullable && <span className="text-red-500">*</span>}
+                                                {col && !col.isNullable && <span className="text-destructive">*</span>}
                                               </span>
                                             </div>
                                           );
@@ -1648,9 +1648,9 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                               <span className="text-muted-foreground text-[10px]">
                                                 {col.dataType}
                                                 {col.columnDefault ? (
-                                                  <span className="text-blue-600"> 🔵기본값</span>
+                                                  <span className="text-primary"> 🔵기본값</span>
                                                 ) : (
-                                                  !col.isNullable && <span className="text-red-500"> *필수</span>
+                                                  !col.isNullable && <span className="text-destructive"> *필수</span>
                                                 )}
                                               </span>
                                             </div>
@@ -1694,7 +1694,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                     ))}
                   </div>
                 ) : (
-                  <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
+                  <div className="rounded border border-dashed p-4 text-center text-xs text-muted-foreground/70">
                     필드 매핑이 없습니다. "추가" 버튼을 클릭하세요.
                   </div>
                 )}
@@ -1704,7 +1704,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
         )}
 
         {/* 안내 */}
-        <div className="rounded bg-green-50 p-3 text-xs text-green-700">
+        <div className="rounded bg-emerald-50 p-3 text-xs text-emerald-700">
           <p>테이블과 필드는 실제 데이터베이스에서 조회됩니다.</p>
           <p className="mt-1">값 생성 방식: 소스 필드(입력값 연결) / 고정값(직접 입력) / 자동생성(채번 규칙)</p>
         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
index e8757d99..049ed2c5 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
@@ -16,10 +16,10 @@ interface LogPropertiesProps {
 }
 
 const LOG_LEVELS = [
-  { value: "debug", label: "Debug", icon: Info, color: "text-blue-600" },
-  { value: "info", label: "Info", icon: Info, color: "text-green-600" },
-  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-yellow-600" },
-  { value: "error", label: "Error", icon: AlertCircle, color: "text-red-600" },
+  { value: "debug", label: "Debug", icon: Info, color: "text-primary" },
+  { value: "info", label: "Info", icon: Info, color: "text-emerald-600" },
+  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-amber-600" },
+  { value: "error", label: "Error", icon: AlertCircle, color: "text-destructive" },
 ];
 
 export function LogProperties({ nodeId, data }: LogPropertiesProps) {
@@ -48,9 +48,9 @@ export function LogProperties({ nodeId, data }: LogPropertiesProps) {
 
   return (
     <div className="space-y-4 p-4 pb-8">
-      <div className="flex items-center gap-2 rounded-md bg-gray-50 p-2">
-        <FileText className="h-4 w-4 text-gray-600" />
-        <span className="font-semibold text-gray-600">로그</span>
+      <div className="flex items-center gap-2 rounded-md bg-muted p-2">
+        <FileText className="h-4 w-4 text-muted-foreground" />
+        <span className="font-semibold text-muted-foreground">로그</span>
       </div>
 
       <div>
@@ -91,12 +91,12 @@ export function LogProperties({ nodeId, data }: LogPropertiesProps) {
       <div className="flex items-center justify-between">
         <div>
           <Label className="text-xs">데이터 포함</Label>
-          <p className="text-xs text-gray-500">플로우 데이터를 로그에 포함합니다</p>
+          <p className="text-xs text-muted-foreground">플로우 데이터를 로그에 포함합니다</p>
         </div>
         <Switch checked={includeData} onCheckedChange={setIncludeData} />
       </div>
 
-      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-gray-600"}`}>
+      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-muted-foreground"}`}>
         <div className="mb-1 flex items-center gap-2">
           <LevelIcon className="h-4 w-4" />
           <span className="text-xs font-semibold uppercase">{level}</span>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx
index ac7bd438..d75dec92 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx
@@ -388,7 +388,7 @@ export function ProcedureCallActionProperties({
       <div className="space-y-2">
         <Label className="text-xs font-medium">프로시저/함수 선택</Label>
         {loadingProcedures ? (
-          <div className="flex items-center gap-2 rounded border p-2 text-xs text-gray-500">
+          <div className="flex items-center gap-2 rounded border p-2 text-xs text-muted-foreground">
             <Loader2 className="h-3 w-3 animate-spin" />
             목록 조회 중...
           </div>
@@ -453,7 +453,7 @@ export function ProcedureCallActionProperties({
       {procedureName && parameters.length > 0 && (
         <div className="space-y-3">
           {loadingParams ? (
-            <div className="flex items-center gap-2 rounded border p-2 text-xs text-gray-500">
+            <div className="flex items-center gap-2 rounded border p-2 text-xs text-muted-foreground">
               <Loader2 className="h-3 w-3 animate-spin" />
               파라미터 조회 중...
             </div>
@@ -464,7 +464,7 @@ export function ProcedureCallActionProperties({
                 .length > 0 && (
                 <div className="space-y-2">
                   <Label className="flex items-center gap-1.5 text-xs font-medium">
-                    <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700">
+                    <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary">
                       IN
                     </span>
                     입력 파라미터
@@ -474,13 +474,13 @@ export function ProcedureCallActionProperties({
                       if (param.mode !== "IN" && param.mode !== "INOUT")
                         return null;
                       return (
-                        <Card key={idx} className="bg-gray-50">
+                        <Card key={idx} className="bg-muted">
                           <CardContent className="space-y-2 p-3">
                             <div className="flex items-center justify-between">
                               <span className="font-mono text-xs font-medium">
                                 {param.name}
                               </span>
-                              <span className="rounded bg-gray-200 px-1.5 py-0.5 text-[10px]">
+                              <span className="rounded bg-muted/80 px-1.5 py-0.5 text-[10px]">
                                 {param.dataType}
                               </span>
                             </div>
@@ -524,7 +524,7 @@ export function ProcedureCallActionProperties({
                                           {f.name}
                                         </span>
                                         {f.label && f.label !== f.name && (
-                                          <span className="ml-1 text-[10px] text-gray-400">
+                                          <span className="ml-1 text-[10px] text-muted-foreground/70">
                                             ({f.label})
                                           </span>
                                         )}
@@ -587,15 +587,15 @@ export function ProcedureCallActionProperties({
                 .length > 0 && (
                 <div className="space-y-2">
                   <Label className="flex items-center gap-1.5 text-xs font-medium">
-                    <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] text-green-700">
+                    <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] text-emerald-700">
                       OUT
                     </span>
                     반환 필드
-                    <span className="text-[10px] font-normal text-gray-400">
+                    <span className="text-[10px] font-normal text-muted-foreground/70">
                       (다음 노드에서 사용 가능)
                     </span>
                   </Label>
-                  <div className="rounded-md border border-green-200 bg-green-50 p-2">
+                  <div className="rounded-md border border-emerald-200 bg-emerald-50 p-2">
                     <div className="space-y-1">
                       {parameters
                         .filter(
@@ -606,10 +606,10 @@ export function ProcedureCallActionProperties({
                             key={idx}
                             className="flex items-center justify-between rounded bg-white px-2 py-1.5"
                           >
-                            <span className="font-mono text-xs font-medium text-green-700">
+                            <span className="font-mono text-xs font-medium text-emerald-700">
                               {param.name}
                             </span>
-                            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-500">
+                            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
                               {param.dataType}
                             </span>
                           </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
index 43c21255..2b051d59 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
@@ -200,7 +200,7 @@ export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertie
                   <span className="font-medium">{key}:</span> {value}
                 </span>
                 <Button variant="ghost" size="sm" onClick={() => removeHeader(key)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -273,7 +273,7 @@ export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertie
           placeholder="예: data.items"
           className="mt-1 text-sm"
         />
-        <p className="mt-1 text-xs text-gray-500">배열 데이터의 경로를 지정하세요 (예: data.items, result.users)</p>
+        <p className="mt-1 text-xs text-muted-foreground">배열 데이터의 경로를 지정하세요 (예: data.items, result.users)</p>
       </div>
 
       <div>
@@ -286,16 +286,16 @@ export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertie
         </div>
         <div className="max-h-[300px] space-y-2 overflow-y-auto">
           {responseFields.length === 0 ? (
-            <div className="rounded border border-dashed p-3 text-center text-xs text-gray-400">
+            <div className="rounded border border-dashed p-3 text-center text-xs text-muted-foreground/70">
               응답 필드를 추가하여 데이터 구조를 정의하세요
             </div>
           ) : (
             responseFields.map((field, index) => (
-              <div key={index} className="rounded border bg-gray-50 p-2">
+              <div key={index} className="rounded border bg-muted p-2">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-gray-700">필드 {index + 1}</span>
+                  <span className="text-xs font-medium text-foreground">필드 {index + 1}</span>
                   <Button variant="ghost" size="sm" onClick={() => removeResponseField(index)}>
-                    <Trash2 className="h-3 w-3 text-red-500" />
+                    <Trash2 className="h-3 w-3 text-destructive" />
                   </Button>
                 </div>
                 <div className="space-y-2">
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx
index 2effa739..7450a2a1 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx
@@ -392,7 +392,7 @@ process.stdin.on('end', () => {
                   className="h-8 text-sm"
                 />
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeArg(index)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -489,14 +489,14 @@ process.stdin.on('end', () => {
                 className="h-8 text-sm"
               />
               <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeEnvVar(index)}>
-                <Trash2 className="h-3 w-3 text-red-500" />
+                <Trash2 className="h-3 w-3 text-destructive" />
               </Button>
             </div>
           ))}
 
           {envVars.length === 0 && (
-            <Card className="bg-gray-50">
-              <CardContent className="p-3 text-xs text-gray-500">
+            <Card className="bg-muted">
+              <CardContent className="p-3 text-xs text-muted-foreground">
                 환경변수가 없습니다. 추가 버튼을 클릭하여 환경변수를 설정하세요.
               </CardContent>
             </Card>
@@ -561,8 +561,8 @@ process.stdin.on('end', () => {
             </Select>
           </div>
 
-          <Card className="bg-gray-50">
-            <CardContent className="p-3 text-xs text-gray-600">
+          <Card className="bg-muted">
+            <CardContent className="p-3 text-xs text-muted-foreground">
               <div className="font-medium mb-1">출력 데이터 사용:</div>
               스크립트의 출력은 다음 노드에서 <code>{"{{scriptOutput}}"}</code>로 참조할 수 있습니다.
             </CardContent>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
index 9342e583..8b4a5d46 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
@@ -247,7 +247,7 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
             </Popover>
             {tableName && selectedTableLabel !== tableName && (
               <p className="text-muted-foreground mt-1 text-xs">
-                실제 테이블명: <code className="rounded bg-gray-100 px-1 py-0.5">{tableName}</code>
+                실제 테이블명: <code className="rounded bg-muted px-1 py-0.5">{tableName}</code>
               </p>
             )}
           </div>
@@ -290,19 +290,19 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
             </Select>
 
             {/* 설명 텍스트 */}
-            <div className="mt-2 rounded bg-blue-50 p-3 text-xs text-blue-700">
+            <div className="mt-2 rounded bg-primary/10 p-3 text-xs text-primary">
               {dataSourceType === "context-data" ? (
                 <>
                   <p className="mb-1 font-medium">💡 컨텍스트 데이터 모드</p>
                   <p>버튼 실행 시 전달된 데이터(폼 데이터, 테이블 선택 항목 등)를 사용합니다.</p>
-                  <p className="mt-1 text-blue-600">• 폼 데이터: 1개 레코드</p>
-                  <p className="text-blue-600">• 테이블 선택: N개 레코드</p>
+                  <p className="mt-1 text-primary">• 폼 데이터: 1개 레코드</p>
+                  <p className="text-primary">• 테이블 선택: N개 레코드</p>
                 </>
               ) : (
                 <>
                   <p className="mb-1 font-medium">📊 테이블 전체 데이터 모드</p>
                   <p>선택한 테이블의 **모든 행**을 직접 조회합니다.</p>
-                  <p className="mt-1 font-medium text-orange-600">⚠️ 대량 데이터 시 성능 주의</p>
+                  <p className="mt-1 font-medium text-amber-600">⚠️ 대량 데이터 시 성능 주의</p>
                 </>
               )}
             </div>
@@ -316,18 +316,18 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
           출력 필드 {data.fields && data.fields.length > 0 && `(${data.fields.length}개)`}
         </h3>
         {data.fields && data.fields.length > 0 ? (
-          <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+          <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-muted p-2">
             {data.fields.map((field) => (
               <div key={field.name} className="flex items-center justify-between rounded bg-white px-2 py-1.5 text-xs">
-                <span className="truncate font-mono text-gray-700" title={field.name}>
+                <span className="truncate font-mono text-foreground" title={field.name}>
                   {field.name}
                 </span>
-                <span className="ml-2 shrink-0 text-gray-400">{field.type}</span>
+                <span className="ml-2 shrink-0 text-muted-foreground/70">{field.type}</span>
               </div>
             ))}
           </div>
         ) : (
-          <div className="rounded border p-4 text-center text-xs text-gray-400">필드 정보가 없습니다</div>
+          <div className="rounded border p-4 text-center text-xs text-muted-foreground/70">필드 정보가 없습니다</div>
         )}
       </div>
     </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
index 573d6fdf..fdc060c7 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
@@ -700,16 +700,16 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 onClick={() => handleTargetTypeChange("internal")}
                 className={cn(
                   "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                  targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                  targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
                 )}
               >
-                <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+                <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
                 <span
-                  className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                  className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
                 >
                   내부 DB
                 </span>
-                {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+                {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
               </button>
 
               {/* 외부 데이터베이스 */}
@@ -717,16 +717,16 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 onClick={() => handleTargetTypeChange("external")}
                 className={cn(
                   "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                  targetType === "external" ? "border-green-500 bg-green-50" : "border-gray-200 hover:border-gray-300",
+                  targetType === "external" ? "border-emerald-500 bg-emerald-50" : "border-border hover:border-input",
                 )}
               >
-                <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+                <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
                 <span
-                  className={cn("text-xs font-medium", targetType === "external" ? "text-green-700" : "text-gray-600")}
+                  className={cn("text-xs font-medium", targetType === "external" ? "text-emerald-700" : "text-muted-foreground")}
                 >
                   외부 DB
                 </span>
-                {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+                {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
               </button>
 
               {/* REST API */}
@@ -734,11 +734,11 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 onClick={() => handleTargetTypeChange("api")}
                 className={cn(
                   "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                  targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                  targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
                 )}
               >
-                <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
-                <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}>
+                <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
+                <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}>
                   REST API
                 </span>
                 {targetType === "api" && <Check className="absolute top-2 right-2 h-4 w-4 text-purple-600" />}
@@ -827,15 +827,15 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                   </SelectTrigger>
                   <SelectContent>
                     {externalConnectionsLoading ? (
-                      <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                      <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                     ) : externalConnections.length === 0 ? (
-                      <div className="p-2 text-center text-xs text-gray-500">사용 가능한 커넥션이 없습니다</div>
+                      <div className="p-2 text-center text-xs text-muted-foreground">사용 가능한 커넥션이 없습니다</div>
                     ) : (
                       externalConnections.map((conn) => (
                         <SelectItem key={conn.id} value={conn.id!.toString()}>
                           <div className="flex items-center gap-2">
                             <span className="font-medium">{conn.db_type}</span>
-                            <span className="text-gray-500">-</span>
+                            <span className="text-muted-foreground">-</span>
                             <span>{conn.name}</span>
                           </div>
                         </SelectItem>
@@ -865,15 +865,15 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                     </SelectTrigger>
                     <SelectContent>
                       {externalTablesLoading ? (
-                        <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                       ) : externalTables.length === 0 ? (
-                        <div className="p-2 text-center text-xs text-gray-500">테이블이 없습니다</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">테이블이 없습니다</div>
                       ) : (
                         externalTables.map((table) => (
                           <SelectItem key={table.table_name} value={table.table_name}>
                             <div className="flex items-center gap-2">
                               <span className="font-medium">{table.table_name}</span>
-                              {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                              {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                             </div>
                           </SelectItem>
                         ))
@@ -887,11 +887,11 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               {externalTargetTable && externalColumns.length > 0 && (
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">컬럼 목록</Label>
-                  <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+                  <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-muted p-2">
                     {externalColumns.map((col) => (
                       <div key={col.column_name} className="flex items-center justify-between text-xs">
                         <span className="font-medium">{col.column_name}</span>
-                        <span className="text-gray-500">{col.data_type}</span>
+                        <span className="text-muted-foreground">{col.data_type}</span>
                       </div>
                     ))}
                   </div>
@@ -961,7 +961,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
               {/* 인증 설정 */}
               {apiAuthType !== "none" && (
-                <div className="space-y-2 rounded border bg-gray-50 p-3">
+                <div className="space-y-2 rounded border bg-muted p-3">
                   <Label className="block text-xs font-medium">인증 정보</Label>
 
                   {apiAuthType === "bearer" && (
@@ -1033,7 +1033,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               {/* 커스텀 헤더 */}
               <div>
                 <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                <div className="space-y-2 rounded border bg-gray-50 p-3">
+                <div className="space-y-2 rounded border bg-muted p-3">
                   {Object.entries(apiHeaders).map(([key, value], index) => (
                     <div key={index} className="flex gap-2">
                       <Input
@@ -1093,7 +1093,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               <div>
                 <Label className="mb-1.5 block text-xs font-medium">
                   요청 바디 템플릿
-                  <span className="ml-1 text-gray-500">{"{{fieldName}}"}으로 소스 필드 참조</span>
+                  <span className="ml-1 text-muted-foreground">{"{{fieldName}}"}으로 소스 필드 참조</span>
                 </Label>
                 <textarea
                   placeholder={'{\n  "id": "{{id}}",\n  "name": "{{name}}",\n  "email": "{{email}}"\n}'}
@@ -1105,7 +1105,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                   className="w-full rounded border p-2 font-mono text-xs"
                   rows={8}
                 />
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="mt-1 text-xs text-muted-foreground">
                   소스 데이터의 필드명을 {"{{필드명}}"} 형태로 참조할 수 있습니다.
                 </p>
               </div>
@@ -1125,13 +1125,13 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
         </div>
 
         {!targetTable && !columnsLoading && (
-          <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+          <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
             ⚠️ 먼저 타겟 테이블을 선택하세요
           </div>
         )}
 
         {targetTable && whereConditions.length === 0 && (
-          <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+          <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
             WHERE 조건을 추가하세요
           </div>
         )}
@@ -1139,14 +1139,14 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
         {targetTable && whereConditions.length > 0 && targetColumns.length > 0 && (
           <div className="space-y-3">
             {whereConditions.map((condition, index) => (
-              <div key={index} className="rounded border bg-blue-50 p-3">
+              <div key={index} className="rounded border bg-primary/10 p-3">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-gray-700">조건 #{index + 1}</span>
+                  <span className="text-xs font-medium text-foreground">조건 #{index + 1}</span>
                   <Button
                     size="sm"
                     variant="ghost"
                     onClick={() => handleRemoveCondition(index)}
-                    className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                    className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -1155,7 +1155,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 <div className="space-y-2">
                   {/* 타겟 필드 - Combobox */}
                   <div>
-                    <Label className="text-xs text-gray-600">타겟 필드</Label>
+                    <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                     <Popover
                       open={targetFieldsOpenState[index]}
                       onOpenChange={(open) => {
@@ -1228,7 +1228,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
                   {/* 연산자 */}
                   <div>
-                    <Label className="text-xs text-gray-600">연산자</Label>
+                    <Label className="text-xs text-muted-foreground">연산자</Label>
                     <Select
                       value={condition.operator}
                       onValueChange={(value) => handleConditionChange(index, "operator", value)}
@@ -1251,7 +1251,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                     <>
                       {/* 소스 필드 - Combobox */}
                       <div>
-                        <Label className="text-xs text-gray-600">소스 필드 (선택)</Label>
+                        <Label className="text-xs text-muted-foreground">소스 필드 (선택)</Label>
                         <Popover
                           open={sourceFieldsOpenState[index]}
                           onOpenChange={(open) => {
@@ -1303,7 +1303,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                                       newState[index] = false;
                                       setSourceFieldsOpenState(newState);
                                     }}
-                                    className="text-xs text-gray-400 sm:text-sm"
+                                    className="text-xs text-muted-foreground/70 sm:text-sm"
                                   >
                                     <Check
                                       className={cn(
@@ -1350,21 +1350,21 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
                       {/* 정적 값 */}
                       <div>
-                        <Label className="text-xs text-gray-600">정적 값</Label>
+                        <Label className="text-xs text-muted-foreground">정적 값</Label>
                         <Input
                           value={condition.staticValue || ""}
                           onChange={(e) => handleConditionChange(index, "staticValue", e.target.value || undefined)}
                           placeholder="비교할 고정 값"
                           className="mt-1 h-8 text-xs"
                         />
-                        <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                        <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때만 사용됩니다</p>
                       </div>
                     </>
                   )}
 
                   {/* IS_NULL, IS_NOT_NULL일 때 안내 메시지 */}
                   {(condition.operator === "IS_NULL" || condition.operator === "IS_NOT_NULL") && (
-                    <div className="rounded bg-blue-50 p-3 text-xs text-blue-700">
+                    <div className="rounded bg-primary/10 p-3 text-xs text-primary">
                       ℹ️ {condition.operator === "IS_NULL" ? "IS NULL" : "IS NOT NULL"} 조건은 값 비교가 필요하지
                       않습니다.
                     </div>
@@ -1388,13 +1388,13 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
           </div>
 
           {!targetTable && !columnsLoading && (
-            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+            <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
               ⚠️ 먼저 타겟 테이블을 선택하세요
             </div>
           )}
 
           {targetTable && !columnsLoading && targetColumns.length === 0 && (
-            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+            <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
               ❌ 컬럼 정보를 불러올 수 없습니다
             </div>
           )}
@@ -1404,14 +1404,14 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               {fieldMappings.length > 0 ? (
                 <div className="space-y-3">
                   {fieldMappings.map((mapping, index) => (
-                    <div key={index} className="rounded border bg-gray-50 p-3">
+                    <div key={index} className="rounded border bg-muted p-3">
                       <div className="mb-2 flex items-center justify-between">
-                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                        <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                         <Button
                           size="sm"
                           variant="ghost"
                           onClick={() => handleRemoveMapping(index)}
-                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                         >
                           <Trash2 className="h-3 w-3" />
                         </Button>
@@ -1420,7 +1420,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                       <div className="space-y-2">
                         {/* 소스 필드 - REST API인 경우 입력, 아니면 Combobox */}
                         <div>
-                          <Label className="text-xs text-gray-600">
+                          <Label className="text-xs text-muted-foreground">
                             소스 필드{hasRestAPISource && " (REST API - 직접 입력)"}
                           </Label>
                           {hasRestAPISource ? (
@@ -1431,7 +1431,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                               className="mt-1 h-8 text-xs"
                             />
                           ) : sourceFields.length === 0 ? (
-                            <div className="mt-1 rounded border bg-gray-50 p-2 text-center text-xs text-gray-400">
+                            <div className="mt-1 rounded border bg-muted p-2 text-center text-xs text-muted-foreground/70">
                               연결된 소스 노드가 없습니다
                             </div>
                           ) : (
@@ -1517,12 +1517,12 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                         </div>
 
                         <div className="flex items-center justify-center py-1">
-                          <ArrowRight className="h-4 w-4 text-blue-600" />
+                          <ArrowRight className="h-4 w-4 text-primary" />
                         </div>
 
                         {/* 타겟 필드 - Combobox */}
                         <div>
-                          <Label className="text-xs text-gray-600">타겟 필드</Label>
+                          <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                           <Popover
                             open={mappingTargetFieldsOpenState[index]}
                             onOpenChange={(open) => {
@@ -1548,7 +1548,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                                           </span>
                                           <span className="text-muted-foreground text-xs">
                                             {col?.dataType}
-                                            {col && !col.isNullable && <span className="text-red-500">*</span>}
+                                            {col && !col.isNullable && <span className="text-destructive">*</span>}
                                           </span>
                                         </div>
                                       );
@@ -1592,9 +1592,9 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                                           <span className="text-muted-foreground text-[10px]">
                                             {col.dataType}
                                             {col.columnDefault ? (
-                                              <span className="text-blue-600"> 🔵기본값</span>
+                                              <span className="text-primary"> 🔵기본값</span>
                                             ) : (
-                                              !col.isNullable && <span className="text-red-500"> *필수</span>
+                                              !col.isNullable && <span className="text-destructive"> *필수</span>
                                             )}
                                           </span>
                                         </div>
@@ -1609,21 +1609,21 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
                         {/* 정적 값 */}
                         <div>
-                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                          <Label className="text-xs text-muted-foreground">정적 값 (선택)</Label>
                           <Input
                             value={mapping.staticValue || ""}
                             onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
                             placeholder="소스 필드 대신 고정 값 사용"
                             className="mt-1 h-8 text-xs"
                           />
-                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                          <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때만 사용됩니다</p>
                         </div>
                       </div>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   업데이트할 필드를 추가하세요
                 </div>
               )}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
index bcb52500..dfd5499d 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
@@ -638,16 +638,16 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   onClick={() => handleTargetTypeChange("internal")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
                   )}
                 >
-                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
                   >
                     내부 DB
                   </span>
-                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
                 </button>
 
                 <button
@@ -656,20 +656,20 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
                     targetType === "external"
-                      ? "border-green-500 bg-green-50"
-                      : "border-gray-200 hover:border-gray-300",
+                      ? "border-emerald-500 bg-emerald-50"
+                      : "border-border hover:border-input",
                   )}
                 >
-                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
                   <span
                     className={cn(
                       "text-xs font-medium",
-                      targetType === "external" ? "text-green-700" : "text-gray-600",
+                      targetType === "external" ? "text-emerald-700" : "text-muted-foreground",
                     )}
                   >
                     외부 DB
                   </span>
-                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
                 </button>
 
                 <button
@@ -677,12 +677,12 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   onClick={() => handleTargetTypeChange("api")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
                   )}
                 >
-                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
+                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}
                   >
                     REST API
                   </span>
@@ -771,15 +771,15 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                     </SelectTrigger>
                     <SelectContent>
                       {externalConnectionsLoading ? (
-                        <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                       ) : externalConnections.length === 0 ? (
-                        <div className="p-2 text-center text-xs text-gray-500">사용 가능한 커넥션이 없습니다</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">사용 가능한 커넥션이 없습니다</div>
                       ) : (
                         externalConnections.map((conn) => (
                           <SelectItem key={conn.id} value={conn.id!.toString()}>
                             <div className="flex items-center gap-2">
                               <span className="font-medium">{conn.db_type}</span>
-                              <span className="text-gray-500">-</span>
+                              <span className="text-muted-foreground">-</span>
                               <span>{conn.name}</span>
                             </div>
                           </SelectItem>
@@ -808,15 +808,15 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                       </SelectTrigger>
                       <SelectContent>
                         {externalTablesLoading ? (
-                          <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                         ) : externalTables.length === 0 ? (
-                          <div className="p-2 text-center text-xs text-gray-500">테이블이 없습니다</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">테이블이 없습니다</div>
                         ) : (
                           externalTables.map((table) => (
                             <SelectItem key={table.table_name} value={table.table_name}>
                               <div className="flex items-center gap-2">
                                 <span className="font-medium">{table.table_name}</span>
-                                {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                                {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                               </div>
                             </SelectItem>
                           ))
@@ -829,11 +829,11 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                 {externalTargetTable && externalColumns.length > 0 && (
                   <div>
                     <Label className="mb-1.5 block text-xs font-medium">컬럼 목록</Label>
-                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-muted p-2">
                       {externalColumns.map((col) => (
                         <div key={col.column_name} className="flex items-center justify-between text-xs">
                           <span className="font-medium">{col.column_name}</span>
-                          <span className="text-gray-500">{col.data_type}</span>
+                          <span className="text-muted-foreground">{col.data_type}</span>
                         </div>
                       ))}
                     </div>
@@ -900,7 +900,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                 </div>
 
                 {apiAuthType !== "none" && (
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     <Label className="block text-xs font-medium">인증 정보</Label>
 
                     {apiAuthType === "bearer" && (
@@ -971,7 +971,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
 
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     {Object.entries(apiHeaders).map(([key, value], index) => (
                       <div key={index} className="flex gap-2">
                         <Input
@@ -1030,7 +1030,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">
                     요청 바디 템플릿
-                    <span className="ml-1 text-gray-500">{`{{fieldName}}`}으로 소스 필드 참조</span>
+                    <span className="ml-1 text-muted-foreground">{`{{fieldName}}`}으로 소스 필드 참조</span>
                   </Label>
                   <textarea
                     placeholder={`{\n  "id": "{{id}}",\n  "name": "{{name}}",\n  "email": "{{email}}"\n}`}
@@ -1042,7 +1042,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                     className="w-full rounded border p-2 font-mono text-xs"
                     rows={8}
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     소스 데이터의 필드명을 {`{{필드명}}`} 형태로 참조할 수 있습니다.
                   </p>
                 </div>
@@ -1056,12 +1056,12 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
           <div className="mb-2 flex items-center justify-between">
             <div>
               <h3 className="text-sm font-semibold">충돌 키 (ON CONFLICT)</h3>
-              <p className="text-xs text-gray-500">중복 체크에 사용할 키를 선택하세요</p>
+              <p className="text-xs text-muted-foreground">중복 체크에 사용할 키를 선택하세요</p>
             </div>
           </div>
 
           {!targetTable && (
-            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+            <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
               ⚠️ 먼저 타겟 테이블을 선택하세요
             </div>
           )}
@@ -1084,7 +1084,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   ))}
                 </div>
               ) : (
-                <div className="mb-3 rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="mb-3 rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   충돌 키를 추가하세요
                 </div>
               )}
@@ -1144,13 +1144,13 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
           </div>
 
           {!targetTable && !columnsLoading && (
-            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+            <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
               ⚠️ 먼저 타겟 테이블을 선택하세요
             </div>
           )}
 
           {targetTable && !columnsLoading && targetColumns.length === 0 && (
-            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+            <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
               ❌ 컬럼 정보를 불러올 수 없습니다
             </div>
           )}
@@ -1160,14 +1160,14 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
               {fieldMappings.length > 0 ? (
                 <div className="space-y-3">
                   {fieldMappings.map((mapping, index) => (
-                    <div key={index} className="rounded border bg-gray-50 p-3">
+                    <div key={index} className="rounded border bg-muted p-3">
                       <div className="mb-2 flex items-center justify-between">
-                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                        <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                         <Button
                           size="sm"
                           variant="ghost"
                           onClick={() => handleRemoveMapping(index)}
-                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                         >
                           <Trash2 className="h-3 w-3" />
                         </Button>
@@ -1176,7 +1176,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                       <div className="space-y-2">
                         {/* 소스 필드 - REST API인 경우 입력, 아니면 드롭다운 */}
                         <div>
-                          <Label className="text-xs text-gray-600">
+                          <Label className="text-xs text-muted-foreground">
                             소스 필드{hasRestAPISource && " (REST API - 직접 입력)"}
                           </Label>
                           {hasRestAPISource ? (
@@ -1274,7 +1274,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
 
                         {/* 타겟 필드 Combobox */}
                         <div>
-                          <Label className="text-xs text-gray-600">타겟 필드</Label>
+                          <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                           <Popover
                             open={mappingTargetFieldsOpenState[index]}
                             onOpenChange={(open) => {
@@ -1300,7 +1300,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                                           </span>
                                           <span className="text-muted-foreground text-xs">
                                             {col?.dataType}
-                                            {col && !col.isNullable && <span className="text-red-500">*</span>}
+                                            {col && !col.isNullable && <span className="text-destructive">*</span>}
                                           </span>
                                         </div>
                                       );
@@ -1344,9 +1344,9 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                                           <span className="text-muted-foreground text-[10px]">
                                             {col.dataType}
                                             {col.columnDefault ? (
-                                              <span className="text-blue-600"> 🔵기본값</span>
+                                              <span className="text-primary"> 🔵기본값</span>
                                             ) : (
-                                              !col.isNullable && <span className="text-red-500"> *필수</span>
+                                              !col.isNullable && <span className="text-destructive"> *필수</span>
                                             )}
                                           </span>
                                         </div>
@@ -1361,21 +1361,21 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
 
                         {/* 정적 값 */}
                         <div>
-                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                          <Label className="text-xs text-muted-foreground">정적 값 (선택)</Label>
                           <Input
                             value={mapping.staticValue || ""}
                             onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
                             placeholder="소스 필드 대신 고정 값 사용"
                             className="mt-1 h-8 text-xs"
                           />
-                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                          <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때만 사용됩니다</p>
                         </div>
                       </div>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   UPSERT할 필드를 추가하세요
                 </div>
               )}
diff --git a/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx b/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
index 80eb1ef9..ea98264a 100644
--- a/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
+++ b/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
@@ -29,9 +29,9 @@ export function NodePalette() {
   return (
     <div className="flex h-full flex-col bg-white">
       {/* 헤더 */}
-      <div className="border-b bg-gray-50 p-4">
-        <h3 className="text-sm font-semibold text-gray-900">노드 라이브러리</h3>
-        <p className="mt-1 text-xs text-gray-500">캔버스로 드래그하여 추가</p>
+      <div className="border-b bg-muted p-4">
+        <h3 className="text-sm font-semibold text-foreground">노드 라이브러리</h3>
+        <p className="mt-1 text-xs text-muted-foreground">캔버스로 드래그하여 추가</p>
       </div>
 
       {/* 노드 목록 */}
@@ -45,11 +45,11 @@ export function NodePalette() {
               {/* 카테고리 헤더 */}
               <button
                 onClick={() => toggleCategory(category.id)}
-                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm font-medium text-gray-700 hover:bg-gray-100"
+                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm font-medium text-foreground hover:bg-muted"
               >
                 {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                 <span>{category.label}</span>
-                <span className="ml-auto text-xs text-gray-400">{nodes.length}</span>
+                <span className="ml-auto text-xs text-muted-foreground/70">{nodes.length}</span>
               </button>
 
               {/* 노드 아이템들 */}
@@ -66,8 +66,8 @@ export function NodePalette() {
       </div>
 
       {/* 푸터 도움말 */}
-      <div className="border-t bg-gray-50 p-3">
-        <p className="text-xs text-gray-500">💡 노드를 드래그하여 캔버스에 배치하고 연결선으로 연결하세요</p>
+      <div className="border-t bg-muted p-3">
+        <p className="text-xs text-muted-foreground">💡 노드를 드래그하여 캔버스에 배치하고 연결선으로 연결하세요</p>
       </div>
     </div>
   );
@@ -84,7 +84,7 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
 
   return (
     <div
-      className="group cursor-move rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all hover:border-gray-300 hover:shadow-md"
+      className="group cursor-move rounded-lg border border-border bg-white p-3 shadow-sm transition-all hover:border-input hover:shadow-md"
       draggable
       onDragStart={onDragStart}
       title={node.description}
@@ -95,8 +95,8 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
 
         {/* 라벨 및 설명 */}
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-gray-900">{node.label}</div>
-          <div className="mt-0.5 truncate text-xs text-gray-500">{node.description}</div>
+          <div className="text-sm font-medium text-foreground">{node.label}</div>
+          <div className="mt-0.5 truncate text-xs text-muted-foreground">{node.description}</div>
         </div>
       </div>
 
diff --git a/frontend/components/examples/ExampleFormDialog.tsx b/frontend/components/examples/ExampleFormDialog.tsx
index c358221b..38f04a71 100644
--- a/frontend/components/examples/ExampleFormDialog.tsx
+++ b/frontend/components/examples/ExampleFormDialog.tsx
@@ -212,7 +212,7 @@ export function ExampleFormDialog() {
               )}
               {!errors.email && formData.email && formData.email.includes("@") && (
                 <p className="text-muted-foreground flex items-center gap-1 text-xs">
-                  <CheckCircle className="h-3 w-3 text-green-600" />
+                  <CheckCircle className="h-3 w-3 text-emerald-600" />
                   올바른 형식입니다
                 </p>
               )}
diff --git a/frontend/components/flow/FlowConditionBuilder.tsx b/frontend/components/flow/FlowConditionBuilder.tsx
index 5bccc2c7..5f5c753d 100644
--- a/frontend/components/flow/FlowConditionBuilder.tsx
+++ b/frontend/components/flow/FlowConditionBuilder.tsx
@@ -337,7 +337,7 @@ export function FlowConditionBuilder({
           </div>
         ) : (
           conditions.map((cond, index) => (
-            <div key={index} className="space-y-2 rounded border bg-gray-50 p-3">
+            <div key={index} className="space-y-2 rounded border bg-muted p-3">
               {/* 조건 번호 및 삭제 버튼 */}
               <div className="flex items-center justify-between">
                 <Badge variant="outline">조건 {index + 1}</Badge>
@@ -378,7 +378,7 @@ export function FlowConditionBuilder({
                               return (
                                 <span className="flex items-center gap-2">
                                   <span className="font-medium">{displayName}</span>
-                                  {dataType && <span className="text-gray-500">({dataType})</span>}
+                                  {dataType && <span className="text-muted-foreground">({dataType})</span>}
                                 </span>
                               );
                             })()
@@ -390,7 +390,7 @@ export function FlowConditionBuilder({
                       <Command>
                         <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
                         <CommandList>
-                          <CommandEmpty className="py-2 text-center text-xs text-gray-500">
+                          <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
                             컬럼을 찾을 수 없습니다.
                           </CommandEmpty>
                           <CommandGroup>
@@ -417,7 +417,7 @@ export function FlowConditionBuilder({
                                   />
                                   <div className="flex items-center gap-2">
                                     <span className="font-medium">{displayName}</span>
-                                    <span className="text-gray-500">({dataType})</span>
+                                    <span className="text-muted-foreground">({dataType})</span>
                                   </div>
                                 </CommandItem>
                               );
@@ -478,7 +478,7 @@ export function FlowConditionBuilder({
 
       {/* 조건 요약 */}
       {conditions.length > 0 && (
-        <div className="rounded bg-blue-50 p-3 text-sm">
+        <div className="rounded bg-primary/10 p-3 text-sm">
           <strong>조건 요약:</strong>
           <div className="mt-2 space-y-1">
             {conditions.map((cond, index) => (
diff --git a/frontend/components/flow/FlowStepPanel.tsx b/frontend/components/flow/FlowStepPanel.tsx
index 311357f1..2a7dd96e 100644
--- a/frontend/components/flow/FlowStepPanel.tsx
+++ b/frontend/components/flow/FlowStepPanel.tsx
@@ -645,7 +645,7 @@ export function FlowStepPanel({
                   ))}
                 </SelectContent>
               </Select>
-              <p className="mt-1 text-xs text-gray-500">조회할 데이터베이스를 선택합니다</p>
+              <p className="mt-1 text-xs text-muted-foreground">조회할 데이터베이스를 선택합니다</p>
             </div> */}
 
             {/* 테이블 선택 */}
@@ -697,7 +697,7 @@ export function FlowStepPanel({
                                 <div className="flex flex-col">
                                   <span className="font-medium">{table.displayName || table.tableName}</span>
                                   {table.description && (
-                                    <span className="text-xs text-gray-500">{table.description}</span>
+                                    <span className="text-xs text-muted-foreground">{table.description}</span>
                                   )}
                                 </div>
                               </CommandItem>
@@ -726,7 +726,7 @@ export function FlowStepPanel({
                   </Command>
                 </PopoverContent>
               </Popover>
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="mt-1 text-xs text-muted-foreground">
                 {selectedDbSource === "internal"
                   ? "이 단계에서 조건을 적용할 테이블을 선택합니다"
                   : "외부 데이터베이스의 테이블을 선택합니다"}
@@ -737,8 +737,8 @@ export function FlowStepPanel({
             {/* ===== 신버전: 플로우에서 선택한 테이블 표시만 ===== */}
             <div>
               <Label>연결된 테이블</Label>
-              <Input value={formData.tableName || "테이블이 지정되지 않았습니다"} disabled className="bg-gray-50" />
-              <p className="mt-1 text-xs text-gray-500">플로우 생성 시 선택한 테이블입니다 (수정 불가)</p>
+              <Input value={formData.tableName || "테이블이 지정되지 않았습니다"} disabled className="bg-muted" />
+              <p className="mt-1 text-xs text-muted-foreground">플로우 생성 시 선택한 테이블입니다 (수정 불가)</p>
             </div>
             {/* ===== 신버전 끝 ===== */}
           </CardContent>
@@ -752,7 +752,7 @@ export function FlowStepPanel({
           </CardHeader>
           <CardContent>
             {!formData.tableName ? (
-              <div className="py-8 text-center text-gray-500">먼저 테이블을 선택해주세요</div>
+              <div className="py-8 text-center text-muted-foreground">먼저 테이블을 선택해주세요</div>
             ) : (
               <FlowConditionBuilder
                 flowId={flowId}
@@ -791,19 +791,19 @@ export function FlowStepPanel({
                   <SelectItem value="status">
                     <div>
                       <div className="font-medium">상태 변경</div>
-                      <div className="text-xs text-gray-500">같은 테이블 내에서 상태 컬럼만 업데이트</div>
+                      <div className="text-xs text-muted-foreground">같은 테이블 내에서 상태 컬럼만 업데이트</div>
                     </div>
                   </SelectItem>
                   <SelectItem value="table">
                     <div>
                       <div className="font-medium">테이블 이동</div>
-                      <div className="text-xs text-gray-500">다른 테이블로 데이터 복사</div>
+                      <div className="text-xs text-muted-foreground">다른 테이블로 데이터 복사</div>
                     </div>
                   </SelectItem>
                   <SelectItem value="both">
                     <div>
                       <div className="font-medium">하이브리드</div>
-                      <div className="text-xs text-gray-500">상태 변경 + 테이블 이동</div>
+                      <div className="text-xs text-muted-foreground">상태 변경 + 테이블 이동</div>
                     </div>
                   </SelectItem>
                 </SelectContent>
@@ -864,7 +864,7 @@ export function FlowStepPanel({
                                   />
                                   <div>
                                     <div>{columnName}</div>
-                                    <div className="text-xs text-gray-500">({dataType})</div>
+                                    <div className="text-xs text-muted-foreground">({dataType})</div>
                                   </div>
                                 </CommandItem>
                               );
@@ -874,7 +874,7 @@ export function FlowStepPanel({
                       </Command>
                     </PopoverContent>
                   </Popover>
-                  <p className="mt-1 text-xs text-gray-500">업데이트할 컬럼의 이름</p>
+                  <p className="mt-1 text-xs text-muted-foreground">업데이트할 컬럼의 이름</p>
                 </div>
 
                 <div>
@@ -889,7 +889,7 @@ export function FlowStepPanel({
                     }}
                     placeholder="예: approved"
                   />
-                  <p className="mt-1 text-xs text-gray-500">이 단계에 있을 때의 상태값</p>
+                  <p className="mt-1 text-xs text-muted-foreground">이 단계에 있을 때의 상태값</p>
                 </div>
               </>
             )}
@@ -914,11 +914,11 @@ export function FlowStepPanel({
                       ))}
                     </SelectContent>
                   </Select>
-                  <p className="mt-1 text-xs text-gray-500">다음 단계로 이동 시 데이터가 저장될 테이블</p>
+                  <p className="mt-1 text-xs text-muted-foreground">다음 단계로 이동 시 데이터가 저장될 테이블</p>
                 </div>
 
-                <div className="rounded-md bg-blue-50 p-3">
-                  <p className="text-sm text-blue-900">
+                <div className="rounded-md bg-primary/10 p-3">
+                  <p className="text-sm text-primary">
                     💡 필드 매핑은 향후 구현 예정입니다. 현재는 같은 이름의 컬럼만 자동 매핑됩니다.
                   </p>
                 </div>
@@ -967,7 +967,7 @@ export function FlowStepPanel({
             {formData.integrationType === "external_db" && (
               <div className="space-y-4 rounded-lg border p-4">
                 {externalConnections.length === 0 ? (
-                  <div className="rounded-md bg-yellow-50 p-3">
+                  <div className="rounded-md bg-amber-50 p-3">
                     <p className="text-sm text-yellow-900">
                       ⚠️ 등록된 외부 DB 연결이 없습니다. 먼저 외부 DB 연결을 추가해주세요.
                     </p>
@@ -1070,7 +1070,7 @@ export function FlowStepPanel({
                               rows={4}
                               className="font-mono text-sm"
                             />
-                            <p className="mt-1 text-xs text-gray-500">
+                            <p className="mt-1 text-xs text-muted-foreground">
                               템플릿 변수: {`{{dataId}}, {{currentUser}}, {{currentTimestamp}}`}
                             </p>
                           </div>
@@ -1132,8 +1132,8 @@ export function FlowStepPanel({
                           </>
                         )}
 
-                        <div className="rounded-md bg-blue-50 p-3">
-                          <p className="text-sm text-blue-900">
+                        <div className="rounded-md bg-primary/10 p-3">
+                          <p className="text-sm text-primary">
                             💡 템플릿 변수를 사용하여 동적 값을 삽입할 수 있습니다:
                             <br />• {`{{dataId}}`} - 이동하는 데이터의 ID
                             <br />• {`{{currentUser}}`} - 현재 사용자
@@ -1261,8 +1261,8 @@ export function FlowStepPanel({
                       />
                     </div>
 
-                    <div className="rounded-md bg-blue-50 p-3">
-                      <p className="text-sm text-blue-900">
+                    <div className="rounded-md bg-primary/10 p-3">
+                      <p className="text-sm text-primary">
                         💡 템플릿 변수를 사용하여 동적 값을 삽입할 수 있습니다:
                         <br />• {`{{dataId}}`} - 이동하는 데이터의 ID
                         <br />• {`{{currentUser}}`} - 현재 사용자
@@ -1326,7 +1326,7 @@ export function FlowStepPanel({
                   <div>
                     <Label>외부 DB 연결</Label>
                     {externalConnections.length === 0 ? (
-                      <div className="rounded-md bg-yellow-50 p-3">
+                      <div className="rounded-md bg-amber-50 p-3">
                         <p className="text-sm text-yellow-900">
                           등록된 외부 DB 연결이 없습니다. 먼저 외부 DB 연결을 추가해주세요.
                         </p>
@@ -1469,7 +1469,7 @@ export function FlowStepPanel({
                                       />
                                       <div className="flex flex-col">
                                         <span className="font-medium">{proc.name}</span>
-                                        <span className="text-[10px] text-gray-500">
+                                        <span className="text-[10px] text-muted-foreground">
                                           {proc.type} | {proc.schema}
                                           {proc.returnType ? ` | 반환: ${proc.returnType}` : ""}
                                         </span>
@@ -1531,13 +1531,13 @@ export function FlowStepPanel({
                             <SelectItem value="procedure">
                               <div>
                                 <div className="font-medium">CALL (프로시저)</div>
-                                <div className="text-xs text-gray-500">CALL procedure_name()</div>
+                                <div className="text-xs text-muted-foreground">CALL procedure_name()</div>
                               </div>
                             </SelectItem>
                             <SelectItem value="function">
                               <div>
                                 <div className="font-medium">SELECT (함수)</div>
-                                <div className="text-xs text-gray-500">SELECT function_name()</div>
+                                <div className="text-xs text-muted-foreground">SELECT function_name()</div>
                               </div>
                             </SelectItem>
                           </SelectContent>
@@ -1552,8 +1552,8 @@ export function FlowStepPanel({
                         {loadingProcedureParams ? (
                           <div className="py-2 text-sm text-muted-foreground">파라미터 로딩 중...</div>
                         ) : (formData.integrationConfig as FlowProcedureConfig)?.parameters?.length === 0 ? (
-                          <div className="rounded-md bg-gray-50 p-3">
-                            <p className="text-sm text-gray-600">파라미터가 없는 프로시저입니다.</p>
+                          <div className="rounded-md bg-muted p-3">
+                            <p className="text-sm text-muted-foreground">파라미터가 없는 프로시저입니다.</p>
                           </div>
                         ) : (
                           <div className="space-y-3">
@@ -1627,8 +1627,8 @@ export function FlowStepPanel({
                       </div>
                     )}
 
-                    <div className="rounded-md bg-blue-50 p-3">
-                      <p className="text-sm text-blue-900">
+                    <div className="rounded-md bg-primary/10 p-3">
+                      <p className="text-sm text-primary">
                         프로시저는 데이터 이동 전에 실행됩니다.
                         <br />실패 시 데이터 이동도 함께 롤백됩니다.
                       </p>
@@ -1652,7 +1652,7 @@ export function FlowStepPanel({
                 컬럼 목록을 불러오는 중...
               </div>
             ) : availableColumns.length === 0 ? (
-              <div className="rounded-md bg-yellow-50 p-4 text-center">
+              <div className="rounded-md bg-amber-50 p-4 text-center">
                 <p className="text-sm text-yellow-900">
                   ⚠️ 테이블의 컬럼 목록을 불러올 수 없습니다.
                   <br />
@@ -1721,8 +1721,8 @@ export function FlowStepPanel({
                   </div>
                 </div>
 
-                <div className="rounded-md bg-blue-50 p-3">
-                  <p className="text-sm text-blue-900">
+                <div className="rounded-md bg-primary/10 p-3">
+                  <p className="text-sm text-primary">
                     💡 선택된 컬럼: {formData.displayConfig.visibleColumns?.length || 0}개
                     {formData.displayConfig.visibleColumns?.length === 0 && " (모든 컬럼이 표시됩니다)"}
                   </p>
diff --git a/frontend/components/layout/MainSidebar.tsx b/frontend/components/layout/MainSidebar.tsx
index e544c750..a3205cf5 100644
--- a/frontend/components/layout/MainSidebar.tsx
+++ b/frontend/components/layout/MainSidebar.tsx
@@ -79,7 +79,7 @@ export function MainSidebar({ menuList, expandedMenus, onMenuClick, className =
   return (
     <nav className={cn("space-y-1 overflow-y-auto", className)}>
       {menuList.length === 0 ? (
-        <div className="text-sm text-gray-500">{MESSAGES.NO_MENUS}</div>
+        <div className="text-sm text-muted-foreground">{MESSAGES.NO_MENUS}</div>
       ) : (
         menuList.map((menu) => renderMenuItem(menu))
       )}
diff --git a/frontend/components/layout/ProfileModal.tsx b/frontend/components/layout/ProfileModal.tsx
index a74501e0..d3e5535b 100644
--- a/frontend/components/layout/ProfileModal.tsx
+++ b/frontend/components/layout/ProfileModal.tsx
@@ -48,7 +48,7 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
   const getTypeColor = () => {
     switch (type) {
       case "success":
-        return "text-green-600";
+        return "text-emerald-600";
       case "error":
         return "text-destructive";
       default:
diff --git a/frontend/components/mail/MailAccountModal.tsx b/frontend/components/mail/MailAccountModal.tsx
index 43a56032..6f900222 100644
--- a/frontend/components/mail/MailAccountModal.tsx
+++ b/frontend/components/mail/MailAccountModal.tsx
@@ -352,18 +352,18 @@ export default function MailAccountModal({
                 <div
                   className={`mt-3 p-3 rounded-lg flex items-start gap-2 ${
                     testResult.success
-                      ? 'bg-green-50 border border-green-500/20'
+                      ? 'bg-emerald-50 border border-emerald-500/20'
                       : 'bg-destructive/10 border border-destructive/20'
                   }`}
                 >
                   {testResult.success ? (
-                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
                   ) : (
                     <AlertCircle className="w-5 h-5 text-destructive flex-shrink-0 mt-0.5" />
                   )}
                   <p
                     className={`text-sm ${
-                      testResult.success ? 'text-green-800' : 'text-red-800'
+                      testResult.success ? 'text-emerald-800' : 'text-red-800'
                     }`}
                   >
                     {testResult.message}
diff --git a/frontend/components/mail/MailAccountTable.tsx b/frontend/components/mail/MailAccountTable.tsx
index 31ae20fe..bbe4666f 100644
--- a/frontend/components/mail/MailAccountTable.tsx
+++ b/frontend/components/mail/MailAccountTable.tsx
@@ -82,8 +82,8 @@ export default function MailAccountTable({
 
   if (accounts.length === 0) {
     return (
-      <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-12 text-center border-2 border-dashed border">
-        <Mail className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+      <div className="bg-gradient-to-br from-muted to-muted rounded-xl p-12 text-center border-2 border-dashed border">
+        <Mail className="w-16 h-16 text-muted-foreground/70 mx-auto mb-4" />
         <p className="text-lg font-medium text-muted-foreground mb-2">
           등록된 메일 계정이 없습니다
         </p>
@@ -98,7 +98,7 @@ export default function MailAccountTable({
     <div className="space-y-4">
       {/* 검색 */}
       <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground/70" />
         <input
           type="text"
           value={searchTerm}
@@ -112,7 +112,7 @@ export default function MailAccountTable({
       <div className="bg-white rounded-xl shadow-sm border border overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gradient-to-r from-slate-50 to-gray-50 border-b border">
+            <thead className="bg-gradient-to-r from-slate-50 to-muted border-b border">
               <tr>
                 <th
                   className="px-6 py-4 text-left text-sm font-semibold text-foreground cursor-pointer hover:bg-muted transition"
@@ -166,11 +166,11 @@ export default function MailAccountTable({
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border">
               {sortedAccounts.map((account) => (
                 <tr
                   key={account.id}
-                  className="hover:bg-orange-50/50 transition-colors"
+                  className="hover:bg-amber-50/50 transition-colors"
                 >
                   <td className="px-6 py-4">
                     <div className="font-medium text-foreground">{account.name}</div>
@@ -182,7 +182,7 @@ export default function MailAccountTable({
                     <div className="text-sm text-muted-foreground">
                       {account.smtpHost}:{account.smtpPort}
                     </div>
-                    <div className="text-xs text-gray-400">
+                    <div className="text-xs text-muted-foreground/70">
                       {account.smtpSecure ? 'SSL' : 'TLS'}
                     </div>
                   </td>
@@ -191,8 +191,8 @@ export default function MailAccountTable({
                       onClick={() => onToggleStatus(account)}
                       className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all hover:scale-105 ${
                         account.status === 'active'
-                          ? 'bg-green-100 text-green-700 hover:bg-green-200'
-                          : 'bg-muted text-muted-foreground hover:bg-gray-200'
+                          ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
+                          : 'bg-muted text-muted-foreground hover:bg-muted/80'
                       }`}
                     >
                       {account.status === 'active' ? (
@@ -224,7 +224,7 @@ export default function MailAccountTable({
                     <div className="flex items-center justify-center gap-2">
                       <button
                         onClick={() => onTestConnection(account)}
-                        className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                        className="p-2 text-primary hover:bg-primary/10 rounded-lg transition-colors"
                         title="SMTP 연결 테스트"
                       >
                         <Zap className="w-4 h-4" />
diff --git a/frontend/components/mail/MailDesigner.tsx b/frontend/components/mail/MailDesigner.tsx
index 464de85d..77b5b9e4 100644
--- a/frontend/components/mail/MailDesigner.tsx
+++ b/frontend/components/mail/MailDesigner.tsx
@@ -133,7 +133,7 @@ export default function MailDesigner({
   const componentTypes = [
     // 레이아웃 컴포넌트
     { type: "header", icon: LayoutTemplate, label: "헤더", color: "bg-indigo-100 hover:bg-indigo-200", category: "layout" },
-    { type: "divider", icon: Minus, label: "구분선", color: "bg-gray-100 hover:bg-gray-200", category: "layout" },
+    { type: "divider", icon: Minus, label: "구분선", color: "bg-muted hover:bg-muted/80", category: "layout" },
     { type: "spacer", icon: Square, label: "여백", color: "bg-muted hover:bg-muted/80", category: "layout" },
     { type: "footer", icon: Building2, label: "푸터", color: "bg-slate-100 hover:bg-slate-200", category: "layout" },
     // 컨텐츠 컴포넌트
@@ -289,7 +289,7 @@ export default function MailDesigner({
         {/* 레이아웃 컴포넌트 */}
         <div>
           <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center">
-            <LayoutTemplate className="w-4 h-4 mr-2 text-indigo-500" />
+            <LayoutTemplate className="w-4 h-4 mr-2 text-primary" />
             레이아웃
           </h3>
           <div className="space-y-2">
@@ -411,8 +411,8 @@ export default function MailDesigner({
                     onClick={() => selectComponent(comp.id)}
                     className={`relative group cursor-pointer rounded-lg transition-all ${
                       selectedComponent === comp.id
-                        ? "ring-2 ring-orange-500 bg-orange-50/30"
-                        : "hover:ring-2 hover:ring-gray-300"
+                        ? "ring-2 ring-orange-500 bg-amber-50/30"
+                        : "hover:ring-2 hover:ring-ring"
                     } ${draggedIndex === index ? "opacity-50 scale-95" : ""} ${
                       dragOverIndex === index ? "ring-2 ring-primary ring-dashed bg-primary/10" : ""
                     }`}
@@ -422,17 +422,17 @@ export default function MailDesigner({
                     <div className="absolute -left-10 top-1/2 -translate-y-1/2 flex flex-col items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                       <button
                         onClick={(e) => { e.stopPropagation(); if (index > 0) moveComponent(index, index - 1); }}
-                        className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
+                        className="p-1 hover:bg-muted/80 rounded disabled:opacity-30"
                         disabled={index === 0}
                       >
                         <ChevronUp className="w-3 h-3" />
                       </button>
-                      <div className="cursor-grab active:cursor-grabbing p-1 hover:bg-gray-200 rounded">
-                        <GripVertical className="w-4 h-4 text-gray-400" />
+                      <div className="cursor-grab active:cursor-grabbing p-1 hover:bg-muted/80 rounded">
+                        <GripVertical className="w-4 h-4 text-muted-foreground/70" />
                       </div>
                       <button
                         onClick={(e) => { e.stopPropagation(); if (index < components.length - 1) moveComponent(index, index + 1); }}
-                        className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
+                        className="p-1 hover:bg-muted/80 rounded disabled:opacity-30"
                         disabled={index === components.length - 1}
                       >
                         <ChevronDown className="w-3 h-3" />
@@ -440,7 +440,7 @@ export default function MailDesigner({
                     </div>
 
                     {/* 순서 배지 */}
-                    <div className="absolute -left-10 top-0 text-xs text-gray-400 opacity-0 group-hover:opacity-100">
+                    <div className="absolute -left-10 top-0 text-xs text-muted-foreground/70 opacity-0 group-hover:opacity-100">
                       {index + 1}
                     </div>
 
@@ -474,7 +474,7 @@ export default function MailDesigner({
                       <img src={comp.src} alt="메일 이미지" className="w-full rounded" />
                     )}
                     {comp.type === "spacer" && (
-                      <div style={{ height: `${comp.height}px` }} className="bg-gray-100 rounded flex items-center justify-center text-xs text-gray-400">
+                      <div style={{ height: `${comp.height}px` }} className="bg-muted rounded flex items-center justify-center text-xs text-muted-foreground/70">
                         여백 {comp.height}px
                       </div>
                     )}
@@ -485,20 +485,20 @@ export default function MailDesigner({
                             {comp.logoSrc && <img src={comp.logoSrc} alt="로고" className="h-10" />}
                             <span className="font-bold text-lg">{comp.brandName}</span>
                           </div>
-                          <span className="text-sm text-gray-500">{comp.sendDate}</span>
+                          <span className="text-sm text-muted-foreground">{comp.sendDate}</span>
                         </div>
                       </div>
                     )}
                     {comp.type === "infoTable" && (
                       <div className="border rounded-lg overflow-hidden">
                         {comp.tableTitle && (
-                          <div className="bg-gray-50 px-4 py-2 font-semibold border-b">{comp.tableTitle}</div>
+                          <div className="bg-muted px-4 py-2 font-semibold border-b">{comp.tableTitle}</div>
                         )}
                         <table className="w-full">
                           <tbody>
                             {comp.rows?.map((row, i) => (
-                              <tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
-                                <td className="px-4 py-2 font-medium text-gray-600 w-1/3 border-r">{row.label}</td>
+                              <tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-muted"}>
+                                <td className="px-4 py-2 font-medium text-muted-foreground w-1/3 border-r">{row.label}</td>
                                 <td className="px-4 py-2">{row.value}</td>
                               </tr>
                             ))}
@@ -508,9 +508,9 @@ export default function MailDesigner({
                     )}
                     {comp.type === "alertBox" && (
                       <div className={`p-4 rounded-lg border-l-4 ${
-                        comp.alertType === "info" ? "bg-blue-50 border-blue-500 text-blue-800" :
+                        comp.alertType === "info" ? "bg-primary/10 border-primary text-primary" :
                         comp.alertType === "warning" ? "bg-amber-50 border-amber-500 text-amber-800" :
-                        comp.alertType === "danger" ? "bg-red-50 border-red-500 text-red-800" :
+                        comp.alertType === "danger" ? "bg-destructive/10 border-destructive text-red-800" :
                         "bg-emerald-50 border-emerald-500 text-emerald-800"
                       }`}>
                         {comp.alertTitle && <div className="font-bold mb-1">{comp.alertTitle}</div>}
@@ -518,11 +518,11 @@ export default function MailDesigner({
                       </div>
                     )}
                     {comp.type === "divider" && (
-                      <hr className="border-gray-300" style={{ borderWidth: `${comp.height || 1}px` }} />
+                      <hr className="border-input" style={{ borderWidth: `${comp.height || 1}px` }} />
                     )}
                     {comp.type === "footer" && (
-                      <div className="text-center text-sm text-gray-500 py-4 border-t bg-gray-50">
-                        {comp.companyName && <div className="font-semibold text-gray-700">{comp.companyName}</div>}
+                      <div className="text-center text-sm text-muted-foreground py-4 border-t bg-muted">
+                        {comp.companyName && <div className="font-semibold text-foreground">{comp.companyName}</div>}
                         {(comp.ceoName || comp.businessNumber) && (
                           <div className="mt-1">
                             {comp.ceoName && <span>대표: {comp.ceoName}</span>}
@@ -538,7 +538,7 @@ export default function MailDesigner({
                             {comp.email && <span>Email: {comp.email}</span>}
                           </div>
                         )}
-                        {comp.copyright && <div className="mt-2 text-xs text-gray-400">{comp.copyright}</div>}
+                        {comp.copyright && <div className="mt-2 text-xs text-muted-foreground/70">{comp.copyright}</div>}
                       </div>
                     )}
                     {comp.type === "numberedList" && (
@@ -754,7 +754,7 @@ export default function MailDesigner({
                         variant="ghost"
                         size="sm"
                         onClick={() => updateComponent(selected.id, { src: "" })}
-                        className="h-6 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
+                        className="h-6 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
                       >
                         <X className="w-3 h-3 mr-1" />
                         이미지 제거
@@ -925,9 +925,9 @@ export default function MailDesigner({
                         size="sm"
                         onClick={() => updateComponent(selected.id, { alertType: type })}
                         className={
-                          type === "info" ? "border-blue-300" :
+                          type === "info" ? "border-primary/40" :
                           type === "warning" ? "border-amber-300" :
-                          type === "danger" ? "border-red-300" : "border-emerald-300"
+                          type === "danger" ? "border-destructive/30" : "border-emerald-300"
                         }
                       >
                         {type === "info" ? "정보" : type === "warning" ? "주의" : type === "danger" ? "위험" : "성공"}
diff --git a/frontend/components/mail/MailDetailModal.tsx b/frontend/components/mail/MailDetailModal.tsx
index 31c2d7c0..4d5a3840 100644
--- a/frontend/components/mail/MailDetailModal.tsx
+++ b/frontend/components/mail/MailDetailModal.tsx
@@ -201,7 +201,7 @@ export default function MailDetailModal({
           </div>
         ) : error ? (
           <div className="flex flex-col items-center justify-center py-16">
-            <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
+            <AlertCircle className="w-12 h-12 text-destructive mb-4" />
             <p className="text-destructive">{error}</p>
             <Button onClick={loadMailDetail} variant="outline" className="mt-4">
               다시 시도
@@ -307,7 +307,7 @@ export default function MailDetailModal({
                               {formatFileSize(attachment.size)}
                             </Badge>
                             {isImage && (
-                              <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
+                              <Badge variant="outline" className="text-xs bg-primary/10 text-primary border-primary/20">
                                 이미지
                               </Badge>
                             )}
diff --git a/frontend/components/mail/MailNotifications.tsx b/frontend/components/mail/MailNotifications.tsx
index a39d6002..20e7eb4f 100644
--- a/frontend/components/mail/MailNotifications.tsx
+++ b/frontend/components/mail/MailNotifications.tsx
@@ -258,11 +258,11 @@ export default function MailNotifications() {
   const getIcon = (type: MailNotification["type"]) => {
     switch (type) {
       case "new_mail":
-        return <Mail className="h-4 w-4 text-blue-600" />;
+        return <Mail className="h-4 w-4 text-primary" />;
       case "send_failed":
-        return <XCircle className="h-4 w-4 text-red-600" />;
+        return <XCircle className="h-4 w-4 text-destructive" />;
       case "limit_warning":
-        return <AlertCircle className="h-4 w-4 text-yellow-600" />;
+        return <AlertCircle className="h-4 w-4 text-amber-600" />;
       default:
         return <Bell className="h-4 w-4" />;
     }
@@ -271,11 +271,11 @@ export default function MailNotifications() {
   const getTypeColor = (type: MailNotification["type"]) => {
     switch (type) {
       case "new_mail":
-        return "bg-blue-50 border-blue-200";
+        return "bg-primary/10 border-primary/20";
       case "send_failed":
-        return "bg-red-50 border-red-200";
+        return "bg-destructive/10 border-destructive/20";
       case "limit_warning":
-        return "bg-yellow-50 border-yellow-200";
+        return "bg-amber-50 border-amber-200";
       default:
         return "bg-muted";
     }
@@ -353,7 +353,7 @@ export default function MailNotifications() {
                           {notification.title}
                         </h4>
                         {!notification.read && (
-                          <div className="w-2 h-2 bg-blue-600 rounded-full flex-shrink-0" />
+                          <div className="w-2 h-2 bg-primary rounded-full flex-shrink-0" />
                         )}
                       </div>
                       <p className="text-xs text-muted-foreground line-clamp-2">
diff --git a/frontend/components/mail/MailTemplateCard.tsx b/frontend/components/mail/MailTemplateCard.tsx
index 5fc629af..2b67916d 100644
--- a/frontend/components/mail/MailTemplateCard.tsx
+++ b/frontend/components/mail/MailTemplateCard.tsx
@@ -30,10 +30,10 @@ export default function MailTemplateCard({
 
   const getCategoryColor = (category?: string) => {
     const colors: Record<string, string> = {
-      welcome: 'bg-primary/20 text-blue-700 border-blue-300',
+      welcome: 'bg-primary/20 text-primary border-primary/40',
       promotion: 'bg-purple-100 text-purple-700 border-purple-300',
-      notification: 'bg-green-100 text-green-700 border-green-300',
-      newsletter: 'bg-orange-100 text-orange-700 border-orange-300',
+      notification: 'bg-emerald-100 text-emerald-700 border-green-300',
+      newsletter: 'bg-amber-100 text-orange-700 border-orange-300',
       system: 'bg-muted text-foreground border',
     };
     return colors[category || ''] || 'bg-muted text-foreground border';
@@ -79,14 +79,14 @@ export default function MailTemplateCard({
                 <div className="w-1.5 h-1.5 rounded-full bg-orange-400" />
                 <span className="capitalize">{component.type}</span>
                 {component.type === 'text' && component.content && (
-                  <span className="text-gray-400 truncate flex-1">
+                  <span className="text-muted-foreground/70 truncate flex-1">
                     {component.content.replace(/<[^>]*>/g, '').substring(0, 30)}...
                   </span>
                 )}
               </div>
             ))}
             {template.components.length > 3 && (
-              <p className="text-xs text-gray-400 pl-3.5">
+              <p className="text-xs text-muted-foreground/70 pl-3.5">
                 +{template.components.length - 3}개 더보기
               </p>
             )}
@@ -100,7 +100,7 @@ export default function MailTemplateCard({
             <span>{formatDate(template.createdAt)}</span>
           </div>
           {template.updatedAt !== template.createdAt && (
-            <span className="text-gray-400">수정됨</span>
+            <span className="text-muted-foreground/70">수정됨</span>
           )}
         </div>
       </div>
@@ -110,7 +110,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="flex-1 hover:bg-accent hover:text-primary hover:border-blue-300"
+          className="flex-1 hover:bg-accent hover:text-primary hover:border-primary/40"
           onClick={() => onPreview(template)}
         >
           <Eye className="w-4 h-4 mr-1" />
@@ -119,7 +119,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="flex-1 hover:bg-green-50 hover:text-green-600 hover:border-green-300"
+          className="flex-1 hover:bg-emerald-50 hover:text-emerald-600 hover:border-green-300"
           onClick={() => onEdit(template)}
         >
           <Edit2 className="w-4 h-4 mr-1" />
@@ -138,7 +138,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="hover:bg-destructive/10 hover:text-destructive hover:border-red-300"
+          className="hover:bg-destructive/10 hover:text-destructive hover:border-destructive/30"
           onClick={() => onDelete(template)}
         >
           <Trash2 className="w-4 h-4" />
diff --git a/frontend/components/numbering-rule/AutoConfigPanel.tsx b/frontend/components/numbering-rule/AutoConfigPanel.tsx
index b51ea500..8e56fa1c 100644
--- a/frontend/components/numbering-rule/AutoConfigPanel.tsx
+++ b/frontend/components/numbering-rule/AutoConfigPanel.tsx
@@ -387,7 +387,7 @@ const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{table.displayName}</span>
-                            <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                            <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                           </div>
                         </CommandItem>
                       ))}
@@ -452,7 +452,7 @@ const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{column.displayName}</span>
-                            <span className="text-[10px] text-gray-500">
+                            <span className="text-[10px] text-muted-foreground">
                               {column.columnName} ({column.inputType || column.dataType})
                             </span>
                           </div>
diff --git a/frontend/components/pop/designer/PopCanvas.tsx b/frontend/components/pop/designer/PopCanvas.tsx
index 2edefb3a..15ed49be 100644
--- a/frontend/components/pop/designer/PopCanvas.tsx
+++ b/frontend/components/pop/designer/PopCanvas.tsx
@@ -488,7 +488,7 @@ export default function PopCanvas({
   const showRightPanel = showReviewPanel || showHiddenPanel;
 
   return (
-    <div className="flex h-full flex-col bg-gray-50">
+    <div className="flex h-full flex-col bg-muted">
       {/* 상단 컨트롤 */}
       <div className="flex items-center gap-2 border-b bg-white px-4 py-2">
         {/* 모드 프리셋 버튼 */}
@@ -517,7 +517,7 @@ export default function PopCanvas({
           })}
         </div>
 
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-muted/60" />
 
         {/* 고정/되돌리기 버튼 (기본 모드 아닐 때만 표시) */}
         {currentMode !== DEFAULT_PRESET && (
@@ -546,14 +546,14 @@ export default function PopCanvas({
           </>
         )}
 
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-muted/60" />
 
         {/* 해상도 표시 */}
         <div className="text-xs text-muted-foreground">
           {customWidth} × {Math.round(dynamicCanvasHeight)}
         </div>
         
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-muted/60" />
         
         {/* Gap 프리셋 선택 */}
         <div className="flex items-center gap-2">
@@ -610,7 +610,7 @@ export default function PopCanvas({
           </Button>
         </div>
         
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-muted/60" />
         
         {/* 그리드 가이드 토글 */}
         <Button
@@ -653,7 +653,7 @@ export default function PopCanvas({
       <div
         ref={containerRef}
         className={cn(
-          "canvas-scroll-area relative flex-1 overflow-auto bg-gray-100",
+          "canvas-scroll-area relative flex-1 overflow-auto bg-muted",
           isSpacePressed && "cursor-grab",
           isPanning && "cursor-grabbing"
         )}
@@ -689,7 +689,7 @@ export default function PopCanvas({
                   {gridLabels.columnLabels.map((num) => (
                     <div
                       key={`col-${num}`}
-                      className="flex items-center justify-center text-xs font-semibold text-blue-500"
+                      className="flex items-center justify-center text-xs font-semibold text-primary"
                       style={{
                         width: `calc((${customWidth}px - ${adjustedPadding * 2}px - ${adjustedGap * (breakpoint.columns - 1)}px) / ${breakpoint.columns})`,
                         height: "24px",
@@ -711,7 +711,7 @@ export default function PopCanvas({
                   {gridLabels.rowLabels.map((num) => (
                     <div
                       key={`row-${num}`}
-                      className="flex items-center justify-center text-xs font-semibold text-blue-500"
+                      className="flex items-center justify-center text-xs font-semibold text-primary"
                       style={{
                         width: "24px",
                         height: `${breakpoint.rowHeight}px`,
@@ -742,10 +742,10 @@ export default function PopCanvas({
                 // 빈 상태
                 <div className="flex h-full items-center justify-center p-8">
                   <div className="text-center">
-                    <div className="mb-2 text-sm font-medium text-gray-500">
+                    <div className="mb-2 text-sm font-medium text-muted-foreground">
                       컴포넌트를 드래그하여 배치하세요
                     </div>
-                    <div className="text-xs text-gray-400">
+                    <div className="text-xs text-muted-foreground/70">
                       {breakpoint.label} - {breakpoint.columns}칸 그리드
                     </div>
                   </div>
@@ -832,16 +832,16 @@ function ReviewPanel({
 }: ReviewPanelProps) {
   return (
     <div 
-      className="flex flex-col rounded-lg border-2 border-dashed border-blue-300 bg-blue-50/50"
+      className="flex flex-col rounded-lg border-2 border-dashed border-primary/40 bg-primary/10/50"
       style={{
         width: "200px",
         maxHeight: "300px",
       }}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 border-b border-blue-200 bg-blue-100/50 px-3 py-2 rounded-t-lg">
-        <AlertTriangle className="h-4 w-4 text-blue-600" />
-        <span className="text-xs font-semibold text-blue-700">
+      <div className="flex items-center gap-2 border-b border-primary/20 bg-primary/10/50 px-3 py-2 rounded-t-lg">
+        <AlertTriangle className="h-4 w-4 text-primary" />
+        <span className="text-xs font-semibold text-primary">
           검토 필요 ({components.length}개)
         </span>
       </div>
@@ -859,8 +859,8 @@ function ReviewPanel({
       </div>
       
       {/* 안내 문구 */}
-      <div className="border-t border-blue-200 px-3 py-2 bg-blue-50/80 rounded-b-lg">
-        <p className="text-[10px] text-blue-600 leading-tight">
+      <div className="border-t border-primary/20 px-3 py-2 bg-primary/10/80 rounded-b-lg">
+        <p className="text-[10px] text-primary leading-tight">
           자동 배치됨. 클릭하여 확인 후 편집 가능
         </p>
       </div>
@@ -888,18 +888,18 @@ function ReviewItem({
       className={cn(
         "flex flex-col gap-1 rounded-md border-2 p-2 cursor-pointer transition-all",
         isSelected
-          ? "border-blue-500 bg-blue-100 shadow-sm"
-          : "border-blue-200 bg-white hover:border-blue-400 hover:bg-blue-50"
+          ? "border-primary bg-primary/10 shadow-sm"
+          : "border-primary/20 bg-white hover:border-primary/60 hover:bg-primary/10"
       )}
       onClick={(e) => {
         e.stopPropagation();
         onSelect();
       }}
     >
-      <span className="text-xs font-medium text-blue-800 line-clamp-1">
+      <span className="text-xs font-medium text-primary line-clamp-1">
         {component.label || component.id}
       </span>
-      <span className="text-[10px] text-blue-600 bg-blue-50 rounded px-1.5 py-0.5 self-start">
+      <span className="text-[10px] text-primary bg-primary/10 rounded px-1.5 py-0.5 self-start">
         자동 배치됨
       </span>
     </div>
@@ -951,10 +951,10 @@ function HiddenPanel({
     <div 
       ref={drop}
       className={cn(
-        "flex flex-col rounded-lg border-2 border-dashed bg-gray-100/50 transition-colors",
+        "flex flex-col rounded-lg border-2 border-dashed bg-muted/50 transition-colors",
         isOver && canDrop
-          ? "border-gray-600 bg-gray-200/70"
-          : "border-gray-400"
+          ? "border-input bg-muted/80/70"
+          : "border-input"
       )}
       style={{
         width: "200px",
@@ -962,9 +962,9 @@ function HiddenPanel({
       }}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 border-b border-gray-300 bg-gray-200/50 px-3 py-2 rounded-t-lg">
-        <EyeOff className="h-4 w-4 text-gray-600" />
-        <span className="text-xs font-semibold text-gray-700">
+      <div className="flex items-center gap-2 border-b border-input bg-muted/80/50 px-3 py-2 rounded-t-lg">
+        <EyeOff className="h-4 w-4 text-muted-foreground" />
+        <span className="text-xs font-semibold text-foreground">
           숨김 ({components.length}개)
         </span>
       </div>
@@ -982,8 +982,8 @@ function HiddenPanel({
       </div>
       
       {/* 안내 문구 */}
-      <div className="border-t border-gray-300 px-3 py-2 bg-gray-100/80 rounded-b-lg">
-        <p className="text-[10px] text-gray-600 leading-tight">
+      <div className="border-t border-input px-3 py-2 bg-muted/80 rounded-b-lg">
+        <p className="text-[10px] text-muted-foreground leading-tight">
           그리드로 드래그하여 다시 표시
         </p>
       </div>
@@ -1029,19 +1029,19 @@ function HiddenItem({
         "rounded-md border-2 bg-white p-2 cursor-move transition-all opacity-60",
         isSelected
           ? "border-primary ring-2 ring-primary/30"
-          : "border-gray-400 hover:border-gray-500",
+          : "border-input hover:border-input",
         isDragging && "opacity-30"
       )}
       onClick={onSelect}
     >
       {/* 컴포넌트 이름 */}
-      <div className="flex items-center gap-1 text-xs font-medium text-gray-600 truncate">
+      <div className="flex items-center gap-1 text-xs font-medium text-muted-foreground truncate">
         <EyeOff className="h-3 w-3" />
         {component.label || component.type}
       </div>
       
       {/* 원본 위치 정보 */}
-      <div className="text-[10px] text-gray-500 mt-1">
+      <div className="text-[10px] text-muted-foreground mt-1">
         원본: {component.position.col}열, {component.position.row}행
       </div>
     </div>
@@ -1191,7 +1191,7 @@ function ModalSizeSettingsPanel({
               onClick={handleTogglePerMode}
               className={cn(
                 "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
-                usePerMode ? "bg-primary" : "bg-gray-300"
+                usePerMode ? "bg-primary" : "bg-muted/60"
               )}
             >
               <span
@@ -1290,7 +1290,7 @@ function ModalThumbnailPreview({
       </div>
 
       <div
-        className="relative mx-auto rounded-md border bg-gray-100 overflow-hidden"
+        className="relative mx-auto rounded-md border bg-muted overflow-hidden"
         style={{ width: `${PREVIEW_WIDTH}px`, height: `${previewHeight}px` }}
       >
         {/* 반투명 배경 오버레이 (모달이 열렸을 때의 딤 효과) */}
diff --git a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
index 12c21e4f..b7d42bc2 100644
--- a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
+++ b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
@@ -181,18 +181,18 @@ export default function ComponentEditorPanel({
                         "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors",
                         isActive
                           ? "bg-primary/10 text-primary font-medium"
-                          : "hover:bg-gray-100 text-gray-600"
+                          : "hover:bg-muted text-muted-foreground"
                       )}
                     >
                       <span className="truncate flex-1">{label}</span>
-                      <span className="shrink-0 text-[10px] text-gray-400">
+                      <span className="shrink-0 text-[10px] text-muted-foreground/70">
                         ({comp.position.col},{comp.position.row})
                       </span>
                     </button>
                   );
                 })}
               </div>
-              <div className="h-px bg-gray-200 mt-3" />
+              <div className="h-px bg-muted/80 mt-3" />
             </div>
           )}
           <PositionForm
@@ -279,8 +279,8 @@ function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate
   return (
     <div className="space-y-6">
       {/* 그리드 정보 */}
-      <div className="rounded-lg bg-gray-50 p-3">
-        <p className="text-xs font-medium text-gray-700 mb-1">
+      <div className="rounded-lg bg-muted p-3">
+        <p className="text-xs font-medium text-foreground mb-1">
           현재 그리드: {GRID_BREAKPOINTS[currentMode].label}
         </p>
         <p className="text-xs text-muted-foreground">
@@ -331,7 +331,7 @@ function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate
         </div>
       </div>
 
-      <div className="h-px bg-gray-200" />
+      <div className="h-px bg-muted/80" />
 
       {/* 열 크기 */}
       <div className="space-y-2">
@@ -449,7 +449,7 @@ function ComponentSettingsForm({ component, onUpdate, currentMode, previewPageIn
           componentId={component.id}
         />
       ) : (
-        <div className="rounded-lg bg-gray-50 p-3">
+        <div className="rounded-lg bg-muted p-3">
           <p className="text-xs text-muted-foreground">
             {component.type} 전용 설정이 없습니다
           </p>
@@ -513,8 +513,8 @@ function VisibilityForm({ component, onUpdate }: VisibilityFormProps) {
         })}
       </div>
 
-      <div className="rounded-lg bg-blue-50 border border-blue-200 p-3">
-        <p className="text-xs text-blue-800">
+      <div className="rounded-lg bg-primary/10 border border-primary/20 p-3">
+        <p className="text-xs text-primary">
           체크 해제하면 해당 모드에서 컴포넌트가 숨겨집니다
         </p>
       </div>
diff --git a/frontend/components/pop/designer/panels/ComponentPalette.tsx b/frontend/components/pop/designer/panels/ComponentPalette.tsx
index dcd1d987..c510afa3 100644
--- a/frontend/components/pop/designer/panels/ComponentPalette.tsx
+++ b/frontend/components/pop/designer/panels/ComponentPalette.tsx
@@ -111,7 +111,7 @@ function DraggablePaletteItem({ item }: { item: PaletteItem }) {
 // 컴포넌트 팔레트 패널
 export default function ComponentPalette() {
   return (
-    <div className="flex h-full flex-col bg-gray-50">
+    <div className="flex h-full flex-col bg-muted">
       {/* 헤더 */}
       <div className="border-b bg-white px-4 py-3">
         <h3 className="text-sm font-semibold">컴포넌트</h3>
diff --git a/frontend/components/pop/designer/panels/ConnectionEditor.tsx b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
index 52c8102f..c8135edb 100644
--- a/frontend/components/pop/designer/panels/ConnectionEditor.tsx
+++ b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
@@ -73,9 +73,9 @@ export default function ConnectionEditor({
   if (!hasSendable && !hasReceivable) {
     return (
       <div className="space-y-4">
-        <div className="rounded-lg bg-gray-50 p-4 text-center">
+        <div className="rounded-lg bg-muted p-4 text-center">
           <Link2 className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
-          <p className="text-sm font-medium text-gray-700">연결 없음</p>
+          <p className="text-sm font-medium text-foreground">연결 없음</p>
           <p className="mt-1 text-xs text-muted-foreground">
             이 컴포넌트는 다른 컴포넌트와 연결할 수 없습니다
           </p>
@@ -173,7 +173,7 @@ function SendSection({
   return (
     <div className="space-y-3">
       <Label className="flex items-center gap-1 text-xs font-medium">
-        <ArrowRight className="h-3 w-3 text-blue-500" />
+        <ArrowRight className="h-3 w-3 text-primary" />
         보내기
       </Label>
 
@@ -207,7 +207,7 @@ function SendSection({
               />
             )
           ) : (
-            <div className="flex items-center gap-1 rounded border bg-blue-50/50 px-3 py-2">
+            <div className="flex items-center gap-1 rounded border bg-primary/10/50 px-3 py-2">
               <span className="flex-1 truncate text-xs">
                 {conn.label || `→ ${allComponents.find((c) => c.id === conn.targetComponent)?.label || conn.targetComponent}`}
               </span>
@@ -571,7 +571,7 @@ function FilterConnectionForm({
       )}
 
       {selectedTargetInput && !isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput) && (
-        <div className="space-y-2 rounded bg-gray-50 p-2">
+        <div className="space-y-2 rounded bg-muted p-2">
           <p className="text-[10px] font-medium text-muted-foreground">필터할 컬럼</p>
 
           {dbColumnsLoading ? (
@@ -583,7 +583,7 @@ function FilterConnectionForm({
             <div className="space-y-2">
               {displayColumns.length > 0 && (
                 <div className="space-y-1">
-                  <p className="text-[9px] font-medium text-green-600">화면 표시 컬럼</p>
+                  <p className="text-[9px] font-medium text-emerald-600">화면 표시 컬럼</p>
                   {displayColumns.map((col) => (
                     <div key={col} className="flex items-center gap-2">
                       <Checkbox
@@ -605,7 +605,7 @@ function FilterConnectionForm({
               {dataOnlyColumns.length > 0 && (
                 <div className="space-y-1">
                   {displayColumns.length > 0 && (
-                    <div className="my-1 h-px bg-gray-200" />
+                    <div className="my-1 h-px bg-muted/80" />
                   )}
                   <p className="text-[9px] font-medium text-amber-600">데이터 전용 컬럼</p>
                   {dataOnlyColumns.map((col) => (
@@ -636,7 +636,7 @@ function FilterConnectionForm({
           )}
 
           {filterColumns.length > 0 && (
-            <p className="text-[10px] text-blue-600">
+            <p className="text-[10px] text-primary">
               {filterColumns.length}개 컬럼 중 하나라도 일치하면 표시
             </p>
           )}
@@ -690,7 +690,7 @@ function ReceiveSection({
   return (
     <div className="space-y-3">
       <Label className="flex items-center gap-1 text-xs font-medium">
-        <Unlink2 className="h-3 w-3 text-green-500" />
+        <Unlink2 className="h-3 w-3 text-emerald-500" />
         받기
       </Label>
 
@@ -703,9 +703,9 @@ function ReceiveSection({
             return (
               <div
                 key={conn.id}
-                className="flex items-center gap-2 rounded border bg-green-50/50 px-3 py-2 text-xs"
+                className="flex items-center gap-2 rounded border bg-emerald-50/50 px-3 py-2 text-xs"
               >
-                <ArrowRight className="h-3 w-3 text-green-500" />
+                <ArrowRight className="h-3 w-3 text-emerald-500" />
                 <span className="truncate">
                   {sourceComp?.label || conn.sourceComponent}
                 </span>
diff --git a/frontend/components/pop/designer/renderers/PopRenderer.tsx b/frontend/components/pop/designer/renderers/PopRenderer.tsx
index 32ac610b..598f0e90 100644
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@@ -234,7 +234,7 @@ export default function PopRenderer({
       {gridCells.map(cell => (
         <div
           key={cell.id}
-          className="pointer-events-none border border-dashed border-blue-300/40"
+          className="pointer-events-none border border-dashed border-primary/40/40"
           style={{
             gridColumn: cell.col,
             gridRow: cell.row,
@@ -284,7 +284,7 @@ export default function PopRenderer({
         return (
           <div
             key={comp.id}
-            className="relative overflow-hidden rounded-lg border-2 border-gray-200 bg-white transition-all z-10"
+            className="relative overflow-hidden rounded-lg border-2 border-border bg-white transition-all z-10"
             style={positionStyle}
           >
             <ComponentContent 
@@ -365,8 +365,8 @@ function DraggableComponent({
         "relative rounded-lg border-2 transition-all overflow-hidden z-10 bg-white",
         isSelected
           ? "border-primary ring-2 ring-primary/30"
-          : "border-gray-200",
-        isDesignMode && "cursor-move hover:border-gray-300 hover:shadow-sm",
+          : "border-border",
+        isDesignMode && "cursor-move hover:border-input hover:shadow-sm",
         isDragging && "opacity-50"
       )}
       style={positionStyle}
@@ -582,7 +582,7 @@ function ComponentContent({ component, effectivePosition, isDesignMode, isSelect
         {PreviewComponent ? (
           <PreviewComponent config={component.config} />
         ) : (
-          <span className="text-xs text-gray-400 p-2">
+          <span className="text-xs text-muted-foreground/70 p-2">
             {typeLabel}
           </span>
         )}
@@ -628,7 +628,7 @@ function renderActualComponent(
   const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
   return (
     <div className="flex h-full w-full items-center justify-center p-2">
-      <span className="text-xs text-gray-500">{component.label || typeLabel}</span>
+      <span className="text-xs text-muted-foreground">{component.label || typeLabel}</span>
     </div>
   );
 }
diff --git a/frontend/components/pop/management/PopCategoryTree.tsx b/frontend/components/pop/management/PopCategoryTree.tsx
index 705d7163..ecc766ea 100644
--- a/frontend/components/pop/management/PopCategoryTree.tsx
+++ b/frontend/components/pop/management/PopCategoryTree.tsx
@@ -226,9 +226,9 @@ function TreeNode({
 
         {/* 폴더 아이콘 - 루트는 다른 색상 */}
         {isExpanded && hasChildren ? (
-          <FolderOpen className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-orange-500" : "text-amber-500")} />
+          <FolderOpen className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-amber-500" : "text-amber-500")} />
         ) : (
-          <Folder className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-orange-500" : "text-amber-500")} />
+          <Folder className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-amber-500" : "text-amber-500")} />
         )}
 
         {/* 그룹명 - 루트는 볼드체 + 회사코드 표시 */}
@@ -379,7 +379,7 @@ function TreeNode({
               >
                 {/* 트리 연결 표시 */}
                 <span className="text-muted-foreground/50 text-xs mr-1">ㄴ</span>
-                <Monitor className="h-4 w-4 text-blue-500 shrink-0" />
+                <Monitor className="h-4 w-4 text-primary shrink-0" />
                 <span className="flex-1 text-sm truncate">{screen.screenName}</span>
                 <span className="text-[10px] text-muted-foreground shrink-0">#{screen.screenId}</span>
                 
@@ -1053,7 +1053,7 @@ export function PopCategoryTree({
                             onClick={() => onScreenSelect(screen)}
                             onDoubleClick={() => onScreenDesign(screen)}
                           >
-                            <Monitor className="h-4 w-4 text-gray-400 shrink-0" />
+                            <Monitor className="h-4 w-4 text-muted-foreground/70 shrink-0" />
                             <span className="flex-1 text-sm truncate">{screen.screenName}</span>
                             <span className="text-[10px] text-muted-foreground shrink-0">#{screen.screenId}</span>
                             
@@ -1259,7 +1259,7 @@ export function PopCategoryTree({
                     >
                       <Folder className={cn(
                         "h-4 w-4 shrink-0",
-                        depth === 0 ? "text-orange-500" : "text-amber-500"
+                        depth === 0 ? "text-amber-500" : "text-amber-500"
                       )} />
                       <span className="text-sm truncate flex-1">
                         {group.group_name}
diff --git a/frontend/components/pop/management/PopDeployModal.tsx b/frontend/components/pop/management/PopDeployModal.tsx
index 46f8cc68..eac12074 100644
--- a/frontend/components/pop/management/PopDeployModal.tsx
+++ b/frontend/components/pop/management/PopDeployModal.tsx
@@ -358,7 +358,7 @@ export function PopDeployModal({
                               );
                             }}
                           />
-                          <Monitor className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+                          <Monitor className="h-3.5 w-3.5 shrink-0 text-primary" />
                           <span className="flex-1 truncate">
                             {entry.screenName}
                           </span>
@@ -395,7 +395,7 @@ export function PopDeployModal({
                                   );
                                 }}
                               />
-                              <Monitor className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+                              <Monitor className="h-3.5 w-3.5 shrink-0 text-primary" />
                               <span className="flex-1 truncate">
                                 {entry.screenName}
                               </span>
diff --git a/frontend/components/pop/management/PopScreenPreview.tsx b/frontend/components/pop/management/PopScreenPreview.tsx
index 66b605ab..a56188db 100644
--- a/frontend/components/pop/management/PopScreenPreview.tsx
+++ b/frontend/components/pop/management/PopScreenPreview.tsx
@@ -169,7 +169,7 @@ export function PopScreenPreview({ screen, className }: PopScreenPreviewProps) {
         ) : (
           // 디바이스 프레임 + iframe (심플한 테두리)
           <div
-            className="relative border-2 border-gray-300 rounded-lg shadow-lg overflow-hidden"
+            className="relative border-2 border-input rounded-lg shadow-lg overflow-hidden"
             style={{
               width: deviceSize.width * scale,
               height: deviceSize.height * scale,
diff --git a/frontend/components/report/designer/CanvasComponent.tsx b/frontend/components/report/designer/CanvasComponent.tsx
index da440abc..32760420 100644
--- a/frontend/components/report/designer/CanvasComponent.tsx
+++ b/frontend/components/report/designer/CanvasComponent.tsx
@@ -91,9 +91,9 @@ function BarcodeRenderer({
       <svg ref={svgRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
       {/* 에러 메시지 오버레이 */}
       {error && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-destructive">
           <span>{error}</span>
-          <span className="mt-1 text-gray-400">{value}</span>
+          <span className="mt-1 text-muted-foreground/70">{value}</span>
         </div>
       )}
     </div>
@@ -149,9 +149,9 @@ function QRCodeRenderer({ value, size, fgColor, bgColor, level }: QRCodeRenderer
       <canvas ref={canvasRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
       {/* 에러 메시지 오버레이 */}
       {error && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-destructive">
           <span>{error}</span>
-          <span className="mt-1 text-gray-400">{value}</span>
+          <span className="mt-1 text-muted-foreground/70">{value}</span>
         </div>
       )}
     </div>
@@ -711,7 +711,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
               onChange={(e) => setEditValue(e.target.value)}
               onBlur={handleEditSave}
               onKeyDown={handleEditKeyDown}
-              className="h-full w-full resize-none border-none bg-transparent p-0 outline-none focus:ring-2 focus:ring-blue-500"
+              className="h-full w-full resize-none border-none bg-transparent p-0 outline-none focus:ring-2 focus:ring-ring"
               style={{
                 fontSize: `${component.fontSize}px`,
                 color: component.fontColor,
@@ -773,7 +773,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                       {columns.map((col) => (
                         <th
                           key={col.field}
-                          className={component.showBorder !== false ? "border border-gray-300" : ""}
+                          className={component.showBorder !== false ? "border border-input" : ""}
                           style={{
                             padding: "6px 8px",
                             textAlign: col.align || "left",
@@ -792,7 +792,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                         {columns.map((col) => (
                           <td
                             key={col.field}
-                            className={component.showBorder !== false ? "border border-gray-300" : ""}
+                            className={component.showBorder !== false ? "border border-input" : ""}
                             style={{
                               padding: "6px 8px",
                               textAlign: col.align || "left",
@@ -813,7 +813,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
         // 기본 테이블 (데이터 없을 때)
         return (
-          <div className="flex h-full w-full items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
+          <div className="flex h-full w-full items-center justify-center border-2 border-dashed border-input bg-muted text-xs text-muted-foreground/70">
               쿼리를 연결하세요
           </div>
         );
@@ -832,7 +832,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                 }}
               />
             ) : (
-              <div className="flex h-full w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
+              <div className="flex h-full w-full items-center justify-center border border-dashed border-input bg-muted text-xs text-muted-foreground/70">
                 이미지를 업로드하세요
               </div>
             )}
@@ -924,7 +924,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                   />
                 ) : (
                   <div
-                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
+                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-muted text-xs text-muted-foreground/70"
                     style={{
                       borderColor: component.borderColor || "#cccccc",
                     }}
@@ -959,7 +959,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                   />
                 ) : (
                   <div
-                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
+                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-muted text-xs text-muted-foreground/70"
                     style={{
                       borderColor: component.borderColor || "#cccccc",
                       borderRadius: "50%",
@@ -1442,8 +1442,8 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
       className={`absolute ${component.type === "divider" ? "p-0" : "p-2"} shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
         isSelected
           ? isLocked
-            ? "ring-2 ring-red-500"
-            : "ring-2 ring-blue-500"
+            ? "ring-2 ring-destructive"
+            : "ring-2 ring-ring"
           : isMultiSelected
             ? isLocked
               ? "ring-2 ring-red-300"
@@ -1468,7 +1468,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
       {/* 잠금 표시 */}
       {isLocked && (
-        <div className="absolute top-1 right-1 rounded bg-red-500 px-1 py-0.5 text-[10px] text-white">🔒</div>
+        <div className="absolute top-1 right-1 rounded bg-destructive px-1 py-0.5 text-[10px] text-white">🔒</div>
       )}
 
       {/* 그룹화 표시 */}
@@ -1479,7 +1479,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
       {/* 리사이즈 핸들 (선택된 경우만, 잠금 안 된 경우만) */}
       {isSelected && !isLocked && (
         <div
-          className={`resize-handle absolute h-3 w-3 rounded-full bg-blue-500 ${
+          className={`resize-handle absolute h-3 w-3 rounded-full bg-primary ${
             component.type === "divider"
               ? component.orientation === "vertical"
                 ? "bottom-0 left-1/2 cursor-s-resize" // 세로 구분선: 하단 중앙
diff --git a/frontend/components/report/designer/ComponentPalette.tsx b/frontend/components/report/designer/ComponentPalette.tsx
index 68f445c4..59701f1d 100644
--- a/frontend/components/report/designer/ComponentPalette.tsx
+++ b/frontend/components/report/designer/ComponentPalette.tsx
@@ -35,7 +35,7 @@ function DraggableComponentItem({ type, label, icon }: ComponentItem) {
   return (
     <div
       ref={drag}
-      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm transition-all hover:border-blue-500 hover:bg-blue-50 ${
+      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm transition-all hover:border-primary hover:bg-primary/10 ${
         isDragging ? "opacity-50" : ""
       }`}
     >
diff --git a/frontend/components/report/designer/GridSettingsPanel.tsx b/frontend/components/report/designer/GridSettingsPanel.tsx
index 301514ba..3513f488 100644
--- a/frontend/components/report/designer/GridSettingsPanel.tsx
+++ b/frontend/components/report/designer/GridSettingsPanel.tsx
@@ -57,7 +57,7 @@ export function GridSettingsPanel() {
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <Label className="text-xs">셀 너비</Label>
-            <span className="text-xs text-gray-500">{gridConfig.cellWidth}px</span>
+            <span className="text-xs text-muted-foreground">{gridConfig.cellWidth}px</span>
           </div>
           <Slider
             value={[gridConfig.cellWidth]}
@@ -73,7 +73,7 @@ export function GridSettingsPanel() {
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <Label className="text-xs">셀 높이</Label>
-            <span className="text-xs text-gray-500">{gridConfig.cellHeight}px</span>
+            <span className="text-xs text-muted-foreground">{gridConfig.cellHeight}px</span>
           </div>
           <Slider
             value={[gridConfig.cellHeight]}
@@ -89,7 +89,7 @@ export function GridSettingsPanel() {
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <Label className="text-xs">투명도</Label>
-            <span className="text-xs text-gray-500">{Math.round(gridConfig.gridOpacity * 100)}%</span>
+            <span className="text-xs text-muted-foreground">{Math.round(gridConfig.gridOpacity * 100)}%</span>
           </div>
           <Slider
             value={[gridConfig.gridOpacity * 100]}
@@ -122,7 +122,7 @@ export function GridSettingsPanel() {
         </div>
 
         {/* 그리드 정보 */}
-        <div className="rounded border bg-gray-50 p-2 text-xs text-gray-600">
+        <div className="rounded border bg-muted p-2 text-xs text-muted-foreground">
           <div className="flex justify-between">
             <span>행:</span>
             <span className="font-mono">{gridConfig.rows}</span>
diff --git a/frontend/components/report/designer/QueryManager.tsx b/frontend/components/report/designer/QueryManager.tsx
index 39b0d173..19fdc0d3 100644
--- a/frontend/components/report/designer/QueryManager.tsx
+++ b/frontend/components/report/designer/QueryManager.tsx
@@ -264,7 +264,7 @@ export function QueryManager() {
               const queryParamTypes = parameterTypes[query.id] || {};
 
               return (
-                <AccordionItem key={query.id} value={query.id} className="border-b border-gray-200">
+                <AccordionItem key={query.id} value={query.id} className="border-b border-border">
                   <div className="flex items-center gap-1">
                     <AccordionTrigger className="flex-1 px-0 py-2.5 hover:no-underline">
                       <div className="flex items-center gap-2">
@@ -280,7 +280,7 @@ export function QueryManager() {
                         onClick={(e) => handleDeleteQuery(query.id, e)}
                       className="h-7 w-7 shrink-0 p-0"
                       >
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </div>
                   <AccordionContent className="space-y-4 pt-1 pr-0 pb-3 pl-0">
@@ -339,7 +339,7 @@ export function QueryManager() {
                           </SelectItem>
                           {externalConnections.length > 0 && (
                             <>
-                              <div className="px-2 py-1.5 text-xs font-semibold text-gray-500">외부 DB</div>
+                              <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">외부 DB</div>
                               {externalConnections.map((conn) => (
                                 <SelectItem key={conn.id} value={conn.id.toString()}>
                                   <div className="flex items-center gap-2">
@@ -369,9 +369,9 @@ export function QueryManager() {
 
                     {/* 파라미터 입력 */}
                     {query.parameters.length > 0 && (
-                      <div className="space-y-3 rounded-md border border-yellow-200 bg-yellow-50 p-3">
+                      <div className="space-y-3 rounded-md border border-amber-200 bg-amber-50 p-3">
                         <div className="flex items-center gap-2">
-                          <AlertCircle className="h-4 w-4 text-yellow-600" />
+                          <AlertCircle className="h-4 w-4 text-amber-600" />
                           <Label className="text-xs font-semibold text-yellow-800">파라미터</Label>
                         </div>
                         <div className="space-y-2">
@@ -435,7 +435,7 @@ export function QueryManager() {
                     <Button
                       size="sm"
                       variant="default"
-                      className="w-full bg-red-500 hover:bg-red-600"
+                      className="w-full bg-destructive hover:bg-destructive"
                       onClick={() => handleTestQuery(query)}
                       disabled={!queryValidation.isValid || isTestRunning[query.id] || !isAllParametersFilled(query)}
                     >
@@ -445,8 +445,8 @@ export function QueryManager() {
 
                     {/* 결과 필드 */}
                     {testResult && (
-                      <div className="space-y-2 rounded-md border border-green-200 bg-green-50 p-3">
-                        <Label className="text-xs font-semibold text-green-800">결과 필드</Label>
+                      <div className="space-y-2 rounded-md border border-emerald-200 bg-emerald-50 p-3">
+                        <Label className="text-xs font-semibold text-emerald-800">결과 필드</Label>
                         <div className="flex flex-wrap gap-2">
                           {testResult.fields.map((field) => (
                             <Badge key={field} variant="default" className="bg-teal-500">
@@ -454,7 +454,7 @@ export function QueryManager() {
                             </Badge>
                           ))}
                         </div>
-                        <p className="text-xs text-green-700">{testResult.rows.length}건의 데이터가 조회되었습니다.</p>
+                        <p className="text-xs text-emerald-700">{testResult.rows.length}건의 데이터가 조회되었습니다.</p>
                       </div>
                     )}
                   </AccordionContent>
@@ -464,8 +464,8 @@ export function QueryManager() {
           </Accordion>
         ) : (
           <div className="flex flex-col items-center justify-center py-8 text-center">
-            <Database className="mb-2 h-12 w-12 text-gray-300" />
-            <p className="text-sm text-gray-500">
+            <Database className="mb-2 h-12 w-12 text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground">
               쿼리를 추가하여 리포트에
               <br />
               데이터를 연결하세요
diff --git a/frontend/components/report/designer/ReportDesignerCanvas.tsx b/frontend/components/report/designer/ReportDesignerCanvas.tsx
index 07df9a4f..386f4ca3 100644
--- a/frontend/components/report/designer/ReportDesignerCanvas.tsx
+++ b/frontend/components/report/designer/ReportDesignerCanvas.tsx
@@ -715,17 +715,17 @@ export function ReportDesignerCanvas() {
   // 페이지가 없는 경우
   if (!currentPageId || !currentPage) {
     return (
-      <div className="flex flex-1 flex-col items-center justify-center bg-gray-100">
+      <div className="flex flex-1 flex-col items-center justify-center bg-muted">
         <div className="text-center">
-          <h3 className="text-lg font-semibold text-gray-700">페이지가 없습니다</h3>
-          <p className="mt-2 text-sm text-gray-500">좌측에서 페이지를 추가하세요.</p>
+          <h3 className="text-lg font-semibold text-foreground">페이지가 없습니다</h3>
+          <p className="mt-2 text-sm text-muted-foreground">좌측에서 페이지를 추가하세요.</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-1 flex-col overflow-hidden bg-gray-100">
+    <div className="flex flex-1 flex-col overflow-hidden bg-muted">
       {/* 캔버스 스크롤 영역 */}
       <div className="flex flex-1 items-center justify-center overflow-auto px-8 pt-[280px] pb-8">
         {/* 눈금자와 캔버스를 감싸는 컨테이너 */}
@@ -734,7 +734,7 @@ export function ReportDesignerCanvas() {
           {showRuler && (
             <div className="flex">
               {/* 좌상단 코너 (20x20) */}
-              <div className="h-5 w-5 bg-gray-200" />
+              <div className="h-5 w-5 bg-muted/80" />
               {/* 가로 눈금자 */}
               <Ruler orientation="horizontal" length={canvasWidth} />
             </div>
@@ -751,7 +751,7 @@ export function ReportDesignerCanvas() {
                 canvasRef.current = node;
                 drop(node);
               }}
-              className={`relative bg-white shadow-lg ${isOver ? "ring-2 ring-blue-500" : ""}`}
+              className={`relative bg-white shadow-lg ${isOver ? "ring-2 ring-ring" : ""}`}
               style={{
                 width: `${canvasWidth * MM_TO_PX}px`,
                 minHeight: `${canvasHeight * MM_TO_PX}px`,
@@ -770,7 +770,7 @@ export function ReportDesignerCanvas() {
               {/* 페이지 여백 가이드 */}
               {currentPage && (
                 <div
-                  className="pointer-events-none absolute border-2 border-dashed border-blue-300/50"
+                  className="pointer-events-none absolute border-2 border-dashed border-primary/40/50"
                   style={{
                     top: `${currentPage.margins.top * MM_TO_PX}px`,
                     left: `${currentPage.margins.left * MM_TO_PX}px`,
@@ -823,7 +823,7 @@ export function ReportDesignerCanvas() {
               {/* 드래그 영역 선택 사각형 */}
               {isMarqueeSelecting && (
                 <div
-                  className="pointer-events-none absolute border-2 border-blue-500 bg-blue-500/10"
+                  className="pointer-events-none absolute border-2 border-primary bg-primary/10"
                   style={{
                     left: `${getMarqueeRect().left}px`,
                     top: `${getMarqueeRect().top}px`,
@@ -836,7 +836,7 @@ export function ReportDesignerCanvas() {
 
               {/* 빈 캔버스 안내 */}
               {components.length === 0 && (
-                <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+                <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/70">
                   <p className="text-sm">왼쪽에서 컴포넌트를 드래그하여 추가하세요</p>
                 </div>
               )}
diff --git a/frontend/components/report/designer/ReportDesignerRightPanel.tsx b/frontend/components/report/designer/ReportDesignerRightPanel.tsx
index 7fcfed4e..f13ec032 100644
--- a/frontend/components/report/designer/ReportDesignerRightPanel.tsx
+++ b/frontend/components/report/designer/ReportDesignerRightPanel.tsx
@@ -188,7 +188,7 @@ export function ReportDesignerRightPanel() {
           <ScrollArea className="h-full">
             <div className="space-y-4 p-4">
               {!selectedComponent ? (
-                <div className="flex h-full items-center justify-center p-4 text-center text-sm text-gray-500">
+                <div className="flex h-full items-center justify-center p-4 text-center text-sm text-muted-foreground">
                   컴포넌트를 선택하면 속성을 편집할 수 있습니다
                 </div>
               ) : (
@@ -274,8 +274,8 @@ export function ReportDesignerRightPanel() {
                     </div>
 
                     {/* 스타일링 섹션 */}
-                    <div className="space-y-3 rounded-md border border-gray-200 bg-gray-50 p-3">
-                      <h4 className="text-xs font-semibold text-gray-700">스타일</h4>
+                    <div className="space-y-3 rounded-md border border-border bg-muted p-3">
+                      <h4 className="text-xs font-semibold text-foreground">스타일</h4>
 
                       {/* 글꼴 크기 */}
                       <div>
@@ -411,7 +411,7 @@ export function ReportDesignerRightPanel() {
                         <Label className="text-xs">테두리</Label>
                         <div className="grid grid-cols-2 gap-2">
                           <div>
-                            <Label className="text-xs text-gray-600">두께</Label>
+                            <Label className="text-xs text-muted-foreground">두께</Label>
                             <Input
                               type="number"
                               min="0"
@@ -426,7 +426,7 @@ export function ReportDesignerRightPanel() {
                             />
                           </div>
                           <div>
-                            <Label className="text-xs text-gray-600">색상</Label>
+                            <Label className="text-xs text-muted-foreground">색상</Label>
                             <Input
                               type="color"
                               value={selectedComponent.borderColor || "#cccccc"}
@@ -444,7 +444,7 @@ export function ReportDesignerRightPanel() {
 
                     {/* 테이블 스타일 */}
                     {selectedComponent.type === "table" && (
-                      <Card className="mt-4 border-indigo-200 bg-indigo-50">
+                      <Card className="mt-4 border-primary/20 bg-indigo-50">
                         <CardHeader className="pb-3">
                           <CardTitle className="text-sm text-indigo-900">테이블 스타일</CardTitle>
                         </CardHeader>
@@ -581,7 +581,7 @@ export function ReportDesignerRightPanel() {
                                 )}
                               </Button>
                             </div>
-                            <p className="mt-1 text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
+                            <p className="mt-1 text-xs text-muted-foreground">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                             {selectedComponent.imageUrl && (
                               <p className="mt-2 truncate text-xs text-purple-600">
                                 현재: {selectedComponent.imageUrl}
@@ -616,9 +616,9 @@ export function ReportDesignerRightPanel() {
 
                     {/* 구분선 속성 */}
                     {selectedComponent.type === "divider" && (
-                      <Card className="mt-4 border-gray-200 bg-gray-50">
+                      <Card className="mt-4 border-border bg-muted">
                         <CardHeader className="pb-3">
-                          <CardTitle className="text-sm text-gray-900">구분선 설정</CardTitle>
+                          <CardTitle className="text-sm text-foreground">구분선 설정</CardTitle>
                         </CardHeader>
                         <CardContent className="space-y-3">
                           <div>
@@ -716,7 +716,7 @@ export function ReportDesignerRightPanel() {
 
                     {/* 서명/도장 속성 */}
                     {(selectedComponent.type === "signature" || selectedComponent.type === "stamp") && (
-                      <Card className="mt-4 border-indigo-200 bg-indigo-50">
+                      <Card className="mt-4 border-primary/20 bg-indigo-50">
                         <CardHeader className="pb-3">
                           <CardTitle className="text-sm text-indigo-900">
                             {selectedComponent.type === "signature" ? "서명란 설정" : "도장란 설정"}
@@ -790,9 +790,9 @@ export function ReportDesignerRightPanel() {
                                       )}
                                     </Button>
                                   </div>
-                                  <p className="text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
+                                  <p className="text-xs text-muted-foreground">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                                   {selectedComponent.imageUrl && !selectedComponent.imageUrl.startsWith("data:") && (
-                                    <p className="truncate text-xs text-indigo-600">
+                                    <p className="truncate text-xs text-primary">
                                       현재: {selectedComponent.imageUrl}
                                     </p>
                                   )}
@@ -850,9 +850,9 @@ export function ReportDesignerRightPanel() {
                                   )}
                                 </Button>
                               </div>
-                              <p className="mt-1 text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
+                              <p className="mt-1 text-xs text-muted-foreground">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                               {selectedComponent.imageUrl && !selectedComponent.imageUrl.startsWith("data:") && (
-                                <p className="mt-2 truncate text-xs text-indigo-600">
+                                <p className="mt-2 truncate text-xs text-primary">
                                   현재: {selectedComponent.imageUrl}
                                 </p>
                               )}
@@ -962,7 +962,7 @@ export function ReportDesignerRightPanel() {
                                 placeholder="예: 홍길동"
                                 className="h-8"
                               />
-                              <p className="mt-1 text-xs text-gray-500">도장 옆에 표시될 이름</p>
+                              <p className="mt-1 text-xs text-muted-foreground">도장 옆에 표시될 이름</p>
                             </div>
                           )}
                         </CardContent>
@@ -1228,7 +1228,7 @@ export function ReportDesignerRightPanel() {
                                       <Button
                                         size="sm"
                                         variant="ghost"
-                                        className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+                                        className="h-5 w-5 p-0 text-destructive hover:text-destructive"
                                         onClick={() => {
                                           const currentItems = [...(selectedComponent.cardItems || [])];
                                           currentItems.splice(index, 1);
@@ -1323,7 +1323,7 @@ export function ReportDesignerRightPanel() {
 
                     {/* 계산 컴포넌트 설정 */}
                     {selectedComponent.type === "calculation" && (
-                      <Card className="mt-4 border-orange-200 bg-orange-50">
+                      <Card className="mt-4 border-orange-200 bg-amber-50">
                         <CardHeader className="pb-3">
                           <CardTitle className="text-sm text-orange-900">계산 설정</CardTitle>
                         </CardHeader>
@@ -1554,7 +1554,7 @@ export function ReportDesignerRightPanel() {
                                     <Button
                                       size="sm"
                                       variant="ghost"
-                                      className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+                                      className="h-5 w-5 p-0 text-destructive hover:text-destructive"
                                       onClick={() => {
                                         const currentItems = [...(selectedComponent.calcItems || [])];
                                         currentItems.splice(index, 1);
@@ -1746,7 +1746,7 @@ export function ReportDesignerRightPanel() {
                               {(selectedComponent.barcodeType === "EAN13" || 
                                 selectedComponent.barcodeType === "EAN8" || 
                                 selectedComponent.barcodeType === "UPC") && (
-                                <p className="mt-1 text-[10px] text-gray-500">
+                                <p className="mt-1 text-[10px] text-muted-foreground">
                                   {selectedComponent.barcodeType === "EAN13" && "EAN-13: 12~13자리 숫자 필요"}
                                   {selectedComponent.barcodeType === "EAN8" && "EAN-8: 7~8자리 숫자 필요"}
                                   {selectedComponent.barcodeType === "UPC" && "UPC: 11~12자리 숫자 필요"}
@@ -1772,7 +1772,7 @@ export function ReportDesignerRightPanel() {
                                         ...(e.target.checked && { barcodeFieldName: "" }),
                                       })
                                     }
-                                    className="h-4 w-4 rounded border-gray-300"
+                                    className="h-4 w-4 rounded border-input"
                                   />
                                   <Label htmlFor="qrUseMultiField" className="text-xs">
                                     다중 필드 (JSON 형식)
@@ -1886,7 +1886,7 @@ export function ReportDesignerRightPanel() {
                                         <Button
                                           variant="ghost"
                                           size="sm"
-                                          className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                          className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                           onClick={() => {
                                             const newFields = (selectedComponent.qrDataFields || []).filter(
                                               (_, i) => i !== index
@@ -1901,12 +1901,12 @@ export function ReportDesignerRightPanel() {
                                   </div>
                                   
                                   {(selectedComponent.qrDataFields || []).length === 0 && (
-                                    <p className="text-center text-xs text-gray-400">
+                                    <p className="text-center text-xs text-muted-foreground/70">
                                       필드를 추가하세요
                                     </p>
                                   )}
                                   
-                                  <p className="text-[10px] text-gray-500">
+                                  <p className="text-[10px] text-muted-foreground">
                                     결과: {selectedComponent.qrIncludeAllRows 
                                       ? `[{"${(selectedComponent.qrDataFields || []).map(f => f.label || "key").join('":"값","')}"}, ...]`
                                       : `{"${(selectedComponent.qrDataFields || []).map(f => f.label || "key").join('":"값","')}":"값"}`
@@ -1929,7 +1929,7 @@ export function ReportDesignerRightPanel() {
                                     qrIncludeAllRows: e.target.checked,
                                   })
                                 }
-                                className="h-4 w-4 rounded border-gray-300"
+                                className="h-4 w-4 rounded border-input"
                               />
                               <Label htmlFor="qrIncludeAllRows" className="text-xs">
                                 모든 행 포함 (배열)
@@ -1949,7 +1949,7 @@ export function ReportDesignerRightPanel() {
                                     showBarcodeText: e.target.checked,
                                   })
                                 }
-                                className="h-4 w-4 rounded border-gray-300"
+                                className="h-4 w-4 rounded border-input"
                               />
                               <Label htmlFor="showBarcodeText" className="text-xs">
                                 바코드 아래 텍스트 표시
@@ -1979,7 +1979,7 @@ export function ReportDesignerRightPanel() {
                                   <SelectItem value="H">H (30% 복구)</SelectItem>
                                 </SelectContent>
                               </Select>
-                              <p className="mt-1 text-[10px] text-gray-500">
+                              <p className="mt-1 text-[10px] text-muted-foreground">
                                 높을수록 손상에 강하지만 크기 증가
                               </p>
                             </div>
@@ -2061,7 +2061,7 @@ export function ReportDesignerRightPanel() {
                                     checkboxChecked: e.target.checked,
                                   })
                                 }
-                                className="h-4 w-4 rounded border-gray-300"
+                                className="h-4 w-4 rounded border-input"
                               />
                               <Label htmlFor="checkboxChecked" className="text-xs">
                                 체크됨
@@ -2100,7 +2100,7 @@ export function ReportDesignerRightPanel() {
                                   })()}
                                 </SelectContent>
                               </Select>
-                              <p className="mt-1 text-[10px] text-gray-500">
+                              <p className="mt-1 text-[10px] text-muted-foreground">
                                 true, "Y", 1 등 truthy 값이면 체크됨
                               </p>
                             </div>
@@ -2206,11 +2206,11 @@ export function ReportDesignerRightPanel() {
                       selectedComponent.type === "table" ||
                       selectedComponent.type === "barcode" ||
                       selectedComponent.type === "checkbox") && (
-                      <Card className="mt-4 border-blue-200 bg-blue-50">
+                      <Card className="mt-4 border-primary/20 bg-primary/10">
                         <CardHeader className="pb-3">
                           <div className="flex items-center gap-2">
-                            <Link2 className="h-4 w-4 text-blue-600" />
-                            <CardTitle className="text-sm text-blue-900">데이터 바인딩</CardTitle>
+                            <Link2 className="h-4 w-4 text-primary" />
+                            <CardTitle className="text-sm text-primary">데이터 바인딩</CardTitle>
                           </div>
                         </CardHeader>
                         <CardContent className="space-y-3">
@@ -2276,7 +2276,7 @@ export function ReportDesignerRightPanel() {
 
                           {/* 테이블 컬럼 설정 */}
                           {selectedComponent.queryId && selectedComponent.type === "table" && (
-                            <Card className="border-green-200 bg-green-50">
+                            <Card className="border-emerald-200 bg-emerald-50">
                               <CardHeader className="pb-2">
                                 <CardTitle className="text-xs text-green-900">컬럼 설정</CardTitle>
                               </CardHeader>
@@ -2305,13 +2305,13 @@ export function ReportDesignerRightPanel() {
                                 {selectedComponent.tableColumns && selectedComponent.tableColumns.length > 0 && (
                                   <div className="mt-3 space-y-2">
                                     {selectedComponent.tableColumns.map((col, idx) => (
-                                      <div key={idx} className="space-y-1 rounded border border-green-200 bg-white p-2">
+                                      <div key={idx} className="space-y-1 rounded border border-emerald-200 bg-white p-2">
                                         <div className="flex items-center justify-between">
-                                          <span className="text-xs font-medium text-gray-700">컬럼 {idx + 1}</span>
+                                          <span className="text-xs font-medium text-foreground">컬럼 {idx + 1}</span>
                                           <Button
                                             size="sm"
                                             variant="ghost"
-                                            className="h-5 w-5 p-0 text-red-500 hover:bg-red-50"
+                                            className="h-5 w-5 p-0 text-destructive hover:bg-destructive/10"
                                             onClick={() => {
                                               const newColumns = [...selectedComponent.tableColumns!];
                                               newColumns.splice(idx, 1);
@@ -2833,7 +2833,7 @@ export function ReportDesignerRightPanel() {
                                       })
                                     }
                                   >
-                                    <Trash2 className="h-4 w-4 text-red-500" />
+                                    <Trash2 className="h-4 w-4 text-destructive" />
                                   </Button>
                                 )}
                               </div>
@@ -2841,7 +2841,7 @@ export function ReportDesignerRightPanel() {
                                 JPG, PNG, GIF, WEBP (최대 5MB)
                               </p>
                               {layoutConfig.watermark?.imageUrl && (
-                                <p className="mt-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-indigo-600">
+                                <p className="mt-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
                                   현재: ...{layoutConfig.watermark.imageUrl.slice(-30)}
                                 </p>
                               )}
diff --git a/frontend/components/report/designer/ReportDesignerToolbar.tsx b/frontend/components/report/designer/ReportDesignerToolbar.tsx
index acb0fc94..8438287f 100644
--- a/frontend/components/report/designer/ReportDesignerToolbar.tsx
+++ b/frontend/components/report/designer/ReportDesignerToolbar.tsx
@@ -219,13 +219,13 @@ export function ReportDesignerToolbar() {
             <ArrowLeft className="h-4 w-4" />
             목록으로
           </Button>
-          <div className="h-6 w-px bg-gray-300" />
+          <div className="h-6 w-px bg-muted/60" />
           <div>
-            <h2 className="text-lg font-semibold text-gray-900">
+            <h2 className="text-lg font-semibold text-foreground">
               {reportDetail?.report.report_name_kor || "리포트 디자이너"}
             </h2>
             {reportDetail?.report.report_name_eng && (
-              <p className="text-sm text-gray-500">{reportDetail.report.report_name_eng}</p>
+              <p className="text-sm text-muted-foreground">{reportDetail.report.report_name_eng}</p>
             )}
           </div>
         </div>
diff --git a/frontend/components/report/designer/ReportPreviewModal.tsx b/frontend/components/report/designer/ReportPreviewModal.tsx
index 7069bb75..bc7fc774 100644
--- a/frontend/components/report/designer/ReportPreviewModal.tsx
+++ b/frontend/components/report/designer/ReportPreviewModal.tsx
@@ -1156,7 +1156,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
         </DialogHeader>
 
         {/* 미리보기 영역 - 모든 페이지 표시 */}
-        <div className="max-h-[500px] overflow-auto rounded border bg-gray-100 p-4">
+        <div className="max-h-[500px] overflow-auto rounded border bg-muted p-4">
           <div className="space-y-4">
             {layoutConfig.pages
               .sort((a, b) => a.page_order - b.page_order)
@@ -1294,7 +1294,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                               );
                             })()
                           ) : component.type === "table" ? (
-                            <div className="text-xs text-gray-400">쿼리를 실행해주세요</div>
+                            <div className="text-xs text-muted-foreground/70">쿼리를 실행해주세요</div>
                           ) : null}
 
                           {component.type === "image" && component.imageUrl && (
diff --git a/frontend/components/report/designer/Ruler.tsx b/frontend/components/report/designer/Ruler.tsx
index e293c593..50704316 100644
--- a/frontend/components/report/designer/Ruler.tsx
+++ b/frontend/components/report/designer/Ruler.tsx
@@ -31,7 +31,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
         ticks.push(
           <div
             key={`major-${mm}`}
-            className="absolute bg-gray-700"
+            className="absolute bg-foreground/90"
             style={
               isHorizontal
                 ? {
@@ -55,7 +55,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
           ticks.push(
             <div
               key={`label-${mm}`}
-              className="absolute text-[9px] text-gray-600"
+              className="absolute text-[9px] text-muted-foreground"
               style={
                 isHorizontal
                   ? {
@@ -79,7 +79,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
         ticks.push(
           <div
             key={`medium-${mm}`}
-            className="absolute bg-gray-500"
+            className="absolute bg-muted0"
             style={
               isHorizontal
                 ? {
@@ -103,7 +103,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
         ticks.push(
           <div
             key={`minor-${mm}`}
-            className="absolute bg-gray-400"
+            className="absolute bg-muted-foreground"
             style={
               isHorizontal
                 ? {
@@ -129,7 +129,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
 
   return (
     <div
-      className="relative bg-gray-100 select-none"
+      className="relative bg-muted select-none"
       style={
         isHorizontal
           ? {
diff --git a/frontend/components/report/designer/SaveAsTemplateModal.tsx b/frontend/components/report/designer/SaveAsTemplateModal.tsx
index 7b471bb8..4b1a6797 100644
--- a/frontend/components/report/designer/SaveAsTemplateModal.tsx
+++ b/frontend/components/report/designer/SaveAsTemplateModal.tsx
@@ -81,7 +81,7 @@ export function SaveAsTemplateModal({ isOpen, onClose, onSave }: SaveAsTemplateM
         <div className="space-y-4 py-4">
           <div className="space-y-2">
             <Label htmlFor="templateNameKor">
-              템플릿명 (한국어) <span className="text-red-500">*</span>
+              템플릿명 (한국어) <span className="text-destructive">*</span>
             </Label>
             <Input
               id="templateNameKor"
diff --git a/frontend/components/report/designer/SignatureGenerator.tsx b/frontend/components/report/designer/SignatureGenerator.tsx
index a36b0b8c..a055bef4 100644
--- a/frontend/components/report/designer/SignatureGenerator.tsx
+++ b/frontend/components/report/designer/SignatureGenerator.tsx
@@ -240,7 +240,7 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
       {generatedSignatures.length > 0 && (
         <div className="space-y-2">
           <Label className="text-xs">레이블 위치</Label>
-          <p className="text-xs text-gray-500">더블클릭하여 서명을 선택하세요</p>
+          <p className="text-xs text-muted-foreground">더블클릭하여 서명을 선택하세요</p>
           <ScrollArea className="h-[300px] rounded-md border bg-white">
             <div className="space-y-2 p-2">
               {generatedSignatures.map((signature, index) => (
@@ -255,7 +255,7 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
                       alt={`서명 ${index + 1}`}
                       className="h-auto max-h-[45px] w-auto max-w-[280px] object-contain"
                     />
-                    <p className="ml-2 text-xs text-gray-400 opacity-0 transition-opacity group-hover:opacity-100">
+                    <p className="ml-2 text-xs text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100">
                       {fonts[index].name}
                     </p>
                   </div>
diff --git a/frontend/components/report/designer/SignaturePad.tsx b/frontend/components/report/designer/SignaturePad.tsx
index 3ed7b01e..079802e6 100644
--- a/frontend/components/report/designer/SignaturePad.tsx
+++ b/frontend/components/report/designer/SignaturePad.tsx
@@ -107,7 +107,7 @@ export function SignaturePad({ onSignatureChange, initialSignature }: SignatureP
 
   return (
     <div className="space-y-2">
-      <Card className="overflow-hidden border-2 border-dashed border-gray-300 bg-white p-2">
+      <Card className="overflow-hidden border-2 border-dashed border-input bg-white p-2">
         <canvas
           ref={canvasRef}
           width={300}
@@ -121,7 +121,7 @@ export function SignaturePad({ onSignatureChange, initialSignature }: SignatureP
         />
       </Card>
       <div className="flex items-center justify-between">
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           <Pen className="mr-1 inline h-3 w-3" />
           마우스로 서명해주세요
         </p>
diff --git a/frontend/components/report/designer/TemplatePalette.tsx b/frontend/components/report/designer/TemplatePalette.tsx
index 27a062ad..1c6826e6 100644
--- a/frontend/components/report/designer/TemplatePalette.tsx
+++ b/frontend/components/report/designer/TemplatePalette.tsx
@@ -102,10 +102,10 @@ export function TemplatePalette() {
 
         {isLoading ? (
           <div className="flex items-center justify-center py-4">
-            <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/70" />
           </div>
         ) : customTemplates.length === 0 ? (
-          <p className="py-4 text-center text-xs text-gray-400">저장된 템플릿이 없습니다</p>
+          <p className="py-4 text-center text-xs text-muted-foreground/70">저장된 템플릿이 없습니다</p>
         ) : (
           customTemplates.map((template) => (
             <div key={template.template_id} className="group relative">
@@ -131,7 +131,7 @@ export function TemplatePalette() {
                 {deletingId === template.template_id ? (
                   <Loader2 className="h-3 w-3 animate-spin" />
                 ) : (
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 )}
               </Button>
             </div>
diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index 070a0ce6..f8190ce7 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -1256,8 +1256,8 @@ export default function CopyScreenModal({
             )}
 
             {/* 원본 그룹 정보 */}
-            <div className="rounded-md bg-gray-50 p-3">
-              <h4 className="mb-2 text-sm font-medium text-gray-700">원본 그룹 정보</h4>
+            <div className="rounded-md bg-muted p-3">
+              <h4 className="mb-2 text-sm font-medium text-foreground">원본 그룹 정보</h4>
               <div className="space-y-1 text-sm text-muted-foreground">
                 <div>
                   <span className="font-medium">그룹명:</span> {sourceGroup?.group_name}
@@ -1540,7 +1540,7 @@ export default function CopyScreenModal({
                     id="useGroupBulkRename"
                     checked={useGroupBulkRename}
                     onChange={(e) => setUseGroupBulkRename(e.target.checked)}
-                    className="h-4 w-4 rounded border-gray-300"
+                    className="h-4 w-4 rounded border-input"
                   />
                   <label htmlFor="useGroupBulkRename" className="text-xs sm:text-sm">
                     폴더/화면 이름 일괄 변경 사용
@@ -1575,7 +1575,7 @@ export default function CopyScreenModal({
                       </p>
                     </div>
 
-                    <div className="rounded-md bg-gray-50 p-2 text-xs text-muted-foreground">
+                    <div className="rounded-md bg-muted p-2 text-xs text-muted-foreground">
                       <strong>미리보기:</strong>
                       <div className="mt-1">
                         "{sourceGroup?.group_name}" → "
diff --git a/frontend/components/screen/CreateScreenModal.tsx b/frontend/components/screen/CreateScreenModal.tsx
index a8bdcdf6..dd3b7216 100644
--- a/frontend/components/screen/CreateScreenModal.tsx
+++ b/frontend/components/screen/CreateScreenModal.tsx
@@ -318,7 +318,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
               value={screenCode}
               readOnly
               placeholder="자동 생성됩니다..."
-              className="cursor-not-allowed bg-gray-50"
+              className="cursor-not-allowed bg-muted"
             />
           </div>
 
@@ -396,10 +396,10 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                             <Check
                               className={cn("mr-2 h-4 w-4", selectedDbSource === "internal" ? "opacity-100" : "opacity-0")}
                             />
-                            <Database className="mr-2 h-4 w-4 text-blue-500" />
+                            <Database className="mr-2 h-4 w-4 text-primary" />
                             <div className="flex flex-col">
                               <span className="font-medium">내부 데이터베이스</span>
-                              <span className="text-xs text-gray-500">PostgreSQL (현재 시스템)</span>
+                              <span className="text-xs text-muted-foreground">PostgreSQL (현재 시스템)</span>
                             </div>
                           </CommandItem>
                           {externalConnections.map((conn: any) => (
@@ -416,10 +416,10 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                               <Check
                                 className={cn("mr-2 h-4 w-4", selectedDbSource === conn.id ? "opacity-100" : "opacity-0")}
                               />
-                              <Database className="mr-2 h-4 w-4 text-green-500" />
+                              <Database className="mr-2 h-4 w-4 text-emerald-500" />
                               <div className="flex flex-col">
                                 <span className="font-medium">{conn.connection_name}</span>
-                                <span className="text-xs text-gray-500">{conn.db_type?.toUpperCase()}</span>
+                                <span className="text-xs text-muted-foreground">{conn.db_type?.toUpperCase()}</span>
                               </div>
                             </CommandItem>
                           ))}
@@ -428,7 +428,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                     </Command>
                   </PopoverContent>
                 </Popover>
-                <p className="text-xs text-gray-500">화면에서 사용할 데이터베이스를 선택합니다</p>
+                <p className="text-xs text-muted-foreground">화면에서 사용할 데이터베이스를 선택합니다</p>
               </div>
             </>
           )}
@@ -479,7 +479,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                               <Globe className="mr-2 h-4 w-4 text-purple-500" />
                               <div className="flex flex-col">
                                 <span className="font-medium">{conn.connection_name}</span>
-                                <span className="text-xs text-gray-500 truncate max-w-[300px]">{conn.base_url}</span>
+                                <span className="text-xs text-muted-foreground truncate max-w-[300px]">{conn.base_url}</span>
                               </div>
                             </CommandItem>
                           ))}
@@ -488,7 +488,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                     </Command>
                   </PopoverContent>
                 </Popover>
-                <p className="text-xs text-gray-500">
+                <p className="text-xs text-muted-foreground">
                   등록된 REST API 연결을 선택합니다.
                   <Link href="/admin/externalRestApi" className="ml-1 text-primary hover:underline">
                     새 연결 등록
@@ -505,7 +505,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                   onChange={(e) => setRestApiEndpoint(e.target.value)}
                   placeholder="/api/data 또는 /users"
                 />
-                <p className="text-xs text-gray-500">기본 URL 뒤에 추가될 경로 (선택사항)</p>
+                <p className="text-xs text-muted-foreground">기본 URL 뒤에 추가될 경로 (선택사항)</p>
               </div>
 
               {/* JSON Path */}
@@ -517,7 +517,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                   onChange={(e) => setRestApiJsonPath(e.target.value)}
                   placeholder="data 또는 result.items"
                 />
-                <p className="text-xs text-gray-500">API 응답에서 데이터 배열을 추출할 경로 (예: data, result.items)</p>
+                <p className="text-xs text-muted-foreground">API 응답에서 데이터 배열을 추출할 경로 (예: data, result.items)</p>
               </div>
             </>
           )}
@@ -548,7 +548,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                 {/* 검색 입력 필드 */}
                 <div className="sticky top-0 z-10 border-b bg-white p-2" onKeyDown={(e) => e.stopPropagation()}>
                   <div className="relative">
-                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
                     <input
                       ref={searchInputRef}
                       type="text"
@@ -572,7 +572,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                           e.stopPropagation();
                           setTableSearchTerm("");
                         }}
-                        className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400"
+                        className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70"
                       >
                         <X className="h-3 w-3" />
                       </button>
@@ -585,7 +585,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                   {selectedDbSource === "internal" ? (
                     // 내부 DB 테이블 목록
                     filteredTables.length === 0 ? (
-                      <div className="px-2 py-6 text-center text-sm text-gray-500">
+                      <div className="px-2 py-6 text-center text-sm text-muted-foreground">
                         {tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
                       </div>
                     ) : (
@@ -597,7 +597,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                     )
                   ) : // 외부 DB 테이블 목록
                   filteredExternalTables.length === 0 ? (
-                    <div className="px-2 py-6 text-center text-sm text-gray-500">
+                    <div className="px-2 py-6 text-center text-sm text-muted-foreground">
                       {tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
                     </div>
                   ) : (
diff --git a/frontend/components/screen/DesignerToolbar.tsx b/frontend/components/screen/DesignerToolbar.tsx
index 366a1418..2a1c9bcc 100644
--- a/frontend/components/screen/DesignerToolbar.tsx
+++ b/frontend/components/screen/DesignerToolbar.tsx
@@ -57,7 +57,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
   isGeneratingMultilang = false,
 }) => {
   return (
-    <div className="flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 py-3 shadow-sm">
+    <div className="flex items-center justify-between border-b border-border bg-gradient-to-r from-muted to-background px-4 py-3 shadow-sm">
       {/* 좌측: 네비게이션 및 화면 정보 */}
       <div className="flex items-center space-x-4">
         <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
@@ -65,16 +65,16 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           <span>목록으로</span>
         </Button>
 
-        <div className="h-6 w-px bg-gray-300" />
+        <div className="h-6 w-px bg-muted/60" />
 
         <div className="flex items-center space-x-3">
           <Menu className="h-5 w-5 text-muted-foreground" />
           <div>
-            <h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
+            <h1 className="text-lg font-semibold text-foreground">{screenName || "화면 설계"}</h1>
             {tableName && (
               <div className="mt-0.5 flex items-center space-x-1">
-                <Database className="h-3 w-3 text-gray-500" />
-                <span className="font-mono text-xs text-gray-500">{tableName}</span>
+                <Database className="h-3 w-3 text-muted-foreground" />
+                <span className="font-mono text-xs text-muted-foreground">{tableName}</span>
               </div>
             )}
           </div>
@@ -152,7 +152,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.grid?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("grid")}
-          className={cn("flex items-center space-x-2", panelStates.grid?.isOpen && "bg-blue-600 text-white")}
+          className={cn("flex items-center space-x-2", panelStates.grid?.isOpen && "bg-primary text-white")}
         >
           <Grid3X3 className="h-4 w-4" />
           <span>격자</span>
@@ -167,7 +167,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
             variant={showZoneBorders ? "default" : "outline"}
             size="sm"
             onClick={onToggleZoneBorders}
-            className={cn("flex items-center space-x-2", showZoneBorders && "bg-green-600 text-white")}
+            className={cn("flex items-center space-x-2", showZoneBorders && "bg-emerald-600 text-white")}
             title="구역 경계 표시/숨김"
           >
             <Square className="h-4 w-4" />
@@ -182,7 +182,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.detailSettings?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("detailSettings")}
-          className={cn("flex items-center space-x-2", panelStates.detailSettings?.isOpen && "bg-blue-600 text-white")}
+          className={cn("flex items-center space-x-2", panelStates.detailSettings?.isOpen && "bg-primary text-white")}
         >
           <Cog className="h-4 w-4" />
           <span>상세</span>
@@ -195,7 +195,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.resolution?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("resolution")}
-          className={cn("flex items-center space-x-2", panelStates.resolution?.isOpen && "bg-blue-600 text-white")}
+          className={cn("flex items-center space-x-2", panelStates.resolution?.isOpen && "bg-primary text-white")}
         >
           <Monitor className="h-4 w-4" />
           <span>해상도</span>
@@ -229,7 +229,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           <span className="hidden sm:inline">다시실행</span>
         </Button>
 
-        <div className="h-6 w-px bg-gray-300" />
+        <div className="h-6 w-px bg-muted/60" />
 
         {onGenerateMultilang && (
           <Button
diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index ec36096d..b5ebe0e5 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -1459,11 +1459,11 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           </div>
         </DialogHeader>
 
-        <div className="flex flex-1 justify-center overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+        <div className="flex flex-1 justify-center overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted/60 [&::-webkit-scrollbar-track]:bg-transparent">
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
-                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
                 <p className="text-muted-foreground">화면을 불러오는 중...</p>
               </div>
             </div>
diff --git a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
index d0a99d91..ea291a6e 100644
--- a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
+++ b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
@@ -240,7 +240,7 @@ export const EnhancedInteractiveScreenViewer: React.FC<EnhancedInteractiveScreen
       return React.cloneElement(element, {
         style: inlineStyle,
         className:
-          `${element.props.className || ""} ${hasError ? "border-destructive" : ""} ${isValid && finalFormData[fieldName] ? "border-green-500" : ""}`.trim(),
+          `${element.props.className || ""} ${hasError ? "border-destructive" : ""} ${isValid && finalFormData[fieldName] ? "border-emerald-500" : ""}`.trim(),
       });
     };
 
diff --git a/frontend/components/screen/FileAttachmentDetailModal.tsx b/frontend/components/screen/FileAttachmentDetailModal.tsx
index 835f8940..383aea9a 100644
--- a/frontend/components/screen/FileAttachmentDetailModal.tsx
+++ b/frontend/components/screen/FileAttachmentDetailModal.tsx
@@ -381,8 +381,8 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                   <div
                     className={`
                       border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors
-                      ${dragOver ? 'border-blue-400 bg-accent' : 'border-gray-300'}
-                      ${uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
+                      ${dragOver ? 'border-primary/60 bg-accent' : 'border-input'}
+                      ${uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-input'}
                     `}
                     onDragOver={handleDragOver}
                     onDragLeave={handleDragLeave}
@@ -402,17 +402,17 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                     <div className="flex flex-col items-center space-y-3">
                       {uploading ? (
                         <>
-                          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-                          <p className="text-lg font-medium text-gray-700">업로드 중...</p>
+                          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+                          <p className="text-lg font-medium text-foreground">업로드 중...</p>
                         </>
                       ) : (
                         <>
-                          <Upload className="w-12 h-12 text-gray-400" />
+                          <Upload className="w-12 h-12 text-muted-foreground/70" />
                           <div>
-                            <p className="text-lg font-medium text-gray-700">
+                            <p className="text-lg font-medium text-foreground">
                               파일을 선택하거나 드래그하세요
                             </p>
-                            <p className="text-sm text-gray-500 mt-2">
+                            <p className="text-sm text-muted-foreground mt-2">
                               {fileConfig.accept && `지원 형식: ${fileConfig.accept}`}
                               {fileConfig.maxSize && ` • 최대 ${formatFileSize(fileConfig.maxSize)}`}
                               {fileConfig.multiple && ' • 여러 파일 선택 가능'}
@@ -446,24 +446,24 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                 </CardHeader>
                 <CardContent>
                   {uploadedFiles.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500">
-                      <FileText className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+                    <div className="text-center py-8 text-muted-foreground">
+                      <FileText className="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
                       <p>업로드된 파일이 없습니다.</p>
                       <p className="text-sm mt-1">위의 업로드 영역을 사용해 파일을 추가하세요.</p>
                     </div>
                   ) : (
                     <div className="space-y-3 max-h-60 overflow-y-auto">
                       {uploadedFiles.map((file) => (
-                        <div key={file.objid} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <div key={file.objid} className="flex items-center justify-between p-3 bg-muted rounded-lg">
                           <div className="flex items-center space-x-3 flex-1 min-w-0">
                             <div className="flex-shrink-0">
                               {getFileIcon(file.fileExt)}
                             </div>
                             <div className="flex-1 min-w-0">
-                              <p className="text-sm font-medium text-gray-900 truncate">
+                              <p className="text-sm font-medium text-foreground truncate">
                                 {file.realFileName}
                               </p>
-                              <div className="flex items-center space-x-2 text-xs text-gray-500">
+                              <div className="flex items-center space-x-2 text-xs text-muted-foreground">
                                 <span>{formatFileSize(file.fileSize)}</span>
                                 <span>•</span>
                                 <span>{file.fileExt.toUpperCase()}</span>
@@ -505,7 +505,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                               variant="ghost"
                               size="sm"
                               onClick={() => handleFileDelete(file)}
-                              className="h-8 w-8 p-0 text-destructive hover:text-red-700"
+                              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                               title="삭제"
                             >
                               <Trash2 className="w-4 h-4" />
@@ -555,7 +555,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                       onChange={(e) => setFileConfig(prev => ({ ...prev, accept: e.target.value }))}
                       placeholder="예: image/*,.pdf,.doc,.docx"
                     />
-                    <p className="text-xs text-gray-500 mt-1">
+                    <p className="text-xs text-muted-foreground mt-1">
                       쉼표로 구분하여 입력 (예: image/*,.pdf,.doc)
                     </p>
                   </div>
@@ -581,7 +581,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                       type="checkbox"
                       checked={fileConfig.multiple}
                       onChange={(e) => setFileConfig(prev => ({ ...prev, multiple: e.target.checked }))}
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <Label htmlFor="multiple">여러 파일 업로드 허용</Label>
                   </div>
diff --git a/frontend/components/screen/GridControls.tsx b/frontend/components/screen/GridControls.tsx
index b33dc654..b6c707c7 100644
--- a/frontend/components/screen/GridControls.tsx
+++ b/frontend/components/screen/GridControls.tsx
@@ -74,7 +74,7 @@ export default function GridControls({ gridSettings, onGridSettingsChange, class
               className="w-16 text-xs"
             />
           </div>
-          <div className="text-xs text-gray-500">현재: {localSettings.columns}열</div>
+          <div className="text-xs text-muted-foreground">현재: {localSettings.columns}열</div>
         </div>
 
         {/* 격자 간격 */}
@@ -145,7 +145,7 @@ export default function GridControls({ gridSettings, onGridSettingsChange, class
         </div>
 
         {/* 격자 변경 안내 */}
-        <div className="rounded-md bg-accent p-2 text-xs text-blue-700">
+        <div className="rounded-md bg-accent p-2 text-xs text-primary">
           <div className="font-medium">💡 격자 변경 시 자동 조정</div>
           <div className="mt-1 text-primary">
             격자 설정을 변경하면 기존 컴포넌트들이 새 격자에 맞춰 자동으로 위치와 크기가 조정됩니다.
@@ -155,7 +155,7 @@ export default function GridControls({ gridSettings, onGridSettingsChange, class
         {/* 격자 미리보기 */}
         <div className="space-y-2">
           <Label className="text-xs font-medium">격자 미리보기</Label>
-          <div className="rounded border bg-gray-50 p-2">
+          <div className="rounded border bg-muted p-2">
             <div
               className="grid h-16 gap-px"
               style={{
diff --git a/frontend/components/screen/GridLayoutBuilder.tsx b/frontend/components/screen/GridLayoutBuilder.tsx
index f8d81d83..9715560e 100644
--- a/frontend/components/screen/GridLayoutBuilder.tsx
+++ b/frontend/components/screen/GridLayoutBuilder.tsx
@@ -135,7 +135,7 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
   );
 
   // 컨테이너 클래스
-  const containerClasses = cn("w-full h-full overflow-auto bg-gray-50 relative", isDraggingOver && "bg-blue-50");
+  const containerClasses = cn("w-full h-full overflow-auto bg-muted relative", isDraggingOver && "bg-primary/10");
 
   // 글로벌 컨테이너 클래스
   const globalContainerClasses = cn(
@@ -152,7 +152,7 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
           <div className={globalContainerClasses}>
             <div className="grid h-full grid-cols-12">
               {Array.from({ length: 12 }).map((_, i) => (
-                <div key={i} className="h-full border-l border-dashed border-gray-300 opacity-30" />
+                <div key={i} className="h-full border-l border-dashed border-input opacity-30" />
               ))}
             </div>
           </div>
@@ -163,10 +163,10 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
       <div className={cn(globalContainerClasses, "relative z-10 py-8")}>
         {layout.rows.length === 0 ? (
           // 빈 레이아웃
-          <div className="flex min-h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-white">
-            <Grid3x3 className="mb-4 h-16 w-16 text-gray-300" />
-            <h3 className="mb-2 text-lg font-medium text-gray-600">레이아웃이 비어있습니다</h3>
-            <p className="mb-6 text-sm text-gray-500">첫 번째 행을 추가하여 시작하세요</p>
+          <div className="flex min-h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-input bg-white">
+            <Grid3x3 className="mb-4 h-16 w-16 text-muted-foreground/50" />
+            <h3 className="mb-2 text-lg font-medium text-muted-foreground">레이아웃이 비어있습니다</h3>
+            <p className="mb-6 text-sm text-muted-foreground">첫 번째 행을 추가하여 시작하세요</p>
             <Button onClick={() => addNewRow()} size="lg">
               <Plus className="mr-2 h-5 w-5" />첫 행 추가
             </Button>
@@ -248,7 +248,7 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
 
         {/* 레이아웃 정보 */}
         <div className="mt-8 rounded-lg border bg-white p-4">
-          <div className="flex items-center justify-between text-sm text-gray-600">
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
             <div className="flex items-center gap-4">
               <span>행: {layout.rows.length}</span>
               <span>컴포넌트: {layout.components.size}</span>
@@ -258,8 +258,8 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
               </span>
             </div>
             <div className="flex items-center gap-2">
-              <span className="text-xs text-gray-400">12컬럼 그리드</span>
-              {showGridGuides && <span className="text-xs text-green-600">가이드 표시됨</span>}
+              <span className="text-xs text-muted-foreground/70">12컬럼 그리드</span>
+              {showGridGuides && <span className="text-xs text-emerald-600">가이드 표시됨</span>}
             </div>
           </div>
         </div>
diff --git a/frontend/components/screen/GroupingToolbar.tsx b/frontend/components/screen/GroupingToolbar.tsx
index f1047139..76012193 100644
--- a/frontend/components/screen/GroupingToolbar.tsx
+++ b/frontend/components/screen/GroupingToolbar.tsx
@@ -114,7 +114,7 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
 
   return (
     <>
-      <div className="flex items-center space-x-2 border-b bg-gray-50 p-2">
+      <div className="flex items-center space-x-2 border-b bg-muted p-2">
         <div className="flex items-center space-x-2">
           <Group className="h-4 w-4 text-primary" />
           <span className="text-sm font-medium">그룹화</span>
@@ -182,7 +182,7 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
           {/* 정렬/분배 도구 */}
           {selectedComponents.length > 1 && (
             <div className="ml-2 flex items-center space-x-1">
-              <span className="mr-1 text-xs text-gray-500">정렬</span>
+              <span className="mr-1 text-xs text-muted-foreground">정렬</span>
               <Button variant="outline" size="sm" onClick={() => onGroupAlign?.("left")} title="좌측 정렬">
                 <AlignLeft className="h-3 w-3" />
               </Button>
@@ -201,8 +201,8 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
               <Button variant="outline" size="sm" onClick={() => onGroupAlign?.("bottom")} title="하단 정렬">
                 <AlignRight className="h-3 w-3 rotate-90" />
               </Button>
-              <div className="mx-1 h-4 w-px bg-gray-200" />
-              <span className="mr-1 text-xs text-gray-500">균등</span>
+              <div className="mx-1 h-4 w-px bg-muted/80" />
+              <span className="mr-1 text-xs text-muted-foreground">균등</span>
               <Button
                 variant="outline"
                 size="sm"
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 8efde578..235159e3 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1346,12 +1346,12 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       return (
         <div className="mt-2 space-y-2">
           {currentFiles.map((file, index) => (
-            <div key={index} className="flex items-center justify-between rounded border bg-gray-50 p-2">
+            <div key={index} className="flex items-center justify-between rounded border bg-muted p-2">
               <div className="flex items-center space-x-2">
                 <div className="text-muted-foreground text-xs">📄</div>
                 <div>
                   <p className="text-sm font-medium">{file.name}</p>
-                  <p className="text-xs text-gray-500">{(file.size / 1024).toFixed(1)} KB</p>
+                  <p className="text-xs text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</p>
                 </div>
               </div>
               <Button
@@ -1554,10 +1554,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           <Input
             value={value}
             readOnly
-            className="bg-gray-50 text-gray-700"
+            className="bg-muted text-foreground"
             placeholder={`${column.label} (자동 생성됨)`}
           />
-          <p className="mt-1 text-xs text-gray-500">자동 생성된 필드는 수정할 수 없습니다.</p>
+          <p className="mt-1 text-xs text-muted-foreground">자동 생성된 필드는 수정할 수 없습니다.</p>
         </div>
       );
     }
@@ -1569,10 +1569,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           <Input
             value={value}
             readOnly
-            className="bg-gray-50 text-gray-700"
+            className="bg-muted text-foreground"
             placeholder={advancedConfig?.placeholder || `${column.label} (읽기 전용)`}
           />
-          {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+          {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
         </div>
       );
     }
@@ -1598,7 +1598,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               {...commonProps}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1613,7 +1613,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               max={detailSettings?.max}
               {...commonProps}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1621,7 +1621,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="date" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1629,7 +1629,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="datetime-local" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1649,7 +1649,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 placeholder={commonProps.placeholder}
                 className={commonProps.className}
               />
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         }
@@ -1671,7 +1671,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1702,7 +1702,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   </div>
                 ))}
               </div>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1725,7 +1725,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               rows={detailSettings?.rows || 3}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1738,7 +1738,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               onCheckedChange={(checked) => handleEditFormChange(column.columnName, checked)}
             />
             <Label>{column.label}</Label>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1770,11 +1770,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   )}
                   파일 선택
                 </Button>
-                {detailSettings?.accept && <span className="text-xs text-gray-500">({detailSettings.accept})</span>}
+                {detailSettings?.accept && <span className="text-xs text-muted-foreground">({detailSettings.accept})</span>}
               </div>
               {renderFileList(column.columnName, true)}
             </div>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1794,7 +1794,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               required={isRequired}
               className={commonProps.className}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
       }
@@ -1803,7 +1803,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
     }
@@ -1826,10 +1826,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           <Input
             value={value}
             readOnly
-            className="bg-gray-50 text-gray-700"
+            className="bg-muted text-foreground"
             placeholder={advancedConfig?.placeholder || `${column.label} (자동 생성)`}
           />
-          {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+          {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
         </div>
       );
     }
@@ -1855,7 +1855,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               {...commonProps}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1870,7 +1870,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               max={detailSettings?.max}
               {...commonProps}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1878,7 +1878,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="date" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1886,7 +1886,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="datetime-local" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1906,7 +1906,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 placeholder={commonProps.placeholder}
                 className={commonProps.className}
               />
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         }
@@ -1928,7 +1928,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1967,7 +1967,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   </div>
                 ))}
               </div>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1983,7 +1983,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               onCheckedChange={(checked) => handleAddFormChange(column.columnName, checked)}
             />
             <Label>{column.label}</Label>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -2003,7 +2003,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               rows={detailSettings?.rows || 3}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -2032,14 +2032,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
           return (
             <div>
               <Input {...commonProps} placeholder={`${column.label} (코드 카테고리 설정 필요)`} readOnly />
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         }
@@ -2072,11 +2072,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   )}
                   파일 선택
                 </Button>
-                {detailSettings?.accept && <span className="text-xs text-gray-500">({detailSettings.accept})</span>}
+                {detailSettings?.accept && <span className="text-xs text-muted-foreground">({detailSettings.accept})</span>}
               </div>
               {renderFileList(column.columnName, false)}
             </div>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -2096,7 +2096,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               required={isRequired}
               className={commonProps.className}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
       }
@@ -2105,7 +2105,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
     }
@@ -2281,13 +2281,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               <div className="relative">
                 <FolderOpen className="text-primary h-4 w-4" />
                 {fileCount > 0 && (
-                  <div className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-blue-600 text-[10px] text-white">
+                  <div className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-primary text-[10px] text-white">
                     {fileCount > 9 ? "9+" : fileCount}
                   </div>
                 )}
               </div>
             ) : (
-              <Folder className="h-4 w-4 text-gray-400" />
+              <Folder className="h-4 w-4 text-muted-foreground/70" />
             )}
           </Button>
         </div>
@@ -2400,7 +2400,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   return (
     <div
       className={cn(
-        "flex h-full flex-col rounded-xl border border-gray-200/60 bg-gradient-to-br from-white to-gray-50/30 shadow-sm",
+        "flex h-full flex-col rounded-xl border border-border/60 bg-gradient-to-br from-white to-muted/30 shadow-sm",
         className,
       )}
       style={{ ...style, minHeight: "680px" }}
@@ -2526,7 +2526,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         <div className="flex h-full flex-col">
           {visibleColumns.length > 0 ? (
             <>
-              <div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
+              <div className="overflow-hidden rounded-lg border border-border/60 bg-white shadow-sm">
                 <Table style={{ tableLayout: "fixed" }}>
                   <TableHeader className="from-muted/50 to-muted border-primary/20 border-b-2 bg-gradient-to-b">
                     <TableRow>
@@ -2556,7 +2556,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                             {/* 리사이즈 핸들 */}
                             {columnIndex < visibleColumns.length - 1 && (
                               <div
-                                className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                                className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-primary"
                                 style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
                                 onClick={(e) => e.stopPropagation()}
                                 onMouseDown={(e) => {
@@ -2633,7 +2633,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                       </TableRow>
                     ) : data.length > 0 ? (
                       data.map((row, rowIndex) => (
-                        <TableRow key={rowIndex} className="transition-all duration-200 hover:bg-orange-100">
+                        <TableRow key={rowIndex} className="transition-all duration-200 hover:bg-amber-100">
                           {/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
                           {component.enableDelete && (
                             <TableCell className="px-4" style={{ width: "48px", minWidth: "48px", maxWidth: "48px" }}>
@@ -2648,7 +2648,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                             return (
                               <TableCell
                                 key={column.id}
-                                className="overflow-hidden px-4 text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900"
+                                className="overflow-hidden px-4 text-sm font-medium text-ellipsis whitespace-nowrap text-foreground"
                                 style={{ textAlign: isNumeric ? "right" : "left" }}
                               >
                                 {formatCellValue(row[column.columnName], column, row)}
@@ -2678,7 +2678,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
               {/* 페이지네이션 */}
               {component.pagination?.enabled && totalPages > 1 && (
-                <div className="mt-auto border-t border-gray-200/60 bg-gradient-to-r from-gray-50 to-slate-50">
+                <div className="mt-auto border-t border-border/60 bg-gradient-to-r from-muted to-slate-50">
                   <div className="flex items-center justify-between px-6 py-3">
                     {component.pagination.showPageInfo && (
                       <div className="text-muted-foreground text-sm">
@@ -2788,7 +2788,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 <div key={column.id} className="space-y-2">
                   <Label htmlFor={column.columnName} className="text-sm font-medium">
                     {column.label}
-                    {isRequiredField(column.columnName) && <span className="ml-1 text-orange-500">*</span>}
+                    {isRequiredField(column.columnName) && <span className="ml-1 text-amber-500">*</span>}
                   </Label>
                   <div>{renderAddFormInput(column)}</div>
                 </div>
@@ -2831,7 +2831,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 <div key={column.id} className="space-y-2">
                   <Label htmlFor={`edit-${column.columnName}`} className="text-sm font-medium">
                     {column.label}
-                    {isRequiredField(column.columnName) && <span className="ml-1 text-orange-500">*</span>}
+                    {isRequiredField(column.columnName) && <span className="ml-1 text-amber-500">*</span>}
                   </Label>
                   <div>{renderEditFormInput(column)}</div>
                 </div>
@@ -2891,24 +2891,24 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   const isImage = fileInfo.type?.startsWith("image/");
 
                   return (
-                    <div key={index} className="rounded-lg border bg-gray-50 p-4 transition-colors hover:bg-gray-100">
+                    <div key={index} className="rounded-lg border bg-muted p-4 transition-colors hover:bg-muted">
                       <div className="flex items-start gap-4">
                         {/* 파일 아이콘/미리보기 */}
                         <div className="flex-shrink-0">
                           {isImage ? (
                             <div className="flex h-16 w-16 items-center justify-center rounded border bg-white">
-                              <div className="text-xs font-medium text-green-600">IMG</div>
+                              <div className="text-xs font-medium text-emerald-600">IMG</div>
                             </div>
                           ) : (
                             <div className="flex h-16 w-16 items-center justify-center rounded border bg-white">
-                              <File className="h-8 w-8 text-gray-500" />
+                              <File className="h-8 w-8 text-muted-foreground" />
                             </div>
                           )}
                         </div>
 
                         {/* 파일 정보 */}
                         <div className="min-w-0 flex-1">
-                          <h4 className="truncate font-medium text-gray-900" title={fileInfo.name}>
+                          <h4 className="truncate font-medium text-foreground" title={fileInfo.name}>
                             {fileInfo.name}
                           </h4>
                           <div className="text-muted-foreground mt-1 space-y-1 text-sm">
@@ -2958,8 +2958,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             {/* 요약 정보 */}
             {currentFileData && (
               <div className="border-primary/20 bg-accent mt-4 rounded-lg border p-3">
-                <h5 className="mb-2 font-medium text-blue-900">파일 요약</h5>
-                <div className="grid grid-cols-2 gap-4 text-sm text-blue-800">
+                <h5 className="mb-2 font-medium text-primary">파일 요약</h5>
+                <div className="grid grid-cols-2 gap-4 text-sm text-primary">
                   <div>
                     <span className="font-medium">총 파일 수:</span>
                     {"  "}
@@ -3027,7 +3027,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 <Button size="sm" variant="outline" onClick={() => handleZoom("out")} disabled={zoom <= 0.25}>
                   <ZoomOut className="h-4 w-4" />
                 </Button>
-                <span className="min-w-[60px] text-center text-sm text-gray-500">{Math.round(zoom * 100)}%</span>
+                <span className="min-w-[60px] text-center text-sm text-muted-foreground">{Math.round(zoom * 100)}%</span>
                 <Button size="sm" variant="outline" onClick={() => handleZoom("in")} disabled={zoom >= 3}>
                   <ZoomIn className="h-4 w-4" />
                 </Button>
@@ -3049,7 +3049,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             </DialogTitle>
           </DialogHeader>
 
-          <div className="flex flex-1 items-center justify-center overflow-auto rounded-lg bg-gray-50 p-4">
+          <div className="flex flex-1 items-center justify-center overflow-auto rounded-lg bg-muted p-4">
             {previewImage && (
               <img
                 src={alternativeImageUrl || getFilePreviewUrl(previewImage.id)}
@@ -3064,7 +3064,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           </div>
 
           {previewImage && (
-            <div className="flex items-center justify-between border-t pt-3 text-sm text-gray-500">
+            <div className="flex items-center justify-between border-t pt-3 text-sm text-muted-foreground">
               <div>크기: {formatFileSize(previewImage.size)}</div>
               <div>타입: {previewImage.type}</div>
               <div>업로드: {new Date(previewImage.uploadedAt).toLocaleDateString("ko-KR")}</div>
@@ -3097,14 +3097,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             {/* 기존 파일 목록 */}
             {linkedFiles.length > 0 && (
               <div className="space-y-3">
-                <h4 className="text-sm font-medium text-gray-900">연결된 파일</h4>
+                <h4 className="text-sm font-medium text-foreground">연결된 파일</h4>
                 {linkedFiles.map((file: any, index: number) => (
                   <div key={index} className="flex items-center justify-between rounded-lg border p-3">
                     <div className="flex items-center space-x-3">
                       <File className="text-primary h-5 w-5" />
                       <div>
                         <div className="font-medium">{file.realFileName}</div>
-                        <div className="text-sm text-gray-500">
+                        <div className="text-sm text-muted-foreground">
                           {(Number(file.fileSize) / 1024 / 1024).toFixed(2)} MB • {file.docTypeName}
                           {file.regdate && <span> • {new Date(file.regdate).toLocaleString("ko-KR")}</span>}
                           {file.writer && <span> • {file.writer}</span>}
@@ -3160,7 +3160,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         size="sm"
                         variant="outline"
                         onClick={() => handleDeleteLinkedFile(file.objid, file.realFileName)}
-                        className="hover:bg-destructive/10 text-red-500 hover:text-red-700"
+                        className="hover:bg-destructive/10 text-destructive hover:text-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -3173,7 +3173,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             {/* 파일 업로드 섹션 */}
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <h4 className="text-sm font-medium text-gray-900">{selectedColumnForFiles?.label || "파일"} 업로드</h4>
+                <h4 className="text-sm font-medium text-foreground">{selectedColumnForFiles?.label || "파일"} 업로드</h4>
                 {selectedColumnForFiles?.isVirtualFileColumn && (
                   <Badge variant="secondary" className="text-xs">
                     {selectedColumnForFiles.fileColumnConfig?.docTypeName || "문서"}
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 1bb04e97..bf6358fc 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -1396,7 +1396,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
             {popupLoading ? (
               <div className="flex items-center justify-center p-8">
-                <div className="text-gray-500">로딩 중...</div>
+                <div className="text-muted-foreground">로딩 중...</div>
               </div>
             ) : (
               <div
diff --git a/frontend/components/screen/LayerManagerPanel.tsx b/frontend/components/screen/LayerManagerPanel.tsx
index a8a96862..171af7b9 100644
--- a/frontend/components/screen/LayerManagerPanel.tsx
+++ b/frontend/components/screen/LayerManagerPanel.tsx
@@ -376,7 +376,7 @@ export const LayerManagerPanel: React.FC<LayerManagerPanelProps> = ({
                   )}
                   onClick={() => onLayerChange(1)}
                 >
-                  <span className="shrink-0 rounded bg-blue-100 p-1 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                  <span className="shrink-0 rounded bg-primary/10 p-1 text-primary dark:bg-primary/20 dark:text-primary/80">
                     <Layers className="h-3 w-3" />
                   </span>
                   <div className="min-w-0 flex-1">
diff --git a/frontend/components/screen/LayoutRowRenderer.tsx b/frontend/components/screen/LayoutRowRenderer.tsx
index b0f49eaa..1df226a1 100644
--- a/frontend/components/screen/LayoutRowRenderer.tsx
+++ b/frontend/components/screen/LayoutRowRenderer.tsx
@@ -57,10 +57,10 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
     row.verticalAlignment === "stretch" && "items-stretch",
 
     // 선택 상태
-    isSelected && "ring-2 ring-blue-500 ring-inset",
+    isSelected && "ring-2 ring-ring ring-inset",
 
     // 호버 효과
-    "hover:bg-gray-50 transition-colors cursor-pointer border-2 border-dashed border-transparent hover:border-gray-300",
+    "hover:bg-muted transition-colors cursor-pointer border-2 border-dashed border-transparent hover:border-input",
   );
 
   // 배경색 스타일
@@ -71,19 +71,19 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
   return (
     <div className={rowClasses} style={rowStyle} onClick={onSelectRow} data-row-id={row.id}>
       {/* 행 인덱스 표시 */}
-      <div className="absolute top-1/2 -left-8 -translate-y-1/2 font-mono text-xs text-gray-400">
+      <div className="absolute top-1/2 -left-8 -translate-y-1/2 font-mono text-xs text-muted-foreground/70">
         {row.rowIndex + 1}
       </div>
 
       {row.components.length === 0 ? (
         // 빈 행
-        <div className="col-span-12 flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8">
+        <div className="col-span-12 flex items-center justify-center rounded-lg border-2 border-dashed border-input bg-muted p-8">
           <div className="text-center">
-            <p className="mb-2 text-sm text-gray-400">컴포넌트를 여기에 드래그하세요</p>
+            <p className="mb-2 text-sm text-muted-foreground/70">컴포넌트를 여기에 드래그하세요</p>
             <div className="flex justify-center gap-2">
-              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">폼 행 추가</button>
-              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">2분할</button>
-              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">전체</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted">폼 행 추가</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted">2분할</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted">전체</button>
             </div>
           </div>
         </div>
@@ -140,14 +140,14 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
       {isSelected && (
         <div className="absolute top-1/2 -right-8 flex -translate-y-1/2 flex-col gap-1">
           <button
-            className="rounded border bg-white p-1 shadow-sm hover:bg-gray-50"
+            className="rounded border bg-white p-1 shadow-sm hover:bg-muted"
             title="행 설정"
             onClick={(e) => {
               e.stopPropagation();
               // 행 설정 패널 열기
             }}
           >
-            <svg className="h-4 w-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="h-4 w-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -158,7 +158,7 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
             </svg>
           </button>
           <button
-            className="rounded border bg-white p-1 shadow-sm hover:bg-red-50 hover:text-red-600"
+            className="rounded border bg-white p-1 shadow-sm hover:bg-destructive/10 hover:text-destructive"
             title="행 삭제"
             onClick={(e) => {
               e.stopPropagation();
diff --git a/frontend/components/screen/MenuAssignmentModal.tsx b/frontend/components/screen/MenuAssignmentModal.tsx
index 55e57f74..23099efc 100644
--- a/frontend/components/screen/MenuAssignmentModal.tsx
+++ b/frontend/components/screen/MenuAssignmentModal.tsx
@@ -303,7 +303,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
     // 관리자 메뉴 섹션
     if (adminMenus.length > 0) {
       options.push(
-        <div key="admin-header" className="bg-blue-50 px-2 py-1.5 text-xs font-semibold text-blue-600">
+        <div key="admin-header" className="bg-primary/10 px-2 py-1.5 text-xs font-semibold text-primary">
           👤 관리자 메뉴
         </div>,
       );
@@ -325,7 +325,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
         options.push(<div key="separator" className="my-1 border-t" />);
       }
       options.push(
-        <div key="user-header" className="bg-green-50 px-2 py-1.5 text-xs font-semibold text-green-600">
+        <div key="user-header" className="bg-emerald-50 px-2 py-1.5 text-xs font-semibold text-emerald-600">
           👥 사용자 메뉴
         </div>,
       );
@@ -353,8 +353,8 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
             <>
               <DialogHeader>
                 <DialogTitle className="flex items-center gap-2">
-                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
-                    <svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-100">
+                    <svg className="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                     </svg>
                   </div>
@@ -368,22 +368,22 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
               </DialogHeader>
 
               <div className="space-y-4">
-                <div className="rounded-lg border bg-green-50 p-4">
+                <div className="rounded-lg border bg-emerald-50 p-4">
                   <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
-                      <Monitor className="h-5 w-5 text-green-600" />
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
+                      <Monitor className="h-5 w-5 text-emerald-600" />
                     </div>
                     <div className="flex-1">
                       <p className="text-sm font-medium text-green-900">{assignmentMessage}</p>
-                      <p className="mt-1 text-xs text-green-700">3초 후 자동으로 화면 목록으로 이동합니다...</p>
+                      <p className="mt-1 text-xs text-emerald-700">3초 후 자동으로 화면 목록으로 이동합니다...</p>
                     </div>
                   </div>
                 </div>
 
                 <div className="flex items-center justify-center space-x-2">
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-green-500 [animation-delay:-0.3s]"></div>
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-green-500 [animation-delay:-0.15s]"></div>
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-green-500"></div>
+                  <div className="h-2 w-2 animate-bounce rounded-full bg-emerald-500 [animation-delay:-0.3s]"></div>
+                  <div className="h-2 w-2 animate-bounce rounded-full bg-emerald-500 [animation-delay:-0.15s]"></div>
+                  <div className="h-2 w-2 animate-bounce rounded-full bg-emerald-500"></div>
                 </div>
               </div>
 
@@ -403,7 +403,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                       onClose();
                     }
                   }}
-                  className="bg-green-600 text-white hover:bg-green-700"
+                  className="bg-emerald-600 text-white hover:bg-green-700"
                 >
                   <Monitor className="mr-2 h-4 w-4" />
                   화면 목록으로 이동
@@ -425,12 +425,12 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                   <div className="bg-accent mt-2 rounded-lg border p-3">
                     <div className="flex items-center gap-2">
                       <Monitor className="text-primary h-4 w-4" />
-                      <span className="font-medium text-blue-900">{screenInfo.screenName}</span>
+                      <span className="font-medium text-primary">{screenInfo.screenName}</span>
                       <Badge variant="outline" className="font-mono text-xs">
                         {screenInfo.screenCode}
                       </Badge>
                     </div>
-                    {screenInfo.description && <p className="mt-1 text-sm text-blue-700">{screenInfo.description}</p>}
+                    {screenInfo.description && <p className="mt-1 text-sm text-primary">{screenInfo.description}</p>}
                   </div>
                 )}
               </DialogHeader>
@@ -465,7 +465,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                         }}
                       >
                         <div className="relative">
-                          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+                          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
                           <input
                             ref={searchInputRef}
                             type="text"
@@ -492,7 +492,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                                 e.stopPropagation();
                                 setSearchTerm("");
                               }}
-                              className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400"
+                              className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70"
                             >
                               <X className="h-3 w-3" />
                             </button>
@@ -507,7 +507,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
                 {/* 선택된 메뉴 정보 */}
                 {selectedMenu && (
-                  <div className="rounded-lg border bg-gray-50 p-4">
+                  <div className="rounded-lg border bg-muted p-4">
                     <div className="flex items-center justify-between">
                       <div className="flex-1">
                         <div className="flex items-center gap-2">
@@ -527,7 +527,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
                         {/* 기존 할당된 화면 정보 */}
                         {existingScreens.length > 0 && (
-                          <div className="mt-3 rounded border bg-yellow-50 p-2">
+                          <div className="mt-3 rounded border bg-amber-50 p-2">
                             <p className="text-sm font-medium text-yellow-800">
                               ⚠️ 이미 할당된 화면 ({existingScreens.length}개)
                             </p>
@@ -542,7 +542,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                                 </div>
                               ))}
                             </div>
-                            <p className="mt-1 text-xs text-yellow-600">새 화면을 할당하면 기존 화면들이 제거됩니다.</p>
+                            <p className="mt-1 text-xs text-amber-600">새 화면을 할당하면 기존 화면들이 제거됩니다.</p>
                           </div>
                         )}
                       </div>
@@ -559,7 +559,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 <Button
                   onClick={handleAssignScreen}
                   disabled={!selectedMenu || assigning}
-                  className="bg-blue-600 text-white hover:bg-blue-700"
+                  className="bg-primary text-white hover:bg-primary/90"
                 >
                   {assigning ? (
                     <>
@@ -584,7 +584,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
         <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              <Monitor className="h-5 w-5 text-orange-600" />
+              <Monitor className="h-5 w-5 text-amber-600" />
               화면 교체 확인
             </DialogTitle>
             <DialogDescription>선택한 메뉴에 이미 할당된 화면이 있습니다.</DialogDescription>
@@ -596,7 +596,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
               <p className="mb-2 text-sm font-medium text-red-800">제거될 화면 ({existingScreens.length}개):</p>
               <div className="space-y-1">
                 {existingScreens.map((screen) => (
-                  <div key={screen.screenId} className="flex items-center gap-2 text-sm text-red-700">
+                  <div key={screen.screenId} className="flex items-center gap-2 text-sm text-destructive">
                     <X className="h-3 w-3" />
                     <span>{screen.screenName}</span>
                     <Badge variant="outline" className="text-xs">
@@ -609,9 +609,9 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
             {/* 새로 할당될 화면 */}
             {screenInfo && (
-              <div className="rounded-lg border bg-green-50 p-3">
-                <p className="mb-2 text-sm font-medium text-green-800">새로 할당될 화면:</p>
-                <div className="flex items-center gap-2 text-sm text-green-700">
+              <div className="rounded-lg border bg-emerald-50 p-3">
+                <p className="mb-2 text-sm font-medium text-emerald-800">새로 할당될 화면:</p>
+                <div className="flex items-center gap-2 text-sm text-emerald-700">
                   <Plus className="h-3 w-3" />
                   <span>{screenInfo.screenName}</span>
                   <Badge variant="outline" className="text-xs">
@@ -621,7 +621,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
               </div>
             )}
 
-            <div className="rounded-lg border-l-4 border-orange-400 bg-orange-50 p-3">
+            <div className="rounded-lg border-l-4 border-orange-400 bg-amber-50 p-3">
               <p className="text-sm text-orange-800">
                 <strong>주의:</strong> 기존 화면들이 메뉴에서 제거되고 새 화면으로 교체됩니다. 이 작업은 되돌릴 수
                 없습니다.
diff --git a/frontend/components/screen/NodeSettingModal.tsx b/frontend/components/screen/NodeSettingModal.tsx
index 287dcaff..1670b5af 100644
--- a/frontend/components/screen/NodeSettingModal.tsx
+++ b/frontend/components/screen/NodeSettingModal.tsx
@@ -430,9 +430,9 @@ export default function NodeSettingModal({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
             {nodeType === "screen" ? (
-              <Database className="h-5 w-5 text-blue-500" />
+              <Database className="h-5 w-5 text-primary" />
             ) : (
-              <Database className="h-5 w-5 text-green-500" />
+              <Database className="h-5 w-5 text-emerald-500" />
             )}
             {modalTitle}
           </DialogTitle>
@@ -848,13 +848,13 @@ function TableRelationTab({
               </TableRow>
             ) : (
               v2TableRelations.map((item) => (
-                <TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
+                <TableRow key={item.id} className={item.source === "designer" ? "bg-amber-50/50" : ""}>
                   <TableCell className="text-xs">
                     <Badge variant="outline" className={cn(
                       "h-5 px-2",
                       item.source === "designer" 
-                        ? "border-orange-400 text-orange-700 bg-orange-100" 
-                        : "border-blue-400 text-blue-700 bg-blue-100"
+                        ? "border-orange-400 text-orange-700 bg-amber-100" 
+                        : "border-primary/60 text-primary bg-primary/10"
                     )}>
                       {item.source === "designer" ? "화면" : "DB"}
                     </Badge>
@@ -879,7 +879,7 @@ function TableRelationTab({
                     {item.source === "designer" && "joinColumnRefs" in item && item.joinColumnRefs && item.joinColumnRefs.length > 0 && (
                       <div className="flex flex-wrap gap-1 mt-1">
                         {item.joinColumnRefs.map((join, idx) => (
-                          <span key={idx} className="px-1.5 py-0.5 bg-orange-100 text-orange-600 text-[10px] rounded">
+                          <span key={idx} className="px-1.5 py-0.5 bg-amber-100 text-amber-600 text-[10px] rounded">
                             {join.column}→{join.refTable}
                           </span>
                         ))}
@@ -888,10 +888,10 @@ function TableRelationTab({
                   </TableCell>
                   <TableCell className="text-xs">
                     <span className={`px-2 py-1 rounded text-xs ${
-                      item.relation_type === "main" ? "bg-blue-100 text-blue-700" :
+                      item.relation_type === "main" ? "bg-primary/10 text-primary" :
                       item.relation_type === "sub" ? "bg-purple-100 text-purple-700" :
                       item.relation_type === "save" ? "bg-pink-100 text-pink-700" :
-                      "bg-gray-100 text-gray-700"
+                      "bg-muted text-foreground"
                     }`}>
                       {item.relation_type === "main" ? "메인" :
                        item.relation_type === "sub" ? "필터" :
@@ -1234,10 +1234,10 @@ function JoinSettingTab({
 
       {/* 참조 정보 (이 테이블을 참조하는 다른 테이블들) */}
       {existingConfig?.referencedBy && existingConfig.referencedBy.length > 0 && (
-        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+        <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
           <div className="flex items-center gap-2 mb-3">
-            <GitBranch className="h-4 w-4 text-green-600" />
-            <span className="text-sm font-medium text-green-800">이 테이블을 참조하는 관계</span>
+            <GitBranch className="h-4 w-4 text-emerald-600" />
+            <span className="text-sm font-medium text-emerald-800">이 테이블을 참조하는 관계</span>
           </div>
           <Table>
             <TableHeader>
@@ -1255,9 +1255,9 @@ function JoinSettingTab({
                   </TableCell>
                   <TableCell className="text-xs">
                     <span className={`px-2 py-0.5 rounded text-xs ${
-                      ref.relationType === 'join' ? 'bg-orange-100 text-orange-700' :
+                      ref.relationType === 'join' ? 'bg-amber-100 text-orange-700' :
                       ref.relationType === 'filter' ? 'bg-purple-100 text-purple-700' :
-                      'bg-gray-100 text-gray-700'
+                      'bg-muted text-foreground'
                     }`}>
                       {ref.relationType}
                     </span>
@@ -1434,14 +1434,14 @@ function JoinSettingTab({
               </TableRow>
             ) : (
               v2Joins.map((item) => (
-                <TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
+                <TableRow key={item.id} className={item.source === "designer" ? "bg-amber-50/50" : ""}>
                   <TableCell className="text-xs">
                     {item.source === "designer" ? (
-                      <span className="px-2 py-0.5 rounded bg-orange-100 text-orange-700 text-xs">
+                      <span className="px-2 py-0.5 rounded bg-amber-100 text-orange-700 text-xs">
                         화면
                       </span>
                     ) : (
-                      <span className="px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-xs">
+                      <span className="px-2 py-0.5 rounded bg-primary/10 text-primary text-xs">
                         DB
                       </span>
                     )}
@@ -1451,7 +1451,7 @@ function JoinSettingTab({
                   <TableCell className="text-xs">{item.join_table_label || item.join_table}</TableCell>
                   <TableCell className="text-xs font-mono">{item.join_column}</TableCell>
                   <TableCell className="text-xs">
-                    <span className="px-2 py-1 rounded bg-gray-100 text-gray-700 text-xs">
+                    <span className="px-2 py-1 rounded bg-muted text-foreground text-xs">
                       {item.join_type}
                     </span>
                   </TableCell>
@@ -1485,9 +1485,9 @@ function JoinSettingTab({
           </TableBody>
         </Table>
         {designerJoins.length > 0 && (
-          <div className="px-4 py-2 border-t text-xs text-muted-foreground bg-orange-50/30">
-            <span className="text-orange-600">* 화면</span>: 화면 디자이너 설정 (수정 시 DB에 저장) | 
-            <span className="text-blue-600 ml-1">* DB</span>: DB 저장 설정 (직접 수정/삭제 가능)
+          <div className="px-4 py-2 border-t text-xs text-muted-foreground bg-amber-50/30">
+            <span className="text-amber-600">* 화면</span>: 화면 디자이너 설정 (수정 시 DB에 저장) | 
+            <span className="text-primary ml-1">* DB</span>: DB 저장 설정 (직접 수정/삭제 가능)
           </div>
         )}
       </div>
@@ -1745,7 +1745,7 @@ function DataFlowTab({
                     <span className={`px-2 py-1 rounded text-xs ${
                       item.flow_type === "bidirectional" 
                         ? "bg-purple-100 text-purple-700" 
-                        : "bg-blue-100 text-blue-700"
+                        : "bg-primary/10 text-primary"
                     }`}>
                       {item.flow_type === "bidirectional" ? "양방향" : "단방향"}
                     </span>
@@ -1805,7 +1805,7 @@ function FieldMappingTab({
     <div className="space-y-4">
       <div className="bg-muted/50 rounded-lg p-4">
         <div className="flex items-center gap-2 mb-2">
-          <Columns3 className="h-5 w-5 text-blue-500" />
+          <Columns3 className="h-5 w-5 text-primary" />
           <span className="text-sm font-medium">필드-컬럼 매핑</span>
         </div>
         <p className="text-xs text-muted-foreground">
@@ -1851,13 +1851,13 @@ function FieldMappingTab({
                     <TableCell className="text-xs">{col.displayName}</TableCell>
                     <TableCell className="text-xs text-muted-foreground">{col.dbType}</TableCell>
                     <TableCell className="text-xs">
-                      <span className="px-2 py-0.5 rounded bg-gray-100 text-gray-700 text-xs">
+                      <span className="px-2 py-0.5 rounded bg-muted text-foreground text-xs">
                         {col.webType}
                       </span>
                     </TableCell>
                     <TableCell className="text-xs">
                       {col.isPrimaryKey && (
-                        <span className="px-2 py-0.5 rounded bg-yellow-100 text-yellow-700 text-xs">
+                        <span className="px-2 py-0.5 rounded bg-amber-100 text-yellow-700 text-xs">
                           PK
                         </span>
                       )}
diff --git a/frontend/components/screen/OptimizedButtonComponent.tsx b/frontend/components/screen/OptimizedButtonComponent.tsx
index 4da98941..db8dcbb4 100644
--- a/frontend/components/screen/OptimizedButtonComponent.tsx
+++ b/frontend/components/screen/OptimizedButtonComponent.tsx
@@ -606,10 +606,10 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       return <Loader2 className="h-4 w-4 animate-spin" />;
     }
     if (lastResult?.success === false) {
-      return <AlertCircle className="h-4 w-4 text-red-500" />;
+      return <AlertCircle className="h-4 w-4 text-destructive" />;
     }
     if (lastResult?.success === true) {
-      return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
     }
     return null;
   };
diff --git a/frontend/components/screen/RealtimePreview.tsx b/frontend/components/screen/RealtimePreview.tsx
index 4efcb696..cb9d157f 100644
--- a/frontend/components/screen/RealtimePreview.tsx
+++ b/frontend/components/screen/RealtimePreview.tsx
@@ -79,7 +79,7 @@ const getAreaIcon = (layoutDirection?: "horizontal" | "vertical") => {
     case "vertical":
       return <Columns className="h-4 w-4 text-purple-600" />;
     default:
-      return <Square className="h-4 w-4 text-gray-500" />;
+      return <Square className="h-4 w-4 text-muted-foreground" />;
   }
 };
 
@@ -92,11 +92,11 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
   const { layoutDirection, label } = area;
 
   const renderPlaceholder = () => (
-    <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+    <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
       <div className="text-center">
         {getAreaIcon(layoutDirection)}
         <p className="text-muted-foreground mt-2 text-sm">{label || `${layoutDirection || "기본"} 영역`}</p>
-        <p className="text-xs text-gray-400">컴포넌트를 드래그해서 추가하세요</p>
+        <p className="text-xs text-muted-foreground/70">컴포넌트를 드래그해서 추가하세요</p>
       </div>
     </div>
   );
@@ -124,7 +124,7 @@ const WidgetRenderer: React.FC<{
   
   // 위젯 컴포넌트가 아닌 경우 빈 div 반환
   if (!isWidgetComponent(component)) {
-    return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
+    return <div className="text-xs text-muted-foreground">위젯이 아닙니다</div>;
   }
 
   const widget = component;
@@ -151,7 +151,7 @@ const WidgetRenderer: React.FC<{
     // isFileComponent: true
     // });
 
-    return <div className="p-2 text-xs text-gray-500">파일 컴포넌트 (별도 렌더링)</div>;
+    return <div className="p-2 text-xs text-muted-foreground">파일 컴포넌트 (별도 렌더링)</div>;
   }
 
   // 동적 웹타입 렌더링 사용
@@ -188,7 +188,7 @@ const WidgetRenderer: React.FC<{
 // 동적 위젯 타입 아이콘 (레지스트리에서 조회)
 const getWidgetIcon = (widgetType: WebType | undefined) => {
   if (!widgetType) {
-    return <Type className="h-4 w-4 text-gray-500" />;
+    return <Type className="h-4 w-4 text-muted-foreground" />;
   }
 
   // 레지스트리에서 웹타입 정의 조회
@@ -206,15 +206,15 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
       return <Type className="text-primary h-4 w-4" />;
     case "number":
     case "decimal":
-      return <Hash className="h-4 w-4 text-green-600" />;
+      return <Hash className="h-4 w-4 text-emerald-600" />;
     case "date":
     case "datetime":
       return <Calendar className="h-4 w-4 text-purple-600" />;
     case "select":
     case "dropdown":
-      return <List className="h-4 w-4 text-orange-600" />;
+      return <List className="h-4 w-4 text-amber-600" />;
     case "textarea":
-      return <AlignLeft className="h-4 w-4 text-indigo-600" />;
+      return <AlignLeft className="h-4 w-4 text-primary" />;
     case "boolean":
     case "checkbox":
       return <CheckSquare className="text-primary h-4 w-4" />;
@@ -225,9 +225,9 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
     case "entity":
       return <Building className="h-4 w-4 text-cyan-600" />;
     case "file":
-      return <File className="h-4 w-4 text-yellow-600" />;
+      return <File className="h-4 w-4 text-amber-600" />;
     default:
-      return <Type className="h-4 w-4 text-gray-500" />;
+      return <Type className="h-4 w-4 text-muted-foreground" />;
   }
 };
 
@@ -690,13 +690,13 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
               const tabs = tabsComponent.componentConfig?.tabs || tabsComponent.tabs || [];
 
               return (
-                <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+                <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
                   <div className="text-center">
                     <div className="flex items-center justify-center">
-                      <Folder className="h-8 w-8 text-gray-400" />
+                      <Folder className="h-8 w-8 text-muted-foreground/70" />
                     </div>
                     <p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
-                    <p className="text-xs text-gray-400">
+                    <p className="text-xs text-muted-foreground/70">
                       {tabs.length > 0
                         ? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
                         : "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
@@ -707,7 +707,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                           <Badge key={tab.id} variant="outline" className="text-xs">
                             {tab.label || `탭 ${index + 1}`}
                             {tab.screenName && (
-                              <span className="ml-1 text-[10px] text-gray-400">({tab.screenName})</span>
+                              <span className="ml-1 text-[10px] text-muted-foreground/70">({tab.screenName})</span>
                             )}
                           </Badge>
                         ))}
@@ -806,10 +806,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
             return (
               <div key={`file-component-${component.id}-${fileUpdateTrigger}`} className="flex h-full flex-col">
-                <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-2">
+                <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-input bg-muted p-2">
                   {currentFiles.length > 0 ? (
                     <div className="h-full overflow-y-auto">
-                      <div className="mb-1 text-xs font-medium text-gray-700">
+                      <div className="mb-1 text-xs font-medium text-foreground">
                         업로드된 파일 ({currentFiles.length})
                       </div>
                       <div className="space-y-1">
@@ -818,27 +818,27 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                           const getFileIcon = (fileName: string) => {
                             const ext = fileName.split(".").pop()?.toLowerCase() || "";
                             if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
-                              return <ImageIcon className="h-4 w-4 flex-shrink-0 text-green-500" />;
+                              return <ImageIcon className="h-4 w-4 flex-shrink-0 text-emerald-500" />;
                             }
                             if (["pdf", "doc", "docx", "txt", "rtf", "hwp", "hwpx", "hwpml", "pages"].includes(ext)) {
-                              return <FileText className="h-4 w-4 flex-shrink-0 text-red-500" />;
+                              return <FileText className="h-4 w-4 flex-shrink-0 text-destructive" />;
                             }
                             if (["ppt", "pptx", "hpt", "keynote"].includes(ext)) {
-                              return <Presentation className="h-4 w-4 flex-shrink-0 text-orange-600" />;
+                              return <Presentation className="h-4 w-4 flex-shrink-0 text-amber-600" />;
                             }
                             if (["xls", "xlsx", "hcdt", "numbers"].includes(ext)) {
-                              return <FileText className="h-4 w-4 flex-shrink-0 text-green-600" />;
+                              return <FileText className="h-4 w-4 flex-shrink-0 text-emerald-600" />;
                             }
                             if (["mp4", "avi", "mov", "wmv", "webm", "ogg"].includes(ext)) {
                               return <Video className="h-4 w-4 flex-shrink-0 text-purple-500" />;
                             }
                             if (["mp3", "wav", "flac", "aac"].includes(ext)) {
-                              return <Music className="h-4 w-4 flex-shrink-0 text-orange-500" />;
+                              return <Music className="h-4 w-4 flex-shrink-0 text-amber-500" />;
                             }
                             if (["zip", "rar", "7z", "tar"].includes(ext)) {
-                              return <Archive className="h-4 w-4 flex-shrink-0 text-yellow-500" />;
+                              return <Archive className="h-4 w-4 flex-shrink-0 text-amber-500" />;
                             }
-                            return <File className="h-4 w-4 flex-shrink-0 text-blue-500" />;
+                            return <File className="h-4 w-4 flex-shrink-0 text-primary" />;
                           };
 
                           return (
@@ -848,10 +848,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                             >
                               {getFileIcon(file.realFileName || file.name || "")}
                               <div className="min-w-0 flex-1">
-                                <p className="truncate font-medium text-gray-900">
+                                <p className="truncate font-medium text-foreground">
                                   {file.realFileName || file.name || `파일 ${index + 1}`}
                                 </p>
-                                <p className="text-gray-500">
+                                <p className="text-muted-foreground">
                                   {file.fileSize ? `${Math.round(file.fileSize / 1024)} KB` : ""}
                                 </p>
                               </div>
@@ -862,10 +862,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                     </div>
                   ) : (
                     <div className="flex h-full flex-col items-center justify-center text-center">
-                      <File className="mb-2 h-8 w-8 text-gray-400" />
-                      <p className="mb-1 text-xs font-medium text-gray-700">업로드된 파일 (0)</p>
+                      <File className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                      <p className="mb-1 text-xs font-medium text-foreground">업로드된 파일 (0)</p>
                       <p className="text-muted-foreground text-sm">파일 업로드 영역</p>
-                      <p className="mt-1 text-xs text-gray-400">상세설정에서 파일을 업로드하세요</p>
+                      <p className="mt-1 text-xs text-muted-foreground/70">상세설정에서 파일을 업로드하세요</p>
                     </div>
                   )}
                 </div>
@@ -876,7 +876,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
       {/* 선택된 컴포넌트 정보 표시 */}
       {isSelected && (
-        <div className="absolute -top-6 left-0 rounded bg-blue-600 px-2 py-1 text-xs text-white">
+        <div className="absolute -top-6 left-0 rounded bg-primary px-2 py-1 text-xs text-white">
           {type === "widget" && (
             <div className="flex items-center gap-1">
               {getWidgetIcon(isWidgetComponent(component) ? (component.widgetType as WebType) : undefined)}
diff --git a/frontend/components/screen/ResponsiveDesignerContainer.tsx b/frontend/components/screen/ResponsiveDesignerContainer.tsx
index 392e59ce..41c0ac44 100644
--- a/frontend/components/screen/ResponsiveDesignerContainer.tsx
+++ b/frontend/components/screen/ResponsiveDesignerContainer.tsx
@@ -106,15 +106,15 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
   };
 
   return (
-    <div className="flex h-full w-full flex-col bg-gray-100">
+    <div className="flex h-full w-full flex-col bg-muted">
       {/* 상단 컨트롤 바 */}
       <div className="flex items-center justify-between border-b bg-white px-4 py-2 shadow-sm">
         <div className="flex items-center space-x-2">
-          <span className="text-sm font-medium text-gray-700">
+          <span className="text-sm font-medium text-foreground">
             {screenName && `${screenName} - `}
             {designWidth} × {designHeight}
           </span>
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-muted-foreground">
             (배율: {Math.round(scale * 100)}% | 컨테이너: {containerSize.width}×{containerSize.height})
           </span>
         </div>
diff --git a/frontend/components/screen/ResponsivePreviewModal.tsx b/frontend/components/screen/ResponsivePreviewModal.tsx
index 1e05a86b..8ff86207 100644
--- a/frontend/components/screen/ResponsivePreviewModal.tsx
+++ b/frontend/components/screen/ResponsivePreviewModal.tsx
@@ -100,9 +100,9 @@ export const ResponsivePreviewModal: React.FC<ResponsivePreviewModalProps> = ({
 
         {/* 미리보기 영역 - Context Provider로 감싸서 브레이크포인트 전달 */}
         <PreviewBreakpointContext.Provider value={selectedDevice.breakpoint}>
-          <div className="flex min-h-[600px] items-start justify-center overflow-auto bg-gray-50 p-6">
+          <div className="flex min-h-[600px] items-start justify-center overflow-auto bg-muted p-6">
             <div
-              className="relative border border-gray-300 bg-white shadow-2xl"
+              className="relative border border-input bg-white shadow-2xl"
               style={{
                 width: `${selectedDevice.width}px`,
                 height: `${selectedDevice.height}px`,
@@ -112,11 +112,11 @@ export const ResponsivePreviewModal: React.FC<ResponsivePreviewModalProps> = ({
               }}
             >
               {/* 디바이스 프레임 헤더 (선택사항) */}
-              <div className="sticky top-0 z-10 flex items-center justify-between border-b border-gray-300 bg-gray-100 px-4 py-2">
-                <div className="text-xs text-gray-600">
+              <div className="sticky top-0 z-10 flex items-center justify-between border-b border-input bg-muted px-4 py-2">
+                <div className="text-xs text-muted-foreground">
                   {selectedDevice.name} - {selectedDevice.width}×{selectedDevice.height}
                 </div>
-                <div className="text-xs text-gray-500">스케일: {Math.round(scale * 100)}%</div>
+                <div className="text-xs text-muted-foreground">스케일: {Math.round(scale * 100)}%</div>
               </div>
 
               {/* 실제 컴포넌트 렌더링 */}
@@ -134,7 +134,7 @@ export const ResponsivePreviewModal: React.FC<ResponsivePreviewModalProps> = ({
         </PreviewBreakpointContext.Provider>
 
         {/* 푸터 정보 */}
-        <div className="border-t bg-gray-50 px-6 py-3 text-xs text-gray-600">
+        <div className="border-t bg-muted px-6 py-3 text-xs text-muted-foreground">
           💡 Tip: 각 디바이스 버튼을 클릭하여 다양한 화면 크기에서 레이아웃을 확인할 수 있습니다.
         </div>
       </DialogContent>
diff --git a/frontend/components/screen/ResponsiveScreenContainer.tsx b/frontend/components/screen/ResponsiveScreenContainer.tsx
index 2cf7c9c2..2b553a91 100644
--- a/frontend/components/screen/ResponsiveScreenContainer.tsx
+++ b/frontend/components/screen/ResponsiveScreenContainer.tsx
@@ -31,7 +31,7 @@ export const ResponsiveScreenContainer: React.FC<ResponsiveScreenContainerProps>
   };
 
   return (
-    <div className="h-full w-full overflow-auto bg-gray-50">
+    <div className="h-full w-full overflow-auto bg-muted">
       <div style={wrapperStyle}>
         <div style={screenStyle}>{children}</div>
       </div>
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 2cbacb03..1cb30567 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -6681,7 +6681,7 @@ export default function ScreenDesigner({
                       )}
 
                       {/* 상태 표시 */}
-                      {hasFlowGroupButton && <p className="mt-1 text-[10px] text-blue-600">✓ 플로우 그룹 버튼</p>}
+                      {hasFlowGroupButton && <p className="mt-1 text-[10px] text-primary">✓ 플로우 그룹 버튼</p>}
                     </div>
                   </div>
                 );
@@ -6698,7 +6698,7 @@ export default function ScreenDesigner({
                       </span>
                     )}
                     {!activeLayerZone && (
-                      <span className="ml-2 text-red-500">
+                      <span className="ml-2 text-destructive">
                         (조건부 영역 미설정 - 기본 레이어에서 Zone을 먼저 생성하세요)
                       </span>
                     )}
diff --git a/frontend/components/screen/ScreenGroupTreeView.tsx b/frontend/components/screen/ScreenGroupTreeView.tsx
index 74133a16..ead6ddd3 100644
--- a/frontend/components/screen/ScreenGroupTreeView.tsx
+++ b/frontend/components/screen/ScreenGroupTreeView.tsx
@@ -1185,9 +1185,9 @@ export function ScreenGroupTreeView({
                             <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
                           )}
                           {isChildExpanded ? (
-                            <FolderOpen className="h-3 w-3 shrink-0 text-blue-500" />
+                            <FolderOpen className="h-3 w-3 shrink-0 text-primary" />
                           ) : (
-                            <Folder className="h-3 w-3 shrink-0 text-blue-500" />
+                            <Folder className="h-3 w-3 shrink-0 text-primary" />
                           )}
                           <span className={cn("truncate flex-1", isChildMatching && "font-medium text-primary/80")}>{childGroup.group_name}</span>
                           <Badge variant="secondary" className="text-[10px] h-4">
@@ -1247,9 +1247,9 @@ export function ScreenGroupTreeView({
                                       <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
                                     )}
                                     {isGrandExpanded ? (
-                                      <FolderOpen className="h-3 w-3 shrink-0 text-green-500" />
+                                      <FolderOpen className="h-3 w-3 shrink-0 text-emerald-500" />
                                     ) : (
-                                      <Folder className="h-3 w-3 shrink-0 text-green-500" />
+                                      <Folder className="h-3 w-3 shrink-0 text-emerald-500" />
                                     )}
                                     <span className={cn("truncate flex-1", isGrandMatching && "font-medium text-primary/80")}>{grandChild.group_name}</span>
                                     <Badge variant="outline" className="text-[10px] h-4">
@@ -1302,7 +1302,7 @@ export function ScreenGroupTreeView({
                                             onDoubleClick={() => handleScreenDoubleClick(screen)}
                                             onContextMenu={(e) => handleContextMenu(e, screen)}
                                           >
-                                            <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
+                                            <Monitor className="h-3 w-3 shrink-0 text-primary" />
                                             <span className="truncate flex-1">{screen.screenName}</span>
                                             <span className="text-[10px] text-muted-foreground truncate max-w-[80px]">
                                               {screen.screenCode}
@@ -1338,7 +1338,7 @@ export function ScreenGroupTreeView({
                                   onDoubleClick={() => handleScreenDoubleClick(screen)}
                                   onContextMenu={(e) => handleContextMenu(e, screen)}
                                 >
-                                  <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
+                                  <Monitor className="h-3 w-3 shrink-0 text-primary" />
                                   <span className="truncate flex-1">{screen.screenName}</span>
                                   <span className="text-[10px] text-muted-foreground truncate max-w-[80px]">
                                     {screen.screenCode}
@@ -1374,7 +1374,7 @@ export function ScreenGroupTreeView({
                         onDoubleClick={() => handleScreenDoubleClick(screen)}
                         onContextMenu={(e) => handleContextMenu(e, screen)}
                       >
-                        <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
+                        <Monitor className="h-4 w-4 shrink-0 text-primary" />
                         <span className="truncate flex-1">{screen.screenName}</span>
                         <span className="text-xs text-muted-foreground truncate max-w-[100px]">
                           {screen.screenCode}
@@ -1424,7 +1424,7 @@ export function ScreenGroupTreeView({
                     onDoubleClick={() => handleScreenDoubleClick(screen)}
                     onContextMenu={(e) => handleContextMenu(e, screen)}
                   >
-                    <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
+                    <Monitor className="h-4 w-4 shrink-0 text-primary" />
                     <span className="truncate flex-1">{screen.screenName}</span>
                     <span className="text-xs text-muted-foreground truncate max-w-[100px]">
                       {screen.screenCode}
@@ -1519,7 +1519,7 @@ export function ScreenGroupTreeView({
                 id="deleteScreensWithGroup"
                 checked={deleteScreensWithGroup}
                 onChange={(e) => setDeleteScreensWithGroup(e.target.checked)}
-                className="h-4 w-4 rounded border-gray-300 text-destructive focus:ring-destructive"
+                className="h-4 w-4 rounded border-input text-destructive focus:ring-destructive"
               />
               <label 
                 htmlFor="deleteScreensWithGroup" 
@@ -2080,15 +2080,15 @@ export function ScreenGroupTreeView({
                   onClick={() => handleSync("screen-to-menu")}
                   disabled={isSyncing}
                   variant="outline"
-                  className="w-full justify-start gap-2 border-blue-200 bg-blue-50/50 hover:bg-blue-100/70 hover:border-blue-300"
+                  className="w-full justify-start gap-2 border-primary/20 bg-primary/10/50 hover:bg-primary/10/70 hover:border-primary/40"
                 >
                   {isSyncing && syncDirection === "screen-to-menu" ? (
-                    <Loader2 className="h-4 w-4 animate-spin text-blue-600" />
+                    <Loader2 className="h-4 w-4 animate-spin text-primary" />
                   ) : (
-                    <FolderTree className="h-4 w-4 text-blue-600" />
+                    <FolderTree className="h-4 w-4 text-primary" />
                   )}
-                  <span className="flex-1 text-left text-blue-700">화면관리 → 메뉴 동기화</span>
-                  <span className="text-xs text-blue-500/70">
+                  <span className="flex-1 text-left text-primary">화면관리 → 메뉴 동기화</span>
+                  <span className="text-xs text-primary/70">
                     폴더 구조를 메뉴에 반영
                   </span>
                 </Button>
diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index 2c900442..7e7ae36e 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -1367,7 +1367,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
       <AlertDialog open={showDependencyWarning} onOpenChange={setShowDependencyWarning}>
         <AlertDialogContent className="max-w-2xl">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-orange-600">⚠️ 화면 삭제 경고</AlertDialogTitle>
+            <AlertDialogTitle className="text-amber-600">⚠️ 화면 삭제 경고</AlertDialogTitle>
             <AlertDialogDescription>
               "{screenToDelete?.screenName}" 화면이 다른 화면에서 사용 중입니다.
               <br />이 화면을 삭제하면 아래 화면들의 버튼 기능이 작동하지 않을 수 있습니다.
@@ -1378,14 +1378,14 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             <div className="space-y-3">
               <h4 className="font-medium">사용 중인 화면 목록:</h4>
               {dependencies.map((dep, index) => (
-                <div key={index} className="rounded-lg border border-orange-200 bg-orange-50 p-3">
+                <div key={index} className="rounded-lg border border-orange-200 bg-amber-50 p-3">
                   <div className="flex items-center justify-between">
                     <div>
                       <div className="font-medium">{dep.screenName}</div>
                       <div className="text-muted-foreground text-sm">화면 코드: {dep.screenCode}</div>
                     </div>
                     <div className="text-right">
-                      <div className="text-sm font-medium text-orange-600">
+                      <div className="text-sm font-medium text-amber-600">
                         {dep.referenceType === "popup" && "팝업 버튼"}
                         {dep.referenceType === "navigate" && "이동 버튼"}
                         {dep.referenceType === "url" && "URL 링크"}
@@ -1615,7 +1615,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                               />
                               <div className="flex flex-col">
                                 <span className="font-medium">{table.tableLabel}</span>
-                                <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                                <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                               </div>
                             </CommandItem>
                           ))}
@@ -1676,7 +1676,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                                 />
                                 <div className="flex flex-col">
                                   <span className="font-medium">{conn.connection_name}</span>
-                                  <span className="text-[10px] text-gray-500">{conn.base_url}</span>
+                                  <span className="text-[10px] text-muted-foreground">{conn.base_url}</span>
                                 </div>
                               </CommandItem>
                             ))}
@@ -1767,7 +1767,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           </DialogHeader>
           <ScreenPreviewProvider isPreviewMode={true}>
             <TableOptionsProvider>
-              <div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-slate-100 p-6">
+              <div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-muted to-slate-100 p-6">
               {isLoadingPreview ? (
                 <div className="flex h-full items-center justify-center">
                   <div className="text-center">
@@ -1841,7 +1841,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                             >
                               {/* 그룹 제목 */}
                               {component.title && (
-                                <div className="mb-3 inline-block rounded-lg bg-blue-50 px-3 py-1 text-sm font-semibold text-blue-700">
+                                <div className="mb-3 inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-semibold text-primary">
                                   {component.title}
                                 </div>
                               )}
diff --git a/frontend/components/screen/ScreenNode.tsx b/frontend/components/screen/ScreenNode.tsx
index bcaaf054..0d45d775 100644
--- a/frontend/components/screen/ScreenNode.tsx
+++ b/frontend/components/screen/ScreenNode.tsx
@@ -118,7 +118,7 @@ const getScreenTypeColor = (screenType?: string, isMain?: boolean) => {
     case "action":
       return "bg-rose-500";
     default:
-      return "bg-blue-500";
+      return "bg-primary";
   }
 };
 
@@ -133,7 +133,7 @@ const getScreenRoleColor = (screenRole?: string) => {
     return "bg-violet-500"; // 보라색 - 메인 그리드
   }
   if (role.includes("등록") || role.includes("폼") || role.includes("form") || role.includes("register") || role.includes("input")) {
-    return "bg-blue-500"; // 파란색 - 등록 폼
+    return "bg-primary"; // 파란색 - 등록 폼
   }
   if (role.includes("액션") || role.includes("action") || role.includes("이벤트") || role.includes("event") || role.includes("클릭")) {
     return "bg-rose-500"; // 빨간색 - 액션/이벤트
@@ -169,7 +169,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
   let headerColor: string;
   if (isInGroup) {
     if (isFaded) {
-      headerColor = "bg-gray-300"; // 흑백 처리 - 더 확실한 회색
+      headerColor = "bg-muted/60"; // 흑백 처리 - 더 확실한 회색
     } else {
       // 포커스되었거나 아직 아무것도 선택 안됐을 때: 역할별 색상
       headerColor = getScreenRoleColor(screenRole);
@@ -184,7 +184,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
         isFocused 
           ? "border-2 border-primary ring-4 ring-primary/50 shadow-xl scale-105" 
           : isFaded
-          ? "border-gray-200 opacity-50"
+          ? "border-border opacity-50"
           : "border-border hover:shadow-lg hover:ring-2 hover:ring-primary/20"
       }`}
       style={{
@@ -198,19 +198,19 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
         type="target"
         position={Position.Left}
         id="left"
-        className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-primary opacity-0 transition-opacity group-hover:opacity-100"
       />
       <Handle
         type="source"
         position={Position.Right}
         id="right"
-        className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-primary opacity-0 transition-opacity group-hover:opacity-100"
       />
       <Handle
         type="source"
         position={Position.Bottom}
         id="bottom"
-        className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-primary opacity-0 transition-opacity group-hover:opacity-100"
       />
 
       {/* 헤더 (컬러) */}
@@ -288,7 +288,7 @@ const getComponentColor = (componentKind: string) => {
   }
   // 버튼 관련
   if (componentKind?.includes("button")) {
-    return "bg-blue-300 border-blue-500";
+    return "bg-blue-300 border-primary";
   }
   // 입력 필드
   if (componentKind?.includes("input") || componentKind?.includes("text")) {
@@ -319,13 +319,13 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 그리드 화면 일러스트
   if (screenType === "grid") {
   return (
-      <div className="flex h-full flex-col gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
+      <div className="flex h-full flex-col gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-background p-3">
         {/* 상단 툴바 */}
         <div className="flex items-center gap-2">
           <div className="h-4 w-16 rounded bg-pink-400/80 shadow-sm" />
           <div className="flex-1" />
-          <div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
-          <div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
+          <div className="h-4 w-8 rounded bg-primary shadow-sm" />
+          <div className="h-4 w-8 rounded bg-primary shadow-sm" />
           <div className="h-4 w-8 rounded bg-rose-500 shadow-sm" />
         </div>
         {/* 테이블 헤더 */}
@@ -347,7 +347,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
         {/* 페이지네이션 */}
         <div className="flex items-center justify-center gap-2 pt-1">
           <div className="h-2.5 w-4 rounded bg-slate-300" />
-          <div className="h-2.5 w-4 rounded bg-blue-500" />
+          <div className="h-2.5 w-4 rounded bg-primary" />
           <div className="h-2.5 w-4 rounded bg-slate-300" />
           <div className="h-2.5 w-4 rounded bg-slate-300" />
         </div>
@@ -362,7 +362,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 폼 화면 일러스트
   if (screenType === "form") {
     return (
-      <div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
+      <div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-background p-3">
         {/* 폼 필드들 */}
         {[...Array(6)].map((_, i) => (
           <div key={i} className="flex items-center gap-3">
@@ -373,7 +373,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
         {/* 버튼 영역 */}
         <div className="mt-auto flex justify-end gap-2 border-t border-slate-100 pt-3">
           <div className="h-5 w-14 rounded-md bg-slate-300 shadow-sm" />
-          <div className="h-5 w-14 rounded-md bg-blue-500 shadow-sm" />
+          <div className="h-5 w-14 rounded-md bg-primary shadow-sm" />
         </div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
@@ -386,7 +386,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 대시보드 화면 일러스트
   if (screenType === "dashboard") {
     return (
-      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
+      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-background p-3">
         {/* 카드/차트들 */}
         <div className="rounded-lg bg-emerald-100 p-2 shadow-sm">
           <div className="mb-2 h-2.5 w-10 rounded bg-emerald-400" />
@@ -396,13 +396,13 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
           <div className="mb-2 h-2.5 w-10 rounded bg-amber-400" />
           <div className="h-10 rounded-md bg-amber-300/80" />
                 </div>
-        <div className="col-span-2 rounded-lg bg-blue-100 p-2 shadow-sm">
-          <div className="mb-2 h-2.5 w-12 rounded bg-blue-400" />
+        <div className="col-span-2 rounded-lg bg-primary/10 p-2 shadow-sm">
+          <div className="mb-2 h-2.5 w-12 rounded bg-primary/70" />
           <div className="flex h-14 items-end gap-1">
             {[...Array(10)].map((_, i) => (
               <div
                 key={i}
-                className="flex-1 rounded-t bg-blue-400/80"
+                className="flex-1 rounded-t bg-primary/70/80"
                 style={{ height: `${25 + Math.random() * 75}%` }}
               />
             ))}
@@ -419,12 +419,12 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 액션 화면 일러스트 (버튼 중심)
   if (screenType === "action") {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
+      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-background p-3">
         <div className="rounded-full bg-slate-100 p-4 text-slate-400">
           <MousePointer2 className="h-10 w-10" />
             </div>
         <div className="flex gap-3">
-          <div className="h-7 w-16 rounded-md bg-blue-500 shadow-sm" />
+          <div className="h-7 w-16 rounded-md bg-primary shadow-sm" />
           <div className="h-7 w-16 rounded-md bg-slate-300 shadow-sm" />
             </div>
         <div className="text-xs font-medium text-slate-400">액션 화면</div>
@@ -438,7 +438,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
 
   // 기본 (알 수 없는 타입)
   return (
-    <div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white text-slate-400">
+    <div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-background text-slate-400">
       <div className="rounded-full bg-slate-100 p-4">
         {getScreenTypeIcon(screenType)}
       </div>
@@ -586,7 +586,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
           ? "border-2 border-emerald-500 ring-4 ring-emerald-500/30 shadow-xl bg-card" 
           // 4. 흐리게 처리
           : isFaded
-          ? "border-gray-200 opacity-60 bg-card"
+          ? "border-border opacity-60 bg-card"
           // 5. 기본
           : "border-border hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20 bg-card"
       }`}
@@ -624,7 +624,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
         position={Position.Top}
         id="top_source"
         style={{ top: -4 }}
-        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-amber-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
       <Handle
         type="target"
@@ -642,7 +642,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
         type="source"
         position={Position.Bottom}
         id="bottom"
-        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-amber-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
       {/* bottom target: 메인테이블 ← 메인테이블 연결용 (아래에서 들어오는 선) */}
       <Handle
@@ -650,12 +650,12 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
         position={Position.Bottom}
         id="bottom_target"
         style={{ bottom: -4 }}
-        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-amber-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
 
       {/* 헤더 (필터 관계: 보라색, 필터 소스: 보라색, 메인: 초록색, 기본: 슬레이트) */}
       <div className={`flex items-center gap-2 px-3 py-1.5 text-white rounded-t-xl transition-colors duration-700 ease-in-out ${
-        isFaded ? "bg-gray-400" : (hasFilterRelation || isFilterSource) ? "bg-violet-600" : isMain ? "bg-emerald-600" : "bg-slate-500"
+        isFaded ? "bg-muted-foreground" : (hasFilterRelation || isFilterSource) ? "bg-violet-600" : isMain ? "bg-emerald-600" : "bg-slate-500"
       }`}>
         <Database className="h-3.5 w-3.5 shrink-0" />
         <div className="flex-1 min-w-0">
@@ -745,11 +745,11 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                   key={col.name}
                   className={`flex items-center gap-1 rounded px-1.5 py-0.5 transition-all duration-300 ${
                     isJoinColumn 
-                      ? "bg-orange-100 border border-orange-300 shadow-sm" 
+                      ? "bg-amber-100 border border-orange-300 shadow-sm" 
                       : isFilterColumn || isFilterSourceColumn
                       ? "bg-violet-100 border border-violet-300 shadow-sm"  // 필터 컬럼/필터 소스: 보라색
                       : isHighlighted 
-                      ? "bg-blue-100 border border-blue-300 shadow-sm"
+                      ? "bg-primary/10 border border-primary/40 shadow-sm"
                       : hasActiveColumns
                       ? "bg-slate-100"
                       : "bg-slate-50 hover:bg-slate-100"
@@ -760,17 +760,17 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                   }}
                 >
                   {/* PK/FK/조인/필터 아이콘 */}
-                  {isJoinColumn && <Link2 className="h-2.5 w-2.5 text-orange-500" />}
+                  {isJoinColumn && <Link2 className="h-2.5 w-2.5 text-amber-500" />}
                   {(isFilterColumn || isFilterSourceColumn) && !isJoinColumn && <Link2 className="h-2.5 w-2.5 text-violet-500" />}
                   {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isPrimaryKey && <Key className="h-2.5 w-2.5 text-amber-500" />}
-                  {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-blue-500" />}
+                  {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-primary" />}
                   {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && !col.isPrimaryKey && !col.isForeignKey && <div className="w-2.5" />}
 
                   {/* 컬럼명 */}
                   <span className={`flex-1 truncate font-mono text-[9px] font-medium ${
                     isJoinColumn ? "text-orange-700" 
                     : (isFilterColumn || isFilterSourceColumn) ? "text-violet-700"
-                    : isHighlighted ? "text-blue-700" 
+                    : isHighlighted ? "text-primary" 
                     : "text-slate-700"
                   }`}>
                     {col.name}
@@ -781,13 +781,13 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                     <>
                       {/* 조인 참조 테이블 표시 (joinColumnRefs에서) */}
                       {joinRefMap.has(colOriginal) && (
-                        <span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
+                        <span className="rounded bg-amber-100 px-1 text-[7px] text-amber-600">
                           ← {joinRefMap.get(colOriginal)?.refTableLabel}
                         </span>
                       )}
                       {/* 필드 매핑 참조 표시 (fieldMappingMap에서, joinRefMap에 없는 경우) */}
                       {!joinRefMap.has(colOriginal) && fieldMappingMap.has(colOriginal) && (
-                        <span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
+                        <span className="rounded bg-amber-100 px-1 text-[7px] text-amber-600">
                           ← {fieldMappingMap.get(colOriginal)?.sourceDisplayName}
                         </span>
                       )}
@@ -802,12 +802,12 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                     <>
                       <span className="rounded bg-violet-200 px-1 text-[7px] text-violet-700">필터</span>
                       {isHighlighted && (
-                        <span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
+                        <span className="rounded bg-blue-200 px-1 text-[7px] text-primary">사용</span>
                       )}
                     </>
                   )}
                   {isHighlighted && !isJoinColumn && !isFilterColumn && !isFilterSourceColumn && (
-                    <span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
+                    <span className="rounded bg-blue-200 px-1 text-[7px] text-primary">사용</span>
                   )}
 
                   {/* 타입 */}
diff --git a/frontend/components/screen/ScreenRelationView.tsx b/frontend/components/screen/ScreenRelationView.tsx
index 56e98e8c..ce235123 100644
--- a/frontend/components/screen/ScreenRelationView.tsx
+++ b/frontend/components/screen/ScreenRelationView.tsx
@@ -118,8 +118,8 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
     <div className="p-4 space-y-4 overflow-auto h-full">
       {/* 화면 기본 정보 */}
       <div className="flex items-start gap-4">
-        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-blue-500/10">
-          <Monitor className="h-6 w-6 text-blue-500" />
+        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-primary/10">
+          <Monitor className="h-6 w-6 text-primary" />
         </div>
         <div className="flex-1 min-w-0">
           <h3 className="font-semibold text-lg truncate">{screen.screenName}</h3>
@@ -141,7 +141,7 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
       <Card>
         <CardHeader className="py-3 px-4">
           <CardTitle className="text-sm font-medium flex items-center gap-2">
-            <Database className="h-4 w-4 text-green-500" />
+            <Database className="h-4 w-4 text-emerald-500" />
             연결된 테이블
           </CardTitle>
         </CardHeader>
@@ -191,13 +191,13 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
                   <div className="flex items-center gap-1">
                     <span className="font-mono text-xs">{join.sourceTable}</span>
                     <span className="text-muted-foreground">.</span>
-                    <span className="font-mono text-xs text-blue-600">{join.sourceColumn}</span>
+                    <span className="font-mono text-xs text-primary">{join.sourceColumn}</span>
                   </div>
                   <ArrowRight className="h-3 w-3 text-muted-foreground" />
                   <div className="flex items-center gap-1">
                     <span className="font-mono text-xs">{join.targetTable}</span>
                     <span className="text-muted-foreground">.</span>
-                    <span className="font-mono text-xs text-green-600">{join.targetColumn}</span>
+                    <span className="font-mono text-xs text-emerald-600">{join.targetColumn}</span>
                   </div>
                   <Badge variant="outline" className="ml-auto text-xs">
                     {join.joinType}
@@ -215,7 +215,7 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
       <Card>
         <CardHeader className="py-3 px-4">
           <CardTitle className="text-sm font-medium flex items-center gap-2">
-            <GitBranch className="h-4 w-4 text-orange-500" />
+            <GitBranch className="h-4 w-4 text-amber-500" />
             데이터 흐름
             {dataFlows.length > 0 && (
               <Badge variant="secondary" className="ml-auto">{dataFlows.length}</Badge>
@@ -230,10 +230,10 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
                   key={flow.id}
                   className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
                 >
-                  <Monitor className="h-4 w-4 text-blue-500" />
+                  <Monitor className="h-4 w-4 text-primary" />
                   <span className="truncate">{flow.flowName || "이름 없음"}</span>
                   <ArrowRight className="h-3 w-3 text-muted-foreground" />
-                  <Monitor className="h-4 w-4 text-green-500" />
+                  <Monitor className="h-4 w-4 text-emerald-500" />
                   <span className="text-muted-foreground truncate">
                     화면 #{flow.targetScreenId}
                   </span>
diff --git a/frontend/components/screen/ScreenSettingModal.tsx b/frontend/components/screen/ScreenSettingModal.tsx
index fa802893..74d55175 100644
--- a/frontend/components/screen/ScreenSettingModal.tsx
+++ b/frontend/components/screen/ScreenSettingModal.tsx
@@ -369,7 +369,7 @@ export function ScreenSettingModal({
       <DialogContent className="flex h-[90vh] max-h-[950px] w-[98vw] max-w-[1600px] flex-col">
         <DialogHeader className="flex-shrink-0">
           <DialogTitle className="flex items-center gap-2 text-lg">
-            <Settings2 className="h-5 w-5 text-blue-500" />
+            <Settings2 className="h-5 w-5 text-primary" />
             화면 설정:
             {groupScreens.length > 1 ? (
               <Select
@@ -944,14 +944,14 @@ function TableColumnAccordion({
           {/* 테이블 컬럼 정보 */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1 text-xs font-medium text-gray-700">
+              <div className="flex items-center gap-1 text-xs font-medium text-foreground">
                 <Table2 className="h-3 w-3" />
                 테이블 컬럼 ({loadingColumns ? "로딩중..." : `${columns.length}개`})
               </div>
               {columnMappings.length > 0 && (
                 <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
                   <div className="flex items-center gap-1">
-                    <div className="w-2 h-2 rounded-full bg-blue-500" />
+                    <div className="w-2 h-2 rounded-full bg-primary" />
                     <span>화면에서 사용 ({columnMappings.length}개)</span>
                   </div>
                 </div>
@@ -996,8 +996,8 @@ function TableColumnAccordion({
                     
                     if (isUsed) {
                       baseClass = isSelected
-                        ? "bg-blue-100 border-blue-300"
-                        : "bg-blue-50 border-blue-200 hover:bg-blue-100 hover:border-blue-300";
+                        ? "bg-primary/10 border-primary/40"
+                        : "bg-primary/10 border-primary/20 hover:bg-primary/10 hover:border-primary/40";
                       if (isJoinKey) {
                         leftBorderClass = "border-l-4 border-l-orange-500";
                       } else if (isFilterKey) {
@@ -1005,16 +1005,16 @@ function TableColumnAccordion({
                       }
                     } else if (isJoinKey) {
                       baseClass = isSelected
-                        ? "bg-orange-100 border-orange-400"
-                        : "bg-orange-50 border-orange-200 hover:bg-orange-100 hover:border-orange-300";
+                        ? "bg-amber-100 border-orange-400"
+                        : "bg-amber-50 border-orange-200 hover:bg-amber-100 hover:border-orange-300";
                     } else if (isFilterKey) {
                       baseClass = isSelected
                         ? "bg-purple-100 border-purple-400"
                         : "bg-purple-50 border-purple-200 hover:bg-purple-100 hover:border-purple-300";
                     } else {
                       baseClass = isSelected
-                        ? "bg-gray-100 border-gray-400"
-                        : "bg-gray-50 border-gray-200 hover:bg-gray-100";
+                        ? "bg-muted border-input"
+                        : "bg-muted border-border hover:bg-muted";
                     }
                     
                     return (
@@ -1032,10 +1032,10 @@ function TableColumnAccordion({
                         className={`flex items-center justify-between gap-2 text-xs rounded px-2 py-1.5 border transition-all cursor-pointer ${baseClass} ${leftBorderClass} ${isDragging ? "opacity-50 scale-95" : ""} ${canDrag ? "cursor-grab active:cursor-grabbing" : ""}`}
                       >
                         <span className={`font-medium truncate flex-1 min-w-0 ${
-                          isUsed ? "text-blue-700"
+                          isUsed ? "text-primary"
                           : isJoinKey ? "text-orange-800"
                           : isFilterKey ? "text-purple-800"
-                          : "text-gray-500"
+                          : "text-muted-foreground"
                         }`}>
                           {col.displayName || col.columnName}
                         </span>
@@ -1047,7 +1047,7 @@ function TableColumnAccordion({
                             <Badge variant="outline" className="h-4 px-1 text-[8px] bg-orange-200 text-orange-700 border-orange-300">조인</Badge>
                           )}
                           {isUsed && (
-                            <Badge className="text-white text-[8px] px-1 py-0 h-4 bg-blue-500">필드</Badge>
+                            <Badge className="text-white text-[8px] px-1 py-0 h-4 bg-primary">필드</Badge>
                           )}
                           <span className="text-muted-foreground text-[10px] w-20 truncate text-right" title={col.dataType}>
                             {col.dataType?.split("(")[0]}
@@ -1074,21 +1074,21 @@ function TableColumnAccordion({
                     
                     return (
                       <div className="space-y-3">
-                        <div className="text-xs font-medium text-gray-700">컬럼 설정</div>
+                        <div className="text-xs font-medium text-foreground">컬럼 설정</div>
                         
                         {/* 화면 필드 정보 (필드인 경우만) */}
                         {isUsed && (
                           <>
                             <div className="space-y-1">
                               <span className="text-[10px] text-muted-foreground">화면 필드</span>
-                              <div className="text-sm font-medium text-blue-700">
+                              <div className="text-sm font-medium text-primary">
                                 {selectedColumn?.displayName || selectedMapping?.columnName || editingField}
                               </div>
                             </div>
                             
                             <div className="space-y-1">
                               <span className="text-[10px] text-muted-foreground">현재 컬럼</span>
-                              <div className="text-sm font-mono text-gray-600">
+                              <div className="text-sm font-mono text-muted-foreground">
                                 {selectedMapping?.columnName || "-"}
                               </div>
                             </div>
@@ -1134,7 +1134,7 @@ function TableColumnAccordion({
                             <Button
                               variant="outline"
                               size="sm"
-                              className="w-full h-7 text-xs text-red-600 border-red-300 hover:bg-red-50"
+                              className="w-full h-7 text-xs text-destructive border-destructive/30 hover:bg-destructive/10"
                               onClick={() => {
                                 if (selectedMapping && onColumnChange) {
                                   onColumnChange(selectedMapping.fieldLabel!, selectedMapping.columnName, "__REMOVE_FIELD__");
@@ -1166,7 +1166,7 @@ function TableColumnAccordion({
                             <Button
                               variant="outline"
                               size="sm"
-                              className="w-full h-7 text-xs text-blue-600 border-blue-300 hover:bg-blue-50"
+                              className="w-full h-7 text-xs text-primary border-primary/40 hover:bg-primary/10"
                               onClick={() => {
                                 if (selectedColumn?.columnName && onColumnChange) {
                                   onColumnChange("__NEW_FIELD__", "", selectedColumn.columnName);
@@ -1185,19 +1185,19 @@ function TableColumnAccordion({
                         <div className="space-y-2 pt-2 border-t border-orange-200">
                           <div className="flex items-center justify-between">
                             <div className="flex items-center gap-1">
-                              <Badge variant="outline" className={`h-4 px-1 text-[8px] ${hasJoinSetting ? "bg-orange-200 text-orange-700 border-orange-300" : "bg-gray-100 text-gray-600 border-gray-300"}`}>
+                              <Badge variant="outline" className={`h-4 px-1 text-[8px] ${hasJoinSetting ? "bg-orange-200 text-orange-700 border-orange-300" : "bg-muted text-muted-foreground border-input"}`}>
                                 조인
                               </Badge>
-                              <span className={`text-[10px] font-medium ${hasJoinSetting ? "text-orange-700" : "text-gray-600"}`}>
+                              <span className={`text-[10px] font-medium ${hasJoinSetting ? "text-orange-700" : "text-muted-foreground"}`}>
                                 {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? "연결 편집" : (hasJoinSetting ? "연결 정보" : "연결 설정")}
                               </span>
                             </div>
                             {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? (
                               <div className="flex gap-1">
-                                <Button variant="ghost" size="sm" className="h-5 px-1.5 text-[10px] text-gray-500 hover:text-gray-700" onClick={() => setEditingJoin(null)}>
+                                <Button variant="ghost" size="sm" className="h-5 px-1.5 text-[10px] text-muted-foreground hover:text-foreground" onClick={() => setEditingJoin(null)}>
                                   취소
                                 </Button>
-                                <Button size="sm" className="h-5 px-1.5 text-[10px] bg-orange-500 hover:bg-orange-600 text-white" onClick={handleSaveJoinSetting} disabled={!editingJoin.referenceTable || !editingJoin.referenceColumn || savingJoinSetting}>
+                                <Button size="sm" className="h-5 px-1.5 text-[10px] bg-amber-500 hover:bg-orange-600 text-white" onClick={handleSaveJoinSetting} disabled={!editingJoin.referenceTable || !editingJoin.referenceColumn || savingJoinSetting}>
                                   {savingJoinSetting ? "..." : "저장"}
                                 </Button>
                               </div>
@@ -1205,7 +1205,7 @@ function TableColumnAccordion({
                               <Button
                                 variant="ghost"
                                 size="sm"
-                                className={`h-5 px-1 text-[10px] ${hasJoinSetting ? "text-orange-600 hover:text-orange-800" : "text-gray-500 hover:text-gray-700"}`}
+                                className={`h-5 px-1 text-[10px] ${hasJoinSetting ? "text-amber-600 hover:text-orange-800" : "text-muted-foreground hover:text-foreground"}`}
                                 onClick={() => startEditingJoin(
                                   selectedColumn?.columnName || editingField,
                                   isJoinKey && joinRef ? joinRef.refTable : (selectedColumn?.referenceTable || ""),
@@ -2190,21 +2190,21 @@ function OverviewTab({
     <div className="space-y-6">
       {/* 기본 정보 카드 */}
       <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
-        <div className="rounded-lg border bg-blue-50 p-4">
-          <div className="text-2xl font-bold text-blue-600">{stats.tableCount}</div>
-          <div className="text-xs text-blue-700">연결된 테이블</div>
+        <div className="rounded-lg border bg-primary/10 p-4">
+          <div className="text-2xl font-bold text-primary">{stats.tableCount}</div>
+          <div className="text-xs text-primary">연결된 테이블</div>
         </div>
         <div className="rounded-lg border bg-purple-50 p-4">
           <div className="text-2xl font-bold text-purple-600">{stats.fieldCount}</div>
           <div className="text-xs text-purple-700">필드 매핑</div>
         </div>
-        <div className="rounded-lg border bg-orange-50 p-4">
-          <div className="text-2xl font-bold text-orange-600">{stats.joinCount}</div>
+        <div className="rounded-lg border bg-amber-50 p-4">
+          <div className="text-2xl font-bold text-amber-600">{stats.joinCount}</div>
           <div className="text-xs text-orange-700">조인 설정</div>
         </div>
-        <div className="rounded-lg border bg-green-50 p-4">
-          <div className="text-2xl font-bold text-green-600">{stats.filterCount}</div>
-          <div className="text-xs text-green-700">필터 컬럼</div>
+        <div className="rounded-lg border bg-emerald-50 p-4">
+          <div className="text-2xl font-bold text-emerald-600">{stats.filterCount}</div>
+          <div className="text-xs text-emerald-700">필터 컬럼</div>
         </div>
         <div className="rounded-lg border bg-pink-50 p-4">
           <div className="text-2xl font-bold text-pink-600">{stats.flowCount}</div>
@@ -2216,7 +2216,7 @@ function OverviewTab({
       <div className="space-y-2">
         <div className="flex items-center justify-between">
           <h3 className="flex items-center gap-2 text-sm font-semibold">
-            <Database className="h-4 w-4 text-blue-500" />
+            <Database className="h-4 w-4 text-primary" />
             메인 테이블
           </h3>
         </div>
@@ -2532,9 +2532,9 @@ function FieldMappingTab({
                 className="rounded-lg border bg-white overflow-hidden"
               >
                 {/* 컴포넌트 헤더 */}
-                <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b">
+                <div className="flex items-center justify-between px-3 py-2 bg-muted border-b">
                   <div className="flex items-center gap-2">
-                    <Table2 className="h-4 w-4 text-blue-500" />
+                    <Table2 className="h-4 w-4 text-primary" />
                     <span className="text-sm font-medium">
                       {comp.componentLabel || comp.componentKind}
                     </span>
@@ -2550,7 +2550,7 @@ function FieldMappingTab({
                 {/* 필드 → 컬럼 매핑 테이블 */}
                 <div className="divide-y">
                   {/* 테이블 헤더 */}
-                  <div className="grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 bg-gray-100 text-[10px] font-medium text-gray-500 uppercase">
+                  <div className="grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 bg-muted text-[10px] font-medium text-muted-foreground uppercase">
                     <span>필드명 (화면 표시)</span>
                     <span></span>
                     <span>컬럼명 (데이터베이스)</span>
@@ -2567,16 +2567,16 @@ function FieldMappingTab({
                         key={cIdx}
                         className={cn(
                           "grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 items-center text-xs",
-                          isJoinColumn && "bg-orange-50"
+                          isJoinColumn && "bg-amber-50"
                         )}
                       >
                         {/* 필드명 (화면 표시) */}
                         <div className="flex items-center gap-1.5 min-w-0">
-                          <span className="font-medium text-gray-900 truncate">
+                          <span className="font-medium text-foreground truncate">
                             {displayName}
                           </span>
                           {isJoinColumn && (
-                            <Badge variant="outline" className="text-[9px] bg-orange-100 text-orange-700 px-1 py-0 flex-shrink-0">
+                            <Badge variant="outline" className="text-[9px] bg-amber-100 text-orange-700 px-1 py-0 flex-shrink-0">
                               조인
                             </Badge>
                           )}
@@ -2584,7 +2584,7 @@ function FieldMappingTab({
                         
                         {/* 화살표 */}
                         <div className="flex justify-center">
-                          <ArrowRight className="h-3 w-3 text-gray-400" />
+                          <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
                         </div>
                         
                         {/* 컬럼명 (데이터베이스) */}
@@ -2604,12 +2604,12 @@ function FieldMappingTab({
                               <button
                                 className={cn(
                                   "flex items-center gap-1 px-2 py-0.5 rounded text-left min-w-0",
-                                  "hover:bg-blue-50 border border-transparent hover:border-blue-300",
+                                  "hover:bg-primary/10 border border-transparent hover:border-primary/40",
                                   "transition-colors cursor-pointer group"
                                 )}
                               >
-                                <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
-                                <Pencil className="h-3 w-3 text-gray-400 group-hover:text-blue-500 flex-shrink-0" />
+                                <code className="text-primary font-mono text-[11px] truncate">{col}</code>
+                                <Pencil className="h-3 w-3 text-muted-foreground/70 group-hover:text-primary flex-shrink-0" />
                               </button>
                             </PopoverTrigger>
                             <PopoverContent className="w-64 p-0" align="start">
@@ -2644,7 +2644,7 @@ function FieldMappingTab({
                                           <div className="flex flex-col">
                                             <span className={cn(
                                               "font-medium",
-                                              tableCol.columnName === col && "text-blue-600"
+                                              tableCol.columnName === col && "text-primary"
                                             )}>
                                               {tableCol.displayName || tableCol.columnName}
                                             </span>
@@ -2655,7 +2655,7 @@ function FieldMappingTab({
                                             )}
                                           </div>
                                           {tableCol.columnName === col && (
-                                            <Check className="ml-auto h-3 w-3 text-blue-600" />
+                                            <Check className="ml-auto h-3 w-3 text-primary" />
                                           )}
                                         </CommandItem>
                                       ))
@@ -2666,7 +2666,7 @@ function FieldMappingTab({
                             </PopoverContent>
                           </Popover>
                         ) : (
-                          <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
+                          <code className="text-primary font-mono text-[11px] truncate">{col}</code>
                         )}
                       </div>
                     );
@@ -2712,12 +2712,12 @@ function FieldMappingTab({
                       {idx + 1}
                     </TableCell>
                     <TableCell className="text-xs font-medium">
-                      <Badge variant="outline" className="bg-blue-50 text-blue-700">
+                      <Badge variant="outline" className="bg-primary/10 text-primary">
                         {mainTable}.{mapping.targetField}
                       </Badge>
                     </TableCell>
                     <TableCell className="text-center">
-                      <ArrowRight className="mx-auto h-3 w-3 text-gray-400" />
+                      <ArrowRight className="mx-auto h-3 w-3 text-muted-foreground/70" />
                     </TableCell>
                     <TableCell className="text-xs">
                       <Badge variant="outline" className="bg-purple-50 text-purple-700">
@@ -2725,7 +2725,7 @@ function FieldMappingTab({
                       </Badge>
                     </TableCell>
                     <TableCell className="text-xs">
-                      <Badge variant="outline" className="bg-green-50 text-green-700">
+                      <Badge variant="outline" className="bg-emerald-50 text-emerald-700">
                         {mapping.sourceField}
                       </Badge>
                     </TableCell>
@@ -2747,10 +2747,10 @@ function FieldMappingTab({
                   <Badge
                     key={type}
                     variant="outline"
-                    className="gap-1 bg-gray-50"
+                    className="gap-1 bg-muted"
                   >
                     {type}
-                    <span className="rounded-full bg-gray-200 px-1.5 text-[10px]">
+                    <span className="rounded-full bg-muted/80 px-1.5 text-[10px]">
                       {groupedMappings[type].length}
                     </span>
                   </Badge>
@@ -3003,8 +3003,8 @@ function DataFlowTab({
                       variant="outline"
                       className={cn(
                         "text-xs",
-                        flow.flow_type === "forward" && "bg-blue-50 text-blue-700",
-                        flow.flow_type === "return" && "bg-green-50 text-green-700",
+                        flow.flow_type === "forward" && "bg-primary/10 text-primary",
+                        flow.flow_type === "return" && "bg-emerald-50 text-emerald-700",
                         flow.flow_type === "broadcast" && "bg-purple-50 text-purple-700"
                       )}
                     >
@@ -3693,12 +3693,12 @@ function ControlManagementTab({
     switch (type) {
       case "save":
       case "quickInsert":
-        return "bg-green-100 text-green-700 hover:bg-green-100 hover:text-green-700";
+        return "bg-emerald-100 text-emerald-700 hover:bg-emerald-100 hover:text-emerald-700";
       case "delete":
-        return "bg-red-100 text-red-700 hover:bg-red-100 hover:text-red-700";
+        return "bg-destructive/10 text-destructive hover:bg-destructive/10 hover:text-destructive";
       case "edit":
       case "copy":
-        return "bg-blue-100 text-blue-700 hover:bg-blue-100 hover:text-blue-700";
+        return "bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary";
       case "modal":
       case "openModalWithData":
       case "openRelatedModal":
@@ -3714,7 +3714,7 @@ function ControlManagementTab({
       case "view_table_history":
         return "bg-slate-100 text-slate-700 hover:bg-slate-100 hover:text-slate-700";
       default:
-        return "bg-gray-100 text-gray-700 hover:bg-gray-100 hover:text-gray-700";
+        return "bg-muted text-foreground hover:bg-muted hover:text-foreground";
     }
   };
 
@@ -3729,11 +3729,11 @@ function ControlManagementTab({
   return (
     <div className="space-y-6">
       {/* 버튼 액션 설정 - 구분된 섹션 */}
-      <div className="rounded-lg border border-blue-200 bg-blue-50/30">
-        <div className="flex items-center gap-2 px-3 py-2 border-b border-blue-200 bg-blue-100/50 rounded-t-lg">
-          <MousePointer className="h-4 w-4 text-blue-600" />
-          <span className="text-sm font-semibold text-blue-900">버튼 액션 설정</span>
-          <Badge className="h-5 text-[10px] bg-blue-600 text-white hover:bg-blue-600">
+      <div className="rounded-lg border border-primary/20 bg-primary/10/30">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-primary/20 bg-primary/10/50 rounded-t-lg">
+          <MousePointer className="h-4 w-4 text-primary" />
+          <span className="text-sm font-semibold text-primary">버튼 액션 설정</span>
+          <Badge className="h-5 text-[10px] bg-primary text-white hover:bg-primary">
             {buttonControls.length}개
           </Badge>
         </div>
@@ -3880,7 +3880,7 @@ function ControlManagementTab({
                                 ...prev,
                                 [btn.id]: { ...prev[btn.id], backgroundColor: preset.bg, textColor: preset.text }
                               }))}
-                              className="h-5 w-5 rounded border border-gray-300 hover:ring-2 hover:ring-blue-300 transition-all"
+                              className="h-5 w-5 rounded border border-input hover:ring-2 hover:ring-blue-300 transition-all"
                               style={{ backgroundColor: preset.bg }}
                               title={preset.name}
                             />
@@ -4094,7 +4094,7 @@ function ControlManagementTab({
                               {currentFlows.map((lf: { id: number; name: string; timing?: string }, idx: number) => (
                                 <div key={lf.id} className="flex items-center gap-2 p-1.5 border rounded-md bg-muted/30">
                                   <Workflow className="h-3 w-3 text-purple-500 shrink-0" />
-                                  <span className="text-xs font-medium text-gray-700 flex-1 truncate">
+                                  <span className="text-xs font-medium text-foreground flex-1 truncate">
                                     {lf.name}
                                   </span>
                                   {/* 타이밍 선택 */}
@@ -4120,7 +4120,7 @@ function ControlManagementTab({
                                   {/* 삭제 버튼 */}
                                   <button
                                     type="button"
-                                    className="h-5 w-5 rounded hover:bg-red-100 flex items-center justify-center text-gray-400 hover:text-red-500"
+                                    className="h-5 w-5 rounded hover:bg-destructive/10 flex items-center justify-center text-muted-foreground/70 hover:text-destructive"
                                     onClick={() => {
                                       const newFlows = currentFlows.filter((f: any) => f.id !== lf.id);
                                       setEditedValues(prev => ({ 
@@ -4236,7 +4236,7 @@ function ControlManagementTab({
           <Badge className="h-5 text-[10px] bg-purple-600 text-white hover:bg-purple-600">
             {flows.length}개 플로우
           </Badge>
-          <Badge className="h-5 text-[10px] bg-green-600 text-white hover:bg-green-600">
+          <Badge className="h-5 text-[10px] bg-emerald-600 text-white hover:bg-emerald-600">
             {buttonControls.filter(b => (b.linkedFlows && b.linkedFlows.length > 0) || b.linkedFlow).length}개 연동
           </Badge>
           <span className="flex-1" />
@@ -4285,7 +4285,7 @@ function ControlManagementTab({
                   <div key={`flow-list-${flow.flowId}`} className="flex items-center gap-2 px-2 py-1.5 rounded bg-white/50 hover:bg-white">
                     {/* 플로우 이름 - 일반 텍스트 */}
                     <Workflow className="h-3.5 w-3.5 text-purple-500 shrink-0" />
-                    <span className="text-xs font-medium text-gray-700 shrink-0">
+                    <span className="text-xs font-medium text-foreground shrink-0">
                       {flow.flowName}
                     </span>
                     {tableName && (
@@ -4302,8 +4302,8 @@ function ControlManagementTab({
                           const timing = flowInfo?.timing || btn.flowTiming || "after";
                           return (
                             <div key={`${flow.flowId}-${btn.id}`} className="flex items-center gap-1">
-                              {idx === 0 && <ArrowRight className="h-3 w-3 text-green-500" />}
-                              <span className="text-xs text-green-600 font-medium">
+                              {idx === 0 && <ArrowRight className="h-3 w-3 text-emerald-500" />}
+                              <span className="text-xs text-emerald-600 font-medium">
                                 [{btn.label}]
                               </span>
                               <Badge className={cn("h-4 text-[9px]", getActionTypeColor(btn.actionType))}>
@@ -4406,7 +4406,7 @@ function ControlManagementTab({
                                   className="text-xs"
                                 >
                                   <Check className={cn("mr-2 h-3 w-3", quickFlowData.tableName === table ? "opacity-100" : "opacity-0")} />
-                                  <Database className="mr-2 h-3 w-3 text-blue-500" />
+                                  <Database className="mr-2 h-3 w-3 text-primary" />
                                   {table}
                                 </CommandItem>
                               ))}
@@ -4440,9 +4440,9 @@ function ControlManagementTab({
               <Label className="text-xs sm:text-sm">액션 타입</Label>
               <div className="flex gap-2 mt-2">
                 {[
-                  { value: "insert", label: "INSERT", color: "bg-green-100 text-green-700 border-green-300" },
-                  { value: "update", label: "UPDATE", color: "bg-blue-100 text-blue-700 border-blue-300" },
-                  { value: "delete", label: "DELETE", color: "bg-red-100 text-red-700 border-red-300" },
+                  { value: "insert", label: "INSERT", color: "bg-emerald-100 text-emerald-700 border-green-300" },
+                  { value: "update", label: "UPDATE", color: "bg-primary/10 text-primary border-primary/40" },
+                  { value: "delete", label: "DELETE", color: "bg-destructive/10 text-destructive border-destructive/30" },
                 ].map((action) => (
                   <button
                     key={action.value}
@@ -4452,7 +4452,7 @@ function ControlManagementTab({
                       "flex-1 py-2 px-3 text-xs font-medium rounded-md border transition-all",
                       quickFlowData.actionType === action.value
                         ? action.color + " ring-2 ring-offset-1"
-                        : "bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100"
+                        : "bg-muted text-muted-foreground border-border hover:bg-muted"
                     )}
                   >
                     {action.label}
@@ -4480,7 +4480,7 @@ function ControlManagementTab({
                   id="autoLink"
                   checked={quickFlowData.autoLink}
                   onChange={(e) => setQuickFlowData(prev => ({ ...prev, autoLink: e.target.checked }))}
-                  className="h-4 w-4 rounded border-gray-300"
+                  className="h-4 w-4 rounded border-input"
                 />
                 <label htmlFor="autoLink" className="text-xs text-purple-700">
                   생성 후 [{buttonControls.find(b => b.id === quickFlowData.targetButtonId)?.label}] 버튼에 자동 연동
@@ -4712,7 +4712,7 @@ function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWi
       {/* 상단 툴바 (최소화) */}
       <div className="flex h-7 shrink-0 items-center justify-between border-b px-2">
         <div className="flex items-center gap-1.5">
-          <Eye className="h-3 w-3 text-blue-500" />
+          <Eye className="h-3 w-3 text-primary" />
           <span className="truncate text-xs font-medium">{screenName}</span>
           <span className="text-[10px] text-muted-foreground">(휠: 확대/축소, 드래그: 이동)</span>
         </div>
@@ -4741,7 +4741,7 @@ function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWi
       {/* iframe 영역 - Ctrl+휠로 확대/축소, 내부 버튼/목록 클릭 가능 */}
       <div 
         ref={containerRef} 
-        className="relative min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-gray-100"
+        className="relative min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-muted"
       >
         {loading && (
           <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80">
diff --git a/frontend/components/screen/SimpleScreenDesigner.tsx b/frontend/components/screen/SimpleScreenDesigner.tsx
index d748bb8c..19d81b37 100644
--- a/frontend/components/screen/SimpleScreenDesigner.tsx
+++ b/frontend/components/screen/SimpleScreenDesigner.tsx
@@ -185,7 +185,7 @@ export default function SimpleScreenDesigner({ selectedScreen, onBackToList }: S
   }
 
   return (
-    <div className="flex h-screen w-full flex-col bg-gray-100">
+    <div className="flex h-screen w-full flex-col bg-muted">
       {/* 상단 툴바 */}
       <DesignerToolbar
         screenName={selectedScreen?.screenName}
@@ -203,23 +203,23 @@ export default function SimpleScreenDesigner({ selectedScreen, onBackToList }: S
       />
 
       {/* 간단한 컨트롤 버튼들 */}
-      <div className="border-b border-gray-300 bg-white p-4">
+      <div className="border-b border-input bg-white p-4">
         <div className="flex gap-2">
-          <button onClick={handleAddText} className="rounded bg-accent0 px-3 py-1 text-white hover:bg-blue-600">
+          <button onClick={handleAddText} className="rounded bg-accent0 px-3 py-1 text-white hover:bg-primary">
             텍스트 추가
           </button>
-          <button onClick={handleAddContainer} className="rounded bg-green-500 px-3 py-1 text-white hover:bg-green-600">
+          <button onClick={handleAddContainer} className="rounded bg-emerald-500 px-3 py-1 text-white hover:bg-emerald-600">
             컨테이너 추가
           </button>
         </div>
       </div>
 
       {/* 메인 캔버스 영역 */}
-      <div className="relative flex-1 overflow-auto bg-gray-100 p-8">
+      <div className="relative flex-1 overflow-auto bg-muted p-8">
         {/* 해상도 정보 표시 */}
         <div className="mb-4 flex items-center justify-center">
           <div className="rounded-lg border bg-white px-4 py-2 shadow-sm">
-            <span className="text-sm font-medium text-gray-700">
+            <span className="text-sm font-medium text-foreground">
               {screenResolution.name} ({screenResolution.width} × {screenResolution.height})
             </span>
           </div>
diff --git a/frontend/components/screen/StyleEditor.tsx b/frontend/components/screen/StyleEditor.tsx
index 3add842c..b768e107 100644
--- a/frontend/components/screen/StyleEditor.tsx
+++ b/frontend/components/screen/StyleEditor.tsx
@@ -53,13 +53,13 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
     <div className={`space-y-2 ${className}`}>
       {/* 테두리 섹션 */}
       <Collapsible open={openSections.border} onOpenChange={() => toggleSection("border")}>
-        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-50 px-2 py-1.5 hover:bg-gray-100">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-muted px-2 py-1.5 hover:bg-muted">
           <div className="flex items-center gap-1.5">
             <Square className="text-primary h-3 w-3" />
             <span className="text-xs font-medium">테두리</span>
           </div>
           <ChevronDown
-            className={`h-3 w-3 text-gray-500 transition-transform ${openSections.border ? "rotate-180" : ""}`}
+            className={`h-3 w-3 text-muted-foreground transition-transform ${openSections.border ? "rotate-180" : ""}`}
           />
         </CollapsibleTrigger>
         <CollapsibleContent className="pt-2">
@@ -142,13 +142,13 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
 
       {/* 배경 섹션 */}
       <Collapsible open={openSections.background} onOpenChange={() => toggleSection("background")}>
-        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-50 px-2 py-1.5 hover:bg-gray-100">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-muted px-2 py-1.5 hover:bg-muted">
           <div className="flex items-center gap-1.5">
             <Palette className="text-primary h-3 w-3" />
             <span className="text-xs font-medium">배경</span>
           </div>
           <ChevronDown
-            className={`h-3 w-3 text-gray-500 transition-transform ${openSections.background ? "rotate-180" : ""}`}
+            className={`h-3 w-3 text-muted-foreground transition-transform ${openSections.background ? "rotate-180" : ""}`}
           />
         </CollapsibleTrigger>
         <CollapsibleContent className="pt-2">
@@ -186,13 +186,13 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
 
       {/* 텍스트 섹션 */}
       <Collapsible open={openSections.text} onOpenChange={() => toggleSection("text")}>
-        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-50 px-2 py-1.5 hover:bg-gray-100">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-muted px-2 py-1.5 hover:bg-muted">
           <div className="flex items-center gap-1.5">
             <Type className="text-primary h-3 w-3" />
             <span className="text-xs font-medium">텍스트</span>
           </div>
           <ChevronDown
-            className={`h-3 w-3 text-gray-500 transition-transform ${openSections.text ? "rotate-180" : ""}`}
+            className={`h-3 w-3 text-muted-foreground transition-transform ${openSections.text ? "rotate-180" : ""}`}
           />
         </CollapsibleTrigger>
         <CollapsibleContent className="pt-2">
diff --git a/frontend/components/screen/TableSettingModal.tsx b/frontend/components/screen/TableSettingModal.tsx
index c176c25c..3ac40c13 100644
--- a/frontend/components/screen/TableSettingModal.tsx
+++ b/frontend/components/screen/TableSettingModal.tsx
@@ -652,7 +652,7 @@ export function TableSettingModal({
           {/* 헤더 */}
           <div className="flex flex-shrink-0 items-center justify-between border-b pb-2 px-3 pt-2">
             <div className="flex items-center gap-2">
-              <Table2 className="h-4 w-4 text-green-500" />
+              <Table2 className="h-4 w-4 text-emerald-500" />
               <span className="text-sm font-medium">{tableLabel || tableName}</span>
               {tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
                 <span className="text-xs text-muted-foreground">({tableName})</span>
@@ -803,7 +803,7 @@ export function TableSettingModal({
         <DialogHeader className="flex-shrink-0">
           <div className="flex items-center justify-between">
             <DialogTitle className="flex items-center gap-2 text-lg">
-              <Table2 className="h-5 w-5 text-green-500" />
+              <Table2 className="h-5 w-5 text-emerald-500" />
               테이블 설정: {tableLabel || tableName}
               {tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
                 <span className="text-sm font-normal text-muted-foreground">
@@ -1057,7 +1057,7 @@ function ColumnListTab({
                   className={cn(
                     "cursor-pointer rounded-lg border p-3 transition-colors",
                     isSelected
-                      ? "border-green-300 bg-green-50"
+                      ? "border-green-300 bg-emerald-50"
                       : "border-transparent bg-background hover:bg-muted/50"
                   )}
                 >
@@ -1072,14 +1072,14 @@ function ColumnListTab({
                     </div>
                     <div className="flex gap-1">
                       {col.isPK && (
-                        <Badge variant="outline" className="bg-orange-100 text-orange-700 text-[10px] px-1.5">
+                        <Badge variant="outline" className="bg-amber-100 text-orange-700 text-[10px] px-1.5">
                           <Key className="mr-0.5 h-2.5 w-2.5" />
                           PK
                         </Badge>
                       )}
                       {/* 엔티티 타입이거나 referenceTable이 설정되어 있으면 조인 배지 표시 (FK와 동일 의미) */}
                       {(inputType === "entity" || edited.referenceTable || col.referenceTable) && (
-                        <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
+                        <Badge variant="outline" className="bg-primary/10 text-primary text-[10px] px-1.5">
                           <Link2 className="mr-0.5 h-2.5 w-2.5" />
                           조인
                         </Badge>
@@ -1134,7 +1134,7 @@ function ColumnDetailPanel({
       {/* 헤더 */}
       <div className="flex-shrink-0 border-b pb-4">
         <div className="flex items-center gap-2">
-          <Settings2 className="h-5 w-5 text-green-500" />
+          <Settings2 className="h-5 w-5 text-emerald-500" />
           <h3 className="text-lg font-semibold">컬럼 설정</h3>
         </div>
         <div className="mt-2 flex items-center gap-2">
@@ -1143,13 +1143,13 @@ function ColumnDetailPanel({
           </span>
           <span className="text-xs text-muted-foreground">{columnInfo.dataType}</span>
           {columnInfo.isPK && (
-            <Badge variant="outline" className="bg-orange-100 text-orange-700 text-[10px]">
+            <Badge variant="outline" className="bg-amber-100 text-orange-700 text-[10px]">
               Primary Key
             </Badge>
           )}
           {/* 엔티티 타입이거나 referenceTable이 있으면 조인 배지 표시 */}
           {(currentInputType === "entity" || currentRefTable) && (
-            <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px]">
+            <Badge variant="outline" className="bg-primary/10 text-primary text-[10px]">
               조인
             </Badge>
           )}
@@ -1333,7 +1333,7 @@ function ScreensTab({ screensUsingTable, loading }: ScreensTabProps) {
               className="flex items-center justify-between rounded-lg border bg-background p-3 hover:bg-muted/50"
             >
               <div className="flex items-center gap-3">
-                <Monitor className="h-4 w-4 text-blue-500" />
+                <Monitor className="h-4 w-4 text-primary" />
                 <div>
                   <p className="text-sm font-medium">{screen.screenName}</p>
                   {screen.screenCode && (
@@ -1349,10 +1349,10 @@ function ScreensTab({ screensUsingTable, loading }: ScreensTabProps) {
                   className={cn(
                     "text-[10px]",
                     screen.tableRole === "main"
-                      ? "bg-blue-100 text-blue-700"
+                      ? "bg-primary/10 text-primary"
                       : screen.tableRole === "filter"
                       ? "bg-purple-100 text-purple-700"
-                      : "bg-orange-100 text-orange-700"
+                      : "bg-amber-100 text-orange-700"
                   )}
                 >
                   {screen.tableRole === "main"
@@ -1405,7 +1405,7 @@ function ReferenceTab({
       {/* 이 테이블이 참조하는 테이블 */}
       <div className="space-y-2">
         <h3 className="flex items-center gap-2 text-sm font-semibold">
-          <ArrowRight className="h-4 w-4 text-orange-500" />
+          <ArrowRight className="h-4 w-4 text-amber-500" />
           이 테이블이 참조하는 테이블 ({joinColumnRefs.length}개)
         </h3>
         {joinColumnRefs.length > 0 ? (
@@ -1413,9 +1413,9 @@ function ReferenceTab({
             {joinColumnRefs.map((ref, idx) => (
               <div
                 key={idx}
-                className="flex items-center gap-3 rounded-lg border bg-orange-50/50 p-3"
+                className="flex items-center gap-3 rounded-lg border bg-amber-50/50 p-3"
               >
-                <Badge variant="outline" className="bg-orange-100 text-orange-700">
+                <Badge variant="outline" className="bg-amber-100 text-orange-700">
                   {ref.column}
                 </Badge>
                 <ArrowRight className="h-4 w-4 text-muted-foreground" />
@@ -1438,7 +1438,7 @@ function ReferenceTab({
       {/* 이 테이블을 참조하는 테이블 */}
       <div className="space-y-2">
         <h3 className="flex items-center gap-2 text-sm font-semibold">
-          <Eye className="h-4 w-4 text-green-500" />
+          <Eye className="h-4 w-4 text-emerald-500" />
           이 테이블을 참조하는 테이블 ({referencedBy.length}개)
         </h3>
         {referencedBy.length > 0 ? (
@@ -1446,7 +1446,7 @@ function ReferenceTab({
             {referencedBy.map((ref, idx) => (
               <div
                 key={idx}
-                className="flex items-center gap-3 rounded-lg border bg-green-50/50 p-3"
+                className="flex items-center gap-3 rounded-lg border bg-emerald-50/50 p-3"
               >
                 <div className="flex-1">
                   <span className="font-medium">
@@ -1455,7 +1455,7 @@ function ReferenceTab({
                   <span className="text-muted-foreground">.{ref.fromColumn}</span>
                 </div>
                 <ArrowRight className="h-4 w-4 text-muted-foreground" />
-                <Badge variant="outline" className="bg-green-100 text-green-700">
+                <Badge variant="outline" className="bg-emerald-100 text-emerald-700">
                   {ref.toColumn}
                 </Badge>
               </div>
diff --git a/frontend/components/screen/TableTypeSelector.tsx b/frontend/components/screen/TableTypeSelector.tsx
index c6757d92..4a52cdc6 100644
--- a/frontend/components/screen/TableTypeSelector.tsx
+++ b/frontend/components/screen/TableTypeSelector.tsx
@@ -194,7 +194,7 @@ export default function TableTypeSelector({
         </CardHeader>
         <CardContent className="space-y-3">
           <div className="relative">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <Input
               placeholder="테이블명으로 검색..."
               value={searchTerm}
@@ -215,7 +215,7 @@ export default function TableTypeSelector({
                 <Database className="mr-2 h-3 w-3" />
                 <div className="flex flex-col items-start">
                   <span className="font-medium">{table.displayName}</span>
-                  <span className="text-xs text-gray-500">{table.columnCount}개 컬럼</span>
+                  <span className="text-xs text-muted-foreground">{table.columnCount}개 컬럼</span>
                 </div>
               </Button>
             ))}
diff --git a/frontend/components/screen/TemplateManager.tsx b/frontend/components/screen/TemplateManager.tsx
index d61cf1c8..b04a7175 100644
--- a/frontend/components/screen/TemplateManager.tsx
+++ b/frontend/components/screen/TemplateManager.tsx
@@ -282,7 +282,7 @@ export default function TemplateManager({
                 <Card
                   key={template.templateId}
                   className={`cursor-pointer transition-all hover:shadow-md ${
-                    selectedTemplate?.templateId === template.templateId ? "ring-2 ring-blue-500" : ""
+                    selectedTemplate?.templateId === template.templateId ? "ring-2 ring-ring" : ""
                   }`}
                   onClick={() => handleTemplateSelect(template)}
                 >
@@ -334,7 +334,7 @@ export default function TemplateManager({
                               e.stopPropagation();
                               handleTemplateDelete(template.templateId);
                             }}
-                            className="text-destructive hover:text-red-700"
+                            className="text-destructive hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
diff --git a/frontend/components/screen/WidgetFactory.tsx b/frontend/components/screen/WidgetFactory.tsx
index 77b6ab8a..55e16334 100644
--- a/frontend/components/screen/WidgetFactory.tsx
+++ b/frontend/components/screen/WidgetFactory.tsx
@@ -28,11 +28,11 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <Calendar className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Calendar className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="date"
@@ -41,7 +41,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -53,11 +53,11 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <Hash className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Hash className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="text"
@@ -66,7 +66,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 font-mono text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 font-mono text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -78,11 +78,11 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <Database className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Database className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="text"
@@ -91,7 +91,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -103,18 +103,18 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <FileText className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <FileText className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="file"
               onChange={(e) => onChange?.(e.target.files?.[0]?.name || "")}
               required={widget.required}
               disabled={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm file:mr-4 file:rounded-md file:border-0 file:bg-accent file:px-4 file:py-1 file:text-sm file:font-medium file:text-blue-700 hover:file:bg-primary/20 focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 text-sm file:mr-4 file:rounded-md file:border-0 file:bg-accent file:px-4 file:py-1 file:text-sm file:font-medium file:text-primary hover:file:bg-primary/20 focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -127,7 +127,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
       return (
         <div className={`space-y-2 ${className}`}>
           <div className="flex items-center space-x-2">
-            <CheckSquare className="h-4 w-4 text-gray-400" />
+            <CheckSquare className="h-4 w-4 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="checkbox"
@@ -135,12 +135,12 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.checked ? "true" : "false")}
               required={widget.required}
               disabled={widget.readonly}
-              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-blue-500"
+              className="h-4 w-4 rounded border-input text-primary focus:ring-ring"
             />
             {widget.label && (
               <label htmlFor={widget.id} className="text-sm font-medium">
                 {widget.label}
-                {widget.required && <span className="ml-1 text-red-500">*</span>}
+                {widget.required && <span className="ml-1 text-destructive">*</span>}
               </label>
             )}
           </div>
@@ -153,12 +153,12 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="space-y-2">
             <div className="flex items-center space-x-2">
-              <Radio className="h-4 w-4 text-gray-400" />
+              <Radio className="h-4 w-4 text-muted-foreground/70" />
               <input
                 id={`${widget.id}-yes`}
                 name={widget.id}
@@ -168,14 +168,14 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
                 onChange={(e) => onChange?.(e.target.value)}
                 required={widget.required}
                 disabled={widget.readonly}
-                className="h-4 w-4 border-gray-300 text-primary focus:ring-blue-500"
+                className="h-4 w-4 border-input text-primary focus:ring-ring"
               />
               <label htmlFor={`${widget.id}-yes`} className="text-sm">
                 예
               </label>
             </div>
             <div className="flex items-center space-x-2">
-              <Radio className="h-4 w-4 text-gray-400" />
+              <Radio className="h-4 w-4 text-muted-foreground/70" />
               <input
                 id={`${widget.id}-no`}
                 name={widget.id}
@@ -185,7 +185,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
                 onChange={(e) => onChange?.(e.target.value)}
                 required={widget.required}
                 disabled={widget.readonly}
-                className="h-4 w-4 border-gray-300 text-primary focus:ring-blue-500"
+                className="h-4 w-4 border-input text-primary focus:ring-ring"
               />
               <label htmlFor={`${widget.id}-no`} className="text-sm">
                 아니오
@@ -200,9 +200,9 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
 
     default:
       return (
-        <div className={`rounded border border-red-300 bg-destructive/10 p-4 text-destructive ${className}`}>
+        <div className={`rounded border border-destructive/30 bg-destructive/10 p-4 text-destructive ${className}`}>
           <p className="text-sm font-medium">지원하지 않는 위젯 타입</p>
-          <p className="text-xs text-red-500">타입: {widget.widgetType}</p>
+          <p className="text-xs text-destructive">타입: {widget.widgetType}</p>
         </div>
       );
   }
diff --git a/frontend/components/screen/common/ColorPickerWithTransparent.tsx b/frontend/components/screen/common/ColorPickerWithTransparent.tsx
index c0d3bf6f..ff6e32c5 100644
--- a/frontend/components/screen/common/ColorPickerWithTransparent.tsx
+++ b/frontend/components/screen/common/ColorPickerWithTransparent.tsx
@@ -51,7 +51,7 @@ export function ColorPickerWithTransparent({
               backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
             }}
           >
-            <span className="text-[8px] font-bold text-gray-600 bg-white/80 px-0.5 rounded">투명</span>
+            <span className="text-[8px] font-bold text-muted-foreground bg-white/80 px-0.5 rounded">투명</span>
           </div>
         )}
       </div>
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx
index dc991519..51322c3e 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx
@@ -257,8 +257,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 모달 열기 액션 설정 */}
       {localSelects.actionType === "modal" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">모달 설정</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-muted p-4">
+          <h4 className="text-sm font-medium text-foreground">모달 설정</h4>
 
           <div>
             <Label htmlFor="modal-title">모달 제목</Label>
@@ -328,15 +328,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`modal-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -351,7 +351,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
+                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                           </div>
                         </div>
                       ));
@@ -366,8 +366,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 수정 액션 설정 */}
       {localSelects.actionType === "edit" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">수정 설정</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-emerald-50 p-4">
+          <h4 className="text-sm font-medium text-foreground">수정 설정</h4>
 
           <div>
             <Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
@@ -402,15 +402,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`edit-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -431,8 +431,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 복사 액션 설정 */}
       {localSelects.actionType === "copy" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">복사 설정 (품목코드 자동 초기화)</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-primary/10 p-4">
+          <h4 className="text-sm font-medium text-foreground">복사 설정 (품목코드 자동 초기화)</h4>
 
           <div>
             <Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
@@ -467,15 +467,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`edit-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -490,7 +490,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
+                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                           </div>
                         </div>
                       ));
@@ -499,7 +499,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="mt-1 text-xs text-muted-foreground">
               선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
             </p>
           </div>
@@ -539,7 +539,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     onUpdateProperty("webTypeConfig.editModalTitle", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
+                <p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
               </div>
 
               <div>
@@ -555,7 +555,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     onUpdateProperty("webTypeConfig.editModalDescription", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
+                <p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
               </div>
 
               <div>
@@ -586,8 +586,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 페이지 이동 액션 설정 */}
       {localSelects.actionType === "navigate" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">페이지 이동 설정</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-muted p-4">
+          <h4 className="text-sm font-medium text-foreground">페이지 이동 설정</h4>
 
           <div>
             <Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
@@ -622,15 +622,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(navSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`navigate-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setNavScreenOpen(false);
@@ -645,7 +645,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
+                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                           </div>
                         </div>
                       ));
@@ -654,7 +654,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="mt-1 text-xs text-muted-foreground">
               선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
             </p>
           </div>
@@ -671,15 +671,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                 onUpdateProperty("componentConfig.action.targetUrl", newValue);
               }}
             />
-            <p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
+            <p className="mt-1 text-xs text-muted-foreground">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
           </div>
         </div>
       )}
 
       {/* 🔥 NEW: 제어관리 기능 섹션 */}
-      <div className="mt-8 border-t border-gray-200 pt-6">
+      <div className="mt-8 border-t border-border pt-6">
         <div className="mb-4">
-          <h3 className="text-lg font-medium text-gray-900">🔧 고급 기능</h3>
+          <h3 className="text-lg font-medium text-foreground">🔧 고급 기능</h3>
           <p className="text-muted-foreground mt-1 text-sm">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
         </div>
 
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index f4917d62..417ae538 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -1045,7 +1045,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               {modalActionSourceTable &&
                 modalActionTargetTable &&
                 modalActionSourceTable === modalActionTargetTable && (
-                  <div className="rounded-md bg-green-50 p-2 text-xs text-green-700 dark:bg-green-950/30 dark:text-green-400">
+                  <div className="rounded-md bg-emerald-50 p-2 text-xs text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
                     동일한 테이블입니다. 컬럼명이 같은 필드는 자동으로 매핑됩니다.
                   </div>
                 )}
@@ -1313,9 +1313,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                       {/* 블록 타입 표시 */}
                       <div className="mt-1 flex-shrink-0">
                         {block.type === "text" ? (
-                          <Type className="h-4 w-4 text-blue-500" />
+                          <Type className="h-4 w-4 text-primary" />
                         ) : (
-                          <Database className="h-4 w-4 text-green-500" />
+                          <Database className="h-4 w-4 text-emerald-500" />
                         )}
                       </div>
 
@@ -1497,7 +1497,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                         variant="ghost"
                         size="sm"
                         onClick={() => removeBlock(block.id)}
-                        className="h-7 w-7 p-0 text-red-500"
+                        className="h-7 w-7 p-0 text-destructive"
                       >
                         <X className="h-4 w-4" />
                       </Button>
@@ -2071,7 +2071,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 복사 액션 설정 */}
       {localInputs.actionType === "copy" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
+        <div className="mt-4 space-y-4 rounded-lg border bg-primary/10 p-4">
           <h4 className="text-foreground text-sm font-medium">복사 설정 (품목코드 자동 초기화)</h4>
 
           <div>
@@ -2510,8 +2510,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             />
           </div>
 
-          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-            <p className="text-xs text-blue-900 dark:text-blue-100">
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
               <strong>사용 방법:</strong>
               <br />
               1. 테이블에서 병합할 두 개의 행을 선택합니다
@@ -2782,7 +2782,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           </div>
 
           {config.action?.updateWithTracking && (
-            <div className="mt-3 space-y-3 rounded-md bg-green-50 p-3 dark:bg-green-950">
+            <div className="mt-3 space-y-3 rounded-md bg-emerald-50 p-3 dark:bg-emerald-950">
               <div>
                 <Label>
                   추적 모드 <span className="text-destructive">*</span>
@@ -2822,7 +2822,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </div>
               )}
 
-              <p className="text-[10px] text-green-700 dark:text-green-300">
+              <p className="text-[10px] text-emerald-700 dark:text-emerald-300">
                 {config.action?.updateTrackingMode === "start"
                   ? "버튼 클릭 시 연속 위치 추적이 시작되고, vehicle_location_history 테이블에 경로가 저장됩니다."
                   : "버튼 클릭 시 진행 중인 위치 추적이 종료됩니다."}
@@ -2848,7 +2848,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </div>
 
             {config.action?.requireLocationFields && (
-              <div className="mt-3 space-y-2 rounded-md bg-orange-50 p-3 dark:bg-orange-950">
+              <div className="mt-3 space-y-2 rounded-md bg-amber-50 p-3 dark:bg-orange-950">
                 <div className="grid grid-cols-2 gap-2">
                   <div>
                     <Label>출발지 필드명</Label>
@@ -2959,8 +2959,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             )}
           </div>
 
-          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-            <p className="text-xs text-blue-900 dark:text-blue-100">
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
               <strong>사용 예시:</strong>
               <br />
               - 운행 시작: status를 &quot;active&quot;로 + 연속 추적 시작
@@ -3731,8 +3731,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </div>
           </div>
 
-          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-            <p className="text-xs text-blue-900 dark:text-blue-100">
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
               <strong>사용 방법:</strong>
               <br />
               1. 소스 컴포넌트에서 데이터를 선택합니다
@@ -3915,8 +3915,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 />
               </div>
 
-              <div className="rounded-md bg-blue-50 p-2 dark:bg-blue-950/20">
-                <p className="text-xs text-blue-800 dark:text-blue-200">
+              <div className="rounded-md bg-primary/10 p-2 dark:bg-primary/10">
+                <p className="text-xs text-primary dark:text-primary/70">
                   <strong>동작 방식:</strong> 테이블에서 선택된 데이터를 기반으로 스케줄을 자동 생성합니다. 생성 전
                   미리보기 확인 다이얼로그가 표시됩니다.
                 </p>
@@ -3987,7 +3987,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </div>
 
             {!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
-              <div className="rounded-md bg-yellow-50 p-2 dark:bg-yellow-950/20">
+              <div className="rounded-md bg-amber-50 p-2 dark:bg-yellow-950/20">
                 <p className="text-xs text-yellow-800 dark:text-yellow-200">
                   정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
                 </p>
@@ -4212,7 +4212,7 @@ const MasterDetailExcelUploadConfig: React.FC<{
       <h5 className="text-muted-foreground text-xs font-medium">마스터-디테일 설정 (자동 감지)</h5>
 
       {/* 자동 감지된 정보 표시 */}
-      <div className="rounded-md bg-gray-50 p-3 dark:bg-gray-900">
+      <div className="rounded-md bg-muted p-3 dark:bg-foreground">
         <p className="mb-2 text-xs font-medium">분할 패널에서 감지된 정보:</p>
         <div className="grid grid-cols-2 gap-2 text-xs">
           <div>
@@ -4231,11 +4231,11 @@ const MasterDetailExcelUploadConfig: React.FC<{
           <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
             <div>
               <span className="text-muted-foreground">마스터 키:</span>{" "}
-              <span className="font-medium text-green-600">{relationInfo.masterKeyColumn}</span>
+              <span className="font-medium text-emerald-600">{relationInfo.masterKeyColumn}</span>
             </div>
             <div>
               <span className="text-muted-foreground">디테일 FK:</span>{" "}
-              <span className="font-medium text-green-600">{relationInfo.detailFkColumn}</span>
+              <span className="font-medium text-emerald-600">{relationInfo.detailFkColumn}</span>
             </div>
           </div>
         ) : (
@@ -4290,12 +4290,12 @@ const MasterDetailExcelUploadConfig: React.FC<{
                         }
                         updateMasterDetailConfig({ masterSelectFields: newFields });
                       }}
-                      className="h-4 w-4 rounded border-gray-300"
+                      className="h-4 w-4 rounded border-input"
                     />
                     <label htmlFor={`master-field-${col.columnName}`} className="flex-1 cursor-pointer text-xs">
                       {col.columnLabel}
                       <span className="text-muted-foreground ml-1">({col.columnName})</span>
-                      {col.inputType === "entity" && <span className="ml-1 text-blue-500">[엔티티]</span>}
+                      {col.inputType === "entity" && <span className="ml-1 text-primary">[엔티티]</span>}
                     </label>
                   </div>
                 );
@@ -4465,7 +4465,7 @@ const ExcelAfterUploadControlConfig: React.FC<{
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-5 w-5 p-0 text-red-500"
+                  className="h-5 w-5 p-0 text-destructive"
                   onClick={() => removeFlow(selected.flowId)}
                 >
                   <X className="h-3 w-3" />
diff --git a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
index e3226a10..40434c77 100644
--- a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
@@ -296,7 +296,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                 </SelectItem>
               </SelectContent>
             </Select>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-muted-foreground">
               {dataflowConfig.controlDataSource === "form" && "현재 폼의 입력값으로 조건을 체크합니다"}
               {dataflowConfig.controlDataSource === "table-selection" && "테이블에서 선택된 항목의 데이터로 조건을 체크합니다"}
               {dataflowConfig.controlDataSource === "table-all" && "테이블의 모든 데이터(페이징 무관)로 조건을 체크합니다"}
@@ -313,7 +313,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       {config.enableDataflowControl && (
         <div className="space-y-6 border-l-2 border-primary/20 pl-4">
           {/* 현재 액션 정보 (간소화) */}
-          <div className="rounded bg-gray-100 p-2">
+          <div className="rounded bg-muted p-2">
             <p className="text-xs text-muted-foreground">
               <strong>{getActionDisplayName(config.actionType || "save")}</strong> 액션에 제어관리 연결
             </p>
@@ -362,8 +362,8 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
 
           {/* 간편 모드 설정 */}
           {(dataflowConfig.controlMode === "simple" || !dataflowConfig.controlMode) && (
-            <div className="space-y-3 rounded border bg-gray-50 p-3">
-              <h4 className="text-sm font-medium text-gray-700">관계 선택</h4>
+            <div className="space-y-3 rounded border bg-muted p-3">
+              <h4 className="text-sm font-medium text-foreground">관계 선택</h4>
 
               {/* 관계 선택 */}
               <div>
@@ -393,9 +393,9 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                   <PopoverContent className="w-80 p-0">
                     <div className="p-2">
                       {diagramsLoading ? (
-                        <div className="p-4 text-center text-sm text-gray-500">관계 목록을 불러오는 중...</div>
+                        <div className="p-4 text-center text-sm text-muted-foreground">관계 목록을 불러오는 중...</div>
                       ) : diagrams.length === 0 ? (
-                        <div className="p-4 text-center text-sm text-gray-500">사용 가능한 관계가 없습니다</div>
+                        <div className="p-4 text-center text-sm text-muted-foreground">사용 가능한 관계가 없습니다</div>
                       ) : (
                         <div className="max-h-60 overflow-y-auto">
                           {diagrams.map((diagram) => (
@@ -419,7 +419,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                                 />
                                 <div className="flex-1 text-left">
                                   <div className="font-medium">{diagram.name}</div>
-                                  <div className="text-xs text-gray-500">{diagram.relationshipCount}개 관계</div>
+                                  <div className="text-xs text-muted-foreground">{diagram.relationshipCount}개 관계</div>
                                 </div>
                               </div>
                             </Button>
@@ -460,9 +460,9 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                     <PopoverContent className="w-96 p-0">
                       <div className="p-2">
                         {relationshipsLoading ? (
-                          <div className="p-4 text-center text-sm text-gray-500">관계 목록을 불러오는 중...</div>
+                          <div className="p-4 text-center text-sm text-muted-foreground">관계 목록을 불러오는 중...</div>
                         ) : relationships.length === 0 ? (
-                          <div className="p-4 text-center text-sm text-gray-500">
+                          <div className="p-4 text-center text-sm text-muted-foreground">
                             이 관계에는 사용 가능한 관계가 없습니다
                           </div>
                         ) : (
@@ -489,7 +489,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                                   />
                                   <div className="flex-1 text-left">
                                     <div className="font-medium">{relationship.name}</div>
-                                    <div className="text-xs text-gray-500">
+                                    <div className="text-xs text-muted-foreground">
                                       {relationship.sourceTable} → {relationship.targetTable}
                                     </div>
                                     <Badge variant="outline" className="mt-1 text-xs">
@@ -510,7 +510,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
               {/* 선택된 관계 간단 정보 */}
               {selectedRelationship && (
                 <div className="mt-2 rounded border bg-accent p-2">
-                  <p className="text-xs text-blue-700">
+                  <p className="text-xs text-primary">
                     <strong>{selectedRelationship.sourceTable}</strong> →{" "}
                     <strong>{selectedRelationship.targetTable}</strong>
                     {previewData && (
diff --git a/frontend/components/screen/config-panels/CodeConfigPanel.tsx b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
index 7e43f844..d41a4f8b 100644
--- a/frontend/components/screen/config-panels/CodeConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
@@ -320,7 +320,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               <button
                 type="button"
                 onClick={setSampleCode}
-                className="text-xs text-primary underline hover:text-blue-800"
+                className="text-xs text-primary underline hover:text-primary"
               >
                 샘플 코드 사용
               </button>
@@ -375,25 +375,25 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
           <div className="bg-muted/50 rounded-md border p-3">
             <div
               className={`rounded border font-mono text-xs ${
-                localConfig.theme === "dark" ? "bg-gray-900 text-gray-100" : "bg-white text-gray-900"
+                localConfig.theme === "dark" ? "bg-foreground text-muted-foreground/20" : "bg-white text-foreground"
               }`}
               style={{ height: `${Math.min(localConfig.height || 300, 200)}px` }}
             >
-              <div className="flex items-center border-b bg-gray-50 px-3 py-1 text-gray-700">
+              <div className="flex items-center border-b bg-muted px-3 py-1 text-foreground">
                 <Code className="mr-2 h-3 w-3" />
                 <span className="text-xs">
                   {supportedLanguages.find((l) => l.value === localConfig.language)?.label || "JavaScript"}
                 </span>
-                {localConfig.showLineNumbers && <span className="ml-auto text-xs text-gray-500">줄번호</span>}
+                {localConfig.showLineNumbers && <span className="ml-auto text-xs text-muted-foreground">줄번호</span>}
               </div>
               <div className="overflow-auto p-3" style={{ height: "calc(100% - 32px)" }}>
                 {localConfig.defaultValue ? (
                   <pre className="text-xs">
-                    {localConfig.showLineNumbers && <span className="mr-3 text-gray-400 select-none">1</span>}
+                    {localConfig.showLineNumbers && <span className="mr-3 text-muted-foreground/70 select-none">1</span>}
                     {localConfig.defaultValue}
                   </pre>
                 ) : (
-                  <div className="text-gray-400 italic">{localConfig.placeholder}</div>
+                  <div className="text-muted-foreground/70 italic">{localConfig.placeholder}</div>
                 )}
               </div>
             </div>
diff --git a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
index fe089ac5..48a7cbf9 100644
--- a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
@@ -69,7 +69,7 @@ const FilterItemCollapsible: React.FC<FilterItemCollapsibleProps> = ({
             </div>
             {/* 하단: 필터 요약 (전체 너비 사용) */}
             <div className="mt-1 pl-4">
-              <span className="text-xs font-medium text-blue-600" title={filterSummary}>
+              <span className="text-xs font-medium text-primary" title={filterSummary}>
                 {filterSummary}
               </span>
             </div>
@@ -608,8 +608,8 @@ export function DataFilterConfigPanel({
 
                   {/* date_range_contains의 dynamic 타입 안내 */}
                   {filter.operator === "date_range_contains" && filter.valueType === "dynamic" && (
-                    <div className="rounded-md bg-blue-50 p-2">
-                      <p className="text-[10px] text-blue-700">오늘 날짜를 기준으로 기간 내 데이터를 필터링합니다.</p>
+                    <div className="rounded-md bg-primary/10 p-2">
+                      <p className="text-[10px] text-primary">오늘 날짜를 기준으로 기간 내 데이터를 필터링합니다.</p>
                     </div>
                   )}
                 </FilterItemCollapsible>
diff --git a/frontend/components/screen/config-panels/EntityConfigPanel.tsx b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
index 83773500..c4da574f 100644
--- a/frontend/components/screen/config-panels/EntityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
@@ -416,11 +416,11 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
           <div className="bg-muted/50 rounded-md border p-3">
             <div className="space-y-2">
               <div className="flex items-center gap-2 rounded border bg-white p-2">
-                <Database className="h-4 w-4 text-gray-400" />
+                <Database className="h-4 w-4 text-muted-foreground/70" />
                 <span className="flex-1 text-xs text-muted-foreground">
                   {localConfig.placeholder || "항목을 선택하세요"}
                 </span>
-                {localConfig.searchable && <Search className="h-4 w-4 text-gray-400" />}
+                {localConfig.searchable && <Search className="h-4 w-4 text-muted-foreground/70" />}
               </div>
 
               <div className="text-muted-foreground text-xs">
diff --git a/frontend/components/screen/config-panels/FileConfigPanel.tsx b/frontend/components/screen/config-panels/FileConfigPanel.tsx
index d00200f1..915ae870 100644
--- a/frontend/components/screen/config-panels/FileConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FileConfigPanel.tsx
@@ -358,11 +358,11 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             <div
               className={`space-y-2 rounded-md border-2 border-dashed p-4 text-center ${
                 localConfig.dragAndDrop && !localConfig.readonly
-                  ? "border-gray-300 hover:border-gray-400"
-                  : "border-gray-200"
+                  ? "border-input hover:border-input"
+                  : "border-border"
               }`}
             >
-              <File className="mx-auto h-8 w-8 text-gray-400" />
+              <File className="mx-auto h-8 w-8 text-muted-foreground/70" />
               <p className="text-xs text-muted-foreground">{localConfig.uploadText}</p>
               <Button size="sm" variant="outline" disabled={localConfig.readonly} className="text-xs">
                 {localConfig.browseText}
diff --git a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
index 1cbad525..4b55cddd 100644
--- a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
@@ -214,7 +214,7 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
           {/* 제어 목록 헤더 */}
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-2">
-              <Workflow className="h-4 w-4 text-green-600" />
+              <Workflow className="h-4 w-4 text-emerald-600" />
               <Label>제어 목록 (순서대로 실행)</Label>
             </div>
             <Button variant="outline" size="sm" onClick={handleAddControl} className="h-8">
@@ -226,8 +226,8 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
           {/* 제어 목록 */}
           {flowControls.length === 0 ? (
             <div className="rounded-md border border-dashed p-6 text-center">
-              <Workflow className="mx-auto h-8 w-8 text-gray-400" />
-              <p className="mt-2 text-sm text-gray-500">등록된 제어가 없습니다</p>
+              <Workflow className="mx-auto h-8 w-8 text-muted-foreground/70" />
+              <p className="mt-2 text-sm text-muted-foreground">등록된 제어가 없습니다</p>
               <Button variant="outline" size="sm" onClick={handleAddControl} className="mt-3">
                 <Plus className="mr-1 h-3 w-3" />첫 번째 제어 추가
               </Button>
@@ -254,10 +254,10 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
 
           {/* 안내 메시지 */}
           {flowControls.length > 0 && (
-            <div className="rounded bg-blue-50 p-3">
+            <div className="rounded bg-primary/10 p-3">
               <div className="flex items-start space-x-2">
-                <Info className="mt-0.5 h-4 w-4 text-blue-600" />
-                <div className="text-xs text-blue-800">
+                <Info className="mt-0.5 h-4 w-4 text-primary" />
+                <div className="text-xs text-primary">
                   <p className="font-medium">다중 제어 실행 정보:</p>
                   <p className="mt-1">• 제어는 위에서 아래 순서대로 순차 실행됩니다</p>
                   <p>• 각 제어는 독립 트랜잭션으로 처리됩니다</p>
@@ -314,9 +314,9 @@ const FlowControlItem: React.FC<{
             </SelectTrigger>
             <SelectContent>
               {loading ? (
-                <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
               ) : flows.length === 0 ? (
-                <div className="p-2 text-center text-xs text-gray-500">플로우가 없습니다</div>
+                <div className="p-2 text-center text-xs text-muted-foreground">플로우가 없습니다</div>
               ) : (
                 flows.map((flow) => (
                   <SelectItem key={flow.flowId} value={flow.flowId.toString()}>
@@ -350,7 +350,7 @@ const FlowControlItem: React.FC<{
         <Button
           variant="ghost"
           size="icon"
-          className="h-8 w-8 text-red-500 hover:bg-red-50 hover:text-red-600"
+          className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
           onClick={onRemove}
         >
           <Trash2 className="h-4 w-4" />
diff --git a/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx b/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx
index 39b2e83a..8d6bfdad 100644
--- a/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx
+++ b/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx
@@ -175,7 +175,7 @@ export const QuickInsertConfigSection: React.FC<QuickInsertConfigSectionProps> =
   });
 
   return (
-    <div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4 dark:bg-green-950/20">
+    <div className="mt-4 space-y-4 rounded-lg border bg-emerald-50 p-4 dark:bg-emerald-950/20">
       <h4 className="text-sm font-medium text-foreground">즉시 저장 설정</h4>
       <p className="text-xs text-muted-foreground">
         화면에서 선택한 데이터를 버튼 클릭 시 특정 테이블에 즉시 저장합니다.
@@ -639,7 +639,7 @@ export const QuickInsertConfigSection: React.FC<QuickInsertConfigSectionProps> =
       )}
 
       {/* 사용 안내 */}
-      <div className="rounded-md bg-green-100 p-3 dark:bg-green-900/30">
+      <div className="rounded-md bg-emerald-100 p-3 dark:bg-emerald-900/30">
         <p className="text-xs text-green-900 dark:text-green-100">
           <strong>사용 방법:</strong>
           <br />
diff --git a/frontend/components/screen/config-panels/TabsConfigPanel.tsx b/frontend/components/screen/config-panels/TabsConfigPanel.tsx
index 8369b115..98fcb7c3 100644
--- a/frontend/components/screen/config-panels/TabsConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/TabsConfigPanel.tsx
@@ -424,11 +424,11 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
       </div>
 
       {/* 사용 안내 */}
-      <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
-        <h4 className="mb-1 text-xs font-semibold text-blue-900">
+      <div className="rounded-lg border border-primary/20 bg-primary/10 p-3">
+        <h4 className="mb-1 text-xs font-semibold text-primary">
           컴포넌트 추가 방법
         </h4>
-        <ol className="list-inside list-decimal space-y-1 text-[10px] text-blue-800">
+        <ol className="list-inside list-decimal space-y-1 text-[10px] text-primary">
           <li>디자인 화면에서 탭을 선택합니다</li>
           <li>좌측 패널에서 원하는 컴포넌트를 드래그합니다</li>
           <li>선택한 탭 영역에 드롭하여 배치합니다</li>
diff --git a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
index b074074c..e50f0813 100644
--- a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
@@ -105,7 +105,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               rows={3}
             />
             {localConfig.showCharCount && (
-              <div className={`text-xs ${isOverLimit ? "text-red-500" : "text-muted-foreground"}`}>
+              <div className={`text-xs ${isOverLimit ? "text-destructive" : "text-muted-foreground"}`}>
                 {currentCharCount}
                 {localConfig.maxLength && ` / ${localConfig.maxLength}`} 글자
               </div>
diff --git a/frontend/components/screen/config-panels/button/DataTab.tsx b/frontend/components/screen/config-panels/button/DataTab.tsx
index 29b35c78..43cba580 100644
--- a/frontend/components/screen/config-panels/button/DataTab.tsx
+++ b/frontend/components/screen/config-panels/button/DataTab.tsx
@@ -855,8 +855,8 @@ export const DataTab: React.FC<DataTabProps> = ({
           </div>
         </div>
 
-        <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-          <p className="text-xs text-blue-900 dark:text-blue-100">
+        <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+          <p className="text-xs text-primary dark:text-primary/60">
             <strong>사용 방법:</strong>
             <br />
             1. 소스 컴포넌트에서 데이터를 선택합니다
diff --git a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
index f40bd9ea..c8bc525f 100644
--- a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
+++ b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
@@ -61,7 +61,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
               <div className="flex items-center space-x-3">
                 <RadioGroupItem value="horizontal" id="direction-horizontal" />
                 <Label htmlFor="direction-horizontal" className="flex items-center gap-2 text-sm font-normal">
-                  <ArrowRight className="h-4 w-4 text-blue-600" />
+                  <ArrowRight className="h-4 w-4 text-primary" />
                   <span>가로 정렬</span>
                   <Badge variant="secondary" className="ml-2 text-xs">
                     ← →
@@ -71,7 +71,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
               <div className="flex items-center space-x-3">
                 <RadioGroupItem value="vertical" id="direction-vertical" />
                 <Label htmlFor="direction-vertical" className="flex items-center gap-2 text-sm font-normal">
-                  <ArrowDown className="h-4 w-4 text-blue-600" />
+                  <ArrowDown className="h-4 w-4 text-primary" />
                   <span>세로 정렬</span>
                   <Badge variant="secondary" className="ml-2 text-xs">
                     ↑ ↓
@@ -161,9 +161,9 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
           </div>
 
           {/* 미리보기 */}
-          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
-            <p className="mb-3 text-xs font-medium text-blue-900">설정 미리보기</p>
-            <div className="space-y-2 text-xs text-blue-700">
+          <div className="rounded-lg border border-primary/20 bg-primary/10 p-4">
+            <p className="mb-3 text-xs font-medium text-primary">설정 미리보기</p>
+            <div className="space-y-2 text-xs text-primary">
               <div className="flex items-center gap-2">
                 {direction === "horizontal" ? <ArrowRight className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />}
                 <span>
diff --git a/frontend/components/screen/layout/ColumnComponent.tsx b/frontend/components/screen/layout/ColumnComponent.tsx
index a00305b8..800391b1 100644
--- a/frontend/components/screen/layout/ColumnComponent.tsx
+++ b/frontend/components/screen/layout/ColumnComponent.tsx
@@ -62,7 +62,7 @@ export default function ColumnComponent({
   return (
     <div
       className={cn(
-        "flex-1 rounded border border-gray-200 p-2",
+        "flex-1 rounded border border-border p-2",
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,
@@ -71,7 +71,7 @@ export default function ColumnComponent({
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
-      <div className="mb-2 text-xs text-gray-500">열</div>
+      <div className="mb-2 text-xs text-muted-foreground">열</div>
       {children}
     </div>
   );
diff --git a/frontend/components/screen/layout/ContainerComponent.tsx b/frontend/components/screen/layout/ContainerComponent.tsx
index 4001f284..540def82 100644
--- a/frontend/components/screen/layout/ContainerComponent.tsx
+++ b/frontend/components/screen/layout/ContainerComponent.tsx
@@ -71,7 +71,7 @@ export default function ContainerComponent({
   return (
     <div
       className={cn(
-        "rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
+        "rounded-lg border-2 border-dashed border-input bg-muted p-4",
         gridClasses, // 🆕 그리드 클래스 추가
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
@@ -81,7 +81,7 @@ export default function ContainerComponent({
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
-      <div className="mb-2 text-xs text-gray-500">{component.title || "컨테이너"}</div>
+      <div className="mb-2 text-xs text-muted-foreground">{component.title || "컨테이너"}</div>
       {children}
     </div>
   );
diff --git a/frontend/components/screen/layout/RowComponent.tsx b/frontend/components/screen/layout/RowComponent.tsx
index b1a31b23..fec93a86 100644
--- a/frontend/components/screen/layout/RowComponent.tsx
+++ b/frontend/components/screen/layout/RowComponent.tsx
@@ -62,7 +62,7 @@ export default function RowComponent({
   return (
     <div
       className={cn(
-        "flex gap-4 rounded border border-gray-200 p-2",
+        "flex gap-4 rounded border border-border p-2",
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,
@@ -71,7 +71,7 @@ export default function RowComponent({
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
-      <div className="mr-2 text-xs text-gray-500">행</div>
+      <div className="mr-2 text-xs text-muted-foreground">행</div>
       {children}
     </div>
   );
diff --git a/frontend/components/screen/modals/MultilangSettingsModal.tsx b/frontend/components/screen/modals/MultilangSettingsModal.tsx
index ea1c10b3..a1f62b82 100644
--- a/frontend/components/screen/modals/MultilangSettingsModal.tsx
+++ b/frontend/components/screen/modals/MultilangSettingsModal.tsx
@@ -282,7 +282,7 @@ const KeySelectCombobox: React.FC<KeySelectComboboxProps> = ({
                     onChange(null);
                     setOpen(false);
                   }}
-                  className="text-red-600"
+                  className="text-destructive"
                 >
                   <X className="mr-2 h-4 w-4" />
                   연결 해제
@@ -895,12 +895,12 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
   const TranslationStatusIcon: React.FC<{ status: TranslationStatus }> = ({ status }) => {
     switch (status) {
       case "complete":
-        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+        return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
       case "partial":
-        return <CircleDot className="h-4 w-4 text-yellow-500" />;
+        return <CircleDot className="h-4 w-4 text-amber-500" />;
       case "none":
       default:
-        return <Circle className="h-4 w-4 text-gray-300" />;
+        return <Circle className="h-4 w-4 text-muted-foreground/50" />;
     }
   };
 
@@ -1270,10 +1270,10 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
                                   isSelected
                                     ? "border-primary bg-primary/10 ring-1 ring-primary"
                                     : translationStatus === "complete"
-                                      ? "border-green-200 bg-green-50 hover:bg-green-100"
+                                      ? "border-emerald-200 bg-emerald-50 hover:bg-emerald-100"
                                       : translationStatus === "partial"
-                                        ? "border-yellow-200 bg-yellow-50 hover:bg-yellow-100"
-                                        : "border-gray-200 bg-white hover:bg-gray-50"
+                                        ? "border-amber-200 bg-amber-50 hover:bg-amber-100"
+                                        : "border-border bg-white hover:bg-muted"
                                 )}
                               >
                                 {/* 번역 상태 아이콘 */}
@@ -1301,7 +1301,7 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
           </div>
 
           {/* 오른쪽: 선택된 항목 상세 및 번역 편집 */}
-          <div className="flex w-1/2 flex-col rounded-md border bg-gray-50 p-4">
+          <div className="flex w-1/2 flex-col rounded-md border bg-muted p-4">
             {selectedLabelItem ? (
               <>
                 {/* 선택된 항목 정보 */}
@@ -1388,15 +1388,15 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
               <span className="font-medium">번역 현황</span>
               <div className="flex items-center gap-3 text-xs text-muted-foreground">
                 <span className="flex items-center gap-1">
-                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  <CheckCircle2 className="h-3 w-3 text-emerald-500" />
                   완료 {translationStats.complete}
                 </span>
                 <span className="flex items-center gap-1">
-                  <CircleDot className="h-3 w-3 text-yellow-500" />
+                  <CircleDot className="h-3 w-3 text-amber-500" />
                   부분 {translationStats.partial}
                 </span>
                 <span className="flex items-center gap-1">
-                  <Circle className="h-3 w-3 text-gray-300" />
+                  <Circle className="h-3 w-3 text-muted-foreground/50" />
                   미완료 {translationStats.none}
                 </span>
               </div>
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index 9329ae39..4a2792e8 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -231,7 +231,7 @@ export function ComponentsPanel({
   const getCategoryColor = (category: string) => {
     switch (category) {
       case "data":
-        return "from-blue-500/10 to-blue-600/10 text-blue-600 group-hover:from-blue-500/20 group-hover:to-blue-600/20";
+        return "from-primary/50/10 to-primary/10 text-primary group-hover:from-primary/50/20 group-hover:to-primary/20";
       case "display":
         return "from-emerald-500/10 to-emerald-600/10 text-emerald-600 group-hover:from-emerald-500/20 group-hover:to-emerald-600/20";
       case "input":
diff --git a/frontend/components/screen/panels/DataTableConfigPanel.tsx b/frontend/components/screen/panels/DataTableConfigPanel.tsx
index b1d8b971..29bec31f 100644
--- a/frontend/components/screen/panels/DataTableConfigPanel.tsx
+++ b/frontend/components/screen/panels/DataTableConfigPanel.tsx
@@ -702,7 +702,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
           );
 
         default:
-          return <div className="py-2 text-xs text-gray-500">이 웹 타입({webType})에 대한 상세 설정이 없습니다.</div>;
+          return <div className="py-2 text-xs text-muted-foreground">이 웹 타입({webType})에 대한 상세 설정이 없습니다.</div>;
       }
     },
     [getColumnWebType, getColumnCurrentDetailSettings, localColumnDetailSettings, updateColumnDetailSettings],
@@ -1141,7 +1141,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
               <div className="space-y-2">
                 <Label htmlFor="table-select">연결 테이블</Label>
                 <select
-                  className="focus:border-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="focus:border-primary w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                   value={localValues.tableName}
                   onChange={(e) => handleTableChange(e.target.value)}
                 >
@@ -1436,8 +1436,8 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
               {/* 수정 모달 설정 */}
               {localValues.enableEdit && (
-                <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-                  <h4 className="mb-3 text-sm font-medium text-gray-900">수정 모달 설정</h4>
+                <div className="rounded-lg border border-border bg-muted p-4">
+                  <h4 className="mb-3 text-sm font-medium text-foreground">수정 모달 설정</h4>
 
                   <div className="space-y-3">
                     <div className="space-y-2">
@@ -1457,7 +1457,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         placeholder="데이터 수정"
                         className="h-6 w-full px-2 py-0 text-xs"
                       />
-                      <p className="text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
+                      <p className="text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
                     </div>
 
                     <div className="space-y-2">
@@ -1477,7 +1477,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         placeholder="선택한 데이터를 수정합니다"
                         className="h-6 w-full px-2 py-0 text-xs"
                       />
-                      <p className="text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
+                      <p className="text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
                     </div>
                   </div>
                 </div>
@@ -2204,7 +2204,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                   <Filter className="h-4 w-4" />
                   현재 사용자 정보로 필터링
                 </h4>
-                <div className="space-y-3 rounded-md border border-gray-200 p-3">
+                <div className="space-y-3 rounded-md border border-border p-3">
                   <div className="flex items-center space-x-2">
                     <Checkbox
                       id="auto-filter-enabled"
@@ -2306,7 +2306,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       <div className="space-y-2">
                         <Label>페이지당 행 수</Label>
                         <select
-                          className="focus:border-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                          className="focus:border-primary w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                           value={component.pagination.pageSize.toString()}
                           onChange={(e) =>
                             onUpdateComponent({
@@ -2394,7 +2394,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
               {/* 모달 설정은 여기에 추가 가능 */}
               <div className="space-y-4">
                 <h4 className="text-sm font-medium">모달 설정</h4>
-                <p className="text-xs text-gray-500">추가/수정 모달 관련 설정들이 여기에 표시됩니다.</p>
+                <p className="text-xs text-muted-foreground">추가/수정 모달 관련 설정들이 여기에 표시됩니다.</p>
               </div>
             </CardContent>
           </Card>
diff --git a/frontend/components/screen/panels/DetailSettingsPanel.tsx b/frontend/components/screen/panels/DetailSettingsPanel.tsx
index 7ec1c557..8768c30f 100644
--- a/frontend/components/screen/panels/DetailSettingsPanel.tsx
+++ b/frontend/components/screen/panels/DetailSettingsPanel.tsx
@@ -125,10 +125,10 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 그리드 레이아웃 설정 */}
           {layoutComponent.layoutType === "grid" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">그리드 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">그리드 설정</h4>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">행 수</label>
+                  <label className="mb-1 block text-xs font-medium text-foreground">행 수</label>
                   <input
                     type="number"
                     min="1"
@@ -161,11 +161,11 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-full rounded border border-input px-2 py-1 text-xs"
                   />
                 </div>
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">열 수</label>
+                  <label className="mb-1 block text-xs font-medium text-foreground">열 수</label>
                   <input
                     type="number"
                     min="1"
@@ -198,12 +198,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-full rounded border border-input px-2 py-1 text-xs"
                   />
                 </div>
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">간격 (px)</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">간격 (px)</label>
                 <input
                   type="number"
                   min="0"
@@ -212,7 +212,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                   onChange={(e) =>
                     onUpdateProperty(layoutComponent.id, "layoutConfig.grid.gap", parseInt(e.target.value))
                   }
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 />
               </div>
             </div>
@@ -221,9 +221,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 플렉스박스 레이아웃 설정 */}
           {layoutComponent.layoutType === "flexbox" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">플렉스박스 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">플렉스박스 설정</h4>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">방향</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">방향</label>
                 <select
                   value={layoutComponent.layoutConfig?.flexbox?.direction || "row"}
                   onChange={(e) => {
@@ -256,7 +256,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onUpdateProperty(layoutComponent.id, "zones", updatedZones);
                     }
                   }}
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 >
                   <option value="row">가로 (row)</option>
                   <option value="column">세로 (column)</option>
@@ -265,7 +265,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 </select>
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">존 개수</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">존 개수</label>
                 <div className="flex items-center space-x-2">
                   <input
                     type="number"
@@ -315,13 +315,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-20 rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-20 rounded border border-input px-2 py-1 text-xs"
                   />
-                  <span className="text-xs text-gray-500">개</span>
+                  <span className="text-xs text-muted-foreground">개</span>
                 </div>
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">간격 (px)</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">간격 (px)</label>
                 <input
                   type="number"
                   min="0"
@@ -330,7 +330,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                   onChange={(e) =>
                     onUpdateProperty(layoutComponent.id, "layoutConfig.flexbox.gap", parseInt(e.target.value))
                   }
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 />
               </div>
             </div>
@@ -339,13 +339,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 분할 레이아웃 설정 */}
           {layoutComponent.layoutType === "split" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">분할 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">분할 설정</h4>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">분할 방향</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">분할 방향</label>
                 <select
                   value={layoutComponent.layoutConfig?.split?.direction || "horizontal"}
                   onChange={(e) => onUpdateProperty(layoutComponent.id, "layoutConfig.split.direction", e.target.value)}
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 >
                   <option value="horizontal">가로 분할</option>
                   <option value="vertical">세로 분할</option>
@@ -357,12 +357,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 카드 레이아웃 설정 */}
           {layoutComponent.layoutType === "card-layout" && (
             <div className="space-y-4">
-              <h4 className="text-sm font-medium text-gray-900">카드 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">카드 설정</h4>
 
               {/* 테이블 컬럼 매핑 */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
-                  <h5 className="text-xs font-medium text-gray-700">테이블 컬럼 매핑</h5>
+                  <h5 className="text-xs font-medium text-foreground">테이블 컬럼 매핑</h5>
                   {currentTable && (
                     <span className="bg-accent text-primary rounded px-2 py-1 text-xs">
                       테이블: {currentTable.table_name}
@@ -372,9 +372,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
                 {/* 테이블이 선택되지 않은 경우 안내 */}
                 {!currentTable && (
-                  <div className="rounded-lg bg-yellow-50 p-3 text-center">
+                  <div className="rounded-lg bg-amber-50 p-3 text-center">
                     <p className="text-sm text-yellow-700">테이블을 먼저 선택해주세요</p>
-                    <p className="mt-1 text-xs text-yellow-600">
+                    <p className="mt-1 text-xs text-amber-600">
                       화면 설정에서 테이블을 선택하면 컬럼 목록이 표시됩니다
                     </p>
                   </div>
@@ -394,7 +394,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -416,7 +416,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -438,7 +438,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -460,7 +460,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -510,7 +510,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                                     currentColumns,
                                   );
                                 }}
-                                className="flex-1 rounded border border-gray-300 px-2 py-1 text-xs"
+                                className="flex-1 rounded border border-input px-2 py-1 text-xs"
                               >
                                 <option value="">컬럼을 선택하세요</option>
                                 {currentTable.columns?.map((col) => (
@@ -542,7 +542,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
                         {(!layoutComponent.layoutConfig?.card?.columnMapping?.displayColumns ||
                           layoutComponent.layoutConfig.card.columnMapping.displayColumns.length === 0) && (
-                          <div className="rounded border border-dashed border-gray-300 py-2 text-center text-xs text-gray-500">
+                          <div className="rounded border border-dashed border-input py-2 text-center text-xs text-muted-foreground">
                             "컬럼 추가" 버튼을 클릭하여 표시할 컬럼을 추가하세요
                           </div>
                         )}
@@ -554,7 +554,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
               {/* 카드 스타일 설정 */}
               <div className="space-y-3">
-                <h5 className="text-xs font-medium text-gray-700">카드 스타일</h5>
+                <h5 className="text-xs font-medium text-foreground">카드 스타일</h5>
 
                 <div className="grid grid-cols-2 gap-2">
                   <div>
@@ -567,7 +567,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardsPerRow", parseInt(e.target.value))
                       }
-                      className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                      className="w-full rounded border border-input px-2 py-1 text-xs"
                     />
                   </div>
 
@@ -581,7 +581,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardSpacing", parseInt(e.target.value))
                       }
-                      className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                      className="w-full rounded border border-input px-2 py-1 text-xs"
                     />
                   </div>
                 </div>
@@ -595,7 +595,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardStyle.showTitle", e.target.checked)
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showTitle" className="text-muted-foreground text-xs">
                       타이틀 표시
@@ -614,7 +614,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           e.target.checked,
                         )
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showSubtitle" className="text-muted-foreground text-xs">
                       서브타이틀 표시
@@ -633,7 +633,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           e.target.checked,
                         )
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showDescription" className="text-muted-foreground text-xs">
                       설명 표시
@@ -648,7 +648,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardStyle.showImage", e.target.checked)
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showImage" className="text-muted-foreground text-xs">
                       이미지 표시
@@ -670,7 +670,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         parseInt(e.target.value),
                       )
                     }
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-full rounded border border-input px-2 py-1 text-xs"
                   />
                 </div>
               </div>
@@ -680,13 +680,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 존 목록 - 카드 레이아웃은 데이터 기반이므로 존 관리 불필요 */}
           {layoutComponent.layoutType !== "card-layout" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">존 목록</h4>
+              <h4 className="text-sm font-medium text-foreground">존 목록</h4>
               <div className="space-y-2">
                 {layoutComponent.zones?.map((zone, index) => (
-                  <div key={zone.id} className="rounded-lg bg-gray-50 p-3">
+                  <div key={zone.id} className="rounded-lg bg-muted p-3">
                     <div className="mb-2 flex items-center justify-between">
-                      <span className="text-sm font-medium text-gray-700">{zone.name}</span>
-                      <span className="text-xs text-gray-500">ID: {zone.id}</span>
+                      <span className="text-sm font-medium text-foreground">{zone.name}</span>
+                      <span className="text-xs text-muted-foreground">ID: {zone.id}</span>
                     </div>
                     <div className="grid grid-cols-2 gap-2">
                       <div>
@@ -697,7 +697,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           onChange={(e) =>
                             onUpdateProperty(layoutComponent.id, `zones.${index}.size.width`, e.target.value)
                           }
-                          className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                          className="w-full rounded border border-input px-2 py-1 text-xs"
                           placeholder="100%"
                         />
                       </div>
@@ -709,7 +709,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           onChange={(e) =>
                             onUpdateProperty(layoutComponent.id, `zones.${index}.size.height`, e.target.value)
                           }
-                          className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                          className="w-full rounded border border-input px-2 py-1 text-xs"
                           placeholder="auto"
                         />
                       </div>
@@ -813,20 +813,20 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
   if (!selectedComponent) {
     return (
-      <div className="flex h-full flex-col border-r border-gray-200/60 bg-gradient-to-br from-slate-50 to-orange-50/30 shadow-sm">
+      <div className="flex h-full flex-col border-r border-border/60 bg-gradient-to-br from-slate-50 to-orange-50/30 shadow-sm">
         <div className="p-6">
           {/* 헤더 */}
           <div className="mb-6">
-            <h2 className="mb-1 text-lg font-semibold text-gray-900">상세 설정</h2>
-            <p className="text-sm text-gray-500">컴포넌트를 선택하여 상세 설정을 편집하세요</p>
+            <h2 className="mb-1 text-lg font-semibold text-foreground">상세 설정</h2>
+            <p className="text-sm text-muted-foreground">컴포넌트를 선택하여 상세 설정을 편집하세요</p>
           </div>
         </div>
 
         {/* 빈 상태 */}
         <div className="flex flex-1 flex-col items-center justify-center p-6 text-center">
-          <Settings className="mb-4 h-12 w-12 text-gray-400" />
-          <h3 className="mb-2 text-lg font-medium text-gray-900">컴포넌트를 선택하세요</h3>
-          <p className="text-sm text-gray-500">위젯 컴포넌트를 선택하면 상세 설정을 편집할 수 있습니다.</p>
+          <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+          <h3 className="mb-2 text-lg font-medium text-foreground">컴포넌트를 선택하세요</h3>
+          <p className="text-sm text-muted-foreground">위젯 컴포넌트를 선택하면 상세 설정을 편집할 수 있습니다.</p>
         </div>
       </div>
     );
@@ -840,9 +840,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       // console.error("❌ selectedComponent가 undefined입니다!");
       return (
         <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-          <Settings className="mb-4 h-12 w-12 text-red-400" />
+          <Settings className="mb-4 h-12 w-12 text-destructive/80" />
           <h3 className="mb-2 text-lg font-medium text-red-900">오류</h3>
-          <p className="text-sm text-red-500">선택된 컴포넌트가 없습니다.</p>
+          <p className="text-sm text-destructive">선택된 컴포넌트가 없습니다.</p>
         </div>
       );
     }
@@ -944,9 +944,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       default:
         return (
           <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-            <Settings className="mb-4 h-12 w-12 text-gray-400" />
-            <h3 className="mb-2 text-lg font-medium text-gray-900">⚠️ 설정 패널 없음</h3>
-            <p className="text-sm text-gray-500">
+            <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+            <h3 className="mb-2 text-lg font-medium text-foreground">⚠️ 설정 패널 없음</h3>
+            <p className="text-sm text-muted-foreground">
               컴포넌트 "{componentId || componentType}"에 대한 설정 패널이 없습니다.
             </p>
           </div>
@@ -988,16 +988,16 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     return (
       <div className="flex h-full flex-col">
         {/* 헤더 */}
-        <div className="border-b border-gray-200 p-4">
+        <div className="border-b border-border p-4">
           <div className="flex items-center space-x-2">
             <Settings className="text-muted-foreground h-4 w-4" />
-            <h3 className="font-medium text-gray-900">컴포넌트 설정</h3>
+            <h3 className="font-medium text-foreground">컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
             <span className="text-muted-foreground text-xs">
               타입:
             </span>
-            <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentType}</span>
+            <span className="rounded bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-800">{componentType}</span>
           </div>
         </div>
 
@@ -1020,9 +1020,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
   ) {
     return (
       <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-        <Settings className="mb-4 h-12 w-12 text-gray-400" />
-        <h3 className="mb-2 text-lg font-medium text-gray-900">설정할 수 없는 컴포넌트입니다</h3>
-        <p className="text-sm text-gray-500">
+        <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+        <h3 className="mb-2 text-lg font-medium text-foreground">설정할 수 없는 컴포넌트입니다</h3>
+        <p className="text-sm text-muted-foreground">
           상세 설정은 위젯, 파일, 버튼, 컴포넌트, 레이아웃에서만 사용할 수 있습니다.
           <br />
           현재 선택된 컴포넌트: {selectedComponent.type}
@@ -1038,10 +1038,10 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     return (
       <div className="flex h-full flex-col">
         {/* 헤더 */}
-        <div className="border-b border-gray-200 p-4">
+        <div className="border-b border-border p-4">
           <div className="flex items-center space-x-2">
             <Settings className="text-muted-foreground h-4 w-4" />
-            <h3 className="font-medium text-gray-900">파일 컴포넌트 설정</h3>
+            <h3 className="font-medium text-foreground">파일 컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
             <span className="text-muted-foreground text-xs">
@@ -1049,7 +1049,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             </span>
             <span className="rounded bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800">파일 업로드</span>
           </div>
-          <div className="mt-1 text-xs text-gray-500">
+          <div className="mt-1 text-xs text-muted-foreground">
             {selectedComponent.type === "widget"
               ? `위젯타입: ${selectedComponent.widgetType}`
               : `문서 타입: ${fileComponent.fileConfig?.docTypeName || "일반 문서"}`}
@@ -1102,9 +1102,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     if (!componentId) {
       return (
         <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-          <Settings className="mb-4 h-12 w-12 text-gray-400" />
-          <h3 className="mb-2 text-lg font-medium text-gray-900">컴포넌트 ID가 없습니다</h3>
-          <p className="text-sm text-gray-500">componentConfig.type이 설정되지 않았습니다.</p>
+          <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+          <h3 className="mb-2 text-lg font-medium text-foreground">컴포넌트 ID가 없습니다</h3>
+          <p className="text-sm text-muted-foreground">componentConfig.type이 설정되지 않았습니다.</p>
         </div>
       );
     }
@@ -1122,12 +1122,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     };
 
     return (
-      <div className="flex h-full flex-col border-r border-gray-200/60 bg-gradient-to-br from-slate-50 to-orange-50/30 shadow-sm">
+      <div className="flex h-full flex-col border-r border-border/60 bg-gradient-to-br from-slate-50 to-orange-50/30 shadow-sm">
         <div className="p-6">
           {/* 헤더 */}
           <div className="mb-6">
-            <h2 className="mb-1 text-lg font-semibold text-gray-900">상세 설정</h2>
-            <p className="text-sm text-gray-500">선택한 컴포넌트의 속성을 편집하세요</p>
+            <h2 className="mb-1 text-lg font-semibold text-foreground">상세 설정</h2>
+            <p className="text-sm text-muted-foreground">선택한 컴포넌트의 속성을 편집하세요</p>
           </div>
 
           {/* 컴포넌트 정보 */}
@@ -1136,14 +1136,14 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
               <span className="text-muted-foreground text-xs">
                 컴포넌트:
               </span>
-              <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentId}</span>
+              <span className="rounded bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-800">{componentId}</span>
             </div>
             {webType && currentBaseInputType && (
               <div className="flex items-center space-x-2">
                 <span className="text-muted-foreground text-xs">
                   입력 타입:
                 </span>
-                <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
+                <span className="rounded bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
                   {currentBaseInputType}
                 </span>
               </div>
@@ -1153,7 +1153,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 <span className="text-muted-foreground text-xs">
                   컬럼:
                 </span>
-                <span className="text-xs text-gray-700">{selectedComponent.columnName}</span>
+                <span className="text-xs text-foreground">{selectedComponent.columnName}</span>
               </div>
             )}
           </div>
@@ -1195,7 +1195,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             />
 
             {/* 조건부 표시 설정 (component 타입용) */}
-            <div className="space-y-4 rounded-md border border-gray-200 p-4">
+            <div className="space-y-4 rounded-md border border-border p-4">
               <ConditionalConfigPanel
                 config={selectedComponent.conditional as ConditionalConfig | undefined}
                 onChange={(newConfig) => {
@@ -1216,7 +1216,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             <Separator />
 
             {/* 테이블 데이터 자동 입력 섹션 (component 타입용) */}
-            <div className="space-y-4 rounded-md border border-gray-200 p-4">
+            <div className="space-y-4 rounded-md border border-border p-4">
               <h4 className="flex items-center gap-2 text-sm font-medium">
                 <Database className="h-4 w-4" />
                 테이블 데이터 자동 입력
@@ -1379,26 +1379,26 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
   return (
     <div className="flex h-full flex-col">
       {/* 헤더 */}
-      <div className="border-b border-gray-200 p-4">
+      <div className="border-b border-border p-4">
         <div className="flex items-center space-x-2">
           <Settings className="text-muted-foreground h-4 w-4" />
-          <h3 className="font-medium text-gray-900">상세 설정</h3>
+          <h3 className="font-medium text-foreground">상세 설정</h3>
         </div>
         <div className="mt-2 flex items-center space-x-2">
           <span className="text-muted-foreground text-xs">
             입력 타입:
           </span>
-          <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
+          <span className="rounded bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
             {currentBaseInputType}
           </span>
         </div>
-        <div className="mt-1 text-xs text-gray-500">컬럼: {widget.columnName}</div>
+        <div className="mt-1 text-xs text-muted-foreground">컬럼: {widget.columnName}</div>
       </div>
 
       {/* 세부 타입 선택 영역 */}
-      <div className="border-b border-gray-200 bg-gray-50 p-4">
+      <div className="border-b border-border bg-muted p-4">
         <div className="space-y-2">
-          <label className="block text-sm font-medium text-gray-700">세부 타입 선택</label>
+          <label className="block text-sm font-medium text-foreground">세부 타입 선택</label>
           <Select value={localDetailType} onValueChange={handleDetailTypeChange}>
             <SelectTrigger className="h-6 w-full px-2 py-0 bg-white text-xs">
               <SelectValue placeholder="세부 타입을 선택하세요" />
@@ -1408,13 +1408,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 <SelectItem key={option.value} value={option.value}>
                   <div className="flex flex-col">
                     <span className="font-medium">{option.label}</span>
-                    <span className="text-xs text-gray-500">{option.description}</span>
+                    <span className="text-xs text-muted-foreground">{option.description}</span>
                   </div>
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
-          <p className="text-xs text-gray-500">
+          <p className="text-xs text-muted-foreground">
             입력 타입 "{currentBaseInputType}"에 사용할 구체적인 형태를 선택하세요
           </p>
         </div>
@@ -1424,7 +1424,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 w-full min-w-0">
         <div className="space-y-6 w-full min-w-0">
           {/* 조건부 표시 설정 */}
-          <div className="space-y-4 rounded-md border border-gray-200 p-4">
+          <div className="space-y-4 rounded-md border border-border p-4">
             <ConditionalConfigPanel
               config={widget.conditional as ConditionalConfig | undefined}
               onChange={(newConfig) => {
@@ -1445,7 +1445,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           <Separator />
 
           {/* 자동 입력 섹션 */}
-          <div className="space-y-4 rounded-md border border-gray-200 p-4">
+          <div className="space-y-4 rounded-md border border-border p-4">
             <h4 className="text-sm font-medium flex items-center gap-2">
               <Database className="h-4 w-4" />
               🔥 테이블 데이터 자동 입력 (테스트)
diff --git a/frontend/components/screen/panels/FileComponentConfigPanel.tsx b/frontend/components/screen/panels/FileComponentConfigPanel.tsx
index 21c21956..812a4cdc 100644
--- a/frontend/components/screen/panels/FileComponentConfigPanel.tsx
+++ b/frontend/components/screen/panels/FileComponentConfigPanel.tsx
@@ -1230,8 +1230,8 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
           <div className="mt-4 p-3 bg-accent border border-primary/20 rounded-lg">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-2">
-                <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
-                <span className="text-sm font-medium text-blue-900">
+                <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
+                <span className="text-sm font-medium text-primary">
                   {uploadedFiles.length}개 파일이 임시 저장됨
                 </span>
               </div>
diff --git a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
index 83720945..e5f7e805 100644
--- a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
+++ b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
@@ -82,7 +82,7 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
       <CardContent className="space-y-3">
         {groupInfos.map((groupInfo, index) => (
           <div key={groupInfo.groupId}>
-            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2">
+            <div className="rounded-lg border border-border bg-muted p-3 space-y-2">
               {/* 그룹 헤더 */}
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
@@ -106,7 +106,7 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
                     size="sm"
                     variant="ghost"
                     onClick={() => onDeleteGroup(groupInfo.groupId)}
-                    className="h-7 px-2 text-xs text-red-600 hover:bg-red-50 hover:text-red-700"
+                    className="h-7 px-2 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -117,18 +117,18 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
               <div className="flex flex-wrap items-center gap-2 text-[11px]">
                 <div className="flex items-center gap-1">
                   {groupInfo.direction === "horizontal" ? (
-                    <ArrowRight className="h-3 w-3 text-blue-600" />
+                    <ArrowRight className="h-3 w-3 text-primary" />
                   ) : (
-                    <ArrowDown className="h-3 w-3 text-blue-600" />
+                    <ArrowDown className="h-3 w-3 text-primary" />
                   )}
-                  <span className="text-gray-600">
+                  <span className="text-muted-foreground">
                     {groupInfo.direction === "horizontal" ? "가로" : "세로"}
                   </span>
                 </div>
-                <span className="text-gray-400">•</span>
-                <span className="text-gray-600">간격 {groupInfo.gap}px</span>
-                <span className="text-gray-400">•</span>
-                <span className="text-gray-600">
+                <span className="text-muted-foreground/70">•</span>
+                <span className="text-muted-foreground">간격 {groupInfo.gap}px</span>
+                <span className="text-muted-foreground/70">•</span>
+                <span className="text-muted-foreground">
                   {groupInfo.align === "start" && "시작점"}
                   {groupInfo.align === "center" && "중앙"}
                   {groupInfo.align === "end" && "끝점"}
@@ -139,10 +139,10 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
 
               {/* 그룹 ID (디버깅용) */}
               <details className="text-[10px]">
-                <summary className="cursor-pointer text-gray-500 hover:text-gray-700">
+                <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
                   그룹 ID 보기
                 </summary>
-                <code className="mt-1 block rounded bg-gray-200 px-2 py-1 text-[9px]">
+                <code className="mt-1 block rounded bg-muted/80 px-2 py-1 text-[9px]">
                   {groupInfo.groupId}
                 </code>
               </details>
@@ -154,11 +154,11 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
                     key={button.id}
                     className="flex items-center gap-2 rounded bg-white px-2 py-1.5 text-xs"
                   >
-                    <div className="h-2 w-2 rounded-full bg-blue-500" />
+                    <div className="h-2 w-2 rounded-full bg-primary" />
                     <span className="flex-1 truncate font-medium">
                       {button.label || button.text || "버튼"}
                     </span>
-                    <code className="text-[10px] text-gray-400">{button.id.slice(-8)}</code>
+                    <code className="text-[10px] text-muted-foreground/70">{button.id.slice(-8)}</code>
                   </div>
                 ))}
               </div>
diff --git a/frontend/components/screen/panels/GridPanel.tsx b/frontend/components/screen/panels/GridPanel.tsx
index d58d9375..6f4007c4 100644
--- a/frontend/components/screen/panels/GridPanel.tsx
+++ b/frontend/components/screen/panels/GridPanel.tsx
@@ -154,7 +154,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
               opacity: gridSettings.gridOpacity || 0.5,
             }}
           >
-            <div className="bg-primary/20 flex h-16 items-center justify-center rounded border-2 border-dashed border-blue-300">
+            <div className="bg-primary/20 flex h-16 items-center justify-center rounded border-2 border-dashed border-primary/40">
               <span className="text-primary text-xs">10px 격자</span>
             </div>
           </div>
diff --git a/frontend/components/screen/panels/LayoutsPanel.tsx b/frontend/components/screen/panels/LayoutsPanel.tsx
index 57da317c..06cc902a 100644
--- a/frontend/components/screen/panels/LayoutsPanel.tsx
+++ b/frontend/components/screen/panels/LayoutsPanel.tsx
@@ -147,7 +147,7 @@ export default function LayoutsPanel({
   };
 
   return (
-    <div className={`layouts-panel h-full bg-gradient-to-br from-slate-50 to-indigo-50/30 border-r border-gray-200/60 shadow-sm ${className || ""}`}>
+    <div className={`layouts-panel h-full bg-gradient-to-br from-slate-50 to-indigo-50/30 border-r border-border/60 shadow-sm ${className || ""}`}>
       <div className="flex h-full flex-col">
         {/* 헤더 */}
         <div className="border-b p-4">
@@ -160,7 +160,7 @@ export default function LayoutsPanel({
 
           {/* 검색 */}
           <div className="relative">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
             <Input
               placeholder="레이아웃 검색..."
               value={searchTerm}
@@ -190,7 +190,7 @@ export default function LayoutsPanel({
           {/* 레이아웃 목록 */}
           <div className="flex-1 overflow-auto p-4">
             {filteredLayouts.length === 0 ? (
-              <div className="flex h-32 items-center justify-center text-center text-sm text-gray-500">
+              <div className="flex h-32 items-center justify-center text-center text-sm text-muted-foreground">
                 {searchTerm ? "검색 결과가 없습니다." : "레이아웃이 없습니다."}
               </div>
             ) : (
@@ -220,7 +220,7 @@ export default function LayoutsPanel({
                         {layout.description && (
                           <p className="line-clamp-2 text-xs text-muted-foreground">{layout.description}</p>
                         )}
-                        <div className="mt-2 text-xs text-gray-500">존 개수: {layout.defaultZones.length}개</div>
+                        <div className="mt-2 text-xs text-muted-foreground">존 개수: {layout.defaultZones.length}개</div>
                       </CardContent>
                     </Card>
                   );
diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx
index 31025238..3d014be6 100644
--- a/frontend/components/screen/panels/PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/PropertiesPanel.tsx
@@ -505,7 +505,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     return (
       <div className="flex h-full flex-col">
         {/* 헤더 */}
-        <div className="border-b border-gray-200 p-4">
+        <div className="border-b border-border p-4">
           <div className="mb-3 flex items-center justify-between">
             <div className="flex items-center space-x-2">
               <Settings className="text-muted-foreground h-5 w-5" />
@@ -546,7 +546,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
   return (
     <div className="flex h-full flex-col">
       {/* 헤더 */}
-      <div className="border-b border-gray-200 p-4">
+      <div className="border-b border-border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Settings className="text-muted-foreground h-4 w-4" />
@@ -688,7 +688,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
             <Move className="text-muted-foreground h-4 w-4" />
-            <h4 className="font-medium text-gray-900">위치 및 크기</h4>
+            <h4 className="font-medium text-foreground">위치 및 크기</h4>
           </div>
 
           <div className="grid grid-cols-2 gap-3">
@@ -716,7 +716,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "bg-accent border-blue-300 text-blue-700"
+                    ? "bg-accent border-primary/40 text-primary"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -747,7 +747,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "bg-accent border-blue-300 text-blue-700"
+                    ? "bg-accent border-primary/40 text-primary"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -882,7 +882,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                           <SelectItem key={key} value={key}>
                             <div className="flex w-full items-center justify-between gap-4">
                               <span>{info.label}</span>
-                              <span className="text-xs text-gray-500">
+                              <span className="text-xs text-muted-foreground">
                                 {info.value}/12 ({info.percentage})
                               </span>
                             </div>
@@ -893,7 +893,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
 
                   {/* 시각적 프리뷰 - 기존 UI 유지, localWidthSpan 기반 */}
                   <div className="mt-3 space-y-2">
-                    <Label className="text-xs text-gray-500">미리보기</Label>
+                    <Label className="text-xs text-muted-foreground">미리보기</Label>
                     <div className="grid h-6 grid-cols-12 gap-0.5 overflow-hidden rounded border">
                       {Array.from({ length: 12 }).map((_, i) => {
                         // localWidthSpan으로부터 활성 컬럼 계산
@@ -928,12 +928,12 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                         return (
                           <div
                             key={i}
-                            className={cn("h-full transition-colors", isActive ? "bg-blue-500" : "bg-gray-100")}
+                            className={cn("h-full transition-colors", isActive ? "bg-primary" : "bg-muted")}
                           />
                         );
                       })}
                     </div>
-                    <p className="text-center text-xs text-gray-500">
+                    <p className="text-center text-xs text-muted-foreground">
                       {(() => {
                         const spanValues: Record<string, number> = {
                           // 표준 옵션
@@ -985,9 +985,9 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                       }}
                       className="flex-1"
                     />
-                    <span className="text-sm text-gray-500">{localInputs.height || 40}px</span>
+                    <span className="text-sm text-muted-foreground">{localInputs.height || 40}px</span>
                   </div>
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     높이 자유 조절 (10px ~ 2000px, 1px 단위)
                   </p>
                 </div>
@@ -995,7 +995,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             ) : (
               <div className="bg-accent col-span-2 rounded-lg p-3 text-center">
                 <p className="text-primary text-xs">카드 레이아웃은 자동으로 크기가 계산됩니다</p>
-                <p className="mt-1 text-xs text-blue-500">카드 개수와 간격 설정은 상세설정에서 조정하세요</p>
+                <p className="mt-1 text-xs text-primary">카드 개수와 간격 설정은 상세설정에서 조정하세요</p>
               </div>
             )}
 
@@ -1028,7 +1028,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
             <Type className="text-muted-foreground h-4 w-4" />
-            <h4 className="font-medium text-gray-900">라벨 설정</h4>
+            <h4 className="font-medium text-foreground">라벨 설정</h4>
           </div>
 
           {/* 라벨 표시 토글 */}
@@ -1112,7 +1112,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 폰트 굵기
               </Label>
               <select
-                className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                 value={selectedComponent.style?.labelFontWeight || "500"}
                 onChange={(e) => onUpdateProperty("style.labelFontWeight", e.target.value)}
               >
@@ -1135,7 +1135,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 텍스트 정렬
               </Label>
               <select
-                className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                 value={selectedComponent.style?.labelTextAlign || "left"}
                 onChange={(e) => onUpdateProperty("style.labelTextAlign", e.target.value)}
               >
@@ -1173,7 +1173,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
                 <Group className="text-muted-foreground h-4 w-4" />
-                <h4 className="font-medium text-gray-900">그룹 설정</h4>
+                <h4 className="font-medium text-foreground">그룹 설정</h4>
               </div>
 
               <div>
@@ -1204,7 +1204,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
                 <Settings className="text-muted-foreground h-4 w-4" />
-                <h4 className="font-medium text-gray-900">영역 설정</h4>
+                <h4 className="font-medium text-foreground">영역 설정</h4>
               </div>
 
               <div>
@@ -1246,7 +1246,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   레이아웃 타입
                 </Label>
                 <select
-                  className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                   value={(selectedComponent as AreaComponent).layoutType}
                   onChange={(e) => onUpdateProperty("layoutType", e.target.value as AreaLayoutType)}
                 >
@@ -1309,7 +1309,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">정렬 방식</Label>
                     <select
-                      className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.justifyContent || "flex-start"}
                       onChange={(e) => onUpdateProperty("layoutConfig.justifyContent", e.target.value)}
                     >
@@ -1344,7 +1344,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">사이드바 위치</Label>
                     <select
-                      className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.sidebarPosition || "left"}
                       onChange={(e) => onUpdateProperty("layoutConfig.sidebarPosition", e.target.value)}
                     >
diff --git a/frontend/components/screen/panels/ResolutionPanel.tsx b/frontend/components/screen/panels/ResolutionPanel.tsx
index c7aecfd4..f801541e 100644
--- a/frontend/components/screen/panels/ResolutionPanel.tsx
+++ b/frontend/components/screen/panels/ResolutionPanel.tsx
@@ -70,7 +70,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
       case "desktop":
         return "text-primary";
       case "tablet":
-        return "text-green-600";
+        return "text-emerald-600";
       case "mobile":
         return "text-purple-600";
       default:
@@ -89,7 +89,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
           </SelectTrigger>
           <SelectContent>
             {/* Desktop */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">데스크톱</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">데스크톱</div>
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
@@ -100,18 +100,18 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             ))}
 
             {/* Tablet */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">태블릿</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">태블릿</div>
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
-                  <Tablet className="h-4 w-4 text-green-600" />
+                  <Tablet className="h-4 w-4 text-emerald-600" />
                   <span>{resolution.name}</span>
                 </div>
               </SelectItem>
             ))}
 
             {/* Mobile */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">모바일</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">모바일</div>
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
@@ -122,7 +122,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             ))}
 
             {/* Custom */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">사용자 정의</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">사용자 정의</div>
             <SelectItem value="custom">
               <div className="flex items-center space-x-2">
                 <Settings className="text-muted-foreground h-4 w-4" />
@@ -135,7 +135,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
 
       {/* 사용자 정의 해상도 */}
       {selectedPreset === "custom" && (
-        <div className="space-y-3 rounded-lg border bg-gray-50 p-3">
+        <div className="space-y-3 rounded-lg border bg-muted p-3">
           <Label className="text-sm font-medium">사용자 정의 해상도</Label>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
diff --git a/frontend/components/screen/panels/ResponsiveConfigPanel.tsx b/frontend/components/screen/panels/ResponsiveConfigPanel.tsx
index 1565b58e..40bb7351 100644
--- a/frontend/components/screen/panels/ResponsiveConfigPanel.tsx
+++ b/frontend/components/screen/panels/ResponsiveConfigPanel.tsx
@@ -53,7 +53,7 @@ export const ResponsiveConfigPanel: React.FC<ResponsiveConfigPanelProps> = ({ co
           <Label htmlFor="smartDefaults">스마트 기본값 사용 (권장)</Label>
         </div>
 
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-muted-foreground">
           스마트 기본값은 컴포넌트 크기에 따라 자동으로 반응형 레이아웃을 생성합니다.
         </div>
 
@@ -122,7 +122,7 @@ export const ResponsiveConfigPanel: React.FC<ResponsiveConfigPanelProps> = ({ co
                     });
                   }}
                 />
-                <div className="text-xs text-gray-500">작은 숫자가 먼저 표시됩니다.</div>
+                <div className="text-xs text-muted-foreground">작은 숫자가 먼저 표시됩니다.</div>
               </div>
 
               {/* 숨김 */}
diff --git a/frontend/components/screen/panels/RowSettingsPanel.tsx b/frontend/components/screen/panels/RowSettingsPanel.tsx
index 49a3d05f..f4d44ad5 100644
--- a/frontend/components/screen/panels/RowSettingsPanel.tsx
+++ b/frontend/components/screen/panels/RowSettingsPanel.tsx
@@ -23,7 +23,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
       <div className="flex items-center gap-2">
         <Rows className="text-primary h-5 w-5" />
         <h3 className="text-lg font-semibold">행 설정</h3>
-        <span className="text-sm text-gray-500">#{row.rowIndex + 1}</span>
+        <span className="text-sm text-muted-foreground">#{row.rowIndex + 1}</span>
       </div>
 
       <Separator />
@@ -49,7 +49,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
         {/* 고정 높이 입력 */}
         {row.height === "fixed" && (
           <div>
-            <Label className="text-xs text-gray-500">높이 (px)</Label>
+            <Label className="text-xs text-muted-foreground">높이 (px)</Label>
             <Input
               type="number"
               value={row.fixedHeight || 100}
@@ -66,7 +66,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
         {/* 최소 높이 입력 */}
         {row.height === "min" && (
           <div>
-            <Label className="text-xs text-gray-500">최소 높이 (px)</Label>
+            <Label className="text-xs text-muted-foreground">최소 높이 (px)</Label>
             <Input
               type="number"
               value={row.minHeight || 50}
@@ -83,7 +83,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
         {/* 최대 높이 입력 */}
         {row.height === "max" && (
           <div>
-            <Label className="text-xs text-gray-500">최대 높이 (px)</Label>
+            <Label className="text-xs text-muted-foreground">최대 높이 (px)</Label>
             <Input
               type="number"
               value={row.maxHeight || 500}
@@ -116,7 +116,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
             </Button>
           ))}
         </div>
-        <p className="text-xs text-gray-500">현재: {GAP_PRESETS[row.gap].pixels}</p>
+        <p className="text-xs text-muted-foreground">현재: {GAP_PRESETS[row.gap].pixels}</p>
       </div>
 
       <Separator />
@@ -137,7 +137,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
             </Button>
           ))}
         </div>
-        <p className="text-xs text-gray-500">현재: {GAP_PRESETS[row.padding].pixels}</p>
+        <p className="text-xs text-muted-foreground">현재: {GAP_PRESETS[row.padding].pixels}</p>
       </div>
 
       <Separator />
@@ -145,7 +145,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
       {/* 수평 정렬 */}
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <AlignHorizontalJustifyCenter className="h-4 w-4 text-gray-600" />
+          <AlignHorizontalJustifyCenter className="h-4 w-4 text-muted-foreground" />
           <Label className="text-sm font-medium">수평 정렬</Label>
         </div>
         <div className="grid grid-cols-2 gap-2">
@@ -185,7 +185,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
       {/* 수직 정렬 */}
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <AlignVerticalJustifyCenter className="h-4 w-4 text-gray-600" />
+          <AlignVerticalJustifyCenter className="h-4 w-4 text-muted-foreground" />
           <Label className="text-sm font-medium">수직 정렬</Label>
         </div>
         <div className="grid grid-cols-2 gap-2">
diff --git a/frontend/components/screen/panels/TablesPanel.tsx b/frontend/components/screen/panels/TablesPanel.tsx
index cc5da2fc..2d1da469 100644
--- a/frontend/components/screen/panels/TablesPanel.tsx
+++ b/frontend/components/screen/panels/TablesPanel.tsx
@@ -72,16 +72,16 @@ const getWidgetIcon = (widgetType: WebType) => {
       return <Type className="text-primary h-3 w-3" />;
     case "number":
     case "decimal":
-      return <Hash className="h-3 w-3 text-green-600" />;
+      return <Hash className="h-3 w-3 text-emerald-600" />;
     case "date":
     case "datetime":
       return <Calendar className="h-3 w-3 text-purple-600" />;
     case "select":
     case "dropdown":
-      return <List className="h-3 w-3 text-orange-600" />;
+      return <List className="h-3 w-3 text-amber-600" />;
     case "textarea":
     case "text_area":
-      return <AlignLeft className="h-3 w-3 text-indigo-600" />;
+      return <AlignLeft className="h-3 w-3 text-primary" />;
     case "boolean":
     case "checkbox":
       return <CheckSquare className="text-primary h-3 w-3" />;
@@ -90,9 +90,9 @@ const getWidgetIcon = (widgetType: WebType) => {
     case "entity":
       return <Building className="h-3 w-3 text-cyan-600" />;
     case "file":
-      return <File className="h-3 w-3 text-yellow-600" />;
+      return <File className="h-3 w-3 text-amber-600" />;
     default:
-      return <Type className="h-3 w-3 text-gray-500" />;
+      return <Type className="h-3 w-3 text-muted-foreground" />;
   }
 };
 
@@ -301,21 +301,21 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 {/* 검색 */}
                 <div className="border-b p-2">
                   <div className="relative">
-                    <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                    <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
                     <input
                       type="text"
                       placeholder="테이블 검색..."
                       value={tableSearchTerm}
                       onChange={(e) => setTableSearchTerm(e.target.value)}
                       autoFocus
-                      className="w-full rounded-md border px-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      className="w-full rounded-md border px-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                     />
                     {tableSearchTerm && (
                       <button
                         onClick={() => setTableSearchTerm("")}
                         className="absolute right-2 top-1/2 -translate-y-1/2"
                       >
-                        <X className="h-3.5 w-3.5 text-gray-400" />
+                        <X className="h-3.5 w-3.5 text-muted-foreground/70" />
                       </button>
                     )}
                   </div>
@@ -324,9 +324,9 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 {/* 테이블 목록 */}
                 <div className="max-h-60 overflow-y-auto">
                   {loadingAllTables ? (
-                    <div className="p-4 text-center text-sm text-gray-500">로드 중...</div>
+                    <div className="p-4 text-center text-sm text-muted-foreground">로드 중...</div>
                   ) : filteredAllTables.length === 0 ? (
-                    <div className="p-4 text-center text-sm text-gray-500">
+                    <div className="p-4 text-center text-sm text-muted-foreground">
                       {tableSearchTerm ? "검색 결과 없음" : "테이블 없음"}
                     </div>
                   ) : (
@@ -334,12 +334,12 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                       <button
                         key={t.tableName}
                         onClick={() => handleTableSelect(t.tableName)}
-                        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-100"
+                        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-muted"
                       >
-                        <Database className="h-3.5 w-3.5 text-blue-600" />
+                        <Database className="h-3.5 w-3.5 text-primary" />
                         <div className="min-w-0 flex-1">
                           <div className="truncate font-medium">{t.displayName}</div>
-                          <div className="truncate text-xs text-gray-500">{t.tableName}</div>
+                          <div className="truncate text-xs text-muted-foreground">{t.tableName}</div>
                         </div>
                       </button>
                     ))
@@ -481,7 +481,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                                 </div>
                               </div>
                               <div className="flex flex-shrink-0 items-center gap-1">
-                                <Badge variant="secondary" className="h-4 border-gray-300 bg-gray-100 px-1 text-[9px] text-gray-600">
+                                <Badge variant="secondary" className="h-4 border-input bg-muted px-1 text-[9px] text-muted-foreground">
                                   읽기
                                 </Badge>
                                 <Badge variant="outline" className="h-4 border-cyan-300 px-1.5 text-[10px]">
diff --git a/frontend/components/screen/panels/TemplatesPanel.tsx b/frontend/components/screen/panels/TemplatesPanel.tsx
index b869410d..e93ce6d5 100644
--- a/frontend/components/screen/panels/TemplatesPanel.tsx
+++ b/frontend/components/screen/panels/TemplatesPanel.tsx
@@ -487,17 +487,17 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
   });
 
   return (
-    <div className="flex h-full flex-col bg-slate-50 p-6 border-r border-gray-200/60 shadow-sm">
+    <div className="flex h-full flex-col bg-slate-50 p-6 border-r border-border/60 shadow-sm">
       {/* 헤더 */}
       <div className="mb-6">
-        <h2 className="text-lg font-semibold text-gray-900 mb-1">템플릿</h2>
-        <p className="text-sm text-gray-500">캔버스로 드래그하여 화면을 구성하세요</p>
+        <h2 className="text-lg font-semibold text-foreground mb-1">템플릿</h2>
+        <p className="text-sm text-muted-foreground">캔버스로 드래그하여 화면을 구성하세요</p>
       </div>
 
       {/* 검색 */}
       <div className="space-y-4">
         <div className="relative">
-          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
           <Input
             placeholder="템플릿 검색..."
             value={searchTerm}
@@ -541,14 +541,14 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
         {isLoading ? (
           <div className="flex h-32 items-center justify-center">
             <LoadingSpinner />
-            <span className="ml-2 text-sm text-gray-500">템플릿 로딩 중...</span>
+            <span className="ml-2 text-sm text-muted-foreground">템플릿 로딩 중...</span>
           </div>
         ) : filteredTemplates.length === 0 ? (
-          <div className="flex h-32 items-center justify-center text-center text-gray-500">
+          <div className="flex h-32 items-center justify-center text-center text-muted-foreground">
             <div className="p-8">
-              <FileText className="mx-auto mb-3 h-12 w-12 text-gray-300" />
+              <FileText className="mx-auto mb-3 h-12 w-12 text-muted-foreground/50" />
               <p className="text-sm font-medium text-muted-foreground">템플릿을 찾을 수 없습니다</p>
-              <p className="text-xs text-gray-400 mt-1">검색어나 필터를 조정해보세요</p>
+              <p className="text-xs text-muted-foreground/70 mt-1">검색어나 필터를 조정해보세요</p>
             </div>
           </div>
         ) : (
@@ -567,27 +567,27 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
                 e.currentTarget.style.opacity = '1';
                 e.currentTarget.style.transform = 'none';
               }}
-              className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-blue-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
+              className="group cursor-grab rounded-lg border border-border/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-primary/40/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
             >
               <div className="flex items-start space-x-4">
-                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-700 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
+                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-primary/10 to-primary/5 text-primary shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
                   {template.icon}
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-start justify-between mb-2">
-                    <h4 className="font-semibold text-gray-900 text-sm leading-tight">{template.name}</h4>
-                    <Badge variant="secondary" className="text-xs bg-blue-50 text-blue-600 border-0 ml-2 px-2 py-1 rounded-full font-medium">
+                    <h4 className="font-semibold text-foreground text-sm leading-tight">{template.name}</h4>
+                    <Badge variant="secondary" className="text-xs bg-primary/10 text-primary border-0 ml-2 px-2 py-1 rounded-full font-medium">
                       {template.components.length}
                     </Badge>
                   </div>
-                  <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed mb-3">{template.description}</p>
+                  <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed mb-3">{template.description}</p>
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-2 text-xs text-gray-400">
-                      <span className="bg-gradient-to-r from-blue-100 to-indigo-100 px-3 py-1 rounded-full font-medium text-blue-700 shadow-sm">
+                    <div className="flex items-center space-x-2 text-xs text-muted-foreground/70">
+                      <span className="bg-gradient-to-r from-primary/10 to-primary/5 px-3 py-1 rounded-full font-medium text-primary shadow-sm">
                         {template.defaultSize.width}×{template.defaultSize.height}
                       </span>
                     </div>
-                    <span className="text-xs font-medium text-primary capitalize bg-gradient-to-r from-blue-50 to-indigo-50 px-3 py-1 rounded-full border border-primary/20/50">
+                    <span className="text-xs font-medium text-primary capitalize bg-gradient-to-r from-primary/5 to-indigo-50 px-3 py-1 rounded-full border border-primary/20/50">
                       {template.category}
                     </span>
                   </div>
@@ -599,12 +599,12 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
       </div>
 
       {/* 도움말 */}
-      <div className="rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100/60 p-4 mt-6">
+      <div className="rounded-xl bg-gradient-to-r from-primary/5 to-indigo-50 border border-primary/10/60 p-4 mt-6">
         <div className="flex items-start space-x-3">
           <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/20 text-primary">
             <Info className="h-4 w-4" />
           </div>
-          <div className="text-xs text-blue-800">
+          <div className="text-xs text-primary">
             <p className="font-semibold mb-1">사용 방법</p>
             <p className="text-primary leading-relaxed">템플릿을 캔버스로 드래그하여 빠르게 화면을 구성하세요.</p>
           </div>
diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index 90e44c8e..c8d8c4f7 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -1333,7 +1333,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
 
           {/* 🆕 테이블 데이터 자동 입력 (모든 widget 컴포넌트) */}
           <Separator />
-          <div className="space-y-3 border-4 border-red-500 bg-yellow-100 p-4">
+          <div className="space-y-3 border-4 border-destructive bg-amber-100 p-4">
             <div className="flex items-center gap-2">
               <Database className="text-primary h-4 w-4" />
               <h4 className="text-xs font-semibold">테이블 데이터 자동 입력</h4>
@@ -1502,7 +1502,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                   <Zap className="text-primary h-3 w-3" />
                   <h4 className="text-xs font-semibold">조건부 표시</h4>
                 </div>
-                <div className="rounded-md border border-gray-200 p-2">
+                <div className="rounded-md border border-border p-2">
                   <ConditionalConfigPanel
                     config={
                       (selectedComponent as any).conditional || {
diff --git a/frontend/components/screen/panels/WebTypeConfigPanel.tsx b/frontend/components/screen/panels/WebTypeConfigPanel.tsx
index da190e91..015ba162 100644
--- a/frontend/components/screen/panels/WebTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/WebTypeConfigPanel.tsx
@@ -98,7 +98,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
                   onUpdateConfig({ ...config, options: newOptions });
                 }}
               >
-                <Trash2 className="h-4 w-4 text-red-500" />
+                <Trash2 className="h-4 w-4 text-destructive" />
               </Button>
             </div>
           ))}
@@ -150,7 +150,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <Label htmlFor="min" className="text-xs text-gray-500">
+            <Label htmlFor="min" className="text-xs text-muted-foreground">
               최소값
             </Label>
             <Input
@@ -167,7 +167,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
             />
           </div>
           <div>
-            <Label htmlFor="max" className="text-xs text-gray-500">
+            <Label htmlFor="max" className="text-xs text-muted-foreground">
               최대값
             </Label>
             <Input
@@ -186,7 +186,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
         </div>
 
         <div>
-          <Label htmlFor="step" className="text-xs text-gray-500">
+          <Label htmlFor="step" className="text-xs text-muted-foreground">
             증감 단위
           </Label>
           <Input
@@ -218,7 +218,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
         <Label className="text-sm font-medium">날짜/시간 형식 설정</Label>
 
         <div>
-          <Label htmlFor="format" className="text-xs text-gray-500">
+          <Label htmlFor="format" className="text-xs text-muted-foreground">
             표시 형식
           </Label>
           <Select
@@ -293,7 +293,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <Label htmlFor="minLength" className="text-xs text-gray-500">
+            <Label htmlFor="minLength" className="text-xs text-muted-foreground">
               최소 길이
             </Label>
             <Input
@@ -310,7 +310,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
             />
           </div>
           <div>
-            <Label htmlFor="maxLength" className="text-xs text-gray-500">
+            <Label htmlFor="maxLength" className="text-xs text-muted-foreground">
               최대 길이
             </Label>
             <Input
@@ -330,7 +330,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
         {(webType === "text" || webType === "textarea") && (
           <div>
-            <Label htmlFor="pattern" className="text-xs text-gray-500">
+            <Label htmlFor="pattern" className="text-xs text-muted-foreground">
               정규식 패턴 (선택)
             </Label>
             <Input
@@ -344,7 +344,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
                 });
               }}
             />
-            <p className="mt-1 text-xs text-gray-400">입력값 검증에 사용할 정규식 패턴</p>
+            <p className="mt-1 text-xs text-muted-foreground/70">입력값 검증에 사용할 정규식 패턴</p>
           </div>
         )}
       </div>
@@ -362,7 +362,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
         <Label className="text-sm font-medium">파일 업로드 설정</Label>
 
         <div>
-          <Label htmlFor="accept" className="text-xs text-gray-500">
+          <Label htmlFor="accept" className="text-xs text-muted-foreground">
             허용 파일 타입
           </Label>
           <Input
@@ -373,11 +373,11 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
               onUpdateConfig({ ...config, accept: e.target.value });
             }}
           />
-          <p className="mt-1 text-xs text-gray-400">쉼표로 구분된 파일 확장자 또는 MIME 타입</p>
+          <p className="mt-1 text-xs text-muted-foreground/70">쉼표로 구분된 파일 확장자 또는 MIME 타입</p>
         </div>
 
         <div>
-          <Label htmlFor="maxSize" className="text-xs text-gray-500">
+          <Label htmlFor="maxSize" className="text-xs text-muted-foreground">
             최대 파일 크기 (MB)
           </Label>
           <Input
@@ -412,7 +412,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
   // 기본 메시지 (설정 불필요)
   return (
-    <div className="space-y-2 text-sm text-gray-500">
+    <div className="space-y-2 text-sm text-muted-foreground">
       <p>이 웹타입은 추가 설정이 필요하지 않습니다.</p>
     </div>
   );
diff --git a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
index b483d74d..9002b69e 100644
--- a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
@@ -190,8 +190,8 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2 flex items-center space-x-2">
           {localValues.labelPosition === "left" && localValues.checkboxText && (
             <span className="text-xs">{localValues.checkboxText}</span>
@@ -210,7 +210,7 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
           )}
           {localValues.labelPosition === "left" && <Checkbox checked={localValues.defaultChecked} />}
         </div>
-        <div className="mt-2 text-xs text-gray-500">
+        <div className="mt-2 text-xs text-muted-foreground">
           체크됨: {localValues.trueValue}, 해제됨: {localValues.falseValue}
           {localValues.indeterminate && ", 불확정 상태 지원"}
         </div>
@@ -219,8 +219,8 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
       {/* 안내 메시지 */}
       {localValues.indeterminate && (
         <div className="bg-accent rounded-md p-3">
-          <div className="text-sm font-medium text-blue-900">불확정 상태</div>
-          <div className="mt-1 text-xs text-blue-800">
+          <div className="text-sm font-medium text-primary">불확정 상태</div>
+          <div className="mt-1 text-xs text-primary">
             체크박스가 부분적으로 선택된 상태를 나타낼 수 있습니다. 주로 트리 구조에서 일부 하위 항목만 선택된 경우에
             사용됩니다.
           </div>
diff --git a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
index 08b3fd1a..414b3927 100644
--- a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
@@ -167,7 +167,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
             step={1}
             className="w-full"
           />
-          <div className="mt-1 flex justify-between text-xs text-gray-500">
+          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
             <span>10px</span>
             <span>24px</span>
           </div>
@@ -240,18 +240,18 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <div
             className={`rounded border p-3 font-mono ${
-              localValues.theme === "dark" ? "bg-gray-900 text-white" : "bg-white text-black"
+              localValues.theme === "dark" ? "bg-foreground text-white" : "bg-white text-black"
             }`}
             style={{ fontSize: `${localValues.fontSize}px` }}
           >
             <div className="flex">
               {localValues.lineNumbers && (
-                <div className="mr-3 text-gray-400">
+                <div className="mr-3 text-muted-foreground/70">
                   <div>1</div>
                   <div>2</div>
                   <div>3</div>
@@ -263,7 +263,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
             </div>
           </div>
         </div>
-        <div className="mt-2 text-xs text-gray-500">
+        <div className="mt-2 text-xs text-muted-foreground">
           언어: {languages.find((l) => l.value === localValues.language)?.label}, 테마:{" "}
           {themes.find((t) => t.value === localValues.theme)?.label}, 폰트: {localValues.fontSize}px
           {localValues.readOnly && ", 읽기전용"}
@@ -272,8 +272,8 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
 
       {/* 안내 메시지 */}
       <div className="bg-accent rounded-md p-3">
-        <div className="text-sm font-medium text-blue-900">코드 에디터 설정</div>
-        <div className="mt-1 text-xs text-blue-800">
+        <div className="text-sm font-medium text-primary">코드 에디터 설정</div>
+        <div className="mt-1 text-xs text-primary">
           • 문법 강조 표시는 선택된 언어에 따라 적용됩니다
           <br />
           • 자동 포맷팅은 저장 시 또는 단축키로 실행됩니다
diff --git a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
index 1cae7dce..c4ade093 100644
--- a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
@@ -192,8 +192,8 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         {/* 현재 선택된 표시 컬럼들 */}
         <div className="space-y-2">
           {localValues.displayColumns.map((column, index) => (
-            <div key={index} className="flex items-center space-x-2 rounded border bg-gray-50 p-2">
-              <Database className="h-4 w-4 text-gray-500" />
+            <div key={index} className="flex items-center space-x-2 rounded border bg-muted p-2">
+              <Database className="h-4 w-4 text-muted-foreground" />
               <span className="flex-1 text-sm font-medium">{column}</span>
               <Button size="sm" variant="outline" onClick={() => removeDisplayColumn(index)}>
                 <X className="h-3 w-3" />
@@ -202,7 +202,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
           ))}
 
           {localValues.displayColumns.length === 0 && (
-            <div className="text-sm text-gray-500 italic">표시할 컬럼을 추가해주세요</div>
+            <div className="text-sm text-muted-foreground italic">표시할 컬럼을 추가해주세요</div>
           )}
         </div>
 
@@ -224,7 +224,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
           </Button>
         </div>
 
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-muted-foreground">
           • 여러 컬럼을 선택하면 "{localValues.separator || " - "}"로 구분하여 표시됩니다
           <br />• 예: 이름{localValues.separator || " - "}부서명
         </div>
@@ -331,7 +331,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
                 placeholder="필드명"
                 className="flex-1"
               />
-              <span className="text-gray-500">=</span>
+              <span className="text-muted-foreground">=</span>
               <Input
                 value={value as string}
                 onChange={(e) => updateFilter(field, field, e.target.value)}
@@ -346,14 +346,14 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         </div>
 
         {/* 새 필터 추가 */}
-        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-gray-300 p-2">
+        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-input p-2">
           <Input
             value={newFilter.field}
             onChange={(e) => setNewFilter((prev) => ({ ...prev, field: e.target.value }))}
             placeholder="필드명"
             className="flex-1"
           />
-          <span className="text-gray-500">=</span>
+          <span className="text-muted-foreground">=</span>
           <Input
             value={newFilter.value}
             onChange={(e) => setNewFilter((prev) => ({ ...prev, value: e.target.value }))}
@@ -365,22 +365,22 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
           </Button>
         </div>
 
-        <div className="text-xs text-gray-500">총 {Object.keys(safeConfig.filters || {}).length}개 필터</div>
+        <div className="text-xs text-muted-foreground">총 {Object.keys(safeConfig.filters || {}).length}개 필터</div>
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <div className="flex items-center space-x-2 rounded border bg-white p-2">
-            <Search className="h-4 w-4 text-gray-400" />
+            <Search className="h-4 w-4 text-muted-foreground/70" />
             <div className="text-muted-foreground flex-1 text-xs">
               {localValues.placeholder || `${localValues.referenceTable || "엔터티"}를 선택하세요`}
             </div>
-            <Database className="h-4 w-4 text-gray-400" />
+            <Database className="h-4 w-4 text-muted-foreground/70" />
           </div>
         </div>
-        <div className="mt-2 text-xs text-gray-500">
+        <div className="mt-2 text-xs text-muted-foreground">
           참조테이블: {localValues.referenceTable || "없음"}, 조인컬럼: {localValues.referenceColumn}
           <br />
           표시컬럼:{" "}
@@ -392,8 +392,8 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
 
       {/* 안내 메시지 */}
       <div className="bg-accent rounded-md p-3">
-        <div className="text-sm font-medium text-blue-900">엔터티 타입 설정 가이드</div>
-        <div className="mt-1 text-xs text-blue-800">
+        <div className="text-sm font-medium text-primary">엔터티 타입 설정 가이드</div>
+        <div className="mt-1 text-xs text-primary">
           • <strong>참조 테이블</strong>: 데이터를 가져올 다른 테이블 이름
           <br />• <strong>조인 컬럼</strong>: 테이블 간 연결에 사용할 기준 컬럼 (보통 ID)
           <br />• <strong>표시 컬럼</strong>: 사용자에게 보여질 컬럼들 (여러 개 가능)
diff --git a/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
index 6ab97dad..da521dd5 100644
--- a/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
@@ -150,7 +150,7 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
           placeholder="예: image/*,.pdf,.docx"
           className="mt-1"
         />
-        <div className="mt-1 text-xs text-gray-500">MIME 타입 또는 파일 확장자를 쉼표로 구분하여 입력</div>
+        <div className="mt-1 text-xs text-muted-foreground">MIME 타입 또는 파일 확장자를 쉼표로 구분하여 입력</div>
       </div>
 
       {/* 허용 확장자 관리 */}
@@ -203,7 +203,7 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
             step={0.1}
             className="w-full"
           />
-          <div className="mt-1 flex justify-between text-xs text-gray-500">
+          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
             <span>100 KB</span>
             <span>100 MB</span>
           </div>
@@ -225,7 +225,7 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
               step={1}
               className="w-full"
             />
-            <div className="mt-1 flex justify-between text-xs text-gray-500">
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
               <span>1</span>
               <span>20</span>
             </div>
@@ -258,19 +258,19 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <div
             className={`rounded border-2 border-dashed p-4 text-center ${
-              localValues.dragDrop ? "border-blue-300 bg-accent" : "border-gray-300"
+              localValues.dragDrop ? "border-primary/40 bg-accent" : "border-input"
             }`}
           >
-            <Upload className="mx-auto h-8 w-8 text-gray-400" />
+            <Upload className="mx-auto h-8 w-8 text-muted-foreground/70" />
             <div className="mt-2 text-sm text-muted-foreground">
               {localValues.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
             </div>
-            <div className="mt-1 text-xs text-gray-500">
+            <div className="mt-1 text-xs text-muted-foreground">
               {localValues.accept && `허용 타입: ${localValues.accept}`}
               {(safeConfig.allowedExtensions || []).length > 0 && (
                 <div>확장자: {(safeConfig.allowedExtensions || []).join(", ")}</div>
@@ -284,8 +284,8 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
 
       {/* 안내 메시지 */}
       <div className="rounded-md bg-accent p-3">
-        <div className="text-sm font-medium text-blue-900">파일 업로드 설정</div>
-        <div className="mt-1 text-xs text-blue-800">
+        <div className="text-sm font-medium text-primary">파일 업로드 설정</div>
+        <div className="mt-1 text-xs text-primary">
           • Accept 속성은 파일 선택 다이얼로그에서 필터링됩니다
           <br />
           • 허용 확장자는 추가 검증에 사용됩니다
diff --git a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
index 9d856612..05fed645 100644
--- a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
@@ -150,7 +150,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           레이아웃 방향
         </Label>
         <select
-          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+          className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
           value={localValues.layout}
           onChange={(e) => updateConfig("layout", e.target.value)}
         >
@@ -167,7 +167,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           기본 선택값
         </Label>
         <select
-          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+          className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
           value={localValues.defaultValue || "__none__"}
           onChange={(e) => updateConfig("defaultValue", e.target.value)}
         >
@@ -220,7 +220,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
         </div>
 
         {/* 새 옵션 추가 */}
-        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-gray-300 p-2">
+        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-input p-2">
           <Input
             value={newOption.label}
             onChange={(e) => setNewOption((prev) => ({ ...prev, label: e.target.value }))}
@@ -238,13 +238,13 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           </Button>
         </div>
 
-        <div className="text-xs text-gray-500">총 {(safeConfig.options || []).length}개 옵션</div>
+        <div className="text-xs text-muted-foreground">총 {(safeConfig.options || []).length}개 옵션</div>
       </div>
 
       {/* 미리보기 */}
       {(safeConfig.options || []).length > 0 && (
-        <div className="rounded-md border bg-gray-50 p-3">
-          <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+        <div className="rounded-md border bg-muted p-3">
+          <Label className="text-sm font-medium text-foreground">미리보기</Label>
           <div className="mt-2">
             <RadioGroup
               value={localValues.defaultValue}
@@ -266,7 +266,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
               ))}
             </RadioGroup>
           </div>
-          <div className="mt-2 text-xs text-gray-500">
+          <div className="mt-2 text-xs text-muted-foreground">
             레이아웃:{" "}
             {localValues.layout === "vertical" ? "세로" : localValues.layout === "horizontal" ? "가로" : "격자"},
             기본값: {localValues.defaultValue || "없음"}
@@ -278,8 +278,8 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
       {/* 안내 메시지 */}
       {localValues.allowNone && (
         <div className="rounded-md bg-accent p-3">
-          <div className="text-sm font-medium text-blue-900">선택 해제 허용</div>
-          <div className="mt-1 text-xs text-blue-800">
+          <div className="text-sm font-medium text-primary">선택 해제 허용</div>
+          <div className="mt-1 text-xs text-primary">
             사용자가 같은 라디오 버튼을 다시 클릭하여 선택을 해제할 수 있습니다.
           </div>
         </div>
diff --git a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
index 99dd7712..b2f9a98a 100644
--- a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
@@ -281,7 +281,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({
           className="mt-1"
           placeholder="예: ^[0-9]{3}-[0-9]{4}-[0-9]{4}$"
         />
-        <div className="mt-1 text-xs text-gray-500">JavaScript 정규식 패턴을 입력하세요 (선택사항)</div>
+        <div className="mt-1 text-xs text-muted-foreground">JavaScript 정규식 패턴을 입력하세요 (선택사항)</div>
       </div>
 
       {/* 플레이스홀더 */}
@@ -455,8 +455,8 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({
             )}
 
             <div className="bg-accent rounded-md p-3">
-              <div className="text-sm font-medium text-blue-900">자동입력 안내</div>
-              <div className="mt-1 text-xs text-blue-800">
+              <div className="text-sm font-medium text-primary">자동입력 안내</div>
+              <div className="mt-1 text-xs text-primary">
                 자동입력이 활성화되면 해당 필드는 읽기 전용이 되며, 설정된 타입에 따라 자동으로 값이 입력됩니다.
               </div>
             </div>
@@ -479,8 +479,8 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({
       {/* 형식별 안내 메시지 */}
       {localValues.format !== "none" && (
         <div className="bg-accent rounded-md p-3">
-          <div className="text-sm font-medium text-blue-900">형식 안내</div>
-          <div className="mt-1 text-xs text-blue-800">
+          <div className="text-sm font-medium text-primary">형식 안내</div>
+          <div className="mt-1 text-xs text-primary">
             {localValues.format === "email" && "유효한 이메일 주소를 입력해야 합니다 (예: user@example.com)"}
             {localValues.format === "phone" && "전화번호 형식으로 입력해야 합니다 (예: 010-1234-5678)"}
             {localValues.format === "url" && "유효한 URL을 입력해야 합니다 (예: https://example.com)"}
diff --git a/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
index 17fa6760..a0aec716 100644
--- a/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
@@ -107,7 +107,7 @@ export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = (
             step={1}
             className="w-full"
           />
-          <div className="mt-1 flex justify-between text-xs text-gray-500">
+          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
             <span>1</span>
             <span>20</span>
           </div>
@@ -198,11 +198,11 @@ export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = (
       </div>
 
       {/* 설정 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <textarea
-            className="w-full rounded border border-gray-300 p-2 text-xs"
+            className="w-full rounded border border-input p-2 text-xs"
             rows={localValues.rows}
             placeholder={localValues.placeholder || "텍스트를 입력하세요..."}
             style={{
@@ -212,7 +212,7 @@ export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = (
             readOnly
           />
         </div>
-        <div className="mt-1 text-xs text-gray-500">
+        <div className="mt-1 text-xs text-muted-foreground">
           행 수: {localValues.rows},{localValues.minLength && ` 최소: ${localValues.minLength}자,`}
           {localValues.maxLength && ` 최대: ${localValues.maxLength}자,`}
           {localValues.resizable ? " 크기조정 가능" : " 크기고정"}
diff --git a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
index 67c11171..ce7f4bba 100644
--- a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
+++ b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
@@ -207,7 +207,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
                     onDragEnd={handleDragEnd}
                     className={`flex items-center gap-3 rounded-lg border p-3 transition-colors cursor-move ${
                       isFrozen 
-                        ? "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-800" 
+                        ? "bg-primary/10 border-primary/20 dark:bg-primary/15/30 dark:border-primary/30" 
                         : "bg-background hover:bg-muted/50"
                     }`}
                   >
@@ -227,7 +227,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
 
                     {/* 가시성/틀고정 아이콘 */}
                     {isFrozen ? (
-                      <Lock className="h-4 w-4 shrink-0 text-blue-500" />
+                      <Lock className="h-4 w-4 shrink-0 text-primary" />
                     ) : col.visible ? (
                       <Eye className="h-4 w-4 shrink-0 text-primary" />
                     ) : (
@@ -241,7 +241,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
                           {columnMeta?.columnLabel}
                         </span>
                         {isFrozen && (
-                          <span className="text-[10px] text-blue-600 dark:text-blue-400 font-medium">
+                          <span className="text-[10px] text-primary dark:text-primary/80 font-medium">
                             (고정)
                           </span>
                         )}
diff --git a/frontend/components/screen/table-options/TableSettingsModal.tsx b/frontend/components/screen/table-options/TableSettingsModal.tsx
index 4f9325cb..3d37c153 100644
--- a/frontend/components/screen/table-options/TableSettingsModal.tsx
+++ b/frontend/components/screen/table-options/TableSettingsModal.tsx
@@ -388,7 +388,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
                         onDragEnd={() => setDraggedColumnIndex(null)}
                         className={`flex cursor-move items-center gap-3 rounded-lg border p-3 transition-colors ${
                           isFrozen
-                            ? "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/30"
+                            ? "border-primary/20 bg-primary/10 dark:border-primary/30 dark:bg-primary/15/30"
                             : "bg-background hover:bg-muted/50"
                         }`}
                       >
@@ -405,7 +405,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
 
                         {/* 가시성/틀고정 아이콘 */}
                         {isFrozen ? (
-                          <Lock className="h-4 w-4 shrink-0 text-blue-500" />
+                          <Lock className="h-4 w-4 shrink-0 text-primary" />
                         ) : col.visible ? (
                           <Eye className="text-primary h-4 w-4 shrink-0" />
                         ) : (
@@ -419,7 +419,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
                               {originalCol.columnLabel}
                             </span>
                             {isFrozen && (
-                              <span className="text-[10px] font-medium text-blue-600 dark:text-blue-400">
+                              <span className="text-[10px] font-medium text-primary dark:text-primary/80">
                                 (고정)
                               </span>
                             )}
diff --git a/frontend/components/screen/templates/DataTableTemplate.tsx b/frontend/components/screen/templates/DataTableTemplate.tsx
index b24f27c3..99171be5 100644
--- a/frontend/components/screen/templates/DataTableTemplate.tsx
+++ b/frontend/components/screen/templates/DataTableTemplate.tsx
@@ -259,14 +259,14 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
         
         {/* 🆕 선택된 컬럼의 검색 입력 필드 */}
         {searchFilterColumns.size > 0 && (
-          <div className="grid grid-cols-1 gap-3 rounded-lg border bg-gray-50/50 p-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-3 rounded-lg border bg-muted/50 p-4 md:grid-cols-2 lg:grid-cols-3">
             {Array.from(searchFilterColumns).map((columnId) => {
               const column = defaultColumns.find(col => col.id === columnId);
               if (!column) return null;
               
               return (
                 <div key={columnId} className="space-y-1.5">
-                  <label className="text-xs font-medium text-gray-700">
+                  <label className="text-xs font-medium text-foreground">
                     {column.label}
                   </label>
                   <Input
@@ -378,7 +378,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
                             )}
                             {actions.enableDelete && (
                               <Button variant="ghost" size="sm" disabled>
-                                <Trash2 className="h-3 w-3 text-red-500" />
+                                <Trash2 className="h-3 w-3 text-destructive" />
                               </Button>
                             )}
                           </div>
@@ -465,7 +465,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
           
           <div className="max-h-[400px] space-y-2 overflow-y-auto py-4">
             {defaultColumns.map((column) => (
-              <div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50">
+              <div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-muted">
                 <Checkbox
                   id={`filter-${column.id}`}
                   checked={searchFilterColumns.has(column.id)}
@@ -473,7 +473,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
                 />
                 <label htmlFor={`filter-${column.id}`} className="flex-1 cursor-pointer text-sm">
                   {column.label}
-                  <span className="ml-2 text-xs text-gray-500">({column.type})</span>
+                  <span className="ml-2 text-xs text-muted-foreground">({column.type})</span>
                 </label>
               </div>
             ))}
diff --git a/frontend/components/screen/toolbar/LeftV2Toolbar.tsx b/frontend/components/screen/toolbar/LeftV2Toolbar.tsx
index efa0640f..9771ffac 100644
--- a/frontend/components/screen/toolbar/LeftV2Toolbar.tsx
+++ b/frontend/components/screen/toolbar/LeftV2Toolbar.tsx
@@ -39,7 +39,7 @@ export const LeftV2Toolbar: React.FC<LeftV2ToolbarProps> = ({ buttons, panelStat
         className={cn(
           "flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-lg transition-all duration-200",
           isActive
-            ? "bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg hover:from-blue-600 hover:to-blue-700"
+            ? "bg-gradient-to-br from-primary/50 to-primary text-white shadow-lg hover:from-primary hover:to-blue-700"
             : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
         )}
       >
@@ -47,7 +47,7 @@ export const LeftV2Toolbar: React.FC<LeftV2ToolbarProps> = ({ buttons, panelStat
           {button.icon}
           {isActive && <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-white" />}
           {badge !== undefined && badge > 0 && (
-            <div className="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white shadow-md">
+            <div className="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white shadow-md">
               {badge > 99 ? "99+" : badge}
             </div>
           )}
diff --git a/frontend/components/screen/toolbar/SlimToolbar.tsx b/frontend/components/screen/toolbar/SlimToolbar.tsx
index 5f775b23..c5a60c86 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -123,13 +123,13 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   const getCategoryIcon = (category: string) => {
     switch (category) {
       case "desktop":
-        return <Monitor className="h-4 w-4 text-blue-600" />;
+        return <Monitor className="h-4 w-4 text-primary" />;
       case "tablet":
-        return <Tablet className="h-4 w-4 text-green-600" />;
+        return <Tablet className="h-4 w-4 text-emerald-600" />;
       case "mobile":
         return <Smartphone className="h-4 w-4 text-purple-600" />;
       default:
-        return <Monitor className="h-4 w-4 text-blue-600" />;
+        return <Monitor className="h-4 w-4 text-primary" />;
     }
   };
 
@@ -158,7 +158,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   };
 
   return (
-    <div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
+    <div className="flex h-14 items-center justify-between border-b border-border bg-gradient-to-r from-muted to-background px-4 shadow-sm">
       {/* 좌측: 네비게이션 + 패널 토글 + 화면 정보 */}
       <div className="flex items-center space-x-4">
         <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
@@ -166,7 +166,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           <span>목록으로</span>
         </Button>
 
-        {onTogglePanel && <div className="h-6 w-px bg-gray-300" />}
+        {onTogglePanel && <div className="h-6 w-px bg-muted/60" />}
 
         {/* 패널 토글 버튼 */}
         {onTogglePanel && (
@@ -186,15 +186,15 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           </Button>
         )}
 
-        <div className="h-6 w-px bg-gray-300" />
+        <div className="h-6 w-px bg-muted/60" />
 
         <div className="flex items-center space-x-3">
           <div>
-            <h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
+            <h1 className="text-lg font-semibold text-foreground">{screenName || "화면 설계"}</h1>
             {tableName && (
               <div className="mt-0.5 flex items-center space-x-1">
-                <Database className="h-3 w-3 text-gray-500" />
-                <span className="font-mono text-xs text-gray-500">{tableName}</span>
+                <Database className="h-3 w-3 text-muted-foreground" />
+                <span className="font-mono text-xs text-muted-foreground">{tableName}</span>
               </div>
             )}
           </div>
@@ -203,51 +203,51 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
         {/* 해상도 선택 드롭다운 */}
         {screenResolution && (
           <>
-            <div className="h-6 w-px bg-gray-300" />
+            <div className="h-6 w-px bg-muted/60" />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1.5 transition-colors hover:bg-blue-100">
+                <button className="flex items-center space-x-2 rounded-md bg-primary/10 px-3 py-1.5 transition-colors hover:bg-primary/10">
                   {getCategoryIcon(screenResolution.category || "desktop")}
-                  <span className="text-sm font-medium text-blue-900">{screenResolution.name}</span>
-                  <span className="text-xs text-blue-600">
+                  <span className="text-sm font-medium text-primary">{screenResolution.name}</span>
+                  <span className="text-xs text-primary">
                     ({screenResolution.width} × {screenResolution.height})
                   </span>
-                  {onResolutionChange && <ChevronDown className="h-3 w-3 text-blue-600" />}
+                  {onResolutionChange && <ChevronDown className="h-3 w-3 text-primary" />}
                 </button>
               </DropdownMenuTrigger>
               {onResolutionChange && (
                 <DropdownMenuContent align="start" className="w-64">
-                  <DropdownMenuLabel className="text-xs text-gray-500">데스크톱</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">데스크톱</DropdownMenuLabel>
                   {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
                     <DropdownMenuItem
                       key={resolution.name}
                       onClick={() => onResolutionChange(resolution)}
                       className="flex items-center space-x-2"
                     >
-                      <Monitor className="h-4 w-4 text-blue-600" />
+                      <Monitor className="h-4 w-4 text-primary" />
                       <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-gray-400">
+                      <span className="text-xs text-muted-foreground/70">
                         {resolution.width}×{resolution.height}
                       </span>
                     </DropdownMenuItem>
                   ))}
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-gray-500">태블릿</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">태블릿</DropdownMenuLabel>
                   {SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
                     <DropdownMenuItem
                       key={resolution.name}
                       onClick={() => onResolutionChange(resolution)}
                       className="flex items-center space-x-2"
                     >
-                      <Tablet className="h-4 w-4 text-green-600" />
+                      <Tablet className="h-4 w-4 text-emerald-600" />
                       <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-gray-400">
+                      <span className="text-xs text-muted-foreground/70">
                         {resolution.width}×{resolution.height}
                       </span>
                     </DropdownMenuItem>
                   ))}
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-gray-500">모바일</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">모바일</DropdownMenuLabel>
                   {SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
                     <DropdownMenuItem
                       key={resolution.name}
@@ -256,13 +256,13 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
                     >
                       <Smartphone className="h-4 w-4 text-purple-600" />
                       <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-gray-400">
+                      <span className="text-xs text-muted-foreground/70">
                         {resolution.width}×{resolution.height}
                       </span>
                     </DropdownMenuItem>
                   ))}
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-gray-500">사용자 정의</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">사용자 정의</DropdownMenuLabel>
                   <DropdownMenuItem
                     onClick={() => {
                       setCustomWidth(screenResolution.width.toString());
@@ -271,7 +271,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
                     }}
                     className="flex items-center space-x-2"
                   >
-                    <Settings className="h-4 w-4 text-gray-600" />
+                    <Settings className="h-4 w-4 text-muted-foreground" />
                     <span className="flex-1">사용자 정의...</span>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
@@ -322,31 +322,31 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
         {/* 격자 설정 */}
         {gridSettings && onGridSettingsChange && (
           <>
-            <div className="h-6 w-px bg-gray-300" />
-            <div className="flex items-center space-x-2 rounded-md bg-gray-50 px-3 py-1.5">
-              <Grid3X3 className="h-4 w-4 text-gray-600" />
+            <div className="h-6 w-px bg-muted/60" />
+            <div className="flex items-center space-x-2 rounded-md bg-muted px-3 py-1.5">
+              <Grid3X3 className="h-4 w-4 text-muted-foreground" />
               <div className="flex items-center space-x-3">
                 <label className="flex cursor-pointer items-center space-x-1.5">
                   {gridSettings.showGrid ? (
                     <Eye className="h-3.5 w-3.5 text-primary" />
                   ) : (
-                    <EyeOff className="h-3.5 w-3.5 text-gray-400" />
+                    <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
                   )}
                   <Checkbox
                     checked={gridSettings.showGrid}
                     onCheckedChange={(checked) => updateGridSetting("showGrid", checked as boolean)}
                     className="h-3.5 w-3.5"
                   />
-                  <span className="text-xs text-gray-600">격자 표시</span>
+                  <span className="text-xs text-muted-foreground">격자 표시</span>
                 </label>
                 <label className="flex cursor-pointer items-center space-x-1.5">
-                  <Zap className={`h-3.5 w-3.5 ${gridSettings.snapToGrid ? "text-primary" : "text-gray-400"}`} />
+                  <Zap className={`h-3.5 w-3.5 ${gridSettings.snapToGrid ? "text-primary" : "text-muted-foreground/70"}`} />
                   <Checkbox
                     checked={gridSettings.snapToGrid}
                     onCheckedChange={(checked) => updateGridSetting("snapToGrid", checked as boolean)}
                     className="h-3.5 w-3.5"
                   />
-                  <span className="text-xs text-gray-600">격자 스냅</span>
+                  <span className="text-xs text-muted-foreground">격자 스냅</span>
                 </label>
               </div>
             </div>
@@ -356,11 +356,11 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
 
       {/* 중앙: 정렬/배분 도구 (다중 선택 시 표시) */}
       {selectedCount >= 2 && (onAlign || onDistribute || onMatchSize) && (
-        <div className="flex items-center space-x-1 rounded-md bg-blue-50 px-2 py-1">
+        <div className="flex items-center space-x-1 rounded-md bg-primary/10 px-2 py-1">
           {/* 정렬 */}
           {onAlign && (
             <>
-              <span className="mr-1 text-xs font-medium text-blue-700">정렬</span>
+              <span className="mr-1 text-xs font-medium text-primary">정렬</span>
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("left")} title="좌측 정렬 (Alt+L)">
                 <AlignStartVertical className="h-3.5 w-3.5" />
               </Button>
@@ -387,7 +387,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           {onDistribute && selectedCount >= 3 && (
             <>
               <div className="mx-1 h-4 w-px bg-blue-200" />
-              <span className="mr-1 text-xs font-medium text-blue-700">배분</span>
+              <span className="mr-1 text-xs font-medium text-primary">배분</span>
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("horizontal")} title="가로 균등 배분 (Alt+H)">
                 <AlignHorizontalSpaceAround className="h-3.5 w-3.5" />
               </Button>
@@ -401,7 +401,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           {onMatchSize && (
             <>
               <div className="mx-1 h-4 w-px bg-blue-200" />
-              <span className="mr-1 text-xs font-medium text-blue-700">크기</span>
+              <span className="mr-1 text-xs font-medium text-primary">크기</span>
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("width")} title="너비 맞추기 (Alt+W)">
                 <RulerIcon className="h-3.5 w-3.5" />
               </Button>
@@ -415,7 +415,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           )}
 
           <div className="mx-1 h-4 w-px bg-blue-200" />
-          <span className="text-xs text-blue-600">{selectedCount}개 선택</span>
+          <span className="text-xs text-primary">{selectedCount}개 선택</span>
         </div>
       )}
 
diff --git a/frontend/components/screen/widgets/FileUpload.tsx b/frontend/components/screen/widgets/FileUpload.tsx
index 6c81b0a4..f089cee5 100644
--- a/frontend/components/screen/widgets/FileUpload.tsx
+++ b/frontend/components/screen/widgets/FileUpload.tsx
@@ -169,9 +169,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
   const getFileIcon = (fileExt: string) => {
     const ext = fileExt.toLowerCase();
     if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext)) {
-      return <Image className="h-5 w-5 text-blue-500" />;
+      return <Image className="h-5 w-5 text-primary" />;
     }
-    return <File className="h-5 w-5 text-gray-500" />;
+    return <File className="h-5 w-5 text-muted-foreground" />;
   };
 
   // 파일 확장자 검증
@@ -711,8 +711,8 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       <div
         className={`group relative rounded-2xl border-2 border-dashed p-10 text-center transition-all duration-300 ${
           isDragOver
-            ? "border-primary scale-105 bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20"
-            : "border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 hover:border-blue-400/80 hover:bg-gradient-to-br hover:from-blue-50/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
+            ? "border-primary scale-105 bg-gradient-to-br from-primary/10/90 to-primary/5/80 shadow-xl shadow-blue-500/20"
+            : "border-input/60 bg-gradient-to-br from-muted/80 to-primary/5/40 hover:border-primary/60/80 hover:bg-gradient-to-br hover:from-primary/5/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
         }`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -721,7 +721,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         <div className="relative">
           <Upload
             className={`mx-auto mb-4 h-16 w-16 transition-all duration-300 ${
-              isDragOver ? "scale-110 text-blue-500" : "text-gray-400 group-hover:scale-105 group-hover:text-blue-500"
+              isDragOver ? "scale-110 text-primary" : "text-muted-foreground/70 group-hover:scale-105 group-hover:text-primary"
             }`}
           />
           <div className="absolute inset-0 flex items-center justify-center">
@@ -736,14 +736,14 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         </div>
         <p
           className={`mb-2 text-xl font-semibold transition-colors duration-300 ${
-            isDragOver ? "text-primary" : "group-hover:text-primary text-gray-700"
+            isDragOver ? "text-primary" : "group-hover:text-primary text-foreground"
           }`}
         >
           {fileConfig.dragDropText || "파일을 드래그하여 업로드하세요"}
         </p>
         <p
           className={`mb-4 text-sm transition-colors duration-300 ${
-            isDragOver ? "text-blue-500" : "text-gray-500 group-hover:text-blue-500"
+            isDragOver ? "text-primary" : "text-muted-foreground group-hover:text-primary"
           }`}
         >
           또는 클릭하여 파일을 선택하세요
@@ -754,15 +754,15 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
           onClick={handleFileInputClick}
           className={`mb-4 rounded-xl border-2 transition-all duration-200 ${
             isDragOver
-              ? "bg-accent text-primary border-blue-400 shadow-md"
-              : "hover:bg-accent/50 border-gray-300/60 hover:border-blue-400/60 hover:shadow-sm"
+              ? "bg-accent text-primary border-primary/60 shadow-md"
+              : "hover:bg-accent/50 border-input/60 hover:border-primary/60/60 hover:shadow-sm"
           }`}
         >
           <Upload className="mr-2 h-4 w-4" />
           {fileConfig?.uploadButtonText || "파일 선택"}
         </Button>
 
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-muted-foreground">
           <p>허용 파일: {(fileConfig?.accept || ["*/*"]).join(", ")}</p>
           <p>
             최대 크기: {fileConfig?.maxSize || 10}MB | 최대 개수: {fileConfig?.maxFiles || 5}개
@@ -782,13 +782,13 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       {/* 업로드된 파일 목록 */}
       {uploadedFiles.length > 0 && (
         <div className="space-y-4">
-          <div className="border-primary/20/40 flex items-center justify-between rounded-xl border bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3">
+          <div className="border-primary/20/40 flex items-center justify-between rounded-xl border bg-gradient-to-r from-primary/5/80 to-indigo-50/60 px-4 py-3">
             <div className="flex items-center space-x-3">
               <div className="bg-primary/20 flex h-8 w-8 items-center justify-center rounded-full">
                 <File className="text-primary h-4 w-4" />
               </div>
               <div>
-                <h4 className="text-lg font-semibold text-gray-800">
+                <h4 className="text-lg font-semibold text-foreground">
                   업로드된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
                 </h4>
                 <p className="text-muted-foreground text-sm">
@@ -809,24 +809,24 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
             {uploadedFiles.map((fileInfo) => (
               <div
                 key={fileInfo.objid}
-                className="group hover:bg-accent/30 relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:border-blue-300/60 hover:shadow-md"
+                className="group hover:bg-accent/30 relative flex items-center justify-between rounded-xl border border-border/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:border-primary/40/60 hover:shadow-md"
               >
                 <div className="flex flex-1 items-center space-x-4">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/80 shadow-sm">
                     {getFileIcon(fileInfo.fileExt)}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="group-hover:text-primary truncate text-base font-semibold text-gray-800 transition-colors duration-200">
+                    <p className="group-hover:text-primary truncate text-base font-semibold text-foreground transition-colors duration-200">
                       {fileInfo.realFileName}
                     </p>
-                    <div className="mt-1 flex items-center space-x-3 text-sm text-gray-500">
+                    <div className="mt-1 flex items-center space-x-3 text-sm text-muted-foreground">
                       <span className="flex items-center space-x-1">
-                        <div className="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
+                        <div className="h-1.5 w-1.5 rounded-full bg-primary/70"></div>
                         <span className="font-medium">{formatFileSize(fileInfo.fileSize)}</span>
                       </span>
                       <span className="flex items-center space-x-1">
-                        <div className="h-1.5 w-1.5 rounded-full bg-gray-400"></div>
-                        <span className="rounded-md bg-gray-100 px-2 py-1 text-xs font-medium">
+                        <div className="h-1.5 w-1.5 rounded-full bg-muted-foreground"></div>
+                        <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium">
                           {fileInfo.fileExt.toUpperCase()}
                         </span>
                       </span>
@@ -840,9 +840,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
                     {/* 업로드 진행률 */}
                     {fileInfo.isUploading && fileConfig.showProgress && (
-                      <div className="mt-2 h-1 w-full rounded-full bg-gray-200">
+                      <div className="mt-2 h-1 w-full rounded-full bg-muted/80">
                         <div
-                          className="h-1 rounded-full bg-blue-600 transition-all duration-300"
+                          className="h-1 rounded-full bg-primary transition-all duration-300"
                           style={{ width: `${fileInfo.uploadProgress || 0}%` }}
                         />
                       </div>
@@ -850,7 +850,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
                     {/* 에러 메시지 */}
                     {fileInfo.hasError && (
-                      <div className="bg-destructive/10 mt-2 flex items-center space-x-2 rounded-md p-2 text-sm text-red-700">
+                      <div className="bg-destructive/10 mt-2 flex items-center space-x-2 rounded-md p-2 text-sm text-destructive">
                         <AlertCircle className="h-4 w-4 flex-shrink-0" />
                         <span>{fileInfo.errorMessage}</span>
                       </div>
@@ -862,19 +862,19 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                   {/* 상태 표시 */}
                   {fileInfo.isUploading && (
                     <div className="bg-accent flex items-center space-x-2 rounded-lg px-3 py-2">
-                      <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
                       <span className="text-primary text-xs font-medium">업로드 중...</span>
                     </div>
                   )}
                   {fileInfo.status === "ACTIVE" && (
-                    <div className="flex items-center space-x-2 rounded-lg bg-green-50 px-3 py-2">
-                      <CheckCircle className="h-4 w-4 text-green-500" />
-                      <span className="text-xs font-medium text-green-600">완료</span>
+                    <div className="flex items-center space-x-2 rounded-lg bg-emerald-50 px-3 py-2">
+                      <CheckCircle className="h-4 w-4 text-emerald-500" />
+                      <span className="text-xs font-medium text-emerald-600">완료</span>
                     </div>
                   )}
                   {fileInfo.hasError && (
                     <div className="bg-destructive/10 flex items-center space-x-2 rounded-lg px-3 py-2">
-                      <AlertCircle className="h-4 w-4 text-red-500" />
+                      <AlertCircle className="h-4 w-4 text-destructive" />
                       <span className="text-destructive text-xs font-medium">오류</span>
                     </div>
                   )}
@@ -897,7 +897,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                         variant="ghost"
                         size="sm"
                         onClick={() => previewFile(fileInfo)}
-                        className="h-9 w-9 rounded-lg transition-all duration-200 hover:bg-green-50 hover:text-green-600"
+                        className="h-9 w-9 rounded-lg transition-all duration-200 hover:bg-emerald-50 hover:text-emerald-600"
                       >
                         <Download className="h-4 w-4" />
                       </Button>
@@ -906,7 +906,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                         variant="ghost"
                         size="sm"
                         onClick={() => deleteFile(fileInfo)}
-                        className="hover:bg-destructive/10 h-9 w-9 rounded-lg text-red-500 transition-all duration-200 hover:text-red-700"
+                        className="hover:bg-destructive/10 h-9 w-9 rounded-lg text-destructive transition-all duration-200 hover:text-destructive"
                       >
                         <X className="h-4 w-4" />
                       </Button>
diff --git a/frontend/components/screen/widgets/FlowButtonGroup.tsx b/frontend/components/screen/widgets/FlowButtonGroup.tsx
index 6ae229d1..ee1159ee 100644
--- a/frontend/components/screen/widgets/FlowButtonGroup.tsx
+++ b/frontend/components/screen/widgets/FlowButtonGroup.tsx
@@ -139,12 +139,12 @@ export const FlowButtonGroup: React.FC<FlowButtonGroupProps> = ({
             {renderButton(button, buttonVisibility[index])}
             {!buttonVisibility[index] && (
               <div
-                className="pointer-events-none absolute inset-0 flex items-center justify-center bg-gray-900/10"
+                className="pointer-events-none absolute inset-0 flex items-center justify-center bg-foreground/10"
                 style={{
                   border: "1px dashed #94a3b8",
                 }}
               >
-                <span className="text-[10px] text-gray-500">숨김</span>
+                <span className="text-[10px] text-muted-foreground">숨김</span>
               </div>
             )}
           </div>
diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index ecb189c3..27e6a91b 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -1573,7 +1573,7 @@ export function FlowWidget({
                     className="h-7 text-xs"
                     title="Excel 내보내기"
                   >
-                    <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
+                    <FileSpreadsheet className="mr-1 h-3 w-3 text-emerald-600" />
                     Excel
                   </Button>
                   <Button
@@ -1583,7 +1583,7 @@ export function FlowWidget({
                     className="h-7 text-xs"
                     title="PDF 내보내기"
                   >
-                    <FileText className="mr-1 h-3 w-3 text-red-600" />
+                    <FileText className="mr-1 h-3 w-3 text-destructive" />
                     PDF
                   </Button>
                 </div>
diff --git a/frontend/components/screen/widgets/TabsWidget.tsx b/frontend/components/screen/widgets/TabsWidget.tsx
index 8f5410fb..83c55777 100644
--- a/frontend/components/screen/widgets/TabsWidget.tsx
+++ b/frontend/components/screen/widgets/TabsWidget.tsx
@@ -296,7 +296,7 @@ export function TabsWidget({
 
     // 3. 둘 다 없는 경우
     return (
-      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
         <p className="text-muted-foreground text-sm">
           {isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : "컴포넌트가 없습니다"}
         </p>
@@ -457,7 +457,7 @@ export function TabsWidget({
 
   if (visibleTabs.length === 0) {
     return (
-      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
         <p className="text-muted-foreground text-sm">탭이 없습니다</p>
       </div>
     );
diff --git a/frontend/components/screen/widgets/types/ButtonWidget.tsx b/frontend/components/screen/widgets/types/ButtonWidget.tsx
index 988167d2..00794b3c 100644
--- a/frontend/components/screen/widgets/types/ButtonWidget.tsx
+++ b/frontend/components/screen/widgets/types/ButtonWidget.tsx
@@ -47,7 +47,7 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       <div
         onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
         className={`flex items-center justify-center rounded-md px-4 text-sm font-medium ${
-          hasCustomColors ? '' : 'bg-blue-600 text-white'
+          hasCustomColors ? '' : 'bg-primary text-white'
         } ${className || ""}`}
         style={{
           ...style,
@@ -69,8 +69,8 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       type="button"
       onClick={handleClick}
       disabled={disabled || readonly}
-      className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${
-        hasCustomColors ? '' : 'bg-blue-600 text-white hover:bg-blue-700'
+      className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-muted/60 disabled:text-muted-foreground ${
+        hasCustomColors ? '' : 'bg-primary text-white hover:bg-primary/90'
       } ${className || ""}`}
       style={{
         ...style,
diff --git a/frontend/components/screen/widgets/types/CheckboxWidget.tsx b/frontend/components/screen/widgets/types/CheckboxWidget.tsx
index 2a76c745..abbd18c8 100644
--- a/frontend/components/screen/widgets/types/CheckboxWidget.tsx
+++ b/frontend/components/screen/widgets/types/CheckboxWidget.tsx
@@ -47,7 +47,7 @@ export const CheckboxWidget: React.FC<WebTypeComponentProps> = ({ component, val
         className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         {checkboxText}
-        {required && <span className="ml-1 text-red-500">*</span>}
+        {required && <span className="ml-1 text-destructive">*</span>}
       </Label>
     </div>
   );
diff --git a/frontend/components/screen/widgets/types/FileWidget.tsx b/frontend/components/screen/widgets/types/FileWidget.tsx
index 50fd61dc..5d906159 100644
--- a/frontend/components/screen/widgets/types/FileWidget.tsx
+++ b/frontend/components/screen/widgets/types/FileWidget.tsx
@@ -134,22 +134,22 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
     <div className="h-full w-full space-y-2">
       {/* 파일 업로드 영역 */}
       <div
-        className="group relative cursor-pointer rounded-2xl border-2 border-dashed border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 p-8 text-center transition-all duration-300 hover:border-blue-400/80 hover:bg-gradient-to-br hover:from-blue-50/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
+        className="group relative cursor-pointer rounded-2xl border-2 border-dashed border-input/60 bg-gradient-to-br from-muted/80 to-primary/5/40 p-8 text-center transition-all duration-300 hover:border-primary/60/80 hover:bg-gradient-to-br hover:from-primary/5/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
         onClick={handleFileSelect}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         style={style}
       >
         <div className="relative">
-          <Upload className="mx-auto mb-3 h-12 w-12 text-blue-400 transition-all duration-300 group-hover:scale-110 group-hover:text-blue-500" />
+          <Upload className="mx-auto mb-3 h-12 w-12 text-primary/80 transition-all duration-300 group-hover:scale-110 group-hover:text-primary" />
           <div className="absolute inset-0 flex items-center justify-center">
             <div className="h-16 w-16 rounded-full bg-primary/20/50 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-110"></div>
           </div>
         </div>
-        <p className="mb-2 text-lg font-semibold text-gray-700 transition-colors duration-300 group-hover:text-primary">
+        <p className="mb-2 text-lg font-semibold text-foreground transition-colors duration-300 group-hover:text-primary">
           {readonly ? "파일 업로드 불가" : "파일을 선택하거나 드래그하여 업로드"}
         </p>
-        <p className="text-sm text-gray-500 transition-colors duration-300 group-hover:text-blue-500">
+        <p className="text-sm text-muted-foreground transition-colors duration-300 group-hover:text-primary">
           {config?.accept && `허용 형식: ${config.accept}`}
           {config?.maxSize && ` (최대 ${config.maxSize}MB)`}
         </p>
@@ -168,13 +168,13 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
       {/* 업로드된 파일 목록 */}
       {files.length > 0 && (
         <div className="space-y-3">
-          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-primary/20/40">
+          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-primary/5/80 to-indigo-50/60 px-4 py-3 border border-primary/20/40">
             <div className="flex items-center space-x-3">
               <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20">
                 <File className="h-4 w-4 text-primary" />
               </div>
               <div>
-                <h4 className="text-lg font-semibold text-gray-800">
+                <h4 className="text-lg font-semibold text-foreground">
                   업로드된 파일 ({files.length}/{config?.maxFiles || "∞"})
                 </h4>
                 <p className="text-sm text-muted-foreground">
@@ -186,19 +186,19 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
 
           <div className="max-h-40 space-y-2 overflow-y-auto">
             {files.map((file, index) => (
-              <div key={index} className="group flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-3 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-accent/30">
+              <div key={index} className="group flex items-center justify-between rounded-xl border border-border/60 bg-white/90 p-3 shadow-sm transition-all duration-200 hover:shadow-md hover:border-primary/40/60 hover:bg-accent/30">
                 <div className="flex flex-1 items-center space-x-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
-                    <File className="h-5 w-5 text-gray-500" />
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-muted to-muted/80 shadow-sm">
+                    <File className="h-5 w-5 text-muted-foreground" />
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-semibold text-gray-800 group-hover:text-primary transition-colors duration-200">
+                    <p className="truncate text-sm font-semibold text-foreground group-hover:text-primary transition-colors duration-200">
                       {file.name}
                     </p>
                     {file.size > 0 && (
                       <div className="flex items-center space-x-2 mt-1">
-                        <div className="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
-                        <span className="text-xs font-medium text-gray-500">{formatFileSize(file.size)}</span>
+                        <div className="h-1.5 w-1.5 rounded-full bg-primary/70"></div>
+                        <span className="text-xs font-medium text-muted-foreground">{formatFileSize(file.size)}</span>
                       </div>
                     )}
                   </div>
@@ -212,7 +212,7 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
                       e.stopPropagation();
                       removeFile(index);
                     }}
-                    className="h-8 w-8 rounded-lg text-red-500 hover:bg-destructive/10 hover:text-red-700 transition-all duration-200"
+                    className="h-8 w-8 rounded-lg text-destructive hover:bg-destructive/10 hover:text-destructive transition-all duration-200"
                   >
                     <X className="h-4 w-4" />
                   </Button>
@@ -239,7 +239,7 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
               {files.length}개 파일
             </Badge>
             {config?.maxFiles && (
-              <Badge variant="outline" className="bg-white/80 border-gray-200/60 text-muted-foreground">
+              <Badge variant="outline" className="bg-white/80 border-border/60 text-muted-foreground">
                 최대 {config.maxFiles}개
               </Badge>
             )}
@@ -247,7 +247,7 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
         </div>
       )}
 
-      {required && files.length === 0 && <div className="text-xs text-red-500">* 파일을 업로드해야 합니다</div>}
+      {required && files.length === 0 && <div className="text-xs text-destructive">* 파일을 업로드해야 합니다</div>}
     </div>
   );
 };
diff --git a/frontend/components/screen/widgets/types/ImageWidget.tsx b/frontend/components/screen/widgets/types/ImageWidget.tsx
index a9bd62d3..f4d1517b 100644
--- a/frontend/components/screen/widgets/types/ImageWidget.tsx
+++ b/frontend/components/screen/widgets/types/ImageWidget.tsx
@@ -136,7 +136,7 @@ export const ImageWidget: React.FC<
       {imageUrl ? (
         // 이미지 표시 모드
         <div
-          className="group relative w-full flex-1 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm transition-all hover:shadow-md"
+          className="group relative w-full flex-1 overflow-hidden rounded-lg border border-border bg-muted shadow-sm transition-all hover:shadow-md"
           style={filteredStyle}
         >
           <img
@@ -164,8 +164,8 @@ export const ImageWidget: React.FC<
         <div
           className={`group relative flex w-full flex-1 flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 text-center shadow-sm transition-all duration-300 ${
             isDesignMode
-              ? "cursor-default border-gray-200 bg-gray-50"
-              : "cursor-pointer border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50/50 hover:shadow-md"
+              ? "cursor-default border-border bg-muted"
+              : "cursor-pointer border-input bg-white hover:border-primary/60 hover:bg-primary/10/50 hover:shadow-md"
           }`}
           onClick={handleFileSelect}
           onDragOver={handleDragOver}
@@ -173,13 +173,13 @@ export const ImageWidget: React.FC<
           style={filteredStyle}
         >
           {uploading ? (
-            <p className="text-xs font-medium text-blue-600">업로드 중...</p>
+            <p className="text-xs font-medium text-primary">업로드 중...</p>
           ) : readonly ? (
-            <p className="text-xs font-medium text-gray-500">업로드 불가</p>
+            <p className="text-xs font-medium text-muted-foreground">업로드 불가</p>
           ) : isDesignMode ? (
-            <p className="text-xs font-medium text-gray-400">이미지 업로드</p>
+            <p className="text-xs font-medium text-muted-foreground/70">이미지 업로드</p>
           ) : (
-            <p className="text-xs font-medium text-gray-700 transition-colors duration-300 group-hover:text-blue-600">
+            <p className="text-xs font-medium text-foreground transition-colors duration-300 group-hover:text-primary">
               이미지 업로드
             </p>
           )}
@@ -197,7 +197,7 @@ export const ImageWidget: React.FC<
       />
 
       {/* 필수 필드 경고 */}
-      {required && !imageUrl && <div className="text-xs text-red-500">* 이미지를 업로드해야 합니다</div>}
+      {required && !imageUrl && <div className="text-xs text-destructive">* 이미지를 업로드해야 합니다</div>}
     </div>
   );
 };
diff --git a/frontend/components/screen/widgets/types/RadioWidget.tsx b/frontend/components/screen/widgets/types/RadioWidget.tsx
index dbc8e22c..f5fa86dd 100644
--- a/frontend/components/screen/widgets/types/RadioWidget.tsx
+++ b/frontend/components/screen/widgets/types/RadioWidget.tsx
@@ -55,7 +55,7 @@ export const RadioWidget: React.FC<WebTypeComponentProps> = ({ component, value,
         })}
       </RadioGroup>
 
-      {required && <div className="mt-1 text-xs text-red-500">* 필수 선택 항목입니다</div>}
+      {required && <div className="mt-1 text-xs text-destructive">* 필수 선택 항목입니다</div>}
     </div>
   );
 };
diff --git a/frontend/components/screen/widgets/types/RatingWidget.tsx b/frontend/components/screen/widgets/types/RatingWidget.tsx
index 6a10e32f..e5b9f19f 100644
--- a/frontend/components/screen/widgets/types/RatingWidget.tsx
+++ b/frontend/components/screen/widgets/types/RatingWidget.tsx
@@ -68,7 +68,7 @@ export const RatingWidget: React.FC<RatingWidgetProps> = ({
         <button
           key={i}
           type="button"
-          className={` ${sizeClasses[finalSize]} transition-colors duration-150 ${disabled || readonly ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:scale-110"} ${isFilled ? "text-yellow-400" : "text-gray-300"} `}
+          className={` ${sizeClasses[finalSize]} transition-colors duration-150 ${disabled || readonly ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:scale-110"} ${isFilled ? "text-yellow-400" : "text-muted-foreground/50"} `}
           onClick={() => handleStarClick(i)}
           onMouseEnter={() => handleStarHover(i)}
           disabled={disabled || readonly}
diff --git a/frontend/components/table-category/CategoryValueManagerTree.tsx b/frontend/components/table-category/CategoryValueManagerTree.tsx
index 07965ce2..6fc5185b 100644
--- a/frontend/components/table-category/CategoryValueManagerTree.tsx
+++ b/frontend/components/table-category/CategoryValueManagerTree.tsx
@@ -123,7 +123,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
         <Folder className="h-4 w-4 text-amber-500" />
       );
     }
-    return <Tag className="h-4 w-4 text-blue-500" />;
+    return <Tag className="h-4 w-4 text-primary" />;
   };
 
   // 깊이별 라벨
diff --git a/frontend/components/tax-invoice/CostTypeStats.tsx b/frontend/components/tax-invoice/CostTypeStats.tsx
index 786c093a..3902a006 100644
--- a/frontend/components/tax-invoice/CostTypeStats.tsx
+++ b/frontend/components/tax-invoice/CostTypeStats.tsx
@@ -46,12 +46,12 @@ const costTypeIcons: Record<CostType, React.ReactNode> = {
 
 // 비용 유형별 색상
 const costTypeColors: Record<CostType, string> = {
-  purchase: "bg-blue-500",
-  installation: "bg-green-500",
-  repair: "bg-orange-500",
+  purchase: "bg-primary",
+  installation: "bg-emerald-500",
+  repair: "bg-amber-500",
   maintenance: "bg-purple-500",
-  disposal: "bg-red-500",
-  other: "bg-gray-500",
+  disposal: "bg-destructive",
+  other: "bg-muted0",
 };
 
 export function CostTypeStats() {
@@ -168,7 +168,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">구매 비용</CardTitle>
-            <Package className="h-4 w-4 text-blue-500" />
+            <Package className="h-4 w-4 text-primary" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -184,7 +184,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">수리/유지보수</CardTitle>
-            <Wrench className="h-4 w-4 text-orange-500" />
+            <Wrench className="h-4 w-4 text-amber-500" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -200,7 +200,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">설치/폐기</CardTitle>
-            <Settings className="h-4 w-4 text-green-500" />
+            <Settings className="h-4 w-4 text-emerald-500" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -238,7 +238,7 @@ export function CostTypeStats() {
                       <div className="flex items-center gap-2">
                         <div className="flex-1 h-3 rounded-full bg-muted overflow-hidden">
                           <div
-                            className={`h-full ${costType ? costTypeColors[costType] : "bg-gray-400"}`}
+                            className={`h-full ${costType ? costTypeColors[costType] : "bg-muted-foreground"}`}
                             style={{ width: `${Math.max(percentage, 2)}%` }}
                           />
                         </div>
@@ -296,7 +296,7 @@ export function CostTypeStats() {
                           return (
                             <div
                               key={costType || "none"}
-                              className={`h-6 ${costType ? costTypeColors[costType] : "bg-gray-400"} rounded`}
+                              className={`h-6 ${costType ? costTypeColors[costType] : "bg-muted-foreground"} rounded`}
                               style={{ width: `${Math.max(width, 5)}%` }}
                               title={`${costType ? costTypeLabels[costType] : "미분류"}: ${formatAmount(item.total_amount)}원`}
                             />
diff --git a/frontend/components/tax-invoice/TaxInvoiceDetail.tsx b/frontend/components/tax-invoice/TaxInvoiceDetail.tsx
index 9fe45e91..9f869403 100644
--- a/frontend/components/tax-invoice/TaxInvoiceDetail.tsx
+++ b/frontend/components/tax-invoice/TaxInvoiceDetail.tsx
@@ -61,10 +61,10 @@ const statusLabels: Record<string, string> = {
 
 // 상태 색상
 const statusColors: Record<string, string> = {
-  draft: "bg-gray-100 text-gray-800",
-  issued: "bg-green-100 text-green-800",
-  sent: "bg-blue-100 text-blue-800",
-  cancelled: "bg-red-100 text-red-800",
+  draft: "bg-muted text-foreground",
+  issued: "bg-emerald-100 text-emerald-800",
+  sent: "bg-primary/10 text-primary",
+  cancelled: "bg-destructive/10 text-red-800",
 };
 
 export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailProps) {
@@ -458,7 +458,7 @@ export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailP
 
               {/* 품목 내역 */}
               <div className="mb-6">
-                <h3 className="mb-3 border-b-2 border-gray-800 pb-2 font-semibold">품목 내역</h3>
+                <h3 className="mb-3 border-b-2 border-foreground pb-2 font-semibold">품목 내역</h3>
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -555,7 +555,7 @@ export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailP
                       .map((file) => (
                         <div
                           key={file.id}
-                          className="group relative aspect-square overflow-hidden rounded-lg border bg-gray-50"
+                          className="group relative aspect-square overflow-hidden rounded-lg border bg-muted"
                         >
                           <img
                             src={getFilePreviewUrl(file)}
diff --git a/frontend/components/tax-invoice/TaxInvoiceList.tsx b/frontend/components/tax-invoice/TaxInvoiceList.tsx
index 1ee7e571..03fd5c3f 100644
--- a/frontend/components/tax-invoice/TaxInvoiceList.tsx
+++ b/frontend/components/tax-invoice/TaxInvoiceList.tsx
@@ -707,7 +707,7 @@ export function TaxInvoiceList() {
                               onClick={() => handleIssueConfirm(invoice)}
                               title="발행"
                             >
-                              <CheckCircle className="h-4 w-4 text-green-600" />
+                              <CheckCircle className="h-4 w-4 text-emerald-600" />
                             </Button>
                             <Button
                               variant="ghost"
@@ -724,7 +724,7 @@ export function TaxInvoiceList() {
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-8 w-8 text-orange-600"
+                            className="h-8 w-8 text-amber-600"
                             onClick={() => handleCancelConfirm(invoice)}
                             title="취소"
                           >
diff --git a/frontend/components/theme/ThemeSettings.tsx b/frontend/components/theme/ThemeSettings.tsx
index 060bd578..6feaa06b 100644
--- a/frontend/components/theme/ThemeSettings.tsx
+++ b/frontend/components/theme/ThemeSettings.tsx
@@ -17,16 +17,16 @@ export const ThemeSettings: React.FC = () => {
 
   return (
     <div className="fixed top-4 right-4 z-50">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 min-w-[300px]">
+      <div className="bg-white dark:bg-foreground/90 rounded-lg shadow-lg border border-border dark:border-border p-4 min-w-[300px]">
         <div className="flex items-center gap-2 mb-4">
-          <Settings className="w-5 h-5 text-muted-foreground dark:text-gray-400" />
-          <h3 className="font-semibold text-gray-900 dark:text-white">테마 설정</h3>
+          <Settings className="w-5 h-5 text-muted-foreground dark:text-muted-foreground/70" />
+          <h3 className="font-semibold text-foreground dark:text-white">테마 설정</h3>
         </div>
 
         {/* 다크모드 토글 */}
         <div className="space-y-3">
           <div>
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            <label className="text-sm font-medium text-foreground dark:text-muted-foreground/50 mb-2 block">
               테마 모드
             </label>
             <div className="flex gap-2">
@@ -34,8 +34,8 @@ export const ThemeSettings: React.FC = () => {
                 onClick={() => setTheme({ mode: "light" })}
                 className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   theme.mode === "light"
-                    ? "bg-orange-100 text-orange-700 border border-orange-300"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-amber-100 text-orange-700 border border-orange-300"
+                    : "bg-muted text-foreground hover:bg-muted/80"
                 }`}
               >
                 <Sun className="w-4 h-4" />
@@ -45,8 +45,8 @@ export const ThemeSettings: React.FC = () => {
                 onClick={() => setTheme({ mode: "dark" })}
                 className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   theme.mode === "dark"
-                    ? "bg-orange-100 text-orange-700 border border-orange-300"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-amber-100 text-orange-700 border border-orange-300"
+                    : "bg-muted text-foreground hover:bg-muted/80"
                 }`}
               >
                 <Moon className="w-4 h-4" />
@@ -56,8 +56,8 @@ export const ThemeSettings: React.FC = () => {
                 onClick={() => setTheme({ mode: "system" })}
                 className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   theme.mode === "system"
-                    ? "bg-orange-100 text-orange-700 border border-orange-300"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-amber-100 text-orange-700 border border-orange-300"
+                    : "bg-muted text-foreground hover:bg-muted/80"
                 }`}
               >
                 <Monitor className="w-4 h-4" />
@@ -68,7 +68,7 @@ export const ThemeSettings: React.FC = () => {
 
           {/* 색상 스키마 */}
           <div>
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            <label className="text-sm font-medium text-foreground dark:text-muted-foreground/50 mb-2 block">
               색상 스키마
             </label>
             <div className="grid grid-cols-5 gap-2">
@@ -79,14 +79,14 @@ export const ThemeSettings: React.FC = () => {
                   className={`p-3 rounded-lg border-2 transition-all ${
                     theme.colorScheme === scheme.id
                       ? "border-orange-500 shadow-md"
-                      : "border-gray-200 hover:border-gray-300"
+                      : "border-border hover:border-input"
                   }`}
                 >
                   <div
                     className="w-6 h-6 rounded-full mx-auto"
                     style={{ backgroundColor: scheme.color }}
                   />
-                  <div className="text-xs text-muted-foreground dark:text-gray-400 mt-1">
+                  <div className="text-xs text-muted-foreground dark:text-muted-foreground/70 mt-1">
                     {scheme.name}
                   </div>
                 </button>
@@ -96,22 +96,22 @@ export const ThemeSettings: React.FC = () => {
 
           {/* 현재 색상 미리보기 */}
           <div>
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            <label className="text-sm font-medium text-foreground dark:text-muted-foreground/50 mb-2 block">
               현재 색상
             </label>
             <div className="flex gap-2">
               <div
-                className="w-8 h-8 rounded-lg border border-gray-200"
+                className="w-8 h-8 rounded-lg border border-border"
                 style={{ backgroundColor: colors.primary }}
                 title="Primary"
               />
               <div
-                className="w-8 h-8 rounded-lg border border-gray-200"
+                className="w-8 h-8 rounded-lg border border-border"
                 style={{ backgroundColor: colors.secondary }}
                 title="Secondary"
               />
               <div
-                className="w-8 h-8 rounded-lg border border-gray-200"
+                className="w-8 h-8 rounded-lg border border-border"
                 style={{ backgroundColor: colors.accent }}
                 title="Accent"
               />
@@ -119,10 +119,10 @@ export const ThemeSettings: React.FC = () => {
           </div>
 
           {/* 빠른 토글 버튼 */}
-          <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+          <div className="pt-2 border-t border-border dark:border-border">
             <button
               onClick={toggleMode}
-              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
+              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
             >
               {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
               {isDark ? "라이트 모드로" : "다크 모드로"} 전환
diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx
index 49d4dc24..9c8c362f 100644
--- a/frontend/components/ui/accordion.tsx
+++ b/frontend/components/ui/accordion.tsx
@@ -149,7 +149,7 @@ function AccordionTrigger({ className, children, ...props }: AccordionTriggerPro
   return (
     <button
       className={cn(
-        "accordion-trigger flex w-full cursor-pointer items-center justify-between p-4 text-left font-medium transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",
+        "accordion-trigger flex w-full cursor-pointer items-center justify-between p-4 text-left font-medium transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
         className,
       )}
       onClick={handleClick}
diff --git a/frontend/components/ui/slider.tsx b/frontend/components/ui/slider.tsx
index 9a7218c4..3b584db9 100644
--- a/frontend/components/ui/slider.tsx
+++ b/frontend/components/ui/slider.tsx
@@ -30,15 +30,15 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
           value={value[0]}
           onChange={handleChange}
           className={cn(
-            "relative h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 outline-none",
-            "focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",
+            "relative h-2 w-full cursor-pointer appearance-none rounded-lg bg-muted/80 outline-none",
+            "focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
             "disabled:cursor-not-allowed disabled:opacity-50",
             // WebKit 스타일
-            "[&::-webkit-slider-track]:h-2 [&::-webkit-slider-track]:rounded-lg [&::-webkit-slider-track]:bg-gray-200",
-            "[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow-sm",
+            "[&::-webkit-slider-track]:h-2 [&::-webkit-slider-track]:rounded-lg [&::-webkit-slider-track]:bg-muted/80",
+            "[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-sm",
             // Firefox 스타일
-            "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-lg [&::-moz-range-track]:border-0 [&::-moz-range-track]:bg-gray-200",
-            "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:shadow-sm",
+            "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-lg [&::-moz-range-track]:border-0 [&::-moz-range-track]:bg-muted/80",
+            "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:shadow-sm",
           )}
           {...props}
         />
diff --git a/frontend/components/ui/switch.tsx b/frontend/components/ui/switch.tsx
index 4ae887e8..b771feed 100644
--- a/frontend/components/ui/switch.tsx
+++ b/frontend/components/ui/switch.tsx
@@ -11,8 +11,8 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
       data-slot="switch"
       className={cn(
         "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-sm transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-300",
-        "hover:data-[state=checked]:bg-green-600 hover:data-[state=unchecked]:bg-gray-400",
+        "data-[state=checked]:bg-emerald-500 data-[state=unchecked]:bg-muted/60",
+        "hover:data-[state=checked]:bg-emerald-600 hover:data-[state=unchecked]:bg-muted-foreground",
         "focus-visible:border-ring focus-visible:ring-ring/50",
         className,
       )}
diff --git a/frontend/components/unified/UnifiedSelect.tsx b/frontend/components/unified/UnifiedSelect.tsx
index 9560fa38..d307fbc1 100644
--- a/frontend/components/unified/UnifiedSelect.tsx
+++ b/frontend/components/unified/UnifiedSelect.tsx
@@ -801,7 +801,7 @@ export const UnifiedSelect = forwardRef<HTMLDivElement, UnifiedSelectProps>((pro
           className="flex-shrink-0 text-sm font-medium"
         >
           {label}
-          {required && <span className="ml-0.5 text-orange-500">*</span>}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
         </Label>
       )}
       <div className="min-h-0 flex-1">{renderSelect()}</div>
diff --git a/frontend/components/v2/ConditionalConfigPanel.tsx b/frontend/components/v2/ConditionalConfigPanel.tsx
index 99d7f813..8622c207 100644
--- a/frontend/components/v2/ConditionalConfigPanel.tsx
+++ b/frontend/components/v2/ConditionalConfigPanel.tsx
@@ -367,7 +367,7 @@ export function ConditionalConfigPanel({
       {/* 헤더 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Zap className="h-4 w-4 text-orange-500" />
+          <Zap className="h-4 w-4 text-amber-500" />
           <span className="text-sm font-medium">조건부 표시</span>
           <span 
             className="text-muted-foreground cursor-help" 
@@ -475,7 +475,7 @@ export function ConditionalConfigPanel({
                     operator === "in" ? "에 포함되면" : "에 포함되지 않으면"}`}
                 </span>{" "}
                 → 이 필드를{" "}
-                <span className="font-medium text-orange-600">
+                <span className="font-medium text-amber-600">
                   {action === "show" ? "표시" :
                    action === "hide" ? "숨김" :
                    action === "enable" ? "활성화" : "비활성화"}
diff --git a/frontend/components/v2/V2ComponentsDemo.tsx b/frontend/components/v2/V2ComponentsDemo.tsx
index 477dcd7c..223b2c8f 100644
--- a/frontend/components/v2/V2ComponentsDemo.tsx
+++ b/frontend/components/v2/V2ComponentsDemo.tsx
@@ -126,7 +126,7 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
       <div className="flex-1 overflow-auto p-4">
         <Tabs value={activeTab} onValueChange={setActiveTab}>
           <TabsList className="grid w-full grid-cols-5 lg:grid-cols-10">
-            <TabsTrigger value="conditional" className="gap-1 text-orange-600">
+            <TabsTrigger value="conditional" className="gap-1 text-amber-600">
               <Zap className="h-3 w-3" />
               조건부
             </TabsTrigger>
@@ -471,22 +471,22 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
                     v2Type="V2Layout"
                     config={{ type: "grid", columns: 12, gap: "8px", use12Column: true }}
                   >
-                    <div className="col-span-12 p-3 bg-blue-100 rounded text-center text-sm">
+                    <div className="col-span-12 p-3 bg-primary/10 rounded text-center text-sm">
                       col-span-12 (전체)
                     </div>
-                    <div className="col-span-6 p-3 bg-green-100 rounded text-center text-sm">
+                    <div className="col-span-6 p-3 bg-emerald-100 rounded text-center text-sm">
                       col-span-6 (절반)
                     </div>
-                    <div className="col-span-6 p-3 bg-green-100 rounded text-center text-sm">
+                    <div className="col-span-6 p-3 bg-emerald-100 rounded text-center text-sm">
                       col-span-6 (절반)
                     </div>
-                    <div className="col-span-4 p-3 bg-yellow-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
-                    <div className="col-span-4 p-3 bg-yellow-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
-                    <div className="col-span-4 p-3 bg-yellow-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
                     <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
@@ -501,10 +501,10 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
                     <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
                       col-span-3 (1/4)
                     </div>
-                    <div className="col-span-8 p-3 bg-red-100 rounded text-center text-sm">
+                    <div className="col-span-8 p-3 bg-destructive/10 rounded text-center text-sm">
                       col-span-8 (2/3)
                     </div>
-                    <div className="col-span-4 p-3 bg-red-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-destructive/10 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
                   </V2Layout>
@@ -521,10 +521,10 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
                     config={{ type: "split", direction: "horizontal", splitRatio: [30, 70] }}
                     style={{ height: "200px" }}
                   >
-                    <div className="p-4 bg-blue-100 h-full flex items-center justify-center">
+                    <div className="p-4 bg-primary/10 h-full flex items-center justify-center">
                       왼쪽 패널
                     </div>
-                    <div className="p-4 bg-green-100 h-full flex items-center justify-center">
+                    <div className="p-4 bg-emerald-100 h-full flex items-center justify-center">
                       오른쪽 패널
                     </div>
                   </V2Layout>
@@ -813,8 +813,8 @@ function ConditionalDemoContent() {
 
           {/* B2B 전용 필드 */}
           {b2bState.visible && (
-            <div className="p-4 bg-blue-50 rounded-lg space-y-4 border-l-4 border-blue-500">
-              <p className="text-sm font-medium text-blue-700">B2B 전용 입력 필드</p>
+            <div className="p-4 bg-primary/10 rounded-lg space-y-4 border-l-4 border-primary">
+              <p className="text-sm font-medium text-primary">B2B 전용 입력 필드</p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <V2Input
                   id="companyName"
@@ -839,8 +839,8 @@ function ConditionalDemoContent() {
 
           {/* B2C 전용 필드 */}
           {b2cState.visible && (
-            <div className="p-4 bg-green-50 rounded-lg space-y-4 border-l-4 border-green-500">
-              <p className="text-sm font-medium text-green-700">B2C 전용 입력 필드</p>
+            <div className="p-4 bg-emerald-50 rounded-lg space-y-4 border-l-4 border-emerald-500">
+              <p className="text-sm font-medium text-emerald-700">B2C 전용 입력 필드</p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <V2Input
                   id="customerName"
@@ -894,7 +894,7 @@ function ConditionalDemoContent() {
 
           {/* VIP 전용 할인율 필드 */}
           {discountState.visible && (
-            <div className="p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
+            <div className="p-4 bg-amber-50 rounded-lg border-l-4 border-yellow-500">
               <p className="text-sm font-medium text-yellow-700 mb-3">VIP 전용 혜택 설정</p>
               <V2Input
                 id="discountRate"
@@ -1028,10 +1028,10 @@ function ConditionalConfigUIDemo({ formData }: { formData: Record<string, unknow
   const conditionResult = demoConfig ? evaluateCondition("demoField", demoConfig) : { visible: true, disabled: false };
 
   return (
-    <Card className="border-orange-200 bg-orange-50/30">
+    <Card className="border-orange-200 bg-amber-50/30">
       <CardHeader>
         <CardTitle className="text-lg flex items-center gap-2">
-          <Zap className="h-5 w-5 text-orange-500" />
+          <Zap className="h-5 w-5 text-amber-500" />
           조건부 설정 UI 데모
         </CardTitle>
         <CardDescription>
@@ -1106,8 +1106,8 @@ function ConditionalConfigUIDemo({ formData }: { formData: Record<string, unknow
         </div>
 
         {/* 안내 메시지 */}
-        <div className="mt-4 p-3 bg-blue-50 rounded-lg">
-          <p className="text-xs text-blue-700">
+        <div className="mt-4 p-3 bg-primary/10 rounded-lg">
+          <p className="text-xs text-primary">
             위의 "조건부 표시" 스위치를 켜고 설정을 변경해보세요. 
             위 시나리오들의 필드 값을 변경하면 조건 평가 결과가 실시간으로 바뀝니다.
           </p>
diff --git a/frontend/components/v2/V2Date.tsx b/frontend/components/v2/V2Date.tsx
index f1a2da90..86964bf6 100644
--- a/frontend/components/v2/V2Date.tsx
+++ b/frontend/components/v2/V2Date.tsx
@@ -725,7 +725,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
       className="text-sm font-medium whitespace-nowrap"
     >
       {label}
-      {required && <span className="ml-0.5 text-orange-500">*</span>}
+      {required && <span className="ml-0.5 text-amber-500">*</span>}
     </Label>
   ) : null;
 
@@ -760,7 +760,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
           className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
         >
           {label}
-          {required && <span className="ml-0.5 text-orange-500">*</span>}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
         </Label>
         <div className="w-full min-w-0 flex-1">
           {renderDatePicker()}
diff --git a/frontend/components/v2/V2Hierarchy.tsx b/frontend/components/v2/V2Hierarchy.tsx
index 28f51fee..16debe88 100644
--- a/frontend/components/v2/V2Hierarchy.tsx
+++ b/frontend/components/v2/V2Hierarchy.tsx
@@ -492,7 +492,7 @@ export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>(
             className="text-sm font-medium whitespace-nowrap"
           >
             {label}
-            {required && <span className="text-orange-500 ml-0.5">*</span>}
+            {required && <span className="text-amber-500 ml-0.5">*</span>}
           </Label>
         )}
         <div className="h-full w-full">
diff --git a/frontend/components/v2/V2Input.tsx b/frontend/components/v2/V2Input.tsx
index eade1dfd..a5675106 100644
--- a/frontend/components/v2/V2Input.tsx
+++ b/frontend/components/v2/V2Input.tsx
@@ -1000,7 +1000,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
       className="text-sm font-medium whitespace-nowrap"
     >
       {actualLabel}
-      {required && <span className="ml-0.5 text-orange-500">*</span>}
+      {required && <span className="ml-0.5 text-amber-500">*</span>}
     </Label>
   ) : null;
 
@@ -1043,7 +1043,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
           className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
         >
           {actualLabel}
-          {required && <span className="ml-0.5 text-orange-500">*</span>}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
         </Label>
         <div
           className={cn(
diff --git a/frontend/components/v2/V2Media.tsx b/frontend/components/v2/V2Media.tsx
index 0a4faaae..0705aed2 100644
--- a/frontend/components/v2/V2Media.tsx
+++ b/frontend/components/v2/V2Media.tsx
@@ -61,31 +61,31 @@ const getFileIcon = (extension: string) => {
   const ext = extension.toLowerCase().replace(".", "");
 
   if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
-    return <FileImage className="h-6 w-6 text-blue-500" />;
+    return <FileImage className="h-6 w-6 text-primary" />;
   }
   if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
     return <FileVideo className="h-6 w-6 text-purple-500" />;
   }
   if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
-    return <FileAudio className="h-6 w-6 text-green-500" />;
+    return <FileAudio className="h-6 w-6 text-emerald-500" />;
   }
   if (["pdf"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-red-500" />;
+    return <FileText className="h-6 w-6 text-destructive" />;
   }
   if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-blue-600" />;
+    return <FileText className="h-6 w-6 text-primary" />;
   }
   if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-green-600" />;
+    return <FileText className="h-6 w-6 text-emerald-600" />;
   }
   if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
-    return <Presentation className="h-6 w-6 text-orange-500" />;
+    return <Presentation className="h-6 w-6 text-amber-500" />;
   }
   if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
-    return <Archive className="h-6 w-6 text-gray-500" />;
+    return <Archive className="h-6 w-6 text-muted-foreground" />;
   }
 
-  return <File className="h-6 w-6 text-gray-400" />;
+  return <File className="h-6 w-6 text-muted-foreground/70" />;
 };
 
 /**
@@ -841,7 +841,7 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>((props, ref) =>
           className="shrink-0 text-sm font-medium"
         >
           {label}
-          {required && <span className="ml-0.5 text-orange-500">*</span>}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
         </Label>
       )}
 
diff --git a/frontend/components/v2/V2Select.tsx b/frontend/components/v2/V2Select.tsx
index a7939db2..eb2762e8 100644
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -1182,7 +1182,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
         className="text-sm font-medium whitespace-nowrap"
       >
         {label}
-        {required && <span className="text-orange-500 ml-0.5">*</span>}
+        {required && <span className="text-amber-500 ml-0.5">*</span>}
       </Label>
     ) : null;
 
@@ -1226,7 +1226,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
             className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
           >
             {label}
-            {required && <span className="text-orange-500 ml-0.5">*</span>}
+            {required && <span className="text-amber-500 ml-0.5">*</span>}
           </Label>
           <div
             className={cn(
diff --git a/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx b/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
index 51c9a4f9..eea9e3ce 100644
--- a/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
@@ -503,22 +503,22 @@ export function V2BomItemEditorConfigPanel({
               className={cn(
                 "rounded-lg border p-3",
                 config.useCustomTable && config.mainTableName
-                  ? "border-orange-300 bg-orange-50"
-                  : "border-blue-300 bg-blue-50",
+                  ? "border-orange-300 bg-amber-50"
+                  : "border-primary/40 bg-primary/10",
               )}
             >
               <div className="flex items-center gap-2">
                 <Database
                   className={cn(
                     "h-4 w-4",
-                    config.useCustomTable && config.mainTableName ? "text-orange-600" : "text-blue-600",
+                    config.useCustomTable && config.mainTableName ? "text-amber-600" : "text-primary",
                   )}
                 />
                 <div className="flex-1">
                   <p
                     className={cn(
                       "text-sm font-medium",
-                      config.useCustomTable && config.mainTableName ? "text-orange-700" : "text-blue-700",
+                      config.useCustomTable && config.mainTableName ? "text-orange-700" : "text-primary",
                     )}
                   >
                     {config.useCustomTable && config.mainTableName
@@ -527,13 +527,13 @@ export function V2BomItemEditorConfigPanel({
                       : currentTableName || "미설정"}
                   </p>
                   {config.useCustomTable && config.mainTableName && config.foreignKeyColumn && (
-                    <p className="mt-0.5 text-[10px] text-orange-600">
+                    <p className="mt-0.5 text-[10px] text-amber-600">
                       FK: {config.foreignKeyColumn} &rarr; {currentTableName}.
                       {config.foreignKeySourceColumn || "id"}
                     </p>
                   )}
                   {!config.useCustomTable && currentTableName && (
-                    <p className="mt-0.5 text-[10px] text-blue-600">화면 메인 테이블</p>
+                    <p className="mt-0.5 text-[10px] text-primary">화면 메인 테이블</p>
                   )}
                 </div>
               </div>
@@ -583,7 +583,7 @@ export function V2BomItemEditorConfigPanel({
                                 : "opacity-0",
                             )}
                           />
-                          <Database className="mr-2 h-3 w-3 text-blue-500" />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
                           <span>{currentTableName}</span>
                           <span className="text-muted-foreground ml-1 text-[10px]">(기본)</span>
                         </CommandItem>
@@ -608,7 +608,7 @@ export function V2BomItemEditorConfigPanel({
                                 config.mainTableName === rel.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Link2 className="mr-2 h-3 w-3 text-orange-500" />
+                            <Link2 className="mr-2 h-3 w-3 text-amber-500" />
                             <span>{rel.tableLabel}</span>
                             <span className="text-muted-foreground ml-1 text-[10px]">
                               ({rel.foreignKeyColumn})
@@ -641,7 +641,7 @@ export function V2BomItemEditorConfigPanel({
                                 config.mainTableName === table.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Database className="mr-2 h-3 w-3 text-gray-400" />
+                            <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                             <span>{table.displayName}</span>
                           </CommandItem>
                         ))}
@@ -721,8 +721,8 @@ export function V2BomItemEditorConfigPanel({
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns ? "로딩 중..." : "저장 테이블을 먼저 선택하세요"}
                 </p>
               </div>
@@ -764,18 +764,18 @@ export function V2BomItemEditorConfigPanel({
                   {entityColumns.map((col) => (
                     <SelectItem key={col.columnName} value={col.columnName}>
                       <div className="flex items-center gap-2">
-                        <Link2 className="h-3 w-3 text-blue-500" />
+                        <Link2 className="h-3 w-3 text-primary" />
                         <span>{col.displayName}</span>
-                        <ArrowRight className="h-3 w-3 text-gray-400" />
-                        <span className="text-gray-500">{col.referenceTable}</span>
+                        <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
+                        <span className="text-muted-foreground">{col.referenceTable}</span>
                       </div>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns
                     ? "로딩 중..."
                     : !targetTableForColumns
@@ -786,9 +786,9 @@ export function V2BomItemEditorConfigPanel({
             )}
 
             {config.dataSource?.sourceTable && (
-              <div className="space-y-1 rounded border border-green-200 bg-green-50 p-2">
-                <p className="text-xs font-medium text-green-700">선택된 엔티티</p>
-                <div className="text-[10px] text-green-600">
+              <div className="space-y-1 rounded border border-emerald-200 bg-emerald-50 p-2">
+                <p className="text-xs font-medium text-emerald-700">선택된 엔티티</p>
+                <div className="text-[10px] text-emerald-600">
                   <p>검색 테이블: {config.dataSource.sourceTable}</p>
                   <p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
                 </div>
@@ -851,9 +851,9 @@ export function V2BomItemEditorConfigPanel({
               <Separator />
               <div className="space-y-2">
                 <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-                <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                  <p className="text-xs font-medium text-gray-700">{currentTableName}</p>
-                  <p className="text-[10px] text-gray-500">
+                <div className="rounded border border-border bg-muted p-2">
+                  <p className="text-xs font-medium text-foreground">{currentTableName}</p>
+                  <p className="text-[10px] text-muted-foreground">
                     컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
                   </p>
                 </div>
@@ -873,7 +873,7 @@ export function V2BomItemEditorConfigPanel({
             {/* 소스 테이블 컬럼 (표시용) */}
             {config.dataSource?.sourceTable && (
               <>
-                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-blue-600">
+                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
                   <Link2 className="h-3 w-3" />
                   소스 테이블 ({config.dataSource.sourceTable}) - 표시용
                 </div>
@@ -882,13 +882,13 @@ export function V2BomItemEditorConfigPanel({
                 ) : sourceTableColumns.length === 0 ? (
                   <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                     {sourceTableColumns.map((column) => (
                       <div
                         key={`source-${column.columnName}`}
                         className={cn(
-                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                          isSourceColumnSelected(column.columnName) && "bg-blue-100",
+                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
                         )}
                         onClick={() => toggleSourceDisplayColumn(column)}
                       >
@@ -897,9 +897,9 @@ export function V2BomItemEditorConfigPanel({
                           onCheckedChange={() => toggleSourceDisplayColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="ml-auto text-[10px] text-blue-400">표시</span>
+                        <span className="ml-auto text-[10px] text-primary/80">표시</span>
                       </div>
                     ))}
                   </div>
@@ -908,7 +908,7 @@ export function V2BomItemEditorConfigPanel({
             )}
 
             {/* 저장 테이블 컬럼 (입력용) */}
-            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-gray-600">
+            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
               <Database className="h-3 w-3" />
               저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
             </div>
@@ -934,7 +934,7 @@ export function V2BomItemEditorConfigPanel({
                     />
                     <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                     <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="ml-auto text-[10px] text-gray-400">{column.inputType}</span>
+                    <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
                   </div>
                 ))}
               </div>
@@ -957,8 +957,8 @@ export function V2BomItemEditorConfigPanel({
                         className={cn(
                           "flex items-center gap-2 rounded-md border p-2",
                           col.isSourceDisplay
-                            ? "border-blue-200 bg-blue-50/50"
-                            : "border-gray-200 bg-muted/30",
+                            ? "border-primary/20 bg-primary/10/50"
+                            : "border-border bg-muted/30",
                           col.hidden && "opacity-50",
                         )}
                         draggable
@@ -983,19 +983,19 @@ export function V2BomItemEditorConfigPanel({
                             onClick={() =>
                               setExpandedColumn(expandedColumn === col.key ? null : col.key)
                             }
-                            className="rounded p-0.5 hover:bg-gray-200"
+                            className="rounded p-0.5 hover:bg-muted/80"
                           >
                             {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-gray-500" />
+                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
                             ) : (
-                              <ChevronRight className="h-3 w-3 text-gray-500" />
+                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
                             )}
                           </button>
                         )}
 
                         {col.isSourceDisplay ? (
                           <Link2
-                            className="h-3 w-3 flex-shrink-0 text-blue-500"
+                            className="h-3 w-3 flex-shrink-0 text-primary"
                             title="소스 표시 (읽기 전용)"
                           />
                         ) : (
@@ -1014,8 +1014,8 @@ export function V2BomItemEditorConfigPanel({
                             type="button"
                             onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
                             className={cn(
-                              "rounded p-1 hover:bg-gray-200",
-                              col.hidden ? "text-gray-400" : "text-gray-600",
+                              "rounded p-1 hover:bg-muted/80",
+                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
                             )}
                             title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
                           >
@@ -1059,9 +1059,9 @@ export function V2BomItemEditorConfigPanel({
 
                       {/* 확장 상세 */}
                       {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-gray-300 bg-gray-50 p-2">
+                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
                           <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">컬럼 너비</Label>
+                            <Label className="text-[10px] text-muted-foreground">컬럼 너비</Label>
                             <Input
                               value={col.width || "auto"}
                               onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
diff --git a/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx b/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
index 7c8c3ed1..e492a13b 100644
--- a/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
@@ -435,21 +435,21 @@ export function V2BomTreeConfigPanel({
             <div
               className={cn(
                 "rounded-lg border p-3",
-                config.detailTable ? "border-orange-300 bg-orange-50" : "border-gray-300 bg-gray-50",
+                config.detailTable ? "border-orange-300 bg-amber-50" : "border-input bg-muted",
               )}
             >
               <div className="flex items-center gap-2">
                 <Database
-                  className={cn("h-4 w-4", config.detailTable ? "text-orange-600" : "text-gray-400")}
+                  className={cn("h-4 w-4", config.detailTable ? "text-amber-600" : "text-muted-foreground/70")}
                 />
                 <div className="flex-1">
-                  <p className={cn("text-sm font-medium", config.detailTable ? "text-orange-700" : "text-gray-500")}>
+                  <p className={cn("text-sm font-medium", config.detailTable ? "text-orange-700" : "text-muted-foreground")}>
                     {config.detailTable
                       ? allTables.find((t) => t.tableName === config.detailTable)?.displayName || config.detailTable
                       : "미설정"}
                   </p>
                   {config.detailTable && config.foreignKey && (
-                    <p className="mt-0.5 text-[10px] text-orange-600">
+                    <p className="mt-0.5 text-[10px] text-amber-600">
                       FK: {config.foreignKey} &rarr; {currentTableName || "메인 테이블"}.id
                     </p>
                   )}
@@ -500,7 +500,7 @@ export function V2BomTreeConfigPanel({
                                 config.detailTable === rel.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Link2 className="mr-2 h-3 w-3 text-orange-500" />
+                            <Link2 className="mr-2 h-3 w-3 text-amber-500" />
                             <span>{rel.tableLabel}</span>
                             <span className="text-muted-foreground ml-1 text-[10px]">
                               ({rel.foreignKeyColumn})
@@ -529,7 +529,7 @@ export function V2BomTreeConfigPanel({
                                 config.detailTable === table.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Database className="mr-2 h-3 w-3 text-gray-400" />
+                            <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                             <span>{table.displayName}</span>
                           </CommandItem>
                         ))}
@@ -602,8 +602,8 @@ export function V2BomTreeConfigPanel({
                 </div>
               </div>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns ? "로딩 중..." : "디테일 테이블을 먼저 선택하세요"}
                 </p>
               </div>
@@ -632,18 +632,18 @@ export function V2BomTreeConfigPanel({
                   {entityColumns.map((col) => (
                     <SelectItem key={col.columnName} value={col.columnName}>
                       <div className="flex items-center gap-2">
-                        <Link2 className="h-3 w-3 text-blue-500" />
+                        <Link2 className="h-3 w-3 text-primary" />
                         <span>{col.displayName}</span>
-                        <ArrowRight className="h-3 w-3 text-gray-400" />
-                        <span className="text-gray-500">{col.referenceTable}</span>
+                        <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
+                        <span className="text-muted-foreground">{col.referenceTable}</span>
                       </div>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns
                     ? "로딩 중..."
                     : !config.detailTable
@@ -654,9 +654,9 @@ export function V2BomTreeConfigPanel({
             )}
 
             {config.dataSource?.sourceTable && (
-              <div className="space-y-1 rounded border border-green-200 bg-green-50 p-2">
-                <p className="text-xs font-medium text-green-700">선택된 엔티티</p>
-                <div className="text-[10px] text-green-600">
+              <div className="space-y-1 rounded border border-emerald-200 bg-emerald-50 p-2">
+                <p className="text-xs font-medium text-emerald-700">선택된 엔티티</p>
+                <div className="text-[10px] text-emerald-600">
                   <p>참조 테이블: {config.dataSource.sourceTable}</p>
                   <p>FK 컬럼: {config.dataSource.foreignKey}</p>
                 </div>
@@ -723,7 +723,7 @@ export function V2BomTreeConfigPanel({
                                     config.historyTable === table.tableName ? "opacity-100" : "opacity-0",
                                   )}
                                 />
-                                <Database className="mr-2 h-3 w-3 text-gray-400" />
+                                <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                                 <span>{table.displayName}</span>
                               </CommandItem>
                             ))}
@@ -784,7 +784,7 @@ export function V2BomTreeConfigPanel({
                                     config.versionTable === table.tableName ? "opacity-100" : "opacity-0",
                                   )}
                                 />
-                                <Database className="mr-2 h-3 w-3 text-gray-400" />
+                                <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                                 <span>{table.displayName}</span>
                               </CommandItem>
                             ))}
@@ -853,9 +853,9 @@ export function V2BomTreeConfigPanel({
               <Separator />
               <div className="space-y-2">
                 <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-                <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                  <p className="text-xs font-medium text-gray-700">{currentTableName}</p>
-                  <p className="text-[10px] text-gray-500">
+                <div className="rounded border border-border bg-muted p-2">
+                  <p className="text-xs font-medium text-foreground">{currentTableName}</p>
+                  <p className="text-[10px] text-muted-foreground">
                     컬럼 {detailTableColumns.length}개 / 엔티티 {entityColumns.length}개
                   </p>
                 </div>
@@ -875,7 +875,7 @@ export function V2BomTreeConfigPanel({
             {/* 소스 테이블 컬럼 (표시용) */}
             {config.dataSource?.sourceTable && (
               <>
-                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-blue-600">
+                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
                   <Link2 className="h-3 w-3" />
                   소스 테이블 ({config.dataSource.sourceTable}) - 표시용
                 </div>
@@ -884,13 +884,13 @@ export function V2BomTreeConfigPanel({
                 ) : sourceTableColumns.length === 0 ? (
                   <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                     {sourceTableColumns.map((column) => (
                       <div
                         key={`source-${column.columnName}`}
                         className={cn(
-                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                          isSourceColumnSelected(column.columnName) && "bg-blue-100",
+                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
                         )}
                         onClick={() => toggleSourceDisplayColumn(column)}
                       >
@@ -899,9 +899,9 @@ export function V2BomTreeConfigPanel({
                           onCheckedChange={() => toggleSourceDisplayColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="ml-auto text-[10px] text-blue-400">표시</span>
+                        <span className="ml-auto text-[10px] text-primary/80">표시</span>
                       </div>
                     ))}
                   </div>
@@ -910,7 +910,7 @@ export function V2BomTreeConfigPanel({
             )}
 
             {/* 디테일 테이블 컬럼 */}
-            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-gray-600">
+            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
               <Database className="h-3 w-3" />
               디테일 테이블 ({config.detailTable || "미선택"}) - 직접 컬럼
             </div>
@@ -936,7 +936,7 @@ export function V2BomTreeConfigPanel({
                     />
                     <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                     <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="ml-auto text-[10px] text-gray-400">{column.inputType}</span>
+                    <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
                   </div>
                 ))}
               </div>
@@ -959,8 +959,8 @@ export function V2BomTreeConfigPanel({
                         className={cn(
                           "flex items-center gap-2 rounded-md border p-2",
                           col.isSourceDisplay
-                            ? "border-blue-200 bg-blue-50/50"
-                            : "border-gray-200 bg-muted/30",
+                            ? "border-primary/20 bg-primary/10/50"
+                            : "border-border bg-muted/30",
                           col.hidden && "opacity-50",
                         )}
                         draggable
@@ -985,18 +985,18 @@ export function V2BomTreeConfigPanel({
                             onClick={() =>
                               setExpandedColumn(expandedColumn === col.key ? null : col.key)
                             }
-                            className="rounded p-0.5 hover:bg-gray-200"
+                            className="rounded p-0.5 hover:bg-muted/80"
                           >
                             {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-gray-500" />
+                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
                             ) : (
-                              <ChevronRight className="h-3 w-3 text-gray-500" />
+                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
                             )}
                           </button>
                         )}
 
                         {col.isSourceDisplay ? (
-                          <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" title="소스 표시" />
+                          <Link2 className="h-3 w-3 flex-shrink-0 text-primary" title="소스 표시" />
                         ) : (
                           <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         )}
@@ -1013,8 +1013,8 @@ export function V2BomTreeConfigPanel({
                             type="button"
                             onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
                             className={cn(
-                              "rounded p-1 hover:bg-gray-200",
-                              col.hidden ? "text-gray-400" : "text-gray-600",
+                              "rounded p-1 hover:bg-muted/80",
+                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
                             )}
                             title={col.hidden ? "히든" : "표시됨"}
                           >
@@ -1045,9 +1045,9 @@ export function V2BomTreeConfigPanel({
 
                       {/* 확장 상세 */}
                       {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-gray-300 bg-gray-50 p-2">
+                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
                           <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">컬럼 너비</Label>
+                            <Label className="text-[10px] text-muted-foreground">컬럼 너비</Label>
                             <Input
                               value={col.width || "auto"}
                               onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
diff --git a/frontend/components/v2/config-panels/V2InputConfigPanel.tsx b/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
index 46992042..b6239bfe 100644
--- a/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
@@ -126,9 +126,9 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
       {config.inputType === "numbering" && (
         <div className="space-y-3">
           <Separator />
-          <div className="rounded-md border border-blue-200 bg-blue-50 p-3">
-            <p className="text-xs font-medium text-blue-800">채번 타입 안내</p>
-            <p className="mt-1 text-[10px] text-blue-700">
+          <div className="rounded-md border border-primary/20 bg-primary/10 p-3">
+            <p className="text-xs font-medium text-primary">채번 타입 안내</p>
+            <p className="mt-1 text-[10px] text-primary">
               채번 규칙은 <strong>테이블 관리</strong>에서 컬럼별로 설정됩니다.
               <br />
               화면에 배치된 컬럼의 채번 규칙이 자동으로 적용됩니다.
diff --git a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
index 877b1523..76206441 100644
--- a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
@@ -810,7 +810,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                   <SelectItem key={opt.value} value={opt.value}>
                     <div className="flex flex-col">
                       <span>{opt.label}</span>
-                      <span className="text-[10px] text-gray-400">
+                      <span className="text-[10px] text-muted-foreground/70">
                         {opt.value === "inline" && "현재 테이블 컬럼 직접 입력"}
                         {opt.value === "modal" && "엔티티 선택 후 추가 정보 입력"}
                         {opt.value === "button" && "버튼으로 관련 화면 열기"}
@@ -832,22 +832,22 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             <div className={cn(
               "rounded-lg border p-3",
               config.useCustomTable && config.mainTableName
-                ? "border-orange-300 bg-orange-50"
-                : "border-blue-300 bg-blue-50"
+                ? "border-orange-300 bg-amber-50"
+                : "border-primary/40 bg-primary/10"
             )}>
               <div className="flex items-center gap-2">
                 <Database className={cn(
                   "h-4 w-4",
                   config.useCustomTable && config.mainTableName
-                    ? "text-orange-600"
-                    : "text-blue-600"
+                    ? "text-amber-600"
+                    : "text-primary"
                 )} />
                 <div className="flex-1">
                   <p className={cn(
                     "text-sm font-medium",
                     config.useCustomTable && config.mainTableName
                       ? "text-orange-700"
-                      : "text-blue-700"
+                      : "text-primary"
                   )}>
                     {config.useCustomTable && config.mainTableName
                       ? (allTables.find(t => t.tableName === config.mainTableName)?.displayName || config.mainTableName)
@@ -855,12 +855,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                     }
                   </p>
                   {config.useCustomTable && config.mainTableName && config.foreignKeyColumn && (
-                    <p className="text-[10px] text-orange-600 mt-0.5">
+                    <p className="text-[10px] text-amber-600 mt-0.5">
                       FK: {config.foreignKeyColumn} → {currentTableName}.{config.foreignKeySourceColumn || "id"}
                     </p>
                   )}
                   {!config.useCustomTable && currentTableName && (
-                    <p className="text-[10px] text-blue-600 mt-0.5">화면 메인 테이블</p>
+                    <p className="text-[10px] text-primary mt-0.5">화면 메인 테이블</p>
                   )}
                 </div>
               </div>
@@ -909,7 +909,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                               !config.useCustomTable || !config.mainTableName ? "opacity-100" : "opacity-0"
                             )}
                           />
-                          <Database className="mr-2 h-3 w-3 text-blue-500" />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
                           <span>{currentTableName}</span>
                           <span className="ml-1 text-[10px] text-muted-foreground">(기본)</span>
                         </CommandItem>
@@ -935,7 +935,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                 config.mainTableName === rel.tableName ? "opacity-100" : "opacity-0"
                               )}
                             />
-                            <Link2 className="mr-2 h-3 w-3 text-orange-500" />
+                            <Link2 className="mr-2 h-3 w-3 text-amber-500" />
                             <span>{rel.tableLabel}</span>
                             <span className="ml-1 text-[10px] text-muted-foreground">
                               ({rel.foreignKeyColumn})
@@ -965,7 +965,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                 config.mainTableName === table.tableName ? "opacity-100" : "opacity-0"
                               )}
                             />
-                            <Database className="mr-2 h-3 w-3 text-gray-400" />
+                            <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                             <span>{table.displayName}</span>
                           </CommandItem>
                         ))
@@ -1009,8 +1009,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             
             {/* 화면 메인 테이블이 없을 때 안내 */}
             {config.useCustomTable && config.mainTableName && !currentTableName && (
-              <div className="rounded border border-blue-200 bg-blue-50 p-2">
-                <p className="text-[10px] text-blue-700">
+              <div className="rounded border border-primary/20 bg-primary/10 p-2">
+                <p className="text-[10px] text-primary">
                   독립 저장 모드: 화면 테이블 없이 직접 저장합니다.
                 </p>
               </div>
@@ -1023,9 +1023,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
           {currentTableName && (
             <div className="space-y-2">
               <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-xs text-gray-700 font-medium">{currentTableName}</p>
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-xs text-foreground font-medium">{currentTableName}</p>
+                <p className="text-[10px] text-muted-foreground">
                   컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
                 </p>
               </div>
@@ -1055,18 +1055,18 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                       {entityColumns.map((col) => (
                         <SelectItem key={col.columnName} value={col.columnName}>
                           <div className="flex items-center gap-2">
-                            <Link2 className="h-3 w-3 text-blue-500" />
+                            <Link2 className="h-3 w-3 text-primary" />
                             <span>{col.displayName}</span>
-                            <ArrowRight className="h-3 w-3 text-gray-400" />
-                            <span className="text-gray-500">{col.referenceTable}</span>
+                            <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
+                            <span className="text-muted-foreground">{col.referenceTable}</span>
                           </div>
                         </SelectItem>
                       ))}
                     </SelectContent>
                   </Select>
                 ) : (
-                  <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                    <p className="text-[10px] text-gray-500">
+                  <div className="rounded border border-border bg-muted p-2">
+                    <p className="text-[10px] text-muted-foreground">
                       {loadingColumns 
                         ? "로딩 중..." 
                         : !targetTableForColumns 
@@ -1078,9 +1078,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                 
                 {/* 선택된 엔티티 정보 */}
                 {config.dataSource?.sourceTable && (
-                  <div className="rounded border border-green-200 bg-green-50 p-2 space-y-1">
-                    <p className="text-xs text-green-700 font-medium">선택된 엔티티</p>
-                    <div className="text-[10px] text-green-600">
+                  <div className="rounded border border-emerald-200 bg-emerald-50 p-2 space-y-1">
+                    <p className="text-xs text-emerald-700 font-medium">선택된 엔티티</p>
+                    <div className="text-[10px] text-emerald-600">
                       <p>검색 테이블: {config.dataSource.sourceTable}</p>
                       <p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
                     </div>
@@ -1295,7 +1295,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             {/* 모달 모드: 소스 테이블 컬럼 (표시용) */}
             {isModalMode && config.dataSource?.sourceTable && (
               <>
-                <div className="text-[10px] font-medium text-blue-600 mt-2 mb-1 flex items-center gap-1">
+                <div className="text-[10px] font-medium text-primary mt-2 mb-1 flex items-center gap-1">
                   <Link2 className="h-3 w-3" />
                   소스 테이블 ({config.dataSource.sourceTable}) - 표시용
                 </div>
@@ -1304,13 +1304,13 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                 ) : sourceTableColumns.length === 0 ? (
                   <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                     {sourceTableColumns.map((column) => (
                       <div
                         key={`source-${column.columnName}`}
                         className={cn(
-                          "hover:bg-blue-100/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                          isSourceColumnSelected(column.columnName) && "bg-blue-100",
+                          "hover:bg-primary/10/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
                         )}
                         onClick={() => toggleSourceDisplayColumn(column)}
                       >
@@ -1319,9 +1319,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           onCheckedChange={() => toggleSourceDisplayColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="text-blue-500 h-3 w-3 flex-shrink-0" />
+                        <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="text-[10px] text-blue-400 ml-auto">표시</span>
+                        <span className="text-[10px] text-primary/80 ml-auto">표시</span>
                       </div>
                     ))}
                   </div>
@@ -1330,7 +1330,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
           )}
 
             {/* 저장 테이블 컬럼 (입력용) */}
-            <div className="text-[10px] font-medium text-gray-600 mt-3 mb-1 flex items-center gap-1">
+            <div className="text-[10px] font-medium text-muted-foreground mt-3 mb-1 flex items-center gap-1">
               <Database className="h-3 w-3" />
               저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
             </div>
@@ -1358,7 +1358,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                     />
                     <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                     <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="text-[10px] text-gray-400 ml-auto">{column.inputType}</span>
+                    <span className="text-[10px] text-muted-foreground/70 ml-auto">{column.inputType}</span>
                   </div>
                 ))}
               </div>
@@ -1381,7 +1381,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                       <div
                         className={cn(
                           "flex items-center gap-2 rounded-md border p-2",
-                          col.isSourceDisplay ? "border-blue-200 bg-blue-50/50" : "border-gray-200 bg-muted/30",
+                          col.isSourceDisplay ? "border-primary/20 bg-primary/10/50" : "border-border bg-muted/30",
                           col.hidden && "opacity-50",
                         )}
                         draggable
@@ -1407,18 +1407,18 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           <button
                             type="button"
                             onClick={() => setExpandedColumn(expandedColumn === col.key ? null : col.key)}
-                            className="p-0.5 hover:bg-gray-200 rounded"
+                            className="p-0.5 hover:bg-muted/80 rounded"
                           >
                             {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-gray-500" />
+                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
                             ) : (
-                              <ChevronRight className="h-3 w-3 text-gray-500" />
+                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
                             )}
                           </button>
                         )}
                         
                         {col.isSourceDisplay ? (
-                          <Link2 className="text-blue-500 h-3 w-3 flex-shrink-0" title="소스 표시 (읽기 전용)" />
+                          <Link2 className="text-primary h-3 w-3 flex-shrink-0" title="소스 표시 (읽기 전용)" />
                         ) : (
                       <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         )}
@@ -1436,8 +1436,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             type="button"
                             onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
                             className={cn(
-                              "p-1 rounded hover:bg-gray-200",
-                              col.hidden ? "text-gray-400" : "text-gray-600",
+                              "p-1 rounded hover:bg-muted/80",
+                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
                             )}
                             title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
                       >
@@ -1459,7 +1459,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                               "shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium transition-colors",
                               (col.editable ?? true)
                                 ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
-                                : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
+                                : "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70"
                             )}
                             title={(col.editable ?? true) ? "편집 가능 (클릭하여 읽기 전용으로 변경)" : "읽기 전용 (클릭하여 편집 가능으로 변경)"}
                           >
@@ -1486,10 +1486,10 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                       
                       {/* 확장된 상세 설정 (입력 컬럼만) */}
                       {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-gray-300 bg-gray-50 p-2">
+                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
                           {/* 자동 입력 설정 */}
                           <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">자동 입력</Label>
+                            <Label className="text-[10px] text-muted-foreground">자동 입력</Label>
                             <Select
                               value={col.autoFill?.type || "none"}
                               onValueChange={(value) => {
@@ -1515,7 +1515,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                             <div className="space-y-2">
                                               {/* 대상 메뉴 선택 */}
                                               <div className="space-y-1">
-                                                <Label className="text-[10px] text-gray-600">
+                                                <Label className="text-[10px] text-muted-foreground">
                                                   대상 메뉴 선택 <span className="text-destructive">*</span>
                                                 </Label>
                                                 <Select
@@ -1558,11 +1558,11 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                               {/* 채번 규칙 선택 (메뉴 선택 후) */}
                                               {selectedMenuObjid ? (
                                                 <div className="space-y-1">
-                                                  <Label className="text-[10px] text-gray-600">
+                                                  <Label className="text-[10px] text-muted-foreground">
                                                     채번 규칙 선택 <span className="text-destructive">*</span>
                                                   </Label>
                                                   {loadingNumberingRules ? (
-                                                    <p className="text-[10px] text-gray-400">규칙 로딩 중...</p>
+                                                    <p className="text-[10px] text-muted-foreground/70">규칙 로딩 중...</p>
                                                   ) : numberingRules.length === 0 ? (
                                                     <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
                                                       선택된 메뉴에 사용 가능한 채번 규칙이 없습니다
@@ -1594,7 +1594,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                                     </Select>
                                                   )}
                                                   {col.autoFill?.numberingRuleId && (
-                                                    <p className="text-[10px] text-green-600">
+                                                    <p className="text-[10px] text-emerald-600">
                                                       저장 시 채번 API를 통해 자동 생성됩니다.
                                                     </p>
                                                   )}
@@ -1610,7 +1610,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           {/* 메인 폼에서 복사 설정 */}
                           {col.autoFill?.type === "fromMainForm" && (
                             <div className="space-y-1">
-                              <Label className="text-[10px] text-gray-600">복사할 필드명</Label>
+                              <Label className="text-[10px] text-muted-foreground">복사할 필드명</Label>
                               <Input
                                 value={col.autoFill?.sourceField || ""}
                                 onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1626,7 +1626,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           {/* 고정값 설정 */}
                           {col.autoFill?.type === "fixed" && (
                             <div className="space-y-1">
-                              <Label className="text-[10px] text-gray-600">고정값</Label>
+                              <Label className="text-[10px] text-muted-foreground">고정값</Label>
                               <Input
                                 value={String(col.autoFill?.fixedValue || "")}
                                 onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1643,7 +1643,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           {col.autoFill?.type === "parentSequence" && (
                             <div className="space-y-2">
                               <div className="space-y-1">
-                                <Label className="text-[10px] text-gray-600">부모 번호 필드명</Label>
+                                <Label className="text-[10px] text-muted-foreground">부모 번호 필드명</Label>
                                 <Input
                                   value={col.autoFill?.parentField || ""}
                                   onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1653,11 +1653,11 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                   placeholder="work_order_no"
                                   className="h-6 text-xs"
                                 />
-                                <p className="text-[10px] text-gray-400">메인 폼에서 가져올 부모 채번 필드</p>
+                                <p className="text-[10px] text-muted-foreground/70">메인 폼에서 가져올 부모 채번 필드</p>
                               </div>
                               <div className="flex gap-2">
                                 <div className="flex-1 space-y-1">
-                                  <Label className="text-[10px] text-gray-600">구분자</Label>
+                                  <Label className="text-[10px] text-muted-foreground">구분자</Label>
                                   <Input
                                     value={col.autoFill?.separator ?? "-"}
                                     onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1669,7 +1669,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                   />
                                 </div>
                                 <div className="flex-1 space-y-1">
-                                  <Label className="text-[10px] text-gray-600">순번 자릿수</Label>
+                                  <Label className="text-[10px] text-muted-foreground">순번 자릿수</Label>
                                   <Input
                                     type="number"
                                     min={1}
@@ -1683,7 +1683,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                   />
                                 </div>
                               </div>
-                              <p className="text-[10px] text-green-600">
+                              <p className="text-[10px] text-emerald-600">
                                 예시: WO-20260223-005{col.autoFill?.separator ?? "-"}{String(1).padStart(col.autoFill?.sequenceLength ?? 2, "0")}
                               </p>
                             </div>
@@ -1779,7 +1779,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             variant="outline"
                             size="sm"
                             onClick={() => insertColumnToFormula(rule.id, col.key)}
-                            className="h-4 border-dashed px-1 text-[9px] text-blue-600"
+                            className="h-4 border-dashed px-1 text-[9px] text-primary"
                             title="품목 정보 컬럼"
                           >
                             {col.title || col.key}
@@ -1840,12 +1840,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
 
                   return (
                     <div key={tableIndex} className="space-y-1">
-                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
+                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
                         <Link2 className="h-3 w-3" />
                         <span>{joinTable.tableName}</span>
                         <span className="text-muted-foreground">({sourceColumn})</span>
                       </div>
-                      <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                      <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                         {joinTable.availableColumns.map((column, colIndex) => {
                           const isActive = isEntityJoinColumnActive(
                             joinTable.tableName,
@@ -1859,8 +1859,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             <div
                               key={colIndex}
                               className={cn(
-                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                                isActive && "bg-blue-100",
+                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                                isActive && "bg-primary/10",
                               )}
                               onClick={() =>
                                 toggleEntityJoinColumn(
@@ -1876,9 +1876,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                 checked={isActive}
                                 className="pointer-events-none h-3.5 w-3.5"
                               />
-                              <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                              <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="ml-auto text-[10px] text-blue-400">
+                              <span className="ml-auto text-[10px] text-primary/80">
                                 {column.inputType || column.dataType}
                               </span>
                             </div>
@@ -1898,7 +1898,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                 <div className="space-y-1">
                   {config.entityJoins.map((join, idx) => (
                     <div key={idx} className="flex items-center gap-1 rounded border bg-muted/30 px-2 py-1 text-[10px]">
-                      <Database className="h-3 w-3 text-blue-500" />
+                      <Database className="h-3 w-3 text-primary" />
                       <span className="font-medium">{join.sourceColumn}</span>
                       <ArrowRight className="h-3 w-3 text-muted-foreground" />
                       <span>{join.referenceTable}</span>
diff --git a/frontend/components/vehicle/VehicleReport.tsx b/frontend/components/vehicle/VehicleReport.tsx
index 51773c98..e075dd15 100644
--- a/frontend/components/vehicle/VehicleReport.tsx
+++ b/frontend/components/vehicle/VehicleReport.tsx
@@ -287,7 +287,7 @@ export default function VehicleReport() {
                   <Car className="h-3 w-3" />
                   진행 중
                 </div>
-                <div className="mt-1 text-2xl font-bold text-green-600">
+                <div className="mt-1 text-2xl font-bold text-emerald-600">
                   {summary.activeTrips}
                 </div>
                 <div className="text-xs text-muted-foreground">현재 운행</div>
diff --git a/frontend/components/webtypes/RepeaterInput.tsx b/frontend/components/webtypes/RepeaterInput.tsx
index 050b386b..3eb2d21f 100644
--- a/frontend/components/webtypes/RepeaterInput.tsx
+++ b/frontend/components/webtypes/RepeaterInput.tsx
@@ -543,7 +543,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
       const calculatedValue = calculateValue(field.formula, item);
       const formattedValue = formatNumber(calculatedValue, field.numberFormat);
 
-      return <span className="inline-block min-w-[80px] text-sm font-medium text-blue-700">{formattedValue}</span>;
+      return <span className="inline-block min-w-[80px] text-sm font-medium text-primary">{formattedValue}</span>;
     }
 
     // 카테고리 타입은 항상 배지로 표시 (카테고리 관리에서 설정한 색상 적용)
@@ -707,11 +707,11 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                 onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
                 min={field.validation?.min}
                 max={maxValue !== null ? maxValue : field.validation?.max}
-                className={cn("pr-1", exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
+                className={cn("pr-1", exceedsMax && "border-destructive", showWarning && !exceedsMax && "border-amber-500")}
               />
               {value && <div className="text-muted-foreground mt-0.5 text-[10px]">{formattedDisplay}</div>}
               {exceedsMax && (
-                <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+                <div className="mt-0.5 text-[10px] text-destructive">최대 {maxValue}까지 입력 가능</div>
               )}
               {showWarning && !exceedsMax && (
                 <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
@@ -728,10 +728,10 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
               onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
               min={field.validation?.min}
               max={maxValue !== null ? maxValue : field.validation?.max}
-              className={cn(exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
+              className={cn(exceedsMax && "border-destructive", showWarning && !exceedsMax && "border-amber-500")}
             />
             {exceedsMax && (
-              <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+              <div className="mt-0.5 text-[10px] text-destructive">최대 {maxValue}까지 입력 가능</div>
             )}
             {showWarning && !exceedsMax && (
               <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
@@ -988,7 +988,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
 
                   {/* 하위 데이터 조회 패널 (인라인) */}
                   {subDataLookup?.enabled && linkValue && (
-                    <TableRow className="bg-gray-50/50">
+                    <TableRow className="bg-muted/50">
                       <TableCell
                         colSpan={
                           visibleFields.length + (showIndex ? 1 : 0) + (allowReorder && !readonly && !disabled ? 1 : 0) + 1
diff --git a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
index 09b2d7e0..31b8fede 100644
--- a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
+++ b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
@@ -436,7 +436,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             </Command>
           </PopoverContent>
         </Popover>
-        <p className="text-xs text-gray-500">반복 필드 데이터를 저장할 테이블을 선택하세요.</p>
+        <p className="text-xs text-muted-foreground">반복 필드 데이터를 저장할 테이블을 선택하세요.</p>
       </div>
 
       {/* 그룹화 컬럼 설정 */}
@@ -458,7 +458,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             ))}
           </SelectContent>
         </Select>
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           수정 모드에서 이 컬럼 값을 기준으로 관련된 모든 데이터를 조회합니다.
           <br />
           예: 입고번호를 선택하면 같은 입고번호를 가진 모든 품목이 표시됩니다.
@@ -484,7 +484,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             ))}
           </SelectContent>
         </Select>
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           분할 패널에서 좌측 테이블 선택 시 이 컬럼을 기준으로 데이터를 필터링합니다.
           <br />
           예: serial_no를 선택하면 좌측에서 선택한 장비의 serial_no에 해당하는 데이터만 표시됩니다.
@@ -565,7 +565,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                             />
                             <div>
                               <div className="font-medium">{table.displayName || table.tableName}</div>
-                              <div className="text-gray-500">{table.tableName}</div>
+                              <div className="text-muted-foreground">{table.tableName}</div>
                             </div>
                           </CommandItem>
                         ))}
@@ -632,7 +632,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                             />
                             <div>
                               <div className="font-medium">{col.columnLabel || col.columnName}</div>
-                              <div className="text-gray-500">{col.columnName}</div>
+                              <div className="text-muted-foreground">{col.columnName}</div>
                             </div>
                           </CommandItem>
                         ))}
@@ -663,7 +663,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                           className="flex-1 cursor-pointer text-xs font-normal"
                         >
                           {col.columnLabel || col.columnName}
-                          <span className="ml-1 text-gray-400">({col.columnName})</span>
+                          <span className="ml-1 text-muted-foreground/70">({col.columnName})</span>
                         </Label>
                       </div>
                     );
@@ -700,7 +700,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                               onClick={() => handleDisplayColumnMoveUp(colName)}
                               disabled={isFirst}
                             >
-                              <ArrowUp className={cn("h-3 w-3", isFirst ? "text-gray-300" : "text-purple-600")} />
+                              <ArrowUp className={cn("h-3 w-3", isFirst ? "text-muted-foreground/50" : "text-purple-600")} />
                             </Button>
                             <Button
                               type="button"
@@ -710,7 +710,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                               onClick={() => handleDisplayColumnMoveDown(colName)}
                               disabled={isLast}
                             >
-                              <ArrowDown className={cn("h-3 w-3", isLast ? "text-gray-300" : "text-purple-600")} />
+                              <ArrowDown className={cn("h-3 w-3", isLast ? "text-muted-foreground/50" : "text-purple-600")} />
                             </Button>
                           </div>
                           
@@ -720,13 +720,13 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                           {/* 컬럼명 */}
                           <div className="flex-1 text-xs">
                             <span className="font-medium">{col?.columnLabel || colName}</span>
-                            <span className="ml-1 text-gray-400">({colName})</span>
+                            <span className="ml-1 text-muted-foreground/70">({colName})</span>
                           </div>
                         </div>
                         
                         {/* 중단: 라벨 입력 */}
                         <div className="mt-1.5 flex items-center gap-2">
-                          <span className="text-[10px] text-gray-500 whitespace-nowrap">표시 라벨:</span>
+                          <span className="text-[10px] text-muted-foreground whitespace-nowrap">표시 라벨:</span>
                           <Input
                             value={currentLabel}
                             onChange={(e) => handleColumnLabelChange(colName, e.target.value)}
@@ -842,7 +842,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                         선택 안함
                       </SelectItem>
                       {localFields.length === 0 ? (
-                        <SelectItem value="__empty__" disabled className="text-xs text-gray-400">
+                        <SelectItem value="__empty__" disabled className="text-xs text-muted-foreground/70">
                           필드 정의에서 먼저 필드를 추가하세요
                         </SelectItem>
                       ) : (
@@ -982,7 +982,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <Label className="text-sm font-semibold">필드 정의</Label>
-          <span className="text-xs text-gray-500">드래그하거나 화살표로 순서 변경</span>
+          <span className="text-xs text-muted-foreground">드래그하거나 화살표로 순서 변경</span>
         </div>
 
         {localFields.map((field, index) => (
@@ -990,7 +990,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             key={`${field.name}-${index}`}
             className={cn(
               "border-2 transition-all",
-              draggedFieldIndex === index && "opacity-50 border-blue-400",
+              draggedFieldIndex === index && "opacity-50 border-primary/60",
               draggedFieldIndex !== null && draggedFieldIndex !== index && "border-dashed",
             )}
             draggable
@@ -1003,8 +1003,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   {/* 드래그 핸들 */}
-                  <GripVertical className="h-4 w-4 cursor-move text-gray-400 hover:text-gray-600" />
-                  <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
+                  <GripVertical className="h-4 w-4 cursor-move text-muted-foreground/70 hover:text-muted-foreground" />
+                  <span className="text-sm font-semibold text-foreground">필드 {index + 1}</span>
                 </div>
                 <div className="flex items-center gap-1">
                   {/* 순서 변경 버튼 */}
@@ -1014,7 +1014,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     size="icon"
                     onClick={() => moveFieldUp(index)}
                     disabled={index === 0}
-                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    className="h-6 w-6 text-muted-foreground hover:bg-muted disabled:opacity-30"
                     title="위로 이동"
                   >
                     <ArrowUp className="h-3 w-3" />
@@ -1025,7 +1025,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     size="icon"
                     onClick={() => moveFieldDown(index)}
                     disabled={index === localFields.length - 1}
-                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    className="h-6 w-6 text-muted-foreground hover:bg-muted disabled:opacity-30"
                     title="아래로 이동"
                   >
                     <ArrowDown className="h-3 w-3" />
@@ -1036,7 +1036,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     variant="ghost"
                     size="icon"
                     onClick={() => removeField(index)}
-                    className="h-6 w-6 text-red-500 hover:bg-red-50"
+                    className="h-6 w-6 text-destructive hover:bg-destructive/10"
                     title="삭제"
                   >
                     <X className="h-3 w-3" />
@@ -1106,7 +1106,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                               />
                               <div>
                                 <div className="font-medium">{column.columnLabel}</div>
-                                <div className="text-gray-500">{column.columnName}</div>
+                                <div className="text-muted-foreground">{column.columnName}</div>
                               </div>
                             </CommandItem>
                           ))}
@@ -1180,15 +1180,15 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
               {/* 계산식 타입일 때 계산식 설정 */}
               {field.type === "calculated" && (
-                <div className="space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+                <div className="space-y-3 rounded-lg border border-primary/20 bg-primary/10 p-3">
                   <div className="flex items-center gap-2">
-                    <Calculator className="h-4 w-4 text-blue-600" />
-                    <Label className="text-xs font-semibold text-blue-800">계산식 설정</Label>
+                    <Calculator className="h-4 w-4 text-primary" />
+                    <Label className="text-xs font-semibold text-primary">계산식 설정</Label>
                   </div>
 
                   {/* 필드 1 선택 */}
                   <div className="space-y-1">
-                    <Label className="text-[10px] text-blue-700">필드 1</Label>
+                    <Label className="text-[10px] text-primary">필드 1</Label>
                     <Select
                       value={field.formula?.field1 || ""}
                       onValueChange={(value) =>
@@ -1214,7 +1214,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
                   {/* 연산자 선택 */}
                   <div className="space-y-1">
-                    <Label className="text-[10px] text-blue-700">연산자</Label>
+                    <Label className="text-[10px] text-primary">연산자</Label>
                     <Select
                       value={field.formula?.operator || "+"}
                       onValueChange={(value) =>
@@ -1258,7 +1258,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                   {/* 두 번째 필드 또는 상수값 */}
                   {!["round", "floor", "ceil", "abs"].includes(field.formula?.operator || "") ? (
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-blue-700">필드 2 / 상수</Label>
+                      <Label className="text-[10px] text-primary">필드 2 / 상수</Label>
                       <Select
                         value={
                           field.formula?.field2 ||
@@ -1295,7 +1295,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                                 {f.label || f.name}
                               </SelectItem>
                             ))}
-                          <SelectItem value="__const__0" className="text-xs text-blue-600">
+                          <SelectItem value="__const__0" className="text-xs text-primary">
                             상수값 입력
                           </SelectItem>
                         </SelectContent>
@@ -1303,7 +1303,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     </div>
                   ) : (
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-blue-700">소수점 자릿수</Label>
+                      <Label className="text-[10px] text-primary">소수점 자릿수</Label>
                       <Input
                         type="number"
                         min={0}
@@ -1325,7 +1325,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                   {/* 상수값 입력 필드 */}
                   {field.formula?.constantValue !== undefined && (
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-blue-700">상수값</Label>
+                      <Label className="text-[10px] text-primary">상수값</Label>
                       <Input
                         type="number"
                         value={field.formula.constantValue}
@@ -1344,8 +1344,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                   )}
 
                   {/* 숫자 포맷 설정 */}
-                  <div className="space-y-2 border-t border-blue-200 pt-2">
-                    <Label className="text-[10px] text-blue-700">숫자 표시 형식</Label>
+                  <div className="space-y-2 border-t border-primary/20 pt-2">
+                    <Label className="text-[10px] text-primary">숫자 표시 형식</Label>
                     <div className="flex items-center gap-4">
                       <div className="flex items-center space-x-2">
                         <Checkbox
@@ -1403,8 +1403,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
                   {/* 계산식 미리보기 */}
                   <div className="rounded bg-white p-2 text-xs">
-                    <span className="text-gray-500">계산식: </span>
-                    <code className="font-mono text-blue-700">
+                    <span className="text-muted-foreground">계산식: </span>
+                    <code className="font-mono text-primary">
                       {field.formula?.field1 || "필드1"} {field.formula?.operator || "+"}{" "}
                       {field.formula?.field2 ||
                         (field.formula?.constantValue !== undefined ? field.formula.constantValue : "필드2")}
@@ -1415,8 +1415,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
               {/* 숫자 타입일 때 숫자 표시 형식 설정 */}
               {field.type === "number" && (
-                <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  <Label className="text-xs font-semibold text-gray-700">숫자 표시 형식</Label>
+                <div className="space-y-2 rounded-lg border border-border bg-muted p-3">
+                  <Label className="text-xs font-semibold text-foreground">숫자 표시 형식</Label>
                   <div className="flex items-center gap-4">
                     <div className="flex items-center space-x-2">
                       <Checkbox
@@ -1749,9 +1749,9 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
       </div>
 
       {/* 사용 예시 */}
-      <div className="rounded-lg bg-blue-50 p-3 text-sm">
-        <p className="mb-1 font-medium text-blue-900">💡 사용 예시</p>
-        <ul className="space-y-1 text-xs text-blue-700">
+      <div className="rounded-lg bg-primary/10 p-3 text-sm">
+        <p className="mb-1 font-medium text-primary">💡 사용 예시</p>
+        <ul className="space-y-1 text-xs text-primary">
           <li>• 담당자 정보 (이름, 전화번호, 이메일)</li>
           <li>• 학력 정보 (학교명, 전공, 졸업년도)</li>
           <li>• 경력 사항 (회사명, 직책, 기간)</li>
diff --git a/frontend/lib/api/vehicleTrip.ts b/frontend/lib/api/vehicleTrip.ts
index 2e452dd6..436e4589 100644
--- a/frontend/lib/api/vehicleTrip.ts
+++ b/frontend/lib/api/vehicleTrip.ts
@@ -196,13 +196,13 @@ export function getStatusLabel(status: string): string {
 export function getStatusColor(status: string): string {
   switch (status) {
     case "active":
-      return "bg-green-100 text-green-800";
+      return "bg-emerald-100 text-emerald-800";
     case "completed":
-      return "bg-blue-100 text-blue-800";
+      return "bg-primary/10 text-primary";
     case "cancelled":
-      return "bg-gray-100 text-gray-800";
+      return "bg-muted text-foreground";
     default:
-      return "bg-gray-100 text-gray-800";
+      return "bg-muted text-foreground";
   }
 }
 
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 50c4bee4..8a7b6810 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -455,7 +455,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
               className="text-sm font-medium"
             >
               {catLabelText}
-              {isRequired && <span className="text-orange-500 ml-0.5">*</span>}
+              {isRequired && <span className="text-amber-500 ml-0.5">*</span>}
             </label>
             <div style={{ width: "100%", height: "100%" }}>
               {renderedCatSelect}
@@ -873,7 +873,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
                 className="text-sm font-medium"
               >
                 {effectiveLabel}
-                {isRequired && <span className="text-orange-500 ml-0.5">*</span>}
+                {isRequired && <span className="text-amber-500 ml-0.5">*</span>}
               </label>
               <div style={{ width: "100%", height: "100%" }}>
                 {renderedElement}
@@ -965,10 +965,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
     // 오류 발생 시 폴백 렌더링
     return (
-      <div className="flex h-full w-full items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
+      <div className="flex h-full w-full items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
         <div className="text-center">
-          <div className="mb-2 text-sm font-medium text-red-600">렌더링 오류</div>
-          <div className="text-xs text-red-400">
+          <div className="mb-2 text-sm font-medium text-destructive">렌더링 오류</div>
+          <div className="text-xs text-destructive/80">
             {componentType}: {error instanceof Error ? error.message : "알 수 없는 오류"}
           </div>
         </div>
diff --git a/frontend/lib/registry/DynamicConfigPanel.tsx b/frontend/lib/registry/DynamicConfigPanel.tsx
index 47743f3d..52a5030a 100644
--- a/frontend/lib/registry/DynamicConfigPanel.tsx
+++ b/frontend/lib/registry/DynamicConfigPanel.tsx
@@ -31,11 +31,11 @@ export const DynamicConfigPanel: React.FC<
   // 웹타입이 DB에 없는 경우
   if (!webTypes) {
     return (
-      <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4">
-        <div className="flex items-center gap-2 text-gray-600">
+      <div className="rounded-md border border-dashed border-input bg-muted p-4">
+        <div className="flex items-center gap-2 text-muted-foreground">
           <span className="text-sm font-medium">⏳ 로딩 중...</span>
         </div>
-        <p className="mt-1 text-xs text-gray-500">웹타입 정보를 불러오는 중입니다.</p>
+        <p className="mt-1 text-xs text-muted-foreground">웹타입 정보를 불러오는 중입니다.</p>
       </div>
     );
   }
@@ -43,11 +43,11 @@ export const DynamicConfigPanel: React.FC<
   if (!dbWebType) {
     console.warn(`웹타입 "${webType}"이 데이터베이스에 등록되지 않았습니다.`);
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">⚠️ 웹타입 없음</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">웹타입 "{webType}"이 데이터베이스에 등록되지 않았습니다.</p>
+        <p className="mt-1 text-xs text-destructive">웹타입 "{webType}"이 데이터베이스에 등록되지 않았습니다.</p>
       </div>
     );
   }
@@ -60,11 +60,11 @@ export const DynamicConfigPanel: React.FC<
   if (!configPanelName || configPanelName === "none") {
     console.log(`🔧 DynamicConfigPanel: 설정 패널이 없음 - 기본 설정 표시`);
     return (
-      <div className="rounded-md border border-dashed border-yellow-300 bg-yellow-50 p-4">
-        <div className="flex items-center gap-2 text-yellow-600">
+      <div className="rounded-md border border-dashed border-amber-300 bg-amber-50 p-4">
+        <div className="flex items-center gap-2 text-amber-600">
           <span className="text-sm font-medium">⚠️ 기본 설정</span>
         </div>
-        <p className="mt-1 text-xs text-yellow-500">웹타입 "{webType}"에 대한 추가 설정이 없습니다.</p>
+        <p className="mt-1 text-xs text-amber-500">웹타입 "{webType}"에 대한 추가 설정이 없습니다.</p>
       </div>
     );
   }
@@ -76,11 +76,11 @@ export const DynamicConfigPanel: React.FC<
   if (!ConfigPanelComponent) {
     console.warn(`설정 패널 "${configPanelName}"을 찾을 수 없습니다.`);
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">⚠️ 설정 패널 미구현</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">설정 패널 "{configPanelName}"을 찾을 수 없습니다.</p>
+        <p className="mt-1 text-xs text-destructive">설정 패널 "{configPanelName}"을 찾을 수 없습니다.</p>
       </div>
     );
   }
@@ -100,13 +100,13 @@ export const DynamicConfigPanel: React.FC<
   } catch (error) {
     console.error(`웹타입 "${webType}" 설정 패널 렌더링 중 오류 발생:`, error);
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">💥 설정 패널 오류</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">웹타입 "{webType}" 설정 패널 렌더링 중 오류가 발생했습니다.</p>
+        <p className="mt-1 text-xs text-destructive">웹타입 "{webType}" 설정 패널 렌더링 중 오류가 발생했습니다.</p>
         {process.env.NODE_ENV === "development" && (
-          <pre className="mt-2 overflow-auto text-xs text-red-400">
+          <pre className="mt-2 overflow-auto text-xs text-destructive/80">
             {error instanceof Error ? error.stack : String(error)}
           </pre>
         )}
diff --git a/frontend/lib/registry/DynamicLayoutRenderer.tsx b/frontend/lib/registry/DynamicLayoutRenderer.tsx
index ae4473e2..ce6165f2 100644
--- a/frontend/lib/registry/DynamicLayoutRenderer.tsx
+++ b/frontend/lib/registry/DynamicLayoutRenderer.tsx
@@ -54,13 +54,13 @@ export const DynamicLayoutRenderer: React.FC<DynamicLayoutRendererProps> = ({
     // 폴백 렌더링 - 기본 플레이스홀더
     return (
       <div
-        className={`flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50 p-4 ${className || ""}`}
+        className={`flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted p-4 ${className || ""}`}
         style={style}
         onClick={onClick}
       >
         <div className="text-center">
-          <div className="mb-2 text-sm font-medium text-gray-600">{layout.label || `레이아웃 ${layout.id}`}</div>
-          <div className="text-xs text-gray-400">미구현 레이아웃: {layout.layoutType}</div>
+          <div className="mb-2 text-sm font-medium text-muted-foreground">{layout.label || `레이아웃 ${layout.id}`}</div>
+          <div className="text-xs text-muted-foreground/70">미구현 레이아웃: {layout.layoutType}</div>
         </div>
       </div>
     );
@@ -97,13 +97,13 @@ export const DynamicLayoutRenderer: React.FC<DynamicLayoutRendererProps> = ({
     // 오류 발생 시 폴백 렌더링
     return (
       <div
-        className={`flex h-full w-full items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4 ${className || ""}`}
+        className={`flex h-full w-full items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4 ${className || ""}`}
         style={style}
         onClick={onClick}
       >
         <div className="text-center">
-          <div className="mb-2 text-sm font-medium text-red-600">레이아웃 렌더링 오류</div>
-          <div className="text-xs text-red-400">
+          <div className="mb-2 text-sm font-medium text-destructive">레이아웃 렌더링 오류</div>
+          <div className="text-xs text-destructive/80">
             {layout.layoutType}: {error instanceof Error ? error.message : "알 수 없는 오류"}
           </div>
         </div>
diff --git a/frontend/lib/registry/DynamicWebTypeRenderer.tsx b/frontend/lib/registry/DynamicWebTypeRenderer.tsx
index 9bfe59ff..8b6e66bf 100644
--- a/frontend/lib/registry/DynamicWebTypeRenderer.tsx
+++ b/frontend/lib/registry/DynamicWebTypeRenderer.tsx
@@ -133,11 +133,11 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
     if (!webTypeDefinition.isActive) {
       // console.warn(`웹타입 "${webType}"이 비활성화되어 있습니다.`);
       return (
-        <div className="rounded-md border border-dashed border-yellow-500/30 bg-yellow-50 p-3 dark:bg-yellow-950/20">
+        <div className="rounded-md border border-dashed border-yellow-500/30 bg-amber-50 p-3 dark:bg-yellow-950/20">
           <div className="flex items-center gap-2 text-yellow-700 dark:text-yellow-400">
             <span className="text-xs font-medium">⚠️ 비활성화된 웹타입</span>
           </div>
-          <p className="mt-1 text-xs text-yellow-600 dark:text-yellow-500">
+          <p className="mt-1 text-xs text-amber-600 dark:text-amber-500">
             웹타입 "{webType}"이 비활성화되어 있습니다.
           </p>
         </div>
diff --git a/frontend/lib/registry/components/AreaRenderer.tsx b/frontend/lib/registry/components/AreaRenderer.tsx
index c2f8842a..7da6a5cf 100644
--- a/frontend/lib/registry/components/AreaRenderer.tsx
+++ b/frontend/lib/registry/components/AreaRenderer.tsx
@@ -28,14 +28,14 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
   const renderPlaceholder = () => (
     <div className="flex h-full flex-col items-center justify-center text-center">
       {getAreaIcon(layoutType)}
-      <div className="mt-2 text-sm font-medium text-gray-600">{title || "영역"}</div>
-      {description && <div className="mt-1 text-xs text-gray-400">{description}</div>}
-      <div className="mt-1 text-xs text-gray-400">레이아웃: {layoutType}</div>
+      <div className="mt-2 text-sm font-medium text-muted-foreground">{title || "영역"}</div>
+      {description && <div className="mt-1 text-xs text-muted-foreground/70">{description}</div>}
+      <div className="mt-1 text-xs text-muted-foreground/70">레이아웃: {layoutType}</div>
     </div>
   );
 
   return (
-    <div className="relative h-full w-full rounded border border-dashed border-gray-300 bg-gray-50 p-2">
+    <div className="relative h-full w-full rounded border border-dashed border-input bg-muted p-2">
       <div className="relative h-full w-full">
         {children && React.Children.count(children) > 0 ? children : renderPlaceholder()}
       </div>
diff --git a/frontend/lib/registry/components/ChartRenderer.tsx b/frontend/lib/registry/components/ChartRenderer.tsx
index 1d86fe6c..99a87c6b 100644
--- a/frontend/lib/registry/components/ChartRenderer.tsx
+++ b/frontend/lib/registry/components/ChartRenderer.tsx
@@ -19,9 +19,9 @@ const ChartRenderer: ComponentRenderer = ({ component, ...props }) => {
   const getChartIcon = () => {
     switch (chartType) {
       case "line":
-        return <LineChart className="h-8 w-8 text-blue-500" />;
+        return <LineChart className="h-8 w-8 text-primary" />;
       case "pie":
-        return <PieChart className="h-8 w-8 text-green-500" />;
+        return <PieChart className="h-8 w-8 text-emerald-500" />;
       default:
         return <BarChart3 className="h-8 w-8 text-purple-500" />;
     }
@@ -46,9 +46,9 @@ const ChartRenderer: ComponentRenderer = ({ component, ...props }) => {
       <CardContent className="flex flex-1 items-center justify-center">
         <div className="text-center">
           {getChartIcon()}
-          <div className="mt-2 text-sm text-gray-600">{getChartTypeName()}</div>
-          <div className="mt-1 text-xs text-gray-400">미리보기 모드</div>
-          {data.length > 0 && <div className="mt-2 text-xs text-gray-500">데이터 {data.length}개 항목</div>}
+          <div className="mt-2 text-sm text-muted-foreground">{getChartTypeName()}</div>
+          <div className="mt-1 text-xs text-muted-foreground/70">미리보기 모드</div>
+          {data.length > 0 && <div className="mt-2 text-xs text-muted-foreground">데이터 {data.length}개 항목</div>}
         </div>
       </CardContent>
     </Card>
diff --git a/frontend/lib/registry/components/DashboardRenderer.tsx b/frontend/lib/registry/components/DashboardRenderer.tsx
index 5d31dcc4..ce77a144 100644
--- a/frontend/lib/registry/components/DashboardRenderer.tsx
+++ b/frontend/lib/registry/components/DashboardRenderer.tsx
@@ -39,8 +39,8 @@ const DashboardRenderer: ComponentRenderer = ({ component, children, isInteracti
               key={index}
               className={`flex min-h-0 items-center justify-center rounded p-2 ${
                 isInteractive
-                  ? "border border-gray-200 bg-white shadow-sm"
-                  : "border-2 border-dashed border-gray-300 bg-gray-50"
+                  ? "border border-border bg-white shadow-sm"
+                  : "border-2 border-dashed border-input bg-muted"
               }`}
               style={{
                 minWidth: 0,
@@ -49,11 +49,11 @@ const DashboardRenderer: ComponentRenderer = ({ component, children, isInteracti
               }}
             >
               <div className="text-center">
-                <LayoutGrid className={`mx-auto mb-2 h-6 w-6 ${isInteractive ? "text-blue-500" : "text-gray-400"}`} />
-                <div className={`text-xs ${isInteractive ? "font-medium text-gray-700" : "text-gray-400"}`}>
+                <LayoutGrid className={`mx-auto mb-2 h-6 w-6 ${isInteractive ? "text-primary" : "text-muted-foreground/70"}`} />
+                <div className={`text-xs ${isInteractive ? "font-medium text-foreground" : "text-muted-foreground/70"}`}>
                   그리드 {index + 1}
                 </div>
-                {isInteractive && <div className="mt-1 text-xs text-gray-500">실제 화면</div>}
+                {isInteractive && <div className="mt-1 text-xs text-muted-foreground">실제 화면</div>}
               </div>
             </div>
           ))}
diff --git a/frontend/lib/registry/components/FileRenderer.tsx b/frontend/lib/registry/components/FileRenderer.tsx
index cf8a0d18..66ccab76 100644
--- a/frontend/lib/registry/components/FileRenderer.tsx
+++ b/frontend/lib/registry/components/FileRenderer.tsx
@@ -9,11 +9,11 @@ import { File } from "lucide-react";
 const FileRenderer: ComponentRenderer = ({ component, ...props }) => {
   return (
     <div className="flex h-full flex-col">
-      <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-4">
+      <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-input bg-muted p-4">
         <div className="flex h-full flex-col items-center justify-center text-center">
-          <File className="mb-2 h-8 w-8 text-gray-400" />
-          <p className="text-sm text-gray-600">파일 업로드 영역</p>
-          <p className="mt-1 text-xs text-gray-400">미리보기 모드</p>
+          <File className="mb-2 h-8 w-8 text-muted-foreground/70" />
+          <p className="text-sm text-muted-foreground">파일 업로드 영역</p>
+          <p className="mt-1 text-xs text-muted-foreground/70">미리보기 모드</p>
         </div>
       </div>
     </div>
diff --git a/frontend/lib/registry/components/FilterDropdownRenderer.tsx b/frontend/lib/registry/components/FilterDropdownRenderer.tsx
index 8be96162..f21abfab 100644
--- a/frontend/lib/registry/components/FilterDropdownRenderer.tsx
+++ b/frontend/lib/registry/components/FilterDropdownRenderer.tsx
@@ -23,7 +23,7 @@ const FilterDropdownRenderer: ComponentRenderer = ({ component, ...props }) => {
 
   return (
     <div className="flex h-full w-full items-center gap-2 p-2" style={style}>
-      {showIcon && <Filter className="h-4 w-4 text-gray-500" />}
+      {showIcon && <Filter className="h-4 w-4 text-muted-foreground" />}
       <div className="flex-1">
         <Select disabled>
           <SelectTrigger className="pointer-events-none">
diff --git a/frontend/lib/registry/components/LoadingRenderer.tsx b/frontend/lib/registry/components/LoadingRenderer.tsx
index 09f93105..1bc5ac95 100644
--- a/frontend/lib/registry/components/LoadingRenderer.tsx
+++ b/frontend/lib/registry/components/LoadingRenderer.tsx
@@ -28,8 +28,8 @@ const LoadingRenderer: ComponentRenderer = ({ component, ...props }) => {
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-2" style={style}>
-      <Loader2 className={`animate-spin text-blue-600 ${getSizeClass()}`} />
-      {showText && <div className="text-sm text-gray-600">{text}</div>}
+      <Loader2 className={`animate-spin text-primary ${getSizeClass()}`} />
+      {showText && <div className="text-sm text-muted-foreground">{text}</div>}
     </div>
   );
 };
diff --git a/frontend/lib/registry/components/PanelRenderer.tsx b/frontend/lib/registry/components/PanelRenderer.tsx
index c6b4dac2..89dbec62 100644
--- a/frontend/lib/registry/components/PanelRenderer.tsx
+++ b/frontend/lib/registry/components/PanelRenderer.tsx
@@ -16,21 +16,21 @@ const PanelRenderer: ComponentRenderer = ({ component, children, ...props }) =>
 
   return (
     <Card 
-      className="h-full w-full border-2 border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300 hover:border-orange-300" 
+      className="h-full w-full border-2 border-border shadow-lg hover:shadow-xl transition-all duration-300 hover:border-orange-300" 
       style={style}
     >
-      <CardHeader className="pb-2 bg-gradient-to-r from-slate-50 to-gray-50 border-b border-gray-200">
+      <CardHeader className="pb-2 bg-gradient-to-r from-slate-50 to-muted border-b border-border">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-lg font-semibold text-gray-800">{title}</CardTitle>
+          <CardTitle className="text-lg font-semibold text-foreground">{title}</CardTitle>
           {collapsible && (
             <Button
               variant="ghost"
               size="sm"
               onClick={() => setIsExpanded(!isExpanded)}
-              className="pointer-events-none h-6 w-6 p-0 hover:bg-orange-100 rounded-full"
+              className="pointer-events-none h-6 w-6 p-0 hover:bg-amber-100 rounded-full"
               disabled
             >
-              {isExpanded ? <ChevronUp className="h-4 w-4 text-orange-600" /> : <ChevronDown className="h-4 w-4 text-orange-600" />}
+              {isExpanded ? <ChevronUp className="h-4 w-4 text-amber-600" /> : <ChevronDown className="h-4 w-4 text-amber-600" />}
             </Button>
           )}
         </div>
@@ -41,9 +41,9 @@ const PanelRenderer: ComponentRenderer = ({ component, children, ...props }) =>
             children
           ) : (
             <div className="flex h-full items-center justify-center text-center p-8">
-              <div className="bg-gray-50 rounded-lg p-6 border-2 border-dashed border-gray-300">
-                <div className="text-sm text-gray-600 font-medium">패널 내용 영역</div>
-                <div className="mt-2 text-xs text-gray-400">컴포넌트를 여기에 배치하세요</div>
+              <div className="bg-muted rounded-lg p-6 border-2 border-dashed border-input">
+                <div className="text-sm text-muted-foreground font-medium">패널 내용 영역</div>
+                <div className="mt-2 text-xs text-muted-foreground/70">컴포넌트를 여기에 배치하세요</div>
               </div>
             </div>
           )}
diff --git a/frontend/lib/registry/components/ProgressBarRenderer.tsx b/frontend/lib/registry/components/ProgressBarRenderer.tsx
index 8e24d74f..36cb409e 100644
--- a/frontend/lib/registry/components/ProgressBarRenderer.tsx
+++ b/frontend/lib/registry/components/ProgressBarRenderer.tsx
@@ -24,8 +24,8 @@ const ProgressBarRenderer: ComponentRenderer = ({ component, ...props }) => {
     <div className="flex h-full w-full flex-col justify-center p-4" style={style}>
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-700">{label}</span>
-          <div className="flex items-center gap-2 text-sm text-gray-600">
+          <span className="text-sm font-medium text-foreground">{label}</span>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
             {showValue && (
               <span>
                 {value}/{max}
diff --git a/frontend/lib/registry/components/SearchBoxRenderer.tsx b/frontend/lib/registry/components/SearchBoxRenderer.tsx
index 5ca081e0..00a264c5 100644
--- a/frontend/lib/registry/components/SearchBoxRenderer.tsx
+++ b/frontend/lib/registry/components/SearchBoxRenderer.tsx
@@ -15,7 +15,7 @@ const SearchBoxRenderer: ComponentRenderer = ({ component, ...props }) => {
   return (
     <div className="flex h-full w-full items-center gap-2 p-2" style={style}>
       <div className="relative flex-1">
-        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
         <Input placeholder={placeholder} className="pointer-events-none pl-10" disabled />
       </div>
       {showButton && (
diff --git a/frontend/lib/registry/components/StatsCardRenderer.tsx b/frontend/lib/registry/components/StatsCardRenderer.tsx
index e7fd3883..6a5e334f 100644
--- a/frontend/lib/registry/components/StatsCardRenderer.tsx
+++ b/frontend/lib/registry/components/StatsCardRenderer.tsx
@@ -21,29 +21,29 @@ const StatsCardRenderer: ComponentRenderer = ({ component, ...props }) => {
   const getTrendIcon = () => {
     switch (trend) {
       case "up":
-        return <TrendingUp className="h-4 w-4 text-green-600" />;
+        return <TrendingUp className="h-4 w-4 text-emerald-600" />;
       case "down":
-        return <TrendingDown className="h-4 w-4 text-red-600" />;
+        return <TrendingDown className="h-4 w-4 text-destructive" />;
       default:
-        return <Minus className="h-4 w-4 text-gray-600" />;
+        return <Minus className="h-4 w-4 text-muted-foreground" />;
     }
   };
 
   const getTrendColor = () => {
     switch (trend) {
       case "up":
-        return "text-green-600";
+        return "text-emerald-600";
       case "down":
-        return "text-red-600";
+        return "text-destructive";
       default:
-        return "text-gray-600";
+        return "text-muted-foreground";
     }
   };
 
   return (
     <Card className="h-full w-full" style={style}>
       <CardHeader className="pb-2">
-        <CardTitle className="text-sm font-medium text-gray-600">{title}</CardTitle>
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="flex items-center justify-between">
@@ -52,7 +52,7 @@ const StatsCardRenderer: ComponentRenderer = ({ component, ...props }) => {
             <div className={`flex items-center gap-1 text-sm ${getTrendColor()}`}>
               {getTrendIcon()}
               <span>{change}</span>
-              <span className="text-gray-500">{description}</span>
+              <span className="text-muted-foreground">{description}</span>
             </div>
           </div>
         </div>
diff --git a/frontend/lib/registry/components/TabsRenderer.tsx b/frontend/lib/registry/components/TabsRenderer.tsx
index 99efdaca..fd98bda6 100644
--- a/frontend/lib/registry/components/TabsRenderer.tsx
+++ b/frontend/lib/registry/components/TabsRenderer.tsx
@@ -34,10 +34,10 @@ const TabsRenderer: ComponentRenderer = ({ component, children, ...props }) => {
             {children && React.Children.count(children) > 0 ? (
               children
             ) : (
-              <div className="flex h-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50">
+              <div className="flex h-full items-center justify-center rounded border border-dashed border-input bg-muted">
                 <div className="text-center">
-                  <div className="text-sm text-gray-600">{tab.content}</div>
-                  <div className="mt-1 text-xs text-gray-400">탭 내용 영역</div>
+                  <div className="text-sm text-muted-foreground">{tab.content}</div>
+                  <div className="mt-1 text-xs text-muted-foreground/70">탭 내용 영역</div>
                 </div>
               </div>
             )}
diff --git a/frontend/lib/registry/components/WidgetRenderer.tsx b/frontend/lib/registry/components/WidgetRenderer.tsx
index 7b7aa218..62ec7bf1 100644
--- a/frontend/lib/registry/components/WidgetRenderer.tsx
+++ b/frontend/lib/registry/components/WidgetRenderer.tsx
@@ -10,7 +10,7 @@ import { DynamicWebTypeRenderer } from "../DynamicWebTypeRenderer";
 const WidgetRenderer: ComponentRenderer = ({ component, ...props }) => {
   // 위젯 컴포넌트가 아닌 경우 빈 div 반환
   if (component.type !== "widget") {
-    return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
+    return <div className="text-xs text-muted-foreground">위젯이 아닙니다</div>;
   }
 
   const widget = component as WidgetComponent;
diff --git a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
index 78951f7e..27d52b81 100644
--- a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
+++ b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
@@ -703,11 +703,11 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
 
       {loading ? (
         <div className="flex h-full w-full items-center justify-center">
-          <div className="text-sm text-gray-500">데이터를 불러오는 중...</div>
+          <div className="text-sm text-muted-foreground">데이터를 불러오는 중...</div>
         </div>
       ) : error && !isDesignMode ? (
         <div className="flex h-full w-full items-center justify-center">
-          <div className="text-sm text-red-500">{error}</div>
+          <div className="text-sm text-destructive">{error}</div>
         </div>
       ) : (
         <div
diff --git a/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx b/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx
index 2fa0b1d9..bf44617c 100644
--- a/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx
+++ b/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx
@@ -233,7 +233,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                               contentFields: newContentFields,
                             });
                           }}
-                          className="h-8 w-8 p-0 text-red-500"
+                          className="h-8 w-8 p-0 text-destructive"
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>
@@ -288,7 +288,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                 ))}
 
                 {(!config.dataSource?.contentFields || config.dataSource.contentFields.length === 0) && (
-                  <div className="py-4 text-center text-sm text-gray-500">내용 필드를 추가해주세요</div>
+                  <div className="py-4 text-center text-sm text-muted-foreground">내용 필드를 추가해주세요</div>
                 )}
               </div>
 
@@ -321,7 +321,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                 </Select>
               </div>
 
-              <div className="text-muted-foreground rounded-lg bg-blue-50 p-3 text-sm">
+              <div className="text-muted-foreground rounded-lg bg-primary/10 p-3 text-sm">
                 💡 <strong>스크롤 처리:</strong> 모든 데이터가 표시되며, 컴포넌트 높이를 초과하는 경우 자동으로 스크롤이
                 생성됩니다.
               </div>
@@ -471,7 +471,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                       variant="ghost"
                       size="sm"
                       onClick={() => removeItem(item.id)}
-                      className="h-8 w-8 p-0 text-red-500 hover:text-red-700"
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -520,7 +520,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
             ))}
 
             {localItems.length === 0 && (
-              <div className="py-8 text-center text-gray-500">
+              <div className="py-8 text-center text-muted-foreground">
                 <p className="text-sm">아이템이 없습니다.</p>
                 <p className="text-xs">위의 추가 버튼을 클릭하여 아이템을 추가하세요.</p>
               </div>
diff --git a/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx b/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx
index ebfff828..fbea4660 100644
--- a/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx
+++ b/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx
@@ -170,7 +170,7 @@ export function AggregationWidgetConfigPanel({
 
         {/* 현재 선택된 테이블 표시 (카드 형태) */}
         <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-          <Database className="h-4 w-4 text-blue-500" />
+          <Database className="h-4 w-4 text-primary" />
           <div className="flex-1">
             <div className="text-xs font-medium">
               {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -224,7 +224,7 @@ export function AggregationWidgetConfigPanel({
                           !config.useCustomTable ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3 w-3 text-blue-500" />
+                      <Database className="mr-2 h-3 w-3 text-primary" />
                       {screenTableName}
                     </CommandItem>
                   </CommandGroup>
diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
index bb0b8175..12264c82 100644
--- a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
@@ -173,7 +173,7 @@ export function AutocompleteSearchInputConfigPanel({
                       <Check className={cn("mr-2 h-4 w-4", localConfig.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
                       <div className="flex flex-col">
                         <span className="font-medium">{table.displayName || table.tableName}</span>
-                        {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                       </div>
                     </CommandItem>
                   ))}
@@ -266,7 +266,7 @@ export function AutocompleteSearchInputConfigPanel({
                           <Check className={cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0")} />
                           <div className="flex flex-col">
                             <span className="font-medium">{column.displayName || column.columnName}</span>
-                            {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                            {column.displayName && <span className="text-[10px] text-muted-foreground">{column.columnName}</span>}
                           </div>
                         </CommandItem>
                       );
@@ -335,7 +335,7 @@ export function AutocompleteSearchInputConfigPanel({
                       <Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
                       <div className="flex flex-col">
                         <span className="font-medium">{table.displayName || table.tableName}</span>
-                        {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                       </div>
                     </CommandItem>
                   ))}
@@ -446,13 +446,13 @@ export function AutocompleteSearchInputConfigPanel({
               </div>
 
               {mapping.sourceField && mapping.targetField && (
-                <div className="rounded bg-blue-50 p-2 dark:bg-blue-950">
-                  <p className="text-[10px] text-blue-700 dark:text-blue-300">
-                    <code className="rounded bg-blue-100 px-1 font-mono dark:bg-blue-900">
+                <div className="rounded bg-primary/10 p-2 dark:bg-primary/15">
+                  <p className="text-[10px] text-primary dark:text-primary/80">
+                    <code className="rounded bg-primary/10 px-1 font-mono dark:bg-primary/20">
                       {localConfig.tableName}.{mapping.sourceField}
                     </code>
                     {" → "}
-                    <code className="rounded bg-blue-100 px-1 font-mono dark:bg-blue-900">
+                    <code className="rounded bg-primary/10 px-1 font-mono dark:bg-primary/20">
                       {localConfig.targetTable}.{mapping.targetField}
                     </code>
                   </p>
@@ -476,11 +476,11 @@ export function AutocompleteSearchInputConfigPanel({
 
       {/* 설정 요약 */}
       {localConfig.tableName && localConfig.targetTable && (localConfig.fieldMappings || []).length > 0 && (
-        <div className="rounded-lg border bg-green-50 p-4 dark:bg-green-950">
-          <h3 className="mb-2 text-sm font-semibold text-green-800 dark:text-green-200">
+        <div className="rounded-lg border bg-emerald-50 p-4 dark:bg-emerald-950">
+          <h3 className="mb-2 text-sm font-semibold text-emerald-800 dark:text-emerald-200">
             설정 요약
           </h3>
-          <div className="space-y-1 text-xs text-green-700 dark:text-green-300">
+          <div className="space-y-1 text-xs text-emerald-700 dark:text-emerald-300">
             <p>
               <strong>외부 테이블:</strong> {localConfig.tableName}
             </p>
diff --git a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
index e8afb3b3..949c380e 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
@@ -792,7 +792,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
       >
         <div className="text-muted-foreground text-center">
           <div className="text-lg mb-2">좌측에서 항목을 선택해주세요</div>
-          <div className="text-sm text-gray-400">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
+          <div className="text-sm text-muted-foreground/70">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
         </div>
       </div>
     );
@@ -1084,7 +1084,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         <img 
                           src={imageUrl} 
                           alt={titleValue || "이미지"}
-                          className="h-16 w-16 rounded-lg object-cover border border-gray-200"
+                          className="h-16 w-16 rounded-lg object-cover border border-border"
                           onError={(e) => {
                             // 이미지 로드 실패 시 기본 아이콘으로 대체
                             e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23e0e7ff' rx='8'/%3E%3Ctext x='32' y='40' text-anchor='middle' fill='%236366f1' font-size='24'%3E👤%3C/text%3E%3C/svg%3E";
@@ -1144,7 +1144,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                       <div className="mt-2 flex justify-end space-x-2">
                         {(componentConfig.cardStyle?.showViewButton ?? true) && (
                           <button 
-                            className="text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                            className="text-xs text-primary hover:text-primary transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardView(data);
@@ -1166,7 +1166,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         )}
                         {(componentConfig.cardStyle?.showDeleteButton ?? false) && (
                           <button 
-                            className="text-xs text-red-500 hover:text-red-700 transition-colors"
+                            className="text-xs text-destructive hover:text-destructive transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardDelete(data, index);
diff --git a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
index b13a5946..bbd71caa 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
@@ -367,7 +367,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
           {/* 조인 테이블별 컬럼 */}
           {Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
             <SelectGroup key={tableName}>
-              <SelectLabel className="text-xs font-semibold text-blue-600">
+              <SelectLabel className="text-xs font-semibold text-primary">
                 {tableName} (조인)
               </SelectLabel>
               {columns.map((col) => (
@@ -433,7 +433,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
                             : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                      <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                       {allTables.find(t => t.tableName === screenTableName)?.displayName || screenTableName}
                     </CommandItem>
                   </CommandGroup>
diff --git a/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx b/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx
index 9d36fa84..ac935213 100644
--- a/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx
+++ b/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx
@@ -72,7 +72,7 @@ export function CategoryManagerConfigPanel({
                 "계층 구조 지원 (부모-자식)",
               ].map((feature, index) => (
                 <div key={index} className="flex items-start gap-2">
-                  <CheckCircle2 className="h-4 w-4 mt-0.5 text-green-600 shrink-0" />
+                  <CheckCircle2 className="h-4 w-4 mt-0.5 text-emerald-600 shrink-0" />
                   <span className="text-sm">{feature}</span>
                 </div>
               ))}
@@ -80,11 +80,11 @@ export function CategoryManagerConfigPanel({
           </div>
 
           {/* 사용 방법 */}
-          <div className="rounded-lg border bg-blue-50 p-4 space-y-2">
-            <h4 className="text-sm font-medium text-blue-900">
+          <div className="rounded-lg border bg-primary/10 p-4 space-y-2">
+            <h4 className="text-sm font-medium text-primary">
               사용 방법
             </h4>
-            <ol className="space-y-1 ml-4 list-decimal text-sm text-blue-800">
+            <ol className="space-y-1 ml-4 list-decimal text-sm text-primary">
               <li>
                 테이블 타입 관리에서 컬럼의 입력 타입을{" "}
                 <Badge variant="outline" className="text-xs">
diff --git a/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx b/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
index ba5d752d..6b4ecb70 100644
--- a/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
+++ b/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
@@ -143,7 +143,7 @@ export const CategorySelectComponent: React.FC<
         className="text-sm font-medium whitespace-nowrap"
       >
         {label}
-        {required && <span className="text-orange-500 ml-0.5">*</span>}
+        {required && <span className="text-amber-500 ml-0.5">*</span>}
       </Label>
     );
   };
diff --git a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
index 2f2c5622..eef19595 100644
--- a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
+++ b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
@@ -102,8 +102,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
             <div
               className={cn(
                 "h-6 w-11 rounded-full transition-colors",
-                isChecked ? "bg-blue-600" : "bg-gray-300",
-                "peer-focus:ring-2 peer-focus:ring-blue-200",
+                isChecked ? "bg-primary" : "bg-muted/60",
+                "peer-focus:ring-2 peer-focus:ring-primary/20",
               )}
             >
               <div
@@ -114,7 +114,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
               />
             </div>
           </div>
-          <span className="text-sm text-gray-900">{componentConfig.checkboxLabel || component.text || "스위치"}</span>
+          <span className="text-sm text-foreground">{componentConfig.checkboxLabel || component.text || "스위치"}</span>
         </label>
       );
     }
@@ -168,7 +168,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
       {component.label && (component.style?.labelDisplay ?? true) && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/common/inputStyles.ts b/frontend/lib/registry/components/common/inputStyles.ts
index f92bec5d..83576ff3 100644
--- a/frontend/lib/registry/components/common/inputStyles.ts
+++ b/frontend/lib/registry/components/common/inputStyles.ts
@@ -71,14 +71,14 @@ export const INPUT_CLASSES = {
 
   // Currency 통화 기호
   currencySymbol: `
-    text-sm font-semibold text-green-600 pl-2
+    text-sm font-semibold text-emerald-600 pl-2
   `,
 
   // Currency input
   currencyInput: `
     flex-1 h-9 px-3 py-2 text-sm font-semibold text-right
     border border-input rounded-md
-    bg-background text-green-600
+    bg-background text-emerald-600
     transition-colors
     focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
     disabled:cursor-not-allowed disabled:opacity-50
@@ -86,14 +86,14 @@ export const INPUT_CLASSES = {
 
   // Percentage 퍼센트 기호
   percentageSymbol: `
-    text-sm font-semibold text-blue-600 pr-2
+    text-sm font-semibold text-primary pr-2
   `,
 
   // Percentage input
   percentageInput: `
     flex-1 h-9 px-3 py-2 text-sm font-semibold text-right
     border border-input rounded-md
-    bg-background text-blue-600
+    bg-background text-primary
     transition-colors
     focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
     disabled:cursor-not-allowed disabled:opacity-50
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx b/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
index ff850346..e07bfc25 100644
--- a/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
@@ -280,10 +280,10 @@ export function ConditionalContainerConfigPanel({
         </div>
 
         {/* 🆕 메뉴별 카테고리에서 섹션 자동 생성 */}
-        <div className="space-y-3 p-3 border rounded-lg bg-blue-50/50 dark:bg-blue-950/20">
+        <div className="space-y-3 p-3 border rounded-lg bg-primary/10/50 dark:bg-primary/10">
           <div className="flex items-center gap-2">
-            <Database className="h-4 w-4 text-blue-600" />
-            <Label className="text-xs font-semibold text-blue-700 dark:text-blue-400">
+            <Database className="h-4 w-4 text-primary" />
+            <Label className="text-xs font-semibold text-primary dark:text-primary/80">
               메뉴 카테고리에서 자동 생성
             </Label>
           </div>
@@ -448,7 +448,7 @@ export function ConditionalContainerConfigPanel({
                   {categoryValues.map((option) => (
                     <span
                       key={option.value}
-                      className="px-2 py-0.5 text-[10px] bg-blue-100 text-blue-800 rounded dark:bg-blue-900 dark:text-blue-200"
+                      className="px-2 py-0.5 text-[10px] bg-primary/10 text-primary rounded dark:bg-primary/20 dark:text-primary/70"
                     >
                       {option.label}
                     </span>
diff --git a/frontend/lib/registry/components/date-input/DateInputComponent.tsx b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
index 2fd1caff..93efccf0 100644
--- a/frontend/lib/registry/components/date-input/DateInputComponent.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
@@ -402,7 +402,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx b/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx
index 55ab4253..c39da8ec 100644
--- a/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx
@@ -74,7 +74,7 @@ export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ conf
           checked={config.hidden || false}
           onCheckedChange={(checked) => handleChange("hidden", checked)}
         />
-        <p className="text-xs text-gray-500">편집기에서는 연하게 보이지만 실제 화면에서는 숨겨집니다</p>
+        <p className="text-xs text-muted-foreground">편집기에서는 연하게 보이지만 실제 화면에서는 숨겨집니다</p>
       </div>
 
       {/* 자동생성 기능 */}
@@ -124,7 +124,7 @@ export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ conf
                   <SelectItem value="department">부서 코드</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 {AutoGenerationUtils.getTypeDescription(config.autoGeneration?.type || "current_time")}
               </p>
             </div>
@@ -247,7 +247,7 @@ export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ conf
               </>
             )}
 
-            <div className="rounded bg-gray-50 p-2 text-xs">
+            <div className="rounded bg-muted p-2 text-xs">
               <strong>미리보기:</strong> {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
             </div>
           </>
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
index f1604337..a267e854 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
@@ -415,7 +415,7 @@ export function EntitySearchInputComponent({
             className={cn(
               "box-border flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
               !disabled && "hover:border-primary/50",
-              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
+              disabled && "cursor-not-allowed bg-muted opacity-60",
             )}
             onClick={() => !disabled && !isLoading && setSelectOpen(true)}
             style={{ cursor: disabled ? "not-allowed" : "pointer" }}
@@ -427,7 +427,7 @@ export function EntitySearchInputComponent({
                 return (
                   <span
                     key={val}
-                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
+                    className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary"
                   >
                     {label}
                     {!disabled && (
@@ -437,7 +437,7 @@ export function EntitySearchInputComponent({
                           e.stopPropagation();
                           handleRemoveValue(val);
                         }}
-                        className="ml-1 text-blue-600 hover:text-blue-800"
+                        className="ml-1 text-primary hover:text-primary"
                       >
                         ×
                       </button>
@@ -598,7 +598,7 @@ export function EntitySearchInputComponent({
             className={cn(
               "box-border flex min-h-[40px] flex-1 flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
               !disabled && "hover:border-primary/50",
-              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
+              disabled && "cursor-not-allowed bg-muted opacity-60",
             )}
           >
             {selectedValues.length > 0 ? (
@@ -610,7 +610,7 @@ export function EntitySearchInputComponent({
                 return (
                   <span
                     key={val}
-                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
+                    className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary"
                   >
                     {label}
                     {!disabled && (
@@ -620,7 +620,7 @@ export function EntitySearchInputComponent({
                           e.stopPropagation();
                           handleRemoveValue(val);
                         }}
-                        className="ml-1 text-blue-600 hover:text-blue-800"
+                        className="ml-1 text-primary hover:text-primary"
                       >
                         ×
                       </button>
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
index 22a52aab..6f58f10b 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
@@ -458,7 +458,7 @@ export function EntitySearchInputConfigPanel({
               <div className="bg-background space-y-1 rounded-md p-2 text-xs">
                 {localConfig.cascadingRole === "parent" ? (
                   <>
-                    <div className="font-medium text-blue-600">부모 역할 (상위 선택)</div>
+                    <div className="font-medium text-primary">부모 역할 (상위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.parent_table}</span>
@@ -470,7 +470,7 @@ export function EntitySearchInputConfigPanel({
                   </>
                 ) : (
                   <>
-                    <div className="font-medium text-green-600">자식 역할 (하위 선택)</div>
+                    <div className="font-medium text-emerald-600">자식 역할 (하위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.child_table}</span>
@@ -602,7 +602,7 @@ export function EntitySearchInputConfigPanel({
                       <div className="flex flex-col">
                         <span className="font-medium">{table.displayName || table.tableName}</span>
                         {table.displayName && table.displayName !== table.tableName && (
-                          <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                          <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                         )}
                       </div>
                     </CommandItem>
@@ -656,7 +656,7 @@ export function EntitySearchInputConfigPanel({
                       <div className="flex flex-col">
                         <span className="font-medium">{column.displayName || column.columnName}</span>
                         {column.displayName && column.displayName !== column.columnName && (
-                          <span className="text-[10px] text-gray-500">{column.columnName}</span>
+                          <span className="text-[10px] text-muted-foreground">{column.columnName}</span>
                         )}
                       </div>
                     </CommandItem>
@@ -710,7 +710,7 @@ export function EntitySearchInputConfigPanel({
                       <div className="flex flex-col">
                         <span className="font-medium">{column.displayName || column.columnName}</span>
                         {column.displayName && column.displayName !== column.columnName && (
-                          <span className="text-[10px] text-gray-500">{column.columnName}</span>
+                          <span className="text-[10px] text-muted-foreground">{column.columnName}</span>
                         )}
                       </div>
                     </CommandItem>
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
index 422dfbfa..3b4bfc52 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
@@ -187,7 +187,7 @@ export function EntitySearchModal({
                         key={uniqueKey}
                         className={cn(
                           "border-t cursor-pointer transition-colors",
-                          isSelected ? "bg-blue-50 hover:bg-blue-100" : "hover:bg-accent"
+                          isSelected ? "bg-primary/10 hover:bg-primary/10" : "hover:bg-accent"
                         )}
                         onClick={() => handleSelect(item)}
                       >
diff --git a/frontend/lib/registry/components/file-upload/FileManagerModal.tsx b/frontend/lib/registry/components/file-upload/FileManagerModal.tsx
index 469aa1f0..1c3cb713 100644
--- a/frontend/lib/registry/components/file-upload/FileManagerModal.tsx
+++ b/frontend/lib/registry/components/file-upload/FileManagerModal.tsx
@@ -61,21 +61,21 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
     const ext = fileExt.toLowerCase();
     
     if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
-      return <ImageIcon className="w-5 h-5 text-blue-500" />;
+      return <ImageIcon className="w-5 h-5 text-primary" />;
     } else if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
-      return <FileText className="w-5 h-5 text-red-500" />;
+      return <FileText className="w-5 h-5 text-destructive" />;
     } else if (['xls', 'xlsx', 'csv'].includes(ext)) {
-      return <FileText className="w-5 h-5 text-green-500" />;
+      return <FileText className="w-5 h-5 text-emerald-500" />;
     } else if (['ppt', 'pptx'].includes(ext)) {
-      return <Presentation className="w-5 h-5 text-orange-500" />;
+      return <Presentation className="w-5 h-5 text-amber-500" />;
     } else if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) {
       return <Video className="w-5 h-5 text-purple-500" />;
     } else if (['mp3', 'wav', 'ogg'].includes(ext)) {
       return <Music className="w-5 h-5 text-pink-500" />;
     } else if (['zip', 'rar', '7z'].includes(ext)) {
-      return <Archive className="w-5 h-5 text-yellow-500" />;
+      return <Archive className="w-5 h-5 text-amber-500" />;
     } else {
-      return <File className="w-5 h-5 text-gray-500" />;
+      return <File className="w-5 h-5 text-muted-foreground" />;
     }
   };
 
@@ -193,7 +193,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 w-8 p-0 hover:bg-gray-100"
+              className="h-8 w-8 p-0 hover:bg-muted"
               onClick={onClose}
               title="닫기"
             >
@@ -207,8 +207,8 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
               <div
                 className={`
                   border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors
-                  ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
-                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
+                  ${dragOver ? 'border-primary/60 bg-primary/10' : 'border-input'}
+                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-input'}
                   ${uploading ? 'opacity-75' : ''}
                 `}
                 onClick={() => {
@@ -232,13 +232,13 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                 
                 {uploading ? (
                   <div className="flex items-center justify-center gap-2">
-                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
-                    <span className="text-sm text-blue-600 font-medium">업로드 중...</span>
+                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
+                    <span className="text-sm text-primary font-medium">업로드 중...</span>
                   </div>
                 ) : (
                   <div className="flex items-center justify-center gap-3">
-                    <Upload className="h-6 w-6 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-700">
+                    <Upload className="h-6 w-6 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-foreground">
                       파일을 드래그하거나 클릭하여 업로드하세요
                     </p>
                   </div>
@@ -249,7 +249,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             {/* 좌우 분할 레이아웃 */}
             <div className="flex-1 flex gap-4 min-h-0">
               {/* 좌측: 이미지 미리보기 */}
-              <div className="w-1/2 border border-gray-200 rounded-lg bg-gray-50 flex items-center justify-center overflow-hidden">
+              <div className="w-1/2 border border-border rounded-lg bg-muted flex items-center justify-center overflow-hidden">
                 {selectedFile && previewImageUrl ? (
                   <img 
                     src={previewImageUrl} 
@@ -257,12 +257,12 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                     className="max-w-full max-h-full object-contain"
                   />
                 ) : selectedFile ? (
-                  <div className="flex flex-col items-center text-gray-400">
+                  <div className="flex flex-col items-center text-muted-foreground/70">
                     {getFileIcon(selectedFile.fileExt)}
                     <p className="mt-2 text-sm">미리보기 불가능</p>
                   </div>
                 ) : (
-                  <div className="flex flex-col items-center text-gray-400">
+                  <div className="flex flex-col items-center text-muted-foreground/70">
                     <ImageIcon className="w-16 h-16 mb-2" />
                     <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
                   </div>
@@ -270,10 +270,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
               </div>
 
               {/* 우측: 파일 목록 */}
-              <div className="w-1/2 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
-                <div className="p-3 border-b border-gray-200 bg-gray-50">
+              <div className="w-1/2 border border-border rounded-lg overflow-hidden flex flex-col">
+                <div className="p-3 border-b border-border bg-muted">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-medium text-gray-700">
+                    <h3 className="text-sm font-medium text-foreground">
                       업로드된 파일
                     </h3>
                     {uploadedFiles.length > 0 && (
@@ -292,7 +292,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                           key={file.objid}
                           className={`
                             flex items-center space-x-3 p-2 rounded-lg transition-colors cursor-pointer
-                            ${selectedFile?.objid === file.objid ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'}
+                            ${selectedFile?.objid === file.objid ? 'bg-primary/10 border border-primary/20' : 'bg-muted hover:bg-muted'}
                           `}
                           onClick={() => handleFileClick(file)}
                         >
@@ -301,7 +301,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                         </div>
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2">
-                            <span className="text-sm font-medium text-gray-900 truncate">
+                            <span className="text-sm font-medium text-foreground truncate">
                               {file.realFileName}
                             </span>
                             {file.isRepresentative && (
@@ -310,7 +310,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                               </Badge>
                             )}
                           </div>
-                          <p className="text-xs text-gray-500">
+                          <p className="text-xs text-muted-foreground">
                             {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
                           </p>
                         </div>
@@ -357,7 +357,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                             <Button
                               variant="ghost"
                               size="sm"
-                              className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                              className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 onFileDelete(file);
@@ -372,10 +372,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                     ))}
                   </div>
                 ) : (
-                  <div className="flex flex-col items-center justify-center py-8 text-gray-500">
-                    <File className="w-12 h-12 mb-3 text-gray-300" />
-                    <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
-                    <p className="text-xs text-gray-500 mt-1">
+                  <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                    <File className="w-12 h-12 mb-3 text-muted-foreground/50" />
+                    <p className="text-sm font-medium text-muted-foreground">업로드된 파일이 없습니다</p>
+                    <p className="text-xs text-muted-foreground mt-1">
                       {isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 업로드하세요'}
                     </p>
                   </div>
diff --git a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
index b2c385a3..11432e4a 100644
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@@ -35,31 +35,31 @@ const getFileIcon = (extension: string) => {
   const ext = extension.toLowerCase().replace(".", "");
 
   if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
-    return <FileImage className="h-6 w-6 text-blue-500" />;
+    return <FileImage className="h-6 w-6 text-primary" />;
   }
   if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
     return <FileVideo className="h-6 w-6 text-purple-500" />;
   }
   if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
-    return <FileAudio className="h-6 w-6 text-green-500" />;
+    return <FileAudio className="h-6 w-6 text-emerald-500" />;
   }
   if (["pdf"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-red-500" />;
+    return <FileText className="h-6 w-6 text-destructive" />;
   }
   if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-blue-600" />;
+    return <FileText className="h-6 w-6 text-primary" />;
   }
   if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-green-600" />;
+    return <FileText className="h-6 w-6 text-emerald-600" />;
   }
   if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
-    return <Presentation className="h-6 w-6 text-orange-500" />;
+    return <Presentation className="h-6 w-6 text-amber-500" />;
   }
   if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
-    return <Archive className="h-6 w-6 text-gray-500" />;
+    return <Archive className="h-6 w-6 text-muted-foreground" />;
   }
 
-  return <File className="h-6 w-6 text-gray-400" />;
+  return <File className="h-6 w-6 text-muted-foreground/70" />;
 };
 
 export interface FileUploadComponentProps {
diff --git a/frontend/lib/registry/components/file-upload/FileViewerModal.tsx b/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
index 36e37044..0695b730 100644
--- a/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
+++ b/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
@@ -318,7 +318,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (isLoading) {
       return (
         <div className="flex h-96 items-center justify-center">
-          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-primary"></div>
         </div>
       );
     }
@@ -326,7 +326,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (previewError) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <AlertTriangle className="mb-4 h-16 w-16 text-yellow-500" />
+          <AlertTriangle className="mb-4 h-16 w-16 text-amber-500" />
           <p className="mb-2 text-lg font-medium">미리보기 불가</p>
           <p className="text-center text-sm">{previewError}</p>
           <Button variant="outline" onClick={() => onDownload?.(file)} className="mt-4">
@@ -375,7 +375,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // PDF 파일 - 브라우저 기본 뷰어 사용
     if (fileExt === "pdf") {
       return (
-        <div className="h-[600px] overflow-auto rounded-lg border bg-gray-50">
+        <div className="h-[600px] overflow-auto rounded-lg border bg-muted">
           <object
             data={previewUrl || ""}
             type="application/pdf"
@@ -384,9 +384,9 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
           >
             <iframe src={previewUrl || ""} className="h-full w-full rounded-lg" title="PDF Viewer Fallback">
               <div className="flex h-full flex-col items-center justify-center p-8">
-                <FileText className="mb-4 h-16 w-16 text-gray-400" />
+                <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
                 <p className="mb-2 text-lg font-medium">PDF를 표시할 수 없습니다</p>
-                <p className="mb-4 text-center text-sm text-gray-600">
+                <p className="mb-4 text-center text-sm text-muted-foreground">
                   브라우저가 PDF 표시를 지원하지 않습니다. 다운로드하여 확인해주세요.
                 </p>
                 <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -421,10 +421,10 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     ) {
       // Office 문서 안내 메시지 표시
       return (
-        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-50 p-8">
-          <FileText className="mb-6 h-20 w-20 text-blue-500" />
-          <h3 className="mb-2 text-xl font-semibold text-gray-800">Office 문서</h3>
-          <p className="mb-6 max-w-md text-center text-sm text-gray-600">
+        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-primary/5 to-indigo-50 p-8">
+          <FileText className="mb-6 h-20 w-20 text-primary" />
+          <h3 className="mb-2 text-xl font-semibold text-foreground">Office 문서</h3>
+          <p className="mb-6 max-w-md text-center text-sm text-muted-foreground">
             {fileExt === "docx" || fileExt === "doc"
               ? "Word 문서"
               : fileExt === "xlsx" || fileExt === "xls"
@@ -461,8 +461,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (["mp3", "wav", "ogg"].includes(fileExt)) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-gray-100">
-            <svg className="h-16 w-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-muted">
+            <svg className="h-16 w-16 text-muted-foreground/70" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
                 d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z"
@@ -480,7 +480,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // 기타 파일 타입
     return (
       <div className="flex h-96 flex-col items-center justify-center">
-        <FileText className="mb-4 h-16 w-16 text-gray-400" />
+        <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
         <p className="mb-2 text-lg font-medium">미리보기 불가</p>
         <p className="mb-4 text-center text-sm">{file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.</p>
         <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -511,7 +511,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
         <div className="flex-1 overflow-hidden">{renderPreview()}</div>
 
         {/* 파일 정보 및 액션 버튼 */}
-        <div className="mt-2 flex items-center space-x-4 text-sm text-gray-500">
+        <div className="mt-2 flex items-center space-x-4 text-sm text-muted-foreground">
           <span>크기: {formatFileSize(file.fileSize || file.size || 0)}</span>
           {(file.uploadedAt || file.regdate) && (
             <span>업로드: {new Date(file.uploadedAt || file.regdate || "").toLocaleString()}</span>
@@ -527,7 +527,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
             <Button
               variant="outline"
               size="sm"
-              className="text-red-600 hover:bg-red-50 hover:text-red-700"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
               onClick={() => onDelete(file)}
             >
               <Trash2 className="mr-2 h-4 w-4" />
diff --git a/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx b/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx
index cd84806f..89aea32f 100644
--- a/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx
+++ b/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx
@@ -523,8 +523,8 @@ export function LocationSwapSelectorConfigPanel({
       </div>
 
       {/* 안내 */}
-      <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-        <p className="text-xs text-blue-900 dark:text-blue-100">
+      <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+        <p className="text-xs text-primary dark:text-primary/60">
           <strong>사용 방법:</strong>
           <br />
           1. 데이터 소스에서 장소 목록을 가져올 위치를 선택합니다
diff --git a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
index 57102413..505d6f4d 100644
--- a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
+++ b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
@@ -337,12 +337,12 @@ export const MailRecipientSelectorComponent: React.FC<
                       <div className="flex flex-1 items-center justify-between">
                         <div className="flex flex-col">
                           <span className="font-medium">{user.userName}</span>
-                          <span className="text-xs text-gray-500">
+                          <span className="text-xs text-muted-foreground">
                             {userEmail}
                             {user.deptName && ` | ${user.deptName}`}
                           </span>
                         </div>
-                        {selected && <Check className="h-4 w-4 text-green-500" />}
+                        {selected && <Check className="h-4 w-4 text-emerald-500" />}
                       </div>
                     </CommandItem>
                   );
@@ -394,13 +394,13 @@ export const MailRecipientSelectorComponent: React.FC<
   if (isDesignMode || isPreviewMode) {
     return (
       <div className={cn("space-y-3 rounded-md border p-3 bg-white", className)} style={style}>
-        <div className="text-sm font-medium text-gray-500">메일 수신자 선택</div>
+        <div className="text-sm font-medium text-muted-foreground">메일 수신자 선택</div>
         <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground/70">
             <Users className="h-4 w-4" />
             <span>내부 인원 선택</span>
           </div>
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground/70">
             <Mail className="h-4 w-4" />
             <span>외부 이메일 입력</span>
           </div>
@@ -415,12 +415,12 @@ export const MailRecipientSelectorComponent: React.FC<
       <div className="space-y-2">
         <Label className="text-sm font-medium">
           {toLabel}
-          {required && <span className="ml-1 text-red-500">*</span>}
+          {required && <span className="ml-1 text-destructive">*</span>}
         </Label>
         
         {/* 선택된 수신자 태그 */}
         {toRecipients.length > 0 && (
-          <div className="rounded-md border bg-gray-50 p-2">
+          <div className="rounded-md border bg-muted p-2">
             {renderRecipientTags(toRecipients, "to")}
           </div>
         )}
@@ -439,7 +439,7 @@ export const MailRecipientSelectorComponent: React.FC<
           
           {/* 선택된 참조 수신자 태그 */}
           {ccRecipients.length > 0 && (
-            <div className="rounded-md border bg-gray-50 p-2">
+            <div className="rounded-md border bg-muted p-2">
               {renderRecipientTags(ccRecipients, "cc")}
             </div>
           )}
diff --git a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx
index 1d42fb60..50b9586a 100644
--- a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx
+++ b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx
@@ -74,7 +74,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
               placeholder="mailTo"
               className="h-8 text-sm"
             />
-            <p className="text-[10px] text-gray-500">
+            <p className="text-[10px] text-muted-foreground">
               formData에 저장될 수신자 필드명 (제어에서 {`{{mailTo}}`}로 사용)
             </p>
           </div>
@@ -87,7 +87,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
               placeholder="mailCc"
               className="h-8 text-sm"
             />
-            <p className="text-[10px] text-gray-500">
+            <p className="text-[10px] text-muted-foreground">
               formData에 저장될 참조 필드명 (제어에서 {`{{mailCc}}`}로 사용)
             </p>
           </div>
@@ -103,7 +103,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">참조(CC) 필드 표시</Label>
-              <p className="text-[10px] text-gray-500">참조 수신자 입력 필드 표시</p>
+              <p className="text-[10px] text-muted-foreground">참조 수신자 입력 필드 표시</p>
             </div>
             <Switch
               checked={localConfig.showCc !== false}
@@ -114,7 +114,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">내부 인원 선택</Label>
-              <p className="text-[10px] text-gray-500">회사 내부 사용자 선택 기능</p>
+              <p className="text-[10px] text-muted-foreground">회사 내부 사용자 선택 기능</p>
             </div>
             <Switch
               checked={localConfig.showInternalSelector !== false}
@@ -127,7 +127,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">외부 이메일 입력</Label>
-              <p className="text-[10px] text-gray-500">외부 이메일 직접 입력 기능</p>
+              <p className="text-[10px] text-muted-foreground">외부 이메일 직접 입력 기능</p>
             </div>
             <Switch
               checked={localConfig.showExternalInput !== false}
@@ -140,7 +140,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">필수 입력</Label>
-              <p className="text-[10px] text-gray-500">수신자 필수 입력 여부</p>
+              <p className="text-[10px] text-muted-foreground">수신자 필수 입력 여부</p>
             </div>
             <Switch
               checked={localConfig.required !== false}
@@ -219,19 +219,19 @@ export const MailRecipientSelectorConfigPanel: React.FC<
       </Card>
 
       {/* 사용 안내 */}
-      <Card className="bg-blue-50">
+      <Card className="bg-primary/10">
         <CardContent className="p-3">
-          <div className="text-xs text-blue-700">
+          <div className="text-xs text-primary">
             <p className="font-medium mb-1">사용 방법</p>
             <ol className="list-decimal list-inside space-y-1">
               <li>이 컴포넌트를 모달 화면에 배치합니다.</li>
               <li>
                 제어관리의 메일 발송 노드에서 수신자를{" "}
-                <code className="bg-blue-100 px-1 rounded">{`{{mailTo}}`}</code>로 설정합니다.
+                <code className="bg-primary/10 px-1 rounded">{`{{mailTo}}`}</code>로 설정합니다.
               </li>
               <li>
                 참조는{" "}
-                <code className="bg-blue-100 px-1 rounded">{`{{mailCc}}`}</code>로 설정합니다.
+                <code className="bg-primary/10 px-1 rounded">{`{{mailCc}}`}</code>로 설정합니다.
               </li>
               <li>부모 화면에서 선택한 데이터는 별도 변수로 접근 가능합니다.</li>
             </ol>
diff --git a/frontend/lib/registry/components/map/MapComponent.tsx b/frontend/lib/registry/components/map/MapComponent.tsx
index 652f17d6..82eef05e 100644
--- a/frontend/lib/registry/components/map/MapComponent.tsx
+++ b/frontend/lib/registry/components/map/MapComponent.tsx
@@ -188,10 +188,10 @@ export default function MapComponent({ component }: MapComponentProps) {
 
   if (error) {
     return (
-      <div className="flex h-full w-full items-center justify-center bg-gray-50">
+      <div className="flex h-full w-full items-center justify-center bg-muted">
         <div className="text-center">
-          <AlertCircle className="mx-auto h-12 w-12 text-red-500" />
-          <p className="mt-2 text-sm text-red-600">{error}</p>
+          <AlertCircle className="mx-auto h-12 w-12 text-destructive" />
+          <p className="mt-2 text-sm text-destructive">{error}</p>
           <Button onClick={loadMapData} className="mt-4" size="sm">
             다시 시도
           </Button>
@@ -261,11 +261,11 @@ export default function MapComponent({ component }: MapComponentProps) {
 
       {/* 상단 정보 바 */}
       <div className="absolute top-2 right-2 z-[1000] flex items-center gap-2 rounded-lg bg-white/90 backdrop-blur-sm px-3 py-2 shadow-lg">
-        <span className="text-xs font-medium text-gray-700">
+        <span className="text-xs font-medium text-foreground">
           마커: {markers.length}개
         </span>
         {lastUpdate && (
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-muted-foreground">
             {lastUpdate.toLocaleTimeString()}
           </span>
         )}
diff --git a/frontend/lib/registry/components/map/MapConfigPanel.tsx b/frontend/lib/registry/components/map/MapConfigPanel.tsx
index 3f591efc..3df729c8 100644
--- a/frontend/lib/registry/components/map/MapConfigPanel.tsx
+++ b/frontend/lib/registry/components/map/MapConfigPanel.tsx
@@ -368,7 +368,7 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
             rows={2}
             className="font-mono text-sm"
           />
-          <p className="text-xs text-gray-500">SQL WHERE 절 (WHERE 키워드 제외)</p>
+          <p className="text-xs text-muted-foreground">SQL WHERE 절 (WHERE 키워드 제외)</p>
         </div>
       </div>
 
@@ -432,7 +432,7 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
               updateConfig("refreshInterval", parseInt(e.target.value) * 1000 || 0)
             }
           />
-          <p className="text-xs text-gray-500">0이면 자동 새로고침 없음</p>
+          <p className="text-xs text-muted-foreground">0이면 자동 새로고침 없음</p>
         </div>
       </div>
     </div>
diff --git a/frontend/lib/registry/components/map/MapPreviewComponent.tsx b/frontend/lib/registry/components/map/MapPreviewComponent.tsx
index 7adb31f6..a10a4658 100644
--- a/frontend/lib/registry/components/map/MapPreviewComponent.tsx
+++ b/frontend/lib/registry/components/map/MapPreviewComponent.tsx
@@ -17,12 +17,12 @@ export default function MapPreviewComponent({ component }: MapPreviewComponentPr
   const tableName = component.config?.dataSource?.tableName;
 
   return (
-    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-dashed border-blue-300">
+    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/5 to-indigo-50 border-2 border-dashed border-primary/40">
       <div className="text-center">
-        <Map className="mx-auto h-12 w-12 text-blue-600" />
-        <p className="mt-2 text-sm font-medium text-blue-900">지도 컴포넌트</p>
+        <Map className="mx-auto h-12 w-12 text-primary" />
+        <p className="mt-2 text-sm font-medium text-primary">지도 컴포넌트</p>
         {tableName && (
-          <p className="mt-1 text-xs text-blue-600">테이블: {tableName}</p>
+          <p className="mt-1 text-xs text-primary">테이블: {tableName}</p>
         )}
       </div>
     </div>
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
index f22eb497..71b43635 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
@@ -545,7 +545,7 @@ export function ModalRepeaterTableConfigPanel({
                         <Check className={cn("mr-2 h-4 w-4", localConfig.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
                         <div className="flex flex-col">
                           <span className="font-medium">{table.displayName || table.tableName}</span>
-                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                          {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                         </div>
                       </CommandItem>
                     ))}
@@ -603,7 +603,7 @@ export function ModalRepeaterTableConfigPanel({
                         <Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
                         <div className="flex flex-col">
                           <span className="font-medium">{table.displayName || table.tableName}</span>
-                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                          {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                         </div>
                       </CommandItem>
                     ))}
@@ -792,7 +792,7 @@ export function ModalRepeaterTableConfigPanel({
                         <Check className={cn("mr-2 h-4 w-4", localConfig.uniqueField === column.columnName ? "opacity-100" : "opacity-0")} />
                         <div className="flex flex-col">
                           <span className="font-medium">{column.displayName || column.columnName}</span>
-                          {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                          {column.displayName && <span className="text-[10px] text-muted-foreground">{column.columnName}</span>}
                         </div>
                       </CommandItem>
                     ))}
@@ -1102,7 +1102,7 @@ export function ModalRepeaterTableConfigPanel({
                       
                       {col.mapping?.type === "source" && (
                         <div className="space-y-3">
-                          <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                          <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
                             <p className="text-xs font-medium mb-2">소스 테이블에서 복사</p>
                             <p className="text-[10px] text-muted-foreground">
                               모달 검색에서 선택한 항목(소스 테이블)의 컬럼 값을 가져옴
@@ -1466,7 +1466,7 @@ export function ModalRepeaterTableConfigPanel({
                                   {/* 조인 조건 미리보기 */}
                                   {condition.sourceField && condition.targetField && (
                                     <div className="mt-2 p-2 bg-muted/50 rounded text-[10px] font-mono">
-                                      <span className="text-blue-600 dark:text-blue-400">
+                                      <span className="text-primary dark:text-primary/80">
                                         {condition.sourceTable === "source" 
                                           ? localConfig.sourceTable 
                                           : localConfig.targetTable || "저장테이블"}
@@ -1495,7 +1495,7 @@ export function ModalRepeaterTableConfigPanel({
 
                             {/* 조인 조건 예시 */}
                             {col.mapping?.referenceTable && (
-                              <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                              <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
                                 <p className="text-xs font-medium mb-2">조인 조건 예시</p>
                                 <div className="space-y-1 text-[10px] text-muted-foreground">
                                   <p>예) 거래처별 품목 단가 조회:</p>
@@ -1509,7 +1509,7 @@ export function ModalRepeaterTableConfigPanel({
                       )}
 
                       {col.mapping?.type === "manual" && (
-                        <div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                        <div className="p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
                           <p className="text-xs font-medium mb-2">화면에서 입력 (수동)</p>
                           <p className="text-[10px] text-muted-foreground">
                             사용자가 반복 테이블에서 직접 입력
@@ -1827,7 +1827,7 @@ export function ModalRepeaterTableConfigPanel({
 
                     {/* 테이블 직접 조회 설정 */}
                     {option.sourceType === "table" && (
-                      <div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                      <div className="space-y-3 p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
                         <p className="text-xs font-medium">테이블 조회 설정</p>
                         
                         {/* 참조 테이블 */}
@@ -1941,7 +1941,7 @@ export function ModalRepeaterTableConfigPanel({
 
                     {/* 테이블 복합 조인 설정 (2개 이상 테이블) */}
                     {option.sourceType === "multiTable" && (
-                      <div className="space-y-3 p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                      <div className="space-y-3 p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
                         <div>
                           <p className="text-xs font-medium">복합 조인 설정</p>
                           <p className="text-[10px] text-muted-foreground mt-1">
@@ -1985,7 +1985,7 @@ export function ModalRepeaterTableConfigPanel({
                             <div key={stepIndex} className="p-3 border rounded-md bg-background space-y-3">
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-2">
-                                  <div className="w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center text-[10px] font-bold">
+                                  <div className="w-5 h-5 rounded-full bg-emerald-500 text-white flex items-center justify-center text-[10px] font-bold">
                                     {stepIndex + 1}
                                   </div>
                                   <span className="text-xs font-medium">조인 단계 {stepIndex + 1}</span>
@@ -2129,12 +2129,12 @@ export function ModalRepeaterTableConfigPanel({
                               {/* 조인 미리보기 */}
                               {step.tableName && step.joinCondition.fromField && step.joinCondition.toField && (
                                 <div className="p-2 bg-muted/50 rounded text-[10px] font-mono">
-                                  <span className="text-blue-600 dark:text-blue-400">
+                                  <span className="text-primary dark:text-primary/80">
                                     {stepIndex === 0 ? "현재행" : option.multiTableConfig?.joinChain[stepIndex - 1]?.tableName}
                                   </span>
                                   <span className="text-muted-foreground">.{step.joinCondition.fromField}</span>
-                                  <span className="mx-2 text-green-600 dark:text-green-400">=</span>
-                                  <span className="text-green-600 dark:text-green-400">{step.tableName}</span>
+                                  <span className="mx-2 text-emerald-600 dark:text-emerald-400">=</span>
+                                  <span className="text-emerald-600 dark:text-emerald-400">{step.tableName}</span>
                                   <span className="text-muted-foreground">.{step.joinCondition.toField}</span>
                                   {step.outputField && (
                                     <span className="ml-2 text-purple-600 dark:text-purple-400">
@@ -2187,12 +2187,12 @@ export function ModalRepeaterTableConfigPanel({
                                 <div key={idx} className="flex items-center gap-1">
                                   {idx === 0 && (
                                     <>
-                                      <span className="text-blue-600">현재행</span>
+                                      <span className="text-primary">현재행</span>
                                       <span>.{step.joinCondition.fromField}</span>
                                       <span className="text-muted-foreground mx-1">→</span>
                                     </>
                                   )}
-                                  <span className="text-green-600">{step.tableName}</span>
+                                  <span className="text-emerald-600">{step.tableName}</span>
                                   <span>.{step.joinCondition.toField}</span>
                                   {step.outputField && idx < option.multiTableConfig!.joinChain.length - 1 && (
                                     <>
@@ -2204,7 +2204,7 @@ export function ModalRepeaterTableConfigPanel({
                               ))}
                               {option.multiTableConfig.valueColumn && (
                                 <div className="pt-1 border-t mt-1">
-                                  <span className="text-orange-600">최종 값: </span>
+                                  <span className="text-amber-600">최종 값: </span>
                                   <span>{option.multiTableConfig.joinChain[option.multiTableConfig.joinChain.length - 1]?.tableName}.{option.multiTableConfig.valueColumn}</span>
                                 </div>
                               )}
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
index 532881b7..07efc747 100644
--- a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -640,7 +640,7 @@ export function RepeaterTable({
                 handleCellEdit(rowIndex, column.field, val === "" ? 0 : parseFloat(val) || 0);
               }
             }}
-            className="h-8 w-full min-w-0 rounded-none border-gray-200 text-right text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+            className="h-8 w-full min-w-0 rounded-none border-border text-right text-xs focus:border-primary focus:ring-1 focus:ring-ring"
           />
         );
 
@@ -669,14 +669,14 @@ export function RepeaterTable({
             value={formatDateValue(value)}
             onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
             onClick={(e) => (e.target as HTMLInputElement).showPicker?.()}
-            className="h-8 w-full min-w-0 cursor-pointer rounded-none border border-gray-200 bg-white px-2 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-inner-spin-button]:hidden"
+            className="h-8 w-full min-w-0 cursor-pointer rounded-none border border-border bg-white px-2 text-xs focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-inner-spin-button]:hidden"
           />
         );
 
       case "select":
         return (
           <Select value={value || ""} onValueChange={(newValue) => handleCellEdit(rowIndex, column.field, newValue)}>
-            <SelectTrigger className="h-8 w-full min-w-0 rounded-none border-gray-200 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
+            <SelectTrigger className="h-8 w-full min-w-0 rounded-none border-border text-xs focus:border-primary focus:ring-1 focus:ring-ring">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -696,7 +696,7 @@ export function RepeaterTable({
         const options = column.categoryRef ? categoryOptionsMap[column.categoryRef] || [] : [];
         return (
           <Select value={value || ""} onValueChange={(newValue) => handleCellEdit(rowIndex, column.field, newValue)}>
-            <SelectTrigger className="h-8 w-full min-w-0 rounded-none border-gray-200 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
+            <SelectTrigger className="h-8 w-full min-w-0 rounded-none border-border text-xs focus:border-primary focus:ring-1 focus:ring-ring">
               <SelectValue placeholder="선택..." />
             </SelectTrigger>
             <SelectContent>
@@ -716,7 +716,7 @@ export function RepeaterTable({
             type="text"
             value={value || ""}
             onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
-            className="h-8 w-full min-w-0 rounded-none border-gray-200 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+            className="h-8 w-full min-w-0 rounded-none border-border text-xs focus:border-primary focus:ring-1 focus:ring-ring"
           />
         );
     }
@@ -727,7 +727,7 @@ export function RepeaterTable({
 
   return (
     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <div ref={containerRef} className="flex h-full flex-col border border-gray-200 bg-white" onKeyDown={handleArrowNavigation}>
+      <div ref={containerRef} className="flex h-full flex-col border border-border bg-white" onKeyDown={handleArrowNavigation}>
         <div className="min-h-0 flex-1 overflow-x-auto overflow-y-auto">
           <table
             className="border-collapse text-xs"
@@ -735,26 +735,26 @@ export function RepeaterTable({
               width: `max(100%, ${Object.values(columnWidths).reduce((sum, w) => sum + w, 0) + 74}px)`,
             }}
           >
-            <thead className="sticky top-0 z-20 bg-gray-50">
+            <thead className="sticky top-0 z-20 bg-muted">
               <tr>
                 {/* 드래그 핸들 헤더 - 좌측 고정 */}
                 <th
                   key="header-drag"
-                  className="sticky left-0 z-30 w-8 border-r border-b border-gray-200 bg-gray-50 px-1 py-2 text-center font-medium text-gray-700"
+                  className="sticky left-0 z-30 w-8 border-r border-b border-border bg-muted px-1 py-2 text-center font-medium text-foreground"
                 >
                   <span className="sr-only">순서</span>
                 </th>
                 {/* 체크박스 헤더 - 좌측 고정 */}
                 <th
                   key="header-checkbox"
-                  className="sticky left-8 z-30 w-10 border-r border-b border-gray-200 bg-gray-50 px-3 py-2 text-center font-medium text-gray-700"
+                  className="sticky left-8 z-30 w-10 border-r border-b border-border bg-muted px-3 py-2 text-center font-medium text-foreground"
                 >
                   <Checkbox
                     checked={isAllSelected}
                     // @ts-expect-error - indeterminate는 HTML 속성
                     data-indeterminate={isIndeterminate}
                     onCheckedChange={handleSelectAll}
-                    className={cn("border-gray-400", isIndeterminate && "data-[state=checked]:bg-primary")}
+                    className={cn("border-input", isIndeterminate && "data-[state=checked]:bg-primary")}
                   />
                 </th>
                 {visibleColumns.map((col, colIndex) => {
@@ -768,7 +768,7 @@ export function RepeaterTable({
                   return (
                     <th
                       key={`header-col-${col.field || colIndex}`}
-                      className="group relative cursor-pointer border-r border-b border-gray-200 px-3 py-2 text-left font-medium whitespace-nowrap text-gray-700 select-none"
+                      className="group relative cursor-pointer border-r border-b border-border px-3 py-2 text-left font-medium whitespace-nowrap text-foreground select-none"
                       style={{ width: `${columnWidths[col.field]}px` }}
                       onDoubleClick={() => handleDoubleClick(col.field)}
                       title="더블클릭하여 글자 너비에 맞춤"
@@ -784,8 +784,8 @@ export function RepeaterTable({
                                 <button
                                   type="button"
                                   className={cn(
-                                    "inline-flex items-center gap-1 transition-colors hover:text-blue-600",
-                                    "-mx-1 rounded px-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+                                    "inline-flex items-center gap-1 transition-colors hover:text-primary",
+                                    "-mx-1 rounded px-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                                   )}
                                 >
                                   {/* 컬럼명 - 선택된 옵션라벨 형식으로 표시 */}
@@ -836,13 +836,13 @@ export function RepeaterTable({
                           ) : (
                             <>
                               {col.label}
-                              {col.required && <span className="ml-1 text-red-500">*</span>}
+                              {col.required && <span className="ml-1 text-destructive">*</span>}
                             </>
                           )}
                         </div>
                         {/* 리사이즈 핸들 */}
                         <div
-                          className="pointer-events-auto absolute top-0 right-0 bottom-0 w-1 cursor-col-resize opacity-0 transition-opacity group-hover:opacity-100 hover:bg-blue-500"
+                          className="pointer-events-auto absolute top-0 right-0 bottom-0 w-1 cursor-col-resize opacity-0 transition-opacity group-hover:opacity-100 hover:bg-primary"
                           onMouseDown={(e) => handleMouseDown(e, col.field)}
                           title="드래그하여 너비 조정"
                         />
@@ -859,7 +859,7 @@ export function RepeaterTable({
                     <td
                       key="empty-cell"
                       colSpan={visibleColumns.length + 2}
-                      className="border-b border-gray-200 px-4 py-8 text-center text-gray-500"
+                      className="border-b border-border px-4 py-8 text-center text-muted-foreground"
                     >
                       추가된 항목이 없습니다
                     </td>
@@ -870,8 +870,8 @@ export function RepeaterTable({
                       key={`row-${rowIndex}`}
                       id={`row-${rowIndex}`}
                       className={cn(
-                        "transition-colors hover:bg-blue-50/50",
-                        selectedRows.has(rowIndex) && "bg-blue-50",
+                        "transition-colors hover:bg-primary/10/50",
+                        selectedRows.has(rowIndex) && "bg-primary/10",
                       )}
                     >
                       {({ attributes, listeners, isDragging }) => (
@@ -880,41 +880,41 @@ export function RepeaterTable({
                           <td
                             key={`drag-${rowIndex}`}
                             className={cn(
-                              "sticky left-0 z-10 border-r border-b border-gray-200 px-1 py-1 text-center",
-                              selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
+                              "sticky left-0 z-10 border-r border-b border-border px-1 py-1 text-center",
+                              selectedRows.has(rowIndex) ? "bg-primary/10" : "bg-white",
                             )}
                           >
                             <button
                               type="button"
                               className={cn(
-                                "cursor-grab rounded p-1 transition-colors hover:bg-gray-100",
+                                "cursor-grab rounded p-1 transition-colors hover:bg-muted",
                                 isDragging && "cursor-grabbing",
                               )}
                               {...attributes}
                               {...listeners}
                             >
-                              <GripVertical className="h-4 w-4 text-gray-400" />
+                              <GripVertical className="h-4 w-4 text-muted-foreground/70" />
                             </button>
                           </td>
                           {/* 체크박스 - 좌측 고정 */}
                           <td
                             key={`check-${rowIndex}`}
                             className={cn(
-                              "sticky left-8 z-10 border-r border-b border-gray-200 px-3 py-1 text-center",
-                              selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
+                              "sticky left-8 z-10 border-r border-b border-border px-3 py-1 text-center",
+                              selectedRows.has(rowIndex) ? "bg-primary/10" : "bg-white",
                             )}
                           >
                             <Checkbox
                               checked={selectedRows.has(rowIndex)}
                               onCheckedChange={(checked) => handleRowSelect(rowIndex, !!checked)}
-                              className="border-gray-400"
+                              className="border-input"
                             />
                           </td>
                           {/* 데이터 컬럼들 */}
                           {visibleColumns.map((col, colIndex) => (
                             <td
                               key={`${rowIndex}-${col.field || colIndex}`}
-                              className="overflow-hidden border-r border-b border-gray-200 px-1 py-1"
+                              className="overflow-hidden border-r border-b border-border px-1 py-1"
                               style={{
                                 width: `${columnWidths[col.field]}px`,
                                 maxWidth: `${columnWidths[col.field]}px`,
diff --git a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
index 84c62617..98af6c0a 100644
--- a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
+++ b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
@@ -120,13 +120,13 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         {component.label && component.style?.labelDisplay !== false && (
           <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
             {component.label}
-            {component.required && <span className="text-red-500">*</span>}
+            {component.required && <span className="text-destructive">*</span>}
           </label>
         )}
 
         <div className="box-border flex h-full w-full items-center gap-1">
           {/* 통화 기호 */}
-          <span className="pl-2 text-base font-semibold text-green-600">₩</span>
+          <span className="pl-2 text-base font-semibold text-emerald-600">₩</span>
 
           {/* 숫자 입력 */}
           <input
@@ -143,7 +143,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
                 onFormDataChange(component.columnName, numericValue);
               }
             }}
-            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-green-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-emerald-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
             style={inputFontSize ? { fontSize: inputFontSize } : undefined}
           />
         </div>
@@ -159,7 +159,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         {component.label && component.style?.labelDisplay !== false && (
           <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
             {component.label}
-            {component.required && <span className="text-red-500">*</span>}
+            {component.required && <span className="text-destructive">*</span>}
           </label>
         )}
 
@@ -182,12 +182,12 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
                 onFormDataChange(component.columnName, numericValue);
               }
             }}
-            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-blue-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-primary"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
             style={inputFontSize ? { fontSize: inputFontSize } : undefined}
           />
 
           {/* 퍼센트 기호 */}
-          <span className="pr-2 text-base font-semibold text-blue-600">%</span>
+          <span className="pr-2 text-base font-semibold text-primary">%</span>
         </div>
       </div>
     );
@@ -199,7 +199,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
@@ -222,7 +222,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         min={componentConfig.min}
         max={componentConfig.max}
         step={step}
-        className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+        className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-foreground"} placeholder:text-muted-foreground/70 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
         style={inputFontSize ? { fontSize: inputFontSize } : undefined}
         onClick={handleClick}
         onDragStart={onDragStart}
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
index 13cb1a68..13ad9887 100644
--- a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
@@ -1712,8 +1712,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
       {/* 필터 바 - 필터 영역에 필드가 있을 때만 표시 */}
       {filterFields.length > 0 && (
-        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-orange-50/50 dark:bg-orange-950/10">
-          <Filter className="h-3.5 w-3.5 text-orange-600 dark:text-orange-400" />
+        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-amber-50/50 dark:bg-orange-950/10">
+          <Filter className="h-3.5 w-3.5 text-amber-600 dark:text-orange-400" />
           <span className="text-xs font-medium text-orange-700 dark:text-orange-300">필터:</span>
           <div className="flex items-center gap-2 flex-wrap">
             {filterFields.map((filterField) => {
@@ -1739,7 +1739,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                         "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
                         "border transition-colors max-w-xs",
                         isFiltered
-                          ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
+                          ? "bg-amber-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
                           : "bg-background border-border hover:bg-accent"
                       )}
                       title={isFiltered ? `${filterField.caption}: ${selectedValues.join(", ")}` : filterField.caption}
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
index 448c92a5..e05a154e 100644
--- a/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
@@ -90,10 +90,10 @@ interface ColumnChipProps {
 const ColumnChip: React.FC<ColumnChipProps> = ({ column, isUsed, onClick }) => {
   const dataType = mapDbTypeToFieldType(column.data_type);
   const typeColor = {
-    number: "bg-blue-100 text-blue-700 border-blue-200",
-    string: "bg-green-100 text-green-700 border-green-200",
+    number: "bg-primary/10 text-primary border-primary/20",
+    string: "bg-emerald-100 text-emerald-700 border-emerald-200",
     date: "bg-purple-100 text-purple-700 border-purple-200",
-    boolean: "bg-orange-100 text-orange-700 border-orange-200",
+    boolean: "bg-amber-100 text-orange-700 border-orange-200",
   }[dataType];
 
   return (
@@ -400,12 +400,12 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
   return (
     <div className="space-y-4">
       {/* 사용 가이드 */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+      <div className="bg-primary/10 border border-primary/20 rounded-lg p-3">
         <div className="flex items-start gap-2">
-          <Info className="h-4 w-4 text-blue-600 mt-0.5" />
-          <div className="text-xs text-blue-800">
+          <Info className="h-4 w-4 text-primary mt-0.5" />
+          <div className="text-xs text-primary">
             <p className="font-medium mb-1">피벗 테이블 설정 방법</p>
-            <ol className="list-decimal list-inside space-y-0.5 text-blue-700">
+            <ol className="list-decimal list-inside space-y-0.5 text-primary">
               <li>데이터를 가져올 <strong>테이블</strong>을 선택하세요</li>
               <li><strong>행 그룹</strong>에 그룹화할 컬럼을 추가하세요 (예: 지역, 부서)</li>
               <li><strong>열 그룹</strong>에 가로로 펼칠 컬럼을 추가하세요 (예: 월, 분기)</li>
@@ -502,13 +502,13 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
               area="column"
               label="열 그룹"
               description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
-              icon={<Columns className="h-4 w-4 text-blue-600" />}
+              icon={<Columns className="h-4 w-4 text-primary" />}
               fields={getFieldsByArea("column")}
               columns={columns}
               onAddField={(col) => handleAddField("column", col)}
               onRemoveField={(idx) => handleRemoveField("column", idx)}
               onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
-              color="border-blue-200 bg-blue-50/50"
+              color="border-primary/20 bg-primary/10/50"
             />
 
             <AreaDropZone
diff --git a/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
index 060eb74d..b2bbef5e 100644
--- a/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
+++ b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
@@ -91,17 +91,17 @@ const AREA_CONFIG: Record<
   filter: {
     title: "필터",
     icon: <Filter className="h-3.5 w-3.5" />,
-    color: "bg-orange-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
+    color: "bg-amber-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
   },
   column: {
     title: "열",
     icon: <Columns className="h-3.5 w-3.5" />,
-    color: "bg-blue-50 border-blue-200 dark:bg-blue-950/20 dark:border-blue-800",
+    color: "bg-primary/10 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
   },
   row: {
     title: "행",
     icon: <Rows className="h-3.5 w-3.5" />,
-    color: "bg-green-50 border-green-200 dark:bg-green-950/20 dark:border-green-800",
+    color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-950/20 dark:border-emerald-800",
   },
   data: {
     title: "데이터",
@@ -183,7 +183,7 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
             </span>
             {/* 그룹화 적용 표시 */}
             {hasGrouping && (
-              <span className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 text-[10px] px-1 rounded">
+              <span className="bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary/80 text-[10px] px-1 rounded">
                 {groupLabels[field.groupInterval!]}
               </span>
             )}
@@ -311,7 +311,7 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
             <>
               <DropdownMenuItem
                 onClick={() => onSettingsChange?.({ ...field, filterValues: [] })}
-                className="text-orange-600"
+                className="text-amber-600"
               >
                 <Filter className="h-3 w-3 mr-2" />
                 필터 초기화 ({filterCount}개 선택됨)
@@ -763,7 +763,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
                 <RotateCcw className="h-3 w-3 mr-1" />
                 초기화
                 {filteredFieldCount > 0 && (
-                  <span className="ml-1 bg-orange-500 text-white text-[10px] px-1 rounded">
+                  <span className="ml-1 bg-amber-500 text-white text-[10px] px-1 rounded">
                     {filteredFieldCount}
                   </span>
                 )}
@@ -772,7 +772,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="w-48">
               <DropdownMenuItem onClick={handleResetFilters}>
-                <FilterX className="h-3.5 w-3.5 mr-2 text-orange-500" />
+                <FilterX className="h-3.5 w-3.5 mr-2 text-amber-500" />
                 필터만 초기화
                 {filteredFieldCount > 0 && (
                   <span className="ml-auto text-xs text-muted-foreground">
@@ -781,7 +781,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
                 )}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={handleResetLayout}>
-                <LayoutGrid className="h-3.5 w-3.5 mr-2 text-blue-500" />
+                <LayoutGrid className="h-3.5 w-3.5 mr-2 text-primary" />
                 필드 배치 초기화
               </DropdownMenuItem>
               <DropdownMenuSeparator />
diff --git a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
index ea946531..63a4288a 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
@@ -95,12 +95,12 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
   };
 
   return (
-    <div className="relative rounded-lg border border-gray-200 bg-white shadow-sm">
+    <div className="relative rounded-lg border border-border bg-white shadow-sm">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
+      <div className="flex items-center justify-between rounded-t-lg bg-primary px-4 py-2 text-white">
         <span className="font-medium">조건 {index + 1}</span>
         {!readonly && (
-          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
+          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-primary/90">
             <X className="h-4 w-4" />
           </button>
         )}
@@ -111,8 +111,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         {/* 열 범위 */}
         <div className="flex items-center gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              열 범위 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              열 범위 <span className="text-destructive">*</span>
             </label>
             <div className="flex items-center gap-2">
               <Input
@@ -125,7 +125,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
                 disabled={readonly}
                 className="h-9 text-center"
               />
-              <span className="text-gray-500">~</span>
+              <span className="text-muted-foreground">~</span>
               <Input
                 type="number"
                 min={1}
@@ -139,8 +139,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
             </div>
           </div>
           <div className="w-20">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              단 수 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              단 수 <span className="text-destructive">*</span>
             </label>
             <Input
               type="number"
@@ -156,14 +156,14 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         </div>
 
         {/* 계산 결과 */}
-        <div className="rounded-md bg-blue-50 px-3 py-2 text-center text-sm text-blue-700">
+        <div className="rounded-md bg-primary/10 px-3 py-2 text-center text-sm text-primary">
           {locationCount > 0 ? (
             <>
               {localValues.startRow}열 ~ {localValues.endRow}열 x {localValues.levels}단 ={" "}
               <strong>{locationCount}개</strong>
             </>
           ) : (
-            <span className="text-gray-500">값을 입력하세요</span>
+            <span className="text-muted-foreground">값을 입력하세요</span>
           )}
         </div>
       </div>
@@ -664,7 +664,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
+            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-primary/50" />렉 라인 구조 설정
           </CardTitle>
           {!readonly && (
             <div className="flex items-center gap-2">
@@ -757,9 +757,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 기존 데이터 존재 알림 */}
           {!isCheckingDuplicates && existingLocations.length > 0 && !hasDuplicateWithExisting && (
-            <Alert className="mb-4 border-blue-200 bg-blue-50">
-              <AlertCircle className="h-4 w-4 text-blue-600" />
-              <AlertDescription className="text-blue-800">
+            <Alert className="mb-4 border-primary/20 bg-primary/10">
+              <AlertCircle className="h-4 w-4 text-primary" />
+              <AlertDescription className="text-primary">
                 해당 창고/층/구역에 <strong>{existingLocations.length}개</strong>의 위치가 이미 등록되어 있습니다.
               </AlertDescription>
             </Alert>
@@ -767,47 +767,47 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 현재 매핑된 값 표시 */}
           {(context.warehouseCode || context.warehouseName || context.floor || context.zone) && (
-            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-gray-50 p-3">
+            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-muted p-3">
               {(context.warehouseCode || context.warehouseName) && (
-                <span className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
+                <span className="rounded bg-primary/10 px-2 py-1 text-xs text-primary">
                   창고: {context.warehouseName || context.warehouseCode}
                   {context.warehouseName && context.warehouseCode && ` (${context.warehouseCode})`}
                 </span>
               )}
               {context.floor && (
-                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
+                <span className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-800">층: {context.floor}</span>
               )}
               {context.zone && (
                 <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
               )}
               {context.locationType && (
-                <span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
+                <span className="rounded bg-amber-100 px-2 py-1 text-xs text-orange-800">
                   유형: {context.locationType}
                 </span>
               )}
               {context.status && (
-                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
+                <span className="rounded bg-muted/80 px-2 py-1 text-xs text-foreground">상태: {context.status}</span>
               )}
             </div>
           )}
 
           {/* 안내 메시지 */}
-          <div className="mb-4 rounded-lg bg-blue-50 p-4">
-            <ol className="space-y-1 text-sm text-blue-800">
+          <div className="mb-4 rounded-lg bg-primary/10 p-4">
+            <ol className="space-y-1 text-sm text-primary">
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   1
                 </span>
                 조건 추가 버튼을 클릭하여 렉 라인 조건을 생성하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   2
                 </span>
                 각 조건마다 열 범위와 단 수를 입력하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   3
                 </span>
                 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)
@@ -817,9 +817,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 조건 목록 또는 빈 상태 */}
           {conditions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-12">
-              <div className="mb-4 text-6xl text-gray-300">📦</div>
-              <p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-12">
+              <div className="mb-4 text-6xl text-muted-foreground/50">📦</div>
+              <p className="mb-4 text-muted-foreground">조건을 추가하여 렉 구조를 설정하세요</p>
               {!readonly && (
                 <Button onClick={addCondition} className="gap-1">
                   <Plus className="h-4 w-4" />첫 번째 조건 추가
@@ -870,15 +870,15 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
             {config.showStatistics && (
               <div className="mb-4 grid grid-cols-3 gap-4">
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">총 위치</div>
+                  <div className="text-sm text-muted-foreground">총 위치</div>
                   <div className="text-2xl font-bold">{statistics.totalLocations}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">열 수</div>
+                  <div className="text-sm text-muted-foreground">열 수</div>
                   <div className="text-2xl font-bold">{statistics.totalRows}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">최대 단</div>
+                  <div className="text-sm text-muted-foreground">최대 단</div>
                   <div className="text-2xl font-bold">{statistics.maxLevel}단</div>
                 </div>
               </div>
@@ -889,7 +889,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <div className="rounded-lg border">
                 <ScrollArea className="h-[400px]">
                   <Table>
-                    <TableHeader className="sticky top-0 bg-gray-50">
+                    <TableHeader className="sticky top-0 bg-muted">
                       <TableRow>
                         <TableHead className="w-12 text-center">No</TableHead>
                         <TableHead>위치코드</TableHead>
@@ -921,8 +921,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </ScrollArea>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-8 text-gray-500">
-                <Eye className="mb-2 h-8 w-8 text-gray-300" />
+              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-8 text-muted-foreground">
+                <Eye className="mb-2 h-8 w-8 text-muted-foreground/50" />
                 <p>미리보기 생성 버튼을 클릭하여 결과를 확인하세요</p>
               </div>
             )}
@@ -969,16 +969,16 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               {/* 템플릿 목록 */}
               {templates.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium text-gray-700">저장된 템플릿</div>
+                  <div className="text-sm font-medium text-foreground">저장된 템플릿</div>
                   <ScrollArea className="h-[200px]">
                     {templates.map((template) => (
                       <div
                         key={template.id}
-                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-gray-50"
+                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted"
                       >
                         <div>
                           <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
+                          <div className="text-xs text-muted-foreground">{template.conditions.length}개 조건</div>
                         </div>
                         <div className="flex gap-2">
                           <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
@@ -993,7 +993,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                   </ScrollArea>
                 </div>
               ) : (
-                <div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
+                <div className="py-8 text-center text-muted-foreground">저장된 템플릿이 없습니다</div>
               )}
             </div>
           )}
diff --git a/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx b/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
index 8f0c8177..17e1a781 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
@@ -73,8 +73,8 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
     <div className="space-y-4">
       {/* 필드 매핑 섹션 */}
       <div className="space-y-3">
-        <div className="text-sm font-medium text-gray-700">필드 매핑</div>
-        <p className="text-xs text-gray-500">
+        <div className="text-sm font-medium text-foreground">필드 매핑</div>
+        <p className="text-xs text-muted-foreground">
           상위 폼에 배치된 필드 중 어떤 필드를 사용할지 선택하세요
         </p>
 
@@ -207,7 +207,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* 제한 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">제한 설정</div>
+        <div className="text-sm font-medium text-foreground">제한 설정</div>
 
         <div>
           <Label className="text-xs">최대 조건 수</Label>
@@ -248,7 +248,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* UI 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">UI 설정</div>
+        <div className="text-sm font-medium text-foreground">UI 설정</div>
 
         <div className="flex items-center justify-between">
           <Label className="text-xs">템플릿 기능</Label>
diff --git a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
index 8d196db7..9987a8f4 100644
--- a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
+++ b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
@@ -96,9 +96,9 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
                 checked={selectedValue === option.value}
                 onChange={() => handleRadioChange(option.value)}
                 disabled={componentConfig.disabled || isDesignMode}
-                className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-0 focus:outline-none"
+                className="h-4 w-4 border-input text-primary focus:ring-0 focus:outline-none"
               />
-              <span className="text-sm text-gray-900">{option.label}</span>
+              <span className="text-sm text-foreground">{option.label}</span>
             </label>
           ))}
         </div>
@@ -118,9 +118,9 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
                 checked={selectedValue === option.value}
                 onChange={() => handleRadioChange(option.value)}
                 disabled={componentConfig.disabled || isDesignMode}
-                className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-0 focus:outline-none"
+                className="h-4 w-4 border-input text-primary focus:ring-0 focus:outline-none"
               />
-              <span className="text-sm text-gray-900">{option.label}</span>
+              <span className="text-sm text-foreground">{option.label}</span>
             </label>
           ))}
         </div>
@@ -155,7 +155,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx
index 66c13255..f5c76061 100644
--- a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx
+++ b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx
@@ -371,7 +371,7 @@ export const RelatedDataButtonsComponent: React.FC<RelatedDataButtonsComponentPr
                 variant="default"
                 size="sm"
                 onClick={handleAddClick}
-                className="bg-blue-600 hover:bg-blue-700"
+                className="bg-primary hover:bg-primary/90"
               >
                 <Plus className="mr-1 h-4 w-4" />
                 {addButtonConfig.label || "버전 추가"}
diff --git a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx
index 173682fc..437ea625 100644
--- a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx
+++ b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx
@@ -337,7 +337,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
                     >
                       <Check className={cn("mr-2 h-4 w-4", config.sourceMapping?.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
                       {table.displayName || table.tableName}
-                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                      {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                     </CommandItem>
                   ))}
                 </CommandGroup>
@@ -377,7 +377,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
         </div>
 
         {config.headerDisplay?.show !== false && (
-          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
+          <div className="space-y-2 pl-2 border-l-2 border-border">
             <div className="space-y-1">
               <Label className="text-xs">제목 컬럼</Label>
               <Select
@@ -449,7 +449,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
                     >
                       <Check className={cn("mr-2 h-4 w-4", config.buttonDataSource?.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
                       {table.displayName || table.tableName}
-                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                      {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                     </CommandItem>
                   ))}
                 </CommandGroup>
@@ -659,7 +659,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
         </div>
 
         {config.addButton?.show && (
-          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
+          <div className="space-y-2 pl-2 border-l-2 border-border">
             <div className="space-y-1">
               <Label className="text-xs">버튼 라벨</Label>
               <Input
@@ -708,7 +708,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
         </div>
 
         {config.modalLink?.enabled && (
-          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
+          <div className="space-y-2 pl-2 border-l-2 border-border">
             <div className="space-y-1">
               <Label className="text-xs">트리거 방식</Label>
               <Select
diff --git a/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx b/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx
index b51b2448..5f533cfd 100644
--- a/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx
+++ b/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx
@@ -471,8 +471,8 @@ export function RepeatContainerComponent({
         className={cn(
           "rounded-md border border-dashed p-3 transition-colors",
           isDragOver
-            ? "border-green-500 bg-green-50/70"
-            : "border-blue-300 bg-blue-50/50"
+            ? "border-emerald-500 bg-emerald-50/70"
+            : "border-primary/40 bg-primary/10/50"
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -484,13 +484,13 @@ export function RepeatContainerComponent({
         }}
       >
         <div className="mb-3 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-blue-700">
+          <div className="flex items-center gap-2 text-sm text-primary">
             <Repeat className="h-4 w-4" />
             <span className="font-medium">리피터 컨테이너</span>
-            <span className="text-blue-500">({previewData.length}개 미리보기)</span>
+            <span className="text-primary">({previewData.length}개 미리보기)</span>
           </div>
           {isDragOver ? (
-            <div className="flex items-center gap-1 rounded bg-green-100 px-2 py-1 text-xs text-green-700">
+            <div className="flex items-center gap-1 rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-700">
               <Plus className="h-3 w-3" />
               여기에 놓으세요
             </div>
@@ -521,7 +521,7 @@ export function RepeatContainerComponent({
                   clickable && "cursor-pointer hover:shadow-md",
                   showSelectedState &&
                     selectedIndices.includes(index) &&
-                    "ring-2 ring-blue-500"
+                    "ring-2 ring-ring"
                 )}
               >
                 {showItemTitle && (titleColumn || itemTitleTemplate) && (
@@ -556,22 +556,22 @@ export function RepeatContainerComponent({
                     {slotChildren!.map((child: SlotComponentConfig, childIdx: number) => (
                       <div
                         key={child.id}
-                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-green-50/50 px-2 py-1.5"
+                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-emerald-50/50 px-2 py-1.5"
                       >
-                        <div className="flex h-5 w-5 items-center justify-center rounded bg-green-100 text-xs font-medium text-green-700">
+                        <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-100 text-xs font-medium text-emerald-700">
                           {childIdx + 1}
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="truncate text-xs font-medium text-green-700">
+                          <div className="truncate text-xs font-medium text-emerald-700">
                             {child.label || child.componentType}
                           </div>
                           {child.fieldName && (
-                            <div className="truncate text-[10px] text-green-500">
+                            <div className="truncate text-[10px] text-emerald-500">
                               {child.fieldName}
                             </div>
                           )}
                         </div>
-                        <div className="text-[10px] text-green-400">
+                        <div className="text-[10px] text-emerald-400">
                           {child.componentType}
                         </div>
                       </div>
@@ -612,7 +612,7 @@ export function RepeatContainerComponent({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center rounded-md border bg-slate-50 py-8">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
         <span className="ml-2 text-sm text-muted-foreground">로딩 중...</span>
       </div>
     );
@@ -640,7 +640,7 @@ export function RepeatContainerComponent({
                 clickable && "cursor-pointer hover:shadow-md",
                 showSelectedState &&
                   selectedIndices.includes(index) &&
-                  "ring-2 ring-blue-500"
+                  "ring-2 ring-ring"
               )}
               onClick={() => handleItemClick(index, row)}
             >
diff --git a/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx b/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx
index 2eddd234..c46bb275 100644
--- a/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx
+++ b/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx
@@ -127,7 +127,7 @@ export function RepeatContainerConfigPanel({
 
         {/* 현재 선택된 테이블 표시 (카드 형태) */}
         <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-          <Database className="h-4 w-4 text-blue-500" />
+          <Database className="h-4 w-4 text-primary" />
           <div className="flex-1">
             <div className="text-xs font-medium">
               {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -180,7 +180,7 @@ export function RepeatContainerConfigPanel({
                           !config.useCustomTable ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3 w-3 text-blue-500" />
+                      <Database className="mr-2 h-3 w-3 text-primary" />
                       {screenTableName}
                     </CommandItem>
                   </CommandGroup>
@@ -499,7 +499,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.titleColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.titleColumn}" 값이 제목으로 표시됩니다
                 </p>
               )}
@@ -567,7 +567,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.descriptionColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.descriptionColumn}" 값이 설명으로 표시됩니다
                 </p>
               )}
@@ -889,25 +889,25 @@ function SlotChildrenSection({
             return (
               <div
                 key={child.id}
-                className="rounded-md border border-green-200 bg-green-50 overflow-hidden"
+                className="rounded-md border border-emerald-200 bg-emerald-50 overflow-hidden"
               >
                 {/* 기본 정보 헤더 - 타입 선택 드롭다운 제거됨 */}
                 <div className="flex items-center gap-2 p-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
+                  <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-200 text-xs font-medium text-emerald-700">
                     {index + 1}
                   </div>
                   <div className="flex-1">
-                    <div className="text-xs font-medium text-green-700">
+                    <div className="text-xs font-medium text-emerald-700">
                       {child.label || child.fieldName}
                     </div>
-                    <div className="text-[10px] text-green-500">
+                    <div className="text-[10px] text-emerald-500">
                       필드: {child.fieldName}
                     </div>
                   </div>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700"
+                    className="h-5 w-5 p-0 text-primary hover:text-primary"
                     onClick={() => toggleExpanded(child.id)}
                     title="상세 설정"
                   >
@@ -920,7 +920,7 @@ function SlotChildrenSection({
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-red-400 hover:text-red-600"
+                    className="h-5 w-5 p-0 text-destructive/80 hover:text-destructive"
                     onClick={() => removeComponent(child.id)}
                   >
                     <X className="h-3 w-3" />
@@ -929,7 +929,7 @@ function SlotChildrenSection({
 
                 {/* 상세 설정 패널 */}
                 {isExpanded && (
-                  <div className="border-t border-green-200 bg-white p-3 space-y-3">
+                  <div className="border-t border-emerald-200 bg-white p-3 space-y-3">
                     {hasComponentConfigPanel(child.componentType) ? (
                       <SlotComponentDetailPanel
                         child={child}
@@ -948,14 +948,14 @@ function SlotChildrenSection({
                     ) : (
                       <>
                         {child.fieldName && (
-                          <div className="p-2 bg-green-50 rounded-md border border-green-200">
+                          <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
                             <div className="flex items-center gap-1.5">
-                              <Database className="h-3 w-3 text-green-600" />
-                              <span className="text-[10px] text-green-700 font-medium">
+                              <Database className="h-3 w-3 text-emerald-600" />
+                              <span className="text-[10px] text-emerald-700 font-medium">
                                 바인딩: {child.fieldName}
                               </span>
                             </div>
-                            <p className="text-[9px] text-green-600 mt-0.5">
+                            <p className="text-[9px] text-emerald-600 mt-0.5">
                               각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
                             </p>
                           </div>
@@ -1092,7 +1092,7 @@ function SlotChildrenSection({
                         <Plus
                           className={cn(
                             "mr-2 h-3 w-3",
-                            isAdded ? "text-green-500" : "text-blue-500"
+                            isAdded ? "text-emerald-500" : "text-primary"
                           )}
                         />
                         <div className="flex-1">
@@ -1102,7 +1102,7 @@ function SlotChildrenSection({
                           </div>
                         </div>
                         {isAdded && (
-                          <Check className="h-3 w-3 text-green-500" />
+                          <Check className="h-3 w-3 text-emerald-500" />
                         )}
                       </CommandItem>
                     );
@@ -1134,14 +1134,14 @@ function SlotComponentDetailPanel({
   return (
     <div className="space-y-3">
       {child.fieldName && (
-        <div className="p-2 bg-green-50 rounded-md border border-green-200">
+        <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
           <div className="flex items-center gap-1.5">
-            <Database className="h-3 w-3 text-green-600" />
-            <span className="text-[10px] text-green-700 font-medium">
+            <Database className="h-3 w-3 text-emerald-600" />
+            <span className="text-[10px] text-emerald-700 font-medium">
               바인딩: {child.fieldName}
             </span>
           </div>
-          <p className="text-[9px] text-green-600 mt-0.5">
+          <p className="text-[9px] text-emerald-600 mt-0.5">
             각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
           </p>
         </div>
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
index 6765e6c7..f0a67579 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
@@ -2136,17 +2136,17 @@ export function RepeatScreenModalComponent({
                   </Badge>
                 )}
                 {rowTypeCounts.aggregation > 0 && (
-                  <Badge className="bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300">
+                  <Badge className="bg-amber-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300">
                     집계 {rowTypeCounts.aggregation}개
                   </Badge>
                 )}
                 {rowTypeCounts.table > 0 && (
-                  <Badge className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                  <Badge className="bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary/80">
                     테이블 {rowTypeCounts.table}개
                   </Badge>
                 )}
                 {rowTypeCounts.fields > 0 && (
-                  <Badge className="bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
+                  <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300">
                     필드 {rowTypeCounts.fields}개
                   </Badge>
                 )}
@@ -2176,7 +2176,7 @@ export function RepeatScreenModalComponent({
 
           {/* 데이터 소스 정보 */}
           {dataSource?.sourceTable && (
-            <div className="rounded-md bg-green-100 px-3 py-2 text-xs dark:bg-green-900">
+            <div className="rounded-md bg-emerald-100 px-3 py-2 text-xs dark:bg-emerald-900">
               소스 테이블: <strong>{dataSource.sourceTable}</strong>
               {dataSource.filterField && <span className="ml-2">(필터: {dataSource.filterField})</span>}
             </div>
@@ -2328,7 +2328,7 @@ export function RepeatScreenModalComponent({
                                     key={row._rowId}
                                     className={cn(
                                       row._isDirty && "bg-primary/5",
-                                      row._isNew && "bg-green-50 dark:bg-green-950",
+                                      row._isNew && "bg-emerald-50 dark:bg-emerald-950",
                                       row._isDeleted && "bg-destructive/10 opacity-60",
                                     )}
                                   >
@@ -2373,7 +2373,7 @@ export function RepeatScreenModalComponent({
                                                 onClick={() =>
                                                   handleEditExternalRow(card._cardId, row._rowId, contentRow.id)
                                                 }
-                                                className="h-7 w-7 p-0 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                                                className="h-7 w-7 p-0 text-primary hover:bg-primary/10 hover:text-primary"
                                                 title="수정"
                                               >
                                                 <Pencil className="h-4 w-4" />
@@ -2725,7 +2725,7 @@ function renderContentRow(
 
       if (aggFields.length === 0) {
         return (
-          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
+          <div className="rounded-lg bg-amber-50 p-4 text-sm text-amber-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다. (레이아웃 탭에서 집계 필드를 추가하세요)
           </div>
         );
@@ -2768,7 +2768,7 @@ function renderContentRow(
 
       if (tableColumns.length === 0) {
         return (
-          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+          <div className="rounded-lg bg-primary/10 p-4 text-sm text-primary dark:bg-primary/15 dark:text-primary/80">
             테이블 컬럼이 설정되지 않았습니다. (레이아웃 탭에서 테이블 컬럼을 추가하세요)
           </div>
         );
@@ -2858,7 +2858,7 @@ function renderSimpleContentRow(
 
       if (aggFields.length === 0) {
         return (
-          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
+          <div className="rounded-lg bg-amber-50 p-4 text-sm text-amber-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다.
           </div>
         );
@@ -2903,7 +2903,7 @@ function renderSimpleContentRow(
 
       if (tableColumns.length === 0) {
         return (
-          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+          <div className="rounded-lg bg-primary/10 p-4 text-sm text-primary dark:bg-primary/15 dark:text-primary/80">
             테이블 컬럼이 설정되지 않았습니다.
           </div>
         );
@@ -3004,10 +3004,10 @@ function renderSimpleTableCell(col: TableColumnConfig, card: CardData, onChange:
 // 배경색 클래스 변환
 function getBackgroundClass(color: string): string {
   const colorMap: Record<string, string> = {
-    blue: "bg-blue-50 dark:bg-blue-950",
-    green: "bg-green-50 dark:bg-green-950",
+    blue: "bg-primary/10 dark:bg-primary/15",
+    green: "bg-emerald-50 dark:bg-emerald-950",
     purple: "bg-purple-50 dark:bg-purple-950",
-    orange: "bg-orange-50 dark:bg-orange-950",
+    orange: "bg-amber-50 dark:bg-orange-950",
   };
   return colorMap[color] || "";
 }
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
index 2a77f96a..1e6772d6 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
@@ -532,13 +532,13 @@ function FormulaBuilder({
   const getTokenBadgeClass = (token: FormulaToken): string => {
     switch (token.type) {
       case "aggregation":
-        return "bg-blue-100 text-blue-700 border-blue-200";
+        return "bg-primary/10 text-primary border-primary/20";
       case "column":
         return token.isExternal 
-          ? "bg-orange-100 text-orange-700 border-orange-200" 
-          : "bg-green-100 text-green-700 border-green-200";
+          ? "bg-amber-100 text-orange-700 border-orange-200" 
+          : "bg-emerald-100 text-emerald-700 border-emerald-200";
       case "operator":
-        return "bg-gray-100 text-gray-700 border-gray-200";
+        return "bg-muted text-foreground border-border";
       case "number":
         return "bg-purple-100 text-purple-700 border-purple-200";
       default:
@@ -600,8 +600,8 @@ function FormulaBuilder({
 
       {/* 집계 참조 추가 */}
       {referenceableAggregations.length > 0 && (
-        <div className="space-y-2 p-2 bg-blue-50 dark:bg-blue-950 rounded border border-blue-200 dark:border-blue-800 overflow-hidden min-w-0">
-          <Label className="text-[9px] text-blue-700 dark:text-blue-300">이전 집계 참조</Label>
+        <div className="space-y-2 p-2 bg-primary/10 dark:bg-primary/15 rounded border border-primary/20 dark:border-primary/30 overflow-hidden min-w-0">
+          <Label className="text-[9px] text-primary dark:text-primary/80">이전 집계 참조</Label>
           <div className="space-y-1">
             <span className="text-[8px] text-muted-foreground">참조할 집계 선택</span>
             <div className="flex gap-1">
@@ -633,8 +633,8 @@ function FormulaBuilder({
       )}
 
       {/* 테이블 컬럼 집계 추가 */}
-      <div className="space-y-2 p-2 bg-green-50 dark:bg-green-950 rounded border border-green-200 dark:border-green-800 overflow-hidden min-w-0">
-        <Label className="text-[9px] text-green-700 dark:text-green-300">테이블 컬럼 집계</Label>
+      <div className="space-y-2 p-2 bg-emerald-50 dark:bg-emerald-950 rounded border border-emerald-200 dark:border-emerald-800 overflow-hidden min-w-0">
+        <Label className="text-[9px] text-emerald-700 dark:text-emerald-300">테이블 컬럼 집계</Label>
         
         {/* 테이블 선택 */}
         <div className="space-y-1">
@@ -704,7 +704,7 @@ function FormulaBuilder({
         </div>
         
         {newTokenTable !== sourceTable && newTokenTable && (
-          <p className="text-[8px] text-orange-600">외부 테이블: _EXT 함수 사용</p>
+          <p className="text-[8px] text-amber-600">외부 테이블: _EXT 함수 사용</p>
         )}
       </div>
 
@@ -924,7 +924,7 @@ function AggregationConfigItemModal({
   return (
     <div className={cn(
       "border rounded-lg p-4 space-y-4",
-      isFormula ? "bg-purple-50 dark:bg-purple-950 border-purple-200" : "bg-blue-50 dark:bg-blue-950 border-blue-200"
+      isFormula ? "bg-purple-50 dark:bg-purple-950 border-purple-200" : "bg-primary/10 dark:bg-primary/15 border-primary/20"
     )}>
       {/* 헤더 */}
       <div className="flex items-center justify-between">
@@ -952,7 +952,7 @@ function AggregationConfigItemModal({
           </div>
           <Badge className={cn(
             "text-xs px-2 py-0.5",
-            isFormula ? "bg-purple-100 text-purple-700" : "bg-blue-100 text-blue-700"
+            isFormula ? "bg-purple-100 text-purple-700" : "bg-primary/10 text-primary"
           )}>
             {isFormula ? "가상" : "집계"} {index + 1}
           </Badge>
@@ -1092,8 +1092,8 @@ function AggregationConfigItemModal({
 
           {/* 이전 집계 참조 */}
           {referenceableAggregations.length > 0 && (
-            <div className="space-y-1.5 p-3 bg-blue-100 dark:bg-blue-900 rounded-lg">
-              <Label className="text-xs text-blue-700 dark:text-blue-300">이전 집계 참조</Label>
+            <div className="space-y-1.5 p-3 bg-primary/10 dark:bg-primary/20 rounded-lg">
+              <Label className="text-xs text-primary dark:text-primary/80">이전 집계 참조</Label>
               <div className="flex flex-wrap gap-1">
                 {referenceableAggregations.map((refAgg) => (
                   <Button
@@ -1105,7 +1105,7 @@ function AggregationConfigItemModal({
                       setLocalFormula(newFormula);
                       onUpdate({ formula: newFormula });
                     }}
-                    className="h-7 text-xs bg-blue-50 hover:bg-blue-100 border-blue-300"
+                    className="h-7 text-xs bg-primary/10 hover:bg-primary/10 border-primary/40"
                   >
                     {refAgg.label || refAgg.resultField}
                   </Button>
@@ -1115,8 +1115,8 @@ function AggregationConfigItemModal({
           )}
 
           {/* 테이블 컬럼 집계 */}
-          <div className="space-y-2 p-3 bg-green-100 dark:bg-green-900 rounded-lg">
-            <Label className="text-xs text-green-700 dark:text-green-300">테이블 컬럼 집계</Label>
+          <div className="space-y-2 p-3 bg-emerald-100 dark:bg-emerald-900 rounded-lg">
+            <Label className="text-xs text-emerald-700 dark:text-emerald-300">테이블 컬럼 집계</Label>
             <FormulaColumnAggregator
               sourceTable={sourceTable}
               allTables={allTables}
@@ -1313,7 +1313,7 @@ function ExternalTableRefSelector({
 
   if (tableRowsWithExternalSource.length === 0) {
     return (
-      <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg">
+      <div className="p-3 bg-muted dark:bg-foreground/90 rounded-lg">
         <p className="text-xs text-muted-foreground">
           레이아웃에 외부 데이터 소스가 설정된 테이블 행이 없습니다.
         </p>
@@ -1371,7 +1371,7 @@ function ExternalTableRefSelector({
                 "flex items-center gap-2 p-2 rounded border cursor-pointer transition-colors",
                 isSelected
                   ? "bg-amber-100 border-amber-300"
-                  : "bg-white border-gray-200 hover:bg-gray-50"
+                  : "bg-white border-border hover:bg-muted"
               )}
               onClick={() => handleToggleTable(row.id)}
             >
@@ -1379,7 +1379,7 @@ function ExternalTableRefSelector({
                 type="checkbox"
                 checked={isSelected}
                 onChange={() => {}} // onClick에서 처리
-                className="h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
+                className="h-4 w-4 rounded border-input text-amber-600 focus:ring-amber-500"
               />
               <div className="flex-1 min-w-0">
                 <p className="text-xs font-medium truncate">{tableTitle}</p>
@@ -1473,7 +1473,7 @@ function SyncSaveConfigSection({
   };
 
   return (
-    <div className="space-y-2 p-2 bg-orange-50 dark:bg-orange-950 rounded-lg border border-orange-200">
+    <div className="space-y-2 p-2 bg-amber-50 dark:bg-orange-950 rounded-lg border border-orange-200">
       <div className="flex items-center justify-between">
         <Label className="text-[10px] font-semibold text-orange-700 dark:text-orange-300">
           연동 저장 설정 (모달 저장 시 다른 테이블에 동기화)
@@ -1482,7 +1482,7 @@ function SyncSaveConfigSection({
           size="sm"
           variant="outline"
           onClick={addSyncSave}
-          className="h-5 text-[9px] px-1 bg-orange-100 hover:bg-orange-200 border-orange-300"
+          className="h-5 text-[9px] px-1 bg-amber-100 hover:bg-orange-200 border-orange-300"
         >
           <Plus className="h-2 w-2 mr-0.5" />
           추가
@@ -1531,7 +1531,7 @@ function SyncSaveConfigItem({
   return (
     <div className={cn(
       "p-2 rounded border space-y-2",
-      sync.enabled ? "bg-orange-100 border-orange-300" : "bg-gray-100 border-gray-300 opacity-60"
+      sync.enabled ? "bg-amber-100 border-orange-300" : "bg-muted border-input opacity-60"
     )}>
       {/* 헤더 */}
       <div className="flex items-center justify-between">
@@ -1998,11 +1998,11 @@ function LayoutSettingsModal({
   // 행 타입별 색상
   const getRowTypeColor = (type: CardContentRowConfig["type"]) => {
     switch (type) {
-      case "header": return "bg-blue-100 border-blue-300";
-      case "aggregation": return "bg-orange-100 border-orange-300";
-      case "table": return "bg-green-100 border-green-300";
+      case "header": return "bg-primary/10 border-primary/40";
+      case "aggregation": return "bg-amber-100 border-orange-300";
+      case "table": return "bg-emerald-100 border-green-300";
       case "fields": return "bg-purple-100 border-purple-300";
-      default: return "bg-gray-100 border-gray-300";
+      default: return "bg-muted border-input";
     }
   };
 
@@ -2031,15 +2031,15 @@ function LayoutSettingsModal({
             <div className="space-y-3 py-3 pr-3">
               {/* 행 추가 버튼 */}
               <div className="flex gap-2 sticky top-0 bg-background z-10 pb-2 border-b">
-                <Button size="sm" variant="outline" onClick={() => addRow("header")} className="h-8 text-xs flex-1 bg-blue-50 hover:bg-blue-100 border-blue-200">
+                <Button size="sm" variant="outline" onClick={() => addRow("header")} className="h-8 text-xs flex-1 bg-primary/10 hover:bg-primary/10 border-primary/20">
                   <Plus className="h-3 w-3 mr-1" />
                   헤더
                 </Button>
-                <Button size="sm" variant="outline" onClick={() => addRow("aggregation")} className="h-8 text-xs flex-1 bg-orange-50 hover:bg-orange-100 border-orange-200">
+                <Button size="sm" variant="outline" onClick={() => addRow("aggregation")} className="h-8 text-xs flex-1 bg-amber-50 hover:bg-amber-100 border-orange-200">
                   <Plus className="h-3 w-3 mr-1" />
                   집계
                 </Button>
-                <Button size="sm" variant="outline" onClick={() => addRow("table")} className="h-8 text-xs flex-1 bg-green-50 hover:bg-green-100 border-green-200">
+                <Button size="sm" variant="outline" onClick={() => addRow("table")} className="h-8 text-xs flex-1 bg-emerald-50 hover:bg-emerald-100 border-emerald-200">
                   <Plus className="h-3 w-3 mr-1" />
                   테이블
                 </Button>
@@ -2273,7 +2273,7 @@ function LayoutRowConfigModal({
                   </Button>
                 </div>
                 {(row.columns || []).map((col, colIndex) => (
-                  <div key={col.id} className="border rounded p-3 space-y-2 bg-gray-50">
+                  <div key={col.id} className="border rounded p-3 space-y-2 bg-muted">
                     <div className="flex items-center justify-between">
                       <span className="text-xs font-medium">컬럼 {colIndex + 1}</span>
                       <Button size="sm" variant="ghost" onClick={() => onRemoveColumn(colIndex)} className="h-6 w-6 p-0">
@@ -2387,7 +2387,7 @@ function LayoutRowConfigModal({
                   </p>
                 )}
                 {(row.aggregationFields || []).map((field, fieldIndex) => (
-                  <div key={fieldIndex} className="border rounded p-3 space-y-2 bg-gray-50">
+                  <div key={fieldIndex} className="border rounded p-3 space-y-2 bg-muted">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1">
                         <Button
@@ -2519,7 +2519,7 @@ function LayoutRowConfigModal({
               </div>
 
               {/* 외부 데이터 소스 설정 */}
-              <div className="border rounded p-3 bg-blue-50 space-y-3">
+              <div className="border rounded p-3 bg-primary/10 space-y-3">
                 <div className="flex items-center justify-between">
                   <Label className="text-xs font-semibold">외부 데이터 소스</Label>
                   <Switch
@@ -2543,7 +2543,7 @@ function LayoutRowConfigModal({
                     </div>
 
                     {/* 조인 조건 설정 */}
-                    <div className="space-y-2 pt-2 border-t border-blue-200">
+                    <div className="space-y-2 pt-2 border-t border-primary/20">
                       <div className="space-y-1">
                         <Label className="text-[10px] font-semibold">조인 조건</Label>
                         <p className="text-[9px] text-muted-foreground">
@@ -2610,8 +2610,8 @@ function LayoutRowConfigModal({
                             </div>
                           </div>
 
-                          <div className="mt-1 p-1.5 bg-blue-50 rounded border border-blue-100">
-                            <p className="text-[8px] text-blue-700 font-mono">
+                          <div className="mt-1 p-1.5 bg-primary/10 rounded border border-primary/10">
+                            <p className="text-[8px] text-primary font-mono">
                               {row.tableDataSource?.sourceTable}.{condition.sourceKey} = {dataSourceTable}.{condition.referenceKey}
                             </p>
                             <p className="text-[8px] text-muted-foreground mt-0.5">
@@ -2641,7 +2641,7 @@ function LayoutRowConfigModal({
                     </div>
 
                     {/* 필터 설정 */}
-                    <div className="space-y-2 pt-2 border-t border-blue-200">
+                    <div className="space-y-2 pt-2 border-t border-primary/20">
                       <div className="flex items-center justify-between">
                         <div className="space-y-1">
                           <Label className="text-[10px] font-semibold">데이터 필터</Label>
@@ -2763,7 +2763,7 @@ function LayoutRowConfigModal({
               </div>
 
               {/* CRUD 설정 */}
-              <div className="space-y-2 p-3 bg-green-100/50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
+              <div className="space-y-2 p-3 bg-emerald-100/50 dark:bg-emerald-900/20 rounded border border-emerald-200 dark:border-emerald-800">
                 <Label className="text-xs font-semibold">CRUD 설정</Label>
                 <div className="flex flex-wrap gap-4">
                   <div className="flex items-center gap-2">
@@ -2804,7 +2804,7 @@ function LayoutRowConfigModal({
                   </div>
                 </div>
                 {row.tableCrud?.allowDelete && (
-                  <div className="flex items-center gap-2 pl-2 pt-1 border-t border-green-200">
+                  <div className="flex items-center gap-2 pl-2 pt-1 border-t border-emerald-200">
                     <Switch
                       checked={row.tableCrud?.deleteConfirm?.enabled !== false}
                       onCheckedChange={(checked) =>
@@ -2844,7 +2844,7 @@ function LayoutRowConfigModal({
                   </Button>
                 </div>
                 {(row.tableColumns || []).map((col, colIndex) => (
-                  <div key={col.id} className="border rounded p-3 space-y-2 bg-gray-50">
+                  <div key={col.id} className="border rounded p-3 space-y-2 bg-muted">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1">
                         <Button
@@ -3181,7 +3181,7 @@ function AggregationSaveConfigSection({
       </div>
 
       {saveConfig.enabled && (
-        <div className="space-y-2 p-2 bg-blue-50/50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+        <div className="space-y-2 p-2 bg-primary/10/50 dark:bg-primary/20/20 rounded border border-primary/20 dark:border-primary/30">
           {/* 자동 저장 옵션 */}
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
@@ -3277,7 +3277,7 @@ function AggregationSaveConfigSection({
                   </Badge>
                 )}
               </div>
-              <div className="font-mono text-blue-600 dark:text-blue-400 break-all">
+              <div className="font-mono text-primary dark:text-primary/80 break-all">
                 {saveConfig.targetTable}.{saveConfig.targetColumn}
               </div>
               {saveConfig.joinKey?.sourceField && saveConfig.joinKey?.targetField && (
@@ -4015,7 +4015,7 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
                               agg.hidden ? "opacity-50" : "",
                               agg.sourceType === "formula" 
                                 ? "bg-purple-50 border border-purple-200" 
-                                : "bg-blue-50 border border-blue-200"
+                                : "bg-primary/10 border border-primary/20"
                             )}
                           >
                             <span className="truncate flex-1">
@@ -4061,11 +4061,11 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
                   {(localConfig.contentRows || []).map((row, index) => {
                     const getRowTypeColor = (type: CardContentRowConfig["type"]) => {
                       switch (type) {
-                        case "header": return "bg-blue-50 border-blue-200";
-                        case "aggregation": return "bg-orange-50 border-orange-200";
-                        case "table": return "bg-green-50 border-green-200";
+                        case "header": return "bg-primary/10 border-primary/20";
+                        case "aggregation": return "bg-amber-50 border-orange-200";
+                        case "table": return "bg-emerald-50 border-emerald-200";
                         case "fields": return "bg-purple-50 border-purple-200";
-                        default: return "bg-gray-50 border-gray-200";
+                        default: return "bg-muted border-border";
                       }
                     };
                     const getRowTypeLabel = (type: CardContentRowConfig["type"]) => {
@@ -4211,9 +4211,9 @@ function ContentRowConfigSection({
   // 행 타입별 색상
   const typeColors = {
     header: "bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800",
-    aggregation: "bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800",
-    table: "bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800",
-    fields: "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800",
+    aggregation: "bg-amber-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800",
+    table: "bg-primary/10 dark:bg-primary/15 border-primary/20 dark:border-primary/30",
+    fields: "bg-emerald-50 dark:bg-emerald-950 border-emerald-200 dark:border-emerald-800",
   };
 
   const typeLabels = {
@@ -4225,9 +4225,9 @@ function ContentRowConfigSection({
 
   const typeBadgeColors = {
     header: "bg-purple-100 text-purple-700",
-    aggregation: "bg-orange-100 text-orange-700",
-    table: "bg-blue-100 text-blue-700",
-    fields: "bg-green-100 text-green-700",
+    aggregation: "bg-amber-100 text-orange-700",
+    table: "bg-primary/10 text-primary",
+    fields: "bg-emerald-100 text-emerald-700",
   };
 
   return (
@@ -4407,7 +4407,7 @@ function ContentRowConfigSection({
             </div>
 
             {aggregations.length === 0 && (
-              <p className="text-[9px] text-orange-600 bg-orange-100 dark:bg-orange-900 p-2 rounded">
+              <p className="text-[9px] text-amber-600 bg-amber-100 dark:bg-orange-900 p-2 rounded">
                 먼저 그룹 탭에서 집계 설정을 추가하세요
               </p>
             )}
@@ -4551,7 +4551,7 @@ function ContentRowConfigSection({
           </div>
 
           {/* 외부 테이블 데이터 소스 설정 */}
-          <div className="space-y-2 p-2 bg-blue-100/50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+          <div className="space-y-2 p-2 bg-primary/10/50 dark:bg-primary/20/20 rounded border border-primary/20 dark:border-primary/30">
             <div className="flex items-center gap-2">
               <Switch
                 checked={row.tableDataSource?.enabled || false}
@@ -4990,7 +4990,7 @@ function ContentRowConfigSection({
           </div>
 
           {/* CRUD 설정 */}
-          <div className="space-y-2 p-2 bg-green-100/50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
+          <div className="space-y-2 p-2 bg-emerald-100/50 dark:bg-emerald-900/20 rounded border border-emerald-200 dark:border-emerald-800">
             <Label className="text-[9px] font-semibold">CRUD 설정</Label>
             <div className="flex flex-wrap gap-3">
               <div className="flex items-center gap-1">
@@ -5062,7 +5062,7 @@ function ContentRowConfigSection({
           )}
 
           {/* 테이블 컬럼 목록 */}
-          <div className="space-y-2 pl-2 border-l-2 border-blue-300">
+          <div className="space-y-2 pl-2 border-l-2 border-primary/40">
             <div className="flex items-center justify-between">
               <Label className="text-[9px] font-semibold">테이블 컬럼 ({(row.tableColumns || []).length}개)</Label>
               <Button size="sm" variant="outline" onClick={onAddTableColumn} className="h-5 text-[9px] px-1">
@@ -5367,8 +5367,8 @@ function ColumnConfigSection({
 
       {/* 데이터 소스 설정 */}
       {col.type !== "aggregation" && (
-        <div className="space-y-1.5 p-1.5 bg-blue-50 dark:bg-blue-950 rounded border border-blue-200 dark:border-blue-800">
-          <Label className="text-[9px] font-semibold text-blue-600">소스</Label>
+        <div className="space-y-1.5 p-1.5 bg-primary/10 dark:bg-primary/15 rounded border border-primary/20 dark:border-primary/30">
+          <Label className="text-[9px] font-semibold text-primary">소스</Label>
           <Select
             value={col.sourceConfig?.type || "manual"}
             onValueChange={(value) =>
@@ -5451,8 +5451,8 @@ function ColumnConfigSection({
       )}
 
       {/* 데이터 타겟 설정 */}
-      <div className="space-y-1.5 p-1.5 bg-green-50 dark:bg-green-950 rounded border border-green-200 dark:border-green-800">
-        <Label className="text-[9px] font-semibold text-green-600">저장</Label>
+      <div className="space-y-1.5 p-1.5 bg-emerald-50 dark:bg-emerald-950 rounded border border-emerald-200 dark:border-emerald-800">
+        <Label className="text-[9px] font-semibold text-emerald-600">저장</Label>
 
         <Select
           value={col.targetConfig?.targetTable || ""}
@@ -5696,8 +5696,8 @@ function TableColumnConfigSection({
 
       {/* 편집 가능할 때 저장 설정 */}
       {col.editable && (
-        <div className="space-y-1.5 p-1.5 bg-green-50 dark:bg-green-950 rounded border border-green-200 dark:border-green-800">
-          <Label className="text-[9px] font-semibold text-green-600">저장</Label>
+        <div className="space-y-1.5 p-1.5 bg-emerald-50 dark:bg-emerald-950 rounded border border-emerald-200 dark:border-emerald-800">
+          <Label className="text-[9px] font-semibold text-emerald-600">저장</Label>
 
           <Select
             value={col.targetConfig?.targetTable || ""}
diff --git a/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
index 51be5a64..2c39ab3d 100644
--- a/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
+++ b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
@@ -139,8 +139,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
           {/* 선택 요약 표시 */}
           {selectedItem && summaryText && (
             <div className="flex items-center gap-1 text-xs">
-              <Check className="h-3 w-3 text-green-600" />
-              <span className="text-green-700">{summaryText}</span>
+              <Check className="h-3 w-3 text-emerald-600" />
+              <span className="text-emerald-700">{summaryText}</span>
             </div>
           )}
         </div>
@@ -148,12 +148,12 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
         {/* 확장된 패널 */}
         {isExpanded && (
           <div
-            className="mt-2 rounded-md border bg-gray-50"
+            className="mt-2 rounded-md border bg-muted"
             style={{ maxHeight: config.ui?.maxHeight || "150px", overflowY: "auto" }}
           >
             {/* 에러 상태 */}
             {error && (
-              <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+              <div className="flex items-center gap-2 p-3 text-xs text-destructive">
                 <AlertCircle className="h-4 w-4" />
                 <span>{error}</span>
                 <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
@@ -164,7 +164,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
             {/* 로딩 상태 */}
             {isLoading && (
-              <div className="flex items-center justify-center gap-2 p-4 text-xs text-gray-500">
+              <div className="flex items-center justify-center gap-2 p-4 text-xs text-muted-foreground">
                 <Loader2 className="h-4 w-4 animate-spin" />
                 <span>조회 중...</span>
               </div>
@@ -172,7 +172,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
             {/* 데이터 없음 */}
             {!isLoading && !error && data.length === 0 && (
-              <div className="p-4 text-center text-xs text-gray-500">
+              <div className="p-4 text-center text-xs text-muted-foreground">
                 {config.ui?.emptyMessage || "재고 데이터가 없습니다"}
               </div>
             )}
@@ -180,7 +180,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
             {/* 데이터 테이블 */}
             {!isLoading && !error && data.length > 0 && (
               <table className="w-full text-xs">
-                <thead className="sticky top-0 bg-gray-100">
+                <thead className="sticky top-0 bg-muted">
                   <tr>
                     <th className="w-8 p-2 text-center">선택</th>
                     {displayColumns.map((col) => (
@@ -199,7 +199,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                         onClick={() => handleSelect(item)}
                         className={cn(
                           "cursor-pointer border-t transition-colors",
-                          isSelected ? "bg-blue-50" : "hover:bg-gray-100",
+                          isSelected ? "bg-primary/10" : "hover:bg-muted",
                           disabled && "cursor-not-allowed opacity-50",
                         )}
                       >
@@ -207,7 +207,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                           <div
                             className={cn(
                               "mx-auto flex h-4 w-4 items-center justify-center rounded-full border",
-                              isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                              isSelected ? "border-primary bg-primary" : "border-input",
                             )}
                           >
                             {isSelected && <Check className="h-3 w-3 text-white" />}
@@ -267,8 +267,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
           {/* 선택 요약 표시 */}
           {selectedItem && summaryText && (
             <div className="flex items-center gap-1 text-xs">
-              <Check className="h-3 w-3 text-green-600" />
-              <span className="text-green-700">{summaryText}</span>
+              <Check className="h-3 w-3 text-emerald-600" />
+              <span className="text-emerald-700">{summaryText}</span>
             </div>
           )}
         </div>
@@ -296,7 +296,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
             >
               {/* 에러 상태 */}
               {error && (
-                <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+                <div className="flex items-center gap-2 p-3 text-xs text-destructive">
                   <AlertCircle className="h-4 w-4" />
                   <span>{error}</span>
                   <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
@@ -307,7 +307,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
               {/* 로딩 상태 */}
               {isLoading && (
-                <div className="flex items-center justify-center gap-2 p-8 text-sm text-gray-500">
+                <div className="flex items-center justify-center gap-2 p-8 text-sm text-muted-foreground">
                   <Loader2 className="h-5 w-5 animate-spin" />
                   <span>재고 조회 중...</span>
                 </div>
@@ -315,7 +315,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
               {/* 데이터 없음 */}
               {!isLoading && !error && data.length === 0 && (
-                <div className="p-8 text-center text-sm text-gray-500">
+                <div className="p-8 text-center text-sm text-muted-foreground">
                   {config.ui?.emptyMessage || "해당 품목의 재고가 없습니다"}
                 </div>
               )}
@@ -323,7 +323,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
               {/* 데이터 테이블 */}
               {!isLoading && !error && data.length > 0 && (
                 <table className="w-full text-sm">
-                  <thead className="sticky top-0 bg-gray-100">
+                  <thead className="sticky top-0 bg-muted">
                     <tr>
                       <th className="w-12 p-3 text-center">선택</th>
                       {displayColumns.map((col) => (
@@ -342,7 +342,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                           onClick={() => handleSelect(item)}
                           className={cn(
                             "cursor-pointer border-t transition-colors",
-                            isSelected ? "bg-blue-50" : "hover:bg-gray-50",
+                            isSelected ? "bg-primary/10" : "hover:bg-muted",
                             disabled && "cursor-not-allowed opacity-50",
                           )}
                         >
@@ -350,7 +350,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                             <div
                               className={cn(
                                 "mx-auto flex h-5 w-5 items-center justify-center rounded-full border-2",
-                                isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                                isSelected ? "border-primary bg-primary" : "border-input",
                               )}
                             >
                               {isSelected && <Check className="h-3 w-3 text-white" />}
@@ -422,8 +422,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
         </Button>
         {selectedItem && summaryText && (
           <div className="flex items-center gap-1 text-xs">
-            <Check className="h-3 w-3 text-green-600" />
-            <span className="text-green-700">{summaryText}</span>
+            <Check className="h-3 w-3 text-emerald-600" />
+            <span className="text-emerald-700">{summaryText}</span>
           </div>
         )}
       </div>
diff --git a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
index 0c167ab5..819b7376 100644
--- a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
+++ b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
@@ -473,7 +473,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                                   />
                                   <div className="flex flex-col">
                                     <span className="font-medium">{screen.screenName}</span>
-                                    <span className="text-[10px] text-gray-500">{screen.screenCode}</span>
+                                    <span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
                                   </div>
                                 </CommandItem>
                               ))}
@@ -534,7 +534,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                                   />
                                   <div className="flex flex-col">
                                     <span className="font-medium">{screen.screenName}</span>
-                                    <span className="text-[10px] text-gray-500">{screen.screenCode}</span>
+                                    <span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
                                   </div>
                                 </CommandItem>
                               ))}
@@ -591,33 +591,33 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
               ) : (
                 <>
                   {/* 연결 필터 설명 */}
-                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
-                    <p className="text-xs text-blue-800 dark:text-blue-200">
+                  <div className="rounded-lg border border-primary/20 bg-primary/10 p-3 dark:border-primary/20 dark:bg-primary/15">
+                    <p className="text-xs text-primary dark:text-primary/70">
                       예: 좌측에서 설비를 선택하면 → 우측 점검항목이 해당 설비의 항목만 표시됩니다.
                       <br />
-                      좌측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code> → 
-                      우측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code>
+                      좌측 <code className="bg-primary/10 dark:bg-primary/20 px-1 rounded">equipment_code</code> → 
+                      우측 <code className="bg-primary/10 dark:bg-primary/20 px-1 rounded">equipment_code</code>
                     </p>
                   </div>
 
                   {/* 필터 목록 */}
                   <div className="space-y-3">
                     {(localConfig.linkedFilters || []).map((filter: LinkedFilter, index: number) => (
-                      <div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
+                      <div key={index} className="rounded-lg border bg-muted p-3 dark:bg-foreground">
                         <div className="mb-2 flex items-center justify-between">
-                          <span className="text-xs font-medium text-gray-700">필터 #{index + 1}</span>
+                          <span className="text-xs font-medium text-foreground">필터 #{index + 1}</span>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => removeLinkedFilter(index)}
-                            className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                            className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
                         </div>
                         <div className="space-y-2">
                           <div>
-                            <Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
+                            <Label className="text-xs text-muted-foreground">소스 컬럼 (좌측 화면)</Label>
                             <Select
                               value={filter.sourceColumn}
                               onValueChange={(value) => updateLinkedFilter(index, "sourceColumn", value)}
@@ -635,10 +635,10 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                             </Select>
                           </div>
                           <div className="flex justify-center">
-                            <ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
+                            <ArrowRight className="h-4 w-4 rotate-90 text-muted-foreground/70" />
                           </div>
                           <div>
-                            <Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면 필터)</Label>
+                            <Label className="text-xs text-muted-foreground">타겟 컬럼 (우측 화면 필터)</Label>
                             <Select
                               value={filter.targetColumn}
                               onValueChange={(value) => updateLinkedFilter(index, "targetColumn", value)}
@@ -649,7 +649,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                               <SelectContent>
                                 {rightScreenTables.map((table) => (
                                   <React.Fragment key={table.tableName}>
-                                    <div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
+                                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted dark:bg-foreground/90">
                                       {table.screenName} ({table.tableName})
                                     </div>
                                     {table.columns.map((col) => (
@@ -726,13 +726,13 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
               ) : (
                 <>
                   {/* 우측 화면 테이블 목록 표시 */}
-                  <div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
-                    <p className="text-xs font-medium text-green-800 dark:text-green-200 mb-1">
+                  <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900 dark:bg-emerald-950">
+                    <p className="text-xs font-medium text-emerald-800 dark:text-emerald-200 mb-1">
                       우측 화면에서 감지된 테이블 ({rightScreenTables.length}개):
                     </p>
-                    <ul className="text-xs text-green-700 dark:text-green-300 space-y-0.5">
+                    <ul className="text-xs text-emerald-700 dark:text-emerald-300 space-y-0.5">
                       {rightScreenTables.map((table) => (
-                        <li key={table.tableName}>• {table.screenName}: <code className="bg-green-100 dark:bg-green-900 px-1 rounded">{table.tableName}</code></li>
+                        <li key={table.tableName}>• {table.screenName}: <code className="bg-emerald-100 dark:bg-emerald-900 px-1 rounded">{table.tableName}</code></li>
                       ))}
                     </ul>
                   </div>
@@ -740,21 +740,21 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                   {/* 매핑 목록 */}
                   <div className="space-y-3">
                     {(localConfig.parentDataMapping || []).map((mapping: ParentDataMapping, index: number) => (
-                      <div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
+                      <div key={index} className="rounded-lg border bg-muted p-3 dark:bg-foreground">
                         <div className="mb-2 flex items-center justify-between">
-                          <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                          <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => removeParentDataMapping(index)}
-                            className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                            className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
                         </div>
                         <div className="space-y-2">
                           <div>
-                            <Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
+                            <Label className="text-xs text-muted-foreground">소스 컬럼 (좌측 화면)</Label>
                             <Select
                               value={mapping.sourceColumn}
                               onValueChange={(value) => updateParentDataMapping(index, "sourceColumn", value)}
@@ -772,10 +772,10 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                             </Select>
                           </div>
                           <div className="flex justify-center">
-                            <ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
+                            <ArrowRight className="h-4 w-4 rotate-90 text-muted-foreground/70" />
                           </div>
                           <div>
-                            <Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면)</Label>
+                            <Label className="text-xs text-muted-foreground">타겟 컬럼 (우측 화면)</Label>
                             <Select
                               value={mapping.targetColumn}
                               onValueChange={(value) => updateParentDataMapping(index, "targetColumn", value)}
@@ -786,7 +786,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                               <SelectContent>
                                 {rightScreenTables.map((table) => (
                                   <React.Fragment key={table.tableName}>
-                                    <div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
+                                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted dark:bg-foreground/90">
                                       {table.screenName} ({table.tableName})
                                     </div>
                                     {table.columns.map((col) => (
@@ -820,8 +820,8 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                   </Button>
 
                   {/* 자동 매핑 안내 */}
-                  <div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
-                    <p className="text-xs text-green-800 dark:text-green-200">
+                  <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900 dark:bg-emerald-950">
+                    <p className="text-xs text-emerald-800 dark:text-emerald-200">
                       <strong>자동 매핑:</strong> 좌측에서 선택한 데이터의 모든 컬럼이 우측 화면에 자동 전달됩니다.
                       <br />
                       동일한 컬럼명(예: equipment_code)이 있으면 별도 설정 없이 자동으로 매핑됩니다.
@@ -829,13 +829,13 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                   </div>
 
                   {/* 수동 매핑 안내 */}
-                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
-                    <p className="text-xs text-blue-800 dark:text-blue-200">
+                  <div className="rounded-lg border border-primary/20 bg-primary/10 p-3 dark:border-primary/20 dark:bg-primary/15">
+                    <p className="text-xs text-primary dark:text-primary/70">
                       <strong>수동 매핑 (선택사항):</strong>
                       <br />
                       컬럼명이 다른 경우에만 위에서 매핑을 추가하세요.
                       <br />
-                      예: 좌측 <code className="bg-blue-100 px-1 rounded">user_id</code> → 우측 <code className="bg-blue-100 px-1 rounded">created_by</code>
+                      예: 좌측 <code className="bg-primary/10 px-1 rounded">user_id</code> → 우측 <code className="bg-primary/10 px-1 rounded">created_by</code>
                     </p>
                   </div>
                 </>
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index 53a6416b..1e21f830 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -537,28 +537,28 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             onFocus={() => setIsOpen(true)}
             placeholder="코드 또는 코드명 입력..."
             className={cn(
-              "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
+              "h-10 w-full rounded-lg border border-input bg-white px-3 py-2 transition-all outline-none",
               !isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             readOnly={isFieldDisabled}
             disabled={isFieldDisabled}
           />
           {isOpen && !isFieldDisabled && filteredOptions.length > 0 && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
-                  className="cursor-pointer bg-white px-3 py-2 hover:bg-gray-100"
+                  className="cursor-pointer bg-white px-3 py-2 hover:bg-muted"
                   onClick={() => {
                     setSearchQuery("");
                     handleOptionSelect(option.value, option.label);
                   }}
                 >
                   <div className="flex items-center justify-between">
-                    <span className="text-sm font-medium text-gray-900">{option.label}</span>
-                    <span className="text-xs text-gray-500">{option.value}</span>
+                    <span className="text-sm font-medium text-foreground">{option.label}</span>
+                    <span className="text-xs text-muted-foreground">{option.value}</span>
                   </div>
                 </div>
               ))}
@@ -574,16 +574,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full">
           <div
             className={cn(
-              "flex h-10 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "flex h-10 w-full items-center justify-between rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "cursor-pointer hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
               isOpen && "border-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             onClick={handleToggle}
             style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
           >
-            <span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>
+            <span className={selectedLabel ? "text-foreground" : "text-muted-foreground"}>{selectedLabel || placeholder}</span>
             <svg
               className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
               fill="none"
@@ -594,21 +594,21 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             </svg>
           </div>
           {isOpen && !isFieldDisabled && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {isLoadingCodes ? (
-                <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
+                <div className="bg-white px-3 py-2 text-foreground">로딩 중...</div>
               ) : allOptions.length > 0 ? (
                 allOptions.map((option, index) => (
                   <div
                     key={`${option.value}-${index}`}
-                    className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                    className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                     onClick={() => handleOptionSelect(option.value, option.label)}
                   >
                     {option.label}
                   </div>
                 ))
               ) : (
-                <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
+                <div className="bg-white px-3 py-2 text-foreground">옵션이 없습니다</div>
               )}
             </div>
           )}
@@ -622,16 +622,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full">
           <div
             className={cn(
-              "box-border flex h-full w-full flex-wrap gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "box-border flex h-full w-full flex-wrap gap-2 rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
           >
             {selectedValues.map((val, idx) => {
               const opt = allOptions.find((o) => o.value === val);
               return (
-                <span key={idx} className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800">
+                <span key={idx} className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary">
                   {opt?.label || val}
                   <button
                     type="button"
@@ -642,7 +642,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                         onFormDataChange(component.columnName, newVals.join(","));
                       }
                     }}
-                    className="ml-1 text-blue-600 hover:text-blue-800"
+                    className="ml-1 text-primary hover:text-primary"
                   >
                     ×
                   </button>
@@ -683,20 +683,20 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             onFocus={() => !isFieldDisabled && setIsOpen(true)}
             placeholder={placeholder}
             className={cn(
-              "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
+              "h-10 w-full rounded-lg border border-input bg-white px-3 py-2 transition-all outline-none",
               !isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             readOnly={isFieldDisabled}
             disabled={isFieldDisabled}
           />
           {isOpen && !isFieldDisabled && filteredOptions.length > 0 && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
-                  className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                  className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                   onClick={() => {
                     setSearchQuery(option.label);
                     setSelectedValue(option.value);
@@ -722,16 +722,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full">
           <div
             className={cn(
-              "flex h-10 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "flex h-10 w-full items-center justify-between rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "cursor-pointer hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
               isOpen && "border-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             onClick={handleToggle}
             style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
           >
-            <span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>
+            <span className={selectedLabel ? "text-foreground" : "text-muted-foreground"}>{selectedLabel || placeholder}</span>
             <svg
               className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
               fill="none"
@@ -742,13 +742,13 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             </svg>
           </div>
           {isOpen && !isFieldDisabled && (
-            <div className="absolute z-[99999] mt-1 w-full rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 w-full rounded-md border border-input bg-white shadow-lg">
               <input
                 type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="검색..."
-                className="w-full border-b border-gray-300 px-3 py-2 outline-none"
+                className="w-full border-b border-input px-3 py-2 outline-none"
               />
               <div className="max-h-60 overflow-auto">
                 {allOptions
@@ -760,7 +760,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   .map((option, index) => (
                     <div
                       key={`${option.value}-${index}`}
-                      className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                      className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                       onClick={() => handleOptionSelect(option.value, option.label)}
                     >
                       {option.label || option.value}
@@ -780,10 +780,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full" style={{ height: "100%" }}>
           <div
             className={cn(
-              "box-border flex w-full flex-wrap items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "box-border flex w-full flex-wrap items-center gap-2 rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             onClick={() => !isFieldDisabled && setIsOpen(true)}
             style={{
@@ -794,7 +794,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             {selectedValues.map((val, idx) => {
               const opt = allOptions.find((o) => o.value === val);
               return (
-                <span key={idx} className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800">
+                <span key={idx} className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary">
                   {opt?.label || val}
                   <button
                     type="button"
@@ -807,19 +807,19 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                         onFormDataChange(component.columnName, newValue);
                       }
                     }}
-                    className="ml-1 text-blue-600 hover:text-blue-800"
+                    className="ml-1 text-primary hover:text-primary"
                   >
                     ×
                   </button>
                 </span>
               );
             })}
-            {selectedValues.length === 0 && <span className="text-gray-500">{placeholder}</span>}
+            {selectedValues.length === 0 && <span className="text-muted-foreground">{placeholder}</span>}
           </div>
           {isOpen && !isFieldDisabled && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {isLoadingCodes || isLoadingCategories ? (
-                <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
+                <div className="bg-white px-3 py-2 text-foreground">로딩 중...</div>
               ) : allOptions.length > 0 ? (
                 (() => {
                   // 부모별 그룹핑 (카테고리 연쇄관계인 경우)
@@ -840,7 +840,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                     return Object.entries(groupedOptions).map(([parentKey, group]) => (
                       <div key={parentKey}>
                         {/* 그룹 헤더 */}
-                        <div className="sticky top-0 border-b bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600">
+                        <div className="sticky top-0 border-b bg-muted px-3 py-1.5 text-xs font-semibold text-muted-foreground">
                           {group.parentLabel}
                         </div>
                         {/* 그룹 옵션들 */}
@@ -850,8 +850,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                             <div
                               key={`${option.value}-${index}`}
                               className={cn(
-                                "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
-                                isOptionSelected && "bg-blue-50 font-medium",
+                                "cursor-pointer px-3 py-2 text-foreground hover:bg-muted",
+                                isOptionSelected && "bg-primary/10 font-medium",
                               )}
                               onClick={() => {
                                 const newVals = isOptionSelected
@@ -898,8 +898,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                       <div
                         key={`${option.value}-${index}`}
                         className={cn(
-                          "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
-                          isOptionSelected && "bg-blue-50 font-medium",
+                          "cursor-pointer px-3 py-2 text-foreground hover:bg-muted",
+                          isOptionSelected && "bg-primary/10 font-medium",
                         )}
                         onClick={() => {
                           const newVals = isOptionSelected
@@ -937,7 +937,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   });
                 })()
               ) : (
-                <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
+                <div className="bg-white px-3 py-2 text-foreground">옵션이 없습니다</div>
               )}
             </div>
           )}
@@ -950,16 +950,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
       <div className="w-full">
         <div
           className={cn(
-            "flex h-10 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2",
+            "flex h-10 w-full items-center justify-between rounded-lg border border-input bg-white px-3 py-2",
             !isFieldDisabled && "cursor-pointer hover:border-orange-400",
             isSelected && "ring-2 ring-orange-500",
             isOpen && "border-orange-500",
-            isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+            isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
           )}
           onClick={handleToggle}
           style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
         >
-          <span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>
+          <span className={selectedLabel ? "text-foreground" : "text-muted-foreground"}>{selectedLabel || placeholder}</span>
           <svg
             className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
             fill="none"
@@ -970,21 +970,21 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
           </svg>
         </div>
         {isOpen && !isFieldDisabled && (
-          <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+          <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
             {isLoadingCodes ? (
-              <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
+              <div className="bg-white px-3 py-2 text-foreground">로딩 중...</div>
             ) : allOptions.length > 0 ? (
               allOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
-                  className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                  className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                   onClick={() => handleOptionSelect(option.value, option.label)}
                 >
                   {option.label || option.value}
                 </div>
               ))
             ) : (
-              <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
+              <div className="bg-white px-3 py-2 text-foreground">옵션이 없습니다</div>
             )}
           </div>
         )}
@@ -1006,7 +1006,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
       {component.label && (component.style?.labelDisplay ?? true) && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx b/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx
index fba788f3..fdb9576b 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx
@@ -385,7 +385,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
               <div className="bg-background space-y-1 rounded-md p-2 text-xs">
                 {config.cascadingRole === "parent" ? (
                   <>
-                    <div className="font-medium text-blue-600">부모 역할 (상위 선택)</div>
+                    <div className="font-medium text-primary">부모 역할 (상위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.parent_table}</span>
@@ -397,7 +397,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
                   </>
                 ) : (
                   <>
-                    <div className="font-medium text-green-600">자식 역할 (하위 선택)</div>
+                    <div className="font-medium text-emerald-600">자식 역할 (하위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.child_table}</span>
@@ -581,7 +581,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
           </svg>
           <Label className="text-sm font-medium">계층구조 코드 설정</Label>
         </div>
-        <div className="rounded border border-blue-200 bg-blue-50 p-2 text-xs text-blue-800">
+        <div className="rounded border border-primary/20 bg-primary/10 p-2 text-xs text-primary">
           공통코드에 계층구조(depth 2 이상)가 있으면 자동으로 대분류 → 중분류 → 소분류 셀렉트박스로 표시됩니다.
         </div>
 
@@ -591,7 +591,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
 
           {/* 코드 카테고리 선택 안내 */}
           {!config.codeCategory && (
-            <div className="rounded border border-yellow-200 bg-yellow-50 p-2 text-xs text-yellow-800">
+            <div className="rounded border border-amber-200 bg-amber-50 p-2 text-xs text-yellow-800">
               먼저 상단에서 코드 카테고리를 선택해주세요.
             </div>
           )}
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
index ff94b8dc..96cc2ea1 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
@@ -1764,7 +1764,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     <span>
                       {idx}. {sampleDisplayCols.length > 0 ? `샘플 ${sampleDisplayCols[0]?.label || "품목"} ${idx}` : `샘플 항목 ${idx}`}
                     </span>
-                    <Button type="button" variant="ghost" size="sm" className="h-6 w-6 p-0 text-red-400" disabled>
+                    <Button type="button" variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive/80" disabled>
                       <X className="h-3 w-3" />
                     </Button>
                   </CardTitle>
@@ -1821,14 +1821,14 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                                   <span className="truncate">
                                     1. {groupFields.slice(0, 2).map(f => `${f.label}: 샘플`).join(" / ")}
                                   </span>
-                                  <X className="h-2.5 w-2.5 shrink-0 text-gray-400" />
+                                  <X className="h-2.5 w-2.5 shrink-0 text-muted-foreground/70" />
                                 </div>
                                 {idx === 1 && (
                                   <div className="bg-muted/30 flex items-center justify-between rounded border p-1.5 text-[10px]">
                                     <span className="truncate">
                                       2. {groupFields.slice(0, 2).map(f => `${f.label}: 샘플`).join(" / ")}
                                     </span>
-                                    <X className="h-2.5 w-2.5 shrink-0 text-gray-400" />
+                                    <X className="h-2.5 w-2.5 shrink-0 text-muted-foreground/70" />
                                   </div>
                                 )}
                               </>
@@ -2044,7 +2044,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     variant="ghost"
                     size="sm"
                     onClick={() => handleRemoveItem(item.id)}
-                    className="h-7 w-7 p-0 text-red-500"
+                    className="h-7 w-7 p-0 text-destructive"
                   >
                     <X className="h-4 w-4" />
                   </Button>
@@ -2216,7 +2216,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                           const newDetailId = `detail-${Date.now()}`;
                           setEditingDetailId(newDetailId);
                         }}
-                        className="h-7 text-xs text-orange-600"
+                        className="h-7 text-xs text-amber-600"
                       >
                         추가 입력
                       </Button>
@@ -2226,7 +2226,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                           variant="ghost"
                           size="icon"
                           onClick={() => handleRemoveItem(item.id)}
-                          className="h-7 w-7 text-red-500"
+                          className="h-7 w-7 text-destructive"
                         >
                           <X className="h-3 w-3" />
                         </Button>
@@ -2293,7 +2293,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                               variant="ghost"
                               size="sm"
                               onClick={() => handleRemoveDetail(item.id, detail.id)}
-                              className="h-6 w-6 p-0 text-red-500"
+                              className="h-6 w-6 p-0 text-destructive"
                             >
                               X
                             </Button>
@@ -2566,7 +2566,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                         setIsEditing(true);
                         setEditingItemId(item.id);
                       }}
-                      className="h-7 text-xs text-orange-600"
+                      className="h-7 text-xs text-amber-600"
                     >
                       수정
                     </Button>
@@ -2632,7 +2632,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                               variant="ghost"
                               size="sm"
                               onClick={() => handleRemoveDetail(item.id, detail.id)}
-                              className="h-6 w-6 p-0 text-red-500"
+                              className="h-6 w-6 p-0 text-destructive"
                             >
                               X
                             </Button>
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
index 1f70e7e0..ee7c07d3 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
@@ -859,7 +859,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
         <p className="text-[10px] text-primary font-medium sm:text-xs">
           ✨ URL 파라미터에서 자동으로 가져옵니다 (Button이 전달)
         </p>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           테스트용으로 직접 입력하려면 테이블명을 입력하세요
         </p>
       </div>
@@ -913,7 +913,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             </Command>
           </PopoverContent>
         </Popover>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           이전 화면에서 전달받은 데이터의 원본 테이블 (예: item_info)
         </p>
       </div>
@@ -972,13 +972,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             </Command>
           </PopoverContent>
         </Popover>
-        <p className="text-[10px] text-gray-500 sm:text-xs">최종 데이터를 저장할 테이블</p>
+        <p className="text-[10px] text-muted-foreground sm:text-xs">최종 데이터를 저장할 테이블</p>
       </div>
 
       {/* FK 자동 감지 결과 표시 */}
       {autoDetectedFks.length > 0 && (
-        <div className="rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950">
-          <p className="mb-2 text-xs font-medium text-blue-700 dark:text-blue-300">
+        <div className="rounded-md border border-primary/20 bg-primary/10 p-3 dark:border-primary/30 dark:bg-primary/15">
+          <p className="mb-2 text-xs font-medium text-primary dark:text-primary/80">
             FK 자동 감지됨 ({autoDetectedFks.length}건)
           </p>
           <div className="space-y-1">
@@ -987,10 +987,10 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <span className={cn(
                   "rounded px-1.5 py-0.5 font-mono text-[9px]",
                   fk.mappingType === "source" 
-                    ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300" 
+                    ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300" 
                     : fk.mappingType === "parent"
-                    ? "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300"
-                    : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                    ? "bg-amber-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300"
+                    : "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70"
                 )}>
                   {fk.mappingType === "source" ? "원본" : fk.mappingType === "parent" ? "부모" : "미분류"}
                 </span>
@@ -1000,7 +1000,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               </div>
             ))}
           </div>
-          <p className="mt-2 text-[9px] text-blue-600 dark:text-blue-400">
+          <p className="mt-2 text-[9px] text-primary dark:text-primary/80">
             엔티티 설정 기반 자동 매핑. sourceKeyField와 parentDataMapping이 자동으로 설정됩니다.
           </p>
         </div>
@@ -1018,7 +1018,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 variant="ghost"
                 size="icon"
                 onClick={() => removeDisplayColumn(col.name)}
-                className="h-6 w-6 text-red-500 hover:bg-red-50 sm:h-7 sm:w-7"
+                className="h-6 w-6 text-destructive hover:bg-destructive/10 sm:h-7 sm:w-7"
               >
                 <X className="h-3 w-3 sm:h-4 sm:w-4" />
               </Button>
@@ -1051,7 +1051,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                     >
                       <div>
                         <div className="font-medium">{column.columnLabel || column.columnName}</div>
-                        {column.dataType && <div className="text-[10px] text-gray-500">{column.dataType}</div>}
+                        {column.dataType && <div className="text-[10px] text-muted-foreground">{column.dataType}</div>}
                       </div>
                     </CommandItem>
                   ))}
@@ -1060,7 +1060,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             </PopoverContent>
           </Popover>
         </div>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           전달받은 원본 데이터 중 화면에 표시할 컬럼 (예: 품목코드, 품목명)
         </p>
       </div>
@@ -1074,13 +1074,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
           <Card key={index} className="border-2">
             <CardContent className="space-y-2 pt-3 sm:space-y-3 sm:pt-4">
               <div className="flex items-center justify-between">
-                <span className="text-xs font-semibold text-gray-700 sm:text-sm">필드 {index + 1}</span>
+                <span className="text-xs font-semibold text-foreground sm:text-sm">필드 {index + 1}</span>
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
                   onClick={() => removeField(index)}
-                  className="h-5 w-5 text-red-500 hover:bg-red-50 sm:h-6 sm:w-6"
+                  className="h-5 w-5 text-destructive hover:bg-destructive/10 sm:h-6 sm:w-6"
                 >
                   <X className="h-2 w-2 sm:h-3 sm:w-3" />
                 </Button>
@@ -1131,7 +1131,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                               />
                               <div>
                                 <div className="font-medium">{column.columnLabel}</div>
-                                <div className="text-[9px] text-gray-500">{column.columnName}</div>
+                                <div className="text-[9px] text-muted-foreground">{column.columnName}</div>
                               </div>
                             </CommandItem>
                           ))}
@@ -1241,7 +1241,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                     </Command>
                   </PopoverContent>
                 </Popover>
-                <p className="text-[9px] text-gray-500 sm:text-[10px]">
+                <p className="text-[9px] text-muted-foreground sm:text-[10px]">
                   다른 테이블에서 가져올 경우 테이블 선택
                 </p>
                 
@@ -1308,7 +1308,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                               />
                               <div>
                                 <div className="font-medium">{column.columnLabel || column.columnName}</div>
-                                {column.dataType && <div className="text-[8px] text-gray-500">{column.dataType}</div>}
+                                {column.dataType && <div className="text-[8px] text-muted-foreground">{column.dataType}</div>}
                               </div>
                             </CommandItem>
                           ));
@@ -1346,7 +1346,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                       ))}
                     </SelectContent>
                   </Select>
-                  <p className="text-[9px] text-gray-500 sm:text-[10px]">
+                  <p className="text-[9px] text-muted-foreground sm:text-[10px]">
                     같은 그룹 ID를 가진 필드들은 같은 카드에 표시됩니다
                   </p>
                 </div>
@@ -1382,7 +1382,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
       {/* 🆕 필드 그룹 관리 */}
       <div className="space-y-2">
         <Label className="text-xs font-semibold sm:text-sm">필드 그룹 설정</Label>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           추가 입력 필드를 여러 카드로 나눠서 표시 (예: 거래처 정보, 단가 정보)
         </p>
 
@@ -1417,7 +1417,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                     variant="ghost"
                     size="icon"
                     onClick={() => removeFieldGroup(group.id)}
-                    className="h-6 w-6 text-red-500 hover:text-red-700 sm:h-7 sm:w-7"
+                    className="h-6 w-6 text-destructive hover:text-destructive sm:h-7 sm:w-7"
                   >
                     <X className="h-3 w-3 sm:h-4 sm:w-4" />
                   </Button>
@@ -2507,10 +2507,10 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               (fk) => fk.mappingType === "parent" && fk.columnName === mapping.targetField
             );
             return (
-            <Card key={index} className={cn("p-3", isAutoDetected && "border-orange-200 bg-orange-50/30 dark:border-orange-800 dark:bg-orange-950/30")}>
+            <Card key={index} className={cn("p-3", isAutoDetected && "border-orange-200 bg-amber-50/30 dark:border-orange-800 dark:bg-orange-950/30")}>
               <div className="space-y-2">
                 {isAutoDetected && (
-                  <span className="inline-block rounded bg-orange-100 px-1.5 py-0.5 text-[9px] font-medium text-orange-700 dark:bg-orange-900 dark:text-orange-300">
+                  <span className="inline-block rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-orange-700 dark:bg-orange-900 dark:text-orange-300">
                     FK 자동 감지
                   </span>
                 )}
@@ -2762,9 +2762,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
       </div>
 
       {/* 사용 예시 */}
-      <div className="rounded-lg bg-blue-50 p-2 text-xs sm:p-3 sm:text-sm">
-        <p className="mb-1 font-medium text-blue-900">💡 사용 예시</p>
-        <ul className="space-y-1 text-[10px] text-blue-700 sm:text-xs">
+      <div className="rounded-lg bg-primary/10 p-2 text-xs sm:p-3 sm:text-sm">
+        <p className="mb-1 font-medium text-primary">💡 사용 예시</p>
+        <ul className="space-y-1 text-[10px] text-primary sm:text-xs">
           <li>• 품목 선택 모달 → 다음 버튼 → 거래처별 가격 입력</li>
           <li>• 사용자 선택 모달 → 다음 버튼 → 권한 및 부서 할당</li>
           <li>• 제품 선택 모달 → 다음 버튼 → 수량 및 납기일 입력</li>
diff --git a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx
index 4ef47e39..f51fe313 100644
--- a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx
+++ b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx
@@ -722,7 +722,7 @@ export function SimpleRepeaterTableConfigPanel({
               )}
             </div>
 
-            <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+            <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
               <p className="text-xs font-medium mb-1">사용 예시</p>
               <div className="space-y-1 text-[10px] text-muted-foreground">
                 <p>• 수주관리 리스트에서 클릭한 수주번호(order_no)를 기준으로 데이터 로드</p>
@@ -912,8 +912,8 @@ export function SimpleRepeaterTableConfigPanel({
                 {/* 🆕 데이터 소스 설정 (어디서 조회할지) */}
                 <div className="space-y-3 border-t pt-4">
                   <div className="flex items-center gap-2">
-                    <div className="h-1 w-1 rounded-full bg-blue-500"></div>
-                    <Label className="text-xs font-semibold text-blue-600">데이터 소스 설정 (어디서 조회?)</Label>
+                    <div className="h-1 w-1 rounded-full bg-primary"></div>
+                    <Label className="text-xs font-semibold text-primary">데이터 소스 설정 (어디서 조회?)</Label>
                   </div>
 
                   <div className="space-y-2">
@@ -944,7 +944,7 @@ export function SimpleRepeaterTableConfigPanel({
                   </div>
 
                   {col.sourceConfig?.type === "direct" && (
-                    <div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md">
+                    <div className="space-y-3 p-3 bg-primary/10 dark:bg-primary/15 rounded-md">
                       <p className="text-xs font-medium">직접 조회 설정</p>
 
                       <div className="space-y-2">
@@ -1091,11 +1091,11 @@ export function SimpleRepeaterTableConfigPanel({
                 {localConfig.parentChildConfig?.enabled ? (
                   // 부모-자식 모드: 간단한 안내만 표시
                   <div className="border-t pt-4">
-                    <div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                    <div className="p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
                       <p className="text-xs text-muted-foreground">
-                        <strong className="text-green-700 dark:text-green-400">부모-자식 모드</strong>
+                        <strong className="text-emerald-700 dark:text-emerald-400">부모-자식 모드</strong>
                         <br />
-                        → <code className="bg-green-100 dark:bg-green-900 px-1 rounded">{localConfig.parentChildConfig.childTable || "자식 테이블"}.{col.field || "필드명"}</code> 에 저장
+                        → <code className="bg-emerald-100 dark:bg-emerald-900 px-1 rounded">{localConfig.parentChildConfig.childTable || "자식 테이블"}.{col.field || "필드명"}</code> 에 저장
                       </p>
                     </div>
                   </div>
@@ -1103,7 +1103,7 @@ export function SimpleRepeaterTableConfigPanel({
                   // 일반 모드: 타겟 설정 (선택사항)
                   <div className="space-y-3 border-t pt-4">
                     <div className="flex items-center gap-2">
-                      <div className="h-1 w-1 rounded-full bg-gray-400"></div>
+                      <div className="h-1 w-1 rounded-full bg-muted-foreground"></div>
                       <Label className="text-xs font-semibold text-muted-foreground">저장 설정 (선택사항)</Label>
                     </div>
 
@@ -1654,7 +1654,7 @@ export function SimpleRepeaterTableConfigPanel({
               )}
             </div>
 
-            <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+            <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
               <p className="text-xs font-medium mb-1">사용 예시</p>
               <div className="space-y-1 text-[10px] text-muted-foreground">
                 <p>• 공급가액 합계: supply_amount 필드의 SUM</p>
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index 6de3e3d9..8b670bd2 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -2527,21 +2527,21 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 {isDesignMode ? (
                   // 디자인 모드: 샘플 테이블
                   <div className="overflow-auto">
-                    <table className="min-w-full divide-y divide-gray-200">
-                      <thead className="bg-gray-50">
+                    <table className="min-w-full divide-y divide-border">
+                      <thead className="bg-muted">
                         <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 1</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 2</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 3</th>
                         </tr>
                       </thead>
-                      <tbody className="divide-y divide-gray-200 bg-white">
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                      <tbody className="divide-y divide-border bg-white">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-3</td>
                         </tr>
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-3</td>
@@ -2607,16 +2607,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         <div className="overflow-auto">
                           {groupedLeftData.map((group, groupIdx) => (
                             <div key={groupIdx} className="mb-4">
-                              <div className="bg-gray-100 px-3 py-2 text-sm font-semibold">
+                              <div className="bg-muted px-3 py-2 text-sm font-semibold">
                                 {group.groupKey} ({group.count}개)
                               </div>
-                              <table className="min-w-full divide-y divide-gray-200">
-                                <thead className="bg-gray-50">
+                              <table className="min-w-full divide-y divide-border">
+                                <thead className="bg-muted">
                                   <tr>
                                     {columnsToShow.map((col, idx) => (
                                       <th
                                         key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
                                         style={{
                                           width: col.width ? `${col.width}px` : "auto",
                                           textAlign: col.align || "left",
@@ -2627,7 +2627,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     ))}
                                   </tr>
                                 </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
+                                <tbody className="divide-y divide-border bg-white">
                                   {group.items.map((item, idx) => {
                                     const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                                     const itemId = item[sourceColumn] || item.id || item.ID;
@@ -2646,7 +2646,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         {columnsToShow.map((col, colIdx) => (
                                           <td
                                             key={colIdx}
-                                            className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                            className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                             style={{ textAlign: col.align || "left" }}
                                           >
                                             {formatCellValue(
@@ -2671,13 +2671,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     // 🔧 일반 테이블 렌더링 (그룹화 없음)
                     return (
                       <div className="overflow-auto">
-                        <table className="min-w-full divide-y divide-gray-200">
-                          <thead className="sticky top-0 z-10 bg-gray-50">
+                        <table className="min-w-full divide-y divide-border">
+                          <thead className="sticky top-0 z-10 bg-muted">
                             <tr>
                               {columnsToShow.map((col, idx) => (
                                 <th
                                   key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
                                   style={{
                                     width: col.width ? `${col.width}px` : "auto",
                                     minWidth: "80px",
@@ -2689,7 +2689,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               ))}
                             </tr>
                           </thead>
-                          <tbody className="divide-y divide-gray-200 bg-white">
+                          <tbody className="divide-y divide-border bg-white">
                             {filteredData.map((item, idx) => {
                               const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                               const itemId = item[sourceColumn] || item.id || item.ID;
@@ -2708,7 +2708,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   {columnsToShow.map((col, colIdx) => (
                                     <td
                                       key={colIdx}
-                                      className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                      className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                       style={{ textAlign: col.align || "left" }}
                                     >
                                       {formatCellValue(
@@ -2867,9 +2867,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               {hasChildren ? (
                                 <div className="flex-shrink-0">
                                   {isExpanded ? (
-                                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
                                   ) : (
-                                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
                                   )}
                                 </div>
                               ) : (
@@ -2893,10 +2893,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       e.stopPropagation();
                                       handleEditClick("left", item);
                                     }}
-                                    className="rounded p-1 transition-colors hover:bg-gray-200"
+                                    className="rounded p-1 transition-colors hover:bg-muted/80"
                                     title="수정"
                                   >
-                                    <Pencil className="h-4 w-4 text-gray-600" />
+                                    <Pencil className="h-4 w-4 text-muted-foreground" />
                                   </button>
 
                                   {/* 삭제 버튼 */}
@@ -2905,10 +2905,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       e.stopPropagation();
                                       handleDeleteClick("left", item);
                                     }}
-                                    className="rounded p-1 transition-colors hover:bg-red-100"
+                                    className="rounded p-1 transition-colors hover:bg-destructive/10"
                                     title="삭제"
                                   >
-                                    <Trash2 className="h-4 w-4 text-red-600" />
+                                    <Trash2 className="h-4 w-4 text-destructive" />
                                   </button>
 
                                   {/* 항목별 추가 버튼 */}
@@ -2918,10 +2918,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleItemAddClick(item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      className="rounded p-1 transition-colors hover:bg-muted/80"
                                       title="하위 항목 추가"
                                     >
-                                      <Plus className="h-4 w-4 text-gray-600" />
+                                      <Plus className="h-4 w-4 text-muted-foreground" />
                                     </button>
                                   )}
                                 </div>
@@ -3154,7 +3154,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       <Button
                                         variant="ghost"
                                         size="sm"
-                                        className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                         onClick={() => handleDeleteClick("right", item)}
                                       >
                                         <Trash2 className="h-3.5 w-3.5" />
@@ -3231,7 +3231,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   <Button
                                     variant="ghost"
                                     size="sm"
-                                    className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                     onClick={(e) => {
                                       e.stopPropagation();
                                       handleDeleteClick("right", item);
@@ -3242,9 +3242,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 )}
                                 {detailColumns.length > 0 &&
                                   (isExpanded ? (
-                                    <ChevronUp className="h-4 w-4 text-gray-400" />
+                                    <ChevronUp className="h-4 w-4 text-muted-foreground/70" />
                                   ) : (
-                                    <ChevronDown className="h-4 w-4 text-gray-400" />
+                                    <ChevronDown className="h-4 w-4 text-muted-foreground/70" />
                                   ))}
                               </div>
                             </div>
@@ -3357,13 +3357,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                           )}
                         </div>
                         <div className="overflow-auto">
-                          <table className="min-w-full divide-y divide-gray-200">
-                            <thead className="sticky top-0 z-10 bg-gray-50">
+                          <table className="min-w-full divide-y divide-border">
+                            <thead className="sticky top-0 z-10 bg-muted">
                               <tr>
                                 {columnsToShow.map((col, idx) => (
                                   <th
                                     key={idx}
-                                    className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                    className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
                                     style={{
                                       width: col.width ? `${col.width}px` : "auto",
                                       textAlign: col.align || "left",
@@ -3376,13 +3376,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 {!isDesignMode &&
                                   ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
                                     (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">
+                                    <th className="px-3 py-2 text-right text-xs font-medium text-muted-foreground uppercase">
                                       작업
                                     </th>
                                   )}
                               </tr>
                             </thead>
-                            <tbody className="divide-y divide-gray-200 bg-white">
+                            <tbody className="divide-y divide-border bg-white">
                               {filteredData.map((item, idx) => {
                                 const itemId = item.id || item.ID;
 
@@ -3391,7 +3391,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     {columnsToShow.map((col, colIdx) => (
                                       <td
                                         key={colIdx}
-                                        className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                        className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                         style={{ textAlign: col.align || "left" }}
                                       >
                                         {formatCellValue(
@@ -3430,10 +3430,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                   e.stopPropagation();
                                                   handleDeleteClick("right", item);
                                                 }}
-                                                className="rounded p-1 transition-colors hover:bg-red-100"
+                                                className="rounded p-1 transition-colors hover:bg-destructive/10"
                                                 title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
                                               >
-                                                <Trash2 className="h-4 w-4 text-red-600" />
+                                                <Trash2 className="h-4 w-4 text-destructive" />
                                               </button>
                                             )}
                                           </div>
@@ -3563,16 +3563,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleDeleteClick("right", item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-red-100"
+                                      className="rounded p-1 transition-colors hover:bg-destructive/10"
                                       title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
                                     >
-                                      <Trash2 className="h-4 w-4 text-red-600" />
+                                      <Trash2 className="h-4 w-4 text-destructive" />
                                     </button>
                                   )}
                                   {/* 확장/접기 버튼 */}
                                   <button
                                     onClick={() => toggleRightItemExpansion(itemId)}
-                                    className="rounded p-1 transition-colors hover:bg-gray-200"
+                                    className="rounded p-1 transition-colors hover:bg-muted/80"
                                   >
                                     {isExpanded ? (
                                       <ChevronUp className="text-muted-foreground h-5 w-5" />
@@ -3777,7 +3777,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   <div key={index}>
                     <Label htmlFor={col.name} className="text-xs sm:text-sm">
                       {col.label} {col.required && <span className="text-destructive">*</span>}
-                      {isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
+                      {isPreFilled && <span className="ml-2 text-[10px] text-primary">(자동 설정됨)</span>}
                     </Label>
                     <Input
                       id={col.name}
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index d678332e..51441e88 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -250,16 +250,16 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
     <AccordionItem
       key={tab.tabId}
       value={tab.tabId}
-      className="rounded-lg border bg-gray-50"
+      className="rounded-lg border bg-muted"
     >
       <AccordionTrigger className="px-3 py-2 hover:no-underline">
         <div className="flex flex-1 items-center gap-2">
-          <GripVertical className="h-4 w-4 text-gray-400" />
+          <GripVertical className="h-4 w-4 text-muted-foreground/70" />
           <span className="text-sm font-medium">
             {tab.label || `탭 ${tabIndex + 1}`}
           </span>
           {tab.tableName && (
-            <span className="text-xs text-gray-500">({tab.tableName})</span>
+            <span className="text-xs text-muted-foreground">({tab.tableName})</span>
           )}
         </div>
       </AccordionTrigger>
@@ -267,7 +267,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
         <div className="space-y-4">
           {/* ===== 1. 기본 정보 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">기본 정보</Label>
+            <Label className="text-xs font-semibold text-primary">기본 정보</Label>
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1">
                 <Label className="text-xs">탭 라벨</Label>
@@ -302,7 +302,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 2. 테이블 선택 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">테이블 설정</Label>
+            <Label className="text-xs font-semibold text-primary">테이블 설정</Label>
             <div className="space-y-1">
               <Label className="text-xs">테이블 선택</Label>
               <Popover>
@@ -345,7 +345,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 3. 표시 모드 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">표시 설정</Label>
+            <Label className="text-xs font-semibold text-primary">표시 설정</Label>
             <div className="space-y-1">
               <Label className="text-xs">표시 모드</Label>
               <Select
@@ -390,8 +390,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 4. 컬럼 매핑 (연결 키) ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">컬럼 매핑 (연결 키)</Label>
-            <p className="text-[10px] text-gray-500">
+            <Label className="text-xs font-semibold text-primary">컬럼 매핑 (연결 키)</Label>
+            <p className="text-[10px] text-muted-foreground">
               좌측 패널 선택 시 관련 데이터만 표시합니다
             </p>
             <div className="mt-2 grid grid-cols-2 gap-2">
@@ -472,7 +472,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 5. 기능 버튼 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">기능 버튼</Label>
+            <Label className="text-xs font-semibold text-primary">기능 버튼</Label>
             <div className="grid grid-cols-4 gap-2">
               <div className="flex items-center gap-1">
                 <Checkbox
@@ -510,9 +510,9 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
           </div>
 
           {/* ===== 6. 표시 컬럼 설정 ===== */}
-          <div className="space-y-3 rounded-lg border border-green-200 bg-green-50 p-3">
+          <div className="space-y-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
             <div className="flex items-center justify-between">
-              <Label className="text-xs font-semibold text-green-700">표시할 컬럼 선택</Label>
+              <Label className="text-xs font-semibold text-emerald-700">표시할 컬럼 선택</Label>
               <Button
                 size="sm"
                 variant="outline"
@@ -528,14 +528,14 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                 컬럼 추가
               </Button>
             </div>
-            <p className="text-[10px] text-gray-600">
+            <p className="text-[10px] text-muted-foreground">
               표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다.
             </p>
 
             {/* 테이블 미선택 상태 */}
             {!tab.tableName && (
-              <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                <p className="text-xs text-gray-500">먼저 테이블을 선택하세요</p>
+              <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                <p className="text-xs text-muted-foreground">먼저 테이블을 선택하세요</p>
               </div>
             )}
 
@@ -544,16 +544,16 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
               <div className="space-y-2">
                 {/* 로딩 상태 */}
                 {loadingTabColumns && (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">컬럼을 불러오는 중...</p>
+                  <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                    <p className="text-xs text-muted-foreground">컬럼을 불러오는 중...</p>
                   </div>
                 )}
 
                 {/* 설정된 컬럼이 없을 때 */}
                 {!loadingTabColumns && (tab.columns || []).length === 0 && (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
-                    <p className="mt-1 text-[10px] text-gray-400">컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다</p>
+                  <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                    <p className="text-xs text-muted-foreground">설정된 컬럼이 없습니다</p>
+                    <p className="mt-1 text-[10px] text-muted-foreground/70">컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다</p>
                   </div>
                 )}
 
@@ -593,7 +593,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           >
                             <ArrowDown className="h-3 w-3" />
                           </Button>
-                          <span className="text-[10px] text-gray-400">#{colIndex + 1}</span>
+                          <span className="text-[10px] text-muted-foreground/70">#{colIndex + 1}</span>
                         </div>
                         <Button
                           size="sm"
@@ -602,7 +602,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                             const newColumns = (tab.columns || []).filter((_, i) => i !== colIndex);
                             updateTab({ columns: newColumns });
                           }}
-                          className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                          className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                         >
                           <X className="h-3 w-3" />
                         </Button>
@@ -610,7 +610,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
                       {/* 컬럼 선택 */}
                       <div className="space-y-1">
-                        <Label className="text-[10px] text-gray-500">컬럼</Label>
+                        <Label className="text-[10px] text-muted-foreground">컬럼</Label>
                         <Select
                           value={col.name}
                           onValueChange={(value) => {
@@ -631,7 +631,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                             {tabColumns.map((column) => (
                               <SelectItem key={column.columnName} value={column.columnName}>
                                 {column.columnLabel || column.columnName}
-                                <span className="ml-1 text-[10px] text-gray-400">({column.columnName})</span>
+                                <span className="ml-1 text-[10px] text-muted-foreground/70">({column.columnName})</span>
                               </SelectItem>
                             ))}
                           </SelectContent>
@@ -641,7 +641,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                       {/* 라벨 + 너비 */}
                       <div className="grid grid-cols-2 gap-2">
                         <div className="space-y-1">
-                          <Label className="text-[10px] text-gray-500">라벨</Label>
+                          <Label className="text-[10px] text-muted-foreground">라벨</Label>
                           <Input
                             value={col.label}
                             onChange={(e) => {
@@ -654,7 +654,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           />
                         </div>
                         <div className="space-y-1">
-                          <Label className="text-[10px] text-gray-500">너비 (px)</Label>
+                          <Label className="text-[10px] text-muted-foreground">너비 (px)</Label>
                           <Input
                             type="number"
                             value={col.width || 100}
@@ -698,8 +698,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
               <div className="space-y-2">
                 {(tab.addModalColumns || []).length === 0 ? (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">추가 모달에 표시할 컬럼을 설정하세요</p>
+                  <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                    <p className="text-xs text-muted-foreground">추가 모달에 표시할 컬럼을 설정하세요</p>
                   </div>
                 ) : (
                   (tab.addModalColumns || []).map((col, colIndex) => (
@@ -756,7 +756,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           const newColumns = (tab.addModalColumns || []).filter((_, i) => i !== colIndex);
                           updateTab({ addModalColumns: newColumns });
                         }}
-                        className="h-8 w-8 p-0 text-red-500"
+                        className="h-8 w-8 p-0 text-destructive"
                       >
                         <X className="h-3 w-3" />
                       </Button>
@@ -769,7 +769,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 8. 데이터 필터링 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">데이터 필터링</Label>
+            <Label className="text-xs font-semibold text-primary">데이터 필터링</Label>
             <DataFilterConfigPanel
               tableName={tab.tableName}
               columns={tabColumns}
@@ -782,7 +782,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
           {/* ===== 9. 중복 데이터 제거 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
             <div className="flex items-center justify-between">
-              <Label className="text-xs font-semibold text-blue-600">중복 데이터 제거</Label>
+              <Label className="text-xs font-semibold text-primary">중복 데이터 제거</Label>
               <Switch
                 checked={tab.deduplication?.enabled ?? false}
                 onCheckedChange={(checked) => {
@@ -874,8 +874,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 10. 수정 버튼 설정 ===== */}
           {tab.showEdit && (
-            <div className="space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-              <Label className="text-xs font-semibold text-blue-700">수정 버튼 설정</Label>
+            <div className="space-y-3 rounded-lg border border-primary/20 bg-primary/10 p-3">
+              <Label className="text-xs font-semibold text-primary">수정 버튼 설정</Label>
               <div className="space-y-2">
                 <div className="space-y-1">
                   <Label className="text-[10px]">수정 모드</Label>
@@ -950,7 +950,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                 {/* 그룹핑 기준 컬럼 */}
                 <div className="space-y-1">
                   <Label className="text-[10px]">그룹핑 기준 컬럼</Label>
-                  <p className="text-[9px] text-gray-500">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
+                  <p className="text-[9px] text-muted-foreground">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
                   <div className="max-h-[120px] space-y-1 overflow-y-auto rounded-md border bg-white p-2">
                     {tabColumns.map((col) => (
                       <div key={col.columnName} className="flex items-center gap-2">
@@ -980,8 +980,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 11. 삭제 버튼 설정 ===== */}
           {tab.showDelete && (
-            <div className="space-y-3 rounded-lg border border-red-200 bg-red-50 p-3">
-              <Label className="text-xs font-semibold text-red-700">삭제 버튼 설정</Label>
+            <div className="space-y-3 rounded-lg border border-destructive/20 bg-destructive/10 p-3">
+              <Label className="text-xs font-semibold text-destructive">삭제 버튼 설정</Label>
               <div className="space-y-2">
                 <div className="grid grid-cols-2 gap-2">
                   <div className="space-y-1">
@@ -1041,7 +1041,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="text-red-500 hover:bg-red-50 hover:text-red-600"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
               onClick={() => {
                 const newTabs = config.rightPanel?.additionalTabs?.filter((_, i) => i !== tabIndex) || [];
                 updateRightPanel({ additionalTabs: newTabs });
@@ -1356,7 +1356,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     return (
       <div className="rounded-lg border p-4">
         <p className="text-sm font-medium">테이블 데이터를 불러올 수 없습니다.</p>
-        <p className="mt-1 text-xs text-gray-600">
+        <p className="mt-1 text-xs text-muted-foreground">
           화면에 테이블이 연결되지 않았거나 테이블 목록이 로드되지 않았습니다.
         </p>
       </div>
@@ -1399,13 +1399,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             <SelectItem value="detail">
               <div className="flex flex-col">
                 <span className="font-medium">상세 (DETAIL)</span>
-                <span className="text-xs text-gray-500">좌측 목록 → 우측 상세 정보 (동일 테이블)</span>
+                <span className="text-xs text-muted-foreground">좌측 목록 → 우측 상세 정보 (동일 테이블)</span>
               </div>
             </SelectItem>
             <SelectItem value="join">
               <div className="flex flex-col">
                 <span className="font-medium">조건 필터 (FILTERED)</span>
-                <span className="text-xs text-gray-500">좌측 선택 항목 기준으로 우측 테이블 필터링</span>
+                <span className="text-xs text-muted-foreground">좌측 선택 항목 기준으로 우측 테이블 필터링</span>
               </div>
             </SelectItem>
           </SelectContent>
@@ -1465,7 +1465,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                             config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
                           )}
                         />
-                        <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                        <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                         {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
                           allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
                           screenTableName}
@@ -1556,13 +1556,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               <SelectItem value="list">
                 <div className="flex flex-col">
                   <span className="font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col">
                   <span className="font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -1793,11 +1793,11 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           // 상세 모드: 좌측과 동일한 테이블 (자동 설정)
           <div className="space-y-2">
             <Label>테이블 (좌측과 동일)</Label>
-            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
-              <p className="text-sm font-medium text-gray-900">
+            <div className="rounded-lg border border-border bg-muted p-3">
+              <p className="text-sm font-medium text-foreground">
                 {config.leftPanel?.tableName || screenTableName || "테이블이 지정되지 않음"}
               </p>
-              <p className="mt-1 text-xs text-gray-500">상세 모드에서는 좌측과 동일한 테이블을 사용합니다</p>
+              <p className="mt-1 text-xs text-muted-foreground">상세 모드에서는 좌측과 동일한 테이블을 사용합니다</p>
             </div>
           </div>
         ) : (
@@ -1837,7 +1837,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                           )}
                         />
                         {table.displayName || table.tableName}
-                        {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                        {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                       </CommandItem>
                     ))}
                   </CommandGroup>
@@ -1860,13 +1860,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               <SelectItem value="list">
                 <div className="flex flex-col">
                   <span className="font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col">
                   <span className="font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -1875,7 +1875,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
         {/* 요약 표시 설정 (LIST 모드에서만) */}
         {(config.rightPanel?.displayMode || "list") === "list" && (
-          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+          <div className="space-y-3 rounded-lg border border-border bg-muted p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
 
             <div className="space-y-2">
@@ -1891,13 +1891,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 }}
                 className="bg-white"
               />
-              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+              <p className="text-xs text-muted-foreground">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
             </div>
 
             <div className="flex items-center justify-between space-x-2">
               <div className="flex-1">
                 <Label className="text-xs">라벨 표시</Label>
-                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+                <p className="text-xs text-muted-foreground">컬럼명 표시 여부</p>
               </div>
               <Checkbox
                 checked={config.rightPanel?.summaryShowLabel ?? true}
@@ -2418,7 +2418,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       </div>
 
       {/* 🆕 우측 패널 삭제 버튼 설정 */}
-      <div className="space-y-3 rounded-lg border border-red-200 bg-red-50 p-3">
+      <div className="space-y-3 rounded-lg border border-destructive/20 bg-destructive/10 p-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <h3 className="text-sm font-semibold">삭제 버튼 설정</h3>
@@ -2568,7 +2568,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           </Accordion>
         ) : (
           <div className="rounded-lg border border-dashed p-4 text-center">
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-muted-foreground">
               추가된 탭이 없습니다. [탭 추가] 버튼을 클릭하여 새 탭을 추가하세요.
             </p>
           </div>
diff --git a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
index cd93a3b5..7a529cc9 100644
--- a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
@@ -1545,7 +1545,7 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
           <p className="text-foreground mb-1 font-medium">좌측 패널 선택 시 우측 패널 데이터 필터링</p>
           <p>좌측에서 항목을 선택하면 좌측 조인 컬럼의 값으로 우측 테이블을 필터링합니다.</p>
           <p className="mt-1 text-[10px]">예: 부서(dept_code) 선택 시 해당 부서의 사원만 표시</p>
-          <p className="mt-1 text-[10px] text-blue-600">복합키: 여러 컬럼으로 조인 (예: item_code + lot_number)</p>
+          <p className="mt-1 text-[10px] text-primary">복합키: 여러 컬럼으로 조인 (예: item_code + lot_number)</p>
         </div>
 
         <div className="space-y-3">
diff --git a/frontend/lib/registry/components/table-list/CardModeRenderer.tsx b/frontend/lib/registry/components/table-list/CardModeRenderer.tsx
index 2676bed6..65bad9d4 100644
--- a/frontend/lib/registry/components/table-list/CardModeRenderer.tsx
+++ b/frontend/lib/registry/components/table-list/CardModeRenderer.tsx
@@ -69,7 +69,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
     if (!config.showActions) return null;
 
     return (
-      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-gray-100 pt-3">
+      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-border pt-3">
         <Button
           variant="ghost"
           size="sm"
@@ -143,7 +143,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
             key={`card-${index}-${idValue}`}
             style={cardStyle}
             className={`transition-all duration-200 hover:shadow-md ${
-              isSelected ? "bg-blue-50/30 ring-2 ring-blue-500" : ""
+              isSelected ? "bg-primary/10/30 ring-2 ring-ring" : ""
             }`}
             onClick={(e) => onRowClick?.(row, index, e)}
           >
@@ -151,7 +151,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               <div className="flex items-start justify-between">
                 <div className="min-w-0 flex-1">
                   <CardTitle className="truncate text-sm font-medium">{titleValue || "제목 없음"}</CardTitle>
-                  {subtitleValue && <div className="mt-1 truncate text-xs text-gray-500">{subtitleValue}</div>}
+                  {subtitleValue && <div className="mt-1 truncate text-xs text-muted-foreground">{subtitleValue}</div>}
                 </div>
 
                 {/* ID 뱃지 */}
@@ -170,7 +170,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
                   <img
                     src={imageValue}
                     alt={titleValue}
-                    className="h-24 w-full rounded-md bg-gray-100 object-cover"
+                    className="h-24 w-full rounded-md bg-muted object-cover"
                     onError={(e) => {
                       const target = e.target as HTMLImageElement;
                       target.style.display = "none";
@@ -180,7 +180,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               )}
 
               {/* 설명 표시 */}
-              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-gray-600">{descriptionValue}</div>}
+              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-muted-foreground">{descriptionValue}</div>}
 
               {/* 추가 필드들 표시 (선택적) */}
               <div className="space-y-1">
@@ -202,7 +202,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
 
                     return (
                       <div key={col.columnName} className="flex items-center justify-between text-xs">
-                        <span className="truncate text-gray-500">{col.displayName}:</span>
+                        <span className="truncate text-muted-foreground">{col.displayName}:</span>
                         <span className="ml-2 truncate font-medium">{value}</span>
                       </div>
                     );
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index c14f28f6..c9dc02d9 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -4245,8 +4245,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         return (
           <div className="flex max-w-full items-center gap-1.5 text-sm">
-            <Paperclip className="h-4 w-4 flex-shrink-0 text-gray-500" />
-            <span className="truncate text-blue-600" title={fileNames}>
+            <Paperclip className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+            <span className="truncate text-primary" title={fileNames}>
               {fileNames}
             </span>
             {files.length > 1 && <span className="text-muted-foreground flex-shrink-0 text-xs">({files.length})</span>}
@@ -5145,7 +5145,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               <div className="flex flex-col gap-1">
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">Excel</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToExcel(true)}>
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   전체 Excel 내보내기
                 </Button>
                 <Button
@@ -5155,13 +5155,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToExcel(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
                 <div className="border-border my-1 border-t" />
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">PDF/인쇄</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToPdf(true)}>
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   전체 PDF 내보내기
                 </Button>
                 <Button
@@ -5171,7 +5171,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToPdf(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
               </div>
@@ -5354,7 +5354,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="Excel 내보내기"
                 >
-                  <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-1 h-3 w-3 text-emerald-600" />
                   Excel
                 </Button>
               )}
@@ -5366,7 +5366,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="PDF 내보내기"
                 >
-                  <FileText className="mr-1 h-3 w-3 text-red-600" />
+                  <FileText className="mr-1 h-3 w-3 text-destructive" />
                   PDF
                 </Button>
               )}
@@ -5878,7 +5878,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         {/* 리사이즈 핸들 (체크박스 제외) */}
                         {columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
                           <div
-                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-primary"
                             style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
@@ -6227,11 +6227,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   // 🆕 배치 편집: 수정된 셀 스타일 (노란 배경)
                                   isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
                                   // 🆕 유효성 에러: 빨간 테두리 및 배경
-                                  cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
+                                  cellValidationError && "bg-destructive/10 ring-2 ring-destructive ring-inset dark:bg-destructive/15",
                                   // 🆕 검색 하이라이트 스타일 (노란 배경)
                                   isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
                                   // 🆕 편집 불가 컬럼 스타일 (연한 회색 배경)
-                                  column.editable === false && "bg-gray-50 dark:bg-gray-900/30",
+                                  column.editable === false && "bg-muted dark:bg-foreground/30",
                                 )}
                                 // 🆕 유효성 에러 툴팁
                                 title={cellValidationError || undefined}
@@ -6609,7 +6609,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
             {/* 행 삭제 */}
             <button
-              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-red-600"
+              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive"
               onClick={async () => {
                 if (confirm("이 행을 삭제하시겠습니까?")) {
                   try {
@@ -6676,7 +6676,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       variant="ghost"
                       size="sm"
                       onClick={() => removeFilterGroup(group.id)}
-                      className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -6736,7 +6736,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           variant="ghost"
                           size="sm"
                           onClick={() => removeFilterCondition(group.id, condition.id)}
-                          className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                           disabled={group.conditions.length === 1}
                         >
                           <X className="h-3 w-3" />
diff --git a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
index 8526b0c9..2ea7f0af 100644
--- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
@@ -49,14 +49,14 @@ function SortableColumnRow({
       className={cn(
         "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -977,7 +977,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                   placeholder="8"
                   className="h-8"
                 />
-                <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+                <div className="text-xs text-muted-foreground">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
               </div>
             </div>
           )}
@@ -1016,7 +1016,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         <Label className="text-xs">표시할 컬럼 선택</Label>
                         {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
                         entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
-                          <div className="py-2 text-center text-xs text-gray-400">
+                          <div className="py-2 text-center text-xs text-muted-foreground/70">
                             표시 가능한 컬럼이 없습니다.
                             {!column.entityDisplayConfig?.joinTable && (
                               <p className="mt-1 text-[10px]">
@@ -1101,7 +1101,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {/* 참조 테이블 미설정 안내 */}
                       {!column.entityDisplayConfig?.joinTable &&
                         entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
-                          <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
+                          <div className="rounded bg-primary/10 p-2 text-[10px] text-primary">
                             현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
                             테이블의 컬럼도 선택할 수 있습니다.
                           </div>
@@ -1111,14 +1111,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
                         <div className="space-y-1">
                           <Label className="text-xs">미리보기</Label>
-                          <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                          <div className="flex flex-wrap gap-1 rounded bg-muted p-2 text-xs">
                             {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
                               <React.Fragment key={colName}>
                                 <Badge variant="secondary" className="text-xs">
                                   {colName}
                                 </Badge>
                                 {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                  <span className="text-gray-400">
+                                  <span className="text-muted-foreground/70">
                                     {entityDisplayConfigs[column.columnName].separator}
                                   </span>
                                 )}
@@ -1129,7 +1129,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       )}
                     </div>
                   ) : (
-                    <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
+                    <div className="py-4 text-center text-xs text-muted-foreground/70">컬럼 정보 로딩 중...</div>
                   )}
                 </div>
               ))}
@@ -1138,17 +1138,17 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
         {!screenTableName ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>테이블이 연결되지 않았습니다.</p>
               <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
             </div>
           </div>
         ) : availableColumns.length === 0 ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
               <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-              <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+              <p className="mt-2 text-xs text-primary">현재 화면 테이블: {screenTableName}</p>
             </div>
           </div>
         ) : (
@@ -1193,7 +1193,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         />
                         <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.label || column.columnName}</span>
-                        <span className="text-[10px] text-gray-400 ml-auto">{column.input_type || column.dataType}</span>
+                        <span className="text-[10px] text-muted-foreground/70 ml-auto">{column.input_type || column.dataType}</span>
                       </div>
                     );
                   })}
@@ -1214,14 +1214,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 <div className="space-y-3">
                   {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                     <div key={tableIndex} className="space-y-1">
-                      <div className="flex items-center gap-2 text-[10px] font-medium text-blue-600 mb-1">
+                      <div className="flex items-center gap-2 text-[10px] font-medium text-primary mb-1">
                         <Link2 className="h-3 w-3" />
                         <span>{joinTable.tableName}</span>
                         <Badge variant="outline" className="text-[10px]">
                           {joinTable.currentDisplayColumn}
                         </Badge>
                       </div>
-                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                       {joinTable.availableColumns.map((column, colIndex) => {
                         const matchingJoinColumn = entityJoinColumns.availableColumns.find(
                           (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
@@ -1237,8 +1237,8 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                   <div
                               key={colIndex}
                               className={cn(
-                                "hover:bg-blue-100/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                                isAlreadyAdded && "bg-blue-100",
+                                "hover:bg-primary/10/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                                isAlreadyAdded && "bg-primary/10",
                               )}
                         onClick={() => {
                                 if (isAlreadyAdded) {
@@ -1261,9 +1261,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         }}
                                 className="pointer-events-none h-3.5 w-3.5"
                               />
-                              <Link2 className="text-blue-500 h-3 w-3 flex-shrink-0" />
+                              <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="text-[10px] text-blue-400 ml-auto">{column.inputType || column.dataType}</span>
+                              <span className="text-[10px] text-primary/80 ml-auto">{column.inputType || column.dataType}</span>
                   </div>
                 );
               })}
diff --git a/frontend/lib/registry/components/tabs/tabs-component.tsx b/frontend/lib/registry/components/tabs/tabs-component.tsx
index b90c2a76..f45ee145 100644
--- a/frontend/lib/registry/components/tabs/tabs-component.tsx
+++ b/frontend/lib/registry/components/tabs/tabs-component.tsx
@@ -88,17 +88,17 @@ ComponentRegistry.registerComponent({
     
     return (
       <div
-        className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50"
+        className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted"
         onClick={onClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
         <div className="text-center">
           <div className="flex items-center justify-center">
-            <Folder className="h-8 w-8 text-gray-400" />
+            <Folder className="h-8 w-8 text-muted-foreground/70" />
           </div>
           <p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
-          <p className="text-xs text-gray-400">
+          <p className="text-xs text-muted-foreground/70">
             {tabs.length > 0
               ? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
               : "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
diff --git a/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx b/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx
index 43bad4f2..aa587caa 100644
--- a/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx
+++ b/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx
@@ -22,7 +22,7 @@ export function TaxInvoiceListComponent({
   // 편집 모드에서는 플레이스홀더 표시
   if (isEditMode) {
     return (
-      <div className="flex h-full min-h-[300px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50">
+      <div className="flex h-full min-h-[300px] items-center justify-center rounded-lg border-2 border-dashed border-input bg-muted">
         <div className="text-center">
           <div className="text-muted-foreground mb-2 text-4xl">📄</div>
           <p className="text-muted-foreground text-sm font-medium">세금계산서 목록</p>
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index c51b0c0f..41eeb6b4 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -732,7 +732,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
@@ -743,8 +743,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
             className={cn(
               "rounded-full px-2 py-0.5 text-[10px] font-medium",
               isManualMode
-                ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
-                : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+                ? "bg-amber-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
+                : "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary/80",
             )}
           >
             {isManualMode ? "수동" : "자동"}
diff --git a/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx b/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
index 5dd67812..820fcd17 100644
--- a/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
@@ -189,7 +189,7 @@ export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ conf
 
             {/* 선택된 타입 설명 */}
             {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
-              <div className="text-xs text-gray-500">
+              <div className="text-xs text-muted-foreground">
                 {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
               </div>
             )}
@@ -379,7 +379,7 @@ export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ conf
               {/* 미리보기 */}
               <div className="space-y-1">
                 <Label className="text-xs">미리보기</Label>
-                <div className="rounded border bg-gray-100 p-2 text-xs">
+                <div className="rounded border bg-muted p-2 text-xs">
                   {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
                 </div>
               </div>
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
index 575b9482..fb20b817 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
@@ -495,20 +495,20 @@ export function UniversalFormModalConfigPanel({
       case "email":
       case "password":
       case "tel":
-        return "text-blue-600 bg-blue-50 border-blue-200";
+        return "text-primary bg-primary/10 border-primary/20";
       case "number":
         return "text-cyan-600 bg-cyan-50 border-cyan-200";
       case "date":
       case "datetime":
         return "text-purple-600 bg-purple-50 border-purple-200";
       case "select":
-        return "text-green-600 bg-green-50 border-green-200";
+        return "text-emerald-600 bg-emerald-50 border-emerald-200";
       case "checkbox":
         return "text-pink-600 bg-pink-50 border-pink-200";
       case "textarea":
-        return "text-orange-600 bg-orange-50 border-orange-200";
+        return "text-amber-600 bg-amber-50 border-orange-200";
       default:
-        return "text-gray-600 bg-gray-50 border-gray-200";
+        return "text-muted-foreground bg-muted border-border";
     }
   };
 
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
index afec5b6c..798c0638 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
@@ -421,9 +421,9 @@ export function FieldDetailSettingsModal({
                 {/* Select 옵션 설정 */}
                 {localField.fieldType === "select" && (
                   <AccordionItem value="select-options" className="border rounded-lg">
-                    <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-green-50/50">
+                    <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-emerald-50/50">
                       <div className="flex items-center gap-2">
-                        <SettingsIcon className="h-3.5 w-3.5 text-green-600" />
+                        <SettingsIcon className="h-3.5 w-3.5 text-emerald-600" />
                         <span>Select 옵션 설정</span>
                         {localField.selectOptions?.type && (
                           <span className="text-[9px] text-muted-foreground">
@@ -1187,9 +1187,9 @@ export function FieldDetailSettingsModal({
 
                 {/* 연결 필드 설정 */}
                 <AccordionItem value="linked-fields" className="border rounded-lg">
-                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-orange-50/50">
+                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-amber-50/50">
                     <div className="flex items-center gap-2">
-                      <SettingsIcon className="h-3.5 w-3.5 text-orange-600" />
+                      <SettingsIcon className="h-3.5 w-3.5 text-amber-600" />
                       <span>연결 필드 설정 (다중 컬럼 저장)</span>
                       {localField.linkedFieldGroup?.enabled && (
                         <span className="text-[9px] text-muted-foreground">
@@ -1731,9 +1731,9 @@ export function FieldDetailSettingsModal({
 
                 {/* 채번규칙 설정 */}
                 <AccordionItem value="numbering-rule" className="border rounded-lg">
-                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-blue-50/50">
+                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-primary/10/50">
                     <div className="flex items-center gap-2">
-                      <SettingsIcon className="h-3.5 w-3.5 text-blue-600" />
+                      <SettingsIcon className="h-3.5 w-3.5 text-primary" />
                       <span>채번규칙 설정</span>
                       {localField.numberingRule?.enabled && (
                         <span className="text-[9px] text-muted-foreground">(활성화됨)</span>
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
index 01c87fcb..db0af555 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
@@ -406,7 +406,7 @@ export function SaveSettingsModal({
               {saveMode === "single" && (
                 <div className="space-y-3 border rounded-lg p-3 bg-card">
                   <div className="flex items-center gap-2">
-                    <Database className="h-4 w-4 text-blue-600" />
+                    <Database className="h-4 w-4 text-primary" />
                     <h3 className="text-xs font-semibold">단일 테이블 설정</h3>
                   </div>
 
@@ -500,7 +500,7 @@ export function SaveSettingsModal({
                   {/* 메인 테이블 설정 */}
                   <div className="border rounded-lg p-3 bg-card space-y-3">
                     <div className="flex items-center gap-2">
-                      <Database className="h-4 w-4 text-blue-600" />
+                      <Database className="h-4 w-4 text-primary" />
                       <h3 className="text-xs font-semibold">메인 테이블 설정</h3>
                     </div>
 
@@ -686,7 +686,7 @@ export function SaveSettingsModal({
                   <div className="border rounded-lg p-3 bg-card space-y-3">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2">
-                        <Layers className="h-4 w-4 text-orange-600" />
+                        <Layers className="h-4 w-4 text-amber-600" />
                         <h3 className="text-xs font-semibold">서브 테이블 설정</h3>
                         <span className="text-[9px] text-muted-foreground">
                           ({(localSaveConfig.customApiSave?.multiTable?.subTables || []).length}개)
@@ -717,7 +717,7 @@ export function SaveSettingsModal({
                           const subTableColumns = subTable.tableName ? tableColumns[subTable.tableName] || [] : [];
                           return (
                             <Accordion key={subIndex} type="single" collapsible>
-                              <AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-orange-50/30">
+                              <AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-amber-50/30">
                                 <div className="flex items-center justify-between px-3 py-2">
                                   <AccordionTrigger className="flex-1 text-xs hover:no-underline p-0">
                                     <div className="flex items-center gap-2">
@@ -1396,7 +1396,7 @@ export function SaveSettingsModal({
                                       </div>
                                     ) : (
                                       // 활성화 상태: 설정 필드 표시
-                                      <div className="border rounded-lg p-3 bg-blue-50/50 space-y-3">
+                                      <div className="border rounded-lg p-3 bg-primary/10/50 space-y-3">
                                         <div className="flex items-center justify-between">
                                           <div>
                                             <p className="text-[10px] font-medium">수정 시 데이터 로드</p>
@@ -1456,14 +1456,14 @@ export function SaveSettingsModal({
               {/* 섹션별 저장 방식 */}
               <div className="space-y-3 border rounded-lg p-3 bg-card">
                 <div className="flex items-center gap-2">
-                  <Layers className="h-4 w-4 text-green-600" />
+                  <Layers className="h-4 w-4 text-emerald-600" />
                   <h3 className="text-xs font-semibold">섹션별 저장 방식</h3>
                 </div>
                 
                 {/* 설명 */}
                 <div className="bg-muted/50 rounded-lg p-2.5 space-y-1.5">
                   <div className="flex items-start gap-2">
-                    <Info className="h-3.5 w-3.5 text-blue-500 mt-0.5 shrink-0" />
+                    <Info className="h-3.5 w-3.5 text-primary mt-0.5 shrink-0" />
                     <div className="space-y-1">
                       <p className="text-[10px] text-muted-foreground">
                         <span className="font-medium text-foreground">공통 저장:</span> 이 섹션의 필드 값이 모든 품목 행에 <span className="font-medium">동일하게</span> 저장됩니다
@@ -1497,7 +1497,7 @@ export function SaveSettingsModal({
                           value={section.id}
                           className={cn(
                             "border rounded-lg",
-                            currentMode === "common" ? "bg-blue-50/30" : "bg-orange-50/30"
+                            currentMode === "common" ? "bg-primary/10/30" : "bg-amber-50/30"
                           )}
                         >
                           <AccordionTrigger className="px-3 py-2 text-xs hover:no-underline">
@@ -1508,7 +1508,7 @@ export function SaveSettingsModal({
                                   variant="outline" 
                                   className={cn(
                                     "text-[8px] h-4",
-                                    sectionType === "table" ? "border-orange-300 text-orange-600" : "border-blue-300 text-blue-600"
+                                    sectionType === "table" ? "border-orange-300 text-amber-600" : "border-primary/40 text-primary"
                                   )}
                                 >
                                   {sectionType === "table" ? "테이블" : "필드"}
@@ -1566,7 +1566,7 @@ export function SaveSettingsModal({
                                             "flex items-center justify-between px-2 py-1.5 rounded border text-left transition-colors",
                                             isOverridden
                                               ? "border-amber-300 bg-amber-50"
-                                              : "border-gray-200 bg-white hover:bg-gray-50"
+                                              : "border-border bg-white hover:bg-muted"
                                           )}
                                         >
                                           <span className="text-[9px] truncate flex-1">
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
index 0031e5d0..aa5a9509 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
@@ -134,20 +134,20 @@ export function SectionLayoutModal({
       case "email":
       case "password":
       case "tel":
-        return "bg-blue-50 border-blue-200 text-blue-700";
+        return "bg-primary/10 border-primary/20 text-primary";
       case "number":
         return "bg-cyan-50 border-cyan-200 text-cyan-700";
       case "date":
       case "datetime":
         return "bg-purple-50 border-purple-200 text-purple-700";
       case "select":
-        return "bg-green-50 border-green-200 text-green-700";
+        return "bg-emerald-50 border-emerald-200 text-emerald-700";
       case "checkbox":
         return "bg-pink-50 border-pink-200 text-pink-700";
       case "textarea":
-        return "bg-orange-50 border-orange-200 text-orange-700";
+        return "bg-amber-50 border-orange-200 text-orange-700";
       default:
-        return "bg-gray-50 border-gray-200 text-gray-700";
+        return "bg-muted border-border text-foreground";
     }
   };
 
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
index 7099e43e..bf1ebd31 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
@@ -602,7 +602,7 @@ export function TableColumnSettingsModal({
                         </SelectContent>
                       </Select>
                       {isCategoryColumn && (
-                        <p className="text-[10px] text-blue-600 mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
+                        <p className="text-[10px] text-primary mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
                       )}
                     </div>
                     <div>
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
index 7bda67b2..c8610e11 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
@@ -1146,7 +1146,7 @@ function ColumnSettingItem({
             </SelectContent>
           </Select>
           {isCategoryColumn && (
-            <p className="text-[10px] text-blue-600 mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
+            <p className="text-[10px] text-primary mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
           )}
         </div>
 
@@ -1202,7 +1202,7 @@ function ColumnSettingItem({
             onCheckedChange={(checked) => onUpdate({ receiveFromParent: checked })}
             className="scale-75"
           />
-          <span className="text-blue-600">부모값</span>
+          <span className="text-primary">부모값</span>
         </label>
         <label className="flex items-center gap-2 text-xs cursor-pointer">
           <Switch
@@ -1237,7 +1237,7 @@ function ColumnSettingItem({
       {/* 부모에서 값 받기 설정 (부모값 ON일 때만 표시) */}
       {col.receiveFromParent && (
         <div className="border-t pt-3 mt-3 space-y-2">
-          <Label className="text-xs font-medium text-blue-600">부모 필드 선택</Label>
+          <Label className="text-xs font-medium text-primary">부모 필드 선택</Label>
           <p className="text-[10px] text-muted-foreground">
             부모 화면에서 전달받을 필드를 선택하세요. 모든 행에 동일한 값이 적용됩니다.
           </p>
@@ -1335,7 +1335,7 @@ function ColumnSettingItem({
       {col.lookup?.enabled && (
         <div className="border-t pt-3 mt-3 space-y-3">
           <div className="flex justify-between items-center">
-            <Label className="text-xs font-medium text-blue-600">조회 옵션</Label>
+            <Label className="text-xs font-medium text-primary">조회 옵션</Label>
             <Button size="sm" variant="outline" onClick={addLookupOption} className="h-6 text-xs px-2">
               <Plus className="h-3 w-3 mr-1" />
               옵션 추가
@@ -1349,7 +1349,7 @@ function ColumnSettingItem({
           ) : (
             <div className="space-y-3">
               {(col.lookup?.options || []).map((option, optIndex) => (
-                <div key={option.id} className="border rounded-lg p-3 space-y-3 bg-blue-50/30">
+                <div key={option.id} className="border rounded-lg p-3 space-y-3 bg-primary/10/30">
                   {/* 옵션 헤더 */}
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
@@ -1573,7 +1573,7 @@ function ColumnSettingItem({
                                     {cond.sourceType === "currentRow" ? (
                                       // 현재 행: 테이블에 설정된 컬럼 필드 표시
                                       <>
-                                        <div className="px-2 py-1 text-[10px] font-medium text-green-600 bg-green-50 border-b">
+                                        <div className="px-2 py-1 text-[10px] font-medium text-emerald-600 bg-emerald-50 border-b">
                                           설정된 컬럼
                                         </div>
                                         {tableConfig?.columns?.map((c) => (
@@ -1585,7 +1585,7 @@ function ColumnSettingItem({
                                     ) : cond.sourceType === "sourceTable" ? (
                                       // 소스 테이블: 원본 테이블의 컬럼 표시
                                       <>
-                                        <div className="px-2 py-1 text-[10px] font-medium text-orange-600 bg-orange-50 border-b">
+                                        <div className="px-2 py-1 text-[10px] font-medium text-amber-600 bg-amber-50 border-b">
                                           {sourceTableName} 컬럼
                                         </div>
                                         {sourceTableColumns.map((c) => (
@@ -1639,7 +1639,7 @@ function ColumnSettingItem({
                                     </SelectTrigger>
                                     <SelectContent>
                                       {option.tableName && (
-                                        <div className="px-2 py-1 text-[10px] font-medium text-blue-600 bg-blue-50 border-b">
+                                        <div className="px-2 py-1 text-[10px] font-medium text-primary bg-primary/10 border-b">
                                           {option.tableName} 컬럼
                                         </div>
                                       )}
@@ -1670,7 +1670,7 @@ function ColumnSettingItem({
                           {/* 외부 테이블 조회 설정 */}
                           {cond.sourceType === "externalTable" && cond.externalLookup && (
                             <div className="pl-2 border-l-2 border-orange-200 space-y-2">
-                              <p className="text-[10px] text-orange-600 font-medium">외부 테이블에서 조건 값 조회</p>
+                              <p className="text-[10px] text-amber-600 font-medium">외부 테이블에서 조건 값 조회</p>
                               
                               {/* 1행: 조회 테이블 선택 */}
                               <div className="grid grid-cols-3 gap-1.5">
@@ -1759,7 +1759,7 @@ function ColumnSettingItem({
                               </div>
 
                               {/* 2행: 비교 값 출처 */}
-                              <div className="p-1.5 bg-orange-50/50 rounded">
+                              <div className="p-1.5 bg-amber-50/50 rounded">
                                 <p className="text-[9px] text-muted-foreground mb-1">비교 값 출처 (찾을 때 사용할 값)</p>
                                 <div className="flex items-center gap-1.5">
                                   <Select
@@ -1808,7 +1808,7 @@ function ColumnSettingItem({
                                     <SelectContent>
                                       {cond.externalLookup.matchSourceType === "currentRow" ? (
                                         <>
-                                          <div className="px-2 py-1 text-[9px] font-medium text-green-600 bg-green-50 border-b">
+                                          <div className="px-2 py-1 text-[9px] font-medium text-emerald-600 bg-emerald-50 border-b">
                                             설정된 컬럼
                                           </div>
                                           {tableConfig?.columns?.map((c) => (
@@ -1817,7 +1817,7 @@ function ColumnSettingItem({
                                         </>
                                       ) : cond.externalLookup.matchSourceType === "sourceTable" ? (
                                         <>
-                                          <div className="px-2 py-1 text-[9px] font-medium text-orange-600 bg-orange-50 border-b">
+                                          <div className="px-2 py-1 text-[9px] font-medium text-amber-600 bg-amber-50 border-b">
                                             {sourceTableName} 컬럼
                                           </div>
                                           {sourceTableColumns.map((c) => (
@@ -1856,7 +1856,7 @@ function ColumnSettingItem({
                                   </SelectTrigger>
                                   <SelectContent>
                                     {option.tableName && (
-                                      <div className="px-2 py-1 text-[9px] font-medium text-blue-600 bg-blue-50 border-b">
+                                      <div className="px-2 py-1 text-[9px] font-medium text-primary bg-primary/10 border-b">
                                         {option.tableName} 컬럼
                                       </div>
                                     )}
@@ -1869,7 +1869,7 @@ function ColumnSettingItem({
 
                               {/* 설명 텍스트 */}
                               {cond.externalLookup.tableName && cond.externalLookup.matchColumn && cond.externalLookup.resultColumn && cond.targetColumn && (
-                                <p className="text-[9px] text-orange-600 bg-orange-100/50 rounded px-1.5 py-0.5">
+                                <p className="text-[9px] text-amber-600 bg-amber-100/50 rounded px-1.5 py-0.5">
                                   {cond.externalLookup.tableName}에서 {cond.externalLookup.matchColumn} = 입력값(비교 값 출처)인 행의{" "}
                                   {cond.externalLookup.resultColumn} 값을 가져와 {option.tableName}.{cond.targetColumn}와 비교
                                 </p>
@@ -1879,7 +1879,7 @@ function ColumnSettingItem({
 
                           {/* 값 변환 설정 (다른 섹션일 때만 표시) */}
                           {cond.sourceType === "sectionField" && (
-                            <div className="pl-2 border-l-2 border-blue-200">
+                            <div className="pl-2 border-l-2 border-primary/20">
                               <label className="flex items-center gap-1.5 text-[10px] cursor-pointer">
                                 <Switch
                                   checked={cond.transform?.enabled ?? false}
@@ -1894,12 +1894,12 @@ function ColumnSettingItem({
                                   }}
                                   className="scale-[0.5]"
                                 />
-                                <span className="text-blue-600 font-medium">값 변환 필요</span>
+                                <span className="text-primary font-medium">값 변환 필요</span>
                                 <span className="text-muted-foreground">(이름 → 코드 등)</span>
                               </label>
 
                               {cond.transform?.enabled && (
-                                <div className="mt-1.5 p-2 bg-blue-50/50 rounded space-y-1.5">
+                                <div className="mt-1.5 p-2 bg-primary/10/50 rounded space-y-1.5">
                                   <div className="grid grid-cols-3 gap-1.5">
                                     <div>
                                       <Label className="text-[9px] text-muted-foreground">변환 테이블</Label>
@@ -1976,7 +1976,7 @@ function ColumnSettingItem({
                                     </div>
                                   </div>
                                   {cond.transform.tableName && cond.transform.matchColumn && cond.transform.resultColumn && (
-                                    <p className="text-[9px] text-blue-600 bg-blue-100/50 rounded px-1.5 py-0.5">
+                                    <p className="text-[9px] text-primary bg-primary/10/50 rounded px-1.5 py-0.5">
                                       {cond.transform.tableName}에서 {cond.transform.matchColumn} = 입력값 인 행의 {cond.transform.resultColumn} 값으로 변환
                                     </p>
                                   )}
@@ -2007,7 +2007,7 @@ function ColumnSettingItem({
         <div className="border-t pt-3 mt-3 space-y-3">
           <div className="flex items-center justify-between">
             <div>
-              <Label className="text-xs font-medium text-green-600">동적 드롭다운 옵션</Label>
+              <Label className="text-xs font-medium text-emerald-600">동적 드롭다운 옵션</Label>
               <p className="text-[10px] text-muted-foreground">
                 소스 테이블에서 옵션을 동적으로 로드합니다. 조건부 테이블 필터가 자동 적용됩니다.
               </p>
@@ -2030,7 +2030,7 @@ function ColumnSettingItem({
           </div>
 
           {col.dynamicSelectOptions?.enabled && (
-            <div className="space-y-3 pl-2 border-l-2 border-green-500/30">
+            <div className="space-y-3 pl-2 border-l-2 border-emerald-500/30">
               {/* 소스 컬럼 선택 */}
               <div className="grid grid-cols-2 gap-3">
                 <div>
@@ -2188,7 +2188,7 @@ function ColumnSettingItem({
                     ) : (
                       <div className="space-y-2">
                         {(col.dynamicSelectOptions.rowSelectionMode?.autoFillColumns || []).map((mapping, mappingIndex) => (
-                          <div key={mappingIndex} className="flex items-center gap-2 p-2 border rounded bg-green-50/30">
+                          <div key={mappingIndex} className="flex items-center gap-2 p-2 border rounded bg-emerald-50/30">
                             {/* 소스 컬럼 */}
                             <div className="flex-1">
                               <Label className="text-[9px] text-muted-foreground">소스 컬럼</Label>
@@ -2307,7 +2307,7 @@ function ColumnSettingItem({
 
                     {/* 매핑 설명 */}
                     {(col.dynamicSelectOptions.rowSelectionMode?.autoFillColumns || []).length > 0 && (
-                      <div className="text-[9px] text-green-600 bg-green-100/50 rounded p-1.5">
+                      <div className="text-[9px] text-emerald-600 bg-emerald-100/50 rounded p-1.5">
                         {col.label || col.field} 선택 시:{" "}
                         {(col.dynamicSelectOptions.rowSelectionMode?.autoFillColumns || [])
                           .filter((m) => m.sourceColumn && m.targetField)
@@ -2324,7 +2324,7 @@ function ColumnSettingItem({
 
               {/* 설정 요약 */}
               {col.dynamicSelectOptions.sourceField && (
-                <div className="text-[9px] text-green-600 bg-green-100/50 rounded p-1.5">
+                <div className="text-[9px] text-emerald-600 bg-emerald-100/50 rounded p-1.5">
                   {sourceTableName}.{col.dynamicSelectOptions.sourceField}
                   {tableConfig.conditionalTable?.sourceFilter?.filterColumn && (
                     <> (조건: {tableConfig.conditionalTable.sourceFilter.filterColumn} = 선택된 검사유형)</>
@@ -3223,8 +3223,8 @@ export function TableSectionSettingsModal({
                   
                   {/* 테이블은 선택했지만 컬럼이 아직 로드되지 않은 경우 */}
                   {saveTableColumns.length === 0 && (tableConfig.saveConfig?.targetTable || tableConfig.source.tableName) && (
-                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                      <p className="text-xs text-blue-800">
+                    <div className="bg-primary/10 border border-primary/20 rounded-lg p-3">
+                      <p className="text-xs text-primary">
                         테이블 "{tableConfig.saveConfig?.targetTable || tableConfig.source.tableName}" 의 컬럼을 불러오는 중입니다...
                       </p>
                     </div>
@@ -4129,9 +4129,9 @@ export function TableSectionSettingsModal({
                           )}
 
                           {/* 사용 가이드 */}
-                          <div className="mt-4 p-3 bg-blue-50/50 border border-blue-200/50 rounded-lg space-y-2">
-                            <p className="text-xs font-medium text-blue-700">사용 가이드</p>
-                            <div className="text-[10px] text-blue-600 space-y-1.5">
+                          <div className="mt-4 p-3 bg-primary/10/50 border border-primary/20/50 rounded-lg space-y-2">
+                            <p className="text-xs font-medium text-primary">사용 가이드</p>
+                            <div className="text-[10px] text-primary space-y-1.5">
                               <p className="font-medium">1. 소스 테이블 필터링 활성화 후:</p>
                               <ul className="list-disc pl-4 space-y-0.5">
                                 <li><span className="font-medium">항목 검색</span>: 검색 모달에서 필터링된 데이터만 표시</li>
diff --git a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
index 0dbc5033..76aa8518 100644
--- a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
+++ b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
@@ -720,7 +720,7 @@ export function AggregationWidgetComponent({
             <span>{dataSourceComponentId}</span>
           )}
           {(filters || []).length > 0 && (
-            <span className="text-blue-500">필터 {filters?.length}개</span>
+            <span className="text-primary">필터 {filters?.length}개</span>
           )}
         </div>
         <div
diff --git a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx
index bd29c7fc..1f53ce7a 100644
--- a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx
@@ -529,7 +529,7 @@ export function AggregationWidgetConfigPanel({
             
             {/* 현재 선택된 테이블 표시 */}
             <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-              <Database className="h-4 w-4 text-blue-500" />
+              <Database className="h-4 w-4 text-primary" />
               <div className="flex-1">
                 <div className="text-xs font-medium">
                   {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -584,7 +584,7 @@ export function AggregationWidgetConfigPanel({
                               !config.useCustomTable ? "opacity-100" : "opacity-0"
                             )}
                           />
-                          <Database className="mr-2 h-3 w-3 text-blue-500" />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
                           {screenTableName}
                         </CommandItem>
                       </CommandGroup>
@@ -663,7 +663,7 @@ export function AggregationWidgetConfigPanel({
         {/* 선택 데이터 설명 (selection 타입일 때) */}
         {dataSourceType === "selection" && (
           <div className="space-y-2 mt-3">
-            <div className="rounded-md border bg-blue-50 p-3 text-xs text-blue-700">
+            <div className="rounded-md border bg-primary/10 p-3 text-xs text-primary">
               <p className="font-medium mb-1">선택된 행 집계</p>
               <p className="text-[10px]">
                 화면에서 사용자가 선택(체크)한 행들만 집계합니다.
@@ -674,7 +674,7 @@ export function AggregationWidgetConfigPanel({
             {/* 테이블 선택 (어느 테이블의 선택 데이터인지) */}
             <Label className="text-xs">대상 테이블</Label>
             <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-              <Database className="h-4 w-4 text-blue-500" />
+              <Database className="h-4 w-4 text-primary" />
               <div className="flex-1">
                 <div className="text-xs font-medium">
                   {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
diff --git a/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx b/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
index e1115936..42af8aa4 100644
--- a/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
+++ b/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
@@ -87,7 +87,7 @@ const STATUS_CONFIG = {
 } as const;
 
 const REQUEST_STATUS_CONFIG = {
-  requested: { label: "요청됨", color: "text-blue-600", bg: "bg-blue-50" },
+  requested: { label: "요청됨", color: "text-primary", bg: "bg-primary/10" },
   in_progress: { label: "진행 중", color: "text-amber-600", bg: "bg-amber-50" },
   approved: { label: "승인 완료", color: "text-emerald-600", bg: "bg-emerald-50" },
   rejected: { label: "반려", color: "text-rose-600", bg: "bg-rose-50" },
@@ -142,7 +142,7 @@ function getLineBadges(
   if (line.proxy_for) {
     badges.push({
       label: "대결",
-      className: "border-orange-300 text-orange-600",
+      className: "border-orange-300 text-amber-600",
     });
   }
 
@@ -156,7 +156,7 @@ function getLineBadges(
   if (request.approval_type === "self") {
     badges.push({
       label: "전결",
-      className: "border-blue-300 text-blue-600",
+      className: "border-primary/40 text-primary",
     });
   }
 
@@ -404,7 +404,7 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
             <FileCheck className="h-4 w-4 text-muted-foreground" />
             <span className="text-xs font-medium">{request.title}</span>
             {urgency === "urgent" && (
-              <span className="inline-block h-2 w-2 rounded-full bg-orange-500" />
+              <span className="inline-block h-2 w-2 rounded-full bg-amber-500" />
             )}
             {urgency === "critical" && (
               <span className="inline-block h-2 w-2 rounded-full bg-destructive" />
@@ -419,12 +419,12 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
               </Badge>
             )}
             {request.approval_type === "self" && (
-              <Badge variant="outline" className="h-4 border-blue-300 px-1.5 text-[9px] text-blue-600">
+              <Badge variant="outline" className="h-4 border-primary/40 px-1.5 text-[9px] text-primary">
                 전결
               </Badge>
             )}
             {approvalMode === "parallel" && (
-              <span className="rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-600">
+              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
                 동시결재
               </span>
             )}
@@ -496,7 +496,7 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
                           <span className="text-muted-foreground">(자동 통보)</span>
                         )}
                         {line.proxy_for && (
-                          <span className="text-orange-600">({line.proxy_for} 대결)</span>
+                          <span className="text-amber-600">({line.proxy_for} 대결)</span>
                         )}
                         {showTimestamp && line.processed_at && (
                           <span className="text-muted-foreground">{formatDate(line.processed_at)}</span>
@@ -804,7 +804,7 @@ const VerticalStepper: React.FC<StepperProps> = ({
                           <span className="text-[9px] text-muted-foreground">(자동 통보)</span>
                         )}
                         {line.proxy_for && (
-                          <span className="text-[9px] text-orange-600">({line.proxy_for} 대결)</span>
+                          <span className="text-[9px] text-amber-600">({line.proxy_for} 대결)</span>
                         )}
                       </div>
                       {showTimestamp && line.processed_at && formatDate && (
diff --git a/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx b/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
index d22d6b9d..994cad30 100644
--- a/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
@@ -182,7 +182,7 @@ export const ApprovalStepConfigPanel: React.FC<ApprovalStepConfigPanelProps> = (
                           <div className="flex flex-col">
                             <span>{table.displayName}</span>
                             {table.displayName !== table.tableName && (
-                              <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                              <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
                             )}
                           </div>
                         </CommandItem>
@@ -271,7 +271,7 @@ export const ApprovalStepConfigPanel: React.FC<ApprovalStepConfigPanelProps> = (
                             <div className="flex flex-col">
                               <span>{col.label}</span>
                               {col.label !== col.columnName && (
-                                <span className="text-[10px] text-gray-400">{col.columnName}</span>
+                                <span className="text-[10px] text-muted-foreground/70">{col.columnName}</span>
                               )}
                             </div>
                           </CommandItem>
diff --git a/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx b/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx
index bd5f3d92..0c8ed97b 100644
--- a/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx
+++ b/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx
@@ -1227,17 +1227,17 @@ export function BomItemEditorComponent({
         {/* 설정 요약 뱃지 */}
         <div className="flex flex-wrap gap-1">
           {cfg.mainTableName && (
-            <span className="rounded bg-orange-100 px-1.5 py-0.5 text-[10px] text-orange-700">
+            <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] text-orange-700">
               저장: {cfg.mainTableName}
             </span>
           )}
           {cfg.dataSource?.sourceTable && (
-            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700">
+            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary">
               소스: {cfg.dataSource.sourceTable}
             </span>
           )}
           {cfg.parentKeyColumn && (
-            <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] text-green-700">
+            <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] text-emerald-700">
               트리: {cfg.parentKeyColumn}
             </span>
           )}
@@ -1263,7 +1263,7 @@ export function BomItemEditorComponent({
                       key={col.key}
                       className={cn(
                         "px-2 py-1.5 text-left font-medium",
-                        col.isSourceDisplay && "text-blue-600",
+                        col.isSourceDisplay && "text-primary",
                       )}
                       style={{ width: col.width && col.width !== "auto" ? col.width : undefined }}
                     >
@@ -1297,7 +1297,7 @@ export function BomItemEditorComponent({
                     {visibleColumns.map((col: any) => (
                       <td key={col.key} className="px-1.5 py-0.5">
                         {col.isSourceDisplay ? (
-                          <span className="truncate text-blue-600">
+                          <span className="truncate text-primary">
                             {getDummyValue(col, rowIdx) || col.title}
                           </span>
                         ) : col.editable !== false ? (
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx b/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx
index 98a9e823..cd89fff4 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx
@@ -468,18 +468,18 @@ export function BomExcelUploadModal({
                       key={row.rowIndex}
                       className={cn(
                         "border-t hover:bg-muted/30",
-                        row.isHeader && "bg-blue-50/50",
+                        row.isHeader && "bg-primary/10/50",
                         !row.valid && "bg-destructive/5",
                       )}
                     >
                       <td className="px-2 py-1 text-muted-foreground">{row.rowIndex}</td>
                       <td className="px-2 py-1">
                         {row.isHeader ? (
-                          <span className="text-[10px] text-blue-600 font-medium bg-blue-50 px-1.5 py-0.5 rounded">
+                          <span className="text-[10px] text-primary font-medium bg-primary/10 px-1.5 py-0.5 rounded">
                             {isVersionMode ? "건너뜀" : "마스터"}
                           </span>
                         ) : row.valid ? (
-                          <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+                          <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
                         ) : (
                           <span className="flex items-center gap-1" title={row.error}>
                             <AlertCircle className="h-3.5 w-3.5 text-destructive" />
@@ -490,7 +490,7 @@ export function BomExcelUploadModal({
                         <span
                           className={cn(
                             "inline-block rounded px-1.5 py-0.5 text-[10px] font-mono",
-                            row.isHeader ? "bg-blue-100 text-blue-700 font-medium" : "bg-muted",
+                            row.isHeader ? "bg-primary/10 text-primary font-medium" : "bg-muted",
                           )}
                           style={{ marginLeft: `${row.level * 8}px` }}
                         >
@@ -534,8 +534,8 @@ export function BomExcelUploadModal({
         {step === "result" && uploadResult && (
           <div className="space-y-4 py-4">
             <div className="flex flex-col items-center text-center">
-              <div className="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mb-3">
-                <CheckCircle2 className="h-7 w-7 text-green-600" />
+              <div className="w-14 h-14 rounded-full bg-emerald-100 flex items-center justify-center mb-3">
+                <CheckCircle2 className="h-7 w-7 text-emerald-600" />
               </div>
               <h3 className="text-lg font-semibold">
                 {isVersionMode ? "새 버전 생성 완료" : "BOM 생성 완료"}
@@ -548,12 +548,12 @@ export function BomExcelUploadModal({
             <div className={cn("grid gap-3 max-w-xs mx-auto", isVersionMode ? "grid-cols-1" : "grid-cols-2")}>
               {!isVersionMode && (
                 <div className="rounded-lg bg-muted/50 p-3 text-center">
-                  <div className="text-2xl font-bold text-blue-600">1</div>
+                  <div className="text-2xl font-bold text-primary">1</div>
                   <div className="text-xs text-muted-foreground">BOM 마스터</div>
                 </div>
               )}
               <div className="rounded-lg bg-muted/50 p-3 text-center">
-                <div className="text-2xl font-bold text-green-600">{uploadResult.insertedCount}</div>
+                <div className="text-2xl font-bold text-emerald-600">{uploadResult.insertedCount}</div>
                 <div className="text-xs text-muted-foreground">하위품목</div>
               </div>
             </div>
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx b/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx
index 26119aaa..4f2f6092 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx
@@ -32,10 +32,10 @@ interface BomHistoryModalProps {
 }
 
 const CHANGE_TYPE_STYLE: Record<string, string> = {
-  "등록": "bg-blue-50 text-blue-600 ring-blue-200",
+  "등록": "bg-primary/10 text-primary ring-primary/20",
   "수정": "bg-amber-50 text-amber-600 ring-amber-200",
   "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
-  "삭제": "bg-red-50 text-red-600 ring-red-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
 };
 
 export function BomHistoryModal({ open, onOpenChange, bomId, tableName = "bom_history" }: BomHistoryModalProps) {
@@ -95,36 +95,36 @@ export function BomHistoryModal({ open, onOpenChange, bomId, tableName = "bom_hi
             </div>
           ) : history.length === 0 ? (
             <div className="flex h-32 items-center justify-center">
-              <p className="text-sm text-gray-400">이력이 없습니다</p>
+              <p className="text-sm text-muted-foreground/70">이력이 없습니다</p>
             </div>
           ) : (
             <table className="w-full text-xs">
-              <thead className="sticky top-0 bg-gray-50">
+              <thead className="sticky top-0 bg-muted">
                 <tr className="border-b">
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "50px" }}>차수</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "50px" }}>버전</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "70px" }}>변경구분</th>
-                  <th className="px-3 py-2.5 text-left text-[11px] font-semibold text-gray-500">변경내용</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "70px" }}>변경자</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "130px" }}>변경일시</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "50px" }}>차수</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "50px" }}>버전</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "70px" }}>변경구분</th>
+                  <th className="px-3 py-2.5 text-left text-[11px] font-semibold text-muted-foreground">변경내용</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "70px" }}>변경자</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "130px" }}>변경일시</th>
                 </tr>
               </thead>
               <tbody>
                 {history.map((item, idx) => (
-                  <tr key={item.id} className={cn("border-b border-gray-100", idx % 2 === 0 ? "bg-white" : "bg-gray-50/30")}>
+                  <tr key={item.id} className={cn("border-b border-border", idx % 2 === 0 ? "bg-white" : "bg-muted/30")}>
                     <td className="px-3 py-2.5 text-center tabular-nums">{item.revision || "-"}</td>
                     <td className="px-3 py-2.5 text-center tabular-nums">{item.version || "-"}</td>
                     <td className="px-3 py-2.5 text-center">
                       <span className={cn(
                         "inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset",
-                        CHANGE_TYPE_STYLE[item.change_type] || "bg-gray-50 text-gray-500 ring-gray-200",
+                        CHANGE_TYPE_STYLE[item.change_type] || "bg-muted text-muted-foreground ring-gray-200",
                       )}>
                         {item.change_type}
                       </span>
                     </td>
-                    <td className="px-3 py-2.5 text-gray-700">{item.change_description || "-"}</td>
-                    <td className="px-3 py-2.5 text-center text-gray-600">{item.changed_by || "-"}</td>
-                    <td className="px-3 py-2.5 text-center text-gray-400">{formatDate(item.changed_date)}</td>
+                    <td className="px-3 py-2.5 text-foreground">{item.change_description || "-"}</td>
+                    <td className="px-3 py-2.5 text-center text-muted-foreground">{item.changed_by || "-"}</td>
+                    <td className="px-3 py-2.5 text-center text-muted-foreground/70">{formatDate(item.changed_date)}</td>
                   </tr>
                 ))}
               </tbody>
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx b/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx
index e98dbf88..7708f398 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx
@@ -448,12 +448,12 @@ export function BomTreeComponent({
 
   const getItemTypeBadge = (type: string) => {
     const map: Record<string, string> = {
-      product: "bg-blue-50 text-blue-600 ring-blue-200",
+      product: "bg-primary/10 text-primary ring-primary/20",
       semi: "bg-amber-50 text-amber-600 ring-amber-200",
       material: "bg-emerald-50 text-emerald-600 ring-emerald-200",
       part: "bg-purple-50 text-purple-600 ring-purple-200",
     };
-    return map[type] || "bg-gray-50 text-gray-500 ring-gray-200";
+    return map[type] || "bg-muted text-muted-foreground ring-gray-200";
   };
 
   const getItemIcon = (type: string) => {
@@ -463,12 +463,12 @@ export function BomTreeComponent({
 
   const getItemIconColor = (type: string) => {
     const map: Record<string, string> = {
-      product: "text-blue-500",
+      product: "text-primary",
       semi: "text-amber-500",
       material: "text-emerald-500",
       part: "text-purple-500",
     };
-    return map[type] || "text-gray-400";
+    return map[type] || "text-muted-foreground/70";
   };
 
   // ─── 셀 렌더링 ───
@@ -491,18 +491,18 @@ export function BomTreeComponent({
     if (col.key === "level") {
       const displayLevel = node._isVirtualRoot ? 0 : depth;
       return (
-        <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-gray-100 text-[10px] font-medium text-gray-600">
+        <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-muted text-[10px] font-medium text-muted-foreground">
           {displayLevel}
         </span>
       );
     }
 
     if (col.key === "child_item_code") {
-      return <span className="font-mono text-xs text-gray-700">{value || "-"}</span>;
+      return <span className="font-mono text-xs text-foreground">{value || "-"}</span>;
     }
 
     if (col.key === "child_item_name") {
-      return <span className="font-medium text-gray-900">{value || "-"}</span>;
+      return <span className="font-medium text-foreground">{value || "-"}</span>;
     }
 
     if (col.key === "status") {
@@ -512,7 +512,7 @@ export function BomTreeComponent({
 
     if (col.key === "quantity" || col.key === "base_qty") {
       return (
-        <span className="font-medium tabular-nums text-gray-800">
+        <span className="font-medium tabular-nums text-foreground">
           {value != null && value !== "" && value !== "0" ? value : "-"}
         </span>
       );
@@ -525,23 +525,23 @@ export function BomTreeComponent({
 
     if (col.key === "loss_rate") {
       const num = Number(value);
-      if (!num) return <span className="text-gray-300">-</span>;
+      if (!num) return <span className="text-muted-foreground/50">-</span>;
       return <span className="tabular-nums text-amber-600">{value}%</span>;
     }
 
     if (col.key === "revision") {
       return (
-        <span className="tabular-nums text-gray-600">
+        <span className="tabular-nums text-muted-foreground">
           {value != null && value !== "" && value !== "0" ? value : "-"}
         </span>
       );
     }
 
     if (col.key === "unit") {
-      return <span className="text-gray-500">{value || "-"}</span>;
+      return <span className="text-muted-foreground">{value || "-"}</span>;
     }
 
-    return <span className="text-gray-600">{value ?? "-"}</span>;
+    return <span className="text-muted-foreground">{value ?? "-"}</span>;
   };
 
   // ─── 디자인 모드 ───
@@ -553,7 +553,7 @@ export function BomTreeComponent({
       if (col.key === "level") return rowIdx === 0 ? "0" : "1";
       if (col.key.includes("type") || col.key.includes("division")) {
         const badge = rowIdx === 0
-          ? { bg: "bg-blue-50 text-blue-500 ring-blue-200", label: "제품" }
+          ? { bg: "bg-primary/10 text-primary ring-primary/20", label: "제품" }
           : { bg: "bg-amber-50 text-amber-500 ring-amber-200", label: "반제품" };
         return (
           <span className={cn("rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", badge.bg)}>
@@ -581,27 +581,27 @@ export function BomTreeComponent({
         {/* 헤더 (실제 화면과 동일 구조) */}
         <div className="border-b px-5 py-3">
           <div className="flex items-center gap-2.5">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50">
-              <Package className="h-4 w-4 text-blue-500" />
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+              <Package className="h-4 w-4 text-primary" />
             </div>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <h3 className="text-sm font-semibold text-gray-400">BOM 상세정보</h3>
-                <span className="inline-flex items-center rounded-md bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-500 ring-1 ring-inset ring-blue-200">
+                <h3 className="text-sm font-semibold text-muted-foreground/70">BOM 상세정보</h3>
+                <span className="inline-flex items-center rounded-md bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary ring-1 ring-inset ring-primary/20">
                   제품
                 </span>
               </div>
-              <div className="mt-0.5 flex gap-3 text-[10px] text-gray-300">
-                <span>품목코드 <b className="text-gray-400">SAMPLE-001</b></span>
-                <span>기준수량 <b className="text-gray-400">1</b></span>
+              <div className="mt-0.5 flex gap-3 text-[10px] text-muted-foreground/50">
+                <span>품목코드 <b className="text-muted-foreground/70">SAMPLE-001</b></span>
+                <span>기준수량 <b className="text-muted-foreground/70">1</b></span>
               </div>
             </div>
           </div>
         </div>
 
         {/* 툴바 (실제 화면과 동일 구조) */}
-        <div className="flex items-center border-b bg-gray-50/50 px-5 py-1.5">
-          <span className="text-xs font-medium text-gray-500">BOM 구성</span>
+        <div className="flex items-center border-b bg-muted/50 px-5 py-1.5">
+          <span className="text-xs font-medium text-muted-foreground">BOM 구성</span>
           <span className="ml-2 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">2</span>
           <div className="ml-auto flex items-center gap-1">
             {showHistory && (
@@ -616,17 +616,17 @@ export function BomTreeComponent({
                 버전
               </Button>
             )}
-            <div className="mx-1 h-4 w-px bg-gray-200" />
+            <div className="mx-1 h-4 w-px bg-muted/80" />
             <div className="flex overflow-hidden rounded-md border">
               <span className="h-6 bg-primary px-2 text-[10px] font-medium leading-6 text-primary-foreground">트리</span>
-              <span className="h-6 border-l bg-white px-2 text-[10px] font-medium leading-6 text-gray-500">레벨</span>
+              <span className="h-6 border-l bg-white px-2 text-[10px] font-medium leading-6 text-muted-foreground">레벨</span>
             </div>
             {features.showExpandAll !== false && (
               <div className="flex gap-1">
-                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-gray-400">
+                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70">
                   <Expand className="h-3 w-3" /> 정전개
                 </Button>
-                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-gray-400">
+                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70">
                   <Shrink className="h-3 w-3" /> 역전개
                 </Button>
               </div>
@@ -637,15 +637,15 @@ export function BomTreeComponent({
         {/* 테이블 */}
         {configuredColumns.length === 0 ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6">
-            <AlertCircle className="h-8 w-8 text-gray-200" />
-            <p className="text-sm font-medium text-gray-400">컬럼 미설정</p>
-            <p className="text-[11px] text-gray-300">설정 패널 &gt; 컬럼 탭에서 표시할 컬럼을 선택하세요</p>
+            <AlertCircle className="h-8 w-8 text-muted-foreground/30" />
+            <p className="text-sm font-medium text-muted-foreground/70">컬럼 미설정</p>
+            <p className="text-[11px] text-muted-foreground/50">설정 패널 &gt; 컬럼 탭에서 표시할 컬럼을 선택하세요</p>
           </div>
         ) : (
           <div className="flex-1 overflow-auto">
             <table className="w-full border-collapse text-xs">
               <thead className="sticky top-0 z-10">
-                <tr className="border-b bg-gray-50">
+                <tr className="border-b bg-muted">
                   <th className="px-2 py-2.5 text-center" style={{ width: "52px" }}></th>
                   {configuredColumns.map((col: TreeColumnDef) => {
                     const centered = ["quantity", "loss_rate", "base_qty", "revision", "seq_no", "unit", "level"].includes(col.key)
@@ -654,7 +654,7 @@ export function BomTreeComponent({
                       <th
                         key={col.key}
                         className={cn(
-                          "px-3 py-2.5 text-[11px] font-semibold text-gray-500",
+                          "px-3 py-2.5 text-[11px] font-semibold text-muted-foreground",
                           centered ? "text-center" : "text-left",
                         )}
                       >
@@ -666,30 +666,30 @@ export function BomTreeComponent({
               </thead>
               <tbody>
                 {/* 0레벨 루트 */}
-                <tr className="border-b hover:bg-gray-50/50">
+                <tr className="border-b hover:bg-muted/50">
                   <td className="px-2 py-2 text-center">
-                    <ChevronDown className="inline h-3.5 w-3.5 text-gray-400" />
+                    <ChevronDown className="inline h-3.5 w-3.5 text-muted-foreground/70" />
                   </td>
                   {configuredColumns.map((col: TreeColumnDef) => {
                     const centered = ["quantity", "loss_rate", "base_qty", "revision", "seq_no", "unit", "level"].includes(col.key)
                       || col.key.includes("qty") || col.key.includes("quantity");
                     return (
-                      <td key={col.key} className={cn("px-3 py-2 text-gray-600", centered && "text-center")}>
+                      <td key={col.key} className={cn("px-3 py-2 text-muted-foreground", centered && "text-center")}>
                         {previewSampleValue(col, 0)}
                       </td>
                     );
                   })}
                 </tr>
                 {/* 1레벨 자식 */}
-                <tr className="border-b hover:bg-gray-50/50">
+                <tr className="border-b hover:bg-muted/50">
                   <td className="px-2 py-2 text-center" style={{ paddingLeft: `${INDENT_PX + 8}px` }}>
-                    <Layers className="inline h-3.5 w-3.5 text-gray-300" />
+                    <Layers className="inline h-3.5 w-3.5 text-muted-foreground/50" />
                   </td>
                   {configuredColumns.map((col: TreeColumnDef) => {
                     const centered = ["quantity", "loss_rate", "base_qty", "revision", "seq_no", "unit", "level"].includes(col.key)
                       || col.key.includes("qty") || col.key.includes("quantity");
                     return (
-                      <td key={col.key} className={cn("px-3 py-2 text-gray-400", centered && "text-center")}>
+                      <td key={col.key} className={cn("px-3 py-2 text-muted-foreground/70", centered && "text-center")}>
                         {previewSampleValue(col, 1)}
                       </td>
                     );
@@ -707,11 +707,11 @@ export function BomTreeComponent({
 
   if (!selectedBomId) {
     return (
-      <div className="flex h-full items-center justify-center bg-gray-50/30">
+      <div className="flex h-full items-center justify-center bg-muted/30">
         <div className="text-center">
-          <Package className="mx-auto mb-3 h-10 w-10 text-gray-200" />
-          <p className="text-sm font-medium text-gray-400">BOM을 선택해주세요</p>
-          <p className="mt-1 text-xs text-gray-300">좌측 목록에서 BOM을 선택하면 구성이 표시됩니다</p>
+          <Package className="mx-auto mb-3 h-10 w-10 text-muted-foreground/30" />
+          <p className="text-sm font-medium text-muted-foreground/70">BOM을 선택해주세요</p>
+          <p className="mt-1 text-xs text-muted-foreground/50">좌측 목록에서 BOM을 선택하면 구성이 표시됩니다</p>
         </div>
       </div>
     );
@@ -783,7 +783,7 @@ export function BomTreeComponent({
             </div>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <h3 className="truncate text-sm font-semibold text-gray-900">
+                <h3 className="truncate text-sm font-semibold text-foreground">
                   {headerInfo.item_name || "-"}
                 </h3>
                 <span className={cn(
@@ -796,15 +796,15 @@ export function BomTreeComponent({
                   "rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset",
                   headerInfo.status === "active"
                     ? "bg-emerald-50 text-emerald-600 ring-emerald-200"
-                    : "bg-gray-50 text-gray-400 ring-gray-200",
+                    : "bg-muted text-muted-foreground/70 ring-gray-200",
                 )}>
                   {headerInfo.status === "active" ? "사용" : "미사용"}
                 </span>
               </div>
-              <div className="mt-0.5 flex gap-3 text-[11px] text-gray-400">
-                <span>품목코드 <b className="text-gray-600">{headerInfo.item_code || "-"}</b></span>
-                <span>기준수량 <b className="text-gray-600">{headerInfo.base_qty || "1"}</b></span>
-                <span>버전 <b className="text-gray-600">v{headerInfo.version || "1"} (차수 {headerInfo.revision || "1"})</b></span>
+              <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground/70">
+                <span>품목코드 <b className="text-muted-foreground">{headerInfo.item_code || "-"}</b></span>
+                <span>기준수량 <b className="text-muted-foreground">{headerInfo.base_qty || "1"}</b></span>
+                <span>버전 <b className="text-muted-foreground">v{headerInfo.version || "1"} (차수 {headerInfo.revision || "1"})</b></span>
               </div>
             </div>
           </div>
@@ -812,8 +812,8 @@ export function BomTreeComponent({
       )}
 
       {/* 툴바 */}
-      <div className="flex items-center border-b bg-gray-50/50 px-5 py-1.5">
-        <span className="text-xs font-medium text-gray-500">BOM 구성</span>
+      <div className="flex items-center border-b bg-muted/50 px-5 py-1.5">
+        <span className="text-xs font-medium text-muted-foreground">BOM 구성</span>
         <span className="ml-2 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">
           {allFlattenedRows.length}
         </span>
@@ -849,7 +849,7 @@ export function BomTreeComponent({
             <FileSpreadsheet className="h-3 w-3" />
             엑셀
           </Button>
-          <div className="mx-1 h-4 w-px bg-gray-200" />
+          <div className="mx-1 h-4 w-px bg-muted/80" />
           <div className="flex overflow-hidden rounded-md border">
             <button
               onClick={() => setViewMode("tree")}
@@ -857,7 +857,7 @@ export function BomTreeComponent({
                 "h-6 px-2 text-[10px] font-medium transition-colors",
                 viewMode === "tree"
                   ? "bg-primary text-primary-foreground"
-                  : "bg-white text-gray-500 hover:bg-gray-50",
+                  : "bg-white text-muted-foreground hover:bg-muted",
               )}
             >
               트리
@@ -868,7 +868,7 @@ export function BomTreeComponent({
                 "h-6 border-l px-2 text-[10px] font-medium transition-colors",
                 viewMode === "level"
                   ? "bg-primary text-primary-foreground"
-                  : "bg-white text-gray-500 hover:bg-gray-50",
+                  : "bg-white text-muted-foreground hover:bg-muted",
               )}
             >
               레벨
@@ -876,11 +876,11 @@ export function BomTreeComponent({
           </div>
           {features.showExpandAll !== false && (
             <div className={cn("flex gap-1", viewMode !== "tree" && "pointer-events-none invisible")}>
-              <Button variant="ghost" size="sm" onClick={expandAll} className="h-6 gap-1 px-2 text-[10px] text-gray-400 hover:text-gray-600">
+              <Button variant="ghost" size="sm" onClick={expandAll} className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70 hover:text-muted-foreground">
                 <Expand className="h-3 w-3" />
                 정전개
               </Button>
-              <Button variant="ghost" size="sm" onClick={collapseAll} className="h-6 gap-1 px-2 text-[10px] text-gray-400 hover:text-gray-600">
+              <Button variant="ghost" size="sm" onClick={collapseAll} className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70 hover:text-muted-foreground">
                 <Shrink className="h-3 w-3" />
                 역전개
               </Button>
@@ -897,14 +897,14 @@ export function BomTreeComponent({
           </div>
         ) : displayColumns.length === 0 ? (
           <div className="flex h-40 flex-col items-center justify-center gap-2">
-            <AlertCircle className="h-6 w-6 text-gray-200" />
-            <p className="text-xs text-gray-400">표시할 컬럼이 설정되지 않았습니다</p>
-            <p className="text-[10px] text-gray-300">디자인 모드에서 컬럼을 추가하세요</p>
+            <AlertCircle className="h-6 w-6 text-muted-foreground/30" />
+            <p className="text-xs text-muted-foreground/70">표시할 컬럼이 설정되지 않았습니다</p>
+            <p className="text-[10px] text-muted-foreground/50">디자인 모드에서 컬럼을 추가하세요</p>
           </div>
         ) : treeData.length === 0 ? (
           <div className="flex h-40 flex-col items-center justify-center gap-2">
-            <Box className="h-8 w-8 text-gray-200" />
-            <p className="text-xs text-gray-400">등록된 하위 품목이 없습니다</p>
+            <Box className="h-8 w-8 text-muted-foreground/30" />
+            <p className="text-xs text-muted-foreground/70">등록된 하위 품목이 없습니다</p>
           </div>
         ) : viewMode === "level" ? (
           /* ═══ 레벨 뷰 ═══ */
@@ -922,11 +922,11 @@ export function BomTreeComponent({
               ))}
             </colgroup>
             <thead className="sticky top-0 z-10">
-              <tr className="border-b bg-gray-50">
+              <tr className="border-b bg-muted">
                 {levelColumnsForView.map((lvl) => (
                   <th
                     key={`lv-${lvl}`}
-                    className="whitespace-nowrap px-0.5 py-2.5 text-center text-[10px] font-semibold text-gray-500"
+                    className="whitespace-nowrap px-0.5 py-2.5 text-center text-[10px] font-semibold text-muted-foreground"
                   >
                     {lvl}
                   </th>
@@ -938,7 +938,7 @@ export function BomTreeComponent({
                     <th
                       key={col.key}
                       className={cn(
-                        "relative select-none whitespace-nowrap px-3 py-2.5 text-[11px] font-semibold text-gray-500",
+                        "relative select-none whitespace-nowrap px-3 py-2.5 text-[11px] font-semibold text-muted-foreground",
                         centered ? "text-center" : "text-left",
                       )}
                       style={w ? { width: `${w}px` } : undefined}
@@ -959,16 +959,16 @@ export function BomTreeComponent({
                 const displayDepth = isRoot ? 0 : depth;
 
                 const lvlDepthBg = isRoot
-                  ? "border-gray-200 bg-blue-50/50 font-medium hover:bg-blue-50/70"
+                  ? "border-border bg-primary/10/50 font-medium hover:bg-primary/10/70"
                   : selectedNodeId === node.id
-                    ? "border-gray-100 bg-primary/5"
+                    ? "border-border bg-primary/5"
                     : depth === 1
-                      ? "border-gray-100 bg-white hover:bg-gray-50/60"
+                      ? "border-border bg-white hover:bg-muted/60"
                       : depth === 2
-                        ? "border-gray-100 bg-gray-50/40 hover:bg-gray-100/50"
+                        ? "border-border bg-muted/40 hover:bg-muted/50"
                         : depth >= 3
-                          ? "border-gray-100 bg-gray-100/40 hover:bg-gray-100/60"
-                          : "border-gray-100 bg-white hover:bg-gray-50/60";
+                          ? "border-border bg-muted/40 hover:bg-muted/60"
+                          : "border-border bg-white hover:bg-muted/60";
 
                 return (
                   <tr
@@ -986,7 +986,7 @@ export function BomTreeComponent({
                         className="py-2 text-center"
                       >
                         {displayDepth === lvl ? (
-                          <Check className="mx-auto h-3.5 w-3.5 text-gray-700" />
+                          <Check className="mx-auto h-3.5 w-3.5 text-foreground" />
                         ) : null}
                       </td>
                     ))}
@@ -1019,7 +1019,7 @@ export function BomTreeComponent({
               ))}
             </colgroup>
             <thead className="sticky top-0 z-10">
-              <tr className="border-b bg-gray-50">
+              <tr className="border-b bg-muted">
                 <th className="px-2 py-2.5"></th>
                 {displayColumns.map((col) => {
                   const centered = ["quantity", "loss_rate", "level", "base_qty", "revision", "seq_no"].includes(col.key);
@@ -1028,7 +1028,7 @@ export function BomTreeComponent({
                     <th
                       key={col.key}
                       className={cn(
-                        "relative select-none px-3 py-2.5 text-[11px] font-semibold text-gray-500",
+                        "relative select-none px-3 py-2.5 text-[11px] font-semibold text-muted-foreground",
                         centered ? "text-center" : "text-left",
                       )}
                       style={{ width: w ? `${w}px` : (col.width || "auto") }}
@@ -1053,22 +1053,22 @@ export function BomTreeComponent({
                 const ItemIcon = getItemIcon(itemType);
 
                 const depthBg = isRoot
-                  ? "border-gray-200 bg-blue-50/50 font-medium hover:bg-blue-50/70"
+                  ? "border-border bg-primary/10/50 font-medium hover:bg-primary/10/70"
                   : isSelected
-                    ? "border-gray-100 bg-primary/5"
+                    ? "border-border bg-primary/5"
                     : depth === 1
-                      ? "border-gray-100 bg-white hover:bg-gray-50/60"
+                      ? "border-border bg-white hover:bg-muted/60"
                       : depth === 2
-                        ? "border-gray-100 bg-gray-50/40 hover:bg-gray-100/50"
+                        ? "border-border bg-muted/40 hover:bg-muted/50"
                         : depth >= 3
-                          ? "border-gray-100 bg-gray-100/40 hover:bg-gray-100/60"
-                          : "border-gray-100 bg-white hover:bg-gray-50/60";
+                          ? "border-border bg-muted/40 hover:bg-muted/60"
+                          : "border-border bg-white hover:bg-muted/60";
 
                 const depthBarColor = isRoot
-                  ? "bg-blue-400"
+                  ? "bg-primary/70"
                   : depth === 1 ? "bg-emerald-400"
                   : depth === 2 ? "bg-amber-400"
-                  : depth >= 3 ? "bg-purple-400" : "bg-gray-300";
+                  : depth >= 3 ? "bg-purple-400" : "bg-muted/60";
 
                 return (
                   <tr
@@ -1089,12 +1089,12 @@ export function BomTreeComponent({
                         <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
                           {hasChildren ? (
                             isExpanded ? (
-                              <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-blue-500" : "text-gray-400")} />
+                              <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-primary" : "text-muted-foreground/70")} />
                             ) : (
-                              <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-blue-500" : "text-gray-400")} />
+                              <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-primary" : "text-muted-foreground/70")} />
                             )
                           ) : (
-                            <span className="h-1 w-1 rounded-full bg-gray-300" />
+                            <span className="h-1 w-1 rounded-full bg-muted/60" />
                           )}
                         </span>
                         <span className={cn(
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx b/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx
index 48c27cc9..e437935a 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx
@@ -33,9 +33,9 @@ interface BomVersionModalProps {
 }
 
 const STATUS_STYLE: Record<string, { label: string; className: string }> = {
-  developing: { label: "개발중", className: "bg-red-50 text-red-600 ring-red-200" },
+  developing: { label: "개발중", className: "bg-destructive/10 text-destructive ring-red-200" },
   active: { label: "사용", className: "bg-emerald-50 text-emerald-600 ring-emerald-200" },
-  inactive: { label: "사용중지", className: "bg-gray-100 text-gray-500 ring-gray-200" },
+  inactive: { label: "사용중지", className: "bg-muted text-muted-foreground ring-gray-200" },
 };
 
 export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_version", detailTable = "bom_detail", onVersionLoaded }: BomVersionModalProps) {
@@ -168,7 +168,7 @@ export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_ve
             </div>
           ) : versions.length === 0 ? (
             <div className="flex h-32 items-center justify-center">
-              <p className="text-sm text-gray-400">생성된 버전이 없습니다</p>
+              <p className="text-sm text-muted-foreground/70">생성된 버전이 없습니다</p>
             </div>
           ) : (
             versions.map((ver) => {
@@ -179,12 +179,12 @@ export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_ve
                   key={ver.id}
                   className={cn(
                     "flex items-center gap-3 rounded-lg border p-3 transition-colors",
-                    ver.status === "active" ? "border-emerald-200 bg-emerald-50/30" : "border-gray-200",
+                    ver.status === "active" ? "border-emerald-200 bg-emerald-50/30" : "border-border",
                   )}
                 >
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold text-gray-900">
+                      <span className="text-sm font-semibold text-foreground">
                         Version {ver.version_name}
                       </span>
                       <span className={cn(
@@ -194,7 +194,7 @@ export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_ve
                         {st.label}
                       </span>
                     </div>
-                    <div className="mt-0.5 flex gap-3 text-[11px] text-gray-400">
+                    <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground/70">
                       <span>차수: {ver.revision}</span>
                       <span>등록일: {formatDate(ver.created_date)}</span>
                       {ver.created_by && <span>등록자: {ver.created_by}</span>}
diff --git a/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx
index ad6c88db..fd83d530 100644
--- a/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx
@@ -792,7 +792,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
       >
         <div className="text-muted-foreground text-center">
           <div className="text-lg mb-2">좌측에서 항목을 선택해주세요</div>
-          <div className="text-sm text-gray-400">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
+          <div className="text-sm text-muted-foreground/70">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
         </div>
       </div>
     );
@@ -1084,7 +1084,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         <img 
                           src={imageUrl} 
                           alt={titleValue || "이미지"}
-                          className="h-16 w-16 rounded-lg object-cover border border-gray-200"
+                          className="h-16 w-16 rounded-lg object-cover border border-border"
                           onError={(e) => {
                             // 이미지 로드 실패 시 기본 아이콘으로 대체
                             e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23e0e7ff' rx='8'/%3E%3Ctext x='32' y='40' text-anchor='middle' fill='%236366f1' font-size='24'%3E👤%3C/text%3E%3C/svg%3E";
@@ -1144,7 +1144,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                       <div className="mt-2 flex justify-end space-x-2">
                         {(componentConfig.cardStyle?.showViewButton ?? true) && (
                           <button 
-                            className="text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                            className="text-xs text-primary hover:text-primary transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardView(data);
@@ -1166,7 +1166,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         )}
                         {(componentConfig.cardStyle?.showDeleteButton ?? false) && (
                           <button 
-                            className="text-xs text-red-500 hover:text-red-700 transition-colors"
+                            className="text-xs text-destructive hover:text-destructive transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardDelete(data, index);
diff --git a/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx b/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx
index b13a5946..bbd71caa 100644
--- a/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx
@@ -367,7 +367,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
           {/* 조인 테이블별 컬럼 */}
           {Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
             <SelectGroup key={tableName}>
-              <SelectLabel className="text-xs font-semibold text-blue-600">
+              <SelectLabel className="text-xs font-semibold text-primary">
                 {tableName} (조인)
               </SelectLabel>
               {columns.map((col) => (
@@ -433,7 +433,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
                             : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                      <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                       {allTables.find(t => t.tableName === screenTableName)?.displayName || screenTableName}
                     </CommandItem>
                   </CommandGroup>
diff --git a/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
index 58554c9d..dc3e95e4 100644
--- a/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
+++ b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
@@ -69,21 +69,21 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
     const ext = fileExt.toLowerCase();
 
     if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
-      return <ImageIcon className="h-5 w-5 text-blue-500" />;
+      return <ImageIcon className="h-5 w-5 text-primary" />;
     } else if (["pdf", "doc", "docx", "txt", "rtf"].includes(ext)) {
-      return <FileText className="h-5 w-5 text-red-500" />;
+      return <FileText className="h-5 w-5 text-destructive" />;
     } else if (["xls", "xlsx", "csv"].includes(ext)) {
-      return <FileText className="h-5 w-5 text-green-500" />;
+      return <FileText className="h-5 w-5 text-emerald-500" />;
     } else if (["ppt", "pptx"].includes(ext)) {
-      return <Presentation className="h-5 w-5 text-orange-500" />;
+      return <Presentation className="h-5 w-5 text-amber-500" />;
     } else if (["mp4", "avi", "mov", "webm"].includes(ext)) {
       return <Video className="h-5 w-5 text-purple-500" />;
     } else if (["mp3", "wav", "ogg"].includes(ext)) {
       return <Music className="h-5 w-5 text-pink-500" />;
     } else if (["zip", "rar", "7z"].includes(ext)) {
-      return <Archive className="h-5 w-5 text-yellow-500" />;
+      return <Archive className="h-5 w-5 text-amber-500" />;
     } else {
-      return <File className="h-5 w-5 text-gray-500" />;
+      return <File className="h-5 w-5 text-muted-foreground" />;
     }
   };
 
@@ -241,7 +241,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
         <DialogContent className="max-h-[90vh] w-[1400px] max-w-[95vw] overflow-hidden [&>button]:hidden">
           <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <DialogTitle className="text-lg font-semibold">파일 관리 ({uploadedFiles.length}개)</DialogTitle>
-            <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-gray-100" onClick={onClose} title="닫기">
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-muted" onClick={onClose} title="닫기">
               <X className="h-4 w-4" />
             </Button>
           </DialogHeader>
@@ -250,7 +250,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             {/* 파일 업로드 영역 - readonly/disabled이면 숨김 */}
             {!isDesignMode && !config.readonly && !config.disabled && (
               <div
-                className={`cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors ${dragOver ? "border-blue-400 bg-blue-50" : "border-gray-300"} hover:border-gray-400 ${uploading ? "opacity-75" : ""} `}
+                className={`cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors ${dragOver ? "border-primary/60 bg-primary/10" : "border-input"} hover:border-input ${uploading ? "opacity-75" : ""} `}
                 onClick={() => {
                   fileInputRef.current?.click();
                 }}
@@ -269,13 +269,13 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
 
                 {uploading ? (
                   <div className="flex items-center justify-center gap-2">
-                    <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-blue-600"></div>
-                    <span className="text-sm font-medium text-blue-600">업로드 중...</span>
+                    <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary"></div>
+                    <span className="text-sm font-medium text-primary">업로드 중...</span>
                   </div>
                 ) : (
                   <div className="flex items-center justify-center gap-3">
-                    <Upload className="h-6 w-6 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-700">파일을 드래그하거나 클릭하여 업로드하세요</p>
+                    <Upload className="h-6 w-6 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-foreground">파일을 드래그하거나 클릭하여 업로드하세요</p>
                   </div>
                 )}
               </div>
@@ -284,7 +284,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             {/* 좌우 분할 레이아웃 - 좌측 넓게, 우측 고정 너비 */}
             <div className="flex min-h-0 flex-1 gap-4">
               {/* 좌측: 이미지 미리보기 (확대/축소 가능) - showPreview가 false면 숨김 */}
-              {(config.showPreview !== false) && <div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-gray-200 bg-gray-900">
+              {(config.showPreview !== false) && <div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-border bg-foreground">
                 {/* 확대/축소 컨트롤 */}
                 {selectedFile && previewImageUrl && (
                   <div className="absolute top-3 left-3 z-10 flex items-center gap-1 rounded-lg bg-black/60 p-1">
@@ -348,12 +348,12 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                       draggable={false}
                     />
                   ) : selectedFile ? (
-                    <div className="flex flex-col items-center text-gray-400">
+                    <div className="flex flex-col items-center text-muted-foreground/70">
                       {getFileIcon(selectedFile.fileExt)}
                       <p className="mt-2 text-sm">미리보기 불가능</p>
                     </div>
                   ) : (
-                    <div className="flex flex-col items-center text-gray-400">
+                    <div className="flex flex-col items-center text-muted-foreground/70">
                       <ImageIcon className="mb-2 h-16 w-16" />
                       <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
                     </div>
@@ -369,10 +369,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
               </div>}
 
               {/* 우측: 파일 목록 - showFileList가 false면 숨김, showPreview가 false면 전체 너비 */}
-              {(config.showFileList !== false) && <div className={`flex shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 ${config.showPreview !== false ? "w-[400px]" : "flex-1"}`}>
-                <div className="border-b border-gray-200 bg-gray-50 p-3">
+              {(config.showFileList !== false) && <div className={`flex shrink-0 flex-col overflow-hidden rounded-lg border border-border ${config.showPreview !== false ? "w-[400px]" : "flex-1"}`}>
+                <div className="border-b border-border bg-muted p-3">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-medium text-gray-700">업로드된 파일</h3>
+                    <h3 className="text-sm font-medium text-foreground">업로드된 파일</h3>
                     {uploadedFiles.length > 0 && (
                       <Badge variant="secondary" className="text-xs">
                         총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
@@ -387,20 +387,20 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                       {uploadedFiles.map((file) => (
                         <div
                           key={file.objid}
-                          className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-colors ${selectedFile?.objid === file.objid ? "border border-blue-200 bg-blue-50" : "bg-gray-50 hover:bg-gray-100"} `}
+                          className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-colors ${selectedFile?.objid === file.objid ? "border border-primary/20 bg-primary/10" : "bg-muted hover:bg-muted"} `}
                           onClick={() => handleFileClick(file)}
                         >
                           <div className="flex-shrink-0">{getFileIcon(file.fileExt)}</div>
                           <div className="min-w-0 flex-1">
                             <div className="flex items-center gap-2">
-                              <span className="truncate text-sm font-medium text-gray-900">{file.realFileName}</span>
+                              <span className="truncate text-sm font-medium text-foreground">{file.realFileName}</span>
                               {file.isRepresentative && (
                                 <Badge variant="default" className="h-5 px-1.5 text-xs">
                                   대표
                                 </Badge>
                               )}
                             </div>
-                            <p className="text-xs text-gray-500">
+                            <p className="text-xs text-muted-foreground">
                               {config.showFileSize !== false && <>{formatFileSize(file.fileSize)} • </>}{file.fileExt.toUpperCase()}
                             </p>
                           </div>
@@ -449,7 +449,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                               <Button
                                 variant="ghost"
                                 size="sm"
-                                className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   onFileDelete(file);
@@ -464,10 +464,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                       ))}
                     </div>
                   ) : (
-                    <div className="flex flex-col items-center justify-center py-8 text-gray-500">
-                      <File className="mb-3 h-12 w-12 text-gray-300" />
-                      <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
-                      <p className="mt-1 text-xs text-gray-500">
+                    <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                      <File className="mb-3 h-12 w-12 text-muted-foreground/50" />
+                      <p className="text-sm font-medium text-muted-foreground">업로드된 파일이 없습니다</p>
+                      <p className="mt-1 text-xs text-muted-foreground">
                         {isDesignMode
                           ? "디자인 모드에서는 파일을 업로드할 수 없습니다"
                           : "위의 영역에 파일을 업로드하세요"}
diff --git a/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
index de55bf2a..0ba94b5d 100644
--- a/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
@@ -34,31 +34,31 @@ const getFileIcon = (extension: string) => {
   const ext = extension.toLowerCase().replace(".", "");
 
   if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
-    return <FileImage className="h-6 w-6 text-blue-500" />;
+    return <FileImage className="h-6 w-6 text-primary" />;
   }
   if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
     return <FileVideo className="h-6 w-6 text-purple-500" />;
   }
   if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
-    return <FileAudio className="h-6 w-6 text-green-500" />;
+    return <FileAudio className="h-6 w-6 text-emerald-500" />;
   }
   if (["pdf"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-red-500" />;
+    return <FileText className="h-6 w-6 text-destructive" />;
   }
   if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-blue-600" />;
+    return <FileText className="h-6 w-6 text-primary" />;
   }
   if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-green-600" />;
+    return <FileText className="h-6 w-6 text-emerald-600" />;
   }
   if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
-    return <Presentation className="h-6 w-6 text-orange-500" />;
+    return <Presentation className="h-6 w-6 text-amber-500" />;
   }
   if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
-    return <Archive className="h-6 w-6 text-gray-500" />;
+    return <Archive className="h-6 w-6 text-muted-foreground" />;
   }
 
-  return <File className="h-6 w-6 text-gray-400" />;
+  return <File className="h-6 w-6 text-muted-foreground/70" />;
 };
 
 export interface FileUploadComponentProps {
diff --git a/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
index 36e37044..0695b730 100644
--- a/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
+++ b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
@@ -318,7 +318,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (isLoading) {
       return (
         <div className="flex h-96 items-center justify-center">
-          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-primary"></div>
         </div>
       );
     }
@@ -326,7 +326,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (previewError) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <AlertTriangle className="mb-4 h-16 w-16 text-yellow-500" />
+          <AlertTriangle className="mb-4 h-16 w-16 text-amber-500" />
           <p className="mb-2 text-lg font-medium">미리보기 불가</p>
           <p className="text-center text-sm">{previewError}</p>
           <Button variant="outline" onClick={() => onDownload?.(file)} className="mt-4">
@@ -375,7 +375,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // PDF 파일 - 브라우저 기본 뷰어 사용
     if (fileExt === "pdf") {
       return (
-        <div className="h-[600px] overflow-auto rounded-lg border bg-gray-50">
+        <div className="h-[600px] overflow-auto rounded-lg border bg-muted">
           <object
             data={previewUrl || ""}
             type="application/pdf"
@@ -384,9 +384,9 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
           >
             <iframe src={previewUrl || ""} className="h-full w-full rounded-lg" title="PDF Viewer Fallback">
               <div className="flex h-full flex-col items-center justify-center p-8">
-                <FileText className="mb-4 h-16 w-16 text-gray-400" />
+                <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
                 <p className="mb-2 text-lg font-medium">PDF를 표시할 수 없습니다</p>
-                <p className="mb-4 text-center text-sm text-gray-600">
+                <p className="mb-4 text-center text-sm text-muted-foreground">
                   브라우저가 PDF 표시를 지원하지 않습니다. 다운로드하여 확인해주세요.
                 </p>
                 <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -421,10 +421,10 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     ) {
       // Office 문서 안내 메시지 표시
       return (
-        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-50 p-8">
-          <FileText className="mb-6 h-20 w-20 text-blue-500" />
-          <h3 className="mb-2 text-xl font-semibold text-gray-800">Office 문서</h3>
-          <p className="mb-6 max-w-md text-center text-sm text-gray-600">
+        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-primary/5 to-indigo-50 p-8">
+          <FileText className="mb-6 h-20 w-20 text-primary" />
+          <h3 className="mb-2 text-xl font-semibold text-foreground">Office 문서</h3>
+          <p className="mb-6 max-w-md text-center text-sm text-muted-foreground">
             {fileExt === "docx" || fileExt === "doc"
               ? "Word 문서"
               : fileExt === "xlsx" || fileExt === "xls"
@@ -461,8 +461,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (["mp3", "wav", "ogg"].includes(fileExt)) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-gray-100">
-            <svg className="h-16 w-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-muted">
+            <svg className="h-16 w-16 text-muted-foreground/70" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
                 d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z"
@@ -480,7 +480,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // 기타 파일 타입
     return (
       <div className="flex h-96 flex-col items-center justify-center">
-        <FileText className="mb-4 h-16 w-16 text-gray-400" />
+        <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
         <p className="mb-2 text-lg font-medium">미리보기 불가</p>
         <p className="mb-4 text-center text-sm">{file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.</p>
         <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -511,7 +511,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
         <div className="flex-1 overflow-hidden">{renderPreview()}</div>
 
         {/* 파일 정보 및 액션 버튼 */}
-        <div className="mt-2 flex items-center space-x-4 text-sm text-gray-500">
+        <div className="mt-2 flex items-center space-x-4 text-sm text-muted-foreground">
           <span>크기: {formatFileSize(file.fileSize || file.size || 0)}</span>
           {(file.uploadedAt || file.regdate) && (
             <span>업로드: {new Date(file.uploadedAt || file.regdate || "").toLocaleString()}</span>
@@ -527,7 +527,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
             <Button
               variant="outline"
               size="sm"
-              className="text-red-600 hover:bg-red-50 hover:text-red-700"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
               onClick={() => onDelete(file)}
             >
               <Trash2 className="mr-2 h-4 w-4" />
diff --git a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx b/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
index cd84806f..89aea32f 100644
--- a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
@@ -523,8 +523,8 @@ export function LocationSwapSelectorConfigPanel({
       </div>
 
       {/* 안내 */}
-      <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-        <p className="text-xs text-blue-900 dark:text-blue-100">
+      <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+        <p className="text-xs text-primary dark:text-primary/60">
           <strong>사용 방법:</strong>
           <br />
           1. 데이터 소스에서 장소 목록을 가져올 위치를 선택합니다
diff --git a/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx b/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx
index b55907a4..da81f575 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx
+++ b/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx
@@ -1549,8 +1549,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
       {/* 필터 바 - 필터 영역에 필드가 있을 때만 표시 */}
       {filterFields.length > 0 && (
-        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-orange-50/50 dark:bg-orange-950/10">
-          <Filter className="h-3.5 w-3.5 text-orange-600 dark:text-orange-400" />
+        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-amber-50/50 dark:bg-orange-950/10">
+          <Filter className="h-3.5 w-3.5 text-amber-600 dark:text-orange-400" />
           <span className="text-xs font-medium text-orange-700 dark:text-orange-300">필터:</span>
           <div className="flex items-center gap-2 flex-wrap">
             {filterFields.map((filterField) => {
@@ -1576,13 +1576,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                         "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
                         "border transition-colors",
                         isFiltered
-                          ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
+                          ? "bg-amber-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
                           : "bg-background border-border hover:bg-accent"
                       )}
                     >
                       <span>{filterField.caption}</span>
                       {isFiltered && (
-                        <span className="bg-orange-500 text-white px-1 rounded text-[10px]">
+                        <span className="bg-amber-500 text-white px-1 rounded text-[10px]">
                           {selectedValues.length}
                         </span>
                       )}
diff --git a/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx b/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx
index 37f0862b..fd04b11c 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx
@@ -89,10 +89,10 @@ interface ColumnChipProps {
 const ColumnChip: React.FC<ColumnChipProps> = ({ column, isUsed, onClick }) => {
   const dataType = mapDbTypeToFieldType(column.data_type);
   const typeColor = {
-    number: "bg-blue-100 text-blue-700 border-blue-200",
-    string: "bg-green-100 text-green-700 border-green-200",
+    number: "bg-primary/10 text-primary border-primary/20",
+    string: "bg-emerald-100 text-emerald-700 border-emerald-200",
     date: "bg-purple-100 text-purple-700 border-purple-200",
-    boolean: "bg-orange-100 text-orange-700 border-orange-200",
+    boolean: "bg-amber-100 text-orange-700 border-orange-200",
   }[dataType];
 
   return (
@@ -376,12 +376,12 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
   return (
     <div className="space-y-4">
       {/* 사용 가이드 */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+      <div className="bg-primary/10 border border-primary/20 rounded-lg p-3">
         <div className="flex items-start gap-2">
-          <Info className="h-4 w-4 text-blue-600 mt-0.5" />
-          <div className="text-xs text-blue-800">
+          <Info className="h-4 w-4 text-primary mt-0.5" />
+          <div className="text-xs text-primary">
             <p className="font-medium mb-1">피벗 테이블 설정 방법</p>
-            <ol className="list-decimal list-inside space-y-0.5 text-blue-700">
+            <ol className="list-decimal list-inside space-y-0.5 text-primary">
               <li>데이터를 가져올 <strong>테이블</strong>을 선택하세요</li>
               <li><strong>행 그룹</strong>에 그룹화할 컬럼을 추가하세요 (예: 지역, 부서)</li>
               <li><strong>열 그룹</strong>에 가로로 펼칠 컬럼을 추가하세요 (예: 월, 분기)</li>
@@ -478,13 +478,13 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
               area="column"
               label="열 그룹"
               description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
-              icon={<Columns className="h-4 w-4 text-blue-600" />}
+              icon={<Columns className="h-4 w-4 text-primary" />}
               fields={getFieldsByArea("column")}
               columns={columns}
               onAddField={(col) => handleAddField("column", col)}
               onRemoveField={(idx) => handleRemoveField("column", idx)}
               onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
-              color="border-blue-200 bg-blue-50/50"
+              color="border-primary/20 bg-primary/10/50"
             />
 
             <AreaDropZone
diff --git a/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx b/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx
index fed43afb..7cc4e085 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx
+++ b/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx
@@ -82,17 +82,17 @@ const AREA_CONFIG: Record<
   filter: {
     title: "필터",
     icon: <Filter className="h-3.5 w-3.5" />,
-    color: "bg-orange-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
+    color: "bg-amber-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
   },
   column: {
     title: "열",
     icon: <Columns className="h-3.5 w-3.5" />,
-    color: "bg-blue-50 border-blue-200 dark:bg-blue-950/20 dark:border-blue-800",
+    color: "bg-primary/10 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
   },
   row: {
     title: "행",
     icon: <Rows className="h-3.5 w-3.5" />,
-    color: "bg-green-50 border-green-200 dark:bg-green-950/20 dark:border-green-800",
+    color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-950/20 dark:border-emerald-800",
   },
   data: {
     title: "데이터",
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
index d670c25c..cef90668 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
@@ -95,12 +95,12 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
   };
 
   return (
-    <div className="relative rounded-lg border border-gray-200 bg-white shadow-sm">
+    <div className="relative rounded-lg border border-border bg-white shadow-sm">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
+      <div className="flex items-center justify-between rounded-t-lg bg-primary px-4 py-2 text-white">
         <span className="font-medium">조건 {index + 1}</span>
         {!readonly && (
-          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
+          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-primary/90">
             <X className="h-4 w-4" />
           </button>
         )}
@@ -111,8 +111,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         {/* 열 범위 */}
         <div className="flex items-center gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              열 범위 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              열 범위 <span className="text-destructive">*</span>
             </label>
             <div className="flex items-center gap-2">
               <Input
@@ -125,7 +125,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
                 disabled={readonly}
                 className="h-9 text-center"
               />
-              <span className="text-gray-500">~</span>
+              <span className="text-muted-foreground">~</span>
               <Input
                 type="number"
                 min={1}
@@ -139,8 +139,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
             </div>
           </div>
           <div className="w-20">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              단 수 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              단 수 <span className="text-destructive">*</span>
             </label>
             <Input
               type="number"
@@ -156,14 +156,14 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         </div>
 
         {/* 계산 결과 */}
-        <div className="rounded-md bg-blue-50 px-3 py-2 text-center text-sm text-blue-700">
+        <div className="rounded-md bg-primary/10 px-3 py-2 text-center text-sm text-primary">
           {locationCount > 0 ? (
             <>
               {localValues.startRow}열 ~ {localValues.endRow}열 x {localValues.levels}단 ={" "}
               <strong>{locationCount}개</strong>
             </>
           ) : (
-            <span className="text-gray-500">값을 입력하세요</span>
+            <span className="text-muted-foreground">값을 입력하세요</span>
           )}
         </div>
       </div>
@@ -626,7 +626,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
+            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-primary/50" />렉 라인 구조 설정
           </CardTitle>
           {!readonly && (
             <div className="flex items-center gap-2">
@@ -719,9 +719,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 기존 데이터 존재 알림 */}
           {!isCheckingDuplicates && existingLocations.length > 0 && !hasDuplicateWithExisting && (
-            <Alert className="mb-4 border-blue-200 bg-blue-50">
-              <AlertCircle className="h-4 w-4 text-blue-600" />
-              <AlertDescription className="text-blue-800">
+            <Alert className="mb-4 border-primary/20 bg-primary/10">
+              <AlertCircle className="h-4 w-4 text-primary" />
+              <AlertDescription className="text-primary">
                 해당 창고/층/구역에 <strong>{existingLocations.length}개</strong>의 위치가 이미 등록되어 있습니다.
               </AlertDescription>
             </Alert>
@@ -729,47 +729,47 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 현재 매핑된 값 표시 */}
           {(context.warehouseCode || context.warehouseName || context.floor || context.zone) && (
-            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-gray-50 p-3">
+            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-muted p-3">
               {(context.warehouseCode || context.warehouseName) && (
-                <span className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
+                <span className="rounded bg-primary/10 px-2 py-1 text-xs text-primary">
                   창고: {context.warehouseName || context.warehouseCode}
                   {context.warehouseName && context.warehouseCode && ` (${context.warehouseCode})`}
                 </span>
               )}
               {context.floor && (
-                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
+                <span className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-800">층: {context.floor}</span>
               )}
               {context.zone && (
                 <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
               )}
               {context.locationType && (
-                <span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
+                <span className="rounded bg-amber-100 px-2 py-1 text-xs text-orange-800">
                   유형: {context.locationType}
                 </span>
               )}
               {context.status && (
-                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
+                <span className="rounded bg-muted/80 px-2 py-1 text-xs text-foreground">상태: {context.status}</span>
               )}
             </div>
           )}
 
           {/* 안내 메시지 */}
-          <div className="mb-4 rounded-lg bg-blue-50 p-4">
-            <ol className="space-y-1 text-sm text-blue-800">
+          <div className="mb-4 rounded-lg bg-primary/10 p-4">
+            <ol className="space-y-1 text-sm text-primary">
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   1
                 </span>
                 조건 추가 버튼을 클릭하여 렉 라인 조건을 생성하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   2
                 </span>
                 각 조건마다 열 범위와 단 수를 입력하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   3
                 </span>
                 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)
@@ -779,9 +779,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 조건 목록 또는 빈 상태 */}
           {conditions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-12">
-              <div className="mb-4 text-6xl text-gray-300">📦</div>
-              <p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-12">
+              <div className="mb-4 text-6xl text-muted-foreground/50">📦</div>
+              <p className="mb-4 text-muted-foreground">조건을 추가하여 렉 구조를 설정하세요</p>
               {!readonly && (
                 <Button onClick={addCondition} className="gap-1">
                   <Plus className="h-4 w-4" />첫 번째 조건 추가
@@ -832,15 +832,15 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
             {config.showStatistics && (
               <div className="mb-4 grid grid-cols-3 gap-4">
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">총 위치</div>
+                  <div className="text-sm text-muted-foreground">총 위치</div>
                   <div className="text-2xl font-bold">{statistics.totalLocations}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">열 수</div>
+                  <div className="text-sm text-muted-foreground">열 수</div>
                   <div className="text-2xl font-bold">{statistics.totalRows}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">최대 단</div>
+                  <div className="text-sm text-muted-foreground">최대 단</div>
                   <div className="text-2xl font-bold">{statistics.maxLevel}단</div>
                 </div>
               </div>
@@ -851,7 +851,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <div className="rounded-lg border">
                 <ScrollArea className="h-[400px]">
                   <Table>
-                    <TableHeader className="sticky top-0 bg-gray-50">
+                    <TableHeader className="sticky top-0 bg-muted">
                       <TableRow>
                         <TableHead className="w-12 text-center">No</TableHead>
                         <TableHead>위치코드</TableHead>
@@ -883,8 +883,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </ScrollArea>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-8 text-gray-500">
-                <Eye className="mb-2 h-8 w-8 text-gray-300" />
+              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-8 text-muted-foreground">
+                <Eye className="mb-2 h-8 w-8 text-muted-foreground/50" />
                 <p>미리보기 생성 버튼을 클릭하여 결과를 확인하세요</p>
               </div>
             )}
@@ -931,16 +931,16 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               {/* 템플릿 목록 */}
               {templates.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium text-gray-700">저장된 템플릿</div>
+                  <div className="text-sm font-medium text-foreground">저장된 템플릿</div>
                   <ScrollArea className="h-[200px]">
                     {templates.map((template) => (
                       <div
                         key={template.id}
-                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-gray-50"
+                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted"
                       >
                         <div>
                           <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
+                          <div className="text-xs text-muted-foreground">{template.conditions.length}개 조건</div>
                         </div>
                         <div className="flex gap-2">
                           <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
@@ -955,7 +955,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                   </ScrollArea>
                 </div>
               ) : (
-                <div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
+                <div className="py-8 text-center text-muted-foreground">저장된 템플릿이 없습니다</div>
               )}
             </div>
           )}
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx b/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
index 8f0c8177..17e1a781 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
@@ -73,8 +73,8 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
     <div className="space-y-4">
       {/* 필드 매핑 섹션 */}
       <div className="space-y-3">
-        <div className="text-sm font-medium text-gray-700">필드 매핑</div>
-        <p className="text-xs text-gray-500">
+        <div className="text-sm font-medium text-foreground">필드 매핑</div>
+        <p className="text-xs text-muted-foreground">
           상위 폼에 배치된 필드 중 어떤 필드를 사용할지 선택하세요
         </p>
 
@@ -207,7 +207,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* 제한 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">제한 설정</div>
+        <div className="text-sm font-medium text-foreground">제한 설정</div>
 
         <div>
           <Label className="text-xs">최대 조건 수</Label>
@@ -248,7 +248,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* UI 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">UI 설정</div>
+        <div className="text-sm font-medium text-foreground">UI 설정</div>
 
         <div className="flex items-center justify-between">
           <Label className="text-xs">템플릿 기능</Label>
diff --git a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
index f4f035cb..a3d67cbe 100644
--- a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
+++ b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
@@ -600,8 +600,8 @@ export function RepeatContainerComponent({
         className={cn(
           "rounded-md border border-dashed p-3 transition-colors",
           isDragOver
-            ? "border-green-500 bg-green-50/70"
-            : "border-blue-300 bg-blue-50/50"
+            ? "border-emerald-500 bg-emerald-50/70"
+            : "border-primary/40 bg-primary/10/50"
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -613,13 +613,13 @@ export function RepeatContainerComponent({
         }}
       >
         <div className="mb-3 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-blue-700">
+          <div className="flex items-center gap-2 text-sm text-primary">
             <Repeat className="h-4 w-4" />
             <span className="font-medium">리피터 컨테이너</span>
-            <span className="text-blue-500">({previewData.length}개 미리보기)</span>
+            <span className="text-primary">({previewData.length}개 미리보기)</span>
           </div>
           {isDragOver ? (
-            <div className="flex items-center gap-1 rounded bg-green-100 px-2 py-1 text-xs text-green-700">
+            <div className="flex items-center gap-1 rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-700">
               <Plus className="h-3 w-3" />
               여기에 놓으세요
             </div>
@@ -650,7 +650,7 @@ export function RepeatContainerComponent({
                   clickable && "cursor-pointer hover:shadow-md",
                   showSelectedState &&
                     selectedIndices.includes(index) &&
-                    "ring-2 ring-blue-500"
+                    "ring-2 ring-ring"
                 )}
               >
                 {showItemTitle && (titleColumn || itemTitleTemplate) && (
@@ -685,22 +685,22 @@ export function RepeatContainerComponent({
                     {slotChildren!.map((child: SlotComponentConfig, childIdx: number) => (
                       <div
                         key={child.id}
-                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-green-50/50 px-2 py-1.5"
+                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-emerald-50/50 px-2 py-1.5"
                       >
-                        <div className="flex h-5 w-5 items-center justify-center rounded bg-green-100 text-xs font-medium text-green-700">
+                        <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-100 text-xs font-medium text-emerald-700">
                           {childIdx + 1}
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="truncate text-xs font-medium text-green-700">
+                          <div className="truncate text-xs font-medium text-emerald-700">
                             {child.label || child.componentType}
                           </div>
                           {child.fieldName && (
-                            <div className="truncate text-[10px] text-green-500">
+                            <div className="truncate text-[10px] text-emerald-500">
                               {child.fieldName}
                             </div>
                           )}
                         </div>
-                        <div className="text-[10px] text-green-400">
+                        <div className="text-[10px] text-emerald-400">
                           {child.componentType}
                         </div>
                       </div>
@@ -741,7 +741,7 @@ export function RepeatContainerComponent({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center rounded-md border bg-slate-50 py-8">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
         <span className="ml-2 text-sm text-muted-foreground">로딩 중...</span>
       </div>
     );
@@ -769,7 +769,7 @@ export function RepeatContainerComponent({
                 clickable && "cursor-pointer hover:shadow-md",
                 showSelectedState &&
                   selectedIndices.includes(index) &&
-                  "ring-2 ring-blue-500"
+                  "ring-2 ring-ring"
               )}
               onClick={() => handleItemClick(index, row)}
             >
diff --git a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx
index 2eddd234..c46bb275 100644
--- a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx
@@ -127,7 +127,7 @@ export function RepeatContainerConfigPanel({
 
         {/* 현재 선택된 테이블 표시 (카드 형태) */}
         <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-          <Database className="h-4 w-4 text-blue-500" />
+          <Database className="h-4 w-4 text-primary" />
           <div className="flex-1">
             <div className="text-xs font-medium">
               {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -180,7 +180,7 @@ export function RepeatContainerConfigPanel({
                           !config.useCustomTable ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3 w-3 text-blue-500" />
+                      <Database className="mr-2 h-3 w-3 text-primary" />
                       {screenTableName}
                     </CommandItem>
                   </CommandGroup>
@@ -499,7 +499,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.titleColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.titleColumn}" 값이 제목으로 표시됩니다
                 </p>
               )}
@@ -567,7 +567,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.descriptionColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.descriptionColumn}" 값이 설명으로 표시됩니다
                 </p>
               )}
@@ -889,25 +889,25 @@ function SlotChildrenSection({
             return (
               <div
                 key={child.id}
-                className="rounded-md border border-green-200 bg-green-50 overflow-hidden"
+                className="rounded-md border border-emerald-200 bg-emerald-50 overflow-hidden"
               >
                 {/* 기본 정보 헤더 - 타입 선택 드롭다운 제거됨 */}
                 <div className="flex items-center gap-2 p-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
+                  <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-200 text-xs font-medium text-emerald-700">
                     {index + 1}
                   </div>
                   <div className="flex-1">
-                    <div className="text-xs font-medium text-green-700">
+                    <div className="text-xs font-medium text-emerald-700">
                       {child.label || child.fieldName}
                     </div>
-                    <div className="text-[10px] text-green-500">
+                    <div className="text-[10px] text-emerald-500">
                       필드: {child.fieldName}
                     </div>
                   </div>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700"
+                    className="h-5 w-5 p-0 text-primary hover:text-primary"
                     onClick={() => toggleExpanded(child.id)}
                     title="상세 설정"
                   >
@@ -920,7 +920,7 @@ function SlotChildrenSection({
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-red-400 hover:text-red-600"
+                    className="h-5 w-5 p-0 text-destructive/80 hover:text-destructive"
                     onClick={() => removeComponent(child.id)}
                   >
                     <X className="h-3 w-3" />
@@ -929,7 +929,7 @@ function SlotChildrenSection({
 
                 {/* 상세 설정 패널 */}
                 {isExpanded && (
-                  <div className="border-t border-green-200 bg-white p-3 space-y-3">
+                  <div className="border-t border-emerald-200 bg-white p-3 space-y-3">
                     {hasComponentConfigPanel(child.componentType) ? (
                       <SlotComponentDetailPanel
                         child={child}
@@ -948,14 +948,14 @@ function SlotChildrenSection({
                     ) : (
                       <>
                         {child.fieldName && (
-                          <div className="p-2 bg-green-50 rounded-md border border-green-200">
+                          <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
                             <div className="flex items-center gap-1.5">
-                              <Database className="h-3 w-3 text-green-600" />
-                              <span className="text-[10px] text-green-700 font-medium">
+                              <Database className="h-3 w-3 text-emerald-600" />
+                              <span className="text-[10px] text-emerald-700 font-medium">
                                 바인딩: {child.fieldName}
                               </span>
                             </div>
-                            <p className="text-[9px] text-green-600 mt-0.5">
+                            <p className="text-[9px] text-emerald-600 mt-0.5">
                               각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
                             </p>
                           </div>
@@ -1092,7 +1092,7 @@ function SlotChildrenSection({
                         <Plus
                           className={cn(
                             "mr-2 h-3 w-3",
-                            isAdded ? "text-green-500" : "text-blue-500"
+                            isAdded ? "text-emerald-500" : "text-primary"
                           )}
                         />
                         <div className="flex-1">
@@ -1102,7 +1102,7 @@ function SlotChildrenSection({
                           </div>
                         </div>
                         {isAdded && (
-                          <Check className="h-3 w-3 text-green-500" />
+                          <Check className="h-3 w-3 text-emerald-500" />
                         )}
                       </CommandItem>
                     );
@@ -1134,14 +1134,14 @@ function SlotComponentDetailPanel({
   return (
     <div className="space-y-3">
       {child.fieldName && (
-        <div className="p-2 bg-green-50 rounded-md border border-green-200">
+        <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
           <div className="flex items-center gap-1.5">
-            <Database className="h-3 w-3 text-green-600" />
-            <span className="text-[10px] text-green-700 font-medium">
+            <Database className="h-3 w-3 text-emerald-600" />
+            <span className="text-[10px] text-emerald-700 font-medium">
               바인딩: {child.fieldName}
             </span>
           </div>
-          <p className="text-[9px] text-green-600 mt-0.5">
+          <p className="text-[9px] text-emerald-600 mt-0.5">
             각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
           </p>
         </div>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index 337d9eff..b0395fb0 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -3150,38 +3150,38 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
                             <div
                               className={cn(
-                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
-                                isSelectedComp ? "border-primary" : "border-gray-200"
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-muted px-1",
+                                isSelectedComp ? "border-primary" : "border-border"
                               )}
                               style={{ width: displayWidth }}
                               onMouseDown={(e) => handlePanelDragStart(e, "left", comp)}
                             >
                               <div className="flex items-center gap-0.5">
-                                <Move className="h-2.5 w-2.5 text-gray-400" />
-                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
+                                <Move className="h-2.5 w-2.5 text-muted-foreground/70" />
+                                <span className="max-w-[100px] truncate text-[9px] text-muted-foreground">
                                   {comp.label || comp.componentType}
                                 </span>
                               </div>
                               <div className="flex items-center">
                                 <button
-                                  className="rounded p-0.5 hover:bg-gray-200"
+                                  className="rounded p-0.5 hover:bg-muted/80"
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     onSelectPanelComponent?.("left", comp.id, comp);
                                   }}
                                   title="설정"
                                 >
-                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
+                                  <Settings className="h-2.5 w-2.5 text-muted-foreground" />
                                 </button>
                                 <button
-                                  className="rounded p-0.5 hover:bg-red-100"
+                                  className="rounded p-0.5 hover:bg-destructive/10"
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handleRemovePanelComponent("left", comp.id);
                                   }}
                                   title="삭제"
                                 >
-                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                                  <Trash2 className="h-2.5 w-2.5 text-destructive" />
                                 </button>
                               </div>
                             </div>
@@ -3192,7 +3192,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 "relative overflow-hidden rounded-b border bg-white shadow-sm",
                                 isSelectedComp
                                   ? "border-primary ring-2 ring-primary/30"
-                                  : "border-gray-200",
+                                  : "border-border",
                                 (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
                                 !(isDraggingComp || isResizingComp) && "transition-all"
                               )}
@@ -3270,12 +3270,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   )
                 ) : (
                   // 컴포넌트가 없을 때 드롭 영역 표시
-                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-500">
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                    <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-muted-foreground">
                       커스텀 모드
                     </p>
-                    <p className="mt-1 text-xs text-gray-400">
+                    <p className="mt-1 text-xs text-muted-foreground/70">
                       {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
                     </p>
                   </div>
@@ -3287,21 +3287,21 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 {isDesignMode ? (
                   // 디자인 모드: 샘플 테이블
                   <div className="overflow-auto">
-                    <table className="min-w-full divide-y divide-gray-200">
-                      <thead className="bg-gray-50">
+                    <table className="min-w-full divide-y divide-border">
+                      <thead className="bg-muted">
                         <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 1</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 2</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 3</th>
                         </tr>
                       </thead>
-                      <tbody className="divide-y divide-gray-200 bg-white">
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                      <tbody className="divide-y divide-border bg-white">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-3</td>
                         </tr>
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-3</td>
@@ -3371,16 +3371,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         <div className="overflow-auto">
                           {groupedLeftData.map((group, groupIdx) => (
                             <div key={groupIdx} className="mb-4">
-                              <div className="bg-gray-100 px-3 py-2 text-sm font-semibold">
+                              <div className="bg-muted px-3 py-2 text-sm font-semibold">
                                 {group.groupKey} ({group.count}개)
                               </div>
-                              <table className="min-w-full divide-y divide-gray-200">
-                                <thead className="bg-gray-50">
+                              <table className="min-w-full divide-y divide-border">
+                                <thead className="bg-muted">
                                   <tr>
                                     {columnsToShow.map((col, idx) => (
                                       <th
                                         key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                         style={{
                                           width: col.width ? `${col.width}px` : "auto",
                                           minWidth: "80px",
@@ -3391,12 +3391,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       </th>
                                     ))}
                                     {hasGroupedLeftActions && (
-                                      <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap" style={{ width: "80px" }}>
+                                      <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
                                       </th>
                                     )}
                                   </tr>
                                 </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
+                                <tbody className="divide-y divide-border bg-white">
                                   {group.items.map((item, idx) => {
                                     const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                                     const itemId = item[sourceColumn] || item.id || item.ID || idx;
@@ -3415,7 +3415,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         {columnsToShow.map((col, colIdx) => (
                                           <td
                                             key={colIdx}
-                                            className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                            className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                             style={{ textAlign: col.align || "left" }}
                                           >
                                             {formatCellValue(
@@ -3435,9 +3435,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                     e.stopPropagation();
                                                     handleEditClick("left", item);
                                                   }}
-                                                  className="rounded p-1 transition-colors hover:bg-gray-200"
+                                                  className="rounded p-1 transition-colors hover:bg-muted/80"
                                                 >
-                                                  <Pencil className="h-3.5 w-3.5 text-gray-500" />
+                                                  <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
                                                 </button>
                                               )}
                                               {(componentConfig.leftPanel?.showDelete !== false) && (
@@ -3446,9 +3446,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                     e.stopPropagation();
                                                     handleDeleteClick("left", item);
                                                   }}
-                                                  className="rounded p-1 transition-colors hover:bg-red-100"
+                                                  className="rounded p-1 transition-colors hover:bg-destructive/10"
                                                 >
-                                                  <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                                                  <Trash2 className="h-3.5 w-3.5 text-destructive" />
                                                 </button>
                                               )}
                                             </div>
@@ -3472,13 +3472,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     );
                     return (
                       <div className="overflow-auto">
-                        <table className="min-w-full divide-y divide-gray-200">
-                          <thead className="sticky top-0 z-10 bg-gray-50">
+                        <table className="min-w-full divide-y divide-border">
+                          <thead className="sticky top-0 z-10 bg-muted">
                             <tr>
                               {columnsToShow.map((col, idx) => (
                                 <th
                                   key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap"
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                   style={{
                                     width: col.width ? `${col.width}px` : "auto",
                                     minWidth: "80px",
@@ -3489,12 +3489,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 </th>
                               ))}
                               {hasLeftTableActions && (
-                                <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap" style={{ width: "80px" }}>
+                                <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
                                 </th>
                               )}
                             </tr>
                           </thead>
-                          <tbody className="divide-y divide-gray-200 bg-white">
+                          <tbody className="divide-y divide-border bg-white">
                             {filteredData.map((item, idx) => {
                               const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                               const itemId = item[sourceColumn] || item.id || item.ID || idx;
@@ -3513,7 +3513,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   {columnsToShow.map((col, colIdx) => (
                                     <td
                                       key={colIdx}
-                                      className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                      className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                       style={{ textAlign: col.align || "left" }}
                                     >
                                       {formatCellValue(
@@ -3533,9 +3533,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                               e.stopPropagation();
                                               handleEditClick("left", item);
                                             }}
-                                            className="rounded p-1 transition-colors hover:bg-gray-200"
+                                            className="rounded p-1 transition-colors hover:bg-muted/80"
                                           >
-                                            <Pencil className="h-3.5 w-3.5 text-gray-500" />
+                                            <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
                                           </button>
                                         )}
                                         {(componentConfig.leftPanel?.showDelete !== false) && (
@@ -3544,9 +3544,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                               e.stopPropagation();
                                               handleDeleteClick("left", item);
                                             }}
-                                            className="rounded p-1 transition-colors hover:bg-red-100"
+                                            className="rounded p-1 transition-colors hover:bg-destructive/10"
                                           >
-                                            <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                                            <Trash2 className="h-3.5 w-3.5 text-destructive" />
                                           </button>
                                         )}
                                       </div>
@@ -3699,9 +3699,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               {hasChildren ? (
                                 <div className="flex-shrink-0">
                                   {isExpanded ? (
-                                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
                                   ) : (
-                                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
                                   )}
                                 </div>
                               ) : (
@@ -3726,10 +3726,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleEditClick("left", item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      className="rounded p-1 transition-colors hover:bg-muted/80"
                                       title="수정"
                                     >
-                                      <Pencil className="h-4 w-4 text-gray-600" />
+                                      <Pencil className="h-4 w-4 text-muted-foreground" />
                                     </button>
                                   )}
 
@@ -3740,10 +3740,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleDeleteClick("left", item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-red-100"
+                                      className="rounded p-1 transition-colors hover:bg-destructive/10"
                                       title="삭제"
                                     >
-                                      <Trash2 className="h-4 w-4 text-red-600" />
+                                      <Trash2 className="h-4 w-4 text-destructive" />
                                     </button>
                                   )}
 
@@ -3754,10 +3754,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleItemAddClick(item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      className="rounded p-1 transition-colors hover:bg-muted/80"
                                       title="하위 항목 추가"
                                     >
-                                      <Plus className="h-4 w-4 text-gray-600" />
+                                      <Plus className="h-4 w-4 text-muted-foreground" />
                                     </button>
                                   )}
                                 </div>
@@ -4272,38 +4272,38 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                           >
                             <div
                               className={cn(
-                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
-                                isSelectedComp ? "border-primary" : "border-gray-200"
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-muted px-1",
+                                isSelectedComp ? "border-primary" : "border-border"
                               )}
                               style={{ width: displayWidth }}
                               onMouseDown={(e) => handlePanelDragStart(e, "right", comp)}
                             >
                               <div className="flex items-center gap-0.5">
-                                <Move className="h-2.5 w-2.5 text-gray-400" />
-                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
+                                <Move className="h-2.5 w-2.5 text-muted-foreground/70" />
+                                <span className="max-w-[100px] truncate text-[9px] text-muted-foreground">
                                   {comp.label || comp.componentType}
                                 </span>
                               </div>
                               <div className="flex items-center">
                                 <button
-                                  className="rounded p-0.5 hover:bg-gray-200"
+                                  className="rounded p-0.5 hover:bg-muted/80"
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     onSelectPanelComponent?.("right", comp.id, comp);
                                   }}
                                   title="설정"
                                 >
-                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
+                                  <Settings className="h-2.5 w-2.5 text-muted-foreground" />
                                 </button>
                                 <button
-                                  className="rounded p-0.5 hover:bg-red-100"
+                                  className="rounded p-0.5 hover:bg-destructive/10"
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handleRemovePanelComponent("right", comp.id);
                                   }}
                                   title="삭제"
                                 >
-                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                                  <Trash2 className="h-2.5 w-2.5 text-destructive" />
                                 </button>
                               </div>
                             </div>
@@ -4313,7 +4313,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 "relative overflow-hidden rounded-b border bg-white shadow-sm",
                                 isSelectedComp
                                   ? "border-primary ring-2 ring-primary/30"
-                                  : "border-gray-200",
+                                  : "border-border",
                                 (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
                                 !(isDraggingComp || isResizingComp) && "transition-all"
                               )}
@@ -4380,12 +4380,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   )
                 ) : (
                   // 컴포넌트가 없을 때 드롭 영역 표시
-                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-500">
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                    <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-muted-foreground">
                       커스텀 모드
                     </p>
-                    <p className="mt-1 text-xs text-gray-400">
+                    <p className="mt-1 text-xs text-muted-foreground/70">
                       {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
                     </p>
                   </div>
@@ -4550,10 +4550,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                   e.stopPropagation();
                                                   handleDeleteClick("right", item);
                                                 }}
-                                                className="rounded p-1 transition-colors hover:bg-red-100"
+                                                className="rounded p-1 transition-colors hover:bg-destructive/10"
                                                 title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
                                               >
-                                                <Trash2 className="h-4 w-4 text-red-600" />
+                                                <Trash2 className="h-4 w-4 text-destructive" />
                                               </button>
                                             )}
                                           </div>
@@ -4883,7 +4883,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   <div key={index}>
                     <Label htmlFor={col.name} className="text-xs sm:text-sm">
                       {col.label} {col.required && <span className="text-destructive">*</span>}
-                      {isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
+                      {isPreFilled && <span className="ml-2 text-[10px] text-primary">(자동 설정됨)</span>}
                     </Label>
                     <Input
                       id={col.name}
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index d77cb88d..a1de429f 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -52,14 +52,14 @@ function SortableColumnRow({
       className={cn(
         "flex items-center gap-1.5 rounded-md border bg-card px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" title="Entity 조인 컬럼" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" title="Entity 조인 컬럼" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -357,12 +357,12 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
     >
       <AccordionTrigger className="px-3 py-2 hover:no-underline">
         <div className="flex flex-1 items-center gap-2">
-          <GripVertical className="h-4 w-4 text-gray-400" />
+          <GripVertical className="h-4 w-4 text-muted-foreground/70" />
           <span className="text-sm font-medium">
             {tab.label || `탭 ${tabIndex + 1}`}
           </span>
           {tab.tableName && (
-            <span className="text-xs text-gray-500">({tab.tableName})</span>
+            <span className="text-xs text-muted-foreground">({tab.tableName})</span>
           )}
         </div>
       </AccordionTrigger>
@@ -425,7 +425,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           )}
                         />
                         {table.displayName || table.tableName}
-                        {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                        {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                       </CommandItem>
                     ))}
                   </CommandGroup>
@@ -452,13 +452,13 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                   <SelectItem value="list">
                     <div className="flex flex-col py-1">
                       <span className="text-sm font-medium">목록 (LIST)</span>
-                      <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                      <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                     </div>
                   </SelectItem>
                   <SelectItem value="table">
                     <div className="flex flex-col py-1">
                       <span className="text-sm font-medium">테이블 (TABLE)</span>
-                      <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                      <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                     </div>
                   </SelectItem>
                 </SelectContent>
@@ -467,7 +467,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
             {/* 요약 설정 (목록 모드) */}
             {(tab.displayMode || "list") === "list" && (
-              <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+              <div className="space-y-3 rounded-lg border border-border bg-muted p-3">
                 <Label className="text-sm font-semibold">요약 표시 설정</Label>
                 <div className="space-y-2">
                   <Label className="text-xs">표시할 컬럼 개수</Label>
@@ -477,12 +477,12 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                     onChange={(e) => updateTab({ summaryColumnCount: parseInt(e.target.value) || 3 })}
                     className="bg-white"
                   />
-                  <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+                  <p className="text-xs text-muted-foreground">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
                 </div>
                 <div className="flex items-center justify-between space-x-2">
                   <div className="flex-1">
                     <Label className="text-xs">라벨 표시</Label>
-                    <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+                    <p className="text-xs text-muted-foreground">컬럼명 표시 여부</p>
                   </div>
                   <Checkbox
                     checked={tab.summaryShowLabel ?? true}
@@ -704,13 +704,13 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           return (
                             <details key={`tab-join-${tableIndex}`} className="group">
                               <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                                <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                                <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                                <ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
+                                <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                <span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
                                 {addedCount > 0 && (
-                                  <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                                  <span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
                                 )}
-                                <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                                <span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
                               </summary>
                               <div className="space-y-0.5 pt-1">
                                 {joinColumnsToShow.map((column, colIndex) => {
@@ -722,7 +722,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                                   return (
                                     <div
                                       key={colIndex}
-                                      className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                      className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
                                       onClick={() => {
                                         updateTab({
                                           columns: [...selectedColumns, {
@@ -741,13 +741,13 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                                       }}
                                     >
                                       <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                      <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                      <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                      <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                      <span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
                                     </div>
                                   );
                                 })}
                                 {joinColumnsToShow.length === 0 && (
-                                  <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                                  <p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
                                 )}
                               </div>
                             </details>
@@ -784,8 +784,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
               <div className="space-y-2">
                 {(tab.addModalColumns || []).length === 0 ? (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">추가 모달에 표시할 컬럼을 설정하세요</p>
+                  <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                    <p className="text-xs text-muted-foreground">추가 모달에 표시할 컬럼을 설정하세요</p>
                   </div>
                 ) : (
                   (tab.addModalColumns || []).map((col, colIndex) => (
@@ -842,7 +842,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           const newColumns = (tab.addModalColumns || []).filter((_, i) => i !== colIndex);
                           updateTab({ addModalColumns: newColumns });
                         }}
-                        className="h-8 w-8 p-0 text-red-500"
+                        className="h-8 w-8 p-0 text-destructive"
                       >
                         <X className="h-3 w-3" />
                       </Button>
@@ -1038,7 +1038,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                 {/* 그룹핑 기준 컬럼 */}
                 <div className="space-y-1">
                   <Label className="text-[10px]">그룹핑 기준 컬럼</Label>
-                  <p className="text-[9px] text-gray-500">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
+                  <p className="text-[9px] text-muted-foreground">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
                   <div className="max-h-[120px] space-y-1 overflow-y-auto rounded-md border bg-white p-2">
                     {tabColumns.map((col) => (
                       <div key={col.columnName} className="flex items-center gap-2">
@@ -1185,7 +1185,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="text-red-500 hover:bg-red-50 hover:text-red-600"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
               onClick={() => {
                 const newTabs = config.rightPanel?.additionalTabs?.filter((_, i) => i !== tabIndex) || [];
                 updateRightPanel({ additionalTabs: newTabs });
@@ -1557,7 +1557,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     return (
       <div className="rounded-lg border p-4">
         <p className="text-sm font-medium">테이블 데이터를 불러올 수 없습니다.</p>
-        <p className="mt-1 text-xs text-gray-600">
+        <p className="mt-1 text-xs text-muted-foreground">
           화면에 테이블이 연결되지 않았거나 테이블 목록이 로드되지 않았습니다.
         </p>
       </div>
@@ -1649,13 +1649,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             <SelectItem value="detail">
               <div className="flex flex-col py-1">
                 <span className="text-sm font-medium">선택 시 표시</span>
-                <span className="text-xs text-gray-500">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
+                <span className="text-xs text-muted-foreground">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
               </div>
             </SelectItem>
             <SelectItem value="join">
               <div className="flex flex-col py-1">
                 <span className="text-sm font-medium">연관 목록</span>
-                <span className="text-xs text-gray-500">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
+                <span className="text-xs text-muted-foreground">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
               </div>
             </SelectItem>
           </SelectContent>
@@ -1755,7 +1755,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                             config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
                           )}
                         />
-                        <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                        <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                         {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
                           allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
                           screenTableName}
@@ -1848,19 +1848,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               <SelectItem value="list">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
               <SelectItem value="custom">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                  <span className="text-xs text-muted-foreground">패널 안에 컴포넌트 자유 배치</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -2039,13 +2039,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                         return (
                           <details key={`join-${tableIndex}`} className="group">
                             <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              <ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                              <span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
                               {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                                <span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
                               )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                              <span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
                             </summary>
                             <div className="space-y-0.5 pt-1">
                               {joinColumnsToShow.map((column, colIndex) => {
@@ -2057,7 +2057,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                 return (
                                   <div
                                     key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
                                     onClick={() => {
                                       updateLeftPanel({
                                         columns: [...selectedColumns, {
@@ -2076,13 +2076,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                     }}
                                   >
                                     <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                    <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                    <span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
                                   </div>
                                 );
                               })}
                               {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                                <p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
                               )}
                             </div>
                           </details>
@@ -2362,7 +2362,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                         )}
                       />
                       {table.displayName || table.tableName}
-                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                      {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                     </CommandItem>
                   ))}
                 </CommandGroup>
@@ -2386,19 +2386,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               <SelectItem value="list">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
               <SelectItem value="custom">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                  <span className="text-xs text-muted-foreground">패널 안에 컴포넌트 자유 배치</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -2464,7 +2464,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
         {/* 요약 표시 설정 (LIST 모드에서만, 커스텀 모드가 아닐 때) */}
         {(config.rightPanel?.displayMode || "list") === "list" && (
-          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+          <div className="space-y-3 rounded-lg border border-border bg-muted p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
 
             <div className="space-y-2">
@@ -2480,13 +2480,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 }}
                 className="bg-white"
               />
-              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+              <p className="text-xs text-muted-foreground">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
             </div>
 
             <div className="flex items-center justify-between space-x-2">
               <div className="flex-1">
                 <Label className="text-xs">라벨 표시</Label>
-                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+                <p className="text-xs text-muted-foreground">컬럼명 표시 여부</p>
               </div>
               <Checkbox
                 checked={config.rightPanel?.summaryShowLabel ?? true}
@@ -2622,13 +2622,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                         return (
                           <details key={`join-${tableIndex}`} className="group">
                             <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              <ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                              <span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
                               {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                                <span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
                               )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                              <span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
                             </summary>
                             <div className="space-y-0.5 pt-1">
                               {joinColumnsToShow.map((column, colIndex) => {
@@ -2640,7 +2640,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                 return (
                                   <div
                                     key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
                                     onClick={() => {
                                       updateRightPanel({
                                         columns: [...selectedColumns, {
@@ -2659,13 +2659,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                     }}
                                   >
                                     <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                    <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                    <span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
                                   </div>
                                 );
                               })}
                               {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                                <p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
                               )}
                             </div>
                           </details>
@@ -3209,7 +3209,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           </Accordion>
         ) : (
           <div className="rounded-lg border border-dashed p-4 text-center">
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-muted-foreground">
               추가된 탭이 없습니다. [탭 추가] 버튼을 클릭하여 새 탭을 추가하세요.
             </p>
           </div>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx
index f67ec74c..6eea7384 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx
@@ -44,13 +44,13 @@ export const CommonConfigTab: React.FC<CommonConfigTabProps> = ({
             <SelectItem value="detail">
               <div className="flex flex-col py-1">
                 <span className="text-sm font-medium">선택 시 표시</span>
-                <span className="text-xs text-gray-500">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
+                <span className="text-xs text-muted-foreground">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
               </div>
             </SelectItem>
             <SelectItem value="join">
               <div className="flex flex-col py-1">
                 <span className="text-sm font-medium">연관 목록</span>
-                <span className="text-xs text-gray-500">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
+                <span className="text-xs text-muted-foreground">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
               </div>
             </SelectItem>
           </SelectContent>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
index ba90a112..91309828 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
@@ -107,7 +107,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                             config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
                           )}
                         />
-                        <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                        <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                         {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
                           allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
                           screenTableName}
@@ -184,19 +184,19 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
               <SelectItem value="list">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
               <SelectItem value="custom">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                  <span className="text-xs text-muted-foreground">패널 안에 컴포넌트 자유 배치</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -365,13 +365,13 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                         return (
                           <details key={`join-${tableIndex}`} className="group">
                             <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              <ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                              <span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
                               {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                                <span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
                               )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                              <span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
                             </summary>
                             <div className="space-y-0.5 pt-1">
                               {joinColumnsToShow.map((column, colIndex) => {
@@ -383,7 +383,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                 return (
                                   <div
                                     key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
                                     onClick={() => {
                                       updateLeftPanel({
                                         columns: [...selectedColumns, {
@@ -402,13 +402,13 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                     }}
                                   >
                                     <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                    <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                    <span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
                                   </div>
                                 );
                               })}
                               {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                                <p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
                               )}
                             </div>
                           </details>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
index 5e1d91dd..d6d6e493 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
@@ -116,7 +116,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                         )}
                       />
                       {(table as any).displayName || tableName}
-                      {(table as any).displayName && <span className="ml-2 text-xs text-gray-500">({tableName})</span>}
+                      {(table as any).displayName && <span className="ml-2 text-xs text-muted-foreground">({tableName})</span>}
                     </CommandItem>
                   );
                   })}
@@ -141,19 +141,19 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
               <SelectItem value="list">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
               <SelectItem value="custom">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                  <span className="text-xs text-muted-foreground">패널 안에 컴포넌트 자유 배치</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -215,7 +215,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
         )}
 
         {(config.rightPanel?.displayMode || "list") === "list" && (
-          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+          <div className="space-y-3 rounded-lg border border-border bg-muted p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
             <div className="space-y-2">
               <Label className="text-xs">표시할 컬럼 개수</Label>
@@ -230,12 +230,12 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                 }}
                 className="bg-white"
               />
-              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+              <p className="text-xs text-muted-foreground">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
             </div>
             <div className="flex items-center justify-between space-x-2">
               <div className="flex-1">
                 <Label className="text-xs">라벨 표시</Label>
-                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+                <p className="text-xs text-muted-foreground">컬럼명 표시 여부</p>
               </div>
               <Checkbox
                 checked={config.rightPanel?.summaryShowLabel ?? true}
@@ -365,13 +365,13 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                         return (
                           <details key={`join-${tableIndex}`} className="group">
                             <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              <ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                              <span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
                               {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                                <span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
                               )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                              <span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
                             </summary>
                             <div className="space-y-0.5 pt-1">
                               {joinColumnsToShow.map((column, colIndex) => {
@@ -383,7 +383,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                 return (
                                   <div
                                     key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
                                     onClick={() => {
                                       updateRightPanel({
                                         columns: [...selectedColumns, {
@@ -402,13 +402,13 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                     }}
                                   >
                                     <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                    <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                    <span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
                                   </div>
                                 );
                               })}
                               {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                                <p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
                               )}
                             </div>
                           </details>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
index c4a6dc68..a6c4be0d 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
@@ -37,14 +37,14 @@ export function SortableColumnRow({
       className={cn(
         "flex items-center gap-1.5 rounded-md border bg-card px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" title="Entity 조인 컬럼" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" title="Entity 조인 컬럼" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
diff --git a/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx b/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx
index 7623c1b5..205b71ec 100644
--- a/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx
+++ b/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx
@@ -71,7 +71,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
     if (!config.showActions) return null;
 
     return (
-      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-gray-100 pt-3">
+      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-border pt-3">
         <Button
           variant="ghost"
           size="sm"
@@ -145,7 +145,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
             key={`card-${index}-${idValue}`}
             style={cardStyle}
             className={`transition-all duration-200 hover:shadow-md ${
-              isSelected ? "bg-blue-50/30 ring-2 ring-blue-500" : ""
+              isSelected ? "bg-primary/10/30 ring-2 ring-ring" : ""
             }`}
             onClick={(e) => onRowClick?.(row, index, e)}
           >
@@ -153,7 +153,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               <div className="flex items-start justify-between">
                 <div className="min-w-0 flex-1">
                   <CardTitle className="truncate text-sm font-medium">{titleValue || "제목 없음"}</CardTitle>
-                  {subtitleValue && <div className="mt-1 truncate text-xs text-gray-500">{subtitleValue}</div>}
+                  {subtitleValue && <div className="mt-1 truncate text-xs text-muted-foreground">{subtitleValue}</div>}
                 </div>
 
                 {/* ID 뱃지 */}
@@ -176,7 +176,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
                       return isObjid ? getFilePreviewUrl(strValue) : getFullImageUrl(strValue);
                     })()}
                     alt={titleValue}
-                    className="h-24 w-full rounded-md bg-gray-100 object-cover"
+                    className="h-24 w-full rounded-md bg-muted object-cover"
                     onError={(e) => {
                       const target = e.target as HTMLImageElement;
                       // 이미지 로드 실패 시 폴백 표시
@@ -195,7 +195,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               )}
 
               {/* 설명 표시 */}
-              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-gray-600">{descriptionValue}</div>}
+              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-muted-foreground">{descriptionValue}</div>}
 
               {/* 추가 필드들 표시 (선택적) */}
               <div className="space-y-1">
@@ -217,7 +217,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
 
                     return (
                       <div key={col.columnName} className="flex items-center justify-between text-xs">
-                        <span className="truncate text-gray-500">{col.displayName}:</span>
+                        <span className="truncate text-muted-foreground">{col.displayName}:</span>
                         <span className="ml-2 truncate font-medium">{value}</span>
                       </div>
                     );
diff --git a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
index 19b13398..769d7a91 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@@ -4258,8 +4258,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         return (
           <div className="flex max-w-full items-center gap-1.5 text-sm">
-            <Paperclip className="h-4 w-4 flex-shrink-0 text-gray-500" />
-            <span className="truncate text-blue-600" title={fileNames}>
+            <Paperclip className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+            <span className="truncate text-primary" title={fileNames}>
               {fileNames}
             </span>
             {files.length > 1 && <span className="text-muted-foreground flex-shrink-0 text-xs">({files.length})</span>}
@@ -5200,7 +5200,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               <div className="flex flex-col gap-1">
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">Excel</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToExcel(true)}>
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   전체 Excel 내보내기
                 </Button>
                 <Button
@@ -5210,13 +5210,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToExcel(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
                 <div className="border-border my-1 border-t" />
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">PDF/인쇄</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToPdf(true)}>
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   전체 PDF 내보내기
                 </Button>
                 <Button
@@ -5226,7 +5226,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToPdf(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
               </div>
@@ -5409,7 +5409,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="Excel 내보내기"
                 >
-                  <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-1 h-3 w-3 text-emerald-600" />
                   Excel
                 </Button>
               )}
@@ -5421,7 +5421,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="PDF 내보내기"
                 >
-                  <FileText className="mr-1 h-3 w-3 text-red-600" />
+                  <FileText className="mr-1 h-3 w-3 text-destructive" />
                   PDF
                 </Button>
               )}
@@ -5882,7 +5882,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         {/* 리사이즈 핸들 (체크박스 제외) */}
                         {columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
                           <div
-                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-primary"
                             style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
@@ -6235,11 +6235,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   // 🆕 배치 편집: 수정된 셀 스타일 (노란 배경)
                                   isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
                                   // 🆕 유효성 에러: 빨간 테두리 및 배경
-                                  cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
+                                  cellValidationError && "bg-destructive/10 ring-2 ring-destructive ring-inset dark:bg-destructive/15",
                                   // 🆕 검색 하이라이트 스타일 (노란 배경)
                                   isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
                                   // 🆕 편집 불가 컬럼 스타일 (연한 회색 배경)
-                                  column.editable === false && "bg-gray-50 dark:bg-gray-900/30",
+                                  column.editable === false && "bg-muted dark:bg-foreground/30",
                                 )}
                                 // 🆕 유효성 에러 툴팁
                                 title={cellValidationError || undefined}
@@ -6632,7 +6632,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
             {/* 행 삭제 */}
             <button
-              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-red-600"
+              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive"
               onClick={async () => {
                 if (confirm("이 행을 삭제하시겠습니까?")) {
                   try {
@@ -6699,7 +6699,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       variant="ghost"
                       size="sm"
                       onClick={() => removeFilterGroup(group.id)}
-                      className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -6759,7 +6759,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           variant="ghost"
                           size="sm"
                           onClick={() => removeFilterCondition(group.id, condition.id)}
-                          className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                           disabled={group.conditions.length === 1}
                         >
                           <X className="h-3 w-3" />
diff --git a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
index 7de8a533..759c57dd 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
@@ -63,14 +63,14 @@ function SortableColumnRow({
       className={cn(
         "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -917,7 +917,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                           <div className="flex flex-col">
                             <span>{table.displayName}</span>
                             {table.displayName !== table.tableName && (
-                              <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                              <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
                             )}
                           </div>
                         </CommandItem>
@@ -1176,7 +1176,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                   placeholder="8"
                   className="h-8"
                 />
-                <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+                <div className="text-xs text-muted-foreground">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
               </div>
             </div>
           )}
@@ -1215,7 +1215,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         <Label className="text-xs">표시할 컬럼 선택</Label>
                         {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
                         entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
-                          <div className="py-2 text-center text-xs text-gray-400">
+                          <div className="py-2 text-center text-xs text-muted-foreground/70">
                             표시 가능한 컬럼이 없습니다.
                             {!column.entityDisplayConfig?.joinTable && (
                               <p className="mt-1 text-[10px]">
@@ -1300,7 +1300,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {/* 참조 테이블 미설정 안내 */}
                       {!column.entityDisplayConfig?.joinTable &&
                         entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
-                          <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
+                          <div className="rounded bg-primary/10 p-2 text-[10px] text-primary">
                             현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
                             테이블의 컬럼도 선택할 수 있습니다.
                           </div>
@@ -1310,14 +1310,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
                         <div className="space-y-1">
                           <Label className="text-xs">미리보기</Label>
-                          <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                          <div className="flex flex-wrap gap-1 rounded bg-muted p-2 text-xs">
                             {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
                               <React.Fragment key={colName}>
                                 <Badge variant="secondary" className="text-xs">
                                   {colName}
                                 </Badge>
                                 {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                  <span className="text-gray-400">
+                                  <span className="text-muted-foreground/70">
                                     {entityDisplayConfigs[column.columnName].separator}
                                   </span>
                                 )}
@@ -1328,7 +1328,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       )}
                     </div>
                   ) : (
-                    <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
+                    <div className="py-4 text-center text-xs text-muted-foreground/70">컬럼 정보 로딩 중...</div>
                   )}
                 </div>
               ))}
@@ -1337,17 +1337,17 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
         {!targetTableName ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>테이블이 선택되지 않았습니다.</p>
               <p className="text-sm">위 데이터 소스에서 테이블을 선택하세요.</p>
             </div>
           </div>
         ) : availableColumns.length === 0 ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
               <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-              <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+              <p className="mt-2 text-xs text-primary">현재 화면 테이블: {screenTableName}</p>
             </div>
           </div>
         ) : (
@@ -1429,7 +1429,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                             )}
                           </button>
                         )}
-                        <span className={cn("text-[10px] text-gray-400", !isAdded && "ml-auto")}>
+                        <span className={cn("text-[10px] text-muted-foreground/70", !isAdded && "ml-auto")}>
                           {column.input_type || column.dataType}
                         </span>
                       </div>
@@ -1452,14 +1452,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 <div className="space-y-3">
                   {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                     <div key={tableIndex} className="space-y-1">
-                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
+                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
                         <Link2 className="h-3 w-3" />
                         <span>{joinTable.tableName}</span>
                         <Badge variant="outline" className="text-[10px]">
                           {joinTable.currentDisplayColumn}
                         </Badge>
                       </div>
-                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                         {joinTable.availableColumns.map((column, colIndex) => {
                           const matchingJoinColumn = entityJoinColumns.availableColumns.find(
                             (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
@@ -1475,8 +1475,8 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                             <div
                               key={colIndex}
                               className={cn(
-                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                                isAlreadyAdded && "bg-blue-100",
+                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                                isAlreadyAdded && "bg-primary/10",
                               )}
                               onClick={() => {
                                 if (isAlreadyAdded) {
@@ -1506,9 +1506,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                                 }}
                                 className="pointer-events-none h-3.5 w-3.5"
                               />
-                              <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                              <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="ml-auto text-[10px] text-blue-400">
+                              <span className="ml-auto text-[10px] text-primary/80">
                                 {column.inputType || column.dataType}
                               </span>
                             </div>
diff --git a/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx
index a4022aa1..32c9d7a2 100644
--- a/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx
@@ -93,7 +93,7 @@ export const BasicConfigPanel: React.FC<BasicConfigPanelProps> = ({
                         <div className="flex flex-col">
                           <span>{table.displayName}</span>
                           {table.displayName !== table.tableName && (
-                            <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                            <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
                           )}
                         </div>
                       </CommandItem>
diff --git a/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
index 00375b7a..22817ee0 100644
--- a/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
@@ -42,14 +42,14 @@ function SortableColumnRow({
       className={cn(
         "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -178,7 +178,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                       <Label className="text-xs">표시할 컬럼 선택</Label>
                       {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
                       entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
-                        <div className="py-2 text-center text-xs text-gray-400">
+                        <div className="py-2 text-center text-xs text-muted-foreground/70">
                           표시 가능한 컬럼이 없습니다.
                           {!column.entityDisplayConfig?.joinTable && (
                             <p className="mt-1 text-[10px]">
@@ -258,7 +258,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
 
                     {!column.entityDisplayConfig?.joinTable &&
                       entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
-                        <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
+                        <div className="rounded bg-primary/10 p-2 text-[10px] text-primary">
                           현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
                           테이블의 컬럼도 선택할 수 있습니다.
                         </div>
@@ -267,14 +267,14 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                     {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
                       <div className="space-y-1">
                         <Label className="text-xs">미리보기</Label>
-                        <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                        <div className="flex flex-wrap gap-1 rounded bg-muted p-2 text-xs">
                           {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
                             <React.Fragment key={colName}>
                               <Badge variant="secondary" className="text-xs">
                                 {colName}
                               </Badge>
                               {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                <span className="text-gray-400">
+                                <span className="text-muted-foreground/70">
                                   {entityDisplayConfigs[column.columnName].separator}
                                 </span>
                               )}
@@ -285,7 +285,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                     )}
                   </div>
                 ) : (
-                  <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
+                  <div className="py-4 text-center text-xs text-muted-foreground/70">컬럼 정보 로딩 중...</div>
                 )}
               </div>
             ))}
@@ -294,17 +294,17 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
 
       {!targetTableName ? (
         <div className="space-y-3">
-          <div className="text-center text-gray-500">
+          <div className="text-center text-muted-foreground">
             <p>테이블이 선택되지 않았습니다.</p>
             <p className="text-sm">기본 설정 탭에서 테이블을 선택하세요.</p>
           </div>
         </div>
       ) : availableColumns.length === 0 ? (
         <div className="space-y-3">
-          <div className="text-center text-gray-500">
+          <div className="text-center text-muted-foreground">
             <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
             <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-            <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+            <p className="mt-2 text-xs text-primary">현재 화면 테이블: {screenTableName}</p>
           </div>
         </div>
       ) : (
@@ -383,7 +383,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                         )}
                       </button>
                     )}
-                    <span className={cn("text-[10px] text-gray-400", !isAdded && "ml-auto")}>
+                    <span className={cn("text-[10px] text-muted-foreground/70", !isAdded && "ml-auto")}>
                       {column.input_type || column.dataType}
                     </span>
                   </div>
@@ -402,14 +402,14 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
               <div className="space-y-3">
                 {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                   <div key={tableIndex} className="space-y-1">
-                    <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
+                    <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
                       <Link2 className="h-3 w-3" />
                       <span>{joinTable.tableName}</span>
                       <Badge variant="outline" className="text-[10px]">
                         {joinTable.currentDisplayColumn}
                       </Badge>
                     </div>
-                    <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                    <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                       {joinTable.availableColumns.map((column, colIndex) => {
                         const matchingJoinColumn = entityJoinColumns.availableColumns.find(
                           (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
@@ -423,8 +423,8 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                           <div
                             key={colIndex}
                             className={cn(
-                              "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                              isAlreadyAdded && "bg-blue-100",
+                              "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                              isAlreadyAdded && "bg-primary/10",
                             )}
                             onClick={() => {
                               if (isAlreadyAdded) {
@@ -455,9 +455,9 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                               }}
                               className="pointer-events-none h-3.5 w-3.5"
                             />
-                            <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                            <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                             <span className="truncate text-xs">{column.columnLabel}</span>
-                            <span className="ml-auto text-[10px] text-blue-400">
+                            <span className="ml-auto text-[10px] text-primary/80">
                               {column.inputType || column.dataType}
                             </span>
                           </div>
diff --git a/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx
index 5599e49e..afed47b3 100644
--- a/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx
@@ -257,7 +257,7 @@ export const OptionsConfigPanel: React.FC<OptionsConfigPanelProps> = ({
                 placeholder="8"
                 className="h-8"
               />
-              <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+              <div className="text-xs text-muted-foreground">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
             </div>
           </div>
         )}
diff --git a/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx b/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx
index 99efdaca..fd98bda6 100644
--- a/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx
@@ -34,10 +34,10 @@ const TabsRenderer: ComponentRenderer = ({ component, children, ...props }) => {
             {children && React.Children.count(children) > 0 ? (
               children
             ) : (
-              <div className="flex h-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50">
+              <div className="flex h-full items-center justify-center rounded border border-dashed border-input bg-muted">
                 <div className="text-center">
-                  <div className="text-sm text-gray-600">{tab.content}</div>
-                  <div className="mt-1 text-xs text-gray-400">탭 내용 영역</div>
+                  <div className="text-sm text-muted-foreground">{tab.content}</div>
+                  <div className="mt-1 text-xs text-muted-foreground/70">탭 내용 영역</div>
                 </div>
               </div>
             )}
diff --git a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
index 0a04f76d..72e7fe78 100644
--- a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
@@ -372,38 +372,38 @@ const TabsDesignEditor: React.FC<{
                       {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
                       <div
                         className={cn(
-                          "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
-                          isSelected ? "border-primary" : "border-gray-200"
+                          "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-muted px-1",
+                          isSelected ? "border-primary" : "border-border"
                         )}
                         style={{ width: comp.size?.width || 200 }}
                         onMouseDown={(e) => handleDragStart(e, comp)}
                       >
                         <div className="flex items-center gap-0.5">
-                          <Move className="h-2.5 w-2.5 text-gray-400" />
-                          <span className="text-[9px] text-gray-500 truncate max-w-[100px]">
+                          <Move className="h-2.5 w-2.5 text-muted-foreground/70" />
+                          <span className="text-[9px] text-muted-foreground truncate max-w-[100px]">
                             {comp.label || comp.componentType}
                           </span>
                         </div>
                         <div className="flex items-center">
                           <button
-                            className="rounded p-0.5 hover:bg-gray-200"
+                            className="rounded p-0.5 hover:bg-muted/80"
                             onClick={(e) => {
                               e.stopPropagation();
                               onSelectTabComponent?.(activeTabId, comp.id, comp);
                             }}
                             title="설정"
                           >
-                            <Settings className="h-2.5 w-2.5 text-gray-500" />
+                            <Settings className="h-2.5 w-2.5 text-muted-foreground" />
                           </button>
                           <button
-                            className="rounded p-0.5 hover:bg-red-100"
+                            className="rounded p-0.5 hover:bg-destructive/10"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleDeleteComponent(comp.id);
                             }}
                             title="삭제"
                           >
-                            <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                            <Trash2 className="h-2.5 w-2.5 text-destructive" />
                           </button>
                         </div>
                       </div>
@@ -414,7 +414,7 @@ const TabsDesignEditor: React.FC<{
                           "relative rounded-b border bg-white shadow-sm overflow-hidden",
                           isSelected
                             ? "border-primary ring-2 ring-primary/30"
-                            : "border-gray-200",
+                            : "border-border",
                           (isDragging || isResizing) && "opacity-80 shadow-lg",
                           !(isDragging || isResizing) && "transition-all"
                         )}
@@ -457,12 +457,12 @@ const TabsDesignEditor: React.FC<{
                 })}
               </div>
             ) : (
-              <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                <p className="text-sm font-medium text-gray-500">
+              <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                <p className="text-sm font-medium text-muted-foreground">
                   컴포넌트를 드래그하여 추가
                 </p>
-                <p className="mt-1 text-xs text-gray-400">
+                <p className="mt-1 text-xs text-muted-foreground/70">
                   좌측 패널에서 컴포넌트를 이 영역에 드롭하세요
                 </p>
               </div>
@@ -677,7 +677,7 @@ ComponentRegistry.registerComponent({
                   {activeTab.components.map((comp: TabInlineComponent) => (
                     <div
                       key={comp.id}
-                      className="absolute rounded border border-dashed border-gray-300 bg-white/80 p-2 shadow-sm"
+                      className="absolute rounded border border-dashed border-input bg-white/80 p-2 shadow-sm"
                       style={{
                         left: comp.position?.x || 0,
                         top: comp.position?.y || 0,
@@ -686,10 +686,10 @@ ComponentRegistry.registerComponent({
                       }}
                     >
                       <div className="flex h-full flex-col items-center justify-center">
-                        <span className="text-xs font-medium text-gray-600">
+                        <span className="text-xs font-medium text-muted-foreground">
                           {comp.label || comp.componentType}
                         </span>
-                        <span className="text-[10px] text-gray-400">
+                        <span className="text-[10px] text-muted-foreground/70">
                           {comp.componentType}
                         </span>
                       </div>
@@ -697,12 +697,12 @@ ComponentRegistry.registerComponent({
                   ))}
                 </div>
               ) : (
-                <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                  <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                  <p className="text-sm font-medium text-gray-500">
+                <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                  <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                  <p className="text-sm font-medium text-muted-foreground">
                     컴포넌트를 드래그하여 추가
                   </p>
-                  <p className="mt-1 text-xs text-gray-400">
+                  <p className="mt-1 text-xs text-muted-foreground/70">
                     좌측 패널에서 컴포넌트를 이 영역에 드롭하세요
                   </p>
                 </div>
diff --git a/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx b/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx
index 1c758c1c..044a7db3 100644
--- a/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx
+++ b/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx
@@ -105,7 +105,7 @@ const TabsLayoutComponent: React.FC<TabsLayoutComponentProps> = ({
         >
           {/* 탭 목록 */}
           <TabsList
-            className={` ${sizeClass} ${tabsConfig.position === "bottom" ? "order-2" : ""} ${tabsConfig.position === "right" ? "order-2" : ""} ${tabsConfig.variant === "pills" ? "bg-gray-100" : ""} ${tabsConfig.variant === "underline" ? "border-b" : ""} `}
+            className={` ${sizeClass} ${tabsConfig.position === "bottom" ? "order-2" : ""} ${tabsConfig.position === "right" ? "order-2" : ""} ${tabsConfig.variant === "pills" ? "bg-muted" : ""} ${tabsConfig.variant === "underline" ? "border-b" : ""} `}
             style={{
               flexShrink: 0,
               justifyContent:
@@ -116,7 +116,7 @@ const TabsLayoutComponent: React.FC<TabsLayoutComponentProps> = ({
               <div key={zone.id} className="flex items-center">
                 <TabsTrigger
                   value={zone.id}
-                  className={` ${sizeClass} ${tabsConfig.variant === "pills" ? "rounded-full" : ""} ${tabsConfig.variant === "underline" ? "border-b-2 border-transparent data-[state=active]:border-blue-500" : ""} `}
+                  className={` ${sizeClass} ${tabsConfig.variant === "pills" ? "rounded-full" : ""} ${tabsConfig.variant === "underline" ? "border-b-2 border-transparent data-[state=active]:border-primary" : ""} `}
                 >
                   {zone.name}
                 </TabsTrigger>
@@ -124,7 +124,7 @@ const TabsLayoutComponent: React.FC<TabsLayoutComponentProps> = ({
                 {/* 닫기 버튼 (설정에서 허용한 경우) */}
                 {tabsConfig.closable && isDesignMode && layout.zones.length > 1 && (
                   <button
-                    className="ml-1 rounded p-1 hover:bg-gray-200"
+                    className="ml-1 rounded p-1 hover:bg-muted/80"
                     onClick={(e) => {
                       e.stopPropagation();
                       // 탭 닫기 로직 (실제 구현 시 필요)
diff --git a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
index 0af2edf2..8825452e 100644
--- a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
+++ b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
@@ -23,8 +23,8 @@ export const AccordionLayout: React.FC<AccordionLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.accordion) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">accordion 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.accordion가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx b/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
index 66876e67..ee365bd3 100644
--- a/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
+++ b/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
@@ -166,11 +166,11 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                   key={zone.id}
                   style={cardStyle}
                   onClick={() => onSelectComponent?.(zone.id)}
-                  className="hover:border-blue-500 hover:shadow-md"
+                  className="hover:border-primary hover:shadow-md"
                 >
                   {/* 존 라벨 */}
                   <div className="absolute top-2 left-2 z-10">
-                    <div className="rounded bg-blue-500 px-2 py-1 text-xs text-white">{zone.name}</div>
+                    <div className="rounded bg-primary px-2 py-1 text-xs text-white">{zone.name}</div>
                   </div>
 
                   {/* 존 내용 */}
@@ -178,7 +178,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                     {zoneChildren.length > 0 ? (
                       <div className="flex-1">{zoneChildren}</div>
                     ) : (
-                      <div className="flex flex-1 items-center justify-center rounded border-2 border-dashed border-gray-200 text-gray-400">
+                      <div className="flex flex-1 items-center justify-center rounded border-2 border-dashed border-border text-muted-foreground/70">
                         <div className="text-center">
                           <div className="text-sm font-medium">카드 존</div>
                           <div className="mt-1 text-xs">컴포넌트를 드래그하여 추가하세요</div>
@@ -199,8 +199,8 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 이미지 */}
                 {cardConfig.cardStyle?.showImage && cardConfig.columnMapping?.imageColumn && (
                   <div className="mb-3 flex justify-center">
-                    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200">
-                      <span className="text-xl text-gray-500">👤</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted/80">
+                      <span className="text-xl text-muted-foreground">👤</span>
                     </div>
                   </div>
                 )}
@@ -208,7 +208,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 타이틀 */}
                 {cardConfig.cardStyle?.showTitle && (
                   <div className="mb-2">
-                    <h3 className="text-lg font-semibold text-gray-900">
+                    <h3 className="text-lg font-semibold text-foreground">
                       {getColumnValue(item, cardConfig.columnMapping?.titleColumn) ||
                         getAutoFallbackValue(item, "title")}
                     </h3>
@@ -218,7 +218,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 서브타이틀 */}
                 {cardConfig.cardStyle?.showSubtitle && (
                   <div className="mb-2">
-                    <p className="text-sm font-medium text-blue-600">
+                    <p className="text-sm font-medium text-primary">
                       {getColumnValue(item, cardConfig.columnMapping?.subtitleColumn) ||
                         getAutoFallbackValue(item, "subtitle")}
                     </p>
@@ -228,7 +228,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 설명 */}
                 {cardConfig.cardStyle?.showDescription && (
                   <div className="mb-3 flex-1">
-                    <p className="text-sm leading-relaxed text-gray-600">
+                    <p className="text-sm leading-relaxed text-muted-foreground">
                       {truncateText(
                         getColumnValue(item, cardConfig.columnMapping?.descriptionColumn) ||
                           getAutoFallbackValue(item, "description"),
@@ -240,15 +240,15 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
 
                 {/* 추가 표시 컬럼들 */}
                 {cardConfig.columnMapping?.displayColumns && cardConfig.columnMapping.displayColumns.length > 0 && (
-                  <div className="space-y-1 border-t border-gray-100 pt-3">
+                  <div className="space-y-1 border-t border-border pt-3">
                     {cardConfig.columnMapping.displayColumns.map((columnName, idx) => {
                       const value = getColumnValue(item, columnName);
                       if (!value) return null;
 
                       return (
                         <div key={idx} className="flex justify-between text-xs">
-                          <span className="text-gray-500 capitalize">{getColumnLabel(columnName)}:</span>
-                          <span className="font-medium text-gray-700">{value}</span>
+                          <span className="text-muted-foreground capitalize">{getColumnLabel(columnName)}:</span>
+                          <span className="font-medium text-foreground">{value}</span>
                         </div>
                       );
                     })}
@@ -257,8 +257,8 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
 
                 {/* 카드 액션 (선택사항) */}
                 <div className="mt-3 flex justify-end space-x-2">
-                  <button className="text-xs font-medium text-blue-600 hover:text-blue-800">상세보기</button>
-                  <button className="text-xs font-medium text-gray-500 hover:text-gray-700">편집</button>
+                  <button className="text-xs font-medium text-primary hover:text-primary">상세보기</button>
+                  <button className="text-xs font-medium text-muted-foreground hover:text-foreground">편집</button>
                 </div>
               </div>
             ))}
@@ -266,7 +266,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
         {/* 빈 상태 표시 */}
         {!isDesignMode && displayData.length === 0 && (
           <div className="col-span-full flex items-center justify-center p-8">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <div className="mb-2 text-lg">📋</div>
               <div className="text-sm">표시할 데이터가 없습니다</div>
             </div>
diff --git a/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx b/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
index 8970b043..5a5af75e 100644
--- a/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
+++ b/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
@@ -24,8 +24,8 @@ export const FlexboxLayout: React.FC<FlexboxLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.flexbox) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">플렉스박스 레이아웃 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.flexbox가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/layouts/grid/GridLayout.tsx b/frontend/lib/registry/layouts/grid/GridLayout.tsx
index eef79ecb..21bf7d01 100644
--- a/frontend/lib/registry/layouts/grid/GridLayout.tsx
+++ b/frontend/lib/registry/layouts/grid/GridLayout.tsx
@@ -24,8 +24,8 @@ export const GridLayout: React.FC<GridLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.grid) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">그리드 레이아웃 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.grid가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx b/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
index 660690f4..6c2c09a0 100644
--- a/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
+++ b/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
@@ -23,8 +23,8 @@ export const HeroSectionLayout: React.FC<HeroSectionLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.heroSection) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">heroSection 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.heroSection가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/layouts/split/SplitLayout.tsx b/frontend/lib/registry/layouts/split/SplitLayout.tsx
index 1a85164d..7a3bcb13 100644
--- a/frontend/lib/registry/layouts/split/SplitLayout.tsx
+++ b/frontend/lib/registry/layouts/split/SplitLayout.tsx
@@ -23,8 +23,8 @@ export const SplitLayout: React.FC<SplitLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.split) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">split 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.split가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/pop-components/pop-button.tsx b/frontend/lib/registry/pop-components/pop-button.tsx
index 0dc5aa50..ccf5b041 100644
--- a/frontend/lib/registry/pop-components/pop-button.tsx
+++ b/frontend/lib/registry/pop-components/pop-button.tsx
@@ -320,9 +320,9 @@ function SectionDivider({ label }: { label: string }) {
   return (
     <div className="pt-3 pb-1">
       <div className="flex items-center gap-2">
-        <div className="h-px flex-1 bg-gray-300" />
-        <span className="text-xs font-medium text-gray-500">{label}</span>
-        <div className="h-px flex-1 bg-gray-300" />
+        <div className="h-px flex-1 bg-muted/60" />
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <div className="h-px flex-1 bg-muted/60" />
       </div>
     </div>
   );
@@ -683,7 +683,7 @@ export function PopButtonComponent({
       return "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600";
     }
     if (cartIsDirty) {
-      return "bg-orange-500 hover:bg-orange-600 text-white border-orange-500 animate-pulse";
+      return "bg-amber-500 hover:bg-orange-600 text-white border-orange-500 animate-pulse";
     }
     return "";
   }, [isCartMode, cartCount, cartIsDirty]);
@@ -733,7 +733,7 @@ export function PopButtonComponent({
               className={cn(
                 "absolute -top-2 -right-2 flex items-center justify-center rounded-full text-[10px] font-bold",
                 cartIsDirty
-                  ? "bg-orange-500 text-white"
+                  ? "bg-amber-500 text-white"
                   : "bg-emerald-600 text-white",
               )}
               style={{ minWidth: 18, height: 18, padding: "0 4px" }}
@@ -1130,8 +1130,8 @@ export function PopButtonConfigPanel({
               </div>
 
               {/* 원본 데이터 */}
-              <div className="rounded-md border bg-blue-50/50 px-2.5 py-1.5 dark:bg-blue-950/20">
-                <p className="mb-1 text-[10px] font-medium text-blue-700 dark:text-blue-400">원본 행 데이터</p>
+              <div className="rounded-md border bg-primary/10/50 px-2.5 py-1.5 dark:bg-primary/10">
+                <p className="mb-1 text-[10px] font-medium text-primary dark:text-primary/80">원본 행 데이터</p>
 
                 {/* 저장 모드 선택 */}
                 <div className="mb-1.5 flex items-center gap-1.5">
diff --git a/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx b/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx
index 6e818a0c..4136d144 100644
--- a/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx
@@ -232,7 +232,7 @@ export function NumberInputModal({
           >
             <VisuallyHidden><DialogTitle>수량 입력</DialogTitle></VisuallyHidden>
             {/* 헤더 */}
-            <div className="flex items-center justify-between bg-blue-500 px-4 py-3">
+            <div className="flex items-center justify-between bg-primary px-4 py-3">
               <div className="flex items-center gap-2">
                 {isBackVisible && (
                   <button
@@ -243,7 +243,7 @@ export function NumberInputModal({
                     <ArrowLeft className="h-4 w-4" />
                   </button>
                 )}
-                <span className="rounded-full bg-blue-400/50 px-3 py-1 text-sm font-medium text-white">
+                <span className="rounded-full bg-primary/70/50 px-3 py-1 text-sm font-medium text-white">
                   {headerLabel}
                 </span>
               </div>
@@ -264,7 +264,7 @@ export function NumberInputModal({
                 <div className="space-y-3">
                   {/* 안내 메시지 - 마지막 등록 결과 */}
                   {showSummary && entries.length > 0 && (
-                    <div className="rounded-lg bg-blue-50 px-3 py-2 text-center text-sm font-medium text-blue-700">
+                    <div className="rounded-lg bg-primary/10 px-3 py-2 text-center text-sm font-medium text-primary">
                       {(() => {
                         const last = entries[entries.length - 1];
                         return `${last.packageCount}${last.unitLabel} x ${last.quantityPerUnit}${unit} = ${last.totalQuantity.toLocaleString()}${unit}`;
@@ -274,19 +274,19 @@ export function NumberInputModal({
 
                   {/* 포장 내역 리스트 */}
                   <div className="space-y-1.5">
-                    <p className="text-xs font-medium text-gray-500">포장 내역</p>
+                    <p className="text-xs font-medium text-muted-foreground">포장 내역</p>
                     {entries.map((entry, idx) => (
                       <div
                         key={idx}
-                        className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
+                        className="flex items-center justify-between rounded-lg border border-border bg-muted px-3 py-2"
                       >
-                        <span className="text-sm text-gray-700">
+                        <span className="text-sm text-foreground">
                           {entry.packageCount}{entry.unitLabel} x {entry.quantityPerUnit}{unit} = {entry.totalQuantity.toLocaleString()}{unit}
                         </span>
                         <button
                           type="button"
                           onClick={() => handleRemoveEntry(idx)}
-                          className="rounded-full p-1 text-gray-400 hover:bg-red-50 hover:text-red-500"
+                          className="rounded-full p-1 text-muted-foreground/70 hover:bg-destructive/10 hover:text-destructive"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
@@ -295,9 +295,9 @@ export function NumberInputModal({
                   </div>
 
                   {/* 합계 */}
-                  <div className="flex items-center justify-between rounded-lg bg-green-50 px-3 py-2">
-                    <span className="text-sm font-medium text-green-700">합계</span>
-                    <span className="text-lg font-bold text-green-700">
+                  <div className="flex items-center justify-between rounded-lg bg-emerald-50 px-3 py-2">
+                    <span className="text-sm font-medium text-emerald-700">합계</span>
+                    <span className="text-lg font-bold text-emerald-700">
                       {entriesTotal.toLocaleString()} {unit}
                     </span>
                   </div>
@@ -317,7 +317,7 @@ export function NumberInputModal({
                     {remainingQuantity > 0 && (
                       <button
                         type="button"
-                        className="flex h-12 items-center justify-center gap-1.5 rounded-2xl border border-blue-200 bg-blue-50 text-sm font-bold text-blue-600 active:bg-blue-100"
+                        className="flex h-12 items-center justify-center gap-1.5 rounded-2xl border border-primary/20 bg-primary/10 text-sm font-bold text-primary active:bg-primary/10"
                         onClick={handleAddMore}
                       >
                         <Plus className="h-4 w-4" />
@@ -326,7 +326,7 @@ export function NumberInputModal({
                     )}
                     <button
                       type="button"
-                      className={`flex h-12 items-center justify-center rounded-2xl bg-green-500 text-base font-bold text-white active:bg-green-600 ${remainingQuantity <= 0 ? "col-span-2" : ""}`}
+                      className={`flex h-12 items-center justify-center rounded-2xl bg-emerald-500 text-base font-bold text-white active:bg-emerald-600 ${remainingQuantity <= 0 ? "col-span-2" : ""}`}
                       onClick={handleComplete}
                     >
                       완료
@@ -336,13 +336,13 @@ export function NumberInputModal({
               ) : (
                 <>
                   {/* 숫자 표시 영역 */}
-                  <div className="flex min-h-[72px] items-center justify-end rounded-xl border-2 border-gray-200 bg-gray-50 px-4 py-4">
+                  <div className="flex min-h-[72px] items-center justify-end rounded-xl border-2 border-border bg-muted px-4 py-4">
                     {displayText ? (
-                      <span className="text-4xl font-bold tracking-tight text-gray-900">
+                      <span className="text-4xl font-bold tracking-tight text-foreground">
                         {displayText}
                       </span>
                     ) : (
-                      <span className="text-2xl text-gray-300">0</span>
+                      <span className="text-2xl text-muted-foreground/50">0</span>
                     )}
                   </div>
 
@@ -357,7 +357,7 @@ export function NumberInputModal({
                       <button
                         key={n}
                         type="button"
-                        className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                        className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                         onClick={() => handleNumberClick(n)}
                       >
                         {n}
@@ -375,7 +375,7 @@ export function NumberInputModal({
                       <button
                         key={n}
                         type="button"
-                        className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                        className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                         onClick={() => handleNumberClick(n)}
                       >
                         {n}
@@ -393,7 +393,7 @@ export function NumberInputModal({
                       <button
                         key={n}
                         type="button"
-                        className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                        className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                         onClick={() => handleNumberClick(n)}
                       >
                         {n}
@@ -401,7 +401,7 @@ export function NumberInputModal({
                     ))}
                     <button
                       type="button"
-                      className="h-14 rounded-2xl bg-blue-100 text-sm font-bold text-blue-600 active:bg-blue-200"
+                      className="h-14 rounded-2xl bg-primary/10 text-sm font-bold text-primary active:bg-blue-200"
                       onClick={handleMax}
                     >
                       MAX
@@ -409,14 +409,14 @@ export function NumberInputModal({
 
                     <button
                       type="button"
-                      className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                      className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                       onClick={() => handleNumberClick("0")}
                     >
                       0
                     </button>
                     <button
                       type="button"
-                      className="col-span-3 h-14 rounded-2xl bg-green-500 text-base font-bold text-white active:bg-green-600"
+                      className="col-span-3 h-14 rounded-2xl bg-emerald-500 text-base font-bold text-white active:bg-emerald-600"
                       onClick={handleConfirm}
                     >
                       {step === "package_count" ? "다음" : "확인"}
diff --git a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
index 4ba1abc1..07fc2f09 100644
--- a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
@@ -1101,10 +1101,10 @@ function Card({
   const borderClass = isCartListMode
     ? isSelected
       ? "border-primary border-2 hover:border-primary/80"
-      : "hover:border-2 hover:border-blue-500"
+      : "hover:border-2 hover:border-primary"
     : isCarted
       ? "border-emerald-500 border-2 hover:border-emerald-600"
-      : "hover:border-2 hover:border-blue-500";
+      : "hover:border-2 hover:border-primary";
 
   // 카드 헤더 배경: 장바구니 목록 모드에서는 선택 상태, 기본 모드에서는 담기 상태 기준
   const headerBgClass = isCartListMode
diff --git a/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx b/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
index 4a285f20..914d4eb9 100644
--- a/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
+++ b/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
@@ -1578,7 +1578,7 @@ function FieldItemEditor({
             [{FIELD_INPUT_TYPE_LABELS[field.inputType]}]
           </span>
           {field.readOnly && (
-            <span className="ml-1 text-orange-500">(읽기전용)</span>
+            <span className="ml-1 text-amber-500">(읽기전용)</span>
           )}
         </span>
         <Button
@@ -2139,21 +2139,21 @@ function JsonKeySelect({
 const BG_COLOR_OPTIONS = [
   { value: "__default__", label: "기본" },
   { value: "bg-emerald-50", label: "초록" },
-  { value: "bg-blue-50", label: "파랑" },
+  { value: "bg-primary/10", label: "파랑" },
   { value: "bg-amber-50", label: "노랑" },
   { value: "bg-rose-50", label: "빨강" },
   { value: "bg-purple-50", label: "보라" },
-  { value: "bg-gray-50", label: "회색" },
+  { value: "bg-muted", label: "회색" },
 ] as const;
 
 const BORDER_COLOR_OPTIONS = [
   { value: "__default__", label: "기본" },
   { value: "border-emerald-200", label: "초록" },
-  { value: "border-blue-200", label: "파랑" },
+  { value: "border-primary/20", label: "파랑" },
   { value: "border-amber-200", label: "노랑" },
   { value: "border-rose-200", label: "빨강" },
   { value: "border-purple-200", label: "보라" },
-  { value: "border-gray-200", label: "회색" },
+  { value: "border-border", label: "회색" },
 ] as const;
 
 function AppearanceEditor({
diff --git a/frontend/lib/registry/pop-components/pop-icon.tsx b/frontend/lib/registry/pop-components/pop-icon.tsx
index 3ecb9d49..719dae78 100644
--- a/frontend/lib/registry/pop-components/pop-icon.tsx
+++ b/frontend/lib/registry/pop-components/pop-icon.tsx
@@ -125,9 +125,9 @@ function SectionDivider({ label }: { label: string }) {
   return (
     <div className="pt-3 pb-1">
       <div className="flex items-center gap-2">
-        <div className="h-px flex-1 bg-gray-300" />
-        <span className="text-xs font-medium text-gray-500">{label}</span>
-        <div className="h-px flex-1 bg-gray-300" />
+        <div className="h-px flex-1 bg-muted/60" />
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <div className="h-px flex-1 bg-muted/60" />
       </div>
     </div>
   );
@@ -445,7 +445,7 @@ export function PopIconComponent({
                 : "외부 URL로 이동합니다."
               }
               <br />
-              <span className="text-red-600 font-medium">
+              <span className="text-destructive font-medium">
                 ※ 저장하지 않은 변경사항은 사라집니다.
               </span>
             </AlertDialogDescription>
@@ -555,7 +555,7 @@ function QuickSelectGrid({ config, onUpdate }: PopIconConfigPanelProps) {
             title={item.label}
           >
             {item.type === "lucide" ? (
-              <DynamicLucideIcon name={item.value} size={18} className="text-gray-700" />
+              <DynamicLucideIcon name={item.value} size={18} className="text-foreground" />
             ) : (
               <span className="text-base">{item.value}</span>
             )}
@@ -593,7 +593,7 @@ function EmojiInput({ config, onUpdate }: PopIconConfigPanelProps) {
         className="h-8 text-xs"
         maxLength={4}
       />
-      <p className="text-xs text-gray-500">
+      <p className="text-xs text-muted-foreground">
         Windows: Win + . / Mac: Ctrl + Cmd + Space
       </p>
       
@@ -743,7 +743,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
       </div>
 
       {/* 에러 메시지 */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive">{error}</p>}
 
       {/* 또는 URL 직접 입력 */}
       <Input
@@ -766,7 +766,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
       {/* 현재 이미지 미리보기 + 크기 조절 */}
       {hasImage && (
         <div className="mt-2 space-y-2">
-          <div className="relative p-2 border rounded bg-gray-50">
+          <div className="relative p-2 border rounded bg-muted">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={previewUrl}
@@ -774,7 +774,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
               className="max-h-20 mx-auto object-contain"
             />
             {isTemp && (
-              <span className="absolute top-1 right-1 text-[10px] bg-yellow-100 text-yellow-700 px-1.5 py-0.5 rounded">
+              <span className="absolute top-1 right-1 text-[10px] bg-amber-100 text-yellow-700 px-1.5 py-0.5 rounded">
                 임시
               </span>
             )}
@@ -795,7 +795,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
             className="w-full"
           />
           {isTemp && (
-            <p className="text-xs text-yellow-600">
+            <p className="text-xs text-amber-600">
               ※ 화면 저장 시 서버에 업로드됩니다.
             </p>
           )}
diff --git a/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx b/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
index 380cc103..6813e373 100644
--- a/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
@@ -340,9 +340,9 @@ function matchSearchMode(cellValue: string, term: string, mode: ModalSearchMode)
 // ========================================
 
 const ICON_COLORS = [
-  "bg-red-500", "bg-orange-500", "bg-amber-500", "bg-yellow-500",
-  "bg-lime-500", "bg-green-500", "bg-emerald-500", "bg-teal-500",
-  "bg-cyan-500", "bg-sky-500", "bg-blue-500", "bg-indigo-500",
+  "bg-destructive", "bg-amber-500", "bg-amber-500", "bg-amber-500",
+  "bg-lime-500", "bg-emerald-500", "bg-emerald-500", "bg-teal-500",
+  "bg-cyan-500", "bg-sky-500", "bg-primary", "bg-primary",
   "bg-violet-500", "bg-purple-500", "bg-fuchsia-500", "bg-pink-500",
 ];
 
diff --git a/frontend/lib/registry/pop-components/pop-text.tsx b/frontend/lib/registry/pop-components/pop-text.tsx
index 969a8a13..bfbe5e06 100644
--- a/frontend/lib/registry/pop-components/pop-text.tsx
+++ b/frontend/lib/registry/pop-components/pop-text.tsx
@@ -187,7 +187,7 @@ function DesignModePreview({
       // 이미지 미리보기
       if (!config?.imageUrl) {
         return (
-          <div className="flex h-full w-full items-center justify-center border border-dashed border-gray-300 text-[10px] text-gray-400">
+          <div className="flex h-full w-full items-center justify-center border border-dashed border-input text-[10px] text-muted-foreground/70">
             이미지 URL 없음
           </div>
         );
@@ -256,7 +256,7 @@ function DateTimePreview({ config }: { config?: PopTextConfig }) {
   return (
     <span
       className={cn(
-        "font-mono text-gray-600",
+        "font-mono text-muted-foreground",
         FONT_SIZE_CLASSES[config?.fontSize || "base"]
       )}
     >
@@ -305,7 +305,7 @@ function DateTimeDisplay({ config }: { config?: PopTextConfig }) {
 function ImageDisplay({ config }: { config?: PopTextConfig }) {
   if (!config?.imageUrl) {
     return (
-      <div className="flex h-full items-center justify-center border-2 border-dashed text-xs text-gray-400">
+      <div className="flex h-full items-center justify-center border-2 border-dashed text-xs text-muted-foreground/70">
         이미지 URL 필요
       </div>
     );
@@ -399,9 +399,9 @@ function SectionDivider({ label }: { label: string }) {
   return (
     <div className="pt-3 pb-1">
       <div className="flex items-center gap-2">
-        <div className="h-px flex-1 bg-gray-300" />
-        <span className="text-xs font-medium text-gray-500">{label}</span>
-        <div className="h-px flex-1 bg-gray-300" />
+        <div className="h-px flex-1 bg-muted/60" />
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <div className="h-px flex-1 bg-muted/60" />
       </div>
     </div>
   );
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index 10e06d83..5c2e9a61 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -395,22 +395,22 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
 
   if (loading) {
     return (
-      <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4 w-full">
-        <div className="flex items-center gap-2 text-gray-600">
+      <div className="rounded-md border border-dashed border-input bg-muted p-4 w-full">
+        <div className="flex items-center gap-2 text-muted-foreground">
           <span className="text-sm font-medium">⏳ 로딩 중...</span>
         </div>
-        <p className="mt-1 text-xs text-gray-500">설정 패널을 불러오는 중입니다.</p>
+        <p className="mt-1 text-xs text-muted-foreground">설정 패널을 불러오는 중입니다.</p>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4 w-full">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4 w-full">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">⚠️ 로드 실패</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">설정 패널을 불러올 수 없습니다: {error}</p>
+        <p className="mt-1 text-xs text-destructive">설정 패널을 불러올 수 없습니다: {error}</p>
       </div>
     );
   }
@@ -418,11 +418,11 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   if (!ConfigPanelComponent) {
     console.warn(`⚠️ DynamicComponentConfigPanel: ${componentId} ConfigPanelComponent가 null`);
     return (
-      <div className="rounded-md border border-dashed border-yellow-300 bg-yellow-50 p-4 w-full">
-        <div className="flex items-center gap-2 text-yellow-600">
+      <div className="rounded-md border border-dashed border-amber-300 bg-amber-50 p-4 w-full">
+        <div className="flex items-center gap-2 text-amber-600">
           <span className="text-sm font-medium">⚠️ 설정 패널 없음</span>
         </div>
-        <p className="mt-1 text-xs text-yellow-500">컴포넌트 "{componentId}"에 대한 설정 패널이 없습니다.</p>
+        <p className="mt-1 text-xs text-amber-500">컴포넌트 "{componentId}"에 대한 설정 패널이 없습니다.</p>
       </div>
     );
   }
diff --git a/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx b/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
index 75da02a5..302f5ffa 100644
--- a/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
+++ b/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
@@ -58,23 +58,23 @@ export function ScheduleConfirmDialog({
 
         {/* 요약 정보 */}
         <div className="grid grid-cols-3 gap-3 py-4">
-          <div className="flex flex-col items-center rounded-lg border bg-green-50 p-3 dark:bg-green-900/20">
-            <Plus className="mb-1 h-5 w-5 text-green-600" />
-            <span className="text-2xl font-bold text-green-600">
+          <div className="flex flex-col items-center rounded-lg border bg-emerald-50 p-3 dark:bg-emerald-900/20">
+            <Plus className="mb-1 h-5 w-5 text-emerald-600" />
+            <span className="text-2xl font-bold text-emerald-600">
               {summary.createCount}
             </span>
             <span className="text-xs text-muted-foreground">생성</span>
           </div>
-          <div className="flex flex-col items-center rounded-lg border bg-red-50 p-3 dark:bg-red-900/20">
-            <Trash2 className="mb-1 h-5 w-5 text-red-600" />
-            <span className="text-2xl font-bold text-red-600">
+          <div className="flex flex-col items-center rounded-lg border bg-destructive/10 p-3 dark:bg-red-900/20">
+            <Trash2 className="mb-1 h-5 w-5 text-destructive" />
+            <span className="text-2xl font-bold text-destructive">
               {summary.deleteCount}
             </span>
             <span className="text-xs text-muted-foreground">삭제</span>
           </div>
-          <div className="flex flex-col items-center rounded-lg border bg-blue-50 p-3 dark:bg-blue-900/20">
-            <RefreshCw className="mb-1 h-5 w-5 text-blue-600" />
-            <span className="text-2xl font-bold text-blue-600">
+          <div className="flex flex-col items-center rounded-lg border bg-primary/10 p-3 dark:bg-primary/20/20">
+            <RefreshCw className="mb-1 h-5 w-5 text-primary" />
+            <span className="text-2xl font-bold text-primary">
               {summary.updateCount}
             </span>
             <span className="text-xs text-muted-foreground">수정</span>
@@ -88,7 +88,7 @@ export function ScheduleConfirmDialog({
             {toCreate.length > 0 && (
               <div>
                 <h4 className="mb-2 flex items-center gap-2 text-sm font-medium">
-                  <Badge variant="default" className="bg-green-600">
+                  <Badge variant="default" className="bg-emerald-600">
                     생성
                   </Badge>
                   {toCreate.length}건
@@ -123,7 +123,7 @@ export function ScheduleConfirmDialog({
                   <Badge variant="destructive">삭제</Badge>
                   {toDelete.length}건
                 </h4>
-                <div className="space-y-1 rounded-md border border-red-200 bg-red-50/50 p-2 dark:border-red-800 dark:bg-red-900/10">
+                <div className="space-y-1 rounded-md border border-destructive/20 bg-destructive/10/50 p-2 dark:border-red-800 dark:bg-red-900/10">
                   {toDelete.slice(0, 5).map((item, index) => (
                     <div
                       key={index}
@@ -153,7 +153,7 @@ export function ScheduleConfirmDialog({
                   <Badge variant="secondary">수정</Badge>
                   {toUpdate.length}건
                 </h4>
-                <div className="space-y-1 rounded-md border border-blue-200 bg-blue-50/50 p-2 dark:border-blue-800 dark:bg-blue-900/10">
+                <div className="space-y-1 rounded-md border border-primary/20 bg-primary/10/50 p-2 dark:border-primary/30 dark:bg-primary/20/10">
                   {toUpdate.slice(0, 5).map((item, index) => (
                     <div
                       key={index}
diff --git a/frontend/types/workHistory.ts b/frontend/types/workHistory.ts
index ea4820ca..7bdbc8c9 100644
--- a/frontend/types/workHistory.ts
+++ b/frontend/types/workHistory.ts
@@ -78,9 +78,9 @@ export const WORK_STATUS_LABELS: Record<WorkStatus, string> = {
 };
 
 export const WORK_STATUS_COLORS: Record<WorkStatus, string> = {
-  pending: 'bg-gray-100 text-gray-800',
-  in_progress: 'bg-blue-100 text-blue-800',
-  completed: 'bg-green-100 text-green-800',
-  cancelled: 'bg-red-100 text-red-800',
+  pending: 'bg-muted text-foreground',
+  in_progress: 'bg-primary/10 text-primary',
+  completed: 'bg-emerald-100 text-emerald-800',
+  cancelled: 'bg-destructive/10 text-red-800',
 };