diff --git a/src/components/common/ToggleSwitch.tsx b/src/components/common/ToggleSwitch.tsx
index 3d4a8ac0..75c54783 100644
--- a/src/components/common/ToggleSwitch.tsx
+++ b/src/components/common/ToggleSwitch.tsx
@@ -36,7 +36,7 @@ function ToggleSwitch({
         )}
         <span
           className={twMerge(
-            isHorizontal ? 'text-sub2 transition-colors' : 'text-xs leading-3.5 font-medium',
+            isHorizontal ? 'Sub2 transition-colors' : 'text-xs leading-3.5 font-medium',
             enabled ? 'text-indigo-700' : 'text-indigo-300'
           )}
         >
diff --git a/src/components/layout/Header/components/InfoHeader.tsx b/src/components/layout/Header/components/InfoHeader.tsx
index 138f3279..f67579b4 100644
--- a/src/components/layout/Header/components/InfoHeader.tsx
+++ b/src/components/layout/Header/components/InfoHeader.tsx
@@ -7,8 +7,8 @@ function InfoHeader() {
   return (
     <header className="fixed top-0 right-0 left-0 z-30 flex items-center bg-white px-3 py-2">
       <div className="flex flex-1 flex-col">
-        <div className="text-h3 text-indigo-700">{myInfo.universityName}</div>
-        <div className="text-cap1 text-indigo-300">
+        <div className="H3 text-indigo-700">{myInfo.universityName}</div>
+        <div className="Caption1 text-indigo-300">
           {myInfo.name} {myInfo.studentNumber}
         </div>
       </div>
diff --git a/src/index.css b/src/index.css
index 520fa9c6..b23555f2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 
 @import './styles/font.css';
+@import './styles/colors.css';
+@import './styles/typography.css';
 @import './styles/theme.css';
 
 :root {
diff --git a/src/pages/Auth/SignUp/ConfirmStep.tsx b/src/pages/Auth/SignUp/ConfirmStep.tsx
index 61d0580f..a9653821 100644
--- a/src/pages/Auth/SignUp/ConfirmStep.tsx
+++ b/src/pages/Auth/SignUp/ConfirmStep.tsx
@@ -70,31 +70,26 @@ function ConfirmStep() {
       color="text-red-500"
     >
       <div className="flex flex-col gap-1">
-        <label className="text-sub2 text-indigo-300">학교명</label>
+        <label className="Sub2 text-indigo-300">학교명</label>
         <input
           type="text"
           value={universityName}
           disabled
-          className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
+          className="bg-indigo-5 Sub1 rounded-lg p-2 disabled:text-indigo-200"
         />
       </div>
       <div className="flex flex-col gap-1">
-        <label className="text-sub2 text-indigo-300">학번</label>
+        <label className="Sub2 text-indigo-300">학번</label>
         <input
           type="text"
           value={studentId}
           disabled
-          className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
+          className="bg-indigo-5 Sub1 rounded-lg p-2 disabled:text-indigo-200"
         />
       </div>
       <div className="flex flex-col gap-1">
-        <label className="text-sub2 text-indigo-300">이름</label>
-        <input
-          type="text"
-          value={name}
-          disabled
-          className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
-        />
+        <label className="Sub2 text-indigo-300">이름</label>
+        <input type="text" value={name} disabled className="bg-indigo-5 Sub1 rounded-lg p-2 disabled:text-indigo-200" />
       </div>
       {error && (
         <div className="mt-2 text-sm text-red-500">
@@ -107,7 +102,7 @@ function ConfirmStep() {
       )}
       <BottomModal isOpen={isInquiryModalOpen} onClose={closeInquiryModal}>
         <div className="flex flex-col gap-10 px-8 pt-7 pb-4">
-          <div className="text-h3 text-center whitespace-pre-wrap">
+          <div className="H3 text-center whitespace-pre-wrap">
             이미 등록된 학번입니다{'\n'}
             문의를 통해 문제를 해결해주세요
           </div>
@@ -115,12 +110,12 @@ function ConfirmStep() {
             value={inquiryContent}
             onChange={(e) => setInquiryContent(e.target.value)}
             placeholder="문의 내용을 입력해주세요"
-            className="text-sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
+            className="Sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
           />
           <button
             onClick={handleInquirySubmit}
             disabled={isInquiryPending || !inquiryContent.trim()}
-            className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
+            className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
           >
             {isInquiryPending ? '전송 중...' : '문의하기'}
           </button>
diff --git a/src/pages/Auth/SignUp/FinishStep.tsx b/src/pages/Auth/SignUp/FinishStep.tsx
index 67954b32..a1bdb94e 100644
--- a/src/pages/Auth/SignUp/FinishStep.tsx
+++ b/src/pages/Auth/SignUp/FinishStep.tsx
@@ -22,11 +22,11 @@ function FinishStep() {
       <div className="flex flex-col items-center text-center">
         <CheckInCircleIcon className="mt-15" />
 
-        <div className="text-d2 mt-8">환영합니다!</div>
+        <div className="D2 mt-8">환영합니다!</div>
 
         <div>
-          <div className="text-h1 my-3">{myInfo.name}님</div>
-          <div className="text-h5 text-indigo-300">
+          <div className="H1 my-3">{myInfo.name}님</div>
+          <div className="H5 text-indigo-300">
             <div>KONECT 가입이 완료되었습니다.</div>
             <div>동아리 활동을 시작해보세요!</div>
           </div>
diff --git a/src/pages/Auth/SignUp/NameStep.tsx b/src/pages/Auth/SignUp/NameStep.tsx
index 4ba05c41..7b7edd0c 100644
--- a/src/pages/Auth/SignUp/NameStep.tsx
+++ b/src/pages/Auth/SignUp/NameStep.tsx
@@ -29,7 +29,7 @@ function NameStep() {
           setName(value);
         }}
         placeholder="ex) 홍길동"
-        className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
+        className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
       />
     </StepLayout>
   );
diff --git a/src/pages/Auth/SignUp/StudentIdStep.tsx b/src/pages/Auth/SignUp/StudentIdStep.tsx
index b91a7f8e..c0655d8c 100644
--- a/src/pages/Auth/SignUp/StudentIdStep.tsx
+++ b/src/pages/Auth/SignUp/StudentIdStep.tsx
@@ -37,7 +37,7 @@ function StudentIdStep() {
           setStudentId(value);
         }}
         placeholder="ex) 2022136039"
-        className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
+        className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
       />
     </StepLayout>
   );
diff --git a/src/pages/Auth/SignUp/TermStep.tsx b/src/pages/Auth/SignUp/TermStep.tsx
index edddc736..c23ee218 100644
--- a/src/pages/Auth/SignUp/TermStep.tsx
+++ b/src/pages/Auth/SignUp/TermStep.tsx
@@ -35,7 +35,7 @@ function TermStep() {
   return (
     <div className="flex flex-1 flex-col justify-between px-8 py-5" style={{ marginBottom: 'calc(32px + var(--sab))' }}>
       <div className="flex flex-col gap-2 text-center">
-        <div className="text-d2">서비스 이용 동의</div>
+        <div className="D2">서비스 이용 동의</div>
         <div className="font-semibold text-indigo-300">원활한 서비스 이용을 위해 동의해주세요</div>
 
         <div className="mt-10 flex w-full flex-col gap-3">
diff --git a/src/pages/Auth/SignUp/UniversityStep.tsx b/src/pages/Auth/SignUp/UniversityStep.tsx
index e046e848..a47c5903 100644
--- a/src/pages/Auth/SignUp/UniversityStep.tsx
+++ b/src/pages/Auth/SignUp/UniversityStep.tsx
@@ -13,7 +13,7 @@ import { useGetUniversityList } from './hooks/useUniversity';
 function UniversityCard({ label, onClick }: { label: string; onClick: () => void }) {
   return (
     <Card onClick={onClick} className="border-indigo-75 flex w-full flex-row items-center justify-between">
-      <div className="text-sub2">{label}</div>
+      <div className="Sub2">{label}</div>
       <RightArrowIcon />
     </Card>
   );
@@ -65,7 +65,7 @@ function UniversityStep() {
         value={universityName}
         placeholder="학교를 입력해주세요.."
         onChange={(e) => setUniversityName(e.target.value)}
-        className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300 placeholder:text-indigo-300"
+        className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300 placeholder:text-indigo-300"
       />
       <div className="mt-7 flex flex-col gap-2">
         {filteredUniversities.map((university) => (
@@ -76,14 +76,12 @@ function UniversityStep() {
           />
         ))}
 
-        {hasNoSearchResult && (
-          <div className="text-sub3 px-1 pt-2 text-indigo-300">{`'${trimmed}' 검색 결과가 없어요`}</div>
-        )}
+        {hasNoSearchResult && <div className="Sub3 px-1 pt-2 text-indigo-300">{`'${trimmed}' 검색 결과가 없어요`}</div>}
 
         <button
           type="button"
           onClick={openInquiryModal}
-          className="text-sub3 mt-2 w-fit self-end px-1 text-indigo-300 underline underline-offset-4 transition-colors hover:text-indigo-400"
+          className="Sub3 mt-2 w-fit self-end px-1 text-indigo-300 underline underline-offset-4 transition-colors hover:text-indigo-400"
         >
           자신의 학교가 목록에 없나요?
         </button>
@@ -91,17 +89,17 @@ function UniversityStep() {
 
       <BottomModal isOpen={isInquiryModalOpen} onClose={closeInquiryModal}>
         <div className="flex flex-col gap-10 px-8 pt-7 pb-4">
-          <div className="text-h3 text-center">학교 문의</div>
+          <div className="H3 text-center">학교 문의</div>
           <textarea
             value={inquiryContent}
             onChange={(e) => setInquiryContent(e.target.value)}
             placeholder="추가를 원하는 학교 이름을 정확히 입력해주세요"
-            className="text-sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
+            className="Sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
           />
           <button
             onClick={handleInquirySubmit}
             disabled={isPending || !inquiryContent.trim()}
-            className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
+            className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
           >
             {isPending ? '전송 중...' : '문의하기'}
           </button>
diff --git a/src/pages/Auth/SignUp/components/AgreementArrow.tsx b/src/pages/Auth/SignUp/components/AgreementArrow.tsx
index 5d900863..71e198f6 100644
--- a/src/pages/Auth/SignUp/components/AgreementArrow.tsx
+++ b/src/pages/Auth/SignUp/components/AgreementArrow.tsx
@@ -21,7 +21,7 @@ function AgreementRow({ checked, onChange, label, route, RightIcon, CheckIcon }:
           onChange={(e) => onChange(e.target.checked)}
         />
         <CheckIcon className="text-indigo-100 peer-checked:text-black" />
-        <span className="text-sub2 text-indigo-100 peer-checked:text-black">{label}</span>
+        <span className="Sub2 text-indigo-100 peer-checked:text-black">{label}</span>
       </label>
 
       {RightIcon ? (
@@ -45,7 +45,7 @@ function AgreementAllRow({ checked, onChange, label, BigCheckIcon }: AgreementAl
     <label className="flex cursor-pointer items-center gap-3">
       <input type="checkbox" className="peer sr-only" checked={checked} onChange={(e) => onChange(e.target.checked)} />
       <BigCheckIcon className="text-indigo-100 peer-checked:text-black" />
-      <span className="text-h3 text-indigo-100 peer-checked:text-black">{label}</span>
+      <span className="H3 text-indigo-100 peer-checked:text-black">{label}</span>
     </label>
   );
 }
diff --git a/src/pages/Auth/SignUp/components/StepLayout.tsx b/src/pages/Auth/SignUp/components/StepLayout.tsx
index 36b7d511..c8c81c7a 100644
--- a/src/pages/Auth/SignUp/components/StepLayout.tsx
+++ b/src/pages/Auth/SignUp/components/StepLayout.tsx
@@ -16,7 +16,7 @@ function StepLayout({
   return (
     <div className="flex flex-1 flex-col justify-between px-8 py-5" style={{ marginBottom: 'calc(32px + var(--sab))' }}>
       <div className="flex flex-col gap-2">
-        <div className="text-d2">{title}</div>
+        <div className="D2">{title}</div>
         <div className={`${color} text-sm leading-5 font-medium whitespace-pre-line`}>{description}</div>
 
         {children}
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index 89b0b979..f6984284 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -44,7 +44,7 @@ function ChatListPage() {
                 <div className="flex items-center gap-2">
                   <div className="text-sm leading-4 font-bold text-indigo-700">{room.roomName}</div>
 
-                  {isGroup && <span className="bg-primary text-cap2 rounded px-1.5 py-0.5 text-white">단체</span>}
+                  {isGroup && <span className="bg-primary Caption2 rounded px-1.5 py-0.5 text-white">단체</span>}
                   {room.isMuted && (
                     <span className="text-xs text-gray-400">
                       <BellOfIcon className="h-4 w-4" />
diff --git a/src/pages/Club/Application/clubFeePage.tsx b/src/pages/Club/Application/clubFeePage.tsx
index ac8c3a00..99b14afb 100644
--- a/src/pages/Club/Application/clubFeePage.tsx
+++ b/src/pages/Club/Application/clubFeePage.tsx
@@ -108,9 +108,7 @@ function ClubFeePage() {
                 className="border-indigo-75 hover:bg-indigo-25 flex h-52 w-36 flex-col items-center justify-center gap-2.5 rounded-xl border transition-colors"
               >
                 <ImageIcon />
-                <p className="text-sub4 text-center whitespace-pre-line text-indigo-100">
-                  {'이미지를 \n 추가해주세요'}
-                </p>
+                <p className="Sub4 text-center whitespace-pre-line text-indigo-100">{'이미지를 \n 추가해주세요'}</p>
               </button>
             )}
           </div>
diff --git a/src/pages/Club/Application/index.tsx b/src/pages/Club/Application/index.tsx
index a6a9211b..1406d68f 100644
--- a/src/pages/Club/Application/index.tsx
+++ b/src/pages/Club/Application/index.tsx
@@ -75,20 +75,20 @@ function ApplicationPage() {
       </form>
       <BottomModal isOpen={isConfirmOpen} onClose={closeConfirm}>
         <div className="flex flex-col gap-10 px-8 pt-7 pb-4">
-          <div className="text-h3 text-center whitespace-pre-wrap">지원서를 제출하시겠어요?</div>
+          <div className="H3 text-center whitespace-pre-wrap">지원서를 제출하시겠어요?</div>
           <div>
             <button
               type="button"
               onClick={handleConfirm}
               disabled={isPending}
-              className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
+              className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
             >
               제출하기
             </button>
             <button
               type="button"
               onClick={closeConfirm}
-              className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400"
+              className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400"
             >
               취소
             </button>
diff --git a/src/pages/Club/ClubDetail/components/ClubIntro.tsx b/src/pages/Club/ClubDetail/components/ClubIntro.tsx
index 7425a996..f0750cf0 100644
--- a/src/pages/Club/ClubDetail/components/ClubIntro.tsx
+++ b/src/pages/Club/ClubDetail/components/ClubIntro.tsx
@@ -23,8 +23,8 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
   return (
     <>
       <Card>
-        <div className="text-h3 text-indigo-700">동아리 소개</div>
-        <div className="text-sub2 mt-1.5 whitespace-pre-line text-indigo-300">{clubDetail.introduce}</div>
+        <div className="H3 text-indigo-700">동아리 소개</div>
+        <div className="Sub2 mt-1.5 whitespace-pre-line text-indigo-300">{clubDetail.introduce}</div>
       </Card>
       <Card>
         <div className="text-sm leading-4 font-bold text-indigo-700">위치 및 회원 수</div>
@@ -53,7 +53,7 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
         </div>
       </Card>
       <Card>
-        <div className="text-body3 flex flex-col items-center gap-1 text-indigo-300">
+        <div className="Body3 flex flex-col items-center gap-1 text-indigo-300">
           <div>동아리에 대해 궁금한 점이 있으신가요?</div>
           <div>편하게 문의해주세요!</div>
         </div>
@@ -61,7 +61,7 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
           type="button"
           onClick={handleInquireClick}
           disabled={isCreatingChatRoom}
-          className="bg-primary text-body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white"
+          className="bg-primary Body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white"
         >
           <PaperPlaneIcon className="text-white" />
           {isCreatingChatRoom ? '이동 중...' : '문의하기'}
diff --git a/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx b/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
index 60e8f629..3ce7b191 100644
--- a/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
+++ b/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
@@ -92,20 +92,20 @@ function ClubRecruitment({ clubId, isMember }: ClubRecruitProps) {
       </Card>
       <BottomModal isOpen={isConfirmOpen} onClose={closeConfirm}>
         <div className="flex flex-col gap-10 px-8 pt-7 pb-4">
-          <div className="text-h3 text-center whitespace-pre-wrap">동아리에 지원하시겠어요?</div>
+          <div className="H3 text-center whitespace-pre-wrap">동아리에 지원하시겠어요?</div>
           <div>
             <button
               type="button"
               onClick={handleApply}
               disabled={isPending}
-              className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
+              className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
             >
               지원하기
             </button>
             <button
               type="button"
               onClick={closeConfirm}
-              className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400"
+              className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400"
             >
               취소
             </button>
diff --git a/src/pages/Club/ClubDetail/index.tsx b/src/pages/Club/ClubDetail/index.tsx
index 14a97a70..14aad7e5 100644
--- a/src/pages/Club/ClubDetail/index.tsx
+++ b/src/pages/Club/ClubDetail/index.tsx
@@ -56,8 +56,8 @@ function ClubDetail() {
           />
           <div className="flex min-w-0 flex-col gap-1">
             <div className="text-xl leading-5.5 font-black">{clubDetail.name}</div>
-            <div className="text-body3">{clubDetail.categoryName}</div>
-            <div className="text-sub2 truncate">{clubDetail.description}</div>
+            <div className="Body3">{clubDetail.categoryName}</div>
+            <div className="Sub2 truncate">{clubDetail.description}</div>
           </div>
         </div>
         <div className="flex items-center gap-3 bg-white px-3">
diff --git a/src/pages/Club/ClubList/components/ClubCard.tsx b/src/pages/Club/ClubList/components/ClubCard.tsx
index 6e859987..208e3621 100644
--- a/src/pages/Club/ClubList/components/ClubCard.tsx
+++ b/src/pages/Club/ClubList/components/ClubCard.tsx
@@ -68,12 +68,12 @@ function ClubCard({ club }: ClubCardProps) {
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-1">
-            <div className="text-h3 text-indigo-700">{club.name}</div>
-            <div className="text-cap1 text-indigo-300">{club.categoryName}</div>
+            <div className="H3 text-indigo-700">{club.name}</div>
+            <div className="Caption1 text-indigo-300">{club.categoryName}</div>
           </div>
           {clubTag && (
             <div
-              className="text-cap1 flex items-center gap-0.5 rounded-full px-3 py-1"
+              className="Caption1 flex items-center gap-0.5 rounded-full px-3 py-1"
               style={{
                 backgroundColor: clubTag.bgColor,
                 color: clubTag.textColor,
@@ -84,7 +84,7 @@ function ClubCard({ club }: ClubCardProps) {
             </div>
           )}
         </div>
-        <div className="text-sub2 truncate text-indigo-300">{club.description}</div>
+        <div className="Sub2 truncate text-indigo-300">{club.description}</div>
       </div>
     </Link>
   );
diff --git a/src/pages/Club/ClubList/index.tsx b/src/pages/Club/ClubList/index.tsx
index f3f6a7c1..186f1d7d 100644
--- a/src/pages/Club/ClubList/index.tsx
+++ b/src/pages/Club/ClubList/index.tsx
@@ -22,7 +22,7 @@ function ClubList() {
     <div className="pb-15">
       <SearchBar isButton />
       <div className="bg-background mt-13 flex flex-col gap-2 px-3 pt-2 pb-4">
-        <div className="text-sub2 text-indigo-300">
+        <div className="Sub2 text-indigo-300">
           총 <span className="text-black">{totalCount}개</span>의 동아리
         </div>
 
diff --git a/src/pages/Club/ClubSearch/index.tsx b/src/pages/Club/ClubSearch/index.tsx
index 43f16393..f9445a60 100644
--- a/src/pages/Club/ClubSearch/index.tsx
+++ b/src/pages/Club/ClubSearch/index.tsx
@@ -50,7 +50,7 @@ function ClubSearch() {
           <div className="py-6 text-center text-xs text-indigo-300">검색어를 입력해서 동아리를 검색해보세요.</div>
         ) : (
           <>
-            <div className="text-cap2 text-indigo-300">
+            <div className="Caption2 text-indigo-300">
               총 <span className="font-bold text-black">{totalCount}개</span>의 동아리
             </div>
 
diff --git a/src/pages/Home/components/CouncilNoticeCard.tsx b/src/pages/Home/components/CouncilNoticeCard.tsx
index 94103c83..05b24357 100644
--- a/src/pages/Home/components/CouncilNoticeCard.tsx
+++ b/src/pages/Home/components/CouncilNoticeCard.tsx
@@ -18,10 +18,10 @@ function CouncilNoticeCard({
       className="bg-indigo-0 border-indigo-5 block rounded-lg border-b px-3 py-3"
     >
       <div className="flex items-center gap-1">
-        <div className="text-h3 leading-[15px] font-semibold text-indigo-700">{title}</div>
+        <div className="H3 leading-[15px] font-semibold text-indigo-700">{title}</div>
         {!isRead && <div className="h-1 w-1 rounded-full bg-[#ff4e4e]" />}
       </div>
-      <div className="text-sub2 text-indigo-300">{createdAt}</div>
+      <div className="Sub2 text-indigo-300">{createdAt}</div>
     </Link>
   );
 }
diff --git a/src/pages/Home/components/SimpleAppliedClubCard.tsx b/src/pages/Home/components/SimpleAppliedClubCard.tsx
index e7e7dd92..cb9c4ce7 100644
--- a/src/pages/Home/components/SimpleAppliedClubCard.tsx
+++ b/src/pages/Home/components/SimpleAppliedClubCard.tsx
@@ -17,14 +17,14 @@ function SimpleAppliedClubCard({ club }: SimpleAppliedClubCardProps) {
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between">
           <div className="flex w-full items-center justify-between gap-1">
-            <div className="text-h3 text-indigo-700">{club.name}</div>
-            <div className="text-cap1 flex items-center gap-0.5 rounded-full bg-[#E8EBEFE5] px-3 py-1 text-[#5A6B7F]">
+            <div className="H3 text-indigo-700">{club.name}</div>
+            <div className="Caption1 flex items-center gap-0.5 rounded-full bg-[#E8EBEFE5] px-3 py-1 text-[#5A6B7F]">
               <CircleWarningIcon />
               승인 대기 중
             </div>
           </div>
         </div>
-        <div className="text-sub2 mt-1 text-indigo-300">지원일: {formatIsoDateToYYYYMMDD(club.appliedAt)}</div>
+        <div className="Sub2 mt-1 text-indigo-300">지원일: {formatIsoDateToYYYYMMDD(club.appliedAt)}</div>
       </div>
     </Link>
   );
diff --git a/src/pages/Home/components/SimpleClubCard.tsx b/src/pages/Home/components/SimpleClubCard.tsx
index 99ad6492..dde070ec 100644
--- a/src/pages/Home/components/SimpleClubCard.tsx
+++ b/src/pages/Home/components/SimpleClubCard.tsx
@@ -16,21 +16,21 @@ function SimpleClubCard({ club }: SimpleClubCardProps) {
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-1">
-            <div className="text-h3 text-indigo-700">{club.name}</div>
+            <div className="H3 text-indigo-700">{club.name}</div>
             {club.position == '회장' && (
-              <div className="text-indigo-0 text-cap2-strong flex items-center rounded-sm bg-[#3182F6] px-1 py-0.5">
+              <div className="text-indigo-0 Caption2-strong flex items-center rounded-sm bg-[#3182F6] px-1 py-0.5">
                 운영진
               </div>
             )}
           </div>
           {/* {!club.isFeePaid && (
-            <div className="text-cap2 flex items-center rounded-full bg-[#FFE5E5E5] px-3 py-1.5 font-semibold text-[#FF4E4E]">
+            <div className="Caption2 flex items-center rounded-full bg-[#FFE5E5E5] px-3 py-1.5 font-semibold text-[#FF4E4E]">
               <WarningIcon />
               납부할 회비가 있어요
             </div>
           )} */}
         </div>
-        <div className="text-sub2 mt-1 text-indigo-300">
+        <div className="Sub2 mt-1 text-indigo-300">
           {club.position}·{club.categoryName}
         </div>
       </div>
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 42aaa152..8b5588d5 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -40,7 +40,7 @@ function scheduleDateToPath(startedAt: string) {
 function SectionErrorFallback() {
   return (
     <div className="border-indigo-5 flex w-full items-center justify-center rounded-lg border bg-white py-5">
-      <span className="text-sub2 text-gray-400">불러오는 중 오류가 발생했어요</span>
+      <span className="Sub2 text-gray-400">불러오는 중 오류가 발생했어요</span>
     </div>
   );
 }
@@ -122,9 +122,9 @@ function MyClubsSection() {
     return (
       <Card>
         <div>
-          <div className="text-h3">나에게 맞는 동아리를 찾아보세요</div>
+          <div className="H3">나에게 맞는 동아리를 찾아보세요</div>
         </div>
-        <Link to="/clubs" className="bg-primary text-sub2 w-full rounded-sm py-3 text-center text-white">
+        <Link to="/clubs" className="bg-primary Sub2 w-full rounded-sm py-3 text-center text-white">
           동아리 둘러보기
         </Link>
       </Card>
@@ -133,7 +133,7 @@ function MyClubsSection() {
 
   return (
     <>
-      <div className="text-h3">내 동아리</div>
+      <div className="H3">내 동아리</div>
       <div className="flex flex-col gap-2">
         {appliedClubsData.appliedClubs.map((club) => (
           <SimpleAppliedClubCard key={club.id} club={club} />
@@ -176,13 +176,11 @@ function ScheduleSection() {
               <CalendarIcon style={{ color: '#fff' }} />
             </div>
             <div className="flex min-w-0 flex-1 flex-col">
-              <div className="text-h3 overflow-hidden text-ellipsis whitespace-nowrap text-indigo-700">
+              <div className="H3 overflow-hidden text-ellipsis whitespace-nowrap text-indigo-700">
                 [{SCHEDULE_LABEL[schedule.scheduleCategory]}] {schedule.title}
               </div>
 
-              <div className="text-sub2 text-indigo-300">
-                {formatScheduleDate(schedule.startedAt, schedule.endedAt)}
-              </div>
+              <div className="Sub2 text-indigo-300">{formatScheduleDate(schedule.startedAt, schedule.endedAt)}</div>
             </div>
           </div>
         </NavigateCard>
@@ -234,8 +232,8 @@ function Home() {
 
       <div>
         <div className="flex justify-between">
-          <div className="text-h3">다가오는 일정</div>
-          <Link to="/schedule" className="text-sub2 text-[#3182F6]">
+          <div className="H3">다가오는 일정</div>
+          <Link to="/schedule" className="Sub2 text-[#3182F6]">
             전체보기
           </Link>
         </div>
@@ -248,8 +246,8 @@ function Home() {
 
       <div>
         <div className="flex justify-between">
-          <div className="text-h3">총동아리연합회</div>
-          <Link to="/council?tab=notice" className="text-sub2 text-[#3182F6]">
+          <div className="H3">총동아리연합회</div>
+          <Link to="/council?tab=notice" className="Sub2 text-[#3182F6]">
             더보기
           </Link>
         </div>
diff --git a/src/pages/Manager/ManagedAccount/index.tsx b/src/pages/Manager/ManagedAccount/index.tsx
index 3f945f52..72cafd6d 100644
--- a/src/pages/Manager/ManagedAccount/index.tsx
+++ b/src/pages/Manager/ManagedAccount/index.tsx
@@ -55,7 +55,7 @@ function ManagedAccount() {
   return (
     <div className="flex h-full flex-col bg-white">
       <div className="flex flex-1 flex-col gap-6 overflow-auto p-5">
-        <h2 className="text-h3 text-indigo-500">회비 정보</h2>
+        <h2 className="H3 text-indigo-500">회비 정보</h2>
 
         <div className="flex flex-col gap-1">
           <label className="text-[15px] leading-6 font-medium text-indigo-300">가입비</label>
@@ -124,7 +124,7 @@ function ManagedAccount() {
 
       <BottomModal isOpen={isBankModalOpen} onClose={() => setIsBankModalOpen(false)}>
         <div className="flex flex-col gap-4 px-4 pt-6 pb-4">
-          <h3 className="text-h3 text-center font-bold">은행 선택</h3>
+          <h3 className="H3 text-center font-bold">은행 선택</h3>
           <div className="grid max-h-80 grid-cols-2 gap-2 overflow-y-auto">
             {banks?.map((bank) => (
               <button
@@ -138,7 +138,7 @@ function ManagedAccount() {
                 className="bg-indigo-5 hover:bg-indigo-10 flex items-center gap-2 rounded-lg p-3 transition-colors"
               >
                 {bank.imageUrl && <img src={bank.imageUrl} alt={bank.name} className="h-8 w-8 object-contain" />}
-                <span className="text-sub2">{bank.name}</span>
+                <span className="Sub2">{bank.name}</span>
               </button>
             ))}
           </div>
diff --git a/src/pages/Manager/ManagedApplicationDetail/index.tsx b/src/pages/Manager/ManagedApplicationDetail/index.tsx
index 9724faf9..c175e5e2 100644
--- a/src/pages/Manager/ManagedApplicationDetail/index.tsx
+++ b/src/pages/Manager/ManagedApplicationDetail/index.tsx
@@ -57,20 +57,18 @@ function ManagedApplicationDetail() {
               alt={`${application.name} 프로필`}
             />
             <div className="flex flex-col gap-1">
-              <div className="text-h4 text-indigo-700">
+              <div className="H4 text-indigo-700">
                 {application.name}
-                <span className="text-sub3 ml-2 text-indigo-400">({application.studentNumber})</span>
-              </div>
-              <div className="text-sub4 text-gray-500">
-                지원일: {formatIsoDateToYYYYMMDDHHMM(application.appliedAt)}
+                <span className="Sub3 ml-2 text-indigo-400">({application.studentNumber})</span>
               </div>
+              <div className="Sub4 text-gray-500">지원일: {formatIsoDateToYYYYMMDDHHMM(application.appliedAt)}</div>
             </div>
           </div>
         </section>
 
         {application.feePaymentImageUrl && (
           <section className="flex flex-col gap-3 rounded-lg bg-white p-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)]">
-            <span className="text-h4">회비 납부 인증</span>
+            <span className="H4">회비 납부 인증</span>
             <div className="flex justify-center">
               <button type="button" onClick={openImage} className="h-52 w-36 overflow-hidden rounded-xl">
                 <img src={application.feePaymentImageUrl} alt="회비 납부 인증" className="h-full w-full object-cover" />
@@ -81,8 +79,8 @@ function ManagedApplicationDetail() {
 
         <section className="flex flex-col gap-4">
           <div className="flex items-center justify-between">
-            <span className="text-h4">지원서 내용</span>
-            <span className="text-sub4 text-gray-500">{application.answers.length}개의 문항</span>
+            <span className="H4">지원서 내용</span>
+            <span className="Sub4 text-gray-500">{application.answers.length}개의 문항</span>
           </div>
 
           <div className="flex flex-col gap-3">
@@ -92,16 +90,16 @@ function ManagedApplicationDetail() {
                 className="flex flex-col gap-3 rounded-lg bg-white p-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)]"
               >
                 <div className="flex items-center justify-between">
-                  <span className="text-sub2 font-semibold text-indigo-700">문항 {index + 1}</span>
+                  <span className="Sub2 font-semibold text-indigo-700">문항 {index + 1}</span>
                   {answer.isRequired && (
-                    <span className="text-cap1 rounded-full bg-red-50 px-2 py-0.5 text-red-500">필수</span>
+                    <span className="Caption1 rounded-full bg-red-50 px-2 py-0.5 text-red-500">필수</span>
                   )}
                 </div>
 
-                <p className="text-sub3 text-gray-700">{answer.question}</p>
+                <p className="Sub3 text-gray-700">{answer.question}</p>
 
                 <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  <p className="text-sub3 whitespace-pre-wrap text-gray-600">{answer.answer || '(응답 없음)'}</p>
+                  <p className="Sub3 whitespace-pre-wrap text-gray-600">{answer.answer || '(응답 없음)'}</p>
                 </div>
               </div>
             ))}
@@ -132,8 +130,8 @@ function ManagedApplicationDetail() {
       {/* Approve Confirm Modal */}
       <BottomModal isOpen={isApproveOpen} onClose={closeApprove}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">지원 승인</div>
-          <div className="text-body3 text-indigo-400">{application.name}님의 지원을 승인하시겠어요?</div>
+          <div className="Body2 font-semibold text-indigo-700">지원 승인</div>
+          <div className="Body3 text-indigo-400">{application.name}님의 지원을 승인하시겠어요?</div>
           <div className="flex gap-2">
             <button
               type="button"
@@ -157,8 +155,8 @@ function ManagedApplicationDetail() {
       {/* Reject Confirm Modal */}
       <BottomModal isOpen={isRejectOpen} onClose={closeReject}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">지원 거절</div>
-          <div className="text-body3 text-indigo-400">{application.name}님의 지원을 거절하시겠어요?</div>
+          <div className="Body2 font-semibold text-indigo-700">지원 거절</div>
+          <div className="Body3 text-indigo-400">{application.name}님의 지원을 거절하시겠어요?</div>
           <div className="flex gap-2">
             <button
               type="button"
diff --git a/src/pages/Manager/ManagedApplicationList/index.tsx b/src/pages/Manager/ManagedApplicationList/index.tsx
index 2f22b4fd..e6c75bf1 100644
--- a/src/pages/Manager/ManagedApplicationList/index.tsx
+++ b/src/pages/Manager/ManagedApplicationList/index.tsx
@@ -44,7 +44,7 @@ function ManagedApplicationList() {
       <div className="flex flex-col gap-2 p-3">
         <UserInfoCard type="detail" />
         <div className="flex items-center justify-center py-10">
-          <p className="text-body2 text-indigo-300">현재 진행 중인 모집 공고가 없습니다.</p>
+          <p className="Body2 text-indigo-300">현재 진행 중인 모집 공고가 없습니다.</p>
         </div>
       </div>
     );
@@ -55,8 +55,8 @@ function ManagedApplicationList() {
       <UserInfoCard type="detail" />
 
       <div className="rounded-lg bg-white px-4 py-3 shadow-[0_1px_3px_rgba(0,0,0,0.08)]">
-        <span className="text-body2 font-semibold text-indigo-700">대기 중</span>
-        <span className="text-body3 ml-1 text-indigo-400">{managedClubApplicationList?.totalCount ?? 0}명</span>
+        <span className="Body2 font-semibold text-indigo-700">대기 중</span>
+        <span className="Body3 ml-1 text-indigo-400">{managedClubApplicationList?.totalCount ?? 0}명</span>
       </div>
 
       <div className="flex flex-col gap-2">
@@ -69,10 +69,10 @@ function ManagedApplicationList() {
             <div className="flex flex-1 items-center gap-2">
               <img className="h-10 w-10 rounded-full" src={application.imageUrl} alt="Member Avatar" />
               <div>
-                <div className="text-body2 text-indigo-700">
-                  {application.name} <span className="text-body3">({application.studentNumber})</span>
+                <div className="Body2 text-indigo-700">
+                  {application.name} <span className="Body3">({application.studentNumber})</span>
                 </div>
-                <div className="text-cap1 text-indigo-300">
+                <div className="Caption1 text-indigo-300">
                   지원일 : {formatIsoDateToYYYYMMDDHHMM(application.appliedAt)}
                 </div>
               </div>
@@ -111,7 +111,7 @@ function ManagedApplicationList() {
             이전
           </button>
 
-          <span className="text-body3 font-semibold">
+          <span className="Body3 font-semibold">
             {page} / {totalPages}
           </span>
 
diff --git a/src/pages/Manager/ManagedClubDetail/index.tsx b/src/pages/Manager/ManagedClubDetail/index.tsx
index 4874c2a8..14723da3 100644
--- a/src/pages/Manager/ManagedClubDetail/index.tsx
+++ b/src/pages/Manager/ManagedClubDetail/index.tsx
@@ -21,7 +21,7 @@ function ManagedClubDetail() {
             <div className="flex items-center justify-between px-3 py-2">
               <div className="flex items-center gap-4">
                 <Icon />
-                <div className="text-sub2">{label}</div>
+                <div className="Sub2">{label}</div>
               </div>
               <RightArrowIcon />
             </div>
diff --git a/src/pages/Manager/ManagedClubList/index.tsx b/src/pages/Manager/ManagedClubList/index.tsx
index a848e252..e058560e 100644
--- a/src/pages/Manager/ManagedClubList/index.tsx
+++ b/src/pages/Manager/ManagedClubList/index.tsx
@@ -15,7 +15,7 @@ function ManagedClubList() {
             <div className="flex items-center justify-between px-3 py-2">
               <div className="flex items-center gap-4">
                 <img src={club.imageUrl} alt="Club Avatar" className="h-10 w-10" />
-                <div className="text-sub2">{club.name}</div>
+                <div className="Sub2">{club.name}</div>
               </div>
               <RightArrowIcon />
             </div>
diff --git a/src/pages/Manager/ManagedClubProfile/index.tsx b/src/pages/Manager/ManagedClubProfile/index.tsx
index 15bb7ece..0cdac451 100644
--- a/src/pages/Manager/ManagedClubProfile/index.tsx
+++ b/src/pages/Manager/ManagedClubProfile/index.tsx
@@ -108,7 +108,7 @@ function ManagedClubInfo() {
               className="border-indigo-75 hover:bg-indigo-25 flex h-40 w-40 flex-col items-center justify-center gap-2.5 rounded-xl border transition-colors"
             >
               <ImageIcon />
-              <p className="text-sub4 text-center whitespace-pre-line text-indigo-100">{'이미지를 \n 추가해주세요'}</p>
+              <p className="Sub4 text-center whitespace-pre-line text-indigo-100">{'이미지를 \n 추가해주세요'}</p>
             </button>
           ) : (
             <div className="relative h-40 w-40 overflow-hidden rounded-xl">
@@ -207,17 +207,17 @@ function ManagedClubInfo() {
 
       <BottomModal isOpen={isSubmitModalOpen} onClose={closeSubmitModal}>
         <div className="flex flex-col gap-10 px-8 pt-7 pb-4">
-          <div className="text-h3 text-center whitespace-pre-wrap">동아리 정보를 수정하시겠어요?</div>
+          <div className="H3 text-center whitespace-pre-wrap">동아리 정보를 수정하시겠어요?</div>
           <div>
             <button
               type="button"
               disabled={isPending || isUploading}
               onClick={handleSubmit}
-              className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:cursor-not-allowed disabled:opacity-50"
+              className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:cursor-not-allowed disabled:opacity-50"
             >
               {isUploading ? '수정 중...' : isPending ? '수정 중...' : '수정하기'}
             </button>
-            <button onClick={closeSubmitModal} className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400">
+            <button onClick={closeSubmitModal} className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400">
               취소하기
             </button>
           </div>
diff --git a/src/pages/Manager/ManagedMemberApplicationDetail/index.tsx b/src/pages/Manager/ManagedMemberApplicationDetail/index.tsx
index 58242b87..094bd372 100644
--- a/src/pages/Manager/ManagedMemberApplicationDetail/index.tsx
+++ b/src/pages/Manager/ManagedMemberApplicationDetail/index.tsx
@@ -18,7 +18,7 @@ function ManagedMemberApplicationDetail() {
   if (!application) {
     return (
       <div className="flex h-full items-center justify-center p-4">
-        <p className="text-body2 text-indigo-300">해당 회원의 동아리 지원 내역이 없습니다.</p>
+        <p className="Body2 text-indigo-300">해당 회원의 동아리 지원 내역이 없습니다.</p>
       </div>
     );
   }
@@ -34,20 +34,18 @@ function ManagedMemberApplicationDetail() {
               alt={`${application.name} 프로필`}
             />
             <div className="flex flex-col gap-1">
-              <div className="text-h4 text-indigo-700">
+              <div className="H4 text-indigo-700">
                 {application.name}
-                <span className="text-sub3 ml-2 text-indigo-400">({application.studentNumber})</span>
-              </div>
-              <div className="text-sub4 text-gray-500">
-                지원일: {formatIsoDateToYYYYMMDDHHMM(application.appliedAt)}
+                <span className="Sub3 ml-2 text-indigo-400">({application.studentNumber})</span>
               </div>
+              <div className="Sub4 text-gray-500">지원일: {formatIsoDateToYYYYMMDDHHMM(application.appliedAt)}</div>
             </div>
           </div>
         </section>
 
         {application.feePaymentImageUrl && (
           <section className="flex flex-col gap-3 rounded-lg bg-white p-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)]">
-            <span className="text-h4">회비 납부 인증</span>
+            <span className="H4">회비 납부 인증</span>
             <div className="flex justify-center">
               <button type="button" onClick={openImage} className="h-52 w-36 overflow-hidden rounded-xl">
                 <img src={application.feePaymentImageUrl} alt="회비 납부 인증" className="h-full w-full object-cover" />
@@ -58,8 +56,8 @@ function ManagedMemberApplicationDetail() {
 
         <section className="flex flex-col gap-4">
           <div className="flex items-center justify-between">
-            <span className="text-h4">지원서 내용</span>
-            <span className="text-sub4 text-gray-500">{application.answers.length}개의 문항</span>
+            <span className="H4">지원서 내용</span>
+            <span className="Sub4 text-gray-500">{application.answers.length}개의 문항</span>
           </div>
 
           <div className="flex flex-col gap-3">
@@ -69,16 +67,16 @@ function ManagedMemberApplicationDetail() {
                 className="flex flex-col gap-3 rounded-lg bg-white p-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)]"
               >
                 <div className="flex items-center justify-between">
-                  <span className="text-sub2 font-semibold text-indigo-700">문항 {index + 1}</span>
+                  <span className="Sub2 font-semibold text-indigo-700">문항 {index + 1}</span>
                   {answer.isRequired && (
-                    <span className="text-cap1 rounded-full bg-red-50 px-2 py-0.5 text-red-500">필수</span>
+                    <span className="Caption1 rounded-full bg-red-50 px-2 py-0.5 text-red-500">필수</span>
                   )}
                 </div>
 
-                <p className="text-sub3 text-gray-700">{answer.question}</p>
+                <p className="Sub3 text-gray-700">{answer.question}</p>
 
                 <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  <p className="text-sub3 whitespace-pre-wrap text-gray-600">{answer.answer || '(응답 없음)'}</p>
+                  <p className="Sub3 whitespace-pre-wrap text-gray-600">{answer.answer || '(응답 없음)'}</p>
                 </div>
               </div>
             ))}
diff --git a/src/pages/Manager/ManagedMemberList/index.tsx b/src/pages/Manager/ManagedMemberList/index.tsx
index 34cc54e9..7d6225a8 100644
--- a/src/pages/Manager/ManagedMemberList/index.tsx
+++ b/src/pages/Manager/ManagedMemberList/index.tsx
@@ -178,7 +178,7 @@ function ManagedMemberList() {
       <div className="flex flex-1 flex-col gap-2 overflow-auto p-3">
         <UserInfoCard type="detail" />
 
-        <Card className="text-body3 flex-row">
+        <Card className="Body3 flex-row">
           <div className="bg-indigo-5 flex-1 rounded-sm p-2 text-center">총 부원 수 : {total}명</div>
         </Card>
 
@@ -211,7 +211,7 @@ function ManagedMemberList() {
 
         {groupedEntries.map(([position, groupMembers]) => (
           <div key={position} className="flex flex-col gap-1">
-            <div className="text-body2 px-1 py-1 font-semibold text-indigo-700">{POSITION_LABELS[position]}</div>
+            <div className="Body2 px-1 py-1 font-semibold text-indigo-700">{POSITION_LABELS[position]}</div>
             {groupMembers.map((member) => (
               <Card key={member.userId} className="flex-row items-center gap-2">
                 <div className="flex flex-1 items-center gap-2">
@@ -220,10 +220,10 @@ function ManagedMemberList() {
                     {member.name.charAt(0)}
                   </div>
                   <div>
-                    <div className="text-body2 text-indigo-700">
-                      {member.name} <span className="text-body3 text-indigo-400">({member.studentNumber})</span>
+                    <div className="Body2 text-indigo-700">
+                      {member.name} <span className="Body3 text-indigo-400">({member.studentNumber})</span>
                     </div>
-                    <div className="text-cap1 text-indigo-300">{POSITION_LABELS[member.position]}</div>
+                    <div className="Caption1 text-indigo-300">{POSITION_LABELS[member.position]}</div>
                   </div>
                 </div>
                 {!PROTECTED_POSITIONS.has(position) && (
@@ -243,7 +243,7 @@ function ManagedMemberList() {
 
         {preMembersList.preMembers.length > 0 && (
           <div className="flex flex-col gap-1">
-            <div className="text-body2 px-1 py-1 font-semibold text-indigo-700">사전 등록 회원</div>
+            <div className="Body2 px-1 py-1 font-semibold text-indigo-700">사전 등록 회원</div>
             {preMembersList.preMembers.map((member) => (
               <Card key={member.preMemberId} className="flex-row items-center gap-2">
                 <div className="flex flex-1 items-center gap-2">
@@ -251,10 +251,10 @@ function ManagedMemberList() {
                     {member.name.charAt(0)}
                   </div>
                   <div>
-                    <div className="text-body2 text-indigo-700">
-                      {member.name} <span className="text-body3 text-indigo-400">({member.studentNumber})</span>
+                    <div className="Body2 text-indigo-700">
+                      {member.name} <span className="Body3 text-indigo-400">({member.studentNumber})</span>
                     </div>
-                    <div className="text-cap1 text-indigo-300">사전 등록</div>
+                    <div className="Caption1 text-indigo-300">사전 등록</div>
                   </div>
                 </div>
                 <button
@@ -274,25 +274,25 @@ function ManagedMemberList() {
       {/* Member Action Modal */}
       <BottomModal isOpen={isActionOpen} onClose={closeAction}>
         <div className="flex flex-col gap-2 p-5">
-          <div className="text-body2 pb-2 font-semibold text-indigo-700">{selectedMember?.name} 관리</div>
+          <div className="Body2 pb-2 font-semibold text-indigo-700">{selectedMember?.name} 관리</div>
           <button
             type="button"
             onClick={handleOpenMemberApplication}
-            className="text-body3 active:bg-indigo-5 rounded-lg py-3 text-left"
+            className="Body3 active:bg-indigo-5 rounded-lg py-3 text-left"
           >
             지원서 보기
           </button>
           <button
             type="button"
             onClick={handleOpenPositionChange}
-            className="text-body3 active:bg-indigo-5 rounded-lg py-3 text-left"
+            className="Body3 active:bg-indigo-5 rounded-lg py-3 text-left"
           >
             직책 변경
           </button>
           <button
             type="button"
             onClick={handleOpenRemove}
-            className="text-body3 active:bg-indigo-5 rounded-lg py-3 text-left text-red-500"
+            className="Body3 active:bg-indigo-5 rounded-lg py-3 text-left text-red-500"
           >
             부원 추방
           </button>
@@ -302,8 +302,8 @@ function ManagedMemberList() {
       {/* Transfer President Modal */}
       <BottomModal isOpen={isTransferOpen} onClose={closeTransfer}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">회장 위임</div>
-          <div className="text-cap1 text-indigo-400">새 회장을 선택해주세요.</div>
+          <div className="Body2 font-semibold text-indigo-700">회장 위임</div>
+          <div className="Caption1 text-indigo-400">새 회장을 선택해주세요.</div>
           <div className="flex max-h-60 flex-col gap-1 overflow-auto">
             {nonPresidentMembers.map((member) => {
               const isSelected = transferTarget === member.userId;
@@ -321,7 +321,7 @@ function ManagedMemberList() {
                     <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-100 text-indigo-400">
                       {member.name.charAt(0)}
                     </div>
-                    <div className={`text-body3 ${isSelected ? 'text-indigo-700' : 'text-indigo-400'}`}>
+                    <div className={`Body3 ${isSelected ? 'text-indigo-700' : 'text-indigo-400'}`}>
                       {member.name} ({member.studentNumber})
                     </div>
                   </div>
@@ -344,8 +344,8 @@ function ManagedMemberList() {
       {/* Change Vice President Modal */}
       <BottomModal isOpen={isVPOpen} onClose={closeVP}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">부회장 변경</div>
-          <div className="text-cap1 text-indigo-400">새 부회장을 선택하거나 해제해주세요.</div>
+          <div className="Body2 font-semibold text-indigo-700">부회장 변경</div>
+          <div className="Caption1 text-indigo-400">새 부회장을 선택하거나 해제해주세요.</div>
           <div className="flex max-h-60 flex-col gap-1 overflow-auto">
             <button
               type="button"
@@ -354,7 +354,7 @@ function ManagedMemberList() {
                 vpTarget === null ? 'bg-indigo-5' : 'active:bg-indigo-5'
               }`}
             >
-              <div className={`text-body3 ${vpTarget === null ? 'text-red-500' : 'text-red-300'}`}>부회장 해제</div>
+              <div className={`Body3 ${vpTarget === null ? 'text-red-500' : 'text-red-300'}`}>부회장 해제</div>
               {vpTarget === null && <CheckIcon className="h-4 w-4 text-blue-500" />}
             </button>
             {nonPresidentMembers.map((member) => {
@@ -373,7 +373,7 @@ function ManagedMemberList() {
                     <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-100 text-indigo-400">
                       {member.name.charAt(0)}
                     </div>
-                    <div className={`text-body3 ${isSelected ? 'text-indigo-700' : 'text-indigo-400'}`}>
+                    <div className={`Body3 ${isSelected ? 'text-indigo-700' : 'text-indigo-400'}`}>
                       {member.name} ({member.studentNumber})
                     </div>
                   </div>
@@ -396,7 +396,7 @@ function ManagedMemberList() {
       {/* Change Position Modal */}
       <BottomModal isOpen={isPositionOpen} onClose={closePosition}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">{selectedMember?.name} 직책 변경</div>
+          <div className="Body2 font-semibold text-indigo-700">{selectedMember?.name} 직책 변경</div>
           <div className="flex max-h-60 flex-col gap-1 overflow-auto">
             {(['MANAGER', 'MEMBER'] as const).map((position) => {
               const isSelected = selectedPosition === position;
@@ -409,7 +409,7 @@ function ManagedMemberList() {
                     isSelected ? 'bg-indigo-5' : 'active:bg-indigo-5'
                   }`}
                 >
-                  <div className={`text-body3 ${isSelected ? 'text-indigo-700' : 'text-indigo-400'}`}>
+                  <div className={`Body3 ${isSelected ? 'text-indigo-700' : 'text-indigo-400'}`}>
                     {POSITION_LABELS[position]}
                   </div>
                   {isSelected && <CheckIcon className="h-4 w-4 text-blue-500" />}
@@ -431,8 +431,8 @@ function ManagedMemberList() {
       {/* Remove Member Confirm Modal */}
       <BottomModal isOpen={isRemoveOpen} onClose={closeRemove}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">부원 추방</div>
-          <div className="text-body3 text-indigo-400">정말 {selectedMember?.name}님을 추방하시겠어요?</div>
+          <div className="Body2 font-semibold text-indigo-700">부원 추방</div>
+          <div className="Body3 text-indigo-400">정말 {selectedMember?.name}님을 추방하시겠어요?</div>
           <div className="flex gap-2">
             <button
               type="button"
@@ -456,10 +456,10 @@ function ManagedMemberList() {
       {/* Add Member Modal */}
       <BottomModal isOpen={isAddOpen} onClose={closeAdd}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">부원 추가</div>
-          <div className="text-cap1 text-indigo-400">서비스에 가입하지 않은 학생을 사전 등록합니다.</div>
+          <div className="Body2 font-semibold text-indigo-700">부원 추가</div>
+          <div className="Caption1 text-indigo-400">서비스에 가입하지 않은 학생을 사전 등록합니다.</div>
           <div className="flex flex-col gap-2">
-            <label className="text-cap1 text-indigo-400">학번</label>
+            <label className="Caption1 text-indigo-400">학번</label>
             <input
               type="text"
               value={newStudentNumber}
@@ -469,7 +469,7 @@ function ManagedMemberList() {
             />
           </div>
           <div className="flex flex-col gap-2">
-            <label className="text-cap1 text-indigo-400">이름</label>
+            <label className="Caption1 text-indigo-400">이름</label>
             <input
               type="text"
               value={newMemberName}
@@ -492,11 +492,11 @@ function ManagedMemberList() {
       {/* Pre-Member Action Modal */}
       <BottomModal isOpen={isPreMemberActionOpen} onClose={closePreMemberAction}>
         <div className="flex flex-col gap-2 p-5">
-          <div className="text-body2 pb-2 font-semibold text-indigo-700">{selectedPreMember?.name} 관리</div>
+          <div className="Body2 pb-2 font-semibold text-indigo-700">{selectedPreMember?.name} 관리</div>
           <button
             type="button"
             onClick={handleOpenPreMemberDelete}
-            className="text-body3 active:bg-indigo-5 rounded-lg py-3 text-left text-red-500"
+            className="Body3 active:bg-indigo-5 rounded-lg py-3 text-left text-red-500"
           >
             사전 등록 삭제
           </button>
@@ -506,10 +506,8 @@ function ManagedMemberList() {
       {/* Pre-Member Delete Confirm Modal */}
       <BottomModal isOpen={isPreMemberDeleteOpen} onClose={closePreMemberDelete}>
         <div className="flex flex-col gap-3 p-5">
-          <div className="text-body2 font-semibold text-indigo-700">사전 등록 삭제</div>
-          <div className="text-body3 text-indigo-400">
-            정말 {selectedPreMember?.name}님의 사전 등록을 삭제하시겠어요?
-          </div>
+          <div className="Body2 font-semibold text-indigo-700">사전 등록 삭제</div>
+          <div className="Body3 text-indigo-400">정말 {selectedPreMember?.name}님의 사전 등록을 삭제하시겠어요?</div>
           <div className="flex gap-2">
             <button
               type="button"
diff --git a/src/pages/Manager/ManagedRecruitmentForm/index.tsx b/src/pages/Manager/ManagedRecruitmentForm/index.tsx
index 3c4da2d5..c3fd47b0 100644
--- a/src/pages/Manager/ManagedRecruitmentForm/index.tsx
+++ b/src/pages/Manager/ManagedRecruitmentForm/index.tsx
@@ -77,14 +77,14 @@ function ManagedRecruitmentForm() {
       <form id="question-form" onSubmit={handleSubmit} className="flex flex-1 flex-col gap-4 overflow-auto p-3">
         <section className="flex flex-col gap-4">
           <div className="flex items-center justify-between">
-            <span className="text-h4">가입 문항 설정</span>
-            <span className="text-sub4 text-gray-500">{questions.length}개의 문항</span>
+            <span className="H4">가입 문항 설정</span>
+            <span className="Sub4 text-gray-500">{questions.length}개의 문항</span>
           </div>
 
           {questions.length === 0 ? (
             <div className="flex flex-col items-center justify-center gap-3 rounded-lg bg-white p-8 shadow-[0_2px_4px_rgba(0,0,0,0.1)]">
-              <p className="text-sub3 text-gray-400">등록된 문항이 없습니다.</p>
-              <button type="button" onClick={handleAddQuestion} className="text-sub3 text-indigo-600 hover:underline">
+              <p className="Sub3 text-gray-400">등록된 문항이 없습니다.</p>
+              <button type="button" onClick={handleAddQuestion} className="Sub3 text-indigo-600 hover:underline">
                 문항 추가하기
               </button>
             </div>
@@ -96,7 +96,7 @@ function ManagedRecruitmentForm() {
                   className="flex flex-col gap-3 rounded-lg bg-white p-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)]"
                 >
                   <div className="flex items-center justify-between">
-                    <span className="text-sub2 font-semibold text-indigo-700">문항 {index + 1}</span>
+                    <span className="Sub2 font-semibold text-indigo-700">문항 {index + 1}</span>
                     <button
                       type="button"
                       onClick={() => handleDeleteQuestion(q.tempId)}
@@ -112,7 +112,7 @@ function ManagedRecruitmentForm() {
                     placeholder="질문을 입력해주세요."
                     rows={2}
                     className={twMerge(
-                      'text-sub3 w-full resize-none rounded-lg border border-gray-200 p-3 transition-colors focus:border-indigo-500 focus:outline-none',
+                      'Sub3 w-full resize-none rounded-lg border border-gray-200 p-3 transition-colors focus:border-indigo-500 focus:outline-none',
                       !q.question.trim() && 'border-red-300'
                     )}
                   />
@@ -125,10 +125,7 @@ function ManagedRecruitmentForm() {
                       onChange={(e) => handleRequiredChange(q.tempId, e.target.checked)}
                       className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                     />
-                    <label
-                      htmlFor={`required-${q.tempId}`}
-                      className="text-sub4 cursor-pointer text-gray-600 select-none"
-                    >
+                    <label htmlFor={`required-${q.tempId}`} className="Sub4 cursor-pointer text-gray-600 select-none">
                       필수 응답
                     </label>
                   </div>
@@ -143,7 +140,7 @@ function ManagedRecruitmentForm() {
             className="hover:bg-indigo-25 flex items-center justify-center gap-2 rounded-lg border-2 border-dashed border-indigo-200 py-3 text-indigo-600 transition-colors hover:border-indigo-400"
           >
             <span className="text-xl font-bold">+</span>
-            <span className="text-sub3">문항 추가</span>
+            <span className="Sub3">문항 추가</span>
           </button>
         </section>
       </form>
diff --git a/src/pages/Manager/ManagedRecruitmentWrite/index.tsx b/src/pages/Manager/ManagedRecruitmentWrite/index.tsx
index 83f5db95..bb64e568 100644
--- a/src/pages/Manager/ManagedRecruitmentWrite/index.tsx
+++ b/src/pages/Manager/ManagedRecruitmentWrite/index.tsx
@@ -32,7 +32,7 @@ interface ImageItem {
 
 const sectionCardStyle =
   'flex w-full flex-col gap-4 rounded-2xl border border-indigo-25 bg-white px-4 py-4 shadow-[0_4px_12px_rgba(2,23,48,0.06)]';
-const sectionTitleStyle = 'text-h3 text-indigo-700';
+const sectionTitleStyle = 'H3 text-indigo-700';
 const compactButtonStyle =
   'group flex h-10 min-w-0 w-full items-center justify-between rounded-lg border border-indigo-50 bg-white px-3 text-left shadow-[0_2px_6px_rgba(2,23,48,0.06)]';
 
@@ -239,7 +239,7 @@ function ManagedRecruitmentWrite() {
           </div>
           <div className="h-px bg-indigo-50" />
           {isAlwaysRecruiting ? (
-            <p className="text-body2 text-indigo-300">상시 모집이 설정되어 있어 모집 기간 제한이 없습니다.</p>
+            <p className="Body2 text-indigo-300">상시 모집이 설정되어 있어 모집 기간 제한이 없습니다.</p>
           ) : (
             <div className="flex flex-col gap-2">
               <div
@@ -250,7 +250,7 @@ function ManagedRecruitmentWrite() {
               >
                 <div className="px-3 py-3">
                   <div className="grid grid-cols-[42px_minmax(0,1fr)] items-center gap-x-2">
-                    <span className="text-cap1 bg-indigo-5 rounded-full px-2 py-1 text-center text-indigo-600">
+                    <span className="Caption1 bg-indigo-5 rounded-full px-2 py-1 text-center text-indigo-600">
                       시작
                     </span>
                     <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_104px] gap-2 max-[390px]:grid-cols-1">
@@ -261,7 +261,7 @@ function ManagedRecruitmentWrite() {
                           <button type="button" onClick={toggle} className={compactButtonStyle}>
                             <span className="flex min-w-0 items-center gap-2">
                               <CalendarIcon aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-indigo-500" />
-                              <span className="text-sub2 truncate text-indigo-700">{formatDateDot(startDate)}</span>
+                              <span className="Sub2 truncate text-indigo-700">{formatDateDot(startDate)}</span>
                             </span>
                             <ChevronRight
                               aria-hidden="true"
@@ -278,7 +278,7 @@ function ManagedRecruitmentWrite() {
                           <button type="button" onClick={toggle} className={compactButtonStyle}>
                             <span className="flex items-center gap-2">
                               <ClockIcon aria-hidden="true" className="h-3.5 w-3.5 text-indigo-500" />
-                              <span className="text-sub2 text-indigo-700">{startTime}</span>
+                              <span className="Sub2 text-indigo-700">{startTime}</span>
                             </span>
                             <ChevronRight
                               aria-hidden="true"
@@ -295,7 +295,7 @@ function ManagedRecruitmentWrite() {
 
                 <div className="px-3 py-3">
                   <div className="grid grid-cols-[42px_minmax(0,1fr)] items-center gap-x-2">
-                    <span className="text-cap1 rounded-full bg-red-50 px-2 py-1 text-center text-red-500">종료</span>
+                    <span className="Caption1 rounded-full bg-red-50 px-2 py-1 text-center text-red-500">종료</span>
                     <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_104px] gap-2 max-[390px]:grid-cols-1">
                       <DatePicker
                         selectedDate={endDate}
@@ -304,7 +304,7 @@ function ManagedRecruitmentWrite() {
                           <button type="button" onClick={toggle} className={compactButtonStyle}>
                             <span className="flex min-w-0 items-center gap-2">
                               <CalendarIcon aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-indigo-500" />
-                              <span className="text-sub2 truncate text-indigo-700">{formatDateDot(endDate)}</span>
+                              <span className="Sub2 truncate text-indigo-700">{formatDateDot(endDate)}</span>
                             </span>
                             <ChevronRight
                               aria-hidden="true"
@@ -321,7 +321,7 @@ function ManagedRecruitmentWrite() {
                           <button type="button" onClick={toggle} className={compactButtonStyle}>
                             <span className="flex items-center gap-2">
                               <ClockIcon aria-hidden="true" className="h-3.5 w-3.5 text-indigo-500" />
-                              <span className="text-sub2 text-indigo-700">{endTime}</span>
+                              <span className="Sub2 text-indigo-700">{endTime}</span>
                             </span>
                             <ChevronRight
                               aria-hidden="true"
@@ -336,7 +336,7 @@ function ManagedRecruitmentWrite() {
               </div>
               {hasDateError && (
                 <div className="flex items-center gap-2 rounded-lg bg-red-50 px-3 py-2">
-                  <span className="text-body3 text-red-500">{getDateErrorMessage()}</span>
+                  <span className="Body3 text-red-500">{getDateErrorMessage()}</span>
                 </div>
               )}
             </div>
@@ -351,7 +351,7 @@ function ManagedRecruitmentWrite() {
             value={content}
             onChange={handleContentChange}
             rows={6}
-            className="text-body1 bg-indigo-0 mt-1 min-h-[156px] w-full resize-none overflow-hidden rounded-xl border border-indigo-50 px-4 py-3.5 text-indigo-700 shadow-[0_2px_6px_rgba(2,23,48,0.08)] placeholder:text-indigo-200"
+            className="Body1 bg-indigo-0 mt-1 min-h-[156px] w-full resize-none overflow-hidden rounded-xl border border-indigo-50 px-4 py-3.5 text-indigo-700 shadow-[0_2px_6px_rgba(2,23,48,0.08)] placeholder:text-indigo-200"
             placeholder="모집 공고 내용을 작성해주세요"
           />
         </section>
@@ -373,9 +373,7 @@ function ManagedRecruitmentWrite() {
                 className="border-indigo-75 bg-indigo-0 flex h-44 w-full max-w-[260px] flex-col items-center justify-center gap-3 rounded-2xl border"
               >
                 <ImageIcon aria-hidden="true" />
-                <p className="text-sub3 text-center whitespace-pre-line text-indigo-300">
-                  이미지를 {'\n'} 추가해주세요
-                </p>
+                <p className="Sub3 text-center whitespace-pre-line text-indigo-300">이미지를 {'\n'} 추가해주세요</p>
               </button>
             ) : (
               <div className="flex flex-col items-center gap-3">
@@ -448,14 +446,14 @@ function ManagedRecruitmentWrite() {
         <div className="mt-1 flex flex-col gap-2">
           <div className="flex flex-col gap-1">
             {uploadError && (
-              <p className="text-body3 text-red-500">{uploadError.message ?? '이미지 업로드에 실패했습니다.'}</p>
+              <p className="Body3 text-red-500">{uploadError.message ?? '이미지 업로드에 실패했습니다.'}</p>
             )}
-            {error && <p className="text-body3 text-red-500">{error.message ?? '모집 공고 수정에 실패했습니다.'}</p>}
+            {error && <p className="Body3 text-red-500">{error.message ?? '모집 공고 수정에 실패했습니다.'}</p>}
           </div>
           <button
             type="submit"
             disabled={isPending || isUploading || !content.trim() || hasDateError}
-            className="text-h3 bg-primary w-full rounded-xl py-3.5 text-white"
+            className="H3 bg-primary w-full rounded-xl py-3.5 text-white"
           >
             {isUploading ? '이미지 업로드 중…' : isPending ? '수정 중…' : '모집 공고 수정'}
           </button>
@@ -463,15 +461,15 @@ function ManagedRecruitmentWrite() {
       </form>
       <BottomModal isOpen={isChoiceModalOpen} onClose={closeChoiceModal}>
         <div className="flex flex-col gap-6 px-6 pt-7 pb-4">
-          <div className="text-h3 text-center whitespace-pre-wrap">기존 모집 공고가 있습니다. 불러와서 수정할까요?</div>
+          <div className="H3 text-center whitespace-pre-wrap">기존 모집 공고가 있습니다. 불러와서 수정할까요?</div>
           <div className="flex flex-col gap-2">
             <button
               onClick={applyExistingRecruitment}
-              className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white"
+              className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white"
             >
               기존 공고 불러오기
             </button>
-            <button onClick={handleReset} className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400">
+            <button onClick={handleReset} className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400">
               처음부터 작성
             </button>
           </div>
diff --git a/src/pages/Manager/components/TimePicker/index.tsx b/src/pages/Manager/components/TimePicker/index.tsx
index 8b6dfee2..82ed7e02 100644
--- a/src/pages/Manager/components/TimePicker/index.tsx
+++ b/src/pages/Manager/components/TimePicker/index.tsx
@@ -138,7 +138,7 @@ export default function TimePicker({ value, onChange, minuteStep = 5, renderTrig
       <button
         type="button"
         onClick={handleOpenModal}
-        className="bg-indigo-0 text-h3 w-full rounded-xl border border-indigo-50 px-4 py-3.5 text-indigo-700 shadow-[0_2px_6px_rgba(2,23,48,0.08)]"
+        className="bg-indigo-0 H3 w-full rounded-xl border border-indigo-50 px-4 py-3.5 text-indigo-700 shadow-[0_2px_6px_rgba(2,23,48,0.08)]"
       >
         {value}
       </button>
@@ -150,8 +150,8 @@ export default function TimePicker({ value, onChange, minuteStep = 5, renderTrig
       {renderTriggerElement()}
       <BottomModal isOpen={isOpen} onClose={handleCloseModal}>
         <div className="px-5 pt-6 pb-[calc(20px+var(--sab))]">
-          <div className="text-h3 text-center text-indigo-700">시간 선택</div>
-          <p className="text-cap1 mt-1 text-center text-indigo-300">스크롤해서 시간을 선택하세요</p>
+          <div className="H3 text-center text-indigo-700">시간 선택</div>
+          <p className="Caption1 mt-1 text-center text-indigo-300">스크롤해서 시간을 선택하세요</p>
           <div className="bg-indigo-0 relative mt-4 h-[200px] overflow-hidden rounded-2xl border border-indigo-50">
             <div className="pointer-events-none absolute inset-x-0 top-0 z-2 h-20 bg-linear-to-b from-[#F8FAFF] to-transparent" />
             <div className="pointer-events-none absolute inset-x-0 bottom-0 z-2 h-20 bg-linear-to-t from-[#F8FAFF] to-transparent" />
@@ -176,7 +176,7 @@ export default function TimePicker({ value, onChange, minuteStep = 5, renderTrig
                         scrollToItem(hourRef, hourOptions, hour);
                       }}
                       className={twMerge(
-                        'text-body2 h-10 w-full snap-center transition-all duration-150',
+                        'Body2 h-10 w-full snap-center transition-all duration-150',
                         isSelected ? 'font-bold tracking-tight text-indigo-700' : 'font-medium text-indigo-300'
                       )}
                     >
@@ -204,7 +204,7 @@ export default function TimePicker({ value, onChange, minuteStep = 5, renderTrig
                         scrollToItem(minuteRef, minuteOptions, minute);
                       }}
                       className={twMerge(
-                        'text-body2 h-10 w-full snap-center transition-all duration-150',
+                        'Body2 h-10 w-full snap-center transition-all duration-150',
                         isSelected ? 'font-bold tracking-tight text-indigo-700' : 'font-medium text-indigo-300'
                       )}
                     >
@@ -217,7 +217,7 @@ export default function TimePicker({ value, onChange, minuteStep = 5, renderTrig
             </div>
           </div>
           <div className="mt-3 flex justify-center">
-            <div className="bg-indigo-0 text-body2 rounded-full border border-indigo-50 px-4 py-1.5 text-indigo-700">
+            <div className="bg-indigo-0 Body2 rounded-full border border-indigo-50 px-4 py-1.5 text-indigo-700">
               선택 시간 {formatTime(draftHour, draftMinute)}
             </div>
           </div>
@@ -225,14 +225,14 @@ export default function TimePicker({ value, onChange, minuteStep = 5, renderTrig
             <button
               type="button"
               onClick={handleCloseModal}
-              className="bg-indigo-0 text-body2 flex-1 rounded-lg border border-indigo-50 py-3 text-indigo-400"
+              className="bg-indigo-0 Body2 flex-1 rounded-lg border border-indigo-50 py-3 text-indigo-400"
             >
               취소
             </button>
             <button
               type="button"
               onClick={handleConfirm}
-              className="bg-primary text-body2 flex-1 rounded-lg py-3 text-white"
+              className="bg-primary Body2 flex-1 rounded-lg py-3 text-white"
             >
               확인
             </button>
diff --git a/src/pages/User/MyPage/components/UserInfoCard.tsx b/src/pages/User/MyPage/components/UserInfoCard.tsx
index 35c5b347..c9e50757 100644
--- a/src/pages/User/MyPage/components/UserInfoCard.tsx
+++ b/src/pages/User/MyPage/components/UserInfoCard.tsx
@@ -29,7 +29,7 @@ function ManagerDetailInfoCard() {
         <div className="flex items-center gap-3">
           <img className="h-12 w-12 rounded-full" src={managedClub?.imageUrl} alt="Member Avatar" />
           <div>
-            <div className={twMerge('text-h2 font-bold text-indigo-700')}>{currentClub?.name} 관리자</div>
+            <div className={twMerge('H2 font-bold text-indigo-700')}>{currentClub?.name} 관리자</div>
             <div className="mt-1.5 text-xs leading-3.5 font-medium text-indigo-300">
               {myInfo.studentNumber} · {myInfo.universityName} · {currentClub?.position}
             </div>
@@ -52,16 +52,16 @@ function ManagerStats({
   return (
     <div className="flex justify-between gap-2">
       <div className="bg-indigo-5 flex-1 rounded-sm p-3 text-center">
-        <div className="text-body3">관리 동아리</div>
-        <div className="text-h3 mt-1">{managedClubList.joinedClubs.length}</div>
+        <div className="Body3">관리 동아리</div>
+        <div className="H3 mt-1">{managedClubList.joinedClubs.length}</div>
       </div>
       <button
         type="button"
         onClick={(e) => onButtonClick(e, '/council?tab=notice')}
         className="bg-indigo-5 flex-1 rounded-sm p-3 text-center"
       >
-        <div className="text-body3">읽지 않은 공지</div>
-        <div className="text-h3 mt-1">{myInfo.unreadCouncilNoticeCount}</div>
+        <div className="Body3">읽지 않은 공지</div>
+        <div className="H3 mt-1">{myInfo.unreadCouncilNoticeCount}</div>
       </button>
     </div>
   );
@@ -104,7 +104,7 @@ function UserInfoCard({ type }: UserInfoCardProps) {
             {myInfo.name.charAt(0)}
           </div>
           <div>
-            <div className={twMerge('text-h2 font-bold text-indigo-700')}>{myInfo.name}</div>
+            <div className={twMerge('H2 font-bold text-indigo-700')}>{myInfo.name}</div>
             <div className="mt-1.5 text-xs leading-3.5 font-medium text-indigo-300">
               {myInfo.studentNumber} · {myInfo.universityName}
             </div>
@@ -115,22 +115,22 @@ function UserInfoCard({ type }: UserInfoCardProps) {
       {type === 'user' && (
         <div className="flex justify-between gap-2">
           <div className="bg-indigo-5 flex-1 rounded-sm p-3 text-center">
-            <div className="text-body3">가입 동아리</div>
-            <div className="text-h3 mt-1">{myInfo.joinedClubCount}</div>
+            <div className="Body3">가입 동아리</div>
+            <div className="H3 mt-1">{myInfo.joinedClubCount}</div>
           </div>
           <button
             onClick={(e) => handleButtonClick(e, '/timer')}
             className="bg-indigo-5 flex-1 rounded-sm p-3 text-center"
           >
-            <div className="text-body3">순공 시간</div>
-            <div className="text-h3 mt-1">{myInfo.studyTime}</div>
+            <div className="Body3">순공 시간</div>
+            <div className="H3 mt-1">{myInfo.studyTime}</div>
           </button>
           <button
             onClick={(e) => handleButtonClick(e, '/council?tab=notice')}
             className="bg-indigo-5 flex-1 rounded-sm p-3 text-center"
           >
-            <div className="text-body3">읽지 않은 공지</div>
-            <div className="text-h3 mt-1">{myInfo.unreadCouncilNoticeCount}</div>
+            <div className="Body3">읽지 않은 공지</div>
+            <div className="H3 mt-1">{myInfo.unreadCouncilNoticeCount}</div>
           </button>
         </div>
       )}
diff --git a/src/pages/User/MyPage/index.tsx b/src/pages/User/MyPage/index.tsx
index 2cee4b21..a32552d1 100644
--- a/src/pages/User/MyPage/index.tsx
+++ b/src/pages/User/MyPage/index.tsx
@@ -38,7 +38,7 @@ function MyPage() {
               <div className="flex items-center justify-between px-3 py-2">
                 <div className="flex items-center gap-4">
                   <Icon />
-                  <div className="text-sub2">{label}</div>
+                  <div className="Sub2">{label}</div>
                 </div>
                 <RightArrowIcon />
               </div>
@@ -53,7 +53,7 @@ function MyPage() {
           <div className="flex items-center justify-between px-3 py-2">
             <div className="flex items-center gap-4">
               <ChatIcon />
-              <div className="text-sub2">{isCreatingAdminChat ? '이동 중...' : '문의하기'}</div>
+              <div className="Sub2">{isCreatingAdminChat ? '이동 중...' : '문의하기'}</div>
             </div>
             <RightArrowIcon />
           </div>
@@ -78,16 +78,16 @@ function MyPage() {
 
       <BottomModal isOpen={isOpen} onClose={closeModal}>
         <div className="flex flex-col gap-10 px-8 pt-7 pb-4">
-          <div className="text-h3 text-center whitespace-pre-wrap">정말로 로그아웃 하시겠어요?</div>
+          <div className="H3 text-center whitespace-pre-wrap">정말로 로그아웃 하시겠어요?</div>
           <div>
             <button
               disabled={isLoggingOut}
               onClick={() => logout()}
-              className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:cursor-not-allowed disabled:opacity-50"
+              className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:cursor-not-allowed disabled:opacity-50"
             >
               {isLoggingOut ? '로그아웃 중...' : '로그아웃'}
             </button>
-            <button onClick={closeModal} className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400">
+            <button onClick={closeModal} className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400">
               취소
             </button>
           </div>
diff --git a/src/pages/User/Profile/index.tsx b/src/pages/User/Profile/index.tsx
index 9fbd28e3..48a672ac 100644
--- a/src/pages/User/Profile/index.tsx
+++ b/src/pages/User/Profile/index.tsx
@@ -51,18 +51,18 @@ function Profile() {
 
       <BottomModal isOpen={isOpen} onClose={closeModal}>
         <div className="flex flex-col gap-10 px-8 pt-7 pb-4">
-          <div className="text-h3 text-center whitespace-pre-wrap">
+          <div className="H3 text-center whitespace-pre-wrap">
             정말로 탈퇴하시겠어요?{'\n'}탈퇴 후 코넥트의 기능을 사용할 수 없어요
           </div>
           <div>
             <button
               disabled={isWithdrawing}
               onClick={() => withdraw()}
-              className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:cursor-not-allowed disabled:opacity-50"
+              className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:cursor-not-allowed disabled:opacity-50"
             >
               {isWithdrawing ? '탈퇴 처리 중...' : '탈퇴하기'}
             </button>
-            <button onClick={closeModal} className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400">
+            <button onClick={closeModal} className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400">
               취소
             </button>
           </div>
diff --git a/src/styles/colors.css b/src/styles/colors.css
new file mode 100644
index 00000000..3f9561c9
--- /dev/null
+++ b/src/styles/colors.css
@@ -0,0 +1,85 @@
+@theme {
+  /* ========================================
+     KONECT COLOR TOKENS (Figma: Konnect_Light)
+     ======================================== */
+
+  /* Base */
+  --color-black: #323532;
+  --color-white: #ffffff;
+
+  /* Primary */
+  --color-primary-100: #eaf6fb;
+  --color-primary-200: #cfeaf5;
+  --color-primary-400: #8ed0e6;
+  --color-primary-500: #69bfdf;
+  --color-primary-600: #55a9c7;
+  --color-primary-700: #428fa9;
+  --color-primary-800: #2f6e83;
+  --color-primary-900: #1e4a59;
+
+  /* Text */
+  --color-text-100: #e7ebef;
+  --color-text-200: #c6cfd8;
+  --color-text-300: #a5b3c1;
+  --color-text-400: #8497aa;
+  --color-text-500: #5a6b7f;
+  --color-text-600: #475769;
+  --color-text-700: #344352;
+  --color-text-800: #1e2c3f;
+  --color-text-900: #021730;
+
+  /* Sub */
+  --color-sub-100: #fef6d9;
+  --color-sub-200: #fcedb2;
+  --color-sub-300: #f6de8c;
+  --color-sub-400: #e8c867;
+  --color-sub-500: #d6af47;
+  --color-sub-600: #b89236;
+  --color-sub-700: #937228;
+  --color-sub-800: #6e531c;
+  --color-sub-900: #463413;
+
+  /* Danger */
+  --color-danger-50: #fffbfb;
+  --color-danger-100: #fef2f2;
+  --color-danger-200: #ffebee;
+  --color-danger-300: #ffccd2;
+  --color-danger-400: #f49898;
+  --color-danger-500: #eb6f70;
+  --color-danger-600: #f64c4c;
+  --color-danger-700: #ec2d30;
+  --color-danger-800: #d02a2d;
+
+  /* Warning */
+  --color-warning-50: #fffdfa;
+  --color-warning-100: #fff9ee;
+  --color-warning-200: #fff7e1;
+  --color-warning-300: #ffeab3;
+  --color-warning-400: #ffdd82;
+  --color-warning-500: #ffc62b;
+  --color-warning-600: #ffad0d;
+  --color-warning-700: #fe9b0e;
+  --color-warning-800: #e2892b;
+
+  /* Success */
+  --color-success-50: #fbfefc;
+  --color-success-100: #f2faf6;
+  --color-success-200: #e5f5ec;
+  --color-success-300: #c0e5d1;
+  --color-success-400: #97d4b4;
+  --color-success-500: #6bc497;
+  --color-success-600: #47b881;
+  --color-success-700: #0c9d61;
+  --color-success-800: #0f8759;
+
+  /* Info */
+  --color-info-50: #f8fcff;
+  --color-info-100: #f1f8ff;
+  --color-info-200: #e4f2ff;
+  --color-info-300: #bdddff;
+  --color-info-400: #93c8ff;
+  --color-info-500: #4ba1ff;
+  --color-info-600: #3b82f6;
+  --color-info-700: #3a70e2;
+  --color-info-800: #3664c0;
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
index f2456e50..ba6b8f56 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -31,169 +31,4 @@
   /* Blue Scale */
   --color-blue-200: #8ec2fc;
   --color-blue-500: #59a7fc;
-
-  /* ========================================
-     FONT WEIGHTS 
-     ======================================== */
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-extrabold: 800;
-
-  /* ========================================
-     TYPOGRAPHY TOKENS (Mobile)
-     ======================================== */
-
-  /* Display (150%) */
-  --text-d1: 32px;
-  --leading-d1: 48px;
-  --text-d2: 28px;
-  --leading-d2: 42px;
-
-  /* Heading (160%) */
-  --text-h1: 20px;
-  --leading-h1: 32px;
-  --text-h2: 18px;
-  --leading-h2: 28.8px;
-  --text-h3: 16px;
-  --leading-h3: 25.6px;
-  --text-h4: 14px;
-  --leading-h4: 22.4px;
-  --text-h5: 13px;
-  --leading-h5: 20.8px;
-
-  /* Subtitle (160%) */
-  --text-sub1: 16px;
-  --leading-sub1: 25.6px;
-  --text-sub2: 14px;
-  --leading-sub2: 22.4px;
-  --text-sub3: 13px;
-  --leading-sub3: 20.8px;
-  --text-sub4: 12px;
-  --leading-sub4: 19.2px;
-
-  /* Body (160%) */
-  --text-body1: 14px;
-  --leading-body1: 22.4px;
-  --text-body2: 13px;
-  --leading-body2: 20.8px;
-  --text-body3: 12px;
-  --leading-body3: 19.2px;
-
-  /* Caption (160%) */
-  --text-cap1: 11px;
-  --leading-cap1: 17.6px;
-  --text-cap2: 10px;
-  --leading-cap2: 16px;
-}
-
-/* ========================================
-   Semantic text utilities
-   ======================================== */
-@layer utilities {
-  /* Display */
-  .text-d1 {
-    font-size: var(--text-d1);
-    line-height: var(--leading-d1);
-    font-weight: var(--font-weight-extrabold);
-  }
-  .text-d2 {
-    font-size: var(--text-d2);
-    line-height: var(--leading-d2);
-    font-weight: var(--font-weight-extrabold);
-  }
-
-  /* Heading */
-  .text-h1 {
-    font-size: var(--text-h1);
-    line-height: var(--leading-h1);
-    font-weight: var(--font-weight-semibold);
-  }
-  .text-h2 {
-    font-size: var(--text-h2);
-    line-height: var(--leading-h2);
-    font-weight: var(--font-weight-semibold);
-  }
-  .text-h3 {
-    font-size: var(--text-h3);
-    line-height: var(--leading-h3);
-    font-weight: var(--font-weight-semibold);
-  }
-  .text-h4 {
-    font-size: var(--text-h4);
-    line-height: var(--leading-h4);
-    font-weight: var(--font-weight-semibold);
-  }
-  .text-h5 {
-    font-size: var(--text-h5);
-    line-height: var(--leading-h5);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  /* Subtitle */
-  .text-sub1 {
-    font-size: var(--text-sub1);
-    line-height: var(--leading-sub1);
-    font-weight: var(--font-weight-medium);
-  }
-  .text-sub2 {
-    font-size: var(--text-sub2);
-    line-height: var(--leading-sub2);
-    font-weight: var(--font-weight-medium);
-  }
-  .text-sub3 {
-    font-size: var(--text-sub3);
-    line-height: var(--leading-sub3);
-    font-weight: var(--font-weight-medium);
-  }
-  .text-sub4 {
-    font-size: var(--text-sub4);
-    line-height: var(--leading-sub4);
-    font-weight: var(--font-weight-medium);
-  }
-
-  /* Body */
-  .text-body1 {
-    font-size: var(--text-body1);
-    line-height: var(--leading-body1);
-    font-weight: var(--font-weight-regular);
-  }
-  .text-body2 {
-    font-size: var(--text-body2);
-    line-height: var(--leading-body2);
-    font-weight: var(--font-weight-regular);
-  }
-  .text-body3 {
-    font-size: var(--text-body3);
-    line-height: var(--leading-body3);
-    font-weight: var(--font-weight-regular);
-  }
-  .text-body3-strong {
-    font-size: var(--text-body3);
-    line-height: var(--leading-body3);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  /* Caption */
-  .text-cap1 {
-    font-size: var(--text-cap1);
-    line-height: var(--leading-cap1);
-    font-weight: var(--font-weight-regular);
-  }
-  .text-cap1-strong {
-    font-size: var(--text-cap1);
-    line-height: var(--leading-cap1);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  .text-cap2 {
-    font-size: var(--text-cap2);
-    line-height: var(--leading-cap2);
-    font-weight: var(--font-weight-regular);
-  }
-  .text-cap2-strong {
-    font-size: var(--text-cap2);
-    line-height: var(--leading-cap2);
-    font-weight: var(--font-weight-semibold);
-  }
 }
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 00000000..3f2789ff
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,165 @@
+@theme {
+  /* ========================================
+     KONECT TYPOGRAPHY TOKENS (Mobile)
+     Figma: 1268:2734 Mobile Typography Style
+     ======================================== */
+
+  /* Font Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-extrabold: 800;
+
+  /* Display (150%) */
+  --D1: 32px;
+  --leading-d1: 48px;
+  --D2: 28px;
+  --leading-d2: 42px;
+
+  /* Heading (160%) */
+  --H1: 20px;
+  --leading-h1: 32px;
+  --H2: 18px;
+  --leading-h2: 28.8px;
+  --H3: 16px;
+  --leading-h3: 25.6px;
+  --H4: 14px;
+  --leading-h4: 22.4px;
+  --H5: 13px;
+  --leading-h5: 20.8px;
+
+  /* Subtitle (160%) */
+  --Sub1: 16px;
+  --leading-sub1: 25.6px;
+  --Sub2: 14px;
+  --leading-sub2: 22.4px;
+  --Sub3: 13px;
+  --leading-sub3: 20.8px;
+  --Sub4: 12px;
+  --leading-sub4: 19.2px;
+
+  /* Body (160%) */
+  --Body1: 14px;
+  --leading-body1: 22.4px;
+  --Body2: 13px;
+  --leading-body2: 20.8px;
+  --Body3: 12px;
+  --leading-body3: 19.2px;
+
+  /* Caption (160%) */
+  --Caption1: 11px;
+  --leading-cap1: 17.6px;
+  --Caption2: 10px;
+  --leading-cap2: 16px;
+}
+
+/* ========================================
+   Semantic text utilities
+   ======================================== */
+@layer utilities {
+  /* Display */
+  .D1 {
+    font-size: var(--D1);
+    line-height: var(--leading-d1);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .D2 {
+    font-size: var(--D2);
+    line-height: var(--leading-d2);
+    font-weight: var(--font-weight-extrabold);
+  }
+
+  /* Heading */
+  .H1 {
+    font-size: var(--H1);
+    line-height: var(--leading-h1);
+    font-weight: var(--font-weight-semibold);
+  }
+  .H2 {
+    font-size: var(--H2);
+    line-height: var(--leading-h2);
+    font-weight: var(--font-weight-semibold);
+  }
+  .H3 {
+    font-size: var(--H3);
+    line-height: var(--leading-h3);
+    font-weight: var(--font-weight-semibold);
+  }
+  .H4 {
+    font-size: var(--H4);
+    line-height: var(--leading-h4);
+    font-weight: var(--font-weight-semibold);
+  }
+  .H5 {
+    font-size: var(--H5);
+    line-height: var(--leading-h5);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  /* Subtitle */
+  .Sub1 {
+    font-size: var(--Sub1);
+    line-height: var(--leading-sub1);
+    font-weight: var(--font-weight-medium);
+  }
+  .Sub2 {
+    font-size: var(--Sub2);
+    line-height: var(--leading-sub2);
+    font-weight: var(--font-weight-medium);
+  }
+  .Sub3 {
+    font-size: var(--Sub3);
+    line-height: var(--leading-sub3);
+    font-weight: var(--font-weight-medium);
+  }
+  .Sub4 {
+    font-size: var(--Sub4);
+    line-height: var(--leading-sub4);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Body */
+  .Body1 {
+    font-size: var(--Body1);
+    line-height: var(--leading-body1);
+    font-weight: var(--font-weight-regular);
+  }
+  .Body2 {
+    font-size: var(--Body2);
+    line-height: var(--leading-body2);
+    font-weight: var(--font-weight-regular);
+  }
+  .Body3 {
+    font-size: var(--Body3);
+    line-height: var(--leading-body3);
+    font-weight: var(--font-weight-regular);
+  }
+  .Body3-strong {
+    font-size: var(--Body3);
+    line-height: var(--leading-body3);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Caption */
+  .Caption1 {
+    font-size: var(--Caption1);
+    line-height: var(--leading-cap1);
+    font-weight: var(--font-weight-regular);
+  }
+  .Caption1-strong {
+    font-size: var(--Caption1);
+    line-height: var(--leading-cap1);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .Caption2 {
+    font-size: var(--Caption2);
+    line-height: var(--leading-cap2);
+    font-weight: var(--font-weight-regular);
+  }
+  .Caption2-strong {
+    font-size: var(--Caption2);
+    line-height: var(--leading-cap2);
+    font-weight: var(--font-weight-semibold);
+  }
+}