Clearcoat is the visual language for Dylan Auto Body. It's built for two people at once: the driver who just had the worst morning of their year, and the owner who wants the paint perfect. Light, exact, and named the way the shop already talks.
Named like paint codes because that's how the shop already talks about color. Light grounds, cool grays, one accent — and it's hi-vis. Click any chip to copy its hex.
Neutrals. Pages are light by default — cool like galvanized steel, never warm like paper.
The accent. Black on orange is how a shop marks anything you need to see first.
Utility colors. Each one already means something in the shop.
Hi-Vis goes on the single action that matters. If two things are orange, neither is.
Warnings get Flag Red or a tape label. Orange only ever marks the next action, so people learn it fast.
White on Hi-Vis fails contrast at body sizes. Midnight on Hi-Vis is 5.9:1 and reads like a hazard sign — on purpose.
Barlow was drawn from the lettering on California plates and road signs, which makes it the rare typeface with an actual automotive lineage. The condensed cut carries headlines; the regular cut carries the reading; Plex Mono carries anything a tech would write on a ticket.
Highway lettering is built to be read fast, at distance, by someone under stress. That is also the brief for a body shop's headlines. Set it uppercase, tight, and never below 26px — smaller than that, hand off to Barlow regular.
Factory finish
Collision repair, start to finish
Paint that matches the door next to it
What happens after the estimate
We handle the insurance call. You handle getting on with your week.
Most dents come out in a day. Anything that needs paint stays two to three, because clear coat needs time to cure before we hand the keys back.
Lifetime warranty on paint. Written, not implied.
JOB 24-0817 · NH-830M LUNAR SILVER · 3 PANELS · READY FRI 2:00 PM
Uppercase only. Balance the wrap. Two lines maximum in a hero, three in a section.
Sentence case always. Line length 60–70 characters. Never uppercase, never letterspaced.
Job numbers, paint codes, prices, dates, VINs. If it belongs on a work order, it's mono.
A refinish is three coats: primer, base, clear. Elevation works the same way. Most of the page is primer. Cards are base. Only things that float — dialogs, the sticky estimate bar — get clear.
Borders, no shadow. Sections, tables, the type scale. Where reading happens.
--layer-primerA light lift. Service cards, paint chips, form panels. Hover raises to this from primer.
--layer-baseDialogs, the mobile estimate bar, the slider knob. Rare on purpose.
--layer-clearPages stay light. The one dark surface is the footer: Midnight Lacquer for the ground, Booth Raised for anything sitting on it. Text is Clearcoat or the dim gray — never pure white on pure black.
Job 24-0817
2019 Civic · Lunar Silver NH-830M
Ready Fri 2:00 PM
Built from the tokens above, no exceptions. The interactive ones are React islands; the rest ship as plain HTML from Astro, which is most of them. See them working together on the sample homepage.
One orange button per view. Status chips use bench colors, and every state maps to a real stage of the job.
The one screen a customer refreshes. Seven stages, the real ones, in the order the car moves through the shop.
Job 24-0817
2019 Honda Civic · Lunar Silver NH-830M
ETA Fri Aug 29, 2:00 PM
Driver door and rear quarter are straightened and in filler. Paint booth is booked Thursday morning; clear needs overnight to cure, so Friday afternoon holds.
Plain names for plain things. No "solutions", no starting prices that turn into something else.
Frame measuring, structural pulls, panel replacement. Insurance-direct, or a written estimate if you're paying yourself.
Get an estimateComputer-matched to the OEM code, blended into the panels next door, baked and cured before it leaves.
Get an estimatePaintless dent removal where the paint is intact. Fill, prime and touch where it isn't. Most out same day.
Get an estimatePlastic repair, refinish, sensor and camera recalibration so the car drives like it did before.
Get an estimateProof beats promises. Drag the divider, or focus it and use the arrow keys.
Four required fields, each with an error that says what to do. Submit it empty to see the error states.
Reviews stay short and specific. Callouts say one useful thing, with the tape label doing the pointing.
★★★★★
Rear-ended on the 403. Dylan's shop dealt with the adjuster, had it back in four days, and I can't find the seam on the quarter panel. I looked.
Someone reading this site may have just been hit. The voice is the tech at the counter who has seen it a thousand times: calm, direct, and specific about what happens next.
Your bumper is ready. We close at 6 today, 1 on Saturday.
Your service request has been completed. Please contact us at your convenience.
Dent repair
Cosmetic restoration solutions
Enter a 10-digit phone number.
Oops! Something went wrong. Please try again.
Computer-matched to your paint code, blended into the next panel.
Industry-leading color-matching technology.