# Solar Me — Design System Spec

> Source: https://solarmeusa.com/ (captured 2026-07-22, live DOM inspection + raw page source)
> Stack: Webflow (`smj-dev.webflow` shared CSS, clean `*-section` class vocabulary), Montserrat + Inter self-hosted woff2
> Asset completeness: good — logo webp (raster; no SVG exists on the site), 21 photos. Contact form is a third-party iframe embed (fields not extractable → omitted, CTA panel stands in). Brand-logo strip images not mirrored (manufacturer names set as text tiles instead).

## At-a-glance

- **Business:** Solar Me — NJ solar installer since 2014. Distinctive angle: **service and repair first** — diagnostics, orphan-system takeovers, critter damage, removal/reinstallation — plus new installs, battery storage, commercial. Tesla Energy Certified.
- **Geography:** New Jersey (HQ: 1896 Englishtown Rd Monroe, NJ 08831), plus PA and NY
- **Audience:** homeowners with existing (often broken or abandoned) solar systems; first-time solar buyers; commercial property owners
- **Voice anchors (verbatim):**
  - "Local Solar Experts: Service, Repairs & New Installs"
  - "Still Paying Too Much for Power?" / "No pushy sales. Just expert help from NJ's trusted solar team."
  - "No hype. No guesswork. Just smart solar done right."
  - "Installer out of business? We'll take over."
  - "Get an instant ballpark solar estimate using satellites!"
  - "1,100+ completed projects in New Jersey · 15+ years · 12 MW Of Solar Capacity Installed"
- **Register:** plain-spoken contractor-direct. Short reassuring sentences, question-headline hooks ("Still Paying Too Much for Power?", "Installer out of business?"), zero lifestyle gloss. The trust engine is specifics: real project specs, real reviews, real phone number.

## 🎯 Core assets (one-class citizens)

### Logo
- `assets/solar-me-brand/solar-me-logo.webp` — the site's actual header logo (raster webp; no SVG exists on the source). **Use on light grounds only.** No light/ink variants can be derived from the raster without redrawing — the demo pages keep nav and footer on light grounds exactly like the live site, so no dark-ground variant is needed.
- Forbidden: recoloring, stretching, placing on navy grounds.

### Photography system
Working-contractor photography: real crews, real roofs, real NJ houses. The service-tile set (repair/remove/install/battery/critter/takeover) is the signature — one photo per service, shot documentary-style.

| Asset | Type | Role | Score |
|---|---|---|---|
| hero-panel.webp | panel close-up | hero ground | 8 |
| installer-nj.webp | installer at work | trust-story / about | 8 |
| repair.jpg | tech diagnosing | service tile / repair landing | 9 |
| takeover.jpg | orphan takeover | service tile / repair landing | 8 |
| critter.jpg | critter guard work | service tile | 8 |
| remove.jpg | panel removal | service tile | 7 |
| install.jpg | new install | service tile / solar landing | 8 |
| battery.jpg | battery install | service tile / battery landing | 8 |
| process.webp | install process | process split | 7 |
| boonton-project.webp | completed project | project card | 8 |
| highlands-project.webp | completed project | project card | 7 |
| willingboro-project.webp | completed project | project card | 7 |
| south-amboy-project.jpg | completed project | project card | 7 |
| medford-project.jpg | completed project | portfolio grid | 7 |
| watchung-project.jpg | completed project | portfolio grid | 7 |
| waterford-project.jpg | completed project | portfolio grid | 7 |
| union-project.jpg | completed project | portfolio grid | 7 |
| areas-band.webp | wide install shot | image-band breather | 8 |
| video-thumb-1/2/3.webp | video stills | video-cards thumbnails | 6 |

## 🎨 Color tokens (extracted verbatim)

Live-DOM extraction, frequency-ranked: `#636363` (body, 866 hits) · `#2e2e2e` (headings, 266) · `#044071` (brand navy, 153) · white grounds · `#fafafa`/`#f7f9fb` section tints · `#acafb3` muted · `#ffd600` star yellow · `#e8ac14` footer-social hover gold.

```css
--brand: #044071;         /* Solar Me navy. Immutable (extracted). */
--brand-deep: #032f54;    /* derived hover */
--ink-deep: #2e2e2e;      /* headings. Immutable (extracted). */
--ink: #636363;           /* body. Immutable (extracted). */
--bg-soft: #fafafa;       /* services/process band tint (extracted) */
--bg-cool: #f7f9fb;       /* projects/reviews band tint (extracted) */
--accent-star: #ffd600;   /* star ratings ONLY (extracted) */
--accent-gold: #e8ac14;   /* footer link hover ONLY (extracted) */
```

**Radius: 0 everywhere — with one exception, and it is the signature.** Cards, images, and inputs are strictly sharp-cornered. Every `.button`, however, is **chamfered**: the live site clips 27px × 22.5px off the top-right and bottom-left corners via `clip-path`, then repaints the diagonal edge with `::before`/`::after` slivers. The compact banner variant uses a 15px × 12.5px chamfer. Depth comes from 1px borders and quiet tints, never shadows.

```css
clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 22.5px, 100% 100%, 27px 100%, 0 calc(100% - 22.5px));
```

*(Corrected 2026-07-22 in the second pass — the first pass recorded buttons as plain rectangles, which lost the notch.)*

## ✏️ Typography

| Role | Original | Substitute | Why |
|---|---|---|---|
| Display + body | Montserrat (self-hosted subset) | **Montserrat (Google Fonts)** | same face, free — no substitution |
| Small meta | Inter (self-hosted) | **Inter (Google Fonts)** | same face, free |
| Data/specs | — | JetBrains Mono | catalog chrome + spec labels only |

Type ramp: display `clamp(2.1→3.2rem)` w600 · h2 `clamp(1.5→2.1rem)` w600 · body 1rem/1.65. The live site runs modest heading sizes (h1 32px) — the kit keeps the weight (600, never heavier for headings) and lifts scale slightly with clamp.

Defining typographic moves:
1. **Uppercase 700 buttons with letter-spacing, on a chamfered shape** — every CTA on the live site ("GET ESTIMATE!", "get a consultation" set uppercase via CSS)
2. Question-headline hooks — "Still Paying Too Much for Power?", "Does Your Home Qualify for Our Service?"
3. Headlines are ink, always. No colored words, no kickers — hierarchy is scale + space
4. Nav links uppercase, quiet

## 🏗️ Signature patterns

**Extraction rule: every pattern in `sections.html` is transcribed from a live solarmeusa.com section — 33 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-stats** — "Local Solar Experts: Service, Repairs & New Installs" + 1,100+/15+/12 MW stat row + review badges + six service-card slider. CSS: `.hero-main`, `.stat-band`, `.service-slider`
2. **cta-band** — "Still Paying Too Much for Power?" navy full-bleed. CSS: `.cta-band`
3. **projects-slider** — spec cards (Manufacturer / Number of Panels / Kilowatts / Installation Date, all verbatim). CSS: `.project-slider`
4. **trust-story** — "What Makes Solar Me the Trusted Name in Solar?" + "No hype. No guesswork. Just smart solar done right." + three value tiles
5. **process-steps** — the real six steps, "Step 01 | Consulting" → "Step 06 | Benefitting". CSS: `.steps`
6. **issues-list** — repair page's problem/solution blocks ("Fixing the Zero Power Output"…). CSS: `.issues-grid`
7. **incentive-blocks** — NJ incentives long-form info stack (Federal / Net Metering / SuSI / Tax Exemptions). CSS: `.incentive-stack`

Full inventory (33): announcement-nav, hero-stats, services-four, commercial-boost, cta-band, brand-strip, projects-slider, trust-story, process-steps, reviews, faq, service-about, issues-list, incentive-blocks, contact-panel, footer, service-flow, solutions-accordion, types-grid, brand-detail-cards, commercial-solutions, industry-list, why-choose, features-table, pricing-table, inline-callout, location-directory, image-band, portfolio-grid, project-overview, reviews-wall, article-cards, video-cards.

Second-pass additions (2026-07-22, full-site sweep — 17 patterns): **service-flow** (repair page's five-step diagnostic flow, missed in pass 1), **solutions-accordion** (area page's three long-form solutions, missed in pass 1), **types-grid** (EV page's Level 1/2/3 tiers), **brand-detail-cards** (/brands manufacturer write-ups), **commercial-solutions** (carports / rooftop / canopies / ground-mount / storage), **industry-list** (verticals served, missed in pass 1), **why-choose** (Generac product justification), **features-table** (IRA domestic-content comparison), **pricing-table** (system-size cost tables), **inline-callout** ("Not Putting the Panels Back?" cross-sell), **location-directory** (county-grouped town links), **image-band** (full-bleed photo breather), **portfolio-grid** (/portfolio index), **project-overview** (project narrative + closing CTA), **reviews-wall** (/reviews masonry wall), **article-cards** (/blog index, also "Recent Articles" on service pages), **video-cards** (/videos index).

### Crawl-scope log

- **Pass 1 — crawled (8 URLs):** home · /services/solar-panel · /services/services-backup-battery-installation · /services/solar-diagnostics-repair · /nj-solar-incentives · /about-us · /areas-we-serve/new-brunswick · /free-solar-quote
- **Pass 2 — crawled (22 more URLs):** /reviews · /portfolio · /portfolio/boonton-nj-solar-project · /brands · /brand/tesla-powerwall · /nj-solar-pricing · /nj-solar-financing · /solar-installation-process · /videos · /blog · /areas-we-serve · and 11 remaining service pages (/services/ev-charger-installation, srec-management, commercial-solar-installation, virtual-power-plant-vpp, span-smart-electrical-panel, roof-repair-installation, backup-generator-installation, american-made-solar-options, solar-removal-and-reinstallation, orphan-solar-system-takeover-repair-services, commercial-solar-decommissioning). **30 URLs total — every distinct page template on the site is now represented.**
- **Skipped (known gaps):** individual blog posts · remaining /portfolio/* detail pages (share the boonton template) · remaining /areas-we-serve/* town pages (share the New Brunswick template) · remaining /brand/* pages (share the tesla-powerwall template) · /estimate (external subdomain, estimate.solarmeusa.com) · privacy / terms.
- **Folded, not dropped (structural duplicates of catalogued patterns):** `srec-services-section` (/services/srec-management) → same four-card structure as **services-four**; `battery-brands-section` (/brands) → same structure as **brand-detail-cards**, whose demo includes a battery maker; `recent-section` (service pages) → same card as **article-cards**; `chargers-types-section` on non-EV pages → **types-grid**; `comm-services-section` → **issues-list**; `hero-section` variants across service pages → **hero-stats**.
- **Omitted by rule:** contact form fields (third-party iframe — not extractable, so the contact pattern carries the verbatim address/phone/hours and a CTA instead); brand-logo strip images (manufacturer names set as text tiles); video files (the site's own still thumbnails stand in on **video-cards** and **trust-story**).

## 🚫 Forbidden / off-brand

- ❌ Rounded corners anywhere — radius 0 is the system; the button chamfer is the only corner treatment
- ❌ Square-cornered buttons — the 27px notch is the signature; dropping it flattens the brand
- ❌ Logo on navy/dark grounds (raster, light-ground only)
- ❌ Colored accent words inside headlines — headlines are ink, always
- ❌ Eyebrow labels, accent bars, decorative stripes — banned everywhere (brand sections AND doc chrome)
- ❌ Invented stats, phone numbers, reviews, or project specs — verbatim or omitted
- ❌ Lifestyle-premium gloss ("your future self will thank you") — this brand talks like a contractor, not a DTC startup
- ❌ Yellow as a brand color — `#ffd600` touches star ratings only, `#e8ac14` footer hovers only
- ❌ LLM copy constructions — em-dash chains, "not X, but Y", triple parallelisms, colored "you"

## ✅ Vibe / mood keywords (5)

contractor-direct · service-first · sharp-cornered · spec-driven · quiet-navy

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

## 🪞 Position in the design-systems library

Second full **solar** system. Nearest siblings: `venture-home` (solar, consumer-premium DTC register) and `sunward` (solar client). Distinct from venture-home on every axis that matters: sharp corners vs pills, navy vs green, contractor-direct vs lifestyle-cheeky, repair/service-led vs whole-system-led. Best fit for: trades-register solar installers, repair/service outfits, and any contractor brand where specifics (specs, steps, real projects) do the selling.