diff --git a/frontend/src/app/Main.tsx b/frontend/src/app/Main.tsx
index 127f92fd..33109c71 100644
--- a/frontend/src/app/Main.tsx
+++ b/frontend/src/app/Main.tsx
@@ -389,7 +389,7 @@ const DefaultModelGuard: React.FC<{ children: React.ReactNode }> = ({ children }
           severity="info"
           variant="filled"
           onClose={() => setSessionSwitch(null)}
-          sx={{ fontSize: '0.8rem' }}
+          sx={{ fontSize: '0.8125rem' }}
         >
           {sessionSwitch && (sessionSwitch.toFreeTrial ? (
             <>Your model isn't connected, you're on the free trial now{sessionSwitch.runs != null ? <> ({sessionSwitch.runs} runs left)</> : null}.</>
@@ -430,7 +430,7 @@ const CrashRecoveryChip: React.FC = () => {
         bgcolor: 'background.paper',
         border: '1px solid', borderColor: 'divider',
         boxShadow: 3, borderRadius: '10px',
-        px: 1.75, py: 1, fontSize: '0.85rem',
+        px: 1.75, py: 1, fontSize: '0.875rem',
         maxWidth: 360,
       }}>
         <Box component="span" sx={{
diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 8485c43e..e5ed4a72 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -727,7 +727,7 @@ const AppShell: React.FC = () => {
           }}
         >
           <ErrorSlime size={22} />
-          <Typography sx={{ fontSize: '0.86rem', color: '#ef4444', flex: 1, fontWeight: 500, letterSpacing: '0.01em' }}>
+          <Typography sx={{ fontSize: '0.875rem', color: '#ef4444', flex: 1, fontWeight: 500, letterSpacing: '0.01em' }}>
             {!isOnline
               ? 'No internet connection; agents cannot reach AI models or external services'
               : (
@@ -755,7 +755,7 @@ const AppShell: React.FC = () => {
 
       <Collapse in={showFreeTrialNudge && !fsHideChrome} timeout={300} unmountOnExit>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2, py: 0.5, flexShrink: 0 }}>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, flex: 1, letterSpacing: '0.01em' }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, flex: 1, letterSpacing: '0.01em' }}>
             {freeTrialSpent
               ? (refillLabel ? `Out of free runs, fresh ones in ${refillLabel}. ` : "You're out of free runs for now. ")
               : "Nice, you're rolling. "}
@@ -773,7 +773,7 @@ const AppShell: React.FC = () => {
               role="button"
               aria-label="Dismiss"
               onClick={() => { try { localStorage.setItem('os_ft_nudge_dismissed', '1'); } catch {} setFtNudgeDismissed(true); }}
-              sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '0.95rem', lineHeight: 1, px: 0.5, '&:hover': { color: c.text.secondary } }}
+              sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '1rem', lineHeight: 1, px: 0.5, '&:hover': { color: c.text.secondary } }}
             >
               ×
             </Box>
@@ -790,14 +790,14 @@ const AppShell: React.FC = () => {
           {usageResetLabel && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, color: c.text.secondary }}>
               <Clock size={12} style={{ flexShrink: 0 }} />
-              <Typography sx={{ fontSize: '0.8rem', letterSpacing: '0.01em' }}>{usageResetLabel}</Typography>
+              <Typography sx={{ fontSize: '0.8125rem', letterSpacing: '0.01em' }}>{usageResetLabel}</Typography>
             </Box>
           )}
           {proMaxed && (
             <Box
               component="span"
               onClick={() => dispatch(openSettingsModal('models'))}
-              sx={{ color: c.accent.primary, cursor: 'pointer', fontSize: '0.8rem', '&:hover': { textDecoration: 'underline' } }}
+              sx={{ color: c.accent.primary, cursor: 'pointer', fontSize: '0.8125rem', '&:hover': { textDecoration: 'underline' } }}
             >
               Upgrade
             </Box>
@@ -819,7 +819,7 @@ const AppShell: React.FC = () => {
           }}
         >
           <SystemUpdateAltIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />
-          <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {updateStatus === 'available' && `OpenSwarm${verSuffix} is available`}
             {updateStatus === 'downloading' && `Downloading OpenSwarm${verSuffix}…`}
             {updateStatus === 'downloaded' && `OpenSwarm${verSuffix} is ready to install`}
@@ -839,7 +839,7 @@ const AppShell: React.FC = () => {
             />
           )}
           {updateStatus === 'downloading' && (
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, flexShrink: 0 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, flexShrink: 0 }}>
               {Math.round(downloadPercent)}%
             </Typography>
           )}
@@ -979,8 +979,8 @@ const AppShell: React.FC = () => {
             }}
           >
             <SearchGlyph size={15} />
-            <Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.86rem', color: c.text.muted }}>Search</Typography>
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
+            <Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.875rem', color: c.text.muted }}>Search</Typography>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
           </ButtonBase>
         </Box>
         <Box sx={{
@@ -1024,7 +1024,7 @@ const AppShell: React.FC = () => {
                 sx={{
                   '& .MuiListItemText-primary': {
                     color: isDashboardRoute ? c.text.primary : c.text.muted,
-                    fontSize: '0.9rem',
+                    fontSize: '0.875rem',
                     fontWeight: isDashboardRoute ? 600 : 400,
                   },
                 }}
@@ -1114,7 +1114,7 @@ const AppShell: React.FC = () => {
                           sx={{
                             flex: 1,
                             minWidth: 0,
-                            fontSize: '0.86rem',
+                            fontSize: '0.875rem',
                             fontWeight: isActive ? 500 : 400,
                             color: isActive ? c.text.secondary : c.text.ghost,
                             py: 0,
@@ -1135,7 +1135,7 @@ const AppShell: React.FC = () => {
                           }}
                           sx={{
                             color: isActive ? c.text.secondary : c.text.ghost,
-                            fontSize: '0.86rem',
+                            fontSize: '0.875rem',
                             fontWeight: isActive ? 500 : 400,
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
@@ -1182,7 +1182,7 @@ const AppShell: React.FC = () => {
                 sx={{
                   '& .MuiListItemText-primary': {
                     color: isAppsRoute ? c.text.primary : c.text.muted,
-                    fontSize: '0.9rem',
+                    fontSize: '0.875rem',
                     fontWeight: isAppsRoute ? 600 : 400,
                   },
                 }}
@@ -1266,7 +1266,7 @@ const AppShell: React.FC = () => {
                           sx={{
                             flex: 1,
                             minWidth: 0,
-                            fontSize: '0.86rem',
+                            fontSize: '0.875rem',
                             fontWeight: isActive ? 500 : 400,
                             color: isActive ? c.text.secondary : c.text.ghost,
                             py: 0,
@@ -1285,7 +1285,7 @@ const AppShell: React.FC = () => {
                                 onDoubleClick={(e) => { e.stopPropagation(); handleStartAppRename(app.id, appName); }}
                                 sx={{
                                   color: isActive ? c.text.secondary : c.text.ghost,
-                                  fontSize: '0.86rem',
+                                  fontSize: '0.875rem',
                                   fontWeight: isActive ? 500 : 400,
                                   overflow: 'hidden',
                                   textOverflow: 'ellipsis',
@@ -1359,7 +1359,7 @@ const AppShell: React.FC = () => {
               sx={{
                 '& .MuiListItemText-primary': {
                   color: c.text.muted,
-                  fontSize: '0.9rem',
+                  fontSize: '0.875rem',
                   fontWeight: 400,
                 },
               }}
@@ -1461,7 +1461,7 @@ const AppShell: React.FC = () => {
               <Button
                 size="small"
                 onClick={() => setSnackbarDismissed(true)}
-                sx={{ color: c.text.muted, textTransform: 'none', fontSize: '0.8rem', minWidth: 'auto' }}
+                sx={{ color: c.text.muted, textTransform: 'none', fontSize: '0.8125rem', minWidth: 'auto' }}
               >
                 Dismiss
               </Button>
@@ -1474,7 +1474,7 @@ const AppShell: React.FC = () => {
                     bgcolor: c.accent.primary,
                     '&:hover': { bgcolor: c.accent.pressed },
                     textTransform: 'none',
-                    fontSize: '0.8rem',
+                    fontSize: '0.8125rem',
                     borderRadius: 1.5,
                     minWidth: 'auto',
                   }}
@@ -1494,7 +1494,7 @@ const AppShell: React.FC = () => {
                     '&:hover': { bgcolor: c.accent.pressed },
                     '&.Mui-disabled': { bgcolor: c.accent.primary, color: '#fff', opacity: 0.7 },
                     textTransform: 'none',
-                    fontSize: '0.8rem',
+                    fontSize: '0.8125rem',
                     borderRadius: 1.5,
                     minWidth: 'auto',
                   }}
@@ -1539,14 +1539,14 @@ const AppShell: React.FC = () => {
           {peek.thumbnail ? (
             <Box component="img" src={peek.thumbnail} alt="" sx={{ width: '100%', height: 150, objectFit: 'cover', objectPosition: 'top left', display: 'block' }} />
           ) : (
-            <Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.78rem' }}>
+            <Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.75rem' }}>
               No preview yet
             </Box>
           )}
           <Box sx={{ p: 1.25 }}>
-            <Typography sx={{ fontWeight: 600, fontSize: '0.9rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
+            <Typography sx={{ fontWeight: 600, fontSize: '0.875rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
             {peek.description && (
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                 {peek.description}
               </Typography>
             )}
@@ -1590,7 +1590,7 @@ const AppShell: React.FC = () => {
             <Button
               size="small"
               onClick={handleUndoDeleteApp}
-              sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8rem', minWidth: 'auto' }}
+              sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8125rem', minWidth: 'auto' }}
             >
               Undo
             </Button>
diff --git a/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx b/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx
index fc5edf20..022dbead 100644
--- a/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx
+++ b/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx
@@ -89,7 +89,7 @@ const ACMultiChoice: React.FC<Props> = ({
       >
         <Typography
           sx={{
-            fontSize: '0.84rem',
+            fontSize: '0.8125rem',
             fontWeight: 600,
             color: c.text.primary,
             lineHeight: 1.4,
@@ -118,7 +118,7 @@ const ACMultiChoice: React.FC<Props> = ({
                 borderRadius: '10px',
                 px: 1.1,
                 py: 0.7,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 fontFamily: c.font.sans,
                 transition: 'all 0.12s',
diff --git a/frontend/src/app/components/Onboarding/ac/ACPopup.tsx b/frontend/src/app/components/Onboarding/ac/ACPopup.tsx
index 8cedc55b..3ad41b66 100644
--- a/frontend/src/app/components/Onboarding/ac/ACPopup.tsx
+++ b/frontend/src/app/components/Onboarding/ac/ACPopup.tsx
@@ -164,7 +164,7 @@ const ACPopup: React.FC<Props> = ({ text, offset = { x: 0, y: 14 } }) => {
         <Typography
           sx={{
             // 0.85rem with bold weight reads cleanly without dominating.
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             color: c.text.primary,
             fontWeight: 600,
             lineHeight: 1.4,
diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 47069ade..5c8df322 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -86,7 +86,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.6, delay: 0.8 }}
-        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1.02rem', color: 'rgba(255,255,255,0.75)' }}
+        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1rem', color: 'rgba(255,255,255,0.75)' }}
       >
         {sub}
       </motion.p>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
index ed939f6d..a2ff6d9f 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
@@ -44,7 +44,7 @@ const BeatApps: React.FC<{
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 14px', borderBottom: `1px solid ${c.border.subtle}`, background: c.bg.elevated }}>
-          <span style={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
+          <span style={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
         </div>
         <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(118px, 1fr))', gap: 12 }}>
           {entries.map((entry, i) => {
@@ -68,7 +68,7 @@ const BeatApps: React.FC<{
                 }}
               >
                 <span style={{ width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{entry.icon}</span>
-                <span style={{ fontSize: '0.76rem', fontWeight: 500, color: picked ? c.text.primary : c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
+                <span style={{ fontSize: '0.75rem', fontWeight: 500, color: picked ? c.text.primary : c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
               </motion.button>
             );
           })}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index c8ce1aa2..9e33a00d 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -240,17 +240,17 @@ const BeatCard: React.FC<{
               placeholder="Your name"
               style={{
                 marginTop: 20, border: 'none', outline: 'none', background: 'transparent',
-                fontSize: '1.7rem', fontWeight: 800, color: ink, fontFamily: 'inherit',
+                fontSize: '1.75rem', fontWeight: 800, color: ink, fontFamily: 'inherit',
                 width: '100%', padding: 0,
               }}
             />
-            <div style={{ marginTop: 5, fontFamily: MONO, fontSize: '0.66rem', letterSpacing: '0.14em', color: ink }}>
+            <div style={{ marginTop: 5, fontFamily: MONO, fontSize: '0.6875rem', letterSpacing: '0.14em', color: ink }}>
               {epithet}
             </div>
             <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
               <span style={{
                 display: 'inline-flex', alignItems: 'center', gap: 7,
-                fontFamily: MONO, fontSize: '0.56rem', letterSpacing: '0.08em',
+                fontFamily: MONO, fontSize: '0.625rem', letterSpacing: '0.08em',
                 color: ink, border: `1px solid ${ink}55`, borderRadius: 5, padding: '3px 7px',
               }}>
                 OPENSWARM
@@ -260,7 +260,7 @@ const BeatCard: React.FC<{
                 }} />
                 {today.toUpperCase()}
               </span>
-              <span style={{ fontSize: '0.6rem', letterSpacing: '0.06em', color: ink, fontWeight: 800, textAlign: 'right', lineHeight: 1.35 }}>
+              <span style={{ fontSize: '0.625rem', letterSpacing: '0.06em', color: ink, fontWeight: 800, textAlign: 'right', lineHeight: 1.35 }}>
                 OPEN<br />SWARM
               </span>
             </div>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index 13d494b5..edac464a 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -107,10 +107,10 @@ const BeatConnect: React.FC<{
                 boxShadow: isConnected ? 'inset 0 0 0 3px #ffffff' : 'none',
               }} />
               <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
-                <span style={{ fontSize: '0.98rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
+                <span style={{ fontSize: '1rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
                 {/* The green ring + filled radio already signal connected, so no redundant "Connected" text. */}
                 {!isConnected && isThis && !connected
-                  ? <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
+                  ? <span style={{ fontSize: '0.75rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
                   : null}
               </span>
               {/* Arc's icon tile: a full-height soft-tinted zone on the row's right edge, real brand mark inside. */}
@@ -124,12 +124,12 @@ const BeatConnect: React.FC<{
           );
         })}
         {userCode && !connected && (
-          <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.9rem', color: 'rgba(255,255,255,0.92)' }}>
+          <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.875rem', color: 'rgba(255,255,255,0.92)' }}>
             Your code: <strong style={{ fontFamily: c.font.mono, letterSpacing: '0.08em' }}>{userCode}</strong>
           </div>
         )}
         {!canContinue && (
-          <div style={{ fontSize: '0.82rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
+          <div style={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
             Pick a subscription above to continue.
           </div>
         )}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
index b6263170..77b963b1 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -106,7 +106,7 @@ const BeatShell: React.FC<{
           style={{
             display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
             marginBottom: 18, padding: 0, border: 'none', background: 'transparent',
-            color: 'rgba(255,255,255,0.47)', fontSize: '0.85rem', cursor: 'pointer', fontFamily: 'inherit',
+            color: 'rgba(255,255,255,0.47)', fontSize: '0.875rem', cursor: 'pointer', fontFamily: 'inherit',
             position: wide ? 'absolute' : 'relative', top: wide ? 24 : undefined, left: wide ? 28 : undefined,
           }}
         >
@@ -117,7 +117,7 @@ const BeatShell: React.FC<{
       <motion.h1 {...enter(0.12)} style={{ margin: 0, fontSize: wide ? 'clamp(2.1rem, 2.8vw, 2.7rem)' : 'clamp(2.1rem, 3.2vw, 3rem)', lineHeight: 1.06, fontWeight: 800, letterSpacing: '-0.02em', fontFamily: 'inherit' }}>
         {title}
       </motion.h1>
-      <motion.p {...enter(0.26)} style={{ margin: '18px 0 0', fontSize: '1.04rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: '36ch', whiteSpace: 'pre-line' }}>
+      <motion.p {...enter(0.26)} style={{ margin: '18px 0 0', fontSize: '1rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: '36ch', whiteSpace: 'pre-line' }}>
         {body}
       </motion.p>
       {/* Arc pins the CTA to the panel's bottom on card beats; on the wide account beat it follows the content. */}
@@ -141,7 +141,7 @@ const BeatShell: React.FC<{
             onClick={() => armed && onSecondary()}
             style={{
               marginTop: 12, width: '100%', border: 'none', background: 'transparent',
-              color: 'rgba(255,255,255,0.55)', fontSize: '0.88rem', fontWeight: 500,
+              color: 'rgba(255,255,255,0.55)', fontSize: '0.875rem', fontWeight: 500,
               cursor: 'pointer', fontFamily: 'inherit', padding: 4,
             }}
           >
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
index 260a1bbf..7be6f51b 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
@@ -84,9 +84,9 @@ const BeatSignIn: React.FC<{
               <CheckRoundedIcon sx={{ fontSize: 20, color: '#1a9e6a' }} />
             </span>
             <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-              <span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>You're signed in</span>
+              <span style={{ fontSize: '1rem', fontWeight: 600, color: '#2a2a27' }}>You're signed in</span>
               {userEmail && (
-                <span style={{ fontSize: '0.8rem', color: '#8a8a86', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{userEmail}</span>
+                <span style={{ fontSize: '0.8125rem', color: '#8a8a86', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{userEmail}</span>
               )}
             </span>
           </motion.div>
@@ -109,12 +109,12 @@ const BeatSignIn: React.FC<{
                 }}
               >
                 <span style={{ position: 'absolute', left: 18, display: 'flex', alignItems: 'center' }}>{row.icon}</span>
-                <span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>
+                <span style={{ fontSize: '1rem', fontWeight: 600, color: '#2a2a27' }}>
                   {row.hint ? row.hint : row.name}
                 </span>
               </motion.button>
             ))}
-            <div style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.65)', textAlign: 'center', marginTop: 2 }}>
+            <div style={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.65)', textAlign: 'center', marginTop: 2 }}>
               Sign in to continue.
             </div>
           </>
diff --git a/frontend/src/app/components/RunInDesktopMessage.tsx b/frontend/src/app/components/RunInDesktopMessage.tsx
index 2237c415..07d3179c 100644
--- a/frontend/src/app/components/RunInDesktopMessage.tsx
+++ b/frontend/src/app/components/RunInDesktopMessage.tsx
@@ -25,10 +25,10 @@ const RunInDesktopMessage: React.FC<Props> = ({ kind = 'browser' }) => {
         userSelect: 'none',
       }}
     >
-      <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: '#bbb' }}>
+      <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: '#bbb' }}>
         Open this in the OpenSwarm desktop app
       </Typography>
-      <Typography sx={{ fontSize: '0.82rem', lineHeight: 1.5, maxWidth: 360 }}>
+      <Typography sx={{ fontSize: '0.8125rem', lineHeight: 1.5, maxWidth: 360 }}>
         {noun} run inside the OpenSwarm desktop window, not a regular web browser. It looks like you opened the dev URL directly in a browser; launch OpenSwarm (the Electron window from <code>bash run.sh</code>) and use it there instead.
       </Typography>
     </Box>
diff --git a/frontend/src/app/components/editor/CommandPicker.tsx b/frontend/src/app/components/editor/CommandPicker.tsx
index 04213763..ffcb1526 100644
--- a/frontend/src/app/components/editor/CommandPicker.tsx
+++ b/frontend/src/app/components/editor/CommandPicker.tsx
@@ -412,7 +412,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
                 component="span"
                 sx={{
                   color: c.text.primary,
-                  fontSize: '0.8rem',
+                  fontSize: '0.8125rem',
                   fontWeight: 500,
                   fontFamily: c.font.mono,
                   whiteSpace: 'nowrap',
@@ -425,7 +425,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
                 component="span"
                 sx={{
                   color: c.text.muted,
-                  fontSize: '0.72rem',
+                  fontSize: '0.75rem',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
@@ -459,7 +459,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
           <Box key={label} sx={{ display: 'flex', alignItems: 'center', gap: 0.375 }}>
             <Typography
               sx={{
-                fontSize: '0.58rem',
+                fontSize: '0.625rem',
                 fontFamily: c.font.mono,
                 color: c.text.ghost,
                 bgcolor: c.bg.secondary,
@@ -472,7 +472,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
             >
               {keys}
             </Typography>
-            <Typography sx={{ fontSize: '0.58rem', color: c.text.ghost }}>
+            <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
               {label}
             </Typography>
           </Box>
diff --git a/frontend/src/app/components/editor/DirectoryBrowser.tsx b/frontend/src/app/components/editor/DirectoryBrowser.tsx
index 0934fe65..996f1ab4 100644
--- a/frontend/src/app/components/editor/DirectoryBrowser.tsx
+++ b/frontend/src/app/components/editor/DirectoryBrowser.tsx
@@ -149,7 +149,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
             sx={{
               '& .MuiOutlinedInput-root': {
                 bgcolor: c.bg.page,
-                fontSize: '0.85rem',
+                fontSize: '0.875rem',
                 fontFamily: c.font.mono,
               },
             }}
@@ -192,7 +192,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                 component="button"
                 underline="hover"
                 onClick={() => browse('/')}
-                sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}
+                sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}
               >
                 /
               </Link>
@@ -200,7 +200,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                 const fullPath = '/' + pathSegments.slice(0, i + 1).join('/');
                 const isLast = i === pathSegments.length - 1;
                 return isLast ? (
-                  <Typography key={fullPath} sx={{ color: c.text.primary, fontSize: '0.78rem', fontWeight: 500 }}>
+                  <Typography key={fullPath} sx={{ color: c.text.primary, fontSize: '0.75rem', fontWeight: 500 }}>
                     {seg}
                   </Typography>
                 ) : (
@@ -209,7 +209,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                     component="button"
                     underline="hover"
                     onClick={() => browse(fullPath)}
-                    sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}
+                    sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}
                   >
                     {seg}
                   </Link>
@@ -220,7 +220,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
         )}
 
         {error && (
-          <Typography sx={{ color: c.status.error, fontSize: '0.82rem', px: 1 }}>
+          <Typography sx={{ color: c.status.error, fontSize: '0.8125rem', px: 1 }}>
             {error}
           </Typography>
         )}
@@ -250,7 +250,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
             </Box>
           ) : !hasEntries ? (
             <Box sx={{ py: 4, textAlign: 'center' }}>
-              <Typography sx={{ color: c.text.ghost, fontSize: '0.85rem' }}>
+              <Typography sx={{ color: c.text.ghost, fontSize: '0.875rem' }}>
                 Empty directory
               </Typography>
             </Box>
@@ -277,7 +277,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                   </ListItemIcon>
                   <ListItemText
                     primary={dir}
-                    primaryTypographyProps={{ sx: { fontSize: '0.84rem', color: c.text.primary } }}
+                    primaryTypographyProps={{ sx: { fontSize: '0.8125rem', color: c.text.primary } }}
                   />
                 </ListItemButton>
               ))}
@@ -301,7 +301,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                   </ListItemIcon>
                   <ListItemText
                     primary={file}
-                    primaryTypographyProps={{ sx: { fontSize: '0.84rem', color: c.text.secondary } }}
+                    primaryTypographyProps={{ sx: { fontSize: '0.8125rem', color: c.text.secondary } }}
                   />
                 </ListItemButton>
               ))}
@@ -310,7 +310,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
         </Box>
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'space-between' }}>
-        <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem', pl: 1 }}>
+        <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', pl: 1 }}>
           {selected
             ? `Selected: ${selected.name}`
             : 'Click to select, double-click folders to open'}
diff --git a/frontend/src/app/components/editor/richEditorUtils.ts b/frontend/src/app/components/editor/richEditorUtils.ts
index 543fd99b..b5beb82b 100644
--- a/frontend/src/app/components/editor/richEditorUtils.ts
+++ b/frontend/src/app/components/editor/richEditorUtils.ts
@@ -49,7 +49,7 @@ export function createSkillPillElement(
     borderRadius: '999px',
     background: `${SKILL_COLOR}18`,
     color: SKILL_COLOR,
-    fontSize: '0.72rem',
+    fontSize: '0.75rem',
     fontFamily: monoFont,
     lineHeight: '1.8',
     verticalAlign: 'baseline',
@@ -116,7 +116,7 @@ export function createPasteCardElement(
     borderRadius: '6px',
     background: `${PASTE_CARD_COLOR}1A`,
     color: PASTE_CARD_COLOR,
-    fontSize: '0.72rem',
+    fontSize: '0.75rem',
     fontFamily: monoFont,
     lineHeight: '1.8',
     verticalAlign: 'baseline',
diff --git a/frontend/src/app/components/feedback/Loading.tsx b/frontend/src/app/components/feedback/Loading.tsx
index f36c8156..49cffd42 100644
--- a/frontend/src/app/components/feedback/Loading.tsx
+++ b/frontend/src/app/components/feedback/Loading.tsx
@@ -105,7 +105,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({ icon, title, hint, delay
       }}
     >
       {icon && <Box sx={{ opacity: 0.5, fontSize: 32 }}>{icon}</Box>}
-      <Typography sx={{ fontSize: '0.9rem', fontWeight: 500, color: c.text.muted }}>
+      <Typography sx={{ fontSize: '0.875rem', fontWeight: 500, color: c.text.muted }}>
         {title}
       </Typography>
       {hint && (
diff --git a/frontend/src/app/components/nudges/AutomationChips.tsx b/frontend/src/app/components/nudges/AutomationChips.tsx
index 17c9ea6e..dff1780c 100644
--- a/frontend/src/app/components/nudges/AutomationChips.tsx
+++ b/frontend/src/app/components/nudges/AutomationChips.tsx
@@ -66,7 +66,7 @@ const AutomationChips: React.FC<{ c: ClaudeTokens }> = ({ c }) => {
               border: `1px dashed ${done ? c.status.success : c.border.strong}`,
               background: done ? c.status.successBg : 'transparent',
               color: done ? c.status.success : c.text.secondary,
-              fontSize: '0.88rem', fontWeight: 500,
+              fontSize: '0.875rem', fontWeight: 500,
               cursor: done ? 'default' : 'pointer', fontFamily: 'inherit',
             }}
           >
diff --git a/frontend/src/app/components/nudges/RevealHero.tsx b/frontend/src/app/components/nudges/RevealHero.tsx
index 47085f09..a55b756f 100644
--- a/frontend/src/app/components/nudges/RevealHero.tsx
+++ b/frontend/src/app/components/nudges/RevealHero.tsx
@@ -85,10 +85,10 @@ const RevealHero: React.FC = () => {
               <Sparkles size={18} />
             </div>
             <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ fontSize: '1.02rem', fontWeight: 700, color: c.text.primary, letterSpacing: '-0.01em' }}>
+              <div style={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, letterSpacing: '-0.01em' }}>
                 {userName ? `${userName}, while you set up I got to work` : `While you set up, I got to work`}
               </div>
-              <div style={{ fontSize: '0.8rem', color: c.text.tertiary, marginTop: 2 }}>
+              <div style={{ fontSize: '0.8125rem', color: c.text.tertiary, marginTop: 2 }}>
                 {doneCount === jobs.length ? `All done, here on your canvas` : `${doneCount} of ${jobs.length} done, the rest are running`}
               </div>
             </div>
@@ -114,17 +114,17 @@ const RevealHero: React.FC = () => {
                   }}>
                     {iconFor(job.kind)}
                   </div>
-                  <div style={{ flex: 1, minWidth: 0, fontSize: '0.9rem', fontWeight: 500, color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <div style={{ flex: 1, minWidth: 0, fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {lineFor(job, st)}
                   </div>
                   {st === 'done' ? (
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.74rem', fontWeight: 600, color: c.status.success, flexShrink: 0 }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.75rem', fontWeight: 600, color: c.status.success, flexShrink: 0 }}>
                       <Check size={13} /> done
                     </span>
                   ) : st === 'snag' ? (
-                    <span style={{ fontSize: '0.74rem', fontWeight: 600, color: c.status.warning, flexShrink: 0 }}>needs a look</span>
+                    <span style={{ fontSize: '0.75rem', fontWeight: 600, color: c.status.warning, flexShrink: 0 }}>needs a look</span>
                   ) : (
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', fontWeight: 600, color: c.text.tertiary, flexShrink: 0 }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, flexShrink: 0 }}>
                       <span style={{
                         width: 7, height: 7, borderRadius: 999, background: c.accent.primary,
                         animation: 'revealHeroPulse 1.3s ease-in-out infinite',
@@ -136,7 +136,7 @@ const RevealHero: React.FC = () => {
               );
             })}
           </div>
-          <div style={{ padding: '9px 18px 13px', borderTop: `1px solid ${c.border.subtle}`, fontSize: '0.76rem', color: c.text.ghost }}>
+          <div style={{ padding: '9px 18px 13px', borderTop: `1px solid ${c.border.subtle}`, fontSize: '0.75rem', color: c.text.ghost }}>
             It's all on your canvas below. Nothing's saved or deleted without you, keep it or clear it anytime.
           </div>
           <style>{`@keyframes revealHeroPulse { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }`}</style>
diff --git a/frontend/src/app/components/overlays/DynamicIsland.tsx b/frontend/src/app/components/overlays/DynamicIsland.tsx
index 4e795839..25fd5bbe 100644
--- a/frontend/src/app/components/overlays/DynamicIsland.tsx
+++ b/frontend/src/app/components/overlays/DynamicIsland.tsx
@@ -113,7 +113,7 @@ const AgentStatusRow: React.FC<{
       <StatusDot status={agent.status} c={c} />
       <Typography
         sx={{
-          fontSize: '0.78rem',
+          fontSize: '0.75rem',
           fontWeight: 500,
           color: c.text.secondary,
           flex: 1,
@@ -126,7 +126,7 @@ const AgentStatusRow: React.FC<{
       </Typography>
       <Typography
         sx={{
-          fontSize: '0.6rem',
+          fontSize: '0.625rem',
           color: c.text.ghost,
           textTransform: 'uppercase',
           letterSpacing: '0.04em',
@@ -618,7 +618,7 @@ const CompactPill: React.FC<{
       <ActivityIndicator c={c} />
       <Typography
         sx={{
-          fontSize: '0.68rem',
+          fontSize: '0.6875rem',
           fontWeight: 500,
           color: c.text.tertiary,
           flex: 1,
@@ -702,7 +702,7 @@ const CompactActionablePill: React.FC<{
         </Box>
         <Typography
           sx={{
-            fontSize: '0.68rem',
+            fontSize: '0.6875rem',
             fontWeight: 600,
             color: isIntervention ? '#f59e0b' : c.text.secondary,
             flex: 1,
@@ -717,7 +717,7 @@ const CompactActionablePill: React.FC<{
         {remainingCount > 1 && (
           <Typography
             sx={{
-              fontSize: '0.6rem',
+              fontSize: '0.625rem',
               fontWeight: 600,
               color: c.text.ghost,
               flexShrink: 0,
@@ -756,7 +756,7 @@ const CompactActionablePill: React.FC<{
                 height: 18,
                 px: 0.5,
                 borderRadius: '4px',
-                fontSize: '0.58rem',
+                fontSize: '0.625rem',
                 fontWeight: 700,
                 color: '#fff',
                 bgcolor: c.status.success,
@@ -852,7 +852,7 @@ const ExpandedCard: React.FC<{
       >
         <Typography
           sx={{
-            fontSize: '0.76rem',
+            fontSize: '0.75rem',
             fontWeight: 600,
             color: c.text.muted,
             flex: 1,
@@ -863,7 +863,7 @@ const ExpandedCard: React.FC<{
         {badgeCount > 0 && (
           <Typography
             sx={{
-              fontSize: '0.65rem',
+              fontSize: '0.625rem',
               fontWeight: 600,
               color: c.text.ghost,
               flexShrink: 0,
@@ -904,7 +904,7 @@ const ExpandedCard: React.FC<{
             {hasAgents && (
               <Typography
                 sx={{
-                  fontSize: '0.58rem',
+                  fontSize: '0.625rem',
                   fontWeight: 600,
                   color: c.text.ghost,
                   textTransform: 'uppercase',
@@ -921,7 +921,7 @@ const ExpandedCard: React.FC<{
                 {groups.length > 1 && (
                   <Typography
                     sx={{
-                      fontSize: '0.65rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       color: c.text.ghost,
                       textTransform: 'uppercase',
@@ -963,7 +963,7 @@ const ExpandedCard: React.FC<{
             {hasApprovals && (
               <Typography
                 sx={{
-                  fontSize: '0.58rem',
+                  fontSize: '0.625rem',
                   fontWeight: 600,
                   color: c.text.ghost,
                   textTransform: 'uppercase',
@@ -1007,7 +1007,7 @@ const ExpandedCard: React.FC<{
                 >
                   <Typography
                     sx={{
-                      fontSize: '0.58rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       color: c.text.ghost,
                       textTransform: 'uppercase',
@@ -1021,7 +1021,7 @@ const ExpandedCard: React.FC<{
                     component="span"
                     onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClearAllFinished(); }}
                     sx={{
-                      fontSize: '0.58rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       color: c.text.ghost,
                       cursor: 'pointer',
diff --git a/frontend/src/app/components/overlays/GlobalSearchPalette.tsx b/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
index e792e4c9..2633bbae 100644
--- a/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
+++ b/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
@@ -233,7 +233,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
       >
         {/* Input row */}
         <Box sx={{ display: 'flex', alignItems: 'center', px: 2.25, py: 1.75, borderBottom: `1px solid ${c.border.subtle}` }}>
-          <SearchIcon sx={{ fontSize: '1.4rem', color: c.text.muted, mr: 1.5 }} />
+          <SearchIcon sx={{ fontSize: '1.375rem', color: c.text.muted, mr: 1.5 }} />
           <InputBase
             inputRef={inputRef}
             value={query}
@@ -241,14 +241,14 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
             placeholder="Search, or type a command…"
             fullWidth
             sx={{
-              fontSize: '1.05rem',
+              fontSize: '1rem',
               fontFamily: c.font.sans,
               color: c.text.primary,
               '& input::placeholder': { color: c.text.muted, opacity: 1 },
             }}
           />
           {isStillSearching && <CircularProgress size={16} sx={{ color: c.text.muted, ml: 1 }} />}
-          <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, ml: 1.5, fontFamily: c.font.mono }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, ml: 1.5, fontFamily: c.font.mono }}>
             esc
           </Typography>
         </Box>
@@ -256,7 +256,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
         {/* Results */}
         <Box sx={{ overflowY: 'auto', flex: 1 }}>
           {results.length === 0 ? (
-            <Typography sx={{ px: 2, py: 3, fontSize: '0.85rem', color: c.text.muted, textAlign: 'center' }}>
+            <Typography sx={{ px: 2, py: 3, fontSize: '0.875rem', color: c.text.muted, textAlign: 'center' }}>
               {query.trim() ? 'No matches' : 'No dashboards or chats yet'}
             </Typography>
           ) : (
@@ -330,7 +330,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
             gap: 1.5,
             alignItems: 'center',
             color: c.text.ghost,
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
           }}
         >
           <span>↑↓ navigate</span>
@@ -348,7 +348,7 @@ const SectionHeader: React.FC<{ label: string; c: ReturnType<typeof useClaudeTok
       px: 2.25,
       pt: 1.5,
       pb: 0.5,
-      fontSize: '0.72rem',
+      fontSize: '0.75rem',
       fontWeight: 600,
       letterSpacing: '0.06em',
       textTransform: 'uppercase',
@@ -389,7 +389,7 @@ const ResultRow: React.FC<RowProps> = ({ icon, title, subtitle, selected, onClic
     <Box sx={{ flex: 1, minWidth: 0 }}>
       <Typography
         sx={{
-          fontSize: '0.95rem',
+          fontSize: '1rem',
           fontWeight: 500,
           color: c.text.primary,
           overflow: 'hidden',
@@ -402,7 +402,7 @@ const ResultRow: React.FC<RowProps> = ({ icon, title, subtitle, selected, onClic
       {subtitle && (
         <Typography
           sx={{
-            fontSize: '0.78rem',
+            fontSize: '0.75rem',
             color: c.text.muted,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
diff --git a/frontend/src/app/components/overlays/PlanPicker.tsx b/frontend/src/app/components/overlays/PlanPicker.tsx
index b4299e96..04846658 100644
--- a/frontend/src/app/components/overlays/PlanPicker.tsx
+++ b/frontend/src/app/components/overlays/PlanPicker.tsx
@@ -144,7 +144,7 @@ const PlanPicker: React.FC<PlanPickerProps> = ({
           sx={{
             '& .MuiToggleButton-root': {
               textTransform: 'none',
-              fontSize: '0.78rem',
+              fontSize: '0.75rem',
               fontWeight: 500,
               px: 2,
               py: 0.5,
diff --git a/frontend/src/app/components/overlays/PlanPickerModal.tsx b/frontend/src/app/components/overlays/PlanPickerModal.tsx
index 0e1321be..0efd6fe5 100644
--- a/frontend/src/app/components/overlays/PlanPickerModal.tsx
+++ b/frontend/src/app/components/overlays/PlanPickerModal.tsx
@@ -49,7 +49,7 @@ const PlanPickerModal: React.FC<Props> = ({
         boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
       }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 1.5 }}>
-          <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
             {title}
           </Typography>
           <IconButton
diff --git a/frontend/src/app/components/overlays/TrustedFilePatterns.tsx b/frontend/src/app/components/overlays/TrustedFilePatterns.tsx
index d7bb8571..817d1bcc 100644
--- a/frontend/src/app/components/overlays/TrustedFilePatterns.tsx
+++ b/frontend/src/app/components/overlays/TrustedFilePatterns.tsx
@@ -76,10 +76,10 @@ export const TrustedFilePatterns: React.FC = () => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-      <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
+      <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
         Trusted file patterns
       </Typography>
-      <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, lineHeight: 1.45 }}>
+      <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.45 }}>
         Files like SSH keys and shell startup files normally ask before each write, even when you've set Write to "always allow". Patterns you've chosen to always allow appear below. Remove one to start asking again.
       </Typography>
       <Box sx={{ display: 'flex', flexDirection: 'column', border: `1px solid ${c.border.subtle}`, borderRadius: 1.5, overflow: 'hidden', mt: 0.5 }}>
@@ -97,10 +97,10 @@ export const TrustedFilePatterns: React.FC = () => {
             }}
           >
             <Box sx={{ flex: 1, minWidth: 0 }}>
-              <Typography sx={{ fontSize: '0.82rem', color: c.text.primary, fontWeight: 500 }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500 }}>
                 {PATTERN_LABELS[pat] || pat}
               </Typography>
-              <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, fontFamily: c.font.mono, mt: 0.15 }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, fontFamily: c.font.mono, mt: 0.15 }}>
                 {pat}
               </Typography>
             </Box>
diff --git a/frontend/src/app/components/share/ImportModal.tsx b/frontend/src/app/components/share/ImportModal.tsx
index 46b6776b..5987457b 100644
--- a/frontend/src/app/components/share/ImportModal.tsx
+++ b/frontend/src/app/components/share/ImportModal.tsx
@@ -43,7 +43,7 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
       {preflight && (
         <>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 1 }}>
-            <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
               Add {preflight.summary.root.name}?
             </Typography>
             <IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}>
@@ -55,13 +55,13 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
             {preflight.review && preflight.review.findings.length > 0 && (
               <Box sx={{ mt: 1.75, display: 'flex', gap: 0.85, alignItems: 'center' }}>
                 <ShieldOutlinedIcon sx={{ fontSize: 15, color: c.status.warning, flexShrink: 0 }} />
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1.4 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1.4 }}>
                   {preflight.review.findings.join(' ')}
                 </Typography>
               </Box>
             )}
             {preflight.conflicts.length > 0 && (
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mt: 1.5 }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 1.5 }}>
                 Some items already exist and will be added as copies.
               </Typography>
             )}
@@ -82,7 +82,7 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
                   borderRadius: `${c.radius.md}px`,
                   px: 2.5,
                   py: 0.6,
-                  fontSize: '0.85rem',
+                  fontSize: '0.875rem',
                   fontWeight: 600,
                   boxShadow: 'none',
                 }}
diff --git a/frontend/src/app/components/share/IncludesList.tsx b/frontend/src/app/components/share/IncludesList.tsx
index 7e9a8090..df5595fc 100644
--- a/frontend/src/app/components/share/IncludesList.tsx
+++ b/frontend/src/app/components/share/IncludesList.tsx
@@ -51,7 +51,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
     <Box>
       {/* Lead: the bundle's type + a one-line count. The name is in the title. */}
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
-        <Typography sx={{ fontSize: '0.85rem', color: c.text.muted }}>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>
           <Box component="span" sx={{ color: c.text.primary, fontWeight: 600 }}>{rootLabel}</Box>
           {countLine && `  ·  ${countLine}`}
         </Typography>
@@ -60,7 +60,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
             onClick={() => setExpanded((v) => !v)}
             sx={{ display: 'flex', alignItems: 'center', gap: 0.25, color: c.text.tertiary, cursor: 'pointer', '&:hover': { color: c.accent.primary } }}
           >
-            <Typography sx={{ fontSize: '0.72rem' }}>{expanded ? 'Hide' : 'Show'}</Typography>
+            <Typography sx={{ fontSize: '0.75rem' }}>{expanded ? 'Hide' : 'Show'}</Typography>
             <KeyboardArrowDownIcon sx={{ fontSize: 14, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.18s' }} />
           </Box>
         )}
@@ -70,10 +70,10 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
         <Box sx={{ mt: 0.5, maxHeight: 184, overflowY: 'auto' }}>
           {includes.map((it, i) => (
             <Box key={`inc-${i}`} sx={{ display: 'flex', gap: 1, py: 0.4 }}>
-              <Typography sx={{ fontSize: '0.6rem', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: c.text.tertiary, minWidth: 56, flexShrink: 0, mt: '2px' }}>
+              <Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: c.text.tertiary, minWidth: 56, flexShrink: 0, mt: '2px' }}>
                 {KIND_LABEL[it.type] || it.type}
               </Typography>
-              <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {it.name}
               </Typography>
             </Box>
@@ -83,7 +83,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
 
       {summary.requirements.length > 0 && (
         <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 0.75, mt: 1.5 }}>
-          <Typography sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.text.tertiary, mr: 0.25 }}>
+          <Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.text.tertiary, mr: 0.25 }}>
             Needs
           </Typography>
           {summary.requirements.map((r, i) => (
@@ -97,7 +97,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
                 }}
               >
                 {REQ_ICON[r.kind] || <ExtensionOutlinedIcon sx={{ fontSize: 14 }} />}
-                <Typography sx={{ fontSize: '0.76rem', color: c.text.secondary, whiteSpace: 'nowrap' }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, whiteSpace: 'nowrap' }}>
                   {r.label}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/components/share/PublishModal.tsx b/frontend/src/app/components/share/PublishModal.tsx
index d575af41..07fb596c 100644
--- a/frontend/src/app/components/share/PublishModal.tsx
+++ b/frontend/src/app/components/share/PublishModal.tsx
@@ -153,7 +153,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       return center(
         <>
           <CircularProgress size={22} sx={{ color: c.accent.primary }} />
-          <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary }}>Checking your app before it goes live...</Typography>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>Checking your app before it goes live...</Typography>
           <SlowHint active color={c.text.tertiary} />
         </>,
       );
@@ -162,7 +162,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       return center(
         <>
           <CircularProgress size={22} sx={{ color: c.accent.primary }} />
-          <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary }}>Building and publishing your app...</Typography>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>Building and publishing your app...</Typography>
           <SlowHint active color={c.text.tertiary} />
         </>,
       );
@@ -170,8 +170,8 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
     if (phase === 'error') {
       return center(
         <>
-          <Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary }}>Something went wrong</Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, textAlign: 'center' }}>{errorMsg}</Typography>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>Something went wrong</Typography>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, textAlign: 'center' }}>{errorMsg}</Typography>
         </>,
       );
     }
@@ -179,8 +179,8 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       if (confirmUnpublish) {
         return center(
           <>
-            <Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary }}>Take this app offline?</Typography>
-            <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, textAlign: 'center' }}>
+            <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>Take this app offline?</Typography>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, textAlign: 'center' }}>
               The public link will stop working for anyone you've shared it with.
             </Typography>
           </>,
@@ -190,7 +190,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
         <Box sx={{ px: 2.5, py: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <CheckCircleOutlineIcon sx={{ color: c.status.success, fontSize: 22 }} />
-            <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary }}>Your app is live</Typography>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>Your app is live</Typography>
           </Box>
           <Box
             sx={{
@@ -198,7 +198,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
               border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.secondary,
             }}
           >
-            <Typography sx={{ flex: 1, minWidth: 0, fontSize: '0.82rem', color: c.text.primary, fontFamily: 'ui-monospace, Menlo, monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <Typography sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: c.text.primary, fontFamily: 'ui-monospace, Menlo, monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {liveUrl}
             </Typography>
             <IconButton size="small" onClick={copyLink} sx={{ color: c.text.tertiary }}><ContentCopyIcon sx={{ fontSize: 16 }} /></IconButton>
@@ -212,7 +212,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       return center(
         <>
           <CheckCircleOutlineIcon sx={{ color: c.status.success, fontSize: 26 }} />
-          <Typography sx={{ fontSize: '0.88rem', color: c.text.primary }}>Looks good. Ready to publish.</Typography>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.primary }}>Looks good. Ready to publish.</Typography>
         </>,
       );
     }
@@ -220,18 +220,18 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       <Box sx={{ px: 2.5, py: 2, display: 'flex', flexDirection: 'column', gap: 1.25 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <WarningAmberIcon sx={{ color: c.status.warning, fontSize: 22 }} />
-          <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
             {findings.length} security risk{findings.length === 1 ? '' : 's'} found
           </Typography>
         </Box>
-        <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary }}>
+        <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary }}>
           You can still publish, fix them first, or cancel.
         </Typography>
-        <Button onClick={() => setShowDetails((s) => !s)} sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.accent.primary, fontSize: '0.78rem', px: 0.5 }}>
+        <Button onClick={() => setShowDetails((s) => !s)} sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.accent.primary, fontSize: '0.75rem', px: 0.5 }}>
           {showDetails ? 'Hide details' : 'Show details'}
         </Button>
         {showDetails && (
-          <Box component="ul" sx={{ m: 0, pl: 2.5, color: c.text.secondary, fontSize: '0.76rem', lineHeight: 1.55, maxHeight: 160, overflow: 'auto' }}>
+          <Box component="ul" sx={{ m: 0, pl: 2.5, color: c.text.secondary, fontSize: '0.75rem', lineHeight: 1.55, maxHeight: 160, overflow: 'auto' }}>
             {findings.map((f, i) => (
               <li key={i}>{f}</li>
             ))}
@@ -302,7 +302,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 0.5 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <PublicIcon sx={{ fontSize: 18, color: c.accent.primary }} />
-            <Typography sx={{ fontSize: '1.02rem', fontWeight: 700, color: c.text.primary }}>Publish {outputName}</Typography>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>Publish {outputName}</Typography>
           </Box>
           <IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}><CloseIcon sx={{ fontSize: 18 }} /></IconButton>
         </Box>
diff --git a/frontend/src/app/components/share/ShareButton.tsx b/frontend/src/app/components/share/ShareButton.tsx
index fb70c484..10c61d0c 100644
--- a/frontend/src/app/components/share/ShareButton.tsx
+++ b/frontend/src/app/components/share/ShareButton.tsx
@@ -45,7 +45,7 @@ const ShareButton: React.FC<Props> = ({
   return (
     <>
       {variant === 'menuItem' ? (
-        <MenuItem onClick={start} sx={{ fontSize: '0.85rem', color: c.text.primary, gap: 1 }}>
+        <MenuItem onClick={start} sx={{ fontSize: '0.875rem', color: c.text.primary, gap: 1 }}>
           <ListItemIcon sx={{ minWidth: 0, color: c.text.tertiary }}>
             <IosShareIcon sx={{ fontSize: 16 }} />
           </ListItemIcon>
diff --git a/frontend/src/app/components/share/ShareModal.tsx b/frontend/src/app/components/share/ShareModal.tsx
index 7a164bb3..d90f4122 100644
--- a/frontend/src/app/components/share/ShareModal.tsx
+++ b/frontend/src/app/components/share/ShareModal.tsx
@@ -101,16 +101,16 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
       <Box sx={{ color: selected ? c.accent.primary : c.text.tertiary, display: 'flex' }}>{icon}</Box>
       <Box sx={{ flex: 1, minWidth: 0 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography sx={{ fontSize: '0.88rem', fontWeight: 600, color: c.text.primary }}>{title}</Typography>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>{title}</Typography>
           {chip && (
             <Chip
               label={chip}
               size="small"
-              sx={{ height: 18, fontSize: '0.62rem', bgcolor: c.bg.secondary, color: c.text.muted }}
+              sx={{ height: 18, fontSize: '0.625rem', bgcolor: c.bg.secondary, color: c.text.muted }}
             />
           )}
         </Box>
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted }}>{subtitle}</Typography>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>{subtitle}</Typography>
       </Box>
     </Box>
   );
@@ -133,7 +133,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 1 }}>
-          <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
             Share {target.name}
           </Typography>
           <IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}>
@@ -156,10 +156,10 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                   <Box sx={{ display: 'flex', gap: 1.25 }}>
                     <WarningAmberRoundedIcon sx={{ fontSize: 20, color: c.status.warning, mt: '1px', flexShrink: 0 }} />
                     <Box sx={{ minWidth: 0 }}>
-                      <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, mb: 0.25 }}>
+                      <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.25 }}>
                         This file may contain a secret
                       </Typography>
-                      <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, lineHeight: 1.5 }}>
+                      <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5 }}>
                         {error} If you export it, only send the file to people you trust.
                       </Typography>
                     </Box>
@@ -168,7 +168,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                     <Button
                       size="small"
                       onClick={load}
-                      sx={{ textTransform: 'none', fontSize: '0.8rem', color: c.text.secondary, minWidth: 0 }}
+                      sx={{ textTransform: 'none', fontSize: '0.8125rem', color: c.text.secondary, minWidth: 0 }}
                     >
                       Try again
                     </Button>
@@ -178,7 +178,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                       onClick={() => { setError(''); handleDownload(true); }}
                       disabled={downloading}
                       sx={{
-                        textTransform: 'none', fontSize: '0.8rem', fontWeight: 600,
+                        textTransform: 'none', fontSize: '0.8125rem', fontWeight: 600,
                         color: c.status.error, borderColor: `${c.status.error}80`, borderRadius: '8px',
                         '&:hover': { borderColor: c.status.error, bgcolor: `${c.status.error}0d` },
                       }}
@@ -189,7 +189,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                 </Box>
               ) : (
                 <Box sx={{ py: 1 }}>
-                  <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
+                  <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
                   <Button size="small" onClick={load} sx={{ textTransform: 'none', color: c.accent.primary }}>
                     Try again
                   </Button>
@@ -240,7 +240,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                 borderRadius: `${c.radius.md}px`,
                 px: 2.5,
                 py: 0.6,
-                fontSize: '0.85rem',
+                fontSize: '0.875rem',
                 fontWeight: 600,
                 boxShadow: 'none',
               }}
@@ -261,7 +261,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
           severity="success"
           variant="outlined"
           onClose={() => setToast('')}
-          sx={{ bgcolor: c.bg.surface, color: c.text.primary, border: `1px solid ${c.border.medium}`, fontSize: '0.82rem' }}
+          sx={{ bgcolor: c.bg.surface, color: c.text.primary, border: `1px solid ${c.border.medium}`, fontSize: '0.8125rem' }}
         >
           {toast}
         </Alert>
diff --git a/frontend/src/app/components/theme/AccentColorPad.tsx b/frontend/src/app/components/theme/AccentColorPad.tsx
index 7a51de91..5fb36201 100644
--- a/frontend/src/app/components/theme/AccentColorPad.tsx
+++ b/frontend/src/app/components/theme/AccentColorPad.tsx
@@ -195,7 +195,7 @@ const AccentColorPad: React.FC<{
           onClick={() => onChange(null)}
           style={{
             marginLeft: 'auto', border: 'none', background: 'transparent', padding: 0,
-            color: '#8a8a86', fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
+            color: '#8a8a86', fontSize: '0.8125rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
           }}
         >
           Reset
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 22456f3f..59f3e593 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -179,7 +179,7 @@ const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
         <Box
           component="span"
           sx={{
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             fontWeight: 500,
             background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
             backgroundSize: '200% 100%',
@@ -1910,7 +1910,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   role="button"
                   aria-label="Dismiss"
                   onClick={() => id && dispatch(clearMcpSuggestions({ sessionId: id }))}
-                  sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.72rem', '&:hover': { color: c.text.secondary } }}
+                  sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.75rem', '&:hover': { color: c.text.secondary } }}
                 >
                   Dismiss
                 </Box>
@@ -1954,7 +1954,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   }}
                 >
                   <PlayArrowIcon sx={{ fontSize: 14, color: c.accent.primary }} />
-                  <Typography sx={{ fontSize: '0.78rem', fontWeight: 500, color: c.accent.primary }}>
+                  <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.accent.primary }}>
                     Resume Agent Response
                   </Typography>
                 </Box>
@@ -2011,7 +2011,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               borderRadius: 2.5,
               cursor: 'pointer',
               fontWeight: 600,
-              fontSize: '0.85rem',
+              fontSize: '0.875rem',
               color: c.accent.primary,
               border: `1.5px solid ${c.accent.primary}`,
               background: `${c.accent.primary}08`,
@@ -2052,7 +2052,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                       ? <KeyboardArrowDownIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
                       : <KeyboardArrowUpIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
                     }
-                    <Typography sx={{ fontSize: '0.68rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
+                    <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
                       {queueLength} queued
                     </Typography>
                     <Tooltip title="Clear all">
@@ -2156,7 +2156,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                                 }}
                                 sx={{
                                   '& .MuiOutlinedInput-root': {
-                                    fontSize: '0.78rem',
+                                    fontSize: '0.75rem',
                                     color: c.text.primary,
                                     '& fieldset': { borderColor: c.border.medium },
                                     '&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -2182,7 +2182,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                             <Typography
                               sx={{
                                 flex: 1,
-                                fontSize: '0.78rem',
+                                fontSize: '0.75rem',
                                 color: c.text.secondary,
                                 lineHeight: 1.5,
                                 overflow: 'hidden',
@@ -2252,10 +2252,10 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                       <ErrorSlime size={20} />
                     </Box>
                     <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography sx={{ fontSize: '0.86rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
+                      <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
                         Haiku may run out of room with {enabledMcpCount} apps connected
                       </Typography>
-                      <Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, lineHeight: 1.45 }}>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.45 }}>
                         Haiku is the fastest Claude model but holds the least at once.
                         Each connected app adds instructions Claude has to read first.
                         If your message fails with “Prompt is too long,” turn off a few
@@ -2445,7 +2445,7 @@ function WorkflowModelNotice({ c, label }: { c: ReturnType<typeof useClaudeToken
         px: 1.75, py: 1, zIndex: 6,
       }}>
         <SwapHorizRoundedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
-        <Box sx={{ fontSize: '0.83rem', color: c.text.primary, lineHeight: 1.4 }}>
+        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
           This workflow will now be using <b>{display}</b>.
         </Box>
       </Box>
@@ -2468,7 +2468,7 @@ function FreeTrialModelNotice({ c, notice }: { c: ReturnType<typeof useClaudeTok
         px: 1.75, py: 1, zIndex: 6,
       }}>
         <InfoOutlinedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
-        <Box sx={{ fontSize: '0.83rem', color: c.text.primary, lineHeight: 1.4 }}>
+        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
           {display.kind === 'spent' ? (
             <>You're out of free runs, connect a model in Settings to use <b>{display.label}</b>.</>
           ) : (
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx
index 687c734f..f43b417c 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx
@@ -20,7 +20,7 @@ export const ModelPickerFooter: React.FC<Props> = ({ c, pickerSummary, tooltipSl
         bgcolor: c.bg.surface,
         borderTop: `1px solid ${c.border.subtle}`,
         px: 1.25, py: 0.5,
-        fontSize: '0.65rem', color: c.text.ghost,
+        fontSize: '0.625rem', color: c.text.ghost,
         display: 'flex', justifyContent: 'space-between',
         gap: 1,
       }}
@@ -38,9 +38,9 @@ export const ModelPickerFooter: React.FC<Props> = ({ c, pickerSummary, tooltipSl
           ['1M+ context',   pickerSummary.longContext],
         ] as Array<[string, number]>).filter(([, n]) => n > 0);
         const breakdownTooltip = breakdown.length > 0 ? (
-          <Box sx={{ fontSize: '0.74rem', lineHeight: 1.6, minWidth: 180 }}>
+          <Box sx={{ fontSize: '0.75rem', lineHeight: 1.6, minWidth: 180 }}>
             <Box sx={{
-              fontWeight: 600, fontSize: '0.78rem',
+              fontWeight: 600, fontSize: '0.75rem',
               color: c.text.primary,
               pb: 0.6, mb: 0.6,
               borderBottom: `1px solid ${c.border.subtle}`,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx
index cdd21997..c4329216 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx
@@ -68,7 +68,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
           placeholder="Search models…"
           fullWidth
           sx={{
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             color: c.text.primary,
             '& input': { padding: 0 },
             '& input::placeholder': { color: c.text.ghost, opacity: 1 },
@@ -138,7 +138,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
                 cursor: 'pointer', userSelect: 'none',
                 px: 0.85, height: 20,
                 display: 'inline-flex', alignItems: 'center',
-                fontSize: '0.66rem', fontWeight: 600,
+                fontSize: '0.6875rem', fontWeight: 600,
                 letterSpacing: '0.04em',
                 borderRadius: '4px',
                 border: `1px solid ${active ? c.accent.primary : c.border.subtle}`,
@@ -161,7 +161,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
             }}
             sx={{
               cursor: 'pointer', userSelect: 'none',
-              fontSize: '0.66rem', fontWeight: 500,
+              fontSize: '0.6875rem', fontWeight: 500,
               color: c.text.ghost,
               ml: 0.5, px: 0.5,
               '&:hover': { color: c.text.muted },
@@ -186,7 +186,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
             height: 22,
           }}>
             <Box sx={{
-              fontSize: '0.65rem', fontWeight: 500,
+              fontSize: '0.625rem', fontWeight: 500,
               color: c.text.tertiary,
               letterSpacing: '0.02em',
             }}>
@@ -220,7 +220,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
               }}
             />
             <Box sx={{
-              fontSize: '0.65rem', fontWeight: 600,
+              fontSize: '0.625rem', fontWeight: 600,
               color: row.idx > 0 ? c.accent.primary : c.text.ghost,
               fontVariantNumeric: 'tabular-nums',
               textAlign: 'right',
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx
index 1fd980f2..3d0dd8b1 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx
@@ -59,14 +59,14 @@ export const ModelPickerList: React.FC<Props> = ({
         <Box
           sx={{
             px: 2, py: 1.5,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             color: c.text.ghost,
             textAlign: 'center',
             fontStyle: 'italic',
           }}
         >
           {modelSearch.trim() ? (
-            <>No models match "{modelSearch.trim()}".{anyFilterActive && (<><br/><Box component="span" sx={{ fontSize: '0.7rem' }}>Try clearing the filters above.</Box></>)}</>
+            <>No models match "{modelSearch.trim()}".{anyFilterActive && (<><br/><Box component="span" sx={{ fontSize: '0.6875rem' }}>Try clearing the filters above.</Box></>)}</>
           ) : (
             <>No models match the current filters.</>
           )}
@@ -136,7 +136,7 @@ export const ModelPickerList: React.FC<Props> = ({
                 flexShrink: 0,
               }} />
               <Typography sx={{
-                fontSize: '0.7rem', fontWeight: 700,
+                fontSize: '0.6875rem', fontWeight: 700,
                 letterSpacing: '0.08em', textTransform: 'uppercase',
                 flex: 1,
                 ...(isOpenSwarmPro
@@ -150,7 +150,7 @@ export const ModelPickerList: React.FC<Props> = ({
               }}>
                 {prov}
               </Typography>
-              <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontWeight: 500 }}>
+              <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>
                 {ms.length}
               </Typography>
             </Box>
@@ -200,7 +200,7 @@ export const ModelPickerList: React.FC<Props> = ({
                     >
                       <ListItemText
                         primary={highlightMatch(displayLabel)}
-                        slotProps={{ primary: { sx: { fontSize: '0.8rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
+                        slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
                       />
                       {(() => {
                         const win = (opt.context_window as number) || 0;
@@ -217,11 +217,11 @@ export const ModelPickerList: React.FC<Props> = ({
                         return (
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 1 }}>
                             {(cannotPdf || cannotImg) && (
-                              <Box sx={{ fontSize: '0.62rem', color: '#ef4444', border: '1px solid #ef444440', borderRadius: '4px', px: 0.5, py: 0.05, lineHeight: 1.4 }}>
+                              <Box sx={{ fontSize: '0.625rem', color: '#ef4444', border: '1px solid #ef444440', borderRadius: '4px', px: 0.5, py: 0.05, lineHeight: 1.4 }}>
                                 No {cannotPdf ? 'PDF' : 'image'}
                               </Box>
                             )}
-                            <Typography sx={{ fontSize: '0.66rem', color: c.text.ghost, fontVariantNumeric: 'tabular-nums' }}>
+                            <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, fontVariantNumeric: 'tabular-nums' }}>
                               {formatTokenCount(win)}
                             </Typography>
                           </Box>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx
index 1ab62e19..7cd5a93c 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx
@@ -110,7 +110,7 @@ export const ModelPickerMenu: React.FC<Props> = (props) => {
               bgcolor: 'rgba(239, 68, 68, 0.08)',
               border: '1px solid rgba(239, 68, 68, 0.18)',
               color: '#ef4444',
-              fontSize: '0.7rem',
+              fontSize: '0.6875rem',
               flexShrink: 0,
               overflow: 'hidden',
             }}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx
index 74401ec8..fdb7bddd 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx
@@ -51,10 +51,10 @@ export const ModelPickerRecents: React.FC<Props> = ({
             }}
           />
           <AccessTimeIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary, flex: 1 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary, flex: 1 }}>
             Recent
           </Typography>
-          <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontWeight: 500 }}>
+          <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>
             {recentMaterialised.length}
           </Typography>
         </Box>
@@ -78,7 +78,7 @@ export const ModelPickerRecents: React.FC<Props> = ({
             >
               <ListItemText
                 primary={opt.label}
-                slotProps={{ primary: { sx: { fontSize: '0.8rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
+                slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
               />
             </MenuItem>
           </Tooltip>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx
index 7a93f111..2ea496ec 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx
@@ -53,9 +53,9 @@ export function useModelTooltip(c: ClaudeTokens) {
       (opt.context_window ?? 0) >= 1_000_000 && '1M+ context',
     ].filter(Boolean).join(' · ');
     return (
-      <Box sx={{ fontSize: '0.74rem', lineHeight: 1.55, minWidth: 256 }}>
+      <Box sx={{ fontSize: '0.75rem', lineHeight: 1.55, minWidth: 256 }}>
         <Box sx={{
-          fontWeight: 600, fontSize: '0.85rem', mb: 0.85,
+          fontWeight: 600, fontSize: '0.875rem', mb: 0.85,
           color: c.text.primary,
           letterSpacing: '-0.01em',
           pb: 0.6,
@@ -113,7 +113,7 @@ export function useModelTooltip(c: ClaudeTokens) {
         boxShadow: '0 12px 32px rgba(0, 0, 0, 0.32)',
         padding: '12px 14px',
         maxWidth: 340,
-        fontSize: '0.78rem',
+        fontSize: '0.75rem',
         fontFamily: c.font.sans,
       },
     },
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
index 78cdb70f..a48dc8ed 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
@@ -73,7 +73,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
       maxHeight: 400,
       boxShadow: c.shadow.lg,
       '& .MuiMenuItem-root': {
-        fontSize: '0.8rem',
+        fontSize: '0.8125rem',
         color: c.text.secondary,
         py: 0.75,
         px: 1.5,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
index 59eb304d..5e013f04 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
@@ -83,7 +83,7 @@ export const ComposerPlusMenu: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[]
             }}
           >
             <Box sx={{ display: 'flex', alignItems: 'center', color: 'inherit', flexShrink: 0 }}>{it.icon}</Box>
-            <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
+            <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
             {it.toggle && it.active && <CheckRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
           </MenuItem>
         ))}
@@ -128,7 +128,7 @@ export const ActiveTogglePills: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[
           >
             <Box component="span" className="osw-pill-icon" sx={{ display: 'inline-flex' }}>{it.icon}</Box>
             <Box component="span" className="osw-pill-x" sx={{ alignItems: 'center' }}><CloseRoundedIcon /></Box>
-            <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: 'inherit', whiteSpace: 'nowrap' }}>
+            <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: 'inherit', whiteSpace: 'nowrap' }}>
               {it.label}
             </Typography>
           </Box>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx
index 0f4e8adb..274d70f2 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx
@@ -52,7 +52,7 @@ export const ModeControl: React.FC<Props> = ({
         }}
       >
         {modeConf.icon}
-        <Typography sx={{ fontSize: '0.82rem', fontWeight: 600, color: 'inherit', lineHeight: 1 }}>
+        <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: 'inherit', lineHeight: 1 }}>
           {modeConf.label}
         </Typography>
         <KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
@@ -84,7 +84,7 @@ export const ModeControl: React.FC<Props> = ({
               </ListItemIcon>
               <ListItemText
                 primary={m.name}
-                slotProps={{ primary: { sx: { fontSize: '0.8rem', color: mode === m.id ? m.color : c.text.secondary } } }}
+                slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: mode === m.id ? m.color : c.text.secondary } } }}
               />
             </MenuItem>
           );
@@ -108,7 +108,7 @@ export const ModeControl: React.FC<Props> = ({
             transition: 'background 0.15s',
           }}
         >
-          <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
+          <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
             {(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
           </Typography>
           <KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
index b1e1201b..72806795 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
@@ -35,7 +35,7 @@ export const ModelControl: React.FC<Props> = ({ c, setModelAnchor, allModelFlat,
         transition: 'background 0.15s',
       }}
     >
-      <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
+      <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
         {(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
       </Typography>
       <KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx
index 0a7ae6e0..b717260a 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx
@@ -46,7 +46,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
         }}
       >
         <PsychologyOutlinedIcon sx={{ fontSize: 14, opacity: 0.7 }} />
-        <Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
+        <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
           {current.label}
         </Typography>
         <KeyboardArrowDownIcon sx={{ fontSize: 15, color: 'inherit', opacity: 0.7 }} />
@@ -62,7 +62,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
         MenuListProps={{ autoFocusItem: true }}
       >
         <MenuItem disabled sx={{ opacity: '1 !important', py: 0.5, px: 1.5, minHeight: 'auto', pointerEvents: 'none' }}>
-          <Typography sx={{ fontSize: '0.65rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary }}>
+          <Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary }}>
             Thinking Level
           </Typography>
         </MenuItem>
@@ -72,7 +72,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
           if (!isGemini3 || thinkingLevel === 'off') return null;
           return (
             <MenuItem disabled sx={{ opacity: '1 !important', py: 0.6, px: 1.5, minHeight: 'auto', pointerEvents: 'none', mx: 0.5, my: 0.25, borderRadius: 1, bgcolor: 'rgba(245, 158, 11, 0.06)', border: '1px solid rgba(245, 158, 11, 0.18)' }}>
-              <Typography sx={{ fontSize: '0.66rem', color: c.text.muted, lineHeight: 1.4, whiteSpace: 'normal', maxWidth: 240 }}>
+              <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted, lineHeight: 1.4, whiteSpace: 'normal', maxWidth: 240 }}>
                 Web search breaks on Gemini 3 preview while thinking is on. Set to <strong>Off</strong> if you need search.
               </Typography>
             </MenuItem>
@@ -86,10 +86,10 @@ export const ThinkingLevelControl: React.FC<Props> = ({
             sx={{ py: 0.6 }}
           >
             <Box>
-              <Typography sx={{ fontSize: '0.8rem', color: thinkingLevel === lvl.value ? c.text.primary : c.text.muted }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: thinkingLevel === lvl.value ? c.text.primary : c.text.muted }}>
                 {lvl.label}
               </Typography>
-              <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, mt: 0.1 }}>
+              <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, mt: 0.1 }}>
                 {lvl.desc}
               </Typography>
             </Box>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx
index f0aae287..bc209fc8 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx
@@ -119,7 +119,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   tooltip: {
                     sx: {
                       fontFamily: c.font.mono,
-                      fontSize: '0.7rem',
+                      fontSize: '0.6875rem',
                       maxWidth: 280,
                       wordBreak: 'break-all',
                     },
@@ -154,7 +154,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   sx={{
                     bgcolor: `${chipColor}12`,
                     color: chipColor,
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontFamily: c.font.mono,
                     height: 26,
                     maxWidth: 280,
@@ -187,7 +187,7 @@ export const AttachmentChips: React.FC<Props> = ({
               sx={{
                 bgcolor: `${c.status.info}15`,
                 color: c.status.info,
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontFamily: c.font.mono,
                 height: 26,
                 maxWidth: 220,
@@ -224,7 +224,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   tooltip: {
                     sx: {
                       fontFamily: c.font.mono,
-                      fontSize: '0.7rem',
+                      fontSize: '0.6875rem',
                       maxWidth: 420,
                       wordBreak: 'break-all',
                     },
@@ -239,7 +239,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   sx={{
                     bgcolor: 'rgba(59, 130, 246, 0.1)',
                     color: '#3b82f6',
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontFamily: c.font.mono,
                     height: 26,
                     maxWidth: 220,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx
index 8d0a7898..9982152d 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx
@@ -71,7 +71,7 @@ const OversizePopup: React.FC<OversizePopupProps> = ({
             flexShrink: 0,
           }} />
           <Box sx={{
-            color: c.text.primary, fontSize: '0.88rem', lineHeight: 1.45,
+            color: c.text.primary, fontSize: '0.875rem', lineHeight: 1.45,
             flex: '1 1 auto', minWidth: 0,
           }}>
             {label}
@@ -104,7 +104,7 @@ const ErrorToast: React.FC<{ c: ClaudeTokens; message: string | null; onClose: (
         }}
       >
         <Box sx={{
-          color: c.text.primary, fontSize: '0.88rem', lineHeight: 1.45,
+          color: c.text.primary, fontSize: '0.875rem', lineHeight: 1.45,
           flex: '1 1 auto', minWidth: 0,
         }}>
           {display}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
index fb9292ed..76048505 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
@@ -145,7 +145,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
           }}
         >
           <AttachFileIcon sx={{ fontSize: 16, color: c.accent.primary, mr: 0.5 }} />
-          <Typography sx={{ color: c.accent.primary, fontSize: '0.85rem', fontWeight: 500 }}>
+          <Typography sx={{ color: c.accent.primary, fontSize: '0.875rem', fontWeight: 500 }}>
             Drop files here
           </Typography>
         </Box>
@@ -166,7 +166,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
           }}
         >
           <CircularProgress size={14} sx={{ color: c.accent.primary, mr: 1 }} />
-          <Typography sx={{ color: c.accent.primary, fontSize: '0.85rem', fontWeight: 500 }}>
+          <Typography sx={{ color: c.accent.primary, fontSize: '0.875rem', fontWeight: 500 }}>
             Attaching files…
           </Typography>
         </Box>
@@ -198,7 +198,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
             }}
           >
             <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: p.runContext.color, flex: 'none' }} />
-            <Typography sx={{ fontSize: '0.7rem', fontWeight: 600, color: c.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
               Run attached · {p.runContext.title}
             </Typography>
             <Box
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
index 801444ea..2f07352b 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
@@ -55,7 +55,7 @@ export const EditorSurface: React.FC<Props> = ({
           border: 'none',
           outline: 'none',
           color: c.text.primary,
-          fontSize: '0.95rem',
+          fontSize: '1rem',
           lineHeight: '1.55',
           fontFamily: 'inherit',
           wordBreak: 'break-word',
@@ -71,7 +71,7 @@ export const EditorSurface: React.FC<Props> = ({
             right: 0,
             padding: `${hasAttachments ? 4 : 10}px 12px`,
             color: c.text.tertiary,
-            fontSize: '0.95rem',
+            fontSize: '1rem',
             lineHeight: '1.5',
             fontFamily: 'inherit',
             pointerEvents: 'none',
@@ -88,7 +88,7 @@ export const EditorSurface: React.FC<Props> = ({
             <span
               style={{
                 flexShrink: 0,
-                fontSize: '0.7rem',
+                fontSize: '0.6875rem',
                 fontWeight: 600,
                 letterSpacing: '0.02em',
                 color: c.text.tertiary,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx
index 213bcc31..96d628d3 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx
@@ -27,7 +27,7 @@ const PasteEditor: React.FC<{ pasteId: string; initial: string; onSave: Props['o
         resize: 'vertical',
         overflowY: 'auto',
         fontFamily: c.font.mono,
-        fontSize: '0.78rem',
+        fontSize: '0.75rem',
         lineHeight: 1.5,
         color: c.text.primary,
         background: 'transparent',
@@ -65,7 +65,7 @@ export const PastePreviewDialog: React.FC<Props> = ({ pasteId, onClose, onSave }
       </Box>
       <Box sx={{ p: 2, bgcolor: c.bg.surface }}>
         {original === undefined || pasteId === null ? (
-          <Typography sx={{ color: c.text.tertiary, fontSize: '0.85rem', fontStyle: 'italic' }}>
+          <Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem', fontStyle: 'italic' }}>
             This pasted text is no longer available. Re-paste to restore it.
           </Typography>
         ) : (
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx
index c0bc27a9..43a418c6 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx
@@ -19,7 +19,7 @@ export const SendBlockBanner: React.FC<Props> = ({ sendBlock, c }) => {
       bgcolor: c.bg.surface,
       border: `1px solid ${c.border.medium}`,
     }}>
-      <Typography sx={{ fontSize: '0.88rem', color: c.text.primary, lineHeight: 1.45 }}>
+      <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, lineHeight: 1.45 }}>
         That message is too long to send. Try shortening it or splitting it into a few smaller ones.
       </Typography>
     </Box>
diff --git a/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx b/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx
index 6ce78863..927d2796 100644
--- a/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx
+++ b/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx
@@ -28,7 +28,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
           sx={{
             display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.6,
             width: '100%', py: 0.9, borderRadius: 999, cursor: 'pointer',
-            fontSize: '0.85rem', fontWeight: 700,
+            fontSize: '0.875rem', fontWeight: 700,
             color: c.status.error, bgcolor: c.status.error + '14', border: `1px solid ${c.status.error}55`,
             '&:hover': { bgcolor: c.status.error + '22' },
           }}>
@@ -42,7 +42,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
   const tone = testState === 'complete' ? c.status.success : c.status.error;
   return (
     <Box sx={{ px: 2, py: 1.5, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: tone, fontSize: '0.8rem', fontWeight: 600 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: tone, fontSize: '0.8125rem', fontWeight: 600 }}>
         <CheckCircleOutlineRounded sx={{ fontSize: 16 }} />
         {testState === 'complete' ? 'Test finished' : 'Test stopped'}
       </Box>
@@ -52,7 +52,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
           onClick={onContinueEditing}
           sx={{
             flex: 1, textAlign: 'center', py: 0.8, borderRadius: 999, cursor: 'pointer',
-            fontSize: '0.82rem', fontWeight: 600, color: c.text.secondary,
+            fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary,
             border: `1px solid ${c.border.medium}`,
             '&:hover': { bgcolor: c.bg.elevated, color: c.text.primary },
           }}>
@@ -63,7 +63,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
           onClick={onSaveWorkflow}
           sx={{
             flex: 1, textAlign: 'center', py: 0.8, borderRadius: 999, cursor: 'pointer',
-            fontSize: '0.82rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary,
+            fontSize: '0.8125rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary,
             '&:hover': { filter: 'brightness(1.05)' },
           }}>
           Save workflow
diff --git a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
index 69138c4f..ce01992f 100644
--- a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+++ b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
@@ -22,7 +22,7 @@ const AnchorButton: React.FC<{ c: ClaudeTokens; onPick: (p: string) => void; del
       display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left', width: '100%',
       padding: '10px 14px', borderRadius: 11,
       border: `1px solid ${c.border.medium}`, background: c.bg.surface,
-      color: c.text.secondary, fontSize: '0.88rem', fontWeight: 500,
+      color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500,
       cursor: 'pointer', fontFamily: 'inherit',
     }}
   >
@@ -61,7 +61,7 @@ const WelcomeQuickReplies: React.FC<{
       <AnimatePresence mode="wait" initial={false}>
         {!showCategories && expanded === null ? (
           <motion.div key="personal" initial={false} style={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
               made for you, or just type below
             </Typography>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.7 }}>
@@ -76,7 +76,7 @@ const WelcomeQuickReplies: React.FC<{
                     display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left',
                     padding: '10px 14px', borderRadius: 11,
                     border: `1px solid ${c.border.medium}`, background: c.bg.surface,
-                    color: c.text.secondary, fontSize: '0.88rem', fontWeight: 500,
+                    color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500,
                     cursor: 'pointer', fontFamily: 'inherit',
                   }}
                 >
@@ -85,7 +85,7 @@ const WelcomeQuickReplies: React.FC<{
               ))}
               <AnchorButton c={c} onPick={onPick} delay={0.08 + personalized.length * 0.06} />
             </Box>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.78rem', mt: 1.4, mb: 0.6 }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 1.4, mb: 0.6 }}>
               worth putting on a schedule
             </Typography>
             <AutomationChips c={c} />
@@ -95,7 +95,7 @@ const WelcomeQuickReplies: React.FC<{
               sx={{
                 alignSelf: 'flex-start', mt: 0.9, px: 0.6, py: 0.3,
                 border: 'none', background: 'transparent',
-                color: c.text.ghost, fontSize: '0.82rem',
+                color: c.text.ghost, fontSize: '0.8125rem',
                 cursor: 'pointer', fontFamily: 'inherit',
                 '&:hover': { color: c.text.secondary },
               }}
@@ -113,7 +113,7 @@ const WelcomeQuickReplies: React.FC<{
                   display: 'inline-flex', alignItems: 'center', gap: 0.5,
                   alignSelf: 'flex-start', mb: 0.9, px: 0.6, py: 0.3,
                   border: 'none', background: 'transparent',
-                  color: c.text.ghost, fontSize: '0.85rem',
+                  color: c.text.ghost, fontSize: '0.875rem',
                   cursor: 'pointer', fontFamily: 'inherit',
                   '&:hover': { color: c.text.secondary },
                 }}
@@ -121,7 +121,7 @@ const WelcomeQuickReplies: React.FC<{
                 <ArrowLeft size={14} /> your starters
               </Box>
             )}
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
               pick one, or just type below
             </Typography>
             <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
@@ -139,7 +139,7 @@ const WelcomeQuickReplies: React.FC<{
                     border: `1px solid ${c.border.medium}`,
                     background: c.bg.surface,
                     color: c.text.secondary,
-                    fontSize: '0.9rem', fontWeight: 500,
+                    fontSize: '0.875rem', fontWeight: 500,
                     cursor: 'pointer', fontFamily: 'inherit',
                   }}
                 >
@@ -170,7 +170,7 @@ const WelcomeQuickReplies: React.FC<{
                 display: 'inline-flex', alignItems: 'center', gap: 0.5,
                 alignSelf: 'flex-start', mb: 0.9, px: 0.6, py: 0.3,
                 border: 'none', background: 'transparent',
-                color: c.text.ghost, fontSize: '0.85rem',
+                color: c.text.ghost, fontSize: '0.875rem',
                 cursor: 'pointer', fontFamily: 'inherit',
                 '&:hover': { color: c.text.secondary },
               }}
@@ -179,7 +179,7 @@ const WelcomeQuickReplies: React.FC<{
             </Box>
             {isSchedule ? (
               <>
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
                   one click puts it on a schedule
                 </Typography>
                 <AutomationChips c={c} />
@@ -200,7 +200,7 @@ const WelcomeQuickReplies: React.FC<{
                     border: `1px solid ${c.border.medium}`,
                     background: c.bg.surface,
                     color: c.text.secondary,
-                    fontSize: '0.88rem',
+                    fontSize: '0.875rem',
                     cursor: 'pointer', fontFamily: 'inherit',
                   }}
                 >
diff --git a/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx b/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx
index d5907e05..ff23bdf8 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx
@@ -28,7 +28,7 @@ const CompactionMarker: React.FC<{ collapsedCount: number }> = ({ collapsedCount
         }}
       >
         <UnfoldLessOutlinedIcon sx={{ fontSize: 13, opacity: 0.7 }} />
-        <Typography sx={{ fontSize: '0.7rem', lineHeight: 1, fontWeight: 500 }}>
+        <Typography sx={{ fontSize: '0.6875rem', lineHeight: 1, fontWeight: 500 }}>
           {label}
         </Typography>
       </Box>
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index e36ea81e..5102c6b3 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -415,7 +415,7 @@ const AttachedContextSection: React.FC<{
             {g.icon}
           </Box>
         ))}
-        <Typography sx={{ fontSize: '0.68rem', fontWeight: 500, color: c.text.muted }}>
+        <Typography sx={{ fontSize: '0.6875rem', fontWeight: 500, color: c.text.muted }}>
           {groups.map((g) => g.label).join(' · ')}
         </Typography>
         <ExpandMoreIcon
@@ -430,13 +430,13 @@ const AttachedContextSection: React.FC<{
       <Collapse in={expanded}>
         {groups.map((g) => (
           <Box key={g.key} sx={{ mt: 0.5 }}>
-            <Typography sx={{ fontSize: '0.62rem', fontWeight: 600, color: g.color, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.25 }}>
+            <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: g.color, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.25 }}>
               {g.label}
             </Typography>
             <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
               {g.chips.map((chip, i) => (
                 <Tooltip key={i} title={chip.tooltip || chip.label} arrow placement="top"
-                  slotProps={{ tooltip: { sx: { fontFamily: c.font.mono, fontSize: '0.68rem', maxWidth: 400 } } }}
+                  slotProps={{ tooltip: { sx: { fontFamily: c.font.mono, fontSize: '0.6875rem', maxWidth: 400 } } }}
                 >
                   <Chip
                     icon={chip.icon as React.ReactElement}
@@ -445,7 +445,7 @@ const AttachedContextSection: React.FC<{
                     sx={{
                       bgcolor: `${g.color}18`,
                       color: g.color,
-                      fontSize: '0.68rem',
+                      fontSize: '0.6875rem',
                       fontFamily: c.font.mono,
                       height: 22,
                       '& .MuiChip-icon': { color: g.color },
@@ -667,7 +667,7 @@ const ThinkingBubble: React.FC<{
     }
     const { total, input, output } = tokenBreakdown ?? { total: 0, input: null, output: null };
     const tooltipBody = (
-      <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem', lineHeight: 1.5 }}>
+      <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.75rem', lineHeight: 1.5 }}>
         {input != null && output != null ? (
           <>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
@@ -689,7 +689,7 @@ const ThinkingBubble: React.FC<{
           </Box>
         )}
         {input != null && output != null && (
-          <Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.7rem', fontStyle: 'italic' }}>
+          <Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.6875rem', fontStyle: 'italic' }}>
             Input shown is your message, history, and tool outputs. The fixed
             framework preamble (system prompt, tool defs, MCP descriptions) is
             excluded, since it's constant overhead from the agent runtime,
@@ -729,7 +729,7 @@ const ThinkingBubble: React.FC<{
           gap: 0.75,
           cursor: 'pointer',
           color: c.text.tertiary,
-          fontSize: '0.78rem',
+          fontSize: '0.75rem',
           py: 0.5,
           px: 1,
           ml: -1,
@@ -742,7 +742,7 @@ const ThinkingBubble: React.FC<{
         <PsychologyOutlinedIcon sx={{ fontSize: 14, opacity: 0.75 }} />
         <Typography
           sx={{
-            fontSize: '0.78rem',
+            fontSize: '0.75rem',
             fontWeight: 500,
             ...(isStreaming ? {
               background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
@@ -774,7 +774,7 @@ const ThinkingBubble: React.FC<{
             pl: 1.5,
             borderLeft: `2px solid ${c.border.subtle}`,
             color: c.text.tertiary,
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             lineHeight: 1.55,
             fontStyle: 'normal',
             whiteSpace: 'pre-wrap',
@@ -876,7 +876,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
     }
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', my: 1 }}>
-        <Typography sx={{ color: c.text.ghost, fontSize: '0.8rem', fontStyle: 'italic' }}>
+        <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', fontStyle: 'italic' }}>
           {sysText}
         </Typography>
       </Box>
@@ -1137,7 +1137,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                 borderRadius: 1.5,
                 p: 1.5,
                 overflow: 'auto',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 fontFamily: c.font.mono,
                 border: `1px solid ${c.border.subtle}`,
                 '&::-webkit-scrollbar': { height: 5, width: 5 },
@@ -1155,7 +1155,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                 px: 0.5,
                 py: 0.25,
                 borderRadius: 0.5,
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 fontFamily: c.font.mono,
               },
               '& pre code': { bgcolor: 'transparent', p: 0 },
@@ -1163,7 +1163,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                 width: '100%',
                 borderCollapse: 'collapse',
                 my: 1.5,
-                fontSize: '0.82rem',
+                fontSize: '0.8125rem',
                 border: `1px solid ${c.border.subtle}`,
                 borderRadius: 1,
                 overflow: 'hidden',
@@ -1212,11 +1212,11 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
               >
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                   <ErrorSlime size={22} />
-                  <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary }}>
+                  <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
                     {openswarmError.title}
                   </Typography>
                 </Box>
-                <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, lineHeight: 1.5 }}>
+                <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5 }}>
                   {openswarmError.detail}
                 </Typography>
                 {openswarmError.ctaLabel && (
@@ -1240,7 +1240,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                       }}
                       sx={{
                         textTransform: 'none',
-                        fontSize: '0.78rem',
+                        fontSize: '0.75rem',
                         borderColor: c.border.medium,
                         color: c.text.primary,
                         borderRadius: `${c.radius.md}px`,
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
index 542206e9..82412b84 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
@@ -69,7 +69,7 @@ const MessageEditSurface: React.FC<Props> = ({ userMessage, elementSuffix, eleme
       {elementLabels.length > 0 && (
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
           {elementLabels.map((label, i) => (
-            <Box key={i} sx={{ fontSize: '0.68rem', color: c.text.muted, bgcolor: 'rgba(255,255,255,0.06)', border: `1px solid ${c.border.subtle}`, borderRadius: '999px', px: 0.9, py: 0.15, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <Box key={i} sx={{ fontSize: '0.6875rem', color: c.text.muted, bgcolor: 'rgba(255,255,255,0.06)', border: `1px solid ${c.border.subtle}`, borderRadius: '999px', px: 0.9, py: 0.15, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {label}
             </Box>
           ))}
diff --git a/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx b/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx
index f5308489..7df53c70 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx
@@ -25,7 +25,7 @@ export function renderUserTextWithPills(text: string, c: ReturnType<typeof useCl
         sx={{
           bgcolor: `${SKILL_COLOR}18`,
           color: SKILL_COLOR,
-          fontSize: '0.72rem',
+          fontSize: '0.75rem',
           fontFamily: c.font.mono,
           height: 20,
           mx: 0.25,
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx
index 0c79991f..a295cdee 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx
@@ -26,27 +26,27 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
             px: 1.5, py: 0.85, borderBottom: `1px solid ${TC_BORDER}`,
           }}>
             <EventIcon sx={{ fontSize: 14, color: TC_SUCCESS, opacity: 0.8 }} />
-            <span style={{ color: TC_HEADING, fontSize: '0.78rem', fontWeight: 600, fontFamily: c.font.sans }}>
+            <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, fontFamily: c.font.sans }}>
               {single.summary || '(no title)'}
             </span>
           </Box>
         )}
         <Box sx={{ px: 1.5, py: 1, display: 'flex', flexDirection: 'column', gap: 0.3 }}>
           {start && (
-            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Start</span>
+            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Start</span>
               <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{formatTimestamp(start)}</span>
             </Box>
           )}
           {end && (
-            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>End</span>
+            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>End</span>
               <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{formatTimestamp(end)}</span>
             </Box>
           )}
           {single.location && (
-            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Where</span>
+            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Where</span>
               <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{single.location}</span>
             </Box>
           )}
@@ -54,7 +54,7 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
             <Box sx={{ mt: 0.3, pt: 0.5, borderTop: `1px solid ${TC_BORDER}` }}>
               <pre style={{
                 margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                fontFamily: c.font.sans, fontSize: '0.68rem', lineHeight: 1.5,
+                fontFamily: c.font.sans, fontSize: '0.6875rem', lineHeight: 1.5,
                 color: TC_BODY,
               }}>
                 {single.description.slice(0, 300)}
@@ -78,16 +78,16 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
             transition: 'background-color 0.15s',
             '&:hover': { bgcolor: TC_HOVER },
           }}>
-            <span style={{ color: TC_HEADING, fontSize: '0.72rem', fontWeight: 500, fontFamily: c.font.sans }}>
+            <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 500, fontFamily: c.font.sans }}>
               {item.summary || '(no title)'}
             </span>
-            <span style={{ color: TC_DIM, fontSize: '0.6rem', flexShrink: 0, fontFamily: c.font.mono }}>
+            <span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
               {formatTimestamp(item.start?.dateTime || item.start?.date || item.start)}
             </span>
           </Box>
         ))}
         {items.length > 6 && (
-          <span style={{ color: TC_DIM, fontSize: '0.64rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
+          <span style={{ color: TC_DIM, fontSize: '0.625rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
             +{items.length - 6} more
           </span>
         )}
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx
index 8c408ff2..64c635e6 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx
@@ -18,11 +18,11 @@ export const DriveCard: React.FC<{ data: Record<string, any> }> = ({ data }) =>
       }}>
         <FolderIcon sx={{ fontSize: 16, color: TC_WARNING, opacity: 0.7 }} />
         <Box>
-          <span style={{ color: TC_HEADING, fontSize: '0.73rem', fontWeight: 500, display: 'block', fontFamily: c.font.sans }}>
+          <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 500, display: 'block', fontFamily: c.font.sans }}>
             {single.name}
           </span>
           {single.mimeType && (
-            <span style={{ color: TC_DIM, fontSize: '0.6rem', fontFamily: c.font.mono }}>{single.mimeType}</span>
+            <span style={{ color: TC_DIM, fontSize: '0.625rem', fontFamily: c.font.mono }}>{single.mimeType}</span>
           )}
         </Box>
       </Box>
@@ -40,9 +40,9 @@ export const DriveCard: React.FC<{ data: Record<string, any> }> = ({ data }) =>
             '&:hover': { bgcolor: TC_HOVER },
           }}>
             <FolderIcon sx={{ fontSize: 13, color: TC_WARNING, opacity: 0.5 }} />
-            <span style={{ color: TC_HEADING, fontSize: '0.7rem', fontFamily: c.font.sans }}>{f.name || f.id}</span>
+            <span style={{ color: TC_HEADING, fontSize: '0.6875rem', fontFamily: c.font.sans }}>{f.name || f.id}</span>
             {f.mimeType && (
-              <span style={{ color: TC_DIM, fontSize: '0.58rem', flexShrink: 0, fontFamily: c.font.mono }}>
+              <span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
                 {f.mimeType.split('/').pop()}
               </span>
             )}
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx
index 498e23f7..901ac7e2 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx
@@ -9,7 +9,7 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
   const entries = Object.entries(data).filter(([, v]) => v != null);
 
   if (entries.length === 0)
-    return <span style={{ color: TC_DIM, fontStyle: 'italic', fontSize: '0.7rem', padding: '8px 12px', display: 'block' }}>(empty response)</span>;
+    return <span style={{ color: TC_DIM, fontStyle: 'italic', fontSize: '0.6875rem', padding: '8px 12px', display: 'block' }}>(empty response)</span>;
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.3, px: 1.5, py: 1 }}>
@@ -17,21 +17,21 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
         const isLong = typeof val === 'string' && val.length > 100;
         const isObj = typeof val === 'object';
         return (
-          <Box key={i} sx={{ fontSize: '0.7rem', display: 'flex', gap: 0.75, lineHeight: 1.5 }}>
-            <span style={{ color: TC_DIM, minWidth: 72, flexShrink: 0, fontWeight: 500, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.03em', paddingTop: 1 }}>
+          <Box key={i} sx={{ fontSize: '0.6875rem', display: 'flex', gap: 0.75, lineHeight: 1.5 }}>
+            <span style={{ color: TC_DIM, minWidth: 72, flexShrink: 0, fontWeight: 500, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.03em', paddingTop: 1 }}>
               {key}
             </span>
             {isObj ? (
               <pre style={{
                 margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                color: TC_BODY, fontFamily: c.font.mono, fontSize: '0.68rem',
+                color: TC_BODY, fontFamily: c.font.mono, fontSize: '0.6875rem',
               }}>
                 {JSON.stringify(val, null, 2).slice(0, 500)}
               </pre>
             ) : isLong ? (
               <pre style={{
                 margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                color: TC_BODY, fontFamily: c.font.sans, fontSize: '0.68rem',
+                color: TC_BODY, fontFamily: c.font.sans, fontSize: '0.6875rem',
               }}>
                 {String(val).slice(0, 500)}{String(val).length > 500 ? '…' : ''}
               </pre>
@@ -42,7 +42,7 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
         );
       })}
       {entries.length > 20 && (
-        <span style={{ color: TC_DIM, fontSize: '0.62rem', fontStyle: 'italic' }}>
+        <span style={{ color: TC_DIM, fontSize: '0.625rem', fontStyle: 'italic' }}>
           +{entries.length - 20} more fields
         </span>
       )}
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx
index dd85d653..2600a9f9 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx
@@ -33,22 +33,22 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
               '&:hover': { bgcolor: TC_HOVER },
             }}>
               <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 1 }}>
-                <span style={{ color: TC_HEADING, fontSize: '0.74rem', fontWeight: 600, fontFamily: c.font.sans }}>
+                <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, fontFamily: c.font.sans }}>
                   {m.subject}
                 </span>
                 {m.date && (
-                  <span style={{ color: TC_DIM, fontSize: '0.6rem', flexShrink: 0, fontFamily: c.font.mono }}>
+                  <span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
                     {m.date}
                   </span>
                 )}
               </Box>
               {m.from && (
-                <span style={{ color: TC_MUTED, fontSize: '0.68rem', fontFamily: c.font.sans }}>
+                <span style={{ color: TC_MUTED, fontSize: '0.6875rem', fontFamily: c.font.sans }}>
                   {m.from}
                 </span>
               )}
               {(m.snippet || m.bodyPreview) && (
-                <span style={{ color: TC_BODY, fontSize: '0.68rem', lineHeight: 1.45, fontFamily: c.font.sans }}>
+                <span style={{ color: TC_BODY, fontSize: '0.6875rem', lineHeight: 1.45, fontFamily: c.font.sans }}>
                   {(m.snippet || m.bodyPreview).slice(0, 120)}
                   {(m.snippet || m.bodyPreview).length > 120 ? '…' : ''}
                 </span>
@@ -57,7 +57,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
           );
         })}
         {messages.length > 5 && (
-          <span style={{ color: TC_DIM, fontSize: '0.66rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
+          <span style={{ color: TC_DIM, fontSize: '0.6875rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
             +{messages.length - 5} more
           </span>
         )}
@@ -82,7 +82,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
           ) : (
             <EmailIcon sx={{ fontSize: 14, color: TC_ACCENT, opacity: 0.8 }} />
           )}
-          <span style={{ color: TC_HEADING, fontSize: '0.78rem', fontWeight: 600, flex: 1, fontFamily: c.font.sans }}>
+          <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, flex: 1, fontFamily: c.font.sans }}>
             {email.subject}
           </span>
         </Box>
@@ -92,20 +92,20 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
         {(email.from || email.to || email.date) && (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.3 }}>
             {email.from && (
-              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>From</span>
+              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>From</span>
                 <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.from}</span>
               </Box>
             )}
             {email.to && (
-              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>To</span>
+              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>To</span>
                 <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.to}</span>
               </Box>
             )}
             {email.date && (
-              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Date</span>
+              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Date</span>
                 <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.date}</span>
               </Box>
             )}
@@ -120,7 +120,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
                 bgcolor: `${TC_ACCENT}18`, borderRadius: 0.75,
                 px: 0.6, py: 0.1,
               }}>
-                <span style={{ fontSize: '0.56rem', color: TC_ACCENT, fontFamily: c.font.mono, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{l}</span>
+                <span style={{ fontSize: '0.625rem', color: TC_ACCENT, fontFamily: c.font.mono, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{l}</span>
               </Box>
             ))}
           </Box>
@@ -131,7 +131,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
             mt: 0.25, pt: 0.5, borderTop: `1px solid ${TC_BORDER}`,
             color: TC_BODY,
             fontFamily: c.font.sans,
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             lineHeight: 1.6,
             overflowWrap: 'anywhere',
             wordBreak: 'break-word',
@@ -140,8 +140,8 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
               color: TC_HEADING, fontFamily: c.font.sans,
               mt: 1, mb: 0.5, '&:first-of-type': { mt: 0 },
             },
-            '& h1': { fontSize: '0.82rem' }, '& h2': { fontSize: '0.78rem' },
-            '& h3': { fontSize: '0.74rem' }, '& h4, & h5, & h6': { fontSize: '0.7rem' },
+            '& h1': { fontSize: '0.8125rem' }, '& h2': { fontSize: '0.75rem' },
+            '& h3': { fontSize: '0.75rem' }, '& h4, & h5, & h6': { fontSize: '0.6875rem' },
             '& strong': { color: TC_HEADING, fontWeight: 600 },
             '& em': { fontStyle: 'italic' },
             '& a': { color: TC_ACCENT, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } },
@@ -154,11 +154,11 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
             },
             '& code': {
               bgcolor: `${TC_BORDER}`, px: 0.4, py: 0.15,
-              borderRadius: 0.5, fontSize: '0.65rem', fontFamily: c.font.mono,
+              borderRadius: 0.5, fontSize: '0.625rem', fontFamily: c.font.mono,
             },
             '& pre': {
               bgcolor: `${TC_BORDER}`, borderRadius: 1, p: 1,
-              overflow: 'auto', fontSize: '0.65rem', fontFamily: c.font.mono,
+              overflow: 'auto', fontSize: '0.625rem', fontFamily: c.font.mono,
               m: 0, mb: 0.75,
             },
             '& pre code': { bgcolor: 'transparent', p: 0 },
@@ -183,7 +183,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
                 px: 0.6, py: 0.1,
               }}>
                 <AttachFileIcon sx={{ fontSize: 9, color: TC_WARNING, opacity: 0.7 }} />
-                <span style={{ fontSize: '0.58rem', color: TC_WARNING, fontFamily: c.font.mono }}>
+                <span style={{ fontSize: '0.625rem', color: TC_WARNING, fontFamily: c.font.mono }}>
                   {a.filename || a.name || 'attachment'}
                 </span>
               </Box>
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx
index ca2af76f..9e36c3ed 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx
@@ -18,7 +18,7 @@ export const McpResultCard: React.FC<{ parsed: ParsedMcpResult; compact?: boolea
   if (data.error || data.is_error) {
     return (
       <Box sx={{ p: 1 }}>
-        <span style={{ color: tc.STDERR_COLOR, fontSize: '0.73rem' }}>
+        <span style={{ color: tc.STDERR_COLOR, fontSize: '0.75rem' }}>
           {data.error || data.message || JSON.stringify(data, null, 2)}
         </span>
       </Box>
@@ -40,7 +40,7 @@ export const McpResultCard: React.FC<{ parsed: ParsedMcpResult; compact?: boolea
       <Box sx={{ px: 1.5, py: 1 }}>
         <span style={{
           color: TC_BODY,
-          fontSize: '0.72rem',
+          fontSize: '0.75rem',
           fontFamily: c.font.sans,
           whiteSpace: 'pre-wrap',
           wordBreak: 'break-word',
diff --git a/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx b/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx
index 267301c6..d06f88bf 100644
--- a/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx
+++ b/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx
@@ -55,7 +55,7 @@ export const ElapsedTimer: React.FC<{ startTime: string }> = ({ startTime }) =>
       />
       <Typography
         sx={{
-          fontSize: '0.7rem',
+          fontSize: '0.6875rem',
           fontFamily: c.font.mono,
           color: c.text.tertiary,
           minWidth: 28,
diff --git a/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx b/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx
index 557d0297..02f51c33 100644
--- a/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx
@@ -230,7 +230,7 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
       return (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
           {tool_input.description && (
-            <Typography sx={{ color: c.text.muted, fontSize: '0.78rem' }}>
+            <Typography sx={{ color: c.text.muted, fontSize: '0.75rem' }}>
               {tool_input.description}
             </Typography>
           )}
@@ -242,8 +242,8 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
     case 'Read':
       return (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <DescriptionIcon sx={{ fontSize: '0.9rem', color: c.text.muted }} />
-          <Typography sx={{ color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono }}>
+          <DescriptionIcon sx={{ fontSize: '0.875rem', color: c.text.muted }} />
+          <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono }}>
             {tool_input.file_path || tool_input.path || JSON.stringify(tool_input)}
           </Typography>
         </Box>
@@ -256,8 +256,8 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
       return (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <EditIcon sx={{ fontSize: '0.9rem', color: c.text.muted }} />
-            <Typography sx={{ color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono }}>
+            <EditIcon sx={{ fontSize: '0.875rem', color: c.text.muted }} />
+            <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono }}>
               {path}
             </Typography>
           </Box>
@@ -417,7 +417,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
         <Box sx={{ color: c.accent.primary, display: 'flex', alignItems: 'center' }}>
           <QuestionAnswerIcon sx={{ fontSize: '1rem' }} />
         </Box>
-        <Typography sx={{ color: c.accent.primary, fontWeight: 700, fontSize: '0.85rem' }}>
+        <Typography sx={{ color: c.accent.primary, fontWeight: 700, fontSize: '0.875rem' }}>
           Agent has a question
         </Typography>
       </Box>
@@ -430,11 +430,11 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
           return (
             <Box key={i}>
               {q.header && (
-                <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.25 }}>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.25 }}>
                   {q.header}
                 </Typography>
               )}
-              <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 500, mb: 0.75 }}>
+              <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 500, mb: 0.75 }}>
                 {q.question || q.prompt || q.text || '(question)'}
               </Typography>
               {hasOptions ? (
@@ -450,7 +450,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                           size="small"
                           onClick={() => toggleOption(i, key, multi)}
                           sx={{
-                            fontSize: '0.78rem',
+                            fontSize: '0.75rem',
                             fontWeight: selected ? 600 : 400,
                             cursor: 'pointer',
                             color: selected ? c.accent.primary : c.text.secondary,
@@ -472,7 +472,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                       size="small"
                       onClick={() => toggleOther(i, multi)}
                       sx={{
-                        fontSize: '0.78rem',
+                        fontSize: '0.75rem',
                         fontWeight: isOtherActive ? 600 : 400,
                         fontStyle: 'italic',
                         cursor: 'pointer',
@@ -501,7 +501,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                         mt: 0.25,
                         '& .MuiOutlinedInput-root': {
                           color: c.text.primary,
-                          fontSize: '0.82rem',
+                          fontSize: '0.8125rem',
                           '& fieldset': { borderColor: c.border.medium },
                           '&:hover fieldset': { borderColor: c.border.strong },
                           '&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -522,7 +522,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                   sx={{
                     '& .MuiOutlinedInput-root': {
                       color: c.text.primary,
-                      fontSize: '0.82rem',
+                      fontSize: '0.8125rem',
                       '& fieldset': { borderColor: c.border.medium },
                       '&:hover fieldset': { borderColor: c.border.strong },
                       '&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -544,7 +544,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
             bgcolor: c.accent.primary,
             '&:hover': { bgcolor: c.accent.hover || c.accent.primary, filter: 'brightness(0.9)' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
           }}
         >
           Submit
@@ -557,7 +557,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
             color: c.text.secondary,
             '&:hover': { borderColor: c.text.secondary, bgcolor: `${c.text.secondary}08` },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
           }}
         >
           Dismiss
@@ -600,7 +600,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
           <Box sx={{ color: c.status.warning, display: 'flex', alignItems: 'center' }}>
             {getToolIcon(request.tool_name)}
           </Box>
-          <Typography sx={{ color: c.status.warning, fontWeight: 700, fontSize: '0.85rem' }}>
+          <Typography sx={{ color: c.status.warning, fontWeight: 700, fontSize: '0.875rem' }}>
             {isSensitive ? 'Sensitive file' : 'Permission Required'}
           </Typography>
           <Chip
@@ -608,7 +608,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             size="small"
             sx={{
               height: 20,
-              fontSize: '0.7rem',
+              fontSize: '0.6875rem',
               fontWeight: 600,
               fontFamily: c.font.mono,
               bgcolor: 'rgba(128,92,31,0.15)',
@@ -633,11 +633,11 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
           >
             <WarningAmberIcon sx={{ fontSize: 18, color: c.status.error, mt: 0.1, flexShrink: 0 }} />
             <Box sx={{ flex: 1, minWidth: 0 }}>
-              <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.82rem', lineHeight: 1.3 }}>
+              <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.8125rem', lineHeight: 1.3 }}>
                 This file is sensitive: {request.sensitive_label}
               </Typography>
               {request.sensitive_why && (
-                <Typography sx={{ color: c.text.secondary, fontSize: '0.78rem', lineHeight: 1.35, mt: 0.3 }}>
+                <Typography sx={{ color: c.text.secondary, fontSize: '0.75rem', lineHeight: 1.35, mt: 0.3 }}>
                   {request.sensitive_why} OpenSwarm asks every time because a bad change here is hard to undo. Approve only if you asked for this.
                 </Typography>
               )}
@@ -655,7 +655,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
               mb: 1,
               ml: 0,
               alignItems: 'flex-start',
-              '& .MuiFormControlLabel-label': { fontSize: '0.78rem', color: c.text.secondary, lineHeight: 1.35, pt: 0.5 },
+              '& .MuiFormControlLabel-label': { fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.35, pt: 0.5 },
             }}
             control={
               <Checkbox
@@ -678,7 +678,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             variant="contained"
             startIcon={<CheckIcon />}
             onClick={() => onApprove(request.id, undefined, isSensitive && trustPattern)}
-            sx={{ bgcolor: c.status.success, '&:hover': { bgcolor: '#1e4d15' }, fontWeight: 600, fontSize: '0.8rem' }}
+            sx={{ bgcolor: c.status.success, '&:hover': { bgcolor: '#1e4d15' }, fontWeight: 600, fontSize: '0.8125rem' }}
           >
             Approve
           </Button>
@@ -687,7 +687,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
               variant="outlined"
               startIcon={<DoneAllIcon />}
               onClick={() => onApprove(request.id, undefined, false, true)}
-              sx={{ borderColor: c.status.success, color: c.status.success, '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' }, fontWeight: 600, fontSize: '0.8rem' }}
+              sx={{ borderColor: c.status.success, color: c.status.success, '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' }, fontWeight: 600, fontSize: '0.8125rem' }}
             >
               Always approve
             </Button>
@@ -696,7 +696,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             variant="outlined"
             startIcon={<CloseIcon />}
             onClick={() => onDeny(request.id)}
-            sx={{ borderColor: c.status.error, color: c.status.error, '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' }, fontWeight: 600, fontSize: '0.8rem' }}
+            sx={{ borderColor: c.status.error, color: c.status.error, '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' }, fontWeight: 600, fontSize: '0.8125rem' }}
           >
             Deny
           </Button>
@@ -736,7 +736,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
 
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9rem' }}>
+            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.875rem' }}>
               {displayName}
             </Typography>
             <Chip
@@ -744,7 +744,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
               size="small"
               sx={{
                 height: 18,
-                fontSize: '0.65rem',
+                fontSize: '0.625rem',
                 fontWeight: 500,
                 bgcolor: `${accentColor}12`,
                 color: accentColor,
@@ -757,7 +757,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             <Typography
               sx={{
                 color: c.text.tertiary,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 lineHeight: 1.3,
                 mt: 0.15,
                 overflow: 'hidden',
@@ -786,7 +786,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             <Typography
               sx={{
                 color: c.text.secondary,
-                fontSize: '0.82rem',
+                fontSize: '0.8125rem',
                 flex: 1,
                 minWidth: 0,
                 overflow: 'hidden',
@@ -819,7 +819,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             bgcolor: c.status.success,
             '&:hover': { bgcolor: '#1e4d15' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             textTransform: 'none',
             borderRadius: 1.5,
             px: 2,
@@ -836,7 +836,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             color: c.status.success,
             '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             textTransform: 'none',
             borderRadius: 1.5,
             px: 2,
@@ -853,7 +853,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             color: c.status.error,
             '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             textTransform: 'none',
             borderRadius: 1.5,
             px: 2,
@@ -957,7 +957,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
               bgcolor: c.status.warningBg,
             }}
           >
-            <Typography sx={{ fontSize: '0.85rem', fontWeight: 700, color: c.status.warning, flex: 1 }}>
+            <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.status.warning, flex: 1 }}>
               {nonQuestions.length} pending approvals
             </Typography>
             <Button
@@ -969,7 +969,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
                 bgcolor: c.status.success,
                 '&:hover': { bgcolor: '#1e4d15' },
                 fontWeight: 600,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 borderRadius: 1.5,
                 px: 1.5,
@@ -988,7 +988,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
                 color: c.status.success,
                 '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' },
                 fontWeight: 600,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 borderRadius: 1.5,
                 px: 1.5,
@@ -1007,7 +1007,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
                 color: c.status.error,
                 '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
                 fontWeight: 600,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 borderRadius: 1.5,
                 px: 1.5,
@@ -1087,7 +1087,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
             : getToolIcon(group.toolName)}
         </Box>
 
-        <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
           {group.parsed.isMcp ? group.parsed.displayName : group.toolName}
         </Typography>
 
@@ -1097,7 +1097,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
           sx={{
             height: 20,
             minWidth: 24,
-            fontSize: '0.72rem',
+            fontSize: '0.75rem',
             fontWeight: 700,
             bgcolor: `${accentColor}18`,
             color: accentColor,
@@ -1114,7 +1114,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
               sx={{
                 color: c.status.success,
                 fontWeight: 600,
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 minWidth: 0,
                 px: 1,
@@ -1130,7 +1130,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
               sx={{
                 color: c.status.error,
                 fontWeight: 600,
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 minWidth: 0,
                 px: 1,
diff --git a/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx b/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx
index e506f8c5..eec1b3e0 100644
--- a/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx
@@ -41,7 +41,7 @@ const BranchNavigator: React.FC<Props> = ({ currentIndex, totalBranches, onPrevi
         >
           <ChevronLeftIcon sx={{ fontSize: 16 }} />
         </IconButton>
-        <Typography sx={{ color: c.text.tertiary, fontSize: '0.7rem', minWidth: 28, textAlign: 'center', userSelect: 'none' }}>
+        <Typography sx={{ color: c.text.tertiary, fontSize: '0.6875rem', minWidth: 28, textAlign: 'center', userSelect: 'none' }}>
           {currentIndex + 1} / {totalBranches}
         </Typography>
         <IconButton
diff --git a/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx b/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
index 50944c3c..86d50750 100644
--- a/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
@@ -293,7 +293,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
               <LanguageIcon sx={{ fontSize: 12, color: accentColor, opacity: 0.7 }} />
               <Typography
                 sx={{
-                  fontSize: '0.65rem',
+                  fontSize: '0.625rem',
                   fontWeight: 600,
                   color: accentColor,
                   opacity: 0.8,
@@ -310,7 +310,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
           {!showLabels && entries.length === 0 && session.status === 'running' && (
             <Typography
               sx={{
-                fontSize: '0.7rem',
+                fontSize: '0.6875rem',
                 color: c.text.tertiary,
                 fontStyle: 'italic',
                 fontFamily: c.font.mono,
@@ -347,7 +347,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
                 <PanToolOutlinedIcon sx={{ fontSize: 12, color: '#f59e0b', flexShrink: 0, mt: '2px' }} />
                 <Typography
                   sx={{
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontWeight: 600,
                     color: '#f59e0b',
                     flex: 1,
@@ -428,7 +428,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
         />
         <Typography
           sx={{
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             color: fc.thought,
             lineHeight: 1.45,
             wordBreak: 'break-word',
@@ -448,7 +448,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
         <ActionIcon sx={{ fontSize: 11, color: accentColor, mt: '2px', flexShrink: 0 }} />
         <Typography
           sx={{
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             fontFamily: c.font.mono,
             color: accentColor,
             lineHeight: 1.45,
@@ -466,7 +466,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
       <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'flex-start', minWidth: 0, pl: 1.25 }}>
         <Typography
           sx={{
-            fontSize: '0.65rem',
+            fontSize: '0.625rem',
             fontFamily: c.font.mono,
             color: fc.result,
             lineHeight: 1.45,
@@ -485,7 +485,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
         <ErrorOutlineIcon sx={{ fontSize: 10, color: fc.errorIcon, flexShrink: 0 }} />
         <Typography
           sx={{
-            fontSize: '0.68rem',
+            fontSize: '0.6875rem',
             fontFamily: c.font.mono,
             color: fc.error,
             lineHeight: 1.45,
diff --git a/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx b/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx
index e1226ff9..79d189e1 100644
--- a/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx
@@ -43,11 +43,11 @@ const FeedbackDialog: React.FC<Props> = ({ open, sentiment, sessionId, messageId
       PaperProps={{ sx: { bgcolor: c.bg.elevated, borderRadius: 3, p: 1, minWidth: 420, maxWidth: 480 } }}
     >
       <Box sx={{ p: 2 }}>
-        <Typography sx={{ color: c.text.primary, fontSize: '1.15rem', fontWeight: 600, mb: 2 }}>
+        <Typography sx={{ color: c.text.primary, fontSize: '1.125rem', fontWeight: 600, mb: 2 }}>
           {isUp ? 'Give positive feedback' : 'Give negative feedback'}
         </Typography>
 
-        <Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', mb: 1 }}>
+        <Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', mb: 1 }}>
           Please provide details: (optional)
         </Typography>
         <TextField
@@ -62,7 +62,7 @@ const FeedbackDialog: React.FC<Props> = ({ open, sentiment, sessionId, messageId
             '& .MuiOutlinedInput-root': {
               bgcolor: c.bg.page,
               color: c.text.primary,
-              fontSize: '0.9rem',
+              fontSize: '0.875rem',
               '& fieldset': { borderColor: c.border.medium },
               '&:hover fieldset': { borderColor: c.border.strong },
               '&.Mui-focused fieldset': { borderColor: c.accent.primary },
diff --git a/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx b/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx
index eb69863e..e97cad2e 100644
--- a/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx
@@ -117,7 +117,7 @@ const MessageActionBar: React.FC<Props> = ({
               <Typography
                 sx={{
                   color: c.text.tertiary,
-                  fontSize: '0.7rem',
+                  fontSize: '0.6875rem',
                   minWidth: 28,
                   textAlign: 'center',
                   userSelect: 'none',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx
index a2740e2c..176a3d5c 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx
@@ -19,7 +19,7 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
           overflowX: 'hidden',
           color: c.text.secondary,
           fontFamily: c.font.sans,
-          fontSize: '0.78rem',
+          fontSize: '0.75rem',
           lineHeight: 1.65,
           overflowWrap: 'anywhere',
           wordBreak: 'break-word',
@@ -28,8 +28,8 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
             color: c.text.primary, fontFamily: c.font.sans,
             mt: 1, mb: 0.5, '&:first-of-type': { mt: 0 },
           },
-          '& h1': { fontSize: '0.88rem' }, '& h2': { fontSize: '0.84rem' },
-          '& h3': { fontSize: '0.8rem' }, '& h4': { fontSize: '0.78rem' },
+          '& h1': { fontSize: '0.875rem' }, '& h2': { fontSize: '0.8125rem' },
+          '& h3': { fontSize: '0.8125rem' }, '& h4': { fontSize: '0.75rem' },
           '& strong': { color: c.text.primary, fontWeight: 600 },
           '& a': { color: c.accent.primary, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } },
           '& ul, & ol': { pl: 2, mb: 0.75, mt: 0 },
@@ -41,11 +41,11 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
           },
           '& code': {
             bgcolor: c.bg.secondary, px: 0.4, py: 0.15,
-            borderRadius: 0.5, fontSize: '0.72rem', fontFamily: c.font.mono,
+            borderRadius: 0.5, fontSize: '0.75rem', fontFamily: c.font.mono,
           },
           '& pre': {
             bgcolor: c.bg.secondary, borderRadius: 1, p: 1,
-            overflow: 'auto', fontSize: '0.72rem', fontFamily: c.font.mono,
+            overflow: 'auto', fontSize: '0.75rem', fontFamily: c.font.mono,
             m: 0, mb: 0.75,
           },
           '& pre code': { bgcolor: 'transparent', p: 0 },
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
index 584dd231..5dc598c1 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
@@ -96,7 +96,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
             <Typography
               sx={{
                 color: c.accent.primary,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 fontWeight: 600,
                 flexShrink: 0,
               }}
@@ -119,7 +119,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
               <Typography
                 sx={{
                   color: hideVerbLabel ? c.text.primary : c.text.secondary,
-                  fontSize: '0.74rem',
+                  fontSize: '0.75rem',
                   // Args are data (ids, URLs, params) and read in mono; web rows are SOURCES and read in body text.
                   fontFamily: isWebRow ? undefined : c.font.mono,
                   flex: 1,
@@ -143,7 +143,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 12, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.68rem', fontWeight: 500 }}>denied</Typography>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
             </Box>
           )}
           {result && !isDenied && (
@@ -154,7 +154,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
               {/* Timings are debug detail, not content: ghosted at rest, legible on row hover
                   (LibreChat/ChatGPT show none at all; we keep them one hover away). */}
               {resultElapsedMs != null && (
-                <Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.ghost, transition: 'color 120ms', '.osw-mcp-row:hover &': { color: c.text.tertiary } }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.ghost, transition: 'color 120ms', '.osw-mcp-row:hover &': { color: c.text.tertiary } }}>
                   {formatElapsed(resultElapsedMs)}
                 </Typography>
               )}
@@ -170,7 +170,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           <Typography
             sx={{
               color: c.text.secondary,
-              fontSize: '0.74rem',
+              fontSize: '0.75rem',
               fontFamily: c.font.mono,
               whiteSpace: 'normal',
               overflowWrap: 'anywhere',
@@ -207,7 +207,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           ) : parsedResult ? (
             <pre style={{
               margin: 0, padding: '8px 12px', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-              fontFamily: c.font.mono, fontSize: '0.73rem', lineHeight: 1.5, color: tc.OUTPUT_COLOR,
+              fontFamily: c.font.mono, fontSize: '0.75rem', lineHeight: 1.5, color: tc.OUTPUT_COLOR,
             }}>
               {parsedResult.type === 'text' ? parsedResult.content : ''}
             </pre>
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
index 7db5815a..ac2435f9 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
@@ -72,7 +72,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
           <Typography
             sx={{
               color: c.accent.primary,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               fontWeight: 600,
               flexShrink: 0,
             }}
@@ -94,7 +94,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
             <Typography
               noWrap
               sx={{
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 color: c.text.secondary,
                 fontFamily: c.font.sans,
@@ -112,7 +112,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
               sx={{
                 flex: 1,
                 minWidth: 0,
-                fontSize: '0.73rem',
+                fontSize: '0.75rem',
                 color: c.text.tertiary,
                 fontFamily: c.font.sans,
               }}
@@ -125,7 +125,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>denied</Typography>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
             </Box>
           )}
 
@@ -135,7 +135,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
                 <ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
               )}
               {resultElapsedMs != null && (
-                <Typography sx={{ fontSize: '0.65rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
                   {formatElapsed(resultElapsedMs)}
                 </Typography>
               )}
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
index 7a5aaebb..0d5574e3 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
@@ -131,7 +131,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
             <Typography
               sx={{
                 color: c.text.tertiary,
-                fontSize: '0.65rem',
+                fontSize: '0.625rem',
                 opacity: 0.7,
                 flexShrink: 0,
               }}
@@ -169,7 +169,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>
                 denied
               </Typography>
             </Box>
@@ -180,7 +180,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                 <>
                   <ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
                   {resultSummary && (
-                    <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>
+                    <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>
                       {resultSummary}
                     </Typography>
                   )}
@@ -189,7 +189,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
               {resultElapsedMs != null && (
                 <Typography
                   sx={{
-                    fontSize: '0.65rem',
+                    fontSize: '0.625rem',
                     fontFamily: c.font.mono,
                     color: c.text.tertiary,
                   }}
@@ -234,7 +234,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                 whiteSpace: 'pre-wrap',
                 wordBreak: 'break-word',
                 fontFamily: c.font.mono,
-                fontSize: '0.73rem',
+                fontSize: '0.75rem',
                 lineHeight: 1.5,
               }}
             >
@@ -278,7 +278,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                   whiteSpace: 'pre-wrap',
                   wordBreak: 'break-word',
                   fontFamily: c.font.mono,
-                  fontSize: '0.73rem',
+                  fontSize: '0.75rem',
                   lineHeight: 1.5,
                 }}
               >
@@ -324,7 +324,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                 <Typography
                   sx={{
                     color: c.text.secondary,
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontFamily: c.font.mono,
                     whiteSpace: 'pre-wrap',
                     wordBreak: 'break-word',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
index 7961b851..b18112cb 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
@@ -72,7 +72,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
           <Typography
             sx={{
               color: c.accent.primary,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               fontWeight: 600,
               flexShrink: 0,
             }}
@@ -94,7 +94,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
             <Typography
               noWrap
               sx={{
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 color: c.text.secondary,
                 fontFamily: c.font.sans,
@@ -112,7 +112,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
               sx={{
                 flex: 1,
                 minWidth: 0,
-                fontSize: '0.73rem',
+                fontSize: '0.75rem',
                 color: c.text.tertiary,
                 fontFamily: c.font.sans,
               }}
@@ -125,7 +125,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>denied</Typography>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
             </Box>
           )}
 
@@ -135,12 +135,12 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
                 <ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
               )}
               {resultElapsedMs != null && (
-                <Typography sx={{ fontSize: '0.65rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
                   {formatElapsed(resultElapsedMs)}
                 </Typography>
               )}
               {costLabel && (
-                <Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
                   {costLabel}
                 </Typography>
               )}
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
index 8574aaf5..a6411542 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
@@ -74,7 +74,7 @@ export const SourceFavicons: React.FC<{ domains: string[]; size?: number }> = ({
             border: `1.5px solid ${c.bg.elevated}`,
             bgcolor: c.bg.secondary,
             color: c.text.tertiary,
-            fontSize: '0.6rem',
+            fontSize: '0.625rem',
             fontWeight: 600,
             display: 'inline-flex',
             alignItems: 'center',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
index 2a72de4c..9e855aa5 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
@@ -166,21 +166,21 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             }}
           >
             {webDomains && webDomains.length > 0 && <SourceFavicons domains={webDomains} size={16} />}
-            <Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit' }}>
+            <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit' }}>
               {webGroupLabel ?? `${group.callCount} tool call${group.callCount === 1 ? '' : 's'}`}
             </Typography>
             {!allDone && (
-              <Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
+              <Typography sx={{ fontSize: '0.6875rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
                 {completedCount}/{group.callCount}
               </Typography>
             )}
             {allDone && webDomains && webDomains.length > 0 && (
-              <Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontVariantNumeric: 'tabular-nums' }}>
+              <Typography sx={{ fontSize: '0.6875rem', color: 'inherit', fontVariantNumeric: 'tabular-nums' }}>
                 {webDomains.length} source{webDomains.length === 1 ? '' : 's'}
               </Typography>
             )}
             {deniedCount > 0 && (
-              <Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem' }}>
                 {deniedCount} denied
               </Typography>
             )}
@@ -217,7 +217,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             <Typography
               sx={{
                 color: c.accent.primary,
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 fontWeight: 600,
                 flex: 1,
               }}
@@ -227,7 +227,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
           )}
 
           {deniedCount > 0 && (
-            <Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
+            <Typography sx={{ color: c.status.error, fontSize: '0.6875rem' }}>
               {deniedCount} denied
             </Typography>
           )}
@@ -236,12 +236,12 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
               makes the separate ×N chip redundant. tabular-nums +
               minWidth keep the position stable as digits change. */}
           {allDone && completedCount > 0 && (
-            <Typography sx={{ color: c.status.success, fontSize: '0.68rem', fontVariantNumeric: 'tabular-nums', fontFamily: c.font.mono, minWidth: 36, textAlign: 'right' }}>
+            <Typography sx={{ color: c.status.success, fontSize: '0.6875rem', fontVariantNumeric: 'tabular-nums', fontFamily: c.font.mono, minWidth: 36, textAlign: 'right' }}>
               {completedCount}/{group.callCount}
             </Typography>
           )}
           {!allDone && pendingCount > 0 && (
-            <Typography sx={{ color: c.text.tertiary, fontSize: '0.68rem', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums', minWidth: 36, textAlign: 'right' }}>
+            <Typography sx={{ color: c.text.tertiary, fontSize: '0.6875rem', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums', minWidth: 36, textAlign: 'right' }}>
               {completedCount}/{group.callCount}
             </Typography>
           )}
@@ -282,7 +282,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
               ) : (
                 <Typography
                   key={entry.id}
-                  sx={{ px: 1.5, py: 0.5, fontSize: '0.78rem', color: c.text.tertiary }}
+                  sx={{ px: 1.5, py: 0.5, fontSize: '0.75rem', color: c.text.tertiary }}
                 >
                   {entry.text}
                 </Typography>
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
index ff3fa3ee..da649def 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
@@ -131,7 +131,7 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
             onChange={(e) => setFreeText(e.target.value)}
             placeholder="Or type your own answer..."
             inputProps={{ 'aria-label': 'Type your own answer' }}
-            sx={{ flex: 1, fontSize: '0.8rem' }}
+            sx={{ flex: 1, fontSize: '0.8125rem' }}
           />
           <IconButton type="submit" size="small" disabled={!freeText.trim()} aria-label="Send answer">
             <ArrowUpwardRoundedIcon sx={{ fontSize: 16 }} />
@@ -139,15 +139,15 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
         </Box>
       )}
       {freeTextAnswer !== null && (
-        <Box sx={{ fontSize: '0.78rem', opacity: 0.75, pt: 0.75 }}>
+        <Box sx={{ fontSize: '0.75rem', opacity: 0.75, pt: 0.75 }}>
           &#10003; Answered: {freeTextAnswer}
         </Box>
       )}
       {submitted && pair.result === null && (
-        <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
+        <Box sx={{ fontSize: '0.75rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
       )}
       {orphaned && (
-        <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>
+        <Box sx={{ fontSize: '0.75rem', opacity: 0.55, pt: 0.5 }}>
           No agent is waiting for this answer (the request expired or this is an old transcript).
         </Box>
       )}
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
index 8d980491..309a5fe0 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
@@ -36,14 +36,14 @@ function LinksWidget({ props }: { props: LinksProps }): React.ReactElement {
             '&:hover': { borderColor: c.border.strong },
           }}
         >
-          <Typography sx={{ fontSize: '0.68rem', color: c.text.tertiary, mb: 0.25 }}>
+          <Typography sx={{ fontSize: '0.6875rem', color: c.text.tertiary, mb: 0.25 }}>
             {hostOf(l.url)}
           </Typography>
-          <Typography sx={{ fontSize: '0.88rem', fontWeight: 600, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
             {l.title}
           </Typography>
           {l.description && (
-            <Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
               {l.description}
             </Typography>
           )}
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
index 92b6fd8a..44334ab7 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
@@ -27,11 +27,11 @@ function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
       }}
     >
       {props.title && (
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1.5 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 1.5 }}>
           {props.title}
         </Typography>
       )}
-      <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, mb: 0.5 }}>
+      <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, mb: 0.5 }}>
         {done} of {props.steps.length} complete
       </Typography>
       <Box sx={{ height: 4, borderRadius: 2, bgcolor: c.border.subtle, mb: 1.5, overflow: 'hidden' }}>
@@ -48,7 +48,7 @@ function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
           )}
           <Typography
             sx={{
-              fontSize: '0.82rem',
+              fontSize: '0.8125rem',
               fontWeight: step.status === 'in_progress' ? 600 : 500,
               color: step.status === 'pending' ? c.text.muted : c.text.primary,
               overflow: 'hidden',
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
index 22ddaf15..d069958f 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
@@ -12,7 +12,7 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
   return (
     <Box sx={{ maxWidth: 460 }}>
       {props.title && (
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
           {props.title}
         </Typography>
       )}
@@ -30,10 +30,10 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
               py: 1.25,
             }}
           >
-            <Typography sx={{ fontSize: '0.68rem', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.text.tertiary }}>
+            <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.text.tertiary }}>
               {s.label}
             </Typography>
-            <Typography sx={{ fontSize: '1.15rem', fontWeight: 700, color: c.text.primary, mt: 0.25, fontVariantNumeric: 'tabular-nums' }}>
+            <Typography sx={{ fontSize: '1.125rem', fontWeight: 700, color: c.text.primary, mt: 0.25, fontVariantNumeric: 'tabular-nums' }}>
               {s.value}
             </Typography>
             {s.delta && (
@@ -43,7 +43,7 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
                 ) : (
                   <ArrowUpwardIcon sx={{ fontSize: 12, color: c.status.success }} />
                 )}
-                <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: s.direction === 'down' ? c.status.error : c.status.success }}>
+                <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: s.direction === 'down' ? c.status.error : c.status.success }}>
                   {s.delta}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/pages/Analytics/Analytics.tsx b/frontend/src/app/pages/Analytics/Analytics.tsx
index 7b03defa..4c1377a3 100644
--- a/frontend/src/app/pages/Analytics/Analytics.tsx
+++ b/frontend/src/app/pages/Analytics/Analytics.tsx
@@ -27,10 +27,10 @@ const Analytics: React.FC = () => {
               <circle cx="20" cy="7" r="1.5" fill={c.accent.primary} />
             </svg>
           </Box>
-          <Typography sx={{ color: c.text.primary, fontSize: '1.1rem', fontWeight: 600, mb: 1 }}>
+          <Typography sx={{ color: c.text.primary, fontSize: '1.125rem', fontWeight: 600, mb: 1 }}>
             Your usage
           </Typography>
-          <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.6, mb: 3, maxWidth: 500, mx: 'auto' }}>
+          <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.6, mb: 3, maxWidth: 500, mx: 'auto' }}>
             Usage data is automatically collected: sessions, costs, tool usage, model distribution, and task categories.
             All data is anonymous and can be disabled in Settings.
           </Typography>
@@ -45,10 +45,10 @@ const Analytics: React.FC = () => {
               { label: 'Retention & Funnels', desc: 'User engagement, feature adoption, onboarding flow' },
             ].map((item) => (
               <Box key={item.label} sx={{ p: 2, borderRadius: `${c.radius.md}px`, bgcolor: c.bg.elevated }}>
-                <Typography sx={{ color: c.text.primary, fontSize: '0.82rem', fontWeight: 600, mb: 0.5 }}>
+                <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 600, mb: 0.5 }}>
                   {item.label}
                 </Typography>
-                <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', lineHeight: 1.4 }}>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', lineHeight: 1.4 }}>
                   {item.desc}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/pages/Analytics/PixelChart.tsx b/frontend/src/app/pages/Analytics/PixelChart.tsx
index f889517b..d28ca073 100644
--- a/frontend/src/app/pages/Analytics/PixelChart.tsx
+++ b/frontend/src/app/pages/Analytics/PixelChart.tsx
@@ -360,7 +360,7 @@ const PixelChart: React.FC<PixelChartProps> = ({
               key={xl.idx}
               sx={{
                 color: c.text.ghost,
-                fontSize: '0.58rem',
+                fontSize: '0.625rem',
                 fontFamily: c.font.mono,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -383,7 +383,7 @@ const PixelChart: React.FC<PixelChartProps> = ({
           transition: 'opacity 0.12s',
           bgcolor: c.bg.inverse,
           color: c.text.inverse,
-          fontSize: '0.7rem',
+          fontSize: '0.6875rem',
           fontFamily: c.font.mono,
           fontWeight: 500,
           px: 1,
diff --git a/frontend/src/app/pages/Commands/Commands.tsx b/frontend/src/app/pages/Commands/Commands.tsx
index ea9451ac..445c40a0 100644
--- a/frontend/src/app/pages/Commands/Commands.tsx
+++ b/frontend/src/app/pages/Commands/Commands.tsx
@@ -55,7 +55,7 @@ const SectionHeader: React.FC<{
             size="small"
             sx={{
               height: 20,
-              fontSize: '0.7rem',
+              fontSize: '0.6875rem',
               fontWeight: 600,
               bgcolor: `${c.accent.primary}15`,
               color: c.accent.primary,
@@ -63,7 +63,7 @@ const SectionHeader: React.FC<{
           />
         )}
       </Box>
-      <Typography sx={{ color: c.text.tertiary, fontSize: '0.8rem' }}>{subtitle}</Typography>
+      <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>{subtitle}</Typography>
     </Box>
   </Box>
 );
@@ -230,7 +230,7 @@ export const CommandsContent: React.FC = () => {
               }}
             >
               <TerminalIcon sx={{ fontSize: 36, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.85rem' }}>
+              <Typography sx={{ fontSize: '0.875rem' }}>
                 No slash commands yet. Create skills or modes to see them here.
               </Typography>
             </Box>
@@ -264,7 +264,7 @@ export const CommandsContent: React.FC = () => {
                   <Typography
                     sx={{
                       color: c.text.primary,
-                      fontSize: '0.85rem',
+                      fontSize: '0.875rem',
                       fontFamily: c.font.mono,
                       fontWeight: 500,
                       minWidth: 140,
@@ -277,7 +277,7 @@ export const CommandsContent: React.FC = () => {
                     size="small"
                     sx={{
                       height: 20,
-                      fontSize: '0.65rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
                       bgcolor: cmd.type === 'mode' ? `${modesMap[cmd.id]?.color || c.accent.primary}15`
@@ -289,7 +289,7 @@ export const CommandsContent: React.FC = () => {
                   <Typography
                     sx={{
                       color: c.text.muted,
-                      fontSize: '0.8rem',
+                      fontSize: '0.8125rem',
                       flex: 1,
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
@@ -327,7 +327,7 @@ export const CommandsContent: React.FC = () => {
               }}
             >
               <AlternateEmailIcon sx={{ fontSize: 36, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.85rem' }}>
+              <Typography sx={{ fontSize: '0.875rem' }}>
                 No @ commands yet. Install MCP actions to see them here.
               </Typography>
             </Box>
@@ -367,7 +367,7 @@ export const CommandsContent: React.FC = () => {
                     size="small"
                     sx={{
                       height: 20,
-                      fontSize: '0.65rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
                       bgcolor: cmd.source === 'builtin' ? `${c.accent.primary}12` : cmd.source === 'view' ? '#f472b615' : `${c.status.info}15`,
@@ -377,7 +377,7 @@ export const CommandsContent: React.FC = () => {
                   <Typography
                     sx={{
                       color: c.text.muted,
-                      fontSize: '0.8rem',
+                      fontSize: '0.8125rem',
                       flex: 1,
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index bf1b1799..71b80e15 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -491,7 +491,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                 placeholder="Search apps..."
                 sx={{
                   flex: 1,
-                  fontSize: '0.85rem',
+                  fontSize: '0.875rem',
                   color: c.text.primary,
                   fontFamily: c.font.sans,
                   '& input::placeholder': { color: c.text.ghost, opacity: 1 },
@@ -515,7 +515,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
             >
               {filteredOutputs.length === 0 ? (
                 <Box sx={{ px: 2, py: 3, textAlign: 'center' }}>
-                  <Typography sx={{ fontSize: '0.82rem', color: c.text.muted }}>
+                  <Typography sx={{ fontSize: '0.8125rem', color: c.text.muted }}>
                     {outputList.length === 0 ? 'No apps created yet' : 'No matching apps'}
                   </Typography>
                 </Box>
@@ -572,7 +572,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                     <Box sx={{ flex: 1, minWidth: 0 }}>
                       <Typography
                         sx={{
-                          fontSize: '0.82rem',
+                          fontSize: '0.8125rem',
                           fontWeight: 500,
                           color: c.text.primary,
                           overflow: 'hidden',
@@ -585,7 +585,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                       {output.description && (
                         <Typography
                           sx={{
-                            fontSize: '0.72rem',
+                            fontSize: '0.75rem',
                             color: c.text.muted,
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
index 765889e7..c11c131e 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
@@ -144,7 +144,7 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
         <Typography
           noWrap
           sx={{
-            fontSize: '0.9rem',
+            fontSize: '0.875rem',
             fontWeight: 600,
             color: c.text.primary,
             lineHeight: 1,
@@ -222,12 +222,12 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
                     />
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
+                      sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
                     >
                       {item.name}
                     </Typography>
                     <Typography
-                      sx={{ fontSize: '0.7rem', color: c.text.ghost, flexShrink: 0 }}
+                      sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0 }}
                     >
                       {friendlyStatusLabel(item.status)}
                     </Typography>
@@ -242,7 +242,7 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
                   <ItemRow key={item.id} onClick={() => handleFocus(item.id, item.card)} c={c}>
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
+                      sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
                     >
                       {item.name}
                     </Typography>
@@ -257,13 +257,13 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
                   <ItemRow key={item.id} onClick={() => handleFocus(item.id, item.card)} c={c}>
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
+                      sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
                     >
                       {item.title}
                     </Typography>
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.68rem', color: c.text.ghost, maxWidth: 120, flexShrink: 0 }}
+                      sx={{ fontSize: '0.6875rem', color: c.text.ghost, maxWidth: 120, flexShrink: 0 }}
                     >
                       {cleanUrl(item.url)}
                     </Typography>
@@ -305,10 +305,10 @@ const CategoryGroup: React.FC<{
       }}
     >
       <Box sx={{ display: 'flex', color: c.text.tertiary, '& > svg': { fontSize: 15 } }}>{icon}</Box>
-      <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+      <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
         {label}
       </Typography>
-      <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost }}>
+      <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost }}>
         {count}
       </Typography>
     </Box>
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index c75dccad..96433575 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -1088,14 +1088,14 @@ const AgentCard: React.FC<Props> = ({
             <InlineEditableTitle
               value={displayChatTitle(session)}
               onCommit={(name) => dispatch(renameSession({ sessionId: session.id, name }))}
-              sx={{ flex: '0 1 auto', minWidth: 0, maxWidth: '100%', color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}
+              sx={{ flex: '0 1 auto', minWidth: 0, maxWidth: '100%', color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}
             >
               <Typewriter
                 value={displayChatTitle(session)}
                 enabled={!!session.name && !isLegacyAutoName(session.name)}
               >
                 {(t) => (
-                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {t}
                   </Typography>
                 )}
@@ -1131,7 +1131,7 @@ const AgentCard: React.FC<Props> = ({
                     color: accentColor,
                     border: `1px solid ${accentColor}33`,
                     fontWeight: 600,
-                    fontSize: '0.68rem',
+                    fontSize: '0.6875rem',
                     height: 22,
                     flexShrink: 0,
                     '& .MuiChip-icon': { ml: '4px' },
@@ -1225,7 +1225,7 @@ const AgentCard: React.FC<Props> = ({
                 variant="body2"
                 sx={{
                   color: isStreaming ? c.text.secondary : c.text.muted,
-                  fontSize: '0.8rem',
+                  fontSize: '0.8125rem',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
@@ -1277,7 +1277,7 @@ const AgentCard: React.FC<Props> = ({
                       <Typography
                         sx={{
                           color: c.text.muted,
-                          fontSize: '0.7rem',
+                          fontSize: '0.6875rem',
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
                           whiteSpace: 'nowrap',
@@ -1341,7 +1341,7 @@ const AgentCard: React.FC<Props> = ({
                       bgcolor: c.status.success,
                       '&:hover': { bgcolor: '#1e4d15' },
                       fontWeight: 600,
-                      fontSize: '0.72rem',
+                      fontSize: '0.75rem',
                       textTransform: 'none',
                       borderRadius: 1.5,
                       px: 1.25,
@@ -1366,7 +1366,7 @@ const AgentCard: React.FC<Props> = ({
                       color: c.status.error,
                       '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
                       fontWeight: 600,
-                      fontSize: '0.72rem',
+                      fontSize: '0.75rem',
                       textTransform: 'none',
                       borderRadius: 1.5,
                       px: 1.25,
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx
index fb4f3d36..56c6c0c7 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx
@@ -235,7 +235,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
 
         <Typography
           sx={{
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             fontWeight: 600,
             color: intervention ? '#f59e0b' : 'rgba(255,255,255,0.85)',
             flex: 1,
@@ -293,15 +293,15 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
       {/* Body: intervention prompt OR scrollable action log */}
       {intervention ? (
         <Box sx={{ flex: 1, px: 1.25, py: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
-          <Typography sx={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
             {interventionProblem}
           </Typography>
           {interventionInstruction && (
-            <Typography sx={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.45)', fontStyle: 'italic', lineHeight: 1.4 }}>
+            <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)', fontStyle: 'italic', lineHeight: 1.4 }}>
               {interventionInstruction}
             </Typography>
           )}
-          <Typography sx={{ fontSize: '0.65rem', color: 'rgba(255,255,255,0.3)', lineHeight: 1.4 }}>
+          <Typography sx={{ fontSize: '0.625rem', color: 'rgba(255,255,255,0.3)', lineHeight: 1.4 }}>
             Resolve the issue in the browser above, then click Done.
           </Typography>
           {showSkipInput ? (
@@ -319,7 +319,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                 }}
                 sx={{
                   flex: 1,
-                  fontSize: '0.68rem',
+                  fontSize: '0.6875rem',
                   color: 'rgba(255,255,255,0.8)',
                   bgcolor: 'rgba(255,255,255,0.08)',
                   borderRadius: '6px',
@@ -350,7 +350,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   bgcolor: '#f59e0b',
                   '&:hover': { bgcolor: '#d97706' },
                   textTransform: 'none',
-                  fontSize: '0.68rem',
+                  fontSize: '0.6875rem',
                   fontWeight: 600,
                   borderRadius: '6px',
                   px: 1.5,
@@ -368,7 +368,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   color: 'rgba(255,255,255,0.4)',
                   '&:hover': { color: 'rgba(255,255,255,0.7)' },
                   textTransform: 'none',
-                  fontSize: '0.68rem',
+                  fontSize: '0.6875rem',
                   px: 1,
                   py: 0.4,
                   minWidth: 'auto',
@@ -400,7 +400,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
           }}
         >
           {entries.length === 0 && isRunning && (
-            <Typography sx={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.35)', fontStyle: 'italic' }}>
+            <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.35)', fontStyle: 'italic' }}>
               Starting...
             </Typography>
           )}
@@ -421,7 +421,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   />
                   <Typography
                     sx={{
-                      fontSize: '0.68rem',
+                      fontSize: '0.6875rem',
                       color: 'rgba(255,255,255,0.6)',
                       lineHeight: 1.4,
                       overflow: 'hidden',
@@ -449,7 +449,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   />
                   <Typography
                     sx={{
-                      fontSize: '0.68rem',
+                      fontSize: '0.6875rem',
                       fontFamily: c.font.mono,
                       color: accentColor,
                       lineHeight: 1.4,
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 75f9dbe7..f76b1e67 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1078,7 +1078,7 @@ const BrowserCard: React.FC<Props> = ({
                 <Typography
                   sx={{
                     flex: 1,
-                    fontSize: '0.7rem',
+                    fontSize: '0.6875rem',
                     fontWeight: isActive ? 600 : 400,
                     color: isActive ? CHROME_TEXT : CHROME_TEXT_MUTED,
                     overflow: 'hidden',
@@ -1169,7 +1169,7 @@ const BrowserCard: React.FC<Props> = ({
                   },
                 }}
               />
-              <Typography sx={{ fontSize: '0.65rem', fontWeight: 600, color: accentColor, lineHeight: 1 }}>
+              <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: accentColor, lineHeight: 1 }}>
                 AI
               </Typography>
             </Box>
@@ -1260,7 +1260,7 @@ const BrowserCard: React.FC<Props> = ({
             placeholder="Search Google or enter URL..."
             sx={{
               flex: 1,
-              fontSize: '0.74rem',
+              fontSize: '0.75rem',
               fontFamily: c.font.mono,
               color: CHROME_TEXT,
               py: 0,
@@ -1330,7 +1330,7 @@ const BrowserCard: React.FC<Props> = ({
                   bgcolor: c.bg.surface,
                 }}
               >
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.9rem', px: 2, textAlign: 'center' }}>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.875rem', px: 2, textAlign: 'center' }}>
                   {activeTitle || activeUrl}
                 </Typography>
               </Box>
@@ -1379,14 +1379,14 @@ const BrowserCard: React.FC<Props> = ({
                   bgcolor: c.bg.surface,
                 }}
               >
-                <Typography sx={{ color: c.text.primary, fontSize: '0.95rem', fontWeight: 500 }}>
+                <Typography sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 500 }}>
                   {endingState?.status === 'error' ? 'Task ended with an error.' : 'Task done.'}
                 </Typography>
                 <Button
                   onClick={() => dispatch(cancelBrowserCardEnding(browserId))}
                   sx={{
                     textTransform: 'none',
-                    fontSize: '0.82rem',
+                    fontSize: '0.8125rem',
                     fontWeight: 600,
                     bgcolor: c.accent.primary,
                     color: '#fff',
@@ -1414,7 +1414,7 @@ const BrowserCard: React.FC<Props> = ({
                   bgcolor: c.bg.surface,
                 }}
               >
-                <Typography sx={{ color: c.text.primary, fontSize: '0.95rem', fontWeight: 500 }}>
+                <Typography sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 500 }}>
                   This page stopped responding.
                 </Typography>
                 <Button
@@ -1422,7 +1422,7 @@ const BrowserCard: React.FC<Props> = ({
                   startIcon={<RefreshIcon sx={{ fontSize: '1rem' }} />}
                   sx={{
                     textTransform: 'none',
-                    fontSize: '0.82rem',
+                    fontSize: '0.8125rem',
                     fontWeight: 600,
                     bgcolor: c.accent.primary,
                     color: '#fff',
@@ -1455,7 +1455,7 @@ const BrowserCard: React.FC<Props> = ({
             Passkeys aren't supported
           </DialogTitle>
           <DialogContent sx={{ pb: 1 }}>
-            <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, lineHeight: 1.5 }}>
+            <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.5 }}>
               Sorry, OpenSwarm doesn't support passkeys. Please sign in with a password or another method.
             </Typography>
           </DialogContent>
@@ -1464,7 +1464,7 @@ const BrowserCard: React.FC<Props> = ({
               onClick={() => setPasskeyDialogOpen(false)}
               sx={{
                 textTransform: 'none',
-                fontSize: '0.82rem',
+                fontSize: '0.8125rem',
                 fontWeight: 600,
                 bgcolor: c.accent.primary,
                 color: '#fff',
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index e5bd3ac3..32dbb972 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -121,9 +121,9 @@ const BootingBody: React.FC = () => {
           },
         }}
       />
-      <Typography sx={{ fontSize: '0.85rem', color: c.text.muted }}>Starting preview</Typography>
+      <Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>Starting preview</Typography>
       <Fade in={slow} timeout={400} unmountOnExit>
-        <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, maxWidth: 240 }}>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, maxWidth: 240 }}>
           First run sets the app up, this can take a moment.
         </Typography>
       </Fade>
@@ -642,7 +642,7 @@ const DashboardViewCard: React.FC<Props> = ({
         <Typography
           sx={{
             flex: 1,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             fontWeight: 600,
             color: c.text.primary,
             overflow: 'hidden',
@@ -653,7 +653,7 @@ const DashboardViewCard: React.FC<Props> = ({
           {output.name}
         </Typography>
         {instance > 1 && (
-          <Typography sx={{ fontSize: '0.66rem', fontWeight: 700, color: c.text.ghost, bgcolor: c.bg.page, borderRadius: 999, px: 0.75, py: 0.1, flexShrink: 0 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.ghost, bgcolor: c.bg.page, borderRadius: 999, px: 0.75, py: 0.1, flexShrink: 0 }}>
             #{instance}
           </Typography>
         )}
@@ -845,10 +845,10 @@ const DashboardViewCard: React.FC<Props> = ({
             >
               <RestartAltIcon sx={{ fontSize: 18, color: c.text.muted, flexShrink: 0 }} />
               <Box>
-                <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.2 }}>
+                <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.2 }}>
                   Reset & Hard Reload
                 </Typography>
-                <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, mt: 0.25 }}>
+                <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, mt: 0.25 }}>
                   Restart backend.py + reload preview
                 </Typography>
               </Box>
@@ -895,7 +895,7 @@ const BuildingOverlay: React.FC<{ show: boolean }> = ({ show }) => {
             },
           }}
         />
-        <Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', fontWeight: 500 }}>
+        <Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500 }}>
           Building…
         </Typography>
       </Box>
@@ -993,14 +993,14 @@ const DashboardOutputPreview: React.FC<{
           textAlign: 'center',
         }}
       >
-        <Typography sx={{ color: tokens.text.secondary, fontSize: '0.9rem' }}>
+        <Typography sx={{ color: tokens.text.secondary, fontSize: '0.875rem' }}>
           This app's files are missing.
         </Typography>
         <Typography
           onClick={() => void removeViewCardCleanly(cardKey ?? output.id, dispatch)}
           sx={{
             color: tokens.accent.primary,
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             fontWeight: 600,
             cursor: 'pointer',
             '&:hover': { textDecoration: 'underline' },
@@ -1031,8 +1031,8 @@ const DashboardOutputPreview: React.FC<{
           <Box sx={{ width: 44, height: 44, borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${tokens.accent.primary}1F`, color: tokens.accent.primary }}>
             <VisibilityRoundedIcon sx={{ fontSize: 22 }} />
           </Box>
-          <Typography sx={{ color: tokens.text.primary, fontSize: '0.92rem', fontWeight: 600 }}>{output.name || 'Your app'}</Typography>
-          <Typography sx={{ color: tokens.text.muted, fontSize: '0.78rem' }}>Built for you, click to open</Typography>
+          <Typography sx={{ color: tokens.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>{output.name || 'Your app'}</Typography>
+          <Typography sx={{ color: tokens.text.muted, fontSize: '0.75rem' }}>Built for you, click to open</Typography>
         </Box>
       );
     }
@@ -1042,7 +1042,7 @@ const DashboardOutputPreview: React.FC<{
           <Box component="img" src={suspendSnapshot} alt="" sx={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top left', display: 'block', filter: 'saturate(0.9)' }} />
         ) : (
           <Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Typography sx={{ color: tokens.text.ghost, fontSize: '0.82rem' }}>{output.name || 'App'}</Typography>
+            <Typography sx={{ color: tokens.text.ghost, fontSize: '0.8125rem' }}>{output.name || 'App'}</Typography>
           </Box>
         )}
       </Box>
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 267b3c9f..9f0827a8 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -345,7 +345,7 @@ const NoteCard: React.FC<Props> = ({
           <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
         </Box>
         {isMinimized && (
-          <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {content.trim() || 'Note'}
           </Box>
         )}
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 7dd0fd03..b1caf31e 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -118,7 +118,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
           }}>
           {GROUPS.map((g) => (
             <Box key={g.label} sx={{ mb: 0.75, '&:last-of-type': { mb: 0 } }}>
-              <Box sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(115,114,108,0.65)', textTransform: 'uppercase', mb: 0.5 }}>{g.label}</Box>
+              <Box sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(115,114,108,0.65)', textTransform: 'uppercase', mb: 0.5 }}>{g.label}</Box>
               <Box sx={{ display: 'flex', gap: '7px' }}>
                 {g.zones.map((zone) => {
                   const z = TILE_ZONES[zone];
diff --git a/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx b/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
index db8fab0e..cf0e7b4d 100644
--- a/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
+++ b/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
@@ -140,7 +140,7 @@ const CanvasControls: React.FC<Props> = ({ zoom, actions, onFitToView, onTidy, o
               onClick={onFitToView}
               data-onboarding="canvas-fit-to-view"
               sx={{
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 color: 'rgba(255,255,255,0.78)',
                 minWidth: 38,
diff --git a/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx b/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx
index b961f40c..2445e758 100644
--- a/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx
+++ b/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx
@@ -159,7 +159,7 @@ const CardSearchPalette: React.FC<Props> = ({
       >
         {/* Search input */}
         <Box sx={{ display: 'flex', alignItems: 'center', px: 2, py: 1.5, borderBottom: `1px solid ${c.border.subtle}` }}>
-          <SearchIcon sx={{ fontSize: '1.25rem', color: c.text.muted, mr: 1.5 }} />
+          <SearchIcon sx={{ fontSize: '1.125rem', color: c.text.muted, mr: 1.5 }} />
           <InputBase
             inputRef={inputRef}
             value={query}
@@ -167,7 +167,7 @@ const CardSearchPalette: React.FC<Props> = ({
             placeholder="Search cards..."
             fullWidth
             sx={{
-              fontSize: '0.9375rem',
+              fontSize: '0.875rem',
               fontFamily: c.font.sans,
               color: c.text.primary,
               '& input::placeholder': { color: c.text.muted, opacity: 1 },
diff --git a/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx b/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx
index b251eb8b..c514038f 100644
--- a/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx
+++ b/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx
@@ -72,7 +72,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'left' ? shakingSx('left') : hintSx),
           left: 16, top: '50%', transform: 'translateY(-50%)',
         }}>
-          <ChevronLeftIcon sx={{ fontSize: '1.1rem' }} />
+          <ChevronLeftIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
       {showRight && (
@@ -80,7 +80,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'right' ? shakingSx('right') : hintSx),
           right: 16, top: '50%', transform: 'translateY(-50%)',
         }}>
-          <ChevronRightIcon sx={{ fontSize: '1.1rem' }} />
+          <ChevronRightIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
       {showUp && (
@@ -88,7 +88,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'up' ? shakingSx('up') : hintSx),
           top: 16, left: '50%', transform: 'translateX(-50%)',
         }}>
-          <KeyboardArrowUpIcon sx={{ fontSize: '1.1rem' }} />
+          <KeyboardArrowUpIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
       {showDown && (
@@ -96,7 +96,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'down' ? shakingSx('down') : hintSx),
           bottom: 56, left: '50%', transform: 'translateX(-50%)',
         }}>
-          <KeyboardArrowDownIcon sx={{ fontSize: '1.1rem' }} />
+          <KeyboardArrowDownIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
     </>
diff --git a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
index 9c942d4f..336b95d5 100644
--- a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
@@ -66,7 +66,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
         }}
       >
         <DashboardGlyph name={label} size={15} color="rgba(255,255,255,0.85)" />
-        <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'rgba(255,255,255,0.92)' }}>
+        <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'rgba(255,255,255,0.92)' }}>
           {label}
         </Typography>
       </Box>
@@ -125,7 +125,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
                   </Box>
                   <Typography
                     sx={{
-                      fontSize: '0.82rem',
+                      fontSize: '0.8125rem',
                       fontWeight: done || active ? 500 : 400,
                       color: done || active ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.45)',
                       whiteSpace: 'nowrap',
@@ -162,7 +162,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
             boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
           }}
         >
-          <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.6)' }}>
+          <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.6)' }}>
             Thinking...
           </Typography>
         </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx b/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
index 8a21d6be..b1915553 100644
--- a/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
@@ -36,7 +36,7 @@ function LetterTile({ name }: { name: string }): React.ReactElement {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        fontSize: '1.3rem',
+        fontSize: '1.375rem',
         fontWeight: 700,
         color: 'rgba(255,255,255,0.85)',
       }}
@@ -123,8 +123,8 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mb: 1.5 }}>
-          <Typography sx={{ fontSize: '1.15rem' }}>🐙</Typography>
-          <Typography sx={{ fontSize: '1.05rem', fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>
+          <Typography sx={{ fontSize: '1.125rem' }}>🐙</Typography>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>
             Applications
           </Typography>
         </Box>
@@ -141,7 +141,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
                   borderRadius: 999,
                   flexShrink: 0,
                   cursor: 'pointer',
-                  fontSize: '0.72rem',
+                  fontSize: '0.75rem',
                   fontWeight: 500,
                   color: category === cat ? '#fff' : 'rgba(255,255,255,0.6)',
                   background: category === cat ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)',
@@ -161,7 +161,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
             </Box>
           )}
           {error && (
-            <Typography sx={{ color: 'rgba(255,255,255,0.55)', fontSize: '0.85rem', textAlign: 'center', py: 5 }}>
+            <Typography sx={{ color: 'rgba(255,255,255,0.55)', fontSize: '0.875rem', textAlign: 'center', py: 5 }}>
               Could not read /Applications.
             </Typography>
           )}
@@ -188,7 +188,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
                   ) : (
                     <LetterTile name={name} />
                   )}
-                  <Typography sx={{ fontSize: '0.66rem', color: 'rgba(255,255,255,0.82)', textAlign: 'center', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.82)', textAlign: 'center', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {name}
                   </Typography>
                 </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index 9dd9cb24..ab7c1a13 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -389,11 +389,11 @@ function DesktopDock({
             <Box component="img" src={previewImage} alt="" sx={{ width: '100%', display: 'block' }} />
           ) : (
             <Box sx={{ p: 1.25 }}>
-              <Typography sx={{ color: '#fff', fontSize: '0.78rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              <Typography sx={{ color: '#fff', fontSize: '0.75rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {hoveredEntry.label}
               </Typography>
               {hoveredEntry.snippet && (
-                <Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.7rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                <Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.6875rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                   {hoveredEntry.snippet}
                 </Typography>
               )}
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index 62cedf60..664bfb4b 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -103,7 +103,7 @@ function DesktopSpawnPill({
               }}
             >
               <ItemIcon sx={{ fontSize: 17, color: 'rgba(255,255,255,0.75)' }} />
-              <Typography sx={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.88)', fontWeight: 500 }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.88)', fontWeight: 500 }}>
                 {label}
               </Typography>
             </Box>
@@ -130,7 +130,7 @@ function DesktopSpawnPill({
       >
         <Typography
           sx={{
-            fontSize: '0.82rem',
+            fontSize: '0.8125rem',
             color: 'rgba(255,255,255,0.55)',
             fontWeight: 400,
             userSelect: 'none',
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index 17e044fb..d50be64b 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -40,7 +40,7 @@ function HelpPill(): React.ReactElement {
       }}
       onClick={() => dispatch(addBrowserCard({ url: HELP_URL }))}
     >
-      <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
+      <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
         {recording ? 'Listening' : transcribing ? 'Transcribing' : preparing ? `Preparing ${pct}%` : 'Help'}
       </Typography>
       <Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
diff --git a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
index 4b0a675f..f19f866e 100644
--- a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
@@ -95,7 +95,7 @@ function MinimizedStack({ browserCards, onRestore }: MinimizedStackProps): React
                 ) : (
                   <LanguageIcon sx={{ fontSize: 20, color: '#8a8494' }} />
                 )}
-                <Typography sx={{ fontSize: '0.62rem', color: '#3c3744', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
+                <Typography sx={{ fontSize: '0.625rem', color: '#3c3744', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
                   {activeTab?.title || 'Browser'}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx b/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx
index b3898b6c..1fd61b8d 100644
--- a/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx
+++ b/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx
@@ -159,7 +159,7 @@ const DashboardSelection: React.FC = () => {
             <Typography variant="h4" sx={{ fontWeight: 700, color: c.text.primary }}>
               Dashboards
             </Typography>
-            <Typography sx={{ color: c.text.tertiary, fontSize: '0.9rem', mt: 0.5 }}>
+            <Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem', mt: 0.5 }}>
               Monitor and manage your agents from a single workspace.
             </Typography>
           </Box>
@@ -212,10 +212,10 @@ const DashboardSelection: React.FC = () => {
           </Box>
         ) : dashboards.length === 0 ? (
           <Box sx={{ textAlign: 'center', py: 10, color: c.text.muted }}>
-            <Typography sx={{ fontSize: '1.1rem', mb: 1 }}>
+            <Typography sx={{ fontSize: '1.125rem', mb: 1 }}>
               {search ? 'No dashboards match your search' : 'No dashboards yet'}
             </Typography>
-            <Typography sx={{ fontSize: '0.85rem', color: c.text.tertiary }}>
+            <Typography sx={{ fontSize: '0.875rem', color: c.text.tertiary }}>
               {search ? 'Try a different search term' : 'Create your first dashboard to get started'}
             </Typography>
           </Box>
@@ -320,7 +320,7 @@ const DashboardSelection: React.FC = () => {
                       onClick={(e) => e.stopPropagation()}
                       sx={{
                         '& .MuiOutlinedInput-root': {
-                          fontSize: '0.95rem',
+                          fontSize: '1rem',
                           fontWeight: 600,
                         },
                       }}
@@ -328,7 +328,7 @@ const DashboardSelection: React.FC = () => {
                   ) : (
                     <Typography
                       sx={{
-                        fontSize: '0.95rem',
+                        fontSize: '1rem',
                         fontWeight: 600,
                         color: c.text.primary,
                         overflow: 'hidden',
diff --git a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx b/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
index a012c273..e2515b97 100644
--- a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
+++ b/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
@@ -40,7 +40,7 @@ const SettingsHeader: React.FC<{
           '& .MuiTab-root': {
             minHeight: 30,
             textTransform: 'none',
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             fontWeight: 500,
             color: c.text.muted,
             px: 1.75,
diff --git a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
index 1186b0d4..70a742ef 100644
--- a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
@@ -87,8 +87,8 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
     borderRadius: 2.5,
     maxWidth: 360,
   };
-  const titleSx = { color: c.text.primary, fontSize: '0.95rem', fontWeight: 600, mb: 1 };
-  const bodySx = { color: c.text.secondary, fontSize: '0.8rem', lineHeight: 1.5, mb: 2 };
+  const titleSx = { color: c.text.primary, fontSize: '1rem', fontWeight: 600, mb: 1 };
+  const bodySx = { color: c.text.secondary, fontSize: '0.8125rem', lineHeight: 1.5, mb: 2 };
   const errSx = { color: c.status.error, fontSize: '0.75rem', mb: 1.5 };
   const cancelSx = { color: c.text.secondary, textTransform: 'none', fontWeight: 500 };
   const actionRowSx = { display: 'flex', justifyContent: 'flex-end', gap: 1 };
@@ -98,7 +98,7 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
     color: c.text.secondary,
     borderColor: c.border.medium,
     textTransform: 'none' as const,
-    fontSize: '0.8rem',
+    fontSize: '0.8125rem',
     whiteSpace: 'nowrap' as const,
     '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
   };
@@ -180,7 +180,7 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
             size="small"
             autoFocus
             disabled={busy}
-            sx={{ mb: 2, '& .MuiOutlinedInput-root': { fontSize: '0.8rem' } }}
+            sx={{ mb: 2, '& .MuiOutlinedInput-root': { fontSize: '0.8125rem' } }}
           />
           {err && <Typography sx={errSx}>{err}</Typography>}
           <Box sx={actionRowSx}>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
index 42b4af45..b731ce06 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
@@ -123,7 +123,7 @@ const GeneralAdvanced: React.FC<{
             color: c.text.secondary,
             borderColor: c.border.medium,
             textTransform: 'none',
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             whiteSpace: 'nowrap',
             '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
           }}
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
index d02e9658..9e8b0ef7 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
@@ -72,7 +72,7 @@ const GeneralAgentDefaults: React.FC<{
           sx={{
             '& .MuiOutlinedInput-root': {
               fontFamily: c.font.mono,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               lineHeight: 1.6,
               color: c.text.secondary,
             },
@@ -110,7 +110,7 @@ const GeneralAgentDefaults: React.FC<{
               textTransform: 'none',
               whiteSpace: 'nowrap',
               minWidth: 'auto',
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
             }}
           >
@@ -128,7 +128,7 @@ const GeneralAgentDefaults: React.FC<{
           <Select
             value={form.default_model}
             onChange={(e) => setForm({ ...form, default_model: e.target.value })}
-            sx={{ fontSize: '0.85rem' }}
+            sx={{ fontSize: '0.875rem' }}
             MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
             renderValue={(val) => {
               const m = modelOptions.flat.find((x) => x.value === val);
@@ -136,7 +136,7 @@ const GeneralAgentDefaults: React.FC<{
               return (
                 <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75 }}>
                   <span>{m.label}</span>
-                  <Typography component="span" sx={{ fontSize: '0.65rem', color: c.text.ghost }}>
+                  <Typography component="span" sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
                     · {m.provider}
                   </Typography>
                 </Box>
@@ -171,7 +171,7 @@ const GeneralAgentDefaults: React.FC<{
                     />
                     <Typography
                       sx={{
-                        fontSize: '0.68rem',
+                        fontSize: '0.6875rem',
                         fontWeight: 700,
                         letterSpacing: '0.08em',
                         textTransform: 'uppercase',
@@ -190,7 +190,7 @@ const GeneralAgentDefaults: React.FC<{
                   </Box>
                 </ListSubheader>,
                 ...models.map((m) => (
-                  <MenuItem key={m.value} value={m.value} sx={{ fontSize: '0.85rem', pl: 3 }}>
+                  <MenuItem key={m.value} value={m.value} sx={{ fontSize: '0.875rem', pl: 3 }}>
                     {m.label}
                   </MenuItem>
                 )),
@@ -209,7 +209,7 @@ const GeneralAgentDefaults: React.FC<{
           <Select
             value={form.default_mode}
             onChange={(e) => setForm({ ...form, default_mode: e.target.value })}
-            sx={{ fontSize: '0.85rem' }}
+            sx={{ fontSize: '0.875rem' }}
             MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
           >
             {modesList.map((m) => (
@@ -228,7 +228,7 @@ const GeneralAgentDefaults: React.FC<{
           <Select
             value={form.default_thinking_level}
             onChange={(e) => setForm({ ...form, default_thinking_level: e.target.value as AppSettings['default_thinking_level'] })}
-            sx={{ fontSize: '0.85rem' }}
+            sx={{ fontSize: '0.875rem' }}
             MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
           >
             <MenuItem value="auto">Auto</MenuItem>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 8452d34c..fe817599 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -48,7 +48,7 @@ const GeneralInterface: React.FC<{
               px: 2,
               py: 0.5,
               gap: 0.5,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&.Mui-selected': {
                 bgcolor: `${c.accent.primary}15`,
                 color: c.accent.primary,
@@ -84,7 +84,7 @@ const GeneralInterface: React.FC<{
               textTransform: 'none',
               px: 1.75,
               py: 0.5,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&.Mui-selected': {
                 bgcolor: `${c.accent.primary}15`,
                 color: c.accent.primary,
@@ -118,7 +118,7 @@ const GeneralInterface: React.FC<{
               textTransform: 'none',
               px: 1.75,
               py: 0.5,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&.Mui-selected': {
                 bgcolor: `${c.accent.primary}15`,
                 color: c.accent.primary,
@@ -167,7 +167,7 @@ const GeneralInterface: React.FC<{
             ]}
             sx={{
               color: c.accent.primary,
-              '& .MuiSlider-markLabel': { color: c.text.tertiary, fontSize: '0.7rem' },
+              '& .MuiSlider-markLabel': { color: c.text.tertiary, fontSize: '0.6875rem' },
               '& .MuiSlider-valueLabel': { bgcolor: c.accent.primary },
             }}
           />
@@ -212,11 +212,11 @@ const GeneralInterface: React.FC<{
         >
           <KeyboardIcon sx={{ fontSize: 16, color: recordingShortcut ? c.accent.primary : c.text.tertiary }} />
           {recordingShortcut ? (
-            <Typography sx={{ fontSize: '0.8rem', color: c.accent.primary, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.accent.primary, fontWeight: 500 }}>
               Press shortcut…
             </Typography>
           ) : (
-            <Typography sx={{ fontSize: '0.8rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
               {form.new_agent_shortcut
                 .split('+')
                 .map((p) => {
diff --git a/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx b/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx
index 13783a8f..a2ca42fb 100644
--- a/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx
@@ -87,7 +87,7 @@ const SoftwareUpdateRow: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
                 color: c.text.secondary,
                 borderColor: c.border.medium,
                 textTransform: 'none',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 whiteSpace: 'nowrap',
                 '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
               }}
@@ -105,7 +105,7 @@ const SoftwareUpdateRow: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
                 color: c.accent.primary,
                 borderColor: c.accent.primary,
                 textTransform: 'none',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 whiteSpace: 'nowrap',
                 '&:hover': { bgcolor: `${c.accent.primary}10` },
               }}
@@ -127,7 +127,7 @@ const SoftwareUpdateRow: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
                 '&:hover': { bgcolor: c.accent.pressed },
                 '&.Mui-disabled': { bgcolor: c.accent.primary, color: '#fff', opacity: 0.7 },
                 textTransform: 'none',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 whiteSpace: 'nowrap',
                 borderRadius: 1.5,
               }}
diff --git a/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx b/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx
index c119116a..6568fc72 100644
--- a/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx
@@ -44,7 +44,7 @@ const ApiKeyCard: React.FC<{
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <Typography sx={labelSx}>{config.label}</Typography>
         {value ? (
-          <Typography sx={{ fontSize: '0.6rem', fontWeight: 600, color: c.status.success, bgcolor: `${c.status.success}15`, px: 0.75, py: 0.15, borderRadius: '3px' }}>CONNECTED</Typography>
+          <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: c.status.success, bgcolor: `${c.status.success}15`, px: 0.75, py: 0.15, borderRadius: '3px' }}>CONNECTED</Typography>
         ) : null}
       </Box>
       <Typography sx={{ ...descSx, mb: 1 }}>{config.desc}</Typography>
@@ -72,7 +72,7 @@ const ApiKeyCard: React.FC<{
           href={config.href}
           target="_blank"
           rel="noopener"
-          sx={{ color: c.accent.primary, fontSize: '0.72rem', whiteSpace: 'nowrap', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 0.3, '&:hover': { textDecoration: 'underline' } }}
+          sx={{ color: c.accent.primary, fontSize: '0.75rem', whiteSpace: 'nowrap', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 0.3, '&:hover': { textDecoration: 'underline' } }}
         >
           Get key <OpenInNewIcon sx={{ fontSize: 11 }} />
         </Typography>
diff --git a/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx b/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx
index 3463d5e3..95bdd292 100644
--- a/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx
+++ b/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx
@@ -35,7 +35,7 @@ const CustomProvidersEditor: React.FC<{
           const allReady = readyCount === list.length;
           return (
             <Typography sx={{
-              fontSize: '0.6rem',
+              fontSize: '0.625rem',
               fontWeight: 600,
               color: allReady ? c.status.success : c.status.warning,
               bgcolor: allReady ? `${c.status.success}15` : `${c.status.warning}1F`,
@@ -105,7 +105,7 @@ const CustomProvidersEditor: React.FC<{
             >
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: -0.25 }}>
                 <Typography sx={{
-                  fontSize: '0.62rem',
+                  fontSize: '0.625rem',
                   fontWeight: 700,
                   letterSpacing: '0.05em',
                   textTransform: 'uppercase' as const,
@@ -147,7 +147,7 @@ const CustomProvidersEditor: React.FC<{
                   required
                   error={dupeNameWithEarlier}
                   helperText={dupeNameWithEarlier ? 'Name must be unique' : undefined}
-                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.72rem', color: c.text.tertiary } }}
+                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.75rem', color: c.text.tertiary } }}
                   sx={fieldSx}
                 />
                 <TextField
@@ -158,7 +158,7 @@ const CustomProvidersEditor: React.FC<{
                   placeholder="https://ollama.com/v1"
                   label="Base URL"
                   required
-                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.72rem', color: c.text.tertiary } }}
+                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.75rem', color: c.text.tertiary } }}
                   sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono } }}
                 />
                 <TextField
@@ -169,7 +169,7 @@ const CustomProvidersEditor: React.FC<{
                   fullWidth
                   placeholder="Leave blank for local servers (LM Studio, Ollama, ...)"
                   label="API Key (optional)"
-                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.72rem', color: c.text.tertiary } }}
+                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.75rem', color: c.text.tertiary } }}
                   sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono } }}
                   InputProps={{
                     endAdornment: (
@@ -184,11 +184,11 @@ const CustomProvidersEditor: React.FC<{
               </Box>
 
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mt: 0.25 }}>
-                <Typography sx={{ fontSize: '0.65rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase' as const, letterSpacing: '0.05em' }}>
+                <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase' as const, letterSpacing: '0.05em' }}>
                   Models
                 </Typography>
                 {((cp.models || []).length === 0) ? (
-                  <Typography sx={{ fontSize: '0.7rem', color: c.text.muted, fontStyle: 'italic', px: 0.5 }}>
+                  <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted, fontStyle: 'italic', px: 0.5 }}>
                     No models yet, add the model IDs this endpoint serves.
                   </Typography>
                 ) : (
@@ -200,7 +200,7 @@ const CustomProvidersEditor: React.FC<{
                         size="small"
                         fullWidth
                         placeholder="e.g. gpt-oss:120b"
-                        sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono, fontSize: '0.78rem' } }}
+                        sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono, fontSize: '0.75rem' } }}
                       />
                       <IconButton
                         onClick={() => removeModel(mIdx)}
@@ -224,7 +224,7 @@ const CustomProvidersEditor: React.FC<{
                     mt: 0.25,
                     textTransform: 'none',
                     color: c.accent.primary,
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     minWidth: 'auto',
                     px: 0.75,
                     py: 0.25,
@@ -254,7 +254,7 @@ const CustomProvidersEditor: React.FC<{
             color: c.text.primary,
             borderColor: c.border.medium,
             borderStyle: 'dashed',
-            fontSize: '0.78rem',
+            fontSize: '0.75rem',
             px: 1.5,
             py: 0.6,
             '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}08` },
diff --git a/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx b/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx
index 4707cd93..066eef37 100644
--- a/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx
+++ b/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx
@@ -22,7 +22,7 @@ const ModelsTab: React.FC<{
     <Box sx={{ display: 'flex', flexDirection: 'column', pt: 2.5, pb: 1, gap: 2.5, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
 
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
-        <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
+        <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
           Connect a Subscription
         </Typography>
 
@@ -41,7 +41,7 @@ const ModelsTab: React.FC<{
       </Box>
 
       <Box data-onboarding="settings-api-keys" sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
-        <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600, mt: 1 }}>
+        <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600, mt: 1 }}>
           Or Connect With API Keys
         </Typography>
 
diff --git a/frontend/src/app/pages/Settings/sections/settingsStyles.ts b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
index 42776755..be207670 100644
--- a/frontend/src/app/pages/Settings/sections/settingsStyles.ts
+++ b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
@@ -2,12 +2,12 @@
 export function makeSettingsStyles(c: any) {
   const fieldSx = {
     '& .MuiOutlinedInput-root': {
-      fontSize: '0.85rem',
+      fontSize: '0.875rem',
     },
   };
 
   const sectionSx = {
-    fontSize: '0.7rem',
+    fontSize: '0.6875rem',
     fontWeight: 600,
     letterSpacing: '0.06em',
     textTransform: 'uppercase' as const,
diff --git a/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx b/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx
index 034d0b83..57403f1a 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx
@@ -60,8 +60,8 @@ const AccountCard: React.FC = () => {
   if (!userId && !hasBearer) {
     return (
       <Box sx={{ p: 2, mb: 2, borderRadius: `${c.radius.lg}px`, border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface }}>
-        <Typography sx={{ fontSize: '0.85rem', color: c.text.primary, mb: 0.5 }}>Not signed in</Typography>
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mb: 1.25 }}>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, mb: 0.5 }}>Not signed in</Typography>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 1.25 }}>
           Sign in to sync settings across devices and back up your data.
         </Typography>
         <Button
@@ -70,7 +70,7 @@ const AccountCard: React.FC = () => {
           onClick={() => setSignInOpen(true)}
           sx={{
             textTransform: 'none',
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             borderColor: c.border.medium,
             color: c.text.primary,
             '&:hover': { borderColor: c.accent.primary, color: c.accent.primary, bgcolor: 'transparent' },
@@ -88,14 +88,14 @@ const AccountCard: React.FC = () => {
     <Box sx={{ p: 2, mb: 2, borderRadius: `${c.radius.lg}px`, border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface }}>
       <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
         <Box sx={{ minWidth: 0, flex: 1 }}>
-          <Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {userEmail || 'Signed in'}
           </Typography>
           {methodLabel && (
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, mt: 0.25 }}>{methodLabel}</Typography>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.25 }}>{methodLabel}</Typography>
           )}
           {!userId && hasBearer && (
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, mt: 0.25 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.25 }}>
               Subscription connected. Sign in to also link this device to your account.
             </Typography>
           )}
diff --git a/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx b/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx
index e026f469..eaf583ec 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx
@@ -139,16 +139,16 @@ const OpenSwarmProCard: React.FC = () => {
               <Box sx={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0, bgcolor: c.border.medium }} />
               <Box sx={{ minWidth: 0 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.7 }}>
-                  <Typography sx={{ fontSize: '0.78rem', fontWeight: 600, color: c.text.primary }}>
+                  <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.primary }}>
                     OpenSwarm Pro
                   </Typography>
                   <Box sx={{ px: 0.7, py: 0.15, borderRadius: 999, bgcolor: `${c.accent.primary}12` }}>
-                    <Typography sx={{ fontSize: '0.58rem', color: c.accent.primary, fontWeight: 600, letterSpacing: '0.03em' }}>
+                    <Typography sx={{ fontSize: '0.625rem', color: c.accent.primary, fontWeight: 600, letterSpacing: '0.03em' }}>
                       RECOMMENDED
                     </Typography>
                   </Box>
                 </Box>
-                <Typography noWrap sx={{ fontSize: '0.65rem', color: c.text.muted }}>
+                <Typography noWrap sx={{ fontSize: '0.625rem', color: c.text.muted }}>
                   {copy.desc}
                 </Typography>
               </Box>
@@ -158,7 +158,7 @@ const OpenSwarmProCard: React.FC = () => {
               variant="contained"
               size="small"
               sx={{
-                textTransform: 'none', fontSize: '0.7rem', minWidth: 70,
+                textTransform: 'none', fontSize: '0.6875rem', minWidth: 70,
                 borderRadius: `${c.radius.md}px`,
                 bgcolor: c.accent.primary, boxShadow: 'none',
                 '&:hover': { bgcolor: c.accent.hover, boxShadow: 'none' },
@@ -218,7 +218,7 @@ const OpenSwarmProCard: React.FC = () => {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>
             OpenSwarm Pro
           </Typography>
           <Box
@@ -236,7 +236,7 @@ const OpenSwarmProCard: React.FC = () => {
             px: 1.2, py: 0.6, mb: 1.2, borderRadius: `${c.radius.sm}px`,
             bgcolor: `${c.status.warning}15`, border: `1px solid ${c.status.warning}40`,
           }}>
-            <Typography sx={{ fontSize: '0.72rem', color: c.status.warning, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.status.warning, fontWeight: 500 }}>
               Subscription canceled. You still have access until {expiresLabel || 'the end of the period'}.
             </Typography>
           </Box>
@@ -245,10 +245,10 @@ const OpenSwarmProCard: React.FC = () => {
         {/* Usage bar; percentage only, no raw counts. */}
         <Box sx={{ mb: 1.2 }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.5 }}>
-            <Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, fontWeight: 500 }}>
               Current usage
             </Typography>
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.muted }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>
               {pct}% used
             </Typography>
           </Box>
@@ -266,7 +266,7 @@ const OpenSwarmProCard: React.FC = () => {
             }}
           />
           {windowEndsAt && (
-            <Typography sx={{ fontSize: '0.68rem', color: c.text.muted, mt: 0.4 }}>
+            <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted, mt: 0.4 }}>
               Resets {(() => {
                 const diff = windowEndsAt - Date.now();
                 if (diff <= 0) return 'soon';
@@ -279,7 +279,7 @@ const OpenSwarmProCard: React.FC = () => {
           )}
         </Box>
         {expiresLabel && !isCanceled && (
-          <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, mb: 1.5 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 1.5 }}>
             Renews on {expiresLabel}
           </Typography>
         )}
@@ -289,7 +289,7 @@ const OpenSwarmProCard: React.FC = () => {
               onClick={() => setPickerOpen(true)}
               size="small"
               variant="contained"
-              sx={{ textTransform: 'none', fontSize: '0.78rem', borderRadius: `${c.radius.md}px` }}
+              sx={{ textTransform: 'none', fontSize: '0.75rem', borderRadius: `${c.radius.md}px` }}
             >
               Resubscribe
             </Button>
@@ -299,7 +299,7 @@ const OpenSwarmProCard: React.FC = () => {
             disabled={managing}
             size="small"
             variant={isCanceled ? 'outlined' : 'contained'}
-            sx={{ textTransform: 'none', fontSize: '0.78rem', borderRadius: `${c.radius.md}px` }}
+            sx={{ textTransform: 'none', fontSize: '0.75rem', borderRadius: `${c.radius.md}px` }}
           >
             {managing ? 'Opening…' : 'Manage in Stripe'}
           </Button>
diff --git a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx
index 0de01354..5aaba333 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx
@@ -37,15 +37,15 @@ const SubscriptionCard: React.FC<{ provider: SubscriptionProvider; connected: bo
             } : {}),
           }} />
           <Box sx={{ minWidth: 0 }}>
-            <Typography sx={{ fontSize: '0.78rem', fontWeight: 600, color: c.text.primary }}>{provider.name}</Typography>
-            <Typography noWrap sx={{ fontSize: '0.65rem', color: connecting ? c.accent.primary : c.text.muted, transition: 'color 0.2s ease' }}>
+            <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.primary }}>{provider.name}</Typography>
+            <Typography noWrap sx={{ fontSize: '0.625rem', color: connecting ? c.accent.primary : c.text.muted, transition: 'color 0.2s ease' }}>
               {connecting ? 'Waiting for authorization...' : provider.desc}
             </Typography>
           </Box>
         </Box>
 
         {isPreview ? (
-          <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontStyle: 'italic', flexShrink: 0 }}>
+          <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontStyle: 'italic', flexShrink: 0 }}>
             Coming soon
           </Typography>
         ) : connected ? (
@@ -53,26 +53,26 @@ const SubscriptionCard: React.FC<{ provider: SubscriptionProvider; connected: bo
             <CircularProgress size={14} sx={{ color: c.text.ghost }} />
           ) : (
             <Box sx={{ position: 'relative', flexShrink: 0, minWidth: 72, height: 16 }}>
-              <Typography className="sub-rest" sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.68rem', fontWeight: 500, color: c.status.success, transition: 'opacity 0.18s ease' }}>
+              <Typography className="sub-rest" sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.6875rem', fontWeight: 500, color: c.status.success, transition: 'opacity 0.18s ease' }}>
                 Connected
               </Typography>
-              <Typography className="sub-undo" onClick={onDisconnect} sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.68rem', color: c.text.tertiary, cursor: 'pointer', opacity: 0, pointerEvents: 'none', transition: 'opacity 0.18s ease', '&:hover': { color: c.status.error } }}>
+              <Typography className="sub-undo" onClick={onDisconnect} sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.6875rem', color: c.text.tertiary, cursor: 'pointer', opacity: 0, pointerEvents: 'none', transition: 'opacity 0.18s ease', '&:hover': { color: c.status.error } }}>
                 Disconnect
               </Typography>
             </Box>
           )
         ) : connecting && userCode ? (
           <Box sx={{ textAlign: 'right', flexShrink: 0 }}>
-            <Typography sx={{ fontSize: '0.68rem', color: c.text.muted }}>Enter code:</Typography>
-            <Typography sx={{ fontSize: '0.85rem', fontWeight: 700, color: c.accent.primary, fontFamily: c.font.mono, letterSpacing: '0.1em' }}>{userCode}</Typography>
+            <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted }}>Enter code:</Typography>
+            <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.accent.primary, fontFamily: c.font.mono, letterSpacing: '0.1em' }}>{userCode}</Typography>
           </Box>
         ) : connecting ? (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8, flexShrink: 0 }}>
             <CircularProgress size={14} sx={{ color: c.accent.primary }} />
-            <Typography sx={{ fontSize: '0.68rem', color: c.accent.primary }}>Connecting...</Typography>
+            <Typography sx={{ fontSize: '0.6875rem', color: c.accent.primary }}>Connecting...</Typography>
           </Box>
         ) : (
-          <Button onClick={onConnect} variant="outlined" size="small" sx={{ textTransform: 'none', fontSize: '0.7rem', fontWeight: 600, color: c.text.primary, borderColor: c.border.medium, borderRadius: `${c.radius.sm}px`, minWidth: 72, flexShrink: 0, '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}0a` }, transition: 'all 0.2s ease' }}>
+          <Button onClick={onConnect} variant="outlined" size="small" sx={{ textTransform: 'none', fontSize: '0.6875rem', fontWeight: 600, color: c.text.primary, borderColor: c.border.medium, borderRadius: `${c.radius.sm}px`, minWidth: 72, flexShrink: 0, '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}0a` }, transition: 'all 0.2s ease' }}>
             Connect
           </Button>
         )}
diff --git a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx
index 200dc5e9..8e5e1976 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx
@@ -169,10 +169,10 @@ const SubscriptionCards: React.FC = () => {
     return (
       <Box sx={{ p: 2, borderRadius: `${c.radius.md}px`, border: `1px solid ${c.border.subtle}`, textAlign: 'center' }}>
         <CircularProgress size={18} sx={{ color: c.text.ghost, mb: 1 }} />
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mb: 0.5 }}>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 0.5 }}>
           Starting subscription service...
         </Typography>
-        <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost }}>
+        <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
           This connects your existing AI subscriptions. If this doesn't load, make sure Node.js is installed.
         </Typography>
       </Box>
@@ -187,14 +187,14 @@ const SubscriptionCards: React.FC = () => {
           borderRadius: `${c.radius.md}px`, border: `1px solid ${c.border.subtle}`,
           bgcolor: c.bg.surface,
         }}>
-          <Typography sx={{ fontSize: '0.72rem', color: c.text.secondary, flex: 1, lineHeight: 1.4 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, flex: 1, lineHeight: 1.4 }}>
             {connectError}
           </Typography>
           <Box
             role="button"
             aria-label="Dismiss"
             onClick={() => setConnectError(null)}
-            sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '0.9rem', lineHeight: 1, px: 0.3, '&:hover': { color: c.text.secondary } }}
+            sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '0.875rem', lineHeight: 1, px: 0.3, '&:hover': { color: c.text.secondary } }}
           >
             ×
           </Box>
diff --git a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
index a82b57fb..15c8e0a8 100644
--- a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
+++ b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
@@ -94,9 +94,9 @@ const UsageStats: React.FC = () => {
     bgcolor: c.bg.elevated,
     border: `1px solid ${c.border.subtle}`,
   };
-  const labelSx = { fontSize: '0.58rem', fontWeight: 700, color: c.text.ghost, textTransform: 'uppercase' as const, letterSpacing: '0.06em', mb: 0.25 };
-  const valueSx = { fontSize: '1.05rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.2 };
-  const subSx = { fontSize: '0.62rem', color: c.text.tertiary, mt: 0.25 };
+  const labelSx = { fontSize: '0.625rem', fontWeight: 700, color: c.text.ghost, textTransform: 'uppercase' as const, letterSpacing: '0.06em', mb: 0.25 };
+  const valueSx = { fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.2 };
+  const subSx = { fontSize: '0.625rem', color: c.text.tertiary, mt: 0.25 };
 
   const modelEntries = Object.entries(stats.models_used || {}).sort((a: any, b: any) => b[1] - a[1]) as [string, number][];
   const providerEntries = Object.entries(stats.providers_used || {}).sort((a: any, b: any) => b[1] - a[1]) as [string, number][];
@@ -140,8 +140,8 @@ const UsageStats: React.FC = () => {
           bgcolor: `${c.accent.primary}0F`, border: `1px solid ${c.accent.primary}26`,
           display: 'flex', alignItems: 'center', gap: 1,
         }}>
-          <Typography sx={{ fontSize: '0.95rem', lineHeight: 1 }}>✨</Typography>
-          <Typography sx={{ fontSize: '0.74rem', color: c.text.secondary, fontStyle: 'italic', lineHeight: 1.4 }}>
+          <Typography sx={{ fontSize: '1rem', lineHeight: 1 }}>✨</Typography>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, fontStyle: 'italic', lineHeight: 1.4 }}>
             {savingsQuip}
           </Typography>
         </Box>
@@ -220,8 +220,8 @@ const UsageStats: React.FC = () => {
             return (
               <Box key={model} sx={{ mb: 1 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0 }}>
-                  <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, fontWeight: 500 }}>{model}</Typography>
-                  <Typography sx={{ fontSize: '0.68rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, fontWeight: 500 }}>{model}</Typography>
+                  <Typography sx={{ fontSize: '0.6875rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
                     {count} ({pct}%)
                   </Typography>
                 </Box>
@@ -239,8 +239,8 @@ const UsageStats: React.FC = () => {
             return (
               <Box key={tool} sx={{ mb: 1 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0 }}>
-                  <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, fontWeight: 500 }}>{shortName}</Typography>
-                  <Typography sx={{ fontSize: '0.62rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, fontWeight: 500 }}>{shortName}</Typography>
+                  <Typography sx={{ fontSize: '0.625rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
                     {count} call{count !== 1 ? 's' : ''} ({pct}%)
                   </Typography>
                 </Box>
diff --git a/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx b/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx
index d018ba60..22f6fc49 100644
--- a/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx
+++ b/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx
@@ -113,12 +113,12 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
       PaperProps={{ sx: { bgcolor: c.bg.secondary, borderRadius: `${c.radius.md}px` } }}>
       <DialogTitle sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 700, pb: 0.5 }}>
         Browse community skills
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.tertiary, fontWeight: 400 }}>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, fontWeight: 400 }}>
           From the skills.sh registry. Community-published and unvetted; you'll see exactly what installs before it lands.
         </Typography>
       </DialogTitle>
       <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, minHeight: 360 }}>
-        {error && <Alert severity="error" sx={{ fontSize: '0.8rem' }}>{error}</Alert>}
+        {error && <Alert severity="error" sx={{ fontSize: '0.8125rem' }}>{error}</Alert>}
 
         {!selected && (
           <>
@@ -132,7 +132,7 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
             />
             {loading && <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}><CircularProgress size={22} /></Box>}
             {!loading && results.length === 0 && (
-              <Typography sx={{ fontSize: '0.82rem', color: c.text.tertiary, textAlign: 'center', py: 3 }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: c.text.tertiary, textAlign: 'center', py: 3 }}>
                 {query.trim() ? 'No matching skills.' : 'Type to search the community registry.'}
               </Typography>
             )}
@@ -145,11 +145,11 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
                   '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}08` },
                 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
-                  <Typography sx={{ fontSize: '0.86rem', fontWeight: 600, color: c.text.primary }}>{s.name}</Typography>
+                  <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>{s.name}</Typography>
                   <Chip label={`${s.installs.toLocaleString()} installs`} size="small"
-                    sx={{ height: 18, fontSize: '0.66rem', bgcolor: c.bg.elevated, color: c.text.tertiary }} />
+                    sx={{ height: 18, fontSize: '0.6875rem', bgcolor: c.bg.elevated, color: c.text.tertiary }} />
                 </Box>
-                <Typography sx={{ fontSize: '0.74rem', color: c.text.tertiary, fontFamily: c.font.mono }}>{s.source}</Typography>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, fontFamily: c.font.mono }}>{s.source}</Typography>
               </Box>
             ))}
           </>
@@ -158,46 +158,46 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
         {selected && (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
             <Button onClick={() => { previewSeq.current++; setSelected(null); setDisclosure(null); }} size="small"
-              sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.text.tertiary, fontSize: '0.78rem' }}>
+              sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.text.tertiary, fontSize: '0.75rem' }}>
               ← Back to results
             </Button>
             {busy && !disclosure && <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}><CircularProgress size={22} /></Box>}
             {disclosure && (
               <>
-                <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary }}>{disclosure.name}</Typography>
+                <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>{disclosure.name}</Typography>
                 {disclosure.description && (
-                  <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary }}>{disclosure.description}</Typography>
+                  <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary }}>{disclosure.description}</Typography>
                 )}
                 <Box
                   component="a" href={disclosure.repo_url} target="_blank" rel="noreferrer"
-                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, fontSize: '0.76rem', color: c.accent.primary, textDecoration: 'none', fontFamily: c.font.mono }}>
+                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, fontSize: '0.75rem', color: c.accent.primary, textDecoration: 'none', fontFamily: c.font.mono }}>
                   {selected.source} <OpenInNewIcon sx={{ fontSize: 13 }} />
                 </Box>
 
                 {/* The real risk for an agent platform: SKILL.md is injected as instructions the
                     agent follows, with its full tool surface. Say that plainly, not just "scripts". */}
-                <Alert severity="info" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.78rem', py: 0 }}>
+                <Alert severity="info" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.75rem', py: 0 }}>
                   This is an unvetted community skill. Its SKILL.md becomes instructions your agent will follow, and it can use your agent's tools (files, browser, settings). Only install from a source you trust, read it below first.
                 </Alert>
 
                 {disclosure.secret_findings.length > 0 && (
-                  <Alert severity="error" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.78rem', py: 0 }}>
+                  <Alert severity="error" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.75rem', py: 0 }}>
                     {disclosure.secret_findings.length} file{disclosure.secret_findings.length === 1 ? '' : 's'} contain secret-shaped text ({disclosure.secret_findings.slice(0, 3).join(', ')}{disclosure.secret_findings.length > 3 ? '…' : ''}). A trustworthy skill shouldn't ship credentials; treat this as a red flag.
                   </Alert>
                 )}
 
                 {disclosure.has_scripts && (
-                  <Alert severity="warning" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.78rem', py: 0 }}>
+                  <Alert severity="warning" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.75rem', py: 0 }}>
                     Includes {disclosure.scripts.length} script file{disclosure.scripts.length === 1 ? '' : 's'} that can run code when an agent uses this skill. Installing only writes the files; nothing runs until an agent does, and that still goes through normal command approval.
                   </Alert>
                 )}
 
-                <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, mt: 0.5 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, mt: 0.5 }}>
                   {disclosure.files.length} file{disclosure.files.length === 1 ? '' : 's'} will be installed:
                 </Typography>
                 <Box sx={{ maxHeight: 120, overflow: 'auto', border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.sm}px`, p: 1 }}>
                   {disclosure.files.map((f) => (
-                    <Typography key={f} sx={{ fontSize: '0.74rem', fontFamily: c.font.mono, color: disclosure.scripts.includes(f) ? c.status.warning : c.text.secondary }}>
+                    <Typography key={f} sx={{ fontSize: '0.75rem', fontFamily: c.font.mono, color: disclosure.scripts.includes(f) ? c.status.warning : c.text.secondary }}>
                       {disclosure.scripts.includes(f) ? '⚙ ' : ''}{f}
                     </Typography>
                   ))}
diff --git a/frontend/src/app/pages/Skills/SkillBuilderChat.tsx b/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
index f528c818..ff5599c9 100644
--- a/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
+++ b/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
@@ -357,7 +357,7 @@ const SkillBuilderChat: React.FC<SkillBuilderChatProps> = ({ onSkillPreview, onS
         }}
       >
         <AutoFixHighIcon sx={{ fontSize: 18, color: c.accent.primary }} />
-        <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
           Skill Builder
         </Typography>
 
@@ -372,7 +372,7 @@ const SkillBuilderChat: React.FC<SkillBuilderChatProps> = ({ onSkillPreview, onS
               bgcolor: c.accent.primary,
               '&:hover': { bgcolor: c.accent.pressed },
               textTransform: 'none',
-              fontSize: '0.72rem',
+              fontSize: '0.75rem',
               fontWeight: 600,
               px: 1.5,
               py: 0.25,
@@ -421,7 +421,7 @@ const SkillBuilderChat: React.FC<SkillBuilderChatProps> = ({ onSkillPreview, onS
           />
         ) : (
           <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.85rem' }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.875rem' }}>
               Initializing skill builder...
             </Typography>
           </Box>
diff --git a/frontend/src/app/pages/Skills/Skills.tsx b/frontend/src/app/pages/Skills/Skills.tsx
index 8399a2a9..15758616 100644
--- a/frontend/src/app/pages/Skills/Skills.tsx
+++ b/frontend/src/app/pages/Skills/Skills.tsx
@@ -253,7 +253,7 @@ const Skills: React.FC = () => {
           sx={{
             '& .MuiToggleButton-root': {
               color: c.text.tertiary, border: `1px solid ${c.border.medium}`,
-              textTransform: 'none', fontSize: '0.74rem', py: 0.25, px: 1.2, lineHeight: 1.4,
+              textTransform: 'none', fontSize: '0.75rem', py: 0.25, px: 1.2, lineHeight: 1.4,
               '&.Mui-selected': { bgcolor: c.bg.secondary, color: c.text.primary, borderColor: c.border.strong },
               '&:hover': { bgcolor: 'rgba(0,0,0,0.03)' },
             },
@@ -274,7 +274,7 @@ const Skills: React.FC = () => {
           '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 3 },
         }}>
           <Typography component="pre" sx={{
-            color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono,
+            color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono,
             whiteSpace: 'pre-wrap', wordBreak: 'break-word', m: 0, lineHeight: 1.65,
           }}>
             {content}
@@ -288,12 +288,12 @@ const Skills: React.FC = () => {
           overflow: 'auto',
           '&::-webkit-scrollbar': { width: 5 },
           '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 3 },
-          '& h1': { fontSize: '1.3rem', fontWeight: 700, color: c.text.primary, mt: 0, mb: 1.5, fontFamily: c.font.sans },
-          '& h2': { fontSize: '1.1rem', fontWeight: 600, color: c.text.primary, mt: 2, mb: 1, fontFamily: c.font.sans },
-          '& h3': { fontSize: '0.95rem', fontWeight: 600, color: c.text.primary, mt: 1.5, mb: 0.75, fontFamily: c.font.sans },
-          '& p': { fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.7, mb: 1.5 },
-          '& ul, & ol': { pl: 2.5, mb: 1.5, '& li': { fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.7, mb: 0.5 } },
-          '& code': { fontFamily: c.font.mono, fontSize: '0.82rem', bgcolor: 'rgba(0,0,0,0.04)', px: 0.5, py: 0.15, borderRadius: `${c.radius.xs}px` },
+          '& h1': { fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, mt: 0, mb: 1.5, fontFamily: c.font.sans },
+          '& h2': { fontSize: '1.125rem', fontWeight: 600, color: c.text.primary, mt: 2, mb: 1, fontFamily: c.font.sans },
+          '& h3': { fontSize: '1rem', fontWeight: 600, color: c.text.primary, mt: 1.5, mb: 0.75, fontFamily: c.font.sans },
+          '& p': { fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.7, mb: 1.5 },
+          '& ul, & ol': { pl: 2.5, mb: 1.5, '& li': { fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.7, mb: 0.5 } },
+          '& code': { fontFamily: c.font.mono, fontSize: '0.8125rem', bgcolor: 'rgba(0,0,0,0.04)', px: 0.5, py: 0.15, borderRadius: `${c.radius.xs}px` },
           '& pre': { bgcolor: c.bg.secondary, borderRadius: `${c.radius.sm}px`, p: 2, mb: 1.5, overflow: 'auto',
             '& code': { bgcolor: 'transparent', color: c.text.secondary, px: 0, py: 0 },
           },
@@ -329,7 +329,7 @@ const Skills: React.FC = () => {
       {icon ?? <DescriptionIcon sx={{ fontSize: 15, color: c.text.tertiary, flexShrink: 0 }} />}
       <Typography
         sx={{
-          fontSize: '0.82rem', color: selected ? c.text.primary : c.text.secondary,
+          fontSize: '0.8125rem', color: selected ? c.text.primary : c.text.secondary,
           fontWeight: selected ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
         }}
       >
@@ -348,7 +348,7 @@ const Skills: React.FC = () => {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 2, pt: 2, pb: 1 }}>
-          <Typography sx={{ fontSize: '0.92rem', fontWeight: 700, color: c.text.primary }}>Skills</Typography>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.text.primary }}>Skills</Typography>
           <Box sx={{ display: 'flex', gap: 0.25 }}>
             <Tooltip title="Import .swarm">
               <IconButton
@@ -392,7 +392,7 @@ const Skills: React.FC = () => {
             fullWidth
             sx={{
               textTransform: 'none',
-              fontSize: '0.86rem',
+              fontSize: '0.875rem',
               fontWeight: 500,
               color: c.accent.primary,
               justifyContent: 'center',
@@ -426,7 +426,7 @@ const Skills: React.FC = () => {
               }}
               sx={{
                 '& .MuiOutlinedInput-root': {
-                  bgcolor: c.bg.surface, borderRadius: `${c.radius.sm}px`, fontSize: '0.82rem',
+                  bgcolor: c.bg.surface, borderRadius: `${c.radius.sm}px`, fontSize: '0.8125rem',
                   '& fieldset': { borderColor: c.border.medium },
                 },
               }}
@@ -454,10 +454,10 @@ const Skills: React.FC = () => {
                 {collapsedCats['__local']
                   ? <KeyboardArrowRightIcon sx={{ fontSize: 16, color: c.text.ghost }} />
                   : <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost }} />}
-                <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                   My Skills
                 </Typography>
-                <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost, ml: 0.5 }}>({filteredLocal.length})</Typography>
+                <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, ml: 0.5 }}>({filteredLocal.length})</Typography>
               </Box>
               <Collapse in={!collapsedCats['__local']} timeout={0} unmountOnExit>
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25, mt: 0.25 }}>
@@ -500,10 +500,10 @@ const Skills: React.FC = () => {
                     {isCollapsed
                       ? <KeyboardArrowRightIcon sx={{ fontSize: 16, color: c.text.ghost }} />
                       : <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost }} />}
-                    <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                    <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                       {cat}
                     </Typography>
-                    <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost, ml: 0.5 }}>({group.length})</Typography>
+                    <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, ml: 0.5 }}>({group.length})</Typography>
                   </Box>
                   <Collapse in={!isCollapsed} timeout={0} unmountOnExit>
                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25, mt: 0.25 }}>
@@ -532,7 +532,7 @@ const Skills: React.FC = () => {
           <Box sx={{ p: 4, pb: 3, maxWidth: 1100, display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5, flexShrink: 0 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                <Typography sx={{ fontSize: '1.4rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
+                <Typography sx={{ fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
                   {builderPreview.name || 'Untitled Skill'}
                 </Typography>
                 <Chip
@@ -542,7 +542,7 @@ const Skills: React.FC = () => {
                     bgcolor: `${c.accent.primary}15`,
                     color: c.accent.primary,
                     fontWeight: 600,
-                    fontSize: '0.68rem',
+                    fontSize: '0.6875rem',
                     height: 22,
                   }}
                 />
@@ -557,22 +557,22 @@ const Skills: React.FC = () => {
                   size="small"
                   sx={{
                     bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary,
-                    fontWeight: 500, fontSize: '0.78rem', height: 26,
+                    fontWeight: 500, fontSize: '0.75rem', height: 26,
                   }}
                 />
               </Box>
             )}
 
             <Box sx={{ mb: 1, flexShrink: 0 }}>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>
                 Generated by <strong style={{ color: c.accent.primary, fontWeight: 600 }}>Skill Builder</strong>
               </Typography>
             </Box>
 
             {builderPreview.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
-                <Typography sx={{ fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.6 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
+                <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {builderPreview.description}
                 </Typography>
               </Box>
@@ -583,7 +583,7 @@ const Skills: React.FC = () => {
         ) : !selection ? (
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', color: c.text.ghost, gap: 2 }}>
             <DescriptionIcon sx={{ fontSize: 48, opacity: 0.3 }} />
-            <Typography sx={{ fontSize: '0.9rem' }}>Select a skill to view its details</Typography>
+            <Typography sx={{ fontSize: '0.875rem' }}>Select a skill to view its details</Typography>
           </Box>
         ) : selection.type === 'registry' ? (
           regDetailLoading && !selectedReg ? (
@@ -593,7 +593,7 @@ const Skills: React.FC = () => {
           ) : selectedReg ? (
             <Box sx={{ p: 4, pb: 3, maxWidth: 1100, display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '1.4rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
+                <Typography sx={{ fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
                   {selectedReg.name}
                 </Typography>
                 <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
@@ -606,7 +606,7 @@ const Skills: React.FC = () => {
                     sx={{
                       bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed },
                       textTransform: 'none', borderRadius: `${c.radius.md}px`, px: 2, py: 0.5,
-                      fontSize: '0.8rem', fontWeight: 600, boxShadow: 'none',
+                      fontSize: '0.8125rem', fontWeight: 600, boxShadow: 'none',
                     }}
                   >
                     Install
@@ -620,7 +620,7 @@ const Skills: React.FC = () => {
                       borderColor: c.border.strong, color: c.text.secondary,
                       '&:hover': { borderColor: c.accent.primary, color: c.accent.primary, bgcolor: 'rgba(174,86,48,0.04)' },
                       textTransform: 'none', borderRadius: `${c.radius.md}px`, px: 2, py: 0.5,
-                      fontSize: '0.8rem', fontWeight: 600,
+                      fontSize: '0.8125rem', fontWeight: 600,
                     }}
                   >
                     Edit & Install
@@ -641,12 +641,12 @@ const Skills: React.FC = () => {
               </Box>
 
               <Box sx={{ mb: 1, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>Anthropic</strong></Typography>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>Anthropic</strong></Typography>
               </Box>
 
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
-                <Typography sx={{ fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.6 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
+                <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedReg.description}
                 </Typography>
               </Box>
@@ -658,7 +658,7 @@ const Skills: React.FC = () => {
           <Box sx={{ p: 4, pb: 3, maxWidth: 1100, display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5, flexShrink: 0 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <Typography sx={{ fontSize: '1.4rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
+                <Typography sx={{ fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
                   {selectedLocal.name}
                 </Typography>
                 {selectedLocal.built_in && (
@@ -669,7 +669,7 @@ const Skills: React.FC = () => {
                       bgcolor: 'rgba(174,86,48,0.12)',
                       color: c.accent.primary,
                       fontWeight: 600,
-                      fontSize: '0.7rem',
+                      fontSize: '0.6875rem',
                       height: 20,
                     }}
                   />
@@ -678,7 +678,7 @@ const Skills: React.FC = () => {
                   <Chip
                     label="Update available"
                     size="small"
-                    sx={{ bgcolor: `${c.status.warning}22`, color: c.status.warning, fontWeight: 600, fontSize: '0.7rem', height: 20 }}
+                    sx={{ bgcolor: `${c.status.warning}22`, color: c.status.warning, fontWeight: 600, fontSize: '0.6875rem', height: 20 }}
                   />
                 )}
               </Box>
@@ -690,7 +690,7 @@ const Skills: React.FC = () => {
                     startIcon={<DownloadIcon sx={{ fontSize: 16 }} />}
                     disabled={updatingId === selectedLocal.id}
                     onClick={() => handleUpdate(selectedLocal)}
-                    sx={{ textTransform: 'none', fontSize: '0.78rem', py: 0.3, bgcolor: c.status.warning, '&:hover': { bgcolor: c.status.warning } }}
+                    sx={{ textTransform: 'none', fontSize: '0.75rem', py: 0.3, bgcolor: c.status.warning, '&:hover': { bgcolor: c.status.warning } }}
                   >
                     {updatingId === selectedLocal.id ? 'Updating...' : 'Update'}
                   </Button>
@@ -719,20 +719,20 @@ const Skills: React.FC = () => {
                   size="small"
                   sx={{
                     bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary,
-                    fontWeight: 500, fontSize: '0.78rem', height: 26,
+                    fontWeight: 500, fontSize: '0.75rem', height: 26,
                   }}
                 />
               </Box>
             )}
 
             <Box sx={{ mb: 1, flexShrink: 0 }}>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>You</strong></Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>You</strong></Typography>
             </Box>
 
             {selectedLocal.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
-                <Typography sx={{ fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.6 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
+                <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedLocal.description}
                 </Typography>
               </Box>
@@ -791,7 +791,7 @@ const Skills: React.FC = () => {
             maxRows={24}
             sx={{
               '& .MuiOutlinedInput-root': {
-                bgcolor: c.bg.secondary, fontFamily: c.font.mono, fontSize: '0.85rem',
+                bgcolor: c.bg.secondary, fontFamily: c.font.mono, fontSize: '0.875rem',
               },
             }}
           />
diff --git a/frontend/src/app/pages/Tools/Tools.tsx b/frontend/src/app/pages/Tools/Tools.tsx
index ef2518b1..26e50281 100644
--- a/frontend/src/app/pages/Tools/Tools.tsx
+++ b/frontend/src/app/pages/Tools/Tools.tsx
@@ -108,7 +108,7 @@ const Tools: React.FC = () => {
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
         <Box>
           <Typography variant="h5" sx={{ color: c.text.primary, fontWeight: 700, mb: 0.5 }}>Tool Library</Typography>
-          <Typography sx={{ color: c.text.tertiary, fontSize: '0.9rem' }}>Define and manage custom tools for your Claude Code agents.</Typography>
+          <Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem' }}>Define and manage custom tools for your Claude Code agents.</Typography>
         </Box>
         <Box>
           <Button
@@ -126,11 +126,11 @@ const Tools: React.FC = () => {
             onClose={handleMenuClose}
             PaperProps={{ sx: { bgcolor: c.bg.surface, border: `1px solid ${c.border.subtle}`, borderRadius: 2, mt: 0.5, minWidth: 200 } }}
           >
-            <MenuItem onClick={a.openCreate} sx={{ color: c.text.primary, fontSize: '0.88rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
+            <MenuItem onClick={a.openCreate} sx={{ color: c.text.primary, fontSize: '0.875rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
               <BuildIcon sx={{ fontSize: 16, color: c.text.tertiary }} />
               Create Custom
             </MenuItem>
-            <MenuItem onClick={a.openRegistryBrowser} sx={{ color: c.text.primary, fontSize: '0.88rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
+            <MenuItem onClick={a.openRegistryBrowser} sx={{ color: c.text.primary, fontSize: '0.875rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
               <StorefrontIcon sx={{ fontSize: 16, color: c.text.tertiary }} />
               Browse MCP Registry
             </MenuItem>
@@ -145,8 +145,8 @@ const Tools: React.FC = () => {
         >
           {builtinSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
           <LockIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Built-in</Typography>
-          <Chip label={coreTools.length + deferredTools.length + browserTools.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Built-in</Typography>
+          <Chip label={coreTools.length + deferredTools.length + browserTools.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
         </Box>
         <Collapse in={builtinSectionOpen} timeout={0} unmountOnExit>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pl: 1 }}>
@@ -185,8 +185,8 @@ const Tools: React.FC = () => {
         <Box onClick={() => setCustomSectionOpen((v) => !v)} sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}>
           {customSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
           <BuildIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Connections</Typography>
-          <Chip label={tools.length + uninstalledIntegrations.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Connections</Typography>
+          <Chip label={tools.length + uninstalledIntegrations.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
         </Box>
         <Collapse in={customSectionOpen} timeout={0} unmountOnExit>
           {loading ? (
@@ -198,7 +198,7 @@ const Tools: React.FC = () => {
           ) : (tools.length === 0 && uninstalledIntegrations.length === 0) ? (
             <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', py: 6, color: c.text.ghost, gap: 1.5 }}>
               <BuildIcon sx={{ fontSize: 40, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.9rem' }}>No custom tools defined yet. Create one to get started.</Typography>
+              <Typography sx={{ fontSize: '0.875rem' }}>No custom tools defined yet. Create one to get started.</Typography>
             </Box>
           ) : (
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pl: 1 }}>
diff --git a/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx b/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx
index e727608f..e7ac8694 100644
--- a/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx
@@ -34,8 +34,8 @@ const AgentWorkflowsSection: React.FC = () => {
       >
         {open ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
         <AccountTreeIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-        <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Workflows agents can run</Typography>
-        <Chip label={`${exposedCount}/${list.length}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+        <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Workflows agents can run</Typography>
+        <Chip label={`${exposedCount}/${list.length}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
       </Box>
       <Collapse in={open} timeout={0} unmountOnExit>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, pl: 1 }}>
@@ -45,9 +45,9 @@ const AgentWorkflowsSection: React.FC = () => {
           {list.map((w) => (
             <Box key={w.id} sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 0.5, px: 1, borderRadius: 1, border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface }}>
               <Box sx={{ flex: 1, minWidth: 0 }}>
-                <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.title || 'Untitled workflow'}</Typography>
+                <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.title || 'Untitled workflow'}</Typography>
                 {w.description && (
-                  <Typography sx={{ color: c.text.tertiary, fontSize: '0.72rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.description}</Typography>
+                  <Typography sx={{ color: c.text.tertiary, fontSize: '0.75rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.description}</Typography>
                 )}
               </Box>
               <Switch
diff --git a/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx b/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx
index 01308ef3..5e712b5c 100644
--- a/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx
+++ b/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx
@@ -79,7 +79,7 @@ const BrowserLoginConnect: React.FC<Props> = ({ ig, isDisabled }) => {
           label="Signed in"
           size="small"
           onClick={(e) => { e.stopPropagation(); check(); }}
-          sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.7rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, flexShrink: 0 }}
+          sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.6875rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, flexShrink: 0 }}
         />
       </Tooltip>
     );
@@ -94,7 +94,7 @@ const BrowserLoginConnect: React.FC<Props> = ({ ig, isDisabled }) => {
           size="small"
           variant="outlined"
           startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
-          sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+          sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
         >
           {ig.connectLabel || 'Sign in'}
         </Button>
diff --git a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
index 5fb2ce38..3e9c5c68 100644
--- a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
@@ -63,10 +63,10 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
               </Box>
               <Box sx={{ flex: 1, minWidth: 0, opacity: browserSectionEnabled ? 1 : 0.4, transition: 'opacity 0.2s' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>Browser</Typography>
-                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
+                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>Browser</Typography>
+                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
                 </Box>
-                <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>Browser automation delegation and individual browser tools</Typography>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>Browser automation delegation and individual browser tools</Typography>
               </Box>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
                 <Switch
@@ -90,8 +90,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1.5, mb: 1 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                   <SecurityIcon sx={{ fontSize: 14, color: c.text.muted }} />
-                  <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
-                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
+                  <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
+                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
                 </Box>
               </Box>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
@@ -109,8 +109,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                       >
                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                           <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-                          <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>Delegation</Typography>
-                          <Chip label={browserDelegationTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                          <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>Delegation</Typography>
+                          <Chip label={browserDelegationTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                         </Box>
                         <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                           <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinCategoryPermissionChange(browserDelegationTools.map((t) => t.name), 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: groupPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: groupPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
@@ -125,8 +125,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                             return (
                               <Box key={bt.name} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, '&:hover': { bgcolor: c.bg.secondary } }}>
                                 <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
-                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
+                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
+                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
                                 </Box>
                                 <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                                   <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinPermissionChange(bt.name, 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: toolPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: toolPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 14 }} /></IconButton></Tooltip>
@@ -156,8 +156,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                       >
                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                           <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-                          <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>Browser Tools</Typography>
-                          <Chip label={browserActionTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                          <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>Browser Tools</Typography>
+                          <Chip label={browserActionTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                         </Box>
                         <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                           <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinCategoryPermissionChange(browserActionTools.map((t) => t.name), 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: groupPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: groupPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
@@ -172,8 +172,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                             return (
                               <Box key={bt.name} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, '&:hover': { bgcolor: c.bg.secondary } }}>
                                 <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
-                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
+                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
+                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
                                 </Box>
                                 <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                                   <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinPermissionChange(bt.name, 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: toolPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: toolPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 14 }} /></IconButton></Tooltip>
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
index d6c7da39..ea28cb84 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
@@ -111,7 +111,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                         {ig && (
                           <Box sx={{
                             width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            bgcolor: `${ig.color}18`, fontSize: '1.1rem', fontWeight: 700, color: ig.color, flexShrink: 0,
+                            bgcolor: `${ig.color}18`, fontSize: '1.125rem', fontWeight: 700, color: ig.color, flexShrink: 0,
                             opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s',
                           }}>
                             {ig.icon}
@@ -119,23 +119,23 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                         )}
                         <Box sx={{ flex: 1, minWidth: 0, opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s' }}>
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
-                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>{tool.name}</Typography>
+                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{tool.name}</Typography>
                             {isMcp && <Chip icon={<ExtensionIcon sx={{ fontSize: 12 }} />} label={isStdio ? 'MCP · stdio' : 'MCP'} size="small" sx={{ bgcolor: `${c.status.warning}20`, color: c.status.warning, fontSize: '0.75rem', height: 24 }} />}
-                            {tool.command && <Chip icon={<TerminalIcon sx={{ fontSize: 12 }} />} label={`/${tool.command}`} size="small" sx={{ bgcolor: 'rgba(174,86,48,0.12)', color: c.accent.hover, fontSize: '0.72rem', height: 22 }} />}
+                            {tool.command && <Chip icon={<TerminalIcon sx={{ fontSize: 12 }} />} label={`/${tool.command}`} size="small" sx={{ bgcolor: 'rgba(174,86,48,0.12)', color: c.accent.hover, fontSize: '0.75rem', height: 22 }} />}
                             {tool.auth_status === 'connected' && !ig && (
-                              <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label={tool.connected_account_email ? `Connected · ${tool.connected_account_email}` : 'Connected'} size="small" sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.7rem', height: 20, '& .MuiChip-icon': { color: c.status.success } }} />
+                              <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label={tool.connected_account_email ? `Connected · ${tool.connected_account_email}` : 'Connected'} size="small" sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.6875rem', height: 20, '& .MuiChip-icon': { color: c.status.success } }} />
                             )}
                             {tool.auth_status === 'configured' && !ig?.credentialFields && (
-                              <Chip icon={<SettingsIcon sx={{ fontSize: 12 }} />} label="Configured" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.7rem', height: 20, '& .MuiChip-icon': { color: c.status.warning } }} />
+                              <Chip icon={<SettingsIcon sx={{ fontSize: 12 }} />} label="Configured" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.6875rem', height: 20, '& .MuiChip-icon': { color: c.status.warning } }} />
                             )}
                             {ig && totalToolCount > 0 && (
-                              <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: `${ig.color}15`, color: ig.color, fontSize: '0.7rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
+                              <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: `${ig.color}15`, color: ig.color, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
                             )}
                             {ig && (
-                              <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
+                              <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
                             )}
                           </Box>
-                          {tool.description && <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>{tool.description}</Typography>}
+                          {tool.description && <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{tool.description}</Typography>}
                         </Box>
                         <CustomToolConnect
                           tool={tool}
@@ -190,19 +190,19 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1.5, mb: 1 }}>
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                               <SecurityIcon sx={{ fontSize: 14, color: c.text.muted }} />
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
-                              {hasPerms && <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />}
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
+                              {hasPerms && <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />}
                             </Box>
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                               {hasPerms && (
                                 <>
                                   <Tooltip title="Allow all read-only tools">
-                                    <Button size="small" onClick={() => handleBulkReadOnly(tool.id)} sx={{ color: c.status.info, textTransform: 'none', fontSize: '0.7rem', minWidth: 'auto', px: 1, py: 0.25 }}>
+                                    <Button size="small" onClick={() => handleBulkReadOnly(tool.id)} sx={{ color: c.status.info, textTransform: 'none', fontSize: '0.6875rem', minWidth: 'auto', px: 1, py: 0.25 }}>
                                       Allow reads
                                     </Button>
                                   </Tooltip>
                                   <Tooltip title="Reset all to Ask">
-                                    <Button size="small" onClick={() => handleResetPermissions(tool.id)} sx={{ color: c.text.ghost, textTransform: 'none', fontSize: '0.7rem', minWidth: 'auto', px: 1, py: 0.25 }}>
+                                    <Button size="small" onClick={() => handleResetPermissions(tool.id)} sx={{ color: c.text.ghost, textTransform: 'none', fontSize: '0.6875rem', minWidth: 'auto', px: 1, py: 0.25 }}>
                                       Reset
                                     </Button>
                                   </Tooltip>
@@ -224,19 +224,19 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                           {!hasPerms ? (
                             <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 3, gap: 1.5 }}>
                               <ExtensionIcon sx={{ fontSize: 28, color: c.text.ghost, opacity: 0.4 }} />
-                              <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem' }}>No tools discovered yet</Typography>
+                              <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem' }}>No tools discovered yet</Typography>
                               <Button
                                 size="small"
                                 variant="outlined"
                                 startIcon={discovering ? <CircularProgress size={12} /> : <SearchIcon sx={{ fontSize: 14 }} />}
                                 onClick={() => handleDiscover(tool.id)}
                                 disabled={discovering || !canDiscover}
-                                sx={{ borderColor: c.border.medium, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.accent.primary }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5 }}
+                                sx={{ borderColor: c.border.medium, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.accent.primary }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5 }}
                               >
                                 Discover Tools
                               </Button>
                               {!canDiscover && (
-                                <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Add an MCP configuration to enable tool discovery</Typography>
+                                <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Add an MCP configuration to enable tool discovery</Typography>
                               )}
                             </Box>
                           ) : (
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx b/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
index 9b26064e..29d13214 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
@@ -40,7 +40,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                             variant="outlined"
                             startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleOAuthConnect(tool.id); }}
-                            sx={{ borderColor: `${c.status.info}40`, color: c.status.info, '&:hover': { borderColor: c.status.info, bgcolor: `${c.status.info}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+                            sx={{ borderColor: `${c.status.info}40`, color: c.status.info, '&:hover': { borderColor: c.status.info, bgcolor: `${c.status.info}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
                           >
                             {ig?.id === 'discord' && tool.auth_status === 'connected' ? 'Add server' : `Connect ${tool.name}`}
                           </Button>
@@ -51,7 +51,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                             variant="outlined"
                             startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleDeviceCodeConnect(tool.id); }}
-                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
                           >
                             Connect Microsoft 365
                           </Button>
@@ -62,7 +62,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                             variant="outlined"
                             startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); openCredentialsDialog(tool.id, ig); }}
-                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
                           >
                             {ig.connectLabel || 'Connect'}
                           </Button>
@@ -75,7 +75,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                               size="small"
                               onDelete={(ig.credentialFields || ig.authType === 'oauth2' || ig.authType === 'device_code') ? (e: React.SyntheticEvent) => { e.stopPropagation(); ig.authType === 'device_code' ? handleM365Disconnect(tool.id) : handleDisconnectIntegration(tool.id, ig); } : undefined}
                               onClick={(e) => e.stopPropagation()}
-                              sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.7rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, '& .MuiChip-deleteIcon': { color: c.status.success, '&:hover': { color: c.status.error } }, flexShrink: 0 }}
+                              sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.6875rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, '& .MuiChip-deleteIcon': { color: c.status.success, '&:hover': { color: c.status.error } }, flexShrink: 0 }}
                             />
                           </Tooltip>
                         )}
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx b/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx
index 62424010..1f5f9fc9 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx
@@ -9,11 +9,11 @@ const CustomToolDevInfo: React.FC<{ tool: ToolDefinition }> = ({ tool }) => {
   const c = useClaudeTokens();
   return (
                             <Box sx={{ mt: 2, pt: 1.5, borderTop: `1px solid ${c.border.subtle}`, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                                 Developer Info
                               </Typography>
                               <Box sx={{ bgcolor: c.bg.page, borderRadius: 1.5, border: `1px solid ${c.border.subtle}`, px: 1.5, py: 1 }}>
-                                <Typography sx={{ color: c.text.ghost, fontSize: '0.68rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>
+                                <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>
                                   MCP Config
                                 </Typography>
                                 <Typography component="pre" sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono, whiteSpace: 'pre-wrap', wordBreak: 'break-all', m: 0, lineHeight: 1.5 }}>
@@ -22,25 +22,25 @@ const CustomToolDevInfo: React.FC<{ tool: ToolDefinition }> = ({ tool }) => {
                               </Box>
                               <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5 }}>
                                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Auth type:</Typography>
-                                  <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontFamily: c.font.mono }}>{tool.auth_type || 'none'}</Typography>
+                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Auth type:</Typography>
+                                  <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{tool.auth_type || 'none'}</Typography>
                                 </Box>
                                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Status:</Typography>
-                                  <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontFamily: c.font.mono }}>{tool.auth_status || 'none'}</Typography>
+                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Status:</Typography>
+                                  <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{tool.auth_status || 'none'}</Typography>
                                 </Box>
                                 {tool.connected_account_email && (
                                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                    <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Account:</Typography>
-                                    <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontFamily: c.font.mono }}>{tool.connected_account_email}</Typography>
+                                    <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Account:</Typography>
+                                    <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{tool.connected_account_email}</Typography>
                                   </Box>
                                 )}
                               </Box>
                               {tool.credentials && Object.keys(tool.credentials).length > 0 && (
                                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
-                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Credentials:</Typography>
+                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Credentials:</Typography>
                                   {Object.keys(tool.credentials).map((key) => (
-                                    <Chip key={key} label={`${key}: configured`} size="small" sx={{ bgcolor: `${c.status.success}12`, color: c.status.success, fontSize: '0.65rem', height: 18, fontFamily: c.font.mono, '& .MuiChip-label': { px: 0.6 } }} />
+                                    <Chip key={key} label={`${key}: configured`} size="small" sx={{ bgcolor: `${c.status.success}12`, color: c.status.success, fontSize: '0.625rem', height: 18, fontFamily: c.font.mono, '& .MuiChip-label': { px: 0.6 } }} />
                                   ))}
                                 </Box>
                               )}
diff --git a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
index 5b1bcbc1..0779ba92 100644
--- a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
@@ -27,16 +27,16 @@ const IntegrationGalleryCard: React.FC<IntegrationGalleryCardProps> = ({ integra
                       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                         <Box sx={{
                           width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          bgcolor: c.bg.secondary, fontSize: '1.1rem', fontWeight: 700, color: c.text.ghost,
+                          bgcolor: c.bg.secondary, fontSize: '1.125rem', fontWeight: 700, color: c.text.ghost,
                         }}>
                           {ig.icon}
                         </Box>
                         <Box sx={{ flex: 1, minWidth: 0 }}>
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>{ig.name}</Typography>
-                            <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
+                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{ig.name}</Typography>
+                            <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
                           </Box>
-                          <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>{ig.description}</Typography>
+                          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{ig.description}</Typography>
                         </Box>
                         <Box
                           data-onboarding={
diff --git a/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx b/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
index aa919af7..0de1d3e0 100644
--- a/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
+++ b/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
@@ -87,20 +87,20 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
       <Box key={name}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, cursor: devMode && schema ? 'pointer' : undefined, '&:hover': { bgcolor: c.bg.secondary } }} onClick={() => devMode && schema && setExpandedSchema((p) => p === schemaKey ? null : schemaKey)}>
           <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-            <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{toDisplayName(name, serviceName)}</Typography>
-            {descriptions[name] && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(descriptions[name])}</Typography>}
+            <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{toDisplayName(name, serviceName)}</Typography>
+            {descriptions[name] && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(descriptions[name])}</Typography>}
           </Box>
           <PermToggle value={perms[name] || 'ask'} onChange={(v) => handlePermissionChange(tool.id, name, v)} size={14} />
         </Box>
         {devMode && expandedSchema === schemaKey && schemaProps && (
           <Box sx={{ mx: 1.5, mb: 0.75, px: 1.5, py: 1, bgcolor: c.bg.page, borderRadius: 1, border: `1px solid ${c.border.subtle}` }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.65rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>Input Parameters</Typography>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.625rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>Input Parameters</Typography>
             {Object.entries(schemaProps).map(([pName, pDef]: [string, any]) => (
               <Box key={pName} sx={{ display: 'flex', alignItems: 'baseline', gap: 0.75, py: 0.2 }}>
-                <Typography sx={{ color: c.accent.primary, fontSize: '0.72rem', fontFamily: c.font.mono, fontWeight: 600, flexShrink: 0 }}>{pName}</Typography>
-                <Typography sx={{ color: c.text.muted, fontSize: '0.68rem', fontFamily: c.font.mono }}>{pDef?.type || 'any'}</Typography>
-                {schemaRequired.includes(pName) && <Chip label="required" size="small" sx={{ bgcolor: `${c.status.error}12`, color: c.status.error, fontSize: '0.55rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />}
-                {pDef?.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.68rem', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pDef.description}</Typography>}
+                <Typography sx={{ color: c.accent.primary, fontSize: '0.75rem', fontFamily: c.font.mono, fontWeight: 600, flexShrink: 0 }}>{pName}</Typography>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontFamily: c.font.mono }}>{pDef?.type || 'any'}</Typography>
+                {schemaRequired.includes(pName) && <Chip label="required" size="small" sx={{ bgcolor: `${c.status.error}12`, color: c.status.error, fontSize: '0.625rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />}
+                {pDef?.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pDef.description}</Typography>}
               </Box>
             ))}
           </Box>
@@ -137,8 +137,8 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
         >
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-            <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>{serviceName}</Typography>
-            <Chip label={count} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+            <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>{serviceName}</Typography>
+            <Chip label={count} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
           </Box>
           <Box data-onboarding={showPermissionMarker ? 'actions-permission-toggle' : undefined}>
             <PermToggle value={svcPolicy === 'mixed' ? 'ask' : svcPolicy} onChange={(v) => handleGroupPermissionChange(tool.id, allNames, v)} />
@@ -151,8 +151,8 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 0.5, py: 0.25 }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                     <VisibilityIcon sx={{ fontSize: 12, color: c.status.info }} />
-                    <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontWeight: 600 }}>Read-only</Typography>
-                    <Chip label={data.read!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.6rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
+                    <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600 }}>Read-only</Typography>
+                    <Chip label={data.read!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.625rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
                   </Box>
                   <PermToggle value={getGroupPolicy(data.read!) === 'mixed' ? 'ask' : getGroupPolicy(data.read!)} onChange={(v) => handleGroupPermissionChange(tool.id, data.read!, v)} size={14} />
                 </Box>
@@ -164,8 +164,8 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 0.5, py: 0.25 }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                     <EditIcon sx={{ fontSize: 12, color: c.status.warning }} />
-                    <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontWeight: 600 }}>Write / delete</Typography>
-                    <Chip label={data.write!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.6rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
+                    <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600 }}>Write / delete</Typography>
+                    <Chip label={data.write!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.625rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
                   </Box>
                   <PermToggle value={getGroupPolicy(data.write!) === 'mixed' ? 'ask' : getGroupPolicy(data.write!)} onChange={(v) => handleGroupPermissionChange(tool.id, data.write!, v)} size={14} />
                 </Box>
diff --git a/frontend/src/app/pages/Tools/cards/ToolSection.tsx b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
index 68597e49..e42778f3 100644
--- a/frontend/src/app/pages/Tools/cards/ToolSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
@@ -109,13 +109,13 @@ const ToolSection: React.FC<ToolSectionProps> = ({
         </Box>
         <Box sx={{ flex: 1, minWidth: 0, opacity: enabled ? 1 : 0.4, transition: 'opacity 0.2s' }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>{label}</Typography>
-            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
+            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{label}</Typography>
+            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
             {deferred && (
-              <Chip label="on-demand" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+              <Chip label="on-demand" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
             )}
           </Box>
-          <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>{sectionDescription}</Typography>
+          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{sectionDescription}</Typography>
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
           <Switch
@@ -139,8 +139,8 @@ const ToolSection: React.FC<ToolSectionProps> = ({
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1.5, mb: 1 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
             <SecurityIcon sx={{ fontSize: 14, color: c.text.muted }} />
-            <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
-            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
+            <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
+            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
           </Box>
         </Box>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
@@ -158,8 +158,8 @@ const ToolSection: React.FC<ToolSectionProps> = ({
                 >
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-                    <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>{meta.label}</Typography>
-                    <Chip label={catTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                    <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>{meta.label}</Typography>
+                    <Chip label={catTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                   </Box>
                   <PermToggle value={catPolicy === 'mixed' ? 'ask' : catPolicy} onChange={(v) => onCategoryPermissionChange(catTools.map((t) => t.name), v)} />
                 </Box>
@@ -170,8 +170,8 @@ const ToolSection: React.FC<ToolSectionProps> = ({
                       return (
                         <Box key={bt.name} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, '&:hover': { bgcolor: c.bg.secondary } }}>
                           <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-                            <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
-                            {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(bt.description)}</Typography>}
+                            <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
+                            {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(bt.description)}</Typography>}
                           </Box>
                           <PermToggle value={toolPolicy} onChange={(v) => onPermissionChange(bt.name, v)} size={14} />
                         </Box>
diff --git a/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx b/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx
index e353e8c7..7e0d7882 100644
--- a/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx
@@ -54,15 +54,15 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, p: 1.5, bgcolor: c.bg.page, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
               <Avatar
                 src={mcpConfigServer.iconUrl || undefined}
-                sx={{ width: 32, height: 32, bgcolor: c.bg.secondary, fontSize: '0.8rem', fontWeight: 700, color: c.text.muted }}
+                sx={{ width: 32, height: 32, bgcolor: c.bg.secondary, fontSize: '0.8125rem', fontWeight: 700, color: c.text.muted }}
               >
                 {mcpConfigServer.iconUrl ? null : (mcpConfigServer.title || cleanServerName(mcpConfigServer.name)).charAt(0).toUpperCase()}
               </Avatar>
               <Box>
-                <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9rem' }}>
+                <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.875rem' }}>
                   {mcpConfigServer.title || cleanServerName(mcpConfigServer.name)}
                 </Typography>
-                <Typography sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}>{mcpConfigServer.description}</Typography>
+                <Typography sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}>{mcpConfigServer.description}</Typography>
               </Box>
             </Box>
           )}
@@ -77,7 +77,7 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
             maxRows={8}
             error={!!mcpConfigError}
             helperText={mcpConfigError || 'Transport config passed to claude_agent_sdk (type, url, command, args, etc.)'}
-            sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.85rem' } }}
+            sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.875rem' } }}
           />
 
           <FormControl fullWidth size="small">
@@ -100,7 +100,7 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
 
           {mcpAuthType !== 'none' && (
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, p: 1.5, bgcolor: c.bg.page, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
-              <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                 Environment Variables
               </Typography>
               {Object.entries(mcpCredentials).map(([key, val]) => (
@@ -112,14 +112,14 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
                   fullWidth
                   size="small"
                   type={key.toLowerCase().includes('secret') ? 'password' : 'text'}
-                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.elevated, fontFamily: c.font.mono, fontSize: '0.85rem' } }}
+                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.elevated, fontFamily: c.font.mono, fontSize: '0.875rem' } }}
                 />
               ))}
               {mcpAuthType === 'env_vars' && (
                 <Button
                   size="small"
                   onClick={() => setMcpCredentials({ ...mcpCredentials, [`VAR_${Object.keys(mcpCredentials).length + 1}`]: '' })}
-                  sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.78rem', alignSelf: 'flex-start' }}
+                  sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.75rem', alignSelf: 'flex-start' }}
                 >
                   + Add Variable
                 </Button>
diff --git a/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx b/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx
index 06c3ccd0..247e66d1 100644
--- a/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx
@@ -97,10 +97,10 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
                       : `${regStats.total.toLocaleString()} servers`
                 }
                 size="small"
-                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 20, ml: 'auto' }}
+                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, ml: 'auto' }}
               />
               {devMode && regStats.lastUpdated > 0 && (
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.68rem', flexShrink: 0 }}>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', flexShrink: 0 }}>
                   Synced {Math.round((Date.now() / 1000 - regStats.lastUpdated) / 60)}m ago
                 </Typography>
               )}
@@ -139,7 +139,7 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
                 flexShrink: 0,
                 '& .MuiToggleButton-root': {
                   color: c.text.ghost, border: `1px solid ${c.border.medium}`, textTransform: 'none',
-                  fontSize: '0.72rem', py: 0.5, px: 1.2, lineHeight: 1.4,
+                  fontSize: '0.75rem', py: 0.5, px: 1.2, lineHeight: 1.4,
                   '&.Mui-selected': { bgcolor: c.bg.secondary, color: c.text.primary, borderColor: c.border.strong },
                   '&:hover': { bgcolor: c.bg.secondary },
                 },
@@ -180,7 +180,7 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
           ) : regServers.length === 0 ? (
             <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1, color: c.text.ghost, gap: 1.5 }}>
               <SearchIcon sx={{ fontSize: 40, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.9rem' }}>No servers found matching "{regQuery}"</Typography>
+              <Typography sx={{ fontSize: '0.875rem' }}>No servers found matching "{regQuery}"</Typography>
             </Box>
           ) : (
             <Box sx={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 0.5,
@@ -213,7 +213,7 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
                   <Button
                     onClick={handleLoadMore}
                     disabled={regLoading}
-                    sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.85rem' }}
+                    sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.875rem' }}
                   >
                     {regLoading ? <CircularProgress size={16} sx={{ color: c.accent.primary, mr: 1 }} /> : null}
                     Load More
diff --git a/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx b/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx
index a0955b26..ca94c700 100644
--- a/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx
@@ -55,39 +55,39 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                         src={srv.iconUrl || undefined}
                         sx={{
                           width: 24, height: 24, flexShrink: 0, bgcolor: c.bg.secondary,
-                          fontSize: '0.7rem', fontWeight: 700, color: c.text.muted,
+                          fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted,
                         }}
                       >
                         {srv.iconUrl ? null : (srv.title || cleanServerName(srv.name)).charAt(0).toUpperCase()}
                       </Avatar>
                       <Box sx={{ flex: 1, minWidth: 0 }}>
                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                          <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.88rem', fontFamily: c.font.mono }}>
+                          <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.875rem', fontFamily: c.font.mono }}>
                             {srv.title || cleanServerName(srv.name)}
                           </Typography>
-                          {srv.version && <Chip label={`v${srv.version}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
-                          {srv.remoteType && <Chip label={srv.remoteType} size="small" sx={{ bgcolor: '#3b82f615', color: '#3b82f6', fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
+                          {srv.version && <Chip label={`v${srv.version}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
+                          {srv.remoteType && <Chip label={srv.remoteType} size="small" sx={{ bgcolor: '#3b82f615', color: '#3b82f6', fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
                           {srv.source === 'google' ? (
-                            <Chip icon={<CloudIcon sx={{ fontSize: 12 }} />} label="Google" size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.info } }} />
+                            <Chip icon={<CloudIcon sx={{ fontSize: 12 }} />} label="Google" size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.info } }} />
                           ) : (
-                            <Chip icon={<PublicIcon sx={{ fontSize: 12 }} />} label="Community" size="small" sx={{ bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.accent.primary } }} />
+                            <Chip icon={<PublicIcon sx={{ fontSize: 12 }} />} label="Community" size="small" sx={{ bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.accent.primary } }} />
                           )}
                           {srv.stars != null && (
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, ml: 0.5 }}>
                               <StarIcon sx={{ fontSize: 13, color: '#c89c00' }} />
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, lineHeight: 1 }}>
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, lineHeight: 1 }}>
                                 {srv.stars >= 1000 ? `${(srv.stars / 1000).toFixed(1)}k` : srv.stars.toLocaleString()}
                               </Typography>
                             </Box>
                           )}
                           {devMode && !srv.remoteType && (
-                            <Chip label="stdio" size="small" sx={{ bgcolor: '#8b5cf615', color: '#8b5cf6', fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                            <Chip label="stdio" size="small" sx={{ bgcolor: '#8b5cf615', color: '#8b5cf6', fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                           )}
                           {isInstalled && (
-                            <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label="Installed" size="small" sx={{ bgcolor: `${c.status.success}15`, color: c.status.success, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.success } }} />
+                            <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label="Installed" size="small" sx={{ bgcolor: `${c.status.success}15`, color: c.status.success, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.success } }} />
                           )}
                         </Box>
-                        <Typography sx={{ color: c.text.tertiary, fontSize: '0.78rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                        <Typography sx={{ color: c.text.tertiary, fontSize: '0.75rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           {srv.description}
                         </Typography>
                       </Box>
@@ -96,18 +96,18 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
 
                     <Collapse in={isExpanded} timeout={0} unmountOnExit>
                       <Box sx={{ ml: 4.5, mr: 1.5, mb: 1, px: 2, py: 1.5, bgcolor: c.bg.elevated, borderRadius: 1.5, borderLeft: '2px solid rgba(174,86,48,0.12)' }}>
-                        <Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', mb: 1.5, lineHeight: 1.5 }}>
+                        <Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', mb: 1.5, lineHeight: 1.5 }}>
                           {srv.description}
                         </Typography>
 
                         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 2 }}>
-                          <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem', fontFamily: c.font.mono }}>
+                          <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', fontFamily: c.font.mono }}>
                             {srv.name}
                           </Typography>
                           {srv.remoteUrl && (
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                              <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem', textTransform: 'uppercase' }}>Endpoint</Typography>
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontFamily: c.font.mono }}>{srv.remoteUrl}</Typography>
+                              <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', textTransform: 'uppercase' }}>Endpoint</Typography>
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{srv.remoteUrl}</Typography>
                             </Box>
                           )}
                           <Box sx={{ display: 'flex', gap: 1 }}>
@@ -119,7 +119,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                 icon={<OpenInNewIcon sx={{ fontSize: 12 }} />}
                                 label="Website"
                                 size="small"
-                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 22 }}
+                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 22 }}
                               />
                             )}
                             {srv.repositoryUrl && (
@@ -130,7 +130,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                 icon={<OpenInNewIcon sx={{ fontSize: 12 }} />}
                                 label="Repository"
                                 size="small"
-                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 22 }}
+                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 22 }}
                               />
                             )}
                           </Box>
@@ -145,16 +145,16 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                 {(regDetail.keywords?.length > 0 || regDetail.license) && (
                                   <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center' }}>
                                     {regDetail.license && (
-                                      <Chip label={regDetail.license} size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                                      <Chip label={regDetail.license} size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                                     )}
                                     {regDetail.keywords?.map((kw) => (
-                                      <Chip key={kw} label={kw} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                                      <Chip key={kw} label={kw} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                                     ))}
                                   </Box>
                                 )}
                                 {regDetail.environmentVariables?.length > 0 && (
                                   <Box sx={{ bgcolor: c.bg.page, borderRadius: 1.5, border: `1px solid ${c.border.subtle}`, px: 1.5, py: 1 }}>
-                                    <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.75 }}>
+                                    <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.75 }}>
                                       Required Environment Variables
                                     </Typography>
                                     {regDetail.environmentVariables.map((ev) => (
@@ -163,7 +163,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                           {ev.name}
                                         </Typography>
                                         {ev.description && (
-                                          <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>
+                                          <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>
                                             {ev.description}
                                           </Typography>
                                         )}
@@ -182,7 +182,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                             variant="contained"
                             startIcon={<DownloadIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleInstall(srv); }}
-                            sx={{ bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5 }}
+                            sx={{ bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5 }}
                           >
                             Install
                           </Button>
@@ -191,7 +191,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                             variant="outlined"
                             startIcon={<EditIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleEditInstall(srv); }}
-                            sx={{ borderColor: c.border.strong, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.text.primary }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5 }}
+                            sx={{ borderColor: c.border.strong, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.text.primary }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5 }}
                           >
                             Edit & Install
                           </Button>
diff --git a/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx b/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
index b27b26da..ede75323 100644
--- a/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
@@ -110,36 +110,36 @@ const ToolDialogs: React.FC<ToolDialogsProps> = ({
           {deviceCodeStatus === 'loading' && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 3, justifyContent: 'center' }}>
               <CircularProgress size={20} />
-              <Typography sx={{ color: c.text.muted, fontSize: '0.9rem' }}>Generating login code...</Typography>
+              <Typography sx={{ color: c.text.muted, fontSize: '0.875rem' }}>Generating login code...</Typography>
             </Box>
           )}
           {deviceCodeStatus === 'awaiting' && (
             <>
-              <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.6 }}>
+              <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.6 }}>
                 Open the link below and enter the code to sign in:
               </Typography>
               <Box sx={{ bgcolor: c.bg.page, border: `1px solid ${c.border.subtle}`, borderRadius: 2, p: 2, display: 'flex', flexDirection: 'column', gap: 1.5, alignItems: 'center' }}>
-                <Typography component="a" href={deviceCodeUrl} target="_blank" rel="noopener" sx={{ color: c.status.info, fontSize: '0.9rem', fontWeight: 500 }}>
+                <Typography component="a" href={deviceCodeUrl} target="_blank" rel="noopener" sx={{ color: c.status.info, fontSize: '0.875rem', fontWeight: 500 }}>
                   {deviceCodeUrl}
                 </Typography>
-                <Typography sx={{ fontFamily: c.font.mono, fontSize: '1.5rem', fontWeight: 700, color: c.text.primary, letterSpacing: 2 }}>
+                <Typography sx={{ fontFamily: c.font.mono, fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, letterSpacing: 2 }}>
                   {deviceCode}
                 </Typography>
               </Box>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'center', py: 1 }}>
                 <CircularProgress size={14} />
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.8rem' }}>Waiting for you to sign in...</Typography>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem' }}>Waiting for you to sign in...</Typography>
               </Box>
             </>
           )}
           {deviceCodeStatus === 'connected' && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 2, justifyContent: 'center' }}>
               <CheckCircleIcon sx={{ color: c.status.success, fontSize: 20 }} />
-              <Typography sx={{ color: c.status.success, fontSize: '0.9rem', fontWeight: 500 }}>Connected successfully!</Typography>
+              <Typography sx={{ color: c.status.success, fontSize: '0.875rem', fontWeight: 500 }}>Connected successfully!</Typography>
             </Box>
           )}
           {deviceCodeStatus === 'error' && (
-            <Typography sx={{ color: c.status.error, fontSize: '0.85rem', py: 2, textAlign: 'center' }}>
+            <Typography sx={{ color: c.status.error, fontSize: '0.875rem', py: 2, textAlign: 'center' }}>
               Login failed. Please try again.
             </Typography>
           )}
@@ -171,13 +171,13 @@ const ToolDialogs: React.FC<ToolDialogsProps> = ({
         </DialogTitle>
         <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '8px !important' }}>
           {credDialogIntegration?.id === 'slack' ? (
-            <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
+            <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
               Click <strong>Sign in with Slack</strong> below; a Slack window will open. Sign in normally and the window will close automatically once you reach your workspace.
             </Typography>
           ) : (
             <>
               {credDialogIntegration?.connectInstructions && (
-                <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
                   {credDialogIntegration.connectInstructions}
                 </Typography>
               )}
@@ -191,7 +191,7 @@ const ToolDialogs: React.FC<ToolDialogsProps> = ({
                   fullWidth
                   size="small"
                   helperText={field.helpText}
-                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.85rem' } }}
+                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.875rem' } }}
                 />
               ))}
             </>
diff --git a/frontend/src/app/pages/Views/AppCodePanel.tsx b/frontend/src/app/pages/Views/AppCodePanel.tsx
index a3b79e95..a0691244 100644
--- a/frontend/src/app/pages/Views/AppCodePanel.tsx
+++ b/frontend/src/app/pages/Views/AppCodePanel.tsx
@@ -101,7 +101,7 @@ const AppCodePanel: React.FC<Props> = ({ workspaceId, onFileSaved }) => {
           <FileTreeItem key={node.path} node={node} depth={0} activeFile={activeFile} onSelect={setActiveFile} c={c} />
         ))}
         {filePaths.length === 0 && (
-          <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, px: 1.5, py: 1 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, px: 1.5, py: 1 }}>
             Loading files…
           </Typography>
         )}
@@ -109,7 +109,7 @@ const AppCodePanel: React.FC<Props> = ({ workspaceId, onFileSaved }) => {
       <Box sx={{ flex: 1, overflow: 'hidden' }}>
         {activeFile && oversizeFiles[activeFile] != null ? (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', px: 3 }}>
-            <Typography sx={{ color: c.text.muted, fontSize: '0.8rem', textAlign: 'center', maxWidth: 320, lineHeight: 1.5 }}>
+            <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem', textAlign: 'center', maxWidth: 320, lineHeight: 1.5 }}>
               This file is {(oversizeFiles[activeFile] / (1024 * 1024)).toFixed(1)} MB, too large to edit here.
             </Typography>
           </Box>
@@ -123,7 +123,7 @@ const AppCodePanel: React.FC<Props> = ({ workspaceId, onFileSaved }) => {
           />
         ) : (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.8rem' }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem' }}>
               Select a file to edit
             </Typography>
           </Box>
diff --git a/frontend/src/app/pages/Views/AppFileTree.tsx b/frontend/src/app/pages/Views/AppFileTree.tsx
index 84b80447..99975547 100644
--- a/frontend/src/app/pages/Views/AppFileTree.tsx
+++ b/frontend/src/app/pages/Views/AppFileTree.tsx
@@ -128,7 +128,7 @@ export const FileTreeItem: React.FC<FileTreeItemProps> = ({ node, depth, activeF
         >
           <ExpandMoreIcon sx={{ fontSize: 12, color: c.text.ghost, transform: open ? 'rotate(0deg)' : 'rotate(-90deg)', transition: '0.15s' }} />
           <FolderIcon sx={{ fontSize: 14, color: c.text.muted }} />
-          <Typography sx={{ fontSize: '0.74rem', color: c.text.secondary, fontFamily: c.font.mono }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, fontFamily: c.font.mono }}>
             {node.name}
           </Typography>
         </Box>
@@ -167,7 +167,7 @@ export const FileTreeItem: React.FC<FileTreeItemProps> = ({ node, depth, activeF
       </Box>
       <Typography
         sx={{
-          fontSize: '0.74rem',
+          fontSize: '0.75rem',
           fontFamily: c.font.mono,
           color: isActive ? c.text.primary : c.text.secondary,
           fontWeight: isActive ? 500 : 400,
diff --git a/frontend/src/app/pages/Views/HistoryPanel.tsx b/frontend/src/app/pages/Views/HistoryPanel.tsx
index 50944728..4280046e 100644
--- a/frontend/src/app/pages/Views/HistoryPanel.tsx
+++ b/frontend/src/app/pages/Views/HistoryPanel.tsx
@@ -134,13 +134,13 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 1.5, py: 1.25, gap: 1 }}>
-        <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary }}>History</Typography>
+        <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>History</Typography>
         <Button
           size="small"
           startIcon={<BookmarkAddOutlinedIcon sx={{ fontSize: 16 }} />}
           onClick={handleSave}
           disabled={saving || isAgentActive}
-          sx={{ textTransform: 'none', fontSize: '0.78rem', color: c.accent.primary, '&:hover': { bgcolor: `${c.accent.primary}12` } }}
+          sx={{ textTransform: 'none', fontSize: '0.75rem', color: c.accent.primary, '&:hover': { bgcolor: `${c.accent.primary}12` } }}
         >
           {saving ? 'Saving' : 'Save this version'}
         </Button>
@@ -148,7 +148,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
 
       <Fade in={!!status} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
         <Box sx={{
-          mx: 1.5, mb: 1, px: 1.25, py: 0.75, borderRadius: 2, fontSize: '0.8rem',
+          mx: 1.5, mb: 1, px: 1.25, py: 0.75, borderRadius: 2, fontSize: '0.8125rem',
           color: status?.kind === 'err' ? c.status.error : c.text.secondary,
           bgcolor: status?.kind === 'err' ? `${c.status.error}14` : `${c.accent.primary}12`,
         }}>
@@ -164,7 +164,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
         ) : versions.length === 0 ? (
           <Box sx={{ textAlign: 'center', pt: 6, px: 2 }}>
             <HistoryIcon sx={{ fontSize: 34, color: c.text.tertiary, opacity: 0.5, mb: 1 }} />
-            <Typography sx={{ fontSize: '0.85rem', color: c.text.muted, lineHeight: 1.5 }}>
+            <Typography sx={{ fontSize: '0.875rem', color: c.text.muted, lineHeight: 1.5 }}>
               No history yet. Every time you change your app, we'll save a snapshot here so you can go back.
             </Typography>
           </Box>
@@ -172,7 +172,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
           <>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
               <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: c.accent.primary, flexShrink: 0 }} />
-              <Typography sx={{ fontSize: '0.82rem', fontWeight: 600, color: c.text.secondary }}>Now (current)</Typography>
+              <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary }}>Now (current)</Typography>
             </Box>
             {versions.map((v) => (
               <Box
@@ -192,10 +192,10 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
                     : <HistoryIcon sx={{ fontSize: 18, color: c.text.tertiary, opacity: 0.5 }} />}
                 </Box>
                 <Box sx={{ flex: 1, minWidth: 0 }}>
-                  <Typography sx={{ fontSize: '0.84rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {describe(v)}
                   </Typography>
-                  <Typography sx={{ fontSize: '0.74rem', color: c.text.muted }}>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>
                     {timeAgo(v.created_at)}{v.source === 'manual' ? ' · saved by you' : v.source === 'pre_restore' ? ' · auto-backup' : ''}
                   </Typography>
                 </Box>
@@ -205,7 +205,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
                     startIcon={busyId === v.id ? <CircularProgress size={13} /> : <RestoreIcon sx={{ fontSize: 15 }} />}
                     onClick={() => setConfirmId(v.id)}
                     disabled={!!busyId || isAgentActive}
-                    sx={{ textTransform: 'none', fontSize: '0.74rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
+                    sx={{ textTransform: 'none', fontSize: '0.75rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
                   >
                     Restore
                   </Button>
@@ -214,7 +214,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
                     startIcon={<ContentCopyIcon sx={{ fontSize: 14 }} />}
                     onClick={() => handleBranch(v.id)}
                     disabled={!!busyId}
-                    sx={{ textTransform: 'none', fontSize: '0.74rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
+                    sx={{ textTransform: 'none', fontSize: '0.75rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
                   >
                     Save as new app
                   </Button>
@@ -227,10 +227,10 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
 
       <Dialog open={!!confirmTarget} onClose={() => setConfirmId(null)} PaperProps={{ sx: { borderRadius: 3, bgcolor: c.bg.surface, p: 0.5, maxWidth: 380 } }}>
         <Box sx={{ p: 2.5 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
             Go back to this version?
           </Typography>
-          <Typography sx={{ fontSize: '0.84rem', color: c.text.muted, lineHeight: 1.5, mb: 2.5 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.muted, lineHeight: 1.5, mb: 2.5 }}>
             This brings your app back to how it was here. Your current version is saved first, so you can always come back.
           </Typography>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
diff --git a/frontend/src/app/pages/Views/TerminalPanel.tsx b/frontend/src/app/pages/Views/TerminalPanel.tsx
index 6f699e3a..db6e3b97 100644
--- a/frontend/src/app/pages/Views/TerminalPanel.tsx
+++ b/frontend/src/app/pages/Views/TerminalPanel.tsx
@@ -76,14 +76,14 @@ const TerminalPanel: React.FC<Props> = ({ lines }) => {
           px: 1.5,
           py: 1,
           fontFamily: c.font.mono,
-          fontSize: '0.74rem',
+          fontSize: '0.75rem',
           lineHeight: 1.55,
           '&::-webkit-scrollbar': { width: 6, height: 6 },
           '&::-webkit-scrollbar-thumb': { background: '#21262d', borderRadius: 3 },
         }}
       >
         {lines.length === 0 ? (
-          <Typography sx={{ color: '#8b949e', fontFamily: c.font.mono, fontSize: '0.78rem', fontStyle: 'italic' }}>
+          <Typography sx={{ color: '#8b949e', fontFamily: c.font.mono, fontSize: '0.75rem', fontStyle: 'italic' }}>
             Waiting for output... backend stdout/stderr and the running app's console.log will show here.
           </Typography>
         ) : (
diff --git a/frontend/src/app/pages/Views/ViewPreview.tsx b/frontend/src/app/pages/Views/ViewPreview.tsx
index d5792678..f09aba78 100644
--- a/frontend/src/app/pages/Views/ViewPreview.tsx
+++ b/frontend/src/app/pages/Views/ViewPreview.tsx
@@ -418,7 +418,7 @@ const ViewPreview = forwardRef<ViewPreviewHandle, Props>(({
           alignItems: 'center',
           justifyContent: 'center',
           color: '#888',
-          fontSize: '0.85rem',
+          fontSize: '0.875rem',
           fontStyle: 'italic',
           ...style,
         }}
@@ -511,7 +511,7 @@ const ViewPreview = forwardRef<ViewPreviewHandle, Props>(({
           }}
         >
           <Skeleton variant="card" width={140} height={14} delayMs={0} />
-          <Typography sx={{ fontSize: '0.78rem', color: '#888', letterSpacing: '0.01em' }}>
+          <Typography sx={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.01em' }}>
             Restoring preview...
           </Typography>
         </Box>
diff --git a/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx b/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx
index 6c737ab6..98cb39c1 100644
--- a/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx
+++ b/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx
@@ -250,7 +250,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
         }}>
           <Box sx={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end', pr: 1, pb: 0.5 }}>
             {!compact && (
-              <Typography sx={{ fontSize: '0.62rem', color: c.text.ghost, fontWeight: 500 }}>{TZ_LABEL}</Typography>
+              <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>{TZ_LABEL}</Typography>
             )}
           </Box>
           {days.map((d) => {
@@ -346,7 +346,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
             reads cleanly in both light and dark themes. */}
         <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', flexShrink: 0, position: 'sticky', top: 0, bgcolor: c.bg.surface, zIndex: 2, borderBottom: `1px solid ${c.border.subtle}`, pt: 1.25, pb: 0.6 }}>
           {WEEKDAY_LABEL_SHORT.map((l, i) => (
-            <Typography key={`${l}-${i}`} sx={{ textAlign: 'center', fontSize: '0.74rem', color: c.text.muted, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{l}</Typography>
+            <Typography key={`${l}-${i}`} sx={{ textAlign: 'center', fontSize: '0.75rem', color: c.text.muted, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{l}</Typography>
           ))}
         </Box>
         <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gridTemplateRows: `repeat(5, minmax(${compact ? 70 : 96}px, 1fr))`, flex: 1, minHeight: 0, gap: 0, borderLeft: `1px solid ${c.border.subtle}` }}>
@@ -362,7 +362,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
                       Calendar shows them in a muted shade, not invisible).
                       Color tweak instead of opacity so dark themes stay
                       readable. */}
-                  <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxSizing: 'border-box', width: 22, height: 22, borderRadius: '50%', bgcolor: isToday ? accent : 'transparent', color: isToday ? '#fff' : inMonth ? c.text.primary : c.text.ghost, fontWeight: isToday ? 600 : 500, fontSize: '0.82rem', lineHeight: 1, boxShadow: isToday ? `0 0 0 1.5px ${c.bg.surface}, 0 0 0 3px ${accent}` : 'none' }}>{d.getDate()}</Box>
+                  <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxSizing: 'border-box', width: 22, height: 22, borderRadius: '50%', bgcolor: isToday ? accent : 'transparent', color: isToday ? '#fff' : inMonth ? c.text.primary : c.text.ghost, fontWeight: isToday ? 600 : 500, fontSize: '0.8125rem', lineHeight: 1, boxShadow: isToday ? `0 0 0 1.5px ${c.bg.surface}, 0 0 0 3px ${accent}` : 'none' }}>{d.getDate()}</Box>
                 </Box>
                 {evs.slice(0, compact ? 3 : 4).map((e, idx) => (
                   <Box
@@ -403,7 +403,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
       onScroll={windowing.onScroll}
       sx={{ display: 'flex', flexDirection: 'column', maxHeight: '100%', overflow: 'auto', overflowAnchor: 'auto', bgcolor: c.bg.surface }}>
       {rows.length === 0 && (
-        <Typography sx={{ fontSize: '0.85rem', color: c.text.muted, textAlign: 'center', py: 3 }}>No scheduled</Typography>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.muted, textAlign: 'center', py: 3 }}>No scheduled</Typography>
       )}
       {windowing.topSpacer > 0 && (
         <Box aria-hidden sx={{ height: windowing.topSpacer, flexShrink: 0, overflowAnchor: 'none' }} />
@@ -420,13 +420,13 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
                 px: 2, pt: rowIdx === 0 ? 1.5 : 2, pb: 0.5,
                 borderTop: rowIdx === 0 ? 'none' : `1px dashed ${c.border.subtle}`,
               }}>
-              <Typography sx={{ fontSize: '1.15rem', fontWeight: 700, color: row.isToday ? accent : c.text.primary, lineHeight: 1, letterSpacing: '-0.01em' }}>
+              <Typography sx={{ fontSize: '1.125rem', fontWeight: 700, color: row.isToday ? accent : c.text.primary, lineHeight: 1, letterSpacing: '-0.01em' }}>
                 {row.date.getDate()}
               </Typography>
-              <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: row.isToday ? accent : c.text.secondary, lineHeight: 1 }}>
+              <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: row.isToday ? accent : c.text.secondary, lineHeight: 1 }}>
                 {WEEKDAY_FULL[row.date.getDay()]}
               </Typography>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1 }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1 }}>
                 {row.date.toLocaleString('en', { month: 'short' })}
               </Typography>
             </Box>
@@ -435,7 +435,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
         if (row.kind === 'empty') {
           return (
             <Box key={row.id} data-wl-id={row.id} sx={{ px: 2, pb: 1 }}>
-              <Typography sx={{ fontSize: '0.85rem', color: c.text.ghost }}>No events today</Typography>
+              <Typography sx={{ fontSize: '0.875rem', color: c.text.ghost }}>No events today</Typography>
             </Box>
           );
         }
@@ -454,8 +454,8 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
             }}>
             <Box sx={{ width: 3, alignSelf: 'stretch', minHeight: 22, bgcolor: accent, borderRadius: c.radius.sm, flexShrink: 0 }} />
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-              <Typography className="ev-title" sx={{ fontSize: '0.9rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.3 }}>{e.workflow.title}</Typography>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1.3 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
+              <Typography className="ev-title" sx={{ fontSize: '0.875rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.3 }}>{e.workflow.title}</Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1.3 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
             </Box>
           </Box>
         );
@@ -543,7 +543,7 @@ function EventStack({ events, paused, now, maxVisible, onSelectWorkflow, eventFo
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
         <Box sx={{ minWidth: 220, p: 1 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
             {rest.length} more at this hour
           </Typography>
           {rest.map((e, idx) => (
@@ -552,8 +552,8 @@ function EventStack({ events, paused, now, maxVisible, onSelectWorkflow, eventFo
               onClick={() => { setAnchor(null); onSelectWorkflow?.(e.workflow.id, e.date); }}
               sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 0.5, py: 0.5, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { bgcolor: c.bg.elevated } }}>
               <Box sx={{ width: 8, height: 8, borderRadius: '50%', boxSizing: 'border-box', bgcolor: accent, flexShrink: 0 }} />
-              <Typography sx={{ flex: 1, fontSize: '0.82rem', color: c.text.primary, fontWeight: 600 }}>{e.workflow.title}</Typography>
-              <Typography sx={{ fontSize: '0.74rem', color: c.text.muted }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
+              <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 600 }}>{e.workflow.title}</Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
             </Box>
           ))}
         </Box>
@@ -589,7 +589,7 @@ function MonthDayOverflow({ date, count, events, now, fontSize, onSelectWorkflow
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}>
         <Box sx={{ minWidth: 240, maxHeight: 360, overflowY: 'auto', p: 1 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
             {`${events.length} scheduled · ${date.toLocaleString('en', { weekday: 'short', month: 'short', day: 'numeric' })}`}
           </Typography>
           {events.map((e, idx) => (
@@ -598,8 +598,8 @@ function MonthDayOverflow({ date, count, events, now, fontSize, onSelectWorkflow
               onClick={() => { setAnchor(null); onSelectWorkflow?.(e.workflow.id, e.date); }}
               sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 0.5, py: 0.5, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { bgcolor: c.bg.elevated } }}>
               <Box sx={{ width: 6, height: 6, borderRadius: '50%', boxSizing: 'border-box', bgcolor: accent, flexShrink: 0 }} />
-              <Typography sx={{ flex: 1, fontSize: '0.82rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.workflow.title}</Typography>
-              <Typography sx={{ fontSize: '0.74rem', color: c.text.muted, flexShrink: 0 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
+              <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.workflow.title}</Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, flexShrink: 0 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
             </Box>
           ))}
         </Box>
@@ -614,7 +614,7 @@ function EventTooltipBody({ event }: { event: { workflow: Workflow; date: Date }
   const cost = wf.cost_estimate?.last_run_usd;
   const monthly = wf.cost_estimate?.monthly_usd;
   return (
-    <Box sx={{ fontSize: '0.72rem', lineHeight: 1.5 }}>
+    <Box sx={{ fontSize: '0.75rem', lineHeight: 1.5 }}>
       <div style={{ fontWeight: 700 }}>{wf.title}</div>
       <div>{`Fires at ${formatTime(event.date.getHours(), event.date.getMinutes())}`}</div>
       {status && <div>{`Last run: ${status}`}</div>}
diff --git a/frontend/src/app/pages/Workflows/SchedulePopover.tsx b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
index 690cd96f..c0064f95 100644
--- a/frontend/src/app/pages/Workflows/SchedulePopover.tsx
+++ b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
@@ -130,7 +130,7 @@ export default function SchedulePopover({
         {!chatHistoryOnly && mode !== 'schedule' && (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, pt: 1, pb: 0.5, flexShrink: 0 }}>
             {([['search', 'Chat history'], ['runs', 'Scheduled tasks']] as const).map(([m, label]) => (
-              <Box key={m} onClick={() => onModeChange(m)} role="button" sx={{ fontSize: '0.85rem', fontWeight: mode === m ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: mode === m ? c.text.primary : c.text.muted, borderBottom: `2px solid ${mode === m ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{label}</Box>
+              <Box key={m} onClick={() => onModeChange(m)} role="button" sx={{ fontSize: '0.875rem', fontWeight: mode === m ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: mode === m ? c.text.primary : c.text.muted, borderBottom: `2px solid ${mode === m ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{label}</Box>
             ))}
           </Box>
         )}
@@ -151,10 +151,10 @@ export default function SchedulePopover({
                 value={historyQuery}
                 onChange={(e) => onHistoryQueryChange(e.target.value)}
                 placeholder="Search past chats..."
-                sx={{ flex: 1, fontSize: '0.85rem', color: c.text.primary, '& input::placeholder': { color: c.text.ghost, opacity: 1 } }}
+                sx={{ flex: 1, fontSize: '0.875rem', color: c.text.primary, '& input::placeholder': { color: c.text.ghost, opacity: 1 } }}
               />
               {!hideTopChrome && (
-                <Box onClick={onNewChat} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.45, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
+                <Box onClick={onNewChat} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.75rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.45, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
                   <AddIcon sx={{ fontSize: 12 }} />
                   New
                 </Box>
@@ -162,13 +162,13 @@ export default function SchedulePopover({
             </Box>
             <Box ref={historyScrollRef} onScroll={onHistoryScroll} sx={{ flex: 1, overflowY: 'auto', borderTop: `1px solid ${c.border.subtle}` }}>
               {historyResults.length === 0 && !historyLoading && (
-                <Typography sx={{ px: 1.5, py: 2.5, fontSize: '0.82rem', color: c.text.muted, textAlign: 'center' }}>{historyQuery ? 'No matching chats' : 'No chat history yet'}</Typography>
+                <Typography sx={{ px: 1.5, py: 2.5, fontSize: '0.8125rem', color: c.text.muted, textAlign: 'center' }}>{historyQuery ? 'No matching chats' : 'No chat history yet'}</Typography>
               )}
               {historyResults.map((entry) => {
                 const hasWorkflow = Boolean(workflowIconMap[entry.id]);
                 return (
                   <Box key={entry.id} onClick={() => onHistorySelect(entry.id)} sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 0.9, cursor: 'pointer', '&:hover': { bgcolor: c.bg.elevated } }}>
-                    <Typography sx={{ flex: 1, fontSize: '0.82rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</Typography>
+                    <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</Typography>
                     {/* Only annotate chats that became saved workflows.
                         A small workflow glyph reads as a tag, where the
                         old single-letter chip read as a random initial. */}
@@ -179,7 +179,7 @@ export default function SchedulePopover({
                         </Box>
                       </Tooltip>
                     )}
-                    <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, flexShrink: 0, whiteSpace: 'nowrap' }}>{relTime(entry.closed_at)}</Typography>
+                    <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0, whiteSpace: 'nowrap' }}>{relTime(entry.closed_at)}</Typography>
                   </Box>
                 );
               })}
@@ -191,7 +191,7 @@ export default function SchedulePopover({
           <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
             <Box sx={{ flex: 1, overflowY: 'auto', px: 1.5, py: 1, borderTop: `1px solid ${c.border.subtle}`, minHeight: 0 }}>
               {allRunsLoading && allRuns.length === 0 ? (
-                <Typography sx={{ px: 0.5, py: 2.5, fontSize: '0.82rem', color: c.text.muted, textAlign: 'center' }}>Loading runs...</Typography>
+                <Typography sx={{ px: 0.5, py: 2.5, fontSize: '0.8125rem', color: c.text.muted, textAlign: 'center' }}>Loading runs...</Typography>
               ) : (
                 <HistoryList runs={allRuns} onOpen={onRunOpen} showWorkflow workflowTitleFor={workflowTitleFor} />
               )}
@@ -203,10 +203,10 @@ export default function SchedulePopover({
           <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, pt: 1, pb: 0.5, flexShrink: 0 }}>
               {(['List', 'Week', 'Month'] as const).map((v) => (
-                <Box key={v} onClick={() => setCalendarView(v)} role="button" sx={{ fontSize: '0.85rem', fontWeight: calendarView === v ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: calendarView === v ? c.text.primary : c.text.muted, borderBottom: `2px solid ${calendarView === v ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{v}</Box>
+                <Box key={v} onClick={() => setCalendarView(v)} role="button" sx={{ fontSize: '0.875rem', fontWeight: calendarView === v ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: calendarView === v ? c.text.primary : c.text.muted, borderBottom: `2px solid ${calendarView === v ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{v}</Box>
               ))}
               <Box sx={{ flex: 1 }} />
-              <Box onClick={onExpand} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.35, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
+              <Box onClick={onExpand} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.75rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.35, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
                 <OpenInFullIcon sx={{ fontSize: 12 }} />
                 Expand
               </Box>
@@ -219,14 +219,14 @@ export default function SchedulePopover({
                 onClick={() => setRefDate(new Date())}
                 role="button"
                 sx={{
-                  fontSize: '0.78rem', fontWeight: 600, color: c.text.secondary,
+                  fontSize: '0.75rem', fontWeight: 600, color: c.text.secondary,
                   border: `1px solid ${c.border.subtle}`, px: 0.95, py: 0.3,
                   borderRadius: `${c.radius.md}px`, cursor: 'pointer',
                   '&:hover': { color: c.text.primary, borderColor: c.border.medium },
                 }}>Today</Box>
               <IconButton size="small" onClick={onPrev} sx={{ p: 0.3, color: c.text.muted, '&:hover': { color: c.text.primary } }}><ChevronLeftIcon sx={{ fontSize: 17 }} /></IconButton>
               <IconButton size="small" onClick={onNext} sx={{ p: 0.3, color: c.text.muted, '&:hover': { color: c.text.primary } }}><ChevronRightIcon sx={{ fontSize: 17 }} /></IconButton>
-              <Typography sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.primary, ml: 0.25 }}>{periodLabel}</Typography>
+              <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.primary, ml: 0.25 }}>{periodLabel}</Typography>
             </Box>
             <Box sx={{ flex: 1, overflowY: 'auto', px: 1.5, pt: 0, pb: 1, borderTop: `1px solid ${c.border.subtle}`, minHeight: 0 }}>
               <ScheduleCalendar view={calendarView} density="compact" onSelectWorkflow={onWorkflowSelect} refDate={refDate} />
@@ -250,7 +250,7 @@ function ModeChip({ label, icon, active, onClick }: { label: string; icon: React
       role="button"
       sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.5,
-        fontSize: '0.82rem', fontWeight: active ? 700 : 500,
+        fontSize: '0.8125rem', fontWeight: active ? 700 : 500,
         px: 1.1, py: 0.45,
         cursor: 'pointer',
         color: active ? c.text.primary : c.text.muted,
diff --git a/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx b/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx
index a53f1012..a7921613 100644
--- a/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx
+++ b/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx
@@ -21,7 +21,7 @@ export default function ScheduleTestWarningDialog({ open, onClose, onTestFirst,
     <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
       <DialogTitle sx={{ fontSize: '1rem', fontWeight: 700 }}>Test before scheduling?</DialogTitle>
       <DialogContent>
-        <Typography sx={{ fontSize: '0.86rem', color: c.text.secondary, lineHeight: 1.5 }}>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.5 }}>
           Scheduled runs can&apos;t pause to ask for permission. If this workflow uses tools that
           need your approval, it could fail when it runs on its own. A quick test run lets you
           approve those tools now.
@@ -31,13 +31,13 @@ export default function ScheduleTestWarningDialog({ open, onClose, onTestFirst,
         <Box
           role="button"
           onClick={onScheduleAnyway}
-          sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.secondary, cursor: 'pointer', px: 1, py: 0.5, '&:hover': { color: c.text.primary } }}>
+          sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary, cursor: 'pointer', px: 1, py: 0.5, '&:hover': { color: c.text.primary } }}>
           Schedule anyway
         </Box>
         <Box
           role="button"
           onClick={onTestFirst}
-          sx={{ fontSize: '0.84rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: 999, cursor: 'pointer', px: 1.5, py: 0.6, '&:hover': { filter: 'brightness(1.06)' } }}>
+          sx={{ fontSize: '0.8125rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: 999, cursor: 'pointer', px: 1.5, py: 0.6, '&:hover': { filter: 'brightness(1.06)' } }}>
           Test first
         </Box>
       </DialogActions>
diff --git a/frontend/src/app/pages/Workflows/StepList.tsx b/frontend/src/app/pages/Workflows/StepList.tsx
index 64581389..0433619b 100644
--- a/frontend/src/app/pages/Workflows/StepList.tsx
+++ b/frontend/src/app/pages/Workflows/StepList.tsx
@@ -150,7 +150,7 @@ export default function StepList(props: Props) {
                         resize: 'none',
                         boxSizing: 'border-box',
                         fontFamily: 'inherit',
-                        fontSize: '0.92rem',
+                        fontSize: '0.875rem',
                         color: c.text.primary,
                         border: framed ? `1px solid ${c.border.medium}` : '1px solid transparent',
                         borderRadius: `${c.radius.md}px`,
@@ -165,7 +165,7 @@ export default function StepList(props: Props) {
                   ) : (
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minHeight: CIRCLE_SIZE }}>
                       <Typography sx={{
-                        fontSize: '0.92rem',
+                        fontSize: '0.875rem',
                         fontWeight: isActive ? 600 : 500,
                         color: c.text.primary,
                         lineHeight: 1.45,
@@ -177,7 +177,7 @@ export default function StepList(props: Props) {
                         {label}
                       </Typography>
                       {isActive && activeStepDuration && (
-                        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mr: hasExpandableBody ? 0 : 0.5, flexShrink: 0 }}>
+                        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mr: hasExpandableBody ? 0 : 0.5, flexShrink: 0 }}>
                           {activeStepDuration}
                         </Typography>
                       )}
@@ -198,7 +198,7 @@ export default function StepList(props: Props) {
                       "what the agent is doing right now". */}
                   {isActive && activeStepSubtitle && (
                     <Typography sx={{
-                      fontSize: '0.82rem',
+                      fontSize: '0.8125rem',
                       color: c.text.secondary,
                       mt: 0.4,
                       display: 'flex', alignItems: 'center', gap: 0.5,
@@ -217,7 +217,7 @@ export default function StepList(props: Props) {
                       borderRadius: `${c.radius.md}px`,
                       bgcolor: c.bg.elevated,
                     }}>
-                      <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
+                      <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
                         {rawBody}
                       </Typography>
                     </Box>
@@ -232,7 +232,7 @@ export default function StepList(props: Props) {
       </Box>
       {hiddenCount > 0 && (
         <Typography sx={{
-          fontSize: '0.86rem',
+          fontSize: '0.875rem',
           color: c.text.secondary,
           mt: 0.6,
           ml: 0,
diff --git a/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx b/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx
index b1c6b465..0b131e16 100644
--- a/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx
+++ b/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx
@@ -101,7 +101,7 @@ function PillButton({ label, onClick, icon, tone, filled, disabled }: {
       role="button"
       sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.5,
-        fontSize: '0.86rem', fontWeight: 700,
+        fontSize: '0.875rem', fontWeight: 700,
         px: 1.4, py: 0.55, borderRadius: 999,
         cursor: disabled ? 'not-allowed' : 'pointer',
         color: fg, bgcolor: bg,
@@ -122,7 +122,7 @@ function GhostTextBtn({ label, onClick }: { label: string; onClick: () => void }
       onClick={onClick}
       role="button"
       sx={{
-        fontSize: '0.86rem', fontWeight: 500, color: c.text.secondary,
+        fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary,
         cursor: 'pointer', px: 0.75, py: 0.5,
         '&:hover': { color: c.text.primary },
       }}>
@@ -171,7 +171,7 @@ export function RunningView({ workflow, steps, runs, mode = 'card' }: {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25, minHeight: '100%' }}>
       <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 700, color: c.status.success }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.status.success }}>
           {completeCount} of {total} complete
         </Typography>
       </Box>
@@ -275,7 +275,7 @@ export function CompletedView({ workflow, steps, runs, mode = 'card' }: {
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25, minHeight: '100%' }}>
       <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.6 }}>
         <Box component="span" sx={{ color: c.status.success, fontSize: 18, lineHeight: 1, mr: 0.25 }}>✓</Box>
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 700, color: c.status.success }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.status.success }}>
           {steps.length} of {steps.length} complete
         </Typography>
       </Box>
@@ -300,10 +300,10 @@ export function CompletedView({ workflow, steps, runs, mode = 'card' }: {
           <RocketLaunchRounded sx={{ fontSize: 16 }} />
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
             Workflow Success!
           </Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
             If you&apos;re curious, you can click the green button below to see exactly what the agent did.
           </Typography>
         </Box>
@@ -407,10 +407,10 @@ export function FailedView({ workflow, steps, runs, mode = 'card' }: {
           <BuildRounded sx={{ fontSize: 16 }} />
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
             Fix with an Agent
           </Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
             Have an agent modify, test, and iterate on the workflow until it works as expected.
           </Typography>
         </Box>
@@ -479,7 +479,7 @@ export function useHeaderActions(workflow: Workflow | null, view: string): Heade
         <Box
           onClick={() => dispatch(updateWorkflowCard({ workflowId: workflow.id, patch: { view: 'history' } }))}
           role="button"
-          sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.82rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
+          sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.8125rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
           <HistoryIcon sx={{ fontSize: 15 }} />
           History
         </Box>
@@ -488,7 +488,7 @@ export function useHeaderActions(workflow: Workflow | null, view: string): Heade
           role="button"
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.35,
-            fontSize: '0.82rem', fontWeight: 700,
+            fontSize: '0.8125rem', fontWeight: 700,
             px: 1.1, py: 0.4, borderRadius: 999,
             bgcolor: c.accent.primary, color: '#fff', cursor: 'pointer',
             '&:hover': { filter: 'brightness(1.05)' },
@@ -502,13 +502,13 @@ export function useHeaderActions(workflow: Workflow | null, view: string): Heade
       return {
         right: (
           <>
-            <Box role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.35, fontSize: '0.82rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
+            <Box role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.35, fontSize: '0.8125rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
               <StopRounded sx={{ fontSize: 15 }} />
               Stop
             </Box>
             <Box role="button" sx={{
               display: 'inline-flex', alignItems: 'center', gap: 0.35,
-              fontSize: '0.82rem', fontWeight: 700,
+              fontSize: '0.8125rem', fontWeight: 700,
               px: 1.1, py: 0.4, borderRadius: 999,
               bgcolor: c.accent.primary, color: '#fff', cursor: 'pointer',
               '&:hover': { filter: 'brightness(1.05)' },
diff --git a/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx b/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx
index e0296df5..0f2e1a50 100644
--- a/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx
+++ b/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx
@@ -79,7 +79,7 @@ export function ActionBtn({ label, tone, disabled, onClick, icon }: { label: str
       sx={{
         // Compact pill matching target #58/#63. Smaller padding + smaller glyphs so the buttons stop overshadowing the step body.
         display: 'inline-flex', alignItems: 'center', gap: 0.4,
-        fontSize: '0.78rem', fontWeight: 600,
+        fontSize: '0.75rem', fontWeight: 600,
         px: 1, py: 0.35,
         borderRadius: c.radius.full,
         cursor: disabled ? 'not-allowed' : 'pointer',
@@ -226,10 +226,10 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           <CalendarMonthRounded sx={{ fontSize: 18 }} />
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
             Schedule this workflow?
           </Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
             You can have workflows run on a recurring basis, automatically.
           </Typography>
         </Box>
@@ -239,7 +239,7 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           onClick={onIgnore}
           role="button"
           sx={{
-            fontSize: '0.86rem', fontWeight: 500, color: c.text.secondary,
+            fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary,
             cursor: busy ? 'wait' : 'pointer', px: 0.75, py: 0.5,
             opacity: busy ? 0.6 : 1,
             '&:hover': { color: c.text.primary },
@@ -252,7 +252,7 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           title={canSave ? undefined : 'Add at least one step before saving'}
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.5,
-            fontSize: '0.88rem', fontWeight: 700,
+            fontSize: '0.875rem', fontWeight: 700,
             px: 1.75, py: 0.6, borderRadius: c.radius.full,
             color: '#fff', bgcolor: c.accent.primary,
             cursor: busy ? 'wait' : canSave ? 'pointer' : 'not-allowed',
@@ -265,7 +265,7 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
       <Dialog open={savePromptOpen} onClose={() => setSavePromptOpen(false)} maxWidth="xs" fullWidth>
         <DialogTitle sx={{ fontSize: '1rem', fontWeight: 700 }}>Save workflow?</DialogTitle>
         <DialogContent>
-          <Typography sx={{ fontSize: '0.86rem', color: c.text.secondary }}>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>
             Save this workflow under Unscheduled. It will not run until you choose a schedule.
           </Typography>
         </DialogContent>
@@ -273,20 +273,20 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           <Box
             role="button"
             onClick={onDontSave}
-            sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.status.error, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
+            sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.status.error, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
             Don't Save
           </Box>
           <Box
             role="button"
             onClick={() => setSavePromptOpen(false)}
-            sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.secondary, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
+            sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
             Cancel
           </Box>
           <Box
             role="button"
             onClick={canSave ? onSaveDraft : undefined}
             title={canSave ? undefined : 'Add at least one step before saving'}
-            sx={{ fontSize: '0.84rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: c.radius.full, cursor: busy ? 'wait' : canSave ? 'pointer' : 'not-allowed', px: 1.5, py: 0.6, opacity: busy || !canSave ? 0.6 : 1, '&:hover': { filter: 'brightness(1.06)' } }}>
+            sx={{ fontSize: '0.8125rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: c.radius.full, cursor: busy ? 'wait' : canSave ? 'pointer' : 'not-allowed', px: 1.5, py: 0.6, opacity: busy || !canSave ? 0.6 : 1, '&:hover': { filter: 'brightness(1.06)' } }}>
             Save
           </Box>
         </DialogActions>
@@ -426,10 +426,10 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
             <CalendarMonthRounded sx={{ fontSize: 18 }} />
           </Box>
           <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
               Schedule this workflow?
             </Typography>
-            <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
               You can have workflows run on a recurring basis, automatically.
             </Typography>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 1.5, mt: 1.25 }}>
@@ -437,7 +437,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
                 onClick={onNotNow}
                 role="button"
                 sx={{
-                  fontSize: '0.86rem', fontWeight: 500, color: c.text.secondary,
+                  fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary,
                   cursor: 'pointer', px: 0.75, py: 0.5,
                   '&:hover': { color: c.text.primary },
                 }}>
@@ -448,7 +448,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
                 role="button"
                 sx={{
                   display: 'inline-flex', alignItems: 'center', gap: 0.5,
-                  fontSize: '0.88rem', fontWeight: 700,
+                  fontSize: '0.875rem', fontWeight: 700,
                   px: 1.75, py: 0.6, borderRadius: c.radius.full,
                   color: '#fff', bgcolor: c.accent.primary,
                   cursor: 'pointer',
@@ -467,7 +467,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
           role={scheduleClickable ? 'button' : undefined}
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.6,
-            color: c.text.secondary, fontSize: '0.86rem', minWidth: 0,
+            color: c.text.secondary, fontSize: '0.875rem', minWidth: 0,
             cursor: scheduleClickable ? 'pointer' : 'default',
             '&:hover': scheduleClickable ? { color: c.text.primary } : {},
           }}>
@@ -480,7 +480,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
           role="button"
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.45,
-            fontSize: '0.82rem', fontWeight: 600,
+            fontSize: '0.8125rem', fontWeight: 600,
             px: 1.25, py: 0.5,
             borderRadius: c.radius.full,
             cursor: 'pointer',
@@ -568,7 +568,7 @@ function AuditTraceLink({ workflowId }: { workflowId: string }) {
       <Tooltip title="Recent edits to this workflow">
         <Box onClick={open} role="button" sx={{
           display: 'inline-flex', alignItems: 'center', gap: 0.3,
-          fontSize: '0.7rem', color: c.text.muted, cursor: 'pointer',
+          fontSize: '0.6875rem', color: c.text.muted, cursor: 'pointer',
           px: 0.5, py: 0.25, borderRadius: c.radius.sm,
           '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated },
         }}>
@@ -583,12 +583,12 @@ function AuditTraceLink({ workflowId }: { workflowId: string }) {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
         <Box sx={{ minWidth: 280, maxWidth: 360, p: 1 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
             RECENT EDITS
           </Typography>
-          {loading && <Typography sx={{ fontSize: '0.78rem', color: c.text.muted }}>Loading…</Typography>}
+          {loading && <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>Loading…</Typography>}
           {!loading && (entries === null || entries.length === 0) && (
-            <Typography sx={{ fontSize: '0.78rem', color: c.text.muted }}>No edits yet.</Typography>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>No edits yet.</Typography>
           )}
           {!loading && entries && entries.map((e, idx) => {
             const fields = Object.keys(e.diff || {}).filter((k) => k !== 'updated_at');
@@ -596,10 +596,10 @@ function AuditTraceLink({ workflowId }: { workflowId: string }) {
             return (
               <Box key={idx} sx={{ display: 'flex', flexDirection: 'column', py: 0.5, borderTop: idx === 0 ? 'none' : `1px solid ${c.border.subtle}` }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  <Typography sx={{ fontSize: '0.78rem', color: c.text.primary, fontWeight: 600 }}>{e.who || 'user'}</Typography>
-                  <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost }}>{relTimeShort(e.ts)}</Typography>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.primary, fontWeight: 600 }}>{e.who || 'user'}</Typography>
+                  <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost }}>{relTimeShort(e.ts)}</Typography>
                 </Box>
-                <Typography sx={{ fontSize: '0.74rem', color: c.text.secondary }}>{summary}</Typography>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary }}>{summary}</Typography>
               </Box>
             );
           })}
@@ -666,20 +666,20 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
     return out;
   }, [filtered]);
   if (!runs || runs.length === 0) {
-    return <Typography sx={{ fontSize: '0.88rem', color: c.text.muted, py: 1.5, textAlign: 'center' }}>No runs yet</Typography>;
+    return <Typography sx={{ fontSize: '0.875rem', color: c.text.muted, py: 1.5, textAlign: 'center' }}>No runs yet</Typography>;
   }
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.75 }}>
         {groups.length > 0 && (
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
             {groups[0].key.toUpperCase()}
           </Typography>
         )}
         <Box sx={{ flex: 1 }} />
         {(['all', 'success', 'failure', 'skipped'] as const).map((k) => (
           <Box key={k} onClick={() => setFilter(k)} role="button" sx={{
-            fontSize: '0.72rem', fontWeight: 600,
+            fontSize: '0.75rem', fontWeight: 600,
             color: filter === k ? c.accent.primary : c.text.muted,
             bgcolor: filter === k ? c.accent.primary + '14' : 'transparent',
             border: `1px solid ${filter === k ? c.accent.primary + '40' : c.border.subtle}`,
@@ -693,7 +693,7 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
       {groups.map(({ key, runs: gRuns }, gi) => (
         <Box key={key} sx={{ display: 'flex', flexDirection: 'column' }}>
           {gi > 0 && (
-            <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mt: 0.5, mb: 0.25 }}>
+            <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mt: 0.5, mb: 0.25 }}>
               {key.toUpperCase()}
             </Typography>
           )}
@@ -705,35 +705,35 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
                 <Box
                   onClick={() => setExpandedId(expanded ? null : r.id)}
                   sx={{ display: 'flex', alignItems: 'center', gap: 1.25, py: 0.6, px: 0.5, cursor: 'pointer', borderRadius: c.radius.sm, '&:hover': { bgcolor: c.bg.elevated } }}>
-                  <Box sx={{ fontSize: '0.72rem', fontWeight: 700, color: statusColor(r.status, c), bgcolor: statusBg(r.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm, minWidth: 64, textAlign: 'center' }}>
+                  <Box sx={{ fontSize: '0.75rem', fontWeight: 700, color: statusColor(r.status, c), bgcolor: statusBg(r.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm, minWidth: 64, textAlign: 'center' }}>
                     {labelForStatus(r.status)}
                   </Box>
                   {showWorkflow && workflowTitleFor ? (
                     <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{workflowTitleFor(r.workflow_id)}</Typography>
-                      <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost }}>{formatRunDate(r.started_at)}</Typography>
+                      <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{workflowTitleFor(r.workflow_id)}</Typography>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>{formatRunDate(r.started_at)}</Typography>
                     </Box>
                   ) : (
-                    <Typography sx={{ fontSize: '0.88rem', color: c.text.primary, flex: 1 }}>{formatRunDate(r.started_at)}</Typography>
+                    <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, flex: 1 }}>{formatRunDate(r.started_at)}</Typography>
                   )}
-                  {dur && <Typography sx={{ fontSize: '0.74rem', color: c.text.ghost }}>{dur}</Typography>}
-                  {r.cost_usd > 0 && <Typography sx={{ fontSize: '0.74rem', color: c.text.ghost }}>${r.cost_usd.toFixed(4)}</Typography>}
+                  {dur && <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>{dur}</Typography>}
+                  {r.cost_usd > 0 && <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>${r.cost_usd.toFixed(4)}</Typography>}
                   {/* Chevron makes the row read as expandable instead of
                       static text. Rotates 180° while open so the affordance
                       stays visible after click. */}
-                  <Box sx={{ fontSize: '0.7rem', color: c.text.ghost, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s ease' }}>▾</Box>
+                  <Box sx={{ fontSize: '0.6875rem', color: c.text.ghost, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s ease' }}>▾</Box>
                 </Box>
                 {expanded && (
                   <Box sx={{ ml: 8, mt: 0.25, mb: 0.75, px: 1, py: 0.75, bgcolor: c.bg.elevated, borderRadius: c.radius.sm, border: `1px solid ${c.border.subtle}`, display: 'flex', alignItems: 'center' }}>
 
                     {r.error ? (
-                      <Typography sx={{ fontSize: '0.78rem', color: c.status.error, lineHeight: 1.4 }}>{r.error}</Typography>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.status.error, lineHeight: 1.4 }}>{r.error}</Typography>
                     ) : r.session_id ? (
-                      <Box onClick={(e) => { e.stopPropagation(); onOpen(r); }} role="button" sx={{ fontSize: '0.78rem', fontWeight: 600, color: c.accent.primary, cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}>
+                      <Box onClick={(e) => { e.stopPropagation(); onOpen(r); }} role="button" sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.accent.primary, cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}>
                         Click to see the full conversation →
                       </Box>
                     ) : (
-                      <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1.4 }}>No session was recorded for this run.</Typography>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1.4 }}>No session was recorded for this run.</Typography>
                     )}
                   </Box>
                 )}
@@ -748,20 +748,20 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
 
 export function HistoryDetail({ run, onBack }: { run: WorkflowRun | null; onBack: () => void }) {
   const c = useClaudeTokens();
-  if (!run) return <Typography sx={{ fontSize: '0.88rem', color: c.text.muted }}>Run not found</Typography>;
+  if (!run) return <Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>Run not found</Typography>;
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <Box onClick={onBack} role="button" sx={{ fontSize: '0.82rem', color: c.text.muted, cursor: 'pointer', '&:hover': { color: c.accent.primary } }}>← back</Box>
-        <Box sx={{ fontSize: '0.72rem', fontWeight: 700, color: statusColor(run.status, c), bgcolor: statusBg(run.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm }}>{labelForStatus(run.status)}</Box>
-        <Typography sx={{ fontSize: '0.88rem', color: c.text.primary, fontWeight: 600 }}>{formatRunDate(run.started_at)}</Typography>
+        <Box onClick={onBack} role="button" sx={{ fontSize: '0.8125rem', color: c.text.muted, cursor: 'pointer', '&:hover': { color: c.accent.primary } }}>← back</Box>
+        <Box sx={{ fontSize: '0.75rem', fontWeight: 700, color: statusColor(run.status, c), bgcolor: statusBg(run.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm }}>{labelForStatus(run.status)}</Box>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, fontWeight: 600 }}>{formatRunDate(run.started_at)}</Typography>
       </Box>
       {run.error && (
-        <Typography sx={{ fontSize: '0.85rem', color: c.status.error, bgcolor: c.status.errorBg, p: 1, borderRadius: c.radius.sm }}>{run.error}</Typography>
+        <Typography sx={{ fontSize: '0.875rem', color: c.status.error, bgcolor: c.status.errorBg, p: 1, borderRadius: c.radius.sm }}>{run.error}</Typography>
       )}
-      <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, lineHeight: 1.5 }}>Started {formatRunDate(run.started_at)}, finished {run.finished_at ? formatRunDate(run.finished_at) : 'in progress'}.</Typography>
+      <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.5 }}>Started {formatRunDate(run.started_at)}, finished {run.finished_at ? formatRunDate(run.finished_at) : 'in progress'}.</Typography>
       {run.session_id && (
-        <Box sx={{ fontSize: '0.82rem', color: c.accent.primary, mt: 0.5 }}>Session: {run.session_id.slice(0, 8)}</Box>
+        <Box sx={{ fontSize: '0.8125rem', color: c.accent.primary, mt: 0.5 }}>Session: {run.session_id.slice(0, 8)}</Box>
       )}
     </Box>
   );
diff --git a/frontend/src/app/pages/Workflows/workflowVisuals.tsx b/frontend/src/app/pages/Workflows/workflowVisuals.tsx
index 7b503fb1..acbd67bd 100644
--- a/frontend/src/app/pages/Workflows/workflowVisuals.tsx
+++ b/frontend/src/app/pages/Workflows/workflowVisuals.tsx
@@ -73,7 +73,7 @@ export function StatusDot({ status }: { status: LastRunStatus | null | undefined
         flexShrink: 0,
       }}>
         <Box sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: dotColor, boxShadow: status === 'failure' ? `0 0 4px ${c.status.error}` : 'none' }} />
-        <Typography sx={{ fontSize: '0.66rem', fontWeight: 700, color: dotColor, letterSpacing: '0.02em' }}>
+        <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: dotColor, letterSpacing: '0.02em' }}>
           {word}
         </Typography>
       </Box>
@@ -115,7 +115,7 @@ export function WeekdayDots({ on_days }: { on_days: number[] }) {
           <Box key={`${lbl}-${idx}`} sx={{
             width: 12, height: 12, borderRadius: '50%',
             display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-            fontSize: '0.6rem', fontWeight: 700,
+            fontSize: '0.625rem', fontWeight: 700,
             color: active ? '#fff' : c.text.ghost,
             bgcolor: active ? c.accent.primary : 'transparent',
             border: `1px solid ${active ? c.accent.primary : c.border.subtle}`,
@@ -149,7 +149,7 @@ export function PermissionChip({ workflow }: { workflow: Workflow }) {
     <Tooltip title={label}>
       <Box sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.35,
-        fontSize: '0.74rem', fontWeight: 500,
+        fontSize: '0.75rem', fontWeight: 500,
         color: c.text.secondary,
         bgcolor: c.bg.elevated,
         border: `1px solid ${c.border.subtle}`,
@@ -158,7 +158,7 @@ export function PermissionChip({ workflow }: { workflow: Workflow }) {
         {tiers.map((t, i) => (
           <React.Fragment key={i}>
             {permIcon(t.kind)}
-            {i < tiers.length - 1 && <Box sx={{ fontSize: '0.7rem', color: c.text.ghost, mx: 0.1 }}>→</Box>}
+            {i < tiers.length - 1 && <Box sx={{ fontSize: '0.6875rem', color: c.text.ghost, mx: 0.1 }}>→</Box>}
           </React.Fragment>
         ))}
       </Box>
@@ -189,7 +189,7 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
           role={enabled ? 'button' : undefined}
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.4,
-            fontSize: '0.74rem', fontWeight: 600,
+            fontSize: '0.75rem', fontWeight: 600,
             color: enabled ? c.accent.primary : c.text.muted,
             bgcolor: enabled ? c.accent.primary + '14' : c.bg.elevated,
             border: `1px solid ${enabled ? c.accent.primary + '40' : c.border.subtle}`,
@@ -211,7 +211,7 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}>
         <Box sx={{ p: 1, display: 'flex', flexDirection: 'column', gap: 0.5, minWidth: 220 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
             QUICK TIME EDIT
           </Typography>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
@@ -223,17 +223,17 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
                 const isPm = sched.hour >= 12;
                 patchSched({ hour: (h12 % 12) + (isPm ? 12 : 0) });
               }}
-              sx={{ fontSize: '0.78rem', '& .MuiSelect-select': { py: 0.4 } }}>
+              sx={{ fontSize: '0.75rem', '& .MuiSelect-select': { py: 0.4 } }}>
               {Array.from({ length: 12 }, (_, i) => i + 1).map((h) => (
                 <MenuItem key={h} value={h}>{h}</MenuItem>
               ))}
             </Select>
-            <Typography sx={{ fontSize: '0.85rem' }}>:</Typography>
+            <Typography sx={{ fontSize: '0.875rem' }}>:</Typography>
             <Select
               size="small"
               value={sched.minute}
               onChange={(e) => patchSched({ minute: Number(e.target.value) })}
-              sx={{ fontSize: '0.78rem', '& .MuiSelect-select': { py: 0.4 } }}>
+              sx={{ fontSize: '0.75rem', '& .MuiSelect-select': { py: 0.4 } }}>
               {[0, 15, 30, 45].map((m) => (
                 <MenuItem key={m} value={m}>{String(m).padStart(2, '0')}</MenuItem>
               ))}
@@ -247,12 +247,12 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
                 if (wasPm === willBePm) return;
                 patchSched({ hour: willBePm ? sched.hour + 12 : sched.hour - 12 });
               }}
-              sx={{ fontSize: '0.78rem', '& .MuiSelect-select': { py: 0.4 } }}>
+              sx={{ fontSize: '0.75rem', '& .MuiSelect-select': { py: 0.4 } }}>
               <MenuItem value="AM">AM</MenuItem>
               <MenuItem value="PM">PM</MenuItem>
             </Select>
           </Box>
-          <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost, mt: 0.25 }}>
+          <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, mt: 0.25 }}>
             Saved as you change.
           </Typography>
         </Box>
@@ -330,7 +330,7 @@ export function CostChip({ workflow, connectionMode }: { workflow: Workflow; con
 function chipSx(c: ReturnType<typeof useClaudeTokens>) {
   return {
     display: 'inline-flex', alignItems: 'center', gap: 0.3,
-    fontSize: '0.74rem', fontWeight: 600,
+    fontSize: '0.75rem', fontWeight: 600,
     color: c.text.secondary,
     bgcolor: c.bg.elevated,
     border: `1px solid ${c.border.subtle}`,
@@ -345,7 +345,7 @@ export function LastFiredHint({ workflow }: { workflow: Workflow }) {
   const ms = Date.now() - new Date(workflow.last_run_at).getTime();
   const ago = relTime(ms);
   return (
-    <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost }}>Last ran {ago}</Typography>
+    <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>Last ran {ago}</Typography>
   );
 }
 
@@ -408,7 +408,7 @@ export function StreakBadge({ runs }: { runs: WorkflowRun[] | undefined }) {
     <Tooltip title={`${n} successful runs in a row.`}>
       <Box sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.3,
-        fontSize: '0.72rem', fontWeight: 700,
+        fontSize: '0.75rem', fontWeight: 700,
         color: c.status.success,
         bgcolor: c.status.successBg,
         border: `1px solid ${c.status.success + '60'}`,
diff --git a/frontend/src/shared/styles/claudeTokens.ts b/frontend/src/shared/styles/claudeTokens.ts
index 5efc825a..3e1c7bba 100644
--- a/frontend/src/shared/styles/claudeTokens.ts
+++ b/frontend/src/shared/styles/claudeTokens.ts
@@ -2,6 +2,8 @@
 // reads as noise; snap to these 7 steps so type feels intentional and consistent. px comments assume a
 // 16px root. Use c.font.size.* instead of a raw rem string in anything you touch.
 export interface FontSizeScale {
+  micro: string;   // 10px, densest chrome (badges, kbd hints)
+  xxs: string;     // 11px, tiny meta / timestamps
   xs: string;      // 12px, captions, meta, micro labels
   sm: string;      // 13px, secondary / small body
   base: string;    // 14px, default body + most UI text
@@ -12,6 +14,8 @@ export interface FontSizeScale {
 }
 
 export const fontSize: FontSizeScale = {
+  micro: '0.625rem',
+  xxs: '0.6875rem',
   xs: '0.75rem',
   sm: '0.8125rem',
   base: '0.875rem',
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index 422eae87..d03e510a 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -124,7 +124,7 @@ const VoiceOverlay: React.FC = () => {
         WebkitBackdropFilter: 'blur(20px) saturate(160%)',
         boxShadow: '0 8px 28px rgba(0,0,0,0.4)',
         color: 'rgba(255,255,255,0.92)',
-        fontSize: '0.82rem',
+        fontSize: '0.8125rem',
         fontWeight: 500,
         '@keyframes vin': { from: { opacity: 0, transform: 'translate(-50%, 6px)' }, to: { opacity: 1, transform: 'translate(-50%, 0)' } },
         animation: 'vin 0.16s ease-out',