🧩 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

Service Page Template - Sewer Camera Inspection is the Master

The sewer camera inspection page at /sewer-camera-inspection/ (WordPress Page ID 1313) is the MASTER TEMPLATE for all future BSP service pages. Audrey designed it in Oxygen Builder. Every new service page should be duplicated from this one.

Page Architecture

Top half: Native Oxygen blocks (hero image, H1, content sections, service areas sidebar). Bottom half: Oxygen Code Block with raw HTML and CSS containing reviews, commercial section, FAQ, and footer.

Reusable blocks shared across all pages: view_id 264 (Service Areas sidebar), view_id 46 (Guarantees), view_id 36 (Services), view_id 47 (Members).

Reviews Section (What Kansas City Homeowners Say)

CSS classes: .bsp-reviews (container), .bsp-photo-row (4-column photo grid), .bsp-review-cards-row (2-column review cards), .bsp-review-card (individual card), .bsp-stars (star rating), .bsp-reviewer-name (name), .bsp-quote (review text), .bsp-who (location).

Photos from WP uploads: operating-sewer-inspection.png, technicians-working-sewer.png, plumber-dirty-hands-tools.png, technician-fusing-sewer-pipe.png.

CSS Override: Code Snippet #61 (BSP Reviews Mockup Match CSS) - Active. Changes: photos to 4/3 aspect ratio with box-shadow, review cards transparent background, quote text normal (not italic). Only targets page 1313 via is_page() PHP check.

How to Duplicate for a New Service Page

Step 1: Duplicate page 1313 in WordPress. Step 2: Change H1, meta title and description, canonical URL, hero image, and all content H2s and body text. Step 3: Change FAQ questions and update FAQPage schema. Step 4: Change exit intent modal offer text. Step 5: Keep reviews section, guarantees, services, members, and footer (these are shared reusable blocks). Step 6: Add the new page to the WordPress navigation menu under the correct parent category. Step 7: Submit to Google Search Console for indexing.

CSS Override Method

Do NOT edit Oxygen Code Blocks directly. Instead, add CSS-only PHP Code Snippets that override specific .bsp- classes. Use add_action wp_head with is_page() to target specific pages. Always create snippets as INACTIVE first, review the code, then activate. Example: Snippet #61 overrides .bsp-photo-row img, .bsp-review-card, and .bsp-quote on page 1313 only.

Audrey Design Rules

Font: Inter. Brand colors: #1D1760 navy, #30C5FF blue, #FFEA00 yellow. Hero image below text (ADA compliance). No emojis on public-facing pages. Blue borders using #30C5FF on accent elements. No em dashes in client copy.

Build Order for New Pages

Priority order: /sewer-line-replacement/, /sewer-cleanout/, /emergency-plumbing/, /water-heater-replacement/. One page per week. Menu grows as pages go live. Kalen writes or reviews all service page copy.