diff --git a/src/assets/icon/workspace/building.svg b/src/assets/icon/workspace/building.svg
index cd3534c..a514969 100644
--- a/src/assets/icon/workspace/building.svg
+++ b/src/assets/icon/workspace/building.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 10H12.01M12 14H12.01M12 6H12.01M16 10H16.01M16 14H16.01M16 6H16.01M8 10H8.01M8 14H8.01M8 6H8.01M9 22V19C9 18.7348 9.10536 18.4804 9.29289 18.2929C9.48043 18.1054 9.73478 18 10 18H14C14.2652 18 14.5196 18.1054 14.7071 18.2929C14.8946 18.4804 15 18.7348 15 19V22M6 2H18C19.1046 2 20 2.89543 20 4V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2Z" stroke="#8B8B8F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 10H12.01M12 14H12.01M12 6H12.01M16 10H16.01M16 14H16.01M16 6H16.01M8 10H8.01M8 14H8.01M8 6H8.01M9 22V19C9 18.7348 9.10536 18.4804 9.29289 18.2929C9.48043 18.1054 9.73478 18 10 18H14C14.2652 18 14.5196 18.1054 14.7071 18.2929C14.8946 18.4804 15 18.7348 15 19V22M6 2H18C19.1046 2 20 2.89543 20 4V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 627a196..03dfb4e 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -14,19 +14,19 @@ import CollapseIcon from "@/assets/icon/sidebar/chevron-left.svg?react";
 
 function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
   return twMerge(
-    "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-colors duration-200",
+    "flex items-center rounded-component-md px-3 text-sm cursor-pointer transition-colors duration-200",
     isCollapsed
       ? "h-[55px] w-[55px] mx-auto flex justify-center"
       : "h-[55px] gap-4 px-3",
     isActive
       ? "bg-chart-3 text-white"
-      : "text-text-auth-sub hover:bg-[#F6F6F6]",
+      : "text-text-auth-sub hover:bg-bg-surface",
   );
 }
 
 function getFooterItemClass(isActive: boolean, isCollapsed: boolean) {
   return twMerge(
-    "flex w-full h-[55px] items-center rounded-xl px-3 text-sm cursor-pointer transition-all duration-200",
+    "flex w-full h-[55px] items-center rounded-component-md px-3 text-sm cursor-pointer transition-all duration-200",
     isCollapsed ? "justify-center px-0" : "gap-4 px-3",
     isActive ? "text-chart-3" : "text-text-auth-sub hover:text-chart-3",
   );
@@ -45,11 +45,11 @@ export default function Sidebar() {
   return (
     <div
       className={twMerge(
-        "relative flex h-full flex-col bg-white rounded-3xl drop-shadow-md transition-all duration-200 ease-in-out",
+        "relative flex h-full flex-col bg-white rounded-component-lg shadow-Soft transition-all duration-200 ease-in-out",
         isCollapsed ? "w-25" : "w-64",
       )}
     >
-      <div className="mx-auto mt-10 flex w-full max-w-[232px] flex-1 flex-col">
+      <div className="mx-auto mt-10 flex w-full max-w-58 flex-1 flex-col">
         {/* Logo */}
         {/* <NavLink
           to="/"
@@ -74,7 +74,7 @@ export default function Sidebar() {
           type="button"
           aria-label={isCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
           onClick={toggleSidebar}
-          className="absolute -right-3 top-3 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-[#F6F6F6] transition hover:bg-[#F6F6F6]"
+          className="absolute -right-3 top-3 flex h-6 w-6 items-center justify-center rounded-component-sm bg-white border border-bg-surface transition hover:bg-bg-surface"
         >
           <CollapseIcon
             className={twMerge(
diff --git a/src/components/Sidebar/SubMenu.tsx b/src/components/Sidebar/SubMenu.tsx
index 1af1c17..2b3b3b0 100644
--- a/src/components/Sidebar/SubMenu.tsx
+++ b/src/components/Sidebar/SubMenu.tsx
@@ -11,15 +11,15 @@ interface ISubMenuProps {
 export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
   const getSubItemClass = (isActive: boolean) =>
     twMerge(
-      "flex h-10 items-center rounded-xl px-3 text-sm transition-all duration-200 whitespace-nowrap",
+      "flex h-10 items-center rounded-component-md px-3 text-sm transition-all duration-200 whitespace-nowrap",
       isCollapsed ? "" : "pl-4",
       isActive
         ? "bg-chart-3 text-white"
-        : "text-text-auth-sub hover:bg-[#F6F6F6]",
+        : "text-text-auth-sub hover:bg-bg-surface",
     );
 
   const menuContainerClass = isCollapsed
-    ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-2xl bg-white p-2 shadow-lg z-50 whitespace-nowrap"
+    ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-component-md bg-white p-2 shadow-Soft z-50 whitespace-nowrap"
     : "ml-11 mt-1 flex flex-col gap-1 overflow-hidden transition-all duration-200";
 
   return (
diff --git a/src/components/auth/common/InputActions.tsx b/src/components/auth/common/InputActions.tsx
index dd13781..609660b 100644
--- a/src/components/auth/common/InputActions.tsx
+++ b/src/components/auth/common/InputActions.tsx
@@ -47,7 +47,7 @@ export default function InputActions({
       {validationState && (
         <span
           className={twMerge(
-            "flex items-center justify-center rounded-2xl font-body1 whitespace-nowrap py-1 px-3 h-full cursor-default",
+            "flex items-center justify-center rounded-component-md font-body1 whitespace-nowrap py-1 px-3 h-full cursor-default",
             validation ? "bg-brand-800 text-white" : "opacity-50",
           )}
         >
diff --git a/src/components/auth/flows/find-email/EnterPhoneStep.tsx b/src/components/auth/flows/find-email/EnterPhoneStep.tsx
index 0de9049..5e9080d 100644
--- a/src/components/auth/flows/find-email/EnterPhoneStep.tsx
+++ b/src/components/auth/flows/find-email/EnterPhoneStep.tsx
@@ -149,7 +149,7 @@ export default function EnterPhoneStep({ onNext }: IEnterPhoneStepProps) {
                 value={watchedPhone || ""}
                 readOnly
                 aria-label="입력된 전화번호"
-                className="w-full h-13.5 px-5 border rounding-15 text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
+                className="w-full h-13.5 px-5 border rounded-component-md text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
               />
               <button
                 type="button"
diff --git a/src/components/auth/flows/find-email/ShowEmailResultStep.tsx b/src/components/auth/flows/find-email/ShowEmailResultStep.tsx
index c44ed48..846c8a7 100644
--- a/src/components/auth/flows/find-email/ShowEmailResultStep.tsx
+++ b/src/components/auth/flows/find-email/ShowEmailResultStep.tsx
@@ -18,7 +18,7 @@ export default function ShowEmailResultStep() {
           <span className="block">WYA에 가입된 계정을 찾았어요</span>
         </h1>
 
-        <div className="w-full h-24 bg-gray-50 rounded-2xl flex items-center justify-between px-5 mb-10">
+        <div className="w-full h-24 bg-gray-50 rounded-component-md flex items-center justify-between px-5 mb-10">
           <div className="flex items-center gap-3 min-w-0">
             <span className="font-caption text-text-placeholder shrink-0">
               이메일 ID
@@ -29,7 +29,7 @@ export default function ShowEmailResultStep() {
           </div>
           <button
             type="button"
-            className="shrink-0 h-8 px-2 border border-gray-200 bg-white rounded-lg text-xs text-text-sub hover:bg-gray-50 transition-colors"
+            className="shrink-0 h-8 px-2 border border-gray-200 bg-white rounded-component-sm text-xs text-text-sub hover:bg-gray-50 transition-colors"
             onClick={() => navigate("/find-pw")}
           >
             비밀번호 재설정
diff --git a/src/components/auth/flows/reset-password/EmailVerificationStep.tsx b/src/components/auth/flows/reset-password/EmailVerificationStep.tsx
index 76ed6c2..339c6c2 100644
--- a/src/components/auth/flows/reset-password/EmailVerificationStep.tsx
+++ b/src/components/auth/flows/reset-password/EmailVerificationStep.tsx
@@ -66,7 +66,7 @@ export default function EmailVerificationStep({
                 type="text"
                 value={watchedEmail || ""}
                 readOnly
-                className="w-full h-13.5 px-5 border rounding-15 text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
+                className="w-full h-13.5 px-5 border rounded-component-md text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
               />
               <button
                 type="button"
diff --git a/src/components/auth/flows/signup/EnterEmailStep.tsx b/src/components/auth/flows/signup/EnterEmailStep.tsx
index 2dce895..70e3083 100644
--- a/src/components/auth/flows/signup/EnterEmailStep.tsx
+++ b/src/components/auth/flows/signup/EnterEmailStep.tsx
@@ -62,7 +62,7 @@ export default function EnterEmailStep({ onNext }: IEnterEmailStepProps) {
                 type="text"
                 value={watchedEmail || ""}
                 readOnly
-                className="w-full h-13.5 px-5 border rounding-15 text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
+                className="w-full h-13.5 px-5 border rounded-component-md text-body1 text-text-main bg-white border-brand-400 focus:outline-none focus:border-brand-400"
               />
               <button
                 type="button"
diff --git a/src/components/auth/intro/IntroAIAnalytics.tsx b/src/components/auth/intro/IntroAIAnalytics.tsx
index 17d915c..c56bd64 100644
--- a/src/components/auth/intro/IntroAIAnalytics.tsx
+++ b/src/components/auth/intro/IntroAIAnalytics.tsx
@@ -40,7 +40,7 @@ export default function IntroAIAnalytics({ isActive }: { isActive: boolean }) {
             <span className="mb-6 inline-block rounded-full bg-logo-1/10 px-4 py-1.5 text-sm font-bold text-logo-2">
               AI 성과 분석
             </span>
-            <h2 className="font-heading1 text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
+            <h2 className="text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
               복잡한 데이터 분석,{"\n"}
               AI가 대신 해드릴게요
             </h2>
diff --git a/src/components/auth/intro/IntroAdManagement.tsx b/src/components/auth/intro/IntroAdManagement.tsx
index 633781d..84c6942 100644
--- a/src/components/auth/intro/IntroAdManagement.tsx
+++ b/src/components/auth/intro/IntroAdManagement.tsx
@@ -41,7 +41,7 @@ export default function IntroAdManagement({ isActive }: { isActive: boolean }) {
             <span className="mb-6 inline-block rounded-full bg-logo-1/10 px-4 py-1.5 text-sm font-bold text-logo-2">
               통합 관리
             </span>
-            <h2 className="font-heading1 text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
+            <h2 className="text-4xl font-bold leading-tight text-text-main whitespace-pre-line">
               흩어진 광고 성과를{"\n"}
               한곳에서 관리하세요
             </h2>
@@ -58,7 +58,7 @@ export default function IntroAdManagement({ isActive }: { isActive: boolean }) {
               {CAROUSEL_ITEMS.map((platform, index) => (
                 <div
                   key={`${platform.id}-${index}`}
-                  className={`flex h-40 w-40 items-center justify-center rounded-full shadow-lg ${platform.bgColor}`}
+                  className={`flex h-40 w-40 items-center justify-center rounded-full shadow-Soft ${platform.bgColor}`}
                 >
                   <platform.icon
                     className={`${platform.className} ${platform.size}`}
diff --git a/src/components/auth/skeleton/AuthFormSkeleton.tsx b/src/components/auth/skeleton/AuthFormSkeleton.tsx
index 0a5e12c..feb3949 100644
--- a/src/components/auth/skeleton/AuthFormSkeleton.tsx
+++ b/src/components/auth/skeleton/AuthFormSkeleton.tsx
@@ -11,14 +11,14 @@ export default function AuthFormSkeleton() {
 
         <div className="flex flex-col gap-6">
           <div className="flex gap-2">
-            <Skeleton className="h-14 flex-1 rounded-2xl" />
-            <Skeleton className="h-14 w-28 rounded-2xl" />
+            <Skeleton className="h-14 flex-1 rounded-component-md" />
+            <Skeleton className="h-14 w-28 rounded-component-md" />
           </div>
 
-          <Skeleton className="h-14 w-full rounded-2xl" />
+          <Skeleton className="h-14 w-full rounded-component-md" />
 
           <div className="mt-4">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
         </div>
       </div>
diff --git a/src/components/auth/skeleton/LoginPageSkeleton.tsx b/src/components/auth/skeleton/LoginPageSkeleton.tsx
index 71864f3..43e69b2 100644
--- a/src/components/auth/skeleton/LoginPageSkeleton.tsx
+++ b/src/components/auth/skeleton/LoginPageSkeleton.tsx
@@ -14,11 +14,11 @@ export default function LoginPageSkeleton() {
         <div className="flex flex-col gap-7">
           <div className="flex flex-col gap-2">
             <Skeleton className="h-5 w-16" />
-            <Skeleton className="h-12 w-full rounded-2xl" />
+            <Skeleton className="h-12 w-full rounded-component-md" />
           </div>
           <div className="flex flex-col gap-2">
             <Skeleton className="h-5 w-20" />
-            <Skeleton className="h-12 w-full rounded-2xl" />
+            <Skeleton className="h-12 w-full rounded-component-md" />
           </div>
 
           <div className="mt-3 flex justify-center">
@@ -26,7 +26,7 @@ export default function LoginPageSkeleton() {
           </div>
 
           <div className="mt-10">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
         </div>
 
diff --git a/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx b/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx
index 8c53c6c..6d71400 100644
--- a/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx
+++ b/src/components/auth/skeleton/SignupEmailStepSkeleton.tsx
@@ -12,17 +12,17 @@ export default function SignupEmailStepSkeleton() {
         <div className="flex flex-col gap-6">
           <div className="flex gap-2">
             <div className="flex-1 flex flex-col gap-2">
-              <Skeleton className="h-14 w-full rounded-2xl" />
+              <Skeleton className="h-14 w-full rounded-component-md" />
             </div>
-            <Skeleton className="h-14 w-24 rounded-2xl" />
+            <Skeleton className="h-14 w-24 rounded-component-md" />
           </div>
 
           <div className="flex flex-col gap-2">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
 
           <div className="mt-4">
-            <Skeleton className="h-14 w-full rounded-2xl" />
+            <Skeleton className="h-14 w-full rounded-component-md" />
           </div>
         </div>
       </div>
diff --git a/src/components/auth/skeleton/SignupPageSkeleton.tsx b/src/components/auth/skeleton/SignupPageSkeleton.tsx
index ae7117b..efcec56 100644
--- a/src/components/auth/skeleton/SignupPageSkeleton.tsx
+++ b/src/components/auth/skeleton/SignupPageSkeleton.tsx
@@ -4,10 +4,10 @@ export default function SignupPageSkeleton() {
   return (
     <div className="flex w-full flex-col items-center">
       <div className="flex w-full flex-col gap-10">
-        <Skeleton className="h-16 w-full rounded-2xl" />
-        <Skeleton className="h-16 w-full rounded-2xl" />
-        <Skeleton className="h-16 w-full rounded-2xl" />
-        <Skeleton className="h-16 w-full rounded-2xl" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
+        <Skeleton className="h-16 w-full rounded-component-md" />
       </div>
 
       <div className="mt-15 flex justify-center gap-2">
diff --git a/src/components/common/alert/Alert.tsx b/src/components/common/alert/Alert.tsx
index 8fe2386..dce12f0 100644
--- a/src/components/common/alert/Alert.tsx
+++ b/src/components/common/alert/Alert.tsx
@@ -17,7 +17,7 @@ export default function Alert({
   children,
   ...rest
 }: IAlertProps) {
-  const base = "w-full rounding-20 px-5 py-4";
+  const base = "w-full rounded-component-lg px-5 py-4";
 
   const variantClasses: Record<TAlertVariant, string> = {
     info: "text-brand-700",
diff --git a/src/components/common/button/Button.stories.tsx b/src/components/common/button/Button.stories.tsx
index 971560d..fedd818 100644
--- a/src/components/common/button/Button.stories.tsx
+++ b/src/components/common/button/Button.stories.tsx
@@ -66,7 +66,7 @@ export const Sizes: TButtonStory = {
 
 export const FullWidth: TButtonStory = {
   render: () => (
-    <div className="w-[360px]">
+    <div className="w-90">
       <Button fullWidth variant="primary">
         Full width
       </Button>
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index f0ac644..9d61a00 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -29,7 +29,7 @@ export default function Button({
   ...rest
 }: IButtonProps) {
   const sizeClasses = {
-    big: "h-button-big px-6 rounded-component-md font-heading3 transition-colors duration-normal ease-out",
+    big: "h-button-big px-6 rounded-component-md font-heading4 transition-colors duration-normal ease-out",
     small:
       "h-button-small px-4 rounded-component-sm font-body1 transition-colors duration-normal ease-out",
   };
diff --git a/src/components/common/dropdownmenu/DropdownMenu.tsx b/src/components/common/dropdownmenu/DropdownMenu.tsx
index 160da39..14af28a 100644
--- a/src/components/common/dropdownmenu/DropdownMenu.tsx
+++ b/src/components/common/dropdownmenu/DropdownMenu.tsx
@@ -57,7 +57,7 @@ export function DropdownMenu({
         <div
           id={menuId}
           role="menu"
-          className="absolute right-0 mt-2 w-56 max-w-[calc(100vw-40px)] rounding-15 bg-brand-200 py-3 px-1 shadow-Medium z-50"
+          className="absolute right-0 mt-2 w-56 max-w-[calc(100vw-40px)] rounded-component-md bg-brand-200 py-3 px-1 shadow-Medium z-50"
         >
           <div className="space-y-1">
             {items.map((it, idx) => (
@@ -70,7 +70,7 @@ export function DropdownMenu({
                     setOpen(false);
                   }}
                   className={twMerge(
-                    "group flex w-full items-center gap-3 rounding-15 px-5 py-4 text-left font-body1 transition-fast",
+                    "group flex w-full items-center gap-3 rounded-component-md px-5 py-4 text-left font-body1 transition-fast",
                     it.active
                       ? "bg-brand-300 text-status-blue"
                       : "text-text-main hover:bg-brand-300 hover:text-status-blue",
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 08ed555..64a2b5a 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -117,7 +117,7 @@ function Modal({
         <div
           ref={modalRef}
           className={twMerge(
-            "relative bg-white rounded-component-md shadow-xl w-full max-h-[90vh] overflow-auto animate-modal-content",
+            "relative bg-white rounded-component-md shadow-Medium w-full max-h-[90vh] overflow-auto animate-modal-content",
             sizeClasses[size],
             paddingClasses[padding],
             className,
diff --git a/src/components/modal/privacyModal/AgreementItem.tsx b/src/components/modal/privacyModal/AgreementItem.tsx
index a9d6ef3..c16ad4a 100644
--- a/src/components/modal/privacyModal/AgreementItem.tsx
+++ b/src/components/modal/privacyModal/AgreementItem.tsx
@@ -13,7 +13,7 @@ type TAgreementItemProps = {
 const markdownComponents: Components = {
   h2: ({ ...props }) => (
     <h2
-      className="font-heading3 text-text-main font-bold mb-2 mt-4 first:mt-0"
+      className="font-heading4 text-text-main font-bold mb-2 mt-4 first:mt-0"
       {...props}
     />
   ),
@@ -89,7 +89,7 @@ export default function AgreementItem({
       </div>
 
       {expanded && (
-        <div className="bg-brand-300 p-5 rounded-15 text-sm text-text-sub leading-relaxed max-h-50 overflow-y-auto">
+        <div className="bg-brand-300 p-5 rounded-component-md text-sm text-text-sub leading-relaxed max-h-50 overflow-y-auto">
           <ReactMarkdown components={markdownComponents}>
             {content}
           </ReactMarkdown>
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index ee83f66..1f80f7c 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -15,7 +15,7 @@ type TProps = {
 
 export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
   return (
-    <li className="flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-sm border border-gray-100">
+    <li className="flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-Soft border border-gray-100">
       <div className="flex items-center gap-5 min-w-0">
         <div className="w-20 h-20 bg-gray-100 shrink-0 rounded-component-sm">
           {/* TODO: 스타일 확인을 위해 bg-gray-100넣어둠. API연동할때 삭제예정 */}
@@ -27,14 +27,16 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
             />
           ) : (
             <div className="w-full h-full flex items-center justify-center">
-              <BuildingIcon className="w-12 h-12" />
+              <BuildingIcon className="w-8 h-8 text-text-placeholder" />
             </div>
           )}
         </div>
 
         <div className="min-w-0">
-          <div className="font-heading3 text-text-main truncate">{w.name}</div>
-          <div className="font-body1 text-text-main mt-1 truncate">
+          <div className="font-heading4 font-semibold! text-text-main truncate">
+            {w.name}
+          </div>
+          <div className="font-body2 text-text-main mt-1 truncate">
             {w.description ?? ""}
           </div>
           <div className="font-body1 text-text-sub mt-2">
@@ -47,7 +49,7 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
         <DropdownMenu
           trigger={<VectorIcon aria-hidden="true" />}
           aria-label={`${w.name} 워크스페이스 메뉴`}
-          className="h-10 w-10 cursor-pointer rounded-xl hover:bg-gray-100 transition-colors flex items-center justify-center"
+          className="h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center"
           items={menuItems}
         />
       </div>
diff --git a/src/index.css b/src/index.css
index 6f26af0..e91ffb3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,6 +56,7 @@ button {
   --color-text-placeholder: #c3c3c3;
   --color-text-disabled: #b0b8c1;
   --color-bg-disabled: #e5e8eb;
+  --color-bg-surface: #f6f6f6;
 
   --color-social-kakao: #fee500;
   --color-social-naver: #03c75a;
@@ -188,6 +189,12 @@ button {
   }
 
   .font-heading3 {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 130%;
+  }
+
+  .font-heading4 {
     font-size: 18px;
     font-weight: 400;
     line-height: 130%;
@@ -213,22 +220,10 @@ button {
 
   .font-label {
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 600;
     line-height: 140%;
   }
 
-  .rounding-15 {
-    border-radius: 15px;
-  }
-
-  .rounding-20 {
-    border-radius: 20px;
-  }
-
-  .rounding-30 {
-    border-radius: 30px;
-  }
-
   .shadow-Soft {
     box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
   }
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index 22ed5cc..7833eff 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -47,7 +47,7 @@ export default function Login() {
   return (
     <div className="w-full min-h-screen bg-white flex items-center justify-center">
       <div className="w-full max-w-130 px-6 pt-30 pb-12">
-        <h1 className="text-center font-heading1 text-3xl font-bold text-text-main mb-10">
+        <h1 className="text-center font-heading1 font-bold text-text-main mb-10">
           로그인
         </h1>
 
@@ -87,7 +87,7 @@ export default function Login() {
           <div className="flex items-center gap-12">
             <button
               type="button"
-              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-kakao hover:scale-110 transition-transform duration-200 shadow-sm"
+              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-kakao hover:scale-110 transition-transform duration-200 shadow-Soft"
               aria-label="카카오로 로그인"
               onClick={() => handleSocialLogin("kakao")}
             >
@@ -96,7 +96,7 @@ export default function Login() {
 
             <button
               type="button"
-              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-naver hover:scale-110 transition-transform duration-200 shadow-sm"
+              className="w-14 h-14 rounded-full flex items-center justify-center bg-social-naver hover:scale-110 transition-transform duration-200 shadow-Soft"
               aria-label="네이버로 로그인"
               onClick={() => handleSocialLogin("naver")}
             >
@@ -105,7 +105,7 @@ export default function Login() {
 
             <button
               type="button"
-              className="w-14 h-14 rounded-full flex items-center justify-center bg-white border border-gray-100 hover:scale-110 transition-transform duration-200 shadow-sm"
+              className="w-14 h-14 rounded-full flex items-center justify-center bg-white border border-gray-100 hover:scale-110 transition-transform duration-200 shadow-Soft"
               aria-label="구글로 로그인"
               onClick={() => toast.error("준비중입니다.")}
             >
@@ -124,7 +124,7 @@ export default function Login() {
           <Link
             to="/signup"
             state={{ step: 1 }}
-            className="mt-6 font-body3 text-text-placeholder underline underline-offset-4 hover:text-text-auth-sub"
+            className="mt-6 font-body2 text-text-placeholder underline underline-offset-4 hover:text-text-auth-sub"
           >
             이메일로 회원가입
           </Link>
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index e1af688..1c92170 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -49,7 +49,7 @@ export default function Signup() {
           variant="gradient"
           leftIcon={<MailIcon className="w-6 h-6" />}
           onClick={() => setStep(1)}
-          className="font-heading3 shadow-md hover:shadow-lg transition-all"
+          className="font-heading4 shadow-Soft hover:shadow-Medium transition-all"
         >
           이메일로 시작하기
         </Button>
@@ -60,7 +60,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<GoogleIcon className="w-6 h-6" />}
           onClick={() => handleSocialLogin("google")}
-          className="bg-white border border-gray-100 text-text-main font-heading3 shadow-sm hover:bg-gray-50"
+          className="bg-white border border-gray-100 text-text-main font-heading4 shadow-Soft hover:bg-gray-50"
         >
           구글 로그인
         </Button>
@@ -71,7 +71,7 @@ export default function Signup() {
           variant="custom"
           leftIcon={<KakaoIcon className="w-6 h-6" />}
           onClick={() => handleSocialLogin("kakao")}
-          className="bg-social-kakao text-text-main font-heading3 shadow-sm hover:opacity-90"
+          className="bg-social-kakao text-text-main font-heading4 shadow-Soft hover:opacity-90"
         >
           카카오 로그인
         </Button>
@@ -82,13 +82,13 @@ export default function Signup() {
           variant="custom"
           leftIcon={<NaverIcon className="w-5 h-5 text-white" />}
           onClick={() => handleSocialLogin("naver")}
-          className="bg-social-naver text-white font-heading3 shadow-sm hover:opacity-90"
+          className="bg-social-naver text-white font-heading4 shadow-Soft hover:opacity-90"
         >
           네이버 로그인
         </Button>
       </div>
 
-      <div className="font-body3 text-text-sub mt-15 flex gap-2">
+      <div className="font-body2 text-text-sub mt-15 flex gap-2">
         <span>이미 사용자 계정이 있다면?</span>
         <Link
           to="/login"
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index c2b2625..f32f74f 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -160,15 +160,15 @@ export default function WorkspacePage() {
         padding="lg"
       >
         <div className="px-2">
-          <h2 className="font-heading3 text-text-main mb-2">
+          <h2 className="font-heading4 text-text-main mb-2">
             워크스페이스 생성
           </h2>
           <p className="font-body1 text-text-sub mb-6">
             워크스페이스를 생성한 사용자는 자동으로 관리자 권한을 갖습니다.{" "}
             <br /> 로고 이미지와 기본 정보를 입력해 주세요.
           </p>
-          <div className="space-y-6 mx-auto w-full max-w-[800px]">
-            <div className="max-w-[560px] mx-auto w-full mb-10">
+          <div className="space-y-6 mx-auto w-full max-w-200">
+            <div className="max-w-140 mx-auto w-full mb-10">
               <input
                 ref={fileRef}
                 type="file"
@@ -180,7 +180,7 @@ export default function WorkspacePage() {
                 <div className="font-label text-text-sub">로고 이미지</div>
                 <Button
                   variant="custom"
-                  className="!h-7 border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
+                  className="h-7! border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
                   onClick={openFile}
                   type="button"
                 >
@@ -191,7 +191,7 @@ export default function WorkspacePage() {
                 type="button"
                 aria-label="로고 이미지 업로드"
                 onClick={openFile}
-                className="w-full rounded-component-lg border border-gray-100 bg-gray-50 h-[260px] flex items-center justify-center hover:bg-gray-100 transition-colors"
+                className="w-full rounded-component-lg border border-gray-100 bg-gray-50 h-65 flex items-center justify-center hover:bg-gray-100 transition-colors"
               >
                 <span className="text-text-sub">
                   <UpLoadImgIcon />
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index 051c4b5..9eca186 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -32,8 +32,8 @@ export default function WorkspaceSetting() {
           워크스페이스 정보를 확인하고 관리하세요.
         </p>
       </header>
-      <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-sm">
-        <h2 className="font-heading3 text-text-main">기본 정보</h2>
+      <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-Soft">
+        <h2 className="font-heading4 text-text-main">기본 정보</h2>
         <p className="font-body2 text-text-sub mt-2">
           워크스페이스의 대표적인 정보를 설정합니다.
         </p>
@@ -46,7 +46,7 @@ export default function WorkspaceSetting() {
             <div className="flex gap-3 mt-3 justify-center">
               <Button
                 variant="custom"
-                className="!h-7 border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
+                className="h-7! border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
                 onClick={() => alert("TODO:추후 업로드")}
                 aria-label="로고 이미지 업로드 버튼"
               >
@@ -54,7 +54,7 @@ export default function WorkspaceSetting() {
               </Button>
               <Button
                 variant="custom"
-                className="!h-7 border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
+                className="h-7! border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
                 onClick={() => alert("TODO:추후 초기화연결")}
                 aria-label="로고 이미지 초기화 버튼"
               >
@@ -78,7 +78,7 @@ export default function WorkspaceSetting() {
               </label>
               <textarea
                 id="workspace-setting-desc"
-                className="w-full min-h-[220px] rounded-component-md bg-gray-50 px-5 py-4 outline-none transition-smooth hover:bg-gray-100 focus:bg-white focus:ring-2 focus:ring-logo-1/30 text-body1 text-text-main placeholder:text-text-placeholder"
+                className="w-full min-h-55 rounded-component-md bg-gray-50 px-5 py-4 outline-none transition-smooth hover:bg-gray-100 focus:bg-white focus:ring-2 focus:ring-logo-1/30 text-body1 text-text-main placeholder:text-text-placeholder"
                 placeholder="워크스페이스에 대한 설명을 입력해주세요"
                 value={desc}
                 onChange={(e) => setDesc(e.target.value)}
@@ -103,7 +103,7 @@ export default function WorkspaceSetting() {
         <div className="flex gap-4 sm:gap-8 items-start sm:items-center">
           <WarningIcon />
           <div>
-            <div className="text-status-red font-heading3">
+            <div className="text-status-red font-heading4">
               워크스페이스 삭제
             </div>
             <p className="font-body1 text-text-auth-sub mt-2">
diff --git a/src/stories/BorderRadius.stories.tsx b/src/stories/BorderRadius.stories.tsx
new file mode 100644
index 0000000..646f80f
--- /dev/null
+++ b/src/stories/BorderRadius.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const radiusTokens = [
+  {
+    className: "rounded-component-sm",
+    label: "Component SM",
+    value: "0.5rem (8px)",
+    usage: "이미지, 소형 버튼, 뱃지",
+  },
+  {
+    className: "rounded-component-md",
+    label: "Component MD",
+    value: "1rem (16px)",
+    usage: "버튼, 인풋, 모달, 드롭다운, 네비 아이템",
+  },
+  {
+    className: "rounded-component-lg",
+    label: "Component LG",
+    value: "1.5rem (24px)",
+    usage: "카드, 패널, 알럿",
+  },
+  {
+    className: "rounded-full",
+    label: "Full",
+    value: "9999px",
+    usage: "아바타, 소셜 버튼, 뱃지 pill",
+  },
+];
+
+function BorderRadiusDoc() {
+  return (
+    <div className="p-8 space-y-2 max-w-3xl">
+      <div className="grid grid-cols-[180px_1fr_120px_1fr] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
+        <span>Token</span>
+        <span>Preview</span>
+        <span>Value</span>
+        <span>Usage</span>
+      </div>
+      {radiusTokens.map(({ className, value, usage }) => (
+        <div
+          key={className}
+          className="grid grid-cols-[180px_1fr_120px_1fr] gap-x-4 items-center py-4 border-b border-gray-100"
+        >
+          <span className="text-xs text-gray-400 font-mono">.{className}</span>
+          <div
+            className={`w-20 h-12 bg-brand-400 border border-brand-500 ${className}`}
+          />
+          <span className="text-xs text-gray-400">{value}</span>
+          <span className="text-xs text-gray-400">{usage}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Border Radius",
+  component: BorderRadiusDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};
diff --git a/src/stories/Colors.stories.tsx b/src/stories/Colors.stories.tsx
new file mode 100644
index 0000000..d583285
--- /dev/null
+++ b/src/stories/Colors.stories.tsx
@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const colorGroups = [
+  {
+    label: "Brand",
+    colors: [
+      { name: "brand-900", value: "#000000" },
+      { name: "brand-800", value: "#001f5b" },
+      { name: "brand-700", value: "#213e68" },
+      { name: "brand-600", value: "#466a9c" },
+      { name: "brand-500", value: "#88c1ff" },
+      { name: "brand-400", value: "#dce7f2" },
+      { name: "brand-300", value: "#f9fafb" },
+      { name: "brand-200", value: "#ffffff" },
+    ],
+  },
+  {
+    label: "Logo",
+    colors: [
+      { name: "logo-1", value: "#2eb4ff" },
+      { name: "logo-2", value: "#6088fe" },
+    ],
+  },
+  {
+    label: "Status",
+    colors: [
+      { name: "status-red", value: "#ff2a4b" },
+      { name: "status-blue", value: "#0084fe" },
+      { name: "status-green", value: "#22c55e" },
+      { name: "status-yellow", value: "#facc15" },
+    ],
+  },
+  {
+    label: "Text",
+    colors: [
+      { name: "text-main", value: "#212121" },
+      { name: "text-auth-sub", value: "#546171" },
+      { name: "text-sub", value: "#8b8b8f" },
+      { name: "text-placeholder", value: "#c3c3c3" },
+      { name: "text-disabled", value: "#b0b8c1" },
+      { name: "bg-disabled", value: "#e5e8eb" },
+      { name: "bg-surface", value: "#f6f6f6" },
+    ],
+  },
+  {
+    label: "Social",
+    colors: [
+      { name: "social-kakao", value: "#fee500" },
+      { name: "social-naver", value: "#03c75a" },
+      { name: "social-google", value: "#ffffff" },
+    ],
+  },
+  {
+    label: "Chart",
+    colors: [
+      { name: "chart-1", value: "#0a3d91" },
+      { name: "chart-2", value: "#0056b3" },
+      { name: "chart-3", value: "#1485ff" },
+      { name: "chart-4", value: "#00aeef" },
+      { name: "chart-5", value: "#4fc3f7" },
+      { name: "chart-inactive", value: "#f2f4f6" },
+    ],
+  },
+];
+
+function ColorDoc() {
+  return (
+    <div className="p-8 space-y-8 max-w-3xl">
+      {colorGroups.map(({ label, colors }) => (
+        <div key={label}>
+          <h2 className="text-xs text-gray-400 font-medium uppercase tracking-wide mb-3">
+            {label}
+          </h2>
+          <div className="flex flex-wrap gap-4">
+            {colors.map(({ name, value }) => (
+              <div key={name} className="flex flex-col gap-1.5 w-24">
+                <div
+                  className="w-24 h-12 rounded-lg border border-gray-300 overflow-hidden"
+                  style={{
+                    backgroundImage:
+                      "linear-gradient(45deg, #d1d5db 25%, transparent 25%), linear-gradient(-45deg, #d1d5db 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d1d5db 75%), linear-gradient(-45deg, transparent 75%, #d1d5db 75%)",
+                    backgroundSize: "8px 8px",
+                    backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
+                  }}
+                >
+                  <div
+                    className="w-full h-full"
+                    style={{ backgroundColor: value }}
+                  />
+                </div>
+                <span className="text-xs text-gray-500 font-mono">{name}</span>
+                <span className="text-xs text-gray-400">{value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Colors",
+  component: ColorDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};
diff --git a/src/stories/Shadows.stories.tsx b/src/stories/Shadows.stories.tsx
new file mode 100644
index 0000000..ad62d8e
--- /dev/null
+++ b/src/stories/Shadows.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const shadowTokens = [
+  {
+    className: "shadow-Soft",
+    label: "Soft",
+    value: "0px 0px 16px 0px rgba(0, 0, 0, 0.1)",
+  },
+  {
+    className: "shadow-Medium",
+    label: "Medium",
+    value: "0px 0px 16px 0px rgba(0, 0, 0, 0.2)",
+  },
+];
+
+function ShadowDoc() {
+  return (
+    <div className="p-8 space-y-2 max-w-2xl">
+      <div className="grid grid-cols-[140px_1fr_280px] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
+        <span>Token</span>
+        <span>Preview</span>
+        <span>Value</span>
+      </div>
+      {shadowTokens.map(({ className, value }) => (
+        <div
+          key={className}
+          className="grid grid-cols-[140px_1fr_280px] gap-x-4 items-center py-6 border-b border-gray-100"
+        >
+          <span className="text-xs text-gray-400 font-mono">.{className}</span>
+          <div className={`w-24 h-14 bg-white rounded-lg ${className}`} />
+          <span className="text-xs text-gray-400">{value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Shadows",
+  component: ShadowDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};
diff --git a/src/stories/Typography.stories.tsx b/src/stories/Typography.stories.tsx
new file mode 100644
index 0000000..ba32b9b
--- /dev/null
+++ b/src/stories/Typography.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const fontTokens = [
+  {
+    className: "font-hero",
+    label: "Hero",
+    size: "54px",
+    weight: "700",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-heading1",
+    label: "Heading 1",
+    size: "30px",
+    weight: "600",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-heading2",
+    label: "Heading 2",
+    size: "28px",
+    weight: "600",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-heading3",
+    label: "Heading 3",
+    size: "24px",
+    weight: "500",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-heading4",
+    label: "Heading 4",
+    size: "18px",
+    weight: "400",
+    lineHeight: "130%",
+  },
+  {
+    className: "font-body1",
+    label: "Body 1",
+    size: "16px",
+    weight: "500",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-body2",
+    label: "Body 2",
+    size: "14px",
+    weight: "500",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-label",
+    label: "Label",
+    size: "14px",
+    weight: "600",
+    lineHeight: "140%",
+  },
+  {
+    className: "font-caption",
+    label: "Caption",
+    size: "12px",
+    weight: "500",
+    lineHeight: "130%",
+  },
+];
+
+function TypographyDoc() {
+  return (
+    <div className="p-8 space-y-2 max-w-2xl">
+      <div className="grid grid-cols-[120px_1fr_80px_60px_60px] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide">
+        <span>Token</span>
+        <span>Sample</span>
+        <span>Size</span>
+        <span>Weight</span>
+        <span>Leading</span>
+      </div>
+      {fontTokens.map(({ className, label, size, weight, lineHeight }) => (
+        <div
+          key={className}
+          className="grid grid-cols-[120px_1fr_80px_60px_60px] gap-x-4 items-baseline py-3 border-b border-gray-100"
+        >
+          <span className="text-xs text-gray-400 font-mono">.{className}</span>
+          <span className={className}>{label} — 가나다라마바사</span>
+          <span className="text-xs text-gray-400">{size}</span>
+          <span className="text-xs text-gray-400">{weight}</span>
+          <span className="text-xs text-gray-400">{lineHeight}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Design Tokens/Typography",
+  component: TypographyDoc,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type TStory = StoryObj;
+
+export const All: TStory = {};