One template design that powers every service page on callbrightside.com. You design it once. We reuse it everywhere.
One Oxygen Builder template that gets reused across 8+ sewer pages first, then every service page on the site. The template needs to work for any service: sewer, drain, water heater, emergency. Content areas are editable per page. The design structure stays locked.
Think of it like a magazine layout. Every article looks different because the words and photos change, but the columns, fonts, and spacing are always the same. That is what this template does for our service pages.
These are the rules from today's conversation. Every design decision for the service page template must follow these.
Hero Image
Export hero as a PNG with the wave shape baked into the image itself. The wave is part of the photo file, not a CSS shape. Text goes BELOW the hero image, not overlaid on top. This is an ADA requirement: text on images creates contrast problems.
No Text on Images
Do not overlay text on any photograph. Contrast ratios fail ADA when text sits on busy backgrounds. All text lives in its own section below or beside the image. Bright, well-lit images only. No dark overlays or gradient fades over photos.
Interactive Widgets
Robert will embed interactive widgets (cost calculators, quizzes, comparison tools) into certain sections. Design placeholder areas for these. Widget borders should be #30C5FF bright blue. Widgets are functional, not decorative.
CTAs and Buttons
CTA buttons should be blue (#30C5FF) with white text. Not yellow gradient blocks. Clean, flat, modern. No emojis on any customer-facing page. Process step circles use gradient blues from #ceecf8 to #3ca1d8.
Four personas. Every section of the template is designed for at least one of them. The persona tags in the page architecture below show which section serves which person.
Emergency Eric (50-60% of revenue)
Pipe just burst. Basement flooding. On his phone. Does not read. Needs the phone number in the first second and proof someone will come today. Same-day service language and click-to-call are critical for this person.
Hero + Trust Bar + Final CTARenovation Rachel (25-30% of revenue)
Researching for 3-14 days. Has 3 tabs open comparing plumbers. Needs to trust Bright Side more than the other two quotes. Reads reviews, checks the process, wants camera footage and written estimates.
Process + Social Proof + PricingMaintenance 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. Highest lifetime value: $5K-$25K over time.
Problem Validation + FAQ + ServicesBusiness Owner Bob (8-12% of revenue)
Restaurant or office bathroom backing up during business hours. Needs after-hours availability, zero disruption, professional operation. High ticket ($2K-$8K) but low volume.
Commercial Callout + Final CTAEach section below is a block in the Oxygen template. The content changes per page, but every page has all 11 sections in this order. Persona tags show who that section is designed for.
Every service page follows this visual standard. Light backgrounds. Real photos. Clean sections with wave dividers.
SECTION BACKGROUNDS
#f7f7f7 light gray, #d8f0f9 light blue, #ffffff white. Alternate between sections.
WAVE DIVIDERS
SVG wave shapes between every section. Baked into hero PNG. Creates flowing visual rhythm. Not hard horizontal lines.
REAL PHOTOS
All photos from Google Drive > Marketing > 2026. Real team, real jobs. No stock photos. No CSS gradient placeholders. Compress with TinyPNG.
LOGO + LAYOUT
BSP logo top-left. Content max-width 760px centered inside 1200px container. Clean whitespace. No clutter.
Process Step Circles
The 4-step process (Inspect, Estimate, Approve, Fix) uses numbered circles with a gradient from #ceecf8 (light) to #3ca1d8 (medium blue). White number text. Connected by a subtle line or arrow. Clean, modern, not clipart.
Primary
Secondary
Tertiary
Service Page Section Colors
Font Families (Two Systems)
Inter -- Use for blog posts and landing pages. Google Font. Clean, modern, excellent readability at small sizes. This is the primary font for the service page template.
PT Sans -- Already locally hosted on callbrightside.com. Used on the main site navigation, header, footer. Keep using PT Sans for those elements. Service page body content uses Inter.
Desktop Typography
| H1 (Hero) | 48px / Bold 800 / line-height 1.15 / letter-spacing -0.02em |
| H2 (Section) | 36px / Bold 700 / line-height 1.2 / letter-spacing -0.01em |
| H3 (Subsection) | 28px / Semi 600 / line-height 1.3 / letter-spacing 0 |
| H4 (Card title) | 22px / Semi 600 / line-height 1.35 |
| Body Text | 16px / Regular 400 / line-height 1.7 / max-width 760px |
| Small / Caption | 14px / Regular 400 / line-height 1.5 |
| Paragraph spacing | margin-bottom: 24px between paragraphs |
Mobile Typography
| H1 (Hero) | 32px / Bold 800 / line-height 1.2 |
| H2 (Section) | 24px / Bold 700 / line-height 1.25 |
| H3 (Subsection) | 20px / Semi 600 / line-height 1.3 |
| H4 (Card title) | 18px / Semi 600 / line-height 1.35 |
| Body Text | 16px / Regular 400 / line-height 1.7 |
| Small / Caption | 13px / Regular 400 / line-height 1.5 |
| Paragraph spacing | margin-bottom: 20px between paragraphs |
Content Width Rules
| Outer container (design artboard) | 1440px |
| Content area (cards, grids, images) | 1200px centered |
| Body text max-width (paragraphs) | 760px centered |
| Body text color | #333333 on light backgrounds |
If designing in Figma before building in Oxygen, use these exact frame sizes. This ensures Robert can inspect CSS values directly from the Figma file.
DESKTOP FRAME
1440 x 6000+ px
Content area: 1200px centered with 120px side margins. Text max: 760px. Full-bleed hero image at top. Frame name: "Desktop - Service Page"
TABLET FRAME
768 x 5000+ px
Content area fills width with 40px side padding. Two-column grids collapse to single column. Frame name: "Tablet - Service Page"
MOBILE FRAME
375 x 5000+ px
Full-width content with 20px side padding. Single column everything. Tap targets 48px min. Frame name: "Mobile - Service Page"
Figma Recommendation
Figma Pro ($15/month) is recommended for design-to-code handoff. Robert can inspect exact CSS values (padding, margins, font sizes, colors) directly from Figma's inspect mode without Audrey having to write a spec document. Export specs are built in. Shared components mean you design a button, review card, or CTA block once and reuse it across every page. If you already have Figma, just share the file with Robert and he can pull values himself.
Robert handles all SEO implementation. Audrey does not need to write keywords into designs. This section explains WHY each section exists from a search perspective, so Audrey understands the structure is not arbitrary.
Section 01 Hero: The H1 targets the primary keyword for that service + "Kansas City" or "Overland Park." Example: "Sewer Camera Inspection in Kansas City." This is why the H1 text area needs to be prominent and not buried in a tiny overlay.
Section 02 Problem Validation: Targets informational symptom keywords. "Sewer smell in house" (126,100 searches/mo). "Slow drain" (6,600/mo). This section catches Maintenance Mike before he knows he needs a plumber.
Section 05 Services Breakdown: Each sub-service card targets a keyword cluster and links to its own page. "Trenchless sewer repair" (73,470/mo cluster). These internal links build the site's SEO architecture.
Section 08 FAQ: Targets long-tail question keywords. "How much does sewer camera inspection cost" (30,370/mo cluster). FAQ answers get FAQPage schema which shows in Google's search results as expandable questions. More SERP real estate.
Look at these to see what exists in KC plumbing. Then make something better.
A-1 Sewer and Septic
Publishes pricing ($255 inspection). Dominant in KC organic. Basic design, not pretty. BSP should match their transparency but blow past their aesthetics. They win on content depth, not looks.
Quick Relief Plumbing
Position 2 organic for "drain cleaning KC." Dedicated KC-specific landing pages. Clean layout, good local targeting. Their structure is solid but design is generic. Good reference for page flow.
100 Year Plumbing (Our Sister Company)
The hero photo with glass reflection style. Stephanie loves that look. This is the visual benchmark for BSP's hero section. Guys working, natural light, professional but authentic.
Smedley Plumbing
4.9 stars, 800+ reviews. "10,000 Hour Guarantee" on every tech. Clean modern site. Strong trust signal execution. Study how they present social proof and guarantees. BSP has the reviews (394+) but does not display them as well.
All photos from Google Drive > Marketing > 2026. Bright, well-lit images. No dark overlays. If we need new shots, Audrey coordinates with the team.
HERO SECTION
Team at Work
Team working on a job. "Glass reflection" style per Stephanie's request. Warm, professional, real. Export as PNG with wave baked into bottom edge. Bright daylight, not dark.
PROCESS SECTION
Camera and Before/After
Camera inspection screen showing pipe footage. Before/after shots of root intrusion repair. Real jobs, not stock.
TRUST SECTION
Our Master Plumber
Arms crossed in front of the van. From LSA photos. Confident, approachable. Do not use his name publicly. "Our master plumber" in captions.
GALLERY SECTION
Before/After Gallery
Side-by-side comparisons. Damaged pipe vs repaired pipe. Trench vs trenchless. 2-3 pairs minimum per service page.
sewer-hero-team-working.jpg not IMG_0742.JPG. No emojis in filenames or on the pages themselves.Everything Audrey needs lives in the shared Google Drive. Here are the exact folders.
Trust Badge Row (PNGs): Google Drive > Marketing > 2026 > Email > Trust Badge Row. Google stars badge, BBB badge, licensed badge, family badge. Use these in the trust bar section.
Social Icons (PNGs): Google Drive > Marketing > 2026 > Email > Social Icons. Facebook, Instagram, Google, Yelp icons in BSP brand colors.
Sewer Job Photos: Google Drive > Marketing > 2026 > Blog Assets > sewer-camera-inspection. Camera footage screenshots, before/after pairs, team at work on sewer jobs.
Team Photos: Google Drive > Marketing > 2026 > Photos. Group shots, individual tech photos, truck shots. The recent ones Audrey took.
Logo Files: Google Drive > Marketing > Brand Assets. BSP logo in SVG, PNG, and white-on-dark variants. Use SVG for web when possible.
Primary CTA: "Call (913) 963-1029" -- blue button (#30C5FF background, #ffffff white text). Not yellow gradient blocks.
Secondary CTA: "Book Online" -- links to the CRO form on /contact-us/
Trust Bar: 4.9 stars | 394+ reviews | 5th-gen family | Licensed and insured
Every section has a CTA. Not aggressive. Just always available. The customer should never have to scroll to find how to contact us. If they are ready to call, the button is right there.
Button Specs
| Primary CTA | #30C5FF bg / #ffffff text |
| Secondary CTA | #1D1760 bg / #ffffff text |
| Button Height (mobile) | 48px min (tap target) |
| Button Padding | 14px 28px |
| Border Radius | 8px |
| Font | Inter / 16px / Bold 700 |
| Phone CTA text | "Call (913) 963-1029" |
Dispatch Fee (Updated Apr 2)
| Standard Dispatch Fee | $89 |
| Sewer Calls | FREE diagnostic |
| Note | Dispatch fee waived if we do the work |
You focus on the design. Robert handles all the technical stuff that lives inside and around the template.
Service Page (What You're Designing)
Lives permanently on callbrightside.com. Full navigation. Comprehensive content. Targets organic Google search. Example: /sewer-camera-inspection/
Landing Page (Separate Thing)
Stripped-down page for Google Ads traffic. No navigation distractions. One CTA. Robert builds these separately. You do not need to worry about them.
Audrey designs the template in Figma or directly in Oxygen Builder. All 11 sections. Desktop, tablet, and mobile breakpoints. Share Figma file with Robert for CSS inspection.
Robert reviews the template. One round of feedback. Small adjustments only -- the architecture is already locked in this brief.
Sewer Camera Inspection goes live using the template. Robert populates content. Audrey verifies design holds up with real content.
Remaining 7 sewer pages populated using the template. Then we roll it out to drain, water heater, and emergency pages.
Sewer Landing Page Creative Brief (detailed wireframe):
morpheus.callbrightside.com/documents/BSP_Sewer_Landing_Page_Creative_Brief.html
Audrey's Mar 2026 Creative Brief (social media):
morpheus.callbrightside.com/documents/BSP_Audrey_Creative_Brief_Mar2026.html
Keyword Weaponization Strategy (40,847 keywords):
morpheus.callbrightside.com/documents/BSP_Keyword_Weaponization_Strategy.html
Competitor Examples (look at structure, not design):
A-1 Sewer and Septic, Quick Relief Plumbing, Smedley Plumbing. Their service pages rank well. We will look better.