# Brand pack templates

Locked RoofHero and OnRoover production skins. Open any HTML as `file://`. Fonts and marks resolve at `../../assets/` (from this folder: `../assets/`).

Do not invent a third skin. Do not mix type, orange, or paper. Do not deploy. Do not edit `../index.html`.

**Messaging v2 only.** RoofHero: *Start with your roof. Work out the job. Compare real prices.* OnRoover: *Start with your roof. Then job before price.*

---

## Which skin

| Surface | Skin | Door | Picture |
|---|---|---|---|
| Paid / start / homeowner ad / homeowner email / in-product start | **RoofHero** | Find my roof → https://get.roofhero.com.au/ | Their roof, aerial, or job card. If St Ives: caption *Example aerial — rights unproven*. |
| Company / investor / who-is-Roover | **OnRoover** | Talk to Roover → https://onroover.com/contact | Isolated roof on paper, after the story. Never the visitor’s house. Never an address field. |

GTM spend stays **NOT READY** until measurement on get. is green. Off paid: www, www/start, onroover.com.

---

## File list

| File | Size | Skin | When |
|---|---|---|---|
| `og/roofhero-og-1200x630.html` | 1200×630 | RoofHero | Open Graph / LinkedIn / X still. Pampas + plantation header band. Wordmark SVG. One blaze door. |
| `og/onroover-og-1200x630.html` | 1200×630 | OnRoover | Company / investor social still. Paper. Caps-dot. Isolated roof. Talk to Roover. No address. |
| `og/roofhero-square-1080.html` | 1080×1080 | RoofHero | IG / Meta feed. Same lock as OG. |
| `og/roofhero-story-1080x1920.html` | 1080×1920 | RoofHero | Story / reel. Address cue + Find my roof. Bottom 220px is an IG safe zone. |
| `og/onroover-square-1080.html` | 1080×1080 | OnRoover | Company square. Isolated roof. Talk to Roover. |
| `og/README.md` | — | both | How to export stills at exact pixels. |
| `og/export/*.png` | exact px | both | Rendered stills if a headless browser produced them. Prefer these when present. |
| `ads/roofhero-endcard-1080.html` | 1080×1080 | RoofHero | 30s end card. Wordmark + Find my roof + address cue. **No Roover.** |
| `ads/roofhero-display-300x250.html` | 300×250 | RoofHero | Google display medium rectangle. Same lock. Final URL get.roofhero.com.au. |
| `ads/roofhero-display-728x90.html` | 728×90 | RoofHero | Google display leaderboard. Same lock. |
| `ads/onroover-endcard-1080.html` | 1080×1080 | OnRoover | Company / investor end card. Paper. Talk to Roover. No Find My Roof. |
| `email/roofhero-email.html` | 600px table | RoofHero | Homeowner email. Pampas header, dark wordmark PNG, one blaze button. Inter body. |
| `email/onroover-email.html` | 600px table | OnRoover | Company email. Paper, caps-dot PNG, green text link. No fill button. No address. |
| `start/roofhero-start.html` | 1280 desktop | RoofHero | First screen a site team can copy. Address field + one blaze door. Stacks under 720px. |
| `start/onroover-company-close.html` | close block | OnRoover | Close after the story only. Isolated roof optional. Not a start screen. |
| `print/roofhero-letterhead.html` | A4 | RoofHero | Letterhead. Wordmark + plantation rule. No blaze wash. |
| `print/onroover-letterhead.html` | A4 | OnRoover | Letterhead. Paper, caps-dot. |
| `print/roofhero-deck-cover.html` | 1920×1080 | RoofHero | Title slide. Host Grotesk. One line: Start with your roof. |
| `print/onroover-deck-cover.html` | 1920×1080 | OnRoover | Title slide. Hanken 300. Roofing isn’t backwards. |

---

## Locks (do not reopen)

**RoofHero** — Host Grotesk headings + Inter body. Pampas `#f4f3ec` / plantation `#1e4c41` / ink `#191919`. Blaze `#ff7006` is the one door. Wordmark is the SVG (never typeset in Host Grotesk). Door: Find my roof. Address is the start.

**OnRoover** — Hanken Grotesk 300 + Manrope. Paper `#f3f4ef` / ink `#0b2a20` / green `#0e6545`. Amber `#ffb54c` is the DOT only. Wordmark: ROOVER caps + leading amber disc. Door: Talk to Roover.

**Banned on both:** Roof Review, instant quote, AI, guaranteed price, second primary CTA, truck, stock family, mixing skins, blaze or amber as a page wash.

St Ives (`assets/pictures/st-ives-example.jpg`) — rights unproven. Label it. Do not present as cleared.

---

## Offline

Each HTML is self-contained. `@font-face` points at `../../assets/fonts/`. Google Fonts is a 700-weight fallback only and will not load on some `file://` sessions — local Host 400/500/600, Inter 400/500/600, Hanken 300, and Manrope 400 will.

Marks:

- RoofHero light ground: `../../assets/marks/roofhero-logo-dark.svg`
- RoofHero dark ground: `../../assets/marks/roofhero-logo-white.svg`
- RoofHero email: `../../assets/marks/roofhero-wordmark.png`
- OnRoover: CSS `.company-wordmark` or `../../assets/marks/onroover-caps-dot.png`