create-frootkit 1.2.1 → 1.2.3

package/templates/ecommerce/src/components/Navbar.tsx

@@ -1,11 +1,13 @@
 export function Navbar() {
   return (
-    <header class="border-b border-slate-800/80 bg-slate-950/70 backdrop-blur-md sticky top-0 z-50">
+    <header class="border-b border-[#1a2333] bg-[#06090f]/95 sticky top-0 z-50">
       <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
-        <a href="/" class="flex items-center gap-3 font-extrabold text-white text-lg tracking-tight hover:opacity-90">
-          <span class="w-8 h-8 rounded-xl bg-gradient-to-tr from-emerald-500 to-teal-400 flex items-center justify-center text-slate-950 font-black text-sm">
-            🛒
-          </span>
+        <a href="/" class="flex items-center gap-3 font-bold text-white text-base tracking-tight hover:text-emerald-400 transition-colors">
+          <div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+            </svg>
+          </div>
           <span>Froot<span class="text-emerald-400">Store</span></span>
         </a>
 
@@ -13,15 +15,18 @@ export function Navbar() {
           <a href="/" class="text-slate-300 hover:text-white transition-colors">
             Catalog
           </a>
-          <a href="/api/products" class="text-slate-400 hover:text-emerald-400 font-mono text-xs px-2 py-1 rounded bg-slate-900 border border-slate-800 transition-colors">
+          <a href="/api/products" class="text-emerald-400 hover:text-emerald-300 font-mono text-xs px-2.5 py-1 rounded-md bg-[#0a0f18] border border-[#1a2333] transition-colors">
             /api/products
           </a>
           <a
             href="/cart"
-            class="flex items-center gap-2 px-3.5 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 hover:border-emerald-500/50 hover:text-emerald-400 transition-all font-semibold text-xs"
+            class="flex items-center gap-2 px-3.5 py-1.5 rounded-lg bg-[#0a0f18] border border-[#1a2333] text-slate-200 hover:border-slate-700 hover:text-white transition-colors text-xs font-semibold"
           >
+            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+            </svg>
             <span>Cart</span>
-            <span class="w-5 h-5 rounded-full bg-emerald-500 text-slate-950 flex items-center justify-center font-bold text-[10px]">
+            <span class="px-1.5 py-0.2 rounded bg-emerald-500 text-slate-950 font-bold text-[10px]">
               2
             </span>
           </a>

package/templates/ecommerce/src/components/ProductCard.tsx

@@ -2,27 +2,28 @@ import type { Product } from '../data/products.js';
 
 export function ProductCard({ product }: { product: Product }) {
   return (
-    <div class="rounded-2xl border border-slate-800/80 bg-slate-900/30 overflow-hidden backdrop-blur-sm hover:border-emerald-500/40 transition-all hover:-translate-y-1 group flex flex-col justify-between">
-      <a href={`/products/${product.id}`} class="block relative aspect-[4/3] overflow-hidden bg-slate-950">
+    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden hover:border-slate-700 transition-colors flex flex-col justify-between">
+      <a href={`/products/${product.id}`} class="block relative aspect-[4/3] overflow-hidden bg-[#06090f]">
         <img
           src={product.image}
           alt={product.name}
-          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          class="w-full h-full object-cover transition-transform duration-200"
           loading="lazy"
         />
-        <span class="absolute top-3 right-3 px-2 py-0.5 rounded-full bg-slate-950/80 backdrop-blur-md text-[11px] font-mono text-slate-300 border border-slate-700/60">
+        <span class="absolute top-3 right-3 px-2 py-0.5 rounded bg-[#06090f]/90 text-[11px] font-mono text-slate-300 border border-[#1a2333]">
           {product.category}
         </span>
       </a>
 
       <div class="p-5 flex-1 flex flex-col justify-between">
         <div>
-          <div class="flex items-center gap-1.5 mb-2 text-xs">
-            <span class="text-amber-400 font-bold">&#9733; {product.rating}</span>
-            <span class="text-slate-500">({product.reviewsCount})</span>
+          <div class="flex items-center gap-1.5 mb-2 text-xs font-mono text-slate-400">
+            <span class="text-emerald-400 font-bold">{product.rating.toFixed(1)}</span>
+            <span>/ 5.0</span>
+            <span class="text-slate-500">({product.reviewsCount} reviews)</span>
           </div>
 
-          <h3 class="font-bold text-white text-base mb-2 group-hover:text-emerald-400 transition-colors line-clamp-1">
+          <h3 class="font-bold text-white text-base mb-2 hover:text-emerald-400 transition-colors line-clamp-1">
             <a href={`/products/${product.id}`}>
               {product.name}
             </a>
@@ -33,17 +34,17 @@ export function ProductCard({ product }: { product: Product }) {
           </p>
         </div>
 
-        <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
+        <div class="pt-4 border-t border-[#1a2333] flex items-center justify-between">
           <div>
-            <span class="text-xs text-slate-500 block">Price</span>
-            <span class="text-lg font-black text-white">${product.price.toFixed(2)}</span>
+            <span class="text-[11px] font-mono text-slate-500 block">Price</span>
+            <span class="text-lg font-bold text-white font-mono">${product.price.toFixed(2)}</span>
           </div>
 
           <a
             href={`/products/${product.id}`}
-            class="px-3.5 py-2 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs hover:bg-emerald-400 transition-colors shadow-md shadow-emerald-500/10"
+            class="px-3.5 py-1.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-xs hover:bg-emerald-400 transition-colors"
           >
-            View Details
+            Details
           </a>
         </div>
       </div>

package/templates/ecommerce/src/styles.css

@@ -1,19 +1,27 @@
 @import "tailwindcss";
 
 @theme {
-  --color-brand-50: #ecfdf5;
-  --color-brand-100: #d1fae5;
-  --color-brand-200: #a7f3d0;
-  --color-brand-300: #6ee7b7;
-  --color-brand-400: #34d399;
-  --color-brand-500: #10b981;
-  --color-brand-600: #059669;
-  --color-brand-700: #047857;
-  --color-brand-800: #065f46;
-  --color-brand-900: #064e3b;
-  --color-brand-950: #022c22;
+  --color-brand-primary: #10b981;
+  --color-brand-hover: #34d399;
 }
 
 :root {
   color-scheme: dark;
 }
+
+html {
+  background-color: #06090f;
+  color: #f8fafc;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Accessibility: Mandatory Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

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

@@ -5,29 +5,29 @@ export const metadata = {
 
 export default function HomePage() {
   return (
-    <main class="min-h-screen flex items-center justify-center p-6">
-      <div class="max-w-md w-full text-center border border-slate-800 bg-slate-900/40 rounded-2xl p-8 backdrop-blur-sm">
-        <div class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center mx-auto mb-4 text-emerald-400 font-bold text-xl">
+    <main class="min-h-screen bg-[#06090f] text-slate-100 flex items-center justify-center p-6">
+      <div class="max-w-md w-full text-center border border-[#1a2333] bg-[#0a0f18] rounded-xl p-8">
+        <div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center mx-auto mb-4 text-emerald-400 font-bold text-lg font-mono">
           F
         </div>
-        <h1 class="text-2xl font-bold text-white mb-2">Blank Slate</h1>
-        <p class="text-slate-400 text-sm mb-6">
-          Edit <code class="font-mono text-emerald-400 bg-slate-800/80 px-1.5 py-0.5 rounded">src/app/page.tsx</code> to get started.
+        <h1 class="text-2xl font-bold text-white mb-2">Blank Canvas</h1>
+        <p class="text-slate-400 text-sm mb-6 leading-relaxed">
+          Start building by editing <code class="font-mono text-emerald-400 bg-[#06090f] border border-[#1a2333] px-1.5 py-0.5 rounded">src/app/page.tsx</code>.
         </p>
         <div class="flex justify-center gap-3 text-xs font-medium">
           <a
             href="https://frootjs.org"
             target="_blank"
             rel="noreferrer"
-            class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-colors"
+            class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors"
           >
-            Docs
+            Documentation
           </a>
           <a
             href="https://github.com/orbitnorth/frootkit"
             target="_blank"
             rel="noreferrer"
-            class="px-4 py-2 rounded-lg bg-slate-800 text-slate-200 hover:bg-slate-700 transition-colors"
+            class="px-4 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-slate-300 hover:text-white transition-colors"
           >
             GitHub
           </a>

package/templates/empty/src/styles.css

@@ -1,19 +1,27 @@
 @import "tailwindcss";
 
 @theme {
-  --color-brand-50: #ecfdf5;
-  --color-brand-100: #d1fae5;
-  --color-brand-200: #a7f3d0;
-  --color-brand-300: #6ee7b7;
-  --color-brand-400: #34d399;
-  --color-brand-500: #10b981;
-  --color-brand-600: #059669;
-  --color-brand-700: #047857;
-  --color-brand-800: #065f46;
-  --color-brand-900: #064e3b;
-  --color-brand-950: #022c22;
+  --color-brand-primary: #10b981;
+  --color-brand-hover: #34d399;
 }
 
 :root {
   color-scheme: dark;
 }
+
+html {
+  background-color: #06090f;
+  color: #f8fafc;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Accessibility: Mandatory Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

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

@@ -4,85 +4,36 @@ import { TerminalPreview } from '../components/TerminalPreview.js';
 import { Footer } from '../components/Footer.js';
 
 export const metadata = {
-  title: 'FrootKit — Next.js Alternative for Preact & Froot',
-  description: 'Ultra-fast Preact SSR, nested layouts, native Tailwind CSS v4, and dynamic API routes.',
+  title: 'FrootKit — Next.js Alternative for Preact',
+  description: 'Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, and dynamic API routes.',
 };
 
 export default function HomePage() {
-  const features = [
-    {
-      icon: '⚡',
-      badge: '0.1ms render',
-      title: 'Sub-Millisecond SSR',
-      description: 'Preact VNode streaming and monomorphic rendering ensure blistering speed with near-zero memory footprint.',
-    },
-    {
-      icon: '🎨',
-      badge: 'Tailwind v4',
-      title: 'Native CSS Pipeline',
-      description: 'Zero postcss.config.js or tailwind.config.js required. Tailwind CSS v4 is compiled instantly on every change.',
-    },
-    {
-      icon: '📁',
-      badge: 'App Router',
-      title: 'Nested Layouts',
-      description: 'Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions.',
-    },
-    {
-      icon: '🔌',
-      badge: 'Fullstack API',
-      title: 'Route Handlers',
-      description: 'Build backend logic seamlessly in src/app/api/**/route.ts handling GET, POST, PUT, DELETE with standard Web APIs.',
-    },
-    {
-      icon: '📦',
-      badge: 'Static Export',
-      title: 'SSG & Edge Ready',
-      description: 'Run frootkit build to pre-render static HTML and bundle dynamic endpoints for serverless and edge clouds.',
-    },
-    {
-      icon: '🤖',
-      badge: 'Agent Friendly',
-      title: 'AI Native Scaffolding',
-      description: 'Comes with pre-configured AGENT.md guidelines, strict TypeScript, and biome/eslint support.',
-    },
-  ];
-
   return (
-    <div class="min-h-screen flex flex-col justify-between">
-      {/* Background glow effects */}
-      <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
-        <div class="absolute -top-40 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gradient-to-tr from-emerald-500/15 via-teal-500/10 to-cyan-500/5 blur-[120px] rounded-full" />
-        <div class="absolute top-1/2 -left-40 w-[600px] h-[400px] bg-emerald-600/10 blur-[140px] rounded-full" />
-      </div>
-
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <Header />
 
-      {/* Hero Section */}
-      <main class="max-w-6xl mx-auto px-6 py-16 sm:py-24 flex-1 flex flex-col justify-center">
-        <div class="text-center max-w-3xl mx-auto mb-16">
-          <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/25 text-xs font-semibold text-emerald-400 mb-8 shadow-sm shadow-emerald-950">
-            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+      <main class="max-w-6xl mx-auto px-6 py-16 flex-1 flex flex-col justify-center">
+        {/* Hero Section */}
+        <div class="max-w-3xl mb-16">
+          <div class="text-xs font-mono font-medium text-emerald-400 mb-3 tracking-wide uppercase">
             Next.js App Router Conventions &bull; Zero Overhead
           </div>
 
-          <h1 class="text-4xl sm:text-6xl md:text-7xl font-extrabold text-white tracking-tight mb-6 leading-tight sm:leading-none">
-            The Next.js Alternative Built for{' '}
-            <span class="bg-gradient-to-r from-emerald-400 via-teal-300 to-cyan-400 bg-clip-text text-transparent">
-              Speed & Simplicity
-            </span>
+          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
+            The Next.js Alternative Built for Speed & Simplicity.
           </h1>
 
-          <p class="text-slate-300 text-lg sm:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">
-            Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, instant static site export, and built-in API routes.
+          <p class="text-base sm:text-lg text-slate-300 leading-relaxed mb-8 max-w-2xl">
+            Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, dynamic API routes, and instant static site generation.
           </p>
 
-          <div class="flex flex-wrap items-center justify-center gap-4">
+          <div class="flex flex-wrap items-center gap-4">
             <a
               href="https://frootjs.org"
               target="_blank"
               rel="noreferrer"
-              class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 hover:-translate-y-0.5"
+              class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm"
             >
               Explore Documentation &rarr;
             </a>
@@ -90,9 +41,9 @@ export default function HomePage() {
               href="https://github.com/orbitnorth/frootkit"
               target="_blank"
               rel="noreferrer"
-              class="px-6 py-3 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 font-semibold hover:bg-slate-800/80 hover:border-slate-700 transition-all hover:-translate-y-0.5 flex items-center gap-2"
+              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 flex items-center gap-2"
             >
-              <svg class="w-4 h-4 fill-current text-slate-300" viewBox="0 0 24 24">
+              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                 <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
               </svg>
               Star on GitHub
@@ -102,17 +53,67 @@ export default function HomePage() {
 
         <TerminalPreview />
 
-        {/* Feature Grid */}
+        {/* Feature Grid with Real SVG Icons */}
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {features.map((f) => (
-            <FeatureCard
-              key={f.title}
-              icon={f.icon}
-              badge={f.badge}
-              title={f.title}
-              description={f.description}
-            />
-          ))}
+          <FeatureCard
+            badge="0.1ms render"
+            title="Sub-Millisecond SSR"
+            description="Preact VNode streaming and monomorphic rendering ensure blistering response times with near-zero memory footprint."
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+          </FeatureCard>
+
+          <FeatureCard
+            badge="Tailwind v4"
+            title="Native CSS Pipeline"
+            description="Zero postcss or tailwind config files required. Native Tailwind CSS v4 compiles in single-digit milliseconds."
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+            </svg>
+          </FeatureCard>
+
+          <FeatureCard
+            badge="App Router"
+            title="Nested File Layouts"
+            description="Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions."
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+            </svg>
+          </FeatureCard>
+
+          <FeatureCard
+            badge="Fullstack API"
+            title="Dynamic Route Handlers"
+            description="Build backend endpoints in src/app/api/**/route.ts handling GET, POST, PUT, DELETE with standard Web Fetch APIs."
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </FeatureCard>
+
+          <FeatureCard
+            badge="Static Export"
+            title="SSG & Edge Ready"
+            description="Run frootkit build to pre-render static HTML and bundle dynamic endpoints for serverless and edge clouds in seconds."
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+          </FeatureCard>
+
+          <FeatureCard
+            badge="AI Native"
+            title="Agent Guidelines"
+            description="Comes with pre-configured AGENT.md guidelines, strict TypeScript, and biome/eslint support for agentic development."
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </FeatureCard>
         </div>
       </main>
 

package/templates/starter/src/components/FeatureCard.tsx

@@ -1,20 +1,24 @@
+import type { ComponentChildren } from 'preact';
+
 export interface FeatureCardProps {
-  icon: string;
   badge: string;
   title: string;
   description: string;
+  children?: ComponentChildren;
 }
 
-export function FeatureCard({ icon, badge, title, description }: FeatureCardProps) {
+export function FeatureCard({ badge, title, description, children }: FeatureCardProps) {
   return (
-    <div class="rounded-2xl border border-slate-800/80 bg-slate-900/30 p-6 backdrop-blur-sm hover:border-emerald-500/40 transition-all hover:-translate-y-1 group">
+    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 hover:border-slate-700 transition-colors">
       <div class="flex items-center justify-between mb-4">
-        <span class="text-3xl">{icon}</span>
-        <span class="text-xs font-mono font-medium px-2 py-0.5 rounded-full bg-slate-800 text-slate-300 border border-slate-700/60 group-hover:border-emerald-500/40 transition-colors">
+        <div class="w-9 h-9 rounded-lg bg-[#0f1624] border border-[#1a2333] flex items-center justify-center text-emerald-400">
+          {children}
+        </div>
+        <span class="text-xs font-mono font-medium px-2 py-0.5 rounded bg-[#0f1624] text-slate-300 border border-[#1a2333]">
           {badge}
         </span>
       </div>
-      <h3 class="text-lg font-bold text-white mb-2 group-hover:text-emerald-400 transition-colors">
+      <h3 class="text-base font-bold text-white mb-2">
         {title}
       </h3>
       <p class="text-slate-400 text-sm leading-relaxed">

package/templates/starter/src/components/Footer.tsx

@@ -1,14 +1,14 @@
 export function Footer() {
   return (
-    <footer class="border-t border-slate-900 bg-slate-950/60 py-8 text-center text-xs text-slate-500">
-      <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+    <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 flex-col sm:flex-row items-center justify-between gap-4 font-mono">
         <div>
           FrootKit &copy; {new Date().getFullYear()} OrbitNorth LLC. MIT Licensed.
         </div>
         <div class="flex items-center gap-6">
-          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-slate-400 transition-colors">GitHub</a>
-          <a href="https://frootjs.org" class="hover:text-slate-400 transition-colors">Documentation</a>
-          <a href="/api/health" class="hover:text-slate-400 transition-colors">Health API</a>
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-white transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-white transition-colors">Documentation</a>
+          <a href="/api/health" class="hover:text-white transition-colors">Health API</a>
         </div>
       </div>
     </footer>

package/templates/starter/src/components/Header.tsx

@@ -1,13 +1,13 @@
 export function Header() {
   return (
-    <header class="border-b border-slate-800/80 bg-slate-950/40 backdrop-blur-md sticky top-0 z-50">
+    <header class="border-b border-[#1a2333] bg-[#06090f]/95 sticky top-0 z-50">
       <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
         <div class="flex items-center gap-3">
-          <span class="text-emerald-400 font-extrabold text-xl tracking-tight flex items-center gap-2">
-            <span class="inline-block w-3 h-3 rounded-full bg-emerald-400 animate-pulse" />
+          <span class="text-white font-extrabold text-lg tracking-tight flex items-center gap-2">
+            <span class="w-3 h-3 rounded-full bg-emerald-500 inline-block" />
             FrootKit
           </span>
-          <span class="px-2 py-0.5 text-[11px] font-mono font-medium rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+          <span class="px-2 py-0.5 text-[11px] font-mono text-slate-400 rounded-md bg-[#0a0f18] border border-[#1a2333]">
             v1.3.1
           </span>
         </div>
@@ -23,7 +23,7 @@ export function Header() {
           </a>
           <a
             href="/api/health"
-            class="text-slate-300 hover:text-emerald-400 transition-colors font-mono text-xs px-2.5 py-1 rounded-md bg-slate-900 border border-slate-800"
+            class="text-emerald-400 hover:text-emerald-300 font-mono text-xs px-2.5 py-1 rounded-md bg-[#0a0f18] border border-[#1a2333] transition-colors"
           >
             /api/health
           </a>

package/templates/starter/src/components/TerminalPreview.tsx

@@ -1,54 +1,54 @@
 export function TerminalPreview() {
   return (
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto w-full mb-16">
-      <div class="rounded-2xl border border-slate-800 bg-[#070b14] p-6 shadow-xl relative overflow-hidden group">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800/80">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto w-full mb-16">
+      <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden">
+        <div class="flex items-center justify-between px-4 py-2.5 bg-[#0f1624] border-b border-[#1a2333]">
           <div class="flex items-center gap-2">
-            <span class="w-3 h-3 rounded-full bg-rose-500/80" />
-            <span class="w-3 h-3 rounded-full bg-amber-500/80" />
-            <span class="w-3 h-3 rounded-full bg-emerald-500/80" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
             <span class="ml-2 text-xs font-mono text-slate-400">src/app/page.tsx</span>
           </div>
-          <span class="text-[11px] font-mono text-emerald-400/90 font-medium bg-emerald-950/60 px-2 py-0.5 rounded border border-emerald-800/40">
+          <span class="text-[11px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
             Preact SSR
           </span>
         </div>
-        <div class="font-mono text-xs sm:text-sm text-slate-300 space-y-2 select-all leading-relaxed">
+        <div class="p-5 font-mono text-xs text-slate-300 space-y-2 select-all leading-relaxed">
           <p><span class="text-purple-400 font-semibold">export default function</span> <span class="text-blue-400">HomePage</span>() &#123;</p>
           <p class="pl-4"><span class="text-purple-400 font-semibold">return</span> (</p>
           <p class="pl-8 text-emerald-300">&lt;<span class="text-blue-300 font-semibold">main</span> <span class="text-teal-400">class</span>=<span class="text-amber-300">"min-h-screen p-8"</span>&gt;</p>
-          <p class="pl-12 text-slate-100">&lt;<span class="text-blue-300 font-semibold">h1</span>&gt;Hello FrootKit!&lt;/<span class="text-blue-300 font-semibold">h1</span>&gt;</p>
+          <p class="pl-12 text-slate-100">&lt;<span class="text-blue-300 font-semibold">h1</span>&gt;Production FrootKit Application&lt;/<span class="text-blue-300 font-semibold">h1</span>&gt;</p>
           <p class="pl-8 text-emerald-300">&lt;/<span class="text-blue-300 font-semibold">main</span>&gt;</p>
           <p class="pl-4">);</p>
           <p>&#125;</p>
         </div>
       </div>
 
-      <div class="rounded-2xl border border-slate-800 bg-[#070b14] p-6 shadow-xl relative overflow-hidden group">
-        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800/80">
+      <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden">
+        <div class="flex items-center justify-between px-4 py-2.5 bg-[#0f1624] border-b border-[#1a2333]">
           <div class="flex items-center gap-2">
-            <span class="w-3 h-3 rounded-full bg-rose-500/80" />
-            <span class="w-3 h-3 rounded-full bg-amber-500/80" />
-            <span class="w-3 h-3 rounded-full bg-emerald-500/80" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
+            <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
             <span class="ml-2 text-xs font-mono text-slate-400">terminal</span>
           </div>
-          <span class="text-[11px] font-mono text-cyan-400/90 font-medium bg-cyan-950/60 px-2 py-0.5 rounded border border-cyan-800/40">
+          <span class="text-[11px] font-mono text-cyan-400 bg-cyan-500/10 px-2 py-0.5 rounded border border-cyan-500/20">
             CLI
           </span>
         </div>
-        <div class="font-mono text-xs sm:text-sm text-slate-300 space-y-2.5 leading-relaxed">
-          <p class="text-slate-500"># Start lightning-fast dev server</p>
-          <p class="text-emerald-400 font-semibold flex items-center gap-2">
-            <span class="text-slate-500 select-none">$</span> frootkit dev
-          </p>
-          <p class="text-slate-500 pt-1"># Build production static export + API routes</p>
-          <p class="text-cyan-400 font-semibold flex items-center gap-2">
-            <span class="text-slate-500 select-none">$</span> frootkit build
-          </p>
-          <p class="text-slate-500 pt-1"># Test the API endpoint</p>
-          <p class="text-amber-400 font-semibold flex items-center gap-2">
-            <span class="text-slate-500 select-none">$</span> curl http://localhost:3000/api/health
-          </p>
+        <div class="p-5 font-mono text-xs text-slate-300 space-y-3 leading-relaxed">
+          <div>
+            <span class="text-slate-500 block text-[11px]"># Run dev server with Tailwind compiler</span>
+            <span class="text-emerald-400 font-semibold">$ frootkit dev</span>
+          </div>
+          <div>
+            <span class="text-slate-500 block text-[11px]"># Build static export and API manifest</span>
+            <span class="text-cyan-400 font-semibold">$ frootkit build</span>
+          </div>
+          <div>
+            <span class="text-slate-500 block text-[11px]"># Test dynamic route handler</span>
+            <span class="text-amber-400 font-semibold">$ curl http://localhost:3000/api/health</span>
+          </div>
         </div>
       </div>
     </div>

package/templates/starter/src/styles.css

@@ -1,19 +1,27 @@
 @import "tailwindcss";
 
 @theme {
-  --color-brand-50: #ecfdf5;
-  --color-brand-100: #d1fae5;
-  --color-brand-200: #a7f3d0;
-  --color-brand-300: #6ee7b7;
-  --color-brand-400: #34d399;
-  --color-brand-500: #10b981;
-  --color-brand-600: #059669;
-  --color-brand-700: #047857;
-  --color-brand-800: #065f46;
-  --color-brand-900: #064e3b;
-  --color-brand-950: #022c22;
+  --color-brand-primary: #10b981;
+  --color-brand-hover: #34d399;
 }
 
 :root {
   color-scheme: dark;
 }
+
+html {
+  background-color: #06090f;
+  color: #f8fafc;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Accessibility: Mandatory Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/dist/templates/auth.d.ts

@@ -1,3 +0,0 @@
-import type { TemplateDefinition } from './types.js';
-export declare const authTemplate: TemplateDefinition;
-//# sourceMappingURL=auth.d.ts.map