A $50k start.
A homeowner is about to spend fifty thousand on the thing over their family. Calm, one door, proof over play. Address is the start.
Two systems · locked 18 Aug 2026
Same story on both sites: start with the roof, work out the job, then same-work prices. Different skins. A page may only use what is in this pack. If it is not here, it does not ship.
01
Open this file tomorrow. It is the book. tokens.css is what engineering pastes. MOTION.md is what motion follows. Marks, fonts, icons, swatches, and production templates are already in the folder. Nothing here ratifies a new brand.
data-skin="roofhero" or data-skin="onroover" and include tokens.css.SYSTEM-LOCKS 18 Aug 2026. Messaging v2 (WORK-025, adopted 3 Jun 2026). Hero usable lock 21 Aug 2026 ~3:48 AM PT. WORK-004 amendment 20 Aug 2026 if the company story is the two-panel.
Live onroover.com apex (Inter-only, cinematic photo, Find My Roof) is off-lock. Do not generate from it. V4 paper (Hanken + Manrope) is the company system in this pack.
brand-system-lock-v1 (19 Aug) is a candidate — not locked (Mike). Do not generate from it. Do not average it with these two boards. No third skin.
Hero preview roover-hero-usable-preview.pages.dev is preview only until Mike says live.
If yes, it is good enough. Stop.
02
Classify. Do not average. Roof Hero is the production market. Roover is the company and the reusable platform. The journey is the same. The skin is not.
A homeowner is about to spend fifty thousand on the thing over their family. Calm, one door, proof over play. Address is the start.
Company site. Introduce Roover. The roof is an object to understand. Close is a conversation, not a start field.
get.roofhero.com.au), a paid landing, an ad, an email, or in-product start.onroover.com — never roover.com.| 1 | Which approved components, and in what order |
|---|---|
| 2 | Which locked Messaging v2 lines, used verbatim |
| 3 | Which approved picture type: roof object, aerial, or job card |
| 4 | Length. Not voice, not colour, not type, not a new verb |
03 · RoofHero
Marketplace. Host Grotesk headings. Inter body and UI. Blaze is the one door. Picture is their roof, an aerial, or the job card. Gravity: space, stillness, no-obligation in the first breath. This is not a consumer app.
Custom lowercase roofhero SVG + blaze roof-gutter over “roo”. Live. Do not typeset the logo in Host Grotesk.
Dark mark on pampas / paper. roofhero-logo-dark.svg
White mark on plantation / dark. Gutter stays blaze. roofhero-logo-white.svg
roofhero-favicon.svgTwo faces. No third. Headings Host Grotesk 400–700 (local woff2; ttf companions for 400 / 500 / 600). Body and UI Inter 400–700 (local woff2; ttf companions for 400 / 500 / 600).
Live www: h1–h4 { font-family: Host Grotesk; letter-spacing: 0 } · body { Inter; color #191919 }.
Blaze steps (door only, not a wash): dark #cc5904 · light #ff9a50 · lighter #ffe2cd · lightest #fff0e6 · focus ring rgba(255, 112, 6, 0.18).
80/15/5 if cited: pampas / plantation / blaze. Cited, not reopened. No emoji. No new accent.
Blaze is the one door. One blaze control per viewport. Never a wash, never a hero.
| Marketing paper | Pampas #f4f3ec or pampas-light #f7f6f1. Live www body is pampas-light. |
|---|---|
| Engine / scan | Plantation-dark #0f2620 blueprint grid. Dark blueprint = the live engine, paper = outputs. |
| Header | 3 px blaze bar on #2e3a35. Pampas nav. Blaze CTA. |
Label: Find my roof. Address is the start. No second primary. New conversion → get.roofhero.com.au, not www /start as the paid door. Alternate locked label already live in the header: “Start with my address →” — still one door, same verb family, not a second CTA.
Their roof, aerial, or the job card. Same work, side by side. Labelled example aerial is allowed (St Ives family exists; paid rights unproven — do not treat the jpg as cleared). No stock family. No truck.
Address is the start
Work out the job. Compare real prices.
Price, timing, inclusions, exclusions, assumptions, notes — one format. Not a quote. Not a guarantee.
A guide, not roofer pricing, not a final quote. Site visit still happens.
| Button (primary) | Blaze fill, white type, Host Grotesk 600, pill 999 px, min-height 44. One per viewport. |
|---|---|
| Button (not primary) | Text / plantation. No second blaze. No outline farm. |
| Field | White on pampas, 12–14 px radius, Inter 15. Focus ring 0 0 0 3px rgba(255,112,6,.18). Label “Property address” or none — the value is the start. |
| Card | White, hairline, 14 px radius. Job facts, not lifestyle. No rating slot. No suburb counter slot. |
| Header | 3 px blaze + #2e3a35 + wordmark + one blaze door. |
Calm. One door. Address field is the start. Hero film may be used as proof later; do not loop gimmicks. Reduced motion: last still. Full timings in §6 and MOTION.md.
Visualiser materials (Classic Ironsand, Standing seam Grey Friars, Light steel Titania, Dark green Karaka) are product, not the brand meaning. Proof over play.
04 · OnRoover
Company site. Introduce Roover. Roof as an object. Close is a conversation. Host is onroover.com, never roover.com.
ROOVER all-caps + leading amber disc. V4 .company-wordmark. Locked PNG: assets/marks/onroover-caps-dot.png.
Locked raster. Use this if type is not loaded.
CSS lock from V4: disc .56rem, gap .72rem, tracking .19em, halo #ffb54c26. Links to https://onroover.com/.
onroover-favicon.svgHanken Grotesk display 300. Manrope body 400–700. No third face. Never Inter. Never Host Grotesk. Never Arial. Never mono hashes on the public page.
Failure mode already written: 40-word sentences at clamp(3rem, 6vw, 6.5rem). Do not do that. Display is short.
Steel #d8dbd5 · line rgba(11, 42, 32, .14) · sticky header #f3f4eff5.
Amber is the wordmark DOT only. Not a button. Not a mood.
Paper fibre is material, not a UI layer. Opacity ~0.055, multiply. Hairline rules only. No filled button farm. No social chrome.
Talk to Roover → https://onroover.com/contact. Green type, green underline, no fill. Wordmark → https://onroover.com/. Never the runs host as home.
The same isolated roof, on paper. Reference visualisation. Never the visitor’s house. No sky, no house wall, no people. Caption: Reference visualisation.
Reference visualisation · V4 isolated roof · not your house
Empty, type-led. Chrome only: wordmark + Talk to Roover.
Roofing isn’t backwards.
No roof on screen 1. No visualiser. No address. Roof may land AFTER the story, as proof. Company page may use the 13 s hero after the story — not as a Find-My-Roof open. Preview only until Mike says live.
Company
Then job before price. The roof is an object to understand. Close is a conversation.
| Primary | There is no filled primary. Conversation link only. |
|---|---|
| Field | None on the company page. No address. No Start. |
| Card | Paper, hairline, no drop-shadow theatre. Rules that draw on enter. |
| Header | Sticky paper, hairline, wordmark, quiet text links, green conversation. |
Paper grain, rules that draw, type that lands. Complementary, not a heavy animation pass (v8 lock). See §6.
YOUR ROOF STARTS HERE. · Find My Roof as company meaning · “The Roof, Made Legible” as the lockApex live tokens (paper #F5F4EE, ink #1A2A22, Inter-only, cinematic photo hero) are off-lock. Do not mix Inter with Hanken/Manrope on one page.
05 · Messaging v2
Canonical since 3 Jun 2026. Design may apply it. May not rewrite it. The order is the product.
Roover starts with the roof, helps work out the job, gets suitable roofers or pros pricing the same work, and helps the homeowner compare and choose with confidence.
The real homeowner problem is not just price. Homeowners are asked to compare roof prices before the roof job is clearly understood.
I do not need to become a roofing expert. Roover helps me understand the roof job, see what matters, compare prices clearly, and choose with the important information in front of me.
On a RoofHero surface say RoofHero, not Roover, on the first screen. Roover appears only after the job is understood.
| RoofHero | Start with your roof. Work out the job. Compare real prices. |
|---|---|
| OnRoover | Start with your roof. Then job before price. |
| Core line | Start with the roof. Work out the job. Compare prices on the same work. |
| Emotional | You should not have to become a roofing expert to choose a roofer. |
| Contrast | Most homeowners ask roofers for prices before the job is clear. Roover works out the job first, then gets suitable roofers pricing the same work. |
| RoofHero overlay | RoofHero starts with your roof, helps work out the job, matches it with suitable roofers, and helps you compare roofer prices on the same work. |
| 390 fallback | Roover fixes the order: first understand the roof and job, then let suitable roofers price the same work. |
| Open | Roofing isn’t backwards. |
|---|---|
| Today | The homeowner starts with who. Same house. Three roofers. Three versions. |
| Turn | It starts backwards. |
| With Roover | Define the job once. Let roofers price it. Then choose who. |
| Resolve (later) | Roover turns a roof problem into a clear job roofers can understand and price. |
| Estimate Guide | Early range. Guide, starting range, early direction. Not a quote, not roofer pricing, not guaranteed. |
|---|---|
| Roofer pricing | Submitted price on reviewed job details. Initial / pre-site unless stated. Not final, not locked. |
| Final quote | Only after site visit or roofer confirmation. |
06
Exact enough for a website team. Full prose is in MOTION.md. Do not invent a third film.
Calm, one door. Address field is the start. Hero film may be used as proof later; do not loop gimmicks. UI: 160–220 ms, cubic-bezier(.2, .78, .18, 1). Focus ring only. No bounce. Reduced motion: last still. Field still works.
Mike lock 21 Aug 2026 ~3:48 AM PT. File /workspace/design-10x/hero-usable.html. Preview roover-hero-usable-preview.pages.dev. Autoplay. Pause on interaction. Click replay. Preview only until Mike says live. Company page may land this after the story, not as a Find-My-Roof open.
House: 60 Penshurst Rd. Aerial is Penshurst. Land mesh is the V4 RoofViz reference roof. They are not one scan — paper dissolves into the real visualiser. Stage 1280×800 contain-scaled.
| 0.00–1.10 | Address type on wide Nearmap. 60 Penshurst Rd. TYPE_END = 1.10. |
|---|---|
| 1.10–4.50 | Zoom ladder plates 82 → 79 → 78 → 84. Continuous push. Do not skip a plate. |
| 4.50–6.50 | Map / scan / pills. Amber outline, scan sweep, length / pitch / area. Not lab HUD. |
| 7.00–8.50 | White paper blueprint. Plan lines draw. |
| 9.20–11.00 | 3D lift. LIFT_T0 = 9.20 → LIFT_T1 = 11.00. |
| 11.00–13.20 | Real V4 RoofViz orbit + material dock. ORBIT_T0 = 11.00. HOLD = 13.2. |
Dock looks (product, not brand): Classic Ironsand #2e3033 · Standing seam Grey Friars #54585a · Light steel Titania #d8d5cc · Dark green Karaka #2c302b.
Proof beats (deep-links, not a second film): open 0.55 · land 6.10 · map 6.35 · blueprint 8.50 · lift 9.88 · visualiser 12.55. Shot params: ?beat= or ?t=12.
Reduced motion: honour prefers-reduced-motion: reduce or motion=reduce. Jump to last still (visualiser + dock). No type, no zoom, no sweep, no lift. Address field remains the start.
Paper grain (static). Rules that draw (~400 ms, origin left, stagger 120 ms). Type that lands (700–1050 ms, cubic-bezier(.22, .72, .18, 1), H1 delay ~480 ms). Empty first screen. Roof after the story. Not a heavy animation pass (v8).
Two-panel: left lead + support (fixed), right picture. Auto 5 / 5 / 5 / 5 / 7 / hold. Beat 3 WHO? then WHAT? Beat 4 WHAT? then WHO? Pause on interaction. Destination links only on beat 6: See Roof Hero · Talk to Mike. File: WORK-004-AMENDMENT-EXECUTE-LOCK-2026-08-20.md. Not the hero. Do not publish onroover.com from this pack.
07
Four approved families. Motion may not invent a fifth. One picture family per viewport.
08
Four grounds. Two skins. Do not wash blaze or amber across a page.
09
What a landing, ad, email, or in-product start may use. New RoofHero marketing is RoofHero-only on the first screen. Paid final URL is locked: https://get.roofhero.com.au/. Off paid: www, www/start, onroover.com. GTM spend stays NOT READY until measurement on get. is green.
Job details first. No prices on this step.
Required expectation on every RSA, Meta, and end-card unit (copy rec). Brand on ads: RoofHero only. One CTA: Find my roof. Do not teach Roover on the first screen or the 30s end card.
| Landing (paid / start) | RoofHero. Pampas, Host + Inter, wordmark SVG, one blaze door, address field. Picture: aerial or job card. Lead: Start with your roof. Work out the job. Compare real prices. No RoofHero + Roover lockup on viewport 1. No film loop. Hero still or later proof only. |
|---|---|
| Ad (paid social / search) | RoofHero for homeowner demand. End card: wordmark + Find my roof + address cue. One still from approved types (aerial / job card). Line from v2 only. Do not use the isolated company roof as if it were “your house.” Do not use blaze as a full-frame wash. Company/investor ads may use OnRoover paper + amber-dot wordmark + Talk to Roover — never Find My Roof. |
| Same split. Homeowner: pampas header, dark wordmark, one blaze button, Inter body. Company: paper, wordmark + disc, green text link, no fill button. Subject and preheader stay v2 (roof → job → prices). No “instant quote” in the inbox either. | |
| In-product start | RoofHero Start may be Inter-only chrome (already live on get) with plantation / blaze / pampas hexes. That is product, not a licence to restyle marketing. Address remains the start. No second primary. No colour toy as the first meaning. Visualiser dock is product after the roof is found. |
| Company story / GTM film | OnRoover paper. Type-led open. WORK-004 two-panel if that story is the one. Hero-usable may drop into beat 5 later — not as the open. Exit: See Roof Hero + Talk to Mike. |
10
Everything in this folder is the pack. Tokens are also in tokens.css. Scope with data-skin="roofhero" or data-skin="onroover".
| index.html | This book. Print-friendly. Offline if fonts copied. |
|---|---|
| tokens.css | Both skins as CSS variables + .company-wordmark. |
| MOTION.md | Hero + UI + WORK-004 + reduced motion. |
| README.md | Ten-minute use. |
| assets/fonts/ | Complete local faces. Host 400–700, Inter 400–700, Manrope 400–700, Hanken 300 (display lock) + 400. OFL licenses. See §12 and assets/fonts/FONTS.md. |
| assets/marks/ | RoofHero SVG/PNG wordmarks + favicon. OnRoover caps-dot PNG + favicon. Usage kit in assets/marks/kit/. No invented marks. See §11. |
| assets/icons/ | UI chrome only — pin, roof-plan, job-card, check, chevron, close. 1.5 stroke. Not a third mark. See §13. |
| assets/swatches/ | Downloadable SVG chips + sheet.html. Locked hex only. See §14. |
| templates/ | OG, ads, email, start, print. Index: templates/INDEX.md. Five OG PNGs in templates/og/export/. See §15. |
| assets/pictures/ | isolated-roof-poster.png — V4 isolated roof (OnRoover type). roofhero-first-screen-poster.png — RoofHero still. st-ives-example.jpg — aerial example; paid rights unproven, do not publish as cleared. |
| INVENTORY.md | What was already on the box. Include list. Not the book. |
| assets/reference/ | 18 Aug lock boards: lock-overview.png · lock-onroover.png · lock-roofhero.png · lock-rules.png. Evidence, not a third system. |
| --rh-blaze | #ff7006 · dark #cc5904 · light #ff9a50 · ring rgba(255,112,6,.18) |
|---|---|
| --rh-plantation | #1e4c41 · dark #0f2620 · darker #0b1c18 · light #265f52 |
| --rh-pampas | #f4f3ec · light #f7f6f1 · lighter #fcfcfb · dark #c3c2bc |
| --rh-ink | #191919 · soft #4c4c4c · mute #7f7f7f |
| --rh-header-chrome | #2e3a35 + 3px blaze |
| Type | --rh-font-heading Host Grotesk · --rh-font-body Inter |
| --or-paper | #f3f4ef · clean #faf9f3 · deep #e7eae4 · wash #eef1ec |
|---|---|
| --or-ink | #0b2a20 · soft #3f514a · green #0e6545 |
| --or-amber | #ffb54c · halo #ffb54c26 · DOT only |
| --or-steel / line | #d8dbd5 · rgba(11,42,32,.14) |
| Type | --or-font-display Hanken Grotesk 300 · --or-font-body Manrope |
No longer missing. Host 700, Inter 700, Manrope 500/600/700, and Hanken 400 sit in assets/fonts/ as local woff2. Google Fonts is last-resort only. Display lock for Hanken remains 300. Do not add a third family. Full list in §12.
11 · Production kit
Existing marks only. Print the usage sheets. Use the rasters. Do not typeset a new lockup. Amber is the DOT only. Never typeset RoofHero in Host Grotesk.
Open and print these tomorrow. They carry clear space, floors, grounds, and do-nots.
| RoofHero | assets/marks/kit/roofhero-usage.html — lowercase roofhero + blaze roofline. SVG lockup only. |
|---|---|
| OnRoover | assets/marks/kit/onroover-usage.html — ROOVER caps + leading amber disc. CSS .company-wordmark and the existing caps-dot PNG. No new SVG wordmark. |
| Do-not | assets/marks/kit/DO-NOT.md — one line each wrong use. Also kit/README.md. |
From assets/marks/kit/raster/. Chrome renders of the existing SVGs / CSS lockup. Not a new mark.
Favicon 16 / 32 sit next to them: roofhero-favicon-16.png, roofhero-favicon-32.png, onroover-favicon-16.png, onroover-favicon-32.png. Wordmarks on pampas / plantation / paper / dark are in the same folder. HTML used to make the rasters is in kit/_render/.
| RoofHero clear | Empty space around the lockup equal to the cap height of the letter h. |
|---|---|
| OnRoover clear | Empty space around the lockup equal to the cap height of the letter R. Same rule. |
| Digital floor | ~120 px wide. Below that, use the favicon tile — do not squeeze the wordmark. |
| Print floor | ~25 mm wide. |
Amber is the wordmark DOT only. Never typeset RoofHero in Host.
12 · Production kit
They are no longer missing. Host 700, Inter 700, Manrope 500 / 600 / 700, and Hanken 400 resolve from files in this pack. Google Fonts is last-resort only. Do not add a third family. Hanken display lock remains 300.
Source: fontsource OFL latin. Licenses sit next to the files. Prefer woff2 for web. Keep the original ttf as full-set companions. Full table: assets/fonts/FONTS.md. Faces also declared in tokens.css and assets/fonts/faces.css.
| Host 400 | host-grotesk-latin-400-normal.woff2 + host-400.ttf |
|---|---|
| Host 500 | host-grotesk-latin-500-normal.woff2 + host-500.ttf |
| Host 600 | host-grotesk-latin-600-normal.woff2 + host-600.ttf |
| Host 700 | host-grotesk-latin-700-normal.woff2 — now local |
| Inter 400 | inter-latin-400-normal.woff2 + inter-400.ttf |
| Inter 500 | inter-latin-500-normal.woff2 + inter-500.ttf |
| Inter 600 | inter-latin-600-normal.woff2 + inter-600.ttf |
| Inter 700 | inter-latin-700-normal.woff2 — now local |
| Hanken 300 | hanken-grotesk-300-latin.woff2 — display lock. Do not promote another cut as display. |
|---|---|
| Hanken 400 | hanken-grotesk-latin-400-normal.woff2 — supplied because a real file exists. Not a new display cut. |
| Manrope 400 | manrope-400-latin.woff2 |
| Manrope 500 | manrope-latin-500-normal.woff2 — now local |
| Manrope 600 | manrope-latin-600-normal.woff2 — now local |
| Manrope 700 | manrope-latin-700-normal.woff2 — now local |
Never Inter or Host on OnRoover. Never Hanken or Manrope on RoofHero. Never Arial. Never a third family to fill a gap that is no longer a gap.
13 · Production kit
UI only. 24 px. 1.5 px stroke. Round caps and joins. No fill mark. No RoofHero blaze gutter. Roof-plan is a simple chevron roof — not the logo. This is not a third mark.
Sheet: assets/icons/sheet.html. Notes: ICONS.md. Set: pin, roof-plan, job-card, check, chevron, close.
| RoofHero on pampas | #191919 · folder rh-on-pampas/ |
|---|---|
| RoofHero on plantation | #f4f3ec · folder rh-on-plantation/ |
| OnRoover on paper | #0b2a20 · folder or-on-paper/ |
Root SVGs use currentColor. Set color or use the foldered files.
14 · Production kit
Locked hex only. No new colour. Amber is DOT only. Sheet: assets/swatches/sheet.html. Click a chip to download the SVG.
Do not wash blaze or amber across a page. Do not treat amber as a button. Header chrome #2e3a35 is not a third green — it is not a chip here on purpose.
15 · Production kit
Artboards a website or GTM person can open tomorrow. Locked skins only. Index: templates/INDEX.md. GTM spend stays NOT READY until measurement on get. is green.
Job details first. No prices on this step.
| og/roofhero-og-1200x630.html | 1200×630 · RoofHero · Open Graph / LinkedIn / X. 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 220 px is an IG safe zone. |
| og/onroover-square-1080.html | 1080×1080 · OnRoover · Company square. Isolated roof. Talk to Roover. |
| og/README.md | How to export stills at exact pixels. |
| og/export/*.png | Five rendered stills. See figures below. Prefer HTML if a pixel is off. |
| ads/roofhero-endcard-1080.html | 1080×1080 · RoofHero · 30 s end card. Wordmark + Find my roof + address cue. No Roover. |
| ads/roofhero-display-300x250.html | 300×250 · RoofHero · Google display medium rectangle. 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 | 600 px table · RoofHero · Homeowner email. Pampas header, dark wordmark PNG, one blaze button. Inter body. |
| email/onroover-email.html | 600 px 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 720 px. |
| 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. |
Five PNGs in templates/og/export/. They were composited (headless Chrome was blocked on this box). HTML artboards are the source of truth if a pixel is off. Prefer a fresh #artboard screenshot when a browser is available.
assets/pictures/st-ives-example.jpg) — paid rights unproven. Label Example aerial — rights unproven. Do not present as cleared.https://get.roofhero.com.au/.Messaging v2 only. RoofHero: Start with your roof. Work out the job. Compare real prices. OnRoover: Start with your roof. Then job before price. Brand on homeowner ads: RoofHero only. One CTA: Find my roof.