noderax · goktugcy · Apr 1, 2026
diff --git a/app/globals.css b/app/globals.css
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,19 +1,16 @@
 import type { Metadata } from "next";
-import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google";
+import { Cousine } from "next/font/google";
 
 import { AppProviders } from "@/components/providers/app-providers";
 import { cn } from "@/lib/utils";
 
 import "./globals.css";
 
-const plusJakarta = Plus_Jakarta_Sans({
-  variable: "--font-jakarta",
-  subsets: ["latin"],
-});
-
-const jetBrainsMono = JetBrains_Mono({
+// Cousine is the closest Google Font to Courier/system mono
+const cousine = Cousine({
   variable: "--font-mono-ui",
   subsets: ["latin"],
+  weight: ["400", "700"],
 });
 
 export const metadata: Metadata = {
@@ -35,10 +32,10 @@ export default function RootLayout({
       <body
         suppressHydrationWarning
         className={cn(
-          plusJakarta.variable,
-          jetBrainsMono.variable,
-          "min-h-screen bg-background font-sans text-foreground antialiased",
+          cousine.variable,
+          "min-h-screen bg-background text-foreground",
         )}
+        style={{ fontFamily: "'Tahoma', 'MS Sans Serif', 'Arial', sans-serif" }}
       >
         <AppProviders>{children}</AppProviders>
       </body>

diff --git a/components/dashboard/metrics-chart.tsx b/components/dashboard/metrics-chart.tsx
@@ -81,12 +81,28 @@ export const MetricsChart = ({
   const MetricIcon = metricMeta[metric].icon;
 
   return (
-    <Card className="border">
-      <CardHeader className="border-b border-border/80 bg-muted/20">
+    <Card
+      className="border"
+      style={{
+        background: "#d4d0c8",
+        border: "2px solid",
+        borderColor: "#ffffff #808080 #808080 #ffffff",
+        boxShadow: "1px 1px 0 #404040",
+        borderRadius: "0",
+      }}
+    >
+      <CardHeader
+        className="border-b border-border/80 bg-muted/20"
+        style={{
+          background: "linear-gradient(to right, #0a246a, #a6caf0)",
+          borderBottom: "2px solid #404040",
+          padding: "4px 8px",
+        }}
+      >
         <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <CardTitle>{title}</CardTitle>
-            <CardDescription>{description}</CardDescription>
+            <CardTitle style={{ color: "#ffffff", fontSize: "12px", fontWeight: "bold" }}>{title}</CardTitle>
+            <CardDescription style={{ color: "#c8d8f0", fontSize: "10px" }}>{description}</CardDescription>
           </div>
           <Tabs
             value={metric}

diff --git a/components/dashboard/node-telemetry-board.tsx b/components/dashboard/node-telemetry-board.tsx
@@ -119,12 +119,28 @@ export const NodeTelemetryBoard = ({ nodes }: { nodes: NodeSummary[] }) => {
     null;
 
   return (
-    <Card className="border">
-      <CardHeader className="border-b border-border/80 bg-muted/20">
+    <Card
+      className="border"
+      style={{
+        background: "#d4d0c8",
+        border: "2px solid",
+        borderColor: "#ffffff #808080 #808080 #ffffff",
+        boxShadow: "1px 1px 0 #404040",
+        borderRadius: "0",
+      }}
+    >
+      <CardHeader
+        className="border-b border-border/80 bg-muted/20"
+        style={{
+          background: "linear-gradient(to right, #0a246a, #a6caf0)",
+          borderBottom: "2px solid #404040",
+          padding: "4px 8px",
+        }}
+      >
         <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <CardTitle>Node telemetry board</CardTitle>
-            <CardDescription>
+            <CardTitle style={{ color: "#ffffff", fontSize: "12px", fontWeight: "bold" }}>Node telemetry board</CardTitle>
+            <CardDescription style={{ color: "#c8d8f0", fontSize: "10px" }}>
               Nodes are shown in groups of four so each telemetry snapshot stays
               separate and easy to scan.
             </CardDescription>

diff --git a/components/dashboard/recent-events-feed.tsx b/components/dashboard/recent-events-feed.tsx
@@ -25,21 +25,55 @@ export const RecentEventsFeed = ({ events }: { events: EventRecord[] }) => {
   };
 
   return (
-    <Card className="border">
-      <CardHeader className="border-b border-border/80 bg-muted/20">
-        <CardTitle>Recent events</CardTitle>
-        <CardDescription>
+    <Card
+      className="border"
+      style={{
+        background: "#d4d0c8",
+        border: "2px solid",
+        borderColor: "#ffffff #808080 #808080 #ffffff",
+        boxShadow: "1px 1px 0 #404040",
+        borderRadius: "0",
+      }}
+    >
+      <CardHeader
+        className="border-b border-border/80 bg-muted/20"
+        style={{
+          background: "linear-gradient(to right, #0a246a, #a6caf0)",
+          borderBottom: "2px solid #404040",
+          padding: "4px 8px",
+        }}
+      >
+        <CardTitle style={{ color: "#ffffff", fontSize: "12px", fontWeight: "bold" }}>Recent events</CardTitle>
+        <CardDescription style={{ color: "#c8d8f0", fontSize: "10px" }}>
           Alerts, state changes, and task transitions ordered by recency.
         </CardDescription>
       </CardHeader>
       <CardContent className="p-0">
-        <ScrollArea className="h-[380px]">
+        <ScrollArea className="h-[380px]" style={{ background: "#ffffff" }}>
           <div className="divide-y divide-border/80">
             {events.map((event) => (
               <Link
                 key={event.id}
                 href={getEventHref(event)}
-                className="flex items-start gap-3 px-5 py-4 transition hover:bg-muted/25"
+                className="flex items-start gap-3 px-5 py-4"
+                style={{
+                  borderBottom: "1px solid #d0d0d0",
+                  background: "#ffffff",
+                  textDecoration: "none",
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: "8px",
+                  padding: "4px 8px",
+                  color: "#000000",
+                }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLElement).style.background = "#000080";
+                  (e.currentTarget as HTMLElement).style.color = "#ffffff";
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLElement).style.background = "#ffffff";
+                  (e.currentTarget as HTMLElement).style.color = "#000000";
+                }}
               >
                 <div className="pt-0.5">
                   <SeverityBadge severity={event.severity} />

diff --git a/components/layout/app-shell.tsx b/components/layout/app-shell.tsx
@@ -16,21 +16,36 @@ export const AppShell = ({ children }: { children: React.ReactNode }) => {
   useRealtimeBridge();
 
   return (
-    <div className="min-h-screen bg-background">
+    <div
+      className="min-h-screen"
+      style={{ backgroundColor: "#008080", backgroundImage: "none" }}
+    >
       <AppSidebar />
       <div
         className={cn(
           "min-h-screen transition-[padding] duration-300 lg:pl-64",
           sidebarCollapsed && "lg:pl-20",
         )}
+        style={{ backgroundColor: "#008080", backgroundImage: "none" }}
       >
         <Topbar />
-        <main className="px-4 py-6 sm:px-6 lg:px-8">
+        <main className="px-4 py-6 sm:px-6 lg:px-8" style={{ backgroundColor: "#008080", backgroundImage: "none" }}>
           <div className="mx-auto w-full max-w-[1600px] space-y-6">
             {workspace?.isArchived ? (
-              <div className="flex items-start gap-3 rounded-[20px] border border-tone-warning/30 bg-tone-warning/8 px-4 py-3 text-sm text-muted-foreground">
-                <AlertTriangle className="mt-0.5 size-4 shrink-0 text-tone-warning" />
-                <p>
+              <div
+                style={{
+                  background: "#fff0c8",
+                  border: "2px solid",
+                  borderColor: "#ffffff #808080 #808080 #ffffff",
+                  padding: "6px 10px",
+                  fontSize: "11px",
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: "8px",
+                }}
+              >
+                <AlertTriangle style={{ marginTop: "2px", width: "14px", height: "14px", flexShrink: 0, color: "#884400" }} />
+                <p style={{ margin: 0, color: "#000000" }}>
                   This workspace is archived. You can still inspect data, but
                   create, update, delete, enrollment, and scheduling actions are
                   read-only until the workspace is restored.

diff --git a/components/layout/app-sidebar.tsx b/components/layout/app-sidebar.tsx
@@ -173,14 +173,18 @@ const SidebarContent = ({
           "flex h-16 items-center gap-3 border-b border-sidebar-border px-5",
           collapsed && "justify-center px-0",
         )}
+        style={{
+          background: "linear-gradient(to right, #0a246a, #a6caf0)",
+          borderBottom: "2px solid #404040",
+        }}
       >
         <BrandBadge size={collapsed ? "sm" : "md"} />
         {!collapsed ? (
           <div className="min-w-0">
-            <p className="text-sm font-semibold tracking-tight text-sidebar-foreground">
+            <p style={{ fontSize: "13px", fontWeight: "bold", color: "#ffffff", letterSpacing: 0 }}>
               Noderax
             </p>
-            <p className="text-xs text-muted-foreground">Operations center</p>
+            <p style={{ fontSize: "10px", color: "#c8d8f0" }}>Operations center</p>
           </div>
         ) : null}
       </div>
@@ -190,7 +194,10 @@ const SidebarContent = ({
           {visibleNavigation.map((group) => (
             <div key={group.label} className="space-y-1.5">
               {!collapsed ? (
-                <p className="px-3 text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                <p
+                  className="px-3"
+                  style={{ fontSize: "10px", fontWeight: "bold", textTransform: "uppercase", color: "#444444", letterSpacing: "0.1em", marginBottom: "2px" }}
+                >
                   {group.label}
                 </p>
               ) : null}
@@ -332,14 +339,22 @@ const SidebarContent = ({
         )}
       >
         {!collapsed ? (
-          <div className="mb-3 rounded-2xl border border-sidebar-border bg-background/70 px-3.5 py-3">
-            <p className="text-xs font-medium text-sidebar-foreground">
+          <div
+            className="mb-3 px-3.5 py-3"
+            style={{
+              background: "#ffffff",
+              border: "2px solid",
+              borderColor: "#808080 #ffffff #ffffff #808080",
+              borderRadius: "0",
+            }}
+          >
+            <p style={{ fontSize: "10px", fontWeight: "bold", color: "#000000" }}>
               {workspace ? "Workspace" : "Connection"}
             </p>
-            <p className="mt-1 text-sm font-semibold text-sidebar-foreground">
+            <p style={{ marginTop: "2px", fontSize: "11px", fontWeight: "bold", color: "#000000" }}>
               {workspace?.name ?? realtimeLabels[realtimeStatus]}
             </p>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p style={{ marginTop: "2px", fontSize: "9px", color: "#444444" }}>
               {workspace
                 ? `Timezone ${workspace.defaultTimezone} · ${workspace.currentUserRole ?? "member"} access`
                 : "Select a workspace to scope nodes, tasks, metrics, and events."}
@@ -378,9 +393,14 @@ export const AppSidebar = () => {
     <>
       <aside
         className={cn(
-          "fixed inset-y-0 left-0 z-30 hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground lg:block",
+          "fixed inset-y-0 left-0 z-30 hidden lg:block",
           collapsed ? "w-20" : "w-64",
         )}
+        style={{
+          background: "#d4d0c8",
+          borderRight: "2px solid #808080",
+          boxShadow: "1px 0 0 #404040",
+        }}
       >
         <SidebarContent collapsed={collapsed} />
       </aside>