Auto detailing · Dark

Detail

Electric blue, black and extra-wide letters: a car seen from above arrives dirty, leaves gleaming and becomes a technical blueprint where each service lights up a part of the bodywork.

Palette

--azul#1337ff
background of the hero, gallery and CTA; prices and buttons
--preto#08080a
hero semicircle, dark sections, footer
--off#efeeea
background of the blueprint and the FAQ
--texto-claro#ffffff
headlines on blue/black
--texto-escuro#111111
headlines and technical line work on off-white
--texto-2#6b6b6b
descriptions
--azul-claro#b9bfff
fill of the lit-up part on the blueprint
--linha#1a1a1a
accordion outlines and outline buttons

Typography

Display: extra-expanded grotesque, weight 900, uppercase, tracking 0, line-height 0.9; hero name at clamp(5rem,18vw,16rem); section titles clamp(1.6rem,3vw,2.6rem) on 2 lines — suggestions: Unbounded (900) / Archivo (wdth 125, 900).
Body: neutral grotesque 400–500, 11–13px — suggestions: Inter / Instrument Sans.
Support/labels: the same display face at 10px uppercase for service labels; price in a 9px blue pill.
Treatments: giant black word crossing the blue gallery behind the polaroids; titles end with a period.

Sections

Nav — 2-line menu icon on the left, small centered brand, outline "book" pill on the right.
Hero — blue background, giant white name at the top, black semicircle at the bottom (platform), 3D car seen from above overlapping the name; 2-line uppercase phrase + white pill with a blue circle.
Cleaning — the background turns black, the car goes from dusty to glossy black with a blue outline.
Technical blueprint (pin) — off-white background, 2-line title; the car becomes a line drawing; each service fills an area in light blue with a guide line to a block (uppercase title, description, price pill).
Gallery — blue background, 2-line title, giant black word behind; horizontal track of tilted polaroids with model and service; "see more" pill.
Studio — full-bleed photo of the bay with a label and title at the bottom.
Testimonials — black background, scattered polaroids with photo, quote and name in blue; average rating at the top right.
FAQ — off-white, title on the left, outline accordions on the right.
CTA + footer — rounded blue panel with a title, car and pill; black footer in 4 columns.

Motion and interaction

Dirty → clean: scroll scrub → dust/mud texture dissolves via noise (shader) down to the glossy black material; Three.js.
Platform: scroll → black semicircle grows until it covers the screen (blue → black transition).
Becomes a drawing: scroll scrub → material switches to lines (EdgesGeometry) over off-white; camera becomes a top-down orthographic.
Lit-up services: pin + scrub → each part fills in light blue, a guide line draws itself, the block enters.
Polaroid track: horizontal pin → cards run to the left with slight rotations; giant word in slower parallax.
Car follows cursor: slight ±6° rotation in the hero.
Tech: Three.js/R3F, GSAP ScrollTrigger, Lenis.

Components

White pill with an 18px blue circle and an arrow.
Black outline pill, 10px uppercase (nav).
Service block: 12px display title, 10px description, blue price pill.
Polaroid: 8px white frame (28px at the bottom), photo, caption with name on the left and service on the right, rotation ±4°.
Testimonial polaroid: photo, 9px quote, author in blue.
Accordion: 1px --linha border, 4px radius, 11px 600 question and "+".
Blue CTA panel, 16px radius.