From 47051dc79a9288d43250c06b7f78135b6ba11661 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sat, 12 Sep 2026 12:29:02 -0400
Subject: [PATCH] Repaint theme blue with larger typography
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap the cherry-red primary for the logo's blue, bump body 13→15px
and h1 32→40px, and add semantic tokens (--bg-*, --accent-*, --text-*)
so future palette shifts are a single-file edit. Cherry-red survives
only for danger states and the brand cherry mark.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/lib/ui/components/BetaPanel.svelte        |  96 ++++----
 src/lib/ui/components/BrandMark.svelte        |  18 +-
 src/lib/ui/components/DiffViewer.svelte       |  40 ++--
 src/lib/ui/components/LogPanel.svelte         |  66 +++---
 src/lib/ui/components/PipelineTimeline.svelte |  48 ++--
 src/lib/ui/components/PlayerRoster.svelte     |  32 +--
 src/lib/ui/components/ServerCard.svelte       |  70 +++---
 src/lib/ui/components/StatusDot.svelte        |   2 +-
 src/lib/ui/styles/tokens.css                  | 112 ++++++---
 src/routes/+layout.svelte                     |  38 +--
 src/routes/+page.svelte                       |  60 ++---
 src/routes/betas/+page.svelte                 |   9 +-
 src/routes/deployments/+page.svelte           |  49 ++--
 src/routes/deployments/[id]/+page.svelte      |  86 +++----
 src/routes/servers/[name]/+page.svelte        | 220 +++++++++---------
 15 files changed, 499 insertions(+), 447 deletions(-)

diff --git a/src/lib/ui/components/BetaPanel.svelte b/src/lib/ui/components/BetaPanel.svelte
index 8cc62ec..6d6f3f5 100644
--- a/src/lib/ui/components/BetaPanel.svelte
+++ b/src/lib/ui/components/BetaPanel.svelte
@@ -125,55 +125,55 @@
 
 <style>
     .panel {
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
         border-radius: var(--r-md);
-        padding: 20px 22px;
+        padding: var(--pad-panel);
     }
     h3 {
-        margin: 0 0 10px;
+        margin: 0 0 14px;
         font-family: var(--font-body);
-        font-size: 11px;
+        font-size: var(--text-xs);
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
         color: var(--ink-300);
     }
-    h3:not(:first-of-type) { margin-top: 24px; }
+    h3:not(:first-of-type) { margin-top: var(--gap-section); }
     .empty {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
         margin: 0;
     }
-    .staged { list-style: none; padding: 0; margin: 0 0 14px; }
+    .staged { list-style: none; padding: 0; margin: 0 0 18px; }
     .staged li {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 6px 0;
-        border-bottom: 1px solid var(--cherry-700);
+        padding: 8px 0;
+        border-bottom: 1px solid var(--border);
     }
     .staged code {
         color: var(--cream);
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
     }
     .tag {
         font-family: var(--font-mono);
-        font-size: 10px;
-        padding: 2px 7px;
+        font-size: var(--text-xs);
+        padding: 3px 9px;
         border-radius: var(--r-sm);
         border: 1px solid transparent;
     }
     .tag.new {
-        background: rgba(34, 224, 255, 0.1);
-        border-color: rgba(34, 224, 255, 0.3);
+        background: rgba(124, 212, 255, 0.10);
+        border-color: rgba(124, 212, 255, 0.3);
         color: var(--spark-500);
     }
     .tag.replaces {
-        background: rgba(242, 230, 200, 0.08);
-        border-color: rgba(242, 230, 200, 0.25);
+        background: rgba(124, 192, 245, 0.10);
+        border-color: rgba(124, 192, 245, 0.28);
         color: var(--cream);
     }
     .tag.ambig {
@@ -183,89 +183,89 @@
     }
     form {
         display: flex;
-        gap: 8px;
-        margin-top: 10px;
+        gap: 10px;
+        margin-top: 14px;
     }
     form input {
         flex: 1;
-        background: var(--cherry-975);
+        background: var(--bg-page);
         color: var(--ink-100);
-        border: 1px solid var(--cherry-700);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 8px 10px;
+        padding: 10px 12px;
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
     }
     form input:focus {
         outline: none;
-        border-color: var(--spark-500);
-        box-shadow: var(--spark-glow);
+        border-color: var(--accent);
+        box-shadow: var(--accent-glow);
     }
     button {
-        background: var(--cherry-875);
+        background: var(--bg-card);
         color: var(--ink-100);
-        border: 1px solid var(--cherry-700);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 8px 14px;
+        padding: 10px 16px;
         font-family: var(--font-body);
-        font-size: 12px;
+        font-size: var(--text-sm);
         font-weight: 500;
         cursor: pointer;
         transition: border-color 0.15s, box-shadow 0.15s;
     }
     button:hover:not(:disabled) {
-        border-color: var(--spark-500);
-        box-shadow: var(--spark-glow);
+        border-color: var(--accent);
+        box-shadow: var(--accent-glow);
     }
     button:disabled { opacity: 0.4; cursor: default; }
     button.primary {
-        background: linear-gradient(180deg, var(--cherry-500), var(--cherry-600));
-        border-color: var(--cherry-400);
+        background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
+        border-color: var(--blue-400);
         color: var(--cream);
         font-weight: 600;
     }
     button.danger {
-        background: var(--cherry-925);
+        background: var(--bg-nav);
         border-color: rgba(255, 48, 80, 0.4);
         color: var(--danger-500);
     }
     .beta {
-        padding: 12px 14px;
-        margin: 8px 0;
-        background: var(--cherry-875);
+        padding: 16px 18px;
+        margin: 10px 0;
+        background: var(--bg-card);
         border-radius: var(--r-sm);
-        border: 1px solid var(--cherry-700);
+        border: 1px solid var(--border);
     }
     .head {
         display: flex;
         justify-content: space-between;
         align-items: baseline;
-        margin-bottom: 6px;
+        margin-bottom: 8px;
     }
-    .head strong { color: var(--cream); font-weight: 600; }
+    .head strong { color: var(--cream); font-weight: 600; font-size: var(--text-md); }
     .rev {
         color: var(--ink-500);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         font-family: var(--font-mono);
     }
     .row {
-        font-size: 12px;
+        font-size: var(--text-sm);
         color: var(--ink-300);
-        margin: 3px 0;
+        margin: 4px 0;
     }
     .k {
         color: var(--ink-500);
-        margin-right: 8px;
+        margin-right: 10px;
         font-family: var(--font-mono);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 0.8px;
     }
-    .actions { display: flex; gap: 6px; margin-top: 10px; }
+    .actions { display: flex; gap: 8px; margin-top: 14px; }
     .flash {
         color: var(--danger-500);
         font-family: var(--font-mono);
-        font-size: 12px;
-        margin: 14px 0 0;
+        font-size: var(--text-mono);
+        margin: 18px 0 0;
     }
 </style>
diff --git a/src/lib/ui/components/BrandMark.svelte b/src/lib/ui/components/BrandMark.svelte
index 7cc80e6..ad01a15 100644
--- a/src/lib/ui/components/BrandMark.svelte
+++ b/src/lib/ui/components/BrandMark.svelte
@@ -16,22 +16,22 @@
     .mark {
         display: inline-flex;
         align-items: center;
-        gap: 8px;
+        gap: 10px;
         font-family: var(--font-display);
         color: var(--cream);
-        letter-spacing: 2px;
+        letter-spacing: var(--tracking-display);
         line-height: 1;
         animation: cherry-fizz 6s ease-in-out infinite;
     }
-    .mark-sm .word { font-size: 12px; letter-spacing: 1.5px; }
-    .mark-md .word { font-size: 16px; }
-    .mark-lg .word { font-size: 26px; letter-spacing: 3px; }
+    .mark-sm .word { font-size: 14px; letter-spacing: 1.5px; }
+    .mark-md .word { font-size: 18px; }
+    .mark-lg .word { font-size: 32px; letter-spacing: 3px; }
 
     .bolt {
         fill: var(--spark-500);
-        filter: drop-shadow(0 0 4px rgba(34, 224, 255, 0.7));
+        filter: drop-shadow(0 0 5px rgba(124, 212, 255, 0.75));
     }
-    .mark-sm .bolt { width: 10px; height: 16px; }
-    .mark-md .bolt { width: 12px; height: 20px; }
-    .mark-lg .bolt { width: 18px; height: 30px; }
+    .mark-sm .bolt { width: 12px; height: 20px; }
+    .mark-md .bolt { width: 14px; height: 24px; }
+    .mark-lg .bolt { width: 22px; height: 36px; }
 </style>
diff --git a/src/lib/ui/components/DiffViewer.svelte b/src/lib/ui/components/DiffViewer.svelte
index 8a67502..31dcf3f 100644
--- a/src/lib/ui/components/DiffViewer.svelte
+++ b/src/lib/ui/components/DiffViewer.svelte
@@ -51,38 +51,38 @@
 
 <style>
     .diff {
-        background: var(--cherry-975);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-page);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        margin: 8px 0;
+        margin: 10px 0;
         overflow: hidden;
     }
     header {
         display: flex;
-        gap: 10px;
-        padding: 8px 12px;
-        background: var(--cherry-925);
-        border-bottom: 1px solid var(--cherry-700);
-        font-size: 12px;
+        gap: 12px;
+        padding: 10px 14px;
+        background: var(--bg-nav);
+        border-bottom: 1px solid var(--border);
+        font-size: var(--text-sm);
         align-items: center;
     }
     .verb {
-        padding: 2px 8px;
+        padding: 3px 10px;
         border-radius: var(--r-sm);
         font-family: var(--font-mono);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 0.8px;
         border: 1px solid transparent;
     }
     .verb-added {
-        background: rgba(34, 224, 255, 0.1);
-        border-color: rgba(34, 224, 255, 0.3);
+        background: rgba(124, 212, 255, 0.10);
+        border-color: rgba(124, 212, 255, 0.3);
         color: var(--spark-500);
     }
     .verb-updated {
-        background: rgba(242, 230, 200, 0.08);
-        border-color: rgba(242, 230, 200, 0.25);
+        background: rgba(124, 192, 245, 0.10);
+        border-color: rgba(124, 192, 245, 0.28);
         color: var(--cream);
     }
     .verb-removed {
@@ -95,18 +95,18 @@
         border-color: rgba(255, 176, 32, 0.3);
         color: var(--amber-500);
     }
-    .path { color: var(--ink-100); font-family: var(--font-mono); font-size: 12px; }
+    .path { color: var(--ink-100); font-family: var(--font-mono); font-size: var(--text-mono); }
     pre {
         margin: 0;
-        padding: 10px 12px;
+        padding: 14px 16px;
         font-family: var(--font-mono);
-        font-size: 12px;
-        line-height: 1.55;
+        font-size: var(--text-mono);
+        line-height: var(--leading-mono);
         color: var(--ink-300);
-        max-height: 500px;
+        max-height: 540px;
         overflow: auto;
     }
     .ln { display: block; }
-    .ln-add { background: rgba(34, 224, 255, 0.08); color: var(--spark-400); }
+    .ln-add { background: rgba(124, 212, 255, 0.08); color: var(--spark-400); }
     .ln-del { background: rgba(255, 48, 80, 0.08); color: #ff8a9a; }
 </style>
diff --git a/src/lib/ui/components/LogPanel.svelte b/src/lib/ui/components/LogPanel.svelte
index 9028f87..c6a92c8 100644
--- a/src/lib/ui/components/LogPanel.svelte
+++ b/src/lib/ui/components/LogPanel.svelte
@@ -166,101 +166,101 @@
     .log-panel {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: 10px;
     }
     .tabs {
         display: flex;
-        gap: 4px;
+        gap: 6px;
         align-items: center;
-        border-bottom: 1px solid var(--cherry-700);
-        padding-bottom: 6px;
+        border-bottom: 1px solid var(--border);
+        padding-bottom: 8px;
     }
     .tab {
         background: transparent;
         color: var(--ink-300);
         border: 1px solid transparent;
         border-radius: var(--r-sm) var(--r-sm) 0 0;
-        padding: 6px 12px;
+        padding: 8px 14px;
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
         cursor: pointer;
         transition: color 0.15s, background 0.15s;
     }
-    .tab:hover { color: var(--cream); background: var(--cherry-875); }
+    .tab:hover { color: var(--cream); background: var(--bg-card); }
     .tab.on {
         color: var(--cream);
-        background: var(--cherry-875);
-        border-color: var(--cherry-700);
-        border-bottom-color: var(--cherry-875);
+        background: var(--bg-card);
+        border-color: var(--border);
+        border-bottom-color: var(--bg-card);
     }
     .right {
         margin-left: auto;
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 14px;
     }
     .meta {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
     }
     .auto {
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 6px;
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         cursor: pointer;
         user-select: none;
     }
-    .auto input { accent-color: var(--spark-500); }
+    .auto input { accent-color: var(--accent); }
     .refresh {
-        background: var(--cherry-875);
+        background: var(--bg-card);
         color: var(--ink-100);
-        border: 1px solid var(--cherry-700);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 4px 10px;
+        padding: 6px 12px;
         font-family: var(--font-body);
-        font-size: 11px;
+        font-size: var(--text-sm);
         cursor: pointer;
     }
     .refresh:hover:not(:disabled) {
-        border-color: var(--spark-500);
-        box-shadow: var(--spark-glow);
+        border-color: var(--accent);
+        box-shadow: var(--accent-glow);
     }
     .refresh:disabled { opacity: 0.4; cursor: default; }
 
     .body {
         margin: 0;
-        padding: 12px 14px;
-        background: var(--cherry-975);
-        border: 1px solid var(--cherry-700);
+        padding: 16px 18px;
+        background: var(--bg-page);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
         color: var(--ink-300);
         font-family: var(--font-mono);
-        font-size: 11.5px;
-        line-height: 1.55;
-        max-height: 520px;
+        font-size: var(--text-mono);
+        line-height: var(--leading-mono);
+        max-height: 560px;
         overflow: auto;
         white-space: pre-wrap;
         word-break: break-word;
     }
     .empty, .error {
-        padding: 24px 14px;
+        padding: 28px 16px;
         text-align: center;
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
         border-radius: var(--r-sm);
     }
     .empty {
         color: var(--ink-500);
-        background: var(--cherry-925);
-        border: 1px dashed var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px dashed var(--border);
     }
     .empty code {
         color: var(--cream-dim);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
     }
     .error {
         color: var(--danger-500);
@@ -270,7 +270,7 @@
     .foot {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 10.5px;
+        font-size: var(--text-mono-sm);
         text-align: right;
     }
 </style>
diff --git a/src/lib/ui/components/PipelineTimeline.svelte b/src/lib/ui/components/PipelineTimeline.svelte
index 523d1e2..a59ef00 100644
--- a/src/lib/ui/components/PipelineTimeline.svelte
+++ b/src/lib/ui/components/PipelineTimeline.svelte
@@ -45,21 +45,21 @@
 
 <style>
     .wrapper {
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
         border-radius: var(--r-md);
-        padding: 14px 16px;
+        padding: var(--pad-card);
     }
     header {
         display: flex;
         justify-content: space-between;
         align-items: baseline;
-        margin-bottom: 10px;
+        margin-bottom: 14px;
     }
     h3 {
         margin: 0;
         font-family: var(--font-body);
-        font-size: 11px;
+        font-size: var(--text-xs);
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
@@ -68,41 +68,41 @@
     .empty {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
         margin: 0;
-        padding: 12px 0;
+        padding: 14px 0;
     }
-    .rows { display: grid; gap: 8px; }
+    .rows { display: grid; gap: 10px; }
     .row {
         display: block;
         color: var(--ink-100);
         text-decoration: none;
-        padding: 10px 12px;
-        background: var(--cherry-875);
+        padding: 12px 14px;
+        background: var(--bg-card);
         border-radius: var(--r-sm);
-        border: 1px solid var(--cherry-700);
+        border: 1px solid var(--border);
         transition: border-color 0.15s;
     }
-    .row:hover { border-color: var(--spark-500); }
+    .row:hover { border-color: var(--accent); }
     .row-head {
         display: flex;
         justify-content: space-between;
         align-items: baseline;
-        margin-bottom: 6px;
+        margin-bottom: 8px;
     }
-    .action { font-family: var(--font-mono); font-size: 12px; color: var(--cream); }
-    .count { color: var(--ink-500); font-size: 11px; font-family: var(--font-mono); }
-    .chips { display: flex; flex-wrap: wrap; gap: 4px; }
+    .action { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--cream); }
+    .count { color: var(--ink-500); font-size: var(--text-mono-sm); font-family: var(--font-mono); }
+    .chips { display: flex; flex-wrap: wrap; gap: 6px; }
     .chip {
-        padding: 2px 7px;
+        padding: 3px 9px;
         border-radius: var(--r-sm);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         font-family: var(--font-mono);
         border: 1px solid transparent;
     }
     .chip-done {
-        background: rgba(34, 224, 255, 0.1);
-        border-color: rgba(34, 224, 255, 0.3);
+        background: rgba(124, 212, 255, 0.10);
+        border-color: rgba(124, 212, 255, 0.3);
         color: var(--spark-500);
     }
     .chip-failed {
@@ -116,13 +116,13 @@
         color: var(--amber-500);
     }
     .chip-held {
-        background: rgba(242, 230, 200, 0.08);
-        border-color: rgba(242, 230, 200, 0.25);
+        background: rgba(124, 192, 245, 0.10);
+        border-color: rgba(124, 192, 245, 0.28);
         color: var(--cream);
     }
     .chip-manual {
-        background: var(--cherry-925);
-        border-color: var(--cherry-700);
+        background: var(--bg-nav);
+        border-color: var(--border);
         color: var(--ink-500);
     }
 </style>
diff --git a/src/lib/ui/components/PlayerRoster.svelte b/src/lib/ui/components/PlayerRoster.svelte
index 2945eb9..08b0bcd 100644
--- a/src/lib/ui/components/PlayerRoster.svelte
+++ b/src/lib/ui/components/PlayerRoster.svelte
@@ -55,8 +55,8 @@
 <style>
     .state {
         font-family: var(--font-mono);
-        font-size: 12px;
-        padding: 10px 12px;
+        font-size: var(--text-mono);
+        padding: 14px 16px;
         border-radius: var(--r-sm);
     }
     .state.offline {
@@ -66,8 +66,8 @@
     }
     .state.empty {
         color: var(--ink-500);
-        background: var(--cherry-925);
-        border: 1px dashed var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px dashed var(--border);
     }
 
     .roster {
@@ -75,35 +75,35 @@
         border-collapse: separate;
         border-spacing: 0;
         font-family: var(--font-body);
-        font-size: 13px;
+        font-size: var(--text-base);
         color: var(--ink-100);
     }
     .roster thead th {
         text-align: left;
         font-family: var(--font-body);
-        font-size: 10px;
+        font-size: var(--text-xs);
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 1.2px;
         color: var(--ink-500);
-        padding: 6px 10px;
-        border-bottom: 1px solid var(--cherry-700);
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--border);
     }
     .roster tbody td {
-        padding: 8px 10px;
-        border-bottom: 1px solid rgba(74, 15, 30, 0.4);
+        padding: 12px;
+        border-bottom: 1px solid rgba(30, 50, 96, 0.5);
     }
     .roster tbody tr:hover td {
-        background: rgba(34, 224, 255, 0.04);
+        background: rgba(124, 192, 245, 0.06);
     }
-    .roster.compact tbody td { padding: 4px 8px; font-size: 12px; }
+    .roster.compact tbody td { padding: 6px 10px; font-size: var(--text-sm); }
 
     .mono { font-family: var(--font-mono); }
-    .col-num { width: 40px; color: var(--ink-500); }
+    .col-num { width: 48px; color: var(--ink-500); }
     .col-name { color: var(--cream); font-weight: 500; }
-    .col-score { width: 90px; color: var(--spark-500); }
-    .col-ping { width: 80px; }
-    .col-guid { width: 110px; color: var(--ink-500); }
+    .col-score { width: 100px; color: var(--spark-500); }
+    .col-ping { width: 90px; }
+    .col-guid { width: 120px; color: var(--ink-500); }
 
     .ping-good { color: var(--spark-400); }
     .ping-ok { color: var(--cream-dim); }
diff --git a/src/lib/ui/components/ServerCard.svelte b/src/lib/ui/components/ServerCard.svelte
index 1215111..8a2c90d 100644
--- a/src/lib/ui/components/ServerCard.svelte
+++ b/src/lib/ui/components/ServerCard.svelte
@@ -122,12 +122,12 @@
     .card {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 14px;
         background:
-            linear-gradient(180deg, var(--cherry-875) 0%, var(--cherry-925) 100%);
-        border: 1px solid var(--cherry-700);
+            linear-gradient(180deg, var(--bg-card) 0%, var(--bg-nav) 100%);
+        border: 1px solid var(--border);
         border-radius: var(--r-md);
-        padding: 14px 16px 12px;
+        padding: var(--pad-card);
         color: var(--ink-100);
         text-decoration: none;
         transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
@@ -140,12 +140,12 @@
         position: absolute;
         inset: 0 0 auto 0;
         height: 2px;
-        background: linear-gradient(90deg, transparent, var(--cherry-500), transparent);
-        opacity: 0.5;
+        background: linear-gradient(90deg, transparent, var(--accent), transparent);
+        opacity: 0.55;
     }
     .card:hover {
-        border-color: var(--spark-500);
-        box-shadow: var(--spark-glow), var(--shadow-card);
+        border-color: var(--accent);
+        box-shadow: var(--accent-glow), var(--shadow-card);
         transform: translateY(-1px);
     }
     .card.restarting { border-color: var(--amber-500); box-shadow: var(--amber-glow); }
@@ -155,12 +155,12 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        gap: 10px;
+        gap: 12px;
     }
-    .name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+    .name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
     .name {
         font-family: var(--font-body);
-        font-size: 15px;
+        font-size: var(--text-md);
         font-weight: 600;
         letter-spacing: 0.3px;
         color: var(--cream);
@@ -169,15 +169,15 @@
         white-space: nowrap;
     }
     .players {
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
-        padding: 3px 10px;
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
+        padding: 4px 12px;
         border-radius: 999px;
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
         font-weight: 500;
         color: var(--ink-500);
-        min-width: 34px;
+        min-width: 38px;
         text-align: center;
     }
     .players.has-players {
@@ -189,17 +189,17 @@
         color: var(--danger-500);
         border-color: rgba(255, 48, 80, 0.4);
         font-family: var(--font-body);
-        font-size: 10px;
-        letter-spacing: 1px;
+        font-size: var(--text-xs);
+        letter-spacing: var(--tracking-label);
         text-transform: uppercase;
     }
 
     .meta {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 8px;
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
         color: var(--ink-300);
         white-space: nowrap;
         overflow: hidden;
@@ -215,15 +215,15 @@
         margin: 0;
         display: flex;
         flex-direction: column;
-        gap: 2px;
+        gap: 4px;
     }
     .roster li {
         display: grid;
         grid-template-columns: 1fr auto auto;
-        gap: 10px;
+        gap: 12px;
         align-items: center;
-        padding: 2px 0;
-        font-size: 12px;
+        padding: 3px 0;
+        font-size: var(--text-sm);
     }
     .pname {
         color: var(--cream);
@@ -234,31 +234,31 @@
     .pscore {
         font-family: var(--font-mono);
         color: var(--spark-500);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
     }
     .pping {
         font-family: var(--font-mono);
         color: var(--ink-300);
-        font-size: 11px;
-        min-width: 44px;
+        font-size: var(--text-mono-sm);
+        min-width: 48px;
         text-align: right;
     }
 
     .lobby-empty {
         font-family: var(--font-mono);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         color: var(--ink-500);
         padding: 4px 0;
     }
 
-    .held { display: flex; flex-wrap: wrap; gap: 4px; }
+    .held { display: flex; flex-wrap: wrap; gap: 6px; }
     .chip {
-        background: rgba(242, 230, 200, 0.08);
+        background: rgba(124, 192, 245, 0.10);
         color: var(--cream);
-        border: 1px solid rgba(242, 230, 200, 0.25);
+        border: 1px solid rgba(124, 192, 245, 0.28);
         border-radius: var(--r-sm);
-        padding: 1px 6px;
-        font-size: 11px;
+        padding: 2px 8px;
+        font-size: var(--text-mono-sm);
         font-family: var(--font-mono);
     }
 
@@ -266,11 +266,11 @@
         display: flex;
         justify-content: space-between;
         font-family: var(--font-mono);
-        font-size: 10.5px;
+        font-size: var(--text-mono-sm);
         color: var(--ink-500);
         letter-spacing: 0.3px;
         margin-top: auto;
-        padding-top: 4px;
+        padding-top: 6px;
     }
     .err { color: var(--danger-500); }
     .dim { color: var(--ink-700); }
diff --git a/src/lib/ui/components/StatusDot.svelte b/src/lib/ui/components/StatusDot.svelte
index c6a3054..6a4d357 100644
--- a/src/lib/ui/components/StatusDot.svelte
+++ b/src/lib/ui/components/StatusDot.svelte
@@ -5,7 +5,7 @@
         size?: number;
         label?: string | null;
     }
-    let { health, size = 8, label = null }: Props = $props();
+    let { health, size = 10, label = null }: Props = $props();
 </script>
 
 <span
diff --git a/src/lib/ui/styles/tokens.css b/src/lib/ui/styles/tokens.css
index 97c2829..883cb51 100644
--- a/src/lib/ui/styles/tokens.css
+++ b/src/lib/ui/styles/tokens.css
@@ -1,6 +1,7 @@
 /* Electric Cherry — design tokens.
-   Named after the perk-a-cola from Mob of the Dead (CoD Zombies):
-   deep cherry-red art-deco label + electric cyan discharge.
+   Blue-primary theme: bright saturated mid-blue from the brand mark,
+   with cherry red demoted to accent + danger. Cool-tinted dark surfaces,
+   larger typography, more generous spacing.
 
    Font @import chains live in src/lib/ui/styles/fonts.ts and are pulled
    in by +layout.svelte via JS import — Vite's CSS `@import` inlines the
@@ -8,59 +9,104 @@
    we need the JS module graph to see them. */
 
 :root {
-    /* Cherry — surfaces + primary */
-    --cherry-975: #0b0407;
-    --cherry-925: #170a0f;
-    --cherry-875: #22101a;
-    --cherry-825: #2c1420;
-    --cherry-700: #4a0f1e;
-    --cherry-600: #7a0f22;
+    /* Blue — surfaces + primary (matches logo circle) */
+    --blue-975: #060b16;
+    --blue-925: #0a1428;
+    --blue-875: #12203a;
+    --blue-825: #182b4d;
+    --blue-700: #1e3260;
+    --blue-600: #2560a8;
+    --blue-500: #2e86d1;
+    --blue-400: #4ea3e8;
+    --blue-300: #7cc0f5;
+
+    /* Spark — soft cyan accent */
+    --spark-500: #7cd4ff;
+    --spark-400: #a8e5ff;
+    --spark-glow: 0 0 8px rgba(124, 212, 255, 0.55);
+    --spark-glow-lg: 0 0 14px rgba(124, 212, 255, 0.45);
+
+    /* Cherry — retained for danger + brand-cherry accent only */
     --cherry-500: #c8102e;
     --cherry-400: #e93656;
     --cherry-300: #ff7a92;
 
-    /* Spark — electric cyan */
-    --spark-600: #14b8d0;
-    --spark-500: #22e0ff;
-    --spark-400: #7ef1ff;
-    --spark-glow: 0 0 8px rgba(34, 224, 255, 0.55);
-    --spark-glow-lg: 0 0 14px rgba(34, 224, 255, 0.45);
+    /* Neutrals — cool blue-white */
+    --cream: #eef4fb;
+    --cream-dim: #b8c8dc;
+    --ink-100: #eaf1fb;
+    --ink-300: #94a8c4;
+    --ink-500: #5a6d8a;
+    --ink-700: #2a3a55;
 
-    /* Neutrals + label */
-    --cream: #f2e6c8;
-    --cream-dim: #c9b98f;
-    --ink-100: #f5eaec;
-    --ink-300: #c8a4ac;
-    --ink-500: #7a5560;
-    --ink-700: #4a2f36;
-
-    /* State colors */
+    /* State */
     --amber-500: #ffb020;
     --amber-glow: 0 0 8px rgba(255, 176, 32, 0.4);
-    --danger-500: #ff3050;
-    --success-500: var(--spark-500);
+    --danger-500: var(--cherry-500);
+    --success-500: #4ade80;
+
+    /* Semantic aliases — components should reference THESE, not the raw ramps.
+       Swapping palette later is then a single-file edit. */
+    --bg-page: var(--blue-975);
+    --bg-nav: var(--blue-925);
+    --bg-card: var(--blue-875);
+    --bg-card-hi: var(--blue-825);
+    --border: var(--blue-700);
+    --border-hi: var(--blue-600);
+    --accent: var(--blue-500);
+    --accent-hi: var(--blue-400);
+    --accent-glow: 0 0 8px rgba(46, 134, 209, 0.5);
+    --accent-glow-lg: 0 0 14px rgba(46, 134, 209, 0.4);
 
     /* Typography */
     --font-display: 'Alfa Slab One', 'Georgia', serif;
     --font-body: 'Inter', system-ui, -apple-system, sans-serif;
     --font-mono: 'JetBrains Mono', ui-monospace, monospace;
 
+    /* Type scale — substantial bump */
+    --text-xs: 11px;
+    --text-sm: 13px;
+    --text-base: 15px;
+    --text-md: 17px;
+    --text-lg: 20px;
+    --text-xl: 24px;
+    --text-2xl: 30px;
+    --text-3xl: 40px;
+    --text-mono: 13px;
+    --text-mono-sm: 12px;
+
+    --leading-tight: 1.2;
+    --leading-body: 1.6;
+    --leading-mono: 1.55;
+
+    --tracking-display: 2px;
+    --tracking-nav: 0.4px;
+    --tracking-label: 1px;
+
+    /* Spacing */
+    --pad-card: 20px;
+    --pad-panel: 24px;
+    --pad-nav-y: 16px;
+    --pad-nav-x: 32px;
+    --gap-section: 32px;
+    --gap-cards: 18px;
+
     /* Radii */
-    --r-sm: 3px;
-    --r-md: 6px;
-    --r-lg: 10px;
+    --r-sm: 4px;
+    --r-md: 8px;
+    --r-lg: 12px;
 
     /* Shadows */
-    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);
-    --shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.4);
+    --shadow-card: 0 2px 12px rgba(6, 11, 22, 0.5);
+    --shadow-panel: 0 4px 24px rgba(6, 11, 22, 0.4);
 }
 
 @keyframes electric-pulse {
     0%, 100% {
-        box-shadow: 0 0 0 0 rgba(34, 224, 255, 0.55), var(--spark-glow);
+        box-shadow: 0 0 0 0 rgba(124, 212, 255, 0.55), var(--spark-glow);
     }
     50% {
-        box-shadow: 0 0 0 6px rgba(34, 224, 255, 0), var(--spark-glow-lg);
+        box-shadow: 0 0 0 6px rgba(124, 212, 255, 0), var(--spark-glow-lg);
     }
 }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6af7b02..f26059e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -39,16 +39,18 @@
 
     :global(html, body) {
         margin: 0;
-        background: var(--cherry-975);
+        background: var(--bg-page);
         color: var(--ink-100);
         font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
         min-height: 100vh;
         -webkit-font-smoothing: antialiased;
     }
     :global(*) { box-sizing: border-box; }
-    :global(a) { color: var(--spark-400); }
+    :global(a) { color: var(--accent-hi); }
     :global(::selection) {
-        background: var(--cherry-500);
+        background: var(--accent);
         color: var(--cream);
     }
 
@@ -57,13 +59,13 @@
     nav {
         display: flex;
         gap: 24px;
-        padding: 14px 24px;
+        padding: var(--pad-nav-y) var(--pad-nav-x);
         align-items: center;
         background:
-            linear-gradient(180deg, rgba(200, 16, 46, 0.18) 0%, transparent 100%),
-            var(--cherry-925);
-        border-bottom: 1px solid var(--cherry-700);
-        box-shadow: 0 1px 0 0 rgba(200, 16, 46, 0.25);
+            linear-gradient(180deg, rgba(46, 134, 209, 0.18) 0%, transparent 100%),
+            var(--bg-nav);
+        border-bottom: 1px solid var(--border);
+        box-shadow: 0 1px 0 0 rgba(46, 134, 209, 0.25);
     }
     .brand-link {
         display: flex;
@@ -73,17 +75,17 @@
 
     .tabs {
         display: flex;
-        gap: 4px;
-        margin-left: 12px;
+        gap: 6px;
+        margin-left: 20px;
     }
     .tabs a {
         color: var(--ink-300);
         text-decoration: none;
-        padding: 8px 14px;
+        padding: 10px 18px;
         border-radius: var(--r-sm);
-        font-size: 13px;
+        font-size: var(--text-sm);
         font-weight: 500;
-        letter-spacing: 0.4px;
+        letter-spacing: var(--tracking-nav);
         position: relative;
         transition: color 0.15s;
     }
@@ -94,18 +96,18 @@
     .tabs a.on::after {
         content: '';
         position: absolute;
-        left: 12px;
-        right: 12px;
+        left: 16px;
+        right: 16px;
         bottom: -2px;
         height: 2px;
-        background: var(--spark-500);
-        box-shadow: var(--spark-glow);
+        background: var(--accent);
+        box-shadow: var(--accent-glow);
         border-radius: 2px;
     }
     .strut { margin-left: auto; }
 
     main {
-        padding: 28px 24px 48px;
+        padding: 40px 32px 64px;
         max-width: 1400px;
         margin: 0 auto;
     }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c7fab8f..13767fe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -121,8 +121,8 @@
 <style>
     .grid {
         display: grid;
-        grid-template-columns: 1fr 380px;
-        gap: 24px;
+        grid-template-columns: 1fr 400px;
+        gap: var(--gap-section);
     }
     @media (max-width: 900px) {
         .grid { grid-template-columns: 1fr; }
@@ -131,76 +131,76 @@
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
-        margin-bottom: 20px;
-        padding-bottom: 14px;
-        border-bottom: 1px solid var(--cherry-700);
+        margin-bottom: 28px;
+        padding-bottom: 18px;
+        border-bottom: 1px solid var(--border);
     }
-    .title-block { display: flex; align-items: baseline; gap: 14px; }
+    .title-block { display: flex; align-items: baseline; gap: 18px; }
     h1 {
         margin: 0;
         font-family: var(--font-display);
-        font-size: 32px;
+        font-size: var(--text-3xl);
         color: var(--cream);
-        letter-spacing: 2px;
-        line-height: 1;
+        letter-spacing: var(--tracking-display);
+        line-height: var(--leading-tight);
     }
     .count {
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-sm);
         color: var(--ink-500);
         letter-spacing: 0.5px;
     }
-    .actions { display: flex; gap: 8px; }
+    .actions { display: flex; gap: 10px; }
     button {
-        background: var(--cherry-875);
+        background: var(--bg-card);
         color: var(--ink-100);
-        border: 1px solid var(--cherry-700);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 8px 16px;
+        padding: 10px 20px;
         cursor: pointer;
         font-family: var(--font-body);
-        font-size: 13px;
+        font-size: var(--text-base);
         font-weight: 500;
         letter-spacing: 0.3px;
         transition: border-color 0.15s, box-shadow 0.15s;
     }
     button:hover:not(:disabled) {
-        border-color: var(--spark-500);
-        box-shadow: var(--spark-glow);
+        border-color: var(--accent);
+        box-shadow: var(--accent-glow);
     }
     button.primary {
-        background: linear-gradient(180deg, var(--cherry-500), var(--cherry-600));
+        background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
         color: var(--cream);
-        border-color: var(--cherry-400);
+        border-color: var(--blue-400);
         font-weight: 600;
     }
     button.primary:hover:not(:disabled) {
         border-color: var(--spark-500);
-        box-shadow: var(--spark-glow), 0 0 20px rgba(200, 16, 46, 0.4);
+        box-shadow: var(--spark-glow), 0 0 20px rgba(46, 134, 209, 0.45);
     }
     button:disabled { opacity: 0.4; cursor: default; }
     .cards {
         display: grid;
-        gap: 14px;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: var(--gap-cards);
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     }
     .empty {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 13px;
-        padding: 40px;
+        font-size: var(--text-base);
+        padding: 48px;
         text-align: center;
-        border: 1px dashed var(--cherry-700);
+        border: 1px dashed var(--border);
         border-radius: var(--r-md);
     }
     .flash {
         color: var(--spark-400);
-        margin: 0 0 16px;
+        margin: 0 0 20px;
         font-family: var(--font-mono);
-        font-size: 12px;
-        padding: 10px 14px;
-        background: rgba(34, 224, 255, 0.06);
-        border: 1px solid rgba(34, 224, 255, 0.25);
+        font-size: var(--text-mono);
+        padding: 12px 16px;
+        background: rgba(124, 212, 255, 0.06);
+        border: 1px solid rgba(124, 212, 255, 0.25);
         border-radius: var(--r-sm);
     }
 </style>
diff --git a/src/routes/betas/+page.svelte b/src/routes/betas/+page.svelte
index 805b9ed..4441715 100644
--- a/src/routes/betas/+page.svelte
+++ b/src/routes/betas/+page.svelte
@@ -30,13 +30,14 @@
     h1 {
         color: var(--cream);
         font-family: var(--font-display);
-        font-size: 32px;
-        letter-spacing: 2px;
-        margin: 0 0 20px;
+        font-size: var(--text-3xl);
+        letter-spacing: var(--tracking-display);
+        line-height: var(--leading-tight);
+        margin: 0 0 28px;
     }
     .empty {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 13px;
+        font-size: var(--text-base);
     }
 </style>
diff --git a/src/routes/deployments/+page.svelte b/src/routes/deployments/+page.svelte
index 3a4b2ea..95c20d5 100644
--- a/src/routes/deployments/+page.svelte
+++ b/src/routes/deployments/+page.svelte
@@ -96,14 +96,15 @@
     h1 {
         color: var(--cream);
         font-family: var(--font-display);
-        font-size: 32px;
-        letter-spacing: 2px;
-        margin: 0 0 20px;
+        font-size: var(--text-3xl);
+        letter-spacing: var(--tracking-display);
+        line-height: var(--leading-tight);
+        margin: 0 0 28px;
     }
     h2 {
-        margin: 28px 0 12px;
+        margin: var(--gap-section) 0 16px;
         font-family: var(--font-body);
-        font-size: 11px;
+        font-size: var(--text-xs);
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
@@ -111,30 +112,30 @@
     }
     .row {
         display: block;
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
         border-radius: var(--r-md);
-        padding: 14px 16px;
-        margin-bottom: 10px;
+        padding: 18px 20px;
+        margin-bottom: 12px;
         color: var(--ink-100);
         text-decoration: none;
         transition: border-color 0.15s, box-shadow 0.15s;
     }
-    .row:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
-    .head { display: flex; justify-content: space-between; margin-bottom: 8px; align-items: baseline; }
-    .action { font-family: var(--font-mono); font-size: 13px; color: var(--cream); }
-    .when { color: var(--ink-500); font-size: 12px; font-family: var(--font-mono); }
-    .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
+    .row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
+    .head { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: baseline; }
+    .action { font-family: var(--font-mono); font-size: var(--text-md); color: var(--cream); }
+    .when { color: var(--ink-500); font-size: var(--text-mono); font-family: var(--font-mono); }
+    .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
     .chip {
-        padding: 2px 7px;
+        padding: 3px 9px;
         border-radius: var(--r-sm);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         font-family: var(--font-mono);
         border: 1px solid transparent;
     }
     .chip-done {
-        background: rgba(34, 224, 255, 0.1);
-        border-color: rgba(34, 224, 255, 0.3);
+        background: rgba(124, 212, 255, 0.10);
+        border-color: rgba(124, 212, 255, 0.3);
         color: var(--spark-500);
     }
     .chip-failed {
@@ -148,23 +149,23 @@
         color: var(--amber-500);
     }
     .chip-held {
-        background: rgba(242, 230, 200, 0.08);
-        border-color: rgba(242, 230, 200, 0.25);
+        background: rgba(124, 192, 245, 0.10);
+        border-color: rgba(124, 192, 245, 0.28);
         color: var(--cream);
     }
     .chip-manual {
-        background: var(--cherry-925);
-        border-color: var(--cherry-700);
+        background: var(--bg-nav);
+        border-color: var(--border);
         color: var(--ink-500);
     }
     .id {
         color: var(--ink-700);
         font-family: var(--font-mono);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
     }
     .empty {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 13px;
+        font-size: var(--text-base);
     }
 </style>
diff --git a/src/routes/deployments/[id]/+page.svelte b/src/routes/deployments/[id]/+page.svelte
index 881deda..281bd6d 100644
--- a/src/routes/deployments/[id]/+page.svelte
+++ b/src/routes/deployments/[id]/+page.svelte
@@ -119,90 +119,92 @@
     h1 {
         color: var(--cream);
         font-family: var(--font-display);
-        font-size: 24px;
+        font-size: var(--text-2xl);
         letter-spacing: 1.5px;
-        margin: 0 0 6px;
+        line-height: var(--leading-tight);
+        margin: 0 0 8px;
     }
     h2 {
-        margin: 26px 0 10px;
+        margin: var(--gap-section) 0 14px;
         font-family: var(--font-body);
-        font-size: 11px;
+        font-size: var(--text-xs);
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
         color: var(--ink-300);
     }
     h3 {
-        margin: 14px 0 6px;
-        font-size: 13px;
+        margin: 18px 0 8px;
+        font-size: var(--text-md);
         color: var(--cream);
         font-family: var(--font-mono);
     }
     .meta {
         color: var(--ink-500);
-        font-size: 12px;
-        margin: 0 0 22px;
+        font-size: var(--text-mono);
+        margin: 0 0 28px;
         font-family: var(--font-mono);
     }
     .server-grid {
         display: grid;
-        gap: 10px;
-        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 14px;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     }
     .srv {
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 12px;
+        padding: 16px;
     }
-    .srv-done { border-color: rgba(34, 224, 255, 0.35); }
+    .srv-done { border-color: rgba(124, 212, 255, 0.35); }
     .srv-failed { border-color: rgba(255, 48, 80, 0.35); }
     .srv-pending { border-color: rgba(255, 176, 32, 0.35); }
-    .srv-held { border-color: rgba(242, 230, 200, 0.3); }
+    .srv-held { border-color: rgba(124, 192, 245, 0.3); }
     .srv-manual { border-color: var(--ink-500); }
     .name {
         font-weight: 600;
-        margin-bottom: 6px;
+        margin-bottom: 8px;
         color: var(--cream);
+        font-size: var(--text-md);
     }
-    .line { font-size: 12px; color: var(--ink-300); font-family: var(--font-mono); }
+    .line { font-size: var(--text-mono); color: var(--ink-300); font-family: var(--font-mono); line-height: var(--leading-mono); }
     .line.dim { color: var(--ink-500); }
     .line.err { color: var(--danger-500); }
-    .file-group { margin-bottom: 16px; }
+    .file-group { margin-bottom: 20px; }
     .file-row {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: 12px;
         width: 100%;
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 6px 10px;
-        margin: 3px 0;
+        padding: 8px 12px;
+        margin: 4px 0;
         color: var(--ink-100);
         cursor: pointer;
         font: inherit;
         text-align: left;
         transition: border-color 0.15s;
     }
-    .file-row:hover { border-color: var(--spark-500); }
+    .file-row:hover { border-color: var(--accent); }
     .verb {
-        padding: 2px 7px;
+        padding: 3px 9px;
         border-radius: var(--r-sm);
-        font-size: 10px;
+        font-size: var(--text-xs);
         font-family: var(--font-mono);
         text-transform: uppercase;
         letter-spacing: 0.8px;
         border: 1px solid transparent;
     }
     .verb-added {
-        background: rgba(34, 224, 255, 0.1);
-        border-color: rgba(34, 224, 255, 0.3);
+        background: rgba(124, 212, 255, 0.10);
+        border-color: rgba(124, 212, 255, 0.3);
         color: var(--spark-500);
     }
     .verb-updated {
-        background: rgba(242, 230, 200, 0.08);
-        border-color: rgba(242, 230, 200, 0.25);
+        background: rgba(124, 192, 245, 0.10);
+        border-color: rgba(124, 192, 245, 0.28);
         color: var(--cream);
     }
     .verb-removed {
@@ -218,18 +220,18 @@
     .sizes {
         margin-left: auto;
         color: var(--ink-500);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         font-family: var(--font-mono);
     }
-    code { font-family: var(--font-mono); color: var(--ink-100); }
+    code { font-family: var(--font-mono); color: var(--ink-100); font-size: var(--text-mono); }
     .empty {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 13px;
+        font-size: var(--text-base);
     }
     .diff-scrim {
         position: fixed; inset: 0;
-        background: rgba(4, 2, 3, 0.85);
+        background: rgba(6, 11, 22, 0.85);
         z-index: 100;
         display: grid;
         place-items: center;
@@ -240,22 +242,22 @@
         width: 92%;
         max-height: 92vh;
         overflow: auto;
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
         border-radius: var(--r-md);
-        padding: 20px;
+        padding: var(--pad-panel);
         box-shadow: var(--shadow-panel);
     }
     .close {
         float: right;
-        background: var(--cherry-875);
+        background: var(--bg-card);
         color: var(--ink-100);
-        border: 1px solid var(--cherry-700);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 5px 12px;
+        padding: 6px 14px;
         font-family: var(--font-body);
-        font-size: 12px;
+        font-size: var(--text-sm);
         cursor: pointer;
     }
-    .close:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
+    .close:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
 </style>
diff --git a/src/routes/servers/[name]/+page.svelte b/src/routes/servers/[name]/+page.svelte
index 1d4f44c..a7bed51 100644
--- a/src/routes/servers/[name]/+page.svelte
+++ b/src/routes/servers/[name]/+page.svelte
@@ -453,11 +453,11 @@
 <style>
     .hero {
         background:
-            linear-gradient(180deg, var(--cherry-875) 0%, var(--cherry-925) 100%);
-        border: 1px solid var(--cherry-700);
+            linear-gradient(180deg, var(--bg-card) 0%, var(--bg-nav) 100%);
+        border: 1px solid var(--border);
         border-radius: var(--r-md);
-        padding: 24px 28px;
-        margin-bottom: 20px;
+        padding: var(--pad-panel) 32px;
+        margin-bottom: 24px;
         box-shadow: var(--shadow-panel);
         position: relative;
         overflow: hidden;
@@ -467,27 +467,27 @@
         position: absolute;
         inset: 0 0 auto 0;
         height: 3px;
-        background: linear-gradient(90deg, transparent, var(--cherry-500), var(--spark-500), transparent);
+        background: linear-gradient(90deg, transparent, var(--accent), var(--spark-500), transparent);
     }
     .hero-top {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
-        gap: 20px;
+        gap: 24px;
     }
-    .name-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
+    .name-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
     h1 {
         margin: 0;
         font-family: var(--font-display);
-        font-size: 28px;
+        font-size: var(--text-2xl);
         letter-spacing: 1.5px;
         color: var(--cream);
-        line-height: 1;
+        line-height: var(--leading-tight);
     }
     .player-block { text-align: right; }
     .player-count {
         font-family: var(--font-mono);
-        font-size: 40px;
+        font-size: 48px;
         font-weight: 500;
         color: var(--ink-500);
         line-height: 1;
@@ -498,25 +498,25 @@
     }
     .player-label {
         font-family: var(--font-body);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 1.5px;
         color: var(--ink-500);
-        margin-top: 4px;
+        margin-top: 6px;
     }
     .hero-meta {
         display: flex;
         flex-wrap: wrap;
-        gap: 20px;
-        margin-top: 18px;
-        padding-top: 14px;
-        border-top: 1px solid var(--cherry-700);
-        font-size: 13px;
+        gap: 24px;
+        margin-top: 22px;
+        padding-top: 18px;
+        border-top: 1px solid var(--border);
+        font-size: var(--text-base);
     }
-    .pair { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); }
+    .pair { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); }
     .pair .k {
         color: var(--ink-500);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 1px;
     }
@@ -526,19 +526,19 @@
     .v.health-offline { color: var(--danger-500); }
 
     .panel {
-        background: var(--cherry-925);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
         border-radius: var(--r-md);
-        padding: 18px 20px;
-        margin-bottom: 16px;
+        padding: var(--pad-card);
+        margin-bottom: 20px;
     }
     .diag { border-color: rgba(255, 48, 80, 0.35); }
     .diag h2 { color: var(--danger-500); }
 
     h2 {
-        margin: 0 0 12px;
+        margin: 0 0 14px;
         font-family: var(--font-body);
-        font-size: 11px;
+        font-size: var(--text-xs);
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
@@ -546,22 +546,22 @@
     }
     .stats, .diag-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 10px;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 12px;
     }
     .stat {
-        background: var(--cherry-875);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-card);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        padding: 10px 12px;
+        padding: 12px 14px;
     }
     .stat .k {
         color: var(--ink-500);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 1px;
     }
-    .stat .v { color: var(--ink-100); margin-top: 4px; font-size: 13px; word-break: break-word; }
+    .stat .v { color: var(--ink-100); margin-top: 6px; font-size: var(--text-base); word-break: break-word; }
     .mono { font-family: var(--font-mono); }
     .flag-ok { color: var(--spark-500); }
     .flag-bad { color: var(--danger-500); }
@@ -569,18 +569,18 @@
     .reason-row {
         display: flex;
         align-items: center;
-        gap: 10px;
-        margin-top: 14px;
-        padding: 10px 14px;
+        gap: 12px;
+        margin-top: 16px;
+        padding: 12px 16px;
         background: rgba(255, 48, 80, 0.08);
         border: 1px solid rgba(255, 48, 80, 0.25);
         border-radius: var(--r-sm);
     }
     .reason-tag {
-        padding: 2px 8px;
+        padding: 3px 10px;
         border-radius: var(--r-sm);
         font-family: var(--font-mono);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 1px;
         border: 1px solid transparent;
@@ -590,86 +590,86 @@
     .reason-no-port { background: rgba(255, 176, 32, 0.15); border-color: rgba(255, 176, 32, 0.4); color: var(--amber-500); }
     .reason-timeout { background: rgba(255, 48, 80, 0.15); border-color: rgba(255, 48, 80, 0.4); color: var(--danger-500); }
     .reason-send-error { background: rgba(255, 48, 80, 0.15); border-color: rgba(255, 48, 80, 0.4); color: var(--danger-500); }
-    .reason-bad-reply { background: rgba(242, 230, 200, 0.1); border-color: rgba(242, 230, 200, 0.3); color: var(--cream); }
-    .reason-no-players { background: rgba(242, 230, 200, 0.1); border-color: rgba(242, 230, 200, 0.3); color: var(--cream); }
-    .reason-legacy { background: var(--cherry-875); border-color: var(--cherry-700); color: var(--ink-300); }
+    .reason-bad-reply { background: rgba(124, 192, 245, 0.10); border-color: rgba(124, 192, 245, 0.28); color: var(--cream); }
+    .reason-no-players { background: rgba(124, 192, 245, 0.10); border-color: rgba(124, 192, 245, 0.28); color: var(--cream); }
+    .reason-legacy { background: var(--bg-card); border-color: var(--border); color: var(--ink-300); }
 
     .reason-detail {
         color: var(--ink-100);
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
     }
     .hint {
-        margin-top: 10px;
-        padding: 8px 14px;
+        margin-top: 12px;
+        padding: 10px 16px;
         font-family: var(--font-body);
-        font-size: 12px;
+        font-size: var(--text-sm);
         color: var(--cream-dim);
-        background: var(--cherry-875);
-        border-left: 3px solid var(--spark-500);
+        background: var(--bg-card);
+        border-left: 3px solid var(--accent);
         border-radius: var(--r-sm);
     }
 
     .probe-row {
         display: flex;
         align-items: center;
-        gap: 12px;
-        margin-top: 14px;
+        gap: 14px;
+        margin-top: 16px;
     }
     .probe-btn {
-        background: var(--cherry-875);
+        background: var(--bg-card);
         color: var(--cream);
-        border: 1px solid var(--spark-500);
+        border: 1px solid var(--accent);
         border-radius: var(--r-sm);
-        padding: 7px 14px;
+        padding: 10px 18px;
         font-family: var(--font-body);
-        font-size: 12px;
+        font-size: var(--text-sm);
         font-weight: 600;
         letter-spacing: 0.3px;
         cursor: pointer;
         transition: box-shadow 0.15s, background 0.15s;
     }
     .probe-btn:hover:not(:disabled) {
-        box-shadow: var(--spark-glow);
-        background: var(--cherry-825);
+        box-shadow: var(--accent-glow);
+        background: var(--bg-card-hi);
     }
     .probe-btn:disabled { opacity: 0.5; cursor: default; }
     .probe-hint {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
     }
 
     .probe-result {
         display: flex;
         align-items: center;
-        gap: 10px;
-        margin-top: 12px;
-        padding: 10px 14px;
+        gap: 12px;
+        margin-top: 14px;
+        padding: 12px 16px;
         border-radius: var(--r-sm);
         border: 1px solid transparent;
     }
     .probe-ok {
-        background: rgba(34, 224, 255, 0.08);
-        border-color: rgba(34, 224, 255, 0.3);
+        background: rgba(124, 212, 255, 0.08);
+        border-color: rgba(124, 212, 255, 0.3);
     }
     .probe-bad {
         background: rgba(255, 48, 80, 0.08);
         border-color: rgba(255, 48, 80, 0.25);
     }
     .probe-tag {
-        padding: 2px 8px;
+        padding: 3px 10px;
         border-radius: var(--r-sm);
         font-family: var(--font-mono);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 1px;
         border: 1px solid transparent;
         flex-shrink: 0;
     }
     .probe-tag.ok {
-        background: rgba(34, 224, 255, 0.15);
-        border-color: rgba(34, 224, 255, 0.4);
+        background: rgba(124, 212, 255, 0.15);
+        border-color: rgba(124, 212, 255, 0.4);
         color: var(--spark-500);
     }
     .probe-tag.bad {
@@ -680,25 +680,25 @@
     .probe-detail {
         color: var(--ink-100);
         font-family: var(--font-mono);
-        font-size: 12px;
+        font-size: var(--text-mono);
     }
     .probe-detail strong { color: var(--spark-500); }
 
     .probe-url {
         display: flex;
         align-items: baseline;
-        gap: 8px;
-        margin-top: 8px;
-        padding: 6px 12px;
-        background: var(--cherry-875);
+        gap: 10px;
+        margin-top: 10px;
+        padding: 8px 14px;
+        background: var(--bg-card);
         border-radius: var(--r-sm);
-        border: 1px solid var(--cherry-700);
-        font-size: 11px;
+        border: 1px solid var(--border);
+        font-size: var(--text-mono-sm);
     }
     .probe-url .k {
         color: var(--ink-500);
         font-family: var(--font-body);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 1px;
     }
@@ -710,30 +710,30 @@
 
     .net-table {
         width: 100%;
-        margin-top: 14px;
+        margin-top: 16px;
         border-collapse: separate;
         border-spacing: 0;
-        background: var(--cherry-975);
-        border: 1px solid var(--cherry-700);
+        background: var(--bg-page);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
         overflow: hidden;
-        font-size: 12px;
+        font-size: var(--text-mono);
     }
     .net-table thead th {
         text-align: left;
-        padding: 8px 12px;
+        padding: 10px 14px;
         font-family: var(--font-body);
-        font-size: 10px;
+        font-size: var(--text-xs);
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 1px;
         color: var(--ink-500);
-        border-bottom: 1px solid var(--cherry-700);
-        background: var(--cherry-925);
+        border-bottom: 1px solid var(--border);
+        background: var(--bg-nav);
     }
     .net-table tbody td {
-        padding: 8px 12px;
-        border-bottom: 1px solid rgba(74, 15, 30, 0.4);
+        padding: 10px 14px;
+        border-bottom: 1px solid rgba(30, 50, 96, 0.5);
         color: var(--ink-100);
         vertical-align: top;
     }
@@ -742,24 +742,24 @@
     .net-table .num { text-align: right; }
     .net-table .detail-cell {
         color: var(--ink-300);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         word-break: break-word;
         max-width: 320px;
     }
 
     .net-tag {
         display: inline-block;
-        padding: 2px 8px;
+        padding: 3px 10px;
         border-radius: var(--r-sm);
         font-family: var(--font-mono);
-        font-size: 10px;
+        font-size: var(--text-xs);
         text-transform: uppercase;
         letter-spacing: 1px;
         border: 1px solid transparent;
     }
     .net-connected {
-        background: rgba(34, 224, 255, 0.15);
-        border-color: rgba(34, 224, 255, 0.4);
+        background: rgba(124, 212, 255, 0.15);
+        border-color: rgba(124, 212, 255, 0.4);
         color: var(--spark-500);
     }
     .net-refused {
@@ -774,40 +774,40 @@
     }
 
     .net-meta {
-        margin-top: 10px;
+        margin-top: 12px;
         font-family: var(--font-mono);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
         color: var(--ink-500);
     }
     .net-meta code {
         color: var(--cream);
-        background: var(--cherry-875);
-        padding: 1px 6px;
+        background: var(--bg-card);
+        padding: 2px 8px;
         border-radius: var(--r-sm);
     }
 
     .snippet-details {
-        margin-top: 10px;
+        margin-top: 12px;
         font-family: var(--font-mono);
-        font-size: 11px;
+        font-size: var(--text-mono-sm);
     }
     .snippet-details summary {
         color: var(--ink-500);
         cursor: pointer;
-        padding: 4px 0;
+        padding: 6px 0;
     }
     .snippet-details summary:hover { color: var(--ink-100); }
     .snippet {
-        margin: 10px 0 0;
-        padding: 12px 14px;
-        background: var(--cherry-975);
-        border: 1px solid var(--cherry-700);
+        margin: 12px 0 0;
+        padding: 14px 16px;
+        background: var(--bg-page);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
         color: var(--ink-300);
         font-family: var(--font-mono);
-        font-size: 11px;
-        line-height: 1.5;
-        max-height: 400px;
+        font-size: var(--text-mono-sm);
+        line-height: var(--leading-mono);
+        max-height: 440px;
         overflow: auto;
         white-space: pre-wrap;
         word-break: break-all;
@@ -815,19 +815,19 @@
 
     .row {
         display: grid;
-        grid-template-columns: 200px 160px 100px 120px 1fr;
-        gap: 12px;
-        padding: 10px 14px;
-        background: var(--cherry-875);
-        border: 1px solid var(--cherry-700);
+        grid-template-columns: 220px 180px 110px 130px 1fr;
+        gap: 14px;
+        padding: 12px 16px;
+        background: var(--bg-card);
+        border: 1px solid var(--border);
         border-radius: var(--r-sm);
-        margin: 4px 0;
+        margin: 6px 0;
         color: var(--ink-100);
         text-decoration: none;
-        font-size: 12px;
+        font-size: var(--text-mono);
         font-family: var(--font-mono);
     }
-    .row:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
+    .row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
     .row-done { border-left: 3px solid var(--spark-500); }
     .row-failed { border-left: 3px solid var(--danger-500); }
     .row-pending { border-left: 3px solid var(--amber-500); }
@@ -841,6 +841,6 @@
     .empty {
         color: var(--ink-500);
         font-family: var(--font-mono);
-        font-size: 13px;
+        font-size: var(--text-base);
     }
 </style>