# Variant 2 — Structured Confidence

## Design stance and emotional goal

A clean, modern service company that runs on process, not luck — closer to how a well-run logistics or home-services SaaS product presents itself. The goal is instant legibility and trust through structure: consistent grid, consistent radius, a visible step-by-step system. Best-fit customer perception: *"These people have their act together."*

## Color tokens

| Token | Hex | Use | Contrast note |
|---|---|---|---|
| `--bg` | `#F8FAFC` | Page background | |
| `--surface` | `#FFFFFF` | Cards | |
| `--text` | `#1E293B` | Primary text | ~11.5:1 on `--bg` (AAA) |
| `--text-secondary` | `#64748B` | Secondary text | ~4.9:1 on `--bg` (AA) |
| `--primary` | `#1E40AF` | Nav, links, secondary buttons, badges | ~8.5:1 on white (AAA) |
| `--accent` | `#EA580C` | Primary CTA fill only | Verified for large-text/UI (3:1+) with white bold text at button size — **not used for small body text** |
| `--error` | `#DC2626` | Error state | 4.8:1 on `--error-bg` |
| `--border` | `#E2E8F0` | Card borders, dividers | |

## Typography

**Lexend** (600–700) for headings — chosen for its readability research pedigree and confident, slightly technical feel. **Source Sans 3** (400–700) for body/UI — a proven, highly legible workhorse. Type scale: H1 `clamp(2rem,4vw,3.1rem)` / H2 `clamp(1.4rem,2.4vw,1.95rem)` / H3 `1.05rem` / body `1rem` at 1.6 line-height.

## Layout

Container max-width 1200px, 24px gutters. The signature structural difference from Variant 1: the `/quote/details` continuation uses a **sticky left-rail vertical stepper** on desktop (230px rail + fluid content column) instead of a top horizontal progress bar, collapsing to a compact horizontal stepper under 900px. Standard Tailwind-style 4/8pt spacing scale throughout.

## Borders, radius, shadow

One consistent radius (10px standard, 14px large cards) used everywhere — buttons, inputs, cards — per the "elevation-consistent" principle: pick one shadow scale and stick to it. Three shadow tiers map to three elevation levels: `shadow-sm` (resting cards), `shadow-md` (hover/active cards), `shadow-lg` (the quote card, sitting above the page).

## Buttons and form controls

Primary CTA: solid safety-orange, white bold text, 48px min-height, deepens shadow on hover. Secondary buttons: white fill, steel border, navy tint on hover. Inputs: 48px min-height, visible labels, semantic types (`tel`, `email`), focus ring in brand blue (`0 0 0 4px rgba(37,99,235,.16)`), inline validation styling below the field, loading state disables the button and swaps its label to prevent double submission.

## Cards and sections

Info cards lift 4px and deepen their shadow on hover (a real, standard-tier motion cue) — reinforcing the "structured system" feel. Pricing cards use a checkmark-in-a-circle list treatment rather than plain checkmarks, for a more componentized, product-like look.

## Icons

Outline style, 1.75px stroke, 20–24px, navy/steel fill — consistent weight throughout (Variant 3 is the deliberate exception with a heavier stroke).

## Motion

Standard tier permitted on marketing content (card hover-lift, 220–300ms `power2`-style easing) but the quote form itself stays in the Subtle tier only, so the conversion flow never feels like it's fighting for attention.

## Mobile

Single breakpoint at 900px. The sidebar stepper is hidden and replaced by a horizontal condensed stepper; utility bar (trust chips) hides to save vertical space; all field rows and checkbox grids collapse to one column. All interactive controls verified ≥44×44px.

## Strengths

- Most "legible at a glance" of the three — good for paid-traffic landing pages where a visitor decides in seconds.
- The left-rail stepper on `/quote/details` gives the multi-step flow a genuine sense of progress and place, which plain top-dots don't.
- Palette and type read as broadly credible to a wide range of customers, not a specific subculture.

## Trade-offs

- Closest of the three to "any modern SaaS product" — needs real photography and voice to avoid feeling generic over time.
- Safety-orange + navy is a common home-services combination; differentiation will come more from copy and photography than from the palette itself.

## Best fit

A visitor comparing several moving companies quickly and wanting to feel like they're dealing with a well-organized, professional operation rather than a mom-and-pop outfit — even though it still *is* one.