diff --git a/DESIGN.md b/DESIGN.md
index e7d17a97..f554a144 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -136,16 +136,22 @@ Preserve established icon and data colors during surface or theme refactors. Use
 
 ### Fonts and hierarchy
 
-The global body size is currently 14px, and `src/assets/index.css` does not define a custom brand font. Keep system sans-serif fonts with platform Chinese fallbacks. Do not introduce decorative fonts or remote font dependencies for the client. Keep Monaco's monospace editor font; SQL, types, object identifiers, and code snippets may use the existing `font-mono` utility.
+The global body size is `var(--font-size-form)` (14px), and `src/assets/index.css` does not define a custom brand font. Keep system sans-serif fonts with platform Chinese fallbacks. Do not introduce decorative fonts or remote font dependencies for the client. Keep Monaco's monospace editor font; SQL, types, object identifiers, and code snippets may use the existing `font-mono` utility.
+
+The type scale is token-driven. `index.css` defines `--font-size-caption / dense / body / form / title / page-title` (11 / 12 / 13 / 14 / 16 / 20px); `uno.config.ts` maps the two sizes missing from the default scale (`text-caption` = 11px, `text-body` = 13px), and the rest reuse default utilities (`text-xs` = 12, `text-sm` = 14, `text-base` = 16, `text-xl` = 20). Business components must use these utilities or the CSS variables — never a bare px/rem font size. Monaco's editor font size remains a user setting.
+
+Custom font-size utilities must also be registered in the shared `cn()` helper so component overrides merge sizes independently of semantic text colors.
 
 The following hierarchy constrains new UI; it does not require rewriting all existing page titles.
 
-| Role | Size / weight | Usage |
+| Role | Token / utility | Usage |
 | --- | --- | --- |
-| Page title | 20–24px / 600 | Standalone pages such as Connections and Settings; do not add large headings to editor workspaces |
-| Dialog / section title | 14–18px / 500–600 | Dialog titles and major groups |
-| Body / form | 14px / 400 | Descriptions, inputs, buttons; matches the current `text-sm` |
-| Dense data / supporting labels | 12px / 400–500 | Result grids, object trees, toolbars, status bars |
+| Page title | `text-xl` (20px / 600) | Standalone pages such as Connections and Settings; do not add large headings to editor workspaces |
+| Dialog / panel / card title | `text-base` (16px / 600) | Dialog titles, side-panel headers, card and section titles |
+| Body / form | `text-sm` (14px / 400) | Descriptions, inputs, buttons |
+| Sidebar lists, trees, and menus | `text-body` (13px / 400–500) | Connection selector rows, object trees, saved-query names, query tabs, dropdown items |
+| Dense data / supporting labels | `text-xs` (12px / 400–500) | Result grids, toolbars, status bars, empty-state hints |
+| Captions and badges | `text-caption` (11px / 500) | Attribute badges, timestamps, task counters; the readable lower bound — 9–10px text is forbidden |
 
 - Use roughly 1.4–1.6 line height for ordinary text. Code follows editor settings; fixed-height table rows must not clip text.
 - Do not use 9–10px text for states, prices, field meanings, or instructions users must read. Adjust the layout first when space is tight.
@@ -163,11 +169,12 @@ Retain the existing app shell: top window bar → left feature navigation → cu
 | --- | --- | --- |
 | Initial window | 1600 × 1000 | `src-tauri/tauri.conf.json`; not a minimum window size |
 | Window bar | 40px | `h-10` in `AppHeader.vue` |
-| Feature navigation | 64px wide, 40 × 40px entries | `AppSidebar.vue` |
+| Feature navigation | 56px wide, 36 × 36px entries, 20px icons | `AppSidebar.vue` |
 | Query sidebar | Initially 250px, resize range 200–400px | `QueriesPage.vue` |
-| Query tabs | 35px high, maximum 200px per tab | `QueryTabs.vue` |
-| Result toolbar | 36px high | `QueryResultPanel.vue` |
-| Standard buttons / inputs | 32px high | `ui/button`, `ui/input` |
+| Object tree rows | 28px row height (20px line + 8px padding), 13px text, 14px icons | `SchemaTree.vue` |
+| Query tabs | 35px high, 13px labels, maximum 200px per tab | `QueryTabs.vue` |
+| Result toolbar | 36px high (result panel and grid toolbars share this) | `QueryResultPanel.vue`, `DataGrid.vue` |
+| Standard buttons / inputs | 32px high; 24 / 28 / 36px via `xs` / `sm` / `lg` | `ui/button`, `ui/input` |
 | Virtual result rows | 32px estimated height | `grid/DataGrid.vue`; not a shared height for every table |
 
 ### Spacing and containers
@@ -204,7 +211,9 @@ Keep `--radius: 0.5rem`: `lg` is 8px, `md` is 6px, and `sm` is 4px. Use `rounded
 
 - Use corner radius to convey component hierarchy rather than inventing per-page values. Keep continuous straight edges for data grids, split panes, and editors.
 - Limit `rounded-full` to suitable elements such as avatars, small status dots, and existing badges. Do not make every button pill-shaped.
-- Toolbar icons are usually 14–16px and main navigation icons 20px; the visible icon is smaller than its hit target. Keep standard action targets at 32px. Compact grid actions should generally be at least 24px with sufficient spacing and keyboard access.
+- Icon scale: 12px for inline glyphs (chevrons, close buttons, badge icons), 14px for tree, tab, and compact toolbar icons, 16px for standard buttons, menu items, and input adornments, 20px for main navigation. Dropdown-menu icons inherit the shared `size-4` from `DropdownMenuItem`; do not override per menu. The visible icon is smaller than its hit target; keep standard action targets at 32px and compact grid actions at least 24px with sufficient spacing and keyboard access.
+- Database vendor logos use three sizes: 14px inside lists and tabs, 16px in dropdown selected states and forms, 20px on cards and landing states (`DbTypeIcon` defaults to 16).
+- Status dots use 8px (`h-2 w-2`) inline within rows and 10px (`h-2.5 w-2.5`) as a standalone indicator beside a control.
 - Reuse the component's existing Carbon / Lucide style. Do not add icon libraries for color or decoration, or mix emoji into an action group.
 
 ## Components
@@ -217,7 +226,7 @@ Interactive components must cover default, hover, focus-visible, active / select
 
 ### Buttons and toolbars
 
-- `default`: the single primary action, retaining `bg-primary text-primary-foreground`. Current default height is 32px; large is 36px.
+- `default`: the single primary action, retaining `bg-primary text-primary-foreground`. Heights: `xs` 24px, `sm` 28px, default 32px, `lg` 36px; icon buttons mirror this via `icon-xs` / `icon-sm` / `icon`. Use `sm` for sidebar and toolbar rows instead of overriding heights per component.
 - `outline / secondary`: secondary actions; `ghost`: toolbar and infrequent actions; `link`: explicit text links.
 - `destructive`: genuinely destructive actions such as deletion. Ordinary disconnect and stop-query actions do not automatically become solid red buttons because they stop something.
 - Loading states prevent duplicate submission and keep readable labels. Provide cancellation for cancellable long tasks rather than disabling the entire panel.
diff --git a/src/assets/index.css b/src/assets/index.css
index d6d1ebbc..782fee20 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -92,6 +92,20 @@
   --syntax-comment: 112.50 7.55% 58.43%;
 }
 
+:root {
+  /* Type scale (see DESIGN.md Typography). text-caption / text-body map to
+     --font-size-caption / --font-size-body via uno.config.ts; the other sizes
+     reuse the default utilities text-xs (12) / text-sm (14) / text-base (16) /
+     text-xl (20). Business components must use these variables or utilities
+     instead of bare px/rem font sizes. */
+  --font-size-caption: 11px;
+  --font-size-dense: 12px;
+  --font-size-body: 13px;
+  --font-size-form: 14px;
+  --font-size-title: 16px;
+  --font-size-page-title: 20px;
+}
+
 * {
   border-color: hsl(var(--border));
 }
@@ -107,7 +121,7 @@ body,
 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
-  font-size: 14px;
+  font-size: var(--font-size-form);
 }
 
 [data-tauri-drag-region] {
diff --git a/src/components/DeviceReplaceDialog.vue b/src/components/DeviceReplaceDialog.vue
index f8c5ba76..aef8cf6e 100644
--- a/src/components/DeviceReplaceDialog.vue
+++ b/src/components/DeviceReplaceDialog.vue
@@ -152,7 +152,7 @@ function handleOpenChange(open: boolean) {
 }
 
 .slot-usage {
-  font-size: 13px;
+  font-size: var(--font-size-body);
   color: hsl(var(--muted-foreground));
   margin-bottom: 12px;
 }
@@ -204,26 +204,26 @@ function handleOpenChange(open: boolean) {
 
 .device-name {
   font-weight: 500;
-  font-size: 14px;
+  font-size: var(--font-size-form);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .current-tag {
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
   font-weight: 400;
 }
 
 .device-info {
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
   margin-top: 2px;
 }
 
 .replace-error {
-  font-size: 13px;
+  font-size: var(--font-size-body);
   color: hsl(var(--destructive-text));
   margin-top: 8px;
 }
diff --git a/src/components/SQLEditor.vue b/src/components/SQLEditor.vue
index c6f8debb..f0ad617a 100644
--- a/src/components/SQLEditor.vue
+++ b/src/components/SQLEditor.vue
@@ -313,11 +313,11 @@ defineExpose({ getValue, setValue, handleFormat })
   gap: 16px;
   padding: 6px 12px;
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--font-size-body);
 }
 
 .sql-context-menu li .shortcut {
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   opacity: 0.5;
   white-space: nowrap;
 }
diff --git a/src/components/UpdateNotification.vue b/src/components/UpdateNotification.vue
index 68cc17c0..e84e7fce 100644
--- a/src/components/UpdateNotification.vue
+++ b/src/components/UpdateNotification.vue
@@ -78,7 +78,7 @@ const buttonsDisabled = computed(() =>
         </div>
 
         <div class="flex-1 min-w-0">
-          <div class="text-[16px] text-foreground font-bold mb-0.5">
+          <div class="text-base text-foreground font-bold mb-0.5">
             {{ t('updater.updateAvailable') }}
           </div>
           <div class="text-sm text-muted-foreground">
diff --git a/src/components/agent-message-bubble.vue b/src/components/agent-message-bubble.vue
index f85ef321..28f05a11 100644
--- a/src/components/agent-message-bubble.vue
+++ b/src/components/agent-message-bubble.vue
@@ -534,7 +534,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
   max-width: 85%;
   padding: 10px 14px;
   border-radius: 12px;
-  font-size: 14px;
+  font-size: var(--font-size-form);
   line-height: 1.5;
 }
 
@@ -595,7 +595,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
 }
 
 .iteration-label {
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -631,7 +631,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
 }
 
 .activity-label {
-  font-size: 13px;
+  font-size: var(--font-size-body);
   color: hsl(var(--muted-foreground));
   white-space: nowrap;
   overflow: hidden;
@@ -656,7 +656,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
 }
 
 .duration-badge {
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   font-weight: 500;
   color: hsl(var(--muted-foreground));
   background: hsl(var(--muted));
@@ -673,7 +673,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
 }
 
 .tool-name-badge {
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace;
   color: hsl(var(--foreground) / 0.75);
   background: hsl(var(--muted));
@@ -688,7 +688,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
 }
 
 .tool-verb-label {
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
 }
 
@@ -719,7 +719,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
 }
 
 .result-preview {
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
   white-space: nowrap;
   overflow: hidden;
@@ -748,7 +748,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
 .tool-result-pre {
   margin: 0;
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-all;
@@ -777,7 +777,7 @@ function toolVerb(toolName: string, tc: AgentToolCall): string {
   border-radius: 6px;
   background: hsl(var(--destructive-muted));
   color: hsl(var(--destructive-text));
-  font-size: 13px;
+  font-size: var(--font-size-body);
   overflow-wrap: anywhere;
 }
 
@@ -802,7 +802,7 @@ details[open] .activity-chevron {
 .activity-body {
   margin: 0 0 4px 42px;
   padding: 6px 10px;
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   line-height: 1.6;
   color: hsl(var(--muted-foreground));
   background: hsl(var(--muted) / 0.5);
@@ -859,7 +859,7 @@ details[open] .activity-chevron {
 
 .activity-inline-content {
   padding: 4px 0 4px 20px;
-  font-size: 13.5px;
+  font-size: var(--font-size-body);
   line-height: 1.55;
   color: hsl(var(--foreground));
 }
@@ -881,7 +881,7 @@ details[open] .activity-chevron {
 }
 
 .markdown-body :deep(pre code) {
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   background: none;
   padding: 0;
   border: none;
@@ -892,7 +892,7 @@ details[open] .activity-chevron {
   border-collapse: collapse;
   width: 100%;
   margin: 8px 0;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
 }
 
 .markdown-body :deep(th),
@@ -926,7 +926,7 @@ details[open] .activity-chevron {
 }
 
 .markdown-body :deep(h1) {
-  font-size: 22px;
+  font-size: var(--font-size-page-title);
   margin-top: 24px;
   margin-bottom: 12px;
   border-bottom: 1px solid hsl(var(--border));
@@ -934,7 +934,7 @@ details[open] .activity-chevron {
 }
 
 .markdown-body :deep(h2) {
-  font-size: 18px;
+  font-size: var(--font-size-title);
   margin-top: 20px;
   margin-bottom: 10px;
   border-bottom: 1px solid hsl(var(--border));
@@ -942,22 +942,22 @@ details[open] .activity-chevron {
 }
 
 .markdown-body :deep(h3) {
-  font-size: 16px;
+  font-size: var(--font-size-form);
   margin-top: 18px;
 }
 
 .markdown-body :deep(h4) {
-  font-size: 15px;
+  font-size: var(--font-size-body);
   margin-top: 16px;
 }
 
 .markdown-body :deep(h5) {
-  font-size: 14px;
+  font-size: var(--font-size-dense);
   margin-top: 14px;
 }
 
 .markdown-body :deep(h6) {
-  font-size: 13px;
+  font-size: var(--font-size-caption);
   margin-top: 14px;
   color: hsl(var(--muted-foreground));
 }
@@ -1054,7 +1054,7 @@ details[open] .activity-chevron {
   border: 1px solid hsl(var(--border) / 0.5);
   border-radius: 8px;
   max-width: fit-content;
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
 }
 
@@ -1075,7 +1075,7 @@ details[open] .activity-chevron {
   align-items: center;
   gap: 4px;
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--foreground) / 0.75);
   padding: 1px 8px;
   background: hsl(var(--background));
@@ -1104,7 +1104,7 @@ details[open] .activity-chevron {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
   padding: 0;
   margin-left: 4px;
@@ -1125,7 +1125,7 @@ details[open] .activity-chevron {
   padding: 8px 12px;
   background: hsl(var(--muted) / 0.4);
   border-radius: 8px;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   line-height: 1.55;
   color: hsl(var(--foreground) / 0.85);
   max-height: 240px;
diff --git a/src/components/chat-panel.vue b/src/components/chat-panel.vue
index 1dea1adb..5cbdcba6 100644
--- a/src/components/chat-panel.vue
+++ b/src/components/chat-panel.vue
@@ -315,7 +315,7 @@ onBeforeUnmount(() => {
         <span class="i-carbon-pause-filled shrink-0 h-4 w-4" style="color: hsl(38 92% 50%);" />
         <div class="flex flex-col gap-0.5">
           <span class="text-xs font-medium">{{ stopMessage }}</span>
-          <span class="text-[11px] text-muted-foreground">{{ t('dataStudio.agent.continueHint') }}</span>
+          <span class="text-caption text-muted-foreground">{{ t('dataStudio.agent.continueHint') }}</span>
         </div>
       </div>
       <div class="flex shrink-0 gap-1.5">
@@ -455,7 +455,7 @@ onBeforeUnmount(() => {
   outline: none;
   background: transparent;
   color: hsl(var(--foreground));
-  font-size: 13px;
+  font-size: var(--font-size-body);
   resize: none;
   line-height: 1.5;
 }
@@ -550,13 +550,13 @@ onBeforeUnmount(() => {
 }
 
 .loop-stopped-banner__message {
-  font-size: 13px;
+  font-size: var(--font-size-body);
   font-weight: 500;
   line-height: 1.4;
 }
 
 .loop-stopped-banner__hint {
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
   line-height: 1.4;
 }
@@ -570,7 +570,7 @@ onBeforeUnmount(() => {
 
 .loop-stopped-banner__action {
   padding: 4px 10px;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   border-radius: 6px;
   cursor: pointer;
diff --git a/src/components/connections/ServerCard.vue b/src/components/connections/ServerCard.vue
index f2adf7bb..6a9984fc 100644
--- a/src/components/connections/ServerCard.vue
+++ b/src/components/connections/ServerCard.vue
@@ -109,7 +109,7 @@ const connectTooltip = computed(() =>
       <Tooltip>
         <TooltipTrigger as-child>
           <div
-            class="rounded-full h-2.5 w-2.5 right-4 top-4 absolute"
+            class="rounded-full h-2 w-2 right-4 top-4 absolute"
             :class="statusColor"
           />
         </TooltipTrigger>
@@ -123,7 +123,7 @@ const connectTooltip = computed(() =>
       <!-- Database type icon -->
       <div class="flex items-start justify-between">
         <div
-          class="p-1.5 rounded-lg flex h-10 w-10 items-center justify-center"
+          class="p-1.5 rounded-lg flex h-9 w-9 items-center justify-center"
           :class="getDatabaseColor(connection.type)"
         >
           <img
@@ -136,10 +136,10 @@ const connectTooltip = computed(() =>
 
       <!-- Connection name -->
       <div>
-        <h3 class="text-lg leading-tight font-semibold truncate">
+        <h3 class="text-base leading-tight font-semibold truncate">
           {{ connection.name }}
         </h3>
-        <p class="text-sm text-muted-foreground mt-1 truncate" :title="connectionUrl">
+        <p class="text-body text-muted-foreground mt-1 truncate" :title="connectionUrl">
           {{ connectionUrl }}
         </p>
       </div>
diff --git a/src/components/connections/SshTunnelConfigPanel.vue b/src/components/connections/SshTunnelConfigPanel.vue
index cb9cc807..54d7a0e9 100644
--- a/src/components/connections/SshTunnelConfigPanel.vue
+++ b/src/components/connections/SshTunnelConfigPanel.vue
@@ -378,12 +378,12 @@ onMounted(detectProxy)
         v-if="detectedProxy && useSystemProxy"
         class="px-2.5 py-1.5 border border-primary/40 rounded-md bg-primary/5 flex gap-2 items-center"
       >
-        <span class="text-[10px] text-muted-foreground font-bold shrink-0 w-4">0</span>
+        <span class="text-caption text-muted-foreground font-bold shrink-0 w-4">0</span>
         <div class="flex-1 min-w-0">
           <div class="text-sm font-medium">
             {{ t('components.serverForm.ssh.systemProxy') }}
           </div>
-          <div class="text-[11px] text-muted-foreground font-mono truncate">
+          <div class="text-caption text-muted-foreground font-mono truncate">
             {{ detectedProxy }}
           </div>
         </div>
@@ -405,12 +405,12 @@ onMounted(detectProxy)
         v-else-if="!detectedProxy && useSystemProxy"
         class="px-2.5 py-1.5 border border-amber-500/50 rounded-md bg-amber-50 flex gap-2 items-center dark:bg-amber-900/20"
       >
-        <span class="text-[10px] text-muted-foreground font-bold shrink-0 w-4">0</span>
+        <span class="text-caption text-muted-foreground font-bold shrink-0 w-4">0</span>
         <div class="flex-1 min-w-0">
           <div class="text-sm font-medium">
             {{ t('components.serverForm.ssh.systemProxy') }}
           </div>
-          <div class="text-[11px] text-amber-600 truncate dark:text-amber-400">
+          <div class="text-caption text-amber-600 truncate dark:text-amber-400">
             {{ t('components.serverForm.ssh.systemProxyNotDetected') }}
           </div>
         </div>
@@ -453,12 +453,12 @@ onMounted(detectProxy)
             class="px-2.5 py-1.5 border rounded-md bg-background flex gap-2 items-center"
           >
             <span class="ssh-hop-handle i-carbon-draggable text-muted-foreground shrink-0 h-3.5 w-3.5 cursor-grab" />
-            <span class="text-[10px] text-muted-foreground font-bold w-4">{{ index + 1 }}</span>
+            <span class="text-caption text-muted-foreground font-bold w-4">{{ index + 1 }}</span>
             <div class="flex-1 min-w-0">
               <div class="text-sm font-medium truncate">
                 {{ profile.name }}
               </div>
-              <div class="text-[11px] text-muted-foreground truncate">
+              <div class="text-caption text-muted-foreground truncate">
                 {{ profile.username }}@{{ profile.host }}:{{ profile.port }}
               </div>
             </div>
@@ -489,7 +489,7 @@ onMounted(detectProxy)
 
       <div v-if="legacyInline" class="space-y-2">
         <div class="px-2.5 py-1.5 border rounded-md bg-background flex gap-2 items-center">
-          <span class="text-[10px] text-muted-foreground font-bold shrink-0 w-4">1</span>
+          <span class="text-caption text-muted-foreground font-bold shrink-0 w-4">1</span>
           <div class="flex-1 min-w-0">
             <div class="text-sm font-medium truncate">
               {{ props.modelValue?.host }}
@@ -520,10 +520,10 @@ onMounted(detectProxy)
       </div>
 
       <!-- Chain preview: proxy → hops → target -->
-      <p v-if="chainSegments.length > 1" class="text-[11px] text-muted-foreground font-mono break-words">
+      <p v-if="chainSegments.length > 1" class="text-caption text-muted-foreground font-mono break-words">
         {{ chainSegments.join('  →  ') }}
       </p>
-      <p v-if="hopProfiles.length > 1" class="text-[11px] text-muted-foreground">
+      <p v-if="hopProfiles.length > 1" class="text-caption text-muted-foreground">
         {{ t('components.serverForm.ssh.hopOrderHint') }}
       </p>
 
diff --git a/src/components/context-indicator.vue b/src/components/context-indicator.vue
index 6862d19d..04e1337a 100644
--- a/src/components/context-indicator.vue
+++ b/src/components/context-indicator.vue
@@ -266,7 +266,7 @@ defineExpose({ refresh })
   border-radius: 999px;
   background: hsl(var(--background));
   color: hsl(var(--muted-foreground));
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-variant-numeric: tabular-nums;
   line-height: 1;
   cursor: pointer;
@@ -297,7 +297,7 @@ defineExpose({ refresh })
   border-radius: 4px;
   background: hsl(38 92% 48% / 0.18);
   color: hsl(38 92% 38%);
-  font-size: 9px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.06em;
   line-height: 1.4;
@@ -313,7 +313,7 @@ defineExpose({ refresh })
   border-radius: 6px;
   background: hsl(38 92% 48% / 0.08);
   color: hsl(38 92% 30%);
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   line-height: 1.4;
 }
 
@@ -368,7 +368,7 @@ defineExpose({ refresh })
   background: hsl(var(--popover));
   color: hsl(var(--popover-foreground));
   box-shadow: 0 8px 24px hsl(0 0% 0% / 0.12);
-  font-size: 12px;
+  font-size: var(--font-size-dense);
 }
 
 .context-indicator__popover-header {
@@ -384,7 +384,7 @@ defineExpose({ refresh })
 }
 
 .context-indicator__popover-model {
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
   max-width: 140px;
   overflow: hidden;
@@ -406,7 +406,7 @@ defineExpose({ refresh })
 }
 
 .context-indicator__grid dt {
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -432,7 +432,7 @@ defineExpose({ refresh })
   border-radius: 6px;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   cursor: pointer;
   transition:
     background-color 120ms ease,
diff --git a/src/components/database-browser/DataTableView.vue b/src/components/database-browser/DataTableView.vue
index e48c5315..a4a4fbe7 100644
--- a/src/components/database-browser/DataTableView.vue
+++ b/src/components/database-browser/DataTableView.vue
@@ -1363,7 +1363,7 @@ watch(
             <div class="flex gap-2 items-center">
               <!-- Column name, type, and PK icon - inline -->
               <Label :for="`edit-field-${col}`" class="text-xs font-medium whitespace-nowrap">
-                {{ col }}<span v-if="columnTypeMap[col]" class="text-[10px] text-muted-foreground font-mono font-normal ml-1">{{ columnTypeMap[col] }}</span><span
+                {{ col }}<span v-if="columnTypeMap[col]" class="text-caption text-muted-foreground font-mono font-normal ml-1">{{ columnTypeMap[col] }}</span><span
                   v-if="columnIsPK[col]"
                   class="i-carbon-key text-amber-500 ml-1.5 h-3 w-3 inline-block"
                 />
@@ -1427,7 +1427,7 @@ watch(
   z-index: 10;
   background-color: hsl(var(--muted));
   padding: 0.375rem 0.75rem;
-  font-size: 0.75rem;
+  font-size: var(--font-size-dense);
   font-weight: 500;
   max-width: 200px;
   min-width: 80px;
@@ -1466,7 +1466,7 @@ tr:hover .data-table-actions-col {
 }
 
 .col-type {
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 400;
   font-family: monospace;
   color: hsl(var(--muted-foreground));
diff --git a/src/components/database-browser/DbTypeIcon.vue b/src/components/database-browser/DbTypeIcon.vue
index 8bb9d52e..be94b89d 100644
--- a/src/components/database-browser/DbTypeIcon.vue
+++ b/src/components/database-browser/DbTypeIcon.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 const { getDatabaseIcon } = useDatabaseIcon()
 
-const s = props.size ?? 14
+const s = props.size ?? 16
 </script>
 
 <template>
diff --git a/src/components/database-browser/QueryTabs.vue b/src/components/database-browser/QueryTabs.vue
index 77483140..79867a32 100644
--- a/src/components/database-browser/QueryTabs.vue
+++ b/src/components/database-browser/QueryTabs.vue
@@ -111,7 +111,7 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
       <div
         v-for="tab in tabs"
         :key="tab.id"
-        class="tab-item group text-xs px-3 border-r border-border flex gap-1 cursor-pointer select-none transition-colors items-center"
+        class="tab-item group text-body px-3 border-r border-border flex gap-1 cursor-pointer select-none transition-colors items-center"
         :class="{
           'bg-background text-foreground font-medium': isActiveTab(tab.id),
           'bg-muted/30 text-muted-foreground hover:bg-background/50 hover:text-foreground': !isActiveTab(tab.id),
@@ -143,7 +143,7 @@ const isActiveTab = (tabId: string) => props.activeTabId === tabId
         <DbTypeIcon
           v-if="getTabDbType(tab)"
           :type="getTabDbType(tab)!"
-          :size="12"
+          :size="14"
           class="flex-shrink-0"
         />
 
diff --git a/src/components/database-browser/ServerInfoView.vue b/src/components/database-browser/ServerInfoView.vue
index df0c951d..9dc50047 100644
--- a/src/components/database-browser/ServerInfoView.vue
+++ b/src/components/database-browser/ServerInfoView.vue
@@ -50,7 +50,7 @@ const currentDatabase = computed(() =>
       <span class="text-sm font-semibold truncate">{{ activeConnection.name }}</span>
       <span
         v-if="isConnected"
-        class="text-[10px] text-green-600 font-medium px-1.5 py-0.5 rounded-full bg-green-500/20 dark:text-green-400"
+        class="text-caption text-green-600 font-medium px-1.5 py-0.5 rounded-full bg-green-500/20 dark:text-green-400"
       >
         connected
       </span>
diff --git a/src/components/er-diagram/EngineeringEntity.vue b/src/components/er-diagram/EngineeringEntity.vue
index 38d2008c..79c3974b 100644
--- a/src/components/er-diagram/EngineeringEntity.vue
+++ b/src/components/er-diagram/EngineeringEntity.vue
@@ -109,7 +109,7 @@ defineExpose({})
 .er-entity {
   @apply bg-card border-2 border-blue-500/50 rounded-xl shadow-sm;
   width: 260px;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   user-select: none;
   overflow: hidden;
 }
@@ -133,7 +133,7 @@ defineExpose({})
   @apply p-2 flex flex-wrap gap-1.5;
 }
 .er-entity-pill {
-  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-mono border;
+  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-caption font-mono border;
   max-width: 100%;
   @apply bg-muted/50 border-border/60 text-muted-foreground;
 }
diff --git a/src/components/er-diagram/ErDiagramView.vue b/src/components/er-diagram/ErDiagramView.vue
index 1bfa91dc..33f73971 100644
--- a/src/components/er-diagram/ErDiagramView.vue
+++ b/src/components/er-diagram/ErDiagramView.vue
@@ -539,11 +539,11 @@ onUnmounted(() => {
       </div>
 
       <!-- Info badges -->
-      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.tablesCountBadge', { count: displayedTables.length })">
+      <Badge variant="secondary" class="text-caption shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.tablesCountBadge', { count: displayedTables.length })">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z" /><path d="M21 9H3" /><path d="M9 21V9" /></svg>
         {{ displayedTables.length }}
       </Badge>
-      <Badge variant="secondary" class="text-[11px] shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.relationshipsCountBadge', { count: displayedRelationships.length })">
+      <Badge variant="secondary" class="text-caption shrink-0 gap-1 h-6" :title="t('components.databaseBrowser.erDiagram.relationshipsCountBadge', { count: displayedRelationships.length })">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
         {{ displayedRelationships.length }}
       </Badge>
diff --git a/src/components/er-diagram/TableCard.vue b/src/components/er-diagram/TableCard.vue
index 46c72fc4..efdc432d 100644
--- a/src/components/er-diagram/TableCard.vue
+++ b/src/components/er-diagram/TableCard.vue
@@ -76,7 +76,7 @@ function isFKColumn(colName: string): boolean {
 .er-table-card {
   @apply bg-card border border-border rounded-lg shadow-sm;
   width: 220px;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   user-select: none;
 }
 .er-table-card--selected {
@@ -102,7 +102,7 @@ function isFKColumn(colName: string): boolean {
   @apply font-mono flex-1 truncate;
 }
 .er-column-type {
-  @apply text-muted-foreground text-[10px] flex-shrink-0;
+  @apply text-muted-foreground text-caption flex-shrink-0;
   max-width: 80px;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/components/grid/DataGrid.vue b/src/components/grid/DataGrid.vue
index 9b5c1b2c..c1ec254e 100644
--- a/src/components/grid/DataGrid.vue
+++ b/src/components/grid/DataGrid.vue
@@ -537,7 +537,7 @@ watch(sortableColumns, (columns) => {
          instead of the whole bar disappearing -->
     <div
       v-if="!hideToolbar"
-      class="px-3 py-1 border-b bg-muted/20 flex flex-shrink-0 gap-1 items-center"
+      class="px-3 border-b bg-muted/20 flex flex-shrink-0 gap-1 h-9 items-center"
     >
       <Button variant="ghost" size="sm" class="text-xs px-2 h-6" :disabled="sortedRows.length === 0" @click="copyAllAs('csv')">
         {{ $t('components.dataGrid.export.copyAllCsv') }}
@@ -653,7 +653,7 @@ watch(sortableColumns, (columns) => {
                 class="flex gap-1.5 min-w-0 items-baseline"
               >
                 <span class="text-xs font-medium shrink-0 truncate" :class="columnTypes?.[col] ? 'max-w-[70%]' : 'max-w-full'" :title="col">{{ col }}</span>
-                <span v-if="columnTypes?.[col]" class="column-type text-[10px] text-foreground/60 font-mono font-normal max-w-24 min-w-0 truncate" :title="columnTypes[col]">
+                <span v-if="columnTypes?.[col]" class="column-type text-caption text-foreground/60 font-mono font-normal max-w-24 min-w-0 truncate" :title="columnTypes[col]">
                   {{ columnTypes?.[col] }}
                 </span>
               </span>
@@ -677,7 +677,7 @@ watch(sortableColumns, (columns) => {
                 <!-- Multi-sort priority -->
                 <span
                   v-if="isMultiSort && sort.getSortPriority(col)"
-                  class="text-[10px] text-primary-text leading-tight font-bold px-1 rounded bg-primary/10 flex-shrink-0"
+                  class="text-caption text-primary-text leading-tight font-bold px-1 rounded bg-primary/10 flex-shrink-0"
                 >{{ sort.getSortPriority(col) }}</span>
                 <!-- Filter indicator -->
                 <span
@@ -695,7 +695,7 @@ watch(sortableColumns, (columns) => {
             >
               <span class="flex gap-1.5 min-w-0 items-baseline">
                 <span class="text-xs font-medium shrink-0 truncate" :class="columnTypes?.[col] ? 'max-w-[70%]' : 'max-w-full'" :title="col">{{ col }}</span>
-                <span v-if="columnTypes?.[col]" class="column-type text-[10px] text-foreground/60 font-mono font-normal max-w-24 min-w-0 truncate" :title="columnTypes[col]">
+                <span v-if="columnTypes?.[col]" class="column-type text-caption text-foreground/60 font-mono font-normal max-w-24 min-w-0 truncate" :title="columnTypes[col]">
                   {{ columnTypes?.[col] }}
                 </span>
               </span>
@@ -809,7 +809,7 @@ watch(sortableColumns, (columns) => {
                 <Button
                   variant="ghost"
                   size="sm"
-                  class="text-[10px] text-primary-text px-1 flex-shrink-0 h-5"
+                  class="text-caption text-primary-text px-1 flex-shrink-0 h-6"
                   @click.stop="openJsonDialog(sortedRows[virtualRow.index][col], col)"
                 >{{ $t('components.dataGrid.json.expand') }}</Button>
               </span>
@@ -832,35 +832,35 @@ watch(sortableColumns, (columns) => {
             >
               <DropdownMenu>
                 <DropdownMenuTrigger class="rounded flex h-6 w-6 items-center justify-center hover:bg-muted">
-                  <span class="i-carbon-overflow-menu-vertical h-4 w-4" />
+                  <span class="i-carbon-overflow-menu-vertical h-3.5 w-3.5" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" :side-offset="4">
                   <DropdownMenuItem @click="openEditDialog(virtualRow.index)">
-                    <span class="i-carbon-edit mr-2 h-3.5 w-3.5" />{{ $t('components.dataGrid.row.edit') }}
+                    <span class="i-carbon-edit mr-2" />{{ $t('components.dataGrid.row.edit') }}
                   </DropdownMenuItem>
                   <DropdownMenuItem @click="openDuplicateDialog(virtualRow.index)">
-                    <span class="i-carbon-copy mr-2 h-3.5 w-3.5" />{{ $t('components.dataGrid.row.duplicate') }}
+                    <span class="i-carbon-copy mr-2" />{{ $t('components.dataGrid.row.duplicate') }}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem @click="openDetailsDialog(virtualRow.index)">
-                    <span class="i-carbon-information mr-2 h-3.5 w-3.5" />{{ $t('components.dataGrid.row.details') }}
+                    <span class="i-carbon-information mr-2" />{{ $t('components.dataGrid.row.details') }}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem @click="copyUtil.copyRowsAs([sortedRows[virtualRow.index]], columns, 'csv', tableName)">
-                    <span class="i-carbon-table-split mr-2 h-3.5 w-3.5" />{{ $t('components.dataGrid.row.copyAsCsv') }}
+                    <span class="i-carbon-table-split mr-2" />{{ $t('components.dataGrid.row.copyAsCsv') }}
                   </DropdownMenuItem>
                   <DropdownMenuItem @click="copyUtil.copyRowsAs([sortedRows[virtualRow.index]], columns, 'json', tableName)">
-                    <span class="i-carbon-code mr-2 h-3.5 w-3.5" />{{ $t('components.dataGrid.row.copyAsJson') }}
+                    <span class="i-carbon-code mr-2" />{{ $t('components.dataGrid.row.copyAsJson') }}
                   </DropdownMenuItem>
                   <DropdownMenuItem @click="copyUtil.copyRowsAs([sortedRows[virtualRow.index]], columns, 'insert', tableName)">
-                    <span class="i-carbon-sql mr-2 h-3.5 w-3.5" />{{ $t('components.dataGrid.row.copyAsInsert') }}
+                    <span class="i-carbon-sql mr-2" />{{ $t('components.dataGrid.row.copyAsInsert') }}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
                     class="text-destructive-text focus:text-destructive-text"
                     @click="openDeleteDialog(virtualRow.index)"
                   >
-                    <span class="i-carbon-trash-can mr-2 h-3.5 w-3.5" />{{ $t('components.dataGrid.row.delete') }}
+                    <span class="i-carbon-trash-can mr-2" />{{ $t('components.dataGrid.row.delete') }}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
diff --git a/src/components/grid/EditRowDialog.vue b/src/components/grid/EditRowDialog.vue
index e677f4ad..6c664287 100644
--- a/src/components/grid/EditRowDialog.vue
+++ b/src/components/grid/EditRowDialog.vue
@@ -216,8 +216,8 @@ function handleClose(open: boolean) {
           <div class="flex gap-2 items-center">
             <Label class="text-xs font-medium whitespace-nowrap">
               {{ col }}
-              <span v-if="primaryKeys.includes(col)" class="text-[10px] text-amber-500 ml-1">(PK)</span>
-              <span v-if="columnTypes[col]" class="text-[10px] text-muted-foreground font-mono ml-1">{{ columnTypes[col] }}</span>
+              <span v-if="primaryKeys.includes(col)" class="text-caption text-amber-500 ml-1">(PK)</span>
+              <span v-if="columnTypes[col]" class="text-caption text-muted-foreground font-mono ml-1">{{ columnTypes[col] }}</span>
             </Label>
             <div class="flex-1" />
             <!-- NULL toggle for non-PK columns -->
diff --git a/src/components/grid/RowDetailsDialog.vue b/src/components/grid/RowDetailsDialog.vue
index d13ea2af..844a5e6d 100644
--- a/src/components/grid/RowDetailsDialog.vue
+++ b/src/components/grid/RowDetailsDialog.vue
@@ -51,7 +51,7 @@ const isNull = (v: unknown): boolean => v === null || v === undefined
         >
           <span class="text-sm text-muted-foreground font-medium flex-shrink-0 w-48">
             {{ col }}
-            <span v-if="columnTypes?.[col]" class="text-[10px] font-mono ml-1">({{ columnTypes[col] }})</span>
+            <span v-if="columnTypes?.[col]" class="text-caption font-mono ml-1">({{ columnTypes[col] }})</span>
           </span>
           <span
             class="text-sm font-mono flex-1 whitespace-pre-wrap break-all"
diff --git a/src/components/layout/AiAssistantSidebar.vue b/src/components/layout/AiAssistantSidebar.vue
index 40404dee..9b5a9164 100644
--- a/src/components/layout/AiAssistantSidebar.vue
+++ b/src/components/layout/AiAssistantSidebar.vue
@@ -240,7 +240,7 @@ onUnmounted(() => {
 }
 
 .header-title {
-  font-size: 16px;
+  font-size: var(--font-size-title);
   font-weight: 700;
 }
 
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 6157046a..de2186b7 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -59,7 +59,7 @@ const trafficLightInset = computed(() => {
               <span class="i-carbon-list-boxes h-4 w-4" />
               <span
                 v-if="taskCount > 0"
-                class="text-[9px] text-white font-bold px-1 rounded-full bg-red-500 flex h-4 min-w-4 items-center justify-center absolute -right-0.5 -top-0.5"
+                class="text-caption text-white font-bold px-1 rounded-full bg-red-500 flex h-4 min-w-4 items-center justify-center absolute -right-0.5 -top-0.5"
               >
                 {{ taskCount > 9 ? '9+' : taskCount }}
               </span>
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index cb7f5b88..e326f806 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -26,14 +26,14 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <aside class="border-r bg-chrome flex flex-shrink-0 flex-col h-full w-16 z-50">
+  <aside class="border-r bg-chrome flex flex-shrink-0 flex-col h-full w-14 z-50">
     <!-- User identity (was the logo; the app mark moved to the title bar) -->
-    <div class="border-b flex h-14 items-center justify-center">
+    <div class="border-b flex h-12 items-center justify-center">
       <UserMenu />
     </div>
 
     <!-- Navigation -->
-    <nav class="px-2 py-4 flex-1 overflow-y-auto space-y-2">
+    <nav class="px-1.5 py-3 flex-1 overflow-y-auto space-y-1.5">
       <TooltipProvider>
         <RouterLink
           v-for="item in menuItems"
@@ -45,7 +45,7 @@ const { t } = useI18n()
           <Tooltip>
             <TooltipTrigger as-child>
               <button
-                class="mx-auto rounded-md flex h-10 w-10 cursor-pointer transition-colors items-center justify-center relative" :class="[
+                class="mx-auto rounded-md flex h-9 w-9 cursor-pointer transition-colors items-center justify-center relative" :class="[
                   item.id === 'github'
                     ? 'text-muted-foreground hover:bg-secondary hover:text-foreground'
                     : isActive(item.path)
@@ -58,7 +58,7 @@ const { t } = useI18n()
                 <ProBadge
                   v-if="showProDots && item.gated"
                   size="dot"
-                  class="right-1 top-1 absolute"
+                  class="right-0.5 top-0.5 absolute"
                 />
                 <!-- DNS icon -->
                 <svg
@@ -152,14 +152,6 @@ const { t } = useI18n()
 
                 <!-- GitHub icon -->
                 <span v-if="item.icon === 'github'" class="i-lucide-github h-5 w-5" />
-
-                <!-- AI Badge -->
-                <span
-                  v-if="false"
-                  class="text-[8px] text-primary-foreground font-bold px-1 rounded-full bg-primary right-1 top-1 absolute"
-                >
-                  AI
-                </span>
               </button>
             </TooltipTrigger>
             <TooltipContent side="right">
@@ -177,7 +169,7 @@ const { t } = useI18n()
           <Tooltip>
             <TooltipTrigger as-child>
               <button
-                class="mx-auto rounded-md flex h-10 w-10 cursor-pointer transition-colors items-center justify-center" :class="[
+                class="mx-auto rounded-md flex h-9 w-9 cursor-pointer transition-colors items-center justify-center" :class="[
                   isActive('/settings')
                     ? 'bg-secondary text-primary-text border border-border shadow-sm'
                     : 'text-muted-foreground hover:bg-secondary hover:text-foreground',
diff --git a/src/components/layout/TaskSidebar.vue b/src/components/layout/TaskSidebar.vue
index 81289db2..32437429 100644
--- a/src/components/layout/TaskSidebar.vue
+++ b/src/components/layout/TaskSidebar.vue
@@ -103,7 +103,7 @@ onUnmounted(() => {
           </div>
           <div class="flex flex-col gap-1 items-center">
             <span class="text-xs text-foreground/60 font-medium">{{ t('transfer.tasks.noTasks') }}</span>
-            <span class="text-[11px] text-muted-foreground">{{ t('transfer.tasks.emptyDescription') }}</span>
+            <span class="text-caption text-muted-foreground">{{ t('transfer.tasks.emptyDescription') }}</span>
           </div>
         </div>
 
@@ -154,7 +154,7 @@ onUnmounted(() => {
 }
 
 .header-title {
-  font-size: 16px;
+  font-size: var(--font-size-title);
   font-weight: 700;
 }
 
diff --git a/src/components/layout/UserMenu.vue b/src/components/layout/UserMenu.vue
index 27f19333..54c39d0c 100644
--- a/src/components/layout/UserMenu.vue
+++ b/src/components/layout/UserMenu.vue
@@ -124,7 +124,7 @@ async function handleLogout() {
             {{ accountStore.email }}
           </p>
           <span
-            class="text-[10px] font-semibold mt-1.5 px-2 py-0.5 rounded-full inline-flex items-center"
+            class="text-caption font-semibold mt-1.5 px-2 py-0.5 rounded-full inline-flex items-center"
             :class="planBadge.cls"
           >
             <Loader2
@@ -135,10 +135,10 @@ async function handleLogout() {
           </span>
           <!-- The re-login instruction outranks any cached benefit copy: the
                session verdict is the only verified fact while degraded. -->
-          <p v-if="entitlementStore.sessionExpired" class="text-[11px] text-amber-500 mt-1">
+          <p v-if="entitlementStore.sessionExpired" class="text-caption text-amber-500 mt-1">
             {{ t('plan.section.sessionExpired') }}
           </p>
-          <p v-else-if="expiryText" class="text-[11px] text-muted-foreground mt-1">
+          <p v-else-if="expiryText" class="text-caption text-muted-foreground mt-1">
             {{ expiryText }}
           </p>
         </div>
@@ -157,7 +157,7 @@ async function handleLogout() {
           v-if="!recovering && !entitlementStore.sessionExpired && entitlementStore.hasEntitlementError"
           @click="runRecovery"
         >
-          <RefreshCw class="mr-2 h-3.5 w-3.5" />
+          <RefreshCw class="mr-2" />
           {{ t('plan.section.refresh') }}
         </DropdownMenuItem>
         <DropdownMenuItem
@@ -165,11 +165,11 @@ async function handleLogout() {
           :disabled="refreshing || recovering"
           @click="handleRefresh"
         >
-          <RefreshCw class="mr-2 h-3.5 w-3.5" :class="{ 'animate-spin': refreshing }" />
+          <RefreshCw class="mr-2" :class="{ 'animate-spin': refreshing }" />
           {{ t('plan.section.refresh') }}
         </DropdownMenuItem>
         <DropdownMenuItem :disabled="recovering" @click="openUrl(`${CONSOLE_BASE_URL}`)">
-          <Settings class="mr-2 h-3.5 w-3.5" />
+          <Settings class="mr-2" />
           {{ t('plan.section.manage') }}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
@@ -178,7 +178,7 @@ async function handleLogout() {
           :disabled="recovering"
           @click="handleLogout"
         >
-          <LogOut class="mr-2 h-3.5 w-3.5" />
+          <LogOut class="mr-2" />
           {{ t('plan.section.logout') }}
         </DropdownMenuItem>
       </template>
@@ -187,7 +187,7 @@ async function handleLogout() {
           <p class="text-sm text-foreground font-semibold">
             {{ t('plan.section.notLoggedIn') }}
           </p>
-          <p class="text-[11px] text-muted-foreground mt-1">
+          <p class="text-caption text-muted-foreground mt-1">
             {{ t('plan.pricing') }}
           </p>
         </div>
diff --git a/src/components/markdown-render.vue b/src/components/markdown-render.vue
index daf52f73..06a0e3fc 100644
--- a/src/components/markdown-render.vue
+++ b/src/components/markdown-render.vue
@@ -169,7 +169,7 @@ pre code[class*='language-'] {
 }
 
 .code-block-lang {
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-weight: 500;
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace;
   color: hsl(var(--muted-foreground));
@@ -210,7 +210,7 @@ pre:hover .code-block-actions {
   background: hsl(var(--popover));
   color: hsl(var(--popover-foreground));
   border: 1px solid hsl(var(--border));
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   white-space: nowrap;
   padding: 3px 7px;
   border-radius: 4px;
@@ -229,7 +229,7 @@ code.hljs.code-block-content {
   display: block;
   padding: 12px 16px;
   overflow-x: auto;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   line-height: 1.6;
   background: none;
   border: none;
diff --git a/src/components/model-picker.vue b/src/components/model-picker.vue
index 2d9de192..1b4f41f7 100644
--- a/src/components/model-picker.vue
+++ b/src/components/model-picker.vue
@@ -180,14 +180,14 @@ function selectModel(value: string) {
 }
 
 .model-picker-title {
-  font-size: 14px;
+  font-size: var(--font-size-form);
   font-weight: 700;
   letter-spacing: 0.03em;
 }
 
 .model-picker-subtitle {
   margin-top: 2px;
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   text-transform: uppercase;
   color: hsl(var(--muted-foreground));
 }
@@ -203,7 +203,7 @@ function selectModel(value: string) {
 
 .model-picker-heading {
   padding: 0 6px 6px;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-weight: 700;
   color: hsl(var(--primary-text));
 }
@@ -255,18 +255,18 @@ function selectModel(value: string) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 13px;
+  font-size: var(--font-size-body);
 }
 
 .model-picker-provider,
 .model-picker-meta {
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
 }
 
 .model-picker-empty {
   padding: 14px 8px;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
 }
 
diff --git a/src/components/sidebar/ConnectionSelector.vue b/src/components/sidebar/ConnectionSelector.vue
index 2cd0a6ab..2177fb85 100644
--- a/src/components/sidebar/ConnectionSelector.vue
+++ b/src/components/sidebar/ConnectionSelector.vue
@@ -73,7 +73,7 @@ function handleSelect(value: string) {
       :search-threshold="1"
       :placeholder="t('sidebar.connection.placeholder')"
       :search-placeholder="t('sidebar.search')"
-      class="text-xs flex-1 h-8"
+      class="text-body flex-1 h-8"
       @update:model-value="handleSelect"
     >
       <template #selected-prepend>
@@ -93,7 +93,7 @@ function handleSelect(value: string) {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger as-child>
-          <span class="shrink-0 h-3.5 w-3.5 cursor-help" :class="[statusInfo.dotClass]" />
+          <span class="shrink-0 h-2.5 w-2.5 cursor-help" :class="[statusInfo.dotClass]" />
         </TooltipTrigger>
         <TooltipContent side="right">
           {{ t(statusInfo.tooltipKey) }}
diff --git a/src/components/sidebar/DatabaseSelectorRow.vue b/src/components/sidebar/DatabaseSelectorRow.vue
index c6479497..c408def9 100644
--- a/src/components/sidebar/DatabaseSelectorRow.vue
+++ b/src/components/sidebar/DatabaseSelectorRow.vue
@@ -138,7 +138,7 @@ watch(() => props.connectionId, async (connId) => {
       :placeholder="t('sidebar.database.placeholder')"
       :search-placeholder="t('sidebar.search')"
       :loading="props.loading"
-      class="text-xs flex-1 h-8"
+      class="text-body flex-1 h-8"
       @update:model-value="handleSelect"
     >
       <template #selected-prepend>
@@ -176,37 +176,37 @@ watch(() => props.connectionId, async (connId) => {
         </div>
         <DropdownMenuSeparator />
         <DropdownMenuItem :disabled="!props.modelValue" @click="handleAction('createScript')">
-          <span class="i-lucide-file-plus-2 mr-2 h-3.5 w-3.5" aria-hidden="true" /> {{ t('sidebar.actionMenu.createScript') }}
+          <span class="i-lucide-file-plus-2 mr-2" aria-hidden="true" /> {{ t('sidebar.actionMenu.createScript') }}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem v-if="capabilities.newDatabase" @click="handleAction('newDatabase')">
-          <span class="i-carbon-data-base mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newDatabase') }}
+          <span class="i-carbon-data-base mr-2" /> {{ t('sidebar.actionMenu.newDatabase') }}
         </DropdownMenuItem>
         <DropdownMenuItem v-if="capabilities.newSchema" @click="handleAction('newSchema')">
-          <span class="i-carbon-folder-open mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newSchema') }}
+          <span class="i-carbon-folder-open mr-2" /> {{ t('sidebar.actionMenu.newSchema') }}
         </DropdownMenuItem>
         <DropdownMenuItem @click="handleAction('newTable')">
-          <span class="i-carbon-table mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newTable') }}
+          <span class="i-carbon-table mr-2" /> {{ t('sidebar.actionMenu.newTable') }}
         </DropdownMenuItem>
         <DropdownMenuItem v-if="capabilities.views" @click="handleAction('newView')">
-          <span class="i-carbon-view mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newView') }}
+          <span class="i-carbon-view mr-2" /> {{ t('sidebar.actionMenu.newView') }}
         </DropdownMenuItem>
         <DropdownMenuItem v-if="capabilities.functions" @click="handleAction('newFunction')">
-          <span class="i-carbon-function-math mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newFunction') }}
+          <span class="i-carbon-function-math mr-2" /> {{ t('sidebar.actionMenu.newFunction') }}
         </DropdownMenuItem>
         <DropdownMenuItem v-if="capabilities.procedures" @click="handleAction('newProcedure')">
-          <span class="i-carbon-document mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.newProcedure') }}
+          <span class="i-carbon-document mr-2" /> {{ t('sidebar.actionMenu.newProcedure') }}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem :disabled="!props.modelValue" @click="handleAction('showErDiagram')">
-          <span class="i-carbon-data-vis-3 mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.showErDiagram') }}
+          <span class="i-carbon-data-vis-3 mr-2" /> {{ t('sidebar.actionMenu.showErDiagram') }}
         </DropdownMenuItem>
         <DropdownMenuSeparator v-if="capabilities.backup || capabilities.export" />
         <DropdownMenuItem v-if="capabilities.backup" @click="handleAction('backupDatabase')">
-          <span class="i-carbon-download mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.backupDatabase') }}
+          <span class="i-carbon-download mr-2" /> {{ t('sidebar.actionMenu.backupDatabase') }}
         </DropdownMenuItem>
         <DropdownMenuItem v-if="capabilities.export" @click="handleAction('exportDatabase')">
-          <span class="i-carbon-export mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.exportDatabase') }}
+          <span class="i-carbon-export mr-2" /> {{ t('sidebar.actionMenu.exportDatabase') }}
         </DropdownMenuItem>
         <DropdownMenuSeparator v-if="capabilities.dropDatabase" />
         <DropdownMenuItem
@@ -214,7 +214,7 @@ watch(() => props.connectionId, async (connId) => {
           class="text-destructive-text focus:text-destructive-text"
           @click="handleAction('dropDatabase')"
         >
-          <span class="i-carbon-trash-can mr-2 h-3.5 w-3.5" /> {{ t('sidebar.actionMenu.dropDatabase') }}
+          <span class="i-carbon-trash-can mr-2" /> {{ t('sidebar.actionMenu.dropDatabase') }}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/src/components/sidebar/SavedQueryItem.vue b/src/components/sidebar/SavedQueryItem.vue
index 590a2081..aa24d85f 100644
--- a/src/components/sidebar/SavedQueryItem.vue
+++ b/src/components/sidebar/SavedQueryItem.vue
@@ -65,7 +65,7 @@ function handleDblClick() {
     <!-- Row 1: icon + filename + menu -->
     <div class="flex gap-1.5 min-w-0 items-center">
       <span class="i-carbon-document text-muted-foreground shrink-0 h-3.5 w-3.5" />
-      <span class="text-sm font-medium flex-1 min-w-0 truncate" :title="query.file_name">{{ query.file_name }}</span>
+      <span class="text-body font-medium flex-1 min-w-0 truncate" :title="query.file_name">{{ query.file_name }}</span>
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
           <Button
@@ -78,20 +78,20 @@ function handleDblClick() {
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
           <DropdownMenuItem @select="handleAction('open')">
-            <span class="i-carbon-document mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.open') }}
+            <span class="i-carbon-document mr-2" /> {{ t('sidebar.savedQueries.actions.open') }}
           </DropdownMenuItem>
           <DropdownMenuItem @select="handleAction('rename')">
-            <span class="i-carbon-edit mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.rename') }}
+            <span class="i-carbon-edit mr-2" /> {{ t('sidebar.savedQueries.actions.rename') }}
           </DropdownMenuItem>
           <DropdownMenuItem @select="handleAction('changeConnection')">
-            <span class="i-carbon-data-base mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.changeConnection') }}
+            <span class="i-carbon-data-base mr-2" /> {{ t('sidebar.savedQueries.actions.changeConnection') }}
           </DropdownMenuItem>
           <DropdownMenuItem @select="handleAction('reveal')">
-            <span class="i-carbon-folder-open mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.reveal') }}
+            <span class="i-carbon-folder-open mr-2" /> {{ t('sidebar.savedQueries.actions.reveal') }}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem class="text-destructive-text" @select="handleAction('delete')">
-            <span class="i-carbon-trash-can mr-2 h-3.5 w-3.5" /> {{ t('sidebar.savedQueries.actions.delete') }}
+            <span class="i-carbon-trash-can mr-2" /> {{ t('sidebar.savedQueries.actions.delete') }}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
diff --git a/src/components/sidebar/SchemaTree.vue b/src/components/sidebar/SchemaTree.vue
index 6f62590a..4fba5cfb 100644
--- a/src/components/sidebar/SchemaTree.vue
+++ b/src/components/sidebar/SchemaTree.vue
@@ -393,7 +393,7 @@ defineExpose({ refresh })
     <!-- Search -->
     <div v-if="props.selectedDatabase" class="px-2 py-1.5 border-b relative">
       <span class="i-lucide-search text-muted-foreground h-3.5 w-3.5 left-4 top-1/2 absolute -translate-y-1/2" />
-      <Input v-model="searchQuery" :placeholder="t('sidebar.search')" class="text-xs pl-7 h-7" />
+      <Input v-model="searchQuery" :placeholder="t('sidebar.search')" class="text-body pl-7 h-7" />
     </div>
 
     <!-- Mode A: Database selected — show schema hierarchy -->
@@ -403,7 +403,7 @@ defineExpose({ refresh })
         <div v-for="schema in availableSchemas" :key="schema">
           <!-- Schema node (expandable, left-aligned, no border) -->
           <button
-            class="text-sm px-2 py-1 flex gap-1.5 w-full cursor-pointer items-center hover:bg-accent/40"
+            class="text-body px-2 py-1 flex gap-1.5 w-full cursor-pointer items-center hover:bg-accent/40"
             @click="toggleSchema(schema)"
           >
             <span class="i-lucide-chevron-right shrink-0 h-3 w-3" :class="{ 'rotate-90': expandedSchemas.has(schema) }" />
@@ -429,7 +429,7 @@ defineExpose({ refresh })
               <div
                 v-for="table in getTablesForSchema(schema)"
                 :key="table.name"
-                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                 :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                 @click="handleTableClick(table, schema)"
                 @dblclick="handleDoubleClick(table, schema)"
@@ -455,7 +455,7 @@ defineExpose({ refresh })
               <div
                 v-for="view in getObjectsForSchema(schema)?.views ?? []"
                 :key="view.name"
-                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                 :class="selectedTreeItem?.type === 'view' && selectedTreeItem?.name === view.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                 @click="selectedTreeItem = { type: 'view', name: view.name, schema }"
                 @dblclick="handleViewClick(view, schema)"
@@ -485,7 +485,7 @@ defineExpose({ refresh })
               <div
                 v-for="proc in getObjectsForSchema(schema)?.procedures ?? []"
                 :key="proc.name"
-                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                 :class="selectedTreeItem?.type === 'procedure' && selectedTreeItem?.name === proc.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                 @click="selectedTreeItem = { type: 'procedure', name: proc.name, schema }"
                 @dblclick="handleProcedureClick(proc, schema)"
@@ -510,7 +510,7 @@ defineExpose({ refresh })
               <div
                 v-for="fn in getObjectsForSchema(schema)?.functions ?? []"
                 :key="fn.name"
-                class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                 :class="selectedTreeItem?.type === 'function' && selectedTreeItem?.name === fn.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                 @click="selectedTreeItem = { type: 'function', name: fn.name, schema }"
                 @dblclick="handleFunctionClick(fn, schema)"
@@ -538,7 +538,7 @@ defineExpose({ refresh })
           <div
             v-for="table in flatTables"
             :key="table.name"
-            class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+            class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
             :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === undefined ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
             @click="handleTableClick(table, undefined)"
             @dblclick="handleDoubleClick(table, undefined)"
@@ -558,7 +558,7 @@ defineExpose({ refresh })
     <div v-else-if="isActiveConnectionConnected && !props.selectedDatabase" class="flex-1 overflow-x-hidden overflow-y-scroll">
       <div v-for="db in allDatabases" :key="db.name">
         <button
-          class="text-sm px-2 py-1 flex gap-1.5 w-full cursor-pointer items-center hover:bg-accent/40"
+          class="text-body px-2 py-1 flex gap-1.5 w-full cursor-pointer items-center hover:bg-accent/40"
           @click="toggleDatabaseNode(db.name)"
           @contextmenu="handleDatabaseContextMenu($event, db.name)"
         >
@@ -579,7 +579,7 @@ defineExpose({ refresh })
                 <div
                   v-for="table in getTablesForDbSchema(db.name, schema)"
                   :key="table.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'table', name: table.name, schema }"
                   @dblclick="selectedTreeItem = { type: 'table', name: table.name, schema }; emit('selectTable', table, db.name, schema)"
@@ -593,7 +593,7 @@ defineExpose({ refresh })
                 <div
                   v-for="view in getObjectsForDbSchema(db.name, schema)?.views ?? []"
                   :key="view.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'view' && selectedTreeItem?.name === view.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'view', name: view.name, schema }"
                   @dblclick="emit('openDdlTab', view.name, 'VIEW', db.name, schema)"
@@ -606,7 +606,7 @@ defineExpose({ refresh })
                 <div
                   v-for="proc in getObjectsForDbSchema(db.name, schema)?.procedures ?? []"
                   :key="proc.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'procedure' && selectedTreeItem?.name === proc.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'procedure', name: proc.name, schema }"
                   @dblclick="emit('openDdlTab', proc.name, 'PROCEDURE', db.name, schema)"
@@ -619,7 +619,7 @@ defineExpose({ refresh })
                 <div
                   v-for="fn in getObjectsForDbSchema(db.name, schema)?.functions ?? []"
                   :key="fn.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'function' && selectedTreeItem?.name === fn.name && selectedTreeItem?.schema === schema ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'function', name: fn.name, schema }"
                   @dblclick="emit('openDdlTab', fn.name, 'FUNCTION', db.name, schema)"
@@ -637,7 +637,7 @@ defineExpose({ refresh })
                 <div
                   v-for="table in getTablesForDbSchema(db.name)"
                   :key="table.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'table' && selectedTreeItem?.name === table.name && selectedTreeItem?.schema === undefined ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'table', name: table.name, schema: undefined }"
                   @dblclick="selectedTreeItem = { type: 'table', name: table.name, schema: undefined }; emit('selectTable', table, db.name)"
@@ -651,7 +651,7 @@ defineExpose({ refresh })
                 <div
                   v-for="view in getObjectsForDbSchema(db.name, db.name)?.views ?? []"
                   :key="view.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'view' && selectedTreeItem?.name === view.name ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'view', name: view.name }"
                   @dblclick="emit('openDdlTab', view.name, 'VIEW', db.name)"
@@ -664,7 +664,7 @@ defineExpose({ refresh })
                 <div
                   v-for="proc in getObjectsForDbSchema(db.name, db.name)?.procedures ?? []"
                   :key="proc.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'procedure' && selectedTreeItem?.name === proc.name ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'procedure', name: proc.name }"
                   @dblclick="emit('openDdlTab', proc.name, 'PROCEDURE', db.name)"
@@ -677,7 +677,7 @@ defineExpose({ refresh })
                 <div
                   v-for="fn in getObjectsForDbSchema(db.name, db.name)?.functions ?? []"
                   :key="fn.name"
-                  class="text-sm ml-4 px-2 py-0.5 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
+                  class="text-body ml-4 px-2 py-1 flex gap-1.5 cursor-pointer items-center hover:bg-accent/40"
                   :class="selectedTreeItem?.type === 'function' && selectedTreeItem?.name === fn.name ? 'bg-primary/15 text-primary-text font-medium hover:bg-primary/20' : ''"
                   @click="selectedTreeItem = { type: 'function', name: fn.name }"
                   @dblclick="emit('openDdlTab', fn.name, 'FUNCTION', db.name)"
diff --git a/src/components/transfer/export/ExportFormatStep.vue b/src/components/transfer/export/ExportFormatStep.vue
index e13ed20c..165c65ca 100644
--- a/src/components/transfer/export/ExportFormatStep.vue
+++ b/src/components/transfer/export/ExportFormatStep.vue
@@ -44,7 +44,7 @@ watch([selectedFormat, csvDelimiter, csvEncoding, csvIncludeHeader], () => {
 <template>
   <div class="space-y-4">
     <div class="space-y-2">
-      <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.selectFormat') }}</Label>
+      <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.selectFormat') }}</Label>
       <RadioGroup v-model="selectedFormat" class="gap-2.5 grid grid-cols-1 md:grid-cols-2">
         <label
           v-for="format in formats"
@@ -55,7 +55,7 @@ watch([selectedFormat, csvDelimiter, csvEncoding, csvIncludeHeader], () => {
           <RadioGroupItem :id="`format-${format.value}`" :value="format.value" class="mt-0.5" />
           <div class="flex-1 space-y-1">
             <div class="text-xs tracking-tight font-semibold">{{ format.label }}</div>
-            <div class="text-[11px] text-muted-foreground">
+            <div class="text-caption text-muted-foreground">
               {{ format.defaults }}
             </div>
           </div>
@@ -63,14 +63,14 @@ watch([selectedFormat, csvDelimiter, csvEncoding, csvIncludeHeader], () => {
       </RadioGroup>
     </div>
 
-    <Button variant="ghost" size="sm" class="text-[11px] text-muted-foreground h-8 w-full" @click="showAdvanced = !showAdvanced">
+    <Button variant="ghost" size="sm" class="text-caption text-muted-foreground h-8 w-full" @click="showAdvanced = !showAdvanced">
       <span :class="showAdvanced ? 'i-carbon-chevron-up' : 'i-carbon-chevron-down'" class="mr-1.5" />
       {{ showAdvanced ? t('transfer.export.hideAdvanced') : t('transfer.export.showAdvanced') }}
     </Button>
 
     <div v-if="showAdvanced && selectedFormat === 'csv'" class="p-3 border border-border/40 rounded-md bg-muted/20 gap-2.5 grid grid-cols-1 md:grid-cols-3">
       <div class="space-y-1.5">
-        <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.delimiter') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.delimiter') }}</Label>
         <Select v-model="csvDelimiter">
           <SelectTrigger class="text-xs font-mono h-8">
             <SelectValue />
@@ -89,7 +89,7 @@ watch([selectedFormat, csvDelimiter, csvEncoding, csvIncludeHeader], () => {
         </Select>
       </div>
       <div class="space-y-1.5">
-        <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.encoding') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.encoding') }}</Label>
         <Select v-model="csvEncoding">
           <SelectTrigger class="text-xs font-mono h-8">
             <SelectValue />
diff --git a/src/components/transfer/export/ExportPreviewStep.vue b/src/components/transfer/export/ExportPreviewStep.vue
index 95beda98..41881f0b 100644
--- a/src/components/transfer/export/ExportPreviewStep.vue
+++ b/src/components/transfer/export/ExportPreviewStep.vue
@@ -87,27 +87,27 @@ onMounted(() => {
   <div class="space-y-4">
     <div class="text-xs gap-2.5 grid grid-cols-2">
       <div class="space-y-1">
-        <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.connection.label') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.connection.label') }}</Label>
         <div class="text-foreground font-mono tabular-nums">
           {{ sourceInfo.connection }}
         </div>
       </div>
       <div class="space-y-1">
-        <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.connection.databaseLabel') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.connection.databaseLabel') }}</Label>
         <div class="text-foreground font-mono tabular-nums">
           {{ sourceInfo.database }}
         </div>
       </div>
       <div class="space-y-1">
-        <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.connection.tableLabel') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.connection.tableLabel') }}</Label>
         <div class="text-foreground font-mono tabular-nums">
           {{ sourceInfo.table }}
         </div>
       </div>
       <div class="space-y-1">
-        <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.selectFormat') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.selectFormat') }}</Label>
         <div>
-          <Badge class="text-[10px] text-primary-text font-mono px-1.5 py-0.5 border border-primary/60 bg-primary/[0.04] uppercase hover:bg-primary/[0.08]" variant="outline">
+          <Badge class="text-caption text-primary-text font-mono px-1.5 py-0.5 border border-primary/60 bg-primary/[0.04] uppercase hover:bg-primary/[0.08]" variant="outline">
             {{ sourceInfo.format }}
           </Badge>
         </div>
@@ -117,8 +117,8 @@ onMounted(() => {
     <Card class="border-border/40 shadow-sm overflow-hidden">
       <CardContent class="p-0 flex flex-col">
         <div class="px-3 py-2 border-b border-border/40 bg-muted/20 flex items-center justify-between">
-          <Label id="preview-label" class="text-[11px] tracking-wide font-semibold flex gap-1.5 uppercase items-center"><span class="i-carbon-view text-muted-foreground" /> {{ t('transfer.export.preview') }} <span class="text-muted-foreground font-normal normal-case">(first {{ props.previewRows || 10 }} rows)</span></Label>
-          <div class="text-[10px] text-muted-foreground font-mono tabular-nums">
+          <Label id="preview-label" class="text-caption tracking-wide font-semibold flex gap-1.5 uppercase items-center"><span class="i-carbon-view text-muted-foreground" /> {{ t('transfer.export.preview') }} <span class="text-muted-foreground font-normal normal-case">(first {{ props.previewRows || 10 }} rows)</span></Label>
+          <div class="text-caption text-muted-foreground font-mono tabular-nums">
             <span v-if="estimatedRows">~{{ estimatedRows.toLocaleString() }} rows • </span>{{ sourceInfo.columns }} cols
           </div>
         </div>
@@ -126,7 +126,7 @@ onMounted(() => {
           role="region"
           aria-labelledby="preview-label"
           tabindex="0"
-          class="text-[11px] leading-snug font-mono p-3 bg-card max-h-[200px] whitespace-pre overflow-auto tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+          class="text-caption leading-snug font-mono p-3 bg-card max-h-[200px] whitespace-pre overflow-auto tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
         >
           {{ previewData || t('transfer.import.loadingPreview') }}
         </div>
@@ -134,7 +134,7 @@ onMounted(() => {
     </Card>
 
     <div class="pt-2 space-y-1.5">
-      <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.outputFile') }}</Label>
+      <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.outputFile') }}</Label>
       <div class="flex gap-2">
         <div class="flex-1 relative">
           <span class="i-carbon-document text-muted-foreground left-2.5 top-1/2 absolute -translate-y-1/2" />
diff --git a/src/components/transfer/export/ExportSourceStep.vue b/src/components/transfer/export/ExportSourceStep.vue
index ecb5de72..4dc61707 100644
--- a/src/components/transfer/export/ExportSourceStep.vue
+++ b/src/components/transfer/export/ExportSourceStep.vue
@@ -83,7 +83,7 @@ watch(() => props.modelValue, (newValue) => {
 
       <div class="gap-2.5 grid grid-cols-1 md:grid-cols-2">
         <div class="space-y-1.5">
-          <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ $t('transfer.export.whereClause') }}</Label>
+          <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ $t('transfer.export.whereClause') }}</Label>
           <Input
             v-model="whereClause"
             :placeholder="$t('transfer.export.whereClausePlaceholder')"
@@ -91,7 +91,7 @@ watch(() => props.modelValue, (newValue) => {
           />
         </div>
         <div class="space-y-1.5">
-          <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ $t('transfer.export.orderBy') }}</Label>
+          <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ $t('transfer.export.orderBy') }}</Label>
           <Input
             v-model="orderBy"
             :placeholder="$t('transfer.export.orderByPlaceholder')"
@@ -99,7 +99,7 @@ watch(() => props.modelValue, (newValue) => {
           />
         </div>
         <div class="space-y-1.5">
-          <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ $t('transfer.export.limit') }}</Label>
+          <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ $t('transfer.export.limit') }}</Label>
           <Input
             v-model.number="limit"
             type="number"
diff --git a/src/components/transfer/export/ExportWizard.vue b/src/components/transfer/export/ExportWizard.vue
index 9d18efda..fddf066f 100644
--- a/src/components/transfer/export/ExportWizard.vue
+++ b/src/components/transfer/export/ExportWizard.vue
@@ -238,13 +238,13 @@ async function startExport() {
 
           <!-- Step 2: Scope selector -->
           <div class="space-y-1.5">
-            <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.export.scope') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.export.scope') }}</Label>
             <ScopeSelector :scope="scope" @update:scope="scope = $event" />
           </div>
 
           <!-- Step 3: Database selector (only when scope is 'database' or 'tables') -->
           <div v-if="scope === 'database' || scope === 'tables'" class="space-y-1.5">
-            <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.databaseLabel') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.databaseLabel') }}</Label>
             <Select v-model="database" :disabled="!connectionId">
               <SelectTrigger class="text-xs border-border/40 bg-muted/20 h-8">
                 <SelectValue :placeholder="t('transfer.connection.databasePlaceholder')" />
@@ -260,7 +260,7 @@ async function startExport() {
                     <span>{{ db.name }}</span>
                     <span
                       v-if="db.is_system"
-                      class="text-[10px] text-muted-foreground tracking-wide font-mono ml-auto px-1 rounded-sm bg-muted/60 uppercase"
+                      class="text-caption text-muted-foreground tracking-wide font-mono ml-auto px-1 rounded-sm bg-muted/60 uppercase"
                     >
                       System
                     </span>
@@ -271,7 +271,7 @@ async function startExport() {
           </div>
 
           <!-- Scope info badge -->
-          <Badge variant="secondary" class="text-[10px] font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
+          <Badge variant="secondary" class="text-caption font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
             {{ scope === 'server' ? 'All databases on this server' : scope === 'database' ? (database ? `All tables in ${database}` : 'Select a database') : (selectedTables.length > 0 ? `${selectedTables.length} tables` : 'Select tables') }}
           </Badge>
         </div>
@@ -301,7 +301,7 @@ async function startExport() {
         <div class="flex flex-row gap-4">
           <!-- Left: Format + Format-specific Options -->
           <div class="flex-1 min-w-0 space-y-2">
-            <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">
+            <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">
               {{ t('transfer.format.label', 'Format') }}
             </Label>
 
@@ -328,7 +328,7 @@ async function startExport() {
               <!-- CSV Options -->
               <div v-if="selectedFormat === 'csv'" class="flex gap-3 items-center">
                 <div class="space-y-1.5">
-                  <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.delimiter') }}</Label>
+                  <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.delimiter') }}</Label>
                   <Select v-model="csvDelimiter">
                     <SelectTrigger class="text-xs font-mono h-8 w-24">
                       <SelectValue />
@@ -355,7 +355,7 @@ async function startExport() {
               <!-- JSONL Options -->
               <div v-if="selectedFormat === 'jsonl'" class="flex gap-3 items-center">
                 <div class="space-y-1.5">
-                  <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.dateFormat') }}</Label>
+                  <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.dateFormat') }}</Label>
                   <Select v-model="jsonlDateFormat">
                     <SelectTrigger class="text-xs h-8 w-28">
                       <SelectValue />
@@ -375,7 +375,7 @@ async function startExport() {
               <!-- SQL Options -->
               <div v-if="selectedFormat === 'sql'" class="flex flex-wrap gap-3 items-center">
                 <div class="space-y-1.5">
-                  <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.rowsPerBatch') }}</Label>
+                  <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.rowsPerBatch') }}</Label>
                   <Input v-model.number="sqlBatchSize" type="number" min="1" max="10000" class="text-xs font-mono h-8 w-24" />
                 </div>
                 <div class="flex items-center space-x-2 sm:mt-5">
@@ -391,7 +391,7 @@ async function startExport() {
               <!-- Excel Options -->
               <div v-if="selectedFormat === 'excel'" class="flex gap-3 items-center">
                 <div class="space-y-1.5">
-                  <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.worksheet') }}</Label>
+                  <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.worksheet') }}</Label>
                   <div class="flex gap-3 items-center">
                     <div class="flex items-center space-x-2">
                       <Checkbox id="excel-header" v-model:checked="excelIncludeHeader" class="h-3.5 w-3.5" />
@@ -413,7 +413,7 @@ async function startExport() {
 
           <!-- Right: Output Path -->
           <div class="pl-4 border-l border-border/40 flex-1 min-w-0 space-y-1.5">
-            <Label class="text-[11px] text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.outputPath') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide uppercase">{{ t('transfer.export.outputPath') }}</Label>
             <div class="flex gap-2 items-center">
               <Button variant="outline" size="sm" class="text-xs px-3 h-8" @click="handleBrowse">
                 <span class="i-carbon-folder mr-1.5" /> {{ t('common.buttons.browse') }}
@@ -423,7 +423,7 @@ async function startExport() {
                 <Input
                   v-model="outputPath"
                   :placeholder="scope === 'tables' ? `/path/to/output.${selectedFormat === 'excel' ? 'xlsx' : selectedFormat}` : '/path/to/export/directory'"
-                  class="text-[11px] font-mono pl-8 h-8"
+                  class="text-caption font-mono pl-8 h-8"
                 />
               </div>
             </div>
@@ -433,10 +433,10 @@ async function startExport() {
         <!-- Row 2: Execute action bar (full width) -->
         <div class="pt-3 border-t border-border/40 flex gap-3 items-center justify-end">
           <div v-if="connectionId" class="mr-auto flex gap-2 items-center">
-            <Badge variant="secondary" class="text-[10px] font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
+            <Badge variant="secondary" class="text-caption font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
               {{ scope === 'server' ? 'All databases' : scope === 'database' ? (database || 'Select db') : `${selectedTables.length} tables` }}
             </Badge>
-            <Badge variant="outline" class="text-[10px] font-mono px-1.5 py-0.5 uppercase">
+            <Badge variant="outline" class="text-caption font-mono px-1.5 py-0.5 uppercase">
               {{ selectedFormat }}
             </Badge>
           </div>
diff --git a/src/components/transfer/import/ImportFileStep.vue b/src/components/transfer/import/ImportFileStep.vue
index 13b697a3..60f59add 100644
--- a/src/components/transfer/import/ImportFileStep.vue
+++ b/src/components/transfer/import/ImportFileStep.vue
@@ -101,25 +101,25 @@ watch(filePath, () => {
 
         <div class="gap-2.5 grid grid-cols-2">
           <div>
-            <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.format') }}</Label>
-            <Badge class="text-[10px] font-mono px-1 py-0.5 uppercase" variant="secondary">
+            <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.format') }}</Label>
+            <Badge class="text-caption font-mono px-1 py-0.5 uppercase" variant="secondary">
               {{ formatLabel }}
             </Badge>
           </div>
           <div>
-            <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.encoding') }}</Label>
-            <Badge class="text-[10px] font-mono px-1 py-0.5 uppercase" variant="outline">
+            <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.encoding') }}</Label>
+            <Badge class="text-caption font-mono px-1 py-0.5 uppercase" variant="outline">
               {{ detectionResult.encoding }}
             </Badge>
           </div>
           <div>
-            <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.rows') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.rows') }}</Label>
             <div class="text-xs font-mono tabular-nums">
               {{ detectionResult.estimatedRows?.toLocaleString() || 'Unknown' }}
             </div>
           </div>
           <div>
-            <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.fileSize') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.fileSize') }}</Label>
             <div class="text-xs font-mono tabular-nums">
               {{ (detectionResult.fileSizeBytes / 1024).toFixed(1) }} KB
             </div>
@@ -127,17 +127,17 @@ watch(filePath, () => {
         </div>
 
         <div class="pt-2 border-t border-border/40">
-          <Label class="text-[11px] text-muted-foreground tracking-wide mb-2 block uppercase">{{ t('transfer.import.detectedColumns') }}</Label>
+          <Label class="text-caption text-muted-foreground tracking-wide mb-2 block uppercase">{{ t('transfer.import.detectedColumns') }}</Label>
           <div class="flex flex-wrap gap-1.5">
             <Badge
               v-for="col in detectionResult.columns.slice(0, 10)"
               :key="col"
               variant="outline"
-              class="text-[10px] font-mono px-1.5 py-0.5 border-border/40"
+              class="text-caption font-mono px-1.5 py-0.5 border-border/40"
             >
               {{ col }}
             </Badge>
-            <Badge v-if="detectionResult.columns.length > 10" variant="outline" class="text-[10px] font-mono px-1.5 py-0.5 border-dashed">
+            <Badge v-if="detectionResult.columns.length > 10" variant="outline" class="text-caption font-mono px-1.5 py-0.5 border-dashed">
               +{{ detectionResult.columns.length - 10 }} more
             </Badge>
           </div>
diff --git a/src/components/transfer/import/ImportMappingStep.vue b/src/components/transfer/import/ImportMappingStep.vue
index 14dd2699..d960e341 100644
--- a/src/components/transfer/import/ImportMappingStep.vue
+++ b/src/components/transfer/import/ImportMappingStep.vue
@@ -139,16 +139,16 @@ watch(() => transferStore.importRequest.columnMappings, (newMappings) => {
           COLUMN MAPPING
         </div>
         <div class="flex gap-2">
-          <Button variant="outline" size="sm" class="text-[11px] px-2 h-6" @click="autoMap">
+          <Button variant="outline" size="sm" class="text-caption px-2 h-6" @click="autoMap">
             Auto-Map
           </Button>
-          <Button variant="ghost" size="sm" class="text-[11px] px-2 h-6" @click="clearAll">
+          <Button variant="ghost" size="sm" class="text-caption px-2 h-6" @click="clearAll">
             Clear All
           </Button>
         </div>
       </div>
 
-      <div v-if="loadingColumns" class="text-[11px] text-muted-foreground py-2 text-center border border-border/40 rounded-sm border-dashed">
+      <div v-if="loadingColumns" class="text-caption text-muted-foreground py-2 text-center border border-border/40 rounded-sm border-dashed">
         Loading target columns...
       </div>
 
@@ -157,7 +157,7 @@ watch(() => transferStore.importRequest.columnMappings, (newMappings) => {
           <caption class="sr-only">
             Column mapping between source and target database
           </caption>
-          <thead class="text-[10px] text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase">
+          <thead class="text-caption text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase">
             <tr>
               <th scope="col" class="font-medium px-2 py-1.5 text-left">
                 Source Column
@@ -175,7 +175,7 @@ watch(() => transferStore.importRequest.columnMappings, (newMappings) => {
           </thead>
           <tbody>
             <tr v-if="mappings.length === 0" class="border-b border-border/40">
-              <td colspan="4" class="text-[11px] text-muted-foreground px-2 py-4 text-center italic">
+              <td colspan="4" class="text-caption text-muted-foreground px-2 py-4 text-center italic">
                 No columns detected
               </td>
             </tr>
@@ -206,15 +206,15 @@ watch(() => transferStore.importRequest.columnMappings, (newMappings) => {
                   </SelectContent>
                 </Select>
               </td>
-              <td class="text-[10px] text-muted-foreground font-mono px-2 py-1 align-middle max-w-[80px] truncate uppercase" :title="mapping.targetType">
+              <td class="text-caption text-muted-foreground font-mono px-2 py-1 align-middle max-w-[80px] truncate uppercase" :title="mapping.targetType">
                 {{ mapping.targetType || '-' }}
               </td>
               <td class="px-2 py-1 align-middle">
-                <span v-if="mapping.targetColumn" class="text-[10px] text-green-600 tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-green-500/10 flex w-fit uppercase items-center">
+                <span v-if="mapping.targetColumn" class="text-caption text-green-600 tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-green-500/10 flex w-fit uppercase items-center">
                   <span class="sr-only">Status: </span>
                   <div class="i-carbon-checkmark mr-1" aria-hidden="true" /> Mapped
                 </span>
-                <span v-else class="text-[10px] text-muted-foreground tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-muted flex w-fit uppercase items-center">
+                <span v-else class="text-caption text-muted-foreground tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-muted flex w-fit uppercase items-center">
                   <span class="sr-only">Status: </span>
                   <div class="i-carbon-subtract mr-1" aria-hidden="true" /> Skipped
                 </span>
@@ -224,7 +224,7 @@ watch(() => transferStore.importRequest.columnMappings, (newMappings) => {
         </table>
       </div>
 
-      <div class="text-[11px] text-muted-foreground tracking-wide flex uppercase justify-end">
+      <div class="text-caption text-muted-foreground tracking-wide flex uppercase justify-end">
         <span class="font-mono mr-1 tabular-nums">{{ mappings.filter(m => m.targetColumn).length }}</span> of
         <span class="font-mono mx-1 tabular-nums">{{ mappings.length }}</span> columns mapped
       </div>
diff --git a/src/components/transfer/import/ImportOptionsStep.vue b/src/components/transfer/import/ImportOptionsStep.vue
index daf06dda..816ecf46 100644
--- a/src/components/transfer/import/ImportOptionsStep.vue
+++ b/src/components/transfer/import/ImportOptionsStep.vue
@@ -81,7 +81,7 @@ watch(() => transferStore.importRequest.filePath, () => {
 
         <div class="mb-3 gap-4 grid grid-cols-2">
           <div class="space-y-1.5">
-            <Label class="text-[11px] text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.conflict.label') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.conflict.label') }}</Label>
             <Select v-model="conflictStrategy">
               <SelectTrigger class="text-xs h-8">
                 <SelectValue />
@@ -100,7 +100,7 @@ watch(() => transferStore.importRequest.filePath, () => {
           </div>
 
           <div class="space-y-1.5">
-            <Label class="text-[11px] text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.batchSize') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.batchSize') }}</Label>
             <Input
               v-model.number="batchSize"
               type="number"
@@ -132,12 +132,12 @@ watch(() => transferStore.importRequest.filePath, () => {
             <div class="i-carbon-table" />
             {{ t('transfer.import.dataPreview') }}
           </div>
-          <span class="text-[10px] text-muted-foreground tracking-wide font-mono uppercase">{{ t('transfer.import.previewRows') }}</span>
+          <span class="text-caption text-muted-foreground tracking-wide font-mono uppercase">{{ t('transfer.import.previewRows') }}</span>
         </div>
 
         <div class="border border-border/40 rounded-sm overflow-hidden">
           <div v-if="previewData.length > 0" class="max-h-[240px] overflow-auto">
-            <table class="text-[10px] text-left w-full whitespace-nowrap border-collapse">
+            <table class="text-caption text-left w-full whitespace-nowrap border-collapse">
               <thead class="bg-muted/40 shadow-border/40 shadow-sm top-0 sticky z-10">
                 <tr>
                   <th v-for="col in previewColumns" :key="col" class="text-muted-foreground tracking-wide font-medium px-2 py-1.5 border-b border-border/40 uppercase">
@@ -154,7 +154,7 @@ watch(() => transferStore.importRequest.filePath, () => {
               </tbody>
             </table>
           </div>
-          <div v-else class="text-[11px] text-muted-foreground py-6 text-center bg-muted/20">
+          <div v-else class="text-caption text-muted-foreground py-6 text-center bg-muted/20">
             <div v-if="isLoading" class="flex flex-col gap-2 items-center justify-center">
               <div class="i-carbon-circle-dash opacity-50 animate-spin" />
               {{ t('transfer.import.loadingPreview') }}
diff --git a/src/components/transfer/import/ImportWizard.vue b/src/components/transfer/import/ImportWizard.vue
index 6783698a..e21b37bf 100644
--- a/src/components/transfer/import/ImportWizard.vue
+++ b/src/components/transfer/import/ImportWizard.vue
@@ -395,25 +395,25 @@ onUnmounted(() => {
         <div v-if="detectionResult" class="mt-4 pt-3 border-t border-border/40 space-y-3">
           <div class="gap-2.5 grid grid-cols-2">
             <div>
-              <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.format') }}</Label>
-              <Badge class="text-[10px] font-mono px-1 py-0.5 w-fit block uppercase" variant="secondary">
+              <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.format') }}</Label>
+              <Badge class="text-caption font-mono px-1 py-0.5 w-fit block uppercase" variant="secondary">
                 {{ formatLabel }}
               </Badge>
             </div>
             <div>
-              <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.encoding') }}</Label>
-              <Badge class="text-[10px] font-mono px-1 py-0.5 w-fit block uppercase" variant="outline">
+              <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.encoding') }}</Label>
+              <Badge class="text-caption font-mono px-1 py-0.5 w-fit block uppercase" variant="outline">
                 {{ detectionResult.encoding }}
               </Badge>
             </div>
             <div>
-              <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.rows') }}</Label>
+              <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.detected.rows') }}</Label>
               <div class="text-xs font-mono tabular-nums">
                 {{ detectionResult.estimatedRows?.toLocaleString() || 'Unknown' }}
               </div>
             </div>
             <div>
-              <Label class="text-[11px] text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.fileSize') }}</Label>
+              <Label class="text-caption text-muted-foreground tracking-wide mb-1 block uppercase">{{ t('transfer.import.fileSize') }}</Label>
               <div class="text-xs font-mono tabular-nums">
                 {{ (detectionResult.fileSizeBytes / 1024).toFixed(1) }} KB
               </div>
@@ -421,17 +421,17 @@ onUnmounted(() => {
           </div>
 
           <div class="pt-2 border-t border-border/40">
-            <Label class="text-[11px] text-muted-foreground tracking-wide mb-2 block uppercase">{{ t('transfer.import.detectedColumns') }}</Label>
+            <Label class="text-caption text-muted-foreground tracking-wide mb-2 block uppercase">{{ t('transfer.import.detectedColumns') }}</Label>
             <div class="flex flex-wrap gap-1.5">
               <Badge
                 v-for="col in detectionResult.columns.slice(0, 10)"
                 :key="col"
                 variant="outline"
-                class="text-[10px] font-mono px-1.5 py-0.5 border-border/40"
+                class="text-caption font-mono px-1.5 py-0.5 border-border/40"
               >
                 {{ col }}
               </Badge>
-              <Badge v-if="detectionResult.columns.length > 10" variant="outline" class="text-[10px] font-mono px-1.5 py-0.5 border-dashed">
+              <Badge v-if="detectionResult.columns.length > 10" variant="outline" class="text-caption font-mono px-1.5 py-0.5 border-dashed">
                 +{{ detectionResult.columns.length - 10 }} more
               </Badge>
             </div>
@@ -457,7 +457,7 @@ onUnmounted(() => {
           v-model:database="database"
           v-model:schema="schema"
         />
-        <Badge variant="secondary" class="text-[10px] font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
+        <Badge variant="secondary" class="text-caption font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
           SQL can CREATE DATABASE
         </Badge>
       </div>
@@ -476,7 +476,7 @@ onUnmounted(() => {
           <Label for="import-create-db" class="text-xs cursor-pointer select-none">{{ t('transfer.import.createDbIfNotExists') }}</Label>
         </div>
 
-        <Badge v-if="database" variant="secondary" class="text-[10px] font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
+        <Badge v-if="database" variant="secondary" class="text-caption font-mono px-1.5 py-0.5 border-border/40 bg-muted/30">
           {{ t('transfer.import.tablesAutoCreated') }}
         </Badge>
       </div>
@@ -509,16 +509,16 @@ onUnmounted(() => {
               COLUMN MAPPING
             </div>
             <div class="flex gap-2">
-              <Button variant="outline" size="sm" class="text-[11px] px-2 h-6" @click="autoMap">
+              <Button variant="outline" size="sm" class="text-caption px-2 h-6" @click="autoMap">
                 Auto-Map
               </Button>
-              <Button variant="ghost" size="sm" class="text-[11px] px-2 h-6" @click="clearAll">
+              <Button variant="ghost" size="sm" class="text-caption px-2 h-6" @click="clearAll">
                 Clear All
               </Button>
             </div>
           </div>
 
-          <div v-if="loadingColumns" class="text-[11px] text-muted-foreground py-2 text-center border border-border/40 rounded-sm border-dashed">
+          <div v-if="loadingColumns" class="text-caption text-muted-foreground py-2 text-center border border-border/40 rounded-sm border-dashed">
             Loading target columns...
           </div>
 
@@ -527,7 +527,7 @@ onUnmounted(() => {
               <caption class="sr-only">
                 Column mapping between source and target database
               </caption>
-              <thead class="text-[10px] text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase">
+              <thead class="text-caption text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase">
                 <tr>
                   <th scope="col" class="font-medium px-2 py-1.5 text-left">
                     Source Column
@@ -545,7 +545,7 @@ onUnmounted(() => {
               </thead>
               <tbody>
                 <tr v-if="mappings.length === 0" class="border-b border-border/40">
-                  <td colspan="4" class="text-[11px] text-muted-foreground px-2 py-4 text-center italic">
+                  <td colspan="4" class="text-caption text-muted-foreground px-2 py-4 text-center italic">
                     No columns detected
                   </td>
                 </tr>
@@ -576,15 +576,15 @@ onUnmounted(() => {
                       </SelectContent>
                     </Select>
                   </td>
-                  <td class="text-[10px] text-muted-foreground font-mono px-2 py-1 align-middle max-w-[80px] truncate uppercase" :title="mapping.targetType">
+                  <td class="text-caption text-muted-foreground font-mono px-2 py-1 align-middle max-w-[80px] truncate uppercase" :title="mapping.targetType">
                     {{ mapping.targetType || '-' }}
                   </td>
                   <td class="px-2 py-1 align-middle">
-                    <span v-if="mapping.targetColumn" class="text-[10px] text-green-600 tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-green-500/10 flex w-fit uppercase items-center">
+                    <span v-if="mapping.targetColumn" class="text-caption text-green-600 tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-green-500/10 flex w-fit uppercase items-center">
                       <span class="sr-only">Status: </span>
                       <div class="i-carbon-checkmark mr-1" aria-hidden="true" /> Mapped
                     </span>
-                    <span v-else class="text-[10px] text-muted-foreground tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-muted flex w-fit uppercase items-center">
+                    <span v-else class="text-caption text-muted-foreground tracking-wide font-medium px-1.5 py-0.5 rounded-sm bg-muted flex w-fit uppercase items-center">
                       <span class="sr-only">Status: </span>
                       <div class="i-carbon-subtract mr-1" aria-hidden="true" /> Skipped
                     </span>
@@ -594,7 +594,7 @@ onUnmounted(() => {
             </table>
           </div>
 
-          <div class="text-[11px] text-muted-foreground tracking-wide mt-2 flex uppercase justify-end">
+          <div class="text-caption text-muted-foreground tracking-wide mt-2 flex uppercase justify-end">
             <span class="font-mono mr-1 tabular-nums">{{ mappings.filter(m => m.targetColumn).length }}</span> of
             <span class="font-mono mx-1 tabular-nums">{{ mappings.length }}</span> columns mapped
           </div>
@@ -631,7 +631,7 @@ onUnmounted(() => {
         <template v-else>
           <div class="gap-4 grid grid-cols-2">
             <div class="space-y-1.5">
-              <Label class="text-[11px] text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.conflict.label') }}</Label>
+              <Label class="text-caption text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.conflict.label') }}</Label>
               <Select v-model="conflictStrategy">
                 <SelectTrigger class="text-xs h-8">
                   <SelectValue />
@@ -650,7 +650,7 @@ onUnmounted(() => {
             </div>
 
             <div class="space-y-1.5">
-              <Label class="text-[11px] text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.batchSize') }}</Label>
+              <Label class="text-caption text-muted-foreground tracking-wide block uppercase">{{ t('transfer.import.batchSize') }}</Label>
               <Input
                 v-model.number="batchSize"
                 type="number"
@@ -676,7 +676,7 @@ onUnmounted(() => {
           <!-- Excel Options -->
           <div v-if="detectionResult?.format === 'excel'" class="mt-4 pt-3 border-t border-border/40 gap-4 grid grid-cols-2">
             <div class="space-y-1.5">
-              <Label class="text-[11px] text-muted-foreground tracking-wide block uppercase">Sheet Name</Label>
+              <Label class="text-caption text-muted-foreground tracking-wide block uppercase">Sheet Name</Label>
               <Input v-model="excelSheetName" placeholder="Sheet1" class="text-xs h-8" />
             </div>
             <div class="px-2 py-1.5 rounded-sm flex h-fit transition-colors items-center space-x-2 sm:mt-5 hover:bg-muted/40">
@@ -692,11 +692,11 @@ onUnmounted(() => {
                 <div class="i-carbon-table" />
                 {{ t('transfer.import.dataPreview') }}
               </div>
-              <span class="text-[10px] text-muted-foreground tracking-wide font-mono uppercase">{{ t('transfer.import.previewRows') }}</span>
+              <span class="text-caption text-muted-foreground tracking-wide font-mono uppercase">{{ t('transfer.import.previewRows') }}</span>
             </div>
             <div class="border border-border/40 rounded-sm overflow-hidden">
               <div v-if="previewData.length > 0" class="max-h-[240px] overflow-auto">
-                <table class="text-[10px] text-left w-full whitespace-nowrap border-collapse">
+                <table class="text-caption text-left w-full whitespace-nowrap border-collapse">
                   <thead class="bg-muted/40 shadow-border/40 shadow-sm top-0 sticky z-10">
                     <tr>
                       <th v-for="col in previewColumns" :key="col" class="text-muted-foreground tracking-wide font-medium px-2 py-1.5 border-b border-border/40 uppercase">
@@ -713,7 +713,7 @@ onUnmounted(() => {
                   </tbody>
                 </table>
               </div>
-              <div v-else class="text-[11px] text-muted-foreground py-6 text-center bg-muted/20">
+              <div v-else class="text-caption text-muted-foreground py-6 text-center bg-muted/20">
                 <div v-if="isLoadingPreview" class="flex flex-col gap-2 items-center justify-center">
                   <div class="i-carbon-circle-dash opacity-50 animate-spin" />
                   {{ t('transfer.import.loadingPreview') }}
diff --git a/src/components/transfer/shared/ColumnSelector.vue b/src/components/transfer/shared/ColumnSelector.vue
index bb8c92c3..13b6ef01 100644
--- a/src/components/transfer/shared/ColumnSelector.vue
+++ b/src/components/transfer/shared/ColumnSelector.vue
@@ -120,18 +120,18 @@ const isColumnSelected = (colName: string) => selectedColumns.value.includes(col
 <template>
   <div class="space-y-3">
     <div class="flex items-center justify-between">
-      <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.common.columns') }}</Label>
+      <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.common.columns') }}</Label>
       <div class="flex gap-1.5">
-        <Button variant="ghost" size="sm" class="text-[11px] text-muted-foreground px-2 h-6 hover:text-foreground" @click="selectAll">
+        <Button variant="ghost" size="sm" class="text-caption text-muted-foreground px-2 h-6 hover:text-foreground" @click="selectAll">
           {{ t('transfer.migration.selectAll') }}
         </Button>
-        <Button variant="ghost" size="sm" class="text-[11px] text-muted-foreground px-2 h-6 hover:text-foreground" @click="deselectAll">
+        <Button variant="ghost" size="sm" class="text-caption text-muted-foreground px-2 h-6 hover:text-foreground" @click="deselectAll">
           {{ t('transfer.common.deselectAll') }}
         </Button>
       </div>
     </div>
 
-    <div v-if="loading" class="text-[11px] text-muted-foreground p-6 border rounded-md border-dashed bg-muted/20 flex items-center justify-center">
+    <div v-if="loading" class="text-caption text-muted-foreground p-6 border rounded-md border-dashed bg-muted/20 flex items-center justify-center">
       <span class="i-carbon-circle-dash mr-1.5 animate-spin" /> Loading columns...
     </div>
 
@@ -150,13 +150,13 @@ const isColumnSelected = (colName: string) => selectedColumns.value.includes(col
           class="h-3.5 w-3.5"
           @update:checked="toggleColumn(col.name)"
         />
-        <span class="text-[11px] leading-none font-mono truncate peer-disabled:opacity-70 peer-disabled:cursor-not-allowed" :title="col.name">
+        <span class="text-caption leading-none font-mono truncate peer-disabled:opacity-70 peer-disabled:cursor-not-allowed" :title="col.name">
           {{ col.name }}
         </span>
       </label>
     </div>
 
-    <div class="text-[10px] text-muted-foreground font-mono">
+    <div class="text-caption text-muted-foreground font-mono">
       {{ selectedColumns.length }} of {{ availableColumns.length }} columns selected
     </div>
   </div>
diff --git a/src/components/transfer/shared/ConnectionSelector.vue b/src/components/transfer/shared/ConnectionSelector.vue
index 7dc1f574..49054837 100644
--- a/src/components/transfer/shared/ConnectionSelector.vue
+++ b/src/components/transfer/shared/ConnectionSelector.vue
@@ -201,7 +201,7 @@ const shouldShowSchema = computed(() => {
 
     <div v-else class="space-y-3">
       <div class="space-y-1.5">
-        <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.label') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.label') }}</Label>
         <Select
           :model-value="selectedConnectionId"
           :disabled="isConnecting"
@@ -213,11 +213,11 @@ const shouldShowSchema = computed(() => {
                 <span class="font-mono">{{ selectedConnection.name }}</span>
                 <span
                   v-if="isConnected"
-                  class="text-[9px] text-green-600 font-medium ml-1.5"
+                  class="text-caption text-green-600 font-medium ml-1.5"
                 >●</span>
                 <span
                   v-else-if="isConnecting"
-                  class="text-[9px] text-muted-foreground ml-1.5 animate-pulse"
+                  class="text-caption text-muted-foreground ml-1.5 animate-pulse"
                 >●</span>
               </template>
             </SelectValue>
@@ -233,17 +233,17 @@ const shouldShowSchema = computed(() => {
                 <span>{{ conn.name }}</span>
                 <span
                   v-if="connectionStore.getConnectionStatus(conn.id!) === ConnectionStatus.CONNECTED"
-                  class="text-[10px] text-green-600 tracking-wide font-mono px-1 rounded-sm bg-green-500/10 uppercase"
+                  class="text-caption text-green-600 tracking-wide font-mono px-1 rounded-sm bg-green-500/10 uppercase"
                 >
                   {{ t('transfer.connection.connected') }}
                 </span>
                 <span
                   v-else
-                  class="text-[10px] text-muted-foreground tracking-wide font-mono px-1 rounded-sm bg-muted/60 uppercase"
+                  class="text-caption text-muted-foreground tracking-wide font-mono px-1 rounded-sm bg-muted/60 uppercase"
                 >
                   {{ t('transfer.connection.offline') }}
                 </span>
-                <span class="text-[10px] text-muted-foreground font-mono ml-auto">{{ conn.type }}</span>
+                <span class="text-caption text-muted-foreground font-mono ml-auto">{{ conn.type }}</span>
               </div>
             </SelectItem>
           </SelectContent>
@@ -251,7 +251,7 @@ const shouldShowSchema = computed(() => {
       </div>
 
       <div v-if="props.showDatabase" class="space-y-1.5">
-        <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.databaseLabel') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.databaseLabel') }}</Label>
         <Select
           v-model="selectedDatabase"
           :disabled="!isConnected || loadingDatabases || databases.length === 0"
@@ -270,7 +270,7 @@ const shouldShowSchema = computed(() => {
                 <span>{{ db.name }}</span>
                 <span
                   v-if="db.is_system"
-                  class="text-[10px] text-muted-foreground tracking-wide font-mono ml-auto px-1 rounded-sm bg-muted/60 uppercase"
+                  class="text-caption text-muted-foreground tracking-wide font-mono ml-auto px-1 rounded-sm bg-muted/60 uppercase"
                 >
                   {{ t('transfer.connection.system') }}
                 </span>
@@ -278,13 +278,13 @@ const shouldShowSchema = computed(() => {
             </SelectItem>
           </SelectContent>
         </Select>
-        <div v-if="loadingDatabases" class="text-[10px] text-muted-foreground flex items-center">
+        <div v-if="loadingDatabases" class="text-caption text-muted-foreground flex items-center">
           <span class="i-carbon-circle-dash mr-1 animate-spin" /> {{ t('transfer.connection.loadingDatabases') }}
         </div>
       </div>
 
       <div v-if="shouldShowSchema" class="space-y-1.5">
-        <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.schemaLabel') }}</Label>
+        <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.schemaLabel') }}</Label>
         <Select
           v-model="selectedSchema"
           :disabled="!selectedDatabase || loadingSchemas || schemas.length === 0"
@@ -303,7 +303,7 @@ const shouldShowSchema = computed(() => {
             </SelectItem>
           </SelectContent>
         </Select>
-        <div v-if="loadingSchemas" class="text-[10px] text-muted-foreground flex items-center">
+        <div v-if="loadingSchemas" class="text-caption text-muted-foreground flex items-center">
           <span class="i-carbon-circle-dash mr-1 animate-spin" /> {{ t('transfer.connection.loadingSchemas') }}
         </div>
       </div>
diff --git a/src/components/transfer/shared/FileDropZone.vue b/src/components/transfer/shared/FileDropZone.vue
index 1050cc31..dc9344b1 100644
--- a/src/components/transfer/shared/FileDropZone.vue
+++ b/src/components/transfer/shared/FileDropZone.vue
@@ -85,14 +85,14 @@ function handleFileInput(e: Event) {
       <h3 class="text-sm text-foreground tracking-tight font-medium">
         {{ t('transfer.import.dropzone.title') }}
       </h3>
-      <p class="text-[11px] text-muted-foreground mt-0.5">
+      <p class="text-caption text-muted-foreground mt-0.5">
         {{ t('transfer.import.dropzone.instruction') }}
       </p>
       <div class="mt-3 flex flex-wrap gap-1.5 justify-center">
         <span
           v-for="f in formats"
           :key="f"
-          class="text-[10px] text-muted-foreground tracking-wider font-mono px-1.5 py-0.5 rounded-sm bg-muted/60 uppercase"
+          class="text-caption text-muted-foreground tracking-wider font-mono px-1.5 py-0.5 rounded-sm bg-muted/60 uppercase"
         >
           {{ f }}
         </span>
diff --git a/src/components/transfer/shared/MultiTableSelector.vue b/src/components/transfer/shared/MultiTableSelector.vue
index e47581ff..5ef0cc1c 100644
--- a/src/components/transfer/shared/MultiTableSelector.vue
+++ b/src/components/transfer/shared/MultiTableSelector.vue
@@ -130,13 +130,13 @@ const someSelected = computed(() => selectionCount.value > 0 && selectionCount.v
         </div>
       </div>
 
-      <div v-else-if="loading" class="text-[11px] text-muted-foreground p-4 border rounded-md border-dashed bg-muted/20 flex flex-1 items-center justify-center">
+      <div v-else-if="loading" class="text-caption text-muted-foreground p-4 border rounded-md border-dashed bg-muted/20 flex flex-1 items-center justify-center">
         <span class="i-carbon-circle-dash mr-1.5 animate-spin" /> Loading tables...
       </div>
 
       <div v-else-if="tables.length === 0" class="border border-border/40 rounded-md flex-1 overflow-hidden">
         <table class="text-xs w-full">
-          <thead class="text-[10px] text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase">
+          <thead class="text-caption text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase">
             <tr>
               <th scope="col" class="font-medium px-2 py-1.5 text-left w-8">
                 <Checkbox :checked="false" class="h-3.5 w-3.5" disabled />
@@ -154,7 +154,7 @@ const someSelected = computed(() => selectionCount.value > 0 && selectionCount.v
           </thead>
           <tbody>
             <tr>
-              <td colspan="4" class="text-[11px] text-muted-foreground px-2 py-6 text-center italic">
+              <td colspan="4" class="text-caption text-muted-foreground px-2 py-6 text-center italic">
                 <span class="i-carbon-data-base mr-1.5 opacity-50" /> {{ t('transfer.common.noTablesFound') }}
               </td>
             </tr>
@@ -167,7 +167,7 @@ const someSelected = computed(() => selectionCount.value > 0 && selectionCount.v
           <caption class="sr-only">
             Available tables for export selection
           </caption>
-          <thead class="text-[10px] text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase top-0 sticky z-10">
+          <thead class="text-caption text-muted-foreground tracking-wide border-b border-border/40 bg-muted/40 uppercase top-0 sticky z-10">
             <tr>
               <th scope="col" class="font-medium px-2 py-1.5 text-left w-8">
                 <Checkbox
@@ -211,10 +211,10 @@ const someSelected = computed(() => selectionCount.value > 0 && selectionCount.v
                 <th scope="row" class="font-mono font-normal px-2 py-1.5 text-left align-middle max-w-[180px] truncate">
                   {{ table.name }}
                 </th>
-                <td class="text-[10px] text-muted-foreground font-mono px-2 py-1.5 text-right align-middle tabular-nums">
+                <td class="text-caption text-muted-foreground font-mono px-2 py-1.5 text-right align-middle tabular-nums">
                   {{ table.rowCount?.toLocaleString() || '-' }}
                 </td>
-                <td class="text-[10px] text-muted-foreground px-2 py-1.5 text-right align-middle uppercase">
+                <td class="text-caption text-muted-foreground px-2 py-1.5 text-right align-middle uppercase">
                   {{ table.table_type || 'TABLE' }}
                 </td>
               </tr>
@@ -225,11 +225,11 @@ const someSelected = computed(() => selectionCount.value > 0 && selectionCount.v
     </div>
 
     <!-- Selection Count Footer -->
-    <div v-if="selectionCount > 0" class="text-[10px] text-primary-text font-mono font-semibold mt-2 flex shrink-0 gap-1 items-center">
+    <div v-if="selectionCount > 0" class="text-caption text-primary-text font-mono font-semibold mt-2 flex shrink-0 gap-1 items-center">
       <span class="i-carbon-checkmark-filled h-3 w-3" />
       {{ selectionCount }} tables selected
     </div>
-    <div v-else class="text-[10px] text-muted-foreground mt-2 shrink-0">
+    <div v-else class="text-caption text-muted-foreground mt-2 shrink-0">
       Select tables to export
     </div>
   </div>
diff --git a/src/components/transfer/shared/ProgressPanel.vue b/src/components/transfer/shared/ProgressPanel.vue
index 3bbdca07..4a4277a0 100644
--- a/src/components/transfer/shared/ProgressPanel.vue
+++ b/src/components/transfer/shared/ProgressPanel.vue
@@ -53,7 +53,7 @@ function formatTime(seconds: number) {
         <span class="i-carbon-circle-dash text-primary-text h-3.5 w-3.5" :class="{ 'animate-spin': props.isRunning }" />
         <span>{{ props.progress?.phase || t('transfer.progress.preparing') }}</span>
       </div>
-      <div class="text-[11px] text-muted-foreground font-mono tabular-nums" aria-live="off">
+      <div class="text-caption text-muted-foreground font-mono tabular-nums" aria-live="off">
         {{ formatTime(elapsedSeconds) }} elapsed
         <span v-if="remainingSeconds > 0" class="text-muted-foreground ml-1.5">
           ~{{ formatTime(remainingSeconds) }} left
@@ -86,7 +86,7 @@ function formatTime(seconds: number) {
 
     <div
       v-if="props.progress && props.progress.errorCount > 0"
-      class="text-[11px] text-destructive-text tracking-wide font-medium px-2 py-1 rounded-sm bg-destructive/10 flex gap-1.5 uppercase items-center"
+      class="text-caption text-destructive-text tracking-wide font-medium px-2 py-1 rounded-sm bg-destructive/10 flex gap-1.5 uppercase items-center"
       role="alert"
       aria-live="assertive"
     >
diff --git a/src/components/transfer/shared/ResultPanel.vue b/src/components/transfer/shared/ResultPanel.vue
index b2d4c8b7..4db5b0b3 100644
--- a/src/components/transfer/shared/ResultPanel.vue
+++ b/src/components/transfer/shared/ResultPanel.vue
@@ -63,7 +63,7 @@ function formatDuration(seconds: number) {
         <h3 class="text-sm tracking-wide font-medium">
           {{ isSuccess ? t('transfer.result.success') : t('transfer.result.failed') }}
         </h3>
-        <p class="text-[11px] text-muted-foreground font-mono tabular-nums">
+        <p class="text-caption text-muted-foreground font-mono tabular-nums">
           {{ formatDuration(durationSeconds) }}
         </p>
       </div>
@@ -73,28 +73,28 @@ function formatDuration(seconds: number) {
     <div class="gap-3 grid grid-cols-2 sm:grid-cols-4">
       <Card class="border-border/40 rounded-md bg-muted/20 shadow-none">
         <CardContent class="p-3 flex flex-col justify-center">
-          <span class="text-[10px] text-muted-foreground tracking-widest font-medium uppercase">{{ t('transfer.result.processed') }}</span>
+          <span class="text-caption text-muted-foreground tracking-widest font-medium uppercase">{{ t('transfer.result.processed') }}</span>
           <span class="text-lg font-mono font-semibold mt-0.5 tabular-nums">{{ props.result.processedRows.toLocaleString() }}</span>
         </CardContent>
       </Card>
 
       <Card v-if="props.result.skippedRows > 0" class="border-border/40 rounded-md bg-muted/20 shadow-none">
         <CardContent class="p-3 flex flex-col justify-center">
-          <span class="text-[10px] text-muted-foreground tracking-widest font-medium uppercase">{{ t('transfer.result.skipped') }}</span>
+          <span class="text-caption text-muted-foreground tracking-widest font-medium uppercase">{{ t('transfer.result.skipped') }}</span>
           <span class="text-lg font-mono font-semibold mt-0.5 tabular-nums">{{ props.result.skippedRows.toLocaleString() }}</span>
         </CardContent>
       </Card>
 
       <Card v-if="props.result.outputSizeBytes" class="border-border/40 rounded-md bg-muted/20 shadow-none">
         <CardContent class="p-3 flex flex-col justify-center">
-          <span class="text-[10px] text-muted-foreground tracking-widest font-medium uppercase">{{ t('transfer.import.fileSize') }}</span>
+          <span class="text-caption text-muted-foreground tracking-widest font-medium uppercase">{{ t('transfer.import.fileSize') }}</span>
           <span class="text-lg font-mono font-semibold mt-0.5 tabular-nums">{{ formatFileSize(props.result.outputSizeBytes) }}</span>
         </CardContent>
       </Card>
 
       <Card v-if="props.result.errorCount > 0" class="border-destructive/20 rounded-md bg-destructive/5 shadow-none">
         <CardContent class="p-3 flex flex-col justify-center">
-          <span class="text-[10px] text-destructive-text tracking-widest font-medium uppercase">{{ t('transfer.result.errorCount') }}</span>
+          <span class="text-caption text-destructive-text tracking-widest font-medium uppercase">{{ t('transfer.result.errorCount') }}</span>
           <span class="text-lg text-destructive-text font-mono font-semibold mt-0.5 tabular-nums">{{ props.result.errorCount.toLocaleString() }}</span>
         </CardContent>
       </Card>
@@ -104,12 +104,12 @@ function formatDuration(seconds: number) {
     <div v-if="props.result.errors.length > 0" class="space-y-1.5">
       <div class="px-1 flex gap-2 items-center">
         <span class="i-carbon-list text-muted-foreground h-3.5 w-3.5" />
-        <h4 class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">
+        <h4 class="text-caption text-muted-foreground tracking-wide font-medium uppercase">
           Log Details
         </h4>
       </div>
       <div class="border border-border/40 rounded-md bg-muted/40">
-        <div class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border text-[11px] leading-snug font-mono p-3 max-h-40 overflow-auto">
+        <div class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border text-caption leading-snug font-mono p-3 max-h-40 overflow-auto">
           <div
             v-for="(error, index) in props.result.errors.slice(0, 10)"
             :key="index"
diff --git a/src/components/transfer/shared/TableSelector.vue b/src/components/transfer/shared/TableSelector.vue
index 1ba505ae..89688797 100644
--- a/src/components/transfer/shared/TableSelector.vue
+++ b/src/components/transfer/shared/TableSelector.vue
@@ -92,7 +92,7 @@ const selectedTableInfo = computed(() =>
 <template>
   <div class="space-y-3">
     <div class="space-y-1.5">
-      <Label class="text-[11px] text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.tableLabel') }}</Label>
+      <Label class="text-caption text-muted-foreground tracking-wide font-medium uppercase">{{ t('transfer.connection.tableLabel') }}</Label>
       <Select v-model="selectedTable" :disabled="!tables.length || loading">
         <SelectTrigger class="text-xs border-border/40 bg-muted/20 h-8">
           <SelectValue :placeholder="t('transfer.connection.tablePlaceholder')" />
@@ -106,7 +106,7 @@ const selectedTableInfo = computed(() =>
           >
             <div class="flex gap-4 w-full items-center justify-between">
               <span>{{ tbl.name }}</span>
-              <span v-if="tbl.rowCount" class="text-[10px] text-muted-foreground font-mono px-1 rounded-sm bg-muted/60 tabular-nums">
+              <span v-if="tbl.rowCount" class="text-caption text-muted-foreground font-mono px-1 rounded-sm bg-muted/60 tabular-nums">
                 {{ tbl.rowCount.toLocaleString() }} rows
               </span>
             </div>
@@ -115,7 +115,7 @@ const selectedTableInfo = computed(() =>
       </Select>
     </div>
 
-    <div v-if="selectedTableInfo" class="text-[11px] text-muted-foreground flex gap-2 items-center">
+    <div v-if="selectedTableInfo" class="text-caption text-muted-foreground flex gap-2 items-center">
       <span v-if="selectedTableInfo.rowCount" class="font-mono tabular-nums">
         {{ selectedTableInfo.rowCount.toLocaleString() }} rows
       </span>
diff --git a/src/components/transfer/shared/TransferStepCard.vue b/src/components/transfer/shared/TransferStepCard.vue
index 0c1e0d33..ce5fddd0 100644
--- a/src/components/transfer/shared/TransferStepCard.vue
+++ b/src/components/transfer/shared/TransferStepCard.vue
@@ -46,12 +46,12 @@ const stepLabel = computed(() =>
   >
     <div class="px-3 py-2 border-b border-border/40 flex gap-2.5 items-center">
       <span v-if="icon" class="text-muted-foreground h-3.5 w-3.5" :class="[icon, iconClass]" />
-      <span v-if="stepLabel" class="text-[10px] text-muted-foreground tracking-wide font-mono px-1.5 rounded-sm bg-muted">
+      <span v-if="stepLabel" class="text-caption text-muted-foreground tracking-wide font-mono px-1.5 rounded-sm bg-muted">
         {{ stepLabel }}
       </span>
-      <span class="text-xs text-foreground tracking-wide font-medium uppercase" :class="{ 'flex-1': !scope }">{{ title }}</span>
+      <span class="text-body text-foreground tracking-wide font-medium uppercase" :class="{ 'flex-1': !scope }">{{ title }}</span>
       <ScopeSelector v-if="scope" class="ml-2" :scope="props.scope ?? 'tables'" :disabled="props.scopeDisabled" @update:scope="emit('update:scope', $event)" />
-      <span v-if="summary" class="text-[11px] text-muted-foreground font-mono">
+      <span v-if="summary" class="text-caption text-muted-foreground font-mono">
         {{ summary }}
       </span>
     </div>
diff --git a/src/components/transfer/shared/WizardStepper.vue b/src/components/transfer/shared/WizardStepper.vue
index 16b21196..15b7ec5f 100644
--- a/src/components/transfer/shared/WizardStepper.vue
+++ b/src/components/transfer/shared/WizardStepper.vue
@@ -29,7 +29,7 @@ const props = defineProps<{
 
       <!-- Step Circle -->
       <div
-        class="text-[11px] font-mono rounded-full flex h-6 w-6 ring-4 ring-background transition-colors items-center justify-center relative z-10"
+        class="text-caption font-mono rounded-full flex h-6 w-6 ring-4 ring-background transition-colors items-center justify-center relative z-10"
         :class="[
           index === props.currentStep
             ? 'bg-primary text-primary-foreground shadow-none'
@@ -43,7 +43,7 @@ const props = defineProps<{
 
       <!-- Step Label -->
       <div
-        class="text-[11px] mt-2 text-center transition-colors"
+        class="text-caption mt-2 text-center transition-colors"
         :class="[
           index === props.currentStep ? 'text-foreground font-medium' : index < props.currentStep ? 'text-foreground font-normal' : 'text-muted-foreground',
         ]"
diff --git a/src/components/transfer/tasks/TaskCard.vue b/src/components/transfer/tasks/TaskCard.vue
index fed1427f..dcb2d5e7 100644
--- a/src/components/transfer/tasks/TaskCard.vue
+++ b/src/components/transfer/tasks/TaskCard.vue
@@ -70,7 +70,7 @@ const timeAgo = computed(() => {
         </div>
         <Badge
           :variant="statusColor"
-          class="text-[10px] tracking-wide font-mono px-1.5 py-0.5 rounded-sm uppercase" :class="[
+          class="text-caption tracking-wide font-mono px-1.5 py-0.5 rounded-sm uppercase" :class="[
             props.task.status === 'completed' ? 'bg-green-500/10 text-green-600 border-transparent' : '',
           ]"
         >
@@ -84,7 +84,7 @@ const timeAgo = computed(() => {
         class="bg-muted h-1"
       />
 
-      <div class="text-[11px] text-muted-foreground font-mono flex items-center justify-between tabular-nums">
+      <div class="text-caption text-muted-foreground font-mono flex items-center justify-between tabular-nums">
         <span>
           {{ props.task.runtime.complete.toLocaleString() }}
           <span v-if="props.task.runtime.total > 0">
@@ -94,7 +94,7 @@ const timeAgo = computed(() => {
         <span>{{ timeAgo }}</span>
       </div>
 
-      <div v-if="props.task.error" class="text-[11px] text-destructive-text">
+      <div v-if="props.task.error" class="text-caption text-destructive-text">
         {{ props.task.error }}
       </div>
 
@@ -103,7 +103,7 @@ const timeAgo = computed(() => {
           v-if="props.task.status !== 'running'"
           variant="ghost"
           size="sm"
-          class="text-[11px] text-muted-foreground tracking-wide px-2.5 h-7 uppercase"
+          class="text-caption text-muted-foreground tracking-wide px-2.5 h-7 uppercase"
           @click="emit('dismiss')"
         >
           {{ t('transfer.tasks.dismiss') }}
@@ -111,7 +111,7 @@ const timeAgo = computed(() => {
         <Button
           variant="outline"
           size="sm"
-          class="text-[11px] px-2.5 border-border/40 flex gap-1.5 h-7"
+          class="text-caption px-2.5 border-border/40 flex gap-1.5 h-7"
           @click="emit('goToTask')"
         >
           <span class="i-carbon-arrow-right h-3 w-3" />
diff --git a/src/components/transfer/tasks/TaskManagerButton.vue b/src/components/transfer/tasks/TaskManagerButton.vue
index 4bca9bf6..880975c4 100644
--- a/src/components/transfer/tasks/TaskManagerButton.vue
+++ b/src/components/transfer/tasks/TaskManagerButton.vue
@@ -17,7 +17,7 @@ const transferStore = useTransferStore()
   <Button variant="outline" size="sm" class="border-border/40 gap-2 h-8" @click="emit('click')">
     <span class="i-carbon-list-boxes h-3.5 w-3.5" />
     <span class="text-xs">{{ t('transfer.tasks.title') }}</span>
-    <Badge v-if="transferStore.taskCount > 0" variant="default" class="text-[10px] font-mono ml-1.5 px-1 rounded-full flex h-4 min-w-4 items-center justify-center tabular-nums">
+    <Badge v-if="transferStore.taskCount > 0" variant="default" class="text-caption font-mono ml-1.5 px-1 rounded-full flex h-4 min-w-4 items-center justify-center tabular-nums">
       {{ transferStore.taskCount }}
     </Badge>
   </Button>
diff --git a/src/components/transfer/tasks/TaskManagerPanel.vue b/src/components/transfer/tasks/TaskManagerPanel.vue
index 55a586d6..6af640c9 100644
--- a/src/components/transfer/tasks/TaskManagerPanel.vue
+++ b/src/components/transfer/tasks/TaskManagerPanel.vue
@@ -56,7 +56,7 @@ function handleDismiss(taskId: string) {
           v-if="transferStore.runningTasks.some(t => t.status !== 'running')"
           variant="ghost"
           size="sm"
-          class="text-[11px] tracking-wide h-8 uppercase"
+          class="text-caption tracking-wide h-8 uppercase"
           @click="handleClearCompleted"
         >
           {{ t('transfer.tasks.clearCompleted') }}
@@ -70,7 +70,7 @@ function handleDismiss(taskId: string) {
           </div>
           <div class="flex flex-col gap-1 items-center">
             <span class="text-xs text-foreground/60 font-medium">{{ t('transfer.tasks.noTasks') }}</span>
-            <span class="text-[11px] text-muted-foreground">{{ t('transfer.tasks.emptyDescription') }}</span>
+            <span class="text-caption text-muted-foreground">{{ t('transfer.tasks.emptyDescription') }}</span>
           </div>
         </div>
 
diff --git a/src/components/ui/alert-dialog/AlertDialogTitle.vue b/src/components/ui/alert-dialog/AlertDialogTitle.vue
index ed795112..f1d0ebe8 100644
--- a/src/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <AlertDialogTitle
     v-bind="delegatedProps"
-    :class="cn('text-lg font-semibold', props.class)"
+    :class="cn('text-base font-semibold', props.class)"
   >
     <slot />
   </AlertDialogTitle>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index da348d58..6ce7f664 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -17,10 +17,13 @@ export const buttonVariants = cva(
         link: 'text-primary-text underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-8 px-3 py-1.5',
-        sm: 'h-8 rounded-md px-3',
-        lg: 'h-9 rounded-md px-6',
-        icon: 'h-8 w-8',
+        'default': 'h-8 px-3 py-1.5',
+        'xs': 'h-6 rounded-sm px-2',
+        'sm': 'h-7 rounded-md px-2.5',
+        'lg': 'h-9 rounded-md px-6',
+        'icon': 'h-8 w-8',
+        'icon-sm': 'h-7 w-7',
+        'icon-xs': 'h-6 w-6',
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/card/CardTitle.vue b/src/components/ui/card/CardTitle.vue
index 2bb838cd..0d79a324 100644
--- a/src/components/ui/card/CardTitle.vue
+++ b/src/components/ui/card/CardTitle.vue
@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <Primitive v-bind="delegatedProps" :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+  <Primitive v-bind="delegatedProps" :class="cn('text-base font-semibold leading-none tracking-tight', props.class)">
     <slot />
   </Primitive>
 </template>
diff --git a/src/components/ui/combobox/SearchableSelect.vue b/src/components/ui/combobox/SearchableSelect.vue
index b7d01e65..a660e61d 100644
--- a/src/components/ui/combobox/SearchableSelect.vue
+++ b/src/components/ui/combobox/SearchableSelect.vue
@@ -253,7 +253,7 @@ watch(searchQuery, () => {
                   ? ''
                   : undefined
               "
-              class="text-sm px-1 py-0.5 outline-none flex cursor-pointer select-none transition-colors items-center relative hover:text-accent-foreground hover:bg-accent" :class="[
+              class="px-1 py-0.5 outline-none flex cursor-pointer select-none transition-colors items-center relative hover:text-accent-foreground hover:bg-accent" :class="[
                 option.disabled && 'pointer-events-none opacity-50',
                 option.value === modelValue && 'bg-accent text-accent-foreground',
                 navigableItems[highlightedIndex]?.type === 'option'
diff --git a/src/components/ui/dialog/DialogTitle.vue b/src/components/ui/dialog/DialogTitle.vue
index 68ed170e..744d8329 100644
--- a/src/components/ui/dialog/DialogTitle.vue
+++ b/src/components/ui/dialog/DialogTitle.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <DialogTitle
     v-bind="delegatedProps"
-    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
+    :class="cn('text-base font-semibold leading-none tracking-tight', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/src/components/upgrade/FeaturePoster/AiPoster.vue b/src/components/upgrade/FeaturePoster/AiPoster.vue
index 5987b65a..fa96d020 100644
--- a/src/components/upgrade/FeaturePoster/AiPoster.vue
+++ b/src/components/upgrade/FeaturePoster/AiPoster.vue
@@ -118,7 +118,7 @@ ORDER BY revenue DESC;</pre>
   padding: 2px 11px;
   border-radius: 999px;
   border: 1px solid hsl(var(--border));
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.08em;
   color: hsl(var(--muted-foreground));
@@ -130,7 +130,7 @@ ORDER BY revenue DESC;</pre>
   border-radius: 6px;
   border: 1px solid hsl(var(--primary) / 0.35);
   color: hsl(var(--primary-text));
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
 }
 
@@ -151,7 +151,7 @@ ORDER BY revenue DESC;</pre>
   border-radius: 12px 12px 4px 12px;
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   animation: p-user-in 12s linear both;
 }
 
@@ -179,7 +179,7 @@ ORDER BY revenue DESC;</pre>
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   letter-spacing: 0.04em;
   color: hsl(var(--muted-foreground));
@@ -209,7 +209,7 @@ ORDER BY revenue DESC;</pre>
 }
 
 .p-row-label {
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
 }
 
@@ -245,7 +245,7 @@ ORDER BY revenue DESC;</pre>
   border-radius: 999px;
   background-color: hsl(var(--muted));
   color: hsl(var(--muted-foreground));
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   font-variant-numeric: tabular-nums;
   animation: p-visible-2 12s linear both;
 }
@@ -256,7 +256,7 @@ ORDER BY revenue DESC;</pre>
   border: 1px solid hsl(var(--border));
   background-color: hsl(var(--muted) / 0.5);
   font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--foreground));
 }
 
@@ -281,7 +281,7 @@ ORDER BY revenue DESC;</pre>
   border-radius: 999px;
   background-color: hsl(var(--method-post) / 0.12);
   color: hsl(var(--method-post));
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   animation: p-visible-2 12s linear both;
@@ -298,7 +298,7 @@ ORDER BY revenue DESC;</pre>
 
 .p-answer-text {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--foreground));
 }
 
@@ -309,7 +309,7 @@ ORDER BY revenue DESC;</pre>
   border: 1px solid hsl(var(--border));
   background-color: hsl(var(--muted) / 0.55);
   font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   line-height: 1.55;
   color: hsl(var(--foreground));
   overflow: hidden;
@@ -320,7 +320,7 @@ ORDER BY revenue DESC;</pre>
   border: 1px solid hsl(var(--border));
   border-radius: 8px;
   overflow: hidden;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
 }
 
 .p-tr {
@@ -374,7 +374,7 @@ ORDER BY revenue DESC;</pre>
   border: 1px solid hsl(var(--primary) / 0.4);
   background-color: hsl(var(--background) / 0.75);
   backdrop-filter: blur(8px);
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   color: hsl(var(--primary-text));
 }
diff --git a/src/components/upgrade/FeaturePoster/McpPoster.vue b/src/components/upgrade/FeaturePoster/McpPoster.vue
index 3bd5cc50..22dc9124 100644
--- a/src/components/upgrade/FeaturePoster/McpPoster.vue
+++ b/src/components/upgrade/FeaturePoster/McpPoster.vue
@@ -120,7 +120,7 @@ const tools = [
   padding: 2px 11px;
   border-radius: 999px;
   border: 1px solid hsl(var(--border));
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.08em;
   color: hsl(var(--muted-foreground));
@@ -131,7 +131,7 @@ const tools = [
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   color: hsl(var(--method-post));
 }
@@ -186,7 +186,7 @@ const tools = [
 }
 
 .p-label {
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.06em;
   color: hsl(var(--muted-foreground));
@@ -204,7 +204,7 @@ const tools = [
   border: 1px solid hsl(var(--border));
   border-radius: 7px;
   background-color: hsl(var(--background));
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   color: hsl(var(--foreground));
   font-variant-numeric: tabular-nums;
@@ -214,7 +214,7 @@ const tools = [
   padding: 5px 10px;
   border: 1px solid hsl(var(--border));
   border-radius: 7px;
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--foreground));
   white-space: nowrap;
 }
@@ -223,7 +223,7 @@ const tools = [
   display: flex;
   align-items: center;
   gap: 7px;
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
 }
 
@@ -256,7 +256,7 @@ const tools = [
   border: 1px solid hsl(var(--border));
   border-radius: 999px;
   background-color: hsl(var(--background));
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   color: hsl(var(--foreground));
 }
@@ -268,7 +268,7 @@ const tools = [
   border: 1px solid hsl(var(--border));
   background-color: hsl(var(--muted) / 0.55);
   font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   line-height: 1.55;
   color: hsl(var(--foreground));
   overflow: hidden;
@@ -289,7 +289,7 @@ const tools = [
   border-radius: 6px;
   background-color: hsl(var(--muted) / 0.4);
   font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
-  font-size: 9px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
 }
 
@@ -338,7 +338,7 @@ const tools = [
   border: 1px solid hsl(var(--primary) / 0.4);
   background-color: hsl(var(--background) / 0.75);
   backdrop-filter: blur(8px);
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   color: hsl(var(--primary-text));
 }
diff --git a/src/components/upgrade/FeaturePoster/TransferPoster.vue b/src/components/upgrade/FeaturePoster/TransferPoster.vue
index 39f8f006..13f51f8b 100644
--- a/src/components/upgrade/FeaturePoster/TransferPoster.vue
+++ b/src/components/upgrade/FeaturePoster/TransferPoster.vue
@@ -153,7 +153,7 @@ import { ProgressiveBlur } from '../effects'
   padding: 2px 11px;
   border-radius: 999px;
   border: 1px solid hsl(var(--border));
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.08em;
   color: hsl(var(--muted-foreground));
@@ -165,7 +165,7 @@ import { ProgressiveBlur } from '../effects'
   border-radius: 6px;
   border: 1px solid hsl(var(--primary) / 0.35);
   color: hsl(var(--primary-text));
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
 }
 
@@ -212,7 +212,7 @@ import { ProgressiveBlur } from '../effects'
   gap: 5px;
   padding: 5px 0;
   border-radius: 7px;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-weight: 500;
   color: hsl(var(--muted-foreground));
 }
@@ -260,7 +260,7 @@ import { ProgressiveBlur } from '../effects'
 }
 
 .p-step-title {
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   color: hsl(var(--foreground));
 }
@@ -271,7 +271,7 @@ import { ProgressiveBlur } from '../effects'
   border-radius: 999px;
   border: 1px solid hsl(var(--border));
   color: hsl(var(--muted-foreground));
-  font-size: 8.5px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.06em;
 }
@@ -293,14 +293,14 @@ import { ProgressiveBlur } from '../effects'
 }
 
 .p-field-label {
-  font-size: 8.5px;
+  font-size: var(--font-size-caption);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: hsl(var(--muted-foreground));
 }
 
 .p-field-value {
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   color: hsl(var(--foreground));
   font-variant-numeric: tabular-nums;
@@ -319,14 +319,14 @@ import { ProgressiveBlur } from '../effects'
   border: 1px solid hsl(var(--border) / 0.6);
   background-color: hsl(var(--muted) / 0.5);
   color: hsl(var(--muted-foreground));
-  font-size: 9px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
   white-space: nowrap;
 }
 
 .p-indicator-text {
-  font-size: 9px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
   overflow: hidden;
   text-overflow: ellipsis;
@@ -344,7 +344,7 @@ import { ProgressiveBlur } from '../effects'
   padding: 5px 0;
   border: 1px solid hsl(var(--border) / 0.5);
   border-radius: 7px;
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   color: hsl(var(--muted-foreground));
 }
@@ -383,7 +383,7 @@ import { ProgressiveBlur } from '../effects'
 }
 
 .p-panel-title {
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -396,7 +396,7 @@ import { ProgressiveBlur } from '../effects'
   border-radius: 999px;
   background-color: hsl(var(--primary) / 0.12);
   color: hsl(var(--primary-text));
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
@@ -414,7 +414,7 @@ import { ProgressiveBlur } from '../effects'
 }
 
 .p-task-name {
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
   color: hsl(var(--foreground));
   overflow: hidden;
@@ -424,7 +424,7 @@ import { ProgressiveBlur } from '../effects'
 
 .p-task-count {
   margin-left: auto;
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
   font-variant-numeric: tabular-nums;
 }
@@ -434,7 +434,7 @@ import { ProgressiveBlur } from '../effects'
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
   color: hsl(var(--method-post));
   font-variant-numeric: tabular-nums;
@@ -479,7 +479,7 @@ import { ProgressiveBlur } from '../effects'
 
 .p-note {
   margin: 0;
-  font-size: 9.5px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
   font-variant-numeric: tabular-nums;
 }
@@ -497,7 +497,7 @@ import { ProgressiveBlur } from '../effects'
   border: 1px solid hsl(var(--primary) / 0.4);
   background-color: hsl(var(--background) / 0.75);
   backdrop-filter: blur(8px);
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   color: hsl(var(--primary-text));
 }
diff --git a/src/components/upgrade/PaidGate.vue b/src/components/upgrade/PaidGate.vue
index 98430b7b..5ce6de8c 100644
--- a/src/components/upgrade/PaidGate.vue
+++ b/src/components/upgrade/PaidGate.vue
@@ -308,7 +308,7 @@ async function handleLogin() {
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  font-size: 14px;
+  font-size: var(--font-size-form);
 }
 
 .unlock-copy__icon {
@@ -317,7 +317,7 @@ async function handleLogin() {
 }
 
 .unlock-copy__sub {
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 500;
   opacity: 0.85;
   font-variant-numeric: tabular-nums;
@@ -452,19 +452,19 @@ async function handleLogin() {
 }
 
 .gate-card__title {
-  font-size: 19px;
+  font-size: var(--font-size-title);
   font-weight: 700;
   letter-spacing: -0.02em;
   color: hsl(var(--foreground));
 }
 
 .gate-card--compact .gate-card__title {
-  font-size: 23px;
+  font-size: var(--font-size-page-title);
   letter-spacing: -0.03em;
 }
 
 .gate-card__sub {
-  font-size: 13px;
+  font-size: var(--font-size-body);
   color: hsl(var(--muted-foreground));
 }
 
@@ -488,7 +488,7 @@ async function handleLogin() {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--font-size-body);
   color: hsl(var(--foreground));
 }
 
@@ -535,14 +535,14 @@ async function handleLogin() {
 }
 
 .gate-tile__text b {
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   font-weight: 650;
   color: hsl(var(--foreground));
 }
 
 .gate-tile__text i {
   font-style: normal;
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
 }
 
@@ -554,7 +554,7 @@ async function handleLogin() {
 
 .prov-title {
   margin: 0;
-  font-size: 11.5px;
+  font-size: var(--font-size-dense);
   font-weight: 650;
   color: hsl(var(--foreground));
 }
@@ -569,7 +569,7 @@ async function handleLogin() {
   width: 52px;
   flex-shrink: 0;
   padding-top: 3px;
-  font-size: 8.5px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -591,7 +591,7 @@ async function handleLogin() {
   border: 1px solid hsl(var(--border) / 0.8);
   background-color: hsl(var(--background) / 0.85);
   color: hsl(var(--foreground));
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 600;
 }
 
@@ -612,7 +612,7 @@ async function handleLogin() {
 
 .gate-card__trust-line {
   text-align: center;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
 }
 
diff --git a/src/components/upgrade/ProBadge.vue b/src/components/upgrade/ProBadge.vue
index 721e2517..23271aa3 100644
--- a/src/components/upgrade/ProBadge.vue
+++ b/src/components/upgrade/ProBadge.vue
@@ -43,12 +43,12 @@ withDefaults(defineProps<{ size?: 'dot' | 'xs' | 'sm' }>(), { size: 'sm' })
 
 .pro-badge--xs {
   padding: 1px 7px;
-  font-size: 9px;
+  font-size: var(--font-size-caption);
   text-transform: uppercase;
 }
 
 .pro-badge--sm {
   padding: 2px 9px;
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
 }
 </style>
diff --git a/src/components/upgrade/UpgradeDialog.vue b/src/components/upgrade/UpgradeDialog.vue
index 463e292c..ac3e2013 100644
--- a/src/components/upgrade/UpgradeDialog.vue
+++ b/src/components/upgrade/UpgradeDialog.vue
@@ -288,14 +288,14 @@ onUnmounted(() => {
 }
 
 .upgrade-title {
-  font-size: 17px;
+  font-size: var(--font-size-title);
   font-weight: 700;
   letter-spacing: -0.02em;
   color: hsl(var(--foreground));
 }
 
 .upgrade-sub {
-  font-size: 12.5px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
 }
 
@@ -315,7 +315,7 @@ onUnmounted(() => {
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
-  font-size: 12.5px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--foreground));
 }
 
@@ -340,7 +340,7 @@ onUnmounted(() => {
   border-radius: 999px;
   background-color: hsl(var(--primary) / 0.14);
   color: hsl(var(--primary-text));
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
 }
 
@@ -371,7 +371,7 @@ onUnmounted(() => {
 }
 
 .upgrade-price__value {
-  font-size: 13.5px;
+  font-size: var(--font-size-body);
   font-weight: 700;
   color: hsl(var(--foreground));
   font-variant-numeric: tabular-nums;
@@ -383,7 +383,7 @@ onUnmounted(() => {
   border-radius: 999px;
   background-color: hsl(var(--primary) / 0.12);
   color: hsl(var(--primary-text));
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
 }
 
@@ -412,7 +412,7 @@ onUnmounted(() => {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  font-size: 10.5px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
 }
 
diff --git a/src/components/upgrade/effects/ShimmerButton.vue b/src/components/upgrade/effects/ShimmerButton.vue
index 9f023db4..9d56aa3e 100644
--- a/src/components/upgrade/effects/ShimmerButton.vue
+++ b/src/components/upgrade/effects/ShimmerButton.vue
@@ -60,13 +60,13 @@ withDefaults(defineProps<{ size?: 'sm' | 'lg' }>(), { size: 'lg' })
 .shimmer-btn--lg {
   height: 42px;
   padding: 0 26px;
-  font-size: 14px;
+  font-size: var(--font-size-form);
 }
 
 .shimmer-btn--sm {
   height: 34px;
   padding: 0 18px;
-  font-size: 13px;
+  font-size: var(--font-size-body);
 }
 
 .shimmer-btn__label {
diff --git a/src/composables/useSqlStatements.ts b/src/composables/useSqlStatements.ts
index 2ff5181d..282c5198 100644
--- a/src/composables/useSqlStatements.ts
+++ b/src/composables/useSqlStatements.ts
@@ -21,8 +21,8 @@ export type StatementToExecute = {
 // ── Character-based SQL statement splitter ──
 // Replaces the old line-based + regex approach that broke on correlated
 // subqueries spanning multiple lines (e.g. (SELECT count(*) ...) as alias).
-// This is the same algorithm dbx uses in Rust: character-by-character,
-// tracking quote/comment context, and splitting only on `;` outside of quotes.
+// The splitter scans character-by-character, tracking quote/comment context,
+// and splits only on `;` outside of quotes.
 
 type ScannerState = {
   inSingleQuote: boolean
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index a58e81fe..cd8fa00c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,13 @@
 import type { ClassValue } from 'clsx'
 import { clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
 
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
+const mergeClasses = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': ['text-caption', 'text-body'],
+    },
+  },
+})
+
+export const cn = (...inputs: ClassValue[]): string => mergeClasses(clsx(inputs))
diff --git a/src/pages/DataStudioPage.vue b/src/pages/DataStudioPage.vue
index 8a15a614..d5c98245 100644
--- a/src/pages/DataStudioPage.vue
+++ b/src/pages/DataStudioPage.vue
@@ -311,7 +311,7 @@ function syncAllProviderModels() {
               >
                 <span class="i-carbon-time h-3.5 w-3.5" />
               </button>
-              <span class="text-[11px] tracking-wider font-bold px-3 py-0.5 border border-border rounded-full">
+              <span class="text-caption tracking-wider font-bold px-3 py-0.5 border border-border rounded-full">
                 {{ t('dataStudio.title') }}
               </span>
             </div>
@@ -631,7 +631,7 @@ function syncAllProviderModels() {
   border-radius: 9999px;
   background: hsl(var(--muted) / 0.5);
   color: hsl(var(--muted-foreground));
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s;
@@ -684,7 +684,7 @@ function syncAllProviderModels() {
 
 .add-source-menu-title {
   padding: 10px 12px 6px;
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
@@ -712,7 +712,7 @@ function syncAllProviderModels() {
   border-radius: 6px;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
-  font-size: 13px;
+  font-size: var(--font-size-body);
   outline: none;
 }
 
@@ -776,7 +776,7 @@ function syncAllProviderModels() {
 
 .add-source-item-name {
   display: block;
-  font-size: 13px;
+  font-size: var(--font-size-body);
   font-weight: 500;
   color: hsl(var(--foreground));
   overflow: hidden;
@@ -786,7 +786,7 @@ function syncAllProviderModels() {
 
 .add-source-item-meta {
   display: block;
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
   overflow: hidden;
   text-overflow: ellipsis;
@@ -794,7 +794,7 @@ function syncAllProviderModels() {
 }
 
 .add-source-empty {
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
   padding: 16px;
   text-align: center;
@@ -829,7 +829,7 @@ function syncAllProviderModels() {
   border-radius: 8px;
   background: transparent;
   color: hsl(var(--muted-foreground));
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.12s;
@@ -863,7 +863,7 @@ function syncAllProviderModels() {
   border-radius: 6px;
   background: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.15s;
@@ -894,7 +894,7 @@ function syncAllProviderModels() {
   border-radius: 9999px;
   background: hsl(var(--muted) / 0.5);
   color: hsl(var(--foreground));
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   cursor: pointer;
   transition: all 0.15s;
 }
@@ -949,7 +949,7 @@ function syncAllProviderModels() {
 
 .permission-menu-title {
   padding: 4px 8px 6px;
-  font-size: 10px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -966,7 +966,7 @@ function syncAllProviderModels() {
   border: none;
   background: transparent;
   color: hsl(var(--foreground));
-  font-size: 13px;
+  font-size: var(--font-size-body);
   text-align: left;
   cursor: pointer;
   transition: background-color 0.12s;
diff --git a/src/pages/QueriesPage.vue b/src/pages/QueriesPage.vue
index 73949265..2bb07a4c 100644
--- a/src/pages/QueriesPage.vue
+++ b/src/pages/QueriesPage.vue
@@ -1399,7 +1399,7 @@ function closeResultPanel() {
                       <DbTypeIcon
                         v-if="activeConnection.type"
                         :type="activeConnection.type"
-                        :size="24"
+                        :size="20"
                       />
                       <span class="text-lg font-semibold">{{ activeConnection.name }}</span>
                     </div>
diff --git a/src/pages/TransferPage.vue b/src/pages/TransferPage.vue
index 302c885c..8a4e702a 100644
--- a/src/pages/TransferPage.vue
+++ b/src/pages/TransferPage.vue
@@ -34,10 +34,10 @@ const tabConfig = computed(() => [
         <!-- Header -->
         <header class="px-6 py-3 border-b border-border/40 flex shrink-0 items-center justify-between">
           <div class="flex gap-3 items-center">
-            <h1 class="text-base tracking-tight font-semibold">
+            <h1 class="text-xl tracking-tight font-semibold">
               {{ t('transfer.title') }}
             </h1>
-            <p class="text-[11px] text-muted-foreground">
+            <p class="text-caption text-muted-foreground">
               {{ t('transfer.subtitle') }}
             </p>
           </div>
diff --git a/src/views/data-studio/components/session-history-panel.vue b/src/views/data-studio/components/session-history-panel.vue
index 7bcdd592..db8a126e 100644
--- a/src/views/data-studio/components/session-history-panel.vue
+++ b/src/views/data-studio/components/session-history-panel.vue
@@ -131,7 +131,7 @@ function formatTime(session: AgentSession): string {
 }
 
 .history-title {
-  font-size: 11px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
@@ -167,7 +167,7 @@ function formatTime(session: AgentSession): string {
 }
 
 .empty-hint {
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   color: hsl(var(--muted-foreground));
   text-align: center;
   padding: 20px 0;
@@ -205,7 +205,7 @@ function formatTime(session: AgentSession): string {
 }
 
 .session-name {
-  font-size: 13px;
+  font-size: var(--font-size-body);
   font-weight: 500;
   color: hsl(var(--foreground));
   white-space: nowrap;
@@ -214,7 +214,7 @@ function formatTime(session: AgentSession): string {
 }
 
 .session-meta {
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   color: hsl(var(--muted-foreground));
 }
 
diff --git a/src/views/setting/plan-section.vue b/src/views/setting/plan-section.vue
index 9567a2f9..2c1c26fa 100644
--- a/src/views/setting/plan-section.vue
+++ b/src/views/setting/plan-section.vue
@@ -214,14 +214,14 @@ const handleLogout = () => runAccountAction(() => entitlementStore.clearSessionS
   align-items: center;
   gap: 6px;
   padding: 9px 14px;
-  font-size: 13px;
+  font-size: var(--font-size-body);
   color: hsl(var(--foreground));
   border-top: 1px solid hsl(var(--border) / 0.7);
 }
 
 .compare-head {
   border-top: none;
-  font-size: 12px;
+  font-size: var(--font-size-dense);
   font-weight: 600;
   color: hsl(var(--muted-foreground));
 }
@@ -249,7 +249,7 @@ const handleLogout = () => runAccountAction(() => entitlementStore.clearSessionS
   border-radius: 999px;
   background-color: hsl(var(--primary) / 0.12);
   color: hsl(var(--primary-text));
-  font-size: 9px;
+  font-size: var(--font-size-caption);
   font-weight: 700;
   white-space: nowrap;
 }
diff --git a/tests/common/classNames.test.ts b/tests/common/classNames.test.ts
new file mode 100644
index 00000000..78e578e1
--- /dev/null
+++ b/tests/common/classNames.test.ts
@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils'
+
+describe('semantic font sizes', () => {
+  it.each(['text-caption', 'text-body'])(
+    'overrides the default size with %s while preserving the text color',
+    (size) => {
+      const classes = cn('text-sm font-medium', `${size} text-muted-foreground`).split(' ')
+
+      expect(classes).toEqual(expect.arrayContaining([size, 'text-muted-foreground', 'font-medium']))
+      expect(classes).not.toContain('text-sm')
+    },
+  )
+
+  it.each(['text-caption', 'text-body'])(
+    'preserves status colors when %s follows a component variant',
+    (size) => {
+      const classes = cn('text-xs text-destructive-text bg-destructive-muted', size).split(' ')
+
+      expect(classes).toEqual(expect.arrayContaining([size, 'text-destructive-text', 'bg-destructive-muted']))
+      expect(classes).not.toContain('text-xs')
+    },
+  )
+
+  it('allows a standard size to override a semantic size', () => {
+    expect(cn('text-caption text-primary-text', 'text-sm')).toBe('text-primary-text text-sm')
+  })
+
+  it('merges sizes within the same responsive variant independently of color', () => {
+    expect(cn('md:text-caption md:text-destructive-text', 'md:text-body'))
+      .toBe('md:text-destructive-text md:text-body')
+  })
+})
diff --git a/uno.config.ts b/uno.config.ts
index ec079e1d..0cac1c70 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -84,6 +84,12 @@ export default defineConfig({
       md: 'calc(var(--radius) - 2px)',
       sm: 'calc(var(--radius) - 4px)',
     },
+    text: {
+      // Semantic type scale (DESIGN.md Typography). preset-wind4 stores font
+      // sizes under theme.text; 12/14/16/20px already exist as xs/sm/base/xl.
+      caption: { fontSize: '11px', lineHeight: '16px' },
+      body: { fontSize: '13px', lineHeight: '20px' },
+    },
     animation: {
       keyframes: {
         'accordion-down': '{from{height:0}to{height:var(--radix-accordion-content-height)}}',