monetize: per-site unique visual identity — load each site's Google Fonts + slug-hashed style presets (hero angle, heading treatment, panel radius, sans pairing) so sites aren't a template farm (TK-11322)

38fefaeb1e2490daef8346f66b166526120b56a7 · 2026-09-09 23:21:15 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M shared/render.js

Diff

commit 38fefaeb1e2490daef8346f66b166526120b56a7
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Sep 9 23:21:15 2026 -0700

    monetize: per-site unique visual identity — load each site's Google Fonts + slug-hashed style presets (hero angle, heading treatment, panel radius, sans pairing) so sites aren't a template farm (TK-11322)
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 shared/render.js | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/shared/render.js b/shared/render.js
index 2a507ed..c8d165a 100644
--- a/shared/render.js
+++ b/shared/render.js
@@ -513,10 +513,53 @@ function head(cfg, title, desc, path, canonicalOverride, bodyClass) {
 ${ogImg}${faviconTag(cfg)}
 ${gtagSnippet(cfg.ga4)}${gtmHeadSnippet(cfg.gtm)}${adsenseHead(cfg)}<style>:root{--top-fg:#fff}</style>
 <script>(function(){var s=localStorage.getItem('${cfg.slug}_theme');if(s)document.documentElement.dataset.theme=s;})();</script>
-<style>${css(cfg)}</style>
+<style>${css(cfg)}</style>${cfg.monetize ? uniqueStyle(cfg) : ''}
 </head><body${bodyClass ? ` class="${esc(bodyClass)}"` : ''}>${gtmNoscript(cfg.gtm)}`;
 }
 
+/* uniqueStyle — makes each monetize site look DISTINCT (not a template farm, which
+ * is both an AdSense doorway/scaled-content rejection risk and just looks cookie-cutter).
+ * (1) Actually LOADS the site's serif + a rotated display sans from Google Fonts —
+ * the configs already vary the serif family but nothing loaded them, so every site
+ * fell back to system serif and looked identical. (2) Applies one of several per-site
+ * STYLE PRESETS (heading treatment, hero gradient angle, panel radius, nav accent),
+ * chosen deterministically from the slug so a site's look is stable but differs from
+ * its neighbours. Pure additive CSS layered over css()/monetizeCss(). */
+function uniqueStyle(cfg) {
+  const slug = cfg.slug || cfg.domain || '';
+  let h = 0; for (let i = 0; i < slug.length; i++) h = (h * 31 + slug.charCodeAt(i)) >>> 0;
+  // display serif families we support (must match what configs reference) + a rotated sans
+  const SERIFS = { cormorant: 'Cormorant+Garamond:wght@400;500;600', playfair: 'Playfair+Display:wght@400;600;700', bodoni: 'Bodoni+Moda:wght@400;500;600', fraunces: 'Fraunces:wght@400;500;600', libre: 'Libre+Baskerville:wght@400;700', dmserif: 'DM+Serif+Display' };
+  const SANS = [ 'Inter:wght@400;500;600', 'Work+Sans:wght@400;500;600', 'DM+Sans:wght@400;500', 'Space+Grotesk:wght@400;500', 'Libre+Franklin:wght@400;500;600', 'Archivo:wght@400;500;600' ];
+  const serifFam = /cormorant/i.test(cfg.theme.serif || '') ? 'cormorant'
+    : /playfair/i.test(cfg.theme.serif || '') ? 'playfair'
+    : /bodoni/i.test(cfg.theme.serif || '') ? 'bodoni'
+    : ['fraunces', 'libre', 'dmserif', 'cormorant'][h % 4];
+  const serifStack = { cormorant: "'Cormorant Garamond',Georgia,serif", playfair: "'Playfair Display',Georgia,serif", bodoni: "'Bodoni Moda',Didot,serif", fraunces: "'Fraunces',Georgia,serif", libre: "'Libre Baskerville',Georgia,serif", dmserif: "'DM Serif Display',Georgia,serif" }[serifFam];
+  const sansKey = SANS[h % SANS.length];
+  const sansFam = "'" + sansKey.split(':')[0].replace(/\+/g, ' ') + "',-apple-system,system-ui,sans-serif";
+  const fontsHref = `https://fonts.googleapis.com/css2?family=${SERIFS[serifFam]}&family=${sansKey}&display=swap`;
+  // per-site presets
+  const heroAngle = [120, 135, 160, 100, 200, 145][h % 6];
+  const headTransform = ['none', 'uppercase', 'none', 'uppercase'][(h >> 2) % 4];
+  const headSpacing = headTransform === 'uppercase' ? '.06em' : (['0', '.01em', '-.01em'][(h >> 3) % 3]);
+  const headWeight = [500, 600, 700, 400][(h >> 4) % 4];
+  const panelRadius = [10, 4, 14, 2][(h >> 5) % 4];
+  const navSticky = (h % 2) ? 'sticky' : 'static';
+  return `
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="${fontsHref}">
+<style>
+:root{--serif:${serifStack};--sans:${sansFam};}
+.m-hero{background:linear-gradient(${heroAngle}deg,var(--accent) 0%,var(--bg) 62%)!important;}
+[data-theme=dark] .m-hero{background:linear-gradient(${heroAngle}deg,var(--accent) 0%,#0c0a08 70%)!important;}
+.m-hero h1,.m-brand,.m-panel>summary,.m-sec h2,.m-article .lede,.m-legal h1{font-family:var(--serif)!important;}
+.m-hero h1{text-transform:${headTransform};letter-spacing:${headSpacing};font-weight:${headWeight};}
+.m-panel{border-radius:${panelRadius}px!important;}
+.m-nav{position:${navSticky}!important;}
+</style>`;
+}
+
 function jsonld(cfg) {
   const org = {
     '@context':'https://schema.org','@type':'Organization',

← 92fa549 monetize sites: embed 20-pattern named grid + /img proxy + p · back to Dw Domain Fleet · fleet: Instagram embed on homePage for patterndesignlab + ho 830fbd9 →