# Valley Solar Design System — Change Log

Running log of design system updates, newest first.
For page-level detail see individual exploration logs (e.g. `explorations/our-process/design-log.md`).

---

## 2026-07-06 (session)

### Token export — enriched for marketing image/vector generation
**Files:** `valley-solar-tokens/`, `export/valley-solar-tokens/`, `SKILL.md`

Added to `Valley-Solar-Tokens.md`: Imagery & Photography Vibe section (tone,
subject matter, prompt cues), Iconography Style section (filled+stroked
description, prompt cues), Brand Voice notes. Added `icons/` (23 curated
solar/energy/trust SVGs) and `imagery-reference/` (4 sample brand photos)
folders to the download package alongside existing colors/type md + logos.
Re-synced `export/valley-solar-tokens/` and updated `SKILL.md` manifest
description to match.

---

## 2026-06-16 (session)

### Components — Hero Pattern Library (new)
**Files:** `components/PageHeroPhoto/`, `components/PageHeroLight/`, `components/PageHeroSplit/`

Three reusable React hero components added to `03_Patterns`, compiled into `_ds_bundle.js`:

- **`PageHeroPhoto`** — Full-bleed background photo with frosted glass card. Supports `cardStyle: 'dark'` (white text on dark glass) and `cardStyle: 'light'` (navy text on white glass surface using `--gradient-glass-raw` + `blur(4px)`). Props: `label`, `accentLine`, `titleLine`, `body`, `primaryCtaText/Href`, `secondaryCtaText/Href`, `imageSrc`, `overlayStrength`, `minHeight`, `showScrollHint`, `cardStyle`.
- **`PageHeroLight`** — White canvas hero with inset glass card, optional grid texture. Props: same text/CTA props + `bg` (`grid` | `gradient` | `plain`), `cardWidth`.
- **`PageHeroSplit`** — Split layout: white left panel with overline, title, body, CTAs, proof stats strip; full-height photo right with left-fade overlay and floating glass tag. Props: `label`, `accentLine`, `titleLine`, `body`, CTA props, `imageSrc`, `stats[]`, `tag`, `minHeight`.

### Gallery — DS Gallery page
**File:** `ds-gallery.html`

- New browseable gallery reading `_ds_manifest.json` — shows all DS cards grouped by section
- Fixed nav bar (56px header + 48px pill bar), scrolls to each group
- Hardcoded **Explorations** section (13 files) appended below manifest-driven cards
- Copy + Download actions on every card; fullscreen lightbox

### Template — Page: Why Valley Solar (updated)
**File:** `templates/page-why-valley-solar/index.html`

- **Choosing an Installer** section: two-column header (heading left / lede right) + 3 icon cards (National / Local / Valley Solar featured with orange border + checkmark badge)
- **The Valley Solar Difference**: compact two-column card replacing the 6-pillar section (checklist left / navy "Why It Matters" right)
- **Built Differently for Long-Term Accountability**: new section with provided copy, 2×2 grid of 4 numbered items each with an orange icon circle
- Accountability grid items gained orange icon circles (wrench / people / lightning / shield-check)

### Explorations — Hero Iterations
**File:** `explorations/hero-iterations/index.html`

- 5 hero directions for trust pages: A (Photo Field), B (Warm Gradient), C (Dark Navy), D (Split), E (Minimal Type-Led)
- D mobile mockup: two iOS phone frames (light + dark) via `ios-frame.jsx`

---


## 2026-06-11 (session 2)

### Template — Page: Why Valley Solar
**File:** `templates/page-why-valley-solar/index.html`

- New full-page template using the **Page — Our Process** design vocabulary
- Glass hero with badge, animated dot, title, rule, sub, dual CTAs — identical pattern
- Section nav pills (jump-to anchors for 8 page sections)
- **Installer Comparison** — 3-column model card grid (National / Small Local / Valley Solar featured on navy)
- **6 Differentiator Pillars** — numbered using the same decorative font column + reflection script as Our Process; alternating `bg-default` / `bg-alt` sections
- **How We Work** — 2-col layout with 5 numbered steps + process CTA + install photo
- **Performance cards** — 3-up grid (95% Guarantee / 25yr Warranty / 24/7 SunAlert)
- **Stats band** — navy bg, 4 large decorative-font stats (2000+ / 800+ / 4.9 / #1)
- **Featured Projects** — 3×2 photo grid with Residential / Commercial tags
- **Recognition** — 3-up award cards with View All Certifications CTA
- **FAQ** — native `<details>` accordion, 5 questions
- **Reviews band + CTA + Footer** — identical to Our Process template
- References shared `assets/brand/` photos; logos copied locally as `logo-orange.svg` / `logo-white.svg`

---

## 2026-06-11

### Email Designs — Vote For Us Campaign
**Files:** `emails/a-email-vote-for-us.html`, `emails/b-email-vote-for-us-mailchimp.html`

- **`a-email-vote-for-us.html`** — design canvas with 3 creative directions (A/B/C) × 2 aspect ratios (square + wide); registered as `@dsCard` in `04_Templates`
- **`b-email-vote-for-us-mailchimp.html`** — production-ready email-safe table HTML for Direction B in 4:5 portrait format, compatible with Mailchimp; registered as `@dsCard` in `04_Templates`
- Both cards use brand fonts (`Outfit`, `Shadows Into Light Two`), VS Orange CTAs, and the brand color palette
- Supporting assets (`emails/colors_and_type.css`, `emails/design-canvas.jsx`, `emails/email-designs.jsx`, `emails/fonts/`) added to the `emails/` folder

### Photography Assets — New Uploads
**Folder:** `uploads/`

- Added drone/aerial shots: `DJI_20250611151408_0335_D (1).jpeg`, `DJI_20251118081358_0335_D.jpeg`
- Added professional photography series: `F65I8972.jpeg`, `F65I8980-scaled.jpeg`, `F65I9031.jpeg`, `F65I9033.jpeg`, `F65I9034.jpeg`, `F65I9045.jpeg`, `F65I9112.jpeg`, `F65I9128 (1).jpeg`, `F65I9135.jpeg`, `F65I9174.jpeg`, `F65I9476 (1).jpg`
- Added location shot: `valley-solar-easthampton-1-scaled.jpeg`

---

### Buttons — Outline: Scroll CTA added
**File:** `preview/b-buttons-outline.html`

- Added **`.scroll-cta`** component — stacked triple-chevron with optional uppercase label, cascading opacity fade + bob animation
- Added **`.scroll-cta.light`** — white variant for navy/dark hero backgrounds
- Added no-label (icon-only) variant
- Animation gated on `prefers-reduced-motion`
- Card viewport updated from `700x180` to `700x320`

---

## 2026-06-10

### Our Process Templates — Style Refinements
**Files:** `templates/our-process/index.html`, `templates/page-our-process/index.html`

- **Duration pill** — changed from orange-tinted (`vs-orange-100` bg / `vs-orange-700` text) to neutral navy-tinted (`rgba(17,32,61,0.1)` bg / `vs-navy` text) to avoid CTA color confusion
- **Duration pill dot** — updated from `vs-orange` to `vs-navy` at 45% opacity to match pill style
- **Step bullets** — font-size increased from `text-body-sm` to `text-body-base` to match surrounding body copy
- **Process photos** — moved from per-template `photos/` subfolder to shared `assets/brand/` (team-vans, install-roof, team-aerial, team-warehouse); templates updated to reference `../../assets/brand/`

### Export Console
- Added `assets/logos/` to export manifest (sunalert-primary, sunalert-white, valley-solar-primary)
- Added process photos to `assets/brand/` and included in export manifest

---

### Trust Page Template — Our Process
**File:** `explorations/our-process/our-process-v2.html`  
**Template:** `templates/our-process/index.html`

- Added new **trust page template pattern** — glass card hero, 7-step process layout, reviews band, CTA section, footer
- **Step header** restructured: step name eyebrow + duration pill on one row, visually grouped with h2
- **Step number column** — large decorative number (Shadows Into Light Two, VS Orange) with JS-generated mirror reflection below (`scaleY(-1)`, fades away from number)
- **Footer notes** (`p.step-footer-note`) — full-width closing paragraph below step columns, separated by a border-top rule; applied to steps 2, 4, 5, 6
- **Mobile** — step columns stack to single column; decorative number hidden; step name eyebrow becomes sole step identifier
- **`.container`** — corrected to match production theme (`max-width: 96rem`, `px-4 sm:px-10`); hero card is full-width inside container
- All files renamed to kebab-case