Car Detailing Website Template
Demo brand: SABLECOAT · Paint correction & ceramic coating · 11 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this car detailing website template
A complete site for a paint correction and ceramic coating studio: eleven built routes covering services with prices, a work page, a booking route, a three-post journal and real terms and privacy.
A black car under studio light — the clearcoat’s wet specular gloss is the dominant sensory fact of the whole build. Dark midnight-blue ground, one off-white ink, one warm gold accent spent on price, CTA and the gloss readout and nothing else. Epilogue against Martian Mono.
The signature move is the correction pass. A scrub-driven raking studio reflection sweeps across a real car panel while a swirl-mark micro-marring field resolves out and a gloss readout climbs from roughly 78 GU to roughly 94 GU — measured specular gloss rising as marring is removed. The control ships with it: a satin wrap panel with no clearcoat gloss to correct, where the sweep passes and the reading stays flat at about 18 GU.
The 11 pages you get
- Home
/ - The correction pass, the studio’s position, the packages and the booking close.
- Services & prices
/services/ - Packages with published figures. In detailing, price anchoring is the whole sale.
- Work
/work/ - Finished cars. The proof page — this trade lives on before-and-after.
- Book a slot
/book/ - A working booking form with a pre-filled mailto: fallback and a live tel:.
- Journal
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Three worked articles
/blog/… - Ceramic coatings without the nine-year promises; how to wash a car without putting the swirls back; what a gloss reading actually tells you. All three are trust-building, and the last one explains the set-piece.
- Terms & privacy
/terms/ · /privacy/ - Real legal routes, written.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A scrub-driven raking reflection across a real panel, with a micro-marring field resolving out and a gloss readout climbing from ~78 GU to ~94 GU
- A declared control: a satin wrap panel with no clearcoat gloss, where the reading stays flat at ~18 GU through the same sweep
- Published package pricing as typed data, which is how a detailing studio anchors against the £80 mobile valet
- An honest ceramic-coating article — the one piece of content that separates a serious studio from the nine-year-warranty crowd
- Seven images printed under studio gloss, so a mixed phone-camera portfolio reads as one shoot
- Epilogue with Martian Mono, both self-hosted; a working booking form with a pre-filled mailto: fallback and a live tel:
- 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
- A black car under studio light — the clearcoat's wet specular gloss is the dominant sensory fact. Dark midnight-blue ground, one off-white ink, one warm gold accent spent on price, CTA and the gloss readout and nothing else.
- The mechanic
- "The Correction Pass": a scrub-driven raking studio reflection sweeps across a real car panel while a swirl-mark micro-marring field resolves out and a gloss readout climbs from ~78 GU to ~94 GU — measured specular gloss rising as marring is removed.
- Loud channel
- Texture
- Imagery. Printed under studio gloss
- Type & palette
- Epilogue · Martian Mono
-
#0a2445#f4f7fb#e8b04b - The control case
- A satin/matte-wrap panel — no clearcoat gloss to correct, so the sweep passes and the reading stays flat at ~18 GU. Drawn, not labelled.
Who it is for
Built for paint correction and ceramic coating studios, high-end valeting and PPF installers. It suits a studio charging four figures and needing the site to justify it. The register — dark, measured, gloss-obsessed — is aimed at the customer who already knows what a gloss unit is, or is about to find out.
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
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Are the gloss numbers real?
They are realistic figures for a black clearcoat before and after correction, and the point of the satin control is that the same sweep produces no change on a panel with nothing to correct. The article on what a gloss reading actually tells you is in the build so a customer can follow the argument.
Should I publish package prices?
Yes. Detailing is a category where customers cannot tell a £200 job from a £2,000 job without help, and published packages do that work before the call. The build assumes it and the layout is designed around it.
My before-and-after photos are phone shots.
The studio-gloss treatment is applied across the image set, which is precisely what stops a mixed portfolio looking amateur. It will not invent a photograph, but it will make seven inconsistent ones share one surface.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Moving set-piece
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Moving set-piece
KANWICK STEELWORKS
Steel fabrication
Loud
Texture
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Moving set-piece
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Palette