diff --git a/front/src/index.css b/front/src/index.css
index d935dd2..445ac8a 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -1,63 +1,93 @@
-/* Pretendard (CDN, 버전 고정 + dynamic-subset: 사용 글리프만 로드) */
+/* Pretendard (CDN, dynamic-subset) */
 @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
 @import "tailwindcss";
 
-/* ============================================================
-   디자인 토큰 (출처: design.md)
-   - 이 프로젝트는 다크모드 없음 → light 값만 사용 (.dark / @custom-variant 미사용)
-   - 차트(--chart-*) / 사이드바(--sidebar-*) 미사용 → 정의하지 않음
-   ============================================================ */
+/* 디자인 토큰 (light 전용) */
 :root {
   color-scheme: light;
 
-  --radius: 0.625rem; /* 10px (기준값) */
+  --radius: 0.625rem; /* 10px 기준 */
 
-  /* --- 브랜드 메인 컬러 (blue, 숫자 스케일) --- */
-  --brand-500: #3b7de0;  /* light : 강조/포커스 등 밝은 변형 */
-  --brand-600: #0046b0;  /* base  : 기본 메인 컬러 (= --primary) */
-  --brand-700: #003380;  /* deep  : hover/pressed 등 톤다운 상태 */
+  /* 브랜드 */
+  --brand-500: #4e81cd;
+  --brand-600: #124a9e; /* = --primary */
+  --brand-700: #0d3673;
 
-  /* --- 색상 --- */
-  --background: #ffffff;
-  --background-rgb: 250, 250, 250; /* rgba() 조합용 raw 값 */
-  --foreground: #0a0a0a;
+  /* Neutral */
+  --neutral-90: #151515;
+  --neutral-80: #303030;
+  --neutral-70: #606060;
+  --neutral-60: #808080;
+  --neutral-40: #dadbde;
+  --neutral-30: #eaebef;
+  --neutral-20: #f0f1f4;
+  --neutral-10: #f7f8fa;
+  --neutral-00: #ffffff;
 
-  --card: #ffffff;
-  --card-foreground: #0a0a0a;
-  --popover: #ffffff;
-  --popover-foreground: #0a0a0a;
+  /* 상태 / 테이블 */
+  --negative: #e71c3b;
+  --info: #4880ef;
+  --table-header: #e3e8f1;
+  --table-hover: #dbe6fc;
+  --table-selected: #b6ccf9;
 
-  --primary: var(--brand-600);      /* 메인 컬러 = 브랜드 base(600) */
-  --primary-foreground: #fafafa;    /* primary 위 텍스트(흰색) */
-  --secondary: #f5f5f5;
-  --secondary-foreground: #171717;
-  --muted: #f5f5f5;
-  --muted-foreground: #737373;
-  --accent: #f5f5f5;
-  --accent-foreground: #171717;
+  /* 시맨틱 */
+  --background: var(--neutral-00);
+  --foreground: var(--neutral-90);
+  --surface: #eceff5; /* 브랜드 틴트 쿨 그레이 (콘텐츠 면) */
 
-  --border: #e5e5e5;
-  --input: #e5e5e5;
-  --ring: var(--brand-500);         /* 포커스 링 = 브랜드 light(500) */
+  --card: var(--neutral-00);
+  --card-foreground: var(--neutral-90);
+  --popover: var(--neutral-00);
+  --popover-foreground: var(--neutral-90);
 
-  --destructive: #e7000b;
+  --primary: var(--brand-600);
+  --primary-foreground: var(--neutral-00);
+  --secondary: var(--neutral-20);
+  --secondary-foreground: var(--neutral-90);
+  --muted: var(--neutral-10);
+  --muted-foreground: var(--neutral-60);
+  --accent: var(--neutral-20);
+  --accent-foreground: var(--neutral-90);
+
+  --border: var(--neutral-30);
+  --input: var(--neutral-30);
+  --ring: var(--brand-500);
+
+  --destructive: var(--negative);
   --success: #10b981;
   --warning: #f59e0b;
 }
 
-/* ============================================================
-   Tailwind 테마 매핑 (@theme inline)
-   토큰을 유틸로 노출: bg-*, text-*, border-*, rounded-*, font-* 등
-   ============================================================ */
+/* Tailwind 테마 매핑 (@theme inline) */
 @theme inline {
-  /* 브랜드 메인 컬러 (bg-brand-600 / text-brand-700 / hover:bg-brand-700 ...) */
+  /* 브랜드 */
   --color-brand-500: var(--brand-500);
   --color-brand-600: var(--brand-600);
   --color-brand-700: var(--brand-700);
 
-  /* 색상 */
+  /* Neutral */
+  --color-neutral-90: var(--neutral-90);
+  --color-neutral-80: var(--neutral-80);
+  --color-neutral-70: var(--neutral-70);
+  --color-neutral-60: var(--neutral-60);
+  --color-neutral-40: var(--neutral-40);
+  --color-neutral-30: var(--neutral-30);
+  --color-neutral-20: var(--neutral-20);
+  --color-neutral-10: var(--neutral-10);
+  --color-neutral-00: var(--neutral-00);
+
+  /* 상태 / 테이블 */
+  --color-negative: var(--negative);
+  --color-info: var(--info);
+  --color-table-header: var(--table-header);
+  --color-table-hover: var(--table-hover);
+  --color-table-selected: var(--table-selected);
+
+  /* 시맨틱 */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
@@ -82,7 +112,7 @@
   --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
   --font-heading: var(--font-sans);
 
-  /* 모서리 반경 (--radius 의 배수) */
+  /* 모서리 반경 (--radius 배수) */
   --radius-sm: calc(var(--radius) * 0.6);  /* 6px  */
   --radius-md: calc(var(--radius) * 0.8);  /* 8px  */
   --radius-lg: var(--radius);              /* 10px */
@@ -92,9 +122,6 @@
   --radius-4xl: calc(var(--radius) * 2.6); /* 26px */
 }
 
-/* ============================================================
-   기본 스타일
-   ============================================================ */
 @layer base {
   body {
     margin: 0;
@@ -109,7 +136,7 @@
   }
 }
 
-/* 스크롤바 (webkit) — 6px, thumb=border / hover=muted-foreground */
+/* 스크롤바 (webkit) */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;