diff --git a/packages/eslint-config-custom/react-internal.js b/packages/eslint-config-custom/react-internal.js
index 1858131..fae8335 100644
--- a/packages/eslint-config-custom/react-internal.js
+++ b/packages/eslint-config-custom/react-internal.js
@@ -34,6 +34,16 @@ module.exports = {
   ignorePatterns: ["node_modules/", "dist/", ".eslintrc.js"],
 
   rules: {
-    // add specific rules configurations here
+    "import/no-default-export": "off",
+    "import/prefer-default-export": "on",
+    "unicorn/filename-case": [
+      "error",
+      {
+        "cases": {
+          "camelCase": true,
+          "pascalCase": true
+        }
+      }
+    ]
   },
 };
diff --git a/packages/ui/Input/Input.tsx b/packages/ui/Input/Input.tsx
new file mode 100644
index 0000000..218c5be
--- /dev/null
+++ b/packages/ui/Input/Input.tsx
@@ -0,0 +1,15 @@
+import S from './style';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+function Input({ children }: Props) {
+  return (
+    <div className={S.root}>
+      {children}
+    </div>
+  );
+};
+
+export default Input;
\ No newline at end of file
diff --git a/packages/ui/Input/index.tsx b/packages/ui/Input/index.tsx
new file mode 100644
index 0000000..88f33cb
--- /dev/null
+++ b/packages/ui/Input/index.tsx
@@ -0,0 +1 @@
+export * from "./Input";
\ No newline at end of file
diff --git a/packages/ui/Input/style.ts b/packages/ui/Input/style.ts
new file mode 100644
index 0000000..9f29e31
--- /dev/null
+++ b/packages/ui/Input/style.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import theme from '../theme';
+
+const S = {
+  root: style({
+    color: theme.colors.black
+  })
+}
+
+export default S;
\ No newline at end of file
diff --git a/packages/ui/card.tsx b/packages/ui/card.tsx
deleted file mode 100644
index e6551f3..0000000
--- a/packages/ui/card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-
-export function Card({
-  className,
-  title,
-  children,
-  href,
-}: {
-  className?: string;
-  title: string;
-  children: React.ReactNode;
-  href: string;
-}): JSX.Element {
-  return (
-    <a
-      className={className}
-      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <h2>
-        {title} <span>-&gt;</span>
-      </h2>
-      <p>{children}</p>
-    </a>
-  );
-}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 926b151..de7bb1f 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,2 +1,2 @@
 // component exports
-export { Card } from "./card";
+export * from "./Input";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b7e4c12..fed2cf6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,9 +13,14 @@
     "@types/node": "^20.5.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@vanilla-extract/css": "^1.14.0",
     "eslint-config-custom": "*",
     "react": "^18.2.0",
     "tsconfig": "*",
     "typescript": "^4.5.2"
+  },
+  "dependencies": {
+    "@sopt-makers/fonts": "file:../fonts",
+    "@sopt-makers/colors": "file:../colors"
   }
 }
diff --git a/packages/ui/theme.ts b/packages/ui/theme.ts
new file mode 100644
index 0000000..6086e93
--- /dev/null
+++ b/packages/ui/theme.ts
@@ -0,0 +1,10 @@
+import { createTheme } from '@vanilla-extract/css';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
+
+export const [themeClass, theme] = createTheme({
+  colors,
+  fonts
+});
+
+export default theme;
\ No newline at end of file
diff --git a/packages/ui/turbo/generators/config.ts b/packages/ui/turbo/generators/config.ts
index f8dc6e8..577bc35 100644
--- a/packages/ui/turbo/generators/config.ts
+++ b/packages/ui/turbo/generators/config.ts
@@ -17,9 +17,19 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
     actions: [
       {
         type: "add",
-        path: "{{pascalCase name}}.tsx",
+        path: "{{pascalCase name}}/style.ts",
+        templateFile: "templates/style.hbs",
+      },
+      {
+        type: "add",
+        path: "{{pascalCase name}}/{{pascalCase name}}.tsx",
         templateFile: "templates/component.hbs",
       },
+      {
+        type: "add",
+        path: '{{pascalCase name}}/index.tsx',
+        template: 'export * from "./{{pascalCase name}}";'
+      },
       {
         type: "append",
         path: "index.tsx",
diff --git a/packages/ui/turbo/generators/templates/component.hbs b/packages/ui/turbo/generators/templates/component.hbs
index cf7b636..8b5e803 100644
--- a/packages/ui/turbo/generators/templates/component.hbs
+++ b/packages/ui/turbo/generators/templates/component.hbs
@@ -1,14 +1,15 @@
-import * as React from "react";
+import S from './style';
 
 interface Props {
   children?: React.ReactNode;
 }
 
-export const {{ pascalCase name }} = ({ children }: Props) => {
+function {{ pascalCase name }}({ children }: Props) {
   return (
-    <div>
-      <h1>{{ name }}</h1>
+    <div className={S.root}>
       {children}
     </div>
   );
 };
+
+export default {{ pascalCase name }};
\ No newline at end of file
diff --git a/packages/ui/turbo/generators/templates/style.hbs b/packages/ui/turbo/generators/templates/style.hbs
new file mode 100644
index 0000000..9f29e31
--- /dev/null
+++ b/packages/ui/turbo/generators/templates/style.hbs
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import theme from '../theme';
+
+const S = {
+  root: style({
+    color: theme.colors.black
+  })
+}
+
+export default S;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index cb6ca8f..6c77cc3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -177,6 +177,13 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.12.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
+  integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
@@ -425,6 +432,11 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@emotion/hash@^0.9.0":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
 "@esbuild/android-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
@@ -765,6 +777,12 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
   integrity sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==
 
+"@sopt-makers/colors@file:packages/colors":
+  version "3.0.0"
+
+"@sopt-makers/fonts@file:packages/fonts":
+  version "1.0.0"
+
 "@swc/helpers@0.5.1":
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a"
@@ -1071,6 +1089,28 @@
     "@typescript-eslint/types" "6.6.0"
     eslint-visitor-keys "^3.4.1"
 
+"@vanilla-extract/css@^1.14.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/css/-/css-1.14.0.tgz#45fab9c04d893e3e363cf2cde7559d21233b7f63"
+  integrity sha512-rYfm7JciWZ8PFzBM/HDiE2GLnKI3xJ6/vdmVJ5BSgcCZ5CxRlM9Cjqclni9lGzF3eMOijnUhCd/KV8TOzyzbMA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@vanilla-extract/private" "^1.0.3"
+    chalk "^4.1.1"
+    css-what "^6.1.0"
+    cssesc "^3.0.0"
+    csstype "^3.0.7"
+    deep-object-diff "^1.1.9"
+    deepmerge "^4.2.2"
+    media-query-parser "^2.0.2"
+    modern-ahocorasick "^1.0.0"
+    outdent "^0.8.0"
+
+"@vanilla-extract/private@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/private/-/private-1.0.3.tgz#7ec72bc2ff6fe51f9d650f962e8d1989b073690f"
+  integrity sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==
+
 "@vercel/style-guide@^5.0.0":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@vercel/style-guide/-/style-guide-5.0.1.tgz#8cee7395878cfba75b49284a5776723a7c991be2"
@@ -1708,7 +1748,17 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-csstype@^3.0.2:
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2, csstype@^3.0.7:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -1785,6 +1835,16 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deep-object-diff@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
+  integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
+
+deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-browser-id@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
@@ -3584,6 +3644,13 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+media-query-parser@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/media-query-parser/-/media-query-parser-2.0.2.tgz#ff79e56cee92615a304a1c2fa4f2bd056c0a1d29"
+  integrity sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 meow@^6.0.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467"
@@ -3674,6 +3741,11 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+modern-ahocorasick@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283"
+  integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -3952,6 +4024,11 @@ outdent@^0.5.0:
   resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.5.0.tgz#9e10982fdc41492bb473ad13840d22f9655be2ff"
   integrity sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==
 
+outdent@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0"
+  integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==
+
 p-filter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-filter/-/p-filter-2.1.0.tgz#1b1472562ae7a0f742f0f3d3d3718ea66ff9c09c"