diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..15a1ec6
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,53 @@
+/*컬러 정리*/
+
+:root {
+  --black-1: #121212;
+  --black-2: #1a1a1a;
+  --black-3: #2e2e2e;
+
+  --white-1: #fafaf8;
+  --white-2: #fdfcf8;
+  --white-3: #f3f0e9;
+
+  --gold-1: #dfc078;
+  --gold-2: #cdb174;
+  --gold-3: #b5921f;
+  --gold-4: #8b6b0a;
+
+  --text-disabled: #3d3a35;
+  --text-muted: #555555;
+  --text-placeholder: #807c75;
+  --text-tertiary: #b3b0a8;
+  --text-secondary: #e6e3de;
+  --text-primary: #faf8f4;
+
+  --radius-10: 10px;
+  --radius-15: 15px;
+  --radius-20: 20px;
+}
+
+@theme {
+  --color-black-1: var(--black-1);
+  --color-black-2: var(--black-2);
+  --color-black-3: var(--black-3);
+
+  --color-white-1: var(--white-1);
+  --color-white-2: var(--white-2);
+  --color-white-3: var(--white-3);
+
+  --color-gold-1: var(--gold-1);
+  --color-gold-2: var(--gold-2);
+  --color-gold-3: var(--gold-3);
+  --color-gold-4: var(--gold-4);
+
+  --color-text-disabled: var(--text-disabled);
+  --color-text-muted: var(--text-muted);
+  --color-text-placeholder: var(--text-placeholder);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-primary: var(--text-primary);
+
+  --radius-10: var(--radius-10);
+  --radius-15: var(--radius-15);
+  --radius-20: var(--radius-20);
+}
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 0000000..a1a0f75
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,93 @@
+/*폰트정리*/
+
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap");
+
+:root {
+  /*font family*/
+  --font-korean: "Noto Serif KR", serif;
+  --font-body-en: "Noto Serif", serif;
+  --font-title-en: "Bodoni Moda", serif;
+
+  /*typography*/
+  --text-hero: 56px;
+  --text-heading1: 40px;
+  --text-heading2: 32px;
+  --text-heading3: 24px;
+  --text-body1: 22px;
+  --text-body2: 18px;
+  --text-label: 14px;
+  --text-caption: 12px;
+
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-regular: 400;
+}
+
+@theme {
+  /*font family*/
+  --font-korean: var(--font-korean);
+  --font-body-en: var(--font-body-en);
+  --font-title-en: var(--font-title-en);
+
+  /*font size*/
+  --text-hero: var(--text-hero);
+  --text-heading1: var(--text-heading1);
+  --text-heading2: var(--text-heading2);
+  --text-heading3: var(--text-heading3);
+  --text-body1: var(--text-body1);
+  --text-body2: var(--text-body2);
+  --text-label: var(--text-label);
+  --text-caption: var(--text-caption);
+
+  /*font weight*/
+  --font-weight-bold: var(--font-weight-bold);
+  --font-weight-semibold: var(--font-weight-semibold);
+  --font-weight-medium: var(--font-weight-medium);
+  --font-weight-regular: var(--font-weight-regular);
+}
+
+@layer utilities {
+  .font-hero {
+    font-size: 56px;
+    font-weight: 700;
+    line-height: 140%;
+  }
+  .font-heading1 {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 130%;
+  }
+  .font-heading2 {
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 130%;
+  }
+  .font-heading3 {
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 130%;
+  }
+  .font-body1 {
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 130%;
+  }
+  .font-body2 {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 130%;
+  }
+  .font-label {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+  }
+  .font-caption {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 130%;
+  }
+}