diff --git a/src/components/BoxButton/BoxButton.mdx b/src/components/BoxButton/BoxButton.mdx
index a93a701..1466b7b 100644
--- a/src/components/BoxButton/BoxButton.mdx
+++ b/src/components/BoxButton/BoxButton.mdx
@@ -28,17 +28,17 @@ import { BoxButton } from '@yourssu/design-system-react';
 ```
 
 ```tsx
-<BoxButton size="large" hierarchy="primary">
-  Primary/Large
+<BoxButton size="large" variant="filledPrimary">
+  filledPrimary/Large
 </BoxButton>
 ```
 
 <Canvas of={BoxButtonStories.Sizes} withSource="none" />
 
-필수 프로퍼티인 `hierarchy`를 사용하여 BoxButton의 위계를 설정해주세요.<br />
-지원하는 종류는 `primary`, `secondary`, `tertiary` 입니다.
+필수 프로퍼티인 `variant`를 사용하여 BoxButton의 위계를 설정해주세요.<br />
+지원하는 종류는 `filledPrimary`, `filledSecondary`, `outlined` 입니다.
 
-<Canvas of={BoxButtonStories.Hierarchies} withSource="none" />
+<Canvas of={BoxButtonStories.Variants} withSource="none" />
 
 이외의 프로퍼티들은 하단의 예시에서 확인할 수 있습니다.
 
@@ -49,8 +49,8 @@ import { BoxButton } from '@yourssu/design-system-react';
 `BoxButton`을 클릭할 수 없게 막습니다.
 
 ```tsx
-<BoxButton size="large" hierarchy="primary" disabled={true}>
-  Primary/Disabled/Large
+<BoxButton size="large" variant="filledPrimary" disabled={true}>
+  filledPrimary/Disabled/Large
 </BoxButton>
 ```
 
@@ -62,8 +62,8 @@ import { BoxButton } from '@yourssu/design-system-react';
 단, `children` 콘텐츠 크기보다 작은 값을 입력할 경우 적용되지 않습니다.
 
 ```tsx
-<BoxButton size="large" hierarchy="primary" width="500px">
-  Primary/Large/500px
+<BoxButton size="large" variant="filledPrimary" width="500px">
+  filledPrimary/Large/500px
 </BoxButton>
 ```
 
@@ -75,7 +75,7 @@ import { BoxButton } from '@yourssu/design-system-react';
 아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요.
 
 ```tsx
-<BoxButton size="large" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+<BoxButton size="large" variant="filledPrimary" leftIcon={<IcExternalLinkLine />}>
   with leftIcon
 </BoxButton>
 ```
@@ -89,7 +89,7 @@ import { BoxButton } from '@yourssu/design-system-react';
 ```tsx
 <BoxButton
   size="large"
-  hierarchy="primary"
+  variant="filledPrimary"
   onClick={() => {
     alert('BoxButton을 클릭했습니다');
   }}
diff --git a/src/components/BoxButton/BoxButton.stories.tsx b/src/components/BoxButton/BoxButton.stories.tsx
index e675686..b330159 100644
--- a/src/components/BoxButton/BoxButton.stories.tsx
+++ b/src/components/BoxButton/BoxButton.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta<typeof BoxButton> = {
   },
   argTypes: {
     size: { description: 'BoxButton의 크기를 결정하는 속성' },
-    hierarchy: { description: 'BoxButton의 모양을 결정하는 속성' },
+    variant: { description: 'BoxButton의 위계를 결정하는 속성' },
     leftIcon: { description: 'BoxButton의 왼쪽에 들어갈 아이콘' },
     children: { description: 'BoxButton의 내용' },
     rightIcon: { description: 'BoxButton의 오른쪽에 들어갈 아이콘' },
@@ -25,9 +25,9 @@ type Story = StoryObj<typeof BoxButton>;
 
 export const Primary: Story = {
   args: {
-    children: 'Primary/Large',
+    children: 'filledPrimary/Large',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: false,
   },
 };
@@ -35,39 +35,39 @@ export const Primary: Story = {
 export const Sizes: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <BoxButton size="xlarge" hierarchy="primary">
+      <BoxButton size="xlarge" variant="filledPrimary">
         xlarge
       </BoxButton>
-      <BoxButton size="large" hierarchy="primary">
+      <BoxButton size="large" variant="filledPrimary">
         large
       </BoxButton>
-      <BoxButton size="medium" hierarchy="primary">
+      <BoxButton size="medium" variant="filledPrimary">
         medium
       </BoxButton>
-      <BoxButton size="small" hierarchy="primary">
+      <BoxButton size="small" variant="filledPrimary">
         small
       </BoxButton>
-      <BoxButton size="xsmall" hierarchy="primary">
+      <BoxButton size="xsmall" variant="filledPrimary">
         xsmall
       </BoxButton>
-      <BoxButton size="xxsmall" hierarchy="primary">
+      <BoxButton size="xxsmall" variant="filledPrimary">
         xxsmall
       </BoxButton>
     </div>
   ),
 };
 
-export const Hierarchies: Story = {
+export const Variants: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <BoxButton size="large" hierarchy="primary">
-        primary
+      <BoxButton size="large" variant="filledPrimary">
+        filledPrimary
       </BoxButton>
-      <BoxButton size="large" hierarchy="secondary">
-        secondary
+      <BoxButton size="large" variant="filledSecondary">
+        filledSecondary
       </BoxButton>
-      <BoxButton size="large" hierarchy="tertiary">
-        tertiary
+      <BoxButton size="large" variant="outlined">
+        outlined
       </BoxButton>
     </div>
   ),
@@ -75,18 +75,18 @@ export const Hierarchies: Story = {
 
 export const Disabled: Story = {
   args: {
-    children: 'Primary/Disabled/Large',
+    children: 'filledPrimary/Disabled/Large',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: true,
   },
 };
 
 export const Width: Story = {
   args: {
-    children: 'Primary/Large/500px',
+    children: 'filledPrimary/Large/500px',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: false,
     width: '500px',
   },
@@ -96,7 +96,7 @@ export const Click: Story = {
   args: {
     children: 'Click me!',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: false,
     onClick: () => {
       alert('BoxButton을 클릭했습니다');
@@ -107,10 +107,10 @@ export const Click: Story = {
 export const WithIcon: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <BoxButton size="large" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+      <BoxButton size="large" variant="filledPrimary" leftIcon={<IcExternalLinkLine />}>
         with leftIcon
       </BoxButton>
-      <BoxButton size="large" hierarchy="primary" disabled rightIcon={<IcExternalLinkLine />}>
+      <BoxButton size="large" variant="filledPrimary" disabled rightIcon={<IcExternalLinkLine />}>
         with rightIcon
       </BoxButton>
     </div>
diff --git a/src/components/BoxButton/BoxButton.style.ts b/src/components/BoxButton/BoxButton.style.ts
index 696c3eb..71191ce 100644
--- a/src/components/BoxButton/BoxButton.style.ts
+++ b/src/components/BoxButton/BoxButton.style.ts
@@ -1,18 +1,18 @@
 import { css, styled } from 'styled-components';
 
-import { BoxButtonProps, BoxButtonSize, BoxButtonHierarchy } from './BoxButton.type';
+import { BoxButtonProps, BoxButtonSize, BoxButtonVariant } from './BoxButton.type';
 
 interface StyledBoxButtonProps {
   $size: BoxButtonSize;
-  $hierarchy: BoxButtonHierarchy;
+  $variant: BoxButtonVariant;
   $width?: BoxButtonProps['width'];
 }
 
-const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
-  switch ($hierarchy) {
-    case 'primary':
+const getVariantStyle = ($variant: BoxButtonVariant) => {
+  switch ($variant) {
+    case 'filledPrimary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryEnabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledPrimaryEnabled};
         color: ${({ theme }) => theme.semantic.color.textBasicWhite};
         border: none;
 
@@ -22,12 +22,12 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
 
         &:hover {
           cursor: pointer;
-          background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryPressed};
+          background-color: ${({ theme }) => theme.semantic.color.buttonFilledPrimaryPressed};
         }
       `;
-    case 'secondary':
+    case 'filledSecondary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryEnabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledSecondaryEnabled};
         color: ${({ theme }) => theme.semantic.color.textBrandSecondary};
         border: none;
 
@@ -37,12 +37,12 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
 
         &:hover {
           cursor: pointer;
-          background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryPressed};
+          background-color: ${({ theme }) => theme.semantic.color.buttonFilledSecondaryPressed};
         }
       `;
-    case 'tertiary':
+    case 'outlined':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryEnabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonOutlinedEnabled};
         color: ${({ theme }) => theme.semantic.color.textBasicPrimary};
         border: 1px solid ${({ theme }) => theme.semantic.color.lineBasicMedium};
 
@@ -52,7 +52,7 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
 
         &:hover {
           cursor: pointer;
-          background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryPressed};
+          background-color: ${({ theme }) => theme.semantic.color.buttonOutlinedPressed};
         }
       `;
   }
@@ -129,21 +129,21 @@ const getSizeStyle = ($size: BoxButtonSize) => {
   }
 };
 
-const getDisabledStyle = ($hierarchy: BoxButtonHierarchy) => {
-  switch ($hierarchy) {
-    case 'primary':
+const getDisabledStyle = ($variant: BoxButtonVariant) => {
+  switch ($variant) {
+    case 'filledPrimary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryDisabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledPrimaryDisabled};
         border: none;
       `;
-    case 'secondary':
+    case 'filledSecondary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryDisabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledSecondaryDisabled};
         border: none;
       `;
-    case 'tertiary':
+    case 'outlined':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryDisabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonOutlinedDisabled};
         border: 1px solid ${({ theme }) => theme.semantic.color.lineBasicMedium};
       `;
   }
@@ -155,13 +155,13 @@ export const StyledBoxButton = styled.button<StyledBoxButtonProps>`
   justify-content: center;
   gap: 4px;
 
-  ${({ $hierarchy }) => getHierarchyStyle($hierarchy)}
+  ${({ $variant }) => getVariantStyle($variant)}
   ${({ $size }) => getSizeStyle($size)}
   min-width: fit-content;
   width: ${({ $width }) => $width};
 
   &:disabled {
-    ${({ $hierarchy }) => getDisabledStyle($hierarchy)}
+    ${({ $variant }) => getDisabledStyle($variant)}
     color: ${({ theme }) => theme.semantic.color.textBasicDisabled};
     cursor: not-allowed;
 
diff --git a/src/components/BoxButton/BoxButton.tsx b/src/components/BoxButton/BoxButton.tsx
index db84aaf..0e1b97a 100644
--- a/src/components/BoxButton/BoxButton.tsx
+++ b/src/components/BoxButton/BoxButton.tsx
@@ -5,13 +5,13 @@ import { StyledBoxButton } from './BoxButton.style';
 import { BoxButtonProps } from '.';
 
 export const BoxButton = forwardRef<HTMLButtonElement, BoxButtonProps>(
-  ({ size, hierarchy, width, leftIcon, children, rightIcon, ...props }, ref) => {
+  ({ size, variant, width, leftIcon, children, rightIcon, ...props }, ref) => {
     return (
       <StyledBoxButton
         ref={ref}
         disabled={props.disabled}
         $size={size}
-        $hierarchy={hierarchy}
+        $variant={variant}
         $width={width}
         {...props}
       >
diff --git a/src/components/BoxButton/BoxButton.type.ts b/src/components/BoxButton/BoxButton.type.ts
index ef0dd8e..403bc1e 100644
--- a/src/components/BoxButton/BoxButton.type.ts
+++ b/src/components/BoxButton/BoxButton.type.ts
@@ -1,9 +1,9 @@
 export type BoxButtonSize = 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
-export type BoxButtonHierarchy = 'primary' | 'secondary' | 'tertiary';
+export type BoxButtonVariant = 'filledPrimary' | 'filledSecondary' | 'outlined';
 
 export interface BoxButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size: BoxButtonSize;
-  hierarchy: BoxButtonHierarchy;
+  variant: BoxButtonVariant;
   leftIcon?: React.ReactNode;
   children?: React.ReactNode;
   rightIcon?: React.ReactNode;
diff --git a/src/components/Snackbar/Snackbar.stories.tsx b/src/components/Snackbar/Snackbar.stories.tsx
index aa79c62..c5d7491 100644
--- a/src/components/Snackbar/Snackbar.stories.tsx
+++ b/src/components/Snackbar/Snackbar.stories.tsx
@@ -60,7 +60,7 @@ const SnackbarComponent = (args: SnackbarProps) => {
 
   return (
     <div>
-      <BoxButton size="small" hierarchy="primary" onClick={addSnackbar}>
+      <BoxButton size="small" variant="filledPrimary" onClick={addSnackbar}>
         {buttonLabel}
       </BoxButton>
     </div>
diff --git a/src/components/TextButton/TextButton.mdx b/src/components/TextButton/TextButton.mdx
index cdb9977..2f460ae 100644
--- a/src/components/TextButton/TextButton.mdx
+++ b/src/components/TextButton/TextButton.mdx
@@ -28,17 +28,17 @@ import { TextButton } from '@yourssu/design-system-react';
 ```
 
 ```tsx
-<TextButton size="medium" hierarchy="primary">
-  Primary/Medium
+<TextButton size="medium" variant="textPrimary">
+  textPrimary/Medium
 </TextButton>
 ```
 
 <Canvas of={TextButtonStories.Sizes} withSource="none" />
 
-필수 프로퍼티인 `hierarchy`를 사용하여 TextButton의 위계를 설정해주세요.<br />
-지원하는 종류는 `primary`, `secondary` 입니다.
+필수 프로퍼티인 `variant`를 사용하여 TextButton의 위계를 설정해주세요.<br />
+지원하는 종류는 `textPrimary`, `textSecondary` 입니다.
 
-<Canvas of={TextButtonStories.Hierarchies} withSource="none" />
+<Canvas of={TextButtonStories.Variants} withSource="none" />
 
 이외의 프로퍼티들은 하단의 예시에서 확인할 수 있습니다.
 
@@ -49,8 +49,8 @@ import { TextButton } from '@yourssu/design-system-react';
 `TextButton`을 클릭할 수 없게 막습니다.
 
 ```tsx
-<TextButton size="medium" hierarchy="primary" disabled={true}>
-  Primary/Disabled/Medium
+<TextButton size="medium" variant="textPrimary" disabled={true}>
+  textPrimary/Disabled/Medium
 </TextButton>
 ```
 
@@ -62,8 +62,8 @@ import { TextButton } from '@yourssu/design-system-react';
 단, `children` 콘텐츠 크기보다 작은 값을 입력할 경우 적용되지 않습니다.
 
 ```tsx
-<TextButton size="medium" hierarchy="primary" width="500px">
-  Primary/Medium/500px
+<TextButton size="medium" variant="textPrimary" width="500px">
+  textPrimary/Medium/500px
 </TextButton>
 ```
 
@@ -75,7 +75,7 @@ import { TextButton } from '@yourssu/design-system-react';
 아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요.
 
 ```tsx
-<TextButton size="medium" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+<TextButton size="medium" variant="textPrimary" leftIcon={<IcExternalLinkLine />}>
   with leftIcon
 </TextButton>
 ```
@@ -89,7 +89,7 @@ import { TextButton } from '@yourssu/design-system-react';
 ```tsx
 <TextButton
   size="medium"
-  hierarchy="primary"
+  variant="textPrimary"
   onClick={() => {
     alert('TextButton을 클릭했습니다');
   }}
diff --git a/src/components/TextButton/TextButton.stories.tsx b/src/components/TextButton/TextButton.stories.tsx
index 1515925..0d224ec 100644
--- a/src/components/TextButton/TextButton.stories.tsx
+++ b/src/components/TextButton/TextButton.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta<typeof TextButton> = {
       },
       options: ['xsmall', 'small', 'medium'],
     },
-    hierarchy: { description: 'TextButton의 모양을 결정하는 속성' },
+    variant: { description: 'TextButton의 위계를 결정하는 속성' },
     leftIcon: { description: 'TextButton의 왼쪽에 들어갈 아이콘' },
     children: { description: 'TextButton의 내용' },
     rightIcon: { description: 'TextButton의 오른쪽에 들어갈 아이콘' },
@@ -31,9 +31,9 @@ type Story = StoryObj<typeof TextButton>;
 
 export const Primary: Story = {
   args: {
-    children: 'Primary/Small',
+    children: 'textPrimary/Small',
     size: 'small',
-    hierarchy: 'primary',
+    variant: 'textPrimary',
     disabled: false,
     leftIcon: <IcExternalLinkLine />,
   },
@@ -42,27 +42,27 @@ export const Primary: Story = {
 export const Sizes: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <TextButton size="medium" hierarchy="primary">
+      <TextButton size="medium" variant="textPrimary">
         medium
       </TextButton>
-      <TextButton size="small" hierarchy="primary">
+      <TextButton size="small" variant="textPrimary">
         small
       </TextButton>
-      <TextButton size="xsmall" hierarchy="primary">
+      <TextButton size="xsmall" variant="textPrimary">
         xsmall
       </TextButton>
     </div>
   ),
 };
 
-export const Hierarchies: Story = {
+export const Variants: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <TextButton size="medium" hierarchy="primary">
-        primary
+      <TextButton size="medium" variant="textPrimary">
+        textPrimary
       </TextButton>
-      <TextButton size="medium" hierarchy="secondary">
-        secondary
+      <TextButton size="medium" variant="textSecondary">
+        textSecondary
       </TextButton>
     </div>
   ),
@@ -70,18 +70,18 @@ export const Hierarchies: Story = {
 
 export const Disabled: Story = {
   args: {
-    children: 'Primary/Disabled/Medium',
+    children: 'textPrimary/Disabled/Medium',
     size: 'medium',
-    hierarchy: 'primary',
+    variant: 'textPrimary',
     disabled: true,
   },
 };
 
 export const Width: Story = {
   args: {
-    children: 'Primary/Medium/500px',
+    children: 'textPrimary/Medium/500px',
     size: 'medium',
-    hierarchy: 'primary',
+    variant: 'textPrimary',
     disabled: false,
     width: '500px',
   },
@@ -91,7 +91,7 @@ export const Click: Story = {
   args: {
     children: 'Click me!',
     size: 'medium',
-    hierarchy: 'primary',
+    variant: 'textPrimary',
     disabled: false,
     onClick: () => {
       alert('TextButton을 클릭했습니다');
@@ -102,10 +102,10 @@ export const Click: Story = {
 export const WithIcon: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <TextButton size="medium" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+      <TextButton size="medium" variant="textPrimary" leftIcon={<IcExternalLinkLine />}>
         with leftIcon
       </TextButton>
-      <TextButton size="medium" hierarchy="primary" disabled rightIcon={<IcExternalLinkLine />}>
+      <TextButton size="medium" variant="textPrimary" disabled rightIcon={<IcExternalLinkLine />}>
         with rightIcon
       </TextButton>
     </div>
diff --git a/src/components/TextButton/TextButton.style.ts b/src/components/TextButton/TextButton.style.ts
index 1d5026c..24269fe 100644
--- a/src/components/TextButton/TextButton.style.ts
+++ b/src/components/TextButton/TextButton.style.ts
@@ -1,16 +1,16 @@
 import { css, styled } from 'styled-components';
 
-import { TextButtonProps, TextButtonSize, TextButtonHierarchy } from './TextButton.type';
+import { TextButtonProps, TextButtonSize, TextButtonVariant } from './TextButton.type';
 
 interface StyledTextButtonProps {
   $size: TextButtonSize;
-  $hierarchy: TextButtonHierarchy;
+  $variant: TextButtonVariant;
   $width?: TextButtonProps['width'];
 }
 
-const getHierarchyStyle = ($hierarchy: TextButtonHierarchy) => {
-  switch ($hierarchy) {
-    case 'primary':
+const getVariantStyle = ($variant: TextButtonVariant) => {
+  switch ($variant) {
+    case 'textPrimary':
       return css`
         background-color: ${({ theme }) => theme.semantic.color.buttonTextPrimaryEnabled};
         color: ${({ theme }) => theme.semantic.color.textBrandPrimary};
@@ -25,7 +25,7 @@ const getHierarchyStyle = ($hierarchy: TextButtonHierarchy) => {
           background-color: ${({ theme }) => theme.semantic.color.buttonTextPrimaryPressed};
         }
       `;
-    case 'secondary':
+    case 'textSecondary':
       return css`
         background-color: ${({ theme }) => theme.semantic.color.buttonTextSecondaryEnabled};
         color: ${({ theme }) => theme.semantic.color.textBasicTertiary};
@@ -78,13 +78,13 @@ const getSizeStyle = ($size: TextButtonSize) => {
   }
 };
 
-const getDisabledStyle = ($hierarchy: TextButtonHierarchy) => {
-  switch ($hierarchy) {
-    case 'primary':
+const getDisabledStyle = ($variant: TextButtonVariant) => {
+  switch ($variant) {
+    case 'textPrimary':
       return css`
         background-color: ${({ theme }) => theme.semantic.color.buttonTextPrimaryDisabled};
       `;
-    case 'secondary':
+    case 'textSecondary':
       return css`
         background-color: ${({ theme }) => theme.semantic.color.buttonTextSecondaryDisabled};
       `;
@@ -97,14 +97,14 @@ export const StyledTextButton = styled.button<StyledTextButtonProps>`
   justify-content: center;
   gap: 4px;
 
-  ${({ $hierarchy }) => getHierarchyStyle($hierarchy)}
+  ${({ $variant }) => getVariantStyle($variant)}
   ${({ $size }) => getSizeStyle($size)}
   border-radius: ${({ theme }) => theme.semantic.radius.xs}px;
   min-width: fit-content;
   width: ${({ $width }) => $width};
 
   &:disabled {
-    ${({ $hierarchy }) => getDisabledStyle($hierarchy)}
+    ${({ $variant }) => getDisabledStyle($variant)}
     color: ${({ theme }) => theme.semantic.color.textBasicDisabled};
     cursor: not-allowed;
 
diff --git a/src/components/TextButton/TextButton.tsx b/src/components/TextButton/TextButton.tsx
index 6aa3719..fdaf8e3 100644
--- a/src/components/TextButton/TextButton.tsx
+++ b/src/components/TextButton/TextButton.tsx
@@ -5,13 +5,13 @@ import { StyledTextButton } from './TextButton.style';
 import { TextButtonProps } from '.';
 
 export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
-  ({ size, hierarchy, width, leftIcon, children, rightIcon, ...props }, ref) => {
+  ({ size, variant, width, leftIcon, children, rightIcon, ...props }, ref) => {
     return (
       <StyledTextButton
         ref={ref}
         disabled={props.disabled}
         $size={size}
-        $hierarchy={hierarchy}
+        $variant={variant}
         $width={width}
         {...props}
       >
diff --git a/src/components/TextButton/TextButton.type.ts b/src/components/TextButton/TextButton.type.ts
index 6263456..265db71 100644
--- a/src/components/TextButton/TextButton.type.ts
+++ b/src/components/TextButton/TextButton.type.ts
@@ -1,9 +1,9 @@
 export type TextButtonSize = 'medium' | 'small' | 'xsmall';
-export type TextButtonHierarchy = 'primary' | 'secondary';
+export type TextButtonVariant = 'textPrimary' | 'textSecondary';
 
 export interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size: TextButtonSize;
-  hierarchy: TextButtonHierarchy;
+  variant: TextButtonVariant;
   leftIcon?: React.ReactNode;
   children?: React.ReactNode;
   rightIcon?: React.ReactNode;
diff --git a/src/style/foundation/color/semanticColor/semanticColor.type.ts b/src/style/foundation/color/semanticColor/semanticColor.type.ts
index c1e47e0..b278306 100644
--- a/src/style/foundation/color/semanticColor/semanticColor.type.ts
+++ b/src/style/foundation/color/semanticColor/semanticColor.type.ts
@@ -31,22 +31,21 @@ export type SemanticLineStatusColor = MergeVariants<'line', 'status', StatusVari
 
 export type SemanticButtonBoxPrimaryColor = MergeVariants<
   'button',
-  'box',
+  'filled',
   'primary',
   InteractiveVariant
 >;
 
 export type SemanticButtonBoxSecondaryColor = MergeVariants<
   'button',
-  'box',
+  'filled',
   'secondary',
   InteractiveVariant
 >;
 
 export type SemanticButtonBoxTertiaryColor = MergeVariants<
   'button',
-  'box',
-  'tertiary',
+  'outlined',
   InteractiveVariant
 >;
 
diff --git a/src/style/foundation/color/semanticColor/semanticColorPalette.ts b/src/style/foundation/color/semanticColor/semanticColorPalette.ts
index 0f64d8d..c81645f 100644
--- a/src/style/foundation/color/semanticColor/semanticColorPalette.ts
+++ b/src/style/foundation/color/semanticColor/semanticColorPalette.ts
@@ -34,17 +34,17 @@ export const semanticColorPalette: SemanticColorPalette = {
   lineStatusNegative: primitiveColorPalette.statusRedMain,
   lineStatusPositive: primitiveColorPalette.violet500,
 
-  buttonBoxPrimaryEnabled: primitiveColorPalette.violet500,
-  buttonBoxPrimaryPressed: primitiveColorPalette.violet700,
-  buttonBoxPrimaryDisabled: primitiveColorPalette.gray100,
+  buttonFilledPrimaryEnabled: primitiveColorPalette.violet500,
+  buttonFilledPrimaryPressed: primitiveColorPalette.violet700,
+  buttonFilledPrimaryDisabled: primitiveColorPalette.gray100,
 
-  buttonBoxSecondaryEnabled: primitiveColorPalette.violet050,
-  buttonBoxSecondaryPressed: primitiveColorPalette.violet200,
-  buttonBoxSecondaryDisabled: primitiveColorPalette.gray100,
+  buttonFilledSecondaryEnabled: primitiveColorPalette.violet050,
+  buttonFilledSecondaryPressed: primitiveColorPalette.violet200,
+  buttonFilledSecondaryDisabled: primitiveColorPalette.gray100,
 
-  buttonBoxTertiaryEnabled: primitiveColorPalette.neutralTransparent,
-  buttonBoxTertiaryPressed: primitiveColorPalette.gray100,
-  buttonBoxTertiaryDisabled: primitiveColorPalette.neutralTransparent,
+  buttonOutlinedEnabled: primitiveColorPalette.neutralTransparent,
+  buttonOutlinedPressed: primitiveColorPalette.gray100,
+  buttonOutlinedDisabled: primitiveColorPalette.neutralTransparent,
 
   buttonTextPrimaryEnabled: primitiveColorPalette.neutralTransparent,
   buttonTextPrimaryPressed: primitiveColorPalette.violet050,