diff --git a/frontend/src/components/Carousel/Carousel.styled.ts b/frontend/src/components/Carousel/Carousel.styled.ts
index 1dd267e0c..055065809 100644
--- a/frontend/src/components/Carousel/Carousel.styled.ts
+++ b/frontend/src/components/Carousel/Carousel.styled.ts
@@ -49,7 +49,7 @@ export const Button = styled.button`
   width: 4.7rem;
   height: 10rem;
   background: rgba(0, 0, 0, 0.1);
-  color: white;
+  color: ${(props) => props.theme.colors.white};
   cursor: pointer;
   position: absolute;
   border-radius: 0.8rem;
diff --git a/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.styled.ts b/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.styled.ts
index de51de005..cc3a6c4a2 100644
--- a/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.styled.ts
+++ b/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.styled.ts
@@ -17,18 +17,18 @@ export const NoContent = styled(NoResultIcon)`
 `;
 
 export const MainText = styled.span`
-  font-size: 1.6rem;
+  ${(props) => props.theme.font.body}
   margin-bottom: 0.5rem;
 `;
 
 export const SubText = styled.span`
-  color: var(--grey-400);
-  font-size: 1.4rem;
+  color: ${(props) => props.theme.colors.grey400};
+  ${(props) => props.theme.font.caption}
   margin-bottom: 1rem;
 `;
 
 export const Button = styled.button`
-  background: var(--grey-200);
+  background: ${(props) => props.theme.colors.grey200};
   padding: 1.2rem 1.8rem;
   border-radius: 0.8rem;
 `;
diff --git a/frontend/src/components/Header/Header.styled.ts b/frontend/src/components/Header/Header.styled.ts
index aa6dcf68e..5390b32a7 100644
--- a/frontend/src/components/Header/Header.styled.ts
+++ b/frontend/src/components/Header/Header.styled.ts
@@ -24,8 +24,7 @@ export const LogoImg = styled.img`
 `;
 
 export const Logo = styled.h1`
-  font-size: 3rem;
-  font-weight: 800;
+  ${(props) => props.theme.font.heading3}
 `;
 
 export const Spacer = styled.div`
@@ -46,7 +45,7 @@ export const RightPart = styled.div`
 export const LeftPart = styled.div``;
 
 export const LoginButton = styled.button`
-  font-size: 1.3rem;
+  ${(props) => props.theme.font.body}
 `;
 
 export const MenuWrapper = styled.div`
@@ -55,6 +54,6 @@ export const MenuWrapper = styled.div`
 `;
 
 export const MenuText = styled.p<{ $isActive?: boolean }>`
-  font-size: 1.6rem;
-  color: ${({ $isActive }) => ($isActive ? '' : 'var(--grey-400)')};
+  ${(props) => props.theme.font.body}
+  color: ${({ $isActive, theme }) => ($isActive ? '' : theme.colors.grey400)};
 `;
diff --git a/frontend/src/components/Header/NotiModal/NotiModal.styled.ts b/frontend/src/components/Header/NotiModal/NotiModal.styled.ts
index fa8d3591f..4904e039b 100644
--- a/frontend/src/components/Header/NotiModal/NotiModal.styled.ts
+++ b/frontend/src/components/Header/NotiModal/NotiModal.styled.ts
@@ -5,9 +5,7 @@ export const NotiModalContainer = styled.div`
   position: fixed;
   top: 5.5rem;
   right: 17rem;
-  box-shadow:
-    0 0.6rem 0.9rem rgba(0, 0, 0, 0.12),
-    0 1.2rem 1.8rem rgba(0, 0, 0, 0.08);
+  box-shadow: ${(props) => props.theme.boxShadow.shadow12};
 
   border-radius: 1rem;
   padding: 2.5rem 3.4rem;
@@ -17,23 +15,22 @@ export const NotiModalContainer = styled.div`
 export const NotiItem = styled.div`
   width: 28rem;
   position: relative;
-  font-size: 1.1rem;
+  ${(props) => props.theme.font.caption}
   margin-bottom: 1rem;
   padding: 2.3rem 0;
-  border-bottom: 0.1rem solid var(--grey-100);
+  border-bottom: 0.1rem solid ${(props) => props.theme.colors.grey100};
   background-color: white;
   cursor: pointer;
 `;
 
 export const NotiModalTitle = styled.h2`
-  color: var(--grey-600);
-  font-size: 1.4rem;
+  color: ${(props) => props.theme.colors.grey600};
+  ${(props) => props.theme.font.caption}
   margin-bottom: 1.2rem;
-  font-weight: 500;
 `;
 
 export const NotiReadBtn = styled.button`
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.body}
   width: 1.5rem;
   height: 1.5rem;
   position: absolute;
@@ -42,15 +39,13 @@ export const NotiReadBtn = styled.button`
 `;
 
 export const NotiTitle = styled.div`
-  font-size: 1.6rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.bodyBold}
   margin-bottom: 0.6rem;
 `;
 
 export const NotiMessage = styled.div`
-  color: var(--grey-500);
-  font-size: 1.4rem;
-  font-weight: 500;
+  color: ${(props) => props.theme.colors.grey500};
+  ${(props) => props.theme.font.caption}
 
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/frontend/src/components/Mission/Mission.styled.ts b/frontend/src/components/Mission/Mission.styled.ts
index 87eba10a8..0a3695221 100644
--- a/frontend/src/components/Mission/Mission.styled.ts
+++ b/frontend/src/components/Mission/Mission.styled.ts
@@ -15,7 +15,7 @@ export const MissionItemContainer = styled.article`
   width: 100%;
   max-width: 30rem;
   border-radius: 1rem;
-  border: 1px solid var(--grey-200);
+  border: 1px solid ${(props) => props.theme.colors.grey200};
   cursor: pointer;
 `;
 
@@ -24,7 +24,7 @@ export const MissionThumbnailImg = styled.img`
   width: 100%;
   height: 23rem;
   object-fit: cover;
-  border-bottom: 1px solid var(--grey-200);
+  border-bottom: 1px solid ${(props) => props.theme.colors.grey200};
 `;
 
 export const MissionInfoWrapper = styled.div`
@@ -39,8 +39,7 @@ export const MissionDescription = styled.div`
 `;
 
 export const MissionTitle = styled.p`
-  font-size: 1.6rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.bodyBold}
   color: black;
   margin-bottom: 1.7rem;
 `;
@@ -50,8 +49,8 @@ export const MissionSummary = styled.div`
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  font-size: 1.4rem;
-  color: var(--grey-500);
+  ${(props) => props.theme.font.body}
+  color: ${(props) => props.theme.colors.grey500};
 `;
 
 export const MissionHashTagWrapper = styled.div`
@@ -75,7 +74,7 @@ export const MissionHashTagWrapper = styled.div`
 `;
 
 export const MissionHashTag = styled.span`
-  background: var(--primary-100);
+  background: ${(props) => props.theme.colors.primary100};
   border-radius: 0.8rem;
   padding: 0.4rem 0.8rem;
   text-align: center;
@@ -88,6 +87,6 @@ export const MissionHashTag = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 1.4rem;
+  ${(props) => props.theme.font.badge}
   flex-shrink: 0;
 `;
diff --git a/frontend/src/components/MissionDetail/MissionDetail.styled.ts b/frontend/src/components/MissionDetail/MissionDetail.styled.ts
index da5c3718e..821744960 100644
--- a/frontend/src/components/MissionDetail/MissionDetail.styled.ts
+++ b/frontend/src/components/MissionDetail/MissionDetail.styled.ts
@@ -31,7 +31,7 @@ export const ThumbnailImg = styled.img`
 export const GradientOverlay = styled.div`
   position: absolute;
   inset: 0;
-  background: linear-gradient(rgba(0, 0, 0, 0), var(--black-color));
+  background: linear-gradient(rgba(0, 0, 0, 0), ${(props) => props.theme.colors.black});
   opacity: 0.5;
   pointer-events: none; // 그라데이션이 클릭 이벤트를 방지하지 않도록 설정
 `;
@@ -40,10 +40,8 @@ export const Title = styled.h1`
   position: absolute;
   left: 2.1rem;
   bottom: 2.4rem;
-
-  font-size: 2.8rem;
-  font-weight: bold;
-  color: var(--white-color);
+  ${(props) => props.theme.font.heading1}
+  color: ${(props) => props.theme.colors.white};
 `;
 
 export const JavaIcon = styled(javaIcon)``;
@@ -75,14 +73,13 @@ export const InfoMsgWrapper = styled.div`
   border-radius: 0.8rem;
   padding: 0.3rem;
 
-  color: var(--grey-500);
-  font-size: 1.4rem;
-  font-weight: 500;
+  color: ${(props) => props.theme.colors.grey500};
+  ${(props) => props.theme.font.caption}
 
   cursor: pointer;
 
   &:hover {
-    background-color: var(--grey-50);
+    background-color: ${(props) => props.theme.colors.grey50};
   }
 `;
 
@@ -116,7 +113,7 @@ export const MissionDescription = styled.div`
   width: 100%;
   padding: 2rem;
 
-  background-color: var(--grey-50);
+  background-color: ${(props) => props.theme.colors.grey50};
   border-radius: 0.8rem;
 `;
 
diff --git a/frontend/src/components/MissionList/MissionList.styled.ts b/frontend/src/components/MissionList/MissionList.styled.ts
index b6a61c65b..0a53086c9 100644
--- a/frontend/src/components/MissionList/MissionList.styled.ts
+++ b/frontend/src/components/MissionList/MissionList.styled.ts
@@ -11,8 +11,7 @@ export const MissionListContainer = styled.div`
 `;
 
 export const MissionListTitle = styled.h2`
-  font-size: 2.4rem;
-  font-weight: 700;
+  ${(props) => props.theme.font.heading1}
   margin-bottom: 3rem;
 `;
 
@@ -27,7 +26,7 @@ export const MissionItemContainer = styled.article`
   width: 35rem;
 
   border-radius: 1rem;
-  border: 1px solid var(--grey-200);
+  border: 1px solid ${(props) => props.theme.colors.grey200};
   cursor: pointer;
 `;
 
@@ -36,7 +35,7 @@ export const MissionThumbnailImg = styled.img`
   width: 100%;
   height: 23rem;
   object-fit: cover;
-  border-bottom: 1px solid var(--grey-200);
+  border-bottom: 1px solid ${(props) => props.theme.colors.grey200};
 `;
 
 export const MissionDescription = styled.div`
@@ -47,8 +46,7 @@ export const MissionDescription = styled.div`
 `;
 
 export const MissionTitle = styled.p`
-  font-size: 1.6rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.bodyBold}
   color: black;
   margin-bottom: 1.7rem;
 `;
diff --git a/frontend/src/components/MissionSubmit/MissionThumbnail.styled.ts b/frontend/src/components/MissionSubmit/MissionThumbnail.styled.ts
index 797583d5d..9d77c72fc 100644
--- a/frontend/src/components/MissionSubmit/MissionThumbnail.styled.ts
+++ b/frontend/src/components/MissionSubmit/MissionThumbnail.styled.ts
@@ -3,7 +3,6 @@ import javaIcon from '@/assets/images/java.svg';
 
 //TODO shadow에 대한 스타일 변수 적용해야합니다. @버건디
 export const MissionImageContainer = styled.div`
-  box-shadow: var(--shadow-20);
   margin-bottom: 4rem;
 `;
 
@@ -13,7 +12,8 @@ export const MissionImageWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   width: 40rem;
-  border: 1px solid var(--grey-200);
+  border: 1px solid ${(props) => props.theme.colors.grey200};
+  filter: drop-shadow(${(props) => props.theme.boxShadow.shadow04});
   margin: 0 auto;
   border-radius: 1rem;
 `;
@@ -30,13 +30,12 @@ export const MissionSummaryWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.5rem;
-  background: var(--grey-50);
+  background: ${(props) => props.theme.colors.grey50};
   border-radius: 0 0 1rem 1rem;
 `;
 
 export const MissionSummaryText = styled.span`
-  font-weight: 700;
-  font-size: 1.7rem;
+  ${(props) => props.theme.font.bodyBold}
 `;
 
 export const JavaIcon = styled(javaIcon)``;
diff --git a/frontend/src/components/MissionSubmit/MissionTitle.styled.ts b/frontend/src/components/MissionSubmit/MissionTitle.styled.ts
index f88fcb8b8..353e6182c 100644
--- a/frontend/src/components/MissionSubmit/MissionTitle.styled.ts
+++ b/frontend/src/components/MissionSubmit/MissionTitle.styled.ts
@@ -8,14 +8,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: bold;
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.bodyBold}
   margin: 1.1rem 0;
 `;
 
 export const Input = styled.input`
   border-radius: 0.5rem;
-  background: var(--grey-100);
+  background: ${(props) => props.theme.colors.grey100};
   padding: 1rem;
 
   &::placeholder {
diff --git a/frontend/src/components/MissionSubmit/OneWord.styled.ts b/frontend/src/components/MissionSubmit/OneWord.styled.ts
index e0ce41072..e9c55e80b 100644
--- a/frontend/src/components/MissionSubmit/OneWord.styled.ts
+++ b/frontend/src/components/MissionSubmit/OneWord.styled.ts
@@ -7,14 +7,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: bold;
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.bodyBold}
   margin: 1.1rem 0;
 `;
 
 export const TextArea = styled.textarea`
   border-radius: 0.5rem;
-  background: var(--grey-100);
+  background: ${(props) => props.theme.colors.grey100};
   padding: 1rem;
   height: 14rem;
 `;
diff --git a/frontend/src/components/MissionSubmit/PRLink.styled.ts b/frontend/src/components/MissionSubmit/PRLink.styled.ts
index 12fad5c6c..1a466e258 100644
--- a/frontend/src/components/MissionSubmit/PRLink.styled.ts
+++ b/frontend/src/components/MissionSubmit/PRLink.styled.ts
@@ -10,14 +10,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: bold;
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.bodyBold}
   margin: 1.1rem 0;
 `;
 
 export const Input = styled.input`
   border-radius: 0.5rem;
-  background: var(--grey-100);
+  background: ${(props) => props.theme.colors.grey100};
   padding: 1rem;
 
   &::placeholder {
diff --git a/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts b/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts
index 8abd2521f..87ba6b9dc 100644
--- a/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts
+++ b/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts
@@ -17,6 +17,5 @@ export const GithubIcon = styled(GithubLogo)`
 `;
 
 export const BannerTitle = styled.h1`
-  font-weight: bold;
-  font-size: 3rem;
+  ${(props) => props.theme.font.heading3}
 `;
diff --git a/frontend/src/components/MissionSubmit/SubmitButton.styled.ts b/frontend/src/components/MissionSubmit/SubmitButton.styled.ts
index 94993f8f4..1faf3a91a 100644
--- a/frontend/src/components/MissionSubmit/SubmitButton.styled.ts
+++ b/frontend/src/components/MissionSubmit/SubmitButton.styled.ts
@@ -9,11 +9,10 @@ export const Container = styled.div`
 
 export const Button = styled.button`
   border-radius: 0.5rem;
-  background: #000;
-  color: #fff;
+  background: ${(props) => props.theme.colors.black};
+  color: ${(props) => props.theme.colors.white};
   width: 100%;
   height: 5rem;
-  font-weight: bold;
-  font-size: 2rem;
+  ${(props) => props.theme.font.button}
   margin-top: 10rem;
 `;
diff --git a/frontend/src/components/ModalContent/MissionProcess/ModalProcess.styled.ts b/frontend/src/components/ModalContent/MissionProcess/ModalProcess.styled.ts
index e77dcaac7..f43fea24f 100644
--- a/frontend/src/components/ModalContent/MissionProcess/ModalProcess.styled.ts
+++ b/frontend/src/components/ModalContent/MissionProcess/ModalProcess.styled.ts
@@ -5,8 +5,8 @@ import Button from '@/components/common/Button/Button';
 export const MissionProcessContentContainer = styled.div`
   width: 53rem;
   height: 58rem;
-  background: var(--white-color);
-  box-shadow: var(--shadow-8);
+  background: ${(props) => props.theme.colors.white};
+  box-shadow: ${(props) => props.theme.boxShadow.shadow08};
   border-radius: 0.5rem;
   position: relative;
   padding: 3.9rem;
@@ -16,9 +16,8 @@ export const MissionProcessContentContainer = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-size: 1.6rem;
+  ${(props) => props.theme.font.bodyBold}
   margin-bottom: 2.4rem;
-  font-weight: bold;
 `;
 
 export const CloseIconWrapper = styled.div`
@@ -35,7 +34,7 @@ export const CloseIcon = styled(closeIcon)`
 `;
 
 export const Text = styled.p`
-  font-size: 1.6rem;
+  ${(props) => props.theme.font.body}
 `;
 
 // Prev Next 버튼
diff --git a/frontend/src/components/PopUp/SubmitSuccessPopUp.styled.ts b/frontend/src/components/PopUp/SubmitSuccessPopUp.styled.ts
index e5509a12f..55cc0e8d5 100644
--- a/frontend/src/components/PopUp/SubmitSuccessPopUp.styled.ts
+++ b/frontend/src/components/PopUp/SubmitSuccessPopUp.styled.ts
@@ -3,8 +3,8 @@ import { styled } from 'styled-components';
 export const SubmitPopUpContainer = styled.div`
   width: 39rem;
   height: 32rem;
-  background: var(--white-color);
-  box-shadow: var(--shadow-8);
+  background: ${(props) => props.theme.colors.white};
+  box-shadow: ${(props) => props.theme.boxShadow.shadow08};
   border-radius: 0.5rem;
   position: relative;
   padding: 3.9rem;
@@ -21,8 +21,8 @@ export const PopUpMessageContainer = styled.div`
 `;
 
 export const PopUpMessage = styled.p`
-  font-size: 1.5rem;
-  color: var(--black-color);
+  ${(props) => props.theme.font.body}
+  color: ${(props) => props.theme.colors.black};
 `;
 
 export const SubmitButtonContainer = styled.div`
@@ -35,9 +35,9 @@ export const SubmitButtonContainer = styled.div`
 
 export const SubmitButton = styled.button`
   padding: 1rem;
-  color: var(--white-color);
-  font-size: 1.5rem;
-  background: var(--primary-500);
+  color: ${(props) => props.theme.colors.white};
+  ${(props) => props.theme.font.button}
+  background: ${(props) => props.theme.colors.primary500};
   border-radius: 0.8rem;
   cursor: pointer;
   width: 8.5rem;
diff --git a/frontend/src/components/Tab/Tab.styled.ts b/frontend/src/components/Tab/Tab.styled.ts
index ce02ad38f..99606a021 100644
--- a/frontend/src/components/Tab/Tab.styled.ts
+++ b/frontend/src/components/Tab/Tab.styled.ts
@@ -24,16 +24,17 @@ const fadeIn = keyframes`
 export const CurrentContentContainer = styled.div`
   word-break: break-all;
   animation: ${fadeIn} 0.3s ease-out;
-  background: var(--grey-50);
+  background: ${(props) => props.theme.colors.grey50};
   font-size: 2rem;
 `;
 
 export const TabContainer = styled.div<{ $isSelected: boolean }>`
   padding: 1rem 2rem;
   cursor: pointer;
-  background: ${({ $isSelected }) => ($isSelected ? 'var(--primary-200)' : 'var(--grey-50)')};
+  background: ${({ $isSelected, theme }) =>
+    $isSelected ? theme.colors.primary200 : theme.colors.grey50};
   font-size: 1.5rem;
-  color: var(--black-color);
+  color: ${(props) => props.theme.colors.black};
   border-radius: 3rem 3rem 0 0;
   flex: 1;
   transition:
@@ -48,7 +49,8 @@ export const TabContainer = styled.div<{ $isSelected: boolean }>`
   `}
 
   &:hover {
-    background: ${({ $isSelected }) => ($isSelected ? 'var(--primary-300)' : 'var(--grey-100)')};
+    background: ${({ $isSelected, theme }) =>
+      $isSelected ? theme.colors.primary300 : theme.colors.grey100};
   }
 
   @keyframes tabSelected {
diff --git a/frontend/src/components/UserProfile/UserProfile.styled.ts b/frontend/src/components/UserProfile/UserProfile.styled.ts
index 4fbd7d226..f2e0cd7a3 100644
--- a/frontend/src/components/UserProfile/UserProfile.styled.ts
+++ b/frontend/src/components/UserProfile/UserProfile.styled.ts
@@ -30,8 +30,7 @@ export const InfoContainer = styled.div`
 
 // 사용자 이름
 export const ProfileInfoText = styled.p`
-  font-weight: bold;
-  font-size: 3rem;
+  ${(props) => props.theme.font.heading3}
   word-break: break-all;
   min-width: 100%;
   text-align: center;
@@ -40,7 +39,7 @@ export const ProfileInfoText = styled.p`
 // 사용자 한줄 소개
 export const DescriptionInput = styled.input`
   min-width: 100%;
-  border: 1px solid var(--grey-200);
+  border: 1px solid ${(props) => props.theme.colors.grey200};
 `;
 
 export const DescriptionForm = styled.form`
diff --git a/frontend/src/components/common/Badge/Badge.styled.ts b/frontend/src/components/common/Badge/Badge.styled.ts
index 1e7cea9b4..1958b12c3 100644
--- a/frontend/src/components/common/Badge/Badge.styled.ts
+++ b/frontend/src/components/common/Badge/Badge.styled.ts
@@ -11,6 +11,6 @@ export const BadgeContainer = styled.div<BadgeContainerProps>`
   width: fit-content;
   padding: 0.4rem 0.8rem;
   border-radius: 0.4rem;
-  font-size: 1.2rem;
+  ${(props) => props.theme.font.badge}
   white-space: nowrap;
 `;
diff --git a/frontend/src/components/common/Badge/index.tsx b/frontend/src/components/common/Badge/index.tsx
index 6cd5bb322..0c2cdbca2 100644
--- a/frontend/src/components/common/Badge/index.tsx
+++ b/frontend/src/components/common/Badge/index.tsx
@@ -10,7 +10,8 @@ interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
 export default function Badge({
   text,
   fontColor = 'black',
-  backgroundColor = 'var(--primary-100)',
+  // backgroundColor = 'var(--primary-100)',
+  backgroundColor = '#C4C9ED', // 임시입니다 @프룬
 }: BadgeProps) {
   return (
     <S.BadgeContainer $fontColor={fontColor} $backgroundColor={backgroundColor}>
diff --git a/frontend/src/components/common/Button/Button.styled.ts b/frontend/src/components/common/Button/Button.styled.ts
index e31bfebfa..49d9ea16c 100644
--- a/frontend/src/components/common/Button/Button.styled.ts
+++ b/frontend/src/components/common/Button/Button.styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import type { ButtonSize, ButtonVariant } from './Button';
 import { BUTTON_SIZE, BUTTON_VARIANTS } from '@/constants/variants';
 
@@ -7,6 +7,7 @@ interface CommonButtonProps {
   $variant: ButtonVariant;
 }
 
+// TODO: 객체 형태로 바꾸기 @프룬
 const buttonSize = (size: ButtonSize) => {
   switch (size) {
     case BUTTON_SIZE.half:
@@ -23,20 +24,22 @@ const buttonSize = (size: ButtonSize) => {
 const color = (variant: ButtonVariant) => {
   switch (variant) {
     case BUTTON_VARIANTS.primary:
-      return `background-color: var(--primary-500);
-              color: var(--white-color);
-                &:hover {
-                  background-color: var(--primary-600);
-                }
-            `;
+      return css`
+        background-color: ${(props) => props.theme.colors.primary500};
+        color: ${(props) => props.theme.colors.white};
+        &:hover {
+          background-color: ${(props) => props.theme.colors.primary600};
+        }
+      `;
 
     default:
-      return `background-color: var(--grey-200);
-              color: var(--black-color);
-                &:hover {
-                  background-color: var(--grey-300);
-                }
-            `;
+      return css`
+        background-color: ${(props) => props.theme.colors.grey200};
+        color: ${(props) => props.theme.colors.black};
+        &:hover {
+          background-color: ${(props) => props.theme.colors.grey300};
+        }
+      `;
   }
 };
 
@@ -55,9 +58,7 @@ export const CommonButton = styled.button<CommonButtonProps>`
   transition: 0.2s;
 
   white-space: nowrap;
-  font-size: 1.4rem;
-  font-weight: 500;
-  font-family: inherit;
+  ${(props) => props.theme.font.button}
 
   &:disabled {
     cursor: default;
diff --git a/frontend/src/components/common/Card/Card.styled.ts b/frontend/src/components/common/Card/Card.styled.ts
index 66bcf0a1e..e30f74f9d 100644
--- a/frontend/src/components/common/Card/Card.styled.ts
+++ b/frontend/src/components/common/Card/Card.styled.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const CardContainer = styled.div`
   width: 30rem;
-  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.12);
+  box-shadow: ${(props) => props.theme.boxShadow.shadow04};
   border-radius: 0 0 0.8rem 0.8rem;
   cursor: pointer;
   transition: transform 0.3s ease-in-out;
diff --git a/frontend/src/components/common/HashTagButton/HashTagButton.styled.ts b/frontend/src/components/common/HashTagButton/HashTagButton.styled.ts
index b4a1281af..6dc3bd26e 100644
--- a/frontend/src/components/common/HashTagButton/HashTagButton.styled.ts
+++ b/frontend/src/components/common/HashTagButton/HashTagButton.styled.ts
@@ -1,15 +1,13 @@
 import styled from 'styled-components';
 
 export const Button = styled.div`
-  background-color: var(--primary-50);
-  color: var(--black-color);
+  background-color: ${(props) => props.theme.colors.primary50};
+  color: ${(props) => props.theme.colors.black};
   display: flex;
   justify-content: center;
   align-items: center;
 
-  font-size: 1.2rem;
-  font-weight: 500;
-  font-family: inherit;
+  ${(props) => props.theme.font.badge}
 
   padding: 1rem 1.6rem;
   border-radius: 2rem;
diff --git a/frontend/src/components/common/InfoCard/InfoCard.styled.ts b/frontend/src/components/common/InfoCard/InfoCard.styled.ts
index 2a579766c..76076ee28 100644
--- a/frontend/src/components/common/InfoCard/InfoCard.styled.ts
+++ b/frontend/src/components/common/InfoCard/InfoCard.styled.ts
@@ -14,14 +14,12 @@ export const TitleWrapper = styled.div`
 `;
 
 export const Title = styled.div`
-  font-size: 1.6rem;
-  font-weight: 600;
+  ${(props) => props.theme.font.bodyBold}
 `;
 
 export const Description = styled.div`
-  font-size: 1.6rem;
-  font-weight: 300;
-  color: var(--grey-500);
+  ${(props) => props.theme.font.body}
+  color: ${(props) => props.theme.colors.grey500};
   margin-top: 0.5rem;
 `;
 
diff --git a/frontend/src/components/common/Input/Input.styled.ts b/frontend/src/components/common/Input/Input.styled.ts
index 7a1bb14ce..fb5bb48fd 100644
--- a/frontend/src/components/common/Input/Input.styled.ts
+++ b/frontend/src/components/common/Input/Input.styled.ts
@@ -1,4 +1,4 @@
-import { styled, css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 interface InputProps {
   $width: 'small' | 'medium' | 'large' | 'xlarge';
@@ -42,7 +42,7 @@ const borderRadiusStyles = {
 
 const typeStyles = {
   default: css`
-    background: var(--grey-100);
+    background: ${(props) => props.theme.colors.grey100};
   `,
 };
 
@@ -61,18 +61,18 @@ export const Input = styled.input<InputProps>`
   ${(props) =>
     props.$danger
       ? css`
-          border-bottom-color: var(--danger-600);
+          border-bottom-color: ${(props) => props.theme.colors.danger600};
         `
       : css`
           &:focus {
-            border-bottom-color: var(--primary-500);
+            border-bottom-color: ${(props) => props.theme.colors.primary500};
           }
         `}
 `;
 
 export const DangerText = styled.p`
-  color: var(--danger-600);
-  font-size: 1.6rem;
+  color: ${(props) => props.theme.colors.danger600};
+  ${(props) => props.theme.font.caption}
   margin-top: 1rem;
   margin-left: 2.3rem;
 `;
diff --git a/frontend/src/components/common/LoadingSpinner/LoadingSpinner.styled.ts b/frontend/src/components/common/LoadingSpinner/LoadingSpinner.styled.ts
index d504573d6..a88c9cc20 100644
--- a/frontend/src/components/common/LoadingSpinner/LoadingSpinner.styled.ts
+++ b/frontend/src/components/common/LoadingSpinner/LoadingSpinner.styled.ts
@@ -70,7 +70,7 @@ export const Dot = styled.div`
     height: 0%;
     width: 100%;
     padding-bottom: 100%;
-    background-color: var(--primary-700);
+    background-color: ${(props) => props.theme.colors.primary700};
     border-radius: 50%;
   }
 
diff --git a/frontend/src/components/common/Modal/Modal.styled.ts b/frontend/src/components/common/Modal/Modal.styled.ts
index 3fadfb421..70b09b2a8 100644
--- a/frontend/src/components/common/Modal/Modal.styled.ts
+++ b/frontend/src/components/common/Modal/Modal.styled.ts
@@ -62,12 +62,11 @@ export const ModalContainer = styled.div<ModalContainerProps>`
 `;
 
 export const TitleText = styled.h1`
-  font-weight: bold;
-  font-size: 1.6rem;
+  ${(props) => props.theme.font.bodyBold}
 `;
 
 export const SubTitleText = styled.p`
-  font-size: 1.6rem;
+  ${(props) => props.theme.font.caption}
   margin-bottom: 1rem;
 `;
 
diff --git a/frontend/src/components/common/TextArea/TextArea.styled.ts b/frontend/src/components/common/TextArea/TextArea.styled.ts
index 722fd4cf6..df0d9968f 100644
--- a/frontend/src/components/common/TextArea/TextArea.styled.ts
+++ b/frontend/src/components/common/TextArea/TextArea.styled.ts
@@ -15,7 +15,7 @@ const sizeStyles = {
 
 const typeStyles = {
   Default: css`
-    background: var(--grey-100);
+    background: ${(props) => props.theme.colors.grey100};
   `,
 };
 
@@ -36,18 +36,18 @@ export const TextArea = styled.textarea<TextAreaProps>`
   ${(props) =>
     props.$danger
       ? css`
-          border-color: var(--danger-600);
+          border-color: ${(props) => props.theme.colors.danger600};
         `
       : css`
           &:focus {
-            border-color: var(--primary-500);
+            border-color: ${(props) => props.theme.colors.primary500};
           }
         `}
 `;
 
 export const DangerText = styled.p`
-  color: var(--danger-600);
-  font-size: 1.6rem;
+  color: ${(props) => props.theme.colors.danger600};
+  ${(props) => props.theme.font.caption}
   margin-top: 1rem;
   margin-left: 1rem;
 `;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 67db54e92..e24cdec16 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -20,6 +20,8 @@ import MissionListPage from './pages/MissionListPage';
 import DashboardPage from './pages/DashboardPage';
 import DashBoardMissionInProgressPage from './pages/DashboardPage/MissionInProgress';
 import SubmittedSolutionList from './components/DashBoard/SubmittedSolutions';
+import { ThemeProvider } from 'styled-components';
+import { theme } from './styles/theme';
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -191,8 +193,10 @@ root.render(
     <QueryClientProvider client={queryClient}>
       <QueryErrorBoundary>
         <ErrorBoundary fallback={<div>에러에요!</div>}>
-          <GlobalStyle />
-          <RouterProvider router={router} />
+          <ThemeProvider theme={theme}>
+            <GlobalStyle />
+            <RouterProvider router={router} />
+          </ThemeProvider>
         </ErrorBoundary>
       </QueryErrorBoundary>
     </QueryClientProvider>
diff --git a/frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts b/frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts
index 1afb4cea5..eb208d08f 100644
--- a/frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts
+++ b/frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts
@@ -31,7 +31,7 @@ export const ProfileImageWrapper = styled.div`
   width: 7.6rem;
   height: 7.5rem;
   border-radius: 50%;
-  border: 1px solid var(--grey-400);
+  border: 1px solid ${(props) => props.theme.colors.grey400};
   overflow: hidden;
 `;
 
@@ -42,8 +42,7 @@ export const ProfileImage = styled.img`
 `;
 
 export const ProfileName = styled.span`
-  font-weight: bold;
-  font-size: 2rem;
+  ${(props) => props.theme.font.bodyBold}
   text-align: center;
   margin-top: 1rem;
 `;
@@ -52,7 +51,7 @@ export const PathWrapper = styled.div`
   display: flex;
   flex-direction: column;
   padding: 5rem 3.5rem;
-  border-top: 1px solid var(--grey-200);
+  border-top: 1px solid ${(props) => props.theme.colors.grey200};
 `;
 
 export const LinkWrapper = styled.div`
@@ -62,19 +61,19 @@ export const LinkWrapper = styled.div`
 `;
 
 export const Path = styled.span<{ $isSelected: boolean }>`
-  font-size: 1.6rem;
-  color: ${({ $isSelected }) => ($isSelected ? 'var(--black-color)' : 'var(--grey-400)')};
+  ${(props) => props.theme.font.body}
+  color: ${({ $isSelected, theme }) => ($isSelected ? theme.colors.black : theme.colors.grey400)};
 `;
 
 export const Circle = styled.div<{ $isSelected: boolean }>`
   width: 0.6rem;
   height: 0.6rem;
   border-radius: 50%;
-  background: ${({ $isSelected }) => ($isSelected ? 'var(--primary-500)' : 'var(--grey-400)')};
+  background: ${({ $isSelected, theme }) =>
+    $isSelected ? theme.colors.primary500 : theme.colors.grey400};
   margin-right: 1rem;
 `;
 
 export const CurrentPathText = styled.div`
-  font-size: 2rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.bodyBold}
 `;
diff --git a/frontend/src/pages/MainPage/MainPage.styled.tsx b/frontend/src/pages/MainPage/MainPage.styled.tsx
index 8c534df56..095f1d823 100644
--- a/frontend/src/pages/MainPage/MainPage.styled.tsx
+++ b/frontend/src/pages/MainPage/MainPage.styled.tsx
@@ -11,7 +11,6 @@ export const MainPageContainer = styled.div`
 `;
 
 export const MissionListTitle = styled.h2`
-  font-size: 2.4rem;
-  font-weight: 700;
+  ${(props) => props.theme.font.heading1}
   margin-bottom: 3rem;
 `;
diff --git a/frontend/src/pages/MissionListPage/MissionListPage.styled.ts b/frontend/src/pages/MissionListPage/MissionListPage.styled.ts
index 261f85791..53446bce8 100644
--- a/frontend/src/pages/MissionListPage/MissionListPage.styled.ts
+++ b/frontend/src/pages/MissionListPage/MissionListPage.styled.ts
@@ -13,6 +13,5 @@ export const MissionListPageContainer = styled.div`
 
 export const MissionListTitle = styled.h2`
   margin-bottom: 3.5rem;
-  font-size: 2.8rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.heading1};
 `;
diff --git a/frontend/src/pages/SolutionListPage/SolutionListPage.styled.ts b/frontend/src/pages/SolutionListPage/SolutionListPage.styled.ts
index d227d63b1..f78753a37 100644
--- a/frontend/src/pages/SolutionListPage/SolutionListPage.styled.ts
+++ b/frontend/src/pages/SolutionListPage/SolutionListPage.styled.ts
@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 export const SolutionTitle = styled.h2`
   margin-bottom: 3.5rem;
-  font-size: 2.8rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.heading1}
 `;
 
 export const SolutionListPageContainer = styled.div`
diff --git a/frontend/src/styles/GlobalStyle.tsx b/frontend/src/styles/GlobalStyle.tsx
index f1c55b517..65bfb3ef8 100644
--- a/frontend/src/styles/GlobalStyle.tsx
+++ b/frontend/src/styles/GlobalStyle.tsx
@@ -224,7 +224,6 @@ body::-webkit-scrollbar {
     --grey-700:#4C4C4C;
     --grey-800:#2F2F2F;
     --grey-900:#0E0E0E;
-
     --white-color: #FFFFFF;
     --black-color: #000000;
   }
diff --git a/frontend/src/styles/styled.d.ts b/frontend/src/styles/styled.d.ts
new file mode 100644
index 000000000..8a7d4ea98
--- /dev/null
+++ b/frontend/src/styles/styled.d.ts
@@ -0,0 +1,60 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    colors: {
+      primary50: string;
+      primary100: string;
+      primary200: string;
+      primary300: string;
+      primary400: string;
+      primary500: string;
+      primary600: string;
+      primary700: string;
+      primary800: string;
+      primary900: string;
+      danger50: string;
+      danger100: string;
+      danger200: string;
+      danger300: string;
+      danger400: string;
+      danger500: string;
+      danger600: string;
+      danger700: string;
+      danger800: string;
+      danger900: string;
+      grey50: string;
+      grey100: string;
+      grey200: string;
+      grey300: string;
+      grey400: string;
+      grey500: string;
+      grey600: string;
+      grey700: string;
+      grey800: string;
+      grey900: string;
+
+      white: string;
+      black: string;
+    };
+    font: {
+      heading1: string;
+      heading2: string;
+      heading3: string;
+      subHeading: string;
+      body: string;
+      bodyBold: string;
+      caption: string;
+      button: string;
+      badge: string;
+    };
+    boxShadow: {
+      shadow04: string;
+      shadow08: string;
+      shadow12: string;
+      shadow16: string;
+      shadow20: string;
+      outlined04: string;
+    };
+  }
+}
diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
new file mode 100644
index 000000000..d99db14b4
--- /dev/null
+++ b/frontend/src/styles/theme.ts
@@ -0,0 +1,95 @@
+import type { DefaultTheme } from 'styled-components';
+
+export const theme: DefaultTheme = {
+  colors: {
+    primary50: '#E7E9F8',
+    primary100: '#C4C9ED',
+    primary200: '#9CA6E1',
+    primary300: '#7383D6',
+    primary400: '#5367CD',
+    primary500: '#304CC4',
+    primary600: '#2A44B9',
+    primary700: '#1F3AAD',
+    primary800: '#1430A1',
+    primary900: '#001C8E',
+    danger50: '#FFE9EC',
+    danger100: '#FFC8CC',
+    danger200: '#F8918E',
+    danger300: '#F06461',
+    danger400: '#F93A37',
+    danger500: '#FC1D10',
+    danger600: '#EE0014',
+    danger700: '#DC000F',
+    danger800: '#D00004',
+    danger900: '#C20000',
+    grey50: '#F7F7F7',
+    grey100: '#ECECEC',
+    grey200: '#E0E0E0',
+    grey300: '#CCCCCC',
+    grey400: '#A7A7A7',
+    grey500: '#868686',
+    grey600: '#5F5F5F',
+    grey700: '#4C4C4C',
+    grey800: '#2F2F2F',
+    grey900: '#0E0E0E',
+
+    white: '#FFFFFF',
+    black: '#000000',
+  },
+  font: {
+    heading1: `
+      font-size: 2.8rem;
+      font-weight: bold;
+      font-family: inherit;
+    `,
+    heading2: `
+      font-size: 2.6rem;
+      font-weight: bold;
+      font-family: inherit;
+    `,
+    heading3: `
+      font-size: 2.4rem;
+      font-weight: bold;
+      font-family: inherit;
+    `,
+    subHeading: `
+      font-size: 2.2rem;
+      font-weight: 500;
+      font-family: inherit;
+    `,
+    body: `
+      font-size: 1.6rem;
+      font-weight: 500;
+      font-family: inherit;
+      line-height: 2.2rem;
+    `,
+    bodyBold: `
+      font-size: 1.6rem;
+      font-weight: bold;
+      font-family: inherit;
+    `,
+    caption: `
+      font-size: 1.4rem;
+      font-weight: 500;
+      font-family: inherit;
+    `,
+    button: `
+      font-size: 1.4rem;
+      font-weight: 500;
+      font-family: inherit;
+    `,
+    badge: `
+      font-size: 1.2rem;
+      font-weight: 500;
+      font-family: inherit;
+    `,
+  },
+  boxShadow: {
+    shadow04: `0 0.4rem 0.4rem rgba(0, 0, 0, 0.12)`,
+    shadow08: `0 0.4rem 0.6rem rgba(0, 0, 0, 0.12), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.08)`,
+    shadow12: `0 0.6rem 0.9rem rgba(0, 0, 0, 0.12), 0 1.2rem 1.8rem rgba(0, 0, 0, 0.08)`,
+    shadow16: `0 1.6rem 2.4rem rgba(0, 0, 0, 0.12), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.2)`,
+    shadow20: `0 2rem 3rem rgba(0, 0, 0, 0.12), 0 1rem 1.5rem rgba(0, 0, 0, 0.2)`,
+    outlined04: `0 0 0.4rem rgba(0, 0, 0, 0.25)`,
+  },
+};