diff --git a/apps/admin/src/components/features/bruno/BrunoApiPageContent.tsx b/apps/admin/src/components/features/bruno/BrunoApiPageContent.tsx
index 7cf45cfa..77c1b54e 100644
--- a/apps/admin/src/components/features/bruno/BrunoApiPageContent.tsx
+++ b/apps/admin/src/components/features/bruno/BrunoApiPageContent.tsx
@@ -147,11 +147,11 @@ const getEndpointKey = (endpoint: EndpointItem) => `${endpoint.domain}:${endpoin
 const getMethodClassName = (method: DefinitionMethod) =>
 	cn(
 		"rounded px-1.5 py-0.5 typo-regular-4",
-		method === "GET" && "bg-[#E8F3FF] text-[#1D4ED8]",
-		method === "POST" && "bg-[#ECFDF3] text-[#047857]",
-		method === "PUT" && "bg-[#FFF7ED] text-[#C2410C]",
-		method === "PATCH" && "bg-[#FEF3C7] text-[#B45309]",
-		method === "DELETE" && "bg-[#FEE2E2] text-[#B91C1C]",
+		method === "GET" && "bg-magic-http-get-surface text-magic-http-get-text",
+		method === "POST" && "bg-magic-http-post-surface text-magic-http-post-text",
+		method === "PUT" && "bg-magic-http-put-surface text-magic-http-put-text",
+		method === "PATCH" && "bg-magic-http-patch-surface text-magic-http-patch-text",
+		method === "DELETE" && "bg-magic-http-delete-surface text-magic-http-delete-text",
 		(method === "HEAD" || method === "OPTIONS") && "bg-k-100 text-k-700",
 	);
 
@@ -385,7 +385,7 @@ export function BrunoApiPageContent() {
 
 				<div className="space-y-4">
 					{showRemoteWarning ? (
-						<div className="flex items-start gap-2 rounded-md border border-[#FACC15] bg-[#FEFCE8] px-4 py-3 text-[#854D0E]">
+						<div className="flex items-start gap-2 rounded-md border border-magic-warning-border bg-magic-warning-surface px-4 py-3 text-magic-warning">
 							<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
 							<div className="min-w-0">
 								<p className="typo-sb-11">원격 API 서버에 연결되어 있습니다.</p>
@@ -437,7 +437,7 @@ export function BrunoApiPageContent() {
 								</div>
 							) : null}
 							{editorError ? (
-								<div className="rounded-md border border-[#FCA5A5] bg-[#FEF2F2] px-3 py-2 typo-regular-4 text-[#B91C1C]">
+								<div className="rounded-md border border-magic-error-border bg-magic-error-surface px-3 py-2 typo-regular-4 text-magic-error">
 									{editorError}
 								</div>
 							) : null}
@@ -501,8 +501,8 @@ export function BrunoApiPageContent() {
 										className={cn(
 											"rounded px-2 py-1",
 											requestResult.status >= 200 && requestResult.status < 300
-												? "bg-[#ECFDF3] text-[#047857]"
-												: "bg-[#FEF2F2] text-[#B91C1C]",
+												? "bg-magic-api-success-surface text-magic-api-success-text"
+												: "bg-magic-error-surface text-magic-error",
 										)}
 									>
 										HTTP {requestResult.status}
diff --git a/apps/admin/src/components/features/mentor-applications/MentorApplicationsPageContent.tsx b/apps/admin/src/components/features/mentor-applications/MentorApplicationsPageContent.tsx
index c9615163..429f019a 100644
--- a/apps/admin/src/components/features/mentor-applications/MentorApplicationsPageContent.tsx
+++ b/apps/admin/src/components/features/mentor-applications/MentorApplicationsPageContent.tsx
@@ -28,8 +28,8 @@ const STATUS_OPTIONS: { value: MentorApplicationStatus; label: string }[] = [
 
 const statusStyles: Record<MentorApplicationStatus, string> = {
 	PENDING: "bg-primary-100 text-primary",
-	APPROVED: "bg-[#E9F7EC] text-[#15A861]",
-	REJECTED: "bg-[#FFD9D9] text-[#E22A2D]",
+	APPROVED: "bg-magic-success-surface text-magic-success",
+	REJECTED: "bg-magic-danger-surface text-magic-danger",
 };
 
 const statusLabels: Record<MentorApplicationStatus, string> = {
@@ -254,7 +254,7 @@ function MentorApplicationHistoryRow({ colSpan, siteUserId }: { colSpan: number;
 							<span className="ml-2 typo-regular-4 text-k-500">이력을 불러오는 중...</span>
 						</div>
 					) : isError ? (
-						<p className="py-4 text-center typo-regular-4 text-[#E22A2D]">신청 이력을 불러오지 못했습니다.</p>
+						<p className="py-4 text-center typo-regular-4 text-magic-danger">신청 이력을 불러오지 못했습니다.</p>
 					) : historyItems.length === 0 ? (
 						<p className="py-4 text-center typo-regular-4 text-k-500">신청 이력이 없습니다.</p>
 					) : (
@@ -595,7 +595,7 @@ export function MentorApplicationsPageContent() {
 								</TableRow>
 							) : isError ? (
 								<TableRow>
-									<TableCell colSpan={9} className="text-center typo-regular-4 text-[#E22A2D]">
+									<TableCell colSpan={9} className="text-center typo-regular-4 text-magic-danger">
 										멘토 승격 요청을 불러오지 못했습니다.
 									</TableCell>
 								</TableRow>
diff --git a/apps/admin/src/components/features/regions-countries/RegionsCountriesPageContent.tsx b/apps/admin/src/components/features/regions-countries/RegionsCountriesPageContent.tsx
index c011b1db..41b9d752 100644
--- a/apps/admin/src/components/features/regions-countries/RegionsCountriesPageContent.tsx
+++ b/apps/admin/src/components/features/regions-countries/RegionsCountriesPageContent.tsx
@@ -300,7 +300,7 @@ export function RegionsCountriesPageContent() {
 									</TableRow>
 								) : regionsQuery.isError ? (
 									<TableRow>
-										<TableCell colSpan={3} className="text-center typo-regular-4 text-[#E22A2D]">
+										<TableCell colSpan={3} className="text-center typo-regular-4 text-magic-danger">
 											권역을 불러오지 못했습니다.
 										</TableCell>
 									</TableRow>
@@ -431,7 +431,7 @@ export function RegionsCountriesPageContent() {
 									</TableRow>
 								) : countriesQuery.isError ? (
 									<TableRow>
-										<TableCell colSpan={4} className="text-center typo-regular-4 text-[#E22A2D]">
+										<TableCell colSpan={4} className="text-center typo-regular-4 text-magic-danger">
 											지역을 불러오지 못했습니다.
 										</TableCell>
 									</TableRow>
diff --git a/apps/admin/src/components/features/scores/ScoreVerifyButton.tsx b/apps/admin/src/components/features/scores/ScoreVerifyButton.tsx
index 3a12e780..e19321c6 100644
--- a/apps/admin/src/components/features/scores/ScoreVerifyButton.tsx
+++ b/apps/admin/src/components/features/scores/ScoreVerifyButton.tsx
@@ -33,7 +33,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 			<button
 				type="button"
 				onClick={handleApprove}
-				className="rounded bg-[#15A861] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#10814A]"
+				className="rounded bg-magic-success px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-success-hover"
 			>
 				승인
 			</button>
@@ -50,7 +50,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 					<button
 						type="button"
 						onClick={handleReject}
-						className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
+						className="rounded bg-magic-danger px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-danger-hover"
 					>
 						확인
 					</button>
@@ -59,7 +59,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 				<button
 					type="button"
 					onClick={handleReject}
-					className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
+					className="rounded bg-magic-danger px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-danger-hover"
 				>
 					거절
 				</button>
diff --git a/apps/admin/src/components/features/scores/StatusBadge.tsx b/apps/admin/src/components/features/scores/StatusBadge.tsx
index 2949e357..e8a23618 100644
--- a/apps/admin/src/components/features/scores/StatusBadge.tsx
+++ b/apps/admin/src/components/features/scores/StatusBadge.tsx
@@ -2,8 +2,8 @@ import type { VerifyStatus } from "@/types/scores";
 
 const statusStyles = {
 	PENDING: "bg-primary-100 text-primary",
-	APPROVED: "bg-[#E9F7EC] text-[#15A861]",
-	REJECTED: "bg-[#FFD9D9] text-[#E22A2D]",
+	APPROVED: "bg-magic-success-surface text-magic-success",
+	REJECTED: "bg-magic-danger-surface text-magic-danger",
 };
 
 const statusLabels = {
diff --git a/apps/admin/src/components/layout/AdminLayout.tsx b/apps/admin/src/components/layout/AdminLayout.tsx
index 1bf3a8c3..f4ceb538 100644
--- a/apps/admin/src/components/layout/AdminLayout.tsx
+++ b/apps/admin/src/components/layout/AdminLayout.tsx
@@ -38,9 +38,9 @@ export function AdminLayout({ children, activeMenu, title, description }: AdminL
 	};
 
 	return (
-		<div className="min-h-screen bg-[radial-gradient(circle_at_top,_#eef2ff_0%,_#fafafa_48%,_#f5f5f5_100%)] text-k-800">
+		<div className="min-h-screen bg-magic-admin-shell text-k-800">
 			<div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col px-3 py-4 sm:px-4 sm:py-6 lg:px-8">
-				<header className="mb-4 flex items-center justify-between rounded-2xl border border-k-100 bg-k-0 px-4 py-3 shadow-[0_10px_30px_-24px_rgba(26,31,39,0.45)]">
+				<header className="mb-4 flex items-center justify-between rounded-2xl border border-k-100 bg-k-0 px-4 py-3 shadow-magic-admin-header">
 					<div className="flex items-center gap-3">
 						<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-primary typo-sb-9">
 							SC
@@ -67,7 +67,7 @@ export function AdminLayout({ children, activeMenu, title, description }: AdminL
 				<div className="flex min-h-[calc(100vh-96px)] overflow-hidden rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
 					<AdminSidebar activeMenu={activeMenu} />
 					<section className="flex-1 bg-bg-50 p-4 sm:p-6 lg:p-7">
-						<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-[0_8px_24px_-22px_rgba(26,31,39,0.45)] sm:p-6">
+						<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-magic-admin-panel sm:p-6">
 							<h1 className="typo-bold-1 text-k-900">{title}</h1>
 							{description ? <p className="mt-1 typo-regular-4 text-k-500">{description}</p> : null}
 							{children}
diff --git a/apps/admin/src/styles.css b/apps/admin/src/styles.css
index b03d0319..a5ab4f86 100644
--- a/apps/admin/src/styles.css
+++ b/apps/admin/src/styles.css
@@ -1,6 +1,37 @@
 @import "tailwindcss";
 @source "../../../packages/ui/src";
 
+@theme {
+  --color-magic-success: #15a861;
+  --color-magic-success-hover: #10814a;
+  --color-magic-success-surface: #e9f7ec;
+  --color-magic-danger: #e22a2d;
+  --color-magic-danger-hover: #ba1e21;
+  --color-magic-danger-surface: #ffd9d9;
+  --color-magic-error: #b91c1c;
+  --color-magic-error-border: #fca5a5;
+  --color-magic-error-surface: #fef2f2;
+  --color-magic-warning: #854d0e;
+  --color-magic-warning-border: #facc15;
+  --color-magic-warning-surface: #fefce8;
+  --color-magic-api-success-surface: #ecfdf3;
+  --color-magic-api-success-text: #047857;
+  --color-magic-http-get-surface: #e8f3ff;
+  --color-magic-http-get-text: #1d4ed8;
+  --color-magic-http-post-surface: #ecfdf3;
+  --color-magic-http-post-text: #047857;
+  --color-magic-http-put-surface: #fff7ed;
+  --color-magic-http-put-text: #c2410c;
+  --color-magic-http-patch-surface: #fef3c7;
+  --color-magic-http-patch-text: #b45309;
+  --color-magic-http-delete-surface: #fee2e2;
+  --color-magic-http-delete-text: #b91c1c;
+  --color-magic-admin-shell-spotlight: #eef2ff;
+  --color-magic-admin-shell-mid: #fafafa;
+  --color-magic-admin-shell-base: #f5f5f5;
+  --color-magic-admin-panel-shadow: rgba(26, 31, 39, 0.45);
+}
+
 body {
   @apply m-0;
   font-family: "Pretendard", system-ui, -apple-system, sans-serif;
@@ -101,6 +132,23 @@ code {
     box-shadow: 0 4px 40px 0 rgba(26, 31, 39, 0.12);
   }
 
+  .bg-magic-admin-shell {
+    background-image: radial-gradient(
+      circle at top,
+      var(--color-magic-admin-shell-spotlight) 0%,
+      var(--color-magic-admin-shell-mid) 48%,
+      var(--color-magic-admin-shell-base) 100%
+    );
+  }
+
+  .shadow-magic-admin-header {
+    box-shadow: 0 10px 30px -24px var(--color-magic-admin-panel-shadow);
+  }
+
+  .shadow-magic-admin-panel {
+    box-shadow: 0 8px 24px -22px var(--color-magic-admin-panel-shadow);
+  }
+
   .typo-bold-1 {
     font-size: 24px;
     line-height: 140%;
diff --git a/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx b/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx
index 43a243a2..bd0478ac 100644
--- a/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx
+++ b/apps/web/src/app/community/[boardCode]/PostWriteButton.tsx
@@ -32,7 +32,7 @@ const PostWriteButton = ({ onClick }: PostWriteButtonProps) => {
       className={`fixed bottom-16 flex w-full max-w-app flex-col items-center transition-transform duration-300 ease-in-out ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
     >
       <button
-        className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-[0px_4px_30px_rgba(0,0,0,0.15)]"
+        className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-magic-floating-action"
         onClick={onClick}
         type="button"
         aria-label="글쓰기"
diff --git a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
index 0a3e4aab..8899caa3 100644
--- a/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
+++ b/apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx
@@ -78,7 +78,7 @@ const Comment = ({
     <div
       className={clsx(
         "flex border-b border-gray-c-100 px-5 py-[18px]",
-        comment.parentId !== null ? "bg-line-1" : "bg-[#fafafa]",
+        comment.parentId !== null ? "bg-line-1" : "bg-magic-comment-reply-bg",
       )}
       key={comment.id}
       role="button"
diff --git a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
index 2f4382a3..cf67d213 100644
--- a/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
+++ b/apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx
@@ -29,7 +29,7 @@ const ChatPageClient = () => {
         </p>
         <Link
           href={"/mentor"}
-          className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-[linear-gradient(270deg,_var(--Primary-Color,_#5950F6)_0%,_var(--SubA-Color,_#388CE8)_100%)] px-[10px] text-white typo-sb-9"
+          className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-gradient-to-l from-primary to-sub-a px-[10px] text-white typo-sb-9"
         >
           멘토 찾으러 가볼까요?
         </Link>
diff --git a/apps/web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/UniversityBtns.tsx b/apps/web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/UniversityBtns.tsx
index 3311fd5b..b2c8a3c3 100644
--- a/apps/web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/UniversityBtns.tsx
+++ b/apps/web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/UniversityBtns.tsx
@@ -10,7 +10,7 @@ const likeIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none">
     <path
       d="M13.3562 0C11.7398 0 10.3052 0.634385 9.33325 1.72476C8.3613 0.634385 6.9267 0 5.31026 0C3.9024 0.00169364 2.55268 0.558508 1.55717 1.54831C0.561652 2.53811 0.0016233 3.88008 -8.01086e-05 5.27987C-8.01086e-05 11.0669 8.51337 15.6908 8.87544 15.8852C9.01614 15.9606 9.17345 16 9.33325 16C9.49306 16 9.65037 15.9606 9.79107 15.8852C10.1531 15.6908 18.6666 11.0669 18.6666 5.27987C18.6649 3.88008 18.1049 2.53811 17.1093 1.54831C16.1138 0.558508 14.7641 0.00169364 13.3562 0ZM12.9145 11.3885C11.7939 12.334 10.596 13.1849 9.33325 13.9325C8.07048 13.1849 6.87258 12.334 5.75199 11.3885C4.00843 9.90136 1.93095 7.63342 1.93095 5.27987C1.93095 4.38877 2.28699 3.53416 2.92073 2.90405C3.55447 2.27394 4.41402 1.91995 5.31026 1.91995C6.74245 1.91995 7.9413 2.67194 8.43935 3.88311C8.51184 4.05967 8.63557 4.21076 8.79478 4.31712C8.95399 4.42348 9.14145 4.48028 9.33325 4.48028C9.52506 4.48028 9.71252 4.42348 9.87173 4.31712C10.0309 4.21076 10.1547 4.05967 10.2272 3.88311C10.7252 2.67194 11.9241 1.91995 13.3562 1.91995C14.2525 1.91995 15.112 2.27394 15.7458 2.90405C16.3795 3.53416 16.7356 4.38877 16.7356 5.27987C16.7356 7.63342 14.6581 9.90136 12.9145 11.3885Z"
-      fill="#4672EE"
+      fill="currentColor"
     />
   </svg>
 );
@@ -20,7 +20,7 @@ const likeIconFilled = (
   <svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none">
     <path
       d="M13.3562 0C11.7398 0 10.3052 0.634385 9.33325 1.72476C8.3613 0.634385 6.9267 0 5.31026 0C3.9024 0.00169364 2.55268 0.558508 1.55717 1.54831C0.561652 2.53811 0.0016233 3.88008 -8.01086e-05 5.27987C-8.01086e-05 11.0669 8.51337 15.6908 8.87544 15.8852C9.01614 15.9606 9.17345 16 9.33325 16C9.49306 16 9.65037 15.9606 9.79107 15.8852C10.1531 15.6908 18.6666 11.0669 18.6666 5.27987C18.6649 3.88008 18.1049 2.53811 17.1093 1.54831C16.1138 0.558508 14.7641 0.00169364 13.3562 0Z"
-      fill="#4672EE"
+      fill="currentColor"
     />
   </svg>
 );
@@ -81,7 +81,7 @@ const UniversityBtns = ({ universityId }: UniversityBtnsProps) => {
             showIconToast("univ", "관심학교 추가되었습니다");
           }
         }}
-        className={`/* stroke: #FFF; stroke-width: 1px; */ /* fill: linear-gradient(...) */ /* CSS의 fill은 SVG 속성이지만, 버튼 배경으로 적용합니다. */ /* backdrop-filter: blur(2px); */ /* filter: drop-shadow(...) */ /* 기타 스타일 */ rounded-full border border-white/80 bg-[linear-gradient(136deg,rgba(255,255,255,0.4)_14.87%,rgba(199,212,250,0.8)_89.1%)] p-3 drop-shadow-[2px_2px_6px_#C7D4FA] backdrop-blur-[2px] transition-transform duration-200 ease-in-out hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 active:scale-95`}
+        className="rounded-full border border-white/80 bg-magic-university-action-glass p-3 text-magic-university-action drop-shadow-magic-university-action backdrop-blur-[2px] transition-transform duration-200 ease-in-out hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 active:scale-95"
       >
         {isLiked ? likeIconFilled : likeIcon}
       </button>
diff --git a/apps/web/src/app/university/score/example/gpa-cert/page.tsx b/apps/web/src/app/university/score/example/gpa-cert/page.tsx
index afa10381..bfb74691 100644
--- a/apps/web/src/app/university/score/example/gpa-cert/page.tsx
+++ b/apps/web/src/app/university/score/example/gpa-cert/page.tsx
@@ -12,7 +12,6 @@ const GpaCertExamplePage = () => {
 
   const divStyle = {
     padding: "33px 20px 36px 20px",
-    borderBottom: "1px solid rgb(236, 236, 236)",
     fontFamily: "Pretendard",
     fontSize: "14px",
     lineHeight: "150%",
@@ -48,7 +47,7 @@ const GpaCertExamplePage = () => {
   return (
     <div className="w-full">
       <TopDetailNavigation title="증명서 예시" handleBack={closeWindow} />
-      <div style={divStyle} className="border-b border-bg-400 text-gray-800">
+      <div style={divStyle} className="border-b border-magic-certificate-divider text-gray-800">
         학번과 직전학기가 표시된 증명서만 승인됩니다.
         <br />
         <br />
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
index 8a43277e..139664e0 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsx
@@ -27,7 +27,7 @@ const BottomNavigation = () => {
   }
 
   return (
-    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white [box-shadow:0px_-2px_6px_0px_var(--K50,#F5F5F5)]">
+    <nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav">
       {NAV_ITEMS.map(({ route, text, iconType }) => {
         const isActive = isRouteActive(pathname, route);
         return (
@@ -36,11 +36,13 @@ const BottomNavigation = () => {
             href={route}
             aria-current={isActive ? "page" : undefined}
             aria-label={`${text} 페이지로 이동`}
-            className="flex flex-[1_0_0] flex-col items-center self-stretch px-3 pb-2 pt-1.5 no-underline"
+            className={`flex flex-[1_0_0] flex-col items-center self-stretch px-3 pb-2 pt-1.5 no-underline ${
+              isActive ? "text-primary" : "text-magic-nav-inactive"
+            }`}
           >
             {(() => {
               const IconComp = ICON_COMPONENTS[iconType];
-              return <IconComp color={isActive ? "#5950F6" : undefined} />;
+              return <IconComp />;
             })()}
             <span
               className={
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/DegreeHat.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/DegreeHat.tsx
index 5fa35b96..68ff620e 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/DegreeHat.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/DegreeHat.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-export default function DegreeHat({ color = "#707070" }) {
+export default function DegreeHat({ color = "currentColor" }) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
       <path d="M0.42041 0H20.4204V20H0.42041V0Z" fill="white" fillOpacity="0.01" />
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/EditTwo.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/EditTwo.tsx
index 2e62a4fc..b8939e3c 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/EditTwo.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/EditTwo.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-export default function EditTwo({ color = "#707070" }) {
+export default function EditTwo({ color = "currentColor" }) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
       <path d="M0.460449 0H20.4604V20H0.460449V0Z" fill="white" fillOpacity="0.01" />
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Home.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Home.tsx
index 642fead6..5dc1ddd0 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Home.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Home.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-export default function Home({ color = "#707070" }) {
+export default function Home({ color = "currentColor" }) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
       <path
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Human.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Human.tsx
index 069dd3b9..98aea1e7 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Human.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/Human.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-export default function Human({ color = "#707070" }) {
+export default function Human({ color = "currentColor" }) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
       <path
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/WhatsNew.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/WhatsNew.tsx
index f8f311fc..418d64e5 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/WhatsNew.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/WhatsNew.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-export default function WhatsNew({ color = "#707070" }) {
+export default function WhatsNew({ color = "currentColor" }) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
       <path
diff --git a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/World.tsx b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/World.tsx
index 54d610fb..ca103d14 100644
--- a/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/World.tsx
+++ b/apps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/ui/World.tsx
@@ -1,25 +1,25 @@
-const World = () => (
+const World = ({ color = "currentColor" }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
     <path d="M0 0H20V20H0V0Z" fill="white" fillOpacity="0.01" />
     <path
       d="M10.0003 18.3334C14.6027 18.3334 18.3337 14.6024 18.3337 10C18.3337 5.39765 14.6027 1.66669 10.0003 1.66669C5.39795 1.66669 1.66699 5.39765 1.66699 10C1.66699 14.6024 5.39795 18.3334 10.0003 18.3334Z"
-      stroke="#707070"
+      stroke={color}
       strokeWidth="1.6"
     />
     <path
       d="M1.66699 8.6835C2.92318 8.09033 3.85227 8.00771 4.45424 8.43558C5.35724 9.07746 5.47045 11.6933 7.52428 10.4431C9.57812 9.19292 6.64478 8.6835 7.28158 6.87246C7.91837 5.06142 10.0038 6.46821 10.2111 4.48446C10.3493 3.16193 8.76733 2.65589 5.46516 2.96634"
-      stroke="#707070"
+      stroke={color}
       strokeWidth="1.6"
     />
     <path
       d="M15.0012 3.33331C12.6202 5.4119 11.7886 6.6671 12.5064 7.09885C13.5832 7.74652 14.04 6.83469 15.3539 7.09885C16.6679 7.36306 16.3834 9.14402 15.6923 9.14402C15.0012 9.14402 11.422 8.68823 11.6023 10.7771C11.7825 12.8659 13.9354 13.1751 13.9354 14.3421C13.9354 15.1201 13.4591 16.3108 12.5064 17.9142"
-      stroke="#707070"
+      stroke={color}
       strokeWidth="1.6"
       strokeLinecap="round"
     />
     <path
       d="M2.54395 13.7193C2.92373 13.5536 3.20922 13.4322 3.4004 13.355C5.00336 12.7074 6.19277 12.5547 6.96857 12.897C8.34044 13.5024 7.81302 14.725 8.24273 15.1754C8.6724 15.6258 9.7454 15.4948 9.7454 16.3516C9.7454 16.9229 9.55352 17.5682 9.16977 18.2875"
-      stroke="#707070"
+      stroke={color}
       strokeWidth="1.6"
       strokeLinecap="round"
     />
diff --git a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
index 37e355f4..95779283 100644
--- a/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
+++ b/apps/web/src/components/login/signup/SignupPrepareScreen.tsx
@@ -94,7 +94,7 @@ const PrepareChoiceButton = ({
 }: PrepareChoiceButtonProps) => {
   return (
     <button
-      className={clsx("flex items-center gap-9 rounded-lg py-5 shadow-[0_0_6px_0_rgb(221,221,223)]", {
+      className={clsx("flex items-center gap-9 rounded-lg py-5 shadow-magic-signup-step", {
         "border border-primary bg-primary-100": preparation === status,
         "border border-white bg-white": preparation !== status,
       })}
diff --git a/apps/web/src/components/modal/SurveyModal.tsx b/apps/web/src/components/modal/SurveyModal.tsx
index 4c9c0f65..60ca667b 100644
--- a/apps/web/src/components/modal/SurveyModal.tsx
+++ b/apps/web/src/components/modal/SurveyModal.tsx
@@ -48,7 +48,7 @@ const SurveyModal = ({ isOpen, onClose, onCloseForWeek }: SurveyModalProps) => {
 
   return (
     <ModalBase isOpen={isOpen} onClose={handleClose}>
-      <div className="relative h-[450px] w-[290px] overflow-hidden rounded-[8px] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.2)] [text-size-adjust:100%] [-webkit-text-size-adjust:100%]">
+      <div className="relative h-[450px] w-[290px] overflow-hidden rounded-[8px] bg-white shadow-magic-survey-modal [text-size-adjust:100%] [-webkit-text-size-adjust:100%]">
         <Image
           src="/images/survey-modal/bg-vector.svg"
           alt=""
@@ -68,25 +68,25 @@ const SurveyModal = ({ isOpen, onClose, onCloseForWeek }: SurveyModalProps) => {
         />
 
         <div className="pointer-events-none absolute left-1/2 top-[92px] w-[182px] -translate-x-1/2 text-center leading-[1.3]">
-          <p className="whitespace-nowrap bg-gradient-to-r from-[#007AFF] to-[#51298A] bg-clip-text text-[23px] font-bold text-transparent">
+          <p className="whitespace-nowrap bg-gradient-to-r from-magic-survey-blue to-magic-survey-purple bg-clip-text text-[23px] font-bold text-transparent">
             솔리드 커넥션,
           </p>
-          <p className="whitespace-nowrap bg-gradient-to-r from-[#007AFF] to-[#430895] bg-clip-text text-[40px] font-extrabold text-transparent">
+          <p className="whitespace-nowrap bg-gradient-to-r from-magic-survey-blue to-magic-survey-purple-dark bg-clip-text text-[40px] font-extrabold text-transparent">
             26-2학기
           </p>
-          <p className="whitespace-nowrap bg-gradient-to-r from-[#007AFF] to-[#430895] bg-clip-text text-[40px] font-extrabold text-transparent">
+          <p className="whitespace-nowrap bg-gradient-to-r from-magic-survey-blue to-magic-survey-purple-dark bg-clip-text text-[40px] font-extrabold text-transparent">
             만족도 조사
           </p>
         </div>
 
-        <p className="absolute left-1/2 top-[246px] w-[228px] -translate-x-1/2 text-center text-[12px] font-semibold leading-[1.5] text-[#29428A]">
+        <p className="absolute left-1/2 top-[246px] w-[228px] -translate-x-1/2 text-center text-[12px] font-semibold leading-[1.5] text-magic-survey-navy">
           1분 설문조사하고 멘토링과 커피쿠폰 받아가세요!
         </p>
 
         <button
           onClick={handleSurveyClick}
           type="button"
-          className="absolute left-1/2 top-[290px] flex h-[33px] w-[160px] -translate-x-1/2 items-center justify-center gap-[5px] rounded-[20px] bg-[#007AFF] transition-colors hover:bg-[#006CE0]"
+          className="absolute left-1/2 top-[290px] flex h-[33px] w-[160px] -translate-x-1/2 items-center justify-center gap-[5px] rounded-[20px] bg-magic-survey-blue transition-colors hover:bg-magic-survey-blue-hover"
         >
           <span className="whitespace-nowrap text-[13px] font-semibold leading-none text-white">설문조사 하러가기</span>
           <Image
@@ -99,12 +99,12 @@ const SurveyModal = ({ isOpen, onClose, onCloseForWeek }: SurveyModalProps) => {
           />
         </button>
 
-        <div className="absolute left-1/2 top-[337px] w-[230px] -translate-x-1/2 text-center text-[11px] font-medium leading-[1.5] text-[#5F6268]">
+        <div className="absolute left-1/2 top-[337px] w-[230px] -translate-x-1/2 text-center text-[11px] font-medium leading-[1.5] text-magic-survey-muted">
           <p className="font-bold">2026년 3월 14일~ 3월 31일</p>
           <p>추첨을 통해 커피 쿠폰 또는 멘토링 기회를 제공해요🍀</p>
         </div>
 
-        <div className="absolute bottom-0 left-0 flex h-[44px] w-full items-center justify-between border-t-[0.5px] border-[#D0D0D0] px-[19px]">
+        <div className="absolute bottom-0 left-0 flex h-[44px] w-full items-center justify-between border-t-[0.5px] border-magic-survey-divider px-[19px]">
           <label className="flex cursor-pointer select-none items-center gap-[5px]">
             <input
               type="checkbox"
@@ -122,7 +122,7 @@ const SurveyModal = ({ isOpen, onClose, onCloseForWeek }: SurveyModalProps) => {
               />
               <svg
                 viewBox="0 0 12 12"
-                className={`absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 text-[#5F6268] transition-opacity ${
+                className={`absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 text-magic-survey-muted transition-opacity ${
                   dontShowForWeek ? "opacity-100" : "opacity-0"
                 }`}
                 fill="none"
@@ -138,10 +138,14 @@ const SurveyModal = ({ isOpen, onClose, onCloseForWeek }: SurveyModalProps) => {
                 />
               </svg>
             </span>
-            <span className="text-[12px] font-normal leading-none text-[#5F6268]">일주일간 보지않기</span>
+            <span className="text-[12px] font-normal leading-none text-magic-survey-muted">일주일간 보지않기</span>
           </label>
 
-          <button onClick={handleClose} type="button" className="text-[12px] font-normal leading-none text-[#5F6268]">
+          <button
+            onClick={handleClose}
+            type="button"
+            className="text-[12px] font-normal leading-none text-magic-survey-muted"
+          >
             닫기
           </button>
         </div>
diff --git a/apps/web/src/components/ui/Dropdown/index.tsx b/apps/web/src/components/ui/Dropdown/index.tsx
index 2465328b..bd70e5fa 100644
--- a/apps/web/src/components/ui/Dropdown/index.tsx
+++ b/apps/web/src/components/ui/Dropdown/index.tsx
@@ -10,7 +10,7 @@ interface DropdownProps {
 }
 
 const Dropdown = ({ options }: DropdownProps) => (
-  <div className="absolute right-0 top-full z-[1000] flex w-36 flex-col rounded-lg shadow-[0px_10px_50px_0px_rgba(0,0,0,0.1)]">
+  <div className="absolute right-0 top-full z-[1000] flex w-36 flex-col rounded-lg shadow-magic-dropdown">
     {options.map((option, index) => (
       <button
         key={option.label}
diff --git a/apps/web/src/components/ui/SlimDropdown.tsx b/apps/web/src/components/ui/SlimDropdown.tsx
index 7757f835..5d044968 100644
--- a/apps/web/src/components/ui/SlimDropdown.tsx
+++ b/apps/web/src/components/ui/SlimDropdown.tsx
@@ -8,7 +8,7 @@ interface DropdownProps {
 }
 
 const SlimDropdown = ({ options }: DropdownProps) => (
-  <div className="absolute z-[1000] flex w-[84px] flex-col rounded-lg bg-white py-3.5 shadow-[0_0px_10px_0px_rgb(0,0,0,0.2)]">
+  <div className="absolute z-[1000] flex w-[84px] flex-col rounded-lg bg-white py-3.5 shadow-magic-slim-dropdown">
     {options.map((option) => (
       <button
         key={option.label}
diff --git a/apps/web/src/components/ui/icon/star-filled.tsx b/apps/web/src/components/ui/icon/star-filled.tsx
index 096cab9a..092f0331 100644
--- a/apps/web/src/components/ui/icon/star-filled.tsx
+++ b/apps/web/src/components/ui/icon/star-filled.tsx
@@ -10,8 +10,8 @@ interface StarFilledIconProps {
 
 const StarFilledIcon = ({
   size = "20",
-  leftColor = "#000000",
-  rightColor = "#000000",
+  leftColor = "currentColor",
+  rightColor = "currentColor",
   leftOpacity = "1",
   rightOpacity = "1",
   onClick,
diff --git a/apps/web/src/lib/toast/showIconToast.tsx b/apps/web/src/lib/toast/showIconToast.tsx
index 11568550..055e6800 100644
--- a/apps/web/src/lib/toast/showIconToast.tsx
+++ b/apps/web/src/lib/toast/showIconToast.tsx
@@ -26,18 +26,9 @@ export const showIconToast = (icon: ToastIconKey, message: string) => {
 
   toast.custom(
     () => (
-      <div className="animate-fadeIn pointer-events-auto flex min-h-[62px] w-full max-w-[350px] items-center justify-center gap-2.5 rounded-[12px] bg-white px-5 py-4 shadow-[0px_4px_40px_0px_rgba(0,0,0,0.25)]">
+      <div className="animate-fadeIn pointer-events-auto flex min-h-[62px] w-full max-w-[350px] items-center justify-center gap-2.5 rounded-[12px] bg-white px-5 py-4 shadow-magic-toast">
         <Icon className="flex-shrink-0" />
-        <span
-          className="break-words text-center font-serif text-[16px] font-semibold leading-[150%]"
-          style={{
-            backgroundImage: "linear-gradient(90deg, #5950F6 0%, #388CE8 100%)",
-            WebkitBackgroundClip: "text",
-            backgroundClip: "text",
-            WebkitTextFillColor: "transparent",
-            color: "transparent",
-          }}
-        >
+        <span className="break-words bg-gradient-to-r from-primary to-sub-a bg-clip-text text-center font-serif text-[16px] font-semibold leading-[150%] text-transparent [-webkit-text-fill-color:transparent]">
           {message}
         </span>
       </div>
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 7e5bb8a5..db1f0617 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -263,6 +263,69 @@ const config: Config = {
           "1": "#f2f2f2",
           "2": "#e5e5e5",
         },
+        magic: {
+          success: "#15A861",
+          "success-hover": "#10814A",
+          "success-surface": "#E9F7EC",
+          danger: "#E22A2D",
+          "danger-hover": "#BA1E21",
+          "danger-surface": "#FFD9D9",
+          error: "#B91C1C",
+          "error-border": "#FCA5A5",
+          "error-surface": "#FEF2F2",
+          warning: "#854D0E",
+          "warning-border": "#FACC15",
+          "warning-surface": "#FEFCE8",
+          api: {
+            success: {
+              surface: "#ECFDF3",
+              text: "#047857",
+            },
+          },
+          http: {
+            get: {
+              surface: "#E8F3FF",
+              text: "#1D4ED8",
+            },
+            post: {
+              surface: "#ECFDF3",
+              text: "#047857",
+            },
+            put: {
+              surface: "#FFF7ED",
+              text: "#C2410C",
+            },
+            patch: {
+              surface: "#FEF3C7",
+              text: "#B45309",
+            },
+            delete: {
+              surface: "#FEE2E2",
+              text: "#B91C1C",
+            },
+          },
+          survey: {
+            blue: "#007AFF",
+            "blue-hover": "#006CE0",
+            purple: "#51298A",
+            "purple-dark": "#430895",
+            navy: "#29428A",
+            muted: "#5F6268",
+            divider: "#D0D0D0",
+          },
+          nav: {
+            inactive: "#707070",
+          },
+          comment: {
+            "reply-bg": "#fafafa",
+          },
+          university: {
+            action: "#4672EE",
+          },
+          certificate: {
+            divider: "#ECECEC",
+          },
+        },
         foreground: "hsl(var(--foreground))",
         card: {
           DEFAULT: "hsl(var(--card))",
@@ -300,6 +363,20 @@ const config: Config = {
         sdwB: "0px 0px 4px 0px var(--K100, #DDDDDF)",
         sdwC: "0px 0px 4px 0px rgba(0, 0, 0, 0.25)",
         top: "0px -4px 10px 0px #F5F5F5",
+        "magic-bottom-nav": "0px -2px 6px 0px #F5F5F5",
+        "magic-dropdown": "0px 10px 50px 0px rgba(0, 0, 0, 0.1)",
+        "magic-floating-action": "0px 4px 30px rgba(0, 0, 0, 0.15)",
+        "magic-signup-step": "0 0 6px 0 rgb(221, 221, 223)",
+        "magic-slim-dropdown": "0 0px 10px 0px rgb(0, 0, 0, 0.2)",
+        "magic-survey-modal": "0 10px 30px rgba(0, 0, 0, 0.2)",
+        "magic-toast": "0px 4px 40px 0px rgba(0, 0, 0, 0.25)",
+      },
+      backgroundImage: {
+        "magic-university-action-glass":
+          "linear-gradient(136deg, rgba(255, 255, 255, 0.4) 14.87%, rgba(199, 212, 250, 0.8) 89.1%)",
+      },
+      dropShadow: {
+        "magic-university-action": "2px 2px 6px #C7D4FA",
       },
       spacing: {
         "13": "3.25rem", // 3.25rem = 13 = 52px
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 2e995b1d..f6ec4678 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-k-0 shadow-sm hover:bg-primary-600",
-        destructive: "bg-[#E22A2D] text-k-0 shadow-sm hover:bg-[#BA1E21]",
+        destructive: "bg-magic-danger text-k-0 shadow-sm hover:bg-magic-danger-hover",
         outline: "border border-k-200 bg-k-0 text-k-700 shadow-sm hover:bg-k-50",
         secondary: "bg-k-50 text-k-700 shadow-sm hover:bg-k-100",
         ghost: "text-k-600 hover:bg-k-50 hover:text-k-800",