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.

Update: 09:41 PT (2026-06-15) — logo mark, errorlog skill fixes, Graphifyy eval

Three workstreams after the Bold-skin softening.

1. Official ACG logo (partial). Mike supplied the official wordmark ("Arizona ComputerGuru", the "G" = an askew power symbol) and noted the short logo is just that stylized G. Hand-built the short mark as a faithful SVG (multipage/assets/logo/acg-mark.svg, askew power symbol), wired it as the header brand mark (tints to each skin's accent via currentColor) + favicon across all 6 multipage pages + radical.html. NOT done: the full wordmark — it's an exact brand asset with custom type; can't save Mike's pasted raster from here and AI-recreation would be off-brand, so the real file needs to be dropped into multipage/assets/logo/ (color + a white/knockout for dark skins). Open design choice for Mike: official fixed wordmark sitewide vs. keep the per-skin adaptive lockup.

2. errorlog review -> skill hardening. 4 entries: #2 (py-on-Linux) + #3 ($CLAUDETOOLS_ROOT) already resolved on this machine; #4 (sync.sh submodule abort) fixed upstream by the GURU-BEAST-ROG coord broadcast (resolve_submodule_collisions; lands on next pull here). #1 (mailbox/FABB) was the open one: app fabb3421 is DELETED (AADSTS700016), and it held the only Mail.Send/ReadWrite/ Contacts scopes -> /mailbox + M365 contacts blocked, and the 3 legacy "old app only" tenants (Valleywide/Dataforth/Cascades) now have NO working remediation app. Hardened the docs: gotchas.md (DELETED + blast radius + URGENT migration), mailbox.md (BLOCKED/AADSTS700016 banner), errorlog.md. Mike's decision: Mail.Send belongs in the SUITE (real use = IR victim-notification during box takeovers) -> add Mail.Send to the Exchange Operator tier; implementation NOT executed (production multi-tenant app change, needs go + admin-consent). Also surfaced 2 stale for-mike.md items: Intune Manager needs signInAudience->AzureADMultipleOrgs PATCH (unblocks Cascades MDM); Mike's per-user Syncro key.

3. Graphifyy vs GrepAI evaluation (projects/graphifyy-eval/). Question: adopt Graphifyy (getzep-style code+doc knowledge graph, safishamsi/graphify, PyPI graphifyy) for day-to-day? Built a 3-arm protocol (A=GrepAI, B=Graphifyy, C=control) with a 10-query test set + rubric.

• Arm A (GrepAI): 18/20, ~3k ctx tokens/query, already indexed. 2 misses: phrasing-sensitivity (C1) and stale-duplicate retrieval (D2 pulled superseded kittle-design).
• Arm B (Graphifyy): code extraction = AST (instant/free/local, but redundant with GrepAI). Doc/non-code = generative LLM per chunk. Local ollama (apples-to-apples, since GrepAI uses ollama embeddings) was IMPRACTICAL: qwen3:8b DNF 20 files/10min ("too small for JSON"), codestral:22b got 1 of 2 chunks on 3 files/6min. Claude backend (vault gururmm anthropic key, ~$0.20 real spend) WORKED: 3 docs in 120s, but graphify reported ~$0.068/doc (recurring on an active repo), and the decisive finding: graphify query returns the concept/relationship MAP, NOT the content values (the prices were absent) -> you still Read the file for facts. GrepAI returns content directly.
• Verdict: keep GrepAI, do not adopt Graphifyy. Cheap part duplicates GrepAI; unique part (doc/relationship graph) is impractical local / costs recurring $ cloud / hands a map not facts. Revisit only with GPU+fast local generative model, or a recurring architecture-relationship need worth a metered ingest budget. Full writeup: projects/graphifyy-eval/FINDINGS.md.
• Cleanup done: GrepAI re-enabled in settings.local.json; graphifyy + openai uninstalled (anthropic kept); scratch graphs deleted; PROTOCOL/results/FINDINGS retained.

Note: untracked discord-dm skill/command/scripts + 2 feedback memories present in the tree are fleet additions (not this session's work); auto-sync sweeps them.