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

36 lines
2.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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.