Files
claudetools/projects/acg-website-showcase/DESIGN.md
Mike Swanson c5d4d3527c sync: auto-sync from GURU-5070 at 2026-06-14 20:04:14
Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-14 20:04:14
2026-06-14 20:05:02 -07:00

2.1 KiB
Raw Blame History

Arizona Computer Guru — Website Showcase

Single-page, hand-built static site (HTML/CSS/vanilla JS). A local "what we can do" showcase.

Art direction: SONORAN LEDGER

Chosen by Grok+Gemini design panel (both ranked #1), confirmed by Mike (human review 2026-06-14). Concept: a trusted local bookkeeper's ledger for the web. Pricing, the calculator, and the concierge story are treated as a permanent, transparent record — the design embodiment of "honest numbers, no games." Warm paper, precise rules, mono numerals.

Design system (locked)

  • Light: paper #F7F3EB, surface #EDE6D9, ink #2A2521, ink-2 #5A5148.
  • Dark: paper #1C1814, surface #2A2520, ink #E8DFCE, ink-2 #C4B8A3.
  • Accent (the "ink"): amber #F2922E for marks/underlines/button fill (dark text on it).
    • Orange-on-cream TEXT fails AA at the bright value → orange text/links on light use #BD5A00.
    • On dark, accent text uses #F2A24E (passes AA on #1C1814).
  • Type: Barlow Condensed (600700) display + "since 2001" lockup; Lexend body; JetBrains Mono for ALL prices, calculator output, endpoint counts.
  • Baseline: strict 24px vertical rhythm. Faint ledger rulings align to Lexend line-height.
  • Radius: 02px only. Sharp = precise/manual.

Anti-slop rules (Gemini, non-negotiable)

  1. Orange = highlighting ink — active data, underlines, primary CTA only. Never big blocks/generic icons.
  2. Zero generic iconography (no FontAwesome/Heroicons). CSS-drawn precision marks / hardware photos only.
  3. Ledger grid — everything snaps to 24px baseline; rulings align to body line-height.
  4. Data as design — calculator is the centerpiece, not a popup. Large mono "stamped" totals.
  5. No over-smoothed radius — sharp corners.

Pipeline

Grok (imagery + direction input) → Gemini (design weight) → human pick → build → multi-AI design+code review → human-touch review → publish locally.

Content integrity

No fabricated named testimonials (prior site flagged this as a launch blocker). Proof is built on verifiable facts; any testimonial slot is clearly marked representative.