# Roover brand pack — 10 minutes **Open `index.html`. Use `tokens.css`. Do not invent.** Two locked systems. Same story. Different skins. Nothing here is a new brand. **Not live.** Open `index.html` locally. Do not deploy this pack to onroover.com or work-004. Mike: put a copy in Downloads (parent agent will CopyFromBox). Open the HTML tomorrow. Print if you want — it is print-friendly. --- ## 60 seconds — which skin? | Surface | Skin | Door | First picture | |---|---|---|---| | roofhero.com.au, Start, ads, email to homeowners, in-product start | **RoofHero** | Find my roof. Address is the start. | Their roof, aerial, or job card | | onroover.com, 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 | If you are not sure, it is RoofHero for a $50k homeowner start, OnRoover for the company. Do not mix type, orange, or paper. --- ## 4 minutes — install tokens 1. Copy `tokens.css` into the site. 2. Copy `assets/fonts/` next to it (or point the `@font-face` paths). 3. On the page root: ```html ``` 4. Use the custom properties. Do not add a third face or a third orange. RoofHero type: Host Grotesk headings, Inter body/UI. **Do not typeset the logo in Host Grotesk.** Use the SVG. OnRoover type: Hanken Grotesk display 300, Manrope body 400–700. No third face. Wordmark is all-caps **ROOVER** + leading amber disc (V4 `.company-wordmark`). Amber is not a button. --- ## 3 minutes — marks ``` assets/marks/roofhero-logo-dark.svg light grounds (pampas) assets/marks/roofhero-logo-white.svg dark grounds (plantation) assets/marks/roofhero-favicon.svg assets/marks/onroover-caps-dot.png locked company wordmark assets/marks/onroover-favicon.svg ``` CSS recreation of the company wordmark is in `tokens.css` as `.company-wordmark`. --- ## 2 minutes — copy and motion Messaging v2, verbatim. Order is the product: > Start with your roof. Work out the job. Compare real prices. (RoofHero) > Start with your roof. Then job before price. (OnRoover) Banned: Roof Review, instant quote, AI, guaranteed price, a second primary CTA. Motion: read `MOTION.md`. RoofHero is calm + one door; the 13 s hero is preview proof, not a loop. OnRoover is paper grain, rules that draw, type that lands. Reduced motion = last still. --- ## Production kit Artboards and mark rasters sit next to the book. Open these tomorrow if you are shipping a page, an ad, or a social still. - `templates/` — OG, ads, email, start, print. Index: `templates/INDEX.md`. Five OG PNGs in `templates/og/export/` (composited; HTML is source of truth if a pixel is off). - `assets/marks/kit/` — usage sheets (`roofhero-usage.html`, `onroover-usage.html`), `DO-NOT.md`, favicons, apple-touch, avatars, wordmarks on grounds. Also: `assets/icons/` (UI chrome, 1.5 stroke, not a third mark) and `assets/swatches/` (downloadable chips). GTM spend stays **NOT READY** until measurement on get. is green. St Ives rights unproven — label it. --- ## Files | File | What | |---|---| | `index.html` | The brand book. Open this. Print this. | | `tokens.css` | Both skins as CSS variables | | `MOTION.md` | Hero + UI + reduced motion | | `templates/` | OG / ads / email / start / print | | `assets/fonts/` | Locked faces, now complete (see below) | | `assets/marks/` | Locked marks + `kit/` usage and rasters | | `assets/icons/` | UI chrome only | | `assets/swatches/` | Downloadable chips | | `assets/pictures/` | Isolated V4 roof; RoofHero first-screen still; St Ives aerial (rights unproven) | | `assets/reference/` | 18 Aug lock boards (evidence, not a third system) | --- ## Fonts No longer missing. Local OFL files in `assets/fonts/`. See `assets/fonts/FONTS.md`. - RoofHero: Host Grotesk 400–700, Inter 400–700 (woff2; ttf companions for 400 / 500 / 600) - OnRoover: Hanken Grotesk 300 (display lock) + 400, Manrope 400–700 Google Fonts is a last-resort fallback in `index.html` only. Do not add a third family. --- ## Kill, one line each RoofHero: no play-first colour toys, no OnRoover paper as this skin, no gimmick motion, no Roof Review / instant quote / AI / guaranteed price, no second primary, no truck, no stock family, no Host Grotesk on the logo. OnRoover: no truck, no Find My Roof / address / live Start on the company page, no blaze `#ff7006`, no Host/Inter as brand face, no lab chrome, no new first-screen concept, amber is the dot only. --- ## Do not - Invent a mark, a hex, a face, or a first screen. - Deploy this pack to work-004 or onroover.com. - Treat the hero preview as live. - Average the two skins.