diff --git a/apps/portfolio/app/preview/[documentId]/page.tsx b/apps/portfolio/app/preview/[documentId]/page.tsx
index 9176a2b5..127bd7a3 100644
--- a/apps/portfolio/app/preview/[documentId]/page.tsx
+++ b/apps/portfolio/app/preview/[documentId]/page.tsx
@@ -35,7 +35,7 @@ export async function generateMetadata({
     // Fail silently
   }
   return {
-    title: "Private Portfolio Preview | VeriWorkly",
+    title: "Private Portfolio Preview",
     robots: { index: false, follow: false },
   };
 }
diff --git a/apps/portfolio/app/templates/[id]/preview/page.tsx b/apps/portfolio/app/templates/[id]/preview/page.tsx
index c9c9ec2d..8a2b474a 100644
--- a/apps/portfolio/app/templates/[id]/preview/page.tsx
+++ b/apps/portfolio/app/templates/[id]/preview/page.tsx
@@ -1,6 +1,8 @@
-import { notFound } from "next/navigation";
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
 import { DraftPreview } from "@/components/DraftPreview";
+
 import { isTemplateId, templates } from "@/templates/catalog/templates";
 
 export async function generateMetadata({
@@ -9,16 +11,16 @@ export async function generateMetadata({
   params: Promise<{ id: string }>;
 }): Promise<Metadata> {
   const { id } = await params;
+
   const template = templates.find((t) => t.id === id);
 
-  if (!template) {
+  if (!template)
     return {
-      title: "Template Preview | VeriWorkly",
+      title: "Template Preview",
       robots: { index: true, follow: true },
     };
-  }
 
-  const title = `${template.name} Template Live Preview | VeriWorkly`;
+  const title = `${template.name} Template Live Preview`;
   const description = `See a live interactive preview of the ${template.name} template. Switch styles, layouts, and visualize your portfolio.`;
 
   const imageUrl = `/og/templates/preview/${template.id}-preview-page-og.png`;
@@ -59,6 +61,8 @@ export async function generateMetadata({
 
 export default async function Preview({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
+
   if (!isTemplateId(id)) notFound();
+
   return <DraftPreview templateId={id} />;
 }
diff --git a/apps/portfolio/components/PortfolioPublicFooter.tsx b/apps/portfolio/components/PortfolioPublicFooter.tsx
index 5a7b7d48..e29f31c0 100644
--- a/apps/portfolio/components/PortfolioPublicFooter.tsx
+++ b/apps/portfolio/components/PortfolioPublicFooter.tsx
@@ -32,7 +32,7 @@ const products = [
 
 const PortfolioPublicFooter = () => {
   return (
-    <footer className="bg-[#11110f] dark:bg-panel text-[#f5f4ef]">
+    <footer className="dark:bg-panel bg-[#11110f] text-[#f5f4ef]">
       <div className="mx-auto grid w-[min(1360px,calc(100%-48px))] gap-12 py-16 max-sm:w-[min(calc(100%-30px),1360px)] lg:grid-cols-[1.1fr_1.4fr]">
         <div>
           <Link href="/" className="flex items-center gap-3 text-sm font-medium tracking-[-.04em]">
diff --git a/apps/portfolio/components/dashboard/editor/SectionEditor.tsx b/apps/portfolio/components/dashboard/editor/SectionEditor.tsx
index e2e1c198..157b35d3 100644
--- a/apps/portfolio/components/dashboard/editor/SectionEditor.tsx
+++ b/apps/portfolio/components/dashboard/editor/SectionEditor.tsx
@@ -44,6 +44,30 @@ export function SectionEditor({ section }: SectionEditorProps) {
           The contact section uses your public email and availability from Introduction.
         </p>
       ) : null}
+      {section.type === "writing" ? (
+        <div className="border-line bg-panel mb-4 rounded-xl border p-4">
+          <label className="flex cursor-pointer items-start gap-3 select-none">
+            <input
+              type="checkbox"
+              className="border-line bg-paper text-accent focus:ring-accent mt-0.5 rounded"
+              checked={section.settings?.showNewsletter !== false}
+              onChange={(e) =>
+                updateSection(section.id, {
+                  settings: { ...section.settings, showNewsletter: e.target.checked },
+                })
+              }
+            />
+            <div>
+              <span className="text-ink block text-sm font-semibold">
+                Include newsletter signup
+              </span>
+              <span className="text-muted text-xs">
+                Display a subscription card at the bottom of your writing section.
+              </span>
+            </div>
+          </label>
+        </div>
+      ) : null}
       <div className="space-y-3">
         {section.items.map((item, index) => (
           <div
diff --git a/apps/portfolio/components/landing/CtaSection.tsx b/apps/portfolio/components/landing/CtaSection.tsx
index ba71e421..8ed1d166 100644
--- a/apps/portfolio/components/landing/CtaSection.tsx
+++ b/apps/portfolio/components/landing/CtaSection.tsx
@@ -10,7 +10,7 @@ const CtaSection = () => {
       <div className="mx-auto w-[min(1360px,calc(100%-48px))] max-sm:w-[min(calc(100%-30px),1360px)]">
         <div
           data-reveal
-          className="bg-[#11110f] dark:bg-panel relative grid min-h-170 place-content-center overflow-hidden rounded-[28px] px-8 py-16 text-center text-[#f5f4ef]"
+          className="dark:bg-panel relative grid min-h-170 place-content-center overflow-hidden rounded-[28px] bg-[#11110f] px-8 py-16 text-center text-[#f5f4ef]"
         >
           <div
             aria-hidden="true"
@@ -19,7 +19,7 @@ const CtaSection = () => {
             className="bg-accent absolute top-1/2 left-1/2 h-[42vw] w-[42vw] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-25 blur-[100px]"
           />
 
-          <p className="relative z-2 mb-5 text-[0.72rem] font-bold tracking-[0.16em] text-[#93c5fd] dark:text-accent uppercase">
+          <p className="dark:text-accent relative z-2 mb-5 text-[0.72rem] font-bold tracking-[0.16em] text-[#93c5fd] uppercase">
             You already did the work.
           </p>
 
diff --git a/apps/portfolio/components/landing/FaqSection.tsx b/apps/portfolio/components/landing/FaqSection.tsx
index 37896ee2..a506a784 100644
--- a/apps/portfolio/components/landing/FaqSection.tsx
+++ b/apps/portfolio/components/landing/FaqSection.tsx
@@ -33,7 +33,7 @@ const FaqSection = () => {
         <div className="mt-10">
           <Link
             href="/faq"
-            className="border-ink-2 bg-ink-2 hover:text-ink-2 inline-flex min-h-12 items-center justify-center gap-2 rounded-full border-2 px-6 text-sm font-bold text-white transition-all duration-300 hover:-translate-y-1 hover:bg-transparent active:scale-[0.97]"
+            className="border-ink-2 bg-ink-2 hover:text-ink-2 text-paper inline-flex min-h-12 items-center justify-center gap-2 rounded-full border-2 px-6 text-sm font-bold transition-all duration-300 hover:-translate-y-1 hover:bg-transparent active:scale-[0.97]"
           >
             Browse all FAQs <ArrowRight size={15} />
           </Link>
diff --git a/apps/portfolio/components/landing/FeatureGridSection.tsx b/apps/portfolio/components/landing/FeatureGridSection.tsx
index 021e5a44..47556075 100644
--- a/apps/portfolio/components/landing/FeatureGridSection.tsx
+++ b/apps/portfolio/components/landing/FeatureGridSection.tsx
@@ -2,7 +2,7 @@ import { Check, Globe2, MousePointer2, PencilLine, Search, Sparkles } from "luci
 
 const FeatureGridSection = () => {
   return (
-    <section className="bg-[#11110f] dark:bg-paper-2 py-32 text-[#f4f2e9] md:py-48">
+    <section className="dark:bg-paper-2 bg-[#11110f] py-32 text-[#f4f2e9] md:py-48">
       <div className="mx-auto w-[min(1360px,calc(100%-48px))] max-sm:w-[min(calc(100%-30px),1360px)]">
         <div className="mb-18 space-y-8" data-reveal>
           <p className="mb-5 text-[0.72rem] font-bold tracking-[0.16em] uppercase">
@@ -18,7 +18,7 @@ const FeatureGridSection = () => {
         <div className="grid grid-flow-dense auto-rows-[430px] grid-cols-12 gap-3 max-lg:auto-rows-auto max-lg:grid-cols-1">
           <article
             data-reveal
-            className="hover:border-accent relative col-span-7 flex overflow-hidden rounded-3xl border border-white/10 bg-[#191916] dark:bg-panel p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
+            className="hover:border-accent dark:bg-panel relative col-span-7 flex overflow-hidden rounded-3xl border border-white/10 bg-[#191916] p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
           >
             <div className="flex items-start gap-4">
               <PencilLine size={20} aria-hidden="true" />
@@ -34,7 +34,7 @@ const FeatureGridSection = () => {
               </div>
             </div>
 
-            <div className="text-[#11110f] absolute right-8 -bottom-16.25 left-[10%] -rotate-2 rounded-t-2xl bg-[#f4f2e9] p-6 max-sm:right-6 max-sm:left-6">
+            <div className="absolute right-8 -bottom-16.25 left-[10%] -rotate-2 rounded-t-2xl bg-[#f4f2e9] p-6 text-[#11110f] max-sm:right-6 max-sm:left-6">
               <span className="mb-2 flex justify-between text-[9px] font-bold uppercase">
                 Headline <span>64 / 80</span>
               </span>
@@ -61,9 +61,9 @@ const FeatureGridSection = () => {
 
           <article
             data-reveal
-            className="bg-accent border-accent/25 relative col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border p-8 text-accent-ink transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
+            className="bg-accent border-accent/25 text-accent-ink relative col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
           >
-            <div className="self-end rounded-full border border-accent-ink/25 p-6">
+            <div className="border-accent-ink/25 self-end rounded-full border p-6">
               <Globe2 size={88} strokeWidth={1} aria-hidden="true" />
             </div>
 
@@ -72,11 +72,11 @@ const FeatureGridSection = () => {
                 A subdomain with your name on it
               </h3>
 
-              <p className="mt-3 text-xs leading-7 text-accent-ink/70">
+              <p className="text-accent-ink/70 mt-3 text-xs leading-7">
                 Claim a clean address the moment you publish.
               </p>
 
-              <div className="mt-5 inline-flex items-center gap-2 rounded-full border border-accent-ink/25 bg-accent-ink/15 px-3 py-2 text-[10px] font-bold">
+              <div className="border-accent-ink/25 bg-accent-ink/15 mt-5 inline-flex items-center gap-2 rounded-full border px-3 py-2 text-[10px] font-bold">
                 <span className="size-1.75 rounded-full bg-[#50d672]" aria-hidden="true" />
                 gautam.veriworkly.com
               </div>
@@ -85,7 +85,7 @@ const FeatureGridSection = () => {
 
           <article
             data-reveal
-            className="hover:border-accent col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border border-white/10 bg-[#191916] dark:bg-panel p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
+            className="hover:border-accent dark:bg-panel col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border border-white/10 bg-[#191916] p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
           >
             <div>
               <Search size={20} aria-hidden="true" />
@@ -99,12 +99,12 @@ const FeatureGridSection = () => {
               </p>
             </div>
 
-            <div className="text-[#11110f] rotate-2 rounded-2xl bg-white p-5">
+            <div className="rotate-2 rounded-2xl bg-white p-5 text-[#11110f]">
               <span className="text-[10px] text-[#237b38]">gautam.veriworkly.com</span>
 
               <b className="text-accent mt-2 block text-base">Gautam Raj - Builder of VeriWorkly</b>
 
-              <p className="text-[#11110f]/60 mt-1 text-xs leading-6">
+              <p className="mt-1 text-xs leading-6 text-[#11110f]/60">
                 Portfolio builder, resume tools, publishing workflows, and product experiments.
               </p>
             </div>
@@ -112,7 +112,7 @@ const FeatureGridSection = () => {
 
           <article
             data-reveal
-            className="hover:border-accent col-span-7 flex items-end gap-3 overflow-hidden rounded-3xl border border-white/10 bg-[#191916] dark:bg-panel p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-130 max-sm:flex-wrap"
+            className="hover:border-accent dark:bg-panel col-span-7 flex items-end gap-3 overflow-hidden rounded-3xl border border-white/10 bg-[#191916] p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-130 max-sm:flex-wrap"
           >
             <div className="w-[35%] self-start max-sm:w-full">
               <Sparkles size={20} aria-hidden="true" />
@@ -126,12 +126,12 @@ const FeatureGridSection = () => {
               </p>
             </div>
 
-            <div className="text-[#11110f] flex h-3/4 w-[27%] -rotate-3 flex-col justify-between rounded-2xl bg-[#f2efe5] p-5 transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
+            <div className="flex h-3/4 w-[27%] -rotate-3 flex-col justify-between rounded-2xl bg-[#f2efe5] p-5 text-[#11110f] transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
               <span className="text-[9px] font-bold uppercase">Signal</span>
               <strong className="text-6xl tracking-[-0.08em]">Aa</strong>
             </div>
 
-            <div className="bg-accent flex h-3/4 w-[27%] rotate-3 flex-col justify-between rounded-2xl p-5 text-accent-ink transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
+            <div className="bg-accent text-accent-ink flex h-3/4 w-[27%] rotate-3 flex-col justify-between rounded-2xl p-5 transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
               <span className="text-[9px] font-bold uppercase">Atelier</span>
               <strong className="text-6xl tracking-[-0.08em]">Aa</strong>
             </div>
diff --git a/apps/portfolio/components/landing/HeroPortfolio.tsx b/apps/portfolio/components/landing/HeroPortfolio.tsx
index 3dc2a1a5..bc4796ff 100644
--- a/apps/portfolio/components/landing/HeroPortfolio.tsx
+++ b/apps/portfolio/components/landing/HeroPortfolio.tsx
@@ -8,25 +8,25 @@ const HeroPortfolio = () => {
       data-tilt-base="rotate(-2deg)"
       className="relative z-4 mx-auto mt-14 w-[min(1080px,84vw)] -rotate-2 transition-transform duration-300 max-lg:w-[92vw]"
     >
-      <div className="border-ink-2 overflow-hidden rounded-3xl border-8 bg-panel shadow-[25px_30px_0_rgba(17,17,15,0.13)] max-sm:rounded-2xl max-sm:border-[3px]">
-        <div className="border-ink-2 flex h-12 items-center justify-between gap-4 border-b-2 bg-panel px-4 text-[10px] font-medium">
+      <div className="border-ink-2 bg-panel overflow-hidden rounded-3xl border-8 shadow-[25px_30px_0_rgba(17,17,15,0.13)] max-sm:rounded-2xl max-sm:border-[3px]">
+        <div className="border-ink-2 bg-panel flex h-12 items-center justify-between gap-4 border-b-2 px-4 text-[10px] font-medium">
           <span className="flex gap-1.5">
             <i className="border-ink-2 size-2 rounded-full border" aria-hidden="true" />
             <i className="border-ink-2 size-2 rounded-full border" aria-hidden="true" />
             <i className="border-ink-2 size-2 rounded-full border" aria-hidden="true" />
           </span>
 
-          <span className="rounded-full bg-paper px-6 py-1.5 max-sm:hidden">
+          <span className="bg-paper rounded-full px-6 py-1.5 max-sm:hidden">
             gautam.veriworkly.com
           </span>
 
           <span className="bg-accent size-2 rounded-full" aria-hidden="true" />
         </div>
 
-        <div className="relative h-135 overflow-hidden bg-paper-2 p-8 max-lg:h-105 max-lg:p-5 max-sm:h-92.5">
+        <div className="bg-paper-2 relative h-135 overflow-hidden p-8 max-lg:h-105 max-lg:p-5 max-sm:h-92.5">
           <div className="text-ink-2/55 flex items-center justify-between text-[10px] font-medium tracking-[0.16em] uppercase">
             <span>Builder console</span>
-            <span className="rounded-full bg-panel px-3 py-1">Live draft</span>
+            <span className="bg-panel rounded-full px-3 py-1">Live draft</span>
           </div>
 
           <div className="mt-12 grid gap-8 max-lg:mt-8 lg:grid-cols-[1.02fr_0.98fr]">
@@ -42,7 +42,7 @@ const HeroPortfolio = () => {
               <div className="mt-8 grid max-w-lg gap-3 sm:grid-cols-3">
                 {["Projects", "SEO title", "Subdomain"].map((item, index) => (
                   <div
-                    className="border-ink-2/15 rounded-2xl border bg-panel/72 p-4 text-left shadow-[6px_7px_0_rgba(17,17,15,0.08)]"
+                    className="border-ink-2/15 bg-panel/72 rounded-2xl border p-4 text-left shadow-[6px_7px_0_rgba(17,17,15,0.08)]"
                     key={item}
                   >
                     <span className="text-accent text-[10px] font-medium" aria-hidden="true">
@@ -61,7 +61,7 @@ const HeroPortfolio = () => {
                 aria-hidden="true"
               />
 
-              <div className="text-ink-2 relative z-2 rounded-3xl bg-panel p-5">
+              <div className="text-ink-2 bg-panel relative z-2 rounded-3xl p-5">
                 <div className="flex items-center justify-between text-[10px] font-medium uppercase">
                   <span>VeriWorkly</span>
                   <span>Signal</span>
@@ -92,7 +92,7 @@ const HeroPortfolio = () => {
 
       <div
         data-parallax="0.08"
-        className="border-ink-2 absolute bottom-[-8%] -left-4 flex h-fit items-center gap-2.5 rounded-2xl border-2 bg-panel px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:bottom-0 sm:-left-2 lg:top-[26%] lg:bottom-auto lg:left-[-4%] xl:left-[-8%]"
+        className="border-ink-2 bg-panel absolute bottom-[-8%] -left-4 flex h-fit items-center gap-2.5 rounded-2xl border-2 px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:bottom-0 sm:-left-2 lg:top-[26%] lg:bottom-auto lg:left-[-4%] xl:left-[-8%]"
       >
         <WandSparkles size={17} />
 
@@ -103,7 +103,7 @@ const HeroPortfolio = () => {
 
       <div
         data-parallax="-0.07"
-        className="border-ink-2 absolute top-[-15%] right-[-2%] z-10 flex h-fit items-center gap-2.5 rounded-2xl border-2 bg-panel px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:top-[28%] sm:right-[-2%] lg:top-auto lg:right-[-7%] lg:bottom-[25%]"
+        className="border-ink-2 bg-panel absolute top-[-15%] right-[-2%] z-10 flex h-fit items-center gap-2.5 rounded-2xl border-2 px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:top-[28%] sm:right-[-2%] lg:top-auto lg:right-[-7%] lg:bottom-[25%]"
       >
         <span className="size-1.75 rounded-full bg-[#50d672] shadow-[0_0_0_4px_rgba(80,214,114,0.18)]" />
         <span>
diff --git a/apps/portfolio/components/landing/HeroSection.tsx b/apps/portfolio/components/landing/HeroSection.tsx
index e2cbf801..39745123 100644
--- a/apps/portfolio/components/landing/HeroSection.tsx
+++ b/apps/portfolio/components/landing/HeroSection.tsx
@@ -8,9 +8,7 @@ const action =
 
 const HeroSection = () => {
   return (
-    <section
-      className="relative flex min-h-svh flex-col items-center overflow-hidden bg-[radial-gradient(circle_at_var(--pointer-x,78%)_var(--pointer-y,18%),rgba(37,99,235,0.24),transparent_31%),radial-gradient(circle_at_10%_70%,rgba(255,255,255,0.12),transparent_28%),var(--color-paper-2)] px-6 pt-52 pb-28 max-sm:px-4 md:pt-44 md:pb-20"
-    >
+    <section className="relative flex min-h-svh flex-col items-center overflow-hidden bg-[radial-gradient(circle_at_var(--pointer-x,78%)_var(--pointer-y,18%),rgba(37,99,235,0.24),transparent_31%),radial-gradient(circle_at_10%_70%,rgba(255,255,255,0.12),transparent_28%),var(--color-paper-2)] px-6 pt-52 pb-28 max-sm:px-4 md:pt-44 md:pb-20">
       <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(#11110f_0.7px,transparent_0.7px)] mask-[linear-gradient(to_bottom,black,transparent_75%)] bg-size-[7px_7px] opacity-[0.18]" />
       <div className="border-ink-2/10 absolute top-[-30vw] left-[-15vw] h-[54vw] w-[54vw] rounded-full border" />
       <div className="border-ink-2/10 absolute top-[15vw] right-[-33vw] h-[45vw] w-[45vw] rounded-full border" />
@@ -41,7 +39,7 @@ const HeroSection = () => {
 
           <Link
             href="/templates"
-            className={`${action} border-ink-2/20 text-ink-2 border bg-panel/65`}
+            className={`${action} border-ink-2/20 text-ink-2 bg-panel/65 border`}
           >
             Check live templates <ArrowDownRight size={16} aria-hidden="true" />
           </Link>
diff --git a/apps/portfolio/components/landing/SeoSection.tsx b/apps/portfolio/components/landing/SeoSection.tsx
index a4d4086f..9a6d419e 100644
--- a/apps/portfolio/components/landing/SeoSection.tsx
+++ b/apps/portfolio/components/landing/SeoSection.tsx
@@ -49,7 +49,7 @@ const SeoSection = () => {
           <article
             data-reveal
             key={topic.title}
-            className="border-ink-2/15 rounded-4xl border bg-panel/72 p-7 shadow-[10px_12px_0_rgba(37,99,235,0.08)]"
+            className="border-ink-2/15 bg-panel/72 rounded-4xl border p-7 shadow-[10px_12px_0_rgba(37,99,235,0.08)]"
           >
             <span className="text-accent text-xs font-medium" aria-hidden="true">
               0{index + 1}
@@ -67,7 +67,7 @@ const SeoSection = () => {
           {proofPoints.map((point) => (
             <div
               key={point.id}
-              className="border-ink-2/12 bg-ink-2 flex items-center gap-3 rounded-2xl border px-4 py-4 text-sm font-medium text-paper"
+              className="border-ink-2/12 bg-ink-2 text-paper flex items-center gap-3 rounded-2xl border px-4 py-4 text-sm font-medium"
             >
               <Check className="size-4 text-[#93c5fd] dark:text-[#2563eb]" aria-hidden="true" />
               {point.text}
diff --git a/apps/portfolio/components/landing/TemplateLinksSection.tsx b/apps/portfolio/components/landing/TemplateLinksSection.tsx
index 64708cd1..19e8e1e4 100644
--- a/apps/portfolio/components/landing/TemplateLinksSection.tsx
+++ b/apps/portfolio/components/landing/TemplateLinksSection.tsx
@@ -32,7 +32,7 @@ const TemplateLinksSection = () => {
               <Link
                 key={template.id}
                 href={`/templates/${template.id}`}
-                className="group hover:text-[#11110f] flex items-center justify-between rounded-2xl border border-white/15 bg-white/10 px-4 py-3 text-sm font-bold transition hover:bg-white"
+                className="group flex items-center justify-between rounded-2xl border border-white/15 bg-white/10 px-4 py-3 text-sm font-bold transition hover:bg-white hover:text-[#11110f]"
               >
                 {template.name}
                 <span className="text-xs font-bold opacity-65">{template.mood}</span>
@@ -40,7 +40,7 @@ const TemplateLinksSection = () => {
             ))}
           </div>
 
-          <Link className={`${action} text-[#11110f] mt-8 bg-white`} href="/templates">
+          <Link className={`${action} mt-8 bg-white text-[#11110f]`} href="/templates">
             Browse all templates <ArrowRight size={16} aria-hidden="true" />
           </Link>
         </div>
@@ -64,14 +64,14 @@ const TemplateLinksSection = () => {
               <div className="mt-5 flex flex-wrap gap-3">
                 <Link
                   href={`/templates/${template.id}/preview`}
-                  className={`${action} bg-[#11110f] min-h-11 text-white hover:bg-neutral-800`}
+                  className={`${action} min-h-11 bg-[#11110f] text-white hover:bg-neutral-800`}
                 >
                   Full page review <ExternalLink size={15} aria-hidden="true" />
                 </Link>
 
                 <Link
                   href={`/templates/${template.id}`}
-                  className={`${action} text-[#11110f] min-h-11 border border-white/35 bg-white`}
+                  className={`${action} min-h-11 border border-white/35 bg-white text-[#11110f]`}
                 >
                   Template details <ArrowRight size={15} aria-hidden="true" />
                 </Link>
diff --git a/apps/portfolio/components/pricing/ComparisonTable.tsx b/apps/portfolio/components/pricing/ComparisonTable.tsx
index 1afa5663..c877d7c8 100644
--- a/apps/portfolio/components/pricing/ComparisonTable.tsx
+++ b/apps/portfolio/components/pricing/ComparisonTable.tsx
@@ -18,7 +18,7 @@ const ComparisonTable = () => {
   const checkoutUrl = `${siteConfig.links.app}/checkout?productKey=bundle&interval=annual`;
 
   return (
-    <section className="bg-[#171717] dark:bg-paper-2 text-[#f5f4ef] relative py-24 lg:py-32">
+    <section className="dark:bg-paper-2 relative bg-[#171717] py-24 text-[#f5f4ef] lg:py-32">
       <div className="pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(rgba(255,255,255,0.12)_0.8px,transparent_0.8px)] bg-size-[24px_24px] opacity-40" />
       <div className="relative z-10 mx-auto w-[min(1160px,calc(100%-32px))]">
         <div className="grid items-end gap-8 lg:grid-cols-[1fr_.65fr]">
@@ -32,7 +32,7 @@ const ComparisonTable = () => {
             </h2>
           </div>
 
-          <p className="text-[#f5f4ef]/70 border-t border-white/20 pt-5 text-base leading-7">
+          <p className="border-t border-white/20 pt-5 text-base leading-7 text-[#f5f4ef]/70">
             Core document building remains free. Upgrade when you need publishing, focused AI
             assistance, or both.
           </p>
@@ -45,7 +45,7 @@ const ComparisonTable = () => {
         >
           <div className="min-w-[760px]">
             <div
-              className="text-[#f5f4ef]/85 grid grid-cols-[minmax(250px,1fr)_repeat(4,130px)] bg-white/10 px-6 py-5 text-xs font-bold tracking-[0.15em] uppercase"
+              className="grid grid-cols-[minmax(250px,1fr)_repeat(4,130px)] bg-white/10 px-6 py-5 text-xs font-bold tracking-[0.15em] text-[#f5f4ef]/85 uppercase"
               role="row"
             >
               <span role="columnheader">What&apos;s included</span>
@@ -73,7 +73,7 @@ const ComparisonTable = () => {
                 key={label}
                 className="grid grid-cols-[minmax(250px,1fr)_repeat(4,130px)] items-center border-t border-white/10 px-6 py-4.5 text-xs tracking-normal transition-colors hover:bg-white/5 sm:text-base"
               >
-                <span className="text-[#f5f4ef]/90 font-medium" role="cell">
+                <span className="font-medium text-[#f5f4ef]/90" role="cell">
                   {label}
                 </span>
 
diff --git a/apps/portfolio/features/templates/components/SharedTemplateFeatures.tsx b/apps/portfolio/features/templates/components/SharedTemplateFeatures.tsx
index 0789e8da..8e39019d 100644
--- a/apps/portfolio/features/templates/components/SharedTemplateFeatures.tsx
+++ b/apps/portfolio/features/templates/components/SharedTemplateFeatures.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { CheckCircle2 } from "lucide-react";
+
 import { templatesShell } from "../constants";
 
 interface SharedFeature {
@@ -13,26 +13,31 @@ const sharedFeaturesList: SharedFeature[] = [
     description:
       "Write your case studies, biography, and credentials once. Keep 100% of your career data intact when changing styles.",
   },
+
   {
     title: "Instant Live Previews",
     description:
       "Compare structural layouts with a live-rendered preview using your real personal data before switching.",
   },
+
   {
     title: "Responsive by Design",
     description:
       "Every template features fluid grids and pure semantic HTML that render flawlessly across desktop and mobile screens.",
   },
+
   {
     title: "SEO & Crawler Optimization",
     description:
       "Built-in structured schemas, clean headings, customizable meta tags, and open graph cards for search engine rankings.",
   },
+
   {
     title: "VeriWorkly Subdomains",
     description:
       "Publish your portfolio in seconds to a professional, secure SSL-certified 'yourname.veriworkly.com' address.",
   },
+
   {
     title: "Private Draft Workflow",
     description:
@@ -42,7 +47,7 @@ const sharedFeaturesList: SharedFeature[] = [
 
 const SharedTemplateFeatures = () => {
   return (
-    <section className="bg-ink relative overflow-hidden py-24 text-white md:py-32">
+    <section className="dark:bg-paper-2 relative overflow-hidden bg-[#11110f] py-24 text-[#f5f4ef] md:py-32">
       <div className="pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.08),transparent_50%)]" />
       <div className="pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(rgba(255,255,255,0.02)_0.8px,transparent_0.8px)] bg-size-[24px_24px] opacity-25" />
 
@@ -59,33 +64,32 @@ const SharedTemplateFeatures = () => {
             The engine stays <span className="text-blue-400">reliable.</span>
           </h2>
 
-          <p className="text-paper/60 mt-6 max-w-md text-sm leading-6">
+          <p className="mt-6 max-w-md text-sm leading-6 text-[#f5f4ef]/60">
             All VeriWorkly portfolio templates share a unified data engine. You can customize layout
             styles, subdomains, and SEO metadata while preserving 100% of your career data, case
             studies, and bio across layout switches without coding.
           </p>
         </div>
 
-        <div>
-          <ul className="grid gap-4 sm:grid-cols-2" role="list">
-            {sharedFeaturesList.map(({ title, description }) => (
-              <li
-                key={title}
-                className="group flex flex-col justify-between rounded-3xl border border-white/2 p-6 transition-all duration-300 hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/4"
-              >
-                <div>
-                  <div className="flex items-center gap-3">
-                    <CheckCircle2 className="size-5 shrink-0 text-blue-400 transition-transform duration-300 group-hover:scale-110" />
-                    <h3 className="text-base font-bold tracking-tight text-white">{title}</h3>
-                  </div>
-                  <p className="text-paper/70 mt-3.5 text-xs leading-5 font-normal">
-                    {description}
-                  </p>
+        <ul className="grid gap-4 sm:grid-cols-2" role="list">
+          {sharedFeaturesList.map(({ title, description }) => (
+            <li
+              key={title}
+              className="group flex flex-col justify-between rounded-3xl border border-white/2 p-6 transition-all duration-300 hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/4"
+            >
+              <div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle2 className="size-5 shrink-0 text-blue-400 transition-transform duration-300 group-hover:scale-110" />
+                  <h3 className="text-base font-bold tracking-tight text-white">{title}</h3>
                 </div>
-              </li>
-            ))}
-          </ul>
-        </div>
+
+                <p className="mt-3.5 text-xs leading-5 font-normal text-[#f5f4ef]/70">
+                  {description}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
       </div>
     </section>
   );
diff --git a/apps/portfolio/features/templates/components/TemplateBenefits.tsx b/apps/portfolio/features/templates/components/TemplateBenefits.tsx
index fe6186ed..522a073b 100644
--- a/apps/portfolio/features/templates/components/TemplateBenefits.tsx
+++ b/apps/portfolio/features/templates/components/TemplateBenefits.tsx
@@ -1,6 +1,6 @@
-import React from "react";
 import type { LucideIcon } from "lucide-react";
 import { LayoutTemplate, Search, Sparkles } from "lucide-react";
+
 import { templatesShell } from "../constants";
 
 const benefits: Array<{ icon: LucideIcon; title: string; description: string; tag: string }> = [
@@ -11,6 +11,7 @@ const benefits: Array<{ icon: LucideIcon; title: string; description: string; ta
     description:
       "Choose styles that align with your industry. Use Signal's fast, high-density grid for engineering and technical work, or Atelier's warm editorial margins for visual storytelling and writing.",
   },
+
   {
     icon: Search,
     tag: "AEO & GEO Ready",
@@ -18,6 +19,7 @@ const benefits: Array<{ icon: LucideIcon; title: string; description: string; ta
     description:
       "Every template serves semantic HTML, optimized title/meta descriptions, and integrated JSON-LD schema markup to guarantee clean indexing and citation discovery by search engines and AI bots.",
   },
+
   {
     icon: LayoutTemplate,
     tag: "Zero Redundancy",
@@ -37,10 +39,12 @@ const TemplateBenefits = () => {
           <p className="border-line bg-panel/60 inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-bold tracking-[0.12em] uppercase backdrop-blur">
             Why VeriWorkly
           </p>
+
           <h2 className="text-ink mt-6 text-[clamp(2.2rem,5vw,3.6rem)] leading-none font-bold tracking-tighter">
             Engineered for visibility, <br />
             designed for <span className="text-accent">distinction.</span>
           </h2>
+
           <p className="text-muted mt-5 max-w-2xl text-base leading-7">
             Traditional builders force you to sacrifice search engine discovery for layout
             customization. VeriWorkly portfolios combine semantic, AI-readable code architecture
@@ -57,11 +61,14 @@ const TemplateBenefits = () => {
                     <span className="text-accent text-[10px] font-bold tracking-widest uppercase">
                       {tag}
                     </span>
+
                     <div className="border-line dark:bg-panel flex size-10 items-center justify-center rounded-full border bg-white/80 shadow-sm">
                       <Icon className="text-accent size-4.5" />
                     </div>
                   </div>
+
                   <h3 className="text-ink mt-8 text-2xl font-bold tracking-tight">{title}</h3>
+
                   <p className="text-muted mt-4 text-sm leading-6">{description}</p>
                 </div>
               </article>
diff --git a/apps/portfolio/features/templates/components/TemplateBestFit.tsx b/apps/portfolio/features/templates/components/TemplateBestFit.tsx
index af437a68..3248328c 100644
--- a/apps/portfolio/features/templates/components/TemplateBestFit.tsx
+++ b/apps/portfolio/features/templates/components/TemplateBestFit.tsx
@@ -3,38 +3,43 @@ import type { TemplateSummary } from "@/templates/catalog/templates";
 import { templatesShell } from "../constants";
 import type { TemplateDetails } from "../data/template-details";
 
-export function TemplateBestFit({
+const TemplateBestFit = ({
   template,
   details,
 }: {
   template: TemplateSummary;
   details: TemplateDetails;
-}) {
+}) => {
   return (
-    <section className="bg-ink-2 py-24 text-white md:py-32">
+    <section className="dark:bg-paper-2 bg-[#11110f] py-24 text-[#f5f4ef] md:py-32">
       <div className={`${templatesShell} grid gap-10 lg:grid-cols-[0.8fr_1.2fr]`}>
         <div>
-          <p className="mb-5 text-[0.72rem] font-bold tracking-[0.16em] text-[#93c5fd] uppercase">
+          <p className="dark:text-accent mb-5 text-[0.72rem] font-bold tracking-[0.16em] text-[#93c5fd] uppercase">
             Best fit
           </p>
-          <h2 className="max-w-2xl text-[clamp(3rem,6vw,6rem)] leading-[0.88] font-bold tracking-[-0.08em]">
+
+          <h2 className="max-w-2xl text-[clamp(3rem,6vw,6rem)] leading-none tracking-tighter">
             Use {template.name} when the portfolio needs this kind of reader.
           </h2>
         </div>
+
         <div className="grid gap-3 sm:grid-cols-2">
           {details.bestFor.map((item) => (
             <div
-              className="rounded-3xl border border-white/10 bg-white/4 p-5 text-sm leading-6 font-bold"
               key={item}
+              className="rounded-3xl border border-white/10 bg-white/4 p-5 text-sm leading-6 font-semibold"
             >
               {item}
             </div>
           ))}
-          <div className="bg-accent border-accent rounded-3xl border p-5 text-sm leading-6 font-bold sm:col-span-2">
+
+          <div className="bg-accent border-accent text-accent-ink rounded-3xl border p-5 text-sm leading-6 font-semibold sm:col-span-2">
             Motion direction: {details.motion}
           </div>
         </div>
       </div>
     </section>
   );
-}
+};
+
+export default TemplateBestFit;
diff --git a/apps/portfolio/features/templates/components/TemplateCatalog.tsx b/apps/portfolio/features/templates/components/TemplateCatalog.tsx
index 424b8f0d..36f816c9 100644
--- a/apps/portfolio/features/templates/components/TemplateCatalog.tsx
+++ b/apps/portfolio/features/templates/components/TemplateCatalog.tsx
@@ -12,7 +12,7 @@ const TemplateCatalog = ({ templates }: { templates: TemplateSummary[] }) => {
     <section className={`${templatesShell} grid gap-8 pb-24`}>
       {templates.map((template, index) => (
         <article
-          className="border-ink-2 grid gap-6 rounded-4xl border-2 bg-white/55 p-4 shadow-[14px_16px_0_rgba(37,99,235,0.12)] lg:grid-cols-[minmax(0,1fr)_24rem]"
+          className="border-ink-2 bg-panel/55 grid gap-6 rounded-4xl border-2 p-4 shadow-[14px_16px_0_rgba(37,99,235,0.12)] lg:grid-cols-[minmax(0,1fr)_24rem] dark:border-white/15"
           key={template.id}
         >
           <PortfolioTemplatePreviewFrame
@@ -46,14 +46,14 @@ const TemplateCatalog = ({ templates }: { templates: TemplateSummary[] }) => {
             <div className="mt-auto grid gap-3 pt-8">
               <Link
                 href={`/templates/${template.id}`}
-                className={`${templateAction} bg-ink-2 text-white`}
+                className={`${templateAction} bg-ink-2 text-paper`}
               >
                 Review template details <ArrowRight size={15} />
               </Link>
 
               <Link
                 href={`/templates/${template.id}/preview`}
-                className={`${templateAction} border-ink-2/15 text-ink-2 border bg-white`}
+                className={`${templateAction} border-ink-2/15 text-ink-2 bg-panel border`}
               >
                 Open full page preview <ExternalLink size={15} />
               </Link>
diff --git a/apps/portfolio/features/templates/components/TemplateCta.tsx b/apps/portfolio/features/templates/components/TemplateCta.tsx
index 8812e8a8..8c08a51f 100644
--- a/apps/portfolio/features/templates/components/TemplateCta.tsx
+++ b/apps/portfolio/features/templates/components/TemplateCta.tsx
@@ -5,18 +5,20 @@ import type { TemplateSummary } from "@/templates/catalog/templates";
 
 import { templatesShell } from "../constants";
 
-export function TemplateCta({ template }: { template: TemplateSummary }) {
+const TemplateCta = ({ template }: { template: TemplateSummary }) => {
   return (
     <section className={`${templatesShell} py-24`}>
-      <div className="border-ink-2 grid gap-8 rounded-4xl border-2 bg-white p-8 shadow-[14px_16px_0_rgba(37,99,235,0.12)] lg:grid-cols-[1fr_auto] lg:items-center">
+      <div className="border-ink-2 bg-panel grid gap-8 rounded-4xl border-2 p-8 shadow-[14px_16px_0_rgba(37,99,235,0.12)] lg:grid-cols-[1fr_auto] lg:items-center dark:border-white/15">
         <div>
           <p className="text-accent text-xs font-bold tracking-[0.16em] uppercase">
             Ready to build
           </p>
-          <h2 className="mt-4 max-w-3xl text-[clamp(2.5rem,5vw,5rem)] leading-[0.88] font-bold tracking-[-0.08em]">
+
+          <h2 className="mt-4 max-w-3xl text-[clamp(2.5rem,5vw,5rem)] leading-none tracking-tighter">
             Start with {template.name}, then switch anytime.
           </h2>
         </div>
+
         <Link
           className="bg-accent inline-flex min-h-12 items-center justify-center gap-2 rounded-full px-6 text-sm font-bold text-white transition duration-300 hover:-translate-y-1"
           href="/dashboard"
@@ -26,4 +28,6 @@ export function TemplateCta({ template }: { template: TemplateSummary }) {
       </div>
     </section>
   );
-}
+};
+
+export default TemplateCta;
diff --git a/apps/portfolio/features/templates/components/TemplateDesignNote.tsx b/apps/portfolio/features/templates/components/TemplateDesignNote.tsx
new file mode 100644
index 00000000..35e9c914
--- /dev/null
+++ b/apps/portfolio/features/templates/components/TemplateDesignNote.tsx
@@ -0,0 +1,47 @@
+import Image from "next/image";
+
+const TemplateDesignNote = () => {
+  return (
+    <section className="mx-auto mb-16 w-[min(1280px,calc(100%-48px))] max-sm:w-[min(calc(100%-30px),1280px)]">
+      <div className="border-ink-2 bg-panel/70 relative overflow-hidden rounded-3xl border-2 p-6 shadow-[10px_12px_0_rgba(37,99,235,0.06)] md:p-10 dark:border-white/12">
+        <div className="bg-accent/5 pointer-events-none absolute top-0 right-0 h-32 w-32 rounded-bl-full" />
+
+        <div className="max-w-3xl">
+          <span className="text-accent text-[11px] font-bold tracking-[0.16em] uppercase">
+            A Note on Design Taste
+          </span>
+
+          <h3 className="text-ink-2 mt-4 text-2xl leading-tight font-bold tracking-[-0.04em] md:text-3xl">
+            No cards-inside-cards slop. Just clean presentation.
+          </h3>
+
+          <p className="text-ink-2/70 mt-4 text-sm leading-7">
+            Most website builders overwhelm your content with heavy drop shadows, overdesigned card
+            patterns, and generic layout noise. We designed VeriWorkly templates with a strict
+            typographic focus: wide editorial margins, high-contrast readability, and balanced line
+            lengths. Your accomplishments are the star; the template is just the stage.
+          </p>
+
+          <div className="mt-8 flex items-center gap-3.5">
+            <div className="border-ink flex h-9 w-9 items-center justify-center rounded-full border text-xs font-bold text-white shadow-md">
+              <Image
+                priority
+                width={28}
+                height={28}
+                alt="VeriWorkly Logo"
+                src="/veriworkly-logo.png"
+              />
+            </div>
+
+            <div>
+              <p className="text-ink-2 text-xs font-bold">VeriWorkly Team</p>
+              <p className="text-ink-2/80 text-[10px]">Crafted with care 💝</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TemplateDesignNote;
diff --git a/apps/portfolio/features/templates/components/TemplateDetailCards.tsx b/apps/portfolio/features/templates/components/TemplateDetailCards.tsx
index 0c0a2a18..04052c3e 100644
--- a/apps/portfolio/features/templates/components/TemplateDetailCards.tsx
+++ b/apps/portfolio/features/templates/components/TemplateDetailCards.tsx
@@ -1,25 +1,10 @@
 import type { ReactNode } from "react";
+
 import { Palette, Search, Type } from "lucide-react";
 
-import { templatesShell } from "../constants";
 import type { TemplateDetails } from "../data/template-details";
 
-export function TemplateDetailCards({ details }: { details: TemplateDetails }) {
-  return (
-    <section className={`${templatesShell} grid gap-4 pb-24 lg:grid-cols-3`}>
-      <DetailCard icon={<Type className="text-accent size-5" />} title="Typography">
-        {details.fonts}
-      </DetailCard>
-      <DetailCard icon={<Palette className="text-accent size-5" />} title="Visual system">
-        {details.palette}
-      </DetailCard>
-      <DetailCard icon={<Search className="text-accent size-5" />} title="SEO structure">
-        Clear headings, project sections, metadata controls, and a public preview path make this
-        template easier to understand and share.
-      </DetailCard>
-    </section>
-  );
-}
+import { templatesShell } from "../constants";
 
 function DetailCard({
   icon,
@@ -31,10 +16,31 @@ function DetailCard({
   children: ReactNode;
 }) {
   return (
-    <article className="border-ink-2/15 rounded-3xl border bg-white p-6">
+    <article className="border-ink-2/15 bg-panel rounded-3xl border p-6">
       {icon}
       <h3 className="mt-8 text-3xl font-bold tracking-[-0.06em]">{title}</h3>
       <p className="text-ink-2/60 mt-4 text-sm leading-7">{children}</p>
     </article>
   );
 }
+
+const TemplateDetailCards = ({ details }: { details: TemplateDetails }) => {
+  return (
+    <section className={`${templatesShell} grid gap-4 pb-24 lg:grid-cols-3`}>
+      <DetailCard icon={<Type className="text-accent size-5" />} title="Typography">
+        {details.fonts}
+      </DetailCard>
+
+      <DetailCard icon={<Palette className="text-accent size-5" />} title="Visual system">
+        {details.palette}
+      </DetailCard>
+
+      <DetailCard icon={<Search className="text-accent size-5" />} title="SEO structure">
+        Clear headings, project sections, metadata controls, and a public preview path make this
+        template easier to understand and share.
+      </DetailCard>
+    </section>
+  );
+};
+
+export default TemplateDetailCards;
diff --git a/apps/portfolio/features/templates/components/TemplateDetailContainer.tsx b/apps/portfolio/features/templates/components/TemplateDetailContainer.tsx
new file mode 100644
index 00000000..cce20bf1
--- /dev/null
+++ b/apps/portfolio/features/templates/components/TemplateDetailContainer.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { Code, Eye } from "lucide-react";
+import { useState, useRef } from "react";
+
+import type { TemplateDetails } from "../data/template-details";
+import type { TemplateSummary } from "@/templates/catalog/templates";
+
+import TemplateCta from "./TemplateCta";
+import TemplateBestFit from "./TemplateBestFit";
+import TemplateDetailHero from "./TemplateDetailHero";
+import TemplateStyleGuide from "./TemplateStyleGuide";
+import TemplateDetailCards from "./TemplateDetailCards";
+import TemplatePreviewSection from "./TemplatePreviewSection";
+import TemplateFullSystemSpec from "./TemplateFullSystemSpec";
+
+type ContainerProps = {
+  template: TemplateSummary;
+  details: TemplateDetails;
+};
+
+const TemplateDetailContainer = ({ template, details }: ContainerProps) => {
+  const [devMode, setDevMode] = useState(false);
+
+  const specAnchorRef = useRef<HTMLDivElement>(null);
+
+  const handleEnableDevMode = () => {
+    setDevMode(true);
+
+    setTimeout(() => {
+      specAnchorRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 50);
+  };
+
+  const handleToggleDevMode = () => {
+    if (!devMode) {
+      setDevMode(true);
+
+      setTimeout(() => {
+        specAnchorRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      }, 50);
+    } else setDevMode(false);
+  };
+
+  return (
+    <main className="relative">
+      <TemplateDetailHero template={template} details={details} />
+      <TemplatePreviewSection template={template} details={details} />
+      <TemplateDetailCards details={details} />
+      <TemplateStyleGuide template={template} details={details} />
+
+      <div ref={specAnchorRef} className="scroll-mt-28" />
+
+      <div className={devMode ? "block" : "hidden"}>
+        <TemplateFullSystemSpec details={details} />
+      </div>
+
+      <div className={devMode ? "hidden" : "block"}>
+        <section className="mx-auto w-[min(1200px,calc(100%-48px))] py-12 md:py-16">
+          <div className="border-ink-2/10 bg-panel mx-auto max-w-2xl rounded-3xl border p-8 text-center shadow-sm md:p-12">
+            <span className="bg-accent/8 text-accent mb-4 inline-block rounded-full px-3.5 py-1.5 font-mono text-[10px] font-bold tracking-wider uppercase">
+              Developer Spec Sheet
+            </span>
+
+            <h3 className="text-ink-2 mb-3 text-2xl font-bold tracking-tight">
+              Building or customizing this template?
+            </h3>
+
+            <p className="text-ink-2/65 mx-auto mb-8 max-w-md text-sm leading-relaxed">
+              Turn on Developer Mode to inspect styling tokens, layout padding values, shape
+              border-radii, responsive queries, and the raw specs JSON.
+            </p>
+
+            <button
+              onClick={handleEnableDevMode}
+              className="bg-ink-2 hover:bg-ink-soft text-paper mx-auto flex cursor-pointer items-center gap-2 rounded-full px-6 py-3 text-xs font-bold shadow-sm transition-all hover:shadow active:scale-95"
+            >
+              <Code size={14} /> Enable Developer Mode
+            </button>
+          </div>
+        </section>
+      </div>
+
+      <TemplateBestFit template={template} details={details} />
+
+      <TemplateCta template={template} />
+
+      <div className="fixed bottom-8 left-8 z-80 hidden md:block">
+        <button
+          onClick={handleToggleDevMode}
+          title={devMode ? "Switch to Regular Preview" : "Switch to Developer Specs"}
+          className={`flex cursor-pointer items-center gap-2.5 rounded-full border px-5 py-3 font-['Outfit'] text-xs font-bold shadow-lg transition-all duration-300 active:scale-95 ${
+            devMode
+              ? "bg-accent border-accent hover:bg-accent-hover text-white"
+              : "text-ink-2 border-ink-2/10 bg-panel hover:bg-panel-2"
+          }`}
+        >
+          {devMode ? (
+            <>
+              <Eye size={14} /> User View
+            </>
+          ) : (
+            <>
+              <Code size={14} /> Developer Mode
+            </>
+          )}
+
+          <span className="relative flex h-2 w-2">
+            <span
+              className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${devMode ? "bg-white" : "bg-accent"}`}
+            ></span>
+            <span
+              className={`relative inline-flex h-2 w-2 rounded-full ${devMode ? "bg-white" : "bg-accent"}`}
+            ></span>
+          </span>
+        </button>
+      </div>
+
+      <div className="fixed bottom-4 left-1/2 z-80 w-[calc(100%-32px)] max-w-sm -translate-x-1/2 md:hidden">
+        <button
+          onClick={handleToggleDevMode}
+          className={`flex w-full cursor-pointer items-center justify-center gap-2 rounded-full border py-3.5 font-['Outfit'] text-xs font-bold shadow-lg transition-all duration-300 active:scale-95 ${
+            devMode ? "bg-accent border-accent text-white" : "text-ink-2 border-ink-2/10 bg-panel"
+          }`}
+        >
+          {devMode ? (
+            <>
+              <Eye size={14} /> Switch to User View
+            </>
+          ) : (
+            <>
+              <Code size={14} /> View Developer Mode
+            </>
+          )}
+        </button>
+      </div>
+    </main>
+  );
+};
+
+export default TemplateDetailContainer;
diff --git a/apps/portfolio/features/templates/components/TemplateDetailHero.tsx b/apps/portfolio/features/templates/components/TemplateDetailHero.tsx
index 8ef41a22..86feb2d7 100644
--- a/apps/portfolio/features/templates/components/TemplateDetailHero.tsx
+++ b/apps/portfolio/features/templates/components/TemplateDetailHero.tsx
@@ -1,17 +1,17 @@
 import { LayoutTemplate } from "lucide-react";
 
+import type { TemplateDetails } from "../data/template-details";
 import type { TemplateSummary } from "@/templates/catalog/templates";
 
 import { templatesShell } from "../constants";
-import type { TemplateDetails } from "../data/template-details";
 
-export function TemplateDetailHero({
+const TemplateDetailHero = ({
   template,
   details,
 }: {
   template: TemplateSummary;
   details: TemplateDetails;
-}) {
+}) => {
   return (
     <header
       className={`${templatesShell} grid gap-10 pt-20 pb-14 lg:grid-cols-[1fr_26rem] lg:items-end`}
@@ -20,18 +20,21 @@ export function TemplateDetailHero({
         <p className="bg-accent inline-flex items-center gap-2 rounded-full px-4 py-2 text-xs font-bold text-white">
           <LayoutTemplate size={13} /> Live portfolio template
         </p>
-        <h1 className="mt-7 max-w-6xl text-[clamp(3.8rem,8vw,7.5rem)] leading-[0.88] font-bold tracking-[-0.08em] wrap-normal">
+
+        <h1 className="mt-7 max-w-6xl text-[clamp(3.8rem,8vw,7.5rem)] leading-none font-bold tracking-tighter wrap-normal">
           <span className="sr-only">{template.name} Portfolio Template: </span>
           {template.name} is built for {template.audience.toLowerCase()}.
         </h1>
       </div>
+
       <div className="border-ink-2 border-t-2 pt-6">
         <p className="text-ink-2/62 text-sm leading-7">{details.positioning}</p>
+
         <div className="mt-5 flex flex-wrap gap-2">
           {template.strengths.map((strength) => (
             <span
-              className="border-ink-2/15 rounded-full border bg-white px-3 py-1.5 text-xs font-bold"
               key={strength}
+              className="border-ink-2/15 bg-panel rounded-full border px-3 py-1.5 text-xs font-bold"
             >
               {strength}
             </span>
@@ -40,4 +43,6 @@ export function TemplateDetailHero({
       </div>
     </header>
   );
-}
+};
+
+export default TemplateDetailHero;
diff --git a/apps/portfolio/features/templates/components/TemplateFullSystemSpec.tsx b/apps/portfolio/features/templates/components/TemplateFullSystemSpec.tsx
new file mode 100644
index 00000000..d3fbfafe
--- /dev/null
+++ b/apps/portfolio/features/templates/components/TemplateFullSystemSpec.tsx
@@ -0,0 +1,379 @@
+"use client";
+
+import { useState } from "react";
+
+import type { TemplateDetails } from "../data/template-details";
+
+type SystemSpecProps = {
+  details: TemplateDetails;
+};
+
+const TemplateFullSystemSpec = ({ details }: SystemSpecProps) => {
+  const { system } = details;
+
+  const [activeTab, setActiveTab] = useState<"blueprint" | "layout" | "components" | "json">(
+    "blueprint",
+  );
+
+  if (!system) return null;
+
+  const tabs = [
+    { id: "blueprint", label: "Visual Blueprint" },
+    { id: "layout", label: "Layout & Shapes" },
+    { id: "components", label: "Component Spec" },
+    { id: "json", label: "JSON Spec" },
+  ] as const;
+
+  return (
+    <section className="border-ink-2/10 dark:bg-paper-2 border-t bg-[#faf9f6] py-20 md:py-28">
+      <div className="mx-auto w-[min(1200px,calc(100%-48px))]">
+        <div className="mb-12 md:mb-16">
+          <p className="text-accent mb-3 font-mono text-[0.72rem] font-bold tracking-[0.2em] uppercase">
+            Technical Spec Sheet
+          </p>
+
+          <h2 className="text-ink-2 text-[clamp(2.2rem,4vw,3.6rem)] leading-[1.1] font-bold tracking-tighter">
+            Engineering blueprint.
+          </h2>
+
+          <p className="text-ink-2/65 mt-4 max-w-2xl text-base leading-relaxed">
+            Developer specifications, design tokens, responsive thresholds, and structural rules
+            powering this template.
+          </p>
+        </div>
+
+        <div className="border-ink-2/10 mb-10 flex flex-wrap gap-2 border-b pb-3">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`cursor-pointer rounded-full px-5 py-2.5 text-xs font-bold transition-all duration-200 ${
+                activeTab === tab.id
+                  ? "bg-ink-2 text-paper shadow-sm"
+                  : "text-ink-2/62 hover:bg-ink-2/5 hover:text-ink-2"
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="min-h-[400px]">
+          {activeTab === "blueprint" && (
+            <div className="animate-fade-in space-y-10">
+              <div className="grid gap-6 md:grid-cols-2">
+                <article className="border-ink-2/10 dark:bg-panel rounded-3xl border bg-white p-6 md:p-8">
+                  <span className="text-accent font-mono text-[10px] font-bold tracking-wider uppercase">
+                    01 / POSTURE & GENRE
+                  </span>
+
+                  <h3 className="text-ink-2 mt-4 mb-3 text-xl font-bold tracking-tight uppercase">
+                    Visual Strategy
+                  </h3>
+
+                  <p className="text-ink-2/72 text-sm leading-relaxed">
+                    {system.overview.description}
+                  </p>
+
+                  <div className="mt-6 flex flex-wrap gap-2">
+                    <span className="bg-accent/8 border-accent/15 text-accent rounded-full border px-3 py-1 font-mono text-[11px] font-bold uppercase">
+                      {system.overview.genre}
+                    </span>
+
+                    <span className="bg-ink-2/5 border-ink-2/10 text-ink-2/72 rounded-full border px-3 py-1 font-mono text-[11px] font-bold uppercase">
+                      Hue: {system.overview.anchorHue}
+                    </span>
+                  </div>
+                </article>
+
+                <article className="border-ink-2/10 dark:bg-panel rounded-3xl border bg-white p-6 md:p-8">
+                  <span className="text-accent font-mono text-[10px] font-bold tracking-wider uppercase">
+                    02 / CANVAS COLORSPACES
+                  </span>
+
+                  <h3 className="text-ink-2 mt-4 mb-3 text-xl font-bold tracking-tight uppercase">
+                    The Floor
+                  </h3>
+
+                  <p className="text-ink-2/72 text-sm leading-relaxed">
+                    The page canvas operates with {system.overview.canvas}. Layout transitions
+                    handle values cleanly across dark and light palettes.
+                  </p>
+
+                  <div className="mt-6 space-y-2">
+                    <div className="border-ink-2/10 flex items-center justify-between border-b pb-2 text-xs">
+                      <span className="text-ink-2/62 font-semibold">Dark Canvas</span>
+
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-[10px] font-bold">
+                        {system.colors.surface.paperDark}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center justify-between pt-1 text-xs">
+                      <span className="text-ink-2/62 font-semibold">Light Canvas</span>
+
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-[10px] font-bold">
+                        {system.colors.surface.paperLight}
+                      </span>
+                    </div>
+                  </div>
+                </article>
+              </div>
+
+              <div className="border-ink-2/10 dark:bg-panel rounded-3xl border bg-white p-6 md:p-8">
+                <span className="text-accent mb-4 block font-mono text-[10px] font-bold tracking-wider uppercase">
+                  03 / BRAND COLOR MATRIX
+                </span>
+
+                <h3 className="text-ink-2 mb-6 text-xl font-bold tracking-tight uppercase">
+                  Accent & Surface Hues
+                </h3>
+
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                  <div className="border-ink-2/10 dark:bg-paper-2 rounded-2xl border bg-[#faf9f6] p-4.5">
+                    <div className="border-ink-2/10 mb-3 h-10 rounded-xl border bg-[#39e5a1]" />
+                    <h4 className="text-ink-2 text-sm font-bold">Accent (Dark)</h4>
+                    <p className="text-ink-2/62 mt-1 font-mono text-[11px]">
+                      {system.colors.brand.accentDark}
+                    </p>
+                  </div>
+
+                  <div className="border-ink-2/10 dark:bg-paper-2 rounded-2xl border bg-[#faf9f6] p-4.5">
+                    <div className="border-ink-2/10 mb-3 h-10 rounded-xl border bg-[#1a8f65]" />
+                    <h4 className="text-ink-2 text-sm font-bold">Accent (Light)</h4>
+                    <p className="text-ink-2/62 mt-1 font-mono text-[11px]">
+                      {system.colors.brand.accentLight}
+                    </p>
+                  </div>
+
+                  <div className="border-ink-2/10 dark:bg-paper-2 rounded-2xl border bg-[#faf9f6] p-4.5">
+                    <div className="border-ink-2/10 mb-3 h-10 rounded-xl border bg-[#0c100e]" />
+                    <h4 className="text-ink-2 text-sm font-bold">Obsidian Paper</h4>
+                    <p className="text-ink-2/62 mt-1 font-mono text-[11px]">
+                      {system.colors.surface.paperDark}
+                    </p>
+                  </div>
+
+                  <div className="border-ink-2/10 dark:bg-paper-2 rounded-2xl border bg-[#faf9f6] p-4.5">
+                    <div className="border-ink-2/10 mb-3 h-10 rounded-xl border bg-[#fbfcf9]" />
+                    <h4 className="text-ink-2 text-sm font-bold">Chalk Paper</h4>
+                    <p className="text-ink-2/62 mt-1 font-mono text-[11px]">
+                      {system.colors.surface.paperLight}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="border-ink-2/10 dark:bg-panel overflow-x-auto rounded-3xl border bg-white p-6 md:p-8">
+                <span className="text-accent mb-4 block font-mono text-[10px] font-bold tracking-wider uppercase">
+                  04 / TYPOGRAPHIC HIERARCHY
+                </span>
+
+                <h3 className="text-ink-2 mb-6 text-xl font-bold tracking-tight uppercase">
+                  Text Tokens
+                </h3>
+
+                <table className="w-full min-w-[650px] border-collapse text-left">
+                  <thead>
+                    <tr className="border-ink-2/10 text-ink-2/62 border-b font-mono text-xs uppercase">
+                      <th className="pb-3 font-bold">Token</th>
+                      <th className="pb-3 font-bold">Size</th>
+                      <th className="pb-3 font-bold">Weight</th>
+                      <th className="pb-3 font-bold">Purpose / Use Case</th>
+                    </tr>
+                  </thead>
+
+                  <tbody className="divide-ink-2/5 divide-y">
+                    {system.typography.hierarchy.map((row) => (
+                      <tr key={row.token} className="text-sm">
+                        <td className="text-accent py-4 font-mono font-bold">{row.token}</td>
+                        <td className="text-ink-2 py-4 font-semibold">{row.size}</td>
+                        <td className="text-ink-2/62 py-4 font-mono text-xs">{row.weight}</td>
+                        <td className="text-ink-2/80 py-4 font-medium">{row.use}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "layout" && (
+            <div className="animate-fade-in space-y-8">
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="border-ink-2/10 dark:bg-panel rounded-3xl border bg-white p-6 md:p-8">
+                  <span className="text-accent mb-4 block font-mono text-[10px] font-bold tracking-wider uppercase">
+                    01 / LAYOUT GRID SYSTEMS
+                  </span>
+
+                  <h3 className="text-ink-2 mb-6 text-xl font-bold tracking-tight uppercase">
+                    Spacing Standards
+                  </h3>
+
+                  <div className="space-y-4">
+                    <div className="border-ink-2/10 flex items-center justify-between border-b pb-3 text-sm">
+                      <span className="text-ink-2/62 font-semibold">Base Spacing Unit</span>
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.layout?.baseGridUnit || "4px"}
+                      </span>
+                    </div>
+
+                    <div className="border-ink-2/10 flex items-center justify-between border-b pb-3 text-sm">
+                      <span className="text-ink-2/62 font-semibold">Section Padding</span>
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.layout?.sectionPadding || "120px desktop"}
+                      </span>
+                    </div>
+
+                    <div className="border-ink-2/10 flex items-center justify-between border-b pb-3 text-sm">
+                      <span className="text-ink-2/62 font-semibold">Asymmetric Split Layout</span>
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.layout?.asymmetricSplit || "320px left / 1fr right"}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-ink-2/62 font-semibold">Max Container Boundary</span>
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.layout?.containerLimit || "1200px limit"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="border-ink-2/10 dark:bg-panel rounded-3xl border bg-white p-6 md:p-8">
+                  <span className="text-accent mb-4 block font-mono text-[10px] font-bold tracking-wider uppercase">
+                    02 / GEOMETRY & RADIUS TOKENS
+                  </span>
+
+                  <h3 className="text-ink-2 mb-6 text-xl font-bold tracking-tight uppercase">
+                    Corner Radii
+                  </h3>
+
+                  <div className="space-y-4">
+                    <div className="border-ink-2/10 flex items-center justify-between border-b pb-3 text-sm">
+                      <span className="text-ink-2/62 font-semibold">Card Corner Radius</span>
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.shapes?.cardRadius || "24px"}
+                      </span>
+                    </div>
+
+                    <div className="border-ink-2/10 flex items-center justify-between border-b pb-3 text-sm">
+                      <span className="text-ink-2/62 font-semibold">Interior Item Radius</span>
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.shapes?.itemRadius || "16px"}
+                      </span>
+                    </div>
+
+                    <div className="border-ink-2/10 flex items-center justify-between border-b pb-3 text-sm">
+                      <span className="text-ink-2/62 font-semibold">
+                        Button/Input Corner Radius
+                      </span>
+
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.shapes?.buttonRadius || "14px"}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-ink-2/62 font-semibold">Badge/Pill Radius</span>
+                      <span className="bg-ink-2/5 text-ink-2/80 rounded px-2.5 py-1 font-mono text-xs font-bold">
+                        {system.shapes?.badgeRadius || "9999px"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {system.responsive?.breakpoints && (
+                <div className="border-ink-2/10 dark:bg-panel overflow-x-auto rounded-3xl border bg-white p-6 md:p-8">
+                  <span className="text-accent mb-4 block font-mono text-[10px] font-bold tracking-wider uppercase">
+                    03 / RESPONSIVE BREAKPOINT BEHAVIORS
+                  </span>
+
+                  <h3 className="text-ink-2 mb-6 text-xl font-bold tracking-tight uppercase">
+                    Media Query Rules
+                  </h3>
+
+                  <table className="w-full min-w-[650px] border-collapse text-left">
+                    <thead>
+                      <tr className="border-ink-2/10 text-ink-2/62 border-b font-mono text-xs uppercase">
+                        <th className="pb-3 font-bold">Breakpoint</th>
+                        <th className="pb-3 font-bold">Width Range</th>
+                        <th className="pb-3 font-bold">Layout Adjustment & Behaviors</th>
+                      </tr>
+                    </thead>
+
+                    <tbody className="divide-ink-2/5 divide-y">
+                      {system.responsive.breakpoints.map((bp) => (
+                        <tr key={bp.name} className="text-sm">
+                          <td className="text-accent py-4 font-mono font-bold uppercase">
+                            {bp.name}
+                          </td>
+
+                          <td className="text-ink-2 py-4 font-mono text-xs">{bp.width}</td>
+
+                          <td className="text-ink-2/80 py-4 leading-relaxed font-medium">
+                            {bp.behavior}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === "components" && (
+            <div className="animate-fade-in grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {Object.entries(system.components || {}).map(([key, comp]) => (
+                <div
+                  key={key}
+                  className="border-ink-2/10 dark:bg-panel flex flex-col justify-between rounded-3xl border bg-white p-6"
+                >
+                  <div>
+                    <span className="text-accent font-mono text-[9px] font-bold tracking-wider uppercase">
+                      Component Spec / {key}
+                    </span>
+
+                    <h4 className="text-ink-2 mt-3 mb-4 text-lg font-bold tracking-tight">
+                      {comp.name}
+                    </h4>
+
+                    <p className="text-ink-2/72 text-xs leading-relaxed">{comp.treatment}</p>
+                  </div>
+
+                  <div className="border-ink-2/5 text-ink-2/55 mt-6 flex items-center justify-between border-t pt-4 font-mono text-[11px]">
+                    <span>Target Class</span>
+
+                    <span className="bg-ink-2/5 text-ink-2/80 rounded px-1.5 py-0.5">
+                      .signal-{key}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {activeTab === "json" && (
+            <div className="border-ink-2/10 animate-fade-in max-h-[500px] overflow-x-auto rounded-3xl border bg-[#0f1412] p-6 font-mono text-xs text-emerald-400 shadow-inner">
+              <div className="mb-4 flex items-center justify-between border-b border-white/10 pb-3 text-[11px] text-white/50">
+                <span>programmatic_design_spec.json</span>
+                <button
+                  onClick={() => navigator.clipboard.writeText(JSON.stringify(system, null, 2))}
+                  className="cursor-pointer rounded border border-white/10 bg-white/5 px-2.5 py-1 font-bold text-white transition hover:bg-white/10 active:scale-95"
+                >
+                  Copy JSON
+                </button>
+              </div>
+              <pre className="leading-5">{JSON.stringify(system, null, 2)}</pre>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TemplateFullSystemSpec;
diff --git a/apps/portfolio/features/templates/components/TemplatePreviewSection.tsx b/apps/portfolio/features/templates/components/TemplatePreviewSection.tsx
index 256d1233..a94287ac 100644
--- a/apps/portfolio/features/templates/components/TemplatePreviewSection.tsx
+++ b/apps/portfolio/features/templates/components/TemplatePreviewSection.tsx
@@ -1,29 +1,33 @@
 import Link from "next/link";
 import { ArrowRight, CheckCircle2, ExternalLink } from "lucide-react";
 
-import { PortfolioTemplatePreviewFrame } from "@/components/PortfolioTemplatePreviewFrame";
+import type { TemplateDetails } from "../data/template-details";
 import type { TemplateSummary } from "@/templates/catalog/templates";
 
+import { PortfolioTemplatePreviewFrame } from "@/components/PortfolioTemplatePreviewFrame";
+
 import { templatesShell } from "../constants";
-import type { TemplateDetails } from "../data/template-details";
 
-export function TemplatePreviewSection({
+const TemplatePreviewSection = ({
   template,
   details,
 }: {
   template: TemplateSummary;
   details: TemplateDetails;
-}) {
+}) => {
   return (
     <section className={`${templatesShell} grid gap-8 pb-20 lg:grid-cols-[minmax(0,1fr)_22rem]`}>
       <PortfolioTemplatePreviewFrame
+        ariaHidden
         interactive
         templateId={template.id}
         title={`${template.name} live preview`}
       />
+
       <aside className="space-y-4 lg:sticky lg:top-8 lg:self-start">
-        <div className="border-ink-2 rounded-3xl border-2 bg-white p-6 shadow-[10px_12px_0_rgba(37,99,235,0.14)]">
+        <div className="border-ink-2 bg-panel rounded-3xl border-2 p-6 shadow-[10px_12px_0_rgba(37,99,235,0.14)]">
           <h2 className="text-2xl font-bold tracking-tighter">Design brief</h2>
+
           <ul className="mt-6 space-y-4">
             {details.designNotes.map((note) => (
               <li className="text-ink-2/68 flex gap-3 text-sm leading-6" key={note}>
@@ -33,19 +37,23 @@ export function TemplatePreviewSection({
             ))}
           </ul>
         </div>
-        <a
-          className="bg-ink-2 inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-full px-6 text-sm font-bold text-white transition duration-300 hover:-translate-y-1"
+
+        <Link
           href={`/templates/${template.id}/preview`}
+          className="bg-ink-2 text-paper inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-full px-6 text-sm font-bold transition duration-300 hover:-translate-y-1"
         >
           Full page review <ExternalLink size={15} />
-        </a>
+        </Link>
+
         <Link
-          className="bg-accent inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-full px-6 text-sm font-bold text-white transition duration-300 hover:-translate-y-1"
           href="/dashboard"
+          className="bg-accent inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-full px-6 text-sm font-bold text-white transition duration-300 hover:-translate-y-1"
         >
           Use this template <ArrowRight size={15} />
         </Link>
       </aside>
     </section>
   );
-}
+};
+
+export default TemplatePreviewSection;
diff --git a/apps/portfolio/features/templates/components/TemplateStyleGuide.tsx b/apps/portfolio/features/templates/components/TemplateStyleGuide.tsx
index 0c9f4f97..bd180da1 100644
--- a/apps/portfolio/features/templates/components/TemplateStyleGuide.tsx
+++ b/apps/portfolio/features/templates/components/TemplateStyleGuide.tsx
@@ -1,32 +1,44 @@
 import type { ReactNode } from "react";
 
+import type { TemplateDetails } from "../data/template-details";
 import type { TemplateSummary } from "@/templates/catalog/templates";
 
 import { templatesShell } from "../constants";
-import type { TemplateDetails } from "../data/template-details";
 
-export function TemplateStyleGuide({
+function GuideBlock({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <article className="border-ink-2/15 bg-paper rounded-3xl border p-5">
+      <h3 className="text-xl font-bold tracking-[-0.04em]">{title}</h3>
+      <p className="text-ink-2/62 mt-4 text-sm leading-7">{children}</p>
+    </article>
+  );
+}
+
+const TemplateStyleGuide = ({
   template,
   details,
 }: {
   template: TemplateSummary;
   details: TemplateDetails;
-}) {
+}) => {
   return (
     <section className={`${templatesShell} pb-24`}>
-      <div className="border-ink-2 rounded-4xl border-2 bg-white p-6 shadow-[14px_16px_0_rgba(37,99,235,0.12)] sm:p-8">
+      <div className="border-ink-2 bg-panel rounded-4xl border-2 p-6 shadow-[14px_16px_0_rgba(37,99,235,0.12)] sm:p-8">
         <div className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
           <div>
             <p className="text-accent text-xs font-bold tracking-[0.16em] uppercase">
               Template style guide
             </p>
-            <h2 className="mt-4 max-w-xl text-[clamp(2.8rem,5vw,5.5rem)] leading-[0.88] font-bold tracking-[-0.08em]">
+
+            <h2 className="mt-4 max-w-xl text-[clamp(2.8rem,5vw,5.5rem)] leading-none tracking-tighter">
               The design system behind {template.name}.
             </h2>
+
             <p className="text-ink-2/62 mt-5 max-w-md text-sm leading-7">
               Use this guide to decide whether the template matches your work before you publish.
             </p>
           </div>
+
           <div className="grid gap-4">
             <div className="grid gap-3 sm:grid-cols-4">
               {details.colorScheme.map((color) => (
@@ -34,7 +46,8 @@ export function TemplateStyleGuide({
                   className="border-ink-2/15 bg-paper overflow-hidden rounded-2xl border"
                   key={color.name}
                 >
-                  <div className={`h-24 ${color.className}`} />
+                  <div className={`border-ink/50 h-24 border-b ${color.className}`} />
+
                   <div className="p-3">
                     <p className="text-xs font-bold">{color.name}</p>
                     <p className="text-ink-2/55 mt-1 font-mono text-[10px]">{color.value}</p>
@@ -42,17 +55,20 @@ export function TemplateStyleGuide({
                 </div>
               ))}
             </div>
+
             <div className="grid gap-3 md:grid-cols-2">
               <GuideBlock title="Layout rhythm">{details.layout}</GuideBlock>
               <GuideBlock title="Component language">{details.componentLanguage}</GuideBlock>
             </div>
-            <div className="border-ink-2/15 bg-ink-2 rounded-3xl border p-5 text-white">
+
+            <div className="rounded-3xl border border-[#11110f]/15 bg-[#11110f] p-5 text-white">
               <h3 className="text-xl font-bold tracking-[-0.04em]">Best content to prepare</h3>
+
               <div className="mt-5 grid gap-3 sm:grid-cols-2">
                 {details.contentModel.map((item) => (
                   <div
-                    className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm leading-6 font-bold text-white/72"
                     key={item}
+                    className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm leading-6 font-semibold text-white/70"
                   >
                     {item}
                   </div>
@@ -64,13 +80,6 @@ export function TemplateStyleGuide({
       </div>
     </section>
   );
-}
+};
 
-function GuideBlock({ title, children }: { title: string; children: ReactNode }) {
-  return (
-    <article className="border-ink-2/15 bg-paper rounded-3xl border p-5">
-      <h3 className="text-xl font-bold tracking-[-0.04em]">{title}</h3>
-      <p className="text-ink-2/62 mt-4 text-sm leading-7">{children}</p>
-    </article>
-  );
-}
+export default TemplateStyleGuide;
diff --git a/apps/portfolio/features/templates/components/TemplatesNavigation.tsx b/apps/portfolio/features/templates/components/TemplatesNavigation.tsx
index 3804d53f..1b6ff0b5 100644
--- a/apps/portfolio/features/templates/components/TemplatesNavigation.tsx
+++ b/apps/portfolio/features/templates/components/TemplatesNavigation.tsx
@@ -1,8 +1,9 @@
 import Link from "next/link";
 import Image from "next/image";
 import { ArrowLeft, ArrowRight } from "lucide-react";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
-export function TemplatesNavigation({
+const TemplatesNavigation = ({
   backHref,
   backLabel,
   showPricing = false,
@@ -10,12 +11,12 @@ export function TemplatesNavigation({
   backHref: string;
   backLabel: string;
   showPricing?: boolean;
-}) {
+}) => {
   return (
     <nav className="border-line bg-paper/80 fixed top-4.5 left-1/2 z-90 flex h-16 w-[min(1160px,calc(100%-32px))] -translate-x-1/2 items-center justify-between gap-5 rounded-full border pr-2.5 pl-4 font-['Outfit','Avenir_Next','Trebuchet_MS',sans-serif] shadow-[0_14px_45px_rgba(17,17,15,0.08)] backdrop-blur-xl">
       <Link
-        className="flex shrink-0 items-center gap-2.5 text-sm font-bold tracking-[-.04em]"
         href="/"
+        className="flex shrink-0 items-center gap-2.5 text-sm font-bold tracking-[-.04em]"
       >
         <Image src="/veriworkly-logo.png" width={28} height={28} alt="VeriWorkly Logo" priority />
         <span className="text-ink hidden min-[380px]:inline">VeriWorkly Portfolio</span>
@@ -40,19 +41,24 @@ export function TemplatesNavigation({
         </Link>
 
         <Link
-          className="text-ink/75 hover:text-accent flex items-center gap-1.5 py-1 transition duration-200"
           href={backHref}
+          className="text-ink/75 hover:text-accent flex items-center gap-1.5 py-1 transition duration-200"
         >
           <ArrowLeft size={13} /> {backLabel}
         </Link>
       </div>
 
-      <Link
-        href="/dashboard"
-        className="bg-ink hover:bg-ink-soft hidden min-h-11 items-center justify-center gap-2 rounded-full px-6 text-sm font-bold text-white transition-all duration-200 hover:-translate-y-0.5 active:scale-[0.97] sm:inline-flex"
-      >
-        Start building <ArrowRight size={15} aria-hidden="true" />
-      </Link>
+      <div className="flex items-center gap-3">
+        <ThemeToggle />
+        <Link
+          href="/dashboard"
+          className="bg-ink hover:bg-ink-soft text-paper hidden min-h-11 items-center justify-center gap-2 rounded-full px-6 text-sm font-bold transition-all duration-200 hover:-translate-y-0.5 active:scale-[0.97] sm:inline-flex"
+        >
+          Start building <ArrowRight size={15} aria-hidden="true" />
+        </Link>
+      </div>
     </nav>
   );
-}
+};
+
+export default TemplatesNavigation;
diff --git a/apps/portfolio/features/templates/data/template-details.ts b/apps/portfolio/features/templates/data/template-details.ts
index ae555e4e..9a240d68 100644
--- a/apps/portfolio/features/templates/data/template-details.ts
+++ b/apps/portfolio/features/templates/data/template-details.ts
@@ -1,6 +1,94 @@
 import type { TemplateId } from "@/templates/catalog/templates";
 import { design as signalDesign } from "@/template-library/signal/design";
 
+export interface TemplateSystemOverview {
+  genre: string;
+  canvas: string;
+  anchorHue: string;
+  description: string;
+}
+
+export interface TemplateSystemTargetProfession {
+  role: string;
+  why: string;
+}
+
+export interface TemplateSystemFeature {
+  name: string;
+  description: string;
+}
+
+export interface TemplateSystemColors {
+  brand: {
+    accentDark: string;
+    accentLight: string;
+    accentHoverDark: string;
+    accentHoverLight: string;
+  };
+  surface: {
+    paperDark: string;
+    paperLight: string;
+    cardBgDark: string;
+    cardBgLight: string;
+  };
+}
+
+export interface TemplateSystemTypographyHierarchy {
+  token: string;
+  size: string;
+  weight: string;
+  use: string;
+}
+
+export interface TemplateSystemTypography {
+  fonts: {
+    primary: string;
+    utility: string;
+  };
+  hierarchy: TemplateSystemTypographyHierarchy[];
+}
+
+export interface TemplateSystemLayout {
+  baseGridUnit?: string;
+  sectionPadding?: string;
+  asymmetricSplit?: string;
+  containerLimit?: string;
+}
+
+export interface TemplateSystemShapes {
+  cardRadius?: string;
+  itemRadius?: string;
+  buttonRadius?: string;
+  badgeRadius?: string;
+}
+
+export interface TemplateSystemBreakpoint {
+  name: string;
+  width: string;
+  behavior: string;
+}
+
+export interface TemplateSystemResponsive {
+  breakpoints: TemplateSystemBreakpoint[];
+}
+
+export interface TemplateSystemComponent {
+  name: string;
+  treatment: string;
+}
+
+export interface TemplateSystemSpec {
+  overview: TemplateSystemOverview;
+  targetProfessions?: TemplateSystemTargetProfession[];
+  features?: TemplateSystemFeature[];
+  colors: TemplateSystemColors;
+  typography: TemplateSystemTypography;
+  layout?: TemplateSystemLayout;
+  shapes?: TemplateSystemShapes;
+  responsive?: TemplateSystemResponsive;
+  components?: Record<string, TemplateSystemComponent>;
+}
+
 export type TemplateDetails = {
   positioning: string;
   fonts: string;
@@ -12,7 +100,7 @@ export type TemplateDetails = {
   colorScheme: Array<{ name: string; value: string; className: string }>;
   bestFor: string[];
   designNotes: string[];
-  system?: any;
+  system?: TemplateSystemSpec;
 };
 
 export const templateDetails: Record<TemplateId, TemplateDetails> = {
diff --git a/apps/portfolio/lib/portfolio.ts b/apps/portfolio/lib/portfolio.ts
index b1635fa1..6383a0cc 100644
--- a/apps/portfolio/lib/portfolio.ts
+++ b/apps/portfolio/lib/portfolio.ts
@@ -43,7 +43,7 @@ export interface PortfolioSection {
   title: string;
   visible: boolean;
   items: Array<Record<string, unknown>>;
-  settings?: Record<string, any>;
+  settings?: Record<string, unknown>;
 }
 
 export interface PortfolioContent {
@@ -362,7 +362,8 @@ export function parsePortfolioContent(input: unknown, fallback = demoPortfolio):
         title: text(section.title, "Section", 120),
         visible: section.visible !== false,
         items: Array.isArray(section.items) ? section.items.slice(0, 24) : [],
-        settings: section.settings && typeof section.settings === "object" ? section.settings : undefined,
+        settings:
+          section.settings && typeof section.settings === "object" ? section.settings : undefined,
       })),
   };
 }
diff --git a/apps/portfolio/template-library b/apps/portfolio/template-library
index 05b3d823..cb37b35e 160000
--- a/apps/portfolio/template-library
+++ b/apps/portfolio/template-library
@@ -1 +1 @@
-Subproject commit 05b3d8238849c85d8b2e08cb06f4d5dd1bdcb1a3
+Subproject commit cb37b35ee9a7a3ec2f093c0bd8d4dd65bbe90e49
diff --git a/apps/server/src/services/billingService.ts b/apps/server/src/services/billingService.ts
index f06771c1..d96c6c89 100644
--- a/apps/server/src/services/billingService.ts
+++ b/apps/server/src/services/billingService.ts
@@ -164,7 +164,9 @@ export class BillingService {
             : "FREE";
 
     const now = new Date();
-    const isExpired = Boolean(subscription?.currentPeriodEnd && subscription.currentPeriodEnd < now);
+    const isExpired = Boolean(
+      subscription?.currentPeriodEnd && subscription.currentPeriodEnd < now,
+    );
     const resolvedStatus = isExpired ? "INACTIVE" : (subscription?.status ?? "INACTIVE");
 
     return {
@@ -285,7 +287,11 @@ export class BillingService {
       const checkout = await getDodoClient().checkoutSessions.create({
         product_cart: [{ product_id: productId, quantity: 1 }],
         customer: { email: user.email, name: user.name || "VeriWorkly User" },
-        metadata: { veriworkly_user_id: userId, veriworkly_product: productKey, veriworkly_interval: interval },
+        metadata: {
+          veriworkly_user_id: userId,
+          veriworkly_product: productKey,
+          veriworkly_interval: interval,
+        },
         ...(productKey === "portfolio_pro" && interval === "monthly" && !previousSubscription
           ? { subscription_data: { trial_period_days: 7 } }
           : {}),
@@ -389,7 +395,11 @@ export class BillingService {
         },
       });
     } catch (error) {
-      if (error instanceof Error && ((error as any).code === "P2002" || error.constructor.name === "PrismaClientKnownRequestError")) {
+      if (
+        error instanceof Error &&
+        ((error as { code?: unknown }).code === "P2002" ||
+          error.constructor.name === "PrismaClientKnownRequestError")
+      ) {
         const existing = await prisma.billingWebhookEvent.findUnique({
           where: { providerEventId },
         });
diff --git a/scripts/mock-template-library.mjs b/scripts/mock-template-library.mjs
index 05490e81..bd84b334 100644
--- a/scripts/mock-template-library.mjs
+++ b/scripts/mock-template-library.mjs
@@ -123,6 +123,23 @@ export default function SignalTemplate({ project }: { project: PortfolioProject
 fs.writeFileSync(path.join(templateLibPath, "signal", "SignalTemplate.tsx"), signalContent);
 fs.writeFileSync(path.join(templateLibPath, "signal", "styles.css"), "/* Mock styles */");
 
+// SignalDesign
+const signalDesignContent = `export const design = {
+  positioning: "Mock signal positioning",
+  fonts: "Mock signal fonts",
+  motion: "Mock signal motion",
+  palette: "Mock signal palette",
+  layout: "Mock signal layout",
+  componentLanguage: "Mock signal componentLanguage",
+  contentModel: ["Mock signal contentModel"],
+  colorScheme: [{ name: "Mock", value: "#000", className: "bg-black" }],
+  bestFor: ["Mock signal bestFor"],
+  designNotes: ["Mock signal designNotes"],
+};
+`;
+
+fs.writeFileSync(path.join(templateLibPath, "signal", "design.ts"), signalDesignContent);
+
 console.log("Mock templates set up successfully.");
 
 try {