create-frootkit 1.2.1 → 1.2.3

package/templates/blog/src/app/blog/[slug]/page.tsx

@@ -11,20 +11,20 @@ export default function BlogPostPage({ params }: { params?: { slug?: string } })
   const post = POSTS.find((p) => p.slug === slug) || POSTS[0]!;
 
   return (
-    <div class="min-h-screen flex flex-col justify-between">
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <Navbar />
 
       <main class="max-w-3xl mx-auto px-6 py-12 flex-1 w-full">
         <a
           href="/"
-          class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
+          class="inline-flex items-center gap-2 text-xs font-mono text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
         >
-          &larr; Back to all articles
+          &larr; Back to articles
         </a>
 
         <header class="mb-10">
           <div class="flex items-center gap-3 mb-4 text-xs font-mono">
-            <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-medium">
+            <span class="px-2.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold">
               {post.category}
             </span>
             <span class="text-slate-500">&bull;</span>
@@ -37,11 +37,11 @@ export default function BlogPostPage({ params }: { params?: { slug?: string } })
             {post.title}
           </h1>
 
-          <div class="flex items-center gap-4 p-4 rounded-2xl bg-slate-900/50 border border-slate-800">
+          <div class="flex items-center gap-4 p-4 rounded-xl bg-[#0a0f18] border border-[#1a2333]">
             <img
               src={post.author.avatar}
               alt={post.author.name}
-              class="w-12 h-12 rounded-full object-cover ring-2 ring-emerald-500/30"
+              class="w-10 h-10 rounded-full object-cover border border-[#1a2333]"
             />
             <div>
               <div class="font-bold text-white text-sm">{post.author.name}</div>
@@ -50,17 +50,17 @@ export default function BlogPostPage({ params }: { params?: { slug?: string } })
           </div>
         </header>
 
-        <article class="prose prose-invert prose-emerald max-w-none space-y-6 text-slate-300 leading-relaxed text-base sm:text-lg">
+        <article class="prose max-w-none space-y-6 text-slate-300 leading-relaxed text-base sm:text-lg">
           {post.content.map((paragraph, idx) => (
             <p key={idx}>{paragraph}</p>
           ))}
         </article>
 
-        <div class="mt-12 pt-8 border-t border-slate-800/80 flex flex-wrap gap-2">
+        <div class="mt-12 pt-8 border-t border-[#1a2333] flex flex-wrap gap-2">
           {post.tags.map((tag) => (
             <span
               key={tag}
-              class="px-3 py-1 rounded-lg bg-slate-900 text-xs text-slate-300 border border-slate-800"
+              class="px-2.5 py-1 rounded bg-[#0a0f18] text-xs font-mono text-slate-400 border border-[#1a2333]"
             >
               #{tag}
             </span>

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

@@ -5,32 +5,46 @@ import { Newsletter } from '../components/Newsletter.js';
 import { Footer } from '../components/Footer.js';
 
 export const metadata = {
-  title: 'FrootBlog — Insights on Modern Web Performance',
+  title: 'FrootBlog — Engineering Articles & Systems Architecture',
   description: 'Deep dives into Preact SSR, fullstack TypeScript, and native styling.',
 };
 
 export default function BlogHomePage() {
+  const [featuredPost, ...recentPosts] = POSTS;
+
   return (
-    <div class="min-h-screen flex flex-col justify-between">
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <Navbar />
 
       <main class="max-w-5xl mx-auto px-6 py-12 flex-1 w-full">
-        {/* Header Banner */}
-        <div class="mb-12 text-center sm:text-left">
-          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs font-semibold text-emerald-400 mb-4">
+        {/* Header Block */}
+        <div class="mb-10">
+          <div class="text-xs font-mono font-medium text-emerald-400 mb-2 uppercase tracking-wide">
             Engineering Journal
           </div>
-          <h1 class="text-4xl sm:text-5xl font-black text-white tracking-tight mb-4">
-            Stories, Architecture & Tutorials
+          <h1 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight mb-3">
+            Systems Architecture & Web Engineering
           </h1>
-          <p class="text-slate-400 text-base sm:text-lg max-w-2xl">
-            Exploring the bleeding edge of sub-millisecond server rendering, zero-overhead client apps, and modern developer velocity.
+          <p class="text-slate-400 text-base max-w-2xl leading-relaxed">
+            Exploring sub-millisecond server rendering, monomorphic dispatch trees, and zero-hydration web architectures.
           </p>
         </div>
 
-        {/* Post Grid */}
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {POSTS.map((post) => (
+        {/* Featured Dominant Article */}
+        {featuredPost && <PostCard post={featuredPost} featured={true} />}
+
+        {/* Recent Articles Grid */}
+        <div class="mb-8 flex items-center justify-between border-b border-[#1a2333] pb-3">
+          <h2 class="text-xs font-mono uppercase tracking-wider text-slate-400 font-semibold">
+            All Articles
+          </h2>
+          <span class="text-xs font-mono text-slate-500">
+            {recentPosts.length + 1} publications
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {recentPosts.map((post) => (
             <PostCard key={post.slug} post={post} />
           ))}
         </div>

package/templates/blog/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-5xl 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-5xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 font-mono">
         <div>
           FrootBlog &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/posts" class="hover:text-slate-400 transition-colors">Posts 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/posts" class="hover:text-white transition-colors">Posts API</a>
         </div>
       </div>
     </footer>

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

@@ -1,11 +1,13 @@
 export function Navbar() {
   return (
-    <header class="border-b border-slate-800/80 bg-slate-950/60 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-5xl 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-cyan-400 flex items-center justify-center text-slate-950 font-black text-sm">
-            F
-          </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="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+            </svg>
+          </div>
           <span>Froot<span class="text-emerald-400">Blog</span></span>
         </a>
 
@@ -13,7 +15,7 @@ export function Navbar() {
           <a href="/" class="text-slate-300 hover:text-white transition-colors">
             Articles
           </a>
-          <a href="/api/posts" class="text-slate-400 hover:text-emerald-400 transition-colors font-mono text-xs px-2 py-1 rounded bg-slate-900 border border-slate-800">
+          <a href="/api/posts" 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/posts
           </a>
           <a

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

@@ -1,27 +1,33 @@
 export function Newsletter() {
   return (
-    <div class="rounded-3xl border border-emerald-500/20 bg-gradient-to-b from-emerald-950/20 to-slate-900/40 p-8 sm:p-12 text-center my-16 backdrop-blur-sm">
-      <div class="max-w-xl mx-auto">
-        <h3 class="text-2xl sm:text-3xl font-bold text-white mb-3">
-          Subscribe to the FrootKit Dispatch
+    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 sm:p-10 my-16">
+      <div class="max-w-xl">
+        <div class="text-xs font-mono font-medium text-emerald-400 mb-2 uppercase tracking-wide">
+          Engineering Dispatch
+        </div>
+        <h3 class="text-2xl font-bold text-white mb-2">
+          Subscribe for Technical Deep Dives
         </h3>
-        <p class="text-slate-400 text-sm mb-8">
-          Weekly deep-dives into modern web architectures, performance optimization, and fullstack TypeScript.
+        <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>
+
         <form
           action="/api/posts"
           method="GET"
-          class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
+          class="flex flex-col sm:flex-row gap-3 max-w-md"
         >
+          <label class="sr-only" for="newsletter-email">Work Email</label>
           <input
+            id="newsletter-email"
             type="email"
-            placeholder="colleague@company.com"
+            placeholder="developer@company.com"
             required
-            class="flex-1 px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+            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"
           />
           <button
             type="submit"
-            class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-colors text-sm"
+            class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm"
           >
             Subscribe
           </button>

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

@@ -1,35 +1,82 @@
 import type { Post } from '../data/posts.js';
 
-export function PostCard({ post }: { post: Post }) {
+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">
+            Featured &bull; {post.category}
+          </span>
+          <span class="text-slate-500">&bull;</span>
+          <span class="text-slate-400">{post.readTime}</span>
+          <span class="text-slate-500">&bull;</span>
+          <span class="text-slate-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">
+          <a href={`/blog/${post.slug}`}>
+            {post.title}
+          </a>
+        </h2>
+
+        <p class="text-slate-300 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="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]"
+            />
+            <div class="text-xs">
+              <span class="font-medium text-white block">{post.author.name}</span>
+              <span class="text-slate-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"
+          >
+            Read Article &rarr;
+          </a>
+        </div>
+      </article>
+    );
+  }
+
   return (
-    <article 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 flex flex-col justify-between">
+    <article class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 hover:border-slate-700 transition-colors flex flex-col justify-between">
       <div>
-        <div class="flex items-center justify-between mb-3 text-xs">
-          <span class="font-mono text-emerald-400 font-medium px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+        <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">
             {post.category}
           </span>
-          <span class="text-slate-400 font-mono">{post.readTime}</span>
+          <span class="text-slate-500">{post.readTime}</span>
         </div>
 
-        <h2 class="text-xl font-bold text-white mb-3 group-hover:text-emerald-400 transition-colors line-clamp-2">
+        <h3 class="text-lg font-bold text-white mb-3 hover:text-emerald-400 transition-colors line-clamp-2 leading-snug">
           <a href={`/blog/${post.slug}`}>
             {post.title}
           </a>
-        </h2>
+        </h3>
 
-        <p class="text-slate-300 text-sm leading-relaxed mb-6 line-clamp-3">
+        <p class="text-slate-400 text-sm leading-relaxed mb-6 line-clamp-3">
           {post.summary}
         </p>
       </div>
 
-      <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
-        <div class="flex items-center gap-3">
+      <div class="pt-4 border-t border-[#1a2333] flex items-center justify-between">
+        <div class="flex items-center gap-2.5">
           <img
             src={post.author.avatar}
             alt={post.author.name}
-            class="w-7 h-7 rounded-full object-cover ring-1 ring-slate-700"
+            class="w-6 h-6 rounded-full object-cover border border-[#1a2333]"
           />
-          <div class="text-xs">
+          <div class="text-[11px]">
             <span class="font-medium text-slate-200 block">{post.author.name}</span>
             <span class="text-slate-500">{post.date}</span>
           </div>
@@ -37,7 +84,7 @@ export function PostCard({ post }: { post: Post }) {
 
         <a
           href={`/blog/${post.slug}`}
-          class="text-emerald-400 text-xs font-semibold hover:underline flex items-center gap-1 group-hover:translate-x-0.5 transition-transform"
+          class="text-emerald-400 text-xs font-semibold hover:text-emerald-300 transition-colors"
         >
           Read &rarr;
         </a>

package/templates/blog/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/ecommerce/src/app/cart/page.tsx

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

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

@@ -4,46 +4,37 @@ import { ProductCard } from '../components/ProductCard.js';
 import { Footer } from '../components/Footer.js';
 
 export const metadata = {
-  title: 'FrootStore — Curated Workspace & Developer Hardware',
+  title: 'FrootStore — Hardware Instruments for Developers',
   description: 'Precision mechanical keyboards, studio audio, and ergonomic setups.',
 };
 
 export default function StoreHomePage() {
   return (
-    <div class="min-h-screen flex flex-col justify-between">
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <Navbar />
 
       <main class="max-w-6xl mx-auto px-6 py-12 flex-1 w-full">
-        {/* Hero Banner */}
-        <div class="rounded-3xl border border-slate-800 bg-gradient-to-r from-slate-900 via-slate-950 to-emerald-950/30 p-8 sm:p-12 mb-12 relative overflow-hidden">
-          <div class="max-w-2xl relative z-10">
-            <span class="inline-block px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs font-semibold text-emerald-400 mb-4">
-              Autumn 2026 Collection
-            </span>
-            <h1 class="text-4xl sm:text-5xl font-black text-white tracking-tight mb-4">
-              Engineered for Focus. Crafted for Craft.
-            </h1>
-            <p class="text-slate-300 text-base sm:text-lg mb-8 leading-relaxed">
-              Curated minimal workspace hardware designed to elevate your daily development workflow with tactile precision.
-            </p>
-            <div class="flex items-center gap-4">
-              <a
-                href="#catalog"
-                class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20 text-sm"
-              >
-                Browse All Equipment
-              </a>
-              <span class="text-xs text-slate-400 font-mono">Free shipping over $100</span>
-            </div>
+        {/* 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
           </div>
+          <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight mb-3">
+            Hardware Engineered for Precision
+          </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>
         </div>
 
-        {/* Catalog Section */}
-        <div id="catalog" class="mb-8 flex items-center justify-between">
-          <div>
-            <h2 class="text-2xl font-bold text-white">All Products</h2>
-            <p class="text-xs text-slate-400">Showing {PRODUCTS.length} curated instruments</p>
-          </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>
+          <span class="text-xs font-mono text-slate-500">
+            {PRODUCTS.length} instruments available
+          </span>
         </div>
 
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

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

@@ -11,19 +11,19 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
   const product = PRODUCTS.find((p) => p.id === id) || PRODUCTS[0]!;
 
   return (
-    <div class="min-h-screen flex flex-col justify-between">
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <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-sm text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
+          class="inline-flex items-center gap-2 text-xs font-mono text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
         >
           &larr; Back to catalog
         </a>
 
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
-          <div class="rounded-3xl border border-slate-800 overflow-hidden bg-slate-950 aspect-[4/3]">
+          <div class="rounded-xl border border-[#1a2333] overflow-hidden bg-[#0a0f18] aspect-[4/3]">
             <img
               src={product.image}
               alt={product.name}
@@ -32,20 +32,21 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
           </div>
 
           <div>
-            <div class="flex items-center gap-2 mb-3">
-              <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono font-medium">
+            <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">
                 {product.category}
               </span>
-              <span class="text-amber-400 text-xs font-bold">
-                &#9733; {product.rating} ({product.reviewsCount} reviews)
+              <span class="text-slate-500">&bull;</span>
+              <span class="text-slate-300 font-semibold">
+                {product.rating.toFixed(1)} / 5.0 ({product.reviewsCount} reviews)
               </span>
             </div>
 
-            <h1 class="text-3xl sm:text-4xl font-black text-white tracking-tight mb-4">
+            <h1 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight mb-4">
               {product.name}
             </h1>
 
-            <div class="text-3xl font-black text-emerald-400 mb-6 font-mono">
+            <div class="text-3xl font-bold text-white mb-6 font-mono">
               ${product.price.toFixed(2)}
             </div>
 
@@ -53,14 +54,14 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
               {product.description}
             </p>
 
-            <div class="border-t border-slate-800 pt-6 mb-8">
-              <h3 class="text-xs uppercase font-mono font-bold text-slate-400 tracking-wider mb-4">
-                Key Specifications
-              </h3>
-              <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-300">
+            <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
+              </h2>
+              <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-300 font-mono">
                 {product.features.map((f) => (
                   <li key={f} class="flex items-center gap-2">
-                    <span class="text-emerald-400 font-bold">&#10003;</span>
+                    <span class="text-emerald-400 font-bold">&check;</span>
                     <span>{f}</span>
                   </li>
                 ))}
@@ -70,12 +71,12 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
             <div class="flex items-center gap-4">
               <a
                 href="/cart"
-                class="flex-1 py-3.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-center text-sm hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
+                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"
               >
                 Add to Cart &bull; ${product.price.toFixed(2)}
               </a>
-              <span class="text-xs text-slate-500 font-mono">
-                {product.inStock ? 'In Stock (Ready to Ship)' : 'Backorder'}
+              <span class="text-xs text-slate-400 font-mono">
+                {product.inStock ? 'In Stock (Ships in 24h)' : 'Backorder'}
               </span>
             </div>
           </div>

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

@@ -11,23 +11,23 @@ export function CartDrawer() {
   const total = subtotal + shipping;
 
   return (
-    <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 backdrop-blur-md">
-      <h2 class="text-lg font-bold text-white mb-4 flex items-center justify-between">
+    <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">
         <span>Order Summary</span>
         <span class="text-xs font-mono text-emerald-400 font-semibold">{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-3 pb-3 border-b border-slate-800/60">
+          <div key={product.id} class="flex items-center gap-4 pb-4 border-b border-[#1a2333]">
             <img
               src={product.image}
               alt={product.name}
-              class="w-12 h-12 rounded-lg object-cover bg-slate-950"
+              class="w-14 h-14 rounded-lg object-cover bg-[#06090f] border border-[#1a2333]"
             />
             <div class="flex-1 min-w-0">
-              <h4 class="text-xs font-semibold text-white truncate">{product.name}</h4>
-              <div class="text-[11px] text-slate-400">Qty: {quantity} &times; ${product.price}</div>
+              <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} &times; ${product.price.toFixed(2)}</div>
             </div>
             <div class="font-bold text-sm text-white font-mono">
               ${(product.price * quantity).toFixed(2)}
@@ -36,25 +36,25 @@ export function CartDrawer() {
         ))}
       </div>
 
-      <div class="space-y-2 text-xs text-slate-400 mb-6 font-mono">
+      <div class="space-y-2.5 text-xs text-slate-300 mb-6 font-mono">
         <div class="flex justify-between">
-          <span>Subtotal</span>
+          <span class="text-slate-400">Subtotal</span>
           <span class="text-white font-bold">${subtotal.toFixed(2)}</span>
         </div>
         <div class="flex justify-between">
-          <span>Estimated Shipping</span>
+          <span class="text-slate-400">Standard Shipping</span>
           <span class="text-emerald-400 font-semibold">{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
         </div>
-        <div class="pt-3 border-t border-slate-800 flex justify-between text-sm text-white font-bold">
+        <div class="pt-3 border-t border-[#1a2333] flex justify-between text-sm text-white font-bold">
           <span>Total</span>
-          <span class="text-emerald-400 text-base font-black">${total.toFixed(2)}</span>
+          <span class="text-emerald-400 text-base font-mono font-black">${total.toFixed(2)}</span>
         </div>
       </div>
 
       <form action="/api/checkout" method="POST">
         <button
           type="submit"
-          class="w-full py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold text-sm hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
+          class="w-full py-3 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors"
         >
           Proceed to Checkout &rarr;
         </button>

package/templates/ecommerce/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>
           FrootStore &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/products" class="hover:text-slate-400 transition-colors">Products 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/products" class="hover:text-white transition-colors">Products API</a>
         </div>
       </div>
     </footer>