Concept projectFictional business demonstrationPlumbing

Rumblebrook Plumbing Co.

A consumer-brand website for a plumbing company.

Concept project · Fictional business demonstration Rumblebrook Plumbing Co. is a fictional company. The site was designed and built to demonstrate consumer-facing plumbing web design and development. It has no licence, certifications, reviews, warranty or trading history — and rather than inventing those things, the site is designed so that none of them appear. The phone number is in the reserved 555-01xx range and does not connect.

A 20-route plumbing site built as a consumer brand rather than a trade contractor: a fifteen-band homepage, twelve service tiles resolving to ten detail pages, a promotional offer layer that shows the format without inventing a promotion, and a live Google Maps service-area visualisation with no storefront pin.

Open the live demo (fictional business) Measured results

The demo is a fictional business. It is noindex in the response header, a meta tag and robots.txt, and shows a concept disclosure on every page.

Type: 20-route local-service website: 10 main pages, 10 service pages
Stack: Eleventy 3 · Nunjucks · hand-written CSS · Google Maps JavaScript API; WordPress theme (validated locally only)
Hosting: Cloudflare Pages (static build, Direct Upload)
Built: September 2026
Status: Live demo, noindex
Live demo: rumblebrook-plumbing.pages.dev

Brief

Why a second plumbing site

The studio's plumbing work already had a good answer to one kind of brief. Brackwell Plumbing is the technical, editorial one — dense explanatory writing, diagnostic framing, a contractor who convinces by showing their reasoning. It does that well, and this project does not replace it.

But that is one register, and plenty of successful local-service businesses run the opposite one:

The branded consumer register — rounded, warm, promotional, image-led, long-scrolling. It reassures by looking like an established company rather than by explaining itself.
That register needs things the editorial one does not: a real menu for a business with twelve services, an offer layer, a service plan presented as a product, and a coverage map.

A studio that can only build the editorial version can only win the editorial brief. Rumblebrook is the consumer-facing branded build — same trade, deliberately different design family. The failure condition was written into the design spec before anything was built: if the homepage with the logo removed reads as another project in different colours, it has failed.

Design

What makes it a different design family

Consumer-brand positioning is not a colour choice. It shows up in navigation depth, in how much a band carries, and in what the page is willing to spend its accent colour on.

Home page above the fold at desktop width: announcement strip, identity header with a phone control and a Book Service button, a seven-item navigation row, and the headline "Water where it should be." on a pale green panel beside a photograph of plumbing work. — A typographic brand, after the mascot was cut

An earlier concept carried an illustrated river-otter mascot. It was cut at Phase 4 along with all seven of its forms, because character branding reads against premium local-service positioning — and nothing replaced it. The identity is Fraunces 700 against tracked Inter micro-caps, and that contrast is the whole mark. Marigold is spent in exactly three places: primary button fills, the circular icon medallions, and a divider rule. Never as text, never as a background. That budget is what keeps a promotional site from looking like a discount flyer.

The services index at desktop width: twelve service tiles in a grid, each with a circular marigold icon medallion, a square-cornered photograph and a See details link. — Twelve tiles, ten pages, seven-item navigation

Twelve service tiles run as a horizontal track and resolve to ten detail pages — two pairs share a page where the work genuinely is one job. The menu carries seven top-level items, three with dropdowns, so all twelve services are two moves from any page. That depth is the point: a five-link menu cannot represent a business with twelve services without hiding most of them.

One deliberate square in a rounded system

Radius is a role, not a default: 16px for large surfaces, a full pill for buttons, 50% for the medallions — and zero for the service tiles, and only the service tiles. One deliberately square element in an otherwise rounded system is what stops the page reading as a grid of identically rounded cards.

Screenshots from the live demo. The phone number is in the reserved 555-01xx range and does not resolve.

Method

Reference-led, and what that actually means

The reference: The project was developed from a supplied external local-service website reference. That is worth stating plainly, because "reference-led" is often a polite word for copied.
What it informed: Format only: information density and how much a band may carry · header hierarchy · navigation depth · promotional cadence and where an offer band sits in the scroll · the service-tile format · how a service plan is presented as a product · the position of a reviews-integration band · scheduling CTA placement · footer density.
What is original: Branding and wordmark · typography · every word of copy · all ten photographic masters · all 23 icons · the colour system · the service structure and taxonomy · route architecture · the component system · every line of markup, CSS and JavaScript.
What was not taken: No copy, photograph, icon, colour value, logo or markup. No affiliation with the reference is claimed or implied, and none exists.
How it was kept honest: The reference was analysed, then distilled to structural principles in a separate step. Implementation worked from the distillation, not from the reference — so there was never a moment where a designer had the original open beside the new page.

The upper half of the full home page composition, showing the alternating band rhythm: the announcement strip, header, statement panel, the horizontal service-tile track and the promise cards below it.

Claim gating

A promotional site with nothing to promote

The constraint: A branded consumer site needs an offer layer, a plan and social proof. A fictional business has none of those and cannot honour any of them. Every such claim is marked UNKNOWN and asserted:false in one config file rather than filled with a plausible value.
Demo offers: The band shows the format and says so four times over: a DEMO OFFERS eyebrow, DEMO OFFER on every card, "Demonstration content — not a real offer" inside each one, and a closing line stating they cannot be redeemed. No figure, percentage, price, expiry or the word "save" appears anywhere in it.
Enforced in the data model: The WordPress offer type has no price, percentage or expiry field, and the review-platform type has no rating, score, count or quote field. A fabricated discount or star rating cannot be entered through the admin even by accident.
Reviews: The reviews band shows integration slots and states in its own copy that no ratings are shown on this concept site. No AggregateRating appears in the structured data.
Years in business: founded_year is deliberately empty. A year typed there would resurrect the claim through a derived value.
Result: 0 claim-scanner hits on the static build, 0 on WordPress, and 0 on the live production HTML. The scan runs on every build and fails it if claim language reappears.

The seasonal offers page: three cream cards on a dark green band, each headed DEMO OFFER and each ending with the line "Demonstration content — not a real offer." No price, percentage or expiry appears on any of them.

Integration

Google Maps service-area visualisation

What it draws: A Boise-centred map with one coverage circle per city in the service area and six text-only city labels, all drawn from the same config that renders the text list beside it.
No pin, deliberately: There is no storefront marker and no address anywhere on the site. A point marker would assert a premises that does not exist; coverage circles assert reach, which is what the band is for. The icon set contains a map-pin glyph used only in the text list — it is never rendered on the map.
Verified on production: Tiles load, six circles render, six labels render, zero storefront pins, and zero Google Maps API errors across four routes — no referrer, activation, key, billing or expiry error in the browser console.
Kept out of the critical path: The SDK is IntersectionObserver-deferred and the band sits thirteenth of fifteen, so it never competes with the largest contentful paint. Home mobile still measures 1.69 s with the map on the page.
Accessible without it: The six service areas render as real text in the same band in every state. That list does not depend on JavaScript, on the map drawing, or on the API key existing. The map container carries an accessible name and its labels are aria-hidden so they are not read twice.

The service-area band on the live site: a Google map centred on Boise with six overlapping green coverage circles and six text-only city labels reading Boise, Meridian, Eagle, Nampa, Kuna and Star. No location pin appears anywhere on the map. Beside it, the same six areas are listed as text.

Measured

Measured performance

Lighthouse 13.4.1 on rumblebrook-plumbing.pages.dev, 15 Sep 2026. Mobile rows use simulated mobile throttling; median of 3 runs per route.

Lighthouse on the live demo
Page	Performance	Accessibility	LCP	Transfer
Home, mobile	100	100	1.69 s	303 KB
Home, desktop	100	100	0.41 s	305 KB
Services, mobile	100	100	1.63 s	129 KB
Service area, mobile	100	100	1.87 s	692 KB
About, mobile	100	100	1.58 s	354 KB
Contact, mobile	100	100	1.62 s	194 KB

Also measured on production

axe-core 4.10.2: 0 violations at any impact across 38 runs — 19 routes at 390px and 1440px.
0 horizontal overflow across 210 measurements: 7 viewport widths from 320 to 1920px on 20 static routes and 10 WordPress routes.
0 project tap targets below 44 x 44. The sub-44 targets that do appear belong to Google's own injected map UI — its zoom control, logo link, keyboard-shortcuts button and Terms link.
0 console errors and 0 Content Security Policy violations across 19 live routes, with the map drawing.
19 of 19 routes return 200; an unknown path returns a real HTTP 404 with the project's 404 page, no-store and noindex.
Seven security headers, each with exactly one value — no concatenated Cache-Control, which Cloudflare Pages produces when a wildcard rule and an asset rule both set it.
The service-area page transfers 692 KB because it carries Google's map tiles. Every other measured route is between 129 and 354 KB.

On the mobile LCP number

Phase 8 QA measured home mobile LCP at 2.78 s against a 2.5 s budget on a local static server, and that gap was accepted as a recorded deviation rather than quietly dropped.
Production measures 1.69 s on the same build. The deviation is recorded as closed by production evidence rather than deleted: the local measurement was real, and the serving environment — CDN plus immutable asset caching — was the difference.
SEO scores 69 on every route because is-crawlable fails by design. The site is noindex at three layers so a fictional contractor never appears in local search beside real ones. Every other SEO audit passes.

Platform

WordPress edition

The same site exists as a WordPress theme, sharing one configuration source with the static build. It was actually executed, not written and assumed.

php -l clean across all 42 theme files.
19 of 19 routes return 200 on the local runtime; an unknown path returns 404.
No theme notices, warnings or fatals across 20 route hits and 3 form POSTs under WP_DEBUG.
Rendered parity on all 19 routes — structural signature, visible text and the document head all identical to the static build.
The demonstration form: a valid submit redirects to a confirmation, an invalid nonce returns 403, a filled honeypot is discarded, and no database row is written by any of them.
0 claim-scanner hits on the rendered WordPress output.

Scope Validated with a WordPress + PHP + SQLite local runtime. Not validated: MySQL-specific production behaviour, real WordPress hosting, or real outbound email delivery. The WordPress edition is not deployed — the live demo is the static build.

Accessibility

Measured on production rather than asserted from the source.

axe-core: 0 violations at any impact, 38 runs across 19 routes at two widths.
Lighthouse Accessibility 100 on every route and preset.
One h1 per route, no skipped heading levels, a full landmark set and a working skip link.
A visible focus ring on every focusable element; the lowest measured contrast is 7.78:1 against a 3:1 requirement.
The mobile drawer is a proper modal surface: it closes on Escape and returns focus to its toggle, traps Tab and Shift-Tab, locks background scroll, and closes on an outside click.
Under prefers-reduced-motion: zero running animations and nothing left hidden.
Every image carries alt text and explicit dimensions — CLS is 0 on every measured route.

Credits

Credits and disclosure

Concept project. Rumblebrook Plumbing Co. is a fictional business demonstration — there was no client and no real company.
Design, copy, photography direction, build, QA and deployment: Tarkenil Studio.
Developed from a supplied external local-service website reference, used for format only. No copy, photograph, icon, colour, logo or markup was taken from it, and no affiliation is claimed or implied.
Typefaces: Fraunces and Inter, both under the SIL Open Font License 1.1, self-hosted as latin-subset variable WOFF2.
Mapping: Google Maps JavaScript API. The map shows a drawn coverage area for a fictional business — not a real operating territory, and there is no physical office and no Google Business Profile.
No business outcome of any kind is claimed — not conversions, enquiries, search position or customer sentiment. There was no client and no trading business to measure. Every figure on this page is a property of the artifact, measured on the live deployment with its tool, run count and date named.