claudetools/projects/acg-website-showcase/session-logs/2026-06/2026-06-14-mike-acg-website-multi-skin-build.md

User

• User: Mike Swanson (mike)
• Machine: GURU-5070
• Role: admin

Session Summary

Built a new local showcase website for Arizona Computer Guru (ACG) from scratch as a "what we can do" test piece, driven by a multi-AI design pipeline (Grok for imagery and design origination, Gemini for design-weight decisions and review, the Grok+Gemini "quorum" for code/design review, the impeccable skill for craft + critique). All work lives in projects/acg-website-showcase/. Nothing was deployed; everything is served locally via py -m http.server.

Phase 1 produced a single-page flagship in the "Sonoran Ledger" art direction (warm cream paper, bookkeeper's-ledger rhythm, mono numerals, burnt-amber accent). The direction was chosen by a Grok+Gemini panel (both ranked it #1 over "Desert Threshold" and "The Workbench") and confirmed by Mike. Grok generated four photographic assets (hero desk + ledger, stucco windowsill, trust still-life, paper texture). The site (self-contained HTML/CSS/vanilla-JS) shipped a light+dark theme, an interactive IT-cost calculator (defaults compute to $952/mo = 22 endpoints x $26 + $380 Standard support), services, published GPS pricing, FAQ, and contact. Grok+Gemini reviewed it; all real defects were fixed (mobile nav hamburger, calculator clamp/handoff, AA contrast on small text, table overflow, 44px touch targets, FAQ ARIA, theme FOUC). Gemini's vision model gave a final polish pass. This single-page version was then PARKED at Mike's request (kept as a reusable pattern for other Guru-related sites).

Phase 2 built the multipage version (Home, Services, Pricing, Calculator, About, Contact) using impeccable craft (brand register, authored PRODUCT.md + DESIGN.md, enforced house laws the single-page broke: no em dashes, no side-stripe accent borders, semantic headings, imagery on every page). Three more Grok images were generated (patch panel, handshake, Tucson storefront). The Grok+Gemini quorum code-reviewed all 8 files; fixes applied (real semantic h1/h2/h3, AA contrast both themes, no-JS .reveal fallback, mobile nav overflow, cross-page calculator->contact estimate handoff via sessionStorage incl. middle-click via pointerdown, narrow-phone calc stacking, footer unification). Mike declared multipage the winner for ACG, single-page kept for other sites.

Phase 3 explored alternate themes because Mike disliked the warm "paper" aesthetic. The token-based design system was extended into a live skin switcher. "Midnight Concierge" (cool dark-premium slate) was added as skin #2. Mike still felt it was "the paper aesthetic" (the shared calm/editorial STRUCTURE, not just color). Grok was then asked to originate a fresh design: it produced "Verdigris Gate" (oxidized-copper green on plaster, Fraunces serif + Source Sans 3 + IBM Plex Mono, enamel double-rule frames, gate-rail header), built as skin #3 with its own cool documentary photography and per-skin image swap. Run through impeccable + the quorum; fixes applied (font weights 600/700, ink-3 AA on surface-2, white-on-teal button, image de-dup, stale label).

Phase 4: Mike said "be radical." Built a standalone poster-brutalist concept ("Blowout", radical.html + radical.css): Anton 13rem type, signal-orange drench, scrolling marquee, blowout pricing numerals, full-bleed orange CTA. Ran it through the quorum + impeccable; consensus was it overshoots trust for a B2B MSP. Mike said "dial it back a little, stick with multipage." The dial-back was implemented as a fourth skin "Bold" on the existing multipage (reuses all accessible markup/calculator/nav): Anton uppercase headlines capped at ~5.5rem, orange restricted to accents + buttons + one highlight, no marquee (uses the multipage's real trust strip), moderate pricing numerals, grayscale documentary photos, thick 2px brutalist borders, light+dark. The standalone full-radical page is retained for comparison.

End state: the multipage site has a 4-skin switcher (Paper / Midnight / Verdigris / Bold), each in light+dark, served at http://localhost:4328/. The single-page Sonoran Ledger lives at the project root (port 4327). All skins are scoped by html[data-skin=...]; none break the others.

Key Decisions

• Self-contained static (HTML/CSS/vanilla-JS), no framework. Chosen for trivial local serving and zero deploy friction for a showcase. Calculator + theme + skins all vanilla.
• Token-based design system from the start. Made the later skin system (4 themes x light/dark) a CSS-variable swap rather than a rebuild. Skins scoped to html[data-skin] so they never collide (verified by the quorum).
• Skin switcher over separate builds. When Mike wanted alternate looks, added a header swatch button cycling skins (persisted in localStorage, set before first paint to avoid FOUC) instead of forking the site per theme.
• "Dial back" implemented as a skin on the multipage, not a 6-page rebuild. "Stick with multipage" + "dial back" = make the tempered radical a 4th skin; the calm structure inherently tempers the poster radicalism and reuses all accessible markup.
• No fabricated testimonials. The prior azcomputerguru.com prototype was flagged for placeholder named testimonials; this build deliberately omits them and builds proof from verifiable facts. Contact form is a demo (not wired to a mailbox); disclaimers say so.
• impeccable house laws enforced on the multipage (no em dashes, no side-stripe accent borders, semantic headings) to make it a genuinely distinct variant from the single-page.
• Pricing/content sourced from projects/msp-pricing + the MSP Buyers Guide, not invented (GPS $19/$26/$39, support plans, block time, hosting/365/VoIP, brand voice).

Problems Encountered

• Grok image text rendering: the first Verdigris "about" image rendered a legible invented business name ("ACE Refrigeration") on an enamel sign, unusable on an ACG page. Regenerated as a text-free vintage service counter (parts drawers + brass bell + logbook).
• Headless screenshot hangs: an early multi-shot Edge batch stalled (~profile lock); resolved by taskkill //F //IM msedge.exe between shots and a per-shot timeout 50. Edge --screenshot needs an ABSOLUTE Windows path (via cygpath -w) or it silently fails.
• Dark-theme screenshots: headless has no stored localStorage; forced dark via --blink-settings=preferredColorScheme=0, and forced a skin via a tiny _seed.html that sets localStorage then location.replaces to the target page.
• Gemini vision (image-analyze) defaulted to OCR on the rendered pages twice instead of giving a design verdict; relied on own design-director read + the two code reviewers.
• impeccable deterministic detector unavailable on this machine (detect.mjs bundle not present); used the Grok+Gemini quorum as the two independent assessments instead.
• perl em-dash strip needed -CSD (UTF-8) flags; first pass missed the multi-byte char.
• Quorum-found defects (all fixed): faux-bold from loading Fraunces/IBM Plex Mono at 400;500 but using 600/700; --ink-3 failing AA on the surface-2 header band; light primary-button contrast (~4.4:1) fixed with white on-accent; .reveal hiding content if JS fails (gated on a .js class).

Configuration Changes

New project tree projects/acg-website-showcase/:

Single-page (parked, port 4327):

• index.html, css/styles.css, js/app.js
• assets/images/{hero,story,trust,paper}.png (Grok-generated)
• DESIGN.md, README.md, serve.ps1
• design/ — pipeline artifacts (Grok/Gemini prompts+responses, reviews, screenshots)

Multipage (winner, port 4328) multipage/:

• index.html, services.html, pricing.html, calculator.html, about.html, contact.html
• css/styles.css (Sonoran Ledger system + Midnight + Verdigris + Bold skins), css/radical.css (standalone Blowout concept)
• js/app.js (theme, 4-skin switcher + per-skin image swap, calculator, FAQ, mobile nav, reveal)
• radical.html (standalone full-radical poster concept)
• assets/images/ (Sonoran/warm set) + assets/images/verdigris/ (cool documentary set)
• PRODUCT.md, DESIGN.md, serve.ps1, design/ (prompts, quorum reviews, screenshots)

No changes outside the project dir. (Pre-existing unrelated working-tree edits to .claude/memory/MEMORY.md, errorlog.md, wiki/clients/peaceful-spirit.md, .claude/skills/remediation-tool/scripts/get-token.sh were present at session start and left untouched.)

Credentials & Secrets

None created, discovered, or used. The contact forms are non-functional demos. No vault operations.

Infrastructure & Servers

• Local static preview only: py -m http.server 4327 (single-page root), py -m http.server 4328 (multipage). Launch helpers: serve.ps1 in each dir.
• Grok CLI (grok skill, GURU-5070) used for image generation + design origination.
• Gemini CLI (agy skill, GURU-5070) used for design-weight + reviews.
• No production hosting touched. The real ACG site (Astro) remains at clients/azcomputerguru.com/ and on IX Web Hosting — NOT modified.

Commands & Outputs

• Image gen: bash .claude/skills/grok/scripts/ask-grok.sh image "<prompt>" <out.png>
• Text/design: bash .claude/skills/grok/scripts/ask-grok.sh text --prompt-file <f>
• Gemini review: bash .claude/skills/agy/scripts/ask-gemini.sh review-files -i "<instr>" <files...>
• Headless screenshot (works): Edge --headless=new --screenshot="$(cygpath -w OUT)" --window-size=W,H --virtual-time-budget=6000; dark via --blink-settings=preferredColorScheme=0.
• Calculator math verified: default 22 endpoints x $26 (GPS-Pro) + $380 (Standard) = $952/mo.
• node --check js/app.js clean after every JS change. All 6 multipage pages return HTTP 200.

Pending / Incomplete Tasks

• Decision pending: Mike to react to the "Bold" skin (right amount of dial-back, or nudge orange/type). Open option to run the quorum + impeccable on the Bold skin itself (prior reviews were on the un-tamed radical).
• Lock a final direction, then this becomes the candidate for the real azcomputerguru.com redesign (would need: real testimonials/proof, a working contact backend, light variant polish, and migration off the demo disclaimers).
• Not started: deploy/build pipeline (intentionally local-only for now).
• Single-page Sonoran Ledger retained as a reusable pattern for other Guru-related sites.

Reference Information

• Project root: D:/ClaudeTools/projects/acg-website-showcase/
• Single-page: index.html (Sonoran Ledger, parked) — serve on :4327
• Multipage: multipage/ (4-skin: Paper/Midnight/Verdigris/Bold) — serve on :4328
• Full-radical concept: multipage/radical.html
• Design pipeline artifacts + quorum reviews: */design/*.md
• Pricing source: projects/msp-pricing/ + projects/msp-tools/quote-wizard/frontend/src/lib/pricing-data.ts
• Brand voice source: projects/msp-pricing/marketing/MSP-Buyers-Guide-Content.md
• Prior/real ACG site article: wiki/clients/azcomputerguru.com.md (Astro, separate)
• ACG contact (from materials): 520.304.8300, info@azcomputerguru.com, 7437 E. 22nd St, Tucson AZ 85710

Update: 05:59 PT (2026-06-15) — Quorum + impeccable on Bold, then premium softening

Ran the Grok+Gemini quorum and the impeccable critique on the Bold skin specifically (prior reviews had been on the un-tamed radical.html concept). Verdict: the dial-back landed (credible "inked poster authority", not loud, not bland). The two models split on one judgment: Grok found it slightly loud on the type axis (uppercase Anton on functional labels); Gemini found the relentless 2px borders + zero radius too "heavy-construction / logistics" for a high-touch concierge MSP.

Applied the union of concrete quorum defects to the Bold skin (css/styles.css, html[data-skin="bold"] block):

• Light primary button/flag failed AA (white #FBF7F0 on #E24A12 ~3.8:1) → --on-accent now #16120F (dark ink on orange, ~4.8:1).
• Service names + FAQ questions were uppercase Anton (condensed caps smear at UI sizes) → removed from the uppercase block; now sentence-case in Hanken Grotesk 700. Headlines (h1/h2/tier__name/brand__name) stay Anton uppercase.
• Global img grayscale filter → scoped to .hero__frame/.story__img/.page-head--img/ .office-figure img only (future logos/badges won't be desaturated).
• Removed the bold .nav__link[aria-current] override: it was defeated by the shared multipage rule on desktop AND broke the mobile dropdown reset. The shared rule already renders bold's orange underline and respects the mobile reset.
• Added .home-pricing to the bold section-border selector (homepage pricing teaser had no frame). Unified the rate-card inner dividers with the frame (was a soft-gap glitch).
• Bumped light --ink-3 to #5C544B for small-muted-text AA.

Then, per Mike's call (Gemini's read won), softened Bold toward premium:

• All Bold section/frame borders 2px → 1px.
• Restored the base 2px radius on buttons/cards/inputs (removed the zero-radius override).
• Lightened the under-element shadow (0 2px 0 ink → 0 1px 0 rule).
• Added breathing room: tier padding 1.5→1.75, calc panels →1.75, service rows +.

Result: Bold keeps its identity (Anton headlines, near-black #0C0A09 / bone #F4EDE1 canvas, signal-orange accents, grayscale documentary photos) but reads refined/high-touch rather than industrial. Re-rendered + verified home/pricing/contact in both modes; calculator still computes $952/mo; node --check js/app.js clean.

State: multipage 4-skin switcher (Paper / Midnight / Verdigris / Bold) at :4328, all in light+dark. Bold is the dialed-back-then-premium-softened radical. Open: Mike to confirm Bold is the keeper, or pick among the four skins for the real azcomputerguru.com redesign.