In progress
Roof trace component
Selected base direction. Needs refinement, then lock before generating versions.
RoofHero visual system · current working master
Build the RoofHero system one component at a time.
This HTML companion mirrors the current MD and is the visual working source of truth for RoofHero brand-system iteration. Keep referencing and iterating on this file instead of creating one-off working files.
00 · Relationship
Roover is the engine. RoofHero is the proof layer.
Roover’s master file is the structural inspiration. RoofHero should use the same discipline, but translate every component into homeowner-facing trust and conversion.
Family
Roover inspiration
RoofHero task
Surfaces
Dark blueprint, light blueprint, paper output.
Create RoofHero surfaces: trust green, proof grid, report paper, ad dark.
Primitives
Scan trace, amber path line, live pulse.
Create RoofHero primitives: roof trace, proof chip, scope line, address start, review packet.
Trace
Homepage hero trace, journey trace, UI trace.
Refine and lock the grid + roof trace as the first RoofHero base component.
Ads/social
Starter section exists in Roover master.
Generate RoofHero paid ad variants from locked components, not from scratch.
01 · Build map
RoofHero component families to lock.
Blank areas are intentional. Where a RoofHero version does not exist yet, the Roover pattern is included only as inspiration and the task is called out.
Task
Roof Review packet
Roover inspiration: paper output for job packs, estimates, comparisons, and timelines.
Task: create RoofHero version that makes “we reviewed your roof first” feel tangible.
Task
Explainer path
Roover inspiration: phone journey and amber path line between steps.
Task: create RoofHero version: Address → Roof Review → Clearer Scope → Local Pricing Path.
Task
Trust chips / badges
Roover inspiration: live badge, powered badge, scope-confirmed badge.
Task: create RoofHero evidence chips for ads and site modules.
Task
Icon set
Roover inspiration: utility line icons with one amber signal.
Task: create RoofHero icons for roof, scope, measurement, address, access, review, pricing path.
Early V1
Ad templates
Early V1 exists. Next version should be generated from locked graphics, not manually improvised.
02 · Trace family
Current RoofHero base component.
This section mirrors Roover’s trace workshop idea, but the RoofHero translation is calmer and more homeowner-facing: evidence diagram, not live engine.
RoofHero base
Grid + roof trace
Formula: pampas technical grid + soft roof plane + blaze perimeter trace + dark ridge lines + one or two proof chips.
Roover inspiration
Trace workshop pattern
Roover has a mature trace system: hero trace, journey path trace, UI trace, measurement lines, animated dot, and readout cards.
RoofHero task: translate this into static-friendly homeowner proof first, then add restrained motion after the component is locked.
03 · Surfaces
Roover has this. RoofHero needs its own version.
The Roover master has dark blueprint, light blueprint, and paper output. RoofHero needs a similar surface system translated for trust, ads, and homeowner clarity.
Roover inspiration
Dark blueprint
Use in Roover for live engine work: scanning, mapping, routing.
RoofHero task: define dark trust/ad surface.
Roover inspiration
Light blueprint
Use in Roover for calmer explanation and technical detail.
RoofHero task: define proof grid surface.
Roover inspiration
Paper output
Use in Roover when a job pack, estimate, comparison, or timeline has been produced.
RoofHero task: define Roof Review packet/report surface.
04 · Next tasks
Create the RoofHero versions.
Each item should become a focused component chat, then a locked HTML/SVG template, then generated variants.
Priority
Component task
Definition of done
1
Refine grid + roof trace component.
Base template locked with SVG source, usage rules, and size variants.
2
Create RoofHero surface system from Roover surface structure.
Dark trust, proof grid, report paper, ad dark surfaces documented.
3
Create Roof Review packet graphic.
Report/packet component makes Roof Review feel tangible.
4
Create explainer path graphic.
Address → Roof Review → Clearer Scope → Local Pricing Path locked.
5
Generate ad/social versions.
Square, story, display, email header, and website hero graphics exported from locked components.
Working rule: if this page shows a Roover-inspired panel, it is not a finished RoofHero component. It is a task marker that says: create the RoofHero version deliberately.