diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx
index 92d291b..c81dabd 100644
--- a/web/src/components/AppShell.tsx
+++ b/web/src/components/AppShell.tsx
@@ -114,7 +114,7 @@ export function AppShell() {
               title={`Switch to ${density === "comfortable" ? "compact" : "comfortable"} view`}
               style={{
                 padding: "0.2rem 0.5rem",
-                fontSize: "0.7rem",
+                fontSize: "var(--font-sm)",
                 borderRadius: "0.3rem",
                 cursor: "pointer",
                 border: "1px solid var(--ctp-surface1)",
@@ -130,7 +130,7 @@ export function AppShell() {
               onClick={logout}
               style={{
                 padding: "0.35rem 0.75rem",
-                fontSize: "0.8rem",
+                fontSize: "var(--font-table)",
                 borderRadius: "0.4rem",
                 cursor: "pointer",
                 border: "none",
diff --git a/web/src/components/ContextMenu.tsx b/web/src/components/ContextMenu.tsx
index a3e71d3..1c53131 100644
--- a/web/src/components/ContextMenu.tsx
+++ b/web/src/components/ContextMenu.tsx
@@ -84,7 +84,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
               background: "none",
               border: "none",
               color: item.disabled ? "var(--ctp-overlay0)" : "var(--ctp-text)",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
               cursor: item.disabled ? "default" : "pointer",
               textAlign: "left",
             }}
diff --git a/web/src/components/TagInput.tsx b/web/src/components/TagInput.tsx
index 9d9b640..2da2439 100644
--- a/web/src/components/TagInput.tsx
+++ b/web/src/components/TagInput.tsx
@@ -186,7 +186,7 @@ export function TagInput({
             outline: "none",
             background: "transparent",
             color: "var(--ctp-text)",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
             padding: "0.1rem 0",
           }}
         />
@@ -220,7 +220,7 @@ export function TagInput({
                 height: "28px",
                 display: "flex",
                 alignItems: "center",
-                fontSize: "0.8rem",
+                fontSize: "var(--font-table)",
                 cursor: "pointer",
                 color: "var(--ctp-text)",
                 backgroundColor:
diff --git a/web/src/components/audit/AuditDetailPanel.tsx b/web/src/components/audit/AuditDetailPanel.tsx
index ba5819a..f87df62 100644
--- a/web/src/components/audit/AuditDetailPanel.tsx
+++ b/web/src/components/audit/AuditDetailPanel.tsx
@@ -210,7 +210,7 @@ export function AuditDetailPanel({
             fontFamily: "'JetBrains Mono', monospace",
             color: "var(--ctp-peach)",
             fontWeight: 600,
-            fontSize: "1rem",
+            fontSize: "var(--font-body)",
           }}
         >
           {audit.part_number}
@@ -263,7 +263,7 @@ export function AuditDetailPanel({
           style={{
             padding: "0.5rem 1rem",
             color: "var(--ctp-red)",
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
           }}
         >
           {error}
@@ -274,7 +274,7 @@ export function AuditDetailPanel({
       <div
         style={{
           padding: "0.5rem 1rem",
-          fontSize: "0.85rem",
+          fontSize: "var(--font-body)",
           color: "var(--ctp-subtext1)",
           borderBottom: "1px solid var(--ctp-surface0)",
           flexShrink: 0,
@@ -362,7 +362,7 @@ function FieldGroup({
       <div
         style={{
           padding: "0.3rem 1rem",
-          fontSize: "0.7rem",
+          fontSize: "var(--font-sm)",
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.05em",
@@ -434,7 +434,7 @@ function FieldRow({
         style={{
           width: 140,
           flexShrink: 0,
-          fontSize: "0.78rem",
+          fontSize: "var(--font-table)",
           color: "var(--ctp-subtext1)",
         }}
         title={`Weight: ${field.weight}`}
@@ -445,7 +445,7 @@ function FieldRow({
             style={{
               marginLeft: 4,
               color: "var(--ctp-red)",
-              fontSize: "0.65rem",
+              fontSize: "var(--font-xs)",
             }}
           >
             *
@@ -456,7 +456,7 @@ function FieldRow({
         <div
           style={{
             flex: 1,
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             color: field.filled ? "var(--ctp-text)" : "var(--ctp-subtext0)",
             fontStyle: field.filled ? "normal" : "italic",
           }}
@@ -478,7 +478,7 @@ function FieldRow({
           style={{
             flex: 1,
             padding: "0.2rem 0.4rem",
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             border: "1px solid var(--ctp-surface1)",
             borderRadius: "0.3rem",
             backgroundColor: "var(--ctp-surface0)",
@@ -493,7 +493,7 @@ function FieldRow({
 
 const closeBtnStyle: React.CSSProperties = {
   padding: "0.2rem 0.5rem",
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   border: "none",
   borderRadius: "0.3rem",
   backgroundColor: "var(--ctp-surface1)",
diff --git a/web/src/components/audit/AuditSummaryBar.tsx b/web/src/components/audit/AuditSummaryBar.tsx
index 503037d..1aaa046 100644
--- a/web/src/components/audit/AuditSummaryBar.tsx
+++ b/web/src/components/audit/AuditSummaryBar.tsx
@@ -51,7 +51,7 @@ export function AuditSummaryBar({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                fontSize: "0.7rem",
+                fontSize: "var(--font-sm)",
                 fontWeight: 600,
                 color: "var(--ctp-crust)",
                 transition: "all 0.15s ease",
@@ -71,7 +71,7 @@ export function AuditSummaryBar({
           display: "flex",
           gap: "1.5rem",
           marginTop: "0.4rem",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
           color: "var(--ctp-subtext0)",
         }}
       >
diff --git a/web/src/components/audit/AuditTable.tsx b/web/src/components/audit/AuditTable.tsx
index c71e095..fe92e72 100644
--- a/web/src/components/audit/AuditTable.tsx
+++ b/web/src/components/audit/AuditTable.tsx
@@ -55,7 +55,7 @@ export function AuditTable({
         style={{
           width: "100%",
           borderCollapse: "collapse",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
         }}
       >
         <thead>
diff --git a/web/src/components/items/BOMTab.tsx b/web/src/components/items/BOMTab.tsx
index cf44fd2..a31892f 100644
--- a/web/src/components/items/BOMTab.tsx
+++ b/web/src/components/items/BOMTab.tsx
@@ -119,7 +119,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
 
   const inputStyle: React.CSSProperties = {
     padding: "0.2rem 0.4rem",
-    fontSize: "0.8rem",
+    fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-base)",
     border: "1px solid var(--ctp-surface1)",
     borderRadius: "0.3rem",
@@ -226,7 +226,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
           marginBottom: "0.5rem",
         }}
       >
-        <span style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
+        <span
+          style={{ fontSize: "var(--font-body)", color: "var(--ctp-subtext1)" }}
+        >
           {entries.length} entries
         </span>
         <span style={{ flex: 1 }} />
@@ -285,7 +287,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
           style={{
             width: "100%",
             borderCollapse: "collapse",
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
           }}
         >
           <thead>
@@ -419,7 +421,7 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.7rem",
+  fontSize: "var(--font-sm)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   whiteSpace: "nowrap",
@@ -468,7 +470,7 @@ const saveBtnStyle: React.CSSProperties = {
 const sourceBadgeBase: React.CSSProperties = {
   padding: "0.1rem 0.4rem",
   borderRadius: "1rem",
-  fontSize: "0.7rem",
+  fontSize: "var(--font-sm)",
   fontWeight: 500,
 };
 
diff --git a/web/src/components/items/CategoryPicker.tsx b/web/src/components/items/CategoryPicker.tsx
index 4b64592..5630ef4 100644
--- a/web/src/components/items/CategoryPicker.tsx
+++ b/web/src/components/items/CategoryPicker.tsx
@@ -134,7 +134,7 @@ export function CategoryPicker({
         style={{
           width: "100%",
           padding: "0.4rem 0.5rem",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
           border: "none",
           borderBottom: "1px solid var(--ctp-surface1)",
           backgroundColor: "var(--ctp-mantle)",
@@ -152,7 +152,7 @@ export function CategoryPicker({
               padding: "0.75rem",
               textAlign: "center",
               color: "var(--ctp-subtext0)",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
             }}
           >
             Select a domain to see categories
@@ -163,7 +163,7 @@ export function CategoryPicker({
               padding: "0.75rem",
               textAlign: "center",
               color: "var(--ctp-subtext0)",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
             }}
           >
             No categories found
@@ -182,7 +182,7 @@ export function CategoryPicker({
                   gap: "0.5rem",
                   padding: "0.3rem 0.5rem",
                   cursor: "pointer",
-                  fontSize: "0.8rem",
+                  fontSize: "var(--font-table)",
                   backgroundColor: isSelected
                     ? "rgba(203,166,247,0.12)"
                     : "transparent",
diff --git a/web/src/components/items/CreateItemPane.tsx b/web/src/components/items/CreateItemPane.tsx
index cac706f..f45e523 100644
--- a/web/src/components/items/CreateItemPane.tsx
+++ b/web/src/components/items/CreateItemPane.tsx
@@ -263,7 +263,7 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
           style={{
             color: "var(--ctp-green)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           New Item
@@ -400,13 +400,19 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
                 />
               ) : thumbnailFile?.uploadStatus === "uploading" ? (
                 <span
-                  style={{ fontSize: "0.8rem", color: "var(--ctp-subtext0)" }}
+                  style={{
+                    fontSize: "var(--font-table)",
+                    color: "var(--ctp-subtext0)",
+                  }}
                 >
                   Uploading... {thumbnailFile.uploadProgress}%
                 </span>
               ) : (
                 <span
-                  style={{ fontSize: "0.8rem", color: "var(--ctp-subtext0)" }}
+                  style={{
+                    fontSize: "var(--font-table)",
+                    color: "var(--ctp-subtext0)",
+                  }}
                 >
                   Click to upload
                 </span>
@@ -571,7 +577,7 @@ function SectionHeader({ children }: { children: React.ReactNode }) {
     >
       <span
         style={{
-          fontSize: "0.7rem",
+          fontSize: "var(--font-sm)",
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.05em",
@@ -608,7 +614,7 @@ function SidebarSection({
     >
       <div
         style={{
-          fontSize: "0.7rem",
+          fontSize: "var(--font-sm)",
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.05em",
@@ -629,7 +635,7 @@ function MetaRow({ label, value }: { label: string; value: string }) {
       style={{
         display: "flex",
         justifyContent: "space-between",
-        fontSize: "0.8rem",
+        fontSize: "var(--font-table)",
         padding: "0.15rem 0",
       }}
     >
@@ -699,7 +705,7 @@ const cancelBtnStyle: React.CSSProperties = {
 const inputStyle: React.CSSProperties = {
   width: "100%",
   padding: "0.35rem 0.5rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.3rem",
@@ -719,5 +725,5 @@ const errorStyle: React.CSSProperties = {
   padding: "0.5rem",
   borderRadius: "0.3rem",
   marginBottom: "0.5rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
diff --git a/web/src/components/items/DeleteItemPane.tsx b/web/src/components/items/DeleteItemPane.tsx
index 9b0026a..93800be 100644
--- a/web/src/components/items/DeleteItemPane.tsx
+++ b/web/src/components/items/DeleteItemPane.tsx
@@ -45,7 +45,7 @@ export function DeleteItemPane({
           style={{
             color: "var(--ctp-red)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Delete Item
@@ -74,7 +74,7 @@ export function DeleteItemPane({
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem 1rem",
               borderRadius: "0.3rem",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
               width: "100%",
               textAlign: "center",
             }}
@@ -86,7 +86,7 @@ export function DeleteItemPane({
         <div style={{ textAlign: "center" }}>
           <p
             style={{
-              fontSize: "0.9rem",
+              fontSize: "var(--font-body)",
               color: "var(--ctp-text)",
               marginBottom: "0.5rem",
             }}
@@ -97,7 +97,7 @@ export function DeleteItemPane({
             style={{
               fontFamily: "'JetBrains Mono', monospace",
               color: "var(--ctp-peach)",
-              fontSize: "1.1rem",
+              fontSize: "var(--font-title)",
               fontWeight: 600,
             }}
           >
@@ -108,7 +108,7 @@ export function DeleteItemPane({
         <p
           style={{
             color: "var(--ctp-subtext0)",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
             textAlign: "center",
             maxWidth: 300,
           }}
diff --git a/web/src/components/items/EditItemPane.tsx b/web/src/components/items/EditItemPane.tsx
index 10ebdaa..39facf0 100644
--- a/web/src/components/items/EditItemPane.tsx
+++ b/web/src/components/items/EditItemPane.tsx
@@ -79,7 +79,7 @@ export function EditItemPane({
           style={{
             color: "var(--ctp-blue)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Edit {partNumber}
@@ -116,7 +116,7 @@ export function EditItemPane({
               padding: "0.5rem",
               borderRadius: "0.3rem",
               marginBottom: "0.5rem",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {error}
@@ -209,7 +209,7 @@ function FormGroup({
 const inputStyle: React.CSSProperties = {
   width: "100%",
   padding: "0.35rem 0.5rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.3rem",
diff --git a/web/src/components/items/FileDropZone.tsx b/web/src/components/items/FileDropZone.tsx
index c6585a1..59018f6 100644
--- a/web/src/components/items/FileDropZone.tsx
+++ b/web/src/components/items/FileDropZone.tsx
@@ -76,7 +76,9 @@ export function FileDropZone({
           transition: "all 0.15s ease",
         }}
       >
-        <div style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
+        <div
+          style={{ fontSize: "var(--font-body)", color: "var(--ctp-subtext1)" }}
+        >
           Drop files here or{" "}
           <span style={{ color: "var(--ctp-mauve)", fontWeight: 600 }}>
             browse
@@ -85,7 +87,7 @@ export function FileDropZone({
         {accept && (
           <div
             style={{
-              fontSize: "0.7rem",
+              fontSize: "var(--font-sm)",
               color: "var(--ctp-overlay0)",
               marginTop: "0.25rem",
             }}
@@ -157,7 +159,7 @@ function FileRow({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: "0.6rem",
+          fontSize: "var(--font-xs)",
           fontWeight: 700,
           color: "var(--ctp-crust)",
           flexShrink: 0,
@@ -170,7 +172,7 @@ function FileRow({
       <div style={{ flex: 1, minWidth: 0 }}>
         <div
           style={{
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             color: "var(--ctp-text)",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -179,7 +181,9 @@ function FileRow({
         >
           {attachment.file.name}
         </div>
-        <div style={{ fontSize: "0.7rem", color: "var(--ctp-overlay0)" }}>
+        <div
+          style={{ fontSize: "var(--font-sm)", color: "var(--ctp-overlay0)" }}
+        >
           {formatSize(attachment.file.size)}
           {attachment.uploadStatus === "error" && (
             <span style={{ color: "var(--ctp-red)", marginLeft: "0.5rem" }}>
@@ -215,7 +219,7 @@ function FileRow({
       {attachment.uploadStatus === "complete" ? (
         <span
           style={{
-            fontSize: "0.7rem",
+            fontSize: "var(--font-sm)",
             color: "var(--ctp-green)",
             flexShrink: 0,
           }}
@@ -233,7 +237,7 @@ function FileRow({
           background: "none",
           border: "none",
           cursor: "pointer",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
           color: hovered ? "var(--ctp-red)" : "var(--ctp-overlay0)",
           padding: "0 0.2rem",
           flexShrink: 0,
diff --git a/web/src/components/items/ImportItemsPane.tsx b/web/src/components/items/ImportItemsPane.tsx
index b55a42b..b3abe89 100644
--- a/web/src/components/items/ImportItemsPane.tsx
+++ b/web/src/components/items/ImportItemsPane.tsx
@@ -72,7 +72,7 @@ export function ImportItemsPane({
           style={{
             color: "var(--ctp-yellow)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Import Items (CSV)
@@ -92,7 +92,7 @@ export function ImportItemsPane({
               padding: "0.5rem",
               borderRadius: "0.3rem",
               marginBottom: "0.5rem",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {error}
@@ -102,7 +102,7 @@ export function ImportItemsPane({
         {/* Instructions */}
         <div
           style={{
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             color: "var(--ctp-subtext0)",
             marginBottom: "0.75rem",
           }}
@@ -120,7 +120,10 @@ export function ImportItemsPane({
           </p>
           <a
             href="/api/items/template.csv"
-            style={{ color: "var(--ctp-sapphire)", fontSize: "0.8rem" }}
+            style={{
+              color: "var(--ctp-sapphire)",
+              fontSize: "var(--font-table)",
+            }}
           >
             Download CSV template
           </a>
@@ -149,7 +152,7 @@ export function ImportItemsPane({
               color: "var(--ctp-subtext1)",
               cursor: "pointer",
               width: "100%",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {file ? file.name : "Choose CSV file..."}
@@ -162,7 +165,7 @@ export function ImportItemsPane({
             display: "flex",
             alignItems: "center",
             gap: "0.4rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
             color: "var(--ctp-subtext1)",
             marginBottom: "0.75rem",
           }}
@@ -225,7 +228,7 @@ export function ImportItemsPane({
               padding: "0.5rem",
               backgroundColor: "var(--ctp-surface0)",
               borderRadius: "0.4rem",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
             }}
           >
             <p>
diff --git a/web/src/components/items/ItemDetail.tsx b/web/src/components/items/ItemDetail.tsx
index c663c82..8ac2baa 100644
--- a/web/src/components/items/ItemDetail.tsx
+++ b/web/src/components/items/ItemDetail.tsx
@@ -96,7 +96,7 @@ export function ItemDetail({
             fontFamily: "'JetBrains Mono', monospace",
             color: "var(--ctp-peach)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           {item.part_number}
@@ -105,7 +105,7 @@ export function ItemDetail({
           style={{
             padding: "0.1rem 0.5rem",
             borderRadius: "1rem",
-            fontSize: "0.7rem",
+            fontSize: "var(--font-sm)",
             fontWeight: 500,
             backgroundColor: tc.bg,
             color: tc.color,
@@ -158,7 +158,7 @@ export function ItemDetail({
             onClick={() => setActiveTab(tab.key)}
             style={{
               padding: "0.4rem 0.75rem",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
               border: "none",
               borderBottom:
                 activeTab === tab.key
@@ -204,6 +204,6 @@ const headerBtnStyle: React.CSSProperties = {
   border: "none",
   cursor: "pointer",
   color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   padding: "0.2rem 0.4rem",
 };
diff --git a/web/src/components/items/MainTab.tsx b/web/src/components/items/MainTab.tsx
index 95eafea..efe3503 100644
--- a/web/src/components/items/MainTab.tsx
+++ b/web/src/components/items/MainTab.tsx
@@ -85,7 +85,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
         display: "flex",
         gap: "1rem",
         padding: "0.3rem 0",
-        fontSize: "0.85rem",
+        fontSize: "var(--font-body)",
       }}
     >
       <span style={{ width: 120, flexShrink: 0, color: "var(--ctp-subtext0)" }}>
@@ -135,7 +135,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
             padding: "0.5rem",
             backgroundColor: "var(--ctp-surface0)",
             borderRadius: "0.4rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           <div
@@ -230,7 +230,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                   onClick={() => void handleAddProject()}
                   style={{
                     padding: "0.1rem 0.4rem",
-                    fontSize: "0.7rem",
+                    fontSize: "var(--font-sm)",
                     border: "none",
                     backgroundColor: "var(--ctp-mauve)",
                     color: "var(--ctp-crust)",
@@ -270,7 +270,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
               display: "flex",
               alignItems: "center",
               gap: "0.75rem",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {latestRev.file_size != null && (
@@ -294,7 +294,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
               }}
               style={{
                 padding: "0.2rem 0.5rem",
-                fontSize: "0.8rem",
+                fontSize: "var(--font-table)",
                 border: "none",
                 backgroundColor: "var(--ctp-surface1)",
                 color: "var(--ctp-text)",
diff --git a/web/src/components/items/PropertiesTab.tsx b/web/src/components/items/PropertiesTab.tsx
index d083260..5136a7b 100644
--- a/web/src/components/items/PropertiesTab.tsx
+++ b/web/src/components/items/PropertiesTab.tsx
@@ -126,7 +126,7 @@ export function PropertiesTab({
 
   const inputStyle: React.CSSProperties = {
     padding: "0.25rem 0.4rem",
-    fontSize: "0.8rem",
+    fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-base)",
     border: "1px solid var(--ctp-surface1)",
     borderRadius: "0.3rem",
@@ -163,7 +163,7 @@ export function PropertiesTab({
             disabled={saving}
             style={{
               padding: "0.3rem 0.75rem",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
               border: "none",
               borderRadius: "0.3rem",
               backgroundColor: "var(--ctp-mauve)",
@@ -271,7 +271,7 @@ export function PropertiesTab({
               minHeight: 200,
               padding: "0.5rem",
               fontFamily: "'JetBrains Mono', monospace",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
               backgroundColor: "var(--ctp-base)",
               border: "1px solid var(--ctp-surface1)",
               borderRadius: "0.4rem",
@@ -283,7 +283,7 @@ export function PropertiesTab({
             <div
               style={{
                 color: "var(--ctp-red)",
-                fontSize: "0.8rem",
+                fontSize: "var(--font-table)",
                 marginTop: "0.25rem",
               }}
             >
@@ -298,7 +298,7 @@ export function PropertiesTab({
 
 const tabBtn: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   border: "none",
   borderRadius: "0.3rem",
   backgroundColor: "var(--ctp-surface0)",
diff --git a/web/src/components/items/RevisionsTab.tsx b/web/src/components/items/RevisionsTab.tsx
index a87de4e..5b19ac9 100644
--- a/web/src/components/items/RevisionsTab.tsx
+++ b/web/src/components/items/RevisionsTab.tsx
@@ -98,7 +98,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
 
   const selectStyle: React.CSSProperties = {
     padding: "0.25rem 0.4rem",
-    fontSize: "0.8rem",
+    fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-surface0)",
     border: "1px solid var(--ctp-surface1)",
     borderRadius: "0.3rem",
@@ -145,7 +145,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
           disabled={!compareFrom || !compareTo}
           style={{
             padding: "0.25rem 0.5rem",
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             border: "none",
             borderRadius: "0.3rem",
             backgroundColor: "var(--ctp-mauve)",
@@ -165,7 +165,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
             padding: "0.5rem",
             backgroundColor: "var(--ctp-surface0)",
             borderRadius: "0.4rem",
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             marginBottom: "0.75rem",
             fontFamily: "'JetBrains Mono', monospace",
           }}
@@ -215,7 +215,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
         style={{
           width: "100%",
           borderCollapse: "collapse",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
         }}
       >
         <thead>
@@ -337,7 +337,7 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
   fontWeight: 600,
-  fontSize: "0.7rem",
+  fontSize: "var(--font-sm)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
 };
diff --git a/web/src/components/items/WhereUsedTab.tsx b/web/src/components/items/WhereUsedTab.tsx
index 7246545..c1ccb76 100644
--- a/web/src/components/items/WhereUsedTab.tsx
+++ b/web/src/components/items/WhereUsedTab.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { get } from '../../api/client';
-import type { WhereUsedEntry } from '../../api/types';
+import { useState, useEffect } from "react";
+import { get } from "../../api/client";
+import type { WhereUsedEntry } from "../../api/types";
 
 interface WhereUsedTabProps {
   partNumber: string;
@@ -12,20 +12,35 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
 
   useEffect(() => {
     setLoading(true);
-    get<WhereUsedEntry[]>(`/api/items/${encodeURIComponent(partNumber)}/bom/where-used`)
+    get<WhereUsedEntry[]>(
+      `/api/items/${encodeURIComponent(partNumber)}/bom/where-used`,
+    )
       .then(setEntries)
       .catch(() => setEntries([]))
       .finally(() => setLoading(false));
   }, [partNumber]);
 
-  if (loading) return <div style={{ color: 'var(--ctp-subtext0)' }}>Loading where-used...</div>;
+  if (loading)
+    return (
+      <div style={{ color: "var(--ctp-subtext0)" }}>Loading where-used...</div>
+    );
 
   if (entries.length === 0) {
-    return <div style={{ color: 'var(--ctp-subtext0)', padding: '1rem' }}>Not used in any assemblies.</div>;
+    return (
+      <div style={{ color: "var(--ctp-subtext0)", padding: "1rem" }}>
+        Not used in any assemblies.
+      </div>
+    );
   }
 
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
+    <table
+      style={{
+        width: "100%",
+        borderCollapse: "collapse",
+        fontSize: "var(--font-table)",
+      }}
+    >
       <thead>
         <tr>
           <th style={thStyle}>Parent PN</th>
@@ -36,13 +51,25 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
       </thead>
       <tbody>
         {entries.map((e, idx) => (
-          <tr key={e.id} style={{ backgroundColor: idx % 2 === 0 ? 'var(--ctp-base)' : 'var(--ctp-surface0)' }}>
-            <td style={{ ...tdStyle, fontFamily: "'JetBrains Mono', monospace", color: 'var(--ctp-peach)' }}>
+          <tr
+            key={e.id}
+            style={{
+              backgroundColor:
+                idx % 2 === 0 ? "var(--ctp-base)" : "var(--ctp-surface0)",
+            }}
+          >
+            <td
+              style={{
+                ...tdStyle,
+                fontFamily: "'JetBrains Mono', monospace",
+                color: "var(--ctp-peach)",
+              }}
+            >
               {e.parent_part_number}
             </td>
             <td style={tdStyle}>{e.parent_description}</td>
             <td style={tdStyle}>{e.rel_type}</td>
-            <td style={tdStyle}>{e.quantity ?? '—'}</td>
+            <td style={tdStyle}>{e.quantity ?? "—"}</td>
           </tr>
         ))}
       </tbody>
@@ -51,10 +78,18 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
 }
 
 const thStyle: React.CSSProperties = {
-  padding: '0.3rem 0.5rem', textAlign: 'left', borderBottom: '1px solid var(--ctp-surface1)',
-  color: 'var(--ctp-subtext1)', fontWeight: 600, fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.05em',
+  padding: "0.3rem 0.5rem",
+  textAlign: "left",
+  borderBottom: "1px solid var(--ctp-surface1)",
+  color: "var(--ctp-subtext1)",
+  fontWeight: 600,
+  fontSize: "var(--font-sm)",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
 };
 
 const tdStyle: React.CSSProperties = {
-  padding: '0.25rem 0.5rem', borderBottom: '1px solid var(--ctp-surface0)', whiteSpace: 'nowrap',
+  padding: "0.25rem 0.5rem",
+  borderBottom: "1px solid var(--ctp-surface0)",
+  whiteSpace: "nowrap",
 };
diff --git a/web/src/pages/AuditPage.tsx b/web/src/pages/AuditPage.tsx
index dc70813..d36f237 100644
--- a/web/src/pages/AuditPage.tsx
+++ b/web/src/pages/AuditPage.tsx
@@ -57,7 +57,7 @@ export function AuditPage() {
           style={{
             color: "var(--ctp-red)",
             padding: "0.5rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Error: {error}
diff --git a/web/src/pages/ItemsPage.tsx b/web/src/pages/ItemsPage.tsx
index 2c4a8da..26ffd35 100644
--- a/web/src/pages/ItemsPage.tsx
+++ b/web/src/pages/ItemsPage.tsx
@@ -179,7 +179,7 @@ export function ItemsPage() {
           style={{
             color: "var(--ctp-red)",
             padding: "0.5rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Error: {error}
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 33af26f..899756d 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -78,7 +78,7 @@ export function LoginPage() {
                 style={{
                   padding: "0 1rem",
                   color: "var(--ctp-overlay0)",
-                  fontSize: "0.85rem",
+                  fontSize: "var(--font-body)",
                 }}
               >
                 or
@@ -123,7 +123,7 @@ const titleStyle: React.CSSProperties = {
 const subtitleStyle: React.CSSProperties = {
   color: "var(--ctp-subtext0)",
   textAlign: "center",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
   marginBottom: "2rem",
 };
 
@@ -134,7 +134,7 @@ const errorStyle: React.CSSProperties = {
   padding: "0.75rem 1rem",
   borderRadius: "0.5rem",
   marginBottom: "1rem",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const formGroupStyle: React.CSSProperties = {
@@ -146,7 +146,7 @@ const labelStyle: React.CSSProperties = {
   marginBottom: "0.5rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const inputStyle: React.CSSProperties = {
@@ -156,7 +156,7 @@ const inputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.5rem",
   color: "var(--ctp-text)",
-  fontSize: "1rem",
+  fontSize: "var(--font-body)",
   boxSizing: "border-box",
 };
 
diff --git a/web/src/pages/ProjectsPage.tsx b/web/src/pages/ProjectsPage.tsx
index 7adf42c..d1aaa73 100644
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -338,7 +338,7 @@ export function ProjectsPage() {
               style={{
                 color: "var(--ctp-red)",
                 marginTop: "0.5rem",
-                fontSize: "0.85rem",
+                fontSize: "var(--font-body)",
               }}
             >
               This action cannot be undone.
@@ -520,7 +520,7 @@ const formHeaderStyle: React.CSSProperties = {
   alignItems: "center",
   padding: "0.5rem 1rem",
   color: "var(--ctp-crust)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const formCloseStyle: React.CSSProperties = {
@@ -540,7 +540,7 @@ const errorBannerStyle: React.CSSProperties = {
   padding: "0.5rem 0.75rem",
   borderRadius: "0.4rem",
   marginBottom: "0.75rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const fieldStyle: React.CSSProperties = {
@@ -552,7 +552,7 @@ const labelStyle: React.CSSProperties = {
   marginBottom: "0.35rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const inputStyle: React.CSSProperties = {
@@ -562,7 +562,7 @@ const inputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.4rem",
   color: "var(--ctp-text)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
   boxSizing: "border-box",
 };
 
@@ -579,7 +579,7 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   cursor: "pointer",
@@ -589,5 +589,5 @@ const thStyle: React.CSSProperties = {
 const tdStyle: React.CSSProperties = {
   padding: "0.35rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
diff --git a/web/src/pages/SchemasPage.tsx b/web/src/pages/SchemasPage.tsx
index 6b5d057..4d572e4 100644
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -385,7 +385,7 @@ function SegmentBlock({
           style={{
             color: "var(--ctp-subtext0)",
             marginBottom: "0.5rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           {segment.description}
@@ -419,7 +419,9 @@ function SegmentBlock({
                   return (
                     <tr key={code}>
                       <td style={tdStyle}>
-                        <code style={{ fontSize: "0.85rem" }}>{code}</code>
+                        <code style={{ fontSize: "var(--font-body)" }}>
+                          {code}
+                        </code>
                       </td>
                       <td style={tdStyle}>
                         <form
@@ -483,13 +485,15 @@ function SegmentBlock({
                       style={{ backgroundColor: "rgba(243, 139, 168, 0.1)" }}
                     >
                       <td style={tdStyle}>
-                        <code style={{ fontSize: "0.85rem" }}>{code}</code>
+                        <code style={{ fontSize: "var(--font-body)" }}>
+                          {code}
+                        </code>
                       </td>
                       <td style={tdStyle}>
                         <span
                           style={{
                             color: "var(--ctp-red)",
-                            fontSize: "0.85rem",
+                            fontSize: "var(--font-body)",
                           }}
                         >
                           Delete this value?
@@ -531,7 +535,9 @@ function SegmentBlock({
                 return (
                   <tr key={code}>
                     <td style={tdStyle}>
-                      <code style={{ fontSize: "0.85rem" }}>{code}</code>
+                      <code style={{ fontSize: "var(--font-body)" }}>
+                        {code}
+                      </code>
                     </td>
                     <td style={tdStyle}>{desc}</td>
                     {isEditor && (
@@ -674,7 +680,7 @@ const codeStyle: React.CSSProperties = {
   background: "var(--ctp-surface1)",
   padding: "0.25rem 0.5rem",
   borderRadius: "0.25rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const segmentStyle: React.CSSProperties = {
@@ -706,7 +712,7 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
 };
@@ -714,7 +720,7 @@ const thStyle: React.CSSProperties = {
 const tdStyle: React.CSSProperties = {
   padding: "0.3rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const btnTinyStyle: React.CSSProperties = {
@@ -745,7 +751,7 @@ const inlineInputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.25rem",
   color: "var(--ctp-text)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   width: "100%",
   boxSizing: "border-box",
 };
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 46d3331..2acdcb8 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -116,7 +116,7 @@ export function SettingsPage() {
                   display: "inline-block",
                   padding: "0.15rem 0.5rem",
                   borderRadius: "1rem",
-                  fontSize: "0.8rem",
+                  fontSize: "var(--font-table)",
                   fontWeight: 600,
                   ...roleBadgeStyles[user.role],
                 }}
@@ -137,7 +137,7 @@ export function SettingsPage() {
           style={{
             color: "var(--ctp-subtext0)",
             marginBottom: "1.25rem",
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           API tokens allow the FreeCAD plugin and scripts to authenticate with
@@ -175,7 +175,7 @@ export function SettingsPage() {
             <p
               style={{
                 color: "var(--ctp-subtext0)",
-                fontSize: "0.85rem",
+                fontSize: "var(--font-body)",
                 marginTop: "0.5rem",
               }}
             >
@@ -212,7 +212,7 @@ export function SettingsPage() {
         {tokensLoading ? (
           <p style={mutedStyle}>Loading tokens...</p>
         ) : tokensError ? (
-          <p style={{ color: "var(--ctp-red)", fontSize: "0.85rem" }}>
+          <p style={{ color: "var(--ctp-red)", fontSize: "var(--font-body)" }}>
             {tokensError}
           </p>
         ) : (
@@ -332,7 +332,7 @@ const cardStyle: React.CSSProperties = {
 
 const cardTitleStyle: React.CSSProperties = {
   marginBottom: "1rem",
-  fontSize: "1.1rem",
+  fontSize: "var(--font-title)",
 };
 
 const dlStyle: React.CSSProperties = {
@@ -344,12 +344,12 @@ const dlStyle: React.CSSProperties = {
 const dtStyle: React.CSSProperties = {
   color: "var(--ctp-subtext0)",
   fontWeight: 500,
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const ddStyle: React.CSSProperties = {
   margin: 0,
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const mutedStyle: React.CSSProperties = {
@@ -371,7 +371,7 @@ const tokenDisplayStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.5rem",
   fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   color: "var(--ctp-peach)",
   wordBreak: "break-all",
 };
@@ -389,7 +389,7 @@ const labelStyle: React.CSSProperties = {
   marginBottom: "0.35rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const inputStyle: React.CSSProperties = {
@@ -399,7 +399,7 @@ const inputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.4rem",
   color: "var(--ctp-text)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
   boxSizing: "border-box",
 };
 
@@ -472,7 +472,7 @@ const btnTinyStyle: React.CSSProperties = {
 
 const errorStyle: React.CSSProperties = {
   color: "var(--ctp-red)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   marginTop: "0.25rem",
 };
 
@@ -482,7 +482,7 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
 };
@@ -490,5 +490,5 @@ const thStyle: React.CSSProperties = {
 const tdStyle: React.CSSProperties = {
   padding: "0.4rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
diff --git a/web/src/styles/theme.css b/web/src/styles/theme.css
index 7b209fc..df4cb00 100644
--- a/web/src/styles/theme.css
+++ b/web/src/styles/theme.css
@@ -28,6 +28,15 @@
     --ctp-crust: #11111b;
 }
 
+/* ── Font scale ── */
+:root {
+    --font-title: 1.1rem; /* page titles */
+    --font-body: 0.8125rem; /* 13px — body text, breadcrumbs */
+    --font-table: 0.75rem; /* 12px — table cells, inputs, buttons */
+    --font-sm: 0.6875rem; /* 11px — section headers, labels, captions */
+    --font-xs: 0.625rem; /* 10px — badges (minimum) */
+}
+
 /* ── Density: comfortable (default) ── */
 [data-density="comfortable"],
 :root {
@@ -39,24 +48,24 @@
     --d-nav-px: 0.75rem;
     --d-nav-radius: 0.4rem;
     --d-user-gap: 0.6rem;
-    --d-user-font: 0.85rem;
+    --d-user-font: var(--font-body);
 
     --d-th-py: 0.35rem;
     --d-th-px: 0.75rem;
-    --d-th-font: 0.75rem;
+    --d-th-font: var(--font-table);
     --d-td-py: 0.25rem;
     --d-td-px: 0.75rem;
-    --d-td-font: 0.85rem;
+    --d-td-font: var(--font-body);
 
     --d-toolbar-gap: 0.5rem;
     --d-toolbar-py: 0.5rem;
     --d-toolbar-mb: 0.35rem;
     --d-input-py: 0.35rem;
     --d-input-px: 0.6rem;
-    --d-input-font: 0.85rem;
+    --d-input-font: var(--font-body);
 
     --d-footer-h: 28px;
-    --d-footer-font: 0.75rem;
+    --d-footer-font: var(--font-table);
     --d-footer-px: 2rem;
 }
 
@@ -70,23 +79,23 @@
     --d-nav-px: 0.5rem;
     --d-nav-radius: 0.3rem;
     --d-user-gap: 0.35rem;
-    --d-user-font: 0.8rem;
+    --d-user-font: var(--font-table);
 
     --d-th-py: 0.2rem;
     --d-th-px: 0.5rem;
-    --d-th-font: 0.7rem;
+    --d-th-font: var(--font-sm);
     --d-td-py: 0.125rem;
     --d-td-px: 0.5rem;
-    --d-td-font: 0.8rem;
+    --d-td-font: var(--font-table);
 
     --d-toolbar-gap: 0.35rem;
     --d-toolbar-py: 0.25rem;
     --d-toolbar-mb: 0.15rem;
     --d-input-py: 0.2rem;
     --d-input-px: 0.4rem;
-    --d-input-font: 0.8rem;
+    --d-input-font: var(--font-table);
 
     --d-footer-h: 24px;
-    --d-footer-font: 0.7rem;
+    --d-footer-font: var(--font-sm);
     --d-footer-px: 1.25rem;
 }