# Open Graph / social stills

HTML artboards. Open the file. Screenshot `#artboard` at the exact pixel size in the filename. Do not include the note under the board.

## Sizes

| File | Pixels | Skin | Use |
|---|---|---|---|
| `roofhero-og-1200x630.html` | 1200×630 | RoofHero | OG / LinkedIn / X |
| `onroover-og-1200x630.html` | 1200×630 | OnRoover | Company OG |
| `roofhero-square-1080.html` | 1080×1080 | RoofHero | IG / Meta feed |
| `roofhero-story-1080x1920.html` | 1080×1920 | RoofHero | Story / reel (bottom 220px safe) |
| `onroover-square-1080.html` | 1080×1080 | OnRoover | Company square |

## Export by hand

1. Open the HTML in a browser (`file://` is fine). Local fonts load from `../../assets/fonts/`.
2. Wait until the wordmark and type have settled (Host / Hanken, not a system fallback).
3. Screenshot only `#artboard` at **device pixel ratio 1**, exact CSS pixels. Do not scale the page.
   - Chrome / Edge: DevTools → device mode → set width × height to the artboard → DPR 1 → capture screenshot.
   - Firefox: similar responsive mode, or print to PDF at the `@page` size then rasterise at 1×.
4. Save into `export/` as `{name}.png` (e.g. `export/roofhero-og-1200x630.png`).
5. Do not crop in the note, the dark page chrome, or browser UI.

Print also works: each file sets `@page` to the artboard size and hides `.note`.

## `export/` PNGs

These five files were written at exact CSS pixels from the locked fonts, marks, and pictures (PIL composite). A headless browser could not be launched on this box, so they are not Chromium screenshots of the HTML. They follow the same artboard geometry. HTML remains the source of truth if the two ever drift.

| File | Pixels |
|---|---|
| `export/roofhero-og-1200x630.png` | 1200×630 |
| `export/onroover-og-1200x630.png` | 1200×630 |
| `export/roofhero-square-1080.png` | 1080×1080 |
| `export/roofhero-story-1080x1920.png` | 1080×1920 |
| `export/onroover-square-1080.png` | 1080×1080 |

Prefer a fresh `#artboard` screenshot when a browser is available. Until then, use these PNGs.

## Locks

RoofHero stills: pampas or plantation band, SVG wordmark, *Start with your roof. Work out the job. Compare real prices.*, one door **Find my roof**. St Ives must read *Example aerial — rights unproven*.

OnRoover stills: paper, caps-dot, isolated roof, *Start with your roof. Then job before price. Talk to Roover.* Never an address field. Never Find My Roof. Never the visitor’s house.

Do not wash blaze or amber. Do not mix skins.