feat(ui): clean minimal redesign inspired by ChatGPT/Claude

Replace navy/terracotta/cream color scheme with neutral white/dark palette,
swap Playfair Display serif fonts for Geist sans-serif, remove glassmorphism,
gradient mesh, glow effects, and backdrop-blur throughout chat UI. Home page
now redirects authenticated users to /chat, landing page moved to (marketing)
route group. Sidebar rebranded from Aspendos to YULA with nav links for
Council and Memory.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: EfeDurmaz16

apps/web/src/app/(marketing)/landing/page.tsx

@@ -0,0 +1,10 @@
+import { SiteDock } from '@/components/layout/site-dock';
+
+export default function MarketingLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <>
+            {children}
+            <SiteDock />
+        </>
+    );
+}

apps/web/src/app/(marketing)/layout.tsx

@@ -1,11 +1,15 @@
 'use client';
 
-import { Brain, CircleNotch, List, PaperPlaneRight, SidebarSimple } from '@phosphor-icons/react';
+import {
+    Brain,
+    CircleNotch,
+    PaperPlaneRight,
+    PlusCircle,
+    SidebarSimple,
+} from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChatSidebar } from '@/components/chat/chat-sidebar';
-import { MemoryPanel } from '@/components/chat/memory-panel';
-import { ModelSelector } from '@/components/chat/model-selector';
 import { StreamingMessage } from '@/components/chat/StreamingMessage';
 import { VoiceButton } from '@/components/chat/voice-button';
 import { Button } from '@/components/ui/button';
@@ -29,17 +33,14 @@ export default function NewChatPage() {
     const { isLoaded, isSignedIn } = useAuth();
 
     const [sidebarOpen, setSidebarOpen] = useState(true);
-    const [memoryOpen, setMemoryOpen] = useState(true);
     const [chats, setChats] = useState<Chat[]>([]);
     const [selectedModel, setSelectedModel] = useState('openai/gpt-4o-mini');
     const [inputValue, setInputValue] = useState('');
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
-    // Use "new" as a placeholder chatId - will be replaced on first message
     const { messages, isStreaming, sendMessage, error: streamError } = useStreamingChat('new');
 
-    // Load chat list for sidebar
     useEffect(() => {
         if (!isLoaded || !isSignedIn) return;
 
@@ -58,7 +59,6 @@ export default function NewChatPage() {
         loadChats();
     }, [isLoaded, isSignedIn]);
 
-    // Auto-scroll to bottom
     useEffect(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, []);
@@ -70,7 +70,6 @@ export default function NewChatPage() {
         setInputValue('');
         if (textareaRef.current) textareaRef.current.style.height = 'auto';
 
-        // Send message - the hook will handle creating the chat on first message
         await sendMessage(content, { model: selectedModel });
     }, [inputValue, isStreaming, sendMessage, selectedModel]);
 
@@ -105,14 +104,10 @@ export default function NewChatPage() {
         }
     };
 
-    const handleModelChange = useCallback(async (modelId: string) => {
-        setSelectedModel(modelId);
-    }, []);
-
     if (!isLoaded) {
         return (
             <div className="h-screen flex items-center justify-center bg-background">
-                <CircleNotch className="w-8 h-8 animate-spin text-zinc-400" />
+                <CircleNotch className="w-8 h-8 animate-spin text-muted-foreground" />
             </div>
         );
     }
@@ -123,11 +118,11 @@ export default function NewChatPage() {
     }
 
     return (
-        <div className="h-screen bg-zinc-50 dark:bg-zinc-950 overflow-hidden font-sans flex">
+        <div className="h-screen bg-background overflow-hidden font-sans flex">
             {/* Sidebar */}
             <div
                 className={cn(
-                    'h-full bg-zinc-50 dark:bg-zinc-950 border-r border-zinc-200 dark:border-zinc-900 transition-all duration-300',
+                    'h-full bg-muted border-r border-border transition-all duration-300',
                     sidebarOpen ? 'w-64' : 'w-0 overflow-hidden'
                 )}
             >
@@ -140,38 +135,24 @@ export default function NewChatPage() {
             </div>
 
             {/* Main Chat */}
-            <div className="flex-1 h-full flex flex-col relative bg-white dark:bg-zinc-950 dark:text-zinc-100">
-                {/* YULA Monolith Background - Amber glow only */}
-                <div className="absolute inset-0 pointer-events-none -z-10">
-                    <div className="absolute top-1/4 right-1/4 w-[500px] h-[500px] bg-gradient-to-br from-amber-100/10 to-transparent dark:from-amber-900/10 rounded-full blur-3xl" />
-                    <div className="absolute bottom-1/3 left-1/3 w-[600px] h-[600px] bg-gradient-to-bl from-amber-50/8 to-transparent dark:from-amber-800/8 rounded-full blur-3xl" />
-                </div>
+            <div className="flex-1 h-full flex flex-col relative">
                 {/* Header */}
-                <div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-950/50 backdrop-blur-md z-10 relative">
+                <div className="flex items-center justify-between p-3 border-b border-border flex-none bg-background z-10">
                     <Button
                         variant="ghost"
                         size="icon"
                         onClick={() => setSidebarOpen(!sidebarOpen)}
-                        className="h-9 w-9 text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-50 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-all"
-                        title="Toggle Sidebar"
+                        className="h-8 w-8 text-muted-foreground hover:text-foreground"
                     >
-                        <SidebarSimple weight="duotone" className="w-5 h-5" />
+                        <SidebarSimple className="w-4 h-4" />
                     </Button>
-                    <div className="flex-1 flex justify-center">
-                        <ModelSelector
-                            selectedModel={selectedModel}
-                            onModelChange={handleModelChange}
-                            disabled={isStreaming}
-                        />
-                    </div>
                     <Button
                         variant="ghost"
                         size="icon"
-                        onClick={() => setMemoryOpen(!memoryOpen)}
-                        className="h-9 w-9 text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-50 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-all"
-                        title="Toggle Memory"
+                        onClick={handleNewChat}
+                        className="h-8 w-8 text-muted-foreground hover:text-foreground"
                     >
-                        <List weight="duotone" className="w-5 h-5" />
+                        <PlusCircle className="w-4 h-4" />
                     </Button>
                 </div>
 
@@ -180,17 +161,14 @@ export default function NewChatPage() {
                     <div className="max-w-3xl mx-auto space-y-4 pb-32">
                         {messages.length === 0 ? (
                             <div className="text-center py-20 animate-fade-up">
-                                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900 mb-6 shadow-lg">
-                                    <Brain
-                                        className="w-8 h-8 text-zinc-600 dark:text-zinc-400"
-                                        weight="duotone"
-                                    />
+                                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-muted mb-6 border border-border">
+                                    <Brain className="w-8 h-8 text-foreground" weight="duotone" />
                                 </div>
-                                <p className="text-xl font-serif font-semibold text-zinc-700 dark:text-zinc-300 mb-2">
+                                <p className="text-xl font-semibold text-foreground mb-2">
                                     Start a conversation
                                 </p>
-                                <p className="text-sm text-zinc-500">
-                                    Ask anything or share what's on your mind...
+                                <p className="text-sm text-muted-foreground">
+                                    Ask anything or share what&apos;s on your mind...
                                 </p>
                             </div>
                         ) : (
@@ -218,18 +196,18 @@ export default function NewChatPage() {
 
                 {/* Input */}
                 <div className="max-w-3xl mx-auto w-full px-4 mb-6 relative z-10">
-                    <div className="relative flex flex-col bg-white/80 dark:bg-zinc-900/80 backdrop-blur-lg border border-zinc-200 dark:border-zinc-800 shadow-lg rounded-2xl overflow-hidden focus-within:ring-2 focus-within:ring-emerald-500/30 dark:focus-within:ring-emerald-500/20 focus-within:border-emerald-500/50 dark:focus-within:border-emerald-500/30 transition-all">
+                    <div className="relative flex flex-col bg-background border border-border rounded-2xl overflow-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:border-ring/50 transition-colors">
                         <textarea
                             ref={textareaRef}
                             value={inputValue}
                             onChange={handleInputChange}
                             onKeyDown={handleKeyDown}
-                            className="w-full min-h-[60px] max-h-[200px] p-4 bg-transparent resize-none outline-none text-[15px] placeholder:text-zinc-400 text-zinc-900 dark:text-zinc-50"
+                            className="w-full min-h-[60px] max-h-[200px] p-4 bg-transparent resize-none outline-none text-[15px] placeholder:text-muted-foreground text-foreground"
                             placeholder="Ask anything..."
                             disabled={isStreaming}
                         />
                         <div className="flex items-center justify-between px-4 pb-3 pt-1">
-                            <span className="text-xs font-mono text-zinc-500">
+                            <span className="text-xs font-mono text-muted-foreground">
                                 {inputValue.length} / 4000
                             </span>
                             <div className="flex items-center gap-2">
@@ -241,7 +219,7 @@ export default function NewChatPage() {
                                     size="icon"
                                     onClick={handleSend}
                                     disabled={!inputValue.trim() || isStreaming}
-                                    className="h-9 w-9 rounded-xl bg-gradient-to-br from-emerald-600 to-emerald-500 hover:from-emerald-700 hover:to-emerald-600 text-white shadow-md hover:shadow-lg disabled:opacity-50 disabled:hover:shadow-md transition-all"
+                                    className="h-9 w-9 rounded-xl bg-foreground hover:bg-foreground/90 text-background disabled:opacity-50 transition-colors"
                                 >
                                     {isStreaming ? (
                                         <CircleNotch
@@ -255,21 +233,11 @@ export default function NewChatPage() {
                             </div>
                         </div>
                     </div>
-                    <p className="text-center text-[11px] text-zinc-500 mt-3">
-                        Aspendos memories are private. AI-generated content may be inaccurate.
+                    <p className="text-center text-[11px] text-muted-foreground mt-3">
+                        YULA memories are private. AI-generated content may be inaccurate.
                     </p>
                 </div>
             </div>
-
-            {/* Memory Panel */}
-            <div
-                className={cn(
-                    'h-full border-l border-zinc-200 dark:border-zinc-900 transition-all duration-300',
-                    memoryOpen ? 'w-80' : 'w-0 overflow-hidden'
-                )}
-            >
-                <MemoryPanel />
-            </div>
         </div>
     );
 }

apps/web/src/app/chat/[id]/page.tsx

@@ -3,11 +3,9 @@
 import { Brain, CircleNotch } from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
-import { useAuth } from '@/hooks/use-auth';
 import { PromptInputBox } from '@/components/chat/prompt-input-box';
-import { ShortcutsDock } from '@/components/chat/shortcuts-dock';
-import { SkyToggle } from '@/components/ui/sky-toggle';
 import { WelcomeGuide } from '@/components/onboarding';
+import { useAuth } from '@/hooks/use-auth';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
 
@@ -60,24 +58,26 @@ export default function ChatIndexPage() {
     }, [isLoaded, isSignedIn, router]);
 
     const handleNewChat = useCallback(() => {
-        // Navigate immediately to /chat/new without creating chat ID
-        // Chat will be created when user sends first message
         router.push('/chat/new');
     }, [router]);
 
     // Keyboard shortcuts
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
-            // New Chat: Cmd+N
             if (e.metaKey && e.key === 'n') {
                 e.preventDefault();
                 handleNewChat();
             }
 
-            // Focus Input: /
-            if (e.key === '/' && document.activeElement?.tagName !== 'TEXTAREA' && document.activeElement?.tagName !== 'INPUT') {
+            if (
+                e.key === '/' &&
+                document.activeElement?.tagName !== 'TEXTAREA' &&
+                document.activeElement?.tagName !== 'INPUT'
+            ) {
                 e.preventDefault();
-                const input = document.querySelector('textarea, input') as HTMLTextAreaElement | HTMLInputElement;
+                const input = document.querySelector('textarea, input') as
+                    | HTMLTextAreaElement
+                    | HTMLInputElement;
                 input?.focus();
             }
         };
@@ -107,33 +107,25 @@ export default function ChatIndexPage() {
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-b from-white to-zinc-50 dark:from-zinc-950 dark:to-black relative overflow-hidden flex flex-col items-center justify-center p-4">
+        <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
             {/* Onboarding for new users */}
             <WelcomeGuide />
-            {/* YULA Monolith Background - Amber glow only */}
-            <div className="absolute inset-0 pointer-events-none -z-10">
-                <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-gradient-to-br from-amber-100/10 to-transparent dark:from-amber-900/10 rounded-full blur-3xl" />
-                <div className="absolute top-1/3 right-1/4 w-[600px] h-[600px] bg-gradient-to-bl from-amber-50/8 to-transparent dark:from-amber-800/8 rounded-full blur-3xl" />
-                <div className="absolute bottom-0 left-1/2 w-[700px] h-[700px] bg-gradient-to-t from-emerald-100/10 to-transparent dark:from-emerald-900/5 rounded-full blur-3xl" />
-            </div>
 
-            <div className="absolute top-6 right-6 z-50">
-                <SkyToggle />
-            </div>
-
-            <div className="max-w-2xl w-full text-center space-y-10 relative z-10">
+            <div className="max-w-2xl w-full text-center space-y-10">
                 {/* Header */}
                 <div className="space-y-4 animate-fade-up opacity-0 animation-delay-100">
-                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white dark:bg-zinc-900 mb-2 shadow-sm border border-zinc-200 dark:border-zinc-800">
-                        <Brain
-                            className="w-8 h-8 text-zinc-900 dark:text-zinc-100"
-                            weight="regular"
-                        />
+                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-muted mb-2 border border-border">
+                        <Brain className="w-8 h-8 text-foreground" weight="regular" />
                     </div>
                     <h1 className="text-3xl font-semibold tracking-tight text-foreground">
                         {(() => {
                             const hour = new Date().getHours();
-                            const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+                            const greeting =
+                                hour < 12
+                                    ? 'Good morning'
+                                    : hour < 18
+                                      ? 'Good afternoon'
+                                      : 'Good evening';
                             return greeting;
                         })()}
                     </h1>
@@ -143,28 +135,29 @@ export default function ChatIndexPage() {
                 <div className="max-w-xl mx-auto w-full animate-fade-up opacity-0 animation-delay-200">
                     <PromptInputBox
                         onSubmit={(text) => {
-                            // In a real app, this would start a chat with the initial message
                             void text;
                             handleNewChat();
                         }}
                     />
                 </div>
 
-                {/* Capability Hints */}
+                {/* Suggestion Chips */}
                 <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 max-w-3xl mx-auto pt-8 animate-fade-up opacity-0 animation-delay-300">
-                    {['Analyze a complex PDF', 'Plan a weekend trip', 'Debug a React component'].map((hint) => (
+                    {[
+                        'Analyze a complex PDF',
+                        'Plan a weekend trip',
+                        'Debug a React component',
+                    ].map((hint) => (
                         <button
                             key={hint}
                             onClick={handleNewChat}
-                            className="text-sm text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-zinc-800/50 py-3 px-4 rounded-xl transition-all text-center border border-transparent hover:border-zinc-200 dark:hover:border-zinc-800 hover:shadow-sm"
+                            className="text-sm text-muted-foreground hover:text-foreground hover:bg-muted py-3 px-4 rounded-xl transition-all text-center border border-transparent hover:border-border"
                         >
-                            "{hint}"
+                            &ldquo;{hint}&rdquo;
                         </button>
                     ))}
                 </div>
             </div>
-            <ShortcutsDock />
         </div>
-
     );
 }