Concept project
Ridgeline Plumbing & Air
A complete working concept site for a fictional plumbing and HVAC company. Raijin Studios is a new studio, so rather than show screenshots of someone else's work, we built the kind of site we would build for a real local service business, and you can use it live.
The brief
Ridgeline Plumbing & Air is a fictional plumbing and heating/cooling company serving a local area. The business, its reviews and its ratings in the demo are placeholder content, written to show how real content would be laid out.
The brief we set ourselves: most customers arrive on a phone, often during an emergency, so the site has one job above all, which is to get them to call or request a quote within seconds.
Goals
- Make calling the company a single tap from any screen.
- Let a customer request a quote in about 30 seconds on a phone.
- Show clearly which services and areas are covered.
- Load fast on a weak mobile connection, with no heavy scripts or trackers.
Design decisions
Urgency first
An emergency banner and top bar put the phone number above everything else, because a burst pipe does not wait for a long read.
Plain, scannable sections
Service cards, a short 'why us' section and a three-step process let a visitor decide quickly without scrolling through paragraphs.
Trust through clarity
A reviews section and an FAQ answer the usual hesitations. In this concept the reviews are fictional placeholders, and a real client would supply genuine ones.
Typography that feels like a trade
Plus Jakarta Sans headings paired with Inter body text are friendly but sturdy, and the strong contrast keeps the page readable outdoors on a phone in sunlight.
Signature effect: flow lines
Water-blue lines run through pipe-shaped tracks across the hero, and the quote button gives off a slow ripple. Both stop completely for visitors who prefer reduced motion.
Mobile-first decisions
- The phone layout was designed first, then enhanced for tablet and desktop.
- Sticky actions keep call and quote buttons within thumb reach as you scroll.
- Tap targets are generous and the quote form uses the right keyboard type for each field.
- Text stays readable without pinch-zooming.
Features in the demo
Everything below is actually present in the live concept site, which you can open and try.
- Emergency banner and top bar
- Tap-to-call buttons
- 30-second callback and quote form
- Service cards
- A 'why us' section
- A 3-step process
- Reviews section (fictional placeholder content)
- Service-area section
- FAQ
- Sticky actions on mobile
Measured Lighthouse scores
- 99Performance
- 98Accessibility
- 96Best practices
- 91SEO
Measured on 2026-10-15 with Lighthouse 12.8.2, mobile form factor. Each demo was audited from a local web server on this machine using Lighthouse's default mobile emulation and throttling, headless Chromium, one run per demo. The server sent the demo's real security headers but not the noindex header used on the showcase, because a real client site would be indexable. Scores vary a few points between runs and machines.
Tech and security
- Hand-coded HTML and CSS with a small amount of vanilla JavaScript, with no framework or page builder.
- Self-hosted fonts, so no third-party font requests.
- A strict Content-Security-Policy with no inline code, enforced by our build scan.
- No trackers, no cookies and no third-party scripts.
What we'd do for a real client next
- Replace the fictional reviews with genuine ones and add the real service areas.
- Connect the quote form to the business's inbox and add spam protection.
- Write LocalBusiness structured data and align the Google Business Profile.
- Add a care plan so hosting, updates and edits are handled.
Ready for a faster, safer website?
Tell us about your business. We review your current site first, reply within one business day, and there is no obligation.