# Venture Home — Design System Spec

> Source: https://www.venturehome.com/ (captured 2026-07-21, live DOM inspection + raw page source)
> Stack: WordPress (Anchour agency build, `wp-block-anchour-*` components), Bagoss Standard + Neue Haas Grotesk (Adobe/paid), hero video loop
> Asset completeness: complete — inline logo SVG extracted (white + derived ink variant), 9 photos, BBB badge. Hero video not mirrored (still photography stands in).

## At-a-glance

- **Business:** Venture Home (formerly Venture Solar) — whole-home solar: panels + battery storage + EV charging + smart electrical panels + microinverters, sold as one system
- **Geography:** Northeast US, 9 states (NY, MA, CT, ME, MD, and neighbors); local W-2 crews, no subcontractors
- **Audience:** homeowners frustrated with utility bills; premium-consumer register, not contractor-corporate
- **Voice anchors (verbatim):**
  - "Break up with your electric bill"
  - "…the whole-home solar energy system your future self will thank you for."
  - "East Coast utility companies aren't our biggest fans."
  - "15,000+ systems installed · 1,500+ 5-star reviews · Local W-2 crews · Service built in"
  - "Power your life, your way."
  - "Traditional electric could never be this good to you."
  - "Solar battery backup. When the grid goes down, you don't."
  - "We make switching to solar easy and affordable"
- **Register:** confident, benefit-led, lightly cheeky. Sells the *outcome* (independence from the utility), not the hardware. Consumer-brand energy — closer to a DTC brand than a contractor site.

## 🎯 Core assets (one-class citizens)

### Logo
- `assets/venture-home-brand/venture-home-logo.svg` — white wordmark "venturehome" + mint house mark (`#73FFC6`), extracted inline from live header. viewBox 0 0 231 33. **Use on dark grounds.**
- `assets/venture-home-brand/venture-home-logo-ink.svg` — derived ink variant (`#16130f`) for light grounds.
- Forbidden: recoloring the mint mark; stretching; placing white version on light grounds.

### Photography system
Real photography is the brand's mood engine — warm, sunlit, lifestyle-first (foliage, golden hour, real crews, real installs). Never stocky blue-sky-panel clichés.

| Asset | Type | Role | Score |
|---|---|---|---|
| hero-why-solar.webp | sunlit residential | hero / statement ground | 9 |
| install-maine-17.webp | install, golden light | hero alt / gallery | 9 |
| install-maine-91.webp | install | gallery / split | 8 |
| crew-roof-install.webp | W-2 crew on roof | trust band / about | 8 |
| battery-back-porch.webp | Tesla battery lifestyle | battery landing | 8 |
| ev-wall-connector.webp | EV charger closeup | EV landing | 7 |
| smart-panel-lifestyle.webp | SPAN panel lifestyle | system explainer | 7 |
| home-evening.webp | home at dusk | dusk sections / cta | 8 |
| solar-retrofit.webp | retrofit roof | services | 7 |
| badge-bbb-a-plus.svg | BBB A+ badge | trust strip | — |

## 🎨 Color tokens (extracted verbatim)

Live-DOM extraction, frequency-ranked: `#231f20` (body ink) · `#2fbf71`-family green CTA (`#37d07f` observed on hover state) · `#73FFC6` (logo mint) · white grounds · warm-paper section tints.

```css
--brand: #2fbf71;          /* Venture green — CTA. Immutable. */
--brand-deep: #1e9d59;     /* derived hover */
--brand-bright: #73ffc6;   /* logo mint — on-dark accents ONLY. Immutable. */
--accent-warm: #f4b52a;    /* sunlight gold — stats, star ratings. Derived from photo mood. */
--ink-deep: #16130f;       /* headline / dark bands. */
--ink: #231f20;            /* body ink. Immutable (extracted). */
--bg-warm: #f6f4ee;        /* warm paper band. */
```

Deliberate call: green lives on **warm paper + white**, not near-black — sidesteps the AI-default "black + acid green" cliché; the dark register is reserved for nav/footer/dusk sections where the mint logo lives.

### Signature gradients
- `--grad-dusk-hero`: ink → deep-forest → green 160° — CTA bands, dusk register
- `--grad-scrim`: photo-hero legibility scrim

## ✏️ Typography

| Role | Original (paid) | Substitute (free) | Why |
|---|---|---|---|
| Display | Bagoss Standard | **Bricolage Grotesque** | contemporary humanist grotesque with the same slightly-warm, characterful curves; optical sizing gives display presence |
| Body | Neue Haas Grotesk Text | **Hanken Grotesk** | neutral Haas-lineage workhorse, warmer than Inter, excellent at text sizes |
| Data/specs | — | JetBrains Mono | stat labels, catalog chrome specs |

Type ramp: display `clamp(2.5→4.4rem)` w700 · h2 `clamp(1.6→2.3rem)` w650 · body 1rem/1.6.

Defining typographic moves:
1. Long benefit-led headline sentences (10–16 words) set huge — the headline IS the hero
2. **Color discipline: green touches interactive elements only** (buttons, links, chips). Headlines are ink, always — the live site never colors a headline word, and neither do we
3. **No kicker devices.** No eyebrows, no accent bars, no decorative stripes — the live site has none. Hierarchy is type scale and space only
4. Pill CTAs, sentence case, dark ink on green

## 🏗️ Signature patterns

**Extraction rule (2026-07-22): every pattern in `sections.html` is transcribed from a live venturehome.com section — 26 patterns, all flagged SIGNATURE, each with a source-URL comment. Built pages compose ONLY from these. No generic filler blocks; a section that isn't on the live site is drift.**

Key anchors (headlines verbatim):
1. **hero-system** — "We put solar panels, battery storage, and EV charging together in one system." CSS: `.hero-main`
2. **utility-jab** — "Let's just say East Coast utility companies aren't our biggest fans." Statement register on warm paper
3. **take-control** — "Traditional electric could never be this good to you." + Visibility / Control / Predictability tiles
4. **system-slider** — "One smart system. Total control." Five-component scroll-snap row. CSS: `.system-slider`
5. **testimonial-feature** — one verbatim review at display scale. CSS: `.testimonial-feature`
6. **what-to-expect** — the real 5 steps (Personal Consultation → Professional Installation). CSS: `.steps`
7. **closing-cta** — "Power your life, your way." + 1 (888) 522-9161. CSS: `.cta-band`

Full inventory: nav, hero-system, trust-strip, intro-easy, utility-jab, stat-band, find-your-state, reviews-wall, take-control, system-slider, plans-band, solution-hero, feature-split, testimonial-feature, full-control, what-to-expect, cross-sell, gallery-slider, faq, closing-cta, quote-form, state-grid, plan-tiles, resource-cards, article-cards, footer.

Second-pass additions (2026-07-22, full-site sweep): **quote-form** ("Talk to a solar expert" — the site-wide Gravity Forms lead form: First/Last Name, Email, Phone, Zip, consent, "Get a quote"), **state-grid** (solar-incentives page, 8 state cards), **plan-tiles** (pricing page — EZ Plan / Finance-to-own / Direct Purchase / Prepaid Solar Service, verbatim bullets), **resource-cards** (solar-panels page, two whole-card links), **article-cards** ("Solar Articles" index). Every built page ends on quote-form, matching the live site.

### Crawl-scope log

- **Crawled (24 URLs):** home · solutions (index, solar-panels, battery-backup, ev-chargers, microinverters, smart-electrical-panels, commercial-solar) · whole-home-solar-solutions · plans-services (index, pricing, solar-incentives, solar-installation) · about-us · articles index · careers · contact-us · refer-us · locations index + maine (state pages share one template) · 4 legacy-URL stubs.
- **Skipped:** individual article posts, remaining 8 state pages (same template as maine), privacy / terms / accessibility. No unique section types expected there; if one surfaces later, extract it before using it.

## 🚫 Forbidden / off-brand

- ❌ White logo on light grounds (use ink variant)
- ❌ Near-black + acid-green page grounds (AI cliché; dark is an accent register, not the default)
- ❌ Blue — no blue anywhere; coolness comes from ink and green
- ❌ Stocky solar clichés (handshakes, clip-art suns, blue-gradient panels)
- ❌ Corporate contractor voice ("quality you can trust") — voice is benefit-led and lightly cheeky
- ❌ Sharp-cornered CTAs — pills are the signature
- ❌ **Colored accent words inside headlines** — the #1 AI-design tell; the live site never does it
- ❌ **Eyebrow labels, accent bars, decorative stripes** — mono-caps kickers with colored dashes are an AI-design tell, banned everywhere (brand sections AND doc chrome). Removed 2026-07-22
- ❌ **LLM copy constructions** — em-dash-chained sentences, "not X, but Y" contrasts, triple-clever parallelisms ("Green earns. Gold catches. Ink talks."), fake-personalized colored "you". Write short declarative sentences in the brand's own cadence

## ✅ Vibe / mood keywords (5)

sunlit-organic · benefit-led · consumer-premium · quietly-cheeky · whole-system

If a composition doesn't hit 3+, it's drifting.

## 🪞 Position in the design-systems library

First **solar** system in the pool. Nearest siblings: `sunward` (solar client, incomplete), `ecosia-light` (green/organic register), `quiet-circle` (warm premium). Distinct from all three: type-led statement heroes + DTC-consumer voice + pill CTA system. Best fit for: solar installers, battery/EV trades, green-energy brands pitching lifestyle outcome over hardware.