From 553d7956bedb809decbb603608b7a4c0467215ab Mon Sep 17 00:00:00 2001
From: Seongbin Kim <seongbin9786@gmail.com>
Date: Sun, 19 Jul 2026 16:00:52 +0900
Subject: [PATCH] =?UTF-8?q?refactor(fe):=20=ED=83=80=EC=9D=B4=ED=8F=AC=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=80=EC=9D=BC=20=ED=86=A0=ED=81=B0=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D,=20text-[Npx]=20=EC=9E=84=EC=9D=98=EA=B0=92=EC=9D=84?=
 =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=EC=9C=BC=EB=A1=9C=20=EC=B9=98=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

글자 크기를 text-[11px], text-[13px], text-[15px] 임의값으로 45곳에 흩뿌려 쓰고 있어 스케일에 이름도 단일 출처도 없었다. styles.css @theme에 font-size 토큰으로 등록하고 임의값을 이름으로 치환한다. 토큰은 font-size만 정의해 렌더가 이전과 픽셀 동일하다.

- --text-caption(11px), --text-label(13px), --text-body(15px) 등록
- text-[11px]→text-caption(20), text-[13px]→text-label(9), text-[15px]→text-body(16)
- line-height는 각 사용처 leading 클래스가 계속 결정

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/components/auth/name-onboarding.tsx     |  2 +-
 frontend/src/components/home/relation-force-map.tsx  |  4 ++--
 frontend/src/components/person/person-fields.tsx     |  2 +-
 .../settings/relation-tag-color-picker.tsx           |  2 +-
 .../components/settings/settings-navigation-item.tsx |  2 +-
 .../src/components/timeline/activity-flow-chart.tsx  |  6 +++---
 frontend/src/components/timeline/timeline-feed.tsx   |  2 +-
 .../src/components/timeline/timeline-filters.tsx     |  4 ++--
 frontend/src/components/ui/empty-state.tsx           |  2 +-
 frontend/src/components/ui/list-group.tsx            |  4 ++--
 frontend/src/components/ui/segmented-control.tsx     |  4 ++--
 frontend/src/components/ui/tag-chip.tsx              | 10 +++++-----
 .../stackflow/activities/event-detail-activity.tsx   |  4 ++--
 .../activities/person/person-profile-view.tsx        | 12 +++++-------
 .../activities/person/person-timeline-view.tsx       |  4 ++--
 .../src/stackflow/activities/record-activity.tsx     |  4 ++--
 .../activities/settings/home-settings-activity.tsx   |  2 +-
 .../stackflow/activities/settings/tag-type-panel.tsx |  2 +-
 frontend/src/stackflow/components/stack-tab-bar.tsx  |  2 +-
 frontend/src/stackflow/tabs/home-tab.tsx             |  4 ++--
 frontend/src/stackflow/tabs/people-tab.tsx           |  8 ++++----
 frontend/src/stackflow/tabs/settings-tab.tsx         |  6 +++---
 frontend/src/styles.css                              |  5 +++++
 23 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/auth/name-onboarding.tsx b/frontend/src/components/auth/name-onboarding.tsx
index 02e4fbc..d131dd4 100644
--- a/frontend/src/components/auth/name-onboarding.tsx
+++ b/frontend/src/components/auth/name-onboarding.tsx
@@ -41,7 +41,7 @@ export function NameOnboarding({
           <br />
           부르면 좋을까요?
         </h1>
-        <p className="mt-4 max-w-xs text-[15px] font-medium leading-6 text-muted-foreground">
+        <p className="mt-4 max-w-xs text-body font-medium leading-6 text-muted-foreground">
           이름과 관계 기록은 이 브라우저의 나만의 공간에 연결돼요.
         </p>
 
diff --git a/frontend/src/components/home/relation-force-map.tsx b/frontend/src/components/home/relation-force-map.tsx
index 86bf8dd..48512c7 100644
--- a/frontend/src/components/home/relation-force-map.tsx
+++ b/frontend/src/components/home/relation-force-map.tsx
@@ -511,7 +511,7 @@ function CategoryClusterGraph({
           <span
             key={category.label}
             data-amp-mask
-            className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/80 px-2 py-1 text-[11px] font-black text-zinc-700 shadow-[0_8px_18px_rgba(24,24,27,0.06)] dark:bg-zinc-950/82 dark:text-zinc-200 dark:shadow-[0_8px_18px_rgba(0,0,0,0.28)]"
+            className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/80 px-2 py-1 text-caption font-black text-zinc-700 shadow-[0_8px_18px_rgba(24,24,27,0.06)] dark:bg-zinc-950/82 dark:text-zinc-200 dark:shadow-[0_8px_18px_rgba(0,0,0,0.28)]"
             style={{
               left: `${position.x}%`,
               top: `${position.y + radius.labelOffset}%`,
@@ -735,7 +735,7 @@ function PersonNode({
         </span>
       ) : null}
       {showLastMeet && person.intimacy.daysSinceLastMeet != null ? (
-        <span className="mt-1 text-[11px] leading-none font-medium text-zinc-500 dark:text-zinc-400">
+        <span className="mt-1 text-caption leading-none font-medium text-zinc-500 dark:text-zinc-400">
           {formatDaysSinceLastMeet(person.intimacy.daysSinceLastMeet)}
         </span>
       ) : null}
diff --git a/frontend/src/components/person/person-fields.tsx b/frontend/src/components/person/person-fields.tsx
index 34d9e97..91d092a 100644
--- a/frontend/src/components/person/person-fields.tsx
+++ b/frontend/src/components/person/person-fields.tsx
@@ -93,7 +93,7 @@ export function ListField({
             <span
               key={item}
               className={cn(
-                'inline-flex h-7 max-w-full items-center gap-1 rounded-md px-2.5 text-[13px] font-bold',
+                'inline-flex h-7 max-w-full items-center gap-1 rounded-md px-2.5 text-label font-bold',
                 chipToneClass,
               )}
             >
diff --git a/frontend/src/components/settings/relation-tag-color-picker.tsx b/frontend/src/components/settings/relation-tag-color-picker.tsx
index 4fc0ca0..e66f91f 100644
--- a/frontend/src/components/settings/relation-tag-color-picker.tsx
+++ b/frontend/src/components/settings/relation-tag-color-picker.tsx
@@ -43,7 +43,7 @@ export function RelationTagColorPicker({
             {selectedOption?.label ?? normalized}
           </span>
         </div>
-        <span className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 text-[11px] font-extrabold text-muted-foreground">
+        <span className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 text-caption font-extrabold text-muted-foreground">
           <Palette className="size-3.5" />
           변경
         </span>
diff --git a/frontend/src/components/settings/settings-navigation-item.tsx b/frontend/src/components/settings/settings-navigation-item.tsx
index 2abfd42..feacf4a 100644
--- a/frontend/src/components/settings/settings-navigation-item.tsx
+++ b/frontend/src/components/settings/settings-navigation-item.tsx
@@ -17,7 +17,7 @@ export function SettingsNavigationItem({
         onClick={onClick}
         className="flex min-h-14 w-full items-center justify-between gap-4 px-4 py-3.5 text-left transition-colors hover:bg-muted/70"
       >
-        <span className="text-[15px] font-extrabold text-foreground">
+        <span className="text-body font-extrabold text-foreground">
           {label}
         </span>
         <ChevronRight className="size-5 shrink-0 text-muted-foreground" />
diff --git a/frontend/src/components/timeline/activity-flow-chart.tsx b/frontend/src/components/timeline/activity-flow-chart.tsx
index 58ee45d..07701cc 100644
--- a/frontend/src/components/timeline/activity-flow-chart.tsx
+++ b/frontend/src/components/timeline/activity-flow-chart.tsx
@@ -108,7 +108,7 @@ export function ActivityFlowChart({
             <button
               type="button"
               onClick={() => setMenuOpen((open) => !open)}
-              className="inline-flex h-8 items-center gap-1 rounded-full border border-border bg-background px-3 text-[11px] font-extrabold text-foreground"
+              className="inline-flex h-8 items-center gap-1 rounded-full border border-border bg-background px-3 text-caption font-extrabold text-foreground"
               aria-expanded={menuOpen}
               aria-haspopup="listbox"
             >
@@ -137,7 +137,7 @@ export function ActivityFlowChart({
                         onSelectPoint?.(null)
                       }}
                       className={cn(
-                        'flex w-full px-3 py-1.5 text-left text-[11px] font-bold',
+                        'flex w-full px-3 py-1.5 text-left text-caption font-bold',
                         period === option.value
                           ? 'bg-primary text-primary-foreground'
                           : 'text-foreground hover:bg-muted',
@@ -177,7 +177,7 @@ export function ActivityFlowChart({
                   />
                   <span
                     data-amp-mask
-                    className="min-w-0 flex-1 truncate text-[11px] font-extrabold text-muted-foreground"
+                    className="min-w-0 flex-1 truncate text-caption font-extrabold text-muted-foreground"
                   >
                     {lane.label}
                   </span>
diff --git a/frontend/src/components/timeline/timeline-feed.tsx b/frontend/src/components/timeline/timeline-feed.tsx
index bd54f1e..c9783fc 100644
--- a/frontend/src/components/timeline/timeline-feed.tsx
+++ b/frontend/src/components/timeline/timeline-feed.tsx
@@ -44,7 +44,7 @@ export function TimelineFeed<T extends TimelineFeedItem>({
                 : 'top-[max(2.5rem,env(safe-area-inset-top))] -mx-5 px-5',
             )}
           >
-            <p className="inline-flex h-7 min-w-[4.375rem] items-center justify-center rounded-full bg-muted px-3 text-[11px] leading-tight font-extrabold text-muted-foreground">
+            <p className="inline-flex h-7 min-w-[4.375rem] items-center justify-center rounded-full bg-muted px-3 text-caption leading-tight font-extrabold text-muted-foreground">
               {group.year}
             </p>
           </div>
diff --git a/frontend/src/components/timeline/timeline-filters.tsx b/frontend/src/components/timeline/timeline-filters.tsx
index e034313..006ec28 100644
--- a/frontend/src/components/timeline/timeline-filters.tsx
+++ b/frontend/src/components/timeline/timeline-filters.tsx
@@ -20,7 +20,7 @@ export function TimelineCategoryFilters({
 
   return (
     <section className="mb-4">
-      <p className="mb-2 text-[11px] font-extrabold text-muted-foreground">
+      <p className="mb-2 text-caption font-extrabold text-muted-foreground">
         카테고리
       </p>
       <div className="flex flex-wrap gap-2">
@@ -55,7 +55,7 @@ export function TimelinePersonFilters({
 }) {
   return (
     <section className="mb-3">
-      <p className="mb-2 text-[11px] font-extrabold text-muted-foreground">
+      <p className="mb-2 text-caption font-extrabold text-muted-foreground">
         사람
       </p>
       <div className="flex flex-wrap gap-2">
diff --git a/frontend/src/components/ui/empty-state.tsx b/frontend/src/components/ui/empty-state.tsx
index a948333..18f6e7f 100644
--- a/frontend/src/components/ui/empty-state.tsx
+++ b/frontend/src/components/ui/empty-state.tsx
@@ -19,7 +19,7 @@ function EmptyStateTitle({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="empty-state-title"
-      className={cn('text-[15px] font-extrabold text-foreground', className)}
+      className={cn('text-body font-extrabold text-foreground', className)}
       {...props}
     />
   )
diff --git a/frontend/src/components/ui/list-group.tsx b/frontend/src/components/ui/list-group.tsx
index 0dea87a..c969380 100644
--- a/frontend/src/components/ui/list-group.tsx
+++ b/frontend/src/components/ui/list-group.tsx
@@ -2,7 +2,7 @@ import { cn } from '@/lib/utils'
 
 export function ListGroupLabel({ children }: { children: React.ReactNode }) {
   return (
-    <p className="mb-2 px-3 text-[11px] font-extrabold tracking-wide text-muted-foreground uppercase">
+    <p className="mb-2 px-3 text-caption font-extrabold tracking-wide text-muted-foreground uppercase">
       {children}
     </p>
   )
@@ -51,7 +51,7 @@ export function ListGroupItem({
 
 export function ListGroupFooter({ children }: { children: React.ReactNode }) {
   return (
-    <p className="mt-2 px-3 text-[11px] font-medium leading-relaxed text-muted-foreground">
+    <p className="mt-2 px-3 text-caption font-medium leading-relaxed text-muted-foreground">
       {children}
     </p>
   )
diff --git a/frontend/src/components/ui/segmented-control.tsx b/frontend/src/components/ui/segmented-control.tsx
index bec9f29..07d73dc 100644
--- a/frontend/src/components/ui/segmented-control.tsx
+++ b/frontend/src/components/ui/segmented-control.tsx
@@ -39,7 +39,7 @@ export function SegmentedControl<T extends string>({
         <ToggleGroupPrimitive.Item
           key={option.value}
           value={option.value}
-          className="flex flex-1 items-center justify-center rounded-lg py-2.5 text-[13px] font-extrabold text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
+          className="flex flex-1 items-center justify-center rounded-lg py-2.5 text-label font-extrabold text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
         >
           {option.label}
         </ToggleGroupPrimitive.Item>
@@ -52,7 +52,7 @@ export function SegmentedControl<T extends string>({
         {options.map((option) => (
           <span
             key={option.value}
-            className="flex flex-1 items-center justify-center py-2.5 text-[13px] font-extrabold"
+            className="flex flex-1 items-center justify-center py-2.5 text-label font-extrabold"
           >
             {option.label}
           </span>
diff --git a/frontend/src/components/ui/tag-chip.tsx b/frontend/src/components/ui/tag-chip.tsx
index a4709fd..ca547c8 100644
--- a/frontend/src/components/ui/tag-chip.tsx
+++ b/frontend/src/components/ui/tag-chip.tsx
@@ -10,7 +10,7 @@ import { coloredTagStyle } from '@/lib/relation-tag-colors'
 // 고정하는 계약이라 값을 바꾸지 않는다. TagChip 자체는 아래 cva에서 높이·표면·
 // 채움색을 축으로 분해해 재조립한다.
 export const tagChipBaseClass =
-  'inline-flex h-7 w-fit shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent px-3.5 text-[13px] leading-none font-bold whitespace-nowrap transition-colors'
+  'inline-flex h-7 w-fit shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent px-3.5 text-label leading-none font-bold whitespace-nowrap transition-colors'
 
 const tagChipVariants = cva(
   'group/tag-chip inline-flex w-fit shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent leading-none whitespace-nowrap transition-colors',
@@ -20,10 +20,10 @@ const tagChipVariants = cva(
       // 함께 움직여 한 축으로 묶는다.
       size: {
         xs: 'h-5 px-2 text-[10px] font-bold',
-        sm: 'h-6 px-2 text-[11px] font-bold',
-        default: 'h-7 px-3.5 text-[13px] font-bold',
-        lg: 'h-8 px-2.5 text-[13px] font-bold',
-        xl: 'h-9 w-auto max-w-full shrink justify-start px-1.5 pr-3 text-[13px] font-extrabold',
+        sm: 'h-6 px-2 text-caption font-bold',
+        default: 'h-7 px-3.5 text-label font-bold',
+        lg: 'h-8 px-2.5 text-label font-bold',
+        xl: 'h-9 w-auto max-w-full shrink justify-start px-1.5 pr-3 text-label font-extrabold',
       },
       // 쉬는 상태(비선택)의 표면색. selected면 tone이 이 색을 덮는다.
       surface: {
diff --git a/frontend/src/stackflow/activities/event-detail-activity.tsx b/frontend/src/stackflow/activities/event-detail-activity.tsx
index 87eb3ff..c6969fe 100644
--- a/frontend/src/stackflow/activities/event-detail-activity.tsx
+++ b/frontend/src/stackflow/activities/event-detail-activity.tsx
@@ -71,7 +71,7 @@ export const EventDetailActivity: ActivityComponentType<'EventDetail'> = ({
         <button
           type="button"
           onClick={() => push('Record', { eventId: String(id) })}
-          className="text-right text-[15px] font-extrabold"
+          className="text-right text-body font-extrabold"
         >
           수정
         </button>
@@ -136,7 +136,7 @@ export const EventDetailActivity: ActivityComponentType<'EventDetail'> = ({
         {memo ? (
           <p
             data-amp-mask
-            className="mt-4 whitespace-pre-wrap text-[15px] leading-relaxed text-foreground"
+            className="mt-4 whitespace-pre-wrap text-body leading-relaxed text-foreground"
           >
             {memo}
           </p>
diff --git a/frontend/src/stackflow/activities/person/person-profile-view.tsx b/frontend/src/stackflow/activities/person/person-profile-view.tsx
index 4a61012..db87d17 100644
--- a/frontend/src/stackflow/activities/person/person-profile-view.tsx
+++ b/frontend/src/stackflow/activities/person/person-profile-view.tsx
@@ -173,7 +173,7 @@ export function PersonProfileView({
         {recentEvents.length > 0 ? (
           <section>
             <div className="mb-2 flex items-center justify-between px-3">
-              <p className="text-[11px] font-extrabold tracking-wide text-muted-foreground uppercase">
+              <p className="text-caption font-extrabold tracking-wide text-muted-foreground uppercase">
                 최근 함께한 일
               </p>
               <button
@@ -230,7 +230,7 @@ export function PersonProfileView({
               <button
                 type="button"
                 onClick={() => push('Record', { personId })}
-                className="flex w-full items-center justify-between py-3.5 text-[15px] font-extrabold text-foreground transition-colors active:opacity-70"
+                className="flex w-full items-center justify-between py-3.5 text-body font-extrabold text-foreground transition-colors active:opacity-70"
               >
                 상황 기록 작성
                 <ChevronRight className="size-5 text-muted-foreground" />
@@ -240,7 +240,7 @@ export function PersonProfileView({
               <button
                 type="button"
                 onClick={() => push('PersonEdit', { personId })}
-                className="flex w-full items-center justify-between py-3.5 text-[15px] font-extrabold text-foreground transition-colors active:opacity-70"
+                className="flex w-full items-center justify-between py-3.5 text-body font-extrabold text-foreground transition-colors active:opacity-70"
               >
                 프로필 수정
                 <ChevronRight className="size-5 text-muted-foreground" />
@@ -251,7 +251,7 @@ export function PersonProfileView({
                 type="button"
                 onClick={() => del.setOpen(true)}
                 disabled={del.pending}
-                className="flex w-full items-center justify-between py-3.5 text-left text-[15px] font-extrabold text-destructive transition-colors active:opacity-70 disabled:opacity-60"
+                className="flex w-full items-center justify-between py-3.5 text-left text-body font-extrabold text-destructive transition-colors active:opacity-70 disabled:opacity-60"
               >
                 인물 삭제
                 <ChevronRight className="size-5 text-destructive/70" />
@@ -361,9 +361,7 @@ function Stat({ label, value }: { label: string; value: string }) {
   return (
     <div>
       <dt className="text-xs font-bold text-muted-foreground">{label}</dt>
-      <dd className="mt-1 text-[15px] font-extrabold text-foreground">
-        {value}
-      </dd>
+      <dd className="mt-1 text-body font-extrabold text-foreground">{value}</dd>
     </div>
   )
 }
diff --git a/frontend/src/stackflow/activities/person/person-timeline-view.tsx b/frontend/src/stackflow/activities/person/person-timeline-view.tsx
index d1c60b8..ffa2076 100644
--- a/frontend/src/stackflow/activities/person/person-timeline-view.tsx
+++ b/frontend/src/stackflow/activities/person/person-timeline-view.tsx
@@ -147,7 +147,7 @@ export function PersonTimelineView({ personId }: { personId: string }) {
                 <p className="text-base font-extrabold">
                   {person.stats.recordCount}개
                 </p>
-                <p className="text-[11px] font-medium text-muted-foreground">
+                <p className="text-caption font-medium text-muted-foreground">
                   함께한 기록
                 </p>
               </div>
@@ -155,7 +155,7 @@ export function PersonTimelineView({ personId }: { personId: string }) {
                 <p className="text-base font-extrabold">
                   {person.stats.lastMetRelative ?? '기록 없음'}
                 </p>
-                <p className="text-[11px] font-medium text-muted-foreground">
+                <p className="text-caption font-medium text-muted-foreground">
                   마지막 만남
                 </p>
               </div>
diff --git a/frontend/src/stackflow/activities/record-activity.tsx b/frontend/src/stackflow/activities/record-activity.tsx
index 8bf1f08..19b7135 100644
--- a/frontend/src/stackflow/activities/record-activity.tsx
+++ b/frontend/src/stackflow/activities/record-activity.tsx
@@ -87,7 +87,7 @@ const EMOTION_TEXT = [
 ]
 
 const bigChipBase =
-  'inline-flex h-11 items-center justify-center rounded-full border px-5 text-[15px] whitespace-nowrap transition-colors'
+  'inline-flex h-11 items-center justify-center rounded-full border px-5 text-body whitespace-nowrap transition-colors'
 // 선택 채움은 순검정 대신 살짝 연한 잉크(눈부심 완화).
 const neutralChipClass = cn(
   bigChipBase,
@@ -628,7 +628,7 @@ export const RecordActivity: ActivityComponentType<'Record'> = ({ params }) => {
               style={letterPaperStyle}
               className="font-hand min-h-[148px] resize-none border-0 bg-transparent p-0 text-lg leading-7 tracking-tight shadow-none focus-visible:ring-0 md:text-lg"
             />
-            <span className="pointer-events-none absolute right-3 bottom-2 text-[11px] tabular-nums text-muted-foreground/70">
+            <span className="pointer-events-none absolute right-3 bottom-2 text-caption tabular-nums text-muted-foreground/70">
               {what.length}/{MEMO_MAX}
             </span>
           </div>
diff --git a/frontend/src/stackflow/activities/settings/home-settings-activity.tsx b/frontend/src/stackflow/activities/settings/home-settings-activity.tsx
index 8ede551..096d09c 100644
--- a/frontend/src/stackflow/activities/settings/home-settings-activity.tsx
+++ b/frontend/src/stackflow/activities/settings/home-settings-activity.tsx
@@ -25,7 +25,7 @@ export const HomeSettingsActivity: ActivityComponentType<
     <ActivityShell layout="fixed">
       <SettingsPageHeader title="홈 설정" onBack={() => pop()} />
       <div className="min-h-0 flex-1 overflow-y-auto pb-8">
-        <p className="mb-1 text-[15px] font-extrabold text-foreground">
+        <p className="mb-1 text-body font-extrabold text-foreground">
           기본으로 보여줄 기간
         </p>
         <p className="mb-4 text-xs font-medium text-muted-foreground">
diff --git a/frontend/src/stackflow/activities/settings/tag-type-panel.tsx b/frontend/src/stackflow/activities/settings/tag-type-panel.tsx
index 1813c98..d56b1f2 100644
--- a/frontend/src/stackflow/activities/settings/tag-type-panel.tsx
+++ b/frontend/src/stackflow/activities/settings/tag-type-panel.tsx
@@ -134,7 +134,7 @@ export function TagTypePanel({
             {description}
           </p>
         </div>
-        <span className="shrink-0 text-[11px] font-bold text-muted-foreground">
+        <span className="shrink-0 text-caption font-bold text-muted-foreground">
           {chips.length}개
         </span>
       </div>
diff --git a/frontend/src/stackflow/components/stack-tab-bar.tsx b/frontend/src/stackflow/components/stack-tab-bar.tsx
index d8a77a6..a1e0dbf 100644
--- a/frontend/src/stackflow/components/stack-tab-bar.tsx
+++ b/frontend/src/stackflow/components/stack-tab-bar.tsx
@@ -48,7 +48,7 @@ export function StackTabBar({ activeTab }: { activeTab: MainTab }) {
               type="button"
               onClick={() => replaceStep({ tab: item.tab })}
               className={cn(
-                'flex flex-col items-center gap-1 text-[11px] font-bold',
+                'flex flex-col items-center gap-1 text-caption font-bold',
                 activeTab === item.tab
                   ? 'text-foreground'
                   : 'text-muted-foreground',
diff --git a/frontend/src/stackflow/tabs/home-tab.tsx b/frontend/src/stackflow/tabs/home-tab.tsx
index 79b4a01..58f0b23 100644
--- a/frontend/src/stackflow/tabs/home-tab.tsx
+++ b/frontend/src/stackflow/tabs/home-tab.tsx
@@ -120,13 +120,13 @@ export function HomeTab() {
               >
                 <p className="text-sm font-extrabold text-foreground">
                   1년 전 오늘
-                  <span className="ml-2 text-[11px] font-bold text-muted-foreground">
+                  <span className="ml-2 text-caption font-bold text-muted-foreground">
                     {throwback.occurredDate}
                   </span>
                 </p>
                 <p
                   data-amp-mask
-                  className="mt-1 line-clamp-2 text-[13px] font-medium text-muted-foreground"
+                  className="mt-1 line-clamp-2 text-label font-medium text-muted-foreground"
                 >
                   {throwback.title ?? `작년 이맘때 ${throwback.personName}`}
                 </p>
diff --git a/frontend/src/stackflow/tabs/people-tab.tsx b/frontend/src/stackflow/tabs/people-tab.tsx
index bb51330..5465ec8 100644
--- a/frontend/src/stackflow/tabs/people-tab.tsx
+++ b/frontend/src/stackflow/tabs/people-tab.tsx
@@ -93,7 +93,7 @@ export function PeopleTab() {
           <button
             type="button"
             onClick={() => push('PersonNew', {})}
-            className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-[13px] font-extrabold text-primary-foreground"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-label font-extrabold text-primary-foreground"
           >
             <Plus className="size-4" />
             추가
@@ -111,7 +111,7 @@ export function PeopleTab() {
                   value={query}
                   onChange={(e) => handleQueryChange(e.target.value)}
                   placeholder="이름·관계 유형 검색"
-                  className="h-10 border-0 bg-transparent pl-8 text-[15px] shadow-none focus-visible:ring-0"
+                  className="h-10 border-0 bg-transparent pl-8 text-body shadow-none focus-visible:ring-0"
                 />
               </ListGroupInset>
             </ListGroupItem>
@@ -234,7 +234,7 @@ function PersonListItem({
         <div className="min-w-0 flex-1">
           <p
             data-amp-mask
-            className="truncate text-[15px] font-extrabold text-foreground"
+            className="truncate text-body font-extrabold text-foreground"
           >
             {displayName}
           </p>
@@ -273,7 +273,7 @@ function PersonListItem({
           </div>
           <p
             className={cn(
-              'mt-1 text-[11px] font-bold',
+              'mt-1 text-caption font-bold',
               lastMetLabel === '기록 없음'
                 ? 'text-muted-foreground/70'
                 : 'text-muted-foreground',
diff --git a/frontend/src/stackflow/tabs/settings-tab.tsx b/frontend/src/stackflow/tabs/settings-tab.tsx
index 1fd1de5..b588a1c 100644
--- a/frontend/src/stackflow/tabs/settings-tab.tsx
+++ b/frontend/src/stackflow/tabs/settings-tab.tsx
@@ -66,7 +66,7 @@ export function SettingsTab() {
           <ListGroup>
             <ListGroupItem withDivider={false}>
               <div className="flex min-h-9 items-center justify-between gap-4">
-                <span className="text-[15px] font-extrabold text-foreground">
+                <span className="text-body font-extrabold text-foreground">
                   다크 모드
                 </span>
                 <Switch
@@ -85,7 +85,7 @@ export function SettingsTab() {
             <ListGroupItem withDivider={false}>
               <div className="flex items-center justify-between gap-4">
                 <div>
-                  <p className="text-[15px] font-extrabold text-foreground">
+                  <p className="text-body font-extrabold text-foreground">
                     테스트 사용자 초기화
                   </p>
                   <p className="mt-1 text-xs font-medium text-muted-foreground">
@@ -118,7 +118,7 @@ export function SettingsTab() {
           <ListGroup>
             <ListGroupItem withDivider={false}>
               <div className="flex items-center justify-between">
-                <span className="text-[15px] font-extrabold text-foreground">
+                <span className="text-body font-extrabold text-foreground">
                   Mongle
                 </span>
                 <span className="text-xs font-bold text-muted-foreground">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index addecf1..3c08daa 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -92,6 +92,11 @@
   --color-ring: var(--ring);
   --font-sans: var(--font-sans);
   --font-hand: 'Onglip Eunbyeol', var(--font-sans);
+  /* 앱 고유 타이포 스케일. font-size만 지정해 기존 text-[Npx] 임의값과 렌더가 동일하다
+     (line-height는 각 사용처의 leading 클래스가 계속 결정한다). */
+  --text-caption: 11px;
+  --text-label: 13px;
+  --text-body: 15px;
 }
 
 @layer base {