diff --git a/src/constants/colorToken.ts b/src/constants/colorToken.ts
new file mode 100644
index 0000000..138c5f5
--- /dev/null
+++ b/src/constants/colorToken.ts
@@ -0,0 +1,30 @@
+/**
+ * 색상 토큰
+ */
+export const COLORS = {
+  GDSC: {
+    Red: '#EA4235',
+    Yellow: '#FABC05',
+    Green: '#34A853',
+    Blue: '#4286F5',
+  },
+  SSU: {
+    DeepBlue: '#00688F',
+    Blue: '#00A4CA',
+    SkyBlue: '#58C4C4',
+  },
+  grayscale: {
+    white: '#FFFFFF',
+    Gray1: '#F3F5F7',
+    Gray2: '#ECEEF0',
+    Gray3: '#E2E5E8',
+    Gray4: '#D4D8DC',
+    Gray5: '#B5B9BD',
+    Gray6: '#8E9398',
+    Gray7: '#505458',
+    Gray8: '#3A3D40',
+    Gray9: '#252729',
+    Black: '#101112',
+  },
+  background: '#0A0A0A',
+};
diff --git a/src/constants/style/textToken.css.ts b/src/constants/style/textToken.css.ts
new file mode 100644
index 0000000..069b905
--- /dev/null
+++ b/src/constants/style/textToken.css.ts
@@ -0,0 +1,205 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+const BREAKPOINTS = [500, 800] as const;
+const MEDIA_QUERY = {
+  pc: `screen and (min-width: ${BREAKPOINTS[1]}px)`,
+  mobile: `screen and (max-width: ${BREAKPOINTS[0]}px)`,
+} as const;
+
+/**
+ * 타이틀 텍스트 토큰
+ */
+export const titleText = styleVariants({
+  title: {
+    fontSize: 36,
+    fontWeight: 900,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 30,
+        fontWeight: 900,
+      },
+    },
+  },
+  subtitle1: {
+    fontSize: 30,
+    fontWeight: 800,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 22,
+        fontWeight: 800,
+      },
+    },
+  },
+  subtitle2B: {
+    fontSize: 22,
+    fontWeight: 700,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 20,
+        fontWeight: 700,
+      },
+    },
+  },
+  subtitle2R: {
+    fontSize: 22,
+    fontWeight: 500,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 20,
+        fontWeight: 500,
+      },
+    },
+  },
+  subtitle3: {
+    fontSize: 20,
+    fontWeight: 700,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 18,
+        fontWeight: 700,
+      },
+    },
+  },
+});
+
+/**
+ * Body 텍스트 토큰
+ */
+export const bodyText = styleVariants({
+  body1B: {
+    fontSize: 20,
+    fontWeight: 700,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 18,
+        fontWeight: 700,
+      },
+    },
+  },
+  body1R: {
+    fontSize: 20,
+    fontWeight: 400,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 18,
+        fontWeight: 400,
+      },
+    },
+  },
+  body2B: {
+    fontSize: 18,
+    fontWeight: 700,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 18,
+        fontWeight: 700,
+      },
+    },
+  },
+  body2R: {
+    fontSize: 18,
+    fontWeight: 400,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 16,
+        fontWeight: 400,
+      },
+    },
+  },
+  body3: {
+    fontSize: 16,
+    fontWeight: 400,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 14,
+        fontWeight: 400,
+      },
+    },
+  },
+  caption: {
+    fontSize: 14,
+    fontWeight: 400,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 12,
+        fontWeight: 400,
+      },
+    },
+  },
+});
+
+/**
+ * 버튼 텍스트 토큰
+ */
+export const btnText = styleVariants({
+  border: {
+    fontSize: 20,
+    fontWeight: 800,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 12,
+        fontWeight: 800,
+      },
+    },
+  },
+  button1B: {
+    fontSize: 20,
+    fontWeight: 700,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 12,
+        fontWeight: 400,
+      },
+    },
+  },
+  button1R: {
+    fontSize: 20,
+    fontWeight: 400,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 18,
+        fontWeight: 400,
+      },
+    },
+  },
+  button2B: {
+    fontSize: 18,
+    fontWeight: 700,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 16,
+        fontWeight: 700,
+      },
+    },
+  },
+  button2R: {
+    fontSize: 18,
+    fontWeight: 400,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 16,
+        fontWeight: 400,
+      },
+    },
+  },
+  button3R: {
+    fontSize: 16,
+    fontWeight: 400,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 14,
+        fontWeight: 400,
+      },
+    },
+  },
+  button4B: {
+    fontSize: 14,
+    fontWeight: 800,
+    '@media': {
+      [MEDIA_QUERY.mobile]: {
+        fontSize: 13,
+        fontWeight: 800,
+      },
+    },
+  },
+});