website refactor

apps/website/app/globals.css

@@ -141,9 +141,9 @@
 @layer utilities {
   /* Precision Racing Utilities */
   .glass-panel {
-    background: rgba(20, 22, 25, 0.7);
+    background: rgba(20, 22, 25, 0.85);
-    backdrop-filter: blur(12px);
+    backdrop-filter: blur(16px);
-    border: 1px solid var(--color-outline);
+    border-bottom: 1px solid var(--color-outline);
   }
 
   .subtle-gradient {
@@ -161,7 +161,7 @@
     left: 0;
     width: 100%;
     height: 1px;
-    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
+    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
     opacity: 0.5;
   }
 

apps/website/components/admin/AdminToolbar.tsx

@@ -21,7 +21,6 @@ export function AdminToolbar({
   return (
     <ControlBar
       leftContent={leftContent}
-      variant="dark"
     >
       {children}
     </ControlBar>

apps/website/components/layout/AppFooter.tsx

@@ -1,44 +1,72 @@
 'use client';
 
-import { Surface } from '@/ui/Surface';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { AppShellBar } from './AppShellBar';
+import { Activity, Database, Server, Wifi } from 'lucide-react';
 
 export function AppFooter() {
-  return (
+  const currentYear = new Date().getFullYear();
-    <Surface
-      as="footer"
-      variant="precision"
-      paddingY={6}
-      paddingX={6}
-      borderTop
-      backgroundColor="rgba(10, 10, 11, 0.92)"
-      className="backdrop-blur-xl"
-      style={{
-        boxShadow: '0 -1px 0 0 rgba(255, 255, 255, 0.05)',
-      }}
-    >
-      <Box display="flex" justifyContent="between" alignItems="center" width="full" gap={4}>
-        <Stack direction="row" align="center" gap={3}>
-          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
-            © {new Date().getFullYear()} GridPilot
-          </Text>
-          <Box w="px" h="3" bg="var(--ui-color-border-muted)" opacity={0.6} />
-          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
-            Session ready
-          </Text>
-        </Stack>
 
-        <Box display={{ base: 'none', sm: 'flex' }}>
+  return (
-          <Stack direction="row" align="center" gap={2}>
+    <AppShellBar position="bottom">
-            <Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
+      {/* Left: System Info */}
-            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+      <Box display="flex" alignItems="center" gap={6}>
-              System Normal
+        <Box display="flex" alignItems="center" gap={2}>
-            </Text>
+          <Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
-          </Stack>
+          <Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
+            GRIDPILOT OS v2.0
+          </Text>
+        </Box>
+        <Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider hidden md:block">
+          © {currentYear}
+        </Text>
+      </Box>
+
+      {/* Center: Telemetry Status */}
+      <Box display="flex" alignItems="center" gap={6} className="hidden md:flex">
+        <StatusIndicator icon={Database} label="DB" status="good" />
+        <StatusIndicator icon={Server} label="API" status="good" />
+        <StatusIndicator icon={Wifi} label="WS" status="good" />
+        <Box className="h-3 w-px bg-outline-steel" />
+        <Box display="flex" alignItems="center" gap={2}>
+          <Activity size={12} className="text-text-low" />
+          <Text size="xs" className="text-text-med font-mono text-[10px]">12ms</Text>
         </Box>
       </Box>
-    </Surface>
+
+      {/* Right: Legal & Tools */}
+      <Box display="flex" alignItems="center" gap={2}>
+        <FooterLink href="/terms">Terms</FooterLink>
+        <FooterLink href="/privacy">Privacy</FooterLink>
+        <FooterLink href="/status">Status</FooterLink>
+      </Box>
+    </AppShellBar>
+  );
+}
+
+function StatusIndicator({ icon: Icon, label, status }: { icon: any, label: string, status: 'good' | 'warn' | 'bad' }) {
+  const color = status === 'good' ? 'text-success-green' : status === 'warn' ? 'text-warning-amber' : 'text-critical-red';
+  
+  return (
+    <Box display="flex" alignItems="center" gap={2} title={`${label}: ${status.toUpperCase()}`}>
+      <Icon size={10} className={color} />
+      <Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider">
+        {label}
+      </Text>
+    </Box>
+  );
+}
+
+function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
+  return (
+    <Link 
+      href={href} 
+      variant="ghost" 
+      className="px-2 py-1 rounded hover:bg-white/5 text-text-low hover:text-text-high font-mono text-[10px] uppercase tracking-wider transition-colors"
+    >
+      {children}
+    </Link>
   );
 }

apps/website/components/layout/AppHeader.tsx

@@ -1,72 +1,119 @@
 'use client';
 
-import { BrandMark } from '@/ui/BrandMark';
+import { Box } from '@/ui/Box';
-import { HeaderActions } from '@/components/layout/HeaderActions';
+import { Text } from '@/ui/Text';
-import { PublicNav } from '@/components/layout/PublicNav';
+import { Search, Bell, User, ChevronDown, Command } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
+import { useState, useEffect } from 'react';
-import { Text } from '@/ui/Text';
+import { AppShellBar } from './AppShellBar';
-import { Surface } from '@/ui/Surface';
-import { usePathname } from 'next/navigation';
 
 export function AppHeader() {
   const pathname = usePathname();
   const { data: session } = useCurrentSession();
   const isAuthenticated = !!session;
-  const homeHref = isAuthenticated ? routes.protected.dashboard : routes.public.home;
+  
+  // Simple breadcrumb logic
+  const pathSegments = pathname.split('/').filter(Boolean);
+  const breadcrumbs = pathSegments.length > 0 
+    ? pathSegments.map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' / ')
+    : 'Home';
+
+  // Clock
+  const [time, setTime] = useState<string>('');
+  useEffect(() => {
+    const updateTime = () => {
+      const now = new Date();
+      setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
+    };
+    updateTime();
+    const interval = setInterval(updateTime, 60000);
+    return () => clearInterval(interval);
+  }, []);
 
   return (
-    <Surface
+    <AppShellBar position="top">
-      as="header"
+      {/* Left: Context & Search */}
-      variant="dark"
+      <Box display="flex" alignItems="center" gap={6} flex={1}>
-      height="14"
+        <Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
-      zIndex={50}
+          {breadcrumbs}
-      borderBottom
+        </Text>
-      backgroundColor="rgba(13, 13, 14, 0.8)"
-      className="backdrop-blur-xl"
-    >
-      <Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}>
-        {/* Left: Brand & Context */}
-        <Stack direction="row" align="center" gap={4} h="full">
-          <BrandMark href={homeHref} priority />
-          
-          {isAuthenticated && (
-            <Box 
-              display="flex" 
-              alignItems="center" 
-              gap={3} 
-              paddingLeft={4} 
-              borderLeft
-              h="6"
-              borderColor="var(--ui-color-border-muted)"
-            >
-               <Text size="xs" weight="medium" variant="low" font="mono" uppercase>
-                 Workspace
-               </Text>
-            </Box>
-          )}
-        </Stack>
 
-        {/* Center: Navigation (if public) */}
+        {/* Command Search - Refined */}
-        {!isAuthenticated && (
+        <Box 
-          <Box display={{ base: 'none', md: 'flex' }} data-testid="public-top-nav">
+          className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal/50 border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 focus-within:border-primary-accent focus-within:ring-1 focus-within:ring-primary-accent/20 transition-all cursor-text group"
-            <PublicNav pathname={pathname} direction="row" />
+        >
+          <Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
+          <Box 
+            as="input"
+            type="text" 
+            placeholder="Search or type a command..." 
+            className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
+          />
+          <Box className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
+            <Command size={10} />
+            <span>K</span>
           </Box>
-        )}
-        
-        {/* Right: Session Controls */}
-        <Box display="flex" alignItems="center" gap={4}>
-          <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}>
-            <Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
-            <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
-              LIVE
-            </Text>
-          </Box>
-          <HeaderActions isAuthenticated={isAuthenticated} />
         </Box>
       </Box>
-    </Surface>
+
+      {/* Right: System Status & User */}
+      <Box display="flex" alignItems="center" gap={4}>
+        {/* System Time */}
+        <Box className="hidden lg:flex items-center gap-2 text-text-med border-r border-outline-steel pr-4 h-6">
+          <Text size="sm" font="mono" className="tracking-widest tabular-nums">
+            {time} UTC
+          </Text>
+        </Box>
+
+        {/* Notifications */}
+        <Box 
+          as="button" 
+          className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
+          title="Notifications"
+        >
+          <Bell size={16} />
+          <Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
+        </Box>
+
+        {/* User Menu */}
+        {isAuthenticated ? (
+          <Box display="flex" alignItems="center" gap={3} className="pl-2 cursor-pointer group">
+            <Box 
+              className="w-8 h-8 rounded-full bg-surface-charcoal flex items-center justify-center text-text-med border border-outline-steel group-hover:border-primary-accent transition-colors"
+            >
+              <User size={14} />
+            </Box>
+            <Box className="hidden md:block text-left">
+              <Text size="sm" weight="medium" className="text-text-high leading-none group-hover:text-primary-accent transition-colors">
+                {session.user.displayName || 'Driver'}
+              </Text>
+            </Box>
+            <ChevronDown size={12} className="text-text-low group-hover:text-text-high transition-colors" />
+          </Box>
+        ) : (
+          <Box display="flex" gap={2}>
+            <Button 
+              as="a" 
+              href={routes.auth.login} 
+              variant="ghost" 
+              size="sm"
+            >
+              Sign In
+            </Button>
+            <Button 
+              as="a" 
+              href={routes.auth.signup} 
+              variant="primary" 
+              size="sm"
+            >
+              Join
+            </Button>
+          </Box>
+        )}
+      </Box>
+    </AppShellBar>
   );
 }

apps/website/components/layout/AppShellBar.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { ReactNode } from 'react';
+
+interface AppShellBarProps {
+  position: 'top' | 'bottom';
+  children: ReactNode;
+  sidebarOffset?: boolean;
+}
+
+export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
+  const isTop = position === 'top';
+  
+  return (
+    <Box
+      as={isTop ? 'header' : 'footer'}
+      className={`
+        fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
+        h-14
+        bg-base-black/70 backdrop-blur-xl
+        border-${isTop ? 'b' : 't'} border-outline-steel
+        flex items-center justify-between px-6
+        transition-all duration-200
+      `}
+      // Use style for responsive left offset to ensure it works
+      // We use a CSS variable or calc if possible, but here we rely on Tailwind classes via className if we could
+      // But since we need responsive logic that matches Layout, we'll use the Box props
+      left={sidebarOffset ? { base: 0, lg: 64 } : 0}
+    >
+      {children}
+    </Box>
+  );
+}

apps/website/components/layout/AppSidebar.tsx

@@ -1,50 +1,54 @@
 'use client';
 
-import { AuthedNav } from '@/components/layout/AuthedNav';
+import { BrandMark } from '@/ui/BrandMark';
-import { PublicNav } from '@/components/layout/PublicNav';
+import { NavLink } from '@/ui/NavLink';
-import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { routes } from '@/lib/routing/RouteConfig';
 import { Box } from '@/ui/Box';
-import { DashboardRail } from '@/components/dashboard/DashboardRail';
+import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { 
-import { Surface } from '@/ui/Surface';
+  LayoutGrid, 
+  Trophy, 
+  Users, 
+  Calendar, 
+  Flag, 
+  Home
+} from 'lucide-react';
 import { usePathname } from 'next/navigation';
 
 export function AppSidebar() {
   const pathname = usePathname();
-  const { data: session } = useCurrentSession();
+
-  const isAuthenticated = !!session;
+  const navItems = [
+    { label: 'Home', href: routes.public.home, icon: Home },
+    { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
+    { label: 'Drivers', href: routes.public.drivers, icon: Users },
+    { label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
+    { label: 'Teams', href: routes.public.teams, icon: Flag },
+    { label: 'Races', href: routes.public.races, icon: Calendar },
+  ];
 
   return (
-    <Surface
+    <Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-outline-steel">
-      as="aside"
+      {/* Brand Header */}
-      variant="dark"
+      <Box p={6} pb={8}>
-      width="64"
+        <BrandMark />
-      h="full"
+      </Box>
-      borderRight
+
-      backgroundColor="linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)"
+      {/* Navigation */}
-      style={{
+      <Box flex={1} px={2} className="overflow-y-auto">
-        boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
+        <Stack gap={1}>
-      }}
+          {navItems.map((item) => (
-    >
+            <NavLink
-      <DashboardRail>
+              key={item.href}
-        <Box py={8} fullWidth>
+              href={item.href}
-          <Box px={6} mb={10}>
+              label={item.label}
-            <Box display="flex" alignItems="center" gap={2} mb={2}>
+              icon={item.icon}
-              <Box w="0.5" h="3" bg="var(--ui-color-intent-primary)" />
+              isActive={pathname === item.href}
-              <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
+              variant="sidebar"
-                DASHBOARD
+            />
-              </Text>
+          ))}
-            </Box>
+        </Stack>
-          </Box>
+      </Box>
-          <Box px={4}>
+    </Box>
-            {isAuthenticated ? (
-              <AuthedNav pathname={pathname} />
-            ) : (
-              <PublicNav pathname={pathname} />
-            )}
-          </Box>
-        </Box>
-      </DashboardRail>
-    </Surface>
   );
 }

apps/website/components/layout/HeaderActions.tsx

@@ -1,45 +1,49 @@
 import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { Stack } from '@/ui/Stack';
-import { LogIn, UserPlus } from 'lucide-react';
+import { Box } from '@/ui/Box';
 
 interface HeaderActionsProps {
   isAuthenticated: boolean;
 }
 
-/**
- * HeaderActions provides the primary actions in the header (Login, Signup, Profile).
- */
 export function HeaderActions({ isAuthenticated }: HeaderActionsProps) {
   if (isAuthenticated) {
     return (
-      <Stack direction="row" gap={3}>
+      <Button
-        <Button as="a" href={routes.protected.profile} variant="secondary" size="sm">
+        as="a"
-          Profile
+        href={routes.protected.profile}
-        </Button>
+        variant="ghost"
-      </Stack>
+        size="sm"
+        className="text-text-med hover:text-text-high transition-colors duration-200"
+      >
+        Profile
+      </Button>
     );
   }
 
   return (
-    <Stack direction="row" gap={3}>
+    <Stack direction="row" gap={4} align="center">
       <Button
         as="a"
         href={routes.auth.login}
         variant="ghost"
         size="sm"
-        icon={<LogIn size={16} />}
         data-testid="public-nav-login"
+        className="text-text-med hover:text-text-high transition-colors duration-200"
       >
-        Login
+        Sign In
       </Button>
+
+      <Box className="w-px h-4 bg-outline-steel" />
+
       <Button
         as="a"
         href={routes.auth.signup}
         variant="primary"
         size="sm"
-        icon={<UserPlus size={16} />}
         data-testid="public-nav-signup"
+        className="px-6 font-medium tracking-wide"
       >
         Sign Up
       </Button>

apps/website/components/layout/PublicNav.tsx

@@ -1,6 +1,6 @@
 import { routes } from '@/lib/routing/RouteConfig';
 import { Stack } from '@/ui/Stack';
-import { Calendar, Home, Layout, Trophy, Users } from 'lucide-react';
+import { Calendar, Home, LayoutGrid, Trophy, Users, Flag } from 'lucide-react';
 import { NavLink } from '@/ui/NavLink';
 
 interface PublicNavProps {
@@ -8,21 +8,18 @@ interface PublicNavProps {
   direction?: 'row' | 'col';
 }
 
-/**
- * PublicNav displays navigation items for unauthenticated users.
- */
 export function PublicNav({ pathname, direction = 'col' }: PublicNavProps) {
   const items = [
     { label: 'Home', href: routes.public.home, icon: Home },
     { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
     { label: 'Drivers', href: routes.public.drivers, icon: Users },
-    { label: 'Leaderboards', href: routes.public.leaderboards, icon: Layout },
+    { label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
-    { label: 'Teams', href: routes.public.teams, icon: Users },
+    { label: 'Teams', href: routes.public.teams, icon: Flag },
     { label: 'Races', href: routes.public.races, icon: Calendar },
   ];
 
   return (
-    <Stack direction={direction} gap={direction === 'row' ? 4 : 1}>
+    <Stack direction={direction} gap={direction === 'row' ? 1 : 1}>
       {items.map((item) => (
         <NavLink
           key={item.href}

apps/website/templates/layout/RootAppShellTemplate.tsx

@@ -3,11 +3,8 @@
 import { AppFooter } from '@/components/layout/AppFooter';
 import { AppHeader } from '@/components/layout/AppHeader';
 import { AppSidebar } from '@/components/layout/AppSidebar';
-import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
-import { routes } from '@/lib/routing/RouteConfig';
 import { Layout } from '@/ui/Layout';
-import { Container } from '@/ui/Container';
+import { Box } from '@/ui/Box';
-import { usePathname } from 'next/navigation';
 import React from 'react';
 
 export interface RootAppShellViewData {
@@ -16,31 +13,26 @@ export interface RootAppShellViewData {
 
 /**
  * RootAppShellTemplate orchestrates the top-level semantic shells of the application.
- * It uses the canonical ui/Layout component to define the app frame.
+ * Redesigned for the "Cockpit" layout.
  */
 export function RootAppShellTemplate({ children }: RootAppShellViewData) {
-  const pathname = usePathname();
-  const { data: session } = useCurrentSession();
-  const isAuthenticated = !!session;
-  
-  // Hide sidebar on landing page for unauthenticated users
-  const isLandingPage = pathname === routes.public.home;
-  const showSidebar = isAuthenticated && !isLandingPage;
-
   return (
     <Layout
       header={<AppHeader />}
-      sidebar={showSidebar ? <AppSidebar /> : undefined}
+      sidebar={<AppSidebar />}
       footer={<AppFooter />}
-      fixedHeader
+      fixedHeader={true}
-      fixedSidebar
+      fixedSidebar={true}
+      fixedFooter={false}
     >
-      <Container 
+      <Box 
-        size={isLandingPage ? 'full' : 'xl'} 
+        width="full"
-        py={isLandingPage ? 0 : 8}
+        className="max-w-[1920px] mx-auto"
+        px={8}
+        py={8}
       >
         {children}
-      </Container>
+      </Box>
     </Layout>
   );
 }

apps/website/tsc_output.txt

@@ -0,0 +1,2 @@
+components/admin/AdminToolbar.tsx(24,7): error TS2322: Type '{ children: ReactNode; leftContent: ReactNode; variant: string; }' is not assignable to type 'IntrinsicAttributes & ControlBarProps'.
+  Property 'variant' does not exist on type 'IntrinsicAttributes & ControlBarProps'.

apps/website/ui/BrandMark.tsx

@@ -7,29 +7,20 @@ interface BrandMarkProps {
   priority?: boolean;
 }
 
-/**
- * BrandMark provides the consistent logo/wordmark for the application.
- * Aligned with "Precision Racing Minimal" theme.
- */
 export function BrandMark({ href = '/' }: BrandMarkProps) {
   return (
     <Link href={href} variant="inherit" underline="none">
-      <Box position="relative" display="inline-flex" alignItems="center">
+      <Box display="flex" alignItems="center" gap={2}>
-        <Box height={{ base: '1.5rem', md: '1.75rem' }} style={{ transition: 'opacity 0.2s' }}>
+        <Image
-          <Image
+          src="/images/logos/square-logo-dark.svg"
-            src="/images/logos/wordmark-rectangle-dark.svg"
+          alt=""
-            alt="GridPilot"
+          style={{ height: '1.5rem', width: 'auto' }}
-            style={{ height: '100%', width: 'auto', display: 'block' }}
+        />
-          />
+
-        </Box>
+        <Image
-        <Box 
+          src="/images/logos/wordmark-rectangle-dark.svg"
-          position="absolute" 
+          alt="GridPilot"
-          bottom="-4px" 
+          style={{ height: '1.125rem', width: 'auto' }}
-          left="0" 
-          width="0" 
-          height="2px" 
-          bg="var(--ui-color-intent-primary)" 
-          style={{ transition: 'width 0.2s' }}
         />
       </Box>
     </Link>

apps/website/ui/Layout.tsx

@@ -6,78 +6,71 @@ export interface LayoutProps {
   header?: ReactNode;
   footer?: ReactNode;
   sidebar?: ReactNode;
-  /**
-   * Whether the sidebar should be fixed to the side.
-   * If true, the main content will be offset by the sidebar width.
-   */
   fixedSidebar?: boolean;
-  /**
-   * Whether the header should be fixed to the top.
-   * If true, the main content will be offset by the header height.
-   */
   fixedHeader?: boolean;
+  fixedFooter?: boolean;
 }
 
 /**
  * Layout is the canonical app frame component.
- * It orchestrates the high-level structure: Header, Sidebar, Main Content, and Footer.
+ * Redesigned for "Cockpit" layout: Sidebar is primary (full height), Header and Content sit to the right.
  */
 export const Layout = ({ 
   children, 
   header, 
   footer, 
   sidebar,
-  fixedSidebar = false,
+  fixedSidebar = true,
-  fixedHeader = false
+  fixedHeader = true,
+  fixedFooter = true // Default to true for AppShellBar
 }: LayoutProps) => {
   return (
-    <Box display="flex" flexDirection="col" minHeight="100vh">
+    <Box display="flex" minHeight="100vh" className="bg-base-black text-text-high">
-      {header && (
+      {/* Sidebar - Primary Vertical Axis - Solid Background */}
+      {sidebar && (
         <Box 
-          as="header" 
+          as="aside" 
-          position={fixedHeader ? "fixed" : "relative"} 
+          width="64" // 16rem / 256px
-          top={fixedHeader ? 0 : undefined} 
+          display={{ base: 'none', lg: 'block' }}
-          left={fixedHeader ? 0 : undefined} 
+          position={fixedSidebar ? "fixed" : "relative"}
-          right={fixedHeader ? 0 : undefined} 
+          top={0}
+          bottom={0}
+          left={0}
           zIndex={50}
+          className="bg-base-black border-r border-outline-steel"
         >
-          {header}
+          {sidebar}
         </Box>
       )}
       
-      <Box display="flex" flex={1} marginTop={fixedHeader ? 14 : undefined}>
+      {/* Main Content Area - Right of Sidebar */}
-        {sidebar && (
+      <Box 
-          <Box 
+        display="flex" 
-            as="aside" 
+        flexDirection="col" 
-            width="64" 
+        flex={1} 
-            display={{ base: 'none', lg: 'block' }}
+        marginLeft={fixedSidebar && sidebar ? { lg: 64 } : undefined}
-            position={fixedSidebar ? "fixed" : "relative"}
+        minWidth="0" // Prevent flex child overflow
-            top={fixedSidebar ? (fixedHeader ? 14 : 0) : undefined}
+      >
-            bottom={fixedSidebar ? 0 : undefined}
+        {/* Header - Rendered directly as it contains AppShellBar (fixed) */}
-            left={fixedSidebar ? 0 : undefined}
+        {header}
-            zIndex={40}
-          >
-            {sidebar}
-          </Box>
-        )}
         
+        {/* Main Scrollable Content */}
         <Box 
           as="main" 
           flex={1} 
           display="flex" 
           flexDirection="col"
-          marginLeft={fixedSidebar ? { lg: 64 } : undefined}
+          position="relative"
+          marginTop={fixedHeader ? 14 : 0} // Offset for fixed header (h-14)
+          paddingBottom={fixedFooter ? 14 : 0} // Offset for fixed footer (h-14)
         >
-          <Box flex={1}>
+          <Box flex={1} p={0}>
             {children}
           </Box>
-          
-          {footer && (
-            <Box as="footer">
-              {footer}
-            </Box>
-          )}
         </Box>
+
+        {/* Footer - Rendered directly as it contains AppShellBar (fixed) */}
+        {footer}
       </Box>
     </Box>
   );

apps/website/ui/NavLink.tsx

@@ -12,25 +12,56 @@ interface NavLinkProps {
   variant?: 'sidebar' | 'top';
 }
 
-/**
- * NavLink provides a consistent link component for navigation.
- * Supports both sidebar and top navigation variants.
- */
 export function NavLink({ href, label, icon, isActive, variant = 'sidebar' }: NavLinkProps) {
+  const isTop = variant === 'top';
+
+  // Dieter Rams style: Unobtrusive, Honest, Thorough.
+  // No glows. No shadows. Just clear contrast and alignment.
+
   const content = (
-    <Box display="flex" alignItems="center" gap={variant === 'top' ? 2 : 3} paddingX={3} paddingY={2} rounded={variant === 'sidebar' ? 'md' : undefined} style={{ transition: 'all 0.2s' }}>
+    <Box 
-      {icon && <Icon icon={icon} size={variant === 'top' ? 4 : 5} intent={isActive ? 'primary' : 'low'} />}
+      display="flex" 
-      <Text size="sm" weight={isActive ? 'bold' : 'medium'} variant={isActive ? 'primary' : 'med'}>
+      alignItems="center" 
+      gap={3} 
+      paddingX={isTop ? 4 : 4} 
+      paddingY={isTop ? 2 : 3} 
+      className={`
+        relative group transition-all duration-200 ease-out
+        ${isActive
+          ? 'text-text-high bg-white/5'
+          : 'text-text-med hover:text-text-high hover:bg-white/5'
+        }
+        ${!isTop && 'rounded-md mx-2'} 
+      `}
+    >
+      {icon && (
+        <Icon 
+          icon={icon} 
+          size={4} 
+          className={`transition-colors duration-200 ${isActive ? 'text-primary-accent' : 'text-text-low group-hover:text-text-med'}`}
+        />
+      )}
+      
+      <Text 
+        size="sm" 
+        weight={isActive ? 'medium' : 'normal'}
+        variant="inherit"
+        className="tracking-wide"
+      >
         {label}
       </Text>
-      {variant === 'sidebar' && isActive && (
+
-        <Box marginLeft="auto" width="4px" height="1rem" bg="var(--ui-color-intent-primary)" rounded="full" />
+      {/* Minimal Active Indicator */}
+      {!isTop && isActive && (
+        <Box
+          className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-primary-accent rounded-r-full"
+        />
       )}
     </Box>
   );
 
   return (
-    <Link href={href} variant="inherit" underline="none" block={variant === 'sidebar'}>
+    <Link href={href} variant="inherit" underline="none" block={!isTop}>
       {content}
     </Link>
   );

docs/THEME.md

@@ -1,134 +1,172 @@
-🎨 GridPilot Theme — “Precision Racing Minimal”
+GridPilot Theme — “Modern Precision with Obsessive Detail”
 
-A clean, modern racing interface that feels like a cockpit dashboard — calm, sharp, and serious.
+A meticulously crafted sim-racing interface built with absolute love to detail.
 
 ⸻
 
-1. Identity & Mood
+Core Essence
 
-GridPilot should feel like:
+GridPilot should feel like a product where every pixel was placed on purpose.
-	•	a real motorsport instrument, not a game launcher
+A UI that radiates care, intention, and craft — the way a beautifully machined steering wheel or pedal set feels when you touch it.
-	•	calm and focused, like the moment before a qualifying lap
-	•	precise, like a telemetry screen
-	•	modern and minimal, without visual noise
-	•	slightly futuristic, but never “RGB gamer chaos”
 
-It should appeal equally to sim racers, gamers, and casual fans.
+Not loud.
+Not flashy.
+Not corporate.
+But modern, obsessive, refined.
+
+The user should think:
+
+“Someone really cared when they designed this.”
 
 ⸻
 
-2. Visual Style
+1. The Kind of Modern We Want
 
-Core Aesthetic
+Modern ≠ trendy
-	•	matte dark surfaces
+GridPilot is modern in the way high-end hardware is modern:
-	•	thin, crisp separators
+	•	clean materials
-	•	soft blue/cyan glows on interaction
+	•	subtle gradients
-	•	no aggressive neon
+	•	precision shadows
-	•	subtle gradients for depth
+	•	invisible order
-	•	everything feels instrument-grade, not decorative
+	•	absolute visual consistency
 
-Color System
+It feels engineered, not styled.
-	•	Graphite Black — base background
-	•	Charcoal — panel surfaces
-	•	Steel Grey — separators & outlines
-	•	Electric Blue — primary actions
-	•	Telemetry Aqua — interactive highlights
-	•	Motorsport Amber — warnings & signals
 
-Colors should feel like motorsport, not corporate SaaS.
+Everything is smooth, but never busy.
+Everything is polished, but never glossy.
+Everything is minimal, but never empty.
+
+It has the vibe of:
+	•	Apple’s focus
+	•	Porsche’s restraint
+	•	Moza/Fanatec’s precision hardware aesthetics
+	•	Telemetry dashboards
+	•	Calm esports production graphics
+
+A blend of racing seriousness and premium digital craft.
 
 ⸻
 
-3. Components & Interaction
+2. Love to Detail (the signature of GridPilot)
 
-Panels & Cards
+This is where GridPilot stands out.
-	•	slightly inset or raised
-	•	reminiscent of cockpit modules
-	•	structured and clean
 
-Tables
+Microspacing
-	•	information-dense
-	•	instantly scannable
-	•	light hover highlights
-	•	telemetry-style status colors
 
-Buttons
+Spacing is not “good enough” — it’s perfectly balanced.
-	•	flat by default
+Margins breathe.
-	•	glow only on hover
+Rows align with intent.
-	•	snappy, “race-engineer” response speed
+Nothing floats randomly.
 
-Modals
+Typography finesse
-	•	soft frosted blur
-	•	fast open/close
-	•	subtle pit-lane lighting vibes
 
-⸻
+Numbers align sharply for standings.
+Headings sit exactly on their baseline rhythm.
+Secondary metadata uses softer brightness and tighter spacing.
 
-4. Motion & Feedback
+Shadow discipline
 
-Motion should feel racing-inspired:
+No random shadows — only a small, soft, controlled spread.
-	•	short, crisp animations
+Layer depth is subtle but unmistakably refined.
-	•	no bounce or playful movement
-	•	hover = slight lift + color pulse
-	•	loading = a thin progress line (pit limiter style)
-	•	tab switching = sliding underline (chicane motion)
 
-Responsive, not playful.
+Color temperature
 
-⸻
+Dark modes often feel muddy or flat.
+GridPilot should feel crisp, layered, and tuned —
+as if the entire palette has been color-graded like broadcast graphics.
 
-5. Layout Structure
+Interactive texture
 
-Think Telemetry Workspace:
+Every hover, highlight, or focus state is:
-	•	Sidebar → control rail
+	•	soft
-	•	Header → context + session controls
+	•	smooth
-	•	Main Area → race tables, session details, track maps
+	•	fast
-	•	Right Panel → contextual info, drivers, actions
-
-Everything modular, readable, and effortless to navigate.
-
-⸻
-
-6. Tone & Copywriting
-
-The product tone is:
-	•	calm
-	•	concise
-	•	direct
-	•	technical but human
-	•	zero hype
-
-Examples:
-	•	“Race added.”
-	•	“Standings updated.”
-	•	“Session ready.”
-	•	“Review protest.”
-	•	“Sponsor payout queued.”
-
-Never corporate. Never salesy. Never loud.
-
-⸻
-
-7. Emotional Experience
-
-Users should feel:
-	•	in control
-	•	supported
-	•	efficient
-	•	connected to motorsport culture
-	•	confident in the system
-
-A disciplined, trustworthy tool — not a flashy app.
-
-⸻
-
-8. Overall Vibe
-
-“A premium cockpit dashboard — for people who actually race.”
-	•	minimal
 	•	precise
-	•	clean
-	•	serious
-	•	attractive without noise
 
-A tool you’re happy to use, because it respects your time and your craft.
+Nothing is bouncy, glowy, or game-y.
+But everything feels alive when touched.
+
+Love to detail = you don’t notice it, but you feel it.
+
+⸻
+
+3. Emotional Atmosphere
+
+The moment the UI loads, the user should feel:
+	•	This is premium.
+	•	This was crafted, not slapped together.
+	•	This tool respects my time.
+	•	This belongs to sim racing, not generic SaaS.
+	•	This is serious but not sterile.
+
+It’s that mixture of calm confidence and quiet intensity that sim racers crave before entering a session.
+
+⸻
+
+4. Visual Style Summary (crisp and modern)
+
+Surfaces
+	•	matte
+	•	low contrast
+	•	ultra-clean edges
+	•	subtle gradients only on interaction
+
+Accents
+	•	electric blue or aqua, used sparingly
+	•	amber for warnings (motorsport heritage)
+	•	desaturated greys for hierarchy
+
+Lighting
+	•	no neon
+	•	no RGB vibes
+	•	subtle glow only on very important interactive elements
+
+Depth
+	•	controlled layering
+	•	meaningful shadows
+	•	frosted blur for modals (garage glass vibe)
+
+⸻
+
+5. Motion
+
+Animations reflect precision:
+	•	fast acceleration
+	•	quick settle
+	•	no jitter
+	•	no wasted frames
+
+Transitions should feel like:
+	•	opening a garage screen
+	•	switching telemetry pages
+	•	selecting a gear cleanly
+
+A sense of mechanical smoothness.
+
+⸻
+
+6. Why This Theme Works for Our Audience
+
+For gamers:
+	•	visually immersive
+	•	polished like a AAA menu
+	•	subtle effects that feel “alive”
+
+For sim racers:
+	•	data clarity
+	•	racing-inspired accents
+	•	tool-like seriousness
+
+For devs:
+	•	clean structure
+	•	intentional simplicity
+	•	maintainable aesthetic rules
+
+This theme hits the sweet spot:
+professional, modern, crafted, premium.
+
+⸻
+
+One-Line Summary
+
+GridPilot should feel like a high-end sim racing cockpit UI — obsessively detailed, modern, calm, and deeply cared for, where every interaction feels engineered with precision.