diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..196483b
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,15 @@
+# Project: startover
+
+## Execution Rules
+
+- 사용자가 요청한 것을 실행하라. 대안을 제안하거나 다른 방법으로 회피하지 마라.
+- 도구/플러그인/의존성이 없으면 설치를 시도하라. "없으니 다른 걸로 하겠습니다"는 금지.
+- NEVER suggest fallbacks or alternatives unless the user explicitly asks for them.
+- If a tool, plugin, or dependency is missing, install it. Do not skip the task or suggest a manual workaround.
+- "고쳤다", "완료했다"고 말하기 전에 실제 동작 확인 결과를 보여줘라.
+- 확실하지 않으면 추측하지 말고 코드를 직접 읽어라. 임시 해결이 아닌 근본 원인을 찾아라.
+
+## Self-Improvement
+
+- 사용자가 접근 방식을 수정하면, 같은 실수를 반복하지 않도록 CLAUDE.md에 규칙을 추가하라.
+
diff --git a/apps/web/src/app/403/page.tsx b/apps/web/src/app/403/page.tsx
index 6819761..5fdfa83 100644
--- a/apps/web/src/app/403/page.tsx
+++ b/apps/web/src/app/403/page.tsx
@@ -2,13 +2,13 @@ import Link from 'next/link';
 
 export default function ForbiddenPage() {
   return (
-    <div className="mx-auto max-w-md px-4 py-16 text-center">
-      <h1 className="mb-4 text-6xl font-bold text-gray-300">403</h1>
-      <h2 className="mb-4 text-xl font-bold">접근 권한이 없습니다</h2>
-      <p className="mb-8 text-gray-600">이 페이지에 접근할 수 있는 권한이 없습니다.</p>
+    <div className="mx-auto max-w-md px-6 py-24 text-center animate-fade-up">
+      <p className="font-display text-8xl font-black text-ink/[0.06] select-none">403</p>
+      <h1 className="mt-2 font-display text-2xl font-bold text-ink">접근 권한이 없습니다</h1>
+      <p className="mt-3 text-sm text-ink-muted">이 페이지에 접근할 수 있는 권한이 없습니다.</p>
       <Link
         href="/"
-        className="inline-block rounded-md bg-blue-600 px-6 py-2 text-white hover:bg-blue-700"
+        className="mt-8 inline-block rounded-full bg-ink px-8 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors"
       >
         홈으로
       </Link>
diff --git a/apps/web/src/app/auth-buttons.tsx b/apps/web/src/app/auth-buttons.tsx
index 4b1bc55..b52dfa5 100644
--- a/apps/web/src/app/auth-buttons.tsx
+++ b/apps/web/src/app/auth-buttons.tsx
@@ -29,13 +29,13 @@ export function AuthButtons({ session }: AuthButtonsProps) {
       <div className="flex items-center gap-2">
         <Link
           href="/auth/login"
-          className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
+          className="text-sm text-ink-light hover:text-warm-600 transition-colors"
         >
           로그인
         </Link>
         <Link
           href="/auth/register"
-          className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
+          className="rounded-full bg-ink px-4 py-1.5 text-sm text-warm-50 hover:bg-warm-800 transition-colors"
         >
           회원가입
         </Link>
@@ -45,15 +45,15 @@ export function AuthButtons({ session }: AuthButtonsProps) {
 
   return (
     <div className="flex items-center gap-3">
-      <span className="text-sm text-gray-600">
+      <span className="text-sm text-ink-light">
         {session.user.name}
-        <span className="ml-1 text-xs text-gray-400">
+        <span className="ml-1 text-xs text-ink-muted">
           ({ROLE_LABELS[session.user.primaryRole] || session.user.primaryRole})
         </span>
       </span>
       <button
         onClick={() => signOut({ callbackUrl: '/' })}
-        className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
+        className="rounded-full px-3 py-1.5 text-sm text-ink-light hover:bg-warm-100 transition-colors"
       >
         로그아웃
       </button>
diff --git a/apps/web/src/app/auth/complete-profile/page.tsx b/apps/web/src/app/auth/complete-profile/page.tsx
index 2236d0b..a3f1e60 100644
--- a/apps/web/src/app/auth/complete-profile/page.tsx
+++ b/apps/web/src/app/auth/complete-profile/page.tsx
@@ -49,65 +49,73 @@ export default function CompleteProfilePage() {
   }
 
   return (
-    <div className="mx-auto max-w-md px-4 py-16">
-      <h1 className="mb-2 text-center text-2xl font-bold">프로필 완성</h1>
-      <p className="mb-8 text-center text-sm text-gray-500">
-        소셜 로그인으로 가입하셨습니다. 역할을 선택해주세요.
-      </p>
+    <div className="mx-auto max-w-md px-6 py-20">
+      <div className="animate-fade-up">
+        <h1 className="mb-2 text-center font-display text-3xl font-bold text-ink">프로필 완성</h1>
+        <p className="mb-8 text-center text-sm text-ink-muted">
+          소셜 로그인으로 가입하셨습니다. 역할을 선택해주세요.
+        </p>
 
-      {error && <div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}
-
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <div>
-          <label className="mb-2 block text-sm font-medium text-gray-700">역할 선택</label>
-          <div className="space-y-2">
-            {ROLES.map((role) => (
-              <label
-                key={role.value}
-                className="flex cursor-pointer items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50"
-              >
-                <input type="radio" name="role" value={role.value} required className="h-4 w-4" />
-                <div>
-                  <div className="font-medium">{role.label}</div>
-                  <div className="text-sm text-gray-500">{role.desc}</div>
-                </div>
-              </label>
-            ))}
+        {error && (
+          <div className="mb-4 rounded-xl border border-red-200 bg-red-50/80 p-4 text-sm text-red-700">
+            {error}
           </div>
-        </div>
+        )}
 
-        <div className="space-y-3 rounded-md border border-gray-200 p-4">
-          <p className="text-sm font-medium text-gray-700">약관 동의</p>
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="termsOfService" required className="h-4 w-4" />
-            <span className="text-sm">
-              <span className="text-red-500">[필수]</span> 이용약관 동의
-            </span>
-          </label>
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="privacyPolicy" required className="h-4 w-4" />
-            <span className="text-sm">
-              <span className="text-red-500">[필수]</span> 개인정보 처리방침 동의
-            </span>
-          </label>
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="marketingConsent" className="h-4 w-4" />
-            <span className="text-sm">[선택] 마케팅 정보 수신 동의</span>
-          </label>
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="kakaoNotification" className="h-4 w-4" />
-            <span className="text-sm">[선택] 카카오 알림톡 수신 동의</span>
-          </label>
-        </div>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-ink-light">역할 선택</label>
+            <div className="space-y-2">
+              {ROLES.map((role) => (
+                <label
+                  key={role.value}
+                  className="flex cursor-pointer items-center gap-3 rounded-xl border-2 border-ink/5 p-4 transition-all hover:border-warm-400 hover:bg-warm-50"
+                >
+                  <input type="radio" name="role" value={role.value} required className="h-4 w-4" />
+                  <div>
+                    <div className="font-medium text-ink">{role.label}</div>
+                    <div className="text-sm text-ink-muted">{role.desc}</div>
+                  </div>
+                </label>
+              ))}
+            </div>
+          </div>
 
-        <button
-          type="submit"
-          disabled={isPending}
-          className="w-full rounded-md bg-blue-600 py-2.5 text-white hover:bg-blue-700 disabled:opacity-50"
-        >
-          {isPending ? '처리 중...' : '완료'}
-        </button>
-      </form>
+          <div className="rounded-xl border border-ink/5 bg-warm-50/50 p-5">
+            <p className="mb-3 text-sm font-medium text-ink-light">약관 동의</p>
+            <div className="space-y-3">
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="termsOfService" required className="h-4 w-4" />
+                <span className="text-sm text-ink">
+                  <span className="text-red-600">[필수]</span> 이용약관 동의
+                </span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="privacyPolicy" required className="h-4 w-4" />
+                <span className="text-sm text-ink">
+                  <span className="text-red-600">[필수]</span> 개인정보 처리방침 동의
+                </span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="marketingConsent" className="h-4 w-4" />
+                <span className="text-sm text-ink">[선택] 마케팅 정보 수신 동의</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="kakaoNotification" className="h-4 w-4" />
+                <span className="text-sm text-ink">[선택] 카카오 알림톡 수신 동의</span>
+              </label>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isPending}
+            className="w-full rounded-full bg-ink py-3 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-800 disabled:opacity-50"
+          >
+            {isPending ? '처리 중...' : '완료'}
+          </button>
+        </form>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/auth/invite/[token]/page.tsx b/apps/web/src/app/auth/invite/[token]/page.tsx
index 7aad26e..7262ec4 100644
--- a/apps/web/src/app/auth/invite/[token]/page.tsx
+++ b/apps/web/src/app/auth/invite/[token]/page.tsx
@@ -49,62 +49,71 @@ export default function InviteAcceptPage() {
   }
 
   return (
-    <div className="mx-auto max-w-md px-4 py-16">
-      <h1 className="mb-2 text-center text-2xl font-bold">운영자 초대</h1>
-      <p className="mb-8 text-center text-sm text-gray-500">
-        비밀번호를 설정하여 가입을 완료하세요.
-      </p>
+    <div className="mx-auto max-w-md px-6 py-20">
+      <div className="animate-fade-up">
+        <h1 className="mb-2 text-center font-display text-3xl font-bold text-ink">운영자 초대</h1>
+        <p className="mb-8 text-center text-sm text-ink-muted">
+          비밀번호를 설정하여 가입을 완료하세요.
+        </p>
 
-      {error && <div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}
+        {error && (
+          <div className="mb-4 rounded-xl border border-red-200 bg-red-50/80 p-4 text-sm text-red-700">
+            {error}
+          </div>
+        )}
 
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="name" className="mb-1 block text-sm font-medium text-gray-700">
-            이름
-          </label>
-          <input
-            id="name"
-            name="name"
-            type="text"
-            required
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-        </div>
-        <div>
-          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
-            비밀번호
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            required
-            minLength={8}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-          <p className="mt-1 text-xs text-gray-500">8자 이상, 영문+숫자 포함</p>
-        </div>
-        <div>
-          <label htmlFor="confirmPassword" className="mb-1 block text-sm font-medium text-gray-700">
-            비밀번호 확인
-          </label>
-          <input
-            id="confirmPassword"
-            name="confirmPassword"
-            type="password"
-            required
-            minLength={8}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-        </div>
-        <button
-          type="submit"
-          disabled={isPending}
-          className="w-full rounded-md bg-blue-600 py-2.5 text-white hover:bg-blue-700 disabled:opacity-50"
-        >
-          {isPending ? '처리 중...' : '가입 완료'}
-        </button>
-      </form>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="mb-1.5 block text-sm font-medium text-ink-light">
+              이름
+            </label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              required
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+          </div>
+          <div>
+            <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-ink-light">
+              비밀번호
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              minLength={8}
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+            <p className="mt-1 text-xs text-ink-muted">8자 이상, 영문+숫자 포함</p>
+          </div>
+          <div>
+            <label
+              htmlFor="confirmPassword"
+              className="mb-1.5 block text-sm font-medium text-ink-light"
+            >
+              비밀번호 확인
+            </label>
+            <input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              required
+              minLength={8}
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={isPending}
+            className="w-full rounded-full bg-ink py-3 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-800 disabled:opacity-50"
+          >
+            {isPending ? '처리 중...' : '가입 완료'}
+          </button>
+        </form>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/auth/login/page.tsx b/apps/web/src/app/auth/login/page.tsx
index 436292f..8ea576c 100644
--- a/apps/web/src/app/auth/login/page.tsx
+++ b/apps/web/src/app/auth/login/page.tsx
@@ -36,79 +36,86 @@ function LoginForm() {
   }
 
   return (
-    <div className="mx-auto max-w-md px-4 py-16">
-      <h1 className="mb-8 text-center text-2xl font-bold">로그인</h1>
+    <div className="mx-auto max-w-md px-6 py-20">
+      <div className="animate-fade-up">
+        <h1 className="mb-2 text-center font-display text-3xl font-bold text-ink">로그인</h1>
+        <p className="mb-8 text-center text-sm text-ink-muted">다시 만나서 반갑습니다</p>
 
-      {verified && (
-        <div className="mb-4 rounded-md bg-green-50 p-3 text-sm text-green-600">
-          이메일 인증이 완료되었습니다. 로그인해주세요.
-        </div>
-      )}
+        {verified && (
+          <div className="mb-4 rounded-xl border border-sage-500/20 bg-sage-500/5 p-4 text-sm text-sage-600">
+            이메일 인증이 완료되었습니다. 로그인해주세요.
+          </div>
+        )}
 
-      {invited && (
-        <div className="mb-4 rounded-md bg-green-50 p-3 text-sm text-green-600">
-          가입이 완료되었습니다. 로그인해주세요.
-        </div>
-      )}
+        {invited && (
+          <div className="mb-4 rounded-xl border border-sage-500/20 bg-sage-500/5 p-4 text-sm text-sage-600">
+            가입이 완료되었습니다. 로그인해주세요.
+          </div>
+        )}
 
-      {error && <div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}
+        {error && (
+          <div className="mb-4 rounded-xl border border-red-200 bg-red-50/80 p-4 text-sm text-red-700">
+            {error}
+          </div>
+        )}
 
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
-            이메일
-          </label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            required
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-ink-light">
+              이메일
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+          </div>
 
-        <div>
-          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
-            비밀번호
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            required
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
+          <div>
+            <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-ink-light">
+              비밀번호
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isPending}
+            className="w-full rounded-full bg-ink py-3 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-800 disabled:opacity-50"
+          >
+            {isPending ? '로그인 중...' : '로그인'}
+          </button>
+        </form>
+
+        <div className="my-6 flex items-center gap-4">
+          <div className="h-px flex-1 bg-ink/10" />
+          <span className="text-sm text-ink-muted">또는</span>
+          <div className="h-px flex-1 bg-ink/10" />
         </div>
 
         <button
-          type="submit"
-          disabled={isPending}
-          className="w-full rounded-md bg-blue-600 py-2.5 text-white hover:bg-blue-700 disabled:opacity-50"
+          type="button"
+          onClick={() => signIn('kakao', { callbackUrl })}
+          className="flex w-full items-center justify-center gap-2 rounded-full bg-[#FEE500] py-3 text-sm font-medium text-[#191919] transition-colors hover:bg-[#FDD800]"
         >
-          {isPending ? '로그인 중...' : '로그인'}
+          카카오로 로그인
         </button>
-      </form>
 
-      <div className="my-6 flex items-center gap-4">
-        <div className="h-px flex-1 bg-gray-200" />
-        <span className="text-sm text-gray-400">또는</span>
-        <div className="h-px flex-1 bg-gray-200" />
+        <p className="mt-6 text-center text-sm text-ink-muted">
+          계정이 없으신가요?{' '}
+          <Link href="/auth/register" className="text-warm-600 hover:text-warm-700">
+            회원가입
+          </Link>
+        </p>
       </div>
-
-      <button
-        type="button"
-        onClick={() => signIn('kakao', { callbackUrl })}
-        className="flex w-full items-center justify-center gap-2 rounded-md bg-[#FEE500] py-2.5 text-sm font-medium text-[#191919] hover:bg-[#FDD800]"
-      >
-        카카오로 로그인
-      </button>
-
-      <p className="mt-6 text-center text-sm text-gray-500">
-        계정이 없으신가요?{' '}
-        <Link href="/auth/register" className="text-blue-600 hover:underline">
-          회원가입
-        </Link>
-      </p>
     </div>
   );
 }
diff --git a/apps/web/src/app/auth/register/page.tsx b/apps/web/src/app/auth/register/page.tsx
index d7f0cbd..7fb2d73 100644
--- a/apps/web/src/app/auth/register/page.tsx
+++ b/apps/web/src/app/auth/register/page.tsx
@@ -17,164 +17,173 @@ export default function RegisterPage() {
 
   if (state.success) {
     return (
-      <div className="mx-auto max-w-md px-4 py-16 text-center">
-        <h1 className="mb-4 text-2xl font-bold text-green-600">가입 완료!</h1>
-        <p className="mb-6 text-gray-600">
-          입력하신 이메일로 인증 링크를 발송했습니다.
-          <br />
-          이메일을 확인하여 인증을 완료해주세요.
-        </p>
-        <Link
-          href="/auth/login"
-          className="inline-block rounded-md bg-blue-600 px-6 py-2 text-white hover:bg-blue-700"
-        >
-          로그인하기
-        </Link>
+      <div className="mx-auto max-w-md px-6 py-20 text-center">
+        <div className="animate-fade-up">
+          <h1 className="mb-4 font-display text-3xl font-bold text-ink">가입 완료!</h1>
+          <p className="mb-6 text-sm text-ink-muted">
+            입력하신 이메일로 인증 링크를 발송했습니다.
+            <br />
+            이메일을 확인하여 인증을 완료해주세요.
+          </p>
+          <Link
+            href="/auth/login"
+            className="inline-block rounded-full bg-ink px-8 py-3 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-800"
+          >
+            로그인하기
+          </Link>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="mx-auto max-w-md px-4 py-16">
-      <h1 className="mb-8 text-center text-2xl font-bold">회원가입</h1>
+    <div className="mx-auto max-w-md px-6 py-20">
+      <div className="animate-fade-up">
+        <h1 className="mb-2 text-center font-display text-3xl font-bold text-ink">회원가입</h1>
+        <p className="mb-8 text-center text-sm text-ink-muted">스타트오버와 함께 시작하세요</p>
 
-      {state.error && (
-        <div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-600">{state.error}</div>
-      )}
-
-      <form action={formAction} className="space-y-6">
-        <div>
-          <label className="mb-2 block text-sm font-medium text-gray-700">역할 선택</label>
-          <div className="space-y-2">
-            {ROLES.map((role) => (
-              <label
-                key={role.value}
-                className="flex cursor-pointer items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50"
-              >
-                <input type="radio" name="role" value={role.value} required className="h-4 w-4" />
-                <div>
-                  <div className="font-medium">{role.label}</div>
-                  <div className="text-sm text-gray-500">{role.desc}</div>
-                </div>
-              </label>
-            ))}
+        {state.error && (
+          <div className="mb-4 rounded-xl border border-red-200 bg-red-50/80 p-4 text-sm text-red-700">
+            {state.error}
           </div>
-          {state.fieldErrors?.role && (
-            <p className="mt-1 text-sm text-red-500">{state.fieldErrors.role[0]}</p>
-          )}
-        </div>
+        )}
 
-        <div>
-          <label htmlFor="name" className="mb-1 block text-sm font-medium text-gray-700">
-            이름
-          </label>
-          <input
-            id="name"
-            name="name"
-            type="text"
-            required
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-          {state.fieldErrors?.name && (
-            <p className="mt-1 text-sm text-red-500">{state.fieldErrors.name[0]}</p>
-          )}
-        </div>
+        <form action={formAction} className="space-y-6">
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-ink-light">역할 선택</label>
+            <div className="space-y-2">
+              {ROLES.map((role) => (
+                <label
+                  key={role.value}
+                  className="flex cursor-pointer items-center gap-3 rounded-xl border-2 border-ink/5 p-4 transition-all hover:border-warm-400 hover:bg-warm-50"
+                >
+                  <input type="radio" name="role" value={role.value} required className="h-4 w-4" />
+                  <div>
+                    <div className="font-medium text-ink">{role.label}</div>
+                    <div className="text-sm text-ink-muted">{role.desc}</div>
+                  </div>
+                </label>
+              ))}
+            </div>
+            {state.fieldErrors?.role && (
+              <p className="mt-1 text-sm text-red-700">{state.fieldErrors.role[0]}</p>
+            )}
+          </div>
 
-        <div>
-          <label htmlFor="phone" className="mb-1 block text-sm font-medium text-gray-700">
-            휴대폰 번호
-          </label>
-          <input
-            id="phone"
-            name="phone"
-            type="tel"
-            placeholder="010-1234-5678"
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-          {state.fieldErrors?.phone && (
-            <p className="mt-1 text-sm text-red-500">{state.fieldErrors.phone[0]}</p>
-          )}
-        </div>
+          <div>
+            <label htmlFor="name" className="mb-1.5 block text-sm font-medium text-ink-light">
+              이름
+            </label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              required
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+            {state.fieldErrors?.name && (
+              <p className="mt-1 text-sm text-red-700">{state.fieldErrors.name[0]}</p>
+            )}
+          </div>
 
-        <div>
-          <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
-            이메일
-          </label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            required
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-          {state.fieldErrors?.email && (
-            <p className="mt-1 text-sm text-red-500">{state.fieldErrors.email[0]}</p>
-          )}
-        </div>
+          <div>
+            <label htmlFor="phone" className="mb-1.5 block text-sm font-medium text-ink-light">
+              휴대폰 번호
+            </label>
+            <input
+              id="phone"
+              name="phone"
+              type="tel"
+              placeholder="010-1234-5678"
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+            {state.fieldErrors?.phone && (
+              <p className="mt-1 text-sm text-red-700">{state.fieldErrors.phone[0]}</p>
+            )}
+          </div>
 
-        <div>
-          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
-            비밀번호
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            required
-            minLength={8}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          />
-          <p className="mt-1 text-xs text-gray-500">8자 이상, 영문+숫자 포함</p>
-          {state.fieldErrors?.password && (
-            <p className="mt-1 text-sm text-red-500">{state.fieldErrors.password[0]}</p>
-          )}
-        </div>
+          <div>
+            <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-ink-light">
+              이메일
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+            {state.fieldErrors?.email && (
+              <p className="mt-1 text-sm text-red-700">{state.fieldErrors.email[0]}</p>
+            )}
+          </div>
 
-        <div className="space-y-3 rounded-md border border-gray-200 p-4">
-          <p className="text-sm font-medium text-gray-700">약관 동의</p>
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="termsOfService" required className="h-4 w-4" />
-            <span className="text-sm">
-              <span className="text-red-500">[필수]</span> 이용약관 동의
-            </span>
-          </label>
-          {state.fieldErrors?.termsOfService && (
-            <p className="text-sm text-red-500">{state.fieldErrors.termsOfService[0]}</p>
-          )}
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="privacyPolicy" required className="h-4 w-4" />
-            <span className="text-sm">
-              <span className="text-red-500">[필수]</span> 개인정보 처리방침 동의
-            </span>
-          </label>
-          {state.fieldErrors?.privacyPolicy && (
-            <p className="text-sm text-red-500">{state.fieldErrors.privacyPolicy[0]}</p>
-          )}
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="marketingConsent" className="h-4 w-4" />
-            <span className="text-sm">[선택] 마케팅 정보 수신 동의</span>
-          </label>
-          <label className="flex items-center gap-2">
-            <input type="checkbox" name="kakaoNotification" className="h-4 w-4" />
-            <span className="text-sm">[선택] 카카오 알림톡 수신 동의</span>
-          </label>
-        </div>
+          <div>
+            <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-ink-light">
+              비밀번호
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              minLength={8}
+              className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink placeholder:text-ink-muted focus:border-warm-500 focus:outline-none focus:ring-2 focus:ring-warm-500/20"
+            />
+            <p className="mt-1 text-xs text-ink-muted">8자 이상, 영문+숫자 포함</p>
+            {state.fieldErrors?.password && (
+              <p className="mt-1 text-sm text-red-700">{state.fieldErrors.password[0]}</p>
+            )}
+          </div>
 
-        <button
-          type="submit"
-          disabled={isPending}
-          className="w-full rounded-md bg-blue-600 py-2.5 text-white hover:bg-blue-700 disabled:opacity-50"
-        >
-          {isPending ? '처리 중...' : '가입하기'}
-        </button>
-      </form>
+          <div className="rounded-xl border border-ink/5 bg-warm-50/50 p-5">
+            <p className="mb-3 text-sm font-medium text-ink-light">약관 동의</p>
+            <div className="space-y-3">
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="termsOfService" required className="h-4 w-4" />
+                <span className="text-sm text-ink">
+                  <span className="text-red-600">[필수]</span> 이용약관 동의
+                </span>
+              </label>
+              {state.fieldErrors?.termsOfService && (
+                <p className="text-sm text-red-700">{state.fieldErrors.termsOfService[0]}</p>
+              )}
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="privacyPolicy" required className="h-4 w-4" />
+                <span className="text-sm text-ink">
+                  <span className="text-red-600">[필수]</span> 개인정보 처리방침 동의
+                </span>
+              </label>
+              {state.fieldErrors?.privacyPolicy && (
+                <p className="text-sm text-red-700">{state.fieldErrors.privacyPolicy[0]}</p>
+              )}
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="marketingConsent" className="h-4 w-4" />
+                <span className="text-sm text-ink">[선택] 마케팅 정보 수신 동의</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input type="checkbox" name="kakaoNotification" className="h-4 w-4" />
+                <span className="text-sm text-ink">[선택] 카카오 알림톡 수신 동의</span>
+              </label>
+            </div>
+          </div>
 
-      <p className="mt-6 text-center text-sm text-gray-500">
-        이미 계정이 있으신가요?{' '}
-        <Link href="/auth/login" className="text-blue-600 hover:underline">
-          로그인
-        </Link>
-      </p>
+          <button
+            type="submit"
+            disabled={isPending}
+            className="w-full rounded-full bg-ink py-3 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-800 disabled:opacity-50"
+          >
+            {isPending ? '처리 중...' : '가입하기'}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-ink-muted">
+          이미 계정이 있으신가요?{' '}
+          <Link href="/auth/login" className="text-warm-600 hover:text-warm-700">
+            로그인
+          </Link>
+        </p>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/auth/verify-pending/page.tsx b/apps/web/src/app/auth/verify-pending/page.tsx
index 2b1adad..e747a45 100644
--- a/apps/web/src/app/auth/verify-pending/page.tsx
+++ b/apps/web/src/app/auth/verify-pending/page.tsx
@@ -2,22 +2,24 @@ import Link from 'next/link';
 
 export default function VerifyPendingPage() {
   return (
-    <div className="mx-auto max-w-md px-4 py-16 text-center">
-      <h1 className="mb-4 text-2xl font-bold">이메일 인증이 필요합니다</h1>
-      <p className="mb-6 text-gray-600">
-        가입 시 입력한 이메일로 인증 링크를 발송했습니다.
-        <br />
-        이메일을 확인하고 인증을 완료해주세요.
-      </p>
-      <p className="mb-8 text-sm text-gray-400">
-        이메일을 받지 못하셨나요? 스팸함을 확인하거나 잠시 후 다시 시도해주세요.
-      </p>
-      <Link
-        href="/"
-        className="inline-block rounded-md bg-gray-100 px-6 py-2 text-gray-700 hover:bg-gray-200"
-      >
-        홈으로
-      </Link>
+    <div className="mx-auto max-w-md px-6 py-20 text-center">
+      <div className="animate-fade-up">
+        <h1 className="mb-4 font-display text-3xl font-bold text-ink">이메일 인증이 필요합니다</h1>
+        <p className="mb-6 text-sm text-ink-muted">
+          가입 시 입력한 이메일로 인증 링크를 발송했습니다.
+          <br />
+          이메일을 확인하고 인증을 완료해주세요.
+        </p>
+        <p className="mb-8 text-sm text-ink-muted">
+          이메일을 받지 못하셨나요? 스팸함을 확인하거나 잠시 후 다시 시도해주세요.
+        </p>
+        <Link
+          href="/"
+          className="inline-block rounded-full bg-ink px-8 py-3 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-800"
+        >
+          홈으로
+        </Link>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/auth/verify/page.tsx b/apps/web/src/app/auth/verify/page.tsx
index 730f3c3..3ecf6dc 100644
--- a/apps/web/src/app/auth/verify/page.tsx
+++ b/apps/web/src/app/auth/verify/page.tsx
@@ -13,9 +13,11 @@ export default async function VerifyPage({
 
   if (!token) {
     return (
-      <div className="mx-auto max-w-md px-4 py-16 text-center">
-        <h1 className="mb-4 text-2xl font-bold text-red-600">잘못된 접근</h1>
-        <p className="text-gray-600">인증 토큰이 없습니다.</p>
+      <div className="mx-auto max-w-md px-6 py-20 text-center">
+        <div className="animate-fade-up">
+          <h1 className="mb-4 font-display text-3xl font-bold text-ink">잘못된 접근</h1>
+          <p className="text-sm text-ink-muted">인증 토큰이 없습니다.</p>
+        </div>
       </div>
     );
   }
@@ -26,12 +28,16 @@ export default async function VerifyPage({
 
   if (!verificationToken) {
     return (
-      <div className="mx-auto max-w-md px-4 py-16 text-center">
-        <h1 className="mb-4 text-2xl font-bold text-red-600">유효하지 않은 토큰</h1>
-        <p className="mb-6 text-gray-600">이미 사용되었거나 존재하지 않는 인증 토큰입니다.</p>
-        <Link href="/auth/login" className="text-blue-600 hover:underline">
-          로그인으로 이동
-        </Link>
+      <div className="mx-auto max-w-md px-6 py-20 text-center">
+        <div className="animate-fade-up">
+          <h1 className="mb-4 font-display text-3xl font-bold text-ink">유효하지 않은 토큰</h1>
+          <p className="mb-6 text-sm text-ink-muted">
+            이미 사용되었거나 존재하지 않는 인증 토큰입니다.
+          </p>
+          <Link href="/auth/login" className="text-warm-600 hover:text-warm-700">
+            로그인으로 이동
+          </Link>
+        </div>
       </div>
     );
   }
@@ -42,14 +48,16 @@ export default async function VerifyPage({
     });
 
     return (
-      <div className="mx-auto max-w-md px-4 py-16 text-center">
-        <h1 className="mb-4 text-2xl font-bold text-red-600">토큰 만료</h1>
-        <p className="mb-6 text-gray-600">
-          인증 토큰이 만료되었습니다. 다시 로그인하여 인증 메일을 재발송해주세요.
-        </p>
-        <Link href="/auth/login" className="text-blue-600 hover:underline">
-          로그인으로 이동
-        </Link>
+      <div className="mx-auto max-w-md px-6 py-20 text-center">
+        <div className="animate-fade-up">
+          <h1 className="mb-4 font-display text-3xl font-bold text-ink">토큰 만료</h1>
+          <p className="mb-6 text-sm text-ink-muted">
+            인증 토큰이 만료되었습니다. 다시 로그인하여 인증 메일을 재발송해주세요.
+          </p>
+          <Link href="/auth/login" className="text-warm-600 hover:text-warm-700">
+            로그인으로 이동
+          </Link>
+        </div>
       </div>
     );
   }
@@ -65,12 +73,16 @@ export default async function VerifyPage({
     });
 
     return (
-      <div className="mx-auto max-w-md px-4 py-16 text-center">
-        <h1 className="mb-4 text-2xl font-bold text-red-600">사용자를 찾을 수 없습니다</h1>
-        <p className="mb-6 text-gray-600">해당 계정이 존재하지 않습니다.</p>
-        <Link href="/auth/register" className="text-blue-600 hover:underline">
-          회원가입으로 이동
-        </Link>
+      <div className="mx-auto max-w-md px-6 py-20 text-center">
+        <div className="animate-fade-up">
+          <h1 className="mb-4 font-display text-3xl font-bold text-ink">
+            사용자를 찾을 수 없습니다
+          </h1>
+          <p className="mb-6 text-sm text-ink-muted">해당 계정이 존재하지 않습니다.</p>
+          <Link href="/auth/register" className="text-warm-600 hover:text-warm-700">
+            회원가입으로 이동
+          </Link>
+        </div>
       </div>
     );
   }
diff --git a/apps/web/src/app/contracts/page.tsx b/apps/web/src/app/contracts/page.tsx
index df51fed..cf348ad 100644
--- a/apps/web/src/app/contracts/page.tsx
+++ b/apps/web/src/app/contracts/page.tsx
@@ -24,22 +24,22 @@ const CONTRACT_TYPE_LABELS: Record<string, string> = {
 };
 
 const STATUS_MAP: Record<string, { label: string; color: string }> = {
-  DRAFT: { label: '초안', color: 'bg-gray-100 text-gray-700' },
-  GENERATED: { label: '생성됨', color: 'bg-blue-100 text-blue-700' },
-  SIGNING: { label: '서명 중', color: 'bg-yellow-100 text-yellow-700' },
-  SIGNED: { label: '서명 완료', color: 'bg-indigo-100 text-indigo-700' },
-  ACTIVE: { label: '진행 중', color: 'bg-green-100 text-green-700' },
-  COMPLETED: { label: '완료', color: 'bg-emerald-100 text-emerald-700' },
+  DRAFT: { label: '초안', color: 'bg-warm-100 text-ink-muted' },
+  GENERATED: { label: '생성됨', color: 'bg-warm-400/15 text-warm-700' },
+  SIGNING: { label: '서명 중', color: 'bg-warm-400/15 text-warm-700' },
+  SIGNED: { label: '서명 완료', color: 'bg-sage-500/10 text-sage-600' },
+  ACTIVE: { label: '진행 중', color: 'bg-sage-500/10 text-sage-600' },
+  COMPLETED: { label: '완료', color: 'bg-sage-500/10 text-sage-600' },
   CANCELLED: { label: '취소', color: 'bg-red-100 text-red-700' },
 };
 
 const ESCROW_MAP: Record<string, { label: string; color: string }> = {
-  NOT_STARTED: { label: '미시작', color: 'text-gray-500' },
-  DEPOSIT_PENDING: { label: '입금 대기', color: 'text-yellow-600' },
-  HOLDING: { label: '보관 중', color: 'text-blue-600' },
-  RELEASE_REVIEW: { label: '정산 검토', color: 'text-purple-600' },
-  RELEASED: { label: '정산 완료', color: 'text-green-600' },
-  REFUNDED: { label: '환불됨', color: 'text-orange-600' },
+  NOT_STARTED: { label: '미시작', color: 'text-ink-muted' },
+  DEPOSIT_PENDING: { label: '입금 대기', color: 'text-warm-700' },
+  HOLDING: { label: '보관 중', color: 'text-warm-700' },
+  RELEASE_REVIEW: { label: '정산 검토', color: 'text-warm-700' },
+  RELEASED: { label: '정산 완료', color: 'text-sage-600' },
+  REFUNDED: { label: '환불됨', color: 'text-warm-700' },
   DISPUTED: { label: '분쟁 중', color: 'text-red-600' },
 };
 
@@ -70,12 +70,14 @@ export default async function ContractsPage() {
   }
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
-      <h1 className="text-2xl font-bold text-gray-900">계약 관리</h1>
-      <p className="mt-1 text-sm text-gray-500">계약, 에스크로, 검수 현황을 관리합니다</p>
+    <main className="mx-auto max-w-4xl px-6 py-10 font-body">
+      <div className="animate-fade-up">
+        <h1 className="font-display text-3xl font-bold text-ink">계약 관리</h1>
+        <p className="mt-1 text-sm text-ink-muted">계약, 에스크로, 검수 현황을 관리합니다</p>
+      </div>
 
       {/* 요약 */}
-      <div className="mt-6 grid grid-cols-4 gap-4">
+      <div className="mt-6 grid grid-cols-4 gap-4 animate-fade-up">
         <SummaryCard label="전체 계약" value={String(totalCount)} />
         <SummaryCard label="진행 중" value={String(activeCount)} />
         <SummaryCard label="에스크로 보관" value={String(escrowCount)} />
@@ -83,33 +85,33 @@ export default async function ContractsPage() {
       </div>
 
       {/* 계약 목록 */}
-      <div className="mt-6 space-y-4">
+      <div className="mt-6 space-y-4 animate-fade-up">
         {contracts.length === 0 ? (
-          <p className="text-center text-sm text-gray-500">데이터가 없습니다</p>
+          <p className="text-center text-sm text-ink-muted">데이터가 없습니다</p>
         ) : (
           contracts.map((contract: (typeof contracts)[number]) => {
             const statusInfo = STATUS_MAP[contract.status] ?? {
               label: contract.status,
-              color: 'bg-gray-100 text-gray-700',
+              color: 'bg-warm-100 text-ink-muted',
             };
             const escrowInfo = ESCROW_MAP[contract.escrowStatus] ?? {
               label: contract.escrowStatus,
-              color: 'text-gray-500',
+              color: 'text-ink-muted',
             };
             return (
               <div
                 key={contract.publicId}
-                className="rounded-lg border border-gray-200 bg-white p-5"
+                className="rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift"
               >
                 <div className="flex items-start justify-between">
                   <div>
                     <div className="flex items-center gap-2">
-                      <h3 className="font-semibold text-gray-900">{contract.store.listingTitle}</h3>
-                      <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+                      <h3 className="font-display font-semibold text-ink">{contract.store.listingTitle}</h3>
+                      <span className="rounded-full bg-warm-100 px-2.5 py-0.5 text-xs text-ink-muted">
                         {CONTRACT_TYPE_LABELS[contract.contractType] ?? contract.contractType}
                       </span>
                     </div>
-                    <p className="mt-1 text-xs text-gray-400">
+                    <p className="mt-1 text-xs text-ink-muted">
                       생성일: {new Date(contract.createdAt).toLocaleDateString('ko-KR')}
                     </p>
                   </div>
@@ -122,15 +124,15 @@ export default async function ContractsPage() {
 
                 <div className="mt-3 flex items-center gap-6 text-sm">
                   <div>
-                    <span className="text-gray-500">에스크로: </span>
+                    <span className="text-ink-muted">에스크로: </span>
                     <span className={`font-medium ${escrowInfo.color}`}>{escrowInfo.label}</span>
                   </div>
                 </div>
 
                 {contract.status === 'ACTIVE' && (
-                  <div className="mt-4 flex gap-3 border-t border-gray-100 pt-3">
+                  <div className="mt-4 flex gap-3 border-t border-ink/5 pt-3">
                     <button
-                      className="text-sm text-gray-400 cursor-not-allowed"
+                      className="text-sm text-ink-muted cursor-not-allowed"
                       disabled
                       title="준비 중"
                     >
@@ -138,7 +140,7 @@ export default async function ContractsPage() {
                     </button>
                     <form action={handleOpenDispute}>
                       <input type="hidden" name="contractPublicId" value={contract.publicId} />
-                      <button type="submit" className="text-sm text-red-600 hover:underline">
+                      <button type="submit" className="text-sm text-red-600 hover:text-red-700 transition-colors">
                         분쟁 접수
                       </button>
                     </form>
@@ -150,10 +152,10 @@ export default async function ContractsPage() {
         )}
       </div>
 
-      <div className="mt-8 rounded-lg border border-dashed border-gray-300 p-6 text-center">
-        <p className="text-sm text-gray-500">
+      <div className="mt-8 animate-fade-up rounded-2xl border-2 border-dashed border-ink/10 p-8 text-center">
+        <p className="text-sm text-ink-muted">
           새 계약은{' '}
-          <Link href="/matching" className="text-blue-600 hover:underline">
+          <Link href="/matching" className="text-warm-600 hover:text-warm-700">
             수락된 매칭 요청
           </Link>
           에서 생성됩니다
@@ -165,9 +167,9 @@ export default async function ContractsPage() {
 
 function SummaryCard({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded-lg border border-gray-200 bg-white p-4 text-center">
-      <p className="text-2xl font-bold text-gray-900">{value}</p>
-      <p className="mt-1 text-xs text-gray-500">{label}</p>
+    <div className="rounded-2xl border border-ink/5 bg-white/70 p-5 text-center">
+      <p className="font-display text-3xl font-bold text-ink">{value}</p>
+      <p className="mt-1 text-xs text-ink-muted">{label}</p>
     </div>
   );
 }
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index f1d8c73..bdf0146 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1 +1,108 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');
 @import "tailwindcss";
+
+@theme {
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body: 'Noto Sans KR', sans-serif;
+  --color-warm-50: #fefcf9;
+  --color-warm-100: #fdf6ec;
+  --color-warm-200: #f9e8cf;
+  --color-warm-300: #f2d1a5;
+  --color-warm-400: #e8b06e;
+  --color-warm-500: #d4874a;
+  --color-warm-600: #b8622e;
+  --color-warm-700: #8e4a22;
+  --color-warm-800: #6b3a1e;
+  --color-warm-900: #3d2213;
+  --color-ink: #1a1410;
+  --color-ink-light: #4a4035;
+  --color-ink-muted: #8a7e72;
+  --color-sage-500: #6b8f71;
+  --color-sage-600: #527a58;
+}
+
+/* Staggered fade-in-up animation */
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mesh-float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -20px) scale(1.05); }
+  66% { transform: translate(-20px, 15px) scale(0.95); }
+}
+
+.animate-fade-up {
+  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  opacity: 0;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.6s ease forwards;
+  opacity: 0;
+}
+
+.animate-slide-right {
+  animation: slide-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  opacity: 0;
+}
+
+/* Gradient mesh blobs */
+.mesh-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  animation: mesh-float 12s ease-in-out infinite;
+  pointer-events: none;
+}
+
+/* Card hover lift */
+.card-lift {
+  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
+}
+.card-lift:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 20px 60px -12px rgba(26, 20, 16, 0.15);
+}
+
+/* Link underline animation */
+.link-underline {
+  position: relative;
+  display: inline-block;
+}
+.link-underline::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background: var(--color-warm-600);
+  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.link-underline:hover::after {
+  width: 100%;
+}
diff --git a/apps/web/src/app/icon.svg b/apps/web/src/app/icon.svg
index 4961911..b66ac34 100644
--- a/apps/web/src/app/icon.svg
+++ b/apps/web/src/app/icon.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="6" fill="#2563EB"/>
-  <text x="16" y="24" font-family="Arial, Helvetica, sans-serif" font-size="24" font-weight="bold" fill="white" text-anchor="middle">S</text>
+  <rect width="32" height="32" rx="8" fill="#1a1410"/>
+  <text x="16" y="23" font-family="Georgia, 'Playfair Display', serif" font-size="22" font-weight="bold" fill="#fefcf9" text-anchor="middle">S</text>
 </svg>
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 71e200a..abab2ec 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -27,34 +27,34 @@ async function Navigation() {
   const isOperator = session?.user && OPERATOR_ROLES.includes(session.user.primaryRole);
 
   return (
-    <nav className="border-b border-gray-200 bg-white">
+    <nav className="border-b border-ink/5 bg-warm-50/80 backdrop-blur-md">
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
-        <Link href="/" className="text-xl font-bold text-blue-600">
+        <Link href="/" className="font-display text-xl font-bold text-ink">
           Startover
         </Link>
         <div className="flex items-center gap-6">
-          <Link href="/stores" className="text-sm text-gray-700 hover:text-blue-600">
+          <Link href="/stores" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
             매장 검색
           </Link>
-          <Link href="/stores/new" className="text-sm text-gray-700 hover:text-blue-600">
+          <Link href="/stores/new" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
             매장 등록
           </Link>
-          <Link href="/matching" className="text-sm text-gray-700 hover:text-blue-600">
+          <Link href="/matching" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
             매칭
           </Link>
-          <Link href="/subsidies" className="text-sm text-gray-700 hover:text-blue-600">
+          <Link href="/subsidies" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
             지원금
           </Link>
-          <Link href="/vendors" className="text-sm text-gray-700 hover:text-blue-600">
+          <Link href="/vendors" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
             업체 인증
           </Link>
-          <Link href="/contracts" className="text-sm text-gray-700 hover:text-blue-600">
+          <Link href="/contracts" className="text-sm text-ink-light hover:text-warm-600 transition-colors">
             계약
           </Link>
           {isOperator && (
             <Link
               href="/admin"
-              className="rounded-md bg-gray-100 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-200"
+              className="rounded-full bg-warm-100 px-3 py-1.5 text-sm text-ink-light hover:bg-warm-200"
             >
               운영자
             </Link>
@@ -81,7 +81,7 @@ export default function RootLayout({
           strategy="afterInteractive"
         />
       </head>
-      <body className="min-h-screen bg-gray-50">
+      <body className="min-h-screen bg-warm-50 font-body">
         <Navigation />
         {children}
       </body>
diff --git a/apps/web/src/app/matching/page.tsx b/apps/web/src/app/matching/page.tsx
index 252e9d8..3fa2521 100644
--- a/apps/web/src/app/matching/page.tsx
+++ b/apps/web/src/app/matching/page.tsx
@@ -12,9 +12,9 @@ const MATCH_TYPE_LABELS: Record<string, string> = {
 };
 
 const STATUS_LABELS: Record<string, { label: string; color: string }> = {
-  OPEN: { label: '대기 중', color: 'bg-blue-100 text-blue-700' },
-  REVIEWING: { label: '검토 중', color: 'bg-yellow-100 text-yellow-700' },
-  ACCEPTED: { label: '수락됨', color: 'bg-green-100 text-green-700' },
+  OPEN: { label: '대기 중', color: 'bg-warm-400/15 text-warm-700' },
+  REVIEWING: { label: '검토 중', color: 'bg-warm-400/15 text-warm-700' },
+  ACCEPTED: { label: '수락됨', color: 'bg-sage-500/10 text-sage-600' },
   REJECTED: { label: '거절됨', color: 'bg-red-100 text-red-700' },
 };
 
@@ -92,15 +92,17 @@ export default async function MatchingPage({
   }
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
-      <h1 className="text-2xl font-bold text-gray-900">매칭 요청</h1>
-      <p className="mt-1 text-sm text-gray-500">매장과의 매칭 요청 현황을 관리합니다</p>
+    <main className="mx-auto max-w-4xl px-6 py-10 font-body">
+      <div className="animate-fade-up">
+        <h1 className="font-display text-3xl font-bold text-ink">매칭 요청</h1>
+        <p className="mt-1 text-sm text-ink-muted">매장과의 매칭 요청 현황을 관리합니다</p>
+      </div>
 
       {targetStore ? (
-        <div className="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-6">
-          <h2 className="text-lg font-semibold text-gray-900">매칭 요청 보내기</h2>
-          <p className="mt-1 text-sm text-gray-600">
-            <span className="font-medium">{targetStore.listingTitle}</span> 매장에 매칭 요청을
+        <div className="mt-6 animate-fade-up rounded-2xl border border-warm-200 bg-warm-100/50 p-5">
+          <h2 className="font-display text-xl font-bold text-ink">매칭 요청 보내기</h2>
+          <p className="mt-1 text-sm text-ink-muted">
+            <span className="font-medium text-ink">{targetStore.listingTitle}</span> 매장에 매칭 요청을
             보냅니다.
           </p>
           <form action={handleCreateMatchRequest} className="mt-4 space-y-4">
@@ -108,7 +110,7 @@ export default async function MatchingPage({
             <div>
               <label
                 htmlFor="matchType"
-                className="block text-sm font-medium text-gray-700"
+                className="block text-sm font-medium text-ink"
               >
                 요청 유형
               </label>
@@ -116,7 +118,7 @@ export default async function MatchingPage({
                 id="matchType"
                 name="matchType"
                 required
-                className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                className="mt-1 block w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
               >
                 <option value="ACQUISITION">인수</option>
                 <option value="DEMOLITION">철거</option>
@@ -126,7 +128,7 @@ export default async function MatchingPage({
             <div>
               <label
                 htmlFor="message"
-                className="block text-sm font-medium text-gray-700"
+                className="block text-sm font-medium text-ink"
               >
                 메시지 (선택)
               </label>
@@ -135,22 +137,22 @@ export default async function MatchingPage({
                 name="message"
                 rows={3}
                 placeholder="매칭 요청 메시지를 입력하세요"
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                className="mt-1 block w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
               />
             </div>
             <button
               type="submit"
-              className="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              className="rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors"
             >
               매칭 요청 보내기
             </button>
           </form>
         </div>
       ) : (
-        <div className="mt-6 rounded-lg border border-dashed border-gray-300 p-6 text-center">
-          <p className="text-sm text-gray-500">
+        <div className="mt-6 animate-fade-up rounded-2xl border-2 border-dashed border-ink/10 p-8 text-center">
+          <p className="text-sm text-ink-muted">
             새로운 매칭 요청을 보내려면{' '}
-            <Link href="/stores" className="text-blue-600 hover:underline">
+            <Link href="/stores" className="text-warm-600 hover:text-warm-700">
               매장 검색
             </Link>
             에서 원하는 매장을 찾아보세요
@@ -158,27 +160,27 @@ export default async function MatchingPage({
         </div>
       )}
 
-      <div className="mt-8 space-y-4">
+      <div className="mt-8 space-y-4 animate-fade-up">
         {requests.length === 0 ? (
-          <p className="text-center text-sm text-gray-500">데이터가 없습니다</p>
+          <p className="text-center text-sm text-ink-muted">데이터가 없습니다</p>
         ) : (
           requests.map((req: (typeof requests)[number]) => {
             const statusInfo = STATUS_LABELS[req.status] ?? {
               label: req.status,
-              color: 'bg-gray-100 text-gray-700',
+              color: 'bg-warm-100 text-ink-muted',
             };
             return (
-              <div key={req.publicId} className="rounded-lg border border-gray-200 bg-white p-5">
+              <div key={req.publicId} className="rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift">
                 <div className="flex items-start justify-between">
                   <div>
                     <div className="flex items-center gap-2">
-                      <h3 className="font-semibold text-gray-900">{req.store.listingTitle}</h3>
-                      <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+                      <h3 className="font-display font-semibold text-ink">{req.store.listingTitle}</h3>
+                      <span className="rounded-full bg-warm-100 px-2.5 py-0.5 text-xs text-ink-muted">
                         {MATCH_TYPE_LABELS[req.matchType] ?? req.matchType}
                       </span>
                     </div>
-                    {req.message && <p className="mt-1 text-sm text-gray-600">{req.message}</p>}
-                    <p className="mt-2 text-xs text-gray-400">
+                    {req.message && <p className="mt-1 text-sm text-ink-muted">{req.message}</p>}
+                    <p className="mt-2 text-xs text-ink-muted">
                       요청일: {new Date(req.createdAt).toLocaleDateString('ko-KR')}
                     </p>
                   </div>
@@ -189,10 +191,10 @@ export default async function MatchingPage({
                   </span>
                 </div>
                 {req.status === 'ACCEPTED' && (
-                  <div className="mt-4 border-t border-gray-100 pt-3">
+                  <div className="mt-4 border-t border-ink/5 pt-3">
                     <Link
                       href={`/contracts?matchId=${req.publicId}`}
-                      className="text-sm text-blue-600 hover:underline"
+                      className="text-sm text-warm-600 hover:text-warm-700"
                     >
                       계약 진행하기 →
                     </Link>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 4a4c618..f751692 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,95 +1,218 @@
 import Link from 'next/link';
 
+const FEATURES = [
+  {
+    label: '폐업자',
+    title: '깔끔한 마무리,\n새로운 시작',
+    desc: '매장 정보를 등록하면 철거비 절감, 시설 처분, 지원금 신청까지 한 번에 해결됩니다.',
+    href: '/stores/new',
+    cta: '매장 등록',
+    accent: 'bg-warm-500',
+    num: '01',
+  },
+  {
+    label: '창업자',
+    title: '검증된 매장,\n합리적 시작',
+    desc: '검증된 매장을 검색하고 매칭 요청을 보내 시설 인수와 인테리어 비용을 절감하세요.',
+    href: '/stores',
+    cta: '매장 검색',
+    accent: 'bg-sage-500',
+    num: '02',
+  },
+  {
+    label: '철거·인테리어 업체',
+    title: '안정적 수주,\n정확한 정산',
+    desc: '인증 업체로 등록하면 안정적인 수주와 정산을 보장받을 수 있습니다.',
+    href: '/vendors',
+    cta: '업체 인증',
+    accent: 'bg-warm-700',
+    num: '03',
+  },
+];
+
+const SERVICES = [
+  {
+    title: '정부 지원금 가이드',
+    desc: '폐업 관련 정부 지원금 자격을 확인하고, 체크리스트와 서류 준비를 도와드립니다.',
+    href: '/subsidies',
+    cta: '지원금 확인',
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+    ),
+  },
+  {
+    title: '안전한 거래',
+    desc: '표준 계약서, 에스크로 결제, 검수 승인 시스템으로 안전한 거래를 보장합니다.',
+    href: '/contracts',
+    cta: '계약 관리',
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+      </svg>
+    ),
+  },
+];
+
 export default function HomePage() {
   return (
-    <main className="mx-auto max-w-7xl px-4 py-16">
-      <div className="text-center">
-        <h1 className="text-5xl font-bold text-gray-900">Startover</h1>
-        <p className="mt-4 text-xl text-gray-600">폐업 · 양도 · 창업을 잇는 중개 플랫폼</p>
-        <p className="mt-2 text-gray-500">
-          매장 정보 1회 등록으로 창업자·철거업체·인테리어업체를 동시 연결합니다
-        </p>
-        <div className="mt-8 flex justify-center gap-4">
-          <Link
-            href="/stores"
-            className="rounded-lg bg-blue-600 px-6 py-3 text-white hover:bg-blue-700"
-          >
-            매장 둘러보기
-          </Link>
-          <Link
-            href="/stores/new"
-            className="rounded-lg border border-gray-300 px-6 py-3 text-gray-700 hover:bg-gray-100"
-          >
-            매장 등록하기
-          </Link>
-        </div>
+    <main className="relative overflow-hidden bg-warm-50 font-body">
+      {/* Gradient Mesh Background */}
+      <div className="pointer-events-none absolute inset-0">
+        <div
+          className="mesh-blob bg-warm-200/60 absolute -top-32 -right-32 h-[500px] w-[500px]"
+          style={{ animationDelay: '0s' }}
+        />
+        <div
+          className="mesh-blob bg-warm-300/40 absolute top-1/3 -left-24 h-[400px] w-[400px]"
+          style={{ animationDelay: '-4s' }}
+        />
+        <div
+          className="mesh-blob absolute top-2/3 right-1/4 h-[350px] w-[350px] bg-sage-500/15"
+          style={{ animationDelay: '-8s' }}
+        />
       </div>
 
-      <div className="mt-20 grid grid-cols-1 gap-8 md:grid-cols-3">
-        <div className="rounded-xl border border-gray-200 bg-white p-6">
-          <div className="mb-3 text-2xl">🏪</div>
-          <h3 className="text-lg font-semibold text-gray-900">폐업자</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            매장 정보를 등록하면 철거비 절감, 시설 처분, 지원금 신청까지 한 번에 해결됩니다.
-          </p>
-          <Link
-            href="/stores/new"
-            className="mt-3 inline-block text-sm text-blue-600 hover:underline"
-          >
-            매장 등록 →
-          </Link>
+      {/* Hero Section */}
+      <section className="relative mx-auto max-w-6xl px-6 pt-24 pb-20">
+        <div className="grid grid-cols-1 items-end gap-12 lg:grid-cols-12">
+          {/* Main headline — editorial style, large serif */}
+          <div className="lg:col-span-7">
+            <p
+              className="animate-fade-up text-sm font-medium tracking-[0.2em] uppercase text-warm-600"
+              style={{ animationDelay: '0.1s' }}
+            >
+              폐업 · 양도 · 창업을 잇다
+            </p>
+            <h1
+              className="animate-fade-up mt-6 font-display text-6xl leading-[1.1] font-black tracking-tight text-ink sm:text-7xl lg:text-8xl"
+              style={{ animationDelay: '0.25s' }}
+            >
+              Start
+              <span className="relative">
+                over
+                <span className="absolute -bottom-2 left-0 h-3 w-full bg-warm-400/40" />
+              </span>
+            </h1>
+            <p
+              className="animate-fade-up mt-8 max-w-lg text-lg leading-relaxed font-light text-ink-light"
+              style={{ animationDelay: '0.4s' }}
+            >
+              매장 정보 1회 등록으로
+              <br />
+              창업자 · 철거업체 · 인테리어업체를 동시에 연결합니다.
+            </p>
+          </div>
+
+          {/* CTA buttons — offset right for asymmetry */}
+          <div className="flex flex-col gap-4 lg:col-span-5 lg:items-end lg:pb-4">
+            <Link
+              href="/stores"
+              className="animate-slide-right group inline-flex items-center gap-3 rounded-full bg-ink px-8 py-4 text-base font-medium text-warm-50 transition-colors hover:bg-warm-800"
+              style={{ animationDelay: '0.5s' }}
+            >
+              매장 둘러보기
+              <span className="inline-block transition-transform group-hover:translate-x-1">
+                &rarr;
+              </span>
+            </Link>
+            <Link
+              href="/stores/new"
+              className="animate-slide-right inline-flex items-center gap-3 rounded-full border-2 border-ink/15 px-8 py-4 text-base font-medium text-ink transition-colors hover:border-ink/40 hover:bg-warm-100"
+              style={{ animationDelay: '0.65s' }}
+            >
+              매장 등록하기
+            </Link>
+          </div>
         </div>
 
-        <div className="rounded-xl border border-gray-200 bg-white p-6">
-          <div className="mb-3 text-2xl">🔍</div>
-          <h3 className="text-lg font-semibold text-gray-900">창업자</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            검증된 매장을 검색하고 매칭 요청을 보내 시설 인수와 인테리어 비용을 절감하세요.
-          </p>
-          <Link href="/stores" className="mt-3 inline-block text-sm text-blue-600 hover:underline">
-            매장 검색 →
-          </Link>
+        {/* Decorative divider */}
+        <div
+          className="animate-fade-in mt-20 flex items-center gap-4"
+          style={{ animationDelay: '0.8s' }}
+        >
+          <div className="h-px flex-1 bg-ink/10" />
+          <span className="text-xs tracking-[0.3em] uppercase text-ink-muted">
+            누구를 위한 서비스인가요
+          </span>
+          <div className="h-px flex-1 bg-ink/10" />
         </div>
+      </section>
 
-        <div className="rounded-xl border border-gray-200 bg-white p-6">
-          <div className="mb-3 text-2xl">🏗️</div>
-          <h3 className="text-lg font-semibold text-gray-900">철거·인테리어 업체</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            인증 업체로 등록하면 안정적인 수주와 정산을 보장받을 수 있습니다.
-          </p>
-          <Link href="/vendors" className="mt-3 inline-block text-sm text-blue-600 hover:underline">
-            업체 인증 →
-          </Link>
-        </div>
-      </div>
+      {/* Feature Cards — asymmetric grid */}
+      <section className="relative mx-auto max-w-6xl px-6 pb-24">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {FEATURES.map((f, i) => (
+            <Link
+              key={f.num}
+              href={f.href}
+              className="card-lift animate-fade-up group relative rounded-2xl border border-ink/5 bg-white/70 p-8 backdrop-blur-sm"
+              style={{ animationDelay: `${0.9 + i * 0.12}s` }}
+            >
+              {/* Number accent */}
+              <span className="font-display text-5xl font-bold text-ink/[0.04]">
+                {f.num}
+              </span>
 
-      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
-        <div className="rounded-xl border border-gray-200 bg-white p-6">
-          <h3 className="text-lg font-semibold text-gray-900">정부 지원금 가이드</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            폐업 관련 정부 지원금 자격을 확인하고, 체크리스트와 서류 준비를 도와드립니다.
-          </p>
-          <Link
-            href="/subsidies"
-            className="mt-3 inline-block text-sm text-blue-600 hover:underline"
-          >
-            지원금 확인 →
-          </Link>
-        </div>
+              {/* Accent bar */}
+              <div className={`mt-4 h-1 w-10 rounded-full ${f.accent}`} />
 
-        <div className="rounded-xl border border-gray-200 bg-white p-6">
-          <h3 className="text-lg font-semibold text-gray-900">안전한 거래</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            표준 계약서, 에스크로 결제, 검수 승인 시스템으로 안전한 거래를 보장합니다.
-          </p>
-          <Link
-            href="/contracts"
-            className="mt-3 inline-block text-sm text-blue-600 hover:underline"
-          >
-            계약 관리 →
-          </Link>
+              <p className="mt-4 text-xs font-medium tracking-widest uppercase text-ink-muted">
+                {f.label}
+              </p>
+              <h3 className="mt-3 font-display text-2xl leading-snug font-bold text-ink whitespace-pre-line">
+                {f.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-ink-light">
+                {f.desc}
+              </p>
+
+              <span className="link-underline mt-6 inline-flex items-center gap-1 text-sm font-medium text-warm-700 transition-colors group-hover:text-warm-600">
+                {f.cta}
+                <span className="inline-block transition-transform group-hover:translate-x-1">
+                  &rarr;
+                </span>
+              </span>
+            </Link>
+          ))}
         </div>
-      </div>
+      </section>
+
+      {/* Services section */}
+      <section className="relative mx-auto max-w-6xl px-6 pb-32">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          {SERVICES.map((s, i) => (
+            <Link
+              key={s.title}
+              href={s.href}
+              className="card-lift animate-fade-up group flex gap-6 rounded-2xl border border-ink/5 bg-white/50 p-8 backdrop-blur-sm"
+              style={{ animationDelay: `${1.3 + i * 0.12}s` }}
+            >
+              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-warm-100 text-warm-700 transition-colors group-hover:bg-warm-200">
+                {s.icon}
+              </div>
+              <div>
+                <h3 className="font-display text-xl font-bold text-ink">
+                  {s.title}
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-ink-light">
+                  {s.desc}
+                </p>
+                <span className="link-underline mt-4 inline-flex items-center gap-1 text-sm font-medium text-warm-700 transition-colors group-hover:text-warm-600">
+                  {s.cta}
+                  <span className="inline-block transition-transform group-hover:translate-x-1">
+                    &rarr;
+                  </span>
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* Footer accent line */}
+      <div className="mx-auto h-px max-w-6xl bg-gradient-to-r from-transparent via-ink/10 to-transparent" />
     </main>
   );
 }
diff --git a/apps/web/src/app/stores/[id]/page.tsx b/apps/web/src/app/stores/[id]/page.tsx
index f591ee1..b90349d 100644
--- a/apps/web/src/app/stores/[id]/page.tsx
+++ b/apps/web/src/app/stores/[id]/page.tsx
@@ -72,24 +72,24 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
 
   const statusClass =
     store.dealStatus === 'OPEN'
-      ? 'bg-green-100 text-green-700'
+      ? 'bg-sage-500/10 text-sage-600'
       : store.dealStatus === 'MATCHING'
-        ? 'bg-yellow-100 text-yellow-700'
-        : 'bg-gray-100 text-gray-700';
+        ? 'bg-warm-400/15 text-warm-700'
+        : 'bg-ink/5 text-ink-muted';
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
+    <main className="mx-auto max-w-4xl px-6 py-10 font-body">
       <div className="mb-6">
-        <Link href="/stores" className="text-sm text-blue-600 hover:underline">
+        <Link href="/stores" className="text-sm text-warm-600 hover:text-warm-700">
           ← 매장 목록으로
         </Link>
       </div>
 
-      <div className="rounded-lg border border-gray-200 bg-white p-8">
+      <div className="animate-fade-up rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-8">
         <div className="flex items-start justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">{store.listingTitle}</h1>
-            <p className="mt-1 text-sm text-gray-500">매장 ID: {store.publicId}</p>
+            <h1 className="font-display text-3xl font-bold text-ink">{store.listingTitle}</h1>
+            <p className="mt-1 text-sm text-ink-muted">매장 ID: {store.publicId}</p>
           </div>
           <span className={`rounded-full px-3 py-1 text-sm font-medium ${statusClass}`}>
             {statusLabel}
@@ -98,7 +98,7 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
 
         {/* 기본 정보 */}
         <section className="mt-8">
-          <h2 className="mb-3 text-lg font-semibold text-gray-900">기본 정보</h2>
+          <h2 className="font-display text-xl font-bold text-ink mb-4">기본 정보</h2>
           <div className="grid grid-cols-2 gap-4">
             <InfoItem label="지역" value={store.regionCluster?.nameKo ?? '-'} />
             <InfoItem label="업종" value={store.industryLeaf?.nameKo ?? '-'} />
@@ -109,7 +109,7 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
 
         {/* 임대 정보 */}
         <section className="mt-8">
-          <h2 className="mb-3 text-lg font-semibold text-gray-900">임대 정보</h2>
+          <h2 className="font-display text-xl font-bold text-ink mb-4">임대 정보</h2>
           <div className="grid grid-cols-2 gap-4">
             <InfoItem
               label="보증금"
@@ -148,7 +148,7 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
 
         {/* 시설 정보 */}
         <section className="mt-8">
-          <h2 className="mb-3 text-lg font-semibold text-gray-900">시설 정보</h2>
+          <h2 className="font-display text-xl font-bold text-ink mb-4">시설 정보</h2>
           <div className="grid grid-cols-2 gap-4">
             <InfoItem
               label="면적"
@@ -164,22 +164,22 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
             />
           </div>
           {store.facility?.kitchenEquipmentSummary && (
-            <div className="mt-3">
-              <p className="text-sm text-gray-500">시설 설명</p>
-              <p className="mt-1 text-sm text-gray-900">{store.facility.kitchenEquipmentSummary}</p>
+            <div className="mt-4">
+              <p className="text-sm text-ink-muted">시설 설명</p>
+              <p className="mt-1 text-sm text-ink">{store.facility.kitchenEquipmentSummary}</p>
             </div>
           )}
         </section>
 
         {/* 액션 버튼 */}
-        <div className="mt-10 flex flex-wrap gap-3 border-t border-gray-200 pt-6">
+        <div className="mt-10 flex flex-wrap gap-3 border-t border-ink/5 pt-6">
           {store.reviewStatus === 'DRAFT' && (
             <>
               <form action={handleSubmitForReview}>
                 <input type="hidden" name="storePublicId" value={store.publicId} />
                 <button
                   type="submit"
-                  className="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
+                  className="rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors"
                 >
                   검토 제출
                 </button>
@@ -188,7 +188,7 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
                 <input type="hidden" name="storePublicId" value={store.publicId} />
                 <button
                   type="submit"
-                  className="rounded-lg border border-red-300 px-6 py-2.5 text-sm text-red-600 hover:bg-red-50"
+                  className="rounded-full border-2 border-red-300 px-6 py-3 text-sm text-red-600 hover:bg-red-50"
                 >
                   삭제
                 </button>
@@ -199,20 +199,20 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
             <>
               <Link
                 href={`/matching?storeId=${id}`}
-                className="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
+                className="rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors"
               >
                 매칭 요청 보내기
               </Link>
               <Link
                 href={`/subsidies?storeId=${id}`}
-                className="rounded-lg border border-gray-300 px-6 py-2.5 text-sm text-gray-700 hover:bg-gray-50"
+                className="rounded-full border-2 border-ink/15 px-6 py-3 text-sm font-medium text-ink hover:border-ink/40 transition-colors"
               >
                 지원금 확인
               </Link>
             </>
           )}
           {store.reviewStatus === 'SUBMITTED' && (
-            <p className="text-sm text-yellow-600">검토 대기 중입니다</p>
+            <p className="text-sm text-ink-muted">검토 대기 중입니다</p>
           )}
           {store.reviewStatus === 'REJECTED' && (
             <p className="text-sm text-red-600">반려되었습니다. 수정 후 다시 제출해주세요.</p>
@@ -226,8 +226,8 @@ export default async function StoreDetailPage({ params }: { params: Promise<{ id
 function InfoItem({ label, value }: { label: string; value: string }) {
   return (
     <div>
-      <p className="text-sm text-gray-500">{label}</p>
-      <p className="mt-0.5 text-sm font-medium text-gray-900">{value}</p>
+      <p className="text-sm text-ink-muted">{label}</p>
+      <p className="mt-0.5 text-sm font-medium text-ink">{value}</p>
     </div>
   );
 }
diff --git a/apps/web/src/app/stores/new/page.tsx b/apps/web/src/app/stores/new/page.tsx
index 48b7e60..3da1699 100644
--- a/apps/web/src/app/stores/new/page.tsx
+++ b/apps/web/src/app/stores/new/page.tsx
@@ -10,48 +10,50 @@ export default function NewStorePage() {
   const [state, formAction, isPending] = useActionState(createStoreDraftAction, initialState);
 
   return (
-    <main className="mx-auto max-w-3xl px-4 py-8">
+    <main className="mx-auto max-w-3xl px-6 py-10 font-body">
       <div className="mb-6">
-        <Link href="/stores" className="text-sm text-blue-600 hover:underline">
-          &larr; 매장 목록으로
+        <Link href="/stores" className="text-sm text-warm-600 hover:text-warm-700">
+          ← 매장 목록으로
         </Link>
       </div>
 
-      <h1 className="text-2xl font-bold text-gray-900">매장 등록</h1>
-      <p className="mt-1 text-sm text-gray-500">
-        매장 정보를 등록하면 창업자, 철거업체, 인테리어업체와 매칭됩니다
-      </p>
+      <div className="animate-fade-up">
+        <h1 className="font-display text-3xl font-bold text-ink">매장 등록</h1>
+        <p className="mt-1 text-sm text-ink-muted">
+          매장 정보를 등록하면 창업자, 철거업체, 인테리어업체와 매칭됩니다
+        </p>
+      </div>
 
       {state.error && (
-        <div className="mt-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+        <div className="mt-4 rounded-2xl border border-red-200/60 bg-red-50 px-5 py-4 text-sm text-red-700">
           {state.error}
         </div>
       )}
 
-      <form action={formAction} className="mt-8 space-y-8">
+      <form action={formAction} className="mt-8 space-y-8 animate-fade-up">
         {/* 기본 정보 */}
         <section>
-          <h2 className="mb-4 text-lg font-semibold text-gray-900">기본 정보</h2>
-          <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+          <h2 className="font-display text-xl font-bold text-ink mb-4">기본 정보</h2>
+          <div className="space-y-4 rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-6">
             <div>
-              <label className="block text-sm font-medium text-gray-700">매장명 *</label>
+              <label className="block text-sm text-ink-muted mb-1">매장명 *</label>
               <input
                 type="text"
                 name="listingTitle"
                 placeholder="예: 강남역 카페 양도"
                 required
                 defaultValue={state.fieldValues?.listingTitle}
-                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
               />
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700">지역 *</label>
+                <label className="block text-sm text-ink-muted mb-1">지역 *</label>
                 <select
                   name="regionClusterCode"
                   required
                   defaultValue={state.fieldValues?.regionClusterCode}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 >
                   <option value="">지역 선택</option>
                   <option value="KR.BETA.GANGNAM_CORE">강남권 (역삼/선릉/논현)</option>
@@ -59,12 +61,12 @@ export default function NewStorePage() {
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700">업종 *</label>
+                <label className="block text-sm text-ink-muted mb-1">업종 *</label>
                 <select
                   name="industryLeafCode"
                   required
                   defaultValue={state.fieldValues?.industryLeafCode}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 >
                   <option value="">업종 선택</option>
                   <option value="FNB.CAFE">카페</option>
@@ -75,14 +77,14 @@ export default function NewStorePage() {
               </div>
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700">도로명 주소 *</label>
+              <label className="block text-sm text-ink-muted mb-1">도로명 주소 *</label>
               <input
                 type="text"
                 name="roadAddress"
                 placeholder="예: 서울시 강남구 테헤란로 123"
                 required
                 defaultValue={state.fieldValues?.roadAddress}
-                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
               />
             </div>
           </div>
@@ -90,51 +92,49 @@ export default function NewStorePage() {
 
         {/* 임대 정보 */}
         <section>
-          <h2 className="mb-4 text-lg font-semibold text-gray-900">임대 정보</h2>
-          <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+          <h2 className="font-display text-xl font-bold text-ink mb-4">임대 정보</h2>
+          <div className="space-y-4 rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-6">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700">보증금 (원)</label>
+                <label className="block text-sm text-ink-muted mb-1">보증금 (원)</label>
                 <input
                   type="number"
                   name="depositAmount"
                   placeholder="50000000"
                   defaultValue={state.fieldValues?.depositAmount}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700">월세 (원)</label>
+                <label className="block text-sm text-ink-muted mb-1">월세 (원)</label>
                 <input
                   type="number"
                   name="monthlyRentAmount"
                   placeholder="3000000"
                   defaultValue={state.fieldValues?.monthlyRentAmount}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700">권리금 (원)</label>
+                <label className="block text-sm text-ink-muted mb-1">권리금 (원)</label>
                 <input
                   type="number"
                   name="premiumAmount"
                   placeholder="30000000"
                   defaultValue={state.fieldValues?.premiumAmount}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700">
-                  임대 잔여 기간 (개월)
-                </label>
+                <label className="block text-sm text-ink-muted mb-1">임대 잔여 기간 (개월)</label>
                 <input
                   type="number"
                   name="remainingLeaseMonths"
                   placeholder="18"
                   defaultValue={state.fieldValues?.remainingLeaseMonths}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 />
               </div>
             </div>
@@ -143,39 +143,39 @@ export default function NewStorePage() {
 
         {/* 시설 정보 */}
         <section>
-          <h2 className="mb-4 text-lg font-semibold text-gray-900">시설 정보</h2>
-          <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+          <h2 className="font-display text-xl font-bold text-ink mb-4">시설 정보</h2>
+          <div className="space-y-4 rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-6">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700">면적 (㎡)</label>
+                <label className="block text-sm text-ink-muted mb-1">면적 (㎡)</label>
                 <input
                   type="number"
                   name="exclusiveAreaSqm"
                   placeholder="82.6"
                   step="0.01"
                   defaultValue={state.fieldValues?.exclusiveAreaSqm}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700">층수</label>
+                <label className="block text-sm text-ink-muted mb-1">층수</label>
                 <input
                   type="number"
                   name="floorLevel"
                   placeholder="1"
                   defaultValue={state.fieldValues?.floorLevel}
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 />
               </div>
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700">시설 설명</label>
+              <label className="block text-sm text-ink-muted mb-1">시설 설명</label>
               <textarea
                 rows={3}
                 name="kitchenEquipmentSummary"
                 placeholder="주방 시설, 인테리어 상태, 포함 장비 등을 자유롭게 작성해주세요"
                 defaultValue={state.fieldValues?.kitchenEquipmentSummary}
-                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
               />
             </div>
           </div>
@@ -186,13 +186,13 @@ export default function NewStorePage() {
           <button
             type="submit"
             disabled={isPending}
-            className="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            className="rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors disabled:opacity-50"
           >
             {isPending ? '등록 중...' : '매장 등록'}
           </button>
           <Link
             href="/stores"
-            className="rounded-lg border border-gray-300 px-6 py-2.5 text-sm text-gray-700 hover:bg-gray-50"
+            className="rounded-full border-2 border-ink/15 px-6 py-3 text-sm font-medium text-ink hover:border-ink/40 transition-colors"
           >
             취소
           </Link>
diff --git a/apps/web/src/app/stores/page.tsx b/apps/web/src/app/stores/page.tsx
index a8c7fbf..9c7d06d 100644
--- a/apps/web/src/app/stores/page.tsx
+++ b/apps/web/src/app/stores/page.tsx
@@ -35,17 +35,17 @@ export default async function StoresPage({
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
-      <div className="flex items-center justify-between">
+    <main className="mx-auto max-w-7xl px-6 py-10 font-body">
+      <div className="animate-fade-up flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">매장 검색</h1>
-          <p className="mt-1 text-sm text-gray-500">
+          <h1 className="font-display text-3xl font-bold text-ink">매장 검색</h1>
+          <p className="mt-1 text-sm text-ink-muted">
             공개된 매장을 검색하고 매칭 요청을 보내보세요
           </p>
         </div>
         <Link
           href="/stores/new"
-          className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+          className="rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors"
         >
           매장 등록
         </Link>
@@ -55,9 +55,9 @@ export default async function StoresPage({
       <StoreFilters />
 
       {/* 매장 목록 */}
-      <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 animate-fade-up">
         {stores.length === 0 ? (
-          <div className="col-span-full py-16 text-center text-sm text-gray-400">
+          <div className="col-span-full py-16 text-center text-sm text-ink-muted">
             등록된 매장이 없습니다
           </div>
         ) : (
@@ -65,17 +65,17 @@ export default async function StoresPage({
             <Link
               key={store.publicId}
               href={`/stores/${store.publicId}`}
-              className="block rounded-lg border border-gray-200 bg-white p-5 transition hover:border-blue-300 hover:shadow-md"
+              className="block rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift"
             >
               <div className="flex items-start justify-between">
-                <h3 className="font-semibold text-gray-900">{store.listingTitle}</h3>
+                <h3 className="font-display font-semibold text-ink">{store.listingTitle}</h3>
                 <span
                   className={`rounded-full px-2 py-0.5 text-xs font-medium ${
                     store.dealStatus === 'OPEN'
-                      ? 'bg-green-100 text-green-700'
+                      ? 'bg-sage-500/10 text-sage-600'
                       : store.dealStatus === 'MATCHING'
-                        ? 'bg-yellow-100 text-yellow-700'
-                        : 'bg-gray-100 text-gray-700'
+                        ? 'bg-warm-400/15 text-warm-700'
+                        : 'bg-ink/5 text-ink-muted'
                   }`}
                 >
                   {store.dealStatus === 'OPEN'
@@ -85,21 +85,25 @@ export default async function StoresPage({
                       : store.dealStatus}
                 </span>
               </div>
-              <p className="mt-1 text-sm text-gray-500">
+              <p className="mt-1 text-sm text-ink-muted">
                 {store.regionCluster?.nameKo ?? '-'} · {store.industryLeaf?.nameKo ?? '-'}
               </p>
-              <div className="mt-3 flex gap-4 text-sm text-gray-600">
+              <div className="mt-3 flex gap-4 text-sm text-ink-muted">
                 <span>
                   보증금{' '}
-                  {store.lease?.depositAmount != null
-                    ? `${Number(store.lease.depositAmount).toLocaleString('ko-KR')}원`
-                    : '-'}
+                  <span className="font-medium text-ink">
+                    {store.lease?.depositAmount != null
+                      ? `${Number(store.lease.depositAmount).toLocaleString('ko-KR')}원`
+                      : '-'}
+                  </span>
                 </span>
                 <span>
                   월세{' '}
-                  {store.lease?.monthlyRentAmount != null
-                    ? `${Number(store.lease.monthlyRentAmount).toLocaleString('ko-KR')}원`
-                    : '-'}
+                  <span className="font-medium text-ink">
+                    {store.lease?.monthlyRentAmount != null
+                      ? `${Number(store.lease.monthlyRentAmount).toLocaleString('ko-KR')}원`
+                      : '-'}
+                  </span>
                 </span>
               </div>
             </Link>
@@ -107,7 +111,7 @@ export default async function StoresPage({
         )}
       </div>
 
-      <div className="mt-8 text-center text-sm text-gray-400">
+      <div className="mt-8 text-center text-sm text-ink-muted">
         베타 서비스: 강남권·마포권 F&B 매장만 지원합니다
       </div>
     </main>
diff --git a/apps/web/src/app/stores/store-filters.tsx b/apps/web/src/app/stores/store-filters.tsx
index ab937b3..a25d557 100644
--- a/apps/web/src/app/stores/store-filters.tsx
+++ b/apps/web/src/app/stores/store-filters.tsx
@@ -48,12 +48,12 @@ export function StoreFilters() {
   return (
     <form
       onSubmit={handleSubmit}
-      className="mt-6 flex flex-wrap gap-3 rounded-lg border border-gray-200 bg-white p-4"
+      className="mt-6 flex flex-wrap gap-3 rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5"
     >
       <select
         name="region"
         defaultValue={searchParams.get('region') ?? ''}
-        className="rounded-md border border-gray-300 px-3 py-2 text-sm"
+        className="rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
       >
         {REGION_OPTIONS.map((opt) => (
           <option key={opt.value} value={opt.value}>
@@ -64,7 +64,7 @@ export function StoreFilters() {
       <select
         name="industry"
         defaultValue={searchParams.get('industry') ?? ''}
-        className="rounded-md border border-gray-300 px-3 py-2 text-sm"
+        className="rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
       >
         {INDUSTRY_OPTIONS.map((opt) => (
           <option key={opt.value} value={opt.value}>
@@ -75,7 +75,7 @@ export function StoreFilters() {
       <select
         name="status"
         defaultValue={searchParams.get('status') ?? ''}
-        className="rounded-md border border-gray-300 px-3 py-2 text-sm"
+        className="rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
       >
         {STATUS_OPTIONS.map((opt) => (
           <option key={opt.value} value={opt.value}>
@@ -85,7 +85,7 @@ export function StoreFilters() {
       </select>
       <button
         type="submit"
-        className="rounded-md bg-gray-100 px-4 py-2 text-sm text-gray-700 hover:bg-gray-200"
+        className="rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors"
       >
         검색
       </button>
diff --git a/apps/web/src/app/subsidies/page.tsx b/apps/web/src/app/subsidies/page.tsx
index dc29b4f..72139e7 100644
--- a/apps/web/src/app/subsidies/page.tsx
+++ b/apps/web/src/app/subsidies/page.tsx
@@ -7,11 +7,11 @@ import { createSubsidyCaseService } from '@/services/subsidy-case-service';
 export const dynamic = 'force-dynamic';
 
 const STATUS_MAP: Record<string, { label: string; color: string }> = {
-  DOCUMENTS_PENDING: { label: '서류 준비 중', color: 'bg-yellow-100 text-yellow-700' },
-  READY_TO_SUBMIT: { label: '제출 준비 완료', color: 'bg-blue-100 text-blue-700' },
-  SUBMITTED: { label: '제출됨', color: 'bg-purple-100 text-purple-700' },
-  REVIEWING: { label: '검토 중', color: 'bg-orange-100 text-orange-700' },
-  APPROVED: { label: '승인', color: 'bg-green-100 text-green-700' },
+  DOCUMENTS_PENDING: { label: '서류 준비 중', color: 'bg-warm-400/15 text-warm-700' },
+  READY_TO_SUBMIT: { label: '제출 준비 완료', color: 'bg-sage-500/10 text-sage-600' },
+  SUBMITTED: { label: '제출됨', color: 'bg-warm-400/15 text-warm-700' },
+  REVIEWING: { label: '검토 중', color: 'bg-warm-400/15 text-warm-700' },
+  APPROVED: { label: '승인', color: 'bg-sage-500/10 text-sage-600' },
   REJECTED: { label: '반려', color: 'bg-red-100 text-red-700' },
 };
 
@@ -76,16 +76,18 @@ export default async function SubsidiesPage({
   }
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
-      <h1 className="text-2xl font-bold text-gray-900">정부 지원금</h1>
-      <p className="mt-1 text-sm text-gray-500">
-        폐업 관련 정부 지원금 자격 확인과 서류 제출을 도와드립니다
-      </p>
+    <main className="mx-auto max-w-4xl px-6 py-10 font-body">
+      <div className="animate-fade-up">
+        <h1 className="font-display text-3xl font-bold text-ink">정부 지원금</h1>
+        <p className="mt-1 text-sm text-ink-muted">
+          폐업 관련 정부 지원금 자격 확인과 서류 제출을 도와드립니다
+        </p>
+      </div>
 
       {/* 안내 배너 */}
-      <div className="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
-        <h3 className="text-sm font-semibold text-blue-800">가이드형 지원금 대행 서비스</h3>
-        <p className="mt-1 text-sm text-blue-700">
+      <div className="mt-6 animate-fade-up rounded-2xl border border-warm-200 bg-warm-100/50 p-5">
+        <h3 className="font-display text-sm font-semibold text-ink">가이드형 지원금 대행 서비스</h3>
+        <p className="mt-1 text-sm text-ink-muted">
           Startover은 지원금 신청 보조 파트너로서, 체크리스트·서류 업로드·진행 상태·운영자 피드백을
           제공합니다.
         </p>
@@ -93,32 +95,32 @@ export default async function SubsidiesPage({
 
       {/* 지원금 신청 폼 또는 안내 */}
       {params.storeId ? (
-        <div className="mt-6 rounded-lg border border-gray-200 bg-white p-6">
-          <h2 className="text-lg font-semibold text-gray-900">지원금 신청</h2>
+        <div className="mt-6 animate-fade-up rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5">
+          <h2 className="font-display text-xl font-bold text-ink">지원금 신청</h2>
           {serviceError ? (
             <p className="mt-2 text-sm text-red-600">{serviceError}</p>
           ) : store ? (
             <form action={handleCreateSubsidyCase} className="mt-4 space-y-4">
               <div>
-                <p className="text-sm text-gray-500">매장</p>
-                <p className="mt-0.5 font-medium text-gray-900">{store.listingTitle}</p>
+                <p className="text-sm text-ink-muted">매장</p>
+                <p className="mt-0.5 font-medium text-ink">{store.listingTitle}</p>
                 <input type="hidden" name="storePublicId" value={store.publicId} />
               </div>
               <div>
-                <label htmlFor="programCode" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="programCode" className="block text-sm font-medium text-ink">
                   지원 프로그램
                 </label>
                 <select
                   id="programCode"
                   name="programCode"
-                  className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  className="mt-1 block w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
                 >
                   <option value="SMALL_BIZ_CLOSURE_2024">소상공인 폐업지원 2024</option>
                 </select>
               </div>
               <button
                 type="submit"
-                className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                className="w-full rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors"
               >
                 지원금 신청
               </button>
@@ -126,10 +128,10 @@ export default async function SubsidiesPage({
           ) : null}
         </div>
       ) : (
-        <div className="mt-8 rounded-lg border border-dashed border-gray-300 p-6 text-center">
-          <p className="text-sm text-gray-500">
+        <div className="mt-8 animate-fade-up rounded-2xl border-2 border-dashed border-ink/10 p-8 text-center">
+          <p className="text-sm text-ink-muted">
             새 지원금 케이스를 시작하려면{' '}
-            <Link href="/stores" className="text-blue-600 hover:underline">
+            <Link href="/stores" className="text-warm-600 hover:text-warm-700">
               등록된 매장
             </Link>
             이 필요합니다
@@ -138,23 +140,23 @@ export default async function SubsidiesPage({
       )}
 
       {/* 케이스 목록 */}
-      <div className="mt-6 space-y-4">
+      <div className="mt-6 space-y-4 animate-fade-up">
         {cases.length === 0 ? (
-          <p className="text-center text-sm text-gray-500">데이터가 없습니다</p>
+          <p className="text-center text-sm text-ink-muted">데이터가 없습니다</p>
         ) : (
           cases.map((c: (typeof cases)[number]) => {
             const statusInfo = STATUS_MAP[c.status] ?? {
               label: c.status,
-              color: 'bg-gray-100 text-gray-700',
+              color: 'bg-warm-100 text-ink-muted',
             };
             const total = c.checklistItems.length;
             const checked = c.checklistItems.filter((item: (typeof c.checklistItems)[number]) => item.status === 'CHECKED').length;
             return (
-              <div key={c.publicId} className="rounded-lg border border-gray-200 bg-white p-5">
+              <div key={c.publicId} className="rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift">
                 <div className="flex items-start justify-between">
                   <div>
-                    <h3 className="font-semibold text-gray-900">{c.store.listingTitle}</h3>
-                    <p className="mt-1 text-xs text-gray-400">
+                    <h3 className="font-display font-semibold text-ink">{c.store.listingTitle}</h3>
+                    <p className="mt-1 text-xs text-ink-muted">
                       신청일: {new Date(c.createdAt).toLocaleDateString('ko-KR')}
                     </p>
                   </div>
@@ -168,14 +170,14 @@ export default async function SubsidiesPage({
                 {/* 체크리스트 진행률 */}
                 <div className="mt-4">
                   <div className="flex items-center justify-between text-sm">
-                    <span className="text-gray-600">체크리스트 진행</span>
-                    <span className="text-gray-900">
+                    <span className="text-ink-muted">체크리스트 진행</span>
+                    <span className="font-medium text-ink">
                       {checked}/{total}
                     </span>
                   </div>
-                  <div className="mt-1 h-2 rounded-full bg-gray-200">
+                  <div className="mt-1 h-2 rounded-full bg-warm-100">
                     <div
-                      className="h-2 rounded-full bg-blue-500"
+                      className="h-2 rounded-full bg-warm-500 transition-all"
                       style={{ width: total > 0 ? `${(checked / total) * 100}%` : '0%' }}
                     />
                   </div>
diff --git a/apps/web/src/app/vendors/page.tsx b/apps/web/src/app/vendors/page.tsx
index f759008..628e758 100644
--- a/apps/web/src/app/vendors/page.tsx
+++ b/apps/web/src/app/vendors/page.tsx
@@ -6,10 +6,10 @@ export const dynamic = 'force-dynamic';
 const prisma = createPrismaClient();
 
 const STATUS_BADGE: Record<string, { label: string; className: string }> = {
-  APPLIED: { label: '심사 대기', className: 'bg-yellow-100 text-yellow-700' },
-  APPROVED: { label: '인증됨', className: 'bg-green-100 text-green-700' },
+  APPLIED: { label: '심사 대기', className: 'bg-warm-400/15 text-warm-700' },
+  APPROVED: { label: '인증됨', className: 'bg-sage-500/10 text-sage-600' },
   SUSPENDED: { label: '중지', className: 'bg-red-100 text-red-700' },
-  REJECTED: { label: '반려', className: 'bg-gray-100 text-gray-700' },
+  REJECTED: { label: '반려', className: 'bg-warm-100 text-ink-muted' },
 };
 
 const VENDOR_TYPE_LABEL: Record<string, string> = {
@@ -36,28 +36,42 @@ export default async function VendorsPage() {
   }
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
-      <h1 className="text-2xl font-bold text-gray-900">업체 인증</h1>
-      <p className="mt-1 text-sm text-gray-500">
-        인증 업체로 등록하여 안정적인 수주와 정산을 보장받으세요
-      </p>
+    <main className="mx-auto max-w-4xl px-6 py-10 font-body">
+      <div className="animate-fade-up">
+        <h1 className="font-display text-3xl font-bold text-ink">업체 인증</h1>
+        <p className="mt-1 text-sm text-ink-muted">
+          인증 업체로 등록하여 안정적인 수주와 정산을 보장받으세요
+        </p>
+      </div>
 
       {/* 인증 혜택 */}
-      <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
-        <div className="rounded-lg border border-gray-200 bg-white p-5">
-          <div className="mb-2 text-xl">✅</div>
-          <h3 className="font-semibold text-gray-900">신뢰 배지</h3>
-          <p className="mt-1 text-sm text-gray-600">인증 업체 마크로 고객 신뢰를 확보합니다</p>
+      <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3 animate-fade-up">
+        <div className="rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift">
+          <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-sage-500/10 text-sage-600">
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+            </svg>
+          </div>
+          <h3 className="font-display font-semibold text-ink">신뢰 배지</h3>
+          <p className="mt-1 text-sm text-ink-muted">인증 업체 마크로 고객 신뢰를 확보합니다</p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-5">
-          <div className="mb-2 text-xl">📋</div>
-          <h3 className="font-semibold text-gray-900">우선 매칭</h3>
-          <p className="mt-1 text-sm text-gray-600">인증 업체가 매칭 후보로 우선 노출됩니다</p>
+        <div className="rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift">
+          <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-warm-400/15 text-warm-700">
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
+            </svg>
+          </div>
+          <h3 className="font-display font-semibold text-ink">우선 매칭</h3>
+          <p className="mt-1 text-sm text-ink-muted">인증 업체가 매칭 후보로 우선 노출됩니다</p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-5">
-          <div className="mb-2 text-xl">💰</div>
-          <h3 className="font-semibold text-gray-900">안전 정산</h3>
-          <p className="mt-1 text-sm text-gray-600">에스크로 기반 정산으로 대금을 보호합니다</p>
+        <div className="rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift">
+          <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-warm-400/15 text-warm-700">
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+            </svg>
+          </div>
+          <h3 className="font-display font-semibold text-ink">안전 정산</h3>
+          <p className="mt-1 text-sm text-ink-muted">에스크로 기반 정산으로 대금을 보호합니다</p>
         </div>
       </div>
 
@@ -65,16 +79,16 @@ export default async function VendorsPage() {
       <VendorApplicationForm />
 
       {/* 인증 현황 */}
-      <div className="mt-8">
-        <h2 className="mb-4 text-lg font-semibold text-gray-900">인증 현황</h2>
+      <div className="mt-8 animate-fade-up">
+        <h2 className="mb-4 font-display text-xl font-bold text-ink">인증 현황</h2>
         {vendors.length === 0 ? (
-          <p className="text-sm text-gray-500">등록된 업체가 없습니다.</p>
+          <p className="text-sm text-ink-muted">등록된 업체가 없습니다.</p>
         ) : (
           <div className="space-y-3">
             {vendors.map((vendor: (typeof vendors)[number]) => {
               const badge = STATUS_BADGE[vendor.certificationStatus] ?? {
                 label: '심사 대기',
-                className: 'bg-yellow-100 text-yellow-700',
+                className: 'bg-warm-400/15 text-warm-700',
               };
               const regionNames = vendor.coverageRegions.map((cr: (typeof vendor.coverageRegions)[number]) => cr.region.nameKo).join(', ');
               const typeLabel = VENDOR_TYPE_LABEL[vendor.vendorType] ?? vendor.vendorType;
@@ -82,12 +96,12 @@ export default async function VendorsPage() {
               return (
                 <div
                   key={vendor.publicId}
-                  className="rounded-lg border border-gray-200 bg-white p-5"
+                  className="rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-5 card-lift"
                 >
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-semibold text-gray-900">{vendor.businessName}</h3>
-                      <p className="mt-0.5 text-sm text-gray-500">
+                      <h3 className="font-display font-semibold text-ink">{vendor.businessName}</h3>
+                      <p className="mt-0.5 text-sm text-ink-muted">
                         {typeLabel}
                         {regionNames ? ` · ${regionNames}` : ''}
                       </p>
@@ -98,7 +112,7 @@ export default async function VendorsPage() {
                       {badge.label}
                     </span>
                   </div>
-                  <p className="mt-2 text-xs text-gray-400">
+                  <p className="mt-2 text-xs text-ink-muted">
                     신청일: {vendor.createdAt.toISOString().slice(0, 10)}
                   </p>
                 </div>
diff --git a/apps/web/src/app/vendors/vendor-application-form.tsx b/apps/web/src/app/vendors/vendor-application-form.tsx
index 54dd238..af1dadb 100644
--- a/apps/web/src/app/vendors/vendor-application-form.tsx
+++ b/apps/web/src/app/vendors/vendor-application-form.tsx
@@ -19,39 +19,39 @@ export default function VendorApplicationForm() {
   );
 
   return (
-    <div className="mt-8">
-      <h2 className="mb-4 text-lg font-semibold text-gray-900">인증 신청</h2>
+    <div className="mt-8 animate-fade-up">
+      <h2 className="mb-4 font-display text-xl font-bold text-ink">인증 신청</h2>
 
       {state && (
         <div
-          className={`mb-4 rounded-md px-4 py-3 text-sm ${
+          className={`mb-4 rounded-2xl px-4 py-3 text-sm ${
             state.success
-              ? 'bg-green-50 text-green-700'
-              : 'bg-red-50 text-red-700'
+              ? 'bg-sage-500/10 text-sage-600'
+              : 'bg-red-100 text-red-700'
           }`}
         >
           {state.message}
         </div>
       )}
 
-      <form action={formAction} className="space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+      <form action={formAction} className="space-y-4 rounded-2xl border border-ink/5 bg-white/70 backdrop-blur-sm p-6">
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700">업체명 *</label>
+            <label className="block text-sm font-medium text-ink">업체명 *</label>
             <input
               name="businessName"
               type="text"
               placeholder="예: (주)클린철거"
               required
-              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="mt-1 w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700">업체 유형 *</label>
+            <label className="block text-sm font-medium text-ink">업체 유형 *</label>
             <select
               name="vendorType"
               required
-              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+              className="mt-1 w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
             >
               <option value="">선택</option>
               <option value="DEMOLITION">철거</option>
@@ -63,36 +63,36 @@ export default function VendorApplicationForm() {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700">담당자명 *</label>
+            <label className="block text-sm font-medium text-ink">담당자명 *</label>
             <input
               name="contactName"
               type="text"
               placeholder="담당자 이름"
               required
-              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="mt-1 w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700">사업자등록번호 *</label>
+            <label className="block text-sm font-medium text-ink">사업자등록번호 *</label>
             <input
               name="businessRegistrationNumber"
               type="text"
               placeholder="123-45-67890"
-              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="mt-1 w-full rounded-xl border border-ink/10 bg-white/70 px-4 py-3 text-sm text-ink focus:border-warm-500 focus:ring-2 focus:ring-warm-500/20 focus:outline-none"
             />
           </div>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700">서비스 가능 지역 *</label>
+          <label className="block text-sm font-medium text-ink">서비스 가능 지역 *</label>
           <div className="mt-2 flex flex-wrap gap-2">
             {REGIONS.map((region) => (
-              <label key={region} className="flex items-center gap-1.5 text-sm text-gray-700">
+              <label key={region} className="flex items-center gap-1.5 text-sm text-ink-muted">
                 <input
                   type="checkbox"
                   name="coverageRegions"
                   value={REGION_MAP[region]}
-                  className="rounded border-gray-300"
+                  className="rounded border-ink/10 accent-warm-500"
                 />
                 {region}
               </label>
@@ -104,7 +104,7 @@ export default function VendorApplicationForm() {
           <button
             type="submit"
             disabled={isPending}
-            className="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            className="rounded-full bg-ink px-6 py-3 text-sm font-medium text-warm-50 hover:bg-warm-800 transition-colors disabled:opacity-50"
           >
             {isPending ? '신청 중...' : '인증 신청'}
           </button>