Cleaning Company Website Template

About this cleaning company website template

The 9 pages you get

Home /

The six-pass set-piece, the positioning, the services and the quote close.

Services /services/

Contract, end-of-tenancy, commercial — what is actually offered, and to whom.

Rates /rates/

Published pricing. The biggest conversion lever a cleaning firm has and the one most of them hide.

The six passes /method/

How the work is actually done. It is the page that justifies charging more than the cheapest quote.

Contact /contact/

A working enquiry form plus live tel: and mailto: paths.

Notes /blog/

A wired content collection — add an .mdx file and it appears here and in the sitemap.

Two worked articles /blog/…

The second pass is the one that pays, and what an end-of-tenancy argument is actually about. Both are sales arguments in disguise.

404 /404

Designed, not default. Keeps the navigation.

What is in the build

• A scroll-driven six-pass model where soil comes off in fractions, so five surfaces given identical treatment land at five different results
• A declared control: a sealed surface the firm refuses to wet-clean, where six passes change nothing
• Every colour in the build derived as a rung on a soil-removal ladder, mixed in linear light rather than picked from a palette
• A method route, which is how a cleaning firm stops competing purely on hourly rate
• Published rates as typed data
• Gabarito with Spline Sans Mono, both self-hosted; a working enquiry form plus live tel: and mailto:
• Vitest and Playwright suites included in the repository

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.

The world

An aqua ground where every colour on the page is one rung of a soil-removal ladder — the surface at residual r, soil over spotless mixed in linear light. Palette is loud; type, imagery and texture held quiet.

The mechanic

"The Sixth Pass": scroll is the pass count. Soil comes off in fractions, r(n) = (1 − k)ⁿ, so five surfaces given the same six passes end in five different places — glazing done at two, grout still short at six.

Loud channel

Palette

Imagery. Achromatic, gloss at full

Type & palette

Gabarito · Spline Sans Mono

#a9f2ed #12160f #12160f

The control case

Sealed limestone, k = 0.00 — a surface the firm refuses to wet-clean. Same six passes, residual stays 1.0000. Drawn, not labelled.

Who it is for

Built for contract and commercial cleaning companies, end-of-tenancy specialists and facilities firms — and the agencies that build lead-generation sites for trades. It suits an operator who wants to sell a method rather than an hourly rate. The junk-removal, pest-control and moving builds share the structure for neighbouring trades.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions