ROOVER
Brand pack · 21 Aug 2026 10-minute README COMPANY book

Two systems · locked 18 Aug 2026

Almost nothing left to invent.

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.

RoofHero marketplace · $50k start · Host + Inter · blaze door OnRoover company · quiet paper · Hanken 300 + Manrope · amber dot COMPANY Company book → /company/ Not live. Preview hero only. Do not deploy to onroover.com or work-004.

01

How to use this pack

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.

In ten minutes

  1. Decide the surface. Marketplace / start / ad / email → RoofHero. Company / who-is-Roover → OnRoover.
  2. Set data-skin="roofhero" or data-skin="onroover" and include tokens.css.
  3. Use the locked mark file. Do not typeset the RoofHero logo in Host Grotesk. Do not draw a new Roover mark.
  4. Write Messaging v2 verbatim. One door. One picture type.
  5. Stop. A new page may vary only: component order, which locked lines, which approved picture, length.

Authority — do not reopen

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.

Close test

If yes, it is good enough. Stop.

Do

  • Copy tokens, marks, and lines as written.
  • Keep the two oranges apart: blaze #ff7006 vs amber #ffb54c.
  • Honour reduced motion.
  • Give Mike a Downloads copy of this folder.

Don’t

  • Invent a mark, hex, face, or first screen.
  • Mix the skins.
  • Deploy this pack to work-004 or onroover.com.
  • Write a better line than the lock.

02

Two systems. When to use which.

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.

roofhero Marketplace

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.

Find my roof

Quiet paper.

Company site. Introduce Roover. The roof is an object to understand. Close is a conversation, not a start field.

Use RoofHero when

Use OnRoover when

A new page may vary four things

1Which approved components, and in what order
2Which locked Messaging v2 lines, used verbatim
3Which approved picture type: roof object, aerial, or job card
4Length. Not voice, not colour, not type, not a new verb

May not

03 · RoofHero

A $50k start.

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.

Mark

Custom lowercase roofhero SVG + blaze roof-gutter over “roo”. Live. Do not typeset the logo in Host Grotesk.

roofhero dark wordmark

Dark mark on pampas / paper. roofhero-logo-dark.svg

roofhero white wordmark

White mark on plantation / dark. Gutter stays blaze. roofhero-logo-white.svg

Do

  • Use the SVG. Keep the blaze gutter over roo.
  • Favicon: plantation-dark tile, blaze gutter. roofhero-favicon.svg
  • Clear space: roughly the height of the gutter above and beside.
  • Minimum: do not go below favicon size in UI; wordmark ≥ 96 px wide on marketing.

Don’t

  • Set “RoofHero” or “roofhero” in Host Grotesk and call it the logo.
  • Recolour the gutter to amber, green, or white.
  • Put the OnRoover amber disc on this mark.
  • Place a second brand mark on viewport 1.

Type

Two 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).

Heading
Host Grotesk 600
Start with your roof.
Body / UI
Inter 400–600
Work out the job. Compare real prices. Address is the start.
Door
Host Grotesk 600
Find my roof

Live www: h1–h4 { font-family: Host Grotesk; letter-spacing: 0 } · body { Inter; color #191919 }.

Colour

Pampas#f4f3ec
Pampas light#f7f6f1 · body ground
Plantation#1e4c41
Dark#0f2620
Ink#191919
Ink soft#4c4c4c
Blaze#ff7006 · one door
Header chrome#2e3a35 · not a third green

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.

Ground

Marketing paperPampas #f4f3ec or pampas-light #f7f6f1. Live www body is pampas-light.
Engine / scanPlantation-dark #0f2620 blueprint grid. Dark blueprint = the live engine, paper = outputs.
Header3 px blaze bar on #2e3a35. Pampas nav. Blaze CTA.

Door

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.

Pictures

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.

Example aerial roof, St Ives — labelled example, not a visitor house
Aerial — example only St Ives plate. Label Example. Not the visitor’s house. Paid rights unproven.
RoofHero first-screen still
First screen still Address first. RoofHero wordmark only. No Roover on this screen.

UI components

Address is the start

Start with your roof.

Work out the job. Compare real prices.

Job card Same work, side by side

Price, timing, inclusions, exclusions, assumptions, notes — one format. Not a quote. Not a guarantee.

Estimate Guide Early direction

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.
FieldWhite 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.
CardWhite, hairline, 14 px radius. Job facts, not lifestyle. No rating slot. No suburb counter slot.
Header3 px blaze + #2e3a35 + wordmark + one blaze door.

Motion

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.

Kill

No

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

Quiet paper.

Company site. Introduce Roover. Roof as an object. Close is a conversation. Host is onroover.com, never roover.com.

Mark

ROOVER all-caps + leading amber disc. V4 .company-wordmark. Locked PNG: assets/marks/onroover-caps-dot.png.

ROOVER wordmark with amber disc

Locked raster. Use this if type is not loaded.

ROOVER

CSS lock from V4: disc .56rem, gap .72rem, tracking .19em, halo #ffb54c26. Links to https://onroover.com/.

Do

  • Leading disc, then ROOVER. All caps.
  • Amber #ffb54c on the disc only.
  • Favicon: existing amber/black tile. onroover-favicon.svg

Don’t

  • Turn the disc into a button, a bullet list, a hover state, or a mood wash.
  • Set the wordmark in Host Grotesk or Inter.
  • Write OnRoover, Roover.com, or a caret/badge lockup as the company mark.
  • Use blaze on the disc.

Type

Hanken Grotesk display 300. Manrope body 400–700. No third face. Never Inter. Never Host Grotesk. Never Arial. Never mono hashes on the public page.

Display
Hanken 300
Roofing isn’t backwards.
Body
Manrope 400
Start with your roof. Then job before price. Long thoughts stay Manrope. Hanken only for 1–6 words above 3 rem. Tracking −0.04 to −0.06 em.
Door
Manrope · green rule

Failure mode already written: 40-word sentences at clamp(3rem, 6vw, 6.5rem). Do not do that. Display is short.

Colour

Paper#f3f4ef
Clean#faf9f3
Deep#e7eae4
Hero wash#eef1ec
Ink#0b2a20
Soft#3f514a
Green#0e6545 · conversation
Amber#ffb54c · DOT only

Steel #d8dbd5 · line rgba(11, 42, 32, .14) · sticky header #f3f4eff5.

Amber is the wordmark DOT only. Not a button. Not a mood.

Ground

Paper fibre is material, not a UI layer. Opacity ~0.055, multiply. Hairline rules only. No filled button farm. No social chrome.

Door

Talk to Rooverhttps://onroover.com/contact. Green type, green underline, no fill. Wordmark → https://onroover.com/. Never the runs host as home.

Pictures

The same isolated roof, on paper. Reference visualisation. Never the visitor’s house. No sky, no house wall, no people. Caption: Reference visualisation.

Isolated V4 roof object on paper

Reference visualisation · V4 isolated roof · not your house

First screen

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.

UI components

Company

Start with your roof.

Then job before price. The roof is an object to understand. Close is a conversation.

PrimaryThere is no filled primary. Conversation link only.
FieldNone on the company page. No address. No Start.
CardPaper, hairline, no drop-shadow theatre. Rules that draw on enter.
HeaderSticky paper, hairline, wordmark, quiet text links, green conversation.

Motion

Paper grain, rules that draw, type that lands. Complementary, not a heavy animation pass (v8 lock). See §6.

Kill

No

Apex 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

Start with your roof. Job before price.

Canonical since 3 Jun 2026. Design may apply it. May not rewrite it. The order is the product.

Core idea

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.

  1. Understand the roof and job.
  2. Prepare clear job details.
  3. Let suitable roofers or pros price the same work.
  4. Help the homeowner compare and move forward with the important information in front of them.

Core insight

The real homeowner problem is not just price. Homeowners are asked to compare roof prices before the roof job is clearly understood.

Belief to create

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.

Locked leads — verbatim

RoofHeroStart with your roof. Work out the job. Compare real prices.
OnRooverStart with your roof. Then job before price.
Core lineStart with the roof. Work out the job. Compare prices on the same work.
EmotionalYou should not have to become a roofing expert to choose a roofer.
ContrastMost 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 overlayRoofHero 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 fallbackRoover fixes the order: first understand the roof and job, then let suitable roofers price the same work.

Company story lines (OnRoover, not first-screen product)

OpenRoofing isn’t backwards.
TodayThe homeowner starts with who. Same house. Three roofers. Three versions.
TurnIt starts backwards.
With RooverDefine 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.

Use / do not use

Use

  • Find My Roof / Start with the roof (RoofHero only as a door)
  • Scan the Roof, visible roof details
  • Tell Us What Matters
  • Estimate Guide
  • job details, Review the Job Details
  • suitable roofers, same work, compare prices
  • choose with confidence, no obligation until a signed contract

Banned homeowner-facing

  • Roof Review / Start My Roof Review
  • instant quote, guaranteed price, cheapest
  • AI knows your roof
  • scope, spec, job spec, priceable job / packet
  • final quote before site check
  • fake roofer counts, waitlist / no supply

Certainty ladder — do not flatten

Estimate GuideEarly range. Guide, starting range, early direction. Not a quote, not roofer pricing, not guaranteed.
Roofer pricingSubmitted price on reviewed job details. Initial / pre-site unless stated. Not final, not locked.
Final quoteOnly after site visit or roofer confirmation.

06

Animation & motion spec

Exact enough for a website team. Full prose is in MOTION.md. Do not invent a third film.

RoofHero site

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.

Locked hero — hero-usable ~13 s

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.10Address type on wide Nearmap. 60 Penshurst Rd. TYPE_END = 1.10.
1.10–4.50Zoom ladder plates 82 → 79 → 78 → 84. Continuous push. Do not skip a plate.
4.50–6.50Map / scan / pills. Amber outline, scan sweep, length / pitch / area. Not lab HUD.
7.00–8.50White paper blueprint. Plan lines draw.
9.20–11.003D lift. LIFT_T0 = 9.20LIFT_T1 = 11.00.
11.00–13.20Real 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.

OnRoover company

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).

WORK-004 amendment — if the company story is this

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

Graphics & picture types

Four approved families. Motion may not invent a fifth. One picture family per viewport.

Aerial
Aerial — RoofHero Their roof from above, or a labelled example. Nearmap-grade, graded slightly (live www: saturate 0.92, contrast 1.04, brightness 0.86). Not a second property unlabelled. Not a watermark flex.
Isolated roof — OnRoover The same V4 object on paper. No sky, no walls, no people. Always “Reference visualisation.” Never the visitor’s house.
Job card
Same work
Price · timing · inclusions · exclusions · notes
Job card — RoofHero Paper output of the engine. Same work, side by side. Not a quote tile. Not a roofer headshot.
Blueprint
Blueprint — proof, both White paper plan (hero t = 7–8.5) or dark engine grid (RoofHero scan world). Lines draw. Not a lab console. Not hashes.

What never

Never

08

Backgrounds

Four grounds. Two skins. Do not wash blaze or amber across a page.

Paper
OnRoover default
#f3f4ef · grain on
Pampas
RoofHero default
#f4f3ec · body often #f7f6f1
Plantation
RoofHero engine / band
#1e4c41 · dark #0f2620
Dark
Scan / blueprint stage
#0f2620 · not a company page

Rules

09

GTM / start skins

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.
Email 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.

A start skin may

  • Use the RoofHero token set and mark
  • Lead with the address field
  • Show one labelled aerial or a quiet still
  • Keep no-obligation in the first breath

A start skin may not

  • Wear OnRoover paper or Hanken
  • Open on material swatches
  • Promise a price, AI, or a review product
  • Carry a second brand on the first screen

10

File list / tokens

Everything in this folder is the pack. Tokens are also in tokens.css. Scope with data-skin="roofhero" or data-skin="onroover".

Pack tree

index.htmlThis book. Print-friendly. Offline if fonts copied.
tokens.cssBoth skins as CSS variables + .company-wordmark.
MOTION.mdHero + UI + WORK-004 + reduced motion.
README.mdTen-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.mdWhat 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.

RoofHero tokens

--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

OnRoover tokens

--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

Fonts on this box

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.

Not in this pack (on purpose)

11 · Production kit

Marks 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.

Usage sheets

Open and print these tomorrow. They carry clear space, floors, grounds, and do-nots.

RoofHeroassets/marks/kit/roofhero-usage.html — lowercase roofhero + blaze roofline. SVG lockup only.
OnRooverassets/marks/kit/onroover-usage.html — ROOVER caps + leading amber disc. CSS .company-wordmark and the existing caps-dot PNG. No new SVG wordmark.
Do-notassets/marks/kit/DO-NOT.md — one line each wrong use. Also kit/README.md.

Avatars and apple-touch

From assets/marks/kit/raster/. Chrome renders of the existing SVGs / CSS lockup. Not a new mark.

RoofHero avatar 400 — plantation + white wordmark
RH avatar 400 Plantation + white wordmark
OnRoover avatar 400 — paper + caps-dot
OR avatar 400 Paper + caps-dot lockup
RoofHero apple-touch 180
RH apple-touch 180 From roofhero-favicon.svg
OnRoover apple-touch 180
OR apple-touch 180 From onroover-favicon.svg

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/.

Clear space / minimum size

RoofHero clearEmpty space around the lockup equal to the cap height of the letter h.
OnRoover clearEmpty 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.

Do

  • Use the SVG / CSS lockup. Keep blaze #ff7006 on the RoofHero gutter.
  • Leading amber disc, then ROOVER. All caps. Halo stays.
  • Dark RoofHero SVG on pampas / paper. White SVG on plantation.
  • On plantation, OnRoover type goes to paper; the disc stays amber.

Don’t — from the kit

  • Typeset RoofHero in Host Grotesk — use the SVG lockup.
  • Stretch, squash, or outline either mark.
  • Recolour RoofHero blaze. Drop the roofline.
  • Add a second mark next to either lockup.
  • Use amber as a button, fill, or hero — it is the OnRoover DOT only.
  • Use caret ^ROOVER or lowercase roover + dot as the lock (exploration, not locked).
  • Typeset the lock-board crop as the OnRoover lock.
  • Put blaze on OnRoover or amber on RoofHero.
  • Put Host / Inter on OnRoover, or Hanken / Manrope on RoofHero.
  • Invent a third skin, a new hex, or a new face.

12 · Production kit

Fonts. Local. Complete.

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.

Local files

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.

RoofHero — Host Grotesk + Inter

Host 400host-grotesk-latin-400-normal.woff2 + host-400.ttf
Host 500host-grotesk-latin-500-normal.woff2 + host-500.ttf
Host 600host-grotesk-latin-600-normal.woff2 + host-600.ttf
Host 700host-grotesk-latin-700-normal.woff2 — now local
Inter 400inter-latin-400-normal.woff2 + inter-400.ttf
Inter 500inter-latin-500-normal.woff2 + inter-500.ttf
Inter 600inter-latin-600-normal.woff2 + inter-600.ttf
Inter 700inter-latin-700-normal.woff2 — now local
Host 700
local woff2
Start with your roof.
Inter 700
local woff2
Work out the job. Compare real prices.

OnRoover — Hanken Grotesk + Manrope

Hanken 300hanken-grotesk-300-latin.woff2 — display lock. Do not promote another cut as display.
Hanken 400hanken-grotesk-latin-400-normal.woff2 — supplied because a real file exists. Not a new display cut.
Manrope 400manrope-400-latin.woff2
Manrope 500manrope-latin-500-normal.woff2 — now local
Manrope 600manrope-latin-600-normal.woff2 — now local
Manrope 700manrope-latin-700-normal.woff2 — now local
Hanken 300
display lock
Roofing isn’t backwards.
Manrope 700
local woff2
Start with your roof. Then job before price.

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

Icons. Chrome, not a mark.

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.

Stroke by ground

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.

RH pampas pinpin roof-planroof-plan job-cardjob-card checkcheck chevronchevron closeclose
RH plantation pinpin roof-planroof-plan job-cardjob-card checkcheck chevronchevron closeclose
OR paper pinpin roof-planroof-plan job-cardjob-card checkcheck chevronchevron closeclose

Not a mark

14 · Production kit

Swatches. Download the chips.

Locked hex only. No new colour. Amber is DOT only. Sheet: assets/swatches/sheet.html. Click a chip to download the SVG.

RoofHero

RoofHero blaze #ff7006rh-blaze.svg RoofHero plantation #1e4c41rh-plantation.svg RoofHero plantation-dark #0f2620rh-plantation-dark.svg RoofHero pampas #f4f3ecrh-pampas.svg RoofHero pampas-light #f7f6f1rh-pampas-light.svg RoofHero ink #191919rh-ink.svg RoofHero ink-soft #4c4c4crh-ink-soft.svg

OnRoover

OnRoover paper #f3f4efor-paper.svg OnRoover paper-clean #faf9f3or-paper-clean.svg OnRoover paper-deep #e7eae4or-paper-deep.svg OnRoover ink #0b2a20or-ink.svg OnRoover ink-soft #3f514aor-ink-soft.svg OnRoover green #0e6545or-green.svg OnRoover amber #ffb54c DOT onlyor-amber.svg · DOT only OnRoover steel #d8dbd5or-steel.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

Production templates.

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.

File list

og/roofhero-og-1200x630.html1200×630 · RoofHero · Open Graph / LinkedIn / X. Pampas + plantation header band. Wordmark SVG. One blaze door.
og/onroover-og-1200x630.html1200×630 · OnRoover · Company / investor social still. Paper. Caps-dot. Isolated roof. Talk to Roover. No address.
og/roofhero-square-1080.html1080×1080 · RoofHero · IG / Meta feed. Same lock as OG.
og/roofhero-story-1080x1920.html1080×1920 · RoofHero · Story / reel. Address cue + Find my roof. Bottom 220 px is an IG safe zone.
og/onroover-square-1080.html1080×1080 · OnRoover · Company square. Isolated roof. Talk to Roover.
og/README.mdHow to export stills at exact pixels.
og/export/*.pngFive rendered stills. See figures below. Prefer HTML if a pixel is off.
ads/roofhero-endcard-1080.html1080×1080 · RoofHero · 30 s end card. Wordmark + Find my roof + address cue. No Roover.
ads/roofhero-display-300x250.html300×250 · RoofHero · Google display medium rectangle. Final URL get.roofhero.com.au.
ads/roofhero-display-728x90.html728×90 · RoofHero · Google display leaderboard. Same lock.
ads/onroover-endcard-1080.html1080×1080 · OnRoover · Company / investor end card. Paper. Talk to Roover. No Find My Roof.
email/roofhero-email.html600 px table · RoofHero · Homeowner email. Pampas header, dark wordmark PNG, one blaze button. Inter body.
email/onroover-email.html600 px table · OnRoover · Company email. Paper, caps-dot PNG, green text link. No fill button. No address.
start/roofhero-start.html1280 desktop · RoofHero · First screen a site team can copy. Address field + one blaze door. Stacks under 720 px.
start/onroover-company-close.htmlClose block · OnRoover · Close after the story only. Isolated roof optional. Not a start screen.
print/roofhero-letterhead.htmlA4 · RoofHero · Letterhead. Wordmark + plantation rule. No blaze wash.
print/onroover-letterhead.htmlA4 · OnRoover · Letterhead. Paper, caps-dot.
print/roofhero-deck-cover.html1920×1080 · RoofHero · Title slide. Host Grotesk. One line: Start with your roof.
print/onroover-deck-cover.html1920×1080 · OnRoover · Title slide. Hanken 300. Roofing isn’t backwards.

OG stills

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.

RoofHero Open Graph 1200 by 630
roofhero-og-1200x630.png Pampas + plantation band. Find my roof. If the still uses St Ives: Example aerial — rights unproven.
OnRoover Open Graph 1200 by 630
onroover-og-1200x630.png Paper. Caps-dot. Isolated roof. Talk to Roover. Never the visitor’s house.
RoofHero square 1080
roofhero-square-1080.png Same lock as OG. St Ives: rights unproven — label it.
OnRoover square 1080
onroover-square-1080.png Company square. Isolated roof. Talk to Roover.
RoofHero story 1080 by 1920
roofhero-story-1080x1920.png Address cue + Find my roof. Bottom 220 px safe. St Ives: rights unproven.

Rights and spend

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.