create-frootkit 1.2.7 → 1.2.9

package/templates/blog/src/components/Newsletter.tsx

@@ -1,21 +1,23 @@
 export function Newsletter() {
   return (
-    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 sm:p-10 my-16">
+    <div id="newsletter" class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-8 sm:p-10 my-16 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] 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="max-w-xl">
-        <div class="text-xs font-mono font-medium text-emerald-400 mb-2 uppercase tracking-wide">
-          Engineering Dispatch
+        <div class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-[11px] font-medium mb-3">
+          <span class="w-1.5 h-1.5 rounded-full bg-indigo-400" />
+          <span>Engineering Dispatch</span>
         </div>
-        <h3 class="text-2xl font-bold text-white mb-2">
+        <h3 class="text-xl sm:text-2xl font-semibold text-white tracking-tight mb-2">
           Subscribe for Technical Deep Dives
         </h3>
-        <p class="text-slate-400 text-sm mb-6 leading-relaxed">
-          Bi-weekly write-ups on sub-millisecond server rendering, zero-hydration architectures, and high-performance TypeScript.
+        <p class="text-zinc-400 text-xs sm:text-sm mb-6 leading-relaxed">
+          Bi-weekly write-ups on sub-millisecond server rendering, zero-hydration architectures, and high-performance TypeScript runtime optimizations.
         </p>
 
         <form
           action="/api/posts"
           method="GET"
-          class="flex flex-col sm:flex-row gap-3 max-w-md"
+          class="flex flex-col sm:flex-row gap-2.5 max-w-md"
         >
           <label class="sr-only" for="newsletter-email">Work Email</label>
           <input
@@ -23,11 +25,11 @@ export function Newsletter() {
             type="email"
             placeholder="developer@company.com"
             required
-            class="flex-1 px-4 py-2.5 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
+            class="flex-1 px-3.5 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"
           />
           <button
             type="submit"
-            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 rounded-lg bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all text-xs shadow-sm"
           >
             Subscribe
           </button>

package/templates/blog/src/components/PostCard.tsx

@@ -3,45 +3,46 @@ import type { Post } from '../data/posts.js';
 export function PostCard({ post, featured = false }: { post: Post; featured?: boolean }) {
   if (featured) {
     return (
-      <article class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 hover:border-slate-700 transition-colors mb-10">
-        <div class="flex items-center gap-3 mb-4 text-xs font-mono">
-          <span class="text-emerald-400 font-semibold px-2.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
+      <article class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-7 sm:p-8 hover:border-white/[0.18] transition-all duration-200 mb-10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] group">
+        <div class="flex flex-wrap items-center gap-2.5 mb-4 text-xs">
+          <span class="text-indigo-400 font-medium px-2.5 py-0.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-[11px]">
             Featured • {post.category}
           </span>
-          <span class="text-slate-500">•</span>
-          <span class="text-slate-400">{post.readTime}</span>
-          <span class="text-slate-500">•</span>
-          <span class="text-slate-400">{post.date}</span>
+          <span class="text-zinc-600">•</span>
+          <span class="text-zinc-400">{post.readTime}</span>
+          <span class="text-zinc-600">•</span>
+          <span class="text-zinc-400">{post.date}</span>
         </div>
 
-        <h2 class="text-2xl sm:text-3xl font-extrabold text-white mb-4 leading-snug hover:text-emerald-400 transition-colors">
+        <h2 class="text-2xl sm:text-3xl font-semibold text-white mb-3 tracking-[-0.02em] leading-snug group-hover:text-indigo-300 transition-colors">
           <a href={`/blog/${post.slug}`}>
             {post.title}
           </a>
         </h2>
 
-        <p class="text-slate-300 text-base leading-relaxed mb-6 max-w-3xl">
+        <p class="text-zinc-400 text-sm sm:text-base leading-relaxed mb-6 max-w-3xl">
           {post.summary}
         </p>
 
-        <div class="pt-6 border-t border-[#1a2333] flex items-center justify-between">
+        <div class="pt-6 border-t border-white/[0.06] flex items-center justify-between">
           <div class="flex items-center gap-3">
             <img
               src={post.author.avatar}
               alt={post.author.name}
-              class="w-8 h-8 rounded-full object-cover border border-[#1a2333]"
+              class="w-8 h-8 rounded-full object-cover border border-white/[0.1]"
             />
             <div class="text-xs">
-              <span class="font-medium text-white block">{post.author.name}</span>
-              <span class="text-slate-500">{post.author.role}</span>
+              <span class="font-medium text-zinc-200 block">{post.author.name}</span>
+              <span class="text-zinc-500">{post.author.role}</span>
             </div>
           </div>
 
           <a
             href={`/blog/${post.slug}`}
-            class="text-emerald-400 text-xs font-semibold hover:text-emerald-300 transition-colors flex items-center gap-1"
+            class="text-zinc-200 text-xs font-medium group-hover:text-white transition-colors flex items-center gap-1.5"
           >
-            Read Article →
+            <span>Read Article</span>
+            <span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
           </a>
         </div>
       </article>
@@ -49,44 +50,45 @@ export function PostCard({ post, featured = false }: { post: Post; featured?: bo
   }
 
   return (
-    <article class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 hover:border-slate-700 transition-colors flex flex-col justify-between">
+    <article class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-5 sm:p-6 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)] group">
       <div>
-        <div class="flex items-center justify-between mb-3 text-xs font-mono">
-          <span class="text-emerald-400 font-semibold px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
+        <div class="flex items-center justify-between mb-3 text-xs">
+          <span class="text-zinc-300 font-medium px-2 py-0.5 rounded-full bg-white/[0.04] border border-white/[0.06] text-[10px]">
             {post.category}
           </span>
-          <span class="text-slate-500">{post.readTime}</span>
+          <span class="text-zinc-500 text-[11px]">{post.readTime}</span>
         </div>
 
-        <h3 class="text-lg font-bold text-white mb-3 hover:text-emerald-400 transition-colors line-clamp-2 leading-snug">
+        <h3 class="text-base font-semibold text-zinc-100 mb-2.5 group-hover:text-white transition-colors line-clamp-2 leading-snug">
           <a href={`/blog/${post.slug}`}>
             {post.title}
           </a>
         </h3>
 
-        <p class="text-slate-400 text-sm leading-relaxed mb-6 line-clamp-3">
+        <p class="text-zinc-400 text-xs leading-relaxed mb-6 line-clamp-3">
           {post.summary}
         </p>
       </div>
 
-      <div class="pt-4 border-t border-[#1a2333] flex items-center justify-between">
+      <div class="pt-4 border-t border-white/[0.06] flex items-center justify-between">
         <div class="flex items-center gap-2.5">
           <img
             src={post.author.avatar}
             alt={post.author.name}
-            class="w-6 h-6 rounded-full object-cover border border-[#1a2333]"
+            class="w-6 h-6 rounded-full object-cover border border-white/[0.1]"
           />
           <div class="text-[11px]">
-            <span class="font-medium text-slate-200 block">{post.author.name}</span>
-            <span class="text-slate-500">{post.date}</span>
+            <span class="font-medium text-zinc-300 block">{post.author.name}</span>
+            <span class="text-zinc-500">{post.date}</span>
           </div>
         </div>
 
         <a
           href={`/blog/${post.slug}`}
-          class="text-emerald-400 text-xs font-semibold hover:text-emerald-300 transition-colors"
+          class="text-xs font-medium text-zinc-400 group-hover:text-white transition-colors flex items-center gap-1"
         >
-          Read →
+          <span>Read</span>
+          <span class="text-zinc-600">→</span>
         </a>
       </div>
     </article>

package/templates/blog/src/styles.css

@@ -4,23 +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 */
+/* Strict SVG safety to prevent flex ballooning */
 svg {
   flex-shrink: 0;
   max-width: 100%;

package/templates/ecommerce/package.json

@@ -8,7 +8,7 @@
     "start": "frootkit start"
   },
   "dependencies": {
-    "frootkit": "npm:froot-kit@^1.3.2",
+    "frootkit": "npm:froot-kit@^1.3.4",
     "frootjs": "^1.0.6",
     "preact": "^11.1.0",
     "preact-render-to-string": "^6.8.2"

package/templates/ecommerce/src/app/cart/page.tsx

@@ -8,11 +8,11 @@ export const metadata = {
 
 export default function CartPage() {
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#090a0f] text-zinc-100 flex flex-col justify-between selection:bg-white/20 selection:text-white">
       <Navbar />
 
-      <main class="max-w-4xl mx-auto px-6 py-12 flex-1 w-full">
-        <h1 class="text-3xl font-extrabold text-white mb-8">Order Cart</h1>
+      <main class="max-w-3xl mx-auto px-6 py-12 flex-1 w-full">
+        <h1 class="text-2xl font-semibold text-white tracking-tight mb-6">Shopping Cart</h1>
         <CartDrawer />
       </main>
 

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

@@ -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-[#090a0f] text-zinc-100 min-h-screen antialiased selection:bg-white/20 selection:text-white font-sans">
         {children}
       </body>
     </html>

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

@@ -4,36 +4,58 @@ import { ProductCard } from '../components/ProductCard.js';
 import { Footer } from '../components/Footer.js';
 
 export const metadata = {
-  title: 'FrootStore — Hardware Instruments for Developers',
+  title: 'FrootStore — Tactile Instruments for Developers',
   description: 'Precision mechanical keyboards, studio audio, and ergonomic setups.',
 };
 
 export default function StoreHomePage() {
+  const categories = ['All Products', 'Keyboards', 'Audio', 'Peripherals', 'Desk Setup', 'Accessories'];
+
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#090a0f] text-zinc-100 flex flex-col justify-between selection:bg-white/20 selection:text-white">
       <Navbar />
 
-      <main class="max-w-6xl mx-auto px-6 py-12 flex-1 w-full">
-        {/* Collection Header */}
-        <div class="mb-12 border-b border-[#1a2333] pb-8">
-          <div class="text-xs font-mono font-medium text-emerald-400 mb-2 uppercase tracking-wide">
-            Curated Instruments
+      <main class="max-w-6xl mx-auto px-6 py-12 sm:py-16 flex-1 w-full">
+        {/* Curated Collection Hero */}
+        <div class="mb-12 border-b border-white/[0.08] pb-10">
+          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/[0.04] border border-white/[0.08] text-zinc-300 text-xs font-medium mb-4">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+            <span>Curated Hardware Collection</span>
           </div>
-          <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight mb-3">
-            Hardware Engineered for Precision
+
+          <h1 class="text-3xl sm:text-5xl font-semibold text-white tracking-[-0.03em] leading-tight mb-4">
+            Tactile Instruments for Focused Engineering.
           </h1>
-          <p class="text-slate-400 text-base max-w-2xl leading-relaxed">
-            Tactile peripherals and minimal workspace instruments designed to eliminate friction from extended coding sessions.
+
+          <p class="text-zinc-400 text-base max-w-2xl leading-relaxed">
+            Minimal workspace instruments, CNC aluminum mechanical keyboards, and planar audio drivers designed to eliminate friction from extended development sessions.
           </p>
+
+          {/* Category Filter Pills */}
+          <div class="flex flex-wrap items-center gap-2 mt-8">
+            {categories.map((c, i) => (
+              <a
+                key={c}
+                href="/#catalog"
+                class={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
+                  i === 0
+                    ? 'bg-white text-zinc-950 shadow-sm'
+                    : 'bg-white/[0.04] border border-white/[0.08] text-zinc-400 hover:text-white hover:bg-white/[0.08]'
+                }`}
+              >
+                {c}
+              </a>
+            ))}
+          </div>
         </div>
 
         {/* Catalog Section Header */}
         <div id="catalog" class="mb-6 flex items-center justify-between">
-          <h2 class="text-xs font-mono uppercase tracking-wider text-slate-400 font-semibold">
-            All Products
+          <h2 class="text-xs uppercase tracking-wider text-zinc-400 font-semibold">
+            Featured Instruments
           </h2>
-          <span class="text-xs font-mono text-slate-500">
-            {PRODUCTS.length} instruments available
+          <span class="text-xs text-zinc-500 tabular-nums">
+            {PRODUCTS.length} products available
           </span>
         </div>
 

package/templates/ecommerce/src/app/products/[id]/page.tsx

@@ -11,73 +11,82 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
   const product = PRODUCTS.find((p) => p.id === id) || PRODUCTS[0]!;
 
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#090a0f] text-zinc-100 flex flex-col justify-between selection:bg-white/20 selection:text-white">
       <Navbar />
 
       <main class="max-w-6xl mx-auto px-6 py-12 flex-1 w-full">
         <a
           href="/"
-          class="inline-flex items-center gap-2 text-xs font-mono text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
+          class="inline-flex items-center gap-2 text-xs text-zinc-400 hover:text-white mb-8 transition-colors"
         >
-          ← Back to catalog
+          <span>←</span>
+          <span>Back to catalog</span>
         </a>
 
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
-          <div class="rounded-xl border border-[#1a2333] overflow-hidden bg-[#0a0f18] aspect-[4/3]">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
+          {/* Product Gallery Image */}
+          <div class="rounded-2xl border border-white/[0.08] overflow-hidden bg-[#0f1117] aspect-[4/3] shadow-2xl relative">
             <img
               src={product.image}
               alt={product.name}
               class="w-full h-full object-cover"
             />
+            <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent pointer-events-none" />
           </div>
 
+          {/* Details & Purchase */}
           <div>
-            <div class="flex items-center gap-3 mb-3 text-xs font-mono">
-              <span class="px-2.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold">
+            <div class="flex items-center gap-3 mb-3 text-xs">
+              <span class="px-2.5 py-0.5 rounded-full bg-white/[0.04] text-zinc-300 border border-white/[0.08] font-medium text-[11px] uppercase tracking-wider">
                 {product.category}
               </span>
-              <span class="text-slate-500">•</span>
-              <span class="text-slate-300 font-semibold">
-                {product.rating.toFixed(1)} / 5.0 ({product.reviewsCount} reviews)
-              </span>
+              <span class="text-zinc-600">•</span>
+              <div class="flex items-center gap-1.5 text-zinc-400 font-medium">
+                <span class="text-amber-400">★</span>
+                <span class="text-zinc-200 tabular-nums">{product.rating.toFixed(1)}</span>
+                <span class="text-zinc-500 tabular-nums">({product.reviewsCount} verified reviews)</span>
+              </div>
             </div>
 
-            <h1 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight mb-4">
+            <h1 class="text-3xl sm:text-4xl font-semibold text-white tracking-[-0.025em] mb-4">
               {product.name}
             </h1>
 
-            <div class="text-3xl font-bold text-white mb-6 font-mono">
+            <div class="text-3xl font-semibold text-white mb-6 tabular-nums">
               ${product.price.toFixed(2)}
             </div>
 
-            <p class="text-slate-300 text-base leading-relaxed mb-8">
+            <p class="text-zinc-300 text-sm sm:text-base leading-relaxed mb-8">
               {product.description}
             </p>
 
-            <div class="border-t border-[#1a2333] pt-6 mb-8">
-              <h2 class="text-xs font-mono uppercase tracking-wider font-semibold text-slate-400 mb-4">
-                Engineering Specifications
+            <div class="border-t border-white/[0.08] pt-6 mb-8">
+              <h2 class="text-xs uppercase tracking-wider font-semibold text-zinc-400 mb-4">
+                Hardware Specifications
               </h2>
-              <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-300 font-mono">
+              <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-zinc-300">
                 {product.features.map((f) => (
                   <li key={f} class="flex items-center gap-2">
-                    <span class="text-emerald-400 font-bold">✓</span>
+                    <span class="w-1.5 h-1.5 rounded-full bg-zinc-400 shrink-0" />
                     <span>{f}</span>
                   </li>
                 ))}
               </ul>
             </div>
 
-            <div class="flex items-center gap-4">
+            <div class="flex flex-col sm:flex-row sm:items-center gap-4 pt-2">
               <a
                 href="/cart"
-                class="flex-1 py-3 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-center text-sm hover:bg-emerald-400 transition-colors"
+                class="flex-1 py-3 px-6 rounded-xl bg-white text-zinc-950 font-medium text-center text-sm hover:bg-zinc-200 transition-all shadow-md flex items-center justify-center gap-2"
               >
-                Add to Cart • ${product.price.toFixed(2)}
+                <span>Add to Cart</span>
+                <span class="text-zinc-500">•</span>
+                <span class="tabular-nums font-semibold">${product.price.toFixed(2)}</span>
               </a>
-              <span class="text-xs text-slate-400 font-mono">
-                {product.inStock ? 'In Stock (Ships in 24h)' : 'Backorder'}
-              </span>
+              <div class="flex items-center gap-2 text-xs text-zinc-400 px-3">
+                <span class="w-2 h-2 rounded-full bg-emerald-400" />
+                <span>{product.inStock ? 'In Stock · Ships in 24h' : 'Backorder'}</span>
+              </div>
             </div>
           </div>
         </div>

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

@@ -11,52 +11,55 @@ export function CartDrawer() {
   const total = subtotal + shipping;
 
   return (
-    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 sm:p-8">
-      <h2 class="text-lg font-bold text-white mb-6 flex items-center justify-between border-b border-[#1a2333] pb-4">
+    <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-6 sm:p-8 shadow-xl">
+      <h2 class="text-base font-semibold text-white mb-6 flex items-center justify-between border-b border-white/[0.08] pb-4">
         <span>Order Summary</span>
-        <span class="text-xs font-mono text-emerald-400 font-semibold">{cartItems.length} items</span>
+        <span class="text-xs text-zinc-400 font-medium px-2 py-0.5 rounded-full bg-white/[0.04] border border-white/[0.06] tabular-nums">
+          {cartItems.length} items
+        </span>
       </h2>
 
       <div class="space-y-4 mb-6">
         {cartItems.map(({ product, quantity }) => (
-          <div key={product.id} class="flex items-center gap-4 pb-4 border-b border-[#1a2333]">
+          <div key={product.id} class="flex items-center gap-4 pb-4 border-b border-white/[0.06]">
             <img
               src={product.image}
               alt={product.name}
-              class="w-14 h-14 rounded-lg object-cover bg-[#06090f] border border-[#1a2333]"
+              class="w-14 h-14 rounded-lg object-cover bg-zinc-950/40 border border-white/[0.08]"
             />
             <div class="flex-1 min-w-0">
-              <h4 class="text-sm font-semibold text-white truncate">{product.name}</h4>
-              <div class="text-xs text-slate-400 font-mono mt-0.5">Qty: {quantity} × ${product.price.toFixed(2)}</div>
+              <h4 class="text-xs sm:text-sm font-medium text-zinc-100 truncate">{product.name}</h4>
+              <div class="text-xs text-zinc-400 mt-0.5 tabular-nums">Qty: {quantity} × ${product.price.toFixed(2)}</div>
             </div>
-            <div class="font-bold text-sm text-white font-mono">
+            <div class="font-medium text-xs sm:text-sm text-white tabular-nums">
               ${(product.price * quantity).toFixed(2)}
             </div>
           </div>
         ))}
       </div>
 
-      <div class="space-y-2.5 text-xs text-slate-300 mb-6 font-mono">
+      <div class="space-y-2.5 text-xs text-zinc-300 mb-6">
         <div class="flex justify-between">
-          <span class="text-slate-400">Subtotal</span>
-          <span class="text-white font-bold">${subtotal.toFixed(2)}</span>
+          <span class="text-zinc-400">Subtotal</span>
+          <span class="text-white font-medium tabular-nums">${subtotal.toFixed(2)}</span>
         </div>
         <div class="flex justify-between">
-          <span class="text-slate-400">Standard Shipping</span>
-          <span class="text-emerald-400 font-semibold">{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
+          <span class="text-zinc-400">Standard Shipping</span>
+          <span class="text-emerald-400 font-medium">{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
         </div>
-        <div class="pt-3 border-t border-[#1a2333] flex justify-between text-sm text-white font-bold">
+        <div class="pt-3 border-t border-white/[0.08] flex justify-between text-sm text-white font-semibold">
           <span>Total</span>
-          <span class="text-emerald-400 text-base font-mono font-black">${total.toFixed(2)}</span>
+          <span class="text-base text-white tabular-nums">${total.toFixed(2)}</span>
         </div>
       </div>
 
       <form action="/api/checkout" method="POST">
         <button
           type="submit"
-          class="w-full py-3 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors"
+          class="w-full py-3 rounded-lg bg-white text-zinc-950 font-medium text-xs hover:bg-zinc-200 transition-all shadow-sm flex items-center justify-center gap-2 group"
         >
-          Proceed to Checkout →
+          <span>Proceed to Checkout</span>
+          <span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
         </button>
       </form>
     </div>

package/templates/ecommerce/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-[#090a0f] 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>
-          FrootStore © {new Date().getFullYear()} OrbitNorth LLC. MIT Licensed.
+          FrootStore © {new Date().getFullYear()} OrbitNorth LLC. Built with FrootKit.
         </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/products" class="hover:text-white transition-colors">Products 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/products" class="hover:text-zinc-300 transition-colors font-mono text-[11px]">/api/products</a>
         </div>
       </div>
     </footer>

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

@@ -1,32 +1,39 @@
 export function Navbar() {
   return (
-    <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-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 width="16" height="16" class="w-4 h-4 shrink-0" 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" />
+    <header class="border-b border-white/[0.08] bg-[#090a0f]/80 backdrop-blur-md sticky top-0 z-50">
+      <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
+        <a href="/" class="flex items-center gap-2.5 font-semibold text-zinc-100 text-sm tracking-tight group">
+          <div class="w-7 h-7 rounded-md bg-white/[0.06] border border-white/[0.1] flex items-center justify-center text-zinc-200 group-hover:border-white/[0.2] transition-colors shrink-0">
+            <svg style="width: 14px; height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <path d="M16 10a4 4 0 0 1-8 0" />
             </svg>
           </div>
-          <span>Froot<span class="text-emerald-400">Store</span></span>
+          <span>Froot<span class="text-zinc-400 font-normal">Store</span></span>
         </a>
 
-        <nav class="flex items-center gap-6 text-sm font-medium">
-          <a href="/" class="text-slate-300 hover:text-white transition-colors">
+        <nav class="flex items-center gap-5 text-xs font-medium">
+          <a href="/#catalog" class="text-zinc-400 hover:text-zinc-200 transition-colors">
             Catalog
           </a>
-          <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">
+          <a
+            href="/api/products"
+            class="text-zinc-400 hover:text-zinc-200 font-mono text-[11px] px-2 py-0.5 rounded bg-white/[0.03] border border-white/[0.06] transition-colors"
+          >
             /api/products
           </a>
           <a
             href="/cart"
-            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"
+            class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/[0.05] border border-white/[0.08] text-zinc-200 hover:text-white hover:bg-white/[0.08] transition-all text-xs font-medium"
           >
-            <svg width="14" height="14" class="w-3.5 h-3.5 shrink-0" 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 style="width: 13px; height: 13px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <path d="M16 10a4 4 0 0 1-8 0" />
             </svg>
             <span>Cart</span>
-            <span class="px-1.5 py-0.2 rounded bg-emerald-500 text-slate-950 font-bold text-[10px]">
+            <span class="px-1.5 py-0.2 rounded-full bg-white text-zinc-950 font-bold text-[10px] tabular-nums">
               2
             </span>
           </a>