diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b67d3d..c39e528 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,32 @@
 
 ## [Unreleased]
 
-## [0.2.0] - 2025-01-14
+## [0.2.1] - 2026-01-18
+
+### Changed
+
+- CSS 파일 구조 개선
+  - `src/styles/tailwind.css`를 관심사별로 분리
+  - `tokens/`: CSS 변수 정의 (colors, typography, shadows)
+  - `theme/`: Tailwind 테마 설정 (colors, typography)
+  - `utilities/`: 커스텀 유틸리티 클래스 (typography)
+- 색상 토큰 재구성
+  - `:root`에 실제 색상 이름으로 CSS 변수 정의 (`--color-orange-*`, `--color-green-*`, `--color-red-*`)
+  - `@theme`에서 시멘틱 색상으로 매핑 (`primary` → Orange, `secondary` → Green, `tertiary` → Red)
+  - 실제 색상(`bg-orange-500`)과 시멘틱 색상(`bg-primary-500`) 모두 사용 가능
+  - CSS 변수(`var(--color-orange-500)`, `var(--color-primary-500)`) 직접 사용 가능
+- README 업데이트
+  - 색상 사용 방법 명확화 (실제 색상 vs 시멘틱 색상)
+  - Tailwind 테마 커스터마이징 가이드 개선
+  - CSS 변수 사용 예시 추가
+
+### Removed
+
+- vanilla-extract 관련 의존성 완전 제거
+  - `@vanilla-extract/css`, `@vanilla-extract/esbuild-plugin`, `@vanilla-extract/vite-plugin` 제거
+  - `vitest.config.ts`, `vite.config.ts`, `tsup.config.ts`에서 vanilla-extract 플러그인 제거
+
+## [0.2.0] - 2026-01-14
 
 ### Added
 
@@ -34,7 +59,7 @@
 
 - README에 썸네일 이미지 추가
 
-## [0.1.6] - 2025-01-14
+## [0.1.6] - 2026-01-14
 
 ### Added
 
@@ -176,7 +201,8 @@
 - Storybook 설정
 - Vitest 테스트 설정
 
-[Unreleased]: https://github.com/Team-NumberOne/daepiro-design-system/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/Team-NumberOne/daepiro-design-system/compare/v0.2.1...HEAD
+[0.2.1]: https://github.com/Team-NumberOne/daepiro-design-system/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/Team-NumberOne/daepiro-design-system/compare/v0.1.6...v0.2.0
 [0.1.6]: https://github.com/Team-NumberOne/daepiro-design-system/compare/v0.1.5...v0.1.6
 [0.1.5]: https://github.com/Team-NumberOne/daepiro-design-system/compare/v0.1.4...v0.1.5
diff --git a/README.md b/README.md
index f5f6239..6ee49b3 100644
--- a/README.md
+++ b/README.md
@@ -143,14 +143,60 @@ import { Icon, Icons } from "@team-numberone/daepiro-design-system";
 
 ### Colors
 
+#### JavaScript/TypeScript에서 사용
+
 ```tsx
 import { colors } from "@team-numberone/daepiro-design-system";
 
-colors.O[500]; // Orange 500
-colors.Gre[300]; // Green 300
-colors.G[900]; // Gray 900
+// 실제 색상 팔레트 (디자인 토큰)
+colors.O[500];   // Orange 500 - #FF6929
+colors.Gre[300]; // Green 300 - #6ACF98
+colors.R[500];   // Red 500 - #FA2C1F
+colors.G[900];   // Gray 900 - #222530
+```
+
+**CSS 변수로 사용:**
+
+```css
+/* 실제 색상 이름 */
+background-color: var(--color-orange-500);
+color: var(--color-green-300);
+
+/* 시멘틱 색상 이름 */
+background-color: var(--color-primary-500);  /* Orange */
+color: var(--color-secondary-300);           /* Green */
+```
+
+#### Tailwind CSS 유틸리티 클래스로 바로 사용
+
+`@theme`에 정의된 색상은 Tailwind 유틸리티 클래스로 바로 사용할 수 있습니다:
+
+```tsx
+// 실제 색상 이름으로 사용
+<div className="bg-orange-500 text-white">Orange 배경</div>
+<div className="bg-green-500 text-white">Green 배경</div>
+<div className="bg-red-500 text-white">Red 배경</div>
+
+// 시멘틱 색상 이름으로 사용 (Orange → Primary, Green → Secondary, Red → Tertiary)
+<div className="bg-primary-500 text-white">Primary(Orange) 배경</div>
+<div className="bg-secondary-500 text-white">Secondary(Green) 배경</div>
+<div className="bg-tertiary-500 text-white">Tertiary(Red) 배경</div>
+
+// Gray 색상
+<div className="bg-gray-50 text-gray-900">Gray 배경</div>
+<div className="bg-gray-75">Gray-75 배경</div>
+<div className="text-gray-600">Gray 텍스트</div>
+
+// 모든 색상 스케일 사용 가능 (50-900)
+<div className="bg-primary-100 hover:bg-primary-200">호버 효과</div>
+<div className="bg-orange-100 hover:bg-orange-200">Orange 호버 효과</div>
 ```
 
+**색상 매핑:**
+- `orange-*` = `primary-*` (Orange → Primary)
+- `green-*` = `secondary-*` (Green → Secondary)
+- `red-*` = `tertiary-*` (Red → Tertiary)
+
 ### Typography
 
 ```tsx
@@ -175,12 +221,67 @@ shadows.large;
 
 이 디자인 시스템은 Tailwind CSS v4를 사용하며, `@theme` 문법을 통해 테마를 커스터마이징할 수 있습니다.
 
+#### 기본 사용법
+
+```tsx
+// 색상 사용
+<div className="bg-primary-500 text-white p-4 rounded-lg">
+  Primary 배경
+</div>
+
+// 타이포그래피 사용
+<h1 className="text-h1">제목 1</h1>
+<p className="text-body-1">본문 텍스트</p>
+```
+
+#### 테마 오버라이드 (사용처에서)
+
+디자인 시스템의 색상을 커스터마이징할 수 있습니다. 예를 들어, Primary 색상을 그린(Secondary)으로 변경:
+
 ```css
-/* 사용처에서 Tailwind 테마 오버라이드 */
+/* globals.css */
+@import "@team-numberone/daepiro-design-system/dist/index.css";
 @import "tailwindcss";
 
+/* Primary 색상을 Green으로 오버라이드 */
+@theme {
+  --color-primary-50: var(--color-green-50);
+  --color-primary-100: var(--color-green-100);
+  --color-primary-200: var(--color-green-200);
+  --color-primary-300: var(--color-green-300);
+  --color-primary-400: var(--color-green-400);
+  --color-primary-500: var(--color-green-500);
+  --color-primary-600: var(--color-green-600);
+  --color-primary-700: var(--color-green-700);
+  --color-primary-800: var(--color-green-800);
+  --color-primary-900: var(--color-green-900);
+}
+
+/* 디자인 시스템 컴포넌트의 CSS 변수도 오버라이드 */
+:root {
+  --color-primary-50: var(--color-green-50);
+  --color-primary-100: var(--color-green-100);
+  --color-primary-200: var(--color-green-200);
+  --color-primary-300: var(--color-green-300);
+  --color-primary-400: var(--color-green-400);
+  --color-primary-500: var(--color-green-500);
+  --color-primary-600: var(--color-green-600);
+  --color-primary-700: var(--color-green-700);
+  --color-primary-800: var(--color-green-800);
+  --color-primary-900: var(--color-green-900);
+}
+```
+
+이렇게 하면:
+- 사용처의 `bg-primary-500` 클래스가 Green 색상으로 적용됩니다
+- 디자인 시스템의 Button 컴포넌트도 Green 색상을 사용합니다
+- 디자인 시스템이 제공하는 `--color-green-*`, `--color-orange-*`, `--color-red-*` CSS 변수를 참조할 수 있습니다
+
+#### 커스텀 색상 정의
+
+```css
 @theme {
-  /* 색상 커스터마이징 */
+  /* 완전히 새로운 색상 정의 */
   --color-primary-500: #ff0000;
   --color-gray-900: #1a1a1a;
   
@@ -189,14 +290,6 @@ shadows.large;
 }
 ```
 
-또는 Tailwind 유틸리티 클래스를 직접 사용할 수 있습니다:
-
-```tsx
-<div className="bg-primary-500 text-white p-4 rounded-lg">
-  커스텀 스타일
-</div>
-```
-
 ## 🛠️ 개발
 
 ### 사전 요구사항
diff --git a/package.json b/package.json
index f4bc769..08b9135 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@team-numberone/daepiro-design-system",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "대피로 디자인 시스템 - React 컴포넌트 라이브러리",
   "private": false,
   "packageManager": "pnpm@10.25.0",
@@ -66,9 +66,6 @@
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vanilla-extract/css": "^1.17.5",
-    "@vanilla-extract/esbuild-plugin": "^2.3.20",
-    "@vanilla-extract/vite-plugin": "^5.1.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "@vitest/coverage-v8": "4.0.15",
     "@vitest/ui": "^4.0.15",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ac03d1..81d1640 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,15 +66,6 @@ importers:
       '@types/react-dom':
         specifier: ^19.2.3
         version: 19.2.3(@types/react@19.2.7)
-      '@vanilla-extract/css':
-        specifier: ^1.17.5
-        version: 1.17.5
-      '@vanilla-extract/esbuild-plugin':
-        specifier: ^2.3.20
-        version: 2.3.20(esbuild@0.27.1)
-      '@vanilla-extract/vite-plugin':
-        specifier: ^5.1.3
-        version: 5.1.3(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2))
       '@vitejs/plugin-react-swc':
         specifier: ^4.2.2
         version: 4.2.2(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2))
@@ -412,9 +403,6 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
-  '@emotion/hash@0.9.2':
-    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
-
   '@esbuild/aix-ppc64@0.25.12':
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
@@ -1568,34 +1556,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@vanilla-extract/babel-plugin-debug-ids@1.2.2':
-    resolution: {integrity: sha512-MeDWGICAF9zA/OZLOKwhoRlsUW+fiMwnfuOAqFVohL31Agj7Q/RBWAYweqjHLgFBCsdnr6XIfwjJnmb2znEWxw==}
-
-  '@vanilla-extract/compiler@0.3.3':
-    resolution: {integrity: sha512-y/RCcjhITi/JV/jbH22QN0aDSTtWELOBbkod/rcrUfGTS8bfVrthSsFmH+0ZoL9LJBx3vHrf0Qaf24xZkoiJoQ==}
-
-  '@vanilla-extract/css@1.17.5':
-    resolution: {integrity: sha512-u29cUVL5Z2qjJ2Eh8pusT1ToGtTeA4eb/y0ygaw2vWv9XFQSixtkBYEsVkrJExSI/0+SR1g8n5NYas4KlWOdfA==}
-
-  '@vanilla-extract/esbuild-plugin@2.3.20':
-    resolution: {integrity: sha512-QTSHqzD42L7Pi2LwAjIidP26nsOVlnZ7FQKT2S9A9FCaqnrVQmn1tPtgbV0wCo74gVrmaORK3vD2NuNhxyMOKg==}
-    peerDependencies:
-      esbuild: '>=0.17.6'
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-
-  '@vanilla-extract/integration@8.0.6':
-    resolution: {integrity: sha512-BlDtXtb6Fin8XEGwf4BhsJkKQh0rhj/YiN6ylNNOqXtRU0+DQmzE5WGE056ScKg3p5e0IFaeH7PPxuWJca9aXw==}
-
-  '@vanilla-extract/private@1.0.9':
-    resolution: {integrity: sha512-gT2jbfZuaaCLrAxwXbRgIhGhcXbRZCG3v4TTUnjw0EJ7ArdBRxkq4msNJkbuRkCgfIK5ATmprB5t9ljvLeFDEA==}
-
-  '@vanilla-extract/vite-plugin@5.1.3':
-    resolution: {integrity: sha512-QKojhn+O4NIjPQsjfF3Lz+DCC9VaGE/P6eNXcZGoWhdCuGXbMOdSX0xogCX9O6ewzwJOiJJ++3NvuSlh7oVkcw==}
-    peerDependencies:
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
-
   '@vitejs/plugin-react-swc@4.2.2':
     resolution: {integrity: sha512-x+rE6tsxq/gxrEJN3Nv3dIV60lFflPj94c90b+NNo6n1QV1QQUTLoL0MpaOVasUZ0zqVBn7ead1B5ecx1JAGfA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2022,11 +1982,6 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -2078,9 +2033,6 @@ packages:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
 
-  deep-object-diff@1.1.9:
-    resolution: {integrity: sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==}
-
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -2254,10 +2206,6 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  eval@0.1.8:
-    resolution: {integrity: sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==}
-    engines: {node: '>= 0.8'}
-
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -2328,10 +2276,6 @@ packages:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
 
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-
   fix-dts-default-cjs-exports@1.0.1:
     resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
 
@@ -2597,9 +2541,6 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  javascript-stringify@2.1.0:
-    resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==}
-
   jest-changed-files@30.2.0:
     resolution: {integrity: sha512-L8lR1ChrRnSdfeOvTrwZMlnWV8G/LLjQ0nG9MBclwWZidA2N5FviRki0Bvh20WRMOX31/JYvzdqTJrk5oBdydQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -2892,10 +2833,6 @@ packages:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
 
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-
   lodash.flattendeep@4.4.0:
     resolution: {integrity: sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==}
 
@@ -2956,9 +2893,6 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
-  media-query-parser@2.0.2:
-    resolution: {integrity: sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==}
-
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -3008,9 +2942,6 @@ packages:
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
-  modern-ahocorasick@1.1.0:
-    resolution: {integrity: sha512-sEKPVl2rM+MNVkGQt3ChdmD8YsigmXdn5NifZn6jiwn9LRJpWm8F3guhaqrJT/JOat6pwpbXEk6kv+b9DMIjsQ==}
-
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -3097,10 +3028,6 @@ packages:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
 
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-
   p-map@3.0.0:
     resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
     engines: {node: '>=8'}
@@ -3301,9 +3228,6 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  require-like@0.1.2:
-    resolution: {integrity: sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==}
-
   require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
 
@@ -3701,11 +3625,6 @@ packages:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
-  vite-node@3.2.4:
-    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
-
   vite@7.2.7:
     resolution: {integrity: sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4203,8 +4122,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emotion/hash@0.9.2': {}
-
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
@@ -5262,97 +5179,6 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vanilla-extract/babel-plugin-debug-ids@1.2.2':
-    dependencies:
-      '@babel/core': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vanilla-extract/compiler@0.3.3(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)':
-    dependencies:
-      '@vanilla-extract/css': 1.17.5
-      '@vanilla-extract/integration': 8.0.6
-      vite: 7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)
-      vite-node: 3.2.4(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  '@vanilla-extract/css@1.17.5':
-    dependencies:
-      '@emotion/hash': 0.9.2
-      '@vanilla-extract/private': 1.0.9
-      css-what: 6.2.2
-      cssesc: 3.0.0
-      csstype: 3.2.3
-      dedent: 1.7.0
-      deep-object-diff: 1.1.9
-      deepmerge: 4.3.1
-      lru-cache: 10.4.3
-      media-query-parser: 2.0.2
-      modern-ahocorasick: 1.1.0
-      picocolors: 1.1.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-
-  '@vanilla-extract/esbuild-plugin@2.3.20(esbuild@0.27.1)':
-    dependencies:
-      '@vanilla-extract/integration': 8.0.6
-    optionalDependencies:
-      esbuild: 0.27.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
-  '@vanilla-extract/integration@8.0.6':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
-      '@vanilla-extract/babel-plugin-debug-ids': 1.2.2
-      '@vanilla-extract/css': 1.17.5
-      dedent: 1.7.0
-      esbuild: 0.27.1
-      eval: 0.1.8
-      find-up: 5.0.0
-      javascript-stringify: 2.1.0
-      mlly: 1.8.0
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-
-  '@vanilla-extract/private@1.0.9': {}
-
-  '@vanilla-extract/vite-plugin@5.1.3(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2))':
-    dependencies:
-      '@vanilla-extract/compiler': 0.3.3(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)
-      '@vanilla-extract/integration': 8.0.6
-      vite: 7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
   '@vitejs/plugin-react-swc@4.2.2(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.47
@@ -5814,8 +5640,6 @@ snapshots:
 
   css.escape@1.5.1: {}
 
-  cssesc@3.0.0: {}
-
   csso@5.0.5:
     dependencies:
       css-tree: 2.2.1
@@ -5852,8 +5676,6 @@ snapshots:
 
   deep-eql@5.0.2: {}
 
-  deep-object-diff@1.1.9: {}
-
   deepmerge@4.3.1: {}
 
   default-require-extensions@3.0.1:
@@ -6049,11 +5871,6 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  eval@0.1.8:
-    dependencies:
-      '@types/node': 24.10.2
-      require-like: 0.1.2
-
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -6129,11 +5946,6 @@ snapshots:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-
   fix-dts-default-cjs-exports@1.0.1:
     dependencies:
       magic-string: 0.30.21
@@ -6418,8 +6230,6 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  javascript-stringify@2.1.0: {}
-
   jest-changed-files@30.2.0:
     dependencies:
       execa: 5.1.1
@@ -6898,10 +6708,6 @@ snapshots:
     dependencies:
       p-locate: 4.1.0
 
-  locate-path@6.0.0:
-    dependencies:
-      p-locate: 5.0.0
-
   lodash.flattendeep@4.4.0: {}
 
   lodash@4.17.21: {}
@@ -6954,10 +6760,6 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
-  media-query-parser@2.0.2:
-    dependencies:
-      '@babel/runtime': 7.28.4
-
   merge-stream@2.0.0: {}
 
   micromatch@4.0.8:
@@ -7000,8 +6802,6 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.1
 
-  modern-ahocorasick@1.1.0: {}
-
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -7101,10 +6901,6 @@ snapshots:
     dependencies:
       p-limit: 2.3.0
 
-  p-locate@5.0.0:
-    dependencies:
-      p-limit: 3.1.0
-
   p-map@3.0.0:
     dependencies:
       aggregate-error: 3.1.0
@@ -7285,8 +7081,6 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
-  require-like@0.1.2: {}
-
   require-main-filename@2.0.0: {}
 
   resolve-cwd@3.0.0:
@@ -7710,27 +7504,6 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
-  vite-node@3.2.4(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.4.3
-      es-module-lexer: 1.7.0
-      pathe: 2.0.3
-      vite: 7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
   vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2):
     dependencies:
       esbuild: 0.25.12
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index df67445..2a6de8f 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,63 +1,13 @@
 @import "tailwindcss";
 
-@theme {
-  /* Colors - Primary (Orange) */
-  --color-primary-50: #fff0ea;
-  --color-primary-100: #ffd1bd;
-  --color-primary-200: #ffba9d;
-  --color-primary-300: #ff9b70;
-  --color-primary-400: #ff8754;
-  --color-primary-500: #ff6929;
-  --color-primary-600: #e86025;
-  --color-primary-700: #b54b1d;
-  --color-primary-800: #8c3a17;
-  --color-primary-900: #6b2c11;
+/* Import Design Tokens (CSS Variables in :root) */
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/shadows.css";
 
-  /* Colors - Secondary (Green) */
-  --color-secondary-50: #e9f8f0;
-  --color-secondary-100: #bae9d0;
-  --color-secondary-200: #98deb9;
-  --color-secondary-300: #6acf98;
-  --color-secondary-400: #4dc585;
-  --color-secondary-500: #20b766;
-  --color-secondary-600: #1da75d;
-  --color-secondary-700: #178248;
-  --color-secondary-800: #126538;
-  --color-secondary-900: #0d4d2b;
+/* Import Tailwind Theme Configuration */
+@import "./theme/colors.css";
+@import "./theme/typography.css";
 
-  /* Colors - Tertiary (Red) */
-  --color-tertiary-50: #ffeae9;
-  --color-tertiary-100: #fdbeba;
-  --color-tertiary-200: #fd9e98;
-  --color-tertiary-300: #fc7269;
-  --color-tertiary-400: #fb564c;
-  --color-tertiary-500: #fa2c1f;
-  --color-tertiary-600: #e4281c;
-  --color-tertiary-700: #b21f16;
-  --color-tertiary-800: #8a1811;
-  --color-tertiary-900: #69120d;
-
-  /* Colors - Gray */
-  --color-gray-50: #f5f5f7;
-  --color-gray-75: #e4e5ea;
-  --color-gray-100: #c9ccd4;
-  --color-gray-200: #afb3bf;
-  --color-gray-300: #8b90a1;
-  --color-gray-400: #757a8f;
-  --color-gray-500: #525973;
-  --color-gray-600: #4b5169;
-  --color-gray-700: #3a3f52;
-  --color-gray-800: #2d313f;
-  --color-gray-900: #222530;
-
-  /* Typography */
-  --font-family-sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
-    sans-serif;
-
-  /* Shadows */
-  --shadow-floating: 2px 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 4px 0
-    rgba(0, 0, 0, 0.15);
-  --shadow-btn-pressed: 0 0 1px 0 rgba(34, 37, 48, 0.15), 1px 1px 2px 0
-    rgba(34, 37, 48, 0.15);
-  --shadow-dimmed: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 0 20px 0 rgba(0, 0, 0, 0.1);
-}
+/* Import Custom Utilities */
+@import "./utilities/typography.css";
diff --git a/src/styles/theme/colors.css b/src/styles/theme/colors.css
new file mode 100644
index 0000000..4444493
--- /dev/null
+++ b/src/styles/theme/colors.css
@@ -0,0 +1,87 @@
+/* Tailwind Theme - Colors */
+@theme {
+  /* Colors - Orange (for Tailwind utilities: bg-orange-500, text-orange-500, etc.) */
+  --color-orange-50: var(--color-orange-50);
+  --color-orange-100: var(--color-orange-100);
+  --color-orange-200: var(--color-orange-200);
+  --color-orange-300: var(--color-orange-300);
+  --color-orange-400: var(--color-orange-400);
+  --color-orange-500: var(--color-orange-500);
+  --color-orange-600: var(--color-orange-600);
+  --color-orange-700: var(--color-orange-700);
+  --color-orange-800: var(--color-orange-800);
+  --color-orange-900: var(--color-orange-900);
+
+  /* Colors - Green (for Tailwind utilities: bg-green-500, text-green-500, etc.) */
+  --color-green-50: var(--color-green-50);
+  --color-green-100: var(--color-green-100);
+  --color-green-200: var(--color-green-200);
+  --color-green-300: var(--color-green-300);
+  --color-green-400: var(--color-green-400);
+  --color-green-500: var(--color-green-500);
+  --color-green-600: var(--color-green-600);
+  --color-green-700: var(--color-green-700);
+  --color-green-800: var(--color-green-800);
+  --color-green-900: var(--color-green-900);
+
+  /* Colors - Red (for Tailwind utilities: bg-red-500, text-red-500, etc.) */
+  --color-red-50: var(--color-red-50);
+  --color-red-100: var(--color-red-100);
+  --color-red-200: var(--color-red-200);
+  --color-red-300: var(--color-red-300);
+  --color-red-400: var(--color-red-400);
+  --color-red-500: var(--color-red-500);
+  --color-red-600: var(--color-red-600);
+  --color-red-700: var(--color-red-700);
+  --color-red-800: var(--color-red-800);
+  --color-red-900: var(--color-red-900);
+
+  /* Colors - Gray (for Tailwind utilities: bg-gray-500, text-gray-500, etc.) */
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-75: var(--color-gray-75);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+
+  /* Semantic Colors - Primary (maps to Orange) */
+  --color-primary-50: var(--color-orange-50);
+  --color-primary-100: var(--color-orange-100);
+  --color-primary-200: var(--color-orange-200);
+  --color-primary-300: var(--color-orange-300);
+  --color-primary-400: var(--color-orange-400);
+  --color-primary-500: var(--color-orange-500);
+  --color-primary-600: var(--color-orange-600);
+  --color-primary-700: var(--color-orange-700);
+  --color-primary-800: var(--color-orange-800);
+  --color-primary-900: var(--color-orange-900);
+
+  /* Semantic Colors - Secondary (maps to Green) */
+  --color-secondary-50: var(--color-green-50);
+  --color-secondary-100: var(--color-green-100);
+  --color-secondary-200: var(--color-green-200);
+  --color-secondary-300: var(--color-green-300);
+  --color-secondary-400: var(--color-green-400);
+  --color-secondary-500: var(--color-green-500);
+  --color-secondary-600: var(--color-green-600);
+  --color-secondary-700: var(--color-green-700);
+  --color-secondary-800: var(--color-green-800);
+  --color-secondary-900: var(--color-green-900);
+
+  /* Semantic Colors - Tertiary (maps to Red) */
+  --color-tertiary-50: var(--color-red-50);
+  --color-tertiary-100: var(--color-red-100);
+  --color-tertiary-200: var(--color-red-200);
+  --color-tertiary-300: var(--color-red-300);
+  --color-tertiary-400: var(--color-red-400);
+  --color-tertiary-500: var(--color-red-500);
+  --color-tertiary-600: var(--color-red-600);
+  --color-tertiary-700: var(--color-red-700);
+  --color-tertiary-800: var(--color-red-800);
+  --color-tertiary-900: var(--color-red-900);
+}
diff --git a/src/styles/theme/typography.css b/src/styles/theme/typography.css
new file mode 100644
index 0000000..2907b4a
--- /dev/null
+++ b/src/styles/theme/typography.css
@@ -0,0 +1,57 @@
+/* Tailwind Theme - Typography */
+@theme {
+  /* Typography - Font Family */
+  --font-family-sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
+    sans-serif;
+
+  /* Typography - Font Sizes */
+  --font-size-h1: 96px;
+  --font-size-h2: 60px;
+  --font-size-h3: 48px;
+  --font-size-h4: 34px;
+  --font-size-h5: 24px;
+  --font-size-h6: 20px;
+  --font-size-body-1: 16px;
+  --font-size-body-2: 14px;
+  --font-size-caption: 12px;
+  --font-size-overline: 10px;
+
+  /* Typography - Font Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Typography - Line Heights */
+  --line-height-h1: 115px;
+  --line-height-h2: 72px;
+  --line-height-h3: 58px;
+  --line-height-h4: 42px;
+  --line-height-h5: 32px;
+  --line-height-h6: 28px;
+  --line-height-body-1: 24px;
+  --line-height-body-2: 22px;
+  --line-height-caption: 16px;
+  --line-height-overline: 12px;
+
+  /* Typography - Letter Spacing */
+  --letter-spacing-h1: -1.5px;
+  --letter-spacing-h2: -0.5px;
+  --letter-spacing-h3: 0px;
+  --letter-spacing-h4: 0px;
+  --letter-spacing-h5: 0px;
+  --letter-spacing-h6: 0.1px;
+  --letter-spacing-subtitle-1: 0.15px;
+  --letter-spacing-body-1: 0.15px;
+  --letter-spacing-subtitle-2: -0.25px;
+  --letter-spacing-body-2: -0.25px;
+  --letter-spacing-caption: 0px;
+  --letter-spacing-overline: 0px;
+
+  /* Shadows */
+  --shadow-floating: 2px 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 4px 0
+    rgba(0, 0, 0, 0.15);
+  --shadow-btn-pressed: 0 0 1px 0 rgba(34, 37, 48, 0.15), 1px 1px 2px 0
+    rgba(34, 37, 48, 0.15);
+  --shadow-dimmed: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 0 20px 0 rgba(0, 0, 0, 0.1);
+}
diff --git a/src/styles/tokens/colors.css b/src/styles/tokens/colors.css
new file mode 100644
index 0000000..76b0637
--- /dev/null
+++ b/src/styles/tokens/colors.css
@@ -0,0 +1,51 @@
+/* Color Tokens - CSS Variables */
+:root {
+  /* Colors - Orange */
+  --color-orange-50: #fff0ea;
+  --color-orange-100: #ffd1bd;
+  --color-orange-200: #ffba9d;
+  --color-orange-300: #ff9b70;
+  --color-orange-400: #ff8754;
+  --color-orange-500: #ff6929;
+  --color-orange-600: #e86025;
+  --color-orange-700: #b54b1d;
+  --color-orange-800: #8c3a17;
+  --color-orange-900: #6b2c11;
+
+  /* Colors - Green */
+  --color-green-50: #e9f8f0;
+  --color-green-100: #bae9d0;
+  --color-green-200: #98deb9;
+  --color-green-300: #6acf98;
+  --color-green-400: #4dc585;
+  --color-green-500: #20b766;
+  --color-green-600: #1da75d;
+  --color-green-700: #178248;
+  --color-green-800: #126538;
+  --color-green-900: #0d4d2b;
+
+  /* Colors - Red */
+  --color-red-50: #ffeae9;
+  --color-red-100: #fdbeba;
+  --color-red-200: #fd9e98;
+  --color-red-300: #fc7269;
+  --color-red-400: #fb564c;
+  --color-red-500: #fa2c1f;
+  --color-red-600: #e4281c;
+  --color-red-700: #b21f16;
+  --color-red-800: #8a1811;
+  --color-red-900: #69120d;
+
+  /* Colors - Gray */
+  --color-gray-50: #f5f5f7;
+  --color-gray-75: #e4e5ea;
+  --color-gray-100: #c9ccd4;
+  --color-gray-200: #afb3bf;
+  --color-gray-300: #8b90a1;
+  --color-gray-400: #757a8f;
+  --color-gray-500: #525973;
+  --color-gray-600: #4b5169;
+  --color-gray-700: #3a3f52;
+  --color-gray-800: #2d313f;
+  --color-gray-900: #222530;
+}
diff --git a/src/styles/tokens/shadows.css b/src/styles/tokens/shadows.css
new file mode 100644
index 0000000..c1c4969
--- /dev/null
+++ b/src/styles/tokens/shadows.css
@@ -0,0 +1,9 @@
+/* Shadow Tokens - CSS Variables */
+:root {
+  /* Shadows */
+  --shadow-floating: 2px 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 4px 0
+    rgba(0, 0, 0, 0.15);
+  --shadow-btn-pressed: 0 0 1px 0 rgba(34, 37, 48, 0.15), 1px 1px 2px 0
+    rgba(34, 37, 48, 0.15);
+  --shadow-dimmed: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 0 20px 0 rgba(0, 0, 0, 0.1);
+}
diff --git a/src/styles/tokens/typography.css b/src/styles/tokens/typography.css
new file mode 100644
index 0000000..b7c2afe
--- /dev/null
+++ b/src/styles/tokens/typography.css
@@ -0,0 +1,50 @@
+/* Typography Tokens - CSS Variables */
+:root {
+  /* Typography - Font Family */
+  --font-family-sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
+    sans-serif;
+
+  /* Typography - Font Sizes */
+  --font-size-h1: 96px;
+  --font-size-h2: 60px;
+  --font-size-h3: 48px;
+  --font-size-h4: 34px;
+  --font-size-h5: 24px;
+  --font-size-h6: 20px;
+  --font-size-body-1: 16px;
+  --font-size-body-2: 14px;
+  --font-size-caption: 12px;
+  --font-size-overline: 10px;
+
+  /* Typography - Font Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Typography - Line Heights */
+  --line-height-h1: 115px;
+  --line-height-h2: 72px;
+  --line-height-h3: 58px;
+  --line-height-h4: 42px;
+  --line-height-h5: 32px;
+  --line-height-h6: 28px;
+  --line-height-body-1: 24px;
+  --line-height-body-2: 22px;
+  --line-height-caption: 16px;
+  --line-height-overline: 12px;
+
+  /* Typography - Letter Spacing */
+  --letter-spacing-h1: -1.5px;
+  --letter-spacing-h2: -0.5px;
+  --letter-spacing-h3: 0px;
+  --letter-spacing-h4: 0px;
+  --letter-spacing-h5: 0px;
+  --letter-spacing-h6: 0.1px;
+  --letter-spacing-subtitle-1: 0.15px;
+  --letter-spacing-body-1: 0.15px;
+  --letter-spacing-subtitle-2: -0.25px;
+  --letter-spacing-body-2: -0.25px;
+  --letter-spacing-caption: 0px;
+  --letter-spacing-overline: 0px;
+}
diff --git a/src/styles/utilities/typography.css b/src/styles/utilities/typography.css
new file mode 100644
index 0000000..3a845ac
--- /dev/null
+++ b/src/styles/utilities/typography.css
@@ -0,0 +1,104 @@
+/* Typography Utility Classes */
+@utility text-h1 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-h1);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-h1);
+  letter-spacing: var(--letter-spacing-h1);
+}
+
+@utility text-h2 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-h2);
+  letter-spacing: var(--letter-spacing-h2);
+}
+
+@utility text-h3 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-h3);
+  letter-spacing: var(--letter-spacing-h3);
+}
+
+@utility text-h4 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-h4);
+  letter-spacing: var(--letter-spacing-h4);
+}
+
+@utility text-h5 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-h5);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-h5);
+  letter-spacing: var(--letter-spacing-h5);
+}
+
+@utility text-h6 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-h6);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-h6);
+  letter-spacing: var(--letter-spacing-h6);
+}
+
+@utility text-subtitle-1 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-1);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-body-1);
+  letter-spacing: var(--letter-spacing-subtitle-1);
+}
+
+@utility text-body-1 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-1);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-body-1);
+  letter-spacing: var(--letter-spacing-body-1);
+}
+
+@utility text-body-1-b {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-1);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-body-1);
+  letter-spacing: var(--letter-spacing-body-1);
+}
+
+@utility text-subtitle-2 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-2);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-body-2);
+  letter-spacing: var(--letter-spacing-subtitle-2);
+}
+
+@utility text-body-2 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-2);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-body-2);
+  letter-spacing: var(--letter-spacing-body-2);
+}
+
+@utility text-caption {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-caption);
+  letter-spacing: var(--letter-spacing-caption);
+}
+
+@utility text-overline {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-overline);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-overline);
+  letter-spacing: var(--letter-spacing-overline);
+}
diff --git a/tsup.config.ts b/tsup.config.ts
index cad8e00..b5df728 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,4 +1,3 @@
-import { vanillaExtractPlugin } from "@vanilla-extract/esbuild-plugin";
 import { defineConfig } from "tsup";
 
 export default defineConfig({
@@ -8,5 +7,4 @@ export default defineConfig({
   sourcemap: true,
   clean: true,
   external: ["react", "react-dom"],
-  esbuildPlugins: [vanillaExtractPlugin()],
 });
diff --git a/vite.config.ts b/vite.config.ts
index ef54e1e..c64c83a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,9 @@
 import path from "node:path";
-import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [react(), vanillaExtractPlugin()],
+  plugins: [react()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src"),
diff --git a/vitest.config.ts b/vitest.config.ts
index 623cb42..eef1e76 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,10 +1,9 @@
 import path from "node:path";
-import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  plugins: [react(), vanillaExtractPlugin()],
+  plugins: [react()],
   test: {
     globals: true,
     environment: "jsdom",