From c7857fdfc97bce01d870a7e2c63074aeb1af8fc7 Mon Sep 17 00:00:00 2001
From: Forbes <forbes@kindred-systems.com>
Date: Sat, 14 Feb 2026 13:36:07 -0600
Subject: [PATCH 1/2] fix(web): standardize font sizes to style guide scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Map fontWeight: 700 → 600 in non-title contexts (LoginPage, FileDropZone).
Align FileDropZone badge padding to 4px grid.

Closes #70
---
 web/src/components/items/FileDropZone.tsx | 10 +++++-----
 web/src/pages/LoginPage.tsx               |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/items/FileDropZone.tsx b/web/src/components/items/FileDropZone.tsx
index a327796..f1b0acb 100644
--- a/web/src/components/items/FileDropZone.tsx
+++ b/web/src/components/items/FileDropZone.tsx
@@ -143,8 +143,8 @@ function FileRow({
         display: "flex",
         alignItems: "center",
         gap: "0.5rem",
-        padding: "0.25rem 0.4rem",
-        borderRadius: "0.375rem",
+        padding: "0.25rem 0.5rem",
+        borderRadius: "0.25rem",
         position: "relative",
       }}
     >
@@ -153,14 +153,14 @@ function FileRow({
         style={{
           width: 28,
           height: 28,
-          borderRadius: "0.375rem",
+          borderRadius: "0.25rem",
           backgroundColor: color,
           opacity: 0.8,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           fontSize: "var(--font-xs)",
-          fontWeight: 700,
+          fontWeight: 600,
           color: "var(--ctp-crust)",
           flexShrink: 0,
         }}
@@ -239,7 +239,7 @@ function FileRow({
           cursor: "pointer",
           fontSize: "var(--font-table)",
           color: hovered ? "var(--ctp-red)" : "var(--ctp-overlay0)",
-          padding: "0 0.2rem",
+          padding: "0 0.25rem",
           flexShrink: 0,
           transition: "all 0.15s ease",
         }}
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 899756d..f15add4 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -116,7 +116,7 @@ const titleStyle: React.CSSProperties = {
   color: "var(--ctp-mauve)",
   textAlign: "center",
   fontSize: "2rem",
-  fontWeight: 700,
+  fontWeight: 600,
   marginBottom: "0.25rem",
 };
 
@@ -164,7 +164,7 @@ const btnPrimaryStyle: React.CSSProperties = {
   display: "block",
   width: "100%",
   padding: "0.75rem 1.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   fontWeight: 500,
   fontSize: "0.75rem",
   cursor: "pointer",
@@ -189,7 +189,7 @@ const btnOidcStyle: React.CSSProperties = {
   display: "block",
   width: "100%",
   padding: "0.75rem 1.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   fontWeight: 500,
   fontSize: "0.75rem",
   cursor: "pointer",
-- 
2.49.1


From ba92dd363ce614432cc99c4dcf20f1a8093fa4e1 Mon Sep 17 00:00:00 2001
From: Forbes <forbes@kindred-systems.com>
Date: Sat, 14 Feb 2026 13:36:22 -0600
Subject: [PATCH 2/2] fix(web): align all spacing values to 4px grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Standardize all spacing to multiples of 4px (0.25rem):
- 0.15rem (2.4px) → 0.25rem (4px)
- 0.35rem (5.6px) → 0.25rem (4px)
- 0.375rem (6px) → 0.25rem (4px) for borderRadius
- 0.4rem (6.4px) → 0.5rem (8px)
- 0.6rem (9.6px) → 0.5rem (8px)

Updated theme.css density variables, silo-base.css focus ring,
and all TSX component inline styles.

Closes #71
---
 web/src/components/AppShell.tsx               |  8 +--
 web/src/components/ContextMenu.tsx            |  2 +-
 web/src/components/PageFooter.tsx             | 68 +++++++++++--------
 web/src/components/TagInput.tsx               |  8 +--
 web/src/components/audit/AuditDetailPanel.tsx |  8 +--
 web/src/components/audit/AuditSummaryBar.tsx  |  2 +-
 web/src/components/audit/AuditTable.tsx       |  2 +-
 web/src/components/audit/AuditToolbar.tsx     |  4 +-
 web/src/components/items/BOMTab.tsx           | 28 ++++----
 web/src/components/items/CategoryPicker.tsx   |  8 +--
 web/src/components/items/CreateItemPane.tsx   | 18 ++---
 web/src/components/items/DeleteItemPane.tsx   | 10 +--
 web/src/components/items/EditItemPane.tsx     | 12 ++--
 web/src/components/items/ImportItemsPane.tsx  | 20 +++---
 web/src/components/items/ItemDetail.tsx       |  6 +-
 web/src/components/items/ItemTable.tsx        |  6 +-
 web/src/components/items/ItemsToolbar.tsx     | 14 ++--
 web/src/components/items/MainTab.tsx          | 16 ++---
 web/src/components/items/PropertiesTab.tsx    | 12 ++--
 web/src/components/items/RevisionsTab.tsx     | 12 ++--
 web/src/pages/ProjectsPage.tsx                | 20 +++---
 web/src/pages/SchemasPage.tsx                 | 10 +--
 web/src/pages/SettingsPage.tsx                | 24 +++----
 web/src/styles/silo-base.css                  |  6 +-
 web/src/styles/theme.css                      | 34 +++++-----
 25 files changed, 186 insertions(+), 172 deletions(-)

diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx
index 843bc68..2d19da2 100644
--- a/web/src/components/AppShell.tsx
+++ b/web/src/components/AppShell.tsx
@@ -100,7 +100,7 @@ export function AppShell() {
             <span
               style={{
                 display: "inline-block",
-                padding: "0.15rem 0.5rem",
+                padding: "0.25rem 0.5rem",
                 borderRadius: "1rem",
                 fontSize: "0.75rem",
                 fontWeight: 600,
@@ -115,7 +115,7 @@ export function AppShell() {
               style={{
                 padding: "0.25rem 0.5rem",
                 fontSize: "var(--font-sm)",
-                borderRadius: "0.375rem",
+                borderRadius: "0.25rem",
                 cursor: "pointer",
                 border: "1px solid var(--ctp-surface1)",
                 background: "var(--ctp-surface0)",
@@ -129,9 +129,9 @@ export function AppShell() {
             <button
               onClick={logout}
               style={{
-                padding: "0.35rem 0.75rem",
+                padding: "0.25rem 0.75rem",
                 fontSize: "var(--font-table)",
-                borderRadius: "0.4rem",
+                borderRadius: "0.5rem",
                 cursor: "pointer",
                 border: "none",
                 background: "var(--ctp-surface1)",
diff --git a/web/src/components/ContextMenu.tsx b/web/src/components/ContextMenu.tsx
index 1c53131..ba272f3 100644
--- a/web/src/components/ContextMenu.tsx
+++ b/web/src/components/ContextMenu.tsx
@@ -80,7 +80,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
               alignItems: "center",
               gap: "0.5rem",
               width: "100%",
-              padding: "0.35rem 0.75rem",
+              padding: "0.25rem 0.75rem",
               background: "none",
               border: "none",
               color: item.disabled ? "var(--ctp-overlay0)" : "var(--ctp-text)",
diff --git a/web/src/components/PageFooter.tsx b/web/src/components/PageFooter.tsx
index f78f5c8..72e0619 100644
--- a/web/src/components/PageFooter.tsx
+++ b/web/src/components/PageFooter.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 
 interface PageFooterProps {
   stats?: ReactNode;
@@ -8,32 +8,40 @@ interface PageFooterProps {
   onPageChange?: (page: number) => void;
 }
 
-export function PageFooter({ stats, page, pageSize, itemCount, onPageChange }: PageFooterProps) {
+export function PageFooter({
+  stats,
+  page,
+  pageSize,
+  itemCount,
+  onPageChange,
+}: PageFooterProps) {
   const hasPagination = page !== undefined && onPageChange !== undefined;
 
   return (
-    <div style={{
-      position: 'fixed',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      height: 'var(--d-footer-h)',
-      backgroundColor: 'var(--ctp-surface0)',
-      borderTop: '1px solid var(--ctp-surface1)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: '0 var(--d-footer-px)',
-      fontSize: 'var(--d-footer-font)',
-      color: 'var(--ctp-subtext0)',
-      zIndex: 100,
-    }}>
-      <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>
+    <div
+      style={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "var(--d-footer-h)",
+        backgroundColor: "var(--ctp-surface0)",
+        borderTop: "1px solid var(--ctp-surface1)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0 var(--d-footer-px)",
+        fontSize: "var(--d-footer-font)",
+        color: "var(--ctp-subtext0)",
+        zIndex: 100,
+      }}
+    >
+      <div style={{ display: "flex", gap: "1.5rem", alignItems: "center" }}>
         {stats}
       </div>
 
       {hasPagination && (
-        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+        <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
           <button
             onClick={() => onPageChange(Math.max(1, page - 1))}
             disabled={page <= 1}
@@ -47,7 +55,11 @@ export function PageFooter({ stats, page, pageSize, itemCount, onPageChange }: P
           </span>
           <button
             onClick={() => onPageChange(page + 1)}
-            disabled={pageSize !== undefined && itemCount !== undefined && itemCount < pageSize}
+            disabled={
+              pageSize !== undefined &&
+              itemCount !== undefined &&
+              itemCount < pageSize
+            }
             style={pageBtnStyle}
           >
             Next
@@ -59,11 +71,11 @@ export function PageFooter({ stats, page, pageSize, itemCount, onPageChange }: P
 }
 
 const pageBtnStyle: React.CSSProperties = {
-  padding: '0.15rem 0.4rem',
-  fontSize: 'inherit',
-  border: 'none',
-  borderRadius: '0.25rem',
-  backgroundColor: 'var(--ctp-surface1)',
-  color: 'var(--ctp-text)',
-  cursor: 'pointer',
+  padding: "0.25rem 0.5rem",
+  fontSize: "inherit",
+  border: "none",
+  borderRadius: "0.25rem",
+  backgroundColor: "var(--ctp-surface1)",
+  color: "var(--ctp-text)",
+  cursor: "pointer",
 };
diff --git a/web/src/components/TagInput.tsx b/web/src/components/TagInput.tsx
index 39b3322..3ab5cca 100644
--- a/web/src/components/TagInput.tsx
+++ b/web/src/components/TagInput.tsx
@@ -124,7 +124,7 @@ export function TagInput({
           padding: "0.25rem 0.5rem",
           backgroundColor: "var(--ctp-base)",
           border: "1px solid var(--ctp-surface1)",
-          borderRadius: "0.375rem",
+          borderRadius: "0.25rem",
           cursor: "text",
           minHeight: "1.8rem",
         }}
@@ -137,7 +137,7 @@ export function TagInput({
               display: "inline-flex",
               alignItems: "center",
               gap: "0.25rem",
-              padding: "0.15rem 0.5rem",
+              padding: "0.25rem 0.5rem",
               borderRadius: "1rem",
               backgroundColor: "rgba(203,166,247,0.15)",
               color: "var(--ctp-mauve)",
@@ -187,7 +187,7 @@ export function TagInput({
             background: "transparent",
             color: "var(--ctp-text)",
             fontSize: "var(--font-body)",
-            padding: "0.15rem 0",
+            padding: "0.25rem 0",
           }}
         />
       </div>
@@ -202,7 +202,7 @@ export function TagInput({
             marginTop: "0.25rem",
             backgroundColor: "var(--ctp-surface0)",
             border: "1px solid var(--ctp-surface1)",
-            borderRadius: "0.375rem",
+            borderRadius: "0.25rem",
             maxHeight: "160px",
             overflowY: "auto",
           }}
diff --git a/web/src/components/audit/AuditDetailPanel.tsx b/web/src/components/audit/AuditDetailPanel.tsx
index 6e013c6..6dec717 100644
--- a/web/src/components/audit/AuditDetailPanel.tsx
+++ b/web/src/components/audit/AuditDetailPanel.tsx
@@ -218,7 +218,7 @@ export function AuditDetailPanel({
         <span
           style={{
             display: "inline-block",
-            padding: "0.15rem 0.5rem",
+            padding: "0.25rem 0.5rem",
             borderRadius: "1rem",
             fontSize: "0.75rem",
             fontWeight: 600,
@@ -477,10 +477,10 @@ function FieldRow({
           placeholder="---"
           style={{
             flex: 1,
-            padding: "0.25rem 0.4rem",
+            padding: "0.25rem 0.5rem",
             fontSize: "var(--font-table)",
             border: "1px solid var(--ctp-surface1)",
-            borderRadius: "0.375rem",
+            borderRadius: "0.25rem",
             backgroundColor: "var(--ctp-surface0)",
             color: "var(--ctp-text)",
             outline: "none",
@@ -495,7 +495,7 @@ const closeBtnStyle: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
   fontSize: "var(--font-table)",
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
   cursor: "pointer",
diff --git a/web/src/components/audit/AuditSummaryBar.tsx b/web/src/components/audit/AuditSummaryBar.tsx
index 1aaa046..17334df 100644
--- a/web/src/components/audit/AuditSummaryBar.tsx
+++ b/web/src/components/audit/AuditSummaryBar.tsx
@@ -70,7 +70,7 @@ export function AuditSummaryBar({
         style={{
           display: "flex",
           gap: "1.5rem",
-          marginTop: "0.4rem",
+          marginTop: "0.5rem",
           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 fe92e72..1942015 100644
--- a/web/src/components/audit/AuditTable.tsx
+++ b/web/src/components/audit/AuditTable.tsx
@@ -103,7 +103,7 @@ export function AuditTable({
                   <span
                     style={{
                       display: "inline-block",
-                      padding: "0.15rem 0.5rem",
+                      padding: "0.25rem 0.5rem",
                       borderRadius: "1rem",
                       fontSize: "0.75rem",
                       fontWeight: 600,
diff --git a/web/src/components/audit/AuditToolbar.tsx b/web/src/components/audit/AuditToolbar.tsx
index 34476cb..82a0c68 100644
--- a/web/src/components/audit/AuditToolbar.tsx
+++ b/web/src/components/audit/AuditToolbar.tsx
@@ -97,7 +97,7 @@ export function AuditToolbar({
 const selectStyle: React.CSSProperties = {
   padding: "var(--d-input-py) var(--d-input-px)",
   fontSize: "var(--d-input-font)",
-  borderRadius: "0.4rem",
+  borderRadius: "0.5rem",
   border: "1px solid var(--ctp-surface1)",
   backgroundColor: "var(--ctp-surface0)",
   color: "var(--ctp-text)",
@@ -106,7 +106,7 @@ const selectStyle: React.CSSProperties = {
 const btnStyle: React.CSSProperties = {
   padding: "var(--d-input-py) var(--d-input-px)",
   fontSize: "var(--d-input-font)",
-  borderRadius: "0.4rem",
+  borderRadius: "0.5rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
diff --git a/web/src/components/items/BOMTab.tsx b/web/src/components/items/BOMTab.tsx
index fc1090c..d887d85 100644
--- a/web/src/components/items/BOMTab.tsx
+++ b/web/src/components/items/BOMTab.tsx
@@ -118,11 +118,11 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
   };
 
   const inputStyle: React.CSSProperties = {
-    padding: "0.25rem 0.4rem",
+    padding: "0.25rem 0.5rem",
     fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-base)",
     border: "1px solid var(--ctp-surface1)",
-    borderRadius: "0.375rem",
+    borderRadius: "0.25rem",
     color: "var(--ctp-text)",
     width: "100%",
   };
@@ -240,7 +240,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
             ...toolBtnStyle,
             display: "inline-flex",
             alignItems: "center",
-            gap: "0.35rem",
+            gap: "0.25rem",
           }}
         >
           <Download size={14} /> Export CSV
@@ -256,7 +256,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
               ...toolBtnStyle,
               display: "inline-flex",
               alignItems: "center",
-              gap: "0.35rem",
+              gap: "0.25rem",
             }}
           >
             <Plus size={14} /> Add
@@ -267,9 +267,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
       {isEditor && assemblyCount > 0 && (
         <div
           style={{
-            padding: "0.35rem 0.5rem",
+            padding: "0.25rem 0.5rem",
             marginBottom: "0.5rem",
-            borderRadius: "0.375rem",
+            borderRadius: "0.25rem",
             backgroundColor: "rgba(148,226,213,0.1)",
             border: "1px solid rgba(148,226,213,0.3)",
             fontSize: "0.75rem",
@@ -438,7 +438,7 @@ const toolBtnStyle: React.CSSProperties = {
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-text)",
   cursor: "pointer",
@@ -451,16 +451,16 @@ const actionBtnStyle: React.CSSProperties = {
   cursor: "pointer",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.15rem 0.25rem",
-  borderRadius: "0.375rem",
+  padding: "0.25rem 0.25rem",
+  borderRadius: "0.25rem",
 };
 
 const saveBtnStyle: React.CSSProperties = {
-  padding: "0.25rem 0.4rem",
+  padding: "0.25rem 0.5rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   backgroundColor: "var(--ctp-green)",
   color: "var(--ctp-crust)",
   cursor: "pointer",
@@ -468,7 +468,7 @@ const saveBtnStyle: React.CSSProperties = {
 };
 
 const sourceBadgeBase: React.CSSProperties = {
-  padding: "0.15rem 0.4rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "1rem",
   fontSize: "var(--font-sm)",
   fontWeight: 500,
@@ -487,11 +487,11 @@ const manualBadge: React.CSSProperties = {
 };
 
 const cancelBtnStyle: React.CSSProperties = {
-  padding: "0.25rem 0.4rem",
+  padding: "0.25rem 0.5rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
   cursor: "pointer",
diff --git a/web/src/components/items/CategoryPicker.tsx b/web/src/components/items/CategoryPicker.tsx
index 826021d..b780f2d 100644
--- a/web/src/components/items/CategoryPicker.tsx
+++ b/web/src/components/items/CategoryPicker.tsx
@@ -62,7 +62,7 @@ export function CategoryPicker({
     <div
       style={{
         border: "1px solid var(--ctp-surface1)",
-        borderRadius: "0.4rem",
+        borderRadius: "0.5rem",
         backgroundColor: "var(--ctp-base)",
         overflow: "hidden",
       }}
@@ -74,7 +74,7 @@ export function CategoryPicker({
             display: "flex",
             flexWrap: "wrap",
             gap: "0.25rem",
-            padding: "0.4rem 0.5rem",
+            padding: "0.5rem 0.5rem",
             borderBottom: "1px solid var(--ctp-surface1)",
             backgroundColor: "var(--ctp-mantle)",
           }}
@@ -99,7 +99,7 @@ export function CategoryPicker({
                     fontSize: "0.75rem",
                     fontWeight: 500,
                     border: "none",
-                    borderRadius: "0.375rem",
+                    borderRadius: "0.25rem",
                     cursor: "pointer",
                     backgroundColor: isActive
                       ? "rgba(203,166,247,0.2)"
@@ -133,7 +133,7 @@ export function CategoryPicker({
         disabled={isMultiStage && !selectedDomain}
         style={{
           width: "100%",
-          padding: "0.4rem 0.5rem",
+          padding: "0.5rem 0.5rem",
           fontSize: "var(--font-table)",
           border: "none",
           borderBottom: "1px solid var(--ctp-surface1)",
diff --git a/web/src/components/items/CreateItemPane.tsx b/web/src/components/items/CreateItemPane.tsx
index 7a8c008..30e0953 100644
--- a/web/src/components/items/CreateItemPane.tsx
+++ b/web/src/components/items/CreateItemPane.tsx
@@ -382,7 +382,7 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
               onClick={handleThumbnailSelect}
               style={{
                 aspectRatio: "4/3",
-                borderRadius: "0.4rem",
+                borderRadius: "0.5rem",
                 border: "1px dashed var(--ctp-surface1)",
                 display: "flex",
                 alignItems: "center",
@@ -619,7 +619,7 @@ function SidebarSection({
           textTransform: "uppercase",
           letterSpacing: "0.05em",
           color: "var(--ctp-subtext0)",
-          marginBottom: "0.4rem",
+          marginBottom: "0.5rem",
         }}
       >
         {title}
@@ -636,7 +636,7 @@ function MetaRow({ label, value }: { label: string; value: string }) {
         display: "flex",
         justifyContent: "space-between",
         fontSize: "var(--font-table)",
-        padding: "0.15rem 0",
+        padding: "0.25rem 0",
       }}
     >
       <span style={{ color: "var(--ctp-subtext0)" }}>{label}</span>
@@ -686,7 +686,7 @@ const actionBtnStyle: React.CSSProperties = {
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   color: "var(--ctp-crust)",
   cursor: "pointer",
 };
@@ -698,17 +698,17 @@ const cancelBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.25rem 0.4rem",
-  borderRadius: "0.375rem",
+  padding: "0.25rem 0.5rem",
+  borderRadius: "0.25rem",
 };
 
 const inputStyle: React.CSSProperties = {
   width: "100%",
-  padding: "0.35rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   color: "var(--ctp-text)",
   boxSizing: "border-box",
 };
@@ -723,7 +723,7 @@ const errorStyle: React.CSSProperties = {
   color: "var(--ctp-red)",
   backgroundColor: "rgba(243,139,168,0.1)",
   padding: "0.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   marginBottom: "0.5rem",
   fontSize: "var(--font-body)",
 };
diff --git a/web/src/components/items/DeleteItemPane.tsx b/web/src/components/items/DeleteItemPane.tsx
index 99e4711..b34c769 100644
--- a/web/src/components/items/DeleteItemPane.tsx
+++ b/web/src/components/items/DeleteItemPane.tsx
@@ -73,7 +73,7 @@ export function DeleteItemPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem 1rem",
-              borderRadius: "0.375rem",
+              borderRadius: "0.25rem",
               fontSize: "var(--font-body)",
               width: "100%",
               textAlign: "center",
@@ -125,7 +125,7 @@ export function DeleteItemPane({
               fontSize: "0.75rem",
               fontWeight: 500,
               border: "none",
-              borderRadius: "0.375rem",
+              borderRadius: "0.25rem",
               backgroundColor: "var(--ctp-surface1)",
               color: "var(--ctp-text)",
               cursor: "pointer",
@@ -141,7 +141,7 @@ export function DeleteItemPane({
               fontSize: "0.75rem",
               fontWeight: 500,
               border: "none",
-              borderRadius: "0.375rem",
+              borderRadius: "0.25rem",
               backgroundColor: "var(--ctp-red)",
               color: "var(--ctp-crust)",
               cursor: "pointer",
@@ -163,6 +163,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.25rem 0.4rem",
-  borderRadius: "0.375rem",
+  padding: "0.25rem 0.5rem",
+  borderRadius: "0.25rem",
 };
diff --git a/web/src/components/items/EditItemPane.tsx b/web/src/components/items/EditItemPane.tsx
index 5f6fa7e..acbbeda 100644
--- a/web/src/components/items/EditItemPane.tsx
+++ b/web/src/components/items/EditItemPane.tsx
@@ -93,7 +93,7 @@ export function EditItemPane({
             fontSize: "0.75rem",
             fontWeight: 500,
             border: "none",
-            borderRadius: "0.375rem",
+            borderRadius: "0.25rem",
             backgroundColor: "var(--ctp-blue)",
             color: "var(--ctp-crust)",
             cursor: "pointer",
@@ -114,7 +114,7 @@ export function EditItemPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem",
-              borderRadius: "0.375rem",
+              borderRadius: "0.25rem",
               marginBottom: "0.5rem",
               fontSize: "var(--font-body)",
             }}
@@ -208,11 +208,11 @@ function FormGroup({
 
 const inputStyle: React.CSSProperties = {
   width: "100%",
-  padding: "0.35rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   color: "var(--ctp-text)",
 };
 
@@ -223,6 +223,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.25rem 0.4rem",
-  borderRadius: "0.375rem",
+  padding: "0.25rem 0.5rem",
+  borderRadius: "0.25rem",
 };
diff --git a/web/src/components/items/ImportItemsPane.tsx b/web/src/components/items/ImportItemsPane.tsx
index 726509f..51c0177 100644
--- a/web/src/components/items/ImportItemsPane.tsx
+++ b/web/src/components/items/ImportItemsPane.tsx
@@ -90,7 +90,7 @@ export function ImportItemsPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem",
-              borderRadius: "0.375rem",
+              borderRadius: "0.25rem",
               marginBottom: "0.5rem",
               fontSize: "var(--font-body)",
             }}
@@ -164,7 +164,7 @@ export function ImportItemsPane({
           style={{
             display: "flex",
             alignItems: "center",
-            gap: "0.4rem",
+            gap: "0.5rem",
             fontSize: "var(--font-body)",
             color: "var(--ctp-subtext1)",
             marginBottom: "0.75rem",
@@ -187,11 +187,11 @@ export function ImportItemsPane({
               onClick={() => void doImport(true)}
               disabled={!file || importing}
               style={{
-                padding: "0.4rem 0.75rem",
+                padding: "0.5rem 0.75rem",
                 fontSize: "0.75rem",
                 fontWeight: 500,
                 border: "none",
-                borderRadius: "0.375rem",
+                borderRadius: "0.25rem",
                 backgroundColor: "var(--ctp-yellow)",
                 color: "var(--ctp-crust)",
                 cursor: "pointer",
@@ -205,11 +205,11 @@ export function ImportItemsPane({
               onClick={() => void doImport(false)}
               disabled={importing || (result?.error_count ?? 0) > 0}
               style={{
-                padding: "0.4rem 0.75rem",
+                padding: "0.5rem 0.75rem",
                 fontSize: "0.75rem",
                 fontWeight: 500,
                 border: "none",
-                borderRadius: "0.375rem",
+                borderRadius: "0.25rem",
                 backgroundColor: "var(--ctp-green)",
                 color: "var(--ctp-crust)",
                 cursor: "pointer",
@@ -227,7 +227,7 @@ export function ImportItemsPane({
             style={{
               padding: "0.5rem",
               backgroundColor: "var(--ctp-surface0)",
-              borderRadius: "0.4rem",
+              borderRadius: "0.5rem",
               fontSize: "var(--font-table)",
             }}
           >
@@ -262,7 +262,7 @@ export function ImportItemsPane({
                     style={{
                       color: "var(--ctp-red)",
                       fontSize: "0.75rem",
-                      padding: "0.15rem 0",
+                      padding: "0.25rem 0",
                     }}
                   >
                     Row {err.row}
@@ -296,6 +296,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.25rem 0.4rem",
-  borderRadius: "0.375rem",
+  padding: "0.25rem 0.5rem",
+  borderRadius: "0.25rem",
 };
diff --git a/web/src/components/items/ItemDetail.tsx b/web/src/components/items/ItemDetail.tsx
index 8c2d640..92f72ef 100644
--- a/web/src/components/items/ItemDetail.tsx
+++ b/web/src/components/items/ItemDetail.tsx
@@ -103,7 +103,7 @@ export function ItemDetail({
         </span>
         <span
           style={{
-            padding: "0.15rem 0.5rem",
+            padding: "0.25rem 0.5rem",
             borderRadius: "1rem",
             fontSize: "var(--font-sm)",
             fontWeight: 500,
@@ -157,7 +157,7 @@ export function ItemDetail({
             key={tab.key}
             onClick={() => setActiveTab(tab.key)}
             style={{
-              padding: "0.4rem 0.75rem",
+              padding: "0.5rem 0.75rem",
               fontSize: "var(--font-table)",
               border: "none",
               borderBottom:
@@ -205,5 +205,5 @@ const headerBtnStyle: React.CSSProperties = {
   cursor: "pointer",
   color: "var(--ctp-subtext1)",
   fontSize: "var(--font-table)",
-  padding: "0.25rem 0.4rem",
+  padding: "0.25rem 0.5rem",
 };
diff --git a/web/src/components/items/ItemTable.tsx b/web/src/components/items/ItemTable.tsx
index 6caabbe..d178dd0 100644
--- a/web/src/components/items/ItemTable.tsx
+++ b/web/src/components/items/ItemTable.tsx
@@ -268,7 +268,7 @@ export function ItemTable({
                           <td key={col.key} style={tdStyle}>
                             <span
                               style={{
-                                padding: "0.15rem 0.5rem",
+                                padding: "0.25rem 0.5rem",
                                 borderRadius: "1rem",
                                 fontSize: "0.75rem",
                                 fontWeight: 500,
@@ -398,6 +398,6 @@ const actionBtnStyle: React.CSSProperties = {
   cursor: "pointer",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.15rem 0.4rem",
-  borderRadius: "0.375rem",
+  padding: "0.25rem 0.5rem",
+  borderRadius: "0.25rem",
 };
diff --git a/web/src/components/items/ItemsToolbar.tsx b/web/src/components/items/ItemsToolbar.tsx
index 2a97c2f..e56c1be 100644
--- a/web/src/components/items/ItemsToolbar.tsx
+++ b/web/src/components/items/ItemsToolbar.tsx
@@ -41,7 +41,7 @@ export function ItemsToolbar({
         fontSize: "0.75rem",
         fontWeight: 500,
         border: "none",
-        borderRadius: "0.375rem",
+        borderRadius: "0.25rem",
         cursor: "pointer",
         backgroundColor:
           filters.searchScope === scope
@@ -81,7 +81,7 @@ export function ItemsToolbar({
           padding: "var(--d-input-py) var(--d-input-px)",
           backgroundColor: "var(--ctp-surface0)",
           border: "1px solid var(--ctp-surface1)",
-          borderRadius: "0.4rem",
+          borderRadius: "0.5rem",
           color: "var(--ctp-text)",
           fontSize: "var(--d-input-font)",
         }}
@@ -144,7 +144,7 @@ export function ItemsToolbar({
           ...toolBtnStyle,
           display: "inline-flex",
           alignItems: "center",
-          gap: "0.35rem",
+          gap: "0.25rem",
         }}
         title="Export CSV"
       >
@@ -159,7 +159,7 @@ export function ItemsToolbar({
             ...toolBtnStyle,
             display: "inline-flex",
             alignItems: "center",
-            gap: "0.35rem",
+            gap: "0.25rem",
           }}
           title="Import CSV"
         >
@@ -177,7 +177,7 @@ export function ItemsToolbar({
             color: "var(--ctp-crust)",
             display: "inline-flex",
             alignItems: "center",
-            gap: "0.35rem",
+            gap: "0.25rem",
           }}
         >
           <Plus size={14} /> New
@@ -191,7 +191,7 @@ const selectStyle: React.CSSProperties = {
   padding: "var(--d-input-py) var(--d-input-px)",
   backgroundColor: "var(--ctp-surface0)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.4rem",
+  borderRadius: "0.5rem",
   color: "var(--ctp-text)",
   fontSize: "var(--d-input-font)",
 };
@@ -200,7 +200,7 @@ const toolBtnStyle: React.CSSProperties = {
   padding: "var(--d-input-py) var(--d-input-px)",
   backgroundColor: "var(--ctp-surface1)",
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   color: "var(--ctp-text)",
   fontSize: "0.75rem",
   fontWeight: 500,
diff --git a/web/src/components/items/MainTab.tsx b/web/src/components/items/MainTab.tsx
index 57a6798..9eafec6 100644
--- a/web/src/components/items/MainTab.tsx
+++ b/web/src/components/items/MainTab.tsx
@@ -134,7 +134,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
             marginTop: "0.75rem",
             padding: "0.5rem",
             backgroundColor: "var(--ctp-surface0)",
-            borderRadius: "0.4rem",
+            borderRadius: "0.5rem",
             fontSize: "var(--font-body)",
           }}
         >
@@ -177,7 +177,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 display: "inline-flex",
                 alignItems: "center",
                 gap: "0.25rem",
-                padding: "0.15rem 0.5rem",
+                padding: "0.25rem 0.5rem",
                 borderRadius: "1rem",
                 backgroundColor: "rgba(203,166,247,0.15)",
                 color: "var(--ctp-mauve)",
@@ -208,11 +208,11 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 value={addProject}
                 onChange={(e) => setAddProject(e.target.value)}
                 style={{
-                  padding: "0.15rem 0.25rem",
+                  padding: "0.25rem 0.25rem",
                   fontSize: "0.75rem",
                   backgroundColor: "var(--ctp-surface0)",
                   border: "1px solid var(--ctp-surface1)",
-                  borderRadius: "0.375rem",
+                  borderRadius: "0.25rem",
                   color: "var(--ctp-text)",
                 }}
               >
@@ -229,12 +229,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 <button
                   onClick={() => void handleAddProject()}
                   style={{
-                    padding: "0.15rem 0.4rem",
+                    padding: "0.25rem 0.5rem",
                     fontSize: "var(--font-sm)",
                     border: "none",
                     backgroundColor: "var(--ctp-mauve)",
                     color: "var(--ctp-crust)",
-                    borderRadius: "0.375rem",
+                    borderRadius: "0.25rem",
                     cursor: "pointer",
                   }}
                 >
@@ -253,7 +253,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
             marginTop: "0.75rem",
             padding: "0.5rem",
             backgroundColor: "var(--ctp-surface0)",
-            borderRadius: "0.4rem",
+            borderRadius: "0.5rem",
           }}
         >
           <div
@@ -298,7 +298,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 border: "none",
                 backgroundColor: "var(--ctp-surface1)",
                 color: "var(--ctp-text)",
-                borderRadius: "0.375rem",
+                borderRadius: "0.25rem",
                 cursor: "pointer",
               }}
             >
diff --git a/web/src/components/items/PropertiesTab.tsx b/web/src/components/items/PropertiesTab.tsx
index 0b0bbb7..247027f 100644
--- a/web/src/components/items/PropertiesTab.tsx
+++ b/web/src/components/items/PropertiesTab.tsx
@@ -125,11 +125,11 @@ export function PropertiesTab({
   };
 
   const inputStyle: React.CSSProperties = {
-    padding: "0.25rem 0.4rem",
+    padding: "0.25rem 0.5rem",
     fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-base)",
     border: "1px solid var(--ctp-surface1)",
-    borderRadius: "0.375rem",
+    borderRadius: "0.25rem",
     color: "var(--ctp-text)",
   };
 
@@ -165,7 +165,7 @@ export function PropertiesTab({
               padding: "0.25rem 0.75rem",
               fontSize: "var(--font-table)",
               border: "none",
-              borderRadius: "0.375rem",
+              borderRadius: "0.25rem",
               backgroundColor: "var(--ctp-mauve)",
               color: "var(--ctp-crust)",
               cursor: "pointer",
@@ -250,7 +250,7 @@ export function PropertiesTab({
                 marginTop: "0.25rem",
                 display: "inline-flex",
                 alignItems: "center",
-                gap: "0.35rem",
+                gap: "0.25rem",
               }}
             >
               <Plus size={14} /> Add Property
@@ -274,7 +274,7 @@ export function PropertiesTab({
               fontSize: "var(--font-table)",
               backgroundColor: "var(--ctp-base)",
               border: "1px solid var(--ctp-surface1)",
-              borderRadius: "0.4rem",
+              borderRadius: "0.5rem",
               color: "var(--ctp-text)",
               resize: "vertical",
             }}
@@ -300,7 +300,7 @@ const tabBtn: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
   fontSize: "var(--font-table)",
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   backgroundColor: "var(--ctp-surface0)",
   color: "var(--ctp-subtext1)",
   cursor: "pointer",
diff --git a/web/src/components/items/RevisionsTab.tsx b/web/src/components/items/RevisionsTab.tsx
index 0d674cc..7257998 100644
--- a/web/src/components/items/RevisionsTab.tsx
+++ b/web/src/components/items/RevisionsTab.tsx
@@ -97,11 +97,11 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
     );
 
   const selectStyle: React.CSSProperties = {
-    padding: "0.25rem 0.4rem",
+    padding: "0.25rem 0.5rem",
     fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-surface0)",
     border: "1px solid var(--ctp-surface1)",
-    borderRadius: "0.375rem",
+    borderRadius: "0.25rem",
     color: "var(--ctp-text)",
   };
 
@@ -147,7 +147,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
             padding: "0.25rem 0.5rem",
             fontSize: "var(--font-table)",
             border: "none",
-            borderRadius: "0.375rem",
+            borderRadius: "0.25rem",
             backgroundColor: "var(--ctp-mauve)",
             color: "var(--ctp-crust)",
             cursor: "pointer",
@@ -164,7 +164,7 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
           style={{
             padding: "0.5rem",
             backgroundColor: "var(--ctp-surface0)",
-            borderRadius: "0.4rem",
+            borderRadius: "0.5rem",
             fontSize: "var(--font-table)",
             marginBottom: "0.75rem",
             fontFamily: "'JetBrains Mono', monospace",
@@ -250,10 +250,10 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
                       )
                     }
                     style={{
-                      padding: "0.15rem 0.25rem",
+                      padding: "0.25rem 0.25rem",
                       fontSize: "0.75rem",
                       border: "none",
-                      borderRadius: "0.375rem",
+                      borderRadius: "0.25rem",
                       backgroundColor: "transparent",
                       color: statusColors[rev.status] ?? "var(--ctp-text)",
                       cursor: "pointer",
diff --git a/web/src/pages/ProjectsPage.tsx b/web/src/pages/ProjectsPage.tsx
index b10e71e..dc36a71 100644
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -216,7 +216,7 @@ export function ProjectsPage() {
               ...btnPrimaryStyle,
               display: "inline-flex",
               alignItems: "center",
-              gap: "0.35rem",
+              gap: "0.25rem",
             }}
           >
             <Plus size={14} /> New Project
@@ -465,7 +465,7 @@ export function ProjectsPage() {
 // Styles
 const btnPrimaryStyle: React.CSSProperties = {
   padding: "0.5rem 1rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-mauve)",
   color: "var(--ctp-crust)",
@@ -476,7 +476,7 @@ const btnPrimaryStyle: React.CSSProperties = {
 
 const btnSecondaryStyle: React.CSSProperties = {
   padding: "0.5rem 1rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-text)",
@@ -487,7 +487,7 @@ const btnSecondaryStyle: React.CSSProperties = {
 
 const btnDangerStyle: React.CSSProperties = {
   padding: "0.5rem 1rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-red)",
   color: "var(--ctp-crust)",
@@ -498,7 +498,7 @@ const btnDangerStyle: React.CSSProperties = {
 
 const btnSmallStyle: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-text)",
@@ -530,7 +530,7 @@ const formCloseStyle: React.CSSProperties = {
   cursor: "pointer",
   fontSize: "0.75rem",
   fontWeight: 500,
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
 };
 
 const errorBannerStyle: React.CSSProperties = {
@@ -538,7 +538,7 @@ const errorBannerStyle: React.CSSProperties = {
   background: "rgba(243, 139, 168, 0.1)",
   border: "1px solid rgba(243, 139, 168, 0.2)",
   padding: "0.5rem 0.75rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.5rem",
   marginBottom: "0.75rem",
   fontSize: "var(--font-body)",
 };
@@ -549,7 +549,7 @@ const fieldStyle: React.CSSProperties = {
 
 const labelStyle: React.CSSProperties = {
   display: "block",
-  marginBottom: "0.35rem",
+  marginBottom: "0.25rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
   fontSize: "var(--font-body)",
@@ -560,7 +560,7 @@ const inputStyle: React.CSSProperties = {
   padding: "0.5rem 0.75rem",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.4rem",
+  borderRadius: "0.5rem",
   color: "var(--ctp-text)",
   fontSize: "var(--font-body)",
   boxSizing: "border-box",
@@ -587,7 +587,7 @@ const thStyle: React.CSSProperties = {
 };
 
 const tdStyle: React.CSSProperties = {
-  padding: "0.35rem 0.75rem",
+  padding: "0.25rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
   fontSize: "var(--font-body)",
 };
diff --git a/web/src/pages/SchemasPage.tsx b/web/src/pages/SchemasPage.tsx
index d9887ff..b70b41a 100644
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -657,7 +657,7 @@ function SegmentBlock({
               marginTop: "0.5rem",
               display: "inline-flex",
               alignItems: "center",
-              gap: "0.35rem",
+              gap: "0.25rem",
             }}
           >
             <Plus size={14} /> Add Value
@@ -692,7 +692,7 @@ const segmentStyle: React.CSSProperties = {
 
 const typeBadgeStyle: React.CSSProperties = {
   display: "inline-block",
-  padding: "0.15rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.25rem",
   fontSize: "0.75rem",
   fontWeight: 600,
@@ -707,7 +707,7 @@ const emptyStyle: React.CSSProperties = {
 };
 
 const thStyle: React.CSSProperties = {
-  padding: "0.4rem 0.75rem",
+  padding: "0.5rem 0.75rem",
   textAlign: "left",
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
@@ -725,7 +725,7 @@ const tdStyle: React.CSSProperties = {
 
 const btnTinyStyle: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-text)",
@@ -736,7 +736,7 @@ const btnTinyStyle: React.CSSProperties = {
 
 const btnTinyPrimaryStyle: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-mauve)",
   color: "var(--ctp-crust)",
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 1258d99..0ca6fbf 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -114,7 +114,7 @@ export function SettingsPage() {
               <span
                 style={{
                   display: "inline-block",
-                  padding: "0.15rem 0.5rem",
+                  padding: "0.25rem 0.5rem",
                   borderRadius: "1rem",
                   fontSize: "var(--font-table)",
                   fontWeight: 600,
@@ -386,7 +386,7 @@ const createFormStyle: React.CSSProperties = {
 
 const labelStyle: React.CSSProperties = {
   display: "block",
-  marginBottom: "0.35rem",
+  marginBottom: "0.25rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
   fontSize: "var(--font-body)",
@@ -397,7 +397,7 @@ const inputStyle: React.CSSProperties = {
   padding: "0.5rem 0.75rem",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.4rem",
+  borderRadius: "0.5rem",
   color: "var(--ctp-text)",
   fontSize: "var(--font-body)",
   boxSizing: "border-box",
@@ -405,7 +405,7 @@ const inputStyle: React.CSSProperties = {
 
 const btnPrimaryStyle: React.CSSProperties = {
   padding: "0.5rem 1rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-mauve)",
   color: "var(--ctp-crust)",
@@ -416,10 +416,10 @@ const btnPrimaryStyle: React.CSSProperties = {
 };
 
 const btnCopyStyle: React.CSSProperties = {
-  padding: "0.4rem 0.75rem",
+  padding: "0.5rem 0.75rem",
   background: "var(--ctp-surface1)",
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   color: "var(--ctp-text)",
   cursor: "pointer",
   fontSize: "0.75rem",
@@ -427,10 +427,10 @@ const btnCopyStyle: React.CSSProperties = {
 };
 
 const btnDismissStyle: React.CSSProperties = {
-  padding: "0.4rem 0.75rem",
+  padding: "0.5rem 0.75rem",
   background: "none",
   border: "none",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   color: "var(--ctp-subtext0)",
   cursor: "pointer",
   fontSize: "0.75rem",
@@ -442,7 +442,7 @@ const btnDangerStyle: React.CSSProperties = {
   color: "var(--ctp-red)",
   border: "none",
   padding: "0.25rem 0.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   cursor: "pointer",
   fontSize: "0.75rem",
   fontWeight: 500,
@@ -453,7 +453,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
   color: "var(--ctp-crust)",
   border: "none",
   padding: "0.25rem 0.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   cursor: "pointer",
   fontSize: "0.75rem",
   fontWeight: 500,
@@ -461,7 +461,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
 
 const btnTinyStyle: React.CSSProperties = {
   padding: "0.25rem 0.5rem",
-  borderRadius: "0.375rem",
+  borderRadius: "0.25rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-text)",
@@ -488,7 +488,7 @@ const thStyle: React.CSSProperties = {
 };
 
 const tdStyle: React.CSSProperties = {
-  padding: "0.4rem 0.75rem",
+  padding: "0.5rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
   fontSize: "var(--font-body)",
 };
diff --git a/web/src/styles/silo-base.css b/web/src/styles/silo-base.css
index ef690c9..7f0856e 100644
--- a/web/src/styles/silo-base.css
+++ b/web/src/styles/silo-base.css
@@ -1,6 +1,8 @@
 /* Focus and hover states for form inputs */
 .silo-input {
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
 }
 
 .silo-input:hover {
@@ -9,6 +11,6 @@
 
 .silo-input:focus {
     border-color: var(--ctp-mauve);
-    box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25);
+    box-shadow: 0 0 0 0.25rem rgba(203, 166, 247, 0.25);
     outline: none;
 }
diff --git a/web/src/styles/theme.css b/web/src/styles/theme.css
index df4cb00..7a915d6 100644
--- a/web/src/styles/theme.css
+++ b/web/src/styles/theme.css
@@ -44,13 +44,13 @@
     --d-header-px: 2rem;
     --d-header-logo: 1.25rem;
     --d-nav-gap: 1rem;
-    --d-nav-py: 0.35rem;
+    --d-nav-py: 0.25rem;
     --d-nav-px: 0.75rem;
-    --d-nav-radius: 0.4rem;
-    --d-user-gap: 0.6rem;
+    --d-nav-radius: 0.5rem;
+    --d-user-gap: 0.5rem;
     --d-user-font: var(--font-body);
 
-    --d-th-py: 0.35rem;
+    --d-th-py: 0.25rem;
     --d-th-px: 0.75rem;
     --d-th-font: var(--font-table);
     --d-td-py: 0.25rem;
@@ -59,9 +59,9 @@
 
     --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-toolbar-mb: 0.25rem;
+    --d-input-py: 0.25rem;
+    --d-input-px: 0.5rem;
     --d-input-font: var(--font-body);
 
     --d-footer-h: 28px;
@@ -71,28 +71,28 @@
 
 /* ── Density: compact ── */
 [data-density="compact"] {
-    --d-header-py: 0.35rem;
+    --d-header-py: 0.25rem;
     --d-header-px: 1.25rem;
     --d-header-logo: 1.1rem;
     --d-nav-gap: 0.5rem;
-    --d-nav-py: 0.2rem;
+    --d-nav-py: 0.25rem;
     --d-nav-px: 0.5rem;
-    --d-nav-radius: 0.3rem;
-    --d-user-gap: 0.35rem;
+    --d-nav-radius: 0.25rem;
+    --d-user-gap: 0.25rem;
     --d-user-font: var(--font-table);
 
-    --d-th-py: 0.2rem;
+    --d-th-py: 0.25rem;
     --d-th-px: 0.5rem;
     --d-th-font: var(--font-sm);
-    --d-td-py: 0.125rem;
+    --d-td-py: 0.25rem;
     --d-td-px: 0.5rem;
     --d-td-font: var(--font-table);
 
-    --d-toolbar-gap: 0.35rem;
+    --d-toolbar-gap: 0.25rem;
     --d-toolbar-py: 0.25rem;
-    --d-toolbar-mb: 0.15rem;
-    --d-input-py: 0.2rem;
-    --d-input-px: 0.4rem;
+    --d-toolbar-mb: 0.25rem;
+    --d-input-py: 0.25rem;
+    --d-input-px: 0.5rem;
     --d-input-font: var(--font-table);
 
     --d-footer-h: 24px;
-- 
2.49.1