fix(web): align all spacing values to 4px grid

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
2026-02-14 13:36:22 -06:00
parent c7857fdfc9
commit ba92dd363c
25 changed files with 186 additions and 172 deletions
--- 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)",
--- 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)",
--- 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",
 };
--- 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",
          }}
--- 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",
--- 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)",
        }}
--- 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,
--- 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)",
--- 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",
--- 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)",
--- 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)",
 };
--- 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",
 };
--- 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",
 };
--- 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",
 };
--- 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",
 };
--- 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",
 };
--- 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,
--- 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",
              }}
            >
--- 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",
--- 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",
--- 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)",
 };
--- 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)",
--- 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)",
 };
--- 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;
 }
--- 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;