Team-Timo · kimminna · Jun 29, 2026 · Jun 28, 2026 · Jun 28, 2026 · Jun 28, 2026
diff --git a/apps/timo-web/app/fonts/PretendardVariable.woff2 b/apps/timo-web/app/fonts/PretendardVariable.woff2
diff --git a/apps/timo-web/app/globals.css b/apps/timo-web/app/globals.css
@@ -1,2 +1,3 @@
 @import "tailwindcss";
 @import "@repo/tailwind-config/theme.css";
+@import "@repo/timo-design-system/styles";
diff --git a/apps/timo-web/app/layout.tsx b/apps/timo-web/app/layout.tsx
@@ -1,8 +1,17 @@
 import "./globals.css";
+import localFont from "next/font/local";
+
 import type { Metadata } from "next";
 
 import { QueryProvider } from "@/providers/QueryProvider";
 
+const pretendard = localFont({
+  src: "./fonts/PretendardVariable.woff2",
+  variable: "--font-family-pretendard",
+  weight: "45 920",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "Timo",
   description: "Timo web",
@@ -14,7 +23,7 @@ interface RootLayoutProps {
 
 export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
   return (
-    <html lang="en">
+    <html lang="en" className={pretendard.variable}>
       <body>
         <QueryProvider>{children}</QueryProvider>
       </body>

@@ -1,5 +1,3 @@
-@theme {
-  --color-primary: #111111;
-  --color-background: #ffffff;
-  --color-foreground: #171717;
-}
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/radius.css";
@@ -0,0 +1,21 @@
+@theme {
+    --color-timo-blue-50: #F1F6FE;
+    --color-timo-blue-75: #C6D8FC;
+    --color-timo-blue-100: #AEC8FB;
+    --color-timo-blue-200: #8CB0F9;
+    --color-timo-blue-300: #74A0F8;
+
+    --color-timo-gray-300: #F5F5F5;
+    --color-timo-gray-500: #E6E8E8;
+    --color-timo-gray-600: #D8D8D8;
+    --color-timo-gray-700: #9F9F9F;
+    --color-timo-gray-800: #757575;
+    --color-timo-gray-900: #3F3F3F;
+
+    --color-timo-yellow-300: #F2FC9F;
+
+    --color-timo-black: #121212;
+    --color-timo-red: #FF6650;
+    --color-timo-orange: #FFB157;
+    --color-timo-green: #9FDDA9;
+}
@@ -0,0 +1,5 @@
+@theme {
+    --radius-4: 4px;
+    --radius-8: 8px;
+    --radius-12: 12px;
+}
@@ -0,0 +1,93 @@
+@theme {
+  --font-pretendard: var(--font-family-pretendard), sans-serif;
+
+  /* Headline */
+  --typo-size-headline-b-30: 30px;
+  --typo-line-height-headline-b-30: 1.5;
+  --typo-letter-spacing-headline-b-30: -0.03em;
+  --typo-font-weight-headline-b-30: 700;
+
+  --typo-size-headline-b-24: 24px;
+  --typo-line-height-headline-b-24: 1.5;
+  --typo-letter-spacing-headline-b-24: -0.03em;
+  --typo-font-weight-headline-b-24: 700;
+
+  --typo-size-headline-b-22: 22px;
+  --typo-line-height-headline-b-22: 1.5;
+  --typo-letter-spacing-headline-b-22: -0.03em;
+  --typo-font-weight-headline-b-22: 700;
+
+  --typo-size-headline-b-20: 20px;
+  --typo-line-height-headline-b-20: 1.5;
+  --typo-letter-spacing-headline-b-20: -0.03em;
+  --typo-font-weight-headline-b-20: 700;
+
+  --typo-size-headline-b-18: 18px;
+  --typo-line-height-headline-b-18: 1.5;
+  --typo-letter-spacing-headline-b-18: -0.03em;
+  --typo-font-weight-headline-b-18: 700;
+
+  --typo-size-headline-b-16: 16px;
+  --typo-line-height-headline-b-16: 1.5;
+  --typo-letter-spacing-headline-b-16: -0.03em;
+  --typo-font-weight-headline-b-16: 700;
+
+  --typo-size-headline-m-16: 16px;
+  --typo-line-height-headline-m-16: 1.5;
+  --typo-letter-spacing-headline-m-16: -0.03em;
+  --typo-font-weight-headline-m-16: 500;
+
+  --typo-size-headline-b-14: 14px;
+  --typo-line-height-headline-b-14: 1.5;
+  --typo-letter-spacing-headline-b-14: -0.03em;
+  --typo-font-weight-headline-b-14: 700;
+
+  --typo-size-headline-m-14: 14px;
+  --typo-line-height-headline-m-14: 1.5;
+  --typo-letter-spacing-headline-m-14: -0.03em;
+  --typo-font-weight-headline-m-14: 500;
+
+  --typo-size-headline-r-14: 14px;
+  --typo-line-height-headline-r-14: 1.5;
+  --typo-letter-spacing-headline-r-14: -0.03em;
+  --typo-font-weight-headline-r-14: 400;
+
+  /* Body */
+  --typo-size-body-b-12: 12px;
+  --typo-line-height-body-b-12: 1.5;
+  --typo-letter-spacing-body-b-12: -0.03em;
+  --typo-font-weight-body-b-12: 700;
+
+  --typo-size-body-sb-12: 12px;
+  --typo-line-height-body-sb-12: 1.5;
+  --typo-letter-spacing-body-sb-12: -0.03em;
+  --typo-font-weight-body-sb-12: 600;
+
+  --typo-size-body-m-12: 12px;
+  --typo-line-height-body-m-12: 1.5;
+  --typo-letter-spacing-body-m-12: -0.03em;
+  --typo-font-weight-body-m-12: 500;
+
+  --typo-size-body-r-12: 12px;
+  --typo-line-height-body-r-12: 1.5;
+  --typo-letter-spacing-body-r-12: -0.03em;
+  --typo-font-weight-body-r-12: 400;
+
+  --typo-size-body-sb-11: 11px;
+  --typo-line-height-body-sb-11: 1.5;
+  --typo-letter-spacing-body-sb-11: -0.03em;
+  --typo-font-weight-body-sb-11: 600;
+
+  /* Caption */
+  --typo-size-caption-r-10: 10px;
+  --typo-line-height-caption-r-10: 1.5;
+  --typo-letter-spacing-caption-r-10: -0.03em;
+  --typo-font-weight-caption-r-10: 400;
+}
+
+@utility typo-* {
+  font-size: --value(--typo-size-*);
+  line-height: --value(--typo-line-height-*);
+  letter-spacing: --value(--typo-letter-spacing-*);
+  font-weight: --value(--typo-font-weight-*);
+}
@@ -1,3 +1,4 @@
+import "../src/styles/globals.css";
 import type { Preview } from "@storybook/react-vite";
 
 const preview: Preview = {

@@ -1,4 +1,9 @@
 import { config } from "@repo/eslint-config/react-internal";
 
 /** @type {import("eslint").Linter.Config} */
-export default config;
+export default [
+  {
+    ignores: ["storybook-static/**"],
+  },
+  ...config,
+];
@@ -5,7 +5,8 @@
   "exports": {
     "./ui": "./src/components/index.ts",
     "./icons": "./src/icons/index.ts",
-    "./utils": "./src/lib/index.ts"
+    "./utils": "./src/lib/index.ts",
+    "./styles": "./src/styles/components.css"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
@@ -17,6 +18,7 @@
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
+    "@repo/tailwind-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@storybook/addon-a11y": "^8.6.14",
     "@storybook/addon-docs": "8.6.14",
@@ -25,12 +27,14 @@
     "@storybook/addon-links": "^8.6.14",
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "^8.6.14",
+    "@tailwindcss/postcss": "^4.3.1",
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "chromatic": "^17.7.2",
     "eslint": "^9.39.1",
     "storybook": "^8.6.14",
+    "tailwindcss": "^4.3.1",
     "typescript": "5.9.2"
   },
   "dependencies": {

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
@@ -1,6 +1,5 @@
-
 import { Color } from "./Color";
-import { COLOR_TOKENS } from "../../tokens/colort-token";
+import { COLOR_TOKENS } from "../../tokens/color-token";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -17,10 +16,10 @@ type Story = StoryObj<typeof meta>;
 export const All: Story = {
   name: "All Colors",
   render: () => (
-    <div style={{ fontFamily: "sans-serif", maxWidth: "600px" }}>
-      <p style={{ fontSize: "12px", color: "#999", marginBottom: "16px" }}>
-        ⚠️ 피그마 MCP 연동 후 실제 값으로 업데이트 예정입니다.
-      </p>
+    <div
+      style={{ fontFamily: "var(--font-family-pretendard)", maxWidth: "600px" }}
+    >
+      <p style={{ fontSize: "12px", color: "#999", marginBottom: "16px" }} />
       {COLOR_TOKENS.map((token) => (
         <Color key={token.name} {...token} />
       ))}

@@ -1,6 +1,6 @@
-import { ColorToken } from "../../tokens/colort-token";
+import { ColorToken } from "../../tokens/color-token";
 
-export const Color = ({ name, cssVar, value, usage }: ColorToken) => {
+export const Color = ({ name, cssVar, value }: ColorToken) => {
   return (
     <div
       style={{
@@ -33,9 +33,6 @@ export const Color = ({ name, cssVar, value, usage }: ColorToken) => {
         >
           {value}
         </div>
-        <div style={{ fontSize: "12px", color: "#888", marginTop: "2px" }}>
-          {usage}
-        </div>
       </div>
     </div>
   );

@@ -1 +1,2 @@
-export {};
+export { Color } from "./color/Color";
+export { Typography } from "./typography/Typography";
@@ -1,4 +1,3 @@
-
 import { Typography } from "./Typography";
 import { TYPOGRAPHY_TOKENS } from "../../tokens/typography-token";
 
@@ -16,10 +15,10 @@ type Story = StoryObj<typeof meta>;
 
 export const Scale: Story = {
   render: () => (
-    <div style={{ fontFamily: "sans-serif", maxWidth: "700px" }}>
-      <p style={{ fontSize: "12px", color: "#999", marginBottom: "24px" }}>
-        ⚠️ 피그마 MCP 연동 후 실제 값으로 업데이트 예정입니다.
-      </p>
+    <div
+      style={{ fontFamily: "var(--font-family-pretendard)", maxWidth: "700px" }}
+    >
+      <p style={{ fontSize: "12px", color: "#999", marginBottom: "24px" }} />
       {TYPOGRAPHY_TOKENS.map((row) => (
         <Typography key={row.token} {...row} />
       ))}

@@ -1,6 +1,12 @@
 import { TypographyToken } from "../../tokens/typography-token";
 
-export const Typography = ({ token, size, weight, usage }: TypographyToken) => {
+export const Typography = ({
+  token,
+  size,
+  weight,
+  lineHeight,
+  letterSpacing,
+}: TypographyToken) => {
   return (
     <div
       style={{
@@ -11,14 +17,7 @@ export const Typography = ({ token, size, weight, usage }: TypographyToken) => {
         borderBottom: "1px solid #f0f0f0",
       }}
     >
-      <div
-        style={{
-          fontSize: size,
-          fontWeight: weight,
-          minWidth: "200px",
-          color: "#171717",
-        }}
-      >
+      <div className={token} style={{ minWidth: "200px", color: "#171717" }}>
         가나다라마 Aa
       </div>
       <div>
@@ -28,7 +27,7 @@ export const Typography = ({ token, size, weight, usage }: TypographyToken) => {
           {token}
         </div>
         <div style={{ fontSize: "12px", color: "#888" }}>
-          {size} / {weight} — {usage}
+          {size} / {weight} / {lineHeight} / {letterSpacing}
         </div>
       </div>
     </div>

@@ -0,0 +1 @@
+@source "../components";
@@ -0,0 +1,19 @@
+@import "tailwindcss";
+@import "@repo/tailwind-config/theme.css";
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("../assets/fonts/PretendardVariable.woff2") format("woff2");
+  font-weight: 45 920;
+  font-style: normal;
+  font-display: swap;
+}
+@layer base {
+  * {
+    font-family: var(--font-family-pretendard), sans-serif;
+  }
+}
+
+:root {
+  --font-family-pretendard: "Pretendard";
+}
@@ -0,0 +1,30 @@
+export interface ColorToken {
+  name: string;
+  cssVar: string;
+  value: string;
+}
+
+export const COLOR_TOKENS: ColorToken[] = [
+  { name: "timo-blue-50", cssVar: "--color-timo-blue-50", value: "#F1F6FE" },
+  { name: "timo-blue-75", cssVar: "--color-timo-blue-75", value: "#C6D8FC" },
+  { name: "timo-blue-100", cssVar: "--color-timo-blue-100", value: "#AEC8FB" },
+  { name: "timo-blue-200", cssVar: "--color-timo-blue-200", value: "#8CB0F9" },
+  { name: "timo-blue-300", cssVar: "--color-timo-blue-300", value: "#74A0F8" },
+
+  { name: "timo-gray-300", cssVar: "--color-timo-gray-300", value: "#F5F5F5" },
+  { name: "timo-gray-500", cssVar: "--color-timo-gray-500", value: "#E6E8E8" },
+  { name: "timo-gray-600", cssVar: "--color-timo-gray-600", value: "#D8D8D8" },
+  { name: "timo-gray-700", cssVar: "--color-timo-gray-700", value: "#9F9F9F" },
+  { name: "timo-gray-800", cssVar: "--color-timo-gray-800", value: "#757575" },
+  { name: "timo-gray-900", cssVar: "--color-timo-gray-900", value: "#3F3F3F" },
+
+  {
+    name: "timo-yellow-300",
+    cssVar: "--color-timo-yellow-300",
+    value: "#F2FC9F",
+  },
+  { name: "timo-black", cssVar: "--color-timo-black", value: "#121212" },
+  { name: "timo-red", cssVar: "--color-timo-red", value: "#FF6650" },
+  { name: "timo-orange", cssVar: "--color-timo-orange", value: "#FFB157" },
+  { name: "timo-green", cssVar: "--color-timo-green", value: "#9FDDA9" },
+];