diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
index 2b15e55c..3ed097d9 100644
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@@ -6,7 +6,7 @@ env:
 
 on:
   pull_request:
-    branches: ['main']
+    branches: ['main', feat/**]
 
 jobs:
   build:
diff --git a/.stylelintrc b/.stylelintrc
index 2aa80adc..cd432f6d 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -8,6 +8,7 @@
     }
   ],
   "rules": {
-    "selector-max-type": null
+    "selector-max-type": null,
+    "no-descending-specificity": null
   }
 }
diff --git a/src/components/BottomSheet/index.stories.tsx b/src/components/BottomSheet/index.stories.tsx
index 76136f02..a10f0980 100644
--- a/src/components/BottomSheet/index.stories.tsx
+++ b/src/components/BottomSheet/index.stories.tsx
@@ -53,10 +53,13 @@ export const 바텀시트: StoryObj = {
               <h2>누구에게 보낼까요?</h2>
             </div>
             <Navbar css={styles.navbar}>
-              <Button variant="primary-unaccent" onClick={toggleDrawer(false)}>
+              <Button
+                variant="semi-transparent-unaccent"
+                onClick={toggleDrawer(false)}
+              >
                 닫기
               </Button>
-              <Button variant="primary" onClick={toggleDrawer(false)}>
+              <Button variant="semi-transparent" onClick={toggleDrawer(false)}>
                 완료
               </Button>
             </Navbar>
diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx
index 9a92c77f..ec788c83 100644
--- a/src/components/Button/index.stories.tsx
+++ b/src/components/Button/index.stories.tsx
@@ -1,20 +1,104 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
+import { PencilLine } from '@/assets/icons';
 import Button from './';
 
 const meta = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: '버튼의 비활성화 여부입니다.',
+    },
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     variant: 'primary',
-    children: '버튼입니다',
+    size: 'md',
+    children: 'button',
+    disabled: false,
   },
 };
+
+const styles = {
+  container: css`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 21rem;
+  `,
+  semiTransparentContainer: css`
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    background-color: #fcecd0;
+  `,
+};
+
+export const Primary: Story = {
+  render: () => (
+    <div css={styles.container}>
+      <Button variant="primary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button disabled variant="primary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
+
+export const PrimaryOutline: Story = {
+  render: () => (
+    <div css={styles.container}>
+      <Button variant="primary-outline">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button disabled variant="primary-outline">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
+
+export const Secondary: Story = {
+  render: () => (
+    <div css={styles.container}>
+      <Button variant="secondary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button disabled variant="secondary">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
+
+export const SemiTransparent: Story = {
+  render: () => (
+    <div css={styles.semiTransparentContainer}>
+      <Button variant="semi-transparent-unaccent">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+      <Button variant="semi-transparent">
+        <PencilLine />
+        <p>button</p>
+      </Button>
+    </div>
+  ),
+};
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 58307b8f..5953f954 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,17 +1,19 @@
 import React, { forwardRef } from 'react';
-import styles, { type ButtonVariant } from './styles';
+import styles, { type ButtonSize, type ButtonVariant } from './styles';
 
 interface ButtonProps extends React.ComponentProps<'button'> {
   /** 버튼의 배경 색상과 폰트 색상을 지정합니다. */
   variant?: ButtonVariant;
+  /** 버튼에 들어갈 패딩의 크기를 지정합니다. */
+  size?: ButtonSize;
   /** 버튼의 내용을 지정합니다. */
   children?: React.ReactNode;
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'primary', children, ...props }, ref) => {
+  ({ variant = 'primary', size = 'md', children, ...props }, ref) => {
     return (
-      <button css={styles.button(variant)} ref={ref} {...props}>
+      <button css={styles.button(variant, size)} ref={ref} {...props}>
         {children}
       </button>
     );
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index ed9aa614..e72b9806 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -1,46 +1,113 @@
 import { css } from '@emotion/react';
+import textStyles from '@/styles/textStyles';
 import COLORS from '@/constants/colors';
 
-export type ButtonVariant = 'primary' | 'primary-unaccent' | 'white';
+export type ButtonVariant =
+  | 'primary'
+  | 'primary-outline'
+  | 'secondary'
+  | 'semi-transparent'
+  | 'semi-transparent-unaccent';
+
+export type ButtonSize = 'md' | 'sm';
 
 const styles = {
-  button: (variant: ButtonVariant) => css`
+  button: (variant: ButtonVariant, size: ButtonSize) => css`
     display: flex;
     flex: 1 0;
     gap: 0.5rem;
     justify-content: center;
     align-items: center;
-    padding: 0.75rem 1.25rem;
     border: none;
-    border-radius: 3.8rem;
-    font-weight: 500;
-    font-size: 0.875rem;
+    border-radius: 6.25rem;
     cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:not(:disabled):active {
+      box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
+      transform: scale(0.98);
+    }
 
+    &:disabled {
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    ${textStyles.t3}
+    ${sizeStyles[size]}
     ${variantStyles[variant]}
   `,
 };
 
+const sizeStyles = {
+  sm: css`
+    padding: 0.75rem 1.25rem;
+  `,
+  md: css`
+    padding: 1rem 1.25rem;
+  `,
+};
+
 const variantStyles = {
   primary: css`
+    background-color: ${COLORS.primary};
+    color: white;
+    box-shadow: 0 8px 16px 0 rgb(13 35 51 / 0.2);
+
+    &:hover {
+      background-color: ${COLORS.primaryHover};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.primaryDisabled};
+    }
+  `,
+  'primary-outline': css`
+    background-color: white;
+    color: ${COLORS.primary};
+    box-shadow: 0 8px 16px 0 rgb(13 35 51 / 0.2);
+    outline: 1px solid ${COLORS.primary};
+
+    &:hover {
+      outline: 1px solid ${COLORS.primaryHover};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.gray5};
+      color: ${COLORS.gray4};
+    }
+  `,
+  secondary: css`
+    background-color: white;
+    color: black;
+    box-shadow: 0 8px 16px 0 rgb(153 153 153 / 0.2);
+
+    &:hover {
+      background-color: ${COLORS.gray6};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.gray5};
+      color: ${COLORS.gray4};
+    }
+  `,
+  'semi-transparent': css`
     background: radial-gradient(
       491.85% 132.88% at 0% 12.5%,
       rgb(255 255 255 / 0.7) 0%,
       rgb(255 255 255 / 0.28) 100%
     );
     color: black;
+    box-shadow: 0 8px 16px 0 rgb(153 153 153 / 0.2);
   `,
-  'primary-unaccent': css`
+  'semi-transparent-unaccent': css`
     background: radial-gradient(
       491.85% 132.88% at 0% 12.5%,
       rgb(255 255 255 / 0.7) 0%,
       rgb(255 255 255 / 0.28) 100%
     );
     color: ${COLORS.gray3};
-  `,
-  white: css`
-    background-color: white;
-    color: black;
+    box-shadow: 0 8px 16px 0 rgb(153 153 153 / 0.2);
   `,
 };
 
diff --git a/src/components/Navbar/index.stories.tsx b/src/components/Navbar/index.stories.tsx
index 91c847a7..ccf0e666 100644
--- a/src/components/Navbar/index.stories.tsx
+++ b/src/components/Navbar/index.stories.tsx
@@ -22,13 +22,26 @@ const styles = {
     width: 390px;
     background-color: #fcecd0;
   `,
+  편지_작성하기: {
+    iconContainer: css`
+      flex-grow: 0;
+      margin-left: 0.75rem;
+      padding: 0.5rem 0.75rem;
+      border: none;
+      border-radius: 0.5rem;
+    `,
+  },
 };
 
 export const 흘러온_편지: Story = {
   render: () => (
     <Navbar css={styles.navbar}>
-      <Button variant="primary-unaccent">다시 흘려보내기</Button>
-      <Button variant="primary">답장하기</Button>
+      <Button variant="secondary" size="sm">
+        다시 흘려보내기
+      </Button>
+      <Button variant="primary" size="sm">
+        답장하기
+      </Button>
     </Navbar>
   ),
 };
@@ -36,9 +49,11 @@ export const 흘러온_편지: Story = {
 export const 내게_온_답장: Story = {
   render: () => (
     <Navbar css={styles.navbar}>
-      <Button variant="primary-unaccent">닫기</Button>
-      <Button variant="primary">
-        <TreasureChestOutline color={COLORS.gray3} />
+      <Button variant="semi-transparent-unaccent" size="sm">
+        닫기
+      </Button>
+      <Button variant="semi-transparent" size="sm">
+        <TreasureChestOutline />
         보관하기
       </Button>
     </Navbar>
@@ -54,8 +69,12 @@ export const 사진: Story = {
         backdrop-filter: blur(2px);
       `}
     >
-      <Button variant="primary-unaccent">닫기</Button>
-      <Button variant="primary">저장</Button>
+      <Button variant="semi-transparent-unaccent" size="sm">
+        닫기
+      </Button>
+      <Button variant="semi-transparent" size="sm">
+        저장
+      </Button>
     </Navbar>
   ),
 };
@@ -63,21 +82,19 @@ export const 사진: Story = {
 export const 편지_작성하기: Story = {
   render: () => (
     <Navbar css={styles.navbar}>
-      <Button variant="primary-unaccent">뒤로</Button>
-      <Button variant="primary">답장 보내기</Button>
+      <Button variant="secondary" size="sm">
+        뒤로
+      </Button>
+      <Button variant="primary" size="sm">
+        답장 보내기
+      </Button>
       <div
         css={[
-          buttonStyles.button('primary'),
-          css`
-            flex: 0;
-            width: 1rem;
-            margin-left: 0.75rem;
-            padding: 0.625rem;
-            border-radius: 0.5rem;
-          `,
+          buttonStyles.button('semi-transparent', 'sm'),
+          styles.편지_작성하기.iconContainer,
         ]}
       >
-        <ImageSquare width={24} color={COLORS.gray2} />
+        <ImageSquare color={COLORS.gray2} />
       </div>
     </Navbar>
   ),
@@ -86,43 +103,14 @@ export const 편지_작성하기: Story = {
 export const 편지_쓰기: Story = {
   render: () => (
     <Navbar css={styles.navbar}>
-      <Button
-        css={css`
-          font-weight: 700;
-          line-height: 2rem;
-        `}
-        variant="white"
-      >
-        <PencilLine width="20" />
-        편지 쓰기
+      <Button variant="primary">
+        <PencilLine />
+        편지 쓰러 가기
       </Button>
     </Navbar>
   ),
 };
 
-export const 온보딩: Story = {
-  render: () => (
-    <Navbar css={styles.navbar}>
-      <div
-        css={css`
-          width: 12.5rem;
-        `}
-      >
-        <Button
-          css={css`
-            width: 100%;
-            font-weight: 700;
-            line-height: 2rem;
-          `}
-          variant="white"
-        >
-          시작하기
-        </Button>
-      </div>
-    </Navbar>
-  ),
-};
-
 export const 로그인: Story = {
   render: () => (
     <Navbar css={styles.navbar}>
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 066334be..c860f41c 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -2,16 +2,14 @@ import React from 'react';
 import styles from './styles';
 
 interface NavbarProps {
-  /** 클래스 이름입니다. */
-  className?: string;
   /** Navbar에 들어갈 내용입니다. */
   children?: React.ReactNode;
 }
 
 /** 화면의 하단에 위치 시킬 컴포넌트입니다.  */
-const Navbar = ({ className, children }: NavbarProps) => {
+const Navbar = ({ children, ...props }: NavbarProps) => {
   return (
-    <nav className={className} css={styles.navbar}>
+    <nav css={styles.navbar} {...props}>
       {children}
     </nav>
   );
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
index 699ddc50..0d345e94 100644
--- a/src/constants/colors.ts
+++ b/src/constants/colors.ts
@@ -6,6 +6,9 @@ const COLORS = {
   gray5: '#E0E0E0',
   gray6: '#F2F2F2',
   red: '#EB5757',
+  primary: '#0C8CE9',
+  primaryHover: '#096DB5',
+  primaryDisabled: '#C6CFD6',
 } as const;
 
 export default COLORS;
diff --git a/src/styles/textStyles.stories.tsx b/src/styles/textStyles.stories.tsx
index a4f39d49..734a54bf 100644
--- a/src/styles/textStyles.stories.tsx
+++ b/src/styles/textStyles.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { css } from '@emotion/react';
-import Button from '@/components/Button';
-import textStyles, { type TextVariant } from './textStyles';
+import textStyles from './textStyles';
 
 const meta = {
   title: 'Styles/Text',
@@ -14,39 +13,58 @@ const meta = {
       },
     },
   },
-} satisfies Meta<{ variant: TextVariant }>;
+} satisfies Meta;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 const styles = {
-  buttonBackground: css`
+  container: css`
     display: flex;
-    gap: 1rem;
-    padding: 1rem;
-    background-color: #fcecd0;
+    flex-direction: column;
+    gap: 2.5rem;
+  `,
+  textSection: css`
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
   `,
 };
 
-export const 모든_속성_보기: Story = {
+export const 모든_텍스트_보기: Story = {
   args: {},
   render: () => (
-    <>
-      <h1 css={textStyles('heading')}>누구에게 보낼까요?</h1>
-      <p css={textStyles('thin')}>
-        여기까지가 끝인가 보오 이제 나는 돌아서겠소 억지 노력으로 인연을 거슬러
-        괴롭히지는 않겠소
-      </p>
-      <div css={styles.buttonBackground}>
-        <Button variant="primary" css={textStyles('button')}>
-          선택 완료
-        </Button>
-        <Button variant="white" css={textStyles('button-bold')}>
-          시작하기
-        </Button>
+    <div css={styles.container}>
+      <div css={styles.textSection}>
+        <h1 css={textStyles.t1}>Title / T1-24px(sb)</h1>
+        <h1 css={textStyles.t2}>Title / T2-20px(sb)</h1>
+        <h1 css={textStyles.t3}>Title / T3-16px(sb)</h1>
+        <h1 css={textStyles.t4}>Title / T4-14px(sb)</h1>
+      </div>
+      <div css={styles.textSection}>
+        <p css={textStyles.b1m}>body / b1-24px(m)</p>
+        <p css={textStyles.b2m}>body / b2-20px(m)</p>
+        <p css={textStyles.b3m}>body / b3-18px(m)</p>
+        <p css={textStyles.b4m}>body / b4-14px(m)</p>
+      </div>
+      <div css={styles.textSection}>
+        <p css={textStyles.b1R}>body / b1-24px(R)</p>
+        <p css={textStyles.b2R}>body / b2-20px(R)</p>
+        <p css={textStyles.b3R}>body / b3-18px(R)</p>
+        <p css={textStyles.b4R}>body / b4-14px(R)</p>
+      </div>
+      <div css={styles.textSection}>
+        <p css={textStyles.c1sb}>caption / c1-12px(sb)</p>
+        <p css={textStyles.c1m}>caption / c1-12px(m)</p>
+        <p css={textStyles.c1r}>caption / c1-12px(r)</p>
+      </div>
+      <div css={styles.textSection}>
+        <p css={textStyles.l1m}>letter / l1-14px(m)</p>
+      </div>
+      <div css={styles.textSection}>
+        <p css={textStyles.description}>24년 01월 20일</p>
       </div>
-      <p css={textStyles('description')}>24년 01월 20일에 받은 편지</p>
-    </>
+    </div>
   ),
 };
diff --git a/src/styles/textStyles.ts b/src/styles/textStyles.ts
index 8c672a0a..1b11801c 100644
--- a/src/styles/textStyles.ts
+++ b/src/styles/textStyles.ts
@@ -1,51 +1,93 @@
 import { css } from '@emotion/react';
 import COLORS from '@/constants/colors';
 
-export type TextVariant =
-  | 'heading'
-  | 'thin'
-  | 'button'
-  | 'button-bold'
-  | 'description';
-
-const textStyles = (variant: TextVariant) => {
-  switch (variant) {
-    case 'heading':
-      return css`
-        color: black;
-        font-weight: 700;
-        font-size: 1.25rem;
-        line-height: 1.5rem;
-      `;
-    case 'thin':
-      return css`
-        color: black;
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-      `;
-    case 'button':
-      return css`
-        color: black;
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.5rem;
-      `;
-    case 'button-bold':
-      return css`
-        color: black;
-        font-weight: 700;
-        font-size: 0.875rem;
-        line-height: 1.5rem;
-      `;
-    case 'description':
-      return css`
-        color: ${COLORS.gray4};
-        font-weight: 400;
-        font-size: 0.75rem;
-        line-height: 1rem;
-      `;
-  }
+const textStyles = {
+  t1: css`
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+  `,
+  t2: css`
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 28px;
+  `,
+  t3: css`
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+  `,
+  t4: css`
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+  `,
+  b1m: css`
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 34px;
+  `,
+  b2m: css`
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+  `,
+  b3m: css`
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  `,
+  b4m: css`
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 24px;
+  `,
+  b1R: css`
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 34px;
+  `,
+  b2R: css`
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 28px;
+  `,
+  b3R: css`
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  `,
+  b4R: css`
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  `,
+  c1sb: css`
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+  `,
+  c1m: css`
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+  `,
+  c1r: css`
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+  `,
+  l1m: css`
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+  `,
+  description: css`
+    color: ${COLORS.gray4};
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  `,
 };
 
 export default textStyles;