website refactor

apps/website/components/app/AppShell.tsx

@@ -7,18 +7,24 @@ interface AppShellProps {
 
 /**
  * AppShell is the root container for the entire application layout.
- * It provides the base background and layout structure.
+ * Provides the base structure with cockpit-inspired design.
  */
 export function AppShell({ children }: AppShellProps) {
   return (
-    <Box 
-      minHeight="100vh" 
-      bg="#0C0D0F" 
-      color="var(--ui-color-text-high)" 
-      display="flex" 
+    <Box
+      height="100vh"
+      bg="var(--ui-color-bg-base)"
+      color="var(--ui-color-text-high)"
+      display="flex"
       flexDirection="col"
+      overflowY="auto"
+      overflowX="hidden"
+      style={{
+        fontFamily: 'var(--ui-font-sans)',
+        background: 'linear-gradient(180deg, #0a0a0b 0%, #0f0f10 100%)',
+      }}
     >
       {children}
     </Box>
   );
-}
+}