Prototype — Local Review Only

Sir Box-A-Lot — Three Visual Directions

Three genuinely different UI/UX stances for the public site and quote flow, built to compare before any copy rewrite or implementation work begins. Each prototype is self-contained, inert (no live forms/API calls), and covers the homepage plus the /quote/details continuation screen.

Variant 1 homepage desktop preview Variant 1 homepage mobile preview

1 · Warm Trade Craftsmanship

Editorial, cream & terracotta, serif headings. Feels like a trusted local tradesperson, not a franchise call center.

Open prototype README
Variant 2 homepage desktop preview Variant 2 homepage mobile preview

2 · Structured Confidence

Navy & safety-orange, consistent grid and radius, sidebar stepper on the quote flow. Feels like a well-run modern service company.

Open prototype README
Variant 3 homepage desktop preview Variant 3 homepage mobile preview

3 · Bold Mover Energy

Black, white & safety-orange, condensed industrial type, hard-offset shadows. Feels like people who show up and outwork the job.

Open prototype README
Design System Comparison → Side-by-side tokens, type, spacing, and component treatment across all three directions. Recommendation → Opinionated pick, plus exact hybrid elements if a hybrid is strongest.

How to review each prototype

Each prototype opens on the Homepage screen. Use the "2 · /quote/details continuation" tab at the top of each prototype to see the multi-step quote continuation — grouped fields, progressive disclosure, checkbox states, and a validation example are all live in that screen. A "Component states reference" panel near the bottom of that screen shows default/hover/focus/pressed/disabled states rendered directly, without needing to trigger them by hand.

Serve this folder over local HTTP rather than opening files directly (see STATUS.md for the exact command used during verification). All three prototypes are inert: form fields do not submit, save, or send data anywhere.