The recommendation in one line: borrow the polish from the pitch-deck aesthetic, keep a light, trust-first palette for the product. A stressed driver next to a wrecked car needs calm and credibility, not a dark tech-startup vibe. This page shows the shared design system, before/after components, and the per-surface strategy — nothing in production changes until you approve the direction here.
The dark deck language is correct for board/investor artifacts — it reads confident and modern to that audience. But research on anxiety-driven services (insurance, medical, auto repair) consistently favors light, spacious, high-contrast layouts for the end customer: they signal trust and reduce cognitive load. So we don't copy the deck onto the product — we extract one token system and apply the right skin per surface.
Stressed driver, on cellular, deciding who to trust with their car. Light, one-action-per-screen, warm reassurance moments.
A daily-use B2B tool. More information density is fine — but same tokens, so it feels like the same company.
Keep exactly what you liked in the concept PDFs. Right medium, right audience — unchanged.
Today each page carries its own inline styles, which is why surfaces drift visually. Extracting these into CSS variables is a low-risk, mechanical change that instantly makes consumer, shop, estimate, and landing feel cohesive — and makes every future restyle a one-file edit.
Representative components (recreated here for side-by-side clarity). The "after" isn't a new look — it's the current one, refined: softer radii, real shadows for depth, a focus ring for accessibility, warmer accent on reassurance moments, and more whitespace.
Adds the honest range + vehicle line, deeper gradient, rounder corners. Same number, more credible.
Depth via shadow, more tap height (accessibility), orange reserved for the one moment of highest intent.
Visible focus ring (keyboard + accessibility), softer border, larger target.
Status becomes a scannable colored pill; hierarchy clarified. Denser than consumer, still on-system.
Visible focus rings and WCAG-AA contrast on every interactive element — currently inconsistent across pages.
Min 44px touch height on primary actions — matters on the phone-in-hand consumer flow.
The estimate countdown, a subtle check animation on capture, skeleton states instead of frozen screens.
Already true in consumer-v2 — the makeover extends that discipline to the older pages.
From the shared scale — kills the "different app per page" feeling.
| Surface | Skin | Why |
|---|---|---|
| Consumer estimate (/consumer, /consumer-v2) | Light "calm confidence" | Highest-anxiety user; trust + speed win over slickness. |
| Shop portal (/shop) | Light, app-like, denser | Daily B2B tool; density OK, same tokens for cohesion. |
| Landing / for-shops | Light, marketing polish | Conversion surface; borrows deck-level polish, stays light. |
| Public estimate / sign pages | Light, minimal | Legal/trust context; clarity above all. |
| Board / investor decks | Dark deck (unchanged) | Right medium & audience — keep what works. |