🧩 BRICKS AI HYBRID PATH · LIVE APR 20 2026

This playbook is built under the 3-tool workflow: Figma for the 20% that carries the brand (hero + MOAT sections), Bricks AI Studio for the 80% that repeats (grids, rows, accordions, chip bars), Claude/Nexus to orchestrate briefs.

🚫 OFF-LIMITS
Audrey does NOT design a header or footer in Figma. Global Bricks components already ship on every page.
📐 NAMING
NN_type_descriptor · lowercase + underscores · number matches the § in the Section-by-Section spec · starts at 01, no 00_header.
🧩 PER-SECTION MODE
One frame at a time. Audrey names the frame → asks Claude: “prompt for [page] section NN” → tuned Bricks AI prompt returned → paste in Bricks AI → approve → ship.
📦 WHOLE-PAGE MODE
Full bundle. All frames named → asks Claude: “whole [page] prompt pack” → document with every section prompt. Figma-flagged sections marked “drop your Figma export, do not regenerate.”
Every prompt enforces: No header/footer generation · Brand tokens (#1D1760 navy, #30C5FF blue, #FFEA00 yellow, Inter) · Stephanie format (Problem → Impact → Solution → Data → Need) · LocalBusiness + page-type schema · Mobile-first (44px taps, 16px body min) · No em dashes in client copy.
→ Full 3-tool workflow diagram + 5 wiring steps
Creative Brief for Audrey

Sewer Camera Inspection Page

This is the first service page of the new Bright Side. Whatever you design here becomes the template for every page after it. Here is the structure, the content, and the photos. Make it beautiful.

Priority #1 per Kalen $1,796 avg ticket 190K monthly searches with no Bright Side Plumbing page Target: /sewer-camera-inspection/

Why This Page Matters

Sewer is the highest-ticket service at Bright Side. Google Ads is spending $1,541 a month on sewer keywords with no proper landing page. There are 190,000 people a month searching for sewer camera inspections and Bright Side has zero content for it. This page fixes all of that at once.

Who Lands on This Page

Emergency Eric (50-60% of revenue)

Basement flooding. Sewer backed up. On his phone. Doesn't read. Needs the phone number in the first second and proof someone will come today.

Renovation Rachel (25-30% of revenue)

Researching for 3-14 days. Has 3 tabs open. Needs to trust Bright Side more than the other two quotes. Reads reviews, checks the process, wants camera footage.

Maintenance Mike (45-55% of leads)

Noticed a slow drain or weird smell. Not in a rush. Needs educational content that validates his concern and makes calling feel smart, not expensive.

Business Owner Bob (8-12% of revenue)

Restaurant bathroom backing up during dinner. Needs after-hours, zero disruption, professional operation.

Page Wireframe (Scroll Order)

Each section is in the order a visitor scrolls. The persona tag shows who that section is designed for. Every section has a purpose.

Emergency Eric
Section 1 -- Above the Fold
H1: Sewer Camera Inspection in Kansas City -- See Inside Your Pipes Before You Decide
Subhead: Sewer backups, broken lines, root intrusion. Bright Side Plumbing has been fixing Kansas City's sewers for five generations. Call now or book online.
drain camera (74,000/mo), sewer inspection near me (33,100/mo) Kansas City same-day
Photo: Full-width hero. Team at a sewer job -- Stephanie wants the "guys working, glass reflection" style like the 100 Year hero. Edward and Halen working together, or the excavator shot.
Call (913) 963-1029 Book Online
Phone: 28px+ bold, click-to-call mobile Trust bar below: 4.9 stars | 394+ reviews | 5th-gen | Licensed CTA button: #FFEA00 bg, 48px tall min
All Personas
Section 2 -- Trust Bar
Visual trust strip (one row, horizontal)
Four badges in a row. No explanation needed. Just the proof.
⭐ 4.9 Stars (394+ Reviews)
🔧 5th-Generation Plumbing Family
✅ Licensed & Insured
⏱ Same-Day Service Available
One row, centered, small icons + text Background: subtle dark card
Maintenance Mike
Section 3 -- Problem Validation
H2: What a Sewer Camera Inspection Reveals
This section shows what the camera finds. Real problems, real footage. The visitor sees WHY an inspection matters before committing to repair. This section validates the visitor's concern. They Googled "sewer smell in house" or "slow drain." This tells them: you are right to be worried, and here is what it could mean.
Content (6 items, icon + 1-sentence each):
🚫 Multiple slow drains at the same time
💨 Sewer smell in your house or yard
🌊 Water backing up in the basement or lowest drain
🌳 Lush patches of grass over your sewer line
💧 Gurgling sounds from toilets or drains
🧪 Sewage in the cleanout or floor drain
sewer smell in house (126,100 cluster) sewer backup (4,400/mo) slow drain (6,600/mo)
Photo: Camera inspection screen showing pipe interior. Real footage, not stock.
Not sure? Call us at (913) 963-1029 for a $49 diagnostic (waived if we do the work)
Renovation Rachel
Section 4 -- Process (How We Work)
H2: How Our HD Camera Inspection Works
Rachel has 3 quotes open. This section shows her we are transparent, methodical, and won't surprise her. The Chris Fresh framework: position as diagnostic experts, not just repair guys. "We help you understand what is wrong and give you honest options."
4 Steps (numbered, visual):
1. Camera Inspection -- We run a camera through your sewer line so you can see exactly what is going on. No guesswork.
2. Honest Options -- We show you the footage and explain your options: repair, trenchless, or full replacement. Written estimate, no pressure.
3. You Approve -- Nothing happens until you say yes. No surprises. No hidden fees. The price we quote is the price you pay.
4. We Fix It -- Our crew handles the repair, runs a final camera check to confirm everything is clear, and cleans up after ourselves.
sewer camera inspection (190,380 cluster) trenchless sewer camera inspection (73,470 cluster) Targets Rachel's 3-14 day research window
Photos: Before/after camera footage side by side. Root intrusion before, clean pipe after. Team at work doing the repair.
Get Your Free Inspection Estimate
All Personas
Section 5 -- Sewer Services
H2: Sewer Services We Provide
Grid of services. Each one is a card with icon, name, 1-2 sentence description. These target the keyword clusters and link to dedicated pages as we build them.

Camera Inspection

See inside your pipes before any work begins.

190,380/mo gap

Sewer Camera Inspection

Targeted repairs for cracked, collapsed, or damaged lines.

22,200/mo

Trenchless Repair

Fix your sewer without destroying your yard.

73,470/mo cluster

Line Replacement

Full sewer line replacement when repair is not enough.

76,600/mo gap

Root Removal

KC's clay soil feeds roots into your pipes. We clear them.

39,850/mo cluster

Sewer Cleanout

Access point maintenance and emergency clearing.

184,720/mo gap
Renovation Rachel
Section 6 -- Social Proof
H2: What Kansas City Homeowners Say
This is where Rachel decides. She has already read the process. Now she needs proof from real people. Pull 3 sewer-specific Google reviews. Include the star rating and reviewer name.
Elements:
⭐ Google review widget (4.9 stars, 394+ count)
💬 3 real review quotes about sewer work
📷 Before/after photo gallery (2-3 pairs minimum)
🏆 "5th-generation plumbing family" story block with team photo
Photos: The muddy hands close-up (Stephanie loved this). Team group photo. Before/after trench or trenchless work.
Join 394+ Happy Customers -- Call (913) 963-1029
Business Owner Bob
Section 7 -- Commercial Callout
H3: Commercial Sewer Service
Short section. One card. Bob is 8-12% of revenue but high ticket. "Restaurants, offices, and property managers. We work around your schedule to minimize disruption. After-hours available."
Subtle section, not dominant One paragraph + phone number
Maintenance Mike
Section 8 -- FAQ
H2: Sewer Camera Inspection Questions
Accordion-style FAQ. Each question targets a keyword cluster. Answers are 2-3 sentences, honest, no fluff. These get FAQPage schema markup (Robert handles that).
Questions:
Q: How much does sewer camera inspection cost?
A: It depends on the type of damage and repair method. After our camera inspection, we give you a written estimate with options before any work starts. Our diagnostic is $49, waived if we do the work.
sewer camera inspection cost (30,370/mo cluster)

Q: What causes sewer line damage?
A: The three most common causes in Kansas City are tree root intrusion (our clay soil is a magnet for roots), aging clay or Orangeburg pipes, and ground shifting. A camera inspection shows exactly what is happening.
tree roots sewer (39,850/mo cluster)

Q: How long does sewer camera inspection take?
A: Most repairs are completed in one day. Trenchless repairs often take less than a day. Full replacements can take 2-3 days depending on the scope.

Q: Do you offer trenchless sewer camera inspection?
A: Yes. Trenchless repair uses pipe lining or pipe bursting to fix your sewer without digging up your yard. Not every situation qualifies, which is why we always start with a camera inspection.
trenchless sewer camera inspection (73,470/mo cluster)

Q: Why does my house smell like sewage?
A: A sewer smell usually means a cracked pipe, a dried-out trap, or a blocked vent. Do not ignore it. Sewer gas contains methane and hydrogen sulfide. Call us and we will find the source.
sewer smell in house (126,100/mo cluster)

Q: Do you serve my area?
A: We serve the entire Kansas City metro -- Overland Park, Olathe, Lenexa, Shawnee, Leawood, Lee's Summit, Kansas City MO and KS, and surrounding areas.
Emergency Eric
Section 9 -- Final CTA (Full Width)
Sewer Problem? Call Kansas City's 5th-Generation Plumbing Family.
(913) 963-1029
callbrightside.com | 12022 Blue Valley Pkwy, Overland Park, KS
Call Now Book Online
Full-width banner Phone + form side by side on desktop Sticky mobile CTA bar at bottom of screen on mobile
Photo Direction (From Stephanie)

These are the specific photos Stephanie asked for in the Mar 27 meeting. Upload to the "Sewers" folder on Drive. She will help select.

Hero Shot
Team at sewer job. Guys operating. Glass reflection style like 100 Year hero. Edward + Halen working together.
Stephanie: "Something like the 100 Year page, that first picture"
Muddy Hands
Close-up of hands after sewer work. Real, authentic, shows the craft.
Stephanie: "I actually like the one with the muddy hands"
Camera Inspection
Tech running the camera. Screen showing pipe footage. Shows the diagnostic process.
For the Process section + Signs section
Before/After
Root intrusion camera shot vs clean pipe after. Side by side.
For Social Proof + Process sections
Excavator Shot
Chris on the excavator doing a traditional dig. Shows scale of work.
Audrey: "I think it was October, Chris on the excavator"
Team Group
Full team photo for the Social Proof section. The ones Audrey just took.
For "5th-generation" story block
Reminder: Compress with TinyPNG before uploading. Name files descriptively: sewer-hero-team-working.jpg not IMG_0742.JPG
Competitor Pages (Design Reference)

Look at these to see what exists. Then make something better.

A-1 Sewer & Septic

Publishes pricing ($255 inspection). Dominant in KC. Basic design. Bright Side Plumbing should match their transparency but blow past their aesthetics.

Quick Relief Plumbing

Position 2 organic for "drain cleaning KC." Has a dedicated KC-specific page. Clean layout. Good reference for local targeting.

100 Year Plumbing (Our Own)

The hero photo with glass reflection. Stephanie loves that style. Use it as the visual benchmark for Bright Side Plumbing's sewer page.

Smedley Plumbing

4.9 stars, 800 reviews. "10,000 Hour Guarantee" on every tech. Clean modern site. Good trust signal execution to study.

Why This Page Will Make Money

$1,796

Avg sewer ticket (ST data)

618K

Monthly searches with no Bright Side Plumbing page

$224K

Sewer revenue last 90 days (QB)

The math: If this page converts just 1% of the search traffic into calls, at 80% booking rate and $1,796 avg ticket, that is significant new revenue every month. One page. Built once. Pays forever.

This Is the Structure. This Is the Content.

The wireframe, the headlines, the copy, the photo direction -- it is all here. Your job is to make it look like nothing else in Kansas City plumbing. The brand you built on Instagram? Bring that same energy to this page. Make Stephanie proud. Make Kalen more money.

Universal Design Standard (Apr 2, 2026)

These specs apply to every service page and blog landing page on callbrightside.com. They are the template rules. Everything above is sewer-specific content. Everything below is the design system.

Section A: Design Rules

Hero ImageReal photo with wave divider baked in as PNG. Text sits BELOW the image, not overlaid on it. ADA compliance + Google does not like text on images.
Photo TreatmentBright, not dark overlays. No text on photos. Real team photos, not stock.
FontInter for landing pages and blogs. PT Sans for main site pages. Both locally hosted.
No EmojisNo emojis on any customer-facing page. Clean and professional.
Interactive WidgetsOK to use. Borders: bright blue #30C5FF
CTA ButtonsBlue button: #30C5FF background, white text. NOT yellow gradient blocks.
Wave DividersBetween sections. Subtle, not aggressive. Baked into section transition PNGs.
Section ColorsAlternate between: #f7f7f7 (light gray), #d8f0f9 (light blue), #ffffff (white)
Content WidthMax 760px centered for body text.
Process CirclesGradient blues: #ceecf8 #96daf8 #4cc1ef #3ca1d8
ThemeNo dark theme on customer pages. Light and bright. This brief uses dark theme for internal readability only.
Section B: Desktop + Mobile Typography

Desktop

H1 (Hero)48px / Bold 800 / line-height 1.2 / letter-spacing -0.5px
H2 (Section)36px / Bold 700 / line-height 1.3
H3 (Subsection)28px / Semi 600 / line-height 1.4
Body Text16px / Regular 400 / line-height 1.7 / max-width 760px
Small / Caption14px / Regular 400
Paragraph Spacing18px margin-bottom

Mobile

H1 (Hero)32px / Bold 800
H2 (Section)24px / Bold 700
H3 (Subsection)20px / Semi 600
Body Text16px (same as desktop)
Small / Caption13px
Section C: Artboard Sizes
Desktop1440px wide (content area 1200px, text max-width 760px centered)
Tablet768px
Mobile375px
Figma FramesCreate 3 frames named: "Desktop - Sewer Camera", "Tablet - Sewer Camera", "Mobile - Sewer Camera"
Figma HandoffFigma makes handoff easier. Robert can inspect exact CSS values from Figma inspect mode.
Section D: Asset Locations (Google Drive)
Sewer PhotosMarketing > 2026 > Blog Assets > sewer-camera-inspection/ (hero photos, camera findings, infographics)
Trust BadgesMarketing > 2026 > Email > Trust Badge Row/ (check-mark, google-review, licensed-insured PNGs)
Social IconsMarketing > 2026 > Email > Social Icons/ (facebook, instagram, tiktok, linkedin, youtube, twitter PNGs)
CompressionAll photos: compress with TinyPNG before using
File NamingDescriptive kebab-case: sewer-camera-hero-team.jpg not IMG_0742.JPG
Section E: Dispatch Fee Update (Apr 2, 2026)

IMPORTANT -- Pricing Change:
$89 dispatch fee (was $49, changed Apr 2, 2026)
Sewer calls: FREE inspection (no dispatch fee)
$89 waived if customer proceeds with service

For this sewer page: The dispatch fee does NOT apply to sewer camera inspections. Sewer inspections are free. Update any FAQ or pricing references accordingly. The $89 dispatch fee applies to non-sewer service pages only.
Section F: Keyword Data (For Content Robert Will Fill In)

These are the keyword clusters driving the sewer page strategy. Robert writes the content targeting these terms. Audrey does not need to write SEO copy, but knowing the volumes shows why the page architecture is structured this way.

190,380/mo

Sewer Camera Inspection

THIS PAGE

184,720/mo

Sewer Cleanout

Next page

126,100/mo

Sewer Smell

Future page

Section G: Figma Recommendation

Figma Pro ($15/mo) recommended for design handoff.
Robert inspects exact CSS values from Figma inspect mode.
Export assets at exact sizes from Figma.
Shared components = design once, duplicate for each service page.

Workflow: Audrey designs in Figma → Robert inspects CSS → Robert builds in Oxygen Builder → Audrey verifies live page matches design.