diff --git a/src/index.css b/src/index.css
index f1d8c73c..49a5d5e2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,93 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+@font-face {
+  font-family: 'SpoqaHanSansNeo-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* reset */
+@layer base {
+  html,
+  body,
+  div,
+  span,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a,
+  img,
+  ol,
+  ul,
+  li,
+  form,
+  label,
+  footer,
+  header,
+  nav,
+  section {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  footer,
+  header,
+  nav,
+  section {
+    display: block;
+  }
+
+  body {
+    line-height: 1;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  html {
+    font-family: 'SpoqaHanSansNeo-Regular', sans-serif;
+  }
+}
+
+/* style variables */
+@theme {
+  --color-white: #ffffff;
+  --color-gray-5: #fafafa;
+  --color-gray-10: #f2f2f3;
+  --color-gray-20: #e5e4e7;
+  --color-gray-30: #cbc9cf;
+  --color-gray-40: #a4a1aa;
+  --color-gray-50: #7d7986;
+  --color-black: #111322;
+  --color-red-10: #ffebe7;
+  --color-red-20: #ffaf9b;
+  --color-red-30: #ff8d72;
+  --color-red-40: #ff4040;
+  --color-blue-10: #cce6ff;
+  --color-blue-20: #0080ff;
+  --color-greem-10: #d4f7d4;
+  --color-green-20: #20a81e;
+  --color-kakao: #fee500;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --text-h1: 28px;
+  --text-h2: 24px;
+  --text-h3: 20px;
+  --text-body1: 16px;
+  --text-body2: 14px;
+  --text-caption: 12px;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 4ff4f8fe..6e7f5280 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vite.dev/config/
 export default defineConfig({