From a9d09eed877d99d0885dc0dd392c5d3a68a5234e Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 4 Feb 2026 23:15:09 +0000 Subject: [PATCH 1/5] Refactor layout to Premium-Alchemical aesthetic with CSS Grid - Replace Flexbox with rigid CSS Grid (12-col) in PlatformHub and Header to prevent layout drift. - Implement 'Premium-Alchemical' design system: Deep Slate (#0F172A) / Off-White (#F8FAFC) palette. - Enforce strict 4px spacing scale and 1px borders. - Polish UI text to be grounded and authoritative (removing generic 'computer-speak'). - Add /design route to visualize the new Design System. - Update global CSS variables for theming. Co-authored-by: cjo93 <186514116+cjo93@users.noreply.github.com> --- src/AppRouter.tsx | 2 + src/components/Header.tsx | 38 +++++---- src/components/ProtectedRoute.tsx | 4 +- src/pages/DesignSystem.tsx | 136 ++++++++++++++++++++++++++++++ src/pages/PlatformHub.tsx | 40 +++++---- src/pages/Start.tsx | 2 +- src/styles/design-system.css | 37 +++++--- 7 files changed, 211 insertions(+), 48 deletions(-) create mode 100644 src/pages/DesignSystem.tsx diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index 839476f..96c1433 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -1,6 +1,7 @@ import { Routes, Route, Navigate } from 'react-router-dom'; // Pages +import DesignSystem from './pages/DesignSystem'; import Manuals from './pages/products/Manuals'; import PlatformHub from './pages/PlatformHub'; // New Main Entry import Echo from './pages/Echo'; @@ -54,6 +55,7 @@ export default function AppRouter() { {/* --- MAIN PLATFORM --- */} {/* defrag.app root = Infrastructure Hub (ECHO/ORBIT/SIGNAL/API grid) */} } /> + } /> {/* Product-specific landings */} {/* Product-specific landings */} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 220b933..d6e4091 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -26,23 +26,25 @@ export default function Header() { return (
-
+
{/* Logo — Industrial Monochrome */} - -
D
- DEFRAG - +
+ +
D
+ DEFRAG + +
{/* Desktop Nav — Centered, Spaced, Monochrome */} -