diff --git a/eslint.config.mjs b/eslint.config.mjs
index 4c313dec..123b0c46 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -22,6 +22,7 @@ const eslintConfig = [
       'out/**',
       'build/**',
       'next-env.d.ts',
+      'scripts/**',
     ],
   },
 ];
diff --git a/package.json b/package.json
index 85fe47bd..0d719df3 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "build": "next build --turbopack",
     "build:docker": "docker build -t cheese_frontend .",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "token": "node scripts/generate-color-token.mjs"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.2",
diff --git a/public/fonts/PretendardVariable.woff2 b/public/fonts/PretendardVariable.woff2
new file mode 100644
index 00000000..49c54b51
Binary files /dev/null and b/public/fonts/PretendardVariable.woff2 differ
diff --git a/scripts/generate-color-token.mjs b/scripts/generate-color-token.mjs
new file mode 100644
index 00000000..a3745cec
--- /dev/null
+++ b/scripts/generate-color-token.mjs
@@ -0,0 +1,526 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+function toKebabCase(input) {
+  return String(input)
+    .replaceAll(/[^a-zA-Z0-9]+/g, "-")
+    .replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replaceAll(/-{2,}/g, "-")
+    .replaceAll(/^-|-$/g, "");
+}
+
+function isColorToken(node) {
+  return (
+    node &&
+    typeof node === "object" &&
+    "value" in node &&
+    "type" in node &&
+    node.type === "color"
+  );
+}
+
+function isTypedToken(node) {
+  return node && typeof node === "object" && "value" in node && "type" in node;
+}
+
+function isPlainObject(value) {
+  return value && typeof value === "object" && !Array.isArray(value);
+}
+
+function flattenColorTokens(
+  root,
+  pathParts = [],
+  out = [],
+  pathToVarMap = new Map(),
+  refPrefixSegments = [],
+  refParts = []
+) {
+  if (!root || typeof root !== "object") return { tokens: out, pathToVarMap };
+
+  if (isColorToken(root)) {
+    const variableName = `--${toKebabCase(pathParts.join("-"))}`;
+    out.push({ name: variableName, value: root.value });
+    // Save mapping from dotted path (e.g. Color.Blue.500) to variable name (e.g. --color-blue-500)
+    const dottedKey = pathParts.join(".");
+    pathToVarMap.set(dottedKey, variableName);
+    return { tokens: out, pathToVarMap };
+  }
+
+  for (const [key, value] of Object.entries(root)) {
+    const nextPath = [...pathParts, toKebabCase(key)];
+    // Track JSON reference path using original keys only (no kebab-case)
+    const nextRefParts = [...refParts, key];
+    if (isColorToken(value)) {
+      const varName = `--${toKebabCase(nextPath.join("-"))}`;
+      out.push({ name: varName, value: value.value });
+      const refKey = [...refPrefixSegments, ...nextRefParts].join(".");
+      const canonicalRefKey = refKey
+        .split(".")
+        .map((part) => part.replaceAll(" ", ""))
+        .join(".");
+      pathToVarMap.set(refKey, varName);
+      pathToVarMap.set(canonicalRefKey, varName);
+    } else if (value && typeof value === "object") {
+      flattenColorTokens(
+        value,
+        nextPath,
+        out,
+        pathToVarMap,
+        refPrefixSegments,
+        nextRefParts
+      );
+    }
+  }
+  return { tokens: out, pathToVarMap };
+}
+
+function flattenSemanticTokens(root, pathParts = [], out = []) {
+  if (!root || typeof root !== "object") return out;
+  if (isTypedToken(root)) {
+    out.push({ path: pathParts, value: root.value, type: root.type });
+    return out;
+  }
+  for (const [key, value] of Object.entries(root)) {
+    flattenSemanticTokens(value, [...pathParts, toKebabCase(key)], out);
+  }
+  return out;
+}
+
+function resolveReferenceValue(value, pathToVarMap) {
+  if (typeof value !== "string") return null;
+  const match = value.match(/^\{([^}]+)\}$/);
+  if (!match) return null;
+  let ref = match[1]; // e.g., Color.Blue.500
+  // Try direct key first
+  if (pathToVarMap.has(ref)) return `var(${pathToVarMap.get(ref)})`;
+  // Try normalized key (remove spaces and normalize case of first segment)
+  const parts = ref.split(".");
+  if (parts.length > 0) parts[0] = parts[0].trim();
+  const canonical = parts.map((p) => p.replaceAll(" ", "")).join(".");
+  if (pathToVarMap.has(canonical)) return `var(${pathToVarMap.get(canonical)})`;
+  // Last attempt: lower-cased, kebab combined map
+  const lower = parts.map((p) => p.toLowerCase()).join(".");
+  if (pathToVarMap.has(lower)) return `var(${pathToVarMap.get(lower)})`;
+  return null;
+}
+
+// Map common weight names to numeric values
+
+function toPx(value) {
+  if (typeof value === "number") return `${value}px`;
+  if (typeof value === "string")
+    return /px$/.test(value) ? value : `${value}px`;
+  return String(value);
+}
+
+function collectTextPrimitives(primitiveRoot) {
+  const textRoot = {};
+  if (!isPlainObject(primitiveRoot)) return textRoot;
+
+  const fontRoot = primitiveRoot.font;
+  if (!isPlainObject(fontRoot)) return textRoot;
+
+  // Extract font family
+  const fontFamily = fontRoot.family?.pretendard?.value;
+  if (fontFamily) {
+    textRoot.font = { fontFamily };
+  }
+
+  // Extract font weights
+  const fontWeights = {};
+  if (isPlainObject(fontRoot.weight)) {
+    for (const [wKey, wVal] of Object.entries(fontRoot.weight)) {
+      if (isTypedToken(wVal)) {
+        fontWeights[wKey] = wVal.value;
+      }
+    }
+  }
+
+  // Extract sizes and line heights
+  const sizes = fontRoot.size || {};
+  const lineHeights = fontRoot["line height"] || {};
+  const letterSpacings = fontRoot["letter spacing"] || {};
+
+  // Create font tokens for each size
+  for (const [sizeKey, sizeObj] of Object.entries(sizes)) {
+    if (!isTypedToken(sizeObj)) continue;
+
+    const sizeValue = sizeObj.value;
+    const lineHeightObj = lineHeights[sizeKey];
+    const letterSpacingObj = letterSpacings[sizeKey];
+
+    const sizeName = `size-${sizeKey}`;
+    textRoot[sizeName] = {
+      fontSize: toPx(sizeValue),
+    };
+
+    if (isTypedToken(lineHeightObj)) {
+      textRoot[sizeName].lineHeight = toPx(lineHeightObj.value);
+    }
+
+    if (isTypedToken(letterSpacingObj)) {
+      textRoot[sizeName].letterSpacing = toPx(letterSpacingObj.value);
+    }
+  }
+
+  // Add font weights to textRoot
+  if (Object.keys(fontWeights).length > 0) {
+    textRoot.weight = { fontWeight: fontWeights };
+  }
+
+  return textRoot;
+}
+
+function buildTextRootCss(textRoot) {
+  const lines = [];
+  for (const [groupName, groupVal] of Object.entries(textRoot)) {
+    if (groupName === "font" && groupVal.fontFamily) {
+      lines.push(`  --font-family-primary: ${groupVal.fontFamily};`);
+    }
+    if (groupName === "weight" && groupVal.fontWeight) {
+      for (const [wKey, wVal] of Object.entries(groupVal.fontWeight)) {
+        lines.push(`  --font-weight-${wKey}: ${wVal};`);
+      }
+    }
+    if (groupName.startsWith("size-")) {
+      const sizeKey = groupName.replace("size-", "");
+      if (groupVal.fontSize) {
+        lines.push(`  --font-size-${sizeKey}: ${groupVal.fontSize};`);
+      }
+      if (groupVal.lineHeight) {
+        lines.push(`  --line-height-${sizeKey}: ${groupVal.lineHeight};`);
+      }
+      if (groupVal.letterSpacing) {
+        lines.push(`  --letter-spacing-${sizeKey}: ${groupVal.letterSpacing};`);
+      }
+    }
+  }
+  return lines;
+}
+
+function buildTextThemeCss(textRoot) {
+  const lines = [];
+  for (const [groupName, groupVal] of Object.entries(textRoot)) {
+    if (groupName === "font" && groupVal.fontFamily) {
+      lines.push(`  --font-primary: var(--font-family-primary);`);
+    }
+    if (groupName.startsWith("size-")) {
+      const sizeKey = groupName.replace("size-", "");
+      if (groupVal.fontSize) {
+        lines.push(`  --text-${sizeKey}: var(--font-size-${sizeKey});`);
+      }
+      if (groupVal.lineHeight) {
+        lines.push(`  --leading-${sizeKey}: var(--line-height-${sizeKey});`);
+      }
+      if (groupVal.letterSpacing) {
+        lines.push(
+          `  --tracking-${sizeKey}: var(--letter-spacing-${sizeKey});`
+        );
+      }
+    }
+  }
+  return lines;
+}
+
+function buildTypographyUtilitiesCss(textRoot) {
+  const lines = [];
+  const start = "/* generated-typography-utilities:start */";
+  const end = "/* generated-typography-utilities:end */";
+  lines.push(start);
+
+  const weights = textRoot.weight?.fontWeight || {};
+  const hasFamily = Boolean(textRoot.font?.fontFamily);
+
+  for (const [groupName, groupVal] of Object.entries(textRoot)) {
+    if (!groupName.startsWith("size-")) continue;
+
+    const sizeKey = groupName.replace("size-", "");
+    const classBase = `text-${sizeKey}`;
+    const props = [];
+
+    if (groupVal.fontSize) {
+      props.push(`  font-size: var(--text-${sizeKey});`);
+    }
+    if (groupVal.lineHeight) {
+      props.push(`  line-height: var(--leading-${sizeKey});`);
+    }
+    if (hasFamily) {
+      props.push(`  font-family: var(--font-primary);`);
+    }
+    if (groupVal.letterSpacing) {
+      props.push(`  letter-spacing: var(--tracking-${sizeKey});`);
+    }
+
+    // base utility without explicit weight
+    lines.push(`@utility ${classBase} {`);
+    lines.push(...props);
+    lines.push(`}`);
+
+    // utilities per weight
+    for (const [weightName] of Object.entries(weights)) {
+      const className = `${classBase}-${weightName}`;
+      lines.push(`@utility ${className} {`);
+      lines.push(...props);
+      lines.push(`  font-weight: var(--font-weight-${weightName});`);
+      lines.push(`}`);
+    }
+  }
+
+  lines.push(end);
+  return lines;
+}
+
+async function main() {
+  const projectRoot = process.cwd();
+  const inputPath = resolve(projectRoot, "src/app/token.json");
+  const globalsPath = resolve(projectRoot, "src/app/globals.css");
+
+  const raw = await readFile(inputPath, "utf8");
+  const tokens = JSON.parse(raw);
+
+  const primitiveMode = tokens["primitive/Mode 1"] || {};
+  const primitive = primitiveMode?.color;
+  if (!primitive) {
+    console.error(
+      'No primitive color tokens found at "primitive/Mode 1" → "color"'
+    );
+  }
+
+  const { tokens: colorVars, pathToVarMap } = flattenColorTokens(
+    primitive,
+    ["color"],
+    [],
+    new Map(),
+    ["color"],
+    []
+  );
+
+  // Use semantic/Mode 1 as the main semantic tokens
+  const semanticRoot = tokens["semantic/Mode 1"];
+  const semanticTokens = semanticRoot
+    ? flattenSemanticTokens(semanticRoot)
+    : [];
+
+  // Collect text primitives from primitive/Mode 1 (excluding Color)
+  const textPrimitives = collectTextPrimitives(primitiveMode);
+
+  // Read globals.css to inject tokens
+  let globalsCss = await readFile(globalsPath, "utf8");
+
+  // Remove any tokens.css import if exists
+  globalsCss = globalsCss.replace(
+    /\n?@import\s+["']\.\.\/styles\/tokens\.css["'];?\n?/g,
+    "\n"
+  );
+
+  // Helper to find block range by selector start index
+  function findBlockRange(source, startIndexOfBrace) {
+    let depth = 0;
+    for (let i = startIndexOfBrace; i < source.length; i++) {
+      const ch = source[i];
+      if (ch === "{") depth++;
+      else if (ch === "}") {
+        depth--;
+        if (depth === 0) {
+          return { start: startIndexOfBrace, end: i };
+        }
+      }
+    }
+    return null;
+  }
+
+  // Locate top-level :root block (first occurrence)
+  const rootSelRegex = /:root\s*\{/g;
+  const rootSelMatch = rootSelRegex.exec(globalsCss);
+  if (!rootSelMatch) {
+    throw new Error("Could not find :root block in src/app/globals.css");
+  }
+  const rootBlock = findBlockRange(
+    globalsCss,
+    rootSelMatch.index + rootSelMatch[0].length - 1
+  );
+  if (!rootBlock) throw new Error("Failed to parse :root block");
+
+  // Prepare primitive color tokens content
+  const primitiveStart = "/* generated-color-tokens:start */";
+  const primitiveEnd = "/* generated-color-tokens:end */";
+  const primitiveLines = [primitiveStart];
+  for (const { name, value } of colorVars) {
+    primitiveLines.push(`  ${name}: ${value};`);
+  }
+  primitiveLines.push(primitiveEnd);
+  const primitiveBlock = "\n" + primitiveLines.join("\n") + "\n";
+
+  // Prepare primitive text tokens content
+  const textStart = "/* generated-text-tokens:start */";
+  const textEnd = "/* generated-text-tokens:end */";
+  const textLines = [textStart, ...buildTextRootCss(textPrimitives), textEnd];
+  const textBlock = "\n" + textLines.join("\n") + "\n";
+
+  // Replace or insert into :root block
+  const rootContent = globalsCss.slice(rootBlock.start + 1, rootBlock.end);
+  const existingPrimitiveRe = new RegExp(
+    primitiveStart.replace(/[/*]/g, (m) => `\\${m}`) +
+      "[\\s\\S]*?" +
+      primitiveEnd.replace(/[/*]/g, (m) => `\\${m}`),
+    "m"
+  );
+  let newRootContent;
+  if (existingPrimitiveRe.test(rootContent)) {
+    newRootContent = rootContent.replace(
+      existingPrimitiveRe,
+      primitiveBlock.trim()
+    );
+  } else {
+    newRootContent = rootContent.replace(/\n\s*\}$/, "") + primitiveBlock + "}";
+    // The '}' will be re-added when we reconstruct full content below; ensure no duplicate
+    newRootContent = newRootContent.replace(/\}\s*$/, "");
+  }
+
+  // Reconstruct globals with updated :root
+  globalsCss =
+    globalsCss.slice(0, rootBlock.start + 1) +
+    newRootContent +
+    globalsCss.slice(rootBlock.end);
+
+  // Inject or replace text tokens in :root
+  const rootSelMatch2 = /:root\s*\{/g.exec(globalsCss);
+  if (!rootSelMatch2) throw new Error(":root disappeared unexpectedly");
+  const rootBlock2 = findBlockRange(
+    globalsCss,
+    rootSelMatch2.index + rootSelMatch2[0].length - 1
+  );
+  const rootContent2 = globalsCss.slice(rootBlock2.start + 1, rootBlock2.end);
+  const existingTextRe = new RegExp(
+    textStart.replace(/[/*]/g, (m) => `\\${m}`) +
+      "[\\s\\S]*?" +
+      textEnd.replace(/[/*]/g, (m) => `\\${m}`),
+    "m"
+  );
+  let newRootContent2;
+  if (existingTextRe.test(rootContent2)) {
+    newRootContent2 = rootContent2.replace(existingTextRe, textBlock.trim());
+  } else {
+    newRootContent2 = rootContent2.replace(/\n\s*\}$/, "") + textBlock + "}";
+    newRootContent2 = newRootContent2.replace(/\}\s*$/, "");
+  }
+  globalsCss =
+    globalsCss.slice(0, rootBlock2.start + 1) +
+    newRootContent2 +
+    globalsCss.slice(rootBlock2.end);
+
+  // Locate @theme inline block
+  const themeRegex = /@theme\s+inline\s*\{/g;
+  const themeMatch = themeRegex.exec(globalsCss);
+  if (!themeMatch) {
+    throw new Error(
+      'Could not find "@theme inline {" block in src/app/globals.css'
+    );
+  }
+  const themeBlock = findBlockRange(
+    globalsCss,
+    themeMatch.index + themeMatch[0].length - 1
+  );
+  if (!themeBlock) throw new Error("Failed to parse @theme inline block");
+
+  // Prepare semantic tokens (without 'semantic' prefix) to go into @theme inline
+  const semanticStart = "/* generated-semantic-tokens:start */";
+  const semanticEnd = "/* generated-semantic-tokens:end */";
+  const semanticLines = [semanticStart];
+  for (const { path, value, type } of semanticTokens) {
+    if (type !== "color") continue;
+    const varName = `--${toKebabCase(path.join("-"))}`; // e.g., --color-bg-interactive-primary
+    const refValue = resolveReferenceValue(value, pathToVarMap);
+    const finalValue = refValue ?? value;
+    semanticLines.push(`  ${varName}: ${finalValue};`);
+  }
+  semanticLines.push(semanticEnd);
+  const semanticBlock = "\n" + semanticLines.join("\n") + "\n";
+
+  // Prepare typography theme tokens
+  const typoStart = "/* generated-typography-tokens:start */";
+  const typoEnd = "/* generated-typography-tokens:end */";
+  const typoLines = [typoStart, ...buildTextThemeCss(textPrimitives), typoEnd];
+  const typoBlock = "\n" + typoLines.join("\n") + "\n";
+
+  const themeContent = globalsCss.slice(themeBlock.start + 1, themeBlock.end);
+  const existingSemanticRe = new RegExp(
+    semanticStart.replace(/[/*]/g, (m) => `\\${m}`) +
+      "[\\s\\S]*?" +
+      semanticEnd.replace(/[/*]/g, (m) => `\\${m}`),
+    "m"
+  );
+  let newThemeContent;
+  if (existingSemanticRe.test(themeContent)) {
+    newThemeContent = themeContent.replace(
+      existingSemanticRe,
+      semanticBlock.trim()
+    );
+  } else {
+    newThemeContent =
+      themeContent.replace(/\n\s*\}$/, "") + semanticBlock + "}";
+    newThemeContent = newThemeContent.replace(/\}\s*$/, "");
+  }
+
+  globalsCss =
+    globalsCss.slice(0, themeBlock.start + 1) +
+    newThemeContent +
+    globalsCss.slice(themeBlock.end);
+
+  // Inject or replace typography theme tokens
+  const themeMatch2 = /@theme\s+inline\s*\{/g.exec(globalsCss);
+  if (!themeMatch2) throw new Error("@theme inline disappeared unexpectedly");
+  const themeBlock2 = findBlockRange(
+    globalsCss,
+    themeMatch2.index + themeMatch2[0].length - 1
+  );
+  const themeContent2 = globalsCss.slice(
+    themeBlock2.start + 1,
+    themeBlock2.end
+  );
+  const existingTypoRe = new RegExp(
+    typoStart.replace(/[/*]/g, (m) => `\\${m}`) +
+      "[\\s\\S]*?" +
+      typoEnd.replace(/[/*]/g, (m) => `\\${m}`),
+    "m"
+  );
+  let newThemeContent2;
+  if (existingTypoRe.test(themeContent2)) {
+    newThemeContent2 = themeContent2.replace(existingTypoRe, typoBlock.trim());
+  } else {
+    newThemeContent2 = themeContent2.replace(/\n\s*\}$/, "") + typoBlock + "}";
+    newThemeContent2 = newThemeContent2.replace(/\}\s*$/, "");
+  }
+
+  globalsCss =
+    globalsCss.slice(0, themeBlock2.start + 1) +
+    newThemeContent2 +
+    globalsCss.slice(themeBlock2.end);
+
+  // Inject or replace typography utilities at file root
+  const utilStart = "/* generated-typography-utilities:start */";
+  const utilEnd = "/* generated-typography-utilities:end */";
+  const utilLines = buildTypographyUtilitiesCss(textPrimitives);
+  const utilBlock = utilLines.join("\n") + "\n";
+  const utilRe = new RegExp(
+    utilStart.replace(/[/*]/g, (m) => `\\${m}`) +
+      "[\\s\\S]*?" +
+      utilEnd.replace(/[/*]/g, (m) => `\\${m}`),
+    "m"
+  );
+  if (utilRe.test(globalsCss)) {
+    globalsCss = globalsCss.replace(utilRe, utilBlock.trim());
+  } else {
+    // Append at end of file with a preceding newline
+    globalsCss = globalsCss.replace(/\s*$/, "\n" + utilBlock);
+  }
+
+  await writeFile(globalsPath, globalsCss, "utf8");
+  console.log(`Updated ${globalsPath}`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41ec..146caaec 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,97 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+
+/* generated-color-tokens:start */
+  --color-primary-25: #fffbeb;
+  --color-primary-50: #fff7d6;
+  --color-primary-100: #fff2c2;
+  --color-primary-200: #ffe894;
+  --color-primary-300: #ffdc5c;
+  --color-primary-400: #ffcd14;
+  --color-primary-500: #ffb700;
+  --color-primary-600: #e09900;
+  --color-primary-700: #996300;
+  --color-primary-800: #664200;
+  --color-primary-900: #332100;
+  --color-accent-25: #fff5f6;
+  --color-accent-50: #ffe5ea;
+  --color-accent-100: #ffccd4;
+  --color-accent-200: #ff99aa;
+  --color-accent-300: #ff6680;
+  --color-accent-400: #ff3355;
+  --color-accent-500: #ff002b;
+  --color-accent-600: #cc0022;
+  --color-accent-700: #99001a;
+  --color-accent-800: #660011;
+  --color-accent-900: #330009;
+  --color-success-25: #ebffeb;
+  --color-success-50: #c7ffc7;
+  --color-success-100: #a8ffa8;
+  --color-success-200: #7aff7a;
+  --color-success-300: #1aff1a;
+  --color-success-400: #00e500;
+  --color-success-500: #00c400;
+  --color-success-600: #009900;
+  --color-success-700: #006600;
+  --color-success-800: #004d00;
+  --color-success-900: #002900;
+  --color-neutral-0: #ffffff;
+  --color-neutral-25: #f7f7f8;
+  --color-neutral-50: #f1f2f3;
+  --color-neutral-100: #e5e5e7;
+  --color-neutral-200: #c9cacf;
+  --color-neutral-300: #afb0b7;
+  --color-neutral-400: #94969e;
+  --color-neutral-500: #747681;
+  --color-neutral-600: #56575f;
+  --color-neutral-700: #424349;
+  --color-neutral-800: #2c2c30;
+  --color-neutral-900: #18191b;
+  --color-alpha-white-white-100: #ffffff;
+  --color-alpha-white-white-80: #ffffffcc;
+  --color-alpha-white-white-50: #ffffff80;
+  --color-alpha-white-white-20: #ffffff33;
+  --color-alpha-white-white-0: #ffffff00;
+  --color-alpha-black-black-100: #18191b;
+  --color-alpha-black-black-75: #18191bcc;
+  --color-alpha-black-black-50: #18191b80;
+  --color-alpha-black-black-20: #18191b33;
+  --color-alpha-black-black-0: #18191b00;
+  --color-alpha-black-black-10: #18191b1a;
+  --color-alpha-primary-yellow-100: #ffcd14;
+  --color-alpha-primary-yellow-80: #ffcd14cc;
+  --color-alpha-primary-yellow-50: #ffcd1480;
+  --color-alpha-primary-yellow-20: #ffcd1433;
+  --color-alpha-primary-yellow-0: #ffcd1400;
+/* generated-color-tokens:end */
+
+/* generated-text-tokens:start */
+  --font-family-primary: pretendard;
+  --font-size-12: 12px;
+  --font-size-13: 13px;
+  --font-size-14: 14px;
+  --font-size-15: 15px;
+  --font-size-16: 16px;
+  --font-size-17: 17px;
+  --font-size-18: 18px;
+  --line-height-18: 18px;
+  --font-size-20: 20px;
+  --line-height-20: 20px;
+  --font-size-24: 24px;
+  --line-height-24: 24px;
+  --font-size-28: 28px;
+  --line-height-28: 28px;
+  --font-size-32: 32px;
+  --font-size-36: 36px;
+  --line-height-36: 36px;
+  --font-size-40: 40px;
+  --font-size-44: 44px;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+/* generated-text-tokens:end */
 }
 
 @theme inline {
@@ -10,6 +101,102 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+
+/* generated-semantic-tokens:start */
+  --color-button-primary-fill: var(--color-primary-400);
+  --color-button-primary-fill-pressed: var(--color-primary-500);
+  --color-button-disabled-fill: var(--color-neutral-100);
+  --color-button-secondary-fill-pressed: var(--color-primary-100);
+  --color-button-secondary-fill: var(--color-primary-25);
+  --color-button-secodnary-border: var(--color-primary-400);
+  --color-button-disabled-border: var(--color-neutral-200);
+  --color-button-tertiary-border: var(--color-neutral-600);
+  --color-button-tertiary-fill-pressed: var(--color-neutral-50);
+  --color-button-tertiary-fill: var(--color-neutral-25);
+  --color-background-white: var(--color-neutral-0);
+  --color-background-dim: var(--color-alpha-black-black-75);
+  --color-background-dim-dark: var(--color-alpha-black-black-20);
+  --color-background-dim-darker: var(--color-alpha-black-black-50);
+  --color-surface-surface-default: var(--color-neutral-50);
+  --color-surface-surface-muted: var(--color-neutral-100);
+  --color-surface-surface-elevated: var(--color-neutral-25);
+  --color-surface-white: var(--color-neutral-0);
+  --color-surface-info: var(--color-alpha-black-black-75);
+  --color-surface-inverse: var(--color-neutral-900);
+  --color-text-basic: var(--color-neutral-900);
+  --color-text-subtle: var(--color-neutral-700);
+  --color-text-disabled: var(--color-neutral-400);
+  --color-text-basic-inverse: var(--color-neutral-0);
+  --color-text-subtle-inverse: var(--color-neutral-300);
+  --color-text-primary: var(--color-primary-900);
+  --color-text-accent: var(--color-accent-700);
+  --color-text-success: var(--color-success-700);
+  --color-text-secondary: var(--color-primary-700);
+  --color-text-subtler: var(--color-neutral-500);
+  --color-text-brand: var(--color-primary-400);
+  --color-text-error: var(--color-accent-500);
+  --color-icon-inverse: var(--color-neutral-0);
+  --color-icon-primary: var(--color-primary-400);
+  --color-icon-subtler: var(--color-neutral-500);
+  --color-icon-subtle: var(--color-neutral-500);
+  --color-icon-disabled: var(--color-neutral-400);
+  --color-icon-basic: var(--color-neutral-700);
+  --color-icon-gray: var(--color-neutral-200);
+  --color-icon-secondary: var(--color-primary-700);
+  --color-icon-tertiary: var(--color-primary-900);
+  --color-brand-primary: var(--color-primary-400);
+  --color-element-primary: var(--color-primary-400);
+  --color-element-primary-light: var(--color-primary-100);
+  --color-element-primary-lighter: var(--color-primary-25);
+  --color-element-primary-alpha: var(--color-alpha-primary-yellow-20);
+  --color-element-gray-subtler: var(--color-neutral-25);
+  --color-element-gray-subtle: var(--color-neutral-50);
+  --color-element-gray: var(--color-neutral-200);
+  --color-element-gray-lighter: var(--color-neutral-25);
+  --color-element-gray-light: var(--color-neutral-50);
+  --color-element-gray-dark: var(--color-neutral-500);
+  --color-element-alpha-light: var(--color-alpha-white-white-80);
+  --color-element-white: var(--color-neutral-0);
+  --color-element-alpha-dark: var(--color-alpha-black-black-50);
+  --color-border-primary: var(--color-primary-400);
+  --color-border-primary-light: var(--color-primary-100);
+  --color-border-error: var(--color-accent-500);
+  --color-border-gray: var(--color-neutral-300);
+  --color-border-gray-light: var(--color-neutral-200);
+  --color-border-gray-dark: var(--color-neutral-600);
+  --color-border-gray-darker: var(--color-neutral-800);
+  --color-divider-gray: var(--color-neutral-100);
+  --color-divider-gray-dark: var(--color-neutral-600);
+  --color-divider-gray-light: var(--color-neutral-25);
+  --color-divider-inverse: var(--color-neutral-0);
+  --color-action-secondary-pressed: var(--color-neutral-100);
+  --color-action-secondary: var(--color-neutral-0);
+  --color-action-primary-pressed: var(--color-primary-400);
+  --color-action-primary: var(--color-primary-25);
+/* generated-semantic-tokens:end */
+
+/* generated-typography-tokens:start */
+  --font-primary: var(--font-family-primary);
+  --text-12: var(--font-size-12);
+  --text-13: var(--font-size-13);
+  --text-14: var(--font-size-14);
+  --text-15: var(--font-size-15);
+  --text-16: var(--font-size-16);
+  --text-17: var(--font-size-17);
+  --text-18: var(--font-size-18);
+  --leading-18: var(--line-height-18);
+  --text-20: var(--font-size-20);
+  --leading-20: var(--line-height-20);
+  --text-24: var(--font-size-24);
+  --leading-24: var(--line-height-24);
+  --text-28: var(--font-size-28);
+  --leading-28: var(--line-height-28);
+  --text-32: var(--font-size-32);
+  --text-36: var(--font-size-36);
+  --leading-36: var(--line-height-36);
+  --text-40: var(--font-size-40);
+  --text-44: var(--font-size-44);
+/* generated-typography-tokens:end */
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,3 +211,366 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+/* generated-typography-utilities:start */
+@utility text-12 {
+  font-size: var(--text-12);
+  font-family: var(--font-primary);
+}
+@utility text-12-400 {
+  font-size: var(--text-12);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-12-500 {
+  font-size: var(--text-12);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-12-600 {
+  font-size: var(--text-12);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-12-700 {
+  font-size: var(--text-12);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-13 {
+  font-size: var(--text-13);
+  font-family: var(--font-primary);
+}
+@utility text-13-400 {
+  font-size: var(--text-13);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-13-500 {
+  font-size: var(--text-13);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-13-600 {
+  font-size: var(--text-13);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-13-700 {
+  font-size: var(--text-13);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-14 {
+  font-size: var(--text-14);
+  font-family: var(--font-primary);
+}
+@utility text-14-400 {
+  font-size: var(--text-14);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-14-500 {
+  font-size: var(--text-14);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-14-600 {
+  font-size: var(--text-14);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-14-700 {
+  font-size: var(--text-14);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-15 {
+  font-size: var(--text-15);
+  font-family: var(--font-primary);
+}
+@utility text-15-400 {
+  font-size: var(--text-15);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-15-500 {
+  font-size: var(--text-15);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-15-600 {
+  font-size: var(--text-15);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-15-700 {
+  font-size: var(--text-15);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-16 {
+  font-size: var(--text-16);
+  font-family: var(--font-primary);
+}
+@utility text-16-400 {
+  font-size: var(--text-16);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-16-500 {
+  font-size: var(--text-16);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-16-600 {
+  font-size: var(--text-16);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-16-700 {
+  font-size: var(--text-16);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-17 {
+  font-size: var(--text-17);
+  font-family: var(--font-primary);
+}
+@utility text-17-400 {
+  font-size: var(--text-17);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-17-500 {
+  font-size: var(--text-17);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-17-600 {
+  font-size: var(--text-17);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-17-700 {
+  font-size: var(--text-17);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-18 {
+  font-size: var(--text-18);
+  line-height: var(--leading-18);
+  font-family: var(--font-primary);
+}
+@utility text-18-400 {
+  font-size: var(--text-18);
+  line-height: var(--leading-18);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-18-500 {
+  font-size: var(--text-18);
+  line-height: var(--leading-18);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-18-600 {
+  font-size: var(--text-18);
+  line-height: var(--leading-18);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-18-700 {
+  font-size: var(--text-18);
+  line-height: var(--leading-18);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-20 {
+  font-size: var(--text-20);
+  line-height: var(--leading-20);
+  font-family: var(--font-primary);
+}
+@utility text-20-400 {
+  font-size: var(--text-20);
+  line-height: var(--leading-20);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-20-500 {
+  font-size: var(--text-20);
+  line-height: var(--leading-20);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-20-600 {
+  font-size: var(--text-20);
+  line-height: var(--leading-20);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-20-700 {
+  font-size: var(--text-20);
+  line-height: var(--leading-20);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-24 {
+  font-size: var(--text-24);
+  line-height: var(--leading-24);
+  font-family: var(--font-primary);
+}
+@utility text-24-400 {
+  font-size: var(--text-24);
+  line-height: var(--leading-24);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-24-500 {
+  font-size: var(--text-24);
+  line-height: var(--leading-24);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-24-600 {
+  font-size: var(--text-24);
+  line-height: var(--leading-24);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-24-700 {
+  font-size: var(--text-24);
+  line-height: var(--leading-24);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-28 {
+  font-size: var(--text-28);
+  line-height: var(--leading-28);
+  font-family: var(--font-primary);
+}
+@utility text-28-400 {
+  font-size: var(--text-28);
+  line-height: var(--leading-28);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-28-500 {
+  font-size: var(--text-28);
+  line-height: var(--leading-28);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-28-600 {
+  font-size: var(--text-28);
+  line-height: var(--leading-28);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-28-700 {
+  font-size: var(--text-28);
+  line-height: var(--leading-28);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-32 {
+  font-size: var(--text-32);
+  font-family: var(--font-primary);
+}
+@utility text-32-400 {
+  font-size: var(--text-32);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-32-500 {
+  font-size: var(--text-32);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-32-600 {
+  font-size: var(--text-32);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-32-700 {
+  font-size: var(--text-32);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-36 {
+  font-size: var(--text-36);
+  line-height: var(--leading-36);
+  font-family: var(--font-primary);
+}
+@utility text-36-400 {
+  font-size: var(--text-36);
+  line-height: var(--leading-36);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-36-500 {
+  font-size: var(--text-36);
+  line-height: var(--leading-36);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-36-600 {
+  font-size: var(--text-36);
+  line-height: var(--leading-36);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-36-700 {
+  font-size: var(--text-36);
+  line-height: var(--leading-36);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-40 {
+  font-size: var(--text-40);
+  font-family: var(--font-primary);
+}
+@utility text-40-400 {
+  font-size: var(--text-40);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-40-500 {
+  font-size: var(--text-40);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-40-600 {
+  font-size: var(--text-40);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-40-700 {
+  font-size: var(--text-40);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+@utility text-44 {
+  font-size: var(--text-44);
+  font-family: var(--font-primary);
+}
+@utility text-44-400 {
+  font-size: var(--text-44);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-400);
+}
+@utility text-44-500 {
+  font-size: var(--text-44);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-500);
+}
+@utility text-44-600 {
+  font-size: var(--text-44);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-600);
+}
+@utility text-44-700 {
+  font-size: var(--text-44);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-700);
+}
+/* generated-typography-utilities:end */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 49c16d87..5a18b94d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,17 @@
 import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
+import localFont from 'next/font/local';
 import './globals.css';
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-});
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
+const pretendard = localFont({
+  src: '../../public/fonts/PretendardVariable.woff2',
+  display: 'swap',
+  weight: '100 900',
+  variable: '--font-pretendard',
 });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: '치즈',
+  description: '치즈',
 };
 
 export default function RootLayout({
@@ -23,12 +20,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en'>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+    <html lang='ko'>
+      <body className={`${pretendard.variable} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d9872498..df9a42b4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,103 +1,7 @@
-import Image from 'next/image';
-
 export default function Home() {
   return (
-    <div className='font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20'>
-      <main className='flex flex-col gap-[32px] row-start-2 items-center sm:items-start'>
-        <Image
-          className='dark:invert'
-          src='/next.svg'
-          alt='Next.js logo'
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className='font-mono list-inside list-decimal text-sm/6 text-center sm:text-left'>
-          <li className='mb-2 tracking-[-.01em]'>
-            Get started by editing{' '}
-            <code className='bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded'>
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className='tracking-[-.01em]'>
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className='flex gap-4 items-center flex-col sm:flex-row'>
-          <a
-            className='rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto'
-            href='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Image
-              className='dark:invert'
-              src='/vercel.svg'
-              alt='Vercel logomark'
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className='rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]'
-            href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className='row-start-3 flex gap-[24px] flex-wrap items-center justify-center'>
-        <a
-          className='flex items-center gap-2 hover:underline hover:underline-offset-4'
-          href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Image
-            aria-hidden
-            src='/file.svg'
-            alt='File icon'
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className='flex items-center gap-2 hover:underline hover:underline-offset-4'
-          href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Image
-            aria-hidden
-            src='/window.svg'
-            alt='Window icon'
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className='flex items-center gap-2 hover:underline hover:underline-offset-4'
-          href='https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Image
-            aria-hidden
-            src='/globe.svg'
-            alt='Globe icon'
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+    <div className='w-[316px] h-9 bg-button-primary-fill text-17-600'>
+      안녕하세요
     </div>
   );
 }
diff --git a/src/app/token.json b/src/app/token.json
new file mode 100644
index 00000000..088544a9
--- /dev/null
+++ b/src/app/token.json
@@ -0,0 +1,1880 @@
+{
+  "global": {
+    "primary": {
+      "25": {
+        "value": "#fffbeb",
+        "type": "color"
+      },
+      "50": {
+        "value": "#fff7d6",
+        "type": "color"
+      },
+      "100": {
+        "value": "#fff2c2",
+        "type": "color"
+      },
+      "200": {
+        "value": "#ffe894",
+        "type": "color"
+      },
+      "300": {
+        "value": "#ffdc5c",
+        "type": "color"
+      },
+      "400": {
+        "value": "#ffcd14",
+        "type": "color"
+      },
+      "500": {
+        "value": "#ffb700",
+        "type": "color"
+      },
+      "600": {
+        "value": "#d18800",
+        "type": "color"
+      },
+      "700": {
+        "value": "#996300",
+        "type": "color"
+      },
+      "800": {
+        "value": "#664200",
+        "type": "color"
+      },
+      "900": {
+        "value": "#332100",
+        "type": "color"
+      }
+    },
+    "gray": {
+      "25": {
+        "value": "#f8f8f7",
+        "type": "color"
+      },
+      "50": {
+        "value": "#f3f3f1",
+        "type": "color"
+      },
+      "100": {
+        "value": "#e7e6e4",
+        "type": "color"
+      },
+      "200": {
+        "value": "#cfcec9",
+        "type": "color"
+      },
+      "300": {
+        "value": "#b7b5ae",
+        "type": "color"
+      },
+      "400": {
+        "value": "#9f9d93",
+        "type": "color"
+      },
+      "500": {
+        "value": "#827f73",
+        "type": "color"
+      },
+      "600": {
+        "value": "#605d55",
+        "type": "color"
+      },
+      "700": {
+        "value": "#494741",
+        "type": "color"
+      },
+      "800": {
+        "value": "#31302b",
+        "type": "color"
+      },
+      "900": {
+        "value": "#1b1a18",
+        "type": "color"
+      }
+    },
+    "dropshadow-25-5": {
+      "value": {
+        "color": "#00000014",
+        "type": "dropShadow",
+        "x": 0,
+        "y": 0,
+        "blur": 25,
+        "spread": 5
+      },
+      "type": "boxShadow"
+    },
+    "dropshadow-10-5": {
+      "value": {
+        "color": "#0000000d",
+        "type": "dropShadow",
+        "x": 0,
+        "y": 0,
+        "blur": 10,
+        "spread": 5
+      },
+      "type": "boxShadow"
+    },
+    "fontWeights": {
+      "pretendard-0": {
+        "value": "Bold",
+        "type": "fontWeights"
+      },
+      "pretendard-1": {
+        "value": "SemiBold",
+        "type": "fontWeights"
+      },
+      "pretendard-2": {
+        "value": "Medium",
+        "type": "fontWeights"
+      },
+      "pretendard-3": {
+        "value": "Regular",
+        "type": "fontWeights"
+      }
+    },
+    "fontSize": {
+      "0": {
+        "value": 12,
+        "type": "fontSizes"
+      },
+      "1": {
+        "value": 13,
+        "type": "fontSizes"
+      },
+      "2": {
+        "value": 14,
+        "type": "fontSizes"
+      },
+      "3": {
+        "value": 15,
+        "type": "fontSizes"
+      },
+      "4": {
+        "value": 16,
+        "type": "fontSizes"
+      },
+      "5": {
+        "value": 17,
+        "type": "fontSizes"
+      },
+      "6": {
+        "value": 18,
+        "type": "fontSizes"
+      },
+      "7": {
+        "value": 20,
+        "type": "fontSizes"
+      },
+      "8": {
+        "value": 24,
+        "type": "fontSizes"
+      },
+      "9": {
+        "value": 28,
+        "type": "fontSizes"
+      },
+      "10": {
+        "value": 32,
+        "type": "fontSizes"
+      },
+      "11": {
+        "value": 36,
+        "type": "fontSizes"
+      },
+      "12": {
+        "value": 40,
+        "type": "fontSizes"
+      },
+      "13": {
+        "value": 44,
+        "type": "fontSizes"
+      }
+    },
+    "letterSpacing": {
+      "0": {
+        "value": 0,
+        "type": "letterSpacing"
+      }
+    },
+    "paragraphSpacing": {
+      "0": {
+        "value": 0,
+        "type": "paragraphSpacing"
+      }
+    },
+    "title": {
+      "lg": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.58}",
+            "fontSize": "{fontSize.13}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.58}",
+            "fontSize": "{fontSize.13}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "md": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.52}",
+            "fontSize": "{fontSize.12}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.52}",
+            "fontSize": "{fontSize.12}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "sm": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.50}",
+            "fontSize": "{fontSize.11}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.50}",
+            "fontSize": "{fontSize.11}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      }
+    },
+    "heading": {
+      "2xl": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.48}",
+            "fontSize": "{fontSize.10}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.48}",
+            "fontSize": "{fontSize.10}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.48}",
+            "fontSize": "{fontSize.10}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.48}",
+            "fontSize": "{fontSize.10}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "1xl": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.42}",
+            "fontSize": "{fontSize.9}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.42}",
+            "fontSize": "{fontSize.9}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.42}",
+            "fontSize": "{fontSize.9}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.42}",
+            "fontSize": "{fontSize.9}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "lg": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.36}",
+            "fontSize": "{fontSize.8}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.36}",
+            "fontSize": "{fontSize.8}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.36}",
+            "fontSize": "{fontSize.8}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.36}",
+            "fontSize": "{fontSize.8}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "md": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.30}",
+            "fontSize": "{fontSize.7}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.30}",
+            "fontSize": "{fontSize.7}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.30}",
+            "fontSize": "{fontSize.7}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.30}",
+            "fontSize": "{fontSize.7}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "sm": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.28}",
+            "fontSize": "{fontSize.6}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.28}",
+            "fontSize": "{fontSize.6}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.28}",
+            "fontSize": "{fontSize.6}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.28}",
+            "fontSize": "{fontSize.6}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      }
+    },
+    "body": {
+      "1xl": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.26}",
+            "fontSize": "{fontSize.5}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.26}",
+            "fontSize": "{fontSize.5}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.26}",
+            "fontSize": "{fontSize.5}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.26}",
+            "fontSize": "{fontSize.5}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "lg": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.4}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.4}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.4}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.4}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "md": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.3}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.3}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.3}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.24}",
+            "fontSize": "{fontSize.3}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "sm": {
+        "bold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-0}",
+            "lineHeight": "{font.line height.20}",
+            "fontSize": "{fontSize.2}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "semibold": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-1}",
+            "lineHeight": "{font.line height.20}",
+            "fontSize": "{fontSize.2}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.20}",
+            "fontSize": "{fontSize.2}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.20}",
+            "fontSize": "{fontSize.2}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      }
+    },
+    "caption": {
+      "md": {
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.20}",
+            "fontSize": "{fontSize.1}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regular": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.20}",
+            "fontSize": "{fontSize.1}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      },
+      "sm": {
+        "medium": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-2}",
+            "lineHeight": "{font.line height.18}",
+            "fontSize": "{fontSize.0}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        },
+        "regualr": {
+          "value": {
+            "fontFamily": "{font.family.pretendard}",
+            "fontWeight": "{fontWeights.pretendard-3}",
+            "lineHeight": "{font.line height.18}",
+            "fontSize": "{fontSize.0}",
+            "letterSpacing": "{letterSpacing.0}",
+            "paragraphSpacing": "{paragraphSpacing.0}",
+            "paragraphIndent": "{paragraphIndent.0}",
+            "textCase": "{textCase.none}",
+            "textDecoration": "{textDecoration.none}"
+          },
+          "type": "typography"
+        }
+      }
+    },
+    "textCase": {
+      "none": {
+        "value": "none",
+        "type": "textCase"
+      }
+    },
+    "textDecoration": {
+      "none": {
+        "value": "none",
+        "type": "textDecoration"
+      }
+    },
+    "paragraphIndent": {
+      "0": {
+        "value": "0px",
+        "type": "dimension"
+      }
+    }
+  },
+  "primitive/Mode 1": {
+    "color": {
+      "primary": {
+        "25": {
+          "value": "#fffbeb",
+          "type": "color"
+        },
+        "50": {
+          "value": "#fff7d6",
+          "type": "color"
+        },
+        "100": {
+          "value": "#fff2c2",
+          "type": "color"
+        },
+        "200": {
+          "value": "#ffe894",
+          "type": "color"
+        },
+        "300": {
+          "value": "#ffdc5c",
+          "type": "color"
+        },
+        "400": {
+          "value": "#ffcd14",
+          "type": "color"
+        },
+        "500": {
+          "value": "#ffb700",
+          "type": "color"
+        },
+        "600": {
+          "value": "#e09900",
+          "type": "color"
+        },
+        "700": {
+          "value": "#996300",
+          "type": "color"
+        },
+        "800": {
+          "value": "#664200",
+          "type": "color"
+        },
+        "900": {
+          "value": "#332100",
+          "type": "color"
+        }
+      },
+      "accent": {
+        "25": {
+          "value": "#fff5f6",
+          "type": "color"
+        },
+        "50": {
+          "value": "#ffe5ea",
+          "type": "color"
+        },
+        "100": {
+          "value": "#ffccd4",
+          "type": "color"
+        },
+        "200": {
+          "value": "#ff99aa",
+          "type": "color"
+        },
+        "300": {
+          "value": "#ff6680",
+          "type": "color"
+        },
+        "400": {
+          "value": "#ff3355",
+          "type": "color"
+        },
+        "500": {
+          "value": "#ff002b",
+          "type": "color"
+        },
+        "600": {
+          "value": "#cc0022",
+          "type": "color"
+        },
+        "700": {
+          "value": "#99001a",
+          "type": "color"
+        },
+        "800": {
+          "value": "#660011",
+          "type": "color"
+        },
+        "900": {
+          "value": "#330009",
+          "type": "color"
+        }
+      },
+      "success": {
+        "25": {
+          "value": "#ebffeb",
+          "type": "color"
+        },
+        "50": {
+          "value": "#c7ffc7",
+          "type": "color"
+        },
+        "100": {
+          "value": "#a8ffa8",
+          "type": "color"
+        },
+        "200": {
+          "value": "#7aff7a",
+          "type": "color"
+        },
+        "300": {
+          "value": "#1aff1a",
+          "type": "color"
+        },
+        "400": {
+          "value": "#00e500",
+          "type": "color"
+        },
+        "500": {
+          "value": "#00c400",
+          "type": "color"
+        },
+        "600": {
+          "value": "#009900",
+          "type": "color"
+        },
+        "700": {
+          "value": "#006600",
+          "type": "color"
+        },
+        "800": {
+          "value": "#004d00",
+          "type": "color"
+        },
+        "900": {
+          "value": "#002900",
+          "type": "color"
+        }
+      },
+      "neutral": {
+        "0": {
+          "value": "#ffffff",
+          "type": "color"
+        },
+        "25": {
+          "value": "#f7f7f8",
+          "type": "color"
+        },
+        "50": {
+          "value": "#f1f2f3",
+          "type": "color"
+        },
+        "100": {
+          "value": "#e5e5e7",
+          "type": "color"
+        },
+        "200": {
+          "value": "#c9cacf",
+          "type": "color"
+        },
+        "300": {
+          "value": "#afb0b7",
+          "type": "color"
+        },
+        "400": {
+          "value": "#94969e",
+          "type": "color"
+        },
+        "500": {
+          "value": "#747681",
+          "type": "color"
+        },
+        "600": {
+          "value": "#56575f",
+          "type": "color"
+        },
+        "700": {
+          "value": "#424349",
+          "type": "color"
+        },
+        "800": {
+          "value": "#2c2c30",
+          "type": "color"
+        },
+        "900": {
+          "value": "#18191b",
+          "type": "color"
+        }
+      },
+      "alpha": {
+        "white": {
+          "white 100%": {
+            "value": "#ffffff",
+            "type": "color"
+          },
+          "white 80%": {
+            "value": "#ffffffcc",
+            "type": "color"
+          },
+          "white 50%": {
+            "value": "#ffffff80",
+            "type": "color"
+          },
+          "white 20%": {
+            "value": "#ffffff33",
+            "type": "color"
+          },
+          "white 0%": {
+            "value": "#ffffff00",
+            "type": "color"
+          }
+        },
+        "black": {
+          "black 100%": {
+            "value": "#18191b",
+            "type": "color"
+          },
+          "black 75%": {
+            "value": "#18191bcc",
+            "type": "color"
+          },
+          "black 50%": {
+            "value": "#18191b80",
+            "type": "color"
+          },
+          "black 20%": {
+            "value": "#18191b33",
+            "type": "color"
+          },
+          "black 0%": {
+            "value": "#18191b00",
+            "type": "color"
+          },
+          "black 10%": {
+            "value": "#18191b1a",
+            "type": "color"
+          }
+        },
+        "primary": {
+          "yellow 100%": {
+            "value": "#ffcd14",
+            "type": "color"
+          },
+          "yellow 80%": {
+            "value": "#ffcd14cc",
+            "type": "color"
+          },
+          "yellow 50%": {
+            "value": "#ffcd1480",
+            "type": "color"
+          },
+          "yellow 20%": {
+            "value": "#ffcd1433",
+            "type": "color"
+          },
+          "yellow 0%": {
+            "value": "#ffcd1400",
+            "type": "color"
+          }
+        }
+      }
+    },
+    "font": {
+      "family": {
+        "pretendard": {
+          "value": "pretendard",
+          "type": "text"
+        }
+      },
+      "size": {
+        "12": {
+          "value": 12,
+          "type": "number"
+        },
+        "13": {
+          "value": 13,
+          "type": "number"
+        },
+        "14": {
+          "value": 14,
+          "type": "number"
+        },
+        "15": {
+          "value": 15,
+          "type": "number"
+        },
+        "16": {
+          "value": 16,
+          "type": "number"
+        },
+        "17": {
+          "value": 17,
+          "type": "number"
+        },
+        "18": {
+          "value": 18,
+          "type": "number"
+        },
+        "20": {
+          "value": 20,
+          "type": "number"
+        },
+        "24": {
+          "value": 24,
+          "type": "number"
+        },
+        "28": {
+          "value": 28,
+          "type": "number"
+        },
+        "32": {
+          "value": 32,
+          "type": "number"
+        },
+        "36": {
+          "value": 36,
+          "type": "number"
+        },
+        "40": {
+          "value": 40,
+          "type": "number"
+        },
+        "44": {
+          "value": 44,
+          "type": "number"
+        }
+      },
+      "line height": {
+        "18": {
+          "value": 18,
+          "type": "number"
+        },
+        "20": {
+          "value": 20,
+          "type": "number"
+        },
+        "24": {
+          "value": 24,
+          "type": "number"
+        },
+        "26": {
+          "value": 26,
+          "type": "number"
+        },
+        "28": {
+          "value": 28,
+          "type": "number"
+        },
+        "30": {
+          "value": 30,
+          "type": "number"
+        },
+        "36": {
+          "value": 36,
+          "type": "number"
+        },
+        "42": {
+          "value": 42,
+          "type": "number"
+        },
+        "48": {
+          "value": 48,
+          "type": "number"
+        },
+        "50": {
+          "value": 50,
+          "type": "number"
+        },
+        "52": {
+          "value": 52,
+          "type": "number"
+        },
+        "58": {
+          "value": 58,
+          "type": "number"
+        }
+      },
+      "weight": {
+        "400": {
+          "value": 400,
+          "type": "number"
+        },
+        "500": {
+          "value": 500,
+          "type": "number"
+        },
+        "600": {
+          "value": 600,
+          "type": "number"
+        },
+        "700": {
+          "value": 700,
+          "type": "number"
+        }
+      }
+    },
+    "number": {
+      "0": {
+        "value": 0,
+        "type": "number"
+      },
+      "1": {
+        "value": 1,
+        "type": "number"
+      },
+      "2": {
+        "value": 2,
+        "type": "number"
+      },
+      "3": {
+        "value": 4,
+        "type": "number"
+      },
+      "4": {
+        "value": 6,
+        "type": "number"
+      },
+      "5": {
+        "value": 8,
+        "type": "number"
+      },
+      "6": {
+        "value": 10,
+        "type": "number"
+      },
+      "7": {
+        "value": 12,
+        "type": "number"
+      },
+      "8": {
+        "value": 16,
+        "type": "number"
+      },
+      "9": {
+        "value": 20,
+        "type": "number"
+      },
+      "10": {
+        "value": 24,
+        "type": "number"
+      },
+      "11": {
+        "value": 28,
+        "type": "number"
+      },
+      "12": {
+        "value": 32,
+        "type": "number"
+      },
+      "13": {
+        "value": 36,
+        "type": "number"
+      },
+      "14": {
+        "value": 40,
+        "type": "number"
+      },
+      "15": {
+        "value": 44,
+        "type": "number"
+      },
+      "16": {
+        "value": 48,
+        "type": "number"
+      },
+      "17": {
+        "value": 56,
+        "type": "number"
+      },
+      "18": {
+        "value": 64,
+        "type": "number"
+      },
+      "19": {
+        "value": 72,
+        "type": "number"
+      },
+      "20": {
+        "value": 80,
+        "type": "number"
+      },
+      "21": {
+        "value": 96,
+        "type": "number"
+      },
+      "max": {
+        "value": 1000,
+        "type": "number"
+      }
+    }
+  },
+  "semantic/Mode 1": {
+    "color": {
+      "button": {
+        "primary-fill": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        },
+        "primary-fill-pressed": {
+          "value": "{color.primary.500}",
+          "type": "color"
+        },
+        "disabled-fill": {
+          "value": "{color.neutral.100}",
+          "type": "color"
+        },
+        "secondary-fill-pressed": {
+          "value": "{color.primary.100}",
+          "type": "color"
+        },
+        "secondary-fill": {
+          "value": "{color.primary.25}",
+          "type": "color"
+        },
+        "secodnary-border": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        },
+        "disabled-border": {
+          "value": "{color.neutral.200}",
+          "type": "color"
+        },
+        "tertiary-border": {
+          "value": "{color.neutral.600}",
+          "type": "color"
+        },
+        "tertiary-fill-pressed": {
+          "value": "{color.neutral.50}",
+          "type": "color"
+        },
+        "tertiary-fill": {
+          "value": "{color.neutral.25}",
+          "type": "color"
+        }
+      },
+      "background": {
+        "white": {
+          "value": "{color.neutral.0}",
+          "type": "color"
+        },
+        "dim": {
+          "value": "{color.alpha.black.black 75%}",
+          "type": "color"
+        },
+        "dim-dark": {
+          "value": "{color.alpha.black.black 20%}",
+          "type": "color"
+        },
+        "dim-darker": {
+          "value": "{color.alpha.black.black 50%}",
+          "type": "color"
+        }
+      },
+      "surface": {
+        "surface-default": {
+          "value": "{color.neutral.50}",
+          "type": "color"
+        },
+        "surface-muted": {
+          "value": "{color.neutral.100}",
+          "type": "color"
+        },
+        "surface-elevated": {
+          "value": "{color.neutral.25}",
+          "type": "color"
+        },
+        "white": {
+          "value": "{color.neutral.0}",
+          "type": "color"
+        },
+        "info": {
+          "value": "{color.alpha.black.black 75%}",
+          "type": "color"
+        },
+        "inverse": {
+          "value": "{color.neutral.900}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "basic": {
+          "value": "{color.neutral.900}",
+          "type": "color"
+        },
+        "subtle": {
+          "value": "{color.neutral.700}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{color.neutral.400}",
+          "type": "color"
+        },
+        "basic-inverse": {
+          "value": "{color.neutral.0}",
+          "type": "color"
+        },
+        "subtle-inverse": {
+          "value": "{color.neutral.300}",
+          "type": "color"
+        },
+        "primary": {
+          "value": "{color.primary.900}",
+          "type": "color"
+        },
+        "accent": {
+          "value": "{color.accent.700}",
+          "type": "color"
+        },
+        "success": {
+          "value": "{color.success.700}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{color.primary.700}",
+          "type": "color"
+        },
+        "subtler": {
+          "value": "{color.neutral.500}",
+          "type": "color"
+        },
+        "brand": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        },
+        "error": {
+          "value": "{color.accent.500}",
+          "type": "color"
+        }
+      },
+      "icon": {
+        "inverse": {
+          "value": "{color.neutral.0}",
+          "type": "color"
+        },
+        "primary": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        },
+        "subtler": {
+          "value": "{color.neutral.500}",
+          "type": "color"
+        },
+        "subtle": {
+          "value": "{color.neutral.500}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{color.neutral.400}",
+          "type": "color"
+        },
+        "basic": {
+          "value": "{color.neutral.700}",
+          "type": "color"
+        },
+        "gray": {
+          "value": "{color.neutral.200}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{color.primary.700}",
+          "type": "color"
+        },
+        "tertiary": {
+          "value": "{color.primary.900}",
+          "type": "color"
+        }
+      },
+      "brand": {
+        "primary": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        }
+      },
+      "element": {
+        "primary": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        },
+        "primary-light": {
+          "value": "{color.primary.100}",
+          "type": "color"
+        },
+        "primary-lighter": {
+          "value": "{color.primary.25}",
+          "type": "color"
+        },
+        "primary-alpha": {
+          "value": "{color.alpha.primary.yellow 20%}",
+          "type": "color"
+        },
+        "gray-subtler": {
+          "value": "{color.neutral.25}",
+          "type": "color"
+        },
+        "gray-subtle": {
+          "value": "{color.neutral.50}",
+          "type": "color"
+        },
+        "gray": {
+          "value": "{color.neutral.200}",
+          "type": "color"
+        },
+        "gray-lighter": {
+          "value": "{color.neutral.25}",
+          "type": "color"
+        },
+        "gray-light": {
+          "value": "{color.neutral.50}",
+          "type": "color"
+        },
+        "gray-dark": {
+          "value": "{color.neutral.500}",
+          "type": "color"
+        },
+        "alpha-light": {
+          "value": "{color.alpha.white.white 80%}",
+          "type": "color"
+        },
+        "white": {
+          "value": "{color.neutral.0}",
+          "type": "color"
+        },
+        "alpha-dark": {
+          "value": "{color.alpha.black.black 50%}",
+          "type": "color"
+        }
+      },
+      "border": {
+        "primary": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        },
+        "primary-light": {
+          "value": "{color.primary.100}",
+          "type": "color"
+        },
+        "error": {
+          "value": "{color.accent.500}",
+          "type": "color"
+        },
+        "gray": {
+          "value": "{color.neutral.300}",
+          "type": "color"
+        },
+        "gray-light": {
+          "value": "{color.neutral.200}",
+          "type": "color"
+        },
+        "gray-dark": {
+          "value": "{color.neutral.600}",
+          "type": "color"
+        },
+        "gray-darker": {
+          "value": "{color.neutral.800}",
+          "type": "color"
+        }
+      },
+      "divider": {
+        "gray": {
+          "value": "{color.neutral.100}",
+          "type": "color"
+        },
+        "gray-dark": {
+          "value": "{color.neutral.600}",
+          "type": "color"
+        },
+        "gray-light": {
+          "value": "{color.neutral.25}",
+          "type": "color"
+        },
+        "inverse": {
+          "value": "{color.neutral.0}",
+          "type": "color"
+        }
+      },
+      "action": {
+        "secondary-pressed": {
+          "value": "{color.neutral.100}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{color.neutral.0}",
+          "type": "color"
+        },
+        "primary-pressed": {
+          "value": "{color.primary.400}",
+          "type": "color"
+        },
+        "primary": {
+          "value": "{color.primary.25}",
+          "type": "color"
+        }
+      }
+    },
+    "size-height": {
+      "1": {
+        "value": "{number.5}",
+        "type": "number"
+      },
+      "2": {
+        "value": "{number.8}",
+        "type": "number"
+      },
+      "3": {
+        "value": "{number.9}",
+        "type": "number"
+      },
+      "4": {
+        "value": "{number.10}",
+        "type": "number"
+      },
+      "5": {
+        "value": "{number.12}",
+        "type": "number"
+      },
+      "6": {
+        "value": "{number.14}",
+        "type": "number"
+      },
+      "7": {
+        "value": "{number.16}",
+        "type": "number"
+      },
+      "8": {
+        "value": "{number.17}",
+        "type": "number"
+      },
+      "9": {
+        "value": "{number.18}",
+        "type": "number"
+      },
+      "10": {
+        "value": "{number.19}",
+        "type": "number"
+      },
+      "11": {
+        "value": "{number.20}",
+        "type": "number"
+      }
+    },
+    "gap": {
+      "g1": {
+        "value": "{number.2}",
+        "type": "number"
+      },
+      "g2": {
+        "value": "{number.3}",
+        "type": "number"
+      },
+      "g3": {
+        "value": "{number.5}",
+        "type": "number"
+      },
+      "g4": {
+        "value": "{number.7}",
+        "type": "number"
+      },
+      "g5": {
+        "value": "{number.8}",
+        "type": "number"
+      },
+      "g6": {
+        "value": "{number.9}",
+        "type": "number"
+      },
+      "g7": {
+        "value": "{number.10}",
+        "type": "number"
+      },
+      "g8": {
+        "value": "{number.12}",
+        "type": "number"
+      },
+      "g9": {
+        "value": "{number.14}",
+        "type": "number"
+      },
+      "g10": {
+        "value": "{number.16}",
+        "type": "number"
+      },
+      "g11": {
+        "value": "{number.18}",
+        "type": "number"
+      },
+      "g12": {
+        "value": "{number.20}",
+        "type": "number"
+      }
+    },
+    "padding": {
+      "p1": {
+        "value": "{number.2}",
+        "type": "number"
+      },
+      "p2": {
+        "value": "{number.3}",
+        "type": "number"
+      },
+      "p3": {
+        "value": "{number.5}",
+        "type": "number"
+      },
+      "p4": {
+        "value": "{number.6}",
+        "type": "number"
+      },
+      "p5": {
+        "value": "{number.7}",
+        "type": "number"
+      },
+      "p6": {
+        "value": "{number.8}",
+        "type": "number"
+      },
+      "p7": {
+        "value": "{number.9}",
+        "type": "number"
+      },
+      "p8": {
+        "value": "{number.10}",
+        "type": "number"
+      },
+      "p9": {
+        "value": "{number.12}",
+        "type": "number"
+      },
+      "p10": {
+        "value": "{number.14}",
+        "type": "number"
+      }
+    },
+    "radius": {
+      "xsmall": {
+        "value": "{number.2}",
+        "type": "number"
+      },
+      "small": {
+        "value": "{number.3}",
+        "type": "number"
+      },
+      "medium": {
+        "value": "{number.4}",
+        "type": "number"
+      },
+      "large": {
+        "value": "{number.5}",
+        "type": "number"
+      },
+      "xlarge": {
+        "value": "{number.6}",
+        "type": "number"
+      },
+      "2xlarge": {
+        "value": "{number.7}",
+        "type": "number"
+      },
+      "max": {
+        "value": "{number.max}",
+        "type": "number"
+      },
+      "3xlarge": {
+        "value": "{number.9}",
+        "type": "number"
+      }
+    }
+  },
+  "$themes": [],
+  "$metadata": {
+    "tokenSetOrder": [
+      "global",
+      "primitive/Mode 1",
+      "semantic/Mode 1"
+    ]
+  }
+}
\ No newline at end of file