💄(#10) 디자인 토큰 세팅

src/App.tsx

@@ -1,7 +1,10 @@
 function App() {
   return (
     <>
-      <div>테스트 중</div>
+      <div className="flex justify-center items-center h-full gap-5">
+        <div className="bg-boost-blue text-white">색상 토큰 테스트</div>
+        <div className="title1-bold">폰트 토큰 테스트</div>
+      </div>
     </>
   );
 }

src/index.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "@/shared/design-token/color.css";
+@import "@/shared/design-token/typography.css";
 
 @custom-variant dark (&:is(.dark *));
 

src/main.tsx

@@ -1,8 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
+import "@/index.css";
 import "@/app/style/global.css";
-import App from "./App.tsx";
+import App from "@/App.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

src/shared/design-token/color.css

@@ -0,0 +1,75 @@
+@theme {
+  /* Boost Blue */
+  --color-boost-blue-light: #339eee;
+  --color-boost-blue-hover: #4a79dd;
+  --color-boost-blue: #1458dd;
+  --color-boost-blue-pressed: #0944c2;
+  --color-boost-blue-dark: #102f6c;
+
+  /* Boost Orange */
+  --color-boost-orange-light: #ffb074;
+  --color-boost-orange-hover: #ff9d51;
+  --color-boost-orange: #ff882e;
+  --color-boost-orange-pressed: #eb802e;
+  --color-boost-orange-dark: #cc6211;
+
+  /* Boost Yellow */
+  --color-boost-yellow-light: #ffde65;
+  --color-boost-yellow-hover: #f0c433;
+  --color-boost-yellow: #fec619;
+  --color-boost-yellow-pressed: #ffaf1b;
+  --color-boost-yellow-dark: #c59502;
+
+  /* Gray Scale */
+  --color-gray-100: #ffffff;
+  --color-gray-200: #f6f8fa;
+  --color-gray-300: #eff1f3;
+  --color-gray-400: #c2cad0;
+  --color-gray-500: #9ba1a9;
+  --color-gray-600: #666c73;
+  --color-gray-700: #434b56;
+  --color-gray-800: #292e37;
+  --color-gray-900: #1f2226;
+  --color-gray-1000: #000000;
+
+  /* Red Scale */
+  --color-red-50: #fff5f5;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+
+  /* Status Colors */
+  --color-status-info: #17a2b8;
+  --color-status-success: #28a745;
+  --color-status-warning: #ffc107;
+  --color-status-error: #dc3545;
+
+  /* Avatar Colors */
+  --color-avatar-blue: #d5e3ff;
+  --color-avatar-orange: #fbe0cb;
+  --color-avatar-yellow: #fff5cf;
+  --color-avatar-red: #ffd1d1;
+  --color-avatar-pink: #ffe3fd;
+  --color-avatar-green: #dff5e6;
+  --color-avatar-purple: #e9dcff;
+  --color-avatar-gray: #dbdbdb;
+
+  /* Background Colors */
+  --color-background-default: var(--color-gray-100);
+  --color-background-secondary: var(--color-gray-200);
+  --color-background-tertiary: var(--color-gray-300);
+  --color-background-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Text Colors */
+  --color-text-default: var(--color-gray-900);
+  --color-text-sub: var(--color-gray-700);
+  --color-text-disabled: var(--color-gray-500);
+  --color-text-placeholder: var(--color-gray-200);
+
+  /* Outline Colors */
+  --color-outline-default: var(--color-gray-400);
+  --color-outline-disabled: var(--color-gray-300);
+}

src/shared/design-token/typography.css

@@ -0,0 +1,163 @@
+@theme {
+  /* 제목 (Title) */
+  --title1-bold-font-size: 1.25rem;
+  --title1-bold-line-height: 27px;
+  --title1-bold-font-weight: 700;
+
+  --title1-regular-font-size: 1.25rem;
+  --title1-regular-line-height: 27px;
+  --title1-regular-font-weight: 400;
+
+  --title2-bold-font-size: 1rem;
+  --title2-bold-line-height: 24px;
+  --title2-bold-font-weight: 700;
+
+  --title2-regular-font-size: 1rem;
+  --title2-regular-line-height: 24px;
+  --title2-regular-font-weight: 400;
+
+  /* 부제목 (Subtitle) */
+  --subtitle1-bold-font-size: 1rem;
+  --subtitle1-bold-line-height: 22px;
+  --subtitle1-bold-font-weight: 700;
+
+  --subtitle1-regular-font-size: 1rem;
+  --subtitle1-regular-line-height: 24px;
+  --subtitle1-regular-font-weight: 400;
+
+  --subtitle2-bold-font-size: 0.875rem;
+  --subtitle2-bold-line-height: 19px;
+  --subtitle2-bold-font-weight: 700;
+
+  --subtitle2-regular-font-size: 0.875rem;
+  --subtitle2-regular-line-height: 19px;
+  --subtitle2-regular-font-weight: 400;
+
+  /* 본문 (Body) */
+  --body1-bold-font-size: 1rem;
+  --body1-bold-line-height: 22px;
+  --body1-bold-font-weight: 700;
+
+  --body1-regular-font-size: 1rem;
+  --body1-regular-line-height: 22px;
+  --body1-regular-font-weight: 400;
+
+  --body2-bold-font-size: 0.875rem;
+  --body2-bold-line-height: 19px;
+  --body2-bold-font-weight: 700;
+
+  --body2-regular-font-size: 0.875rem;
+  --body2-regular-line-height: 19px;
+  --body2-regular-font-weight: 400;
+
+  /* 라벨 (Label) */
+  --label1-bold-font-size: 0.875rem;
+  --label1-bold-line-height: 19px;
+  --label1-bold-font-weight: 700;
+
+  --label1-regular-font-size: 0.875rem;
+  --label1-regular-line-height: 19px;
+  --label1-regular-font-weight: 400;
+
+  --label2-bold-font-size: 0.75rem;
+  --label2-bold-line-height: 16px;
+  --label2-bold-font-weight: 700;
+
+  --label2-regular-font-size: 0.75rem;
+  --label2-regular-line-height: 16px;
+  --label2-regular-font-weight: 400;
+}
+
+@layer utilities {
+  /* Title */
+  .title1-bold {
+    font-size: var(--title1-bold-font-size);
+    line-height: var(--title1-bold-line-height);
+    font-weight: var(--title1-bold-font-weight);
+  }
+  .title1-regular {
+    font-size: var(--title1-regular-font-size);
+    line-height: var(--title1-regular-line-height);
+    font-weight: var(--title1-regular-font-weight);
+  }
+
+  .title2-bold {
+    font-size: var(--title2-bold-font-size);
+    line-height: var(--title2-bold-line-height);
+    font-weight: var(--title2-bold-font-weight);
+  }
+  .title2-regular {
+    font-size: var(--title2-regular-font-size);
+    line-height: var(--title2-regular-line-height);
+    font-weight: var(--title2-regular-font-weight);
+  }
+
+  /* Subtitle */
+  .subtitle1-bold {
+    font-size: var(--subtitle1-bold-font-size);
+    line-height: var(--subtitle1-bold-line-height);
+    font-weight: var(--subtitle1-bold-font-weight);
+  }
+  .subtitle1-regular {
+    font-size: var(--subtitle1-regular-font-size);
+    line-height: var(--subtitle1-regular-line-height);
+    font-weight: var(--subtitle1-regular-font-weight);
+  }
+
+  .subtitle2-bold {
+    font-size: var(--subtitle2-bold-font-size);
+    line-height: var(--subtitle2-bold-line-height);
+    font-weight: var(--subtitle2-bold-font-weight);
+  }
+  .subtitle2-regular {
+    font-size: var(--subtitle2-regular-font-size);
+    line-height: var(--subtitle2-regular-line-height);
+    font-weight: var(--subtitle2-regular-font-weight);
+  }
+
+  /* Body */
+  .body1-bold {
+    font-size: var(--body1-bold-font-size);
+    line-height: var(--body1-bold-line-height);
+    font-weight: var(--body1-bold-font-weight);
+  }
+  .body1-regular {
+    font-size: var(--body1-regular-font-size);
+    line-height: var(--body1-regular-line-height);
+    font-weight: var(--body1-regular-font-weight);
+  }
+
+  .body2-bold {
+    font-size: var(--body2-bold-font-size);
+    line-height: var(--body2-bold-line-height);
+    font-weight: var(--body2-bold-font-weight);
+  }
+  .body2-regular {
+    font-size: var(--body2-regular-font-size);
+    line-height: var(--body2-regular-line-height);
+    font-weight: var(--body2-regular-font-weight);
+  }
+
+  /* Label */
+  .label1-bold {
+    font-size: var(--label1-bold-font-size);
+    line-height: var(--label1-bold-line-height);
+    font-weight: var(--label1-bold-font-weight);
+  }
+  .label1-regular {
+    font-size: var(--label1-regular-font-size);
+    line-height: var(--label1-regular-line-height);
+    font-weight: var(--label1-regular-font-weight);
+  }
+
+  .label2-bold {
+    font-size: var(--label2-bold-font-size);
+    line-height: var(--label2-bold-line-height);
+    font-weight: var(--label2-bold-font-weight);
+  }
+  .label2-regular {
+    font-size: var(--label2-regular-font-size);
+    line-height: var(--label2-regular-line-height);
+    font-weight: var(--label2-regular-font-weight);
+  }
+}