diff --git a/.claude/rules/18-relative-units.md b/.claude/rules/18-relative-units.md
new file mode 100644
index 0000000..648dd35
--- /dev/null
+++ b/.claude/rules/18-relative-units.md
@@ -0,0 +1,17 @@
+# Relative Units (CSS)
+
+Use relative units (`em`, `rem`, `%`, `vh`, `vw`) for layout and spacing. Pixels are acceptable only for:
+
+- Icon sizes (`width`/`height` on `<svg>` or icon containers)
+- Borders and outlines (`1px solid ...`)
+- Box shadows
+
+## Rules
+
+- **Layout dimensions** (width, height, max-width, min-width): use `em`, `rem`, `%`, or viewport units.
+- **Padding and margin**: use `em` or `rem`.
+- **Font sizes**: use `rem` or `em`, never `px`.
+- **Gap, border-radius**: use `em` or `rem`.
+- **Media queries**: use `em`.
+- When existing code uses `px` for layout elements, convert to relative units as part of the change.
+- CSS custom properties for typography (`--ui-font-size`, `--term-font-size`) store `px` values because they feed into JS APIs (xterm.js) that require pixels. This is the only exception beyond icons/borders.
diff --git a/v2/src/App.svelte b/v2/src/App.svelte
index 9991c07..6e5e1ce 100644
--- a/v2/src/App.svelte
+++ b/v2/src/App.svelte
@@ -217,7 +217,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px 12px;
+    padding: 0.5rem 0.75rem;
     border-bottom: 1px solid var(--ctp-surface0);
     flex-shrink: 0;
   }
@@ -233,11 +233,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 22px;
-    height: 22px;
+    width: 1.375rem;
+    height: 1.375rem;
     background: transparent;
     border: none;
-    border-radius: 4px;
+    border-radius: 0.25rem;
     color: var(--ctp-subtext0);
     cursor: pointer;
   }
diff --git a/v2/src/lib/components/Workspace/GlobalTabBar.svelte b/v2/src/lib/components/Workspace/GlobalTabBar.svelte
index 9920668..1cca548 100644
--- a/v2/src/lib/components/Workspace/GlobalTabBar.svelte
+++ b/v2/src/lib/components/Workspace/GlobalTabBar.svelte
@@ -61,24 +61,24 @@
   .sidebar-rail {
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    padding: 6px 4px;
+    gap: 0.25rem;
+    padding: 0.5rem 0.375rem;
     background: var(--ctp-mantle);
     border-right: 1px solid var(--ctp-surface0);
     flex-shrink: 0;
-    width: 36px;
+    width: 2.75rem;
   }
 
   .rail-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: 2rem;
+    height: 2rem;
     background: transparent;
     border: none;
-    border-radius: 4px;
-    color: var(--ctp-overlay1);
+    border-radius: 0.375rem;
+    color: var(--ctp-subtext0);
     cursor: pointer;
     transition: color 0.15s, background 0.15s;
   }