style: update design system with new color palette and typography fonts

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>

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",
+      background: "#0d1117",
-      foreground: "#e2e8f0",
+      foreground: "#e6edf3",
-      cursor: "#3d9aed",
+      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">

frontend/tailwind.config.js

@@ -5,18 +5,28 @@ export default {
     extend: {
       colors: {
         surface: {
-          DEFAULT: "#0f1419",
+          DEFAULT: "#0d1117",
-          raised: "#151c24",
+          raised: "#161b22",
-          overlay: "#1a232e",
+          overlay: "#21262d",
         },
         accent: {
-          DEFAULT: "#3d9aed",
+          DEFAULT: "#1ebe8a",
-          muted: "#2a6fa3",
+          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"],
+        sans: ["Space Grotesk", "system-ui", "sans-serif"],
-        mono: ["IBM Plex Mono", "ui-monospace", "monospace"],
+        mono: ["DM Mono", "ui-monospace", "monospace"],
       },
     },
   },