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.
NN_type_descriptor · lowercase + underscores · number matches the § in the Section-by-Section spec · starts at 01, no 00_header.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.
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.
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.
Each section is in the order a visitor scrolls. The persona tag shows who that section is designed for. Every section has a purpose.
Camera Inspection
See inside your pipes before any work begins.
190,380/mo gapSewer Camera Inspection
Targeted repairs for cracked, collapsed, or damaged lines.
22,200/moTrenchless Repair
Fix your sewer without destroying your yard.
73,470/mo clusterLine Replacement
Full sewer line replacement when repair is not enough.
76,600/mo gapRoot Removal
KC's clay soil feeds roots into your pipes. We clear them.
39,850/mo clusterSewer Cleanout
Access point maintenance and emergency clearing.
184,720/mo gapThese are the specific photos Stephanie asked for in the Mar 27 meeting. Upload to the "Sewers" folder on Drive. She will help select.
sewer-hero-team-working.jpg not IMG_0742.JPGLook 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.
$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.
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 Image | Real 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 Treatment | Bright, not dark overlays. No text on photos. Real team photos, not stock. |
| Font | Inter for landing pages and blogs. PT Sans for main site pages. Both locally hosted. |
| No Emojis | No emojis on any customer-facing page. Clean and professional. |
| Interactive Widgets | OK to use. Borders: bright blue #30C5FF |
| CTA Buttons | Blue button: #30C5FF background, white text. NOT yellow gradient blocks. |
| Wave Dividers | Between sections. Subtle, not aggressive. Baked into section transition PNGs. |
| Section Colors | Alternate between: #f7f7f7 (light gray), #d8f0f9 (light blue), #ffffff (white) |
| Content Width | Max 760px centered for body text. |
| Process Circles | Gradient blues: #ceecf8 #96daf8 #4cc1ef #3ca1d8 |
| Theme | No dark theme on customer pages. Light and bright. This brief uses dark theme for internal readability only. |
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 Text | 16px / Regular 400 / line-height 1.7 / max-width 760px |
| Small / Caption | 14px / Regular 400 |
| Paragraph Spacing | 18px margin-bottom |
Mobile
| H1 (Hero) | 32px / Bold 800 |
| H2 (Section) | 24px / Bold 700 |
| H3 (Subsection) | 20px / Semi 600 |
| Body Text | 16px (same as desktop) |
| Small / Caption | 13px |
| Desktop | 1440px wide (content area 1200px, text max-width 760px centered) |
| Tablet | 768px |
| Mobile | 375px |
| Figma Frames | Create 3 frames named: "Desktop - Sewer Camera", "Tablet - Sewer Camera", "Mobile - Sewer Camera" |
| Figma Handoff | Figma makes handoff easier. Robert can inspect exact CSS values from Figma inspect mode. |
| Sewer Photos | Marketing > 2026 > Blog Assets > sewer-camera-inspection/ (hero photos, camera findings, infographics) |
| Trust Badges | Marketing > 2026 > Email > Trust Badge Row/ (check-mark, google-review, licensed-insured PNGs) |
| Social Icons | Marketing > 2026 > Email > Social Icons/ (facebook, instagram, tiktok, linkedin, youtube, twitter PNGs) |
| Compression | All photos: compress with TinyPNG before using |
| File Naming | Descriptive kebab-case: sewer-camera-hero-team.jpg not IMG_0742.JPG |
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
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
Full keyword strategy:
Bright Side Plumbing Keyword Weaponization Strategy
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.