# Design System Comparison — Sir Box-A-Lot Visual Directions

Three prototypes, one shared page structure (header/nav → hero → quote card → how-it-works → pricing → conversion footer → `/quote/details` continuation), deliberately different design systems underneath. See each variant's `README.md` for the full write-up; this document is the side-by-side.

## At a glance

| Dimension | 1 · Warm Trade Craftsmanship | 2 · Structured Confidence | 3 · Bold Mover Energy |
|---|---|---|---|
| Emotional goal | Trusted local tradesperson | Well-run modern service company | Hardworking crew that outworks the job |
| Background | `#FAF5F2` warm cream | `#F8FAFC` cool white | `#FAFAF7` warm paper |
| Primary text | `#292524` | `#1E293B` | `#111111` |
| Brand/CTA accent | `#B5651D` terracotta | `#EA580C` safety orange | `#EA580C` safety orange |
| Secondary color | `#55672E` olive | `#1E40AF` navy | `#1E3A5F` steel (reserved) |
| Heading font | Fraunces (serif, variable) | Lexend (geometric sans) | Oswald (condensed, uppercase) |
| Body font | Public Sans | Source Sans 3 | Barlow |
| Corner radius | 8 / 12 / 20px | 10 / 14px (one consistent scale) | 0–4px (sharp) |
| Shadow style | Soft, diffuse | Layered sm/md/lg tiers | Hard-offset (`4px 4px 0`), no blur |
| Border weight | 1px hairlines | 1–1.5px | 2–3px structural |
| Progress pattern (`/quote/details`) | Top horizontal dot stepper | Sticky left-rail vertical stepper (desktop) | Bold horizontal step chips |
| Hero structure | Two-column, light background | Two-column, light background | Full-bleed black band, card overlaps section boundary |
| Icon stroke | 1.5px outline | 1.75px outline | 2–2.6px, heavier |
| Motion tier | Subtle only | Standard on marketing, Subtle on forms | Subtle/Standard, instant press-snap (no bounce) |

## Density, emphasis, aesthetic axes

Per the sketch methodology, the three variants were pulled apart along genuinely different axes rather than recolored:

- **Density:** Variant 1 (airy, generous whitespace) vs. Variant 3 (tighter, blockier rhythm) vs. Variant 2 (standard/balanced).
- **Structural pattern:** the `/quote/details` progress indicator uses three different layouts — top dots (V1), sidebar stepper (V2), bold step chips (V3) — not just three different colors of the same component.
- **Aesthetic:** editorial/print (V1) vs. product/SaaS (V2) vs. industrial/Neubrutalist (V3).
- **Grounding:** hairline-separated content (V1) vs. card-based with layered shadow (V2) vs. hard-bordered blocks (V3).

## Color contrast verification

All three variants keep body text on background at AA or better (verified ratios in each README). Each variant's saturated brand accent (`#B5651D` terracotta / `#EA580C` orange ×2) is restricted to buttons, large text, and icons — never used as small body text on a light background, since the orange tones in particular only clear the 3:1 large-text/UI-component threshold, not the 4.5:1 body-text threshold.

## Shared component behavior (identical across all three)

To keep the comparison fair, the following are functionally identical in every variant, only re-skinned:

- Homepage quote card: Name / Phone / Email, 3-step progress (Contact → Move → Review)
- `/quote/details`: same four field groups (About this location, Access & parking, Heavy or special items, Uncertainty), same progressive disclosure (piano detail reveal, "Add access details" disclosure), same inline error and loading/disabled demo toggles
- Same Component States Reference panel (default / hover / focus / pressed / disabled for a button and an input) rendered directly, not simulated
- Same touch-target minimum (44×44px, verified via automated check after an initial fix — see `STATUS.md`)
- Same `prefers-reduced-motion` handling (all transitions collapse to ~0ms)
- Same inert-prototype guarantees: all forms have `onsubmit="return false"`, all nav links are `href="#"` with `onclick="return false"`, no network calls

## Field grouping and copy approach

All three variants group the `/quote/details` fields the same way — About this location, Access & parking (optional, disclosed), Heavy or special items (optional, with piano-detail reveal), an uncertainty-acknowledgment group using customer-safe phrasing (no "Needs estimator review" exposed), and a final open-ended note. This grouping is structural/presentational only — it does not change field meanings, remove fields, or commit to the pending copy-rewrite recommendation. Group labels are neutral/functional ("About this location," "Access & parking") rather than adopting the brand-voice copy proposed in the separate, not-yet-approved integrated copy recommendation.