diff --git a/src/shared/components/button.tsx b/src/shared/components/button.tsx
new file mode 100644
index 0000000..11ca76b
--- /dev/null
+++ b/src/shared/components/button.tsx
@@ -0,0 +1,48 @@
+import { cn } from '@shared/utils/cn';
+import { cva } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+
+interface ButtonProps extends ComponentProps<'button'> {
+  icon?: ReactNode;
+  size?: 'md' | 'sm';
+  color?: 'primary' | 'yellow';
+}
+const ButtonVariants = cva('rounded-[16px] typo-h3 text-white', {
+  variants: {
+    color: {
+      primary: 'bg-primary',
+      yellow: 'bg-yellow text-gray-950',
+    },
+    size: {
+      md: 'w-[32.7rem] h-[5.6rem]',
+      sm: 'w-[27.6rem] h-[4.8rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    color: 'primary',
+  },
+});
+
+export function Button({
+  icon,
+  children,
+  size,
+  color,
+  className,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        ButtonVariants({ size, color }),
+        'flex items-center justify-center gap-[1.2rem]',
+        className,
+      )}
+      {...props}
+    >
+      {icon && <span>{icon}</span>}
+      {children}
+    </button>
+  );
+}
diff --git a/src/shared/styles/global.css b/src/shared/styles/global.css
index 20f543d..5658828 100644
--- a/src/shared/styles/global.css
+++ b/src/shared/styles/global.css
@@ -1,5 +1,6 @@
 @import url('https://cdn.jsdelivr.net/npm/pretendard@latest/dist/web/static/pretendard.css');
 @import './tokens.css';
+@import './typography.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/shared/styles/tokens.css b/src/shared/styles/tokens.css
index 4a2b688..769292c 100644
--- a/src/shared/styles/tokens.css
+++ b/src/shared/styles/tokens.css
@@ -2,6 +2,7 @@
   --primary: 11 234 82;
   --white: 250 250 250;
   --red: 255 123 123;
+  --yellow: 255 232 18;
 
   --sha-but: 255 250 250;
   --sha-pop: 255 250 250;
diff --git a/src/shared/styles/typography.css b/src/shared/styles/typography.css
new file mode 100644
index 0000000..a561e34
--- /dev/null
+++ b/src/shared/styles/typography.css
@@ -0,0 +1,57 @@
+/* Typography system */
+
+.typo-title {
+  font-size: 2.8rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.typo-h1 {
+  font-size: 2.4rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.typo-h2 {
+  font-size: 2.2rem;
+  line-height: 1.2;
+  font-weight: 600;
+  letter-spacing: -0.04em;
+}
+
+.typo-h3 {
+  font-size: 1.8rem;
+  line-height: 1.5;
+  font-weight: 600;
+  letter-spacing: -0.04em;
+}
+
+.typo-body1 {
+  font-size: 1.6rem;
+  line-height: 1.5;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+}
+
+.typo-body2 {
+  font-size: 1.4rem;
+  line-height: 1.5;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+}
+
+.typo-body3 {
+  font-size: 1.4rem;
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: -0.04em;
+}
+
+.typo-caption {
+  font-size: 1.2rem;
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: -0.04em;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 808b184..51e47ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ export default {
         primary: 'rgb(var(--primary) / <alpha-value>)',
         white: 'rgb(var(--white) / <alpha-value>)',
         red: 'rgb(var(--red) / <alpha-value>)',
+        yellow: 'rgb(var(--yellow) / <alpha-value>)',
 
         'sha-but': 'rgb(var(--sha-but) / <alpha-value>)',
         'sha-pop': 'rgb(var(--sha-pop) / <alpha-value>)',