RoofHero is the homeowner-facing brand. It should feel practical, direct, and calm: start with the address, prepare the Roof Review, confirm the scope, then show the right local pricing path.
Version 3 aligns to the live Cloudflare site after the May 28, 2026 launch-flow pass. It replaces old lead-gen signals with scope-first language.
Step 1 of 14
We'll use aerial imagery to prepare your Roof Review.
Used only to prepare your Roof Review. Stored securely.
Blaze orange carries action. Plantation green carries trust and seriousness. Pampas keeps the product from feeling like a SaaS dashboard. Ink is for real reading.
Primary CTA, icon accent, active selections.
Headings, dark buttons, serious surfaces.
Alternating sections and soft UI surfaces.
Body text where reading matters.
Selected chips, gentle warnings, callouts.
Grid overlay, status dots, secondary accents.
Page background and quiet bands.
Subheads, body support, explanatory text.
RoofHero headings should feel plain-spoken and sturdy. No negative letter spacing in compact UI. No decorative serif. No monospace UI except code references inside this document.
The RoofHero wordmark should be a first-viewport signal. Do not let it disappear into tiny nav text. Use SVGs from RoofHero Brand / Logo or the live site asset bundle.
RoofHero is a conversion and trust surface. Components should feel useful before they feel pretty. Cards stay quiet, buttons are decisive, chips make choices scannable.
One primary action in a visible section. Secondary actions are bordered or text links.
Badges label state. They do not become decoration or fake urgency.
Use cards for repeated items, forms, and framed tools. Avoid nesting cards inside cards. Border radius: 8px or less.
RoofHero visual language should make the roof easier to understand. Icons are simple line tools with one blaze accent. Images should show real roof context, aerial evidence, or the Roof Review object.
Use 2.2px rounded line icons in plantation dark. Add one blaze fill or dot where it clarifies the action. No filled icon sets, no emoji, no 3D icon packs, no construction clip art.
Use real roofs, aerial captures, details, trades at work, and finished roof surfaces. The homeowner should be able to inspect what is being shown.
Use roof outlines, simple measurement labels, before/after scope states, and step diagrams. Keep them flat, technical, and human-readable.
Avoid stock handshake photos, fake teams, exaggerated storm damage, generic suburb skylines, and glossy construction renders.
The old RoofHero brand assets had strong visual instincts: dark green, huge type, textured ad cards, icon illustration, and a useful component board. Keep those. Retire the lead-gen claim architecture.
The older green/orange/beige range still works. V3 narrows it into a practical site palette, while keeping darker gradients and texture for ads and brand slides.
Keep the dotted construction-line feel for marketing graphics. For core UI, use the simpler 2.2px icon set above.
The homepage hero should make the brand, offer, and next action visible without asking the homeowner to interpret marketing language. The grid background is allowed; gradient blobs and abstract hero illustrations are not.
#start.Roover owns the engine language. RoofHero uses the output as a homeowner trust object: roof outline, simple measurements, scope confidence, then a local pricing path. Use blaze for the trace, plantation for the canvas, and keep labels human.
Use animation sparingly. RoofHero motion is functional: reveal the roof, trace the scope, show the homeowner what will be reviewed. Never add motion just to make a static page feel busy.
Use for section headings, proof cards, and explanatory blocks. It should feel like content becoming available, not flying in.
Use when the homeowner adds address context or completes a flow step. Chips appear after the input, never before it is usable.
The canonical Roof Review motion. It traces the roof outline, then reveals the internal scope lines and measurement labels.
Use when explaining RoofHero and Roover together: homeowner front door, job engine, then local pricing path.
Animations are one-shot on page entry or section reveal. Do not loop the roof trace in production except in a dedicated demo or screensaver context.
All motion must honour prefers-reduced-motion. Static final state is always acceptable.
Do not animate the logo mark, fake live roofer activity, fake quote counts, or pricing claims that have not happened.
RoofHero should sound like a useful operator who understands the roof and the homeowner's stress. It should never sound like a quote marketplace selling urgency.