From 790cfc581a9faafc5558eb9ccb11269e742b6929 Mon Sep 17 00:00:00 2001
From: Jamie Banks <jamie@jdbnet.co.uk>
Date: Fri, 19 Jun 2026 19:48:56 +0100
Subject: [PATCH] style: update design system with new color palette and
 typography fonts

---
 frontend/index.html                    |  4 ++--
 frontend/src/components/TabContent.vue | 11 ++++++-----
 frontend/tailwind.config.js            | 24 +++++++++++++++++-------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index c3c84b1..70c78e1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,12 +8,12 @@
       href="https://assets.jdbnet.co.uk/projects/ssh.png"
     />
     <link rel="manifest" href="/manifest.webmanifest" />
-    <meta name="theme-color" content="#0f1419" />
+    <meta name="theme-color" content="#0d1117" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <title>SSH</title>
diff --git a/frontend/src/components/TabContent.vue b/frontend/src/components/TabContent.vue
index a3359bb..5a0ff33 100644
--- a/frontend/src/components/TabContent.vue
+++ b/frontend/src/components/TabContent.vue
@@ -79,12 +79,13 @@ onMounted(async () => {
 
   term = new Terminal({
     cursorBlink: true,
-    fontFamily: "IBM Plex Mono, monospace",
+    fontFamily: "DM Mono, ui-monospace, monospace",
     fontSize: 14,
     theme: {
-      background: "#0a0e12",
-      foreground: "#e2e8f0",
-      cursor: "#3d9aed",
+      background: "#0d1117",
+      foreground: "#e6edf3",
+      cursor: "#1ebe8a",
+      selectionBackground: "rgba(30, 190, 138, 0.3)",
     },
   });
   fit = new FitAddon();
@@ -185,7 +186,7 @@ watch(
       </div>
       <div
         ref="termEl"
-        class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0a0e12] p-1"
+        class="h-full min-h-[320px] rounded-lg border border-slate-800 bg-[#0d1117] p-1"
       />
     </div>
     <template v-if="showSftp">
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 05ba6f6..0843dc9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,18 +5,28 @@ export default {
     extend: {
       colors: {
         surface: {
-          DEFAULT: "#0f1419",
-          raised: "#151c24",
-          overlay: "#1a232e",
+          DEFAULT: "#0d1117",
+          raised: "#161b22",
+          overlay: "#21262d",
         },
         accent: {
-          DEFAULT: "#3d9aed",
-          muted: "#2a6fa3",
+          DEFAULT: "#1ebe8a",
+          muted: "#16966b",
+        },
+        slate: {
+          200: "#e6edf3",
+          300: "#c9d1d9",
+          400: "#8b949e",
+          500: "#6e7681",
+          600: "#484f58",
+          700: "#30363d",
+          800: "#21262d",
+          900: "#161b22",
         },
       },
       fontFamily: {
-        sans: ["IBM Plex Sans", "system-ui", "sans-serif"],
-        mono: ["IBM Plex Mono", "ui-monospace", "monospace"],
+        sans: ["Space Grotesk", "system-ui", "sans-serif"],
+        mono: ["DM Mono", "ui-monospace", "monospace"],
       },
     },
   },