Design Handoff · VIP Roofing Brisbane

For: designer / OD agent / build operator

Read top-to-bottom before designing. Every section labeled with provenance:

- ✓ verified:* — from customer's site or trusted API · do not paraphrase

- 🤖 ai-completed:* — LLM-generated from real signals · may polish · keep facts

- ⚠ niche-typical:* — fallback default · should be replaced if real data available later

- ⚡ mixed:* — partially verified + partially AI-completed

Generated: 2026-05-17T02:48:22.172Z · slug: vip-roofing-brisbane

Provenance summary: 20 fields · ✓ 1 verified · 🤖 3 ai · ⚠ 3 niche-fallback · ⚡ 0 mixed

1. Business · LOCKED facts (verbatim · never paraphrase)

Field	Value	Source
Business name	`VIP Roofing Brisbane`	✓ gbp
Phone	`(07) 3062 7779`	✓ gbp
Phone tel: link	`tel:0730627779`	✓ gbp
Email	`(none)`	✓ gbp
Address	`39/71 Eagle St, Brisbane City QLD 4000, Australia`	✓ gbp
City	`Brisbane`	✓ gbp
State	`QLD`	✓ gbp
Niche	`roofer`	✓ gbp
Rating	`5★ (26 reviews)`	✓ gbp
Existing website	`https://www.viproofingbrisbane.com.au/`	✓ gbp
Google Maps	`https://maps.google.com/?cid=4273580595831149153`	✓ gbp
Domain age	`11y (wayback_first_snapshot)`	✓ wayback

Rule: every field above must appear in the final website verbatim. No paraphrasing of business name. No formatting changes to phone. Address as one string.

2. Existing visual identity (brand kit)

Skill used: logo-design (new logo) · domain viproofingbrisbane.com.au is parked/for-sale at scrape time — no live existing logo to extract

Variants (all in design/brand/):

design/brand/logo-light.svg

design/brand/logo-dark.svg

design/brand/logo-mark.svg

design/brand/logo-wordmark.svg

design/brand/logo-mono-dark.svg

design/brand/logo-mono-light.svg

design/brand/favicon.svg

design/brand/social-avatar.svg

Color tokens 🤖 logo-design-skill

Token	Hex
brand_primary	`#0E1118`
brand_secondary	`#5A5C61`
brand_accent	`#B68B3F`
surface	`#FFFFFF`
surface_muted	`#F4F4F5`
text	`#0E1118`
text_muted	`#5A5C61`
border	`#E4E4E7`

Typography

Heading: Inter Tight 700/800 — geometric extended sans, matches the heavy mark.

Body: Inter 400/500 — neutral, paired body.

Stack: 'Inter Tight', 'Industry Inc', 'Helvetica Neue', Arial, sans-serif

Brand personality: premium-trade, urban, commercial-credible, established, restrained-confident

Avoid: No gradient logos. No drop shadow on mark. No rounded 'P' bowl (must stay squared). No brass background washes. No 'welcome to' / 'trusted partner' / 'X years of excellence' template copy. No luxury cliché — VIP here means commercial-premium, not pageantry.

Full visual style contract (click to expand)

VIP Roofing Brisbane Website Visual Style Contract

Boundary

This contract defines brand direction and visual guardrails. It does not design the final UI, page structure, component layouts, breakpoints, or frontend implementation.

Brand Reading

Read the logo first: weight, typography, geometry, color, and personality should drive the website's visual system.

Overall Style Direction

Style: clean local business

The website should feel premium-trade, urban, commercial-credible, established, restrained-confident.

Avoid: No gradient logos. No drop shadow on mark. No rounded 'P' bowl (must stay squared). No brass background washes. No 'welcome to' / 'trusted partner' / 'X years of excellence' template copy. No luxury cliché — VIP here means commercial-premium, not pageantry.

Color Boundaries

```css :root { --brand-primary: #0E1118; --brand-secondary: #5A5C61; --brand-accent: #B68B3F; --surface: #FFFFFF; --surface-muted: #F4F4F5; --surface-dark: #111111; --text: #0E1118; --text-muted: #5A5C61; --border: #E4E4E7; } ```

Color rules:

Use brand colors by role, not decoration.

Maintain strong contrast for logo, text, nav, forms, and CTAs.

Do not overuse the accent color as a full-page wash unless explicitly specified.

Logo Usage Boundaries

Light background logo: logo-light.svg

Dark background logo: logo-dark.svg

Mark/compact logo: logo-mark.svg

Header: Light header (#FFFFFF) with logo-light.svg + dark text nav. Phone number top-right in brass. Sticky on scroll, 8% drop shadow.

Footer: Dark footer (#0E1118) with logo-dark.svg. Secondary text in #B5B5B7. ABN + license + Eagle St CBD address below logo.

Minimum size: Full lockup: 140px wide minimum on screen. Mark: 28px square minimum. Favicon: 16px (V/I/P remain readable; brass ridge becomes a single accent pixel row).

Local contact: For local businesses, preserve room for phone number and quote/contact CTA; do not oversize the logo in the header.

Export safety: check SVG viewBox padding so text, strokes, italic overshoots, and outlined paths are not clipped.

Typography

Heading font: Inter Tight 700/800 — geometric extended sans, matches the heavy mark.

Body font: Inter 400/500 — neutral, paired body.

Fallback stack: 'Inter Tight', 'Industry Inc', 'Helvetica Neue', Arial, sans-serif

Logo typography notes: Bold geometric extended sans (Inter Tight Bold 800 / approximating Industry Inc). The 'P' bowl is intentionally squared to suggest box-gutter / parapet geometry — that detail is part of the brand and must not be replaced with a rounded bowl. The 'I' has slab serif caps (parapet feel). Wordmark uses tracked sans for tagline (BRISBANE).

Layout Density

Density: medium/service-focused

Keep pages scannable, practical, and aligned with the brand's level of polish.

Shape Language

Use shapes, radius, borders, and line weights that match the logo geometry.

Header System

Protect logo visibility and avoid typography/color choices that compete with it. Do not prescribe exact header layout here.

Local business contact rule: Desktop header should expose phone or primary contact action. Mobile header should prioritize call, quote, or menu based on conversion need.

Footer System

Footer should preserve the logo as the primary brand object, with readable links and restrained CTA/contact treatment.

Buttons And CTA

Primary CTA: brass #B68B3F background, near-black #0E1118 text, 2px corner radius max. Secondary: outlined steel-gray border, dark text. Hover: 10% darker brass.

Cards And Forms

Squared corners (2px). Flat — no drop shadow. 1px #E4E4E7 border. Inner padding 32px.

Imagery Direction

CBD commercial roofing photography preferred (Brisbane skyline + commercial flat / metal roofs). Drone shots of completed work. Avoid stock 'handshake' and 'happy crew' shots.

Icon Style

Geometric line icons (1.5px stroke), squared terminals, no rounded ends. Industrial: ridge cap, parapet, gutter, lapping seam, ladder.

Section Backgrounds

Alternate white #FFFFFF and muted #F4F4F5. One hero section per page on #0E1118 with overlay imagery.

Motion And Interaction

Use subtle, purposeful interactions. Avoid animations that fight the brand tone or delay conversion actions.

Responsive Behavior

Define when full logo switches to mark-only, and protect logo visibility in mobile header/footer.

Do / Don't

Do:

Keep the logo visible in header, hero, footer, and mobile.

Use the brand token system consistently.

Match typography, shape, imagery, and icons to the logo personality.

Do not:

Recolor the logo outside documented variants.

Place the logo on low-contrast or busy backgrounds.

Use generic website templates that clash with the logo.

Add effects, shadows, or gradients to the logo unless explicitly approved.

Website Agent Prompt

```text Use the supplied VIP Roofing Brisbane mark exactly as provided. Do not redraw the V, I, or P glyphs; do not move or recolor the brass apex ridge. The brand reads as premium-trade for Brisbane CBD commercial roofing — restrained-confident, urban, geometric, structural. Use #0E1118 as primary, #B68B3F as the accent (apply sparingly — primary CTAs and apex line only), and #5A5C61 as secondary/text-muted. Strong typographic hierarchy with Inter Tight Bold for headings. Maintain high contrast; the brass accent is a precious-detail color, never a background wash. ```

3. Real content (Phase B extraction)

3a. Services (B1)

LLM observation: The scraped content appears to be mostly JavaScript/tracking code with very limited actual content visible. Only 'Roof Restoration' could be clearly identified from the visible text. Added three niche-typical roofer services to meet minimum requirements since the page content is largely obfuscated.

Roof Restoration ✓ scraped:index.md

Full roof restoration services for residential and commercial properties in Brisbane.

Evidence: > "Roof Restoration" — from index.md

Suggested page slug: /roof-restoration · icon: home

Roof Repairs ⚠ niche-typical:roofer

General roof repair services including leak fixes and damage restoration.

Suggested page slug: /roof-repairs · icon: wrench

Roof Replacement ⚠ niche-typical:roofer

Complete roof replacement services for worn or damaged roofs.

Suggested page slug: /roof-replacement · icon: refresh-cw

Metal Roofing ⚠ niche-typical:roofer

Installation and maintenance of metal roofing systems.

Suggested page slug: /metal-roofing · icon: layers

3b. About narrative (B2)

About VIP Roofing Brisbane

VIP Roofing Brisbane 自 2015 在 Brisbane 经营 · 至今 11 年。 Google 评分: 5★ · 26 条评论。

备注

MVP 阶段 · 这段为 niche typical + 硬数据综合 · LLM 综合升级见 V3-HANDOFF-STRUCTURE Phase B (Cascade A 调用)。

3c. Hero copy (B3) — 3 candidates

Candidate 1 · [service-led] ⭐ RECOMMENDED 🤖 claude:claude-sonnet-4-5

H1: Metal Roofing, Repairs & Full Restorations Across Brisbane

Sub: From quick leak fixes to complete roof replacements. Licensed roofers serving Indooropilly and surrounding suburbs with upfront pricing.

Primary CTA: Call (07) 3062 7779

Audit issues addressed: clear_service_offering, visible_phone_number, local_geographic_relevance

Rationale: _Immediately communicates the full service range and makes the phone number the primary action, removing any confusion about what they do or how to contact them._

Candidate 2 · [urgency-led] 🤖 claude:claude-sonnet-4-5

H1: Roof Leaking? We Fix Brisbane Roofs Fast—Today or Tomorrow

Sub: Emergency repairs, insurance work, and full restorations. Metal roofing specialists based in Indooropilly with same-week availability for urgent jobs.

Primary CTA: Get Emergency Help

Audit issues addressed: clear_value_proposition, urgency_for_emergency_services, local_credibility

Rationale: _Addresses the most common pain point (leaks) with a time-specific promise, making the CTA feel immediately relevant for distressed homeowners._

Candidate 3 · [trust-led] 🤖 claude:claude-sonnet-4-5

H1: Licensed Brisbane Roofers—No Subbies, No Surprises, No Runaround

Sub: We do the work ourselves: roof repairs, metal roofing, and full restorations. Serving Indooropilly homes and businesses with honest quotes and clean finishes.

Primary CTA: Request Free Quote

Audit issues addressed: credibility_signals, differentiation_from_competitors, transparent_process

Rationale: _Tackles the industry's credibility problem head-on by promising direct accountability, which immediately sets them apart from franchises and subcontractor networks._

3d. FAQ (niche-typical · 4-6 questions)

Q: How much does roof restoration cost in Brisbane? ⚠ niche-typical:roofer

A: Free quote · pricing depends on damage extent · we provide written estimates within 24 hours.

Q: Are you QBCC licensed? ⚠ niche-typical:roofer

A: Yes · we hold a current Queensland Building and Construction Commission license · public record at ABR.

Q: Do you offer free quotes? ⚠ niche-typical:roofer

A: Yes · no obligation site visit · written quote within 24 hours.

Q: How long does a roof replacement take? ⚠ niche-typical:roofer

A: Typically 2-5 days depending on roof size and weather · we keep you updated throughout.

Q: What's your warranty? ⚠ niche-typical:roofer

A: All workmanship guaranteed · Colorbond materials carry manufacturer warranties up to 36 years.

Q: Do you handle insurance claims? ⚠ niche-typical:roofer

A: Yes · we work directly with insurance companies for storm/hail damage claims.

4. Site architecture (B4 + B6)

14 pages · 5 service · 4 area Source: ? · long-tail coverage: ?

Slug	Type	Purpose	Bound images	Source
`/`	home	hero + 3 services + reviews + trust + map + CTA	—	[?]
`/roof-restoration`	service		—	[?]
`/roof-repair`	service		—	[?]
`/gutter-replacement`	service		—	[?]
`/gutter-guard`	service		—	[?]
`/metal-roofing`	service		—	[?]
`/roofer-brisbane`	area		—	[?]
`/roofer-brisbane-cbd`	area		—	[?]
`/roofer-brisbane-northside`	area		—	[?]
`/roofer-brisbane-southside`	area		—	[?]
`/about`	about	company story + ABN + license · trust 集中	—	[?]
`/reviews`	reviews	26 reviews aggregator	—	[?]
`/contact`	contact	form + tel + map	—	[?]

5. Image assets (B5 vision classify + B6 page bindings)

⚠️ No customer images available · build will use template stock or generated SVG/AI.

6. Existing-site audit issues (must be addressed by new build)

ID	Severity	What's wrong
`above_fold_cta_within_5s`	critical	no CTA keyword in first 1500 chars
`phone_visible_above_fold`	critical	phone hidden below fold or missing
`click_to_call_link`	major	no tel: link
`homepage_title_clear`	major	title='' contains-name=false contains-niche=false
`service_copy_specific`	major	0 service-related verbs detected
`trust_signals_present`	major	0 trust-keyword mentions
`h1_unique`	major	0 tags
`local_schema_markup`	major	no LocalBusiness JSON-LD
`has_hours`	minor	no hours
`image_count`	minor	0 images
`has_business_description`	minor	no description
`has_service_area`	minor	no service area
`favicon_and_meta`	minor	favicon: no, meta: no
`quote_or_booking_form`	minor	no form
`has_gallery`	minor	no gallery

6a. Issue → Page mapping

Issue ID	Target page	Target section	Verification check
`above_fold_cta_within_5s`	`?`
`phone_visible_above_fold`	`?`
`click_to_call_link`	`?`
`homepage_title_clear`	`?`
`service_copy_specific`	`?`
`trust_signals_present`	`?`
`h1_unique`	`?`
`local_schema_markup`	`?`
`has_hours`	`?`
`image_count`	`?`
`has_business_description`	`?`
`has_service_area`	`?`
`favicon_and_meta`	`?`
`quote_or_booking_form`	`?`
`has_gallery`	`?`

7. Boundaries — what you CANNOT do

商家硬数据 (verbatim · 一字不改 · VIP Roofing Brisbane)

business_name: VIP Roofing Brisbane

phone: (07) 3062 7779

phone_tel_link: tel:0730627779

address: 39/71 Eagle St, Brisbane City QLD 4000, Australia

abn: (待 ABR 补) (?)

rating: 5★ (26 reviews)

google_maps_url: https://maps.google.com/?cid=4273580595831149153

不许做的

编造 license 号 / award / 价格 / 团队规模

改 Reference template 的 data-od-locked 区

删 data-od-sample 标记 (M5 客户要改占位)

用 "Welcome to" / "Your trusted" / "X years of excellence" 这种模板套话

修改商家名拼写 / 改电话格式 / 简化地址

详见 docs/v4/DATA-PRESERVATION-CONTRACT.md

10. Market context (Phase E1 · Tinyfish search · external mentions)

Read this before designing copy · understand competitive positioning + how the business shows up across the AU web.

External mentions (AU-filtered) ✓ tinyfish:search

#	Title	Domain
1	[VIP ROOFING BRISBANE - Updated May 2026 - 23 Photos](https://www.yelp.com/biz/vip-roofing-brisbane-brisbane)	`www.yelp.com`
2	[VIP Roofing Brisbane](https://www.facebook.com/VIPRoofingBrisbane/)	`www.facebook.com`
3	[VIP Roofing Brisbane (@viproofingbrisbane)](https://www.instagram.com/viproofingbrisbane/)	`www.instagram.com`
4	[VIP ROOFING BRISBANE - Project Photos & Reviews - Houzz](https://www.houzz.com.au/professionals/roofing-and-gutters/vip-roofing-brisbane-pfvwau-pf~1704278009)	`www.houzz.com.au`
5	[VIP Roofing Brisbane - Home](http://viproofingbrisbane.weebly.com/)	`viproofingbrisbane.weebly.com`
6	[VIP Roofing Brisbane](https://au.linkedin.com/company/vip-roofing-brisbane)	`au.linkedin.com`
7	[VIP Roofing Brisbane](https://www.mapquest.com/au/queensland/vip-roofing-brisbane-794217557)	`www.mapquest.com`
8	[VIP Roofing Brisbane Brisbane City – 5.0★ Reviews & Hours](https://www.poyst.com/business/vip-roofing-brisbane)	`www.poyst.com`
9	[VIP Roofing Brisbane](https://www.whereis.com/brisbane-city-qld/wip/vip-roofing-brisbane-580887080)	`www.whereis.com`
10	[VIP Roofing Brisbane Competitors](https://rocketreach.co/vip-roofing-brisbane-competitors_b7550f9cc53f4590)	`rocketreach.co`

11. Existing site · per-page content (Phase E2 · scraped via Tinyfish)

1 pages scraped from the customer's current website · referenced to inform copy decisions on the new build · NOT to copy verbatim (rewrite to address audit issues).

index.md · 110583 bytes · viproofingbrisbane.com.au ✓ scraped:index.md

```text