create-frootkit 1.2.8 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-frootkit",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Interactive CLI for scaffolding high-performance FrootKit (Next.js Alternative) applications",
   "type": "module",
   "bin": {

package/templates/auth/src/app/dashboard/layout.tsx

@@ -3,29 +3,34 @@ import { DashboardNav } from '../../components/DashboardNav.js';
 
 export default function DashboardLayout({ children }: { children: ComponentChildren }) {
   return (
-    <div class="min-h-screen flex bg-[#06090f] text-slate-100">
+    <div class="min-h-screen flex bg-[#08090a] text-zinc-100 selection:bg-indigo-500/20 selection:text-indigo-300">
       <DashboardNav />
       <div class="flex-1 flex flex-col min-w-0">
-        <header class="h-16 border-b border-[#1a2333] px-8 flex items-center justify-between bg-[#06090f]">
+        <header class="h-14 border-b border-white/[0.08] px-6 flex items-center justify-between bg-[#08090a]/80 backdrop-blur-md sticky top-0 z-40">
           <div class="flex items-center gap-3">
-            <h1 class="text-sm font-semibold text-white">Cluster: US-East Production</h1>
-            <span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 text-[10px] font-mono border border-emerald-500/20 font-semibold">
-              Live • 99.99% Uptime
+            <span class="text-xs text-zinc-500">Workspace</span>
+            <span class="text-zinc-600 text-xs">/</span>
+            <h1 class="text-xs font-semibold text-zinc-200">Production Cluster</h1>
+            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-medium border border-emerald-500/20 ml-1">
+              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+              99.99% Uptime
             </span>
           </div>
 
-          <div class="flex items-center gap-4 text-xs font-mono">
-            <span class="text-slate-400">User: <strong class="text-white">admin@frootkit.dev</strong></span>
+          <div class="flex items-center gap-3 text-xs">
             <a
               href="/api/auth"
-              class="px-2.5 py-1 rounded bg-[#0a0f18] border border-[#1a2333] text-slate-300 hover:text-emerald-400 transition-colors"
+              class="px-2.5 py-1 rounded-md bg-white/[0.04] border border-white/[0.08] text-zinc-400 hover:text-zinc-200 transition-colors font-mono text-[11px]"
             >
               /api/auth
             </a>
+            <div class="hidden sm:flex items-center gap-1 text-[11px] text-zinc-500 border border-white/[0.06] bg-white/[0.02] px-2 py-0.5 rounded">
+              <span>⌘</span><span>K</span>
+            </div>
           </div>
         </header>
 
-        <div class="p-8 flex-1 overflow-y-auto">
+        <div class="p-6 sm:p-8 flex-1 overflow-y-auto">
           {children}
         </div>
       </div>

package/templates/auth/src/app/dashboard/page.tsx

@@ -13,20 +13,30 @@ export default function DashboardOverviewPage() {
   ];
 
   const recentUsers = [
-    { name: 'Sarah Connor', email: 'sarah@frootkit.dev', role: 'Owner', date: 'Just now' },
-    { name: 'Marcus Chen', email: 'marcus@infra.org', role: 'Developer', date: '2 hours ago' },
-    { name: 'Elena Rostova', email: 'elena@design.io', role: 'Staff Eng', date: '1 day ago' },
-    { name: 'Alex Rivera', email: 'alex@systems.net', role: 'Admin', date: '3 days ago' },
+    { name: 'Sarah Connor', email: 'sarah@frootkit.dev', role: 'Owner', date: 'Just now', status: 'online' },
+    { name: 'Marcus Chen', email: 'marcus@infra.org', role: 'Developer', date: '2 hours ago', status: 'offline' },
+    { name: 'Elena Rostova', email: 'elena@design.io', role: 'Staff Eng', date: '1 day ago', status: 'offline' },
+    { name: 'Alex Rivera', email: 'alex@systems.net', role: 'Admin', date: '3 days ago', status: 'offline' },
   ];
 
   return (
-    <div class="space-y-8">
-      <div>
-        <h2 class="text-2xl font-bold text-white mb-1.5 tracking-tight">Metrics & Telemetry</h2>
-        <p class="text-sm text-slate-400">Real-time throughput and workspace subscriber analytics.</p>
+    <div class="space-y-8 max-w-6xl">
+      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h2 class="text-xl sm:text-2xl font-semibold text-white tracking-tight">Metrics & Telemetry</h2>
+          <p class="text-xs sm:text-sm text-zinc-400 mt-1">Real-time throughput and workspace subscriber analytics.</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <button class="px-3 py-1.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-xs font-medium text-zinc-300 hover:text-white hover:bg-white/[0.08] transition-colors flex items-center gap-1.5">
+            <svg style="width: 12px; height: 12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            <span>Refresh</span>
+          </button>
+        </div>
       </div>
 
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         {metrics.map((m) => (
           <MetricCard
             key={m.label}
@@ -38,29 +48,50 @@ export default function DashboardOverviewPage() {
         ))}
       </div>
 
-      <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 shadow-sm">
-        <h3 class="text-base font-semibold text-white mb-4">Recent Workspace Activity</h3>
+      <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] overflow-hidden">
+        <div class="p-5 border-b border-white/[0.06] flex items-center justify-between">
+          <div>
+            <h3 class="text-sm font-semibold text-white">Recent Workspace Activity</h3>
+            <p class="text-xs text-zinc-500 mt-0.5">Active team member sessions and authentication audits</p>
+          </div>
+          <span class="text-xs text-zinc-400 bg-white/[0.04] px-2.5 py-1 rounded-md border border-white/[0.06]">
+            {recentUsers.length} active sessions
+          </span>
+        </div>
+
         <div class="overflow-x-auto">
-          <table class="w-full text-left text-sm">
+          <table class="w-full text-left text-xs">
             <thead>
-              <tr class="border-b border-[#1a2333] text-slate-400 text-xs uppercase font-mono tracking-wider">
-                <th class="pb-3 font-semibold">User</th>
-                <th class="pb-3 font-semibold">Email</th>
-                <th class="pb-3 font-semibold">Role</th>
-                <th class="pb-3 font-semibold text-right">Timestamp</th>
+              <tr class="border-b border-white/[0.06] text-zinc-400 font-medium bg-white/[0.01]">
+                <th class="py-3 px-5 font-medium">User</th>
+                <th class="py-3 px-5 font-medium">Email</th>
+                <th class="py-3 px-5 font-medium">Role</th>
+                <th class="py-3 px-5 font-medium text-right">Last Active</th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-[#1a2333]/70">
+            <tbody class="divide-y divide-white/[0.04]">
               {recentUsers.map((u) => (
-                <tr key={u.email} class="hover:bg-[#0f1624]/40 transition-colors">
-                  <td class="py-3.5 font-medium text-white">{u.name}</td>
-                  <td class="py-3.5 text-slate-400 font-mono text-xs">{u.email}</td>
-                  <td class="py-3.5">
-                    <span class="px-2 py-0.5 rounded-md bg-[#0f1624] text-slate-300 border border-[#1a2333] text-xs font-mono">
+                <tr key={u.email} class="hover:bg-white/[0.02] transition-colors group">
+                  <td class="py-3.5 px-5">
+                    <div class="flex items-center gap-2.5">
+                      <div class="w-6 h-6 rounded-full bg-white/[0.06] border border-white/[0.08] flex items-center justify-center text-[10px] font-medium text-zinc-300">
+                        {u.name.charAt(0)}
+                      </div>
+                      <span class="font-medium text-zinc-200 group-hover:text-white transition-colors">{u.name}</span>
+                    </div>
+                  </td>
+                  <td class="py-3.5 px-5 text-zinc-400">{u.email}</td>
+                  <td class="py-3.5 px-5">
+                    <span class={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[11px] font-medium border ${
+                      u.role === 'Owner'
+                        ? 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20'
+                        : 'bg-white/[0.04] text-zinc-300 border-white/[0.08]'
+                    }`}>
+                      {u.role === 'Owner' && <span class="w-1.5 h-1.5 rounded-full bg-indigo-400" />}
                       {u.role}
                     </span>
                   </td>
-                  <td class="py-3.5 text-slate-500 text-xs text-right font-mono">{u.date}</td>
+                  <td class="py-3.5 px-5 text-zinc-500 text-right tabular-nums">{u.date}</td>
                 </tr>
               ))}
             </tbody>

package/templates/auth/src/app/layout.tsx

@@ -9,7 +9,7 @@ export interface RootLayoutProps {
 }
 
 export default function RootLayout({ children, metadata }: RootLayoutProps) {
-  const title = metadata?.title || 'FrootSaaS — Modern Cloud Platform';
+  const title = metadata?.title || 'FrootAuth — Modern Cloud Platform';
   const description =
     metadata?.description ||
     'Fullstack SaaS application with authentication and real-time dashboard powered by Preact and FrootKit.';
@@ -24,12 +24,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
           rel="stylesheet"
         />
         <link rel="stylesheet" href="/styles.css" />
       </head>
-      <body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
+      <body class="bg-[#08090a] text-zinc-100 min-h-screen antialiased selection:bg-indigo-500/20 selection:text-indigo-300 font-sans">
         {children}
       </body>
     </html>

package/templates/auth/src/app/login/page.tsx

@@ -7,12 +7,16 @@ export const metadata = {
 
 export default function LoginPage() {
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
       <Navbar />
 
       <main class="max-w-md mx-auto px-6 py-16 flex-1 w-full flex flex-col justify-center">
         <AuthForm mode="login" />
       </main>
+
+      <footer class="py-6 text-center text-xs text-zinc-600">
+        FrootAuth • Web Crypto PBKDF2 Authentication
+      </footer>
     </div>
   );
 }

package/templates/auth/src/app/page.tsx

@@ -7,92 +7,150 @@ export const metadata = {
 
 export default function SaaSMarketingPage() {
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
       <Navbar />
 
-      <main class="max-w-6xl mx-auto px-6 py-16 flex-1 flex flex-col justify-center">
-        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+      <main class="max-w-6xl mx-auto px-6 py-16 sm:py-24 flex-1 flex flex-col justify-center w-full">
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
           {/* Left Column (7 cols) */}
           <div class="lg:col-span-7">
-            <div class="text-xs font-mono font-medium text-emerald-400 mb-3 uppercase tracking-wide">
-              Security Architecture • Pure Web Crypto
+            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-medium mb-6">
+              <span class="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
+              <span>Pure Web Crypto Architecture</span>
             </div>
 
-            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
+            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-white tracking-[-0.03em] leading-[1.1] mb-6">
               Fullstack Authentication & Administration.
             </h1>
 
-            <p class="text-base sm:text-lg text-slate-300 leading-relaxed mb-8 max-w-xl">
-              Zero external C++ dependencies. Real PBKDF2 password hashing (100,000 iterations), cryptographically random session tokens, protected layout routes, and administrative dashboard metrics.
+            <p class="text-base sm:text-lg text-zinc-400 leading-relaxed mb-8 max-w-xl">
+              Zero external C++ dependencies. Real PBKDF2 password hashing (100,000 iterations), cryptographically random session tokens, protected layouts, and high-density telemetry.
             </p>
 
-            <div class="flex flex-wrap items-center gap-4 mb-8">
+            <div class="flex flex-wrap items-center gap-3.5 mb-8">
               <a
                 href="/signup"
-                class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm flex items-center gap-1.5"
+                class="px-4 py-2.5 rounded-lg bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all text-sm shadow-sm flex items-center gap-2 group"
               >
                 <span>Create Account</span>
-                <span>→</span>
+                <span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
               </a>
               <a
                 href="/dashboard"
-                class="px-5 py-2.5 rounded-lg bg-[#0a0f18] border border-[#1a2333] text-slate-200 font-semibold hover:border-slate-700 hover:text-white transition-colors text-sm"
+                class="px-4 py-2.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-zinc-300 font-medium hover:bg-white/[0.08] hover:text-white transition-all text-sm"
               >
-                View Dashboard
+                Open Dashboard
               </a>
             </div>
 
-            <div class="text-xs font-mono text-slate-400 flex items-center gap-2">
-              <span class="text-emerald-400 font-bold">✓</span>
-              <span>Demo Account ready: admin@frootkit.dev / password123</span>
+            <div class="inline-flex items-center gap-2.5 px-3 py-1.5 rounded-md bg-white/[0.03] border border-white/[0.06] text-xs text-zinc-400">
+              <span class="w-2 h-2 rounded-full bg-emerald-400" />
+              <span>Demo Account ready:</span>
+              <code class="text-zinc-200 font-mono text-[11px] bg-white/[0.04] px-1.5 py-0.5 rounded">admin@frootkit.dev</code>
+              <span class="text-zinc-600">/</span>
+              <code class="text-zinc-200 font-mono text-[11px] bg-white/[0.04] px-1.5 py-0.5 rounded">password123</code>
             </div>
           </div>
 
-          {/* Right Column: Mini Dashboard Card (5 cols) */}
+          {/* Right Column: Linear-Grade Security Inspector Card (5 cols) */}
           <div class="lg:col-span-5">
-            <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 shadow-xl space-y-4">
-              <div class="flex items-center justify-between pb-3 border-b border-[#1a2333]">
-                <span class="text-xs font-mono text-slate-400">Security Telemetry</span>
-                <span class="text-[10px] font-mono text-emerald-400 px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 font-semibold">
-                  PBKDF2-SHA256
+            <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-6 shadow-2xl shadow-black/40 relative overflow-hidden">
+              {/* Subtle top edge highlight */}
+              <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/40 to-transparent" />
+
+              <div class="flex items-center justify-between pb-4 border-b border-white/[0.06] mb-5">
+                <div class="flex items-center gap-2">
+                  <div class="w-2 h-2 rounded-full bg-emerald-400" />
+                  <span class="text-xs font-medium text-zinc-300">Security Subsystem</span>
+                </div>
+                <span class="text-[11px] text-indigo-400 font-medium px-2 py-0.5 rounded-full bg-indigo-500/10 border border-indigo-500/20">
+                  SubtleCrypto Active
                 </span>
               </div>
 
-              <div class="space-y-3 font-mono text-xs">
-                <div class="flex justify-between">
-                  <span class="text-slate-400">Iterations:</span>
-                  <span class="text-white font-bold">100,000</span>
+              <div class="space-y-3.5 text-xs">
+                <div class="flex justify-between items-center py-1">
+                  <span class="text-zinc-400">Algorithm</span>
+                  <span class="text-zinc-200 font-medium">PBKDF2-SHA256</span>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-slate-400">Salt Length:</span>
-                  <span class="text-white font-bold">128-bit (16 bytes)</span>
+                <div class="flex justify-between items-center py-1 border-t border-white/[0.04]">
+                  <span class="text-zinc-400">Iterations</span>
+                  <span class="text-zinc-200 font-medium tabular-nums">100,000 rounds</span>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-slate-400">Key Derivation:</span>
-                  <span class="text-white font-bold">256-bit SubtleCrypto</span>
+                <div class="flex justify-between items-center py-1 border-t border-white/[0.04]">
+                  <span class="text-zinc-400">Salt Length</span>
+                  <span class="text-zinc-200 font-medium tabular-nums">128-bit (16 bytes)</span>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-slate-400">Cookie Security:</span>
-                  <span class="text-emerald-400 font-bold">HttpOnly; SameSite=Lax</span>
+                <div class="flex justify-between items-center py-1 border-t border-white/[0.04]">
+                  <span class="text-zinc-400">Key Derivation</span>
+                  <span class="text-zinc-200 font-medium">256-bit SubtleCrypto</span>
+                </div>
+                <div class="flex justify-between items-center py-1 border-t border-white/[0.04]">
+                  <span class="text-zinc-400">Cookie Security</span>
+                  <span class="text-emerald-400 font-medium">HttpOnly; SameSite=Lax</span>
                 </div>
               </div>
 
-              <div class="pt-3 border-t border-[#1a2333] flex justify-between items-center text-xs">
-                <span class="text-slate-400">Endpoint:</span>
-                <code class="text-emerald-400 font-mono">/api/auth?action=login</code>
+              <div class="mt-5 pt-4 border-t border-white/[0.06] flex justify-between items-center text-xs">
+                <span class="text-zinc-500">Auth Route</span>
+                <code class="text-indigo-400 font-mono text-[11px] bg-indigo-500/5 px-2 py-0.5 rounded border border-indigo-500/15">
+                  /api/auth?action=login
+                </code>
               </div>
             </div>
           </div>
         </div>
+
+        {/* Feature Grid Below */}
+        <div class="mt-20 pt-12 border-t border-white/[0.06] grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div class="p-5 rounded-lg border border-white/[0.06] bg-white/[0.02]">
+            <div class="w-8 h-8 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 mb-3">
+              <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+              </svg>
+            </div>
+            <h3 class="text-sm font-semibold text-zinc-100 mb-1">Standard Web Crypto</h3>
+            <p class="text-xs text-zinc-400 leading-relaxed">
+              Native PBKDF2 key derivation using the Web Cryptography API. Zero C++ native rebuilds across any architecture.
+            </p>
+          </div>
+
+          <div class="p-5 rounded-lg border border-white/[0.06] bg-white/[0.02]">
+            <div class="w-8 h-8 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 mb-3">
+              <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <line x1="9" y1="3" x2="9" y2="21" />
+              </svg>
+            </div>
+            <h3 class="text-sm font-semibold text-zinc-100 mb-1">Protected Layouts</h3>
+            <p class="text-xs text-zinc-400 leading-relaxed">
+              Deterministic server-side session checks in nested Preact layout trees with instant redirect fallbacks.
+            </p>
+          </div>
+
+          <div class="p-5 rounded-lg border border-white/[0.06] bg-white/[0.02]">
+            <div class="w-8 h-8 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 mb-3">
+              <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="20" x2="18" y2="10" />
+                <line x1="12" y1="20" x2="12" y2="4" />
+                <line x1="6" y1="20" x2="6" y2="14" />
+              </svg>
+            </div>
+            <h3 class="text-sm font-semibold text-zinc-100 mb-1">SQLite Session Cache</h3>
+            <p class="text-xs text-zinc-400 leading-relaxed">
+              Local persistent storage with sub-millisecond lookup latency, automatic expiry purging, and single-file portability.
+            </p>
+          </div>
+        </div>
       </main>
 
-      <footer class="border-t border-[#1a2333] bg-[#06090f] py-8 text-xs text-slate-400">
-        <div class="max-w-6xl mx-auto px-6 flex justify-between">
-          <div>FrootAuth © {new Date().getFullYear()} OrbitNorth LLC</div>
-          <div class="flex gap-4">
-            <a href="/login" class="hover:text-white transition-colors">Sign In</a>
-            <a href="/signup" class="hover:text-white transition-colors">Sign Up</a>
-            <a href="/dashboard" class="hover:text-white transition-colors">Dashboard</a>
+      <footer class="border-t border-white/[0.06] bg-[#08090a] py-6 text-xs text-zinc-500">
+        <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div>FrootAuth © {new Date().getFullYear()} OrbitNorth LLC. Built with FrootKit.</div>
+          <div class="flex gap-5">
+            <a href="/login" class="hover:text-zinc-300 transition-colors">Sign In</a>
+            <a href="/signup" class="hover:text-zinc-300 transition-colors">Sign Up</a>
+            <a href="/dashboard" class="hover:text-zinc-300 transition-colors">Dashboard</a>
           </div>
         </div>
       </footer>

package/templates/auth/src/app/signup/page.tsx

@@ -7,12 +7,16 @@ export const metadata = {
 
 export default function SignupPage() {
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
       <Navbar />
 
       <main class="max-w-md mx-auto px-6 py-16 flex-1 w-full flex flex-col justify-center">
         <AuthForm mode="signup" />
       </main>
+
+      <footer class="py-6 text-center text-xs text-zinc-600">
+        FrootAuth • Web Crypto PBKDF2 Authentication
+      </footer>
     </div>
   );
 }

package/templates/auth/src/components/AuthForm.tsx

@@ -6,24 +6,32 @@ export function AuthForm({ mode }: AuthFormProps) {
   const isLogin = mode === 'login';
 
   return (
-    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 shadow-xl">
+    <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-7 sm:p-8 shadow-2xl shadow-black/50 relative overflow-hidden">
+      {/* Top ambient highlight */}
+      <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/40 to-transparent" />
+
       <div class="mb-6">
-        <h1 class="text-2xl font-bold text-white mb-1.5">
-          {isLogin ? 'Sign in to workspace' : 'Create workspace account'}
+        <h1 class="text-xl font-semibold text-white tracking-tight mb-1">
+          {isLogin ? 'Sign in to workspace' : 'Create your account'}
         </h1>
-        <p class="text-slate-400 text-xs">
+        <p class="text-zinc-400 text-xs">
           {isLogin ? 'Need an account? ' : 'Already registered? '}
-          <a href={isLogin ? '/signup' : '/login'} class="text-emerald-400 font-semibold hover:underline">
+          <a href={isLogin ? '/signup' : '/login'} class="text-indigo-400 font-medium hover:text-indigo-300 transition-colors">
             {isLogin ? 'Sign up' : 'Sign in'}
           </a>
         </p>
       </div>
 
       {isLogin && (
-        <div class="mb-6 p-3.5 rounded-lg bg-[#06090f] border border-[#1a2333] text-xs text-slate-300">
-          <span class="text-emerald-400 font-bold block mb-1">Demo Credentials:</span>
-          <div class="font-mono text-slate-300 text-[11px]">
-            admin@frootkit.dev <span class="text-slate-500 mx-1">•</span> password123
+        <div class="mb-5 p-3 rounded-lg bg-white/[0.02] border border-white/[0.06] text-xs">
+          <div class="flex items-center gap-1.5 text-zinc-400 text-[11px] mb-1">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+            <span class="font-medium text-zinc-300">Quick Demo Credentials:</span>
+          </div>
+          <div class="font-mono text-zinc-300 text-[11px] bg-white/[0.03] px-2 py-1 rounded flex items-center justify-between">
+            <span>admin@frootkit.dev</span>
+            <span class="text-zinc-600">•</span>
+            <span>password123</span>
           </div>
         </div>
       )}
@@ -31,7 +39,7 @@ export function AuthForm({ mode }: AuthFormProps) {
       <form action={`/api/auth?action=${mode}`} method="POST" class="space-y-4">
         {!isLogin && (
           <div>
-            <label class="block text-xs font-medium text-slate-300 mb-1.5" for="name">
+            <label class="block text-xs font-medium text-zinc-300 mb-1.5" for="name">
               Full Name
             </label>
             <input
@@ -40,13 +48,13 @@ export function AuthForm({ mode }: AuthFormProps) {
               name="name"
               placeholder="Developer Name"
               required
-              class="w-full px-3.5 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
+              class="w-full px-3 py-2 rounded-lg bg-[#08090a] border border-white/[0.08] text-white text-xs placeholder:text-zinc-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
             />
           </div>
         )}
 
         <div>
-          <label class="block text-xs font-medium text-slate-300 mb-1.5" for="email">
+          <label class="block text-xs font-medium text-zinc-300 mb-1.5" for="email">
             Email Address
           </label>
           <input
@@ -56,14 +64,21 @@ export function AuthForm({ mode }: AuthFormProps) {
             placeholder="admin@frootkit.dev"
             defaultValue={isLogin ? 'admin@frootkit.dev' : ''}
             required
-            class="w-full px-3.5 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
+            class="w-full px-3 py-2 rounded-lg bg-[#08090a] border border-white/[0.08] text-white text-xs placeholder:text-zinc-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
           />
         </div>
 
         <div>
-          <label class="block text-xs font-medium text-slate-300 mb-1.5" for="password">
-            Password
-          </label>
+          <div class="flex items-center justify-between mb-1.5">
+            <label class="block text-xs font-medium text-zinc-300" for="password">
+              Password
+            </label>
+            {isLogin && (
+              <span class="text-[11px] text-zinc-500">
+                min 8 characters
+              </span>
+            )}
+          </div>
           <input
             id="password"
             type="password"
@@ -71,16 +86,16 @@ export function AuthForm({ mode }: AuthFormProps) {
             placeholder="••••••••••••"
             defaultValue={isLogin ? 'password123' : ''}
             required
-            class="w-full px-3.5 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
+            class="w-full px-3 py-2 rounded-lg bg-[#08090a] border border-white/[0.08] text-white text-xs placeholder:text-zinc-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
           />
         </div>
 
         <button
           type="submit"
-          class="w-full py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors mt-2 flex items-center justify-center gap-2"
+          class="w-full py-2.5 rounded-lg bg-white text-zinc-950 font-medium text-xs hover:bg-zinc-200 transition-all mt-3 flex items-center justify-center gap-2 group shadow-sm"
         >
           <span>{isLogin ? 'Sign In' : 'Create Account'}</span>
-          <span>→</span>
+          <span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
         </button>
       </form>
     </div>