fix(web): standardize button borderRadius, fontSize, fontWeight (#68)

All button style objects now use: - borderRadius: 0.375rem - fontSize: 0.75rem - fontWeight: 500 Files: CreateItemPane, EditItemPane, DeleteItemPane, BOMTab, CategoryPicker, ProjectsPage, SchemasPage, LoginPage, ItemsToolbar, SettingsPage, ImportItemsPane, ItemTable Closes #68
2026-02-13 13:21:54 -06:00
parent 65063c9ee7
commit 2585305590
13 changed files with 716 additions and 90 deletions
--- a/docs/STYLE.md
+++ b/docs/STYLE.md
@@ -0,0 +1,515 @@
+# Silo Style Guide
+
+> Living reference for the Silo web UI. All modules must follow these conventions to maintain visual consistency across the platform.
+
+---
+
+## Color System
+
+Silo uses the [Catppuccin Mocha](https://github.com/catppuccin/catppuccin) palette exclusively. All colors are referenced via CSS custom properties defined at `:root`.
+
+### Palette
+
+```
+--ctp-rosewater:  #f5e0dc
+--ctp-flamingo:   #f2cdcd
+--ctp-pink:       #f5c2e7
+--ctp-mauve:      #cba6f7
+--ctp-red:        #f38ba8
+--ctp-maroon:     #eba0ac
+--ctp-peach:      #fab387
+--ctp-yellow:     #f9e2af
+--ctp-green:      #a6e3a1
+--ctp-teal:       #94e2d5
+--ctp-sky:        #89dceb
+--ctp-sapphire:   #74c7ec
+--ctp-blue:       #89b4fa
+--ctp-lavender:   #b4befe
+--ctp-text:       #cdd6f4
+--ctp-subtext1:   #bac2de
+--ctp-subtext0:   #a6adc8
+--ctp-overlay2:   #9399b2
+--ctp-overlay1:   #7f849c
+--ctp-overlay0:   #6c7086
+--ctp-surface2:   #585b70
+--ctp-surface1:   #45475a
+--ctp-surface0:   #313244
+--ctp-base:       #1e1e2e
+--ctp-mantle:     #181825
+--ctp-crust:      #11111b
+```
+
+### Semantic Roles
+
+| Role | Token | Usage |
+|------|-------|-------|
+| Page background | `--ctp-base` | Main content area |
+| Panel background | `--ctp-mantle` | Sidebars, detail panes, headers |
+| Inset/input background | `--ctp-crust` | Form inputs, code blocks, drop zones |
+| Primary accent | `--ctp-mauve` | Primary buttons, active states, links, selection highlights |
+| Secondary accent | `--ctp-blue` | Informational highlights, secondary actions |
+| Success | `--ctp-green` | Confirmations, positive status |
+| Warning | `--ctp-yellow` | Caution states, pending actions |
+| Danger | `--ctp-red` | Destructive actions, errors, required indicators |
+| Informational | `--ctp-teal` | Auto-generated metadata, system-assigned values |
+| Body text | `--ctp-text` | Primary content |
+| Secondary text | `--ctp-subtext1` | Descriptions, timestamps |
+| Muted text | `--ctp-overlay1` | Placeholders, disabled states |
+| Borders | `--ctp-surface0` | Dividers, panel edges |
+| Hover borders | `--ctp-surface1` | Interactive element borders, row separators |
+| Focus ring | `rgba(203, 166, 247, 0.25)` | `box-shadow` on focused inputs (mauve at 25%) |
+
+### Accent Usage for Data Types
+
+| Data type | Color | Token |
+|-----------|-------|-------|
+| Assembly | `--ctp-mauve` | Badge, icon tint |
+| Part | `--ctp-green` | Badge, icon tint |
+| Document | `--ctp-blue` | Badge, icon tint |
+| Purchased | `--ctp-peach` | Badge, icon tint |
+| Phantom | `--ctp-overlay1` | Badge, icon tint |
+
+These mappings are used anywhere item types appear: list badges, detail pane headers, BOM entries, tree views.
+
+---
+
+## Typography
+
+### Scale
+
+| Role | Size | Weight | Token/Color | Transform |
+|------|------|--------|-------------|-----------|
+| Page title | 1.1rem | 600 | `--ctp-text` | None |
+| Section header | 11px | 600 | `--ctp-overlay0` | Uppercase, `letter-spacing: 0.06em` |
+| Form label | 11px | 600 | `--ctp-overlay1` | Uppercase, `letter-spacing: 0.05em` |
+| Body text | 13px | 400 | `--ctp-text` | None |
+| Table cell | 12px | 400 | `--ctp-text` | None |
+| Caption / metadata | 11px | 400 | `--ctp-subtext0` | None |
+| Badge text | 10px | 600 | Varies | Uppercase |
+| Breadcrumb segment | 13px | 500 | `--ctp-subtext1` | None |
+| Breadcrumb active | 13px | 600 | `--ctp-text` | None |
+
+### Font Stack
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+```
+
+No external font dependencies. System fonts ensure fast rendering and native feel across platforms.
+
+### Rules
+
+- Never use font sizes below 10px.
+- Use `font-weight: 600` for emphasis instead of bold (700). Reserve 700 for page titles only when extra weight is needed.
+- `text-transform: uppercase` is reserved for section headers, form labels, and badges. Never uppercase body text or descriptions.
+
+---
+
+## Spacing
+
+Base unit: **4px**. All spacing values are multiples of 4.
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `xs` | 4px (0.25rem) | Tight gaps: icon-to-label, tag internal padding |
+| `sm` | 8px (0.5rem) | Compact spacing: between related fields, badge padding |
+| `md` | 12px (0.75rem) | Standard: form group gaps, sidebar section padding |
+| `lg` | 16px (1rem) | Section separation, card padding |
+| `xl` | 24px (1.5rem) | Page-level padding, major section breaks |
+| `2xl` | 32px (2rem) | Page horizontal padding |
+
+### Application
+
+- **Page padding:** `1.5rem 2rem` (24px vertical, 32px horizontal)
+- **Sidebar section padding:** `1rem 1.25rem`
+- **Form grid gap:** `1.25rem 1.5rem` (row gap × column gap)
+- **Table row height:** 36px minimum (padding included)
+- **Table cell padding:** `0.4rem 0.75rem`
+
+---
+
+## Layout
+
+### Page Structure
+
+Every module page follows the same shell:
+
+```
+┌─────────────────────────────────────────────────┐
+│ Top Nav (52px)                                  │
+├──────────┬──────────────────────────────────────┤
+│ App Menu │ Page Header (58px)                   │
+│ (icons)  ├──────────────────────┬───────────────┤
+│          │ Content Area         │ Detail Pane   │
+│          │                      │ (360px)       │
+│          │                      │               │
+│          │                      │               │
+└──────────┴──────────────────────┴───────────────┘
+```
+
+- **Top nav:** `52px` height, `--ctp-mantle` background, `1px solid --ctp-surface0` bottom border.
+- **App menu sidebar:** Icon strip on the left. Module icons, tooltips on hover. Active module highlighted with `--ctp-mauve` indicator.
+- **Page header:** `58px` height, `--ctp-mantle` background. Contains page title (with module icon), action buttons right-aligned.
+- **Content area:** `--ctp-base` background. Scrollable. Contains list views, kanban boards, or other primary content.
+- **Detail pane:** `360px` fixed width, `--ctp-mantle` background, `1px solid --ctp-surface0` left border. Appears on record selection.
+
+### Grid Patterns
+
+**Two-column form:**
+```css
+display: grid;
+grid-template-columns: 1fr 1fr;
+gap: 1.25rem 1.5rem;
+max-width: 800px;
+```
+
+**List + detail:**
+```css
+display: grid;
+grid-template-columns: 1fr 360px;
+min-height: calc(100vh - 52px - 58px);
+```
+
+### Breakpoints
+
+Not currently required. Silo targets desktop browsers on engineering workstations. If mobile support is added later, breakpoints will be defined at `768px` and `1024px`.
+
+---
+
+## Components
+
+### Buttons
+
+Four tiers. All buttons share a base style:
+
+```css
+display: inline-flex;
+align-items: center;
+gap: 0.35rem;
+padding: 0.4rem 0.85rem;
+border-radius: 6px;
+font-size: 12px;
+font-weight: 500;
+cursor: pointer;
+transition: all 0.15s;
+```
+
+| Tier | Name | Background | Border | Text | Hover |
+|------|------|-----------|--------|------|-------|
+| Primary | `.btn-primary` | `--ctp-mauve` | `--ctp-mauve` | `--ctp-crust` | `--ctp-lavender` bg + border |
+| Secondary | `.btn` (default) | `--ctp-surface0` | `--ctp-surface1` | `--ctp-text` | `--ctp-surface1` bg, `--ctp-overlay0` border |
+| Ghost | `.btn-ghost` | transparent | transparent | `--ctp-subtext0` | `--ctp-surface0` bg, `--ctp-text` text |
+| Danger | `.btn-danger` | transparent | `--ctp-surface1` | `--ctp-red` | `rgba(243, 139, 168, 0.1)` bg, `--ctp-red` border |
+
+Primary is used once per visible context (the main action). All other actions use secondary or ghost. Danger is only for destructive actions and always requires confirmation.
+
+### Badges
+
+Used for type indicators, status labels, and tags.
+
+```css
+display: inline-flex;
+align-items: center;
+padding: 0.15rem 0.5rem;
+border-radius: 4px;
+font-size: 10px;
+font-weight: 600;
+text-transform: uppercase;
+letter-spacing: 0.03em;
+```
+
+Badges use a translucent background derived from their accent color:
+
+```css
+/* Example: assembly badge */
+background: rgba(203, 166, 247, 0.15);  /* --ctp-mauve at 15% */
+color: var(--ctp-mauve);
+```
+
+Standard badge colors follow the [accent usage table](#accent-usage-for-data-types). Status badges:
+
+| Status | Color |
+|--------|-------|
+| Active / Released | `--ctp-green` |
+| Draft / In Progress | `--ctp-blue` |
+| Review / Pending | `--ctp-yellow` |
+| Obsolete / Rejected | `--ctp-red` |
+| Locked | `--ctp-overlay1` |
+
+### Form Inputs
+
+All inputs share a base style:
+
+```css
+background: var(--ctp-crust);
+border: 1px solid var(--ctp-surface1);
+border-radius: 6px;
+padding: 0.45rem 0.65rem;
+font-size: 12px;
+color: var(--ctp-text);
+transition: border-color 0.15s;
+```
+
+| State | Border | Shadow |
+|-------|--------|--------|
+| Default | `--ctp-surface1` | None |
+| Hover | `--ctp-overlay0` | None |
+| Focus | `--ctp-mauve` | `0 0 0 0.2rem rgba(203, 166, 247, 0.25)` |
+| Error | `--ctp-red` | `0 0 0 0.2rem rgba(243, 139, 168, 0.15)` |
+| Disabled | `--ctp-surface0` | None, `opacity: 0.5` |
+
+Placeholder text: `--ctp-overlay0`. Labels sit above inputs (never inline or floating).
+
+### Tag Input
+
+Used for multi-value fields (projects, tags):
+
+```css
+display: flex;
+flex-wrap: wrap;
+gap: 0.3rem;
+padding: 0.35rem 0.5rem;
+background: var(--ctp-crust);
+border: 1px solid var(--ctp-surface1);
+border-radius: 6px;
+min-height: 36px;
+```
+
+Individual tags use the badge pattern: `rgba(accent, 0.15)` background with accent text. Remove button (×) at `opacity: 0.6`, `1.0` on hover.
+
+### Tables
+
+```css
+width: 100%;
+border-collapse: collapse;
+font-size: 12px;
+```
+
+| Element | Style |
+|---------|-------|
+| Header row | `background: --ctp-mantle`, `font-size: 11px`, uppercase, `--ctp-overlay1` text |
+| Body row | `border-bottom: 1px solid --ctp-surface0` |
+| Row hover | `background: --ctp-surface0` |
+| Row selected | `background: rgba(203, 166, 247, 0.08)` |
+| Cell padding | `0.4rem 0.75rem` |
+| Text columns | Left-aligned |
+| Number columns | Right-aligned |
+| Date columns | Right-aligned |
+| Action columns | Center-aligned |
+
+Row actions use icon buttons (not text links). Icons at 14px, `--ctp-overlay1` default, `--ctp-text` on hover.
+
+### Tabs
+
+Used in detail panes and module sub-views:
+
+```css
+display: flex;
+gap: 0;
+border-bottom: 2px solid var(--ctp-surface0);
+```
+
+| State | Style |
+|-------|-------|
+| Default | `padding: 0.5rem 1rem`, `--ctp-subtext0` text, no border |
+| Hover | `--ctp-text` text |
+| Active | `--ctp-text` text, `font-weight: 600`, `border-bottom: 2px solid --ctp-mauve` (overlaps container border) |
+
+### Section Dividers
+
+Used to visually group form fields:
+
+```css
+display: flex;
+align-items: center;
+gap: 0.75rem;
+grid-column: 1 / -1;   /* span full form grid */
+margin-top: 0.75rem;
+```
+
+Contains a label (`11px`, uppercase, `--ctp-overlay0`) and a horizontal line (`flex: 1`, `1px solid --ctp-surface0`).
+
+### Sidebar Sections
+
+Stacked vertically within detail panes:
+
+```css
+padding: 1rem 1.25rem;
+border-bottom: 1px solid var(--ctp-surface0);
+```
+
+Last section has no bottom border. Section titles follow the section header typography (11px, uppercase, `--ctp-overlay0`).
+
+### Tooltips
+
+Appear on hover after a 300ms delay. Position: above the target element by default, flip below if insufficient space.
+
+```css
+background: var(--ctp-surface0);
+border: 1px solid var(--ctp-surface1);
+border-radius: 4px;
+padding: 0.3rem 0.6rem;
+font-size: 11px;
+color: var(--ctp-text);
+box-shadow: 0 4px 12px rgba(17, 17, 27, 0.4);
+```
+
+### Breadcrumbs
+
+Module navigation breadcrumbs:
+
+```
+Module Name  >  List View  >  Record Name  >  Sub-view
+```
+
+Separator: `>` character in `--ctp-overlay0`. Segments are clickable links in `--ctp-subtext1`. Active (final) segment is `--ctp-text` at `font-weight: 600`.
+
+### Dropdowns / Selects
+
+Follow the input base style. The dropdown menu:
+
+```css
+background: var(--ctp-surface0);
+border: 1px solid var(--ctp-surface1);
+border-radius: 6px;
+box-shadow: 0 8px 24px rgba(17, 17, 27, 0.5);
+padding: 0.25rem;
+max-height: 240px;
+overflow-y: auto;
+```
+
+Menu items:
+
+```css
+padding: 0.4rem 0.65rem;
+border-radius: 4px;
+font-size: 12px;
+color: var(--ctp-text);
+cursor: pointer;
+```
+
+Hover: `background: --ctp-surface1`. Selected: `background: rgba(203, 166, 247, 0.12)`, `color: --ctp-mauve`, `font-weight: 600`.
+
+---
+
+## Icons
+
+Use [Lucide](https://lucide.dev) icons. Size: 14px for inline/table contexts, 16px for buttons and navigation, 20px for page headers and empty states.
+
+Stroke width: 1.5px (Lucide default). Color inherits from parent text color unless explicitly set.
+
+Do not mix icon libraries. If Lucide does not have a suitable icon, request one be added or create a custom SVG following Lucide's 24×24 grid and stroke conventions.
+
+---
+
+## Transitions & Animation
+
+All interactive state changes use `transition: all 0.15s ease`. This applies to hover, focus, active, and open/close states.
+
+No entrance animations on page load. Content renders immediately. Skeleton loaders are acceptable for async data using a pulsing `--ctp-surface0` → `--ctp-surface1` gradient.
+
+Dropdown menus and tooltips appear instantly (no slide/fade). Collapse/expand panels (if used) transition `max-height` at `0.2s ease`.
+
+---
+
+## Styling Implementation
+
+Silo's React frontend uses **inline `React.CSSProperties` objects** with `var(--ctp-*)` token references. This is the project convention and must not be changed.
+
+### Rules
+
+- No CSS modules, no Tailwind, no external CSS-in-JS libraries.
+- Styles are defined as `const` objects at the top of each component file.
+- Shared style patterns (button base, input base) can be extracted to a `styles/` directory as exported `CSSProperties` objects.
+- Use `as const` or `as React.CSSProperties` for type safety.
+- Pseudo-classes (`:hover`, `:focus`) require state-driven inline styles or a thin CSS file for the base pseudo-class rules.
+
+### Example
+
+```typescript
+const styles = {
+  container: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 360px',
+    height: '100%',
+    overflow: 'hidden',
+  } as React.CSSProperties,
+
+  sidebar: {
+    background: 'var(--ctp-mantle)',
+    borderLeft: '1px solid var(--ctp-surface0)',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflowY: 'auto' as const,
+  } as React.CSSProperties,
+};
+```
+
+### Pseudo-class CSS
+
+A single `silo-base.css` file provides pseudo-class rules that cannot be expressed inline:
+
+```css
+/* Hover, focus, and active states for core interactive elements */
+.silo-input:hover { border-color: var(--ctp-overlay0); }
+.silo-input:focus { border-color: var(--ctp-mauve); box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25); }
+.silo-btn:hover { /* per-tier overrides */ }
+.silo-row:hover { background: var(--ctp-surface0); }
+```
+
+Components apply the corresponding class names alongside their inline styles. This is the only place class-based styling is used.
+
+---
+
+## Do / Don't
+
+| Do | Don't |
+|----|-------|
+| Use `var(--ctp-*)` for every color | Hardcode hex values |
+| Use the 4px spacing scale | Use arbitrary padding/margins |
+| Use Lucide icons at standard sizes | Mix icon libraries |
+| Use inline `CSSProperties` | Use CSS modules or Tailwind |
+| One primary button per visible context | Multiple competing primary buttons |
+| Use translucent accent backgrounds for badges | Use solid bright backgrounds for badges |
+| Use icon buttons for row-level table actions | Use text links in table rows |
+| Define styles as `const` at file top | Inline style objects in JSX |
+| Show tooltips on icon-only buttons | Leave icon buttons unlabeled |
+| Use section dividers to group form fields | Use cards or borders around field groups |
+| Follow the breadcrumb pattern for navigation | Use nested tab bars |
+
+---
+
+## Appendix: CSS Custom Properties Block
+
+Paste this at the root of the application stylesheet:
+
+```css
+:root {
+  --ctp-rosewater: #f5e0dc;
+  --ctp-flamingo: #f2cdcd;
+  --ctp-pink: #f5c2e7;
+  --ctp-mauve: #cba6f7;
+  --ctp-red: #f38ba8;
+  --ctp-maroon: #eba0ac;
+  --ctp-peach: #fab387;
+  --ctp-yellow: #f9e2af;
+  --ctp-green: #a6e3a1;
+  --ctp-teal: #94e2d5;
+  --ctp-sky: #89dceb;
+  --ctp-sapphire: #74c7ec;
+  --ctp-blue: #89b4fa;
+  --ctp-lavender: #b4befe;
+  --ctp-text: #cdd6f4;
+  --ctp-subtext1: #bac2de;
+  --ctp-subtext0: #a6adc8;
+  --ctp-overlay2: #9399b2;
+  --ctp-overlay1: #7f849c;
+  --ctp-overlay0: #6c7086;
+  --ctp-surface2: #585b70;
+  --ctp-surface1: #45475a;
+  --ctp-surface0: #313244;
+  --ctp-base: #1e1e2e;
+  --ctp-mantle: #181825;
+  --ctp-crust: #11111b;
+}
+```
--- a/web/src/components/items/BOMTab.tsx
+++ b/web/src/components/items/BOMTab.tsx
@@ -422,9 +422,10 @@ const tdStyle: React.CSSProperties = {

 const toolBtnStyle: React.CSSProperties = {
  padding: "0.25rem 0.5rem",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
  cursor: "pointer",
@@ -436,14 +437,17 @@ const actionBtnStyle: React.CSSProperties = {
  color: "var(--ctp-subtext1)",
  cursor: "pointer",
  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.1rem 0.3rem",
+  borderRadius: "0.375rem",
 };

 const saveBtnStyle: React.CSSProperties = {
  padding: "0.2rem 0.4rem",
  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  backgroundColor: "var(--ctp-green)",
  color: "var(--ctp-crust)",
  cursor: "pointer",
@@ -472,8 +476,9 @@ const manualBadge: React.CSSProperties = {
 const cancelBtnStyle: React.CSSProperties = {
  padding: "0.2rem 0.4rem",
  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-subtext1)",
  cursor: "pointer",
--- a/web/src/components/items/CategoryPicker.tsx
+++ b/web/src/components/items/CategoryPicker.tsx
@@ -96,10 +96,10 @@ export function CategoryPicker({
                  }}
                  style={{
                    padding: "0.2rem 0.5rem",
-                    fontSize: "0.7rem",
-                    fontWeight: isActive ? 600 : 400,
+                    fontSize: "0.75rem",
+                    fontWeight: 500,
                    border: "none",
-                    borderRadius: "0.25rem",
+                    borderRadius: "0.375rem",
                    cursor: "pointer",
                    backgroundColor: isActive
                      ? "rgba(203,166,247,0.2)"
--- a/web/src/components/items/CreateItemPane.tsx
+++ b/web/src/components/items/CreateItemPane.tsx
@@ -671,9 +671,10 @@ const headerStyle: React.CSSProperties = {

 const actionBtnStyle: React.CSSProperties = {
  padding: "0.3rem 0.75rem",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  color: "var(--ctp-crust)",
  cursor: "pointer",
 };
@@ -683,8 +684,10 @@ const cancelBtnStyle: React.CSSProperties = {
  border: "none",
  cursor: "pointer",
  color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };

 const inputStyle: React.CSSProperties = {
--- a/web/src/components/items/DeleteItemPane.tsx
+++ b/web/src/components/items/DeleteItemPane.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { del } from '../../api/client';
+import { useState } from "react";
+import { del } from "../../api/client";

 interface DeleteItemPaneProps {
  partNumber: string;
@@ -7,7 +7,11 @@ interface DeleteItemPaneProps {
  onCancel: () => void;
 }

-export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPaneProps) {
+export function DeleteItemPane({
+  partNumber,
+  onDeleted,
+  onCancel,
+}: DeleteItemPaneProps) {
  const [deleting, setDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);

@@ -18,59 +22,133 @@ export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPa
      await del(`/api/items/${encodeURIComponent(partNumber)}`);
      onDeleted();
    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to delete item');
+      setError(e instanceof Error ? e.message : "Failed to delete item");
    } finally {
      setDeleting(false);
    }
  };

  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <div style={{
-        display: 'flex', alignItems: 'center', gap: '0.75rem',
-        padding: '0.5rem 0.75rem',
-        borderBottom: '1px solid var(--ctp-surface1)',
-        backgroundColor: 'var(--ctp-mantle)',
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75rem",
+          padding: "0.5rem 0.75rem",
+          borderBottom: "1px solid var(--ctp-surface1)",
+          backgroundColor: "var(--ctp-mantle)",
          flexShrink: 0,
-      }}>
-        <span style={{ color: 'var(--ctp-red)', fontWeight: 600, fontSize: '0.9rem' }}>Delete Item</span>
+        }}
+      >
+        <span
+          style={{
+            color: "var(--ctp-red)",
+            fontWeight: 600,
+            fontSize: "0.9rem",
+          }}
+        >
+          Delete Item
+        </span>
        <span style={{ flex: 1 }} />
-        <button onClick={onCancel} style={headerBtnStyle}>Cancel</button>
+        <button onClick={onCancel} style={headerBtnStyle}>
+          Cancel
+        </button>
      </div>

-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '2rem', gap: '1rem' }}>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "2rem",
+          gap: "1rem",
+        }}
+      >
        {error && (
-          <div style={{ color: 'var(--ctp-red)', backgroundColor: 'rgba(243,139,168,0.1)', padding: '0.5rem 1rem', borderRadius: '0.3rem', fontSize: '0.85rem', width: '100%', textAlign: 'center' }}>
+          <div
+            style={{
+              color: "var(--ctp-red)",
+              backgroundColor: "rgba(243,139,168,0.1)",
+              padding: "0.5rem 1rem",
+              borderRadius: "0.3rem",
+              fontSize: "0.85rem",
+              width: "100%",
+              textAlign: "center",
+            }}
+          >
            {error}
          </div>
        )}

-        <div style={{ textAlign: 'center' }}>
-          <p style={{ fontSize: '0.9rem', color: 'var(--ctp-text)', marginBottom: '0.5rem' }}>
+        <div style={{ textAlign: "center" }}>
+          <p
+            style={{
+              fontSize: "0.9rem",
+              color: "var(--ctp-text)",
+              marginBottom: "0.5rem",
+            }}
+          >
            Permanently delete item
          </p>
-          <p style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--ctp-peach)', fontSize: '1.1rem', fontWeight: 600 }}>
+          <p
+            style={{
+              fontFamily: "'JetBrains Mono', monospace",
+              color: "var(--ctp-peach)",
+              fontSize: "1.1rem",
+              fontWeight: 600,
+            }}
+          >
            {partNumber}
          </p>
        </div>

-        <p style={{ color: 'var(--ctp-subtext0)', fontSize: '0.85rem', textAlign: 'center', maxWidth: 300 }}>
-          This will permanently remove this item, all its revisions, BOM entries, and file attachments. This action cannot be undone.
+        <p
+          style={{
+            color: "var(--ctp-subtext0)",
+            fontSize: "0.85rem",
+            textAlign: "center",
+            maxWidth: 300,
+          }}
+        >
+          This will permanently remove this item, all its revisions, BOM
+          entries, and file attachments. This action cannot be undone.
        </p>

-        <div style={{ display: 'flex', gap: '0.75rem', marginTop: '0.5rem' }}>
-          <button onClick={onCancel} style={{
-            padding: '0.5rem 1.25rem', fontSize: '0.85rem', border: 'none', borderRadius: '0.4rem',
-            backgroundColor: 'var(--ctp-surface1)', color: 'var(--ctp-text)', cursor: 'pointer',
-          }}>
+        <div style={{ display: "flex", gap: "0.75rem", marginTop: "0.5rem" }}>
+          <button
+            onClick={onCancel}
+            style={{
+              padding: "0.5rem 1.25rem",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              border: "none",
+              borderRadius: "0.375rem",
+              backgroundColor: "var(--ctp-surface1)",
+              color: "var(--ctp-text)",
+              cursor: "pointer",
+            }}
+          >
            Cancel
          </button>
-          <button onClick={() => void handleDelete()} disabled={deleting} style={{
-            padding: '0.5rem 1.25rem', fontSize: '0.85rem', border: 'none', borderRadius: '0.4rem',
-            backgroundColor: 'var(--ctp-red)', color: 'var(--ctp-crust)', cursor: 'pointer',
+          <button
+            onClick={() => void handleDelete()}
+            disabled={deleting}
+            style={{
+              padding: "0.5rem 1.25rem",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              border: "none",
+              borderRadius: "0.375rem",
+              backgroundColor: "var(--ctp-red)",
+              color: "var(--ctp-crust)",
+              cursor: "pointer",
              opacity: deleting ? 0.6 : 1,
-          }}>
-            {deleting ? 'Deleting...' : 'Delete Permanently'}
+            }}
+          >
+            {deleting ? "Deleting..." : "Delete Permanently"}
          </button>
        </div>
      </div>
@@ -79,6 +157,12 @@ export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPa
 }

 const headerBtnStyle: React.CSSProperties = {
-  background: 'none', border: 'none', cursor: 'pointer',
-  color: 'var(--ctp-subtext1)', fontSize: '0.8rem', padding: '0.2rem 0.4rem',
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: "var(--ctp-subtext1)",
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/EditItemPane.tsx
+++ b/web/src/components/items/EditItemPane.tsx
@@ -90,9 +90,10 @@ export function EditItemPane({
          disabled={saving}
          style={{
            padding: "0.3rem 0.75rem",
-            fontSize: "0.8rem",
+            fontSize: "0.75rem",
+            fontWeight: 500,
            border: "none",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
            backgroundColor: "var(--ctp-blue)",
            color: "var(--ctp-crust)",
            cursor: "pointer",
@@ -215,6 +216,8 @@ const headerBtnStyle: React.CSSProperties = {
  border: "none",
  cursor: "pointer",
  color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/ImportItemsPane.tsx
+++ b/web/src/components/items/ImportItemsPane.tsx
@@ -185,9 +185,10 @@ export function ImportItemsPane({
              disabled={!file || importing}
              style={{
                padding: "0.4rem 0.75rem",
-                fontSize: "0.85rem",
+                fontSize: "0.75rem",
+                fontWeight: 500,
                border: "none",
-                borderRadius: "0.3rem",
+                borderRadius: "0.375rem",
                backgroundColor: "var(--ctp-yellow)",
                color: "var(--ctp-crust)",
                cursor: "pointer",
@@ -202,9 +203,10 @@ export function ImportItemsPane({
              disabled={importing || (result?.error_count ?? 0) > 0}
              style={{
                padding: "0.4rem 0.75rem",
-                fontSize: "0.85rem",
+                fontSize: "0.75rem",
+                fontWeight: 500,
                border: "none",
-                borderRadius: "0.3rem",
+                borderRadius: "0.375rem",
                backgroundColor: "var(--ctp-green)",
                color: "var(--ctp-crust)",
                cursor: "pointer",
@@ -289,6 +291,8 @@ const headerBtnStyle: React.CSSProperties = {
  border: "none",
  cursor: "pointer",
  color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/ItemTable.tsx
+++ b/web/src/components/items/ItemTable.tsx
@@ -385,7 +385,8 @@ const actionBtnStyle: React.CSSProperties = {
  border: "none",
  color: "var(--ctp-subtext1)",
  cursor: "pointer",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.15rem 0.4rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/ItemsToolbar.tsx
+++ b/web/src/components/items/ItemsToolbar.tsx
@@ -37,9 +37,10 @@ export function ItemsToolbar({
      onClick={() => onFilterChange({ searchScope: scope })}
      style={{
        padding: "var(--d-input-py) var(--d-input-px)",
-        fontSize: "var(--d-input-font)",
+        fontSize: "0.75rem",
+        fontWeight: 500,
        border: "none",
-        borderRadius: "0.3rem",
+        borderRadius: "0.375rem",
        cursor: "pointer",
        backgroundColor:
          filters.searchScope === scope
@@ -173,8 +174,9 @@ const toolBtnStyle: React.CSSProperties = {
  padding: "var(--d-input-py) var(--d-input-px)",
  backgroundColor: "var(--ctp-surface1)",
  border: "none",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  color: "var(--ctp-text)",
-  fontSize: "var(--d-input-font)",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  cursor: "pointer",
 };
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -162,9 +162,9 @@ const btnPrimaryStyle: React.CSSProperties = {
  display: "block",
  width: "100%",
  padding: "0.75rem 1.5rem",
-  borderRadius: "0.5rem",
-  fontWeight: 600,
-  fontSize: "1rem",
+  borderRadius: "0.375rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
@@ -187,9 +187,9 @@ const btnOidcStyle: React.CSSProperties = {
  display: "block",
  width: "100%",
  padding: "0.75rem 1.5rem",
-  borderRadius: "0.5rem",
-  fontWeight: 600,
-  fontSize: "1rem",
+  borderRadius: "0.375rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
  border: "none",
  backgroundColor: "var(--ctp-blue)",
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -443,43 +443,45 @@ export function ProjectsPage() {
 // Styles
 const btnPrimaryStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
  color: "var(--ctp-crust)",
-  fontWeight: 600,
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

 const btnSecondaryStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

 const btnDangerStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-red)",
  color: "var(--ctp-crust)",
-  fontWeight: 600,
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

 const btnSmallStyle: React.CSSProperties = {
  padding: "0.3rem 0.6rem",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
-  fontSize: "0.8rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

@@ -504,8 +506,9 @@ const formCloseStyle: React.CSSProperties = {
  border: "none",
  color: "inherit",
  cursor: "pointer",
-  fontSize: "0.85rem",
-  fontWeight: 600,
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  borderRadius: "0.375rem",
 };

 const errorBannerStyle: React.CSSProperties = {
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -706,22 +706,23 @@ const tdStyle: React.CSSProperties = {

 const btnTinyStyle: React.CSSProperties = {
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
  fontSize: "0.75rem",
+  fontWeight: 500,
  cursor: "pointer",
 };

 const btnTinyPrimaryStyle: React.CSSProperties = {
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
  color: "var(--ctp-crust)",
  fontSize: "0.75rem",
-  fontWeight: 600,
+  fontWeight: 500,
  cursor: "pointer",
 };

--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -404,12 +404,12 @@ const inputStyle: React.CSSProperties = {

 const btnPrimaryStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
  color: "var(--ctp-crust)",
-  fontWeight: 600,
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
  whiteSpace: "nowrap",
 };
@@ -418,19 +418,22 @@ const btnCopyStyle: React.CSSProperties = {
  padding: "0.4rem 0.75rem",
  background: "var(--ctp-surface1)",
  border: "none",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  color: "var(--ctp-text)",
  cursor: "pointer",
-  fontSize: "0.85rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
 };

 const btnDismissStyle: React.CSSProperties = {
  padding: "0.4rem 0.75rem",
  background: "none",
  border: "none",
+  borderRadius: "0.375rem",
  color: "var(--ctp-subtext0)",
  cursor: "pointer",
-  fontSize: "0.85rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
 };

 const btnDangerStyle: React.CSSProperties = {
@@ -438,9 +441,10 @@ const btnDangerStyle: React.CSSProperties = {
  color: "var(--ctp-red)",
  border: "none",
  padding: "0.3rem 0.6rem",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  cursor: "pointer",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
 };

 const btnRevokeConfirmStyle: React.CSSProperties = {
@@ -448,19 +452,20 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
  color: "var(--ctp-crust)",
  border: "none",
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  cursor: "pointer",
  fontSize: "0.75rem",
-  fontWeight: 600,
+  fontWeight: 500,
 };

 const btnTinyStyle: React.CSSProperties = {
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
  fontSize: "0.75rem",
+  fontWeight: 500,
  cursor: "pointer",
 };