create-frootkit 1.2.8 → 1.2.9

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

@@ -2,49 +2,56 @@ import type { Product } from '../data/products.js';
 
 export function ProductCard({ product }: { product: Product }) {
   return (
-    <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]">
+    <div class="group rounded-xl border border-white/[0.08] bg-[#0f1117] overflow-hidden hover:border-white/[0.18] transition-all duration-200 flex flex-col justify-between shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]">
+      {/* Product Image Frame */}
+      <a href={`/products/${product.id}`} class="block relative aspect-[4/3] overflow-hidden bg-zinc-950/60">
         <img
           src={product.image}
           alt={product.name}
-          class="w-full h-full object-cover transition-transform duration-200"
+          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
           loading="lazy"
         />
-        <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]">
+        <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent pointer-events-none" />
+        <span class="absolute top-3 left-3 px-2.5 py-0.5 rounded-full bg-[#090a0f]/85 backdrop-blur-md text-[10px] uppercase tracking-wider font-semibold text-zinc-300 border border-white/[0.08]">
           {product.category}
         </span>
       </a>
 
+      {/* Product Details */}
       <div class="p-5 flex-1 flex flex-col justify-between">
         <div>
-          <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>
+          {/* Subtle star & reviews */}
+          <div class="flex items-center gap-1.5 mb-2 text-xs text-zinc-400 font-medium">
+            <span class="text-amber-400 text-xs">★</span>
+            <span class="text-zinc-200 tabular-nums">{product.rating.toFixed(1)}</span>
+            <span class="text-zinc-600">•</span>
+            <span class="text-zinc-500 tabular-nums">{product.reviewsCount} reviews</span>
           </div>
 
-          <h3 class="font-bold text-white text-base mb-2 hover:text-emerald-400 transition-colors line-clamp-1">
+          <h3 class="font-semibold text-zinc-100 text-sm mb-2 group-hover:text-white transition-colors line-clamp-1">
             <a href={`/products/${product.id}`}>
               {product.name}
             </a>
           </h3>
 
-          <p class="text-slate-400 text-xs leading-relaxed mb-4 line-clamp-2">
+          <p class="text-zinc-400 text-xs leading-relaxed mb-4 line-clamp-2">
             {product.description}
           </p>
         </div>
 
-        <div class="pt-4 border-t border-[#1a2333] flex items-center justify-between">
+        {/* Price & Action Row */}
+        <div class="pt-4 border-t border-white/[0.06] flex items-center justify-between">
           <div>
-            <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>
+            <span class="text-[10px] text-zinc-500 block uppercase tracking-wider font-medium">Price</span>
+            <span class="text-base font-semibold text-white tabular-nums">${product.price.toFixed(2)}</span>
           </div>
 
           <a
             href={`/products/${product.id}`}
-            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"
+            class="px-3.5 py-1.5 rounded-lg bg-white text-zinc-950 font-medium text-xs hover:bg-zinc-200 transition-all shadow-sm flex items-center gap-1.5 group-hover:shadow"
           >
-            Details
+            <span>View</span>
+            <span class="text-zinc-500">→</span>
           </a>
         </div>
       </div>

package/templates/ecommerce/src/data/products.ts

@@ -19,9 +19,10 @@ export const PRODUCTS: Product[] = [
     category: 'Keyboards',
     rating: 4.9,
     reviewsCount: 128,
-    image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=600&h=450&fit=crop',
-    description: 'Aircraft-grade anodized aluminum body with custom hot-swappable linear switches and sound-dampening silicone base.',
-    features: ['Hot-swappable switches', 'Bluetooth 5.3 & 2.4GHz', 'CNC Aluminum Chassis', 'PBT Dye-Sub Keycaps'],
+    // Clean minimal anodized aluminum keyboard
+    image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=800&auto=format&fit=crop&q=80',
+    description: 'Aircraft-grade CNC anodized aluminum chassis with custom factory-lubed linear switches and sound-dampening silicone base.',
+    features: ['Hot-swappable switches', 'Bluetooth 5.3 & 2.4GHz wireless', 'CNC Aluminum Unibody', 'PBT Dye-Sub Keycaps'],
     inStock: true,
   },
   {
@@ -31,9 +32,10 @@ export const PRODUCTS: Product[] = [
     category: 'Audio',
     rating: 4.8,
     reviewsCount: 94,
-    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=450&fit=crop',
+    // Clean matte dark studio headphones on neutral background (no bright yellow!)
+    image: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=800&auto=format&fit=crop&q=80',
     description: 'Precision 50mm dynamic drivers engineered for ultra-flat frequency response, critical mixing, and executive focus.',
-    features: ['Planar Magnetic Sound', 'Memory Foam Cushions', 'Detachable Silver Cable', 'Hard Travel Case'],
+    features: ['Planar Magnetic Drivers', 'Memory Foam Cushions', 'Detachable Braided Cable', 'Hard Travel Case'],
     inStock: true,
   },
   {
@@ -43,9 +45,10 @@ export const PRODUCTS: Product[] = [
     category: 'Peripherals',
     rating: 4.7,
     reviewsCount: 210,
-    image: 'https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=600&h=450&fit=crop',
+    // Matte dark ergonomic mouse on neutral slate background
+    image: 'https://images.unsplash.com/photo-1615663245857-ac93bb7c39e7?w=800&auto=format&fit=crop&q=80',
     description: 'Sculpted ergonomic contour designed to eliminate wrist fatigue during extended development sessions.',
-    features: ['26,000 DPI Optical Sensor', '70-day Battery Life', 'Infinite Scroll Wheel', 'Quiet Click Switches'],
+    features: ['26,000 DPI Optical Sensor', '70-day Battery Life', 'Infinite Magnetic Scroll Wheel', 'Silent Click Switches'],
     inStock: true,
   },
   {
@@ -55,8 +58,9 @@ export const PRODUCTS: Product[] = [
     category: 'Desk Setup',
     rating: 5.0,
     reviewsCount: 62,
-    image: 'https://images.unsplash.com/photo-1526738549149-8e07eca6c147?w=600&h=450&fit=crop',
-    description: 'Handcrafted from single-origin American walnut with cork feet and an integrated aluminum tray for accessories.',
+    // Clean handcrafted wooden desk setup
+    image: 'https://images.unsplash.com/photo-1593062096033-9a26b09da705?w=800&auto=format&fit=crop&q=80',
+    description: 'Handcrafted from single-origin American walnut with cork feet and an integrated aluminum tray for desk accessories.',
     features: ['Sustainable American Walnut', 'Holds up to 60 lbs', 'Integrated Cable Troughs', 'Hand-finished Matte Oil'],
     inStock: true,
   },
@@ -67,7 +71,8 @@ export const PRODUCTS: Product[] = [
     category: 'Desk Setup',
     rating: 4.6,
     reviewsCount: 175,
-    image: 'https://images.unsplash.com/photo-1544816155-12df9643f363?w=600&h=450&fit=crop',
+    // Clean desk surface mat
+    image: 'https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=800&auto=format&fit=crop&q=80',
     description: 'Water-resistant, stain-proof premium desk surface that provides effortless mouse tracking and protects your workspace.',
     features: ['Water-resistant PU Leather', 'Anti-slip Suede Backing', '90cm x 45cm Large Size', 'Easy to Clean'],
     inStock: true,
@@ -79,7 +84,8 @@ export const PRODUCTS: Product[] = [
     category: 'Accessories',
     rating: 4.9,
     reviewsCount: 340,
-    image: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=600&h=450&fit=crop',
+    // Minimalist braided cable / tech accessory
+    image: 'https://images.unsplash.com/photo-1622434641406-a158123450f9?w=800&auto=format&fit=crop&q=80',
     description: 'Ultra-durable Kevlar-reinforced charging cable supporting up to 240W Power Delivery and 40Gbps Thunderbolt data transfer.',
     features: ['240W Power Delivery', 'E-Marker Smart Chip', 'Braided Kevlar Weave', '2-meter Length'],
     inStock: true,

package/templates/ecommerce/src/styles.css

@@ -4,28 +4,52 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-  --color-brand-primary: #10b981;
-  --color-brand-hover: #34d399;
+  --color-brand-primary: #f4f4f5;
+  --color-brand-hover: #ffffff;
 }
 
 :root {
   color-scheme: dark;
+  --bg-canvas: #090a0f;
+  --bg-surface: #0f1117;
+  --bg-elevated: #151822;
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.16);
+  --text-primary: #f4f4f5;
+  --text-secondary: #9496a1;
+  --text-muted: #5c6370;
 }
 
 html {
-  background-color: #06090f;
-  color: #f8fafc;
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
   font-family: var(--font-sans);
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* SVG safety: prevents flex ballooning across all browsers */
+/* Strict SVG safety to prevent flex ballooning */
 svg {
   flex-shrink: 0;
   max-width: 100%;
 }
 
+/* Stripe/Linear refined product card */
+.product-card {
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 0.75rem;
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.product-card:hover {
+  border-color: var(--border-strong);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+}
+
 /* Accessibility: Mandatory Reduced Motion */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {

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

@@ -9,11 +9,11 @@ export interface RootLayoutProps {
 }
 
 export default function RootLayout({ children, metadata }: RootLayoutProps) {
-  const title = metadata?.title || 'FrootKit App';
-  const description = metadata?.description || 'Built with FrootKit & Preact';
+  const title = metadata?.title || 'FrootKit Project';
+  const description = metadata?.description || 'Built with Preact and FrootKit.';
 
   return (
-    <html lang="en" class="dark">
+    <html lang="en" class="dark scroll-smooth">
       <head>
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -22,12 +22,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-slate-950 text-slate-100 min-h-screen antialiased">
+      <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/empty/src/app/page.tsx

@@ -5,21 +5,22 @@ export const metadata = {
 
 export default function HomePage() {
   return (
-    <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">
+    <main class="min-h-screen bg-[#08090a] text-zinc-100 flex items-center justify-center p-6 selection:bg-indigo-500/20 selection:text-indigo-300">
+      <div class="max-w-md w-full text-center border border-white/[0.08] bg-[#0f1117] rounded-xl p-8 shadow-2xl shadow-black/40 relative overflow-hidden">
+        <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/30 to-transparent" />
+        <div class="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/25 flex items-center justify-center mx-auto mb-4 text-indigo-400 font-medium text-sm">
           F
         </div>
-        <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>.
+        <h1 class="text-xl font-semibold text-white tracking-tight mb-2">Blank Canvas</h1>
+        <p class="text-zinc-400 text-xs mb-6 leading-relaxed">
+          Start building by editing <code class="font-mono text-indigo-400 bg-white/[0.04] border border-white/[0.08] px-1.5 py-0.5 rounded">src/app/page.tsx</code>.
         </p>
-        <div class="flex justify-center gap-3 text-xs font-medium">
+        <div class="flex justify-center gap-2.5 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-semibold hover:bg-emerald-400 transition-colors"
+            class="px-3.5 py-1.5 rounded-lg bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all shadow-sm"
           >
             Documentation
           </a>
@@ -27,7 +28,7 @@ export default function HomePage() {
             href="https://github.com/orbitnorth/frootkit"
             target="_blank"
             rel="noreferrer"
-            class="px-4 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-slate-300 hover:text-white transition-colors"
+            class="px-3.5 py-1.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-zinc-300 hover:text-white hover:bg-white/[0.08] transition-all"
           >
             GitHub
           </a>

package/templates/empty/src/styles.css

@@ -4,34 +4,32 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-  --color-brand-primary: #10b981;
-  --color-brand-hover: #34d399;
+  --color-brand-primary: #6366f1;
+  --color-brand-hover: #4f46e5;
 }
 
 :root {
   color-scheme: dark;
+  --bg-canvas: #08090a;
+  --bg-surface: #0f1117;
+  --bg-elevated: #151822;
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.16);
+  --text-primary: #f4f4f5;
+  --text-secondary: #9496a1;
+  --text-muted: #5c6370;
 }
 
 html {
-  background-color: #06090f;
-  color: #f8fafc;
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
   font-family: var(--font-sans);
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* SVG safety: prevents flex ballooning across all browsers */
 svg {
   flex-shrink: 0;
   max-width: 100%;
 }
-
-/* 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/layout.tsx

@@ -9,10 +9,10 @@ export interface RootLayoutProps {
 }
 
 export default function RootLayout({ children, metadata }: RootLayoutProps) {
-  const title = metadata?.title || 'FrootKit — The Next.js Alternative for Preact';
+  const title = metadata?.title || 'FrootKit — Next.js Alternative for Preact';
   const description =
     metadata?.description ||
-    'High-performance fullstack web application powered by Preact SSR, nested layouts, Tailwind CSS v4, and dynamic API routes.';
+    'Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, and dynamic API routes.';
 
   return (
     <html lang="en" class="dark scroll-smooth">
@@ -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/starter/src/app/page.tsx

@@ -10,58 +10,60 @@ export const metadata = {
 
 export default function HomePage() {
   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">
       <Header />
 
-      <main class="max-w-6xl mx-auto px-6 py-16 flex-1 flex flex-col justify-center">
+      <main class="max-w-6xl mx-auto px-6 py-16 sm:py-24 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 • Zero Overhead
+          <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>Next.js App Router Conventions • Zero Overhead</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">
             The Next.js Alternative Built for Speed & Simplicity.
           </h1>
 
-          <p class="text-base sm:text-lg text-slate-300 leading-relaxed mb-8 max-w-2xl">
+          <p class="text-base sm:text-lg text-zinc-400 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 gap-4">
+          <div class="flex flex-wrap items-center gap-3.5">
             <a
               href="https://frootjs.org"
               target="_blank"
               rel="noreferrer"
-              class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm"
+              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"
             >
-              Explore Documentation →
+              <span>Explore Documentation</span>
+              <span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
             </a>
             <a
               href="https://github.com/orbitnorth/frootkit"
               target="_blank"
               rel="noreferrer"
-              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"
+              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 flex items-center gap-2"
             >
-              <svg width="16" height="16" class="w-4 h-4 fill-current shrink-0" viewBox="0 0 24 24">
+              <svg style="width: 14px; height: 14px;" class="fill-current shrink-0" 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
+              <span>Star on GitHub</span>
             </a>
           </div>
         </div>
 
         <TerminalPreview />
 
-        {/* Feature Grid with Real SVG Icons */}
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {/* Feature Grid with Precision 16px SVG Icons */}
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
           <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 width="20" height="20" class="w-5 h-5 shrink-0" 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 style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
             </svg>
           </FeatureCard>
 
@@ -70,8 +72,8 @@ export default function HomePage() {
             title="Native CSS Pipeline"
             description="Zero postcss or tailwind config files required. Native Tailwind CSS v4 compiles in single-digit milliseconds."
           >
-            <svg width="20" height="20" class="w-5 h-5 shrink-0" 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 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 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
           </FeatureCard>
 
@@ -80,38 +82,44 @@ export default function HomePage() {
             title="Nested File Layouts"
             description="Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions."
           >
-            <svg width="20" height="20" class="w-5 h-5 shrink-0" 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 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>
           </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."
+            description="First-class Web Standard Request/Response handlers inside src/app/api/**/route.ts with JSON and SSE streaming."
           >
-            <svg width="20" height="20" class="w-5 h-5 shrink-0" 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 style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="16 18 22 12 16 6" />
+              <polyline points="8 6 2 12 8 18" />
             </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."
+            badge="Pure Web Standards"
+            title="Zero C++ Dependencies"
+            description="Built entirely on pure ECMAScript and Web Crypto. Clean deployments to Node.js, Bun, and Edge runners."
           >
-            <svg width="20" height="20" class="w-5 h-5 shrink-0" 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 style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="2" y1="12" x2="22" y2="12" />
+              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
             </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."
+            badge="Instant SSG"
+            title="Static Site Export"
+            description="Deterministic pre-rendering of static paths into deployable HTML assets with zero configuration."
           >
-            <svg width="20" height="20" class="w-5 h-5 shrink-0" 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 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
             </svg>
           </FeatureCard>
         </div>

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

@@ -9,19 +9,19 @@ export interface FeatureCardProps {
 
 export function FeatureCard({ badge, title, description, children }: FeatureCardProps) {
   return (
-    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 hover:border-slate-700 transition-colors">
+    <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-5 hover:border-white/[0.18] transition-all shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]">
       <div class="flex items-center justify-between mb-4">
-        <div class="w-9 h-9 rounded-lg bg-[#0f1624] border border-[#1a2333] flex items-center justify-center text-emerald-400">
+        <div class="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/25 flex items-center justify-center text-indigo-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]">
+        <span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-white/[0.04] text-zinc-300 border border-white/[0.06]">
           {badge}
         </span>
       </div>
-      <h3 class="text-base font-bold text-white mb-2">
+      <h3 class="text-sm font-semibold text-white mb-1.5">
         {title}
       </h3>
-      <p class="text-slate-400 text-sm leading-relaxed">
+      <p class="text-zinc-400 text-xs leading-relaxed">
         {description}
       </p>
     </div>

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

@@ -1,14 +1,14 @@
 export function Footer() {
   return (
-    <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">
+    <footer class="border-t border-white/[0.08] bg-[#08090a] py-8 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>
-          FrootKit © {new Date().getFullYear()} OrbitNorth LLC. MIT Licensed.
+          FrootKit © {new Date().getFullYear()} OrbitNorth LLC. Built for high performance.
         </div>
         <div class="flex items-center gap-6">
-          <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>
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-zinc-300 transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-zinc-300 transition-colors">Documentation</a>
+          <a href="/api/health" class="hover:text-zinc-300 transition-colors font-mono text-[11px]">/api/health</a>
         </div>
       </div>
     </footer>