97 lines
5.3 KiB
Markdown
97 lines
5.3 KiB
Markdown
# 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
|
||
|
||
1. **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.
|
||
|
||
2. **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.
|
||
|
||
3. **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.
|
||
|
||
4. **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:**
|
||
1. Verdigris-on-plaster palette — neither blue-purple SaaS nor amber concierge variants already in the repo.
|
||
2. Fraunces serif + enamel double-rules — explicitly rejects icon-card grids and rounded-16px component libraries.
|
||
3. 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.
|