Files

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

5.3 KiB

Raw Blame History

1. NAME

Verdigris Gate

2. CONCEPT

Reference object: the oxidized copper hardware on a maintained 1950s Tucson stucco storefront — whitewashed plaster, brushed aluminum door pulls weathered to verdigris, hand-painted enamel service signage. Premium through material honesty, not dashboard gloss. Concierge IT is the gate you walk through: labeled, direct, locally kept. The site should feel like that building’s fascia and service counter, not a SaaS landing template.

3. COLOR TOKENS

Accent hue: Verdigris (#2F7A6B light / #4DA896 dark). Copper oxidation is Tucson-native (pipes, roof flashings, desert hardware) and signals stewardship and longevity — not alarm-red security or fintech amber. Used ≤10%: primary CTA, active nav rule, calculator totals, one pull-quote bar.

Light (plaster day)

Role	Value
paper	`#E9EDEA`
surface	`#FFFFFF`
surface-2	`#DFE5E1`
ink	`#1C2421`
ink-2	`#3F4F49`
ink-3	`#5C6B65`
rule	`rgba(28, 36, 33, 0.12)`
accent	`#2F7A6B`
accent-ink	`#1F5F52`
on-accent	`#F0F7F5`

Dark (wet courtyard night)

Role	Value
paper	`#141A18`
surface	`#1C2421`
surface-2	`#25302C`
ink	`#E4EBE8`
ink-2	`#A8B5AF`
ink-3	`#7A8A84`
rule	`rgba(228, 235, 232, 0.10)`
accent	`#4DA896`
accent-ink	`#6BC4B0`
on-accent	`#0D1614`

All body pairs (ink on paper, ink-2 on surface) exceed 4.5:1. accent-ink is for text links and inline emphasis on backgrounds, never large accent fills.

4. TYPOGRAPHY

Display: Fraunces (Google Fonts) — weights 500 (H1), 400 (H2–H3). Soft, old-metal signage energy; breaks SaaS sans uniformity without ledger nostalgia.

Body: Source Sans 3 — 400 body, 600 labels/nav. Humanist, plainspoken; reads kind and direct at 18px/1.6.

Mono: IBM Plex Mono — 400 inputs, 500 calculator totals and pricing figures. Clinical where money is discussed.

Hierarchy: One Fraunces H1 per page (max 48px). Sections lead with Source Sans 600 uppercase tracked labels (11px, letter-spacing: 0.08em, ink-3) — enamel caption style. No hero metrics; trust copy is body-scale, not billboard numbers.

5. SIGNATURE MOVES

Enamel double-rule frames — Pricing tiers, calculator shell, and contact form sit inside a 1px rule border with a second 1px border 4px inset (no outer glow). border-radius: 2px everywhere. Max corner radius site-wide: 4px on buttons only.
Gate-rail header — Nav lives on a full-width surface-2 band with a CSS brushed-metal grain (repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px) in light; 0.06 opacity in dark). Not floating, not sticky glass.
Verdigris underscore navigation — Links are ink; hover/active = 2px accent bottom border. One filled accent button per viewport (primary CTA). Secondary actions are outlined rule borders, never ghost gradients.
Calculator as meter tape — The estimator is a vertical stack on surface-2, top edge perforated via radial-gradient(circle, paper 30%, transparent 31%) spaced 8px. Live total in IBM Plex Mono 28px accent-ink on paper strip — receipt, not widget card. Sliders are 2px track + square 12px thumb (no pill toggles).

Motion: 180ms ease on border-color and underscore only. No parallax, no blob drift. Theme toggle cross-fades color/background-color 200ms.

6. IMAGERY

Photography direction: Documentary maintenance photography — neutral-to-cool white balance, side light, shallow depth of field, desaturated greens and plaster whites, verdigris as the only saturated hue in frame. No lens flare, no neon, no server-room blue wash.

Hero: Close-up of a verdigris-patinated copper gate latch on white stucco, morning side light, latch sharp / stucco soft blur. Conveys “local gatekeeper,” not “cyber shield.”
Services section: Hands labeling a network patch panel with handwritten tags — neat, human, transparent process.
About section: Weathered hand-painted enamel “Computer Guru” sign on a Tucson storefront, cared-for not glossy, partial stucco and sidewalk visible.

Reuse verdict: Replace golden-hour desk-with-ledger (too Sonoran Ledger), replace generic handshake (stock trust cliché). Adapt stucco storefront only if re-shot cooler/plaster-toned with enamel-sign framing; do not reuse warm golden-hour grade.

7. ANTI-SLOP

Why this won’t read AI-generated:

Verdigris-on-plaster palette — neither blue-purple SaaS nor amber concierge variants already in the repo.
Fraunces serif + enamel double-rules — explicitly rejects icon-card grids and rounded-16px component libraries.
Calculator-as-meter-tape and gate-rail nav are site-specific behaviors, not interchangeable hero-metric templates.

Biggest risk: Fraunces + muted green reads boutique wellness spa, not MSP.

Avoid it: Keep photography industrial (patch panels, hardware, signage). Use IBM Plex Mono and plain-dollar copy on Pricing. No leaf motifs, no “wellness” whitespace — use surface-2 bands and double-rules to maintain civic/commercial weight. Fraunces only on headlines; body stays Source Sans at 18px minimum.

5.3 KiB Raw Blame History Unescape Escape