Websites
ConceptVanta
A cinematic website for an automotive detailing atelier.
A dark, high-contrast brand site for a premium car-care studio: an oversized editorial hero, a service menu with real presence, and an instant estimate calculator that turns interest into a consultation request.
Independent concept — designed and developed by TrueFrame Studio
- Type
- Independent concept
- Category
- Websites
- Platform
- Responsive website
- Built with
- HTML · CSS · JavaScript
- Disciplines
- Website Development, UI/UX Design
Screen 01 — Home
Cinematic hero: an angled photo panel and condensed type.
01Live demo
Try the working site.
Try this
- 01
Pick a treatment and a vehicle size: the estimate updates as you choose.
- 02
Jump to the craft, the services and the estimate from the top navigation.
- 03
Use Book a consultation to land straight on the estimate.
Key features
- 01
Cinematic hero
An angled photo panel, a dark fade and oversized condensed type set the tone in the first second.
- 02
Instant estimate
Service and vehicle size update an indicative starting price live, no page reload.
- 03
Service menu
Three signature treatments presented as an indexed list rather than a price grid.
02Screens
Inside the product.
Responsive
Recomposed for every screen.
Navigation, hierarchy and controls are rebuilt for tablet and phone, not scaled down from the desktop layout.
Tablet768 px
Phone390 px
03Under the hood
How it was made.
- Barlow CondensedDisplay · 900
- InterText · 400–700
- Ground#0A0A0A
- Panel#171717
- Ink#E9E9E6
- Signal#E85E31
Vanta imagines how a high-end detailing studio could present itself online with the same precision it brings to the work. The site leads with cinematic photography and heavy condensed type, then slows down into a short manifesto, the three core treatments, and a clear next step.
01Brief and goalsWhat it set out to do · what it explores
The estimate tool is the practical centre: pick a service and a vehicle size and an indicative starting price updates instantly, with a direct route to book a consultation. Final pricing is always confirmed after inspection.
Goals
- 01
Make a service business feel as considered as the cars it works on.
- 02
Show the core treatments clearly, without a wall of options.
- 03
Turn browsing into a consultation request with an instant estimate.
What the concept explores
- 01
How far a service business can lean into brand atmosphere while staying easy to use.
- 02
An estimate tool that answers the price question without replacing the consultation.
- 03
A dark, high-contrast system that stays readable on small screens.
02Design decisionsTypography · Colour · Layout · Interaction
- Typography
Condensed type at billboard scale
Barlow Condensed at weight 900 sets the headline at up to 320px with a 0.7 line height, so BUILT TO OBSESS stacks into one solid block. Inter carries the small, widely tracked labels.
WhyCondensed letterforms give scale without width: the headline reads like signage on a wide screen and still fits a phone, where it is set at 26% of the viewport width.
- Colour
One signal colour
Near-black and warm white do almost all the work. A single burnt orange is kept for the ® mark, the section tags, the estimate result and the call-to-action buttons, and the manifesto photograph is shown in greyscale.
WhyWhen only the important things are coloured, the eye goes straight to them: the price and the next step.
- Layout
An angled photo panel
The hero photograph is a panel cut with a diagonal left edge (CSS clip-path), pushed off the right of the screen and darkened, with a left-to-right fade laid over it.
WhyThe cut suggests speed without any animation, and the fade keeps the headline readable over the image at every width.
- Interaction
Price in context, not a price list
The treatments are an indexed list with no prices. The price question is answered last: service and vehicle size multiply into an estimate that updates as you choose, labelled illustrative, with final pricing after inspection.
WhyVisitors get a realistic starting point without the site pretending to replace the inspection, and the consultation button sits right under the number.
03Build and technologiesHTML · CSS · JavaScript
HTML
One page of sections — hero, philosophy, treatments, estimate — linked by in-page navigation.
CSS
Hand-written: grid layouts, a clip-path photo panel, gradient vignettes, clamp() fluid type and a 760px phone breakpoint.
JavaScript
A short inline script: the service price times the vehicle-size multiplier, rounded and written to the page on every change.
Google Fonts
Barlow Condensed for display, Inter for text.
Unsplash
Photography served from Unsplash's image CDN at fixed widths.
Static hosting
Plain files served from /showcase/vanta. No framework, no build step, no backend.
Services in this concept
04ProcessDiscover · Plan · Design & Develop · Launch & Support
01Discover
Study how premium detailers sell: trust, finish quality and the moment a visitor asks what it costs.
02Plan
Structure the site as hero, philosophy, treatments and estimate, so the price question is answered last and in context.
03Design & Develop
Design the dark editorial system, then build the responsive site and the live estimate calculator.
04Launch & Support
Test the calculator and layouts across devices and tune image loading for fast first paint.
Concept study. Vanta is an independent concept, designed and built by TrueFrame Studio to show how we approach this kind of product. There is no client, and no results are claimed.