@invisibleloop/pulse 0.12.3 → 0.14.1

package/docs/src/pages/templates/swish.js

@@ -0,0 +1,313 @@
+/**
+ * Pulse — Swish example
+ *
+ * Demonstrates:
+ *   - Editorial light-theme branding (fashion / luxury ecommerce)
+ *   - Composing nav, section, container, grid, pullquote, button, footer, input
+ *   - Custom component helpers (look card, strip cell, journal card)
+ *   - Google Fonts integration via meta.styles
+ *   - Full-bleed hero with CSS background image + gradient overlay
+ *   - Responsive grid, lookbook strip, image-led journal cards
+ *   - Newsletter sign-up form using the input() component
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/swish
+ */
+
+import {
+  nav,
+  section,
+  container,
+  grid,
+  pullquote,
+  button,
+  footer,
+  input,
+} from '../../../../src/ui/index.js'
+import { asset } from '../../lib/layout.js'
+
+// ---------------------------------------------------------------------------
+// Card / cell helpers
+// ---------------------------------------------------------------------------
+
+const look = ({ name, season, price, src }) => `
+  <a class="swish-look" href="/collections/${encodeURIComponent(name.toLowerCase().replace(/\s+/g, '-'))}">
+    <div class="swish-look__frame">
+      <img src="${src}" alt="${name} — ${season}" loading="lazy" />
+    </div>
+    <div class="swish-look__name">${name}</div>
+    <div class="swish-look__meta">${season} · ${price}</div>
+  </a>
+`
+
+const stripCell = ({ src, alt, label }) => `
+  <figure class="swish-strip__cell">
+    <img src="${src}" alt="${alt}" loading="lazy" />
+    <figcaption class="swish-strip__label">${label}</figcaption>
+  </figure>
+`
+
+const journalCard = ({ category, title, deck, byline, src }) => `
+  <article class="swish-journal-card">
+    <div class="swish-journal-card__frame">
+      <img src="${src}" alt="" loading="lazy" />
+    </div>
+    <div class="swish-journal-card__category">${category}</div>
+    <h3 class="swish-journal-card__title">${title}</h3>
+    <p class="swish-journal-card__deck">${deck}</p>
+    <div class="swish-journal-card__byline">${byline}</div>
+  </article>
+`
+
+// ---------------------------------------------------------------------------
+// Static data
+// ---------------------------------------------------------------------------
+
+const featured = [
+  {
+    name:   'The Marlene Coat',
+    season: 'AW26',
+    price:  '£1,290',
+    src:    '/images/swish/1539109136881-3be0616acf4b.jpg',
+  },
+  {
+    name:   'Atelier Knit',
+    season: 'AW26',
+    price:  '£480',
+    src:    '/images/swish/1485518882345-15568b007407.jpg',
+  },
+  {
+    name:   'Bias Slip Dress',
+    season: 'AW26',
+    price:  '£695',
+    src:    '/images/swish/1572804013309-59a88b7e92f1.jpg',
+  },
+  {
+    name:   'Wide-Leg Trouser',
+    season: 'AW26',
+    price:  '£420',
+    src:    '/images/swish/1551803091-e20673f15770.jpg',
+  },
+]
+
+const lookbook = [
+  {
+    src:   '/images/swish/1483985988355-763728e1935b.jpg',
+    alt:   'Tailored editorial look in muted neutrals',
+    label: 'Tailoring',
+  },
+  {
+    src:   '/images/swish/1469334031218-e382a71b716b.jpg',
+    alt:   'Soft knitwear styled with wide trousers',
+    label: 'Knitwear',
+  },
+  {
+    src:   '/images/swish/1502716119720-b23a93e5fe1b.jpg',
+    alt:   'Evening dress under low light',
+    label: 'Evening',
+  },
+]
+
+const journal = [
+  {
+    category: 'Atelier',
+    title:    'Inside the Florence workshop',
+    deck:     'Where every Marlene coat is cut, basted and finished by hand over twenty-three days.',
+    byline:   'Words by Inez Vasquez',
+    src:      '/images/swish/1558769132-cb1aea458c5e.jpg',
+  },
+  {
+    category: 'Conversation',
+    title:    'A new vocabulary for womenswear',
+    deck:     'Creative director Lila Chen on quiet power, ease, and clothes that outlive a season.',
+    byline:   'Interview by The Editors',
+    src:      '/images/swish/1496747611176-843222e1e57c.jpg',
+  },
+  {
+    category: 'Care',
+    title:    'On keeping wool well',
+    deck:     'A short guide to brushing, airing and storing the pieces meant to be with you for years.',
+    byline:   'Words by Marta Engel',
+    src:      '/images/swish/1490481651871-ab68de25d43d.jpg',
+  },
+]
+
+// ---------------------------------------------------------------------------
+// Spec
+// ---------------------------------------------------------------------------
+
+export default {
+  route: '/templates/swish',
+
+  meta: {
+    title:       'Swish — Considered womenswear, season by season',
+    description: 'Swish is a ready-to-wear house designing collection-led womenswear, handfinished in Florence and Porto. Demonstrates editorial branding with Pulse.',
+    theme:       'light',
+    styles:      [
+      'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap',
+      '/pulse-ui.css',
+      '/swish.css',
+    ],
+    ogTitle:     'Swish — Autumn/Winter 2026',
+    ogImage:     '/images/swish/1490481651871-ab68de25d43d.jpg',
+  },
+
+  view: () => `
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
+    ${nav({
+      sticky:   true,
+      logo:     `<span class="swish-mark">Swish</span>`,
+      logoHref: '/swish',
+      links: [
+        { label: 'Collections', href: '/collections' },
+        { label: 'Lookbook',    href: '/lookbook'    },
+        { label: 'Atelier',     href: '/atelier'     },
+        { label: 'Journal',     href: '/journal'     },
+        { label: 'Stores',      href: '/stores'      },
+      ],
+      action: button({ label: 'Bag (0)', href: '/bag', variant: 'ghost', size: 'sm' }),
+    })}
+
+    <main id="main-content">
+      <section class="swish-hero" aria-label="Autumn Winter 2026 collection">
+        <div class="swish-hero__inner">
+          <div class="swish-hero__eyebrow">AW26 · Issue Nº07</div>
+          <h1 class="swish-hero__title">Quiet power, cut to last.</h1>
+          <p class="swish-hero__deck">The Autumn/Winter collection — a study in tailoring, weight and restraint. Forty-two pieces, made in small runs across Florence and Porto.</p>
+          <div class="u-flex u-gap-3 u-flex-wrap">
+            ${button({ label: 'Shop the collection', href: '/collections/aw26', variant: 'primary', size: 'lg' })}
+            ${button({ label: 'View lookbook',       href: '/lookbook',         variant: 'ghost',   size: 'lg' })}
+          </div>
+        </div>
+      </section>
+
+      ${section({
+        padding: 'lg',
+        class: 'swish-quote-section',
+        content: container({
+          size: 'md',
+          content: pullquote({
+            quote: 'A new vocabulary for modern womenswear — disciplined, quietly luxurious, refreshingly unfussy.',
+            cite:  'British Vogue',
+            size:  'lg',
+          }),
+        }),
+      })}
+
+      ${section({
+        padding: 'lg',
+        content: container({
+          content: `
+            <div class="swish-issue">Featured pieces · AW26</div>
+            ${grid({
+              cols:    4,
+              gap:     'lg',
+              content: featured.map(look).join(''),
+            })}
+          `,
+        }),
+      })}
+
+      ${section({
+        variant: 'alt',
+        padding: 'lg',
+        content: container({
+          content: `
+            <div class="swish-split">
+              <div class="swish-split__media">
+                <img
+                  src="/images/swish/1558769132-cb1aea458c5e.jpg"
+                  alt="A tailor working at the Florence atelier" />
+              </div>
+              <div class="swish-split__body">
+                <div class="swish-issue swish-issue--left">The Atelier</div>
+                <h2 class="swish-split__title">Made slowly, in two small houses.</h2>
+                <p>Tailoring is cut and finished in a converted convent in Oltrarno, Florence. Knitwear is shaped by a family-run mill outside Porto that has been spinning yarn for four generations.</p>
+                <p>Each collection is produced in runs of fewer than three hundred pieces — quiet, deliberate, and intended to be lived in for years.</p>
+                ${button({ label: 'Visit the atelier', href: '/atelier', variant: 'secondary' })}
+              </div>
+            </div>
+          `,
+        }),
+      })}
+
+      ${section({
+        padding: 'lg',
+        content: container({
+          content: `
+            <div class="swish-issue">Lookbook</div>
+            <div class="swish-strip">${lookbook.map(stripCell).join('')}</div>
+          `,
+        }),
+      })}
+
+      ${section({
+        variant: 'alt',
+        padding: 'lg',
+        content: container({
+          content: `
+            <div class="swish-issue">From the journal</div>
+            ${grid({
+              cols:    3,
+              gap:     'lg',
+              content: journal.map(journalCard).join(''),
+            })}
+          `,
+        }),
+      })}
+
+      ${section({
+        padding: 'lg',
+        content: container({
+          size: 'md',
+          content: `
+            <div class="swish-newsletter">
+              <h2 class="swish-newsletter__title">Letters from Swish</h2>
+              <p class="swish-newsletter__deck">Collection previews, atelier notes and private sale invitations — sent six times a year, never more.</p>
+              <form class="swish-newsletter__form" action="/subscribe" method="post" novalidate>
+                ${input({ name: 'email', label: 'Email address', type: 'email', placeholder: 'your@email.com', required: true, attrs: { autocomplete: 'email' } })}
+                ${button({ label: 'Subscribe', type: 'submit', variant: 'primary' })}
+              </form>
+            </div>
+          `,
+        }),
+      })}
+    </main>
+
+    ${footer({
+      logo:     `<span class="swish-mark">Swish</span>`,
+      logoHref: '/swish',
+      columns: [
+        {
+          title: 'Shop',
+          links: [
+            { label: 'AW26 Collection', href: '/collections/aw26' },
+            { label: 'Tailoring',       href: '/collections/tailoring' },
+            { label: 'Knitwear',        href: '/collections/knitwear' },
+            { label: 'Evening',         href: '/collections/evening' },
+          ],
+        },
+        {
+          title: 'House',
+          links: [
+            { label: 'Atelier', href: '/atelier' },
+            { label: 'Journal', href: '/journal' },
+            { label: 'Stores',  href: '/stores'  },
+            { label: 'Careers', href: '/careers' },
+          ],
+        },
+        {
+          title: 'Help',
+          links: [
+            { label: 'Contact',  href: '/contact'  },
+            { label: 'Shipping', href: '/shipping' },
+            { label: 'Returns',  href: '/returns'  },
+            { label: 'Care',     href: '/care'     },
+          ],
+        },
+      ],
+      legal: '© 2026 Swish Maison. All rights reserved.',
+    })}
+    <script src="${asset('/pulse-ui.js')}" defer></script>
+  `,
+}

package/docs/src/pages/templates.js

@@ -163,7 +163,7 @@ const TEMPLATES = [
     name:        'Mobile App Landing Page',
     route:       '/templates/mobile-app',
     description: 'A complete marketing site for a mobile app — nav, hero with phone mockup, feature grid, social proof stats, testimonials, pricing cards, FAQ accordion, download CTA, and footer.',
-    tags:        ['Landing Page', 'Marketing'],
+    tags:        ['Landing Page', 'Marketing', 'SaaS'],
     preview:     mobileAppPreview,
     stats: {
       'Accessibility': '100',
@@ -187,16 +187,326 @@ const TEMPLATES = [
       'JS':            '~4.2 kB',
     },
   },
+  {
+    name:        'Sparkys — Local Trades',
+    route:       '/templates/sparkys',
+    description: 'A sharp, trustworthy landing page for a local electrical contractor. Navy + amber palette with a split hero, stats panel, services grid, why-us section, testimonial, and contact strip.',
+    tags:        ['Local Business', 'Trades', 'Light Theme'],
+    preview:     `<div style="background:#f7f9fc;padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
+      <div style="height:8px;background:#062247;border-radius:3px;width:100%;margin-bottom:0.75rem"></div>
+      <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:0.75rem;min-height:80px">
+        <div style="display:flex;flex-direction:column;gap:5px;justify-content:center">
+          <div style="height:5px;background:#0a3160;border-radius:3px;width:50%"></div>
+          <div style="height:10px;background:rgba(15,23,42,0.8);border-radius:3px;width:90%"></div>
+          <div style="height:10px;background:rgba(15,23,42,0.8);border-radius:3px;width:75%"></div>
+          <div style="height:6px;background:rgba(15,23,42,0.3);border-radius:3px;width:80%;margin-bottom:4px"></div>
+          <div style="display:flex;gap:5px">
+            <div style="height:18px;background:#0a3160;border-radius:4px;width:60px"></div>
+            <div style="height:18px;background:rgba(10,49,96,0.15);border:1px solid rgba(10,49,96,0.3);border-radius:4px;width:50px"></div>
+          </div>
+        </div>
+        <div style="background:linear-gradient(160deg,#0a3160,#062247);border-radius:6px;padding:0.6rem;display:grid;grid-template-columns:1fr 1fr;gap:5px">
+          ${[1,2,3,4].map(() => `<div style="display:flex;flex-direction:column;gap:2px">
+            <div style="height:9px;background:rgba(255,255,255,0.7);border-radius:2px;width:70%"></div>
+            <div style="height:5px;background:rgba(244,167,33,0.5);border-radius:2px;width:90%"></div>
+          </div>`).join('')}
+        </div>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:0.75rem">
+        ${[1,2,3].map(() => `<div style="background:#fff;border:1px solid #d6deea;border-radius:5px;padding:0.4rem;display:flex;flex-direction:column;gap:3px">
+          <div style="width:18px;height:18px;background:#e3ecf7;border-radius:3px"></div>
+          <div style="height:5px;background:rgba(15,23,42,0.6);border-radius:2px;width:80%"></div>
+          <div style="height:4px;background:rgba(15,23,42,0.25);border-radius:2px;width:100%"></div>
+          <div style="height:4px;background:rgba(15,23,42,0.2);border-radius:2px;width:70%"></div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Accessibility': '100',
+      'Best Practices': '100',
+      'SEO':           '100',
+      'CLS':           '0.00',
+      'Theme':         'light',
+    },
+  },
+  {
+    name:        'Local Business',
+    route:       '/templates/local-business',
+    description: 'A warm, photo-forward landing page for a local service business — dog groomer, bakery, physio, tradesperson. Services grid, about section, testimonials, hours, and booking contact form.',
+    tags:        ['Local Business', 'Services', 'Light Theme'],
+    preview:     `<div style="background:linear-gradient(135deg,#fdf6ee,#fdebd0);padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
+      <div style="height:10px;background:#e8956d;border-radius:6px;width:60%;margin-bottom:0.75rem"></div>
+      <div style="height:22px;background:rgba(61,43,30,0.85);border-radius:4px;width:85%;margin-bottom:0.5rem"></div>
+      <div style="height:10px;background:rgba(61,43,30,0.35);border-radius:4px;width:75%;margin-bottom:1rem"></div>
+      <div style="display:flex;gap:0.5rem;margin-bottom:1.25rem">
+        <div style="height:30px;background:#c4632a;border-radius:14px;width:100px;flex-shrink:0"></div>
+        <div style="height:30px;background:rgba(61,43,30,0.15);border:1px solid rgba(61,43,30,0.2);border-radius:14px;width:90px;flex-shrink:0"></div>
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem">
+        ${[1,2,3].map(() => `<div style="background:#fff;border-radius:10px;padding:0.5rem">
+          <div style="height:8px;background:#e8956d;border-radius:4px;width:70%;margin-bottom:0.35rem"></div>
+          <div style="height:6px;background:rgba(0,0,0,0.12);border-radius:3px;width:90%"></div>
+          <div style="height:6px;background:rgba(0,0,0,0.08);border-radius:3px;width:70%;margin-top:0.25rem"></div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'warm',
+      'Theme': 'light',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'Portfolio',
+    route:       '/templates/portfolio',
+    description: 'A minimal dark portfolio for a creative professional — designer, developer, photographer, or architect. Work grid, about section with skill badges, and a clean contact panel.',
+    tags:        ['Portfolio', 'Personal', 'Minimal'],
+    preview:     `<div style="background:#0d0d10;padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
+      <div style="height:12px;background:rgba(255,255,255,0.7);border-radius:3px;width:55%;margin-bottom:0.75rem;font-size:0;"></div>
+      <div style="height:20px;background:rgba(255,255,255,0.85);border-radius:3px;width:80%;margin-bottom:0.5rem"></div>
+      <div style="height:8px;background:rgba(255,255,255,0.25);border-radius:3px;width:65%;margin-bottom:1.25rem"></div>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem">
+        ${[1,2,3].map(i => `<div style="background:rgba(255,255,255,0.05);border-radius:6px;overflow:hidden">
+          <div style="height:48px;background:rgba(255,255,255,0.08);"></div>
+          <div style="padding:0.4rem">
+            <div style="height:7px;background:rgba(255,255,255,0.4);border-radius:3px;width:80%;margin-bottom:0.3rem"></div>
+            <div style="height:6px;background:rgba(255,255,255,0.2);border-radius:3px;width:60%"></div>
+          </div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'minimal',
+      'Theme': 'dark',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'Event / Conference',
+    route:       '/templates/event',
+    description: 'A high-energy landing page for a conference, festival, or summit — speaker grid, day-by-day schedule accordion, venue section, sponsor logo marquee, and ticket CTA.',
+    tags:        ['Event', 'Conference', 'Bold'],
+    preview:     `<div style="background:linear-gradient(180deg,#05050a,#0d0829);padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem">
+        <div style="height:10px;background:rgba(255,255,255,0.8);border-radius:3px;width:60px"></div>
+        <div style="height:24px;background:#6366f1;border-radius:6px;width:80px"></div>
+      </div>
+      <div style="height:8px;background:rgba(99,102,241,0.6);border-radius:4px;width:50%;margin-bottom:0.5rem"></div>
+      <div style="height:20px;background:rgba(255,255,255,0.9);border-radius:4px;width:85%;margin-bottom:0.75rem"></div>
+      <div style="height:8px;background:rgba(255,255,255,0.3);border-radius:4px;width:70%;margin-bottom:1.25rem"></div>
+      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem">
+        ${[1,2,3,4].map(() => `<div style="background:rgba(255,255,255,0.06);border-radius:6px;padding:0.4rem;text-align:center">
+          <div style="height:14px;background:rgba(99,102,241,0.8);border-radius:3px;width:70%;margin:0 auto 0.25rem"></div>
+          <div style="height:6px;background:rgba(255,255,255,0.2);border-radius:3px;width:80%;margin:0 auto"></div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'bold',
+      'Theme': 'dark',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'Editorial / Magazine',
+    route:       '/templates/editorial',
+    description: 'A publication homepage — featured article hero, pullquote, article grid with category badges, newsletter signup, and footer. Serif typography throughout via the editorial vibe.',
+    tags:        ['Editorial', 'Publication', 'Blog'],
+    preview:     `<div style="background:#0a0a0c;padding:1.5rem;border-radius:8px;font-family:Georgia,serif">
+      <div style="height:8px;background:rgba(180,100,60,0.7);border-radius:2px;width:40%;margin-bottom:0.75rem"></div>
+      <div style="height:20px;background:rgba(255,255,255,0.9);border-radius:2px;width:90%;margin-bottom:0.35rem"></div>
+      <div style="height:20px;background:rgba(255,255,255,0.75);border-radius:2px;width:70%;margin-bottom:0.75rem"></div>
+      <div style="height:8px;background:rgba(255,255,255,0.3);border-radius:2px;width:80%;margin-bottom:1.25rem"></div>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem">
+        ${[1,2,3].map(() => `<div style="background:rgba(255,255,255,0.04);border-radius:2px;overflow:hidden">
+          <div style="height:44px;background:rgba(255,255,255,0.08);"></div>
+          <div style="padding:0.4rem">
+            <div style="height:6px;background:rgba(180,100,60,0.6);border-radius:2px;width:40%;margin-bottom:0.3rem"></div>
+            <div style="height:8px;background:rgba(255,255,255,0.5);border-radius:2px;width:90%;margin-bottom:0.25rem"></div>
+            <div style="height:8px;background:rgba(255,255,255,0.3);border-radius:2px;width:70%"></div>
+          </div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'editorial',
+      'Theme': 'dark',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'Swish — Fashion Ecommerce',
+    route:       '/templates/swish',
+    description: 'An editorial light-theme fashion brand — full-bleed hero with gradient overlay, lookbook grid, product strip, journal cards, and newsletter. Composites nav, section, grid, pullquote, and input.',
+    tags:        ['Ecommerce', 'Fashion', 'Editorial', 'Light Theme'],
+    preview:     `<div style="background:#faf9f7;padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
+      <div style="height:80px;background:linear-gradient(160deg,#2a2118,#5c4a3a);border-radius:6px;margin-bottom:0.75rem;display:flex;align-items:flex-end;padding:0.5rem">
+        <div>
+          <div style="height:6px;background:rgba(255,255,255,0.5);border-radius:2px;width:60px;margin-bottom:4px"></div>
+          <div style="height:12px;background:#fff;border-radius:2px;width:120px;margin-bottom:6px"></div>
+          <div style="height:20px;background:rgba(255,255,255,0.9);border-radius:14px;width:80px"></div>
+        </div>
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.4rem">
+        ${[1,2,3].map(() => `<div style="background:#ede9e3;border-radius:4px;overflow:hidden">
+          <div style="height:44px;background:rgba(90,70,50,0.15);"></div>
+          <div style="padding:0.3rem">
+            <div style="height:6px;background:rgba(0,0,0,0.4);border-radius:2px;width:80%;margin-bottom:3px"></div>
+            <div style="height:5px;background:rgba(0,0,0,0.2);border-radius:2px;width:50%"></div>
+          </div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'editorial',
+      'Theme': 'light',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'BookWorms — Independent Bookshop',
+    route:       '/templates/bookworms',
+    description: 'A warm editorial site for an independent bookshop — staff picks grid, press pullquote, two-column features, event list, and a centred CTA. Fraunces serif headings, light cream palette.',
+    tags:        ['Local Business', 'Retail', 'Editorial', 'Light Theme'],
+    preview:     `<div style="background:#fdf8f2;padding:1.5rem;border-radius:8px;font-family:Georgia,serif">
+      <div style="height:8px;background:#8b4513;border-radius:2px;width:30%;margin-bottom:0.75rem"></div>
+      <div style="height:18px;background:rgba(60,30,10,0.85);border-radius:2px;width:85%;margin-bottom:0.5rem"></div>
+      <div style="height:8px;background:rgba(60,30,10,0.3);border-radius:2px;width:70%;margin-bottom:1rem"></div>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0.4rem">
+        ${[1,2,3,4].map(() => `<div style="background:#f0e8da;border-radius:3px;overflow:hidden">
+          <div style="height:50px;background:rgba(139,69,19,0.2);"></div>
+          <div style="padding:0.3rem">
+            <div style="height:5px;background:rgba(60,30,10,0.5);border-radius:2px;width:90%;margin-bottom:3px"></div>
+            <div style="height:4px;background:rgba(60,30,10,0.2);border-radius:2px;width:70%"></div>
+          </div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'paper',
+      'Theme': 'light',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'Retro Wheels Co. — Classic Cars',
+    route:       '/templates/retrowheels',
+    description: 'A vintage 1970s enamel-sign aesthetic for a classic car dealer. Stat strip, testimonials, async booking enquiry form with form state, and Rockwell system fonts. Zero extra HTTP requests.',
+    tags:        ['Retro', 'Automotive', 'Form', 'Light Theme'],
+    preview:     `<div style="background:#f5f0e8;padding:1.5rem;border-radius:8px;font-family:'Courier New',monospace">
+      <div style="height:70px;background:linear-gradient(160deg,#1a1a2e,#2d2d4e);border-radius:4px;margin-bottom:0.75rem;display:flex;align-items:center;justify-content:center">
+        <div style="height:14px;background:rgba(205,160,60,0.9);border-radius:2px;width:100px"></div>
+      </div>
+      <div style="background:#1a1a2e;border-radius:4px;padding:0.5rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.4rem;margin-bottom:0.75rem">
+        ${[1,2,3].map(() => `<div style="text-align:center">
+          <div style="height:10px;background:rgba(205,160,60,0.8);border-radius:2px;width:60%;margin:0 auto 3px"></div>
+          <div style="height:6px;background:rgba(255,255,255,0.3);border-radius:2px;width:80%;margin:0 auto"></div>
+        </div>`).join('')}
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.4rem">
+        ${[1,2].map(() => `<div style="background:#fff;border:2px solid #1a1a2e;border-radius:3px;padding:0.4rem">
+          <div style="height:7px;background:rgba(26,26,46,0.7);border-radius:2px;width:90%;margin-bottom:4px"></div>
+          <div style="height:5px;background:rgba(26,26,46,0.3);border-radius:2px;width:70%"></div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'retro',
+      'Theme': 'light',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'Susuki Bento — Artist Portfolio',
+    route:       '/templates/suzukibento',
+    description: 'A dark brutalist gallery for a fine-art painter. Zero border-radius, asymmetric 12-column works grid, exhibition table, and press list. Pure HTML — no Pulse UI components. Mode B creative override.',
+    tags:        ['Portfolio', 'Art', 'Brutalist', 'Dark Theme'],
+    preview:     `<div style="background:#0e0e0e;padding:1.5rem;border-radius:0;font-family:system-ui,sans-serif;border:1px solid #222">
+      <div style="height:10px;background:#f2efe8;width:80%;margin-bottom:0.75rem"></div>
+      <div style="height:6px;background:#cc3300;width:40%;margin-bottom:1rem"></div>
+      <div style="display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:60px 40px;gap:3px">
+        <div style="background:rgba(242,239,232,0.1);grid-row:1/3"></div>
+        <div style="background:rgba(242,239,232,0.08)"></div>
+        <div style="background:rgba(204,51,0,0.15)"></div>
+        <div style="background:rgba(242,239,232,0.06);grid-column:2/4"></div>
+      </div>
+      <div style="margin-top:0.75rem;display:flex;gap:0.4rem">
+        ${[1,2,3].map(() => `<div style="height:4px;background:rgba(242,239,232,0.2);border-radius:0;flex:1"></div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'brutalist',
+      'Theme': 'dark',
+      'CLS':   '0.00',
+      'Mode':  'B — raw HTML',
+    },
+  },
+  {
+    name:        'Andy Pixel — Dev Blog',
+    route:       '/templates/andypixel',
+    description: 'An editorial blog article page — prose-width reading column, badge, avatar, custom code block, blockquote, author bio, and async newsletter subscribe. Orange accent on light cream.',
+    tags:        ['Blog', 'Editorial', 'Article', 'Light Theme'],
+    preview:     `<div style="background:#fdfaf6;padding:1.5rem;border-radius:8px;font-family:Georgia,serif">
+      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
+        <div style="width:24px;height:24px;background:#e65c00;border-radius:50%;flex-shrink:0"></div>
+        <div style="height:6px;background:rgba(0,0,0,0.3);border-radius:3px;width:80px"></div>
+        <div style="height:14px;background:#e65c00;border-radius:10px;width:40px;margin-left:auto"></div>
+      </div>
+      <div style="height:18px;background:rgba(0,0,0,0.8);border-radius:2px;width:90%;margin-bottom:0.5rem"></div>
+      <div style="height:18px;background:rgba(0,0,0,0.6);border-radius:2px;width:70%;margin-bottom:0.75rem"></div>
+      <div style="background:#1a1a1a;border-radius:6px;padding:0.5rem;margin-bottom:0.75rem">
+        <div style="height:5px;background:rgba(230,92,0,0.5);border-radius:2px;width:50%;margin-bottom:5px"></div>
+        ${[1,2,3].map(() => `<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;width:${70+Math.random()*20|0}%;margin-bottom:3px"></div>`).join('')}
+      </div>
+      <div style="height:6px;background:rgba(0,0,0,0.2);border-radius:2px;width:85%"></div>
+    </div>`,
+    stats: {
+      'Vibe':  'editorial',
+      'Theme': 'light',
+      'CLS':   '0.00',
+    },
+  },
+  {
+    name:        'Journey — App Landing Page',
+    route:       '/templates/journey',
+    description: 'A dark split-screen app landing page — sticky hero left, scrollable timeline right, frosted glass nav, gold accent, App Store badge. Pure HTML throughout. Mode B creative override.',
+    tags:        ['Landing Page', 'App', 'Dark Theme', 'Split-screen'],
+    preview:     `<div style="background:#0a0a0f;padding:0;border-radius:8px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:130px">
+      <div style="padding:1rem;display:flex;flex-direction:column;justify-content:center;gap:0.4rem;border-right:1px solid rgba(201,169,110,0.2)">
+        <div style="height:5px;background:rgba(201,169,110,0.5);border-radius:2px;width:50%;margin-bottom:2px"></div>
+        <div style="height:14px;background:rgba(240,237,232,0.9);border-radius:2px;width:90%"></div>
+        <div style="height:14px;background:rgba(240,237,232,0.6);border-radius:2px;width:70%"></div>
+        <div style="height:8px;background:rgba(240,237,232,0.25);border-radius:2px;width:80%;margin-top:2px"></div>
+        <div style="height:20px;background:rgba(201,169,110,0.8);border-radius:4px;width:80px;margin-top:4px"></div>
+      </div>
+      <div style="padding:0.75rem;display:flex;flex-direction:column;gap:0.4rem">
+        ${[1,2,3].map(() => `<div style="background:rgba(255,255,255,0.04);border-radius:4px;padding:0.35rem;border-left:2px solid rgba(201,169,110,0.4)">
+          <div style="height:5px;background:rgba(201,169,110,0.5);border-radius:2px;width:40%;margin-bottom:3px"></div>
+          <div style="height:4px;background:rgba(240,237,232,0.2);border-radius:2px;width:85%"></div>
+        </div>`).join('')}
+      </div>
+    </div>`,
+    stats: {
+      'Vibe':  'bold',
+      'Theme': 'dark',
+      'CLS':   '0.00',
+      'Mode':  'B — raw HTML',
+    },
+  },
 ]
 
 const content = `
   ${h1('Templates')}
-  ${lead('Production-ready Pulse templates built entirely from the <a href="/components">UI component library</a>. Every template ships with 100/100/100 Lighthouse scores (Accessibility, Best Practices, SEO) and zero CLS.')}
+  ${lead('Production-ready Pulse templates — from local business to editorial to app landing pages. Every template ships with 100/100/100 Lighthouse scores and zero CLS.')}
 
   <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-top:2rem">
     ${TEMPLATES.map(templateCard).join('')}
   </div>
 
+  ${section('design-directions', 'Design directions')}
+  <p>Templates give you the structure. The <a href="/meta#vibe">meta.vibe</a> system gives you the personality. Combine a template with a vibe to get a page that feels right for the product — not just correct.</p>
+  <p style="margin-top:0.75rem">When building a new site, ask: <em>what kind of business is this?</em> A dog groomer and a SaaS dashboard have the same sections but completely different aesthetics. Use the design directions guide (<code>pulse://guide/design-references</code>) to make that decision consciously.</p>
+
   ${section('adding', 'Suggesting a template')}
   <p>Have an idea for a template? <a href="https://github.com/invisibleloop/pulse-framework/issues" target="_blank" rel="noopener noreferrer">Open an issue on GitHub</a> with the layout you have in mind and we'll consider adding it to the library.</p>
 `
@@ -207,6 +517,7 @@ export default {
   meta: {
     title:       'Templates — Pulse',
     description: 'Production-ready Pulse templates. Every template uses only Pulse UI components and ships with 100/100/100 Lighthouse scores.',
+    theme:       'dark',
     styles:      ['/pulse-ui.css', '/docs.css'],
   },