# Variant 1 — Warm Trade Craftsmanship

## Design stance and emotional goal

A locally-owned, hands-on trade business you'd trust with your grandmother's china — warm, editorial, unhurried. The goal is to make Sir Box-A-Lot feel like a real crew of people who take pride in the work, not a lead-gen funnel. Best-fit customer perception: *"These are careful, established local people — not a franchise call center."*

## Color tokens

| Token | Hex | Use | Contrast note |
|---|---|---|---|
| `--bg` | `#FAF5F2` | Page background (warm cream) | |
| `--surface` | `#FFFFFF` | Cards | |
| `--text` | `#292524` | Primary text | 13:1 on `--bg` (AAA) |
| `--text-secondary` | `#6B625C` | Secondary text | ~6.3:1 on `--bg` (AA) |
| `--accent` | `#B5651D` | Primary CTA fill, links | 4.6:1 with white text at button size (AA) |
| `--accent-dark` | `#8F4F16` | CTA hover | |
| `--secondary-accent` | `#55672E` | Checkmarks, "done" step state | decorative/large-only use |
| `--error` | `#B3261E` | Error text/border | 5.9:1 on `--error-bg` |
| `--border` | `#E7E0DA` | Hairlines | structural only, not text |

The lighter terracotta some palettes default to (`#D97706`-family) fails 4.5:1 for body text on white — this variant's `--accent` was darkened specifically to remain safe as a text/icon color, not just a button fill.

## Typography

**Fraunces** (display, 500–700, optical-size variable) for headings — a warm, slightly irregular serif that avoids the cold "luxury editorial" cliché. **Public Sans** (400–700) for body and UI — a government-grade humanist sans chosen for readability at small sizes. Type scale: H1 `clamp(2.1rem,4.4vw,3.4rem)` / H2 `clamp(1.5rem,2.6vw,2.1rem)` / H3 `1.2rem` / body `1rem` at 1.55 line-height.

## Layout

Container max-width 1180px, gutters 24px (`--space-6`). Hero splits 1.15fr/0.85fr. Quote card and form card cap at ~640–680px effective width. 4/8pt spacing rhythm: 4/8/12/16/24/32/48/64/96.

## Borders, radius, shadow

Radius: 8px small, 12px cards, 20px large cards/pills. Shadow is soft and diffuse (`0 8px 24px rgba(41,37,36,.10)`) — hairline `1px solid #E7E0DA` rules are preferred over shadow for separating sections, matching an editorial/print sensibility rather than an app-UI one.

## Buttons and form controls

Primary button: solid terracotta, 48px min-height, 10px radius, hover darkens 10%, active nudges down 1px, disabled drops to a muted tan (`#D8C9BB`). Inputs: 48px min-height, persistent bold labels above the field (never placeholder-only), 1.5px border, focus shows a 4px soft terracotta glow plus border color change (not color alone). Error state: red border + tinted background + inline message with icon, positioned below the field.

## Cards and sections

Info/pricing cards use a soft shadow and light border; the featured pricing card is distinguished by an accent border and a floating "Most popular" tag rather than color-fill, keeping the page's overall palette restrained.

## Icons

Outline style, 1.5px stroke, 18–20px, warm charcoal — avoids the "tech SaaS" feel of heavier/filled icon sets.

## Motion

Subtle tier only: 160–220ms hover transitions, 360ms fade+8px-rise for screen/tab switches. Fully disabled under `prefers-reduced-motion: reduce`.

## Mobile

Single breakpoint at 900px collapses to one column, hides desktop nav in favor of a hamburger menu, stacks all field rows and checkbox grids to one column. All interactive controls verified ≥44×44px.

## Strengths

- Feels the most differentiated from a generic "moving company" template — reads as a considered, owner-operated brand.
- Editorial rhythm (hairlines instead of heavy card shadows) ages well and won't look dated in two years.
- Warm palette photographs well if real crew/job-site photography is added later.

## Trade-offs

- Serif display type reads slightly slower at a glance than a grotesque/geometric sans — less "scan in two seconds" than Variant 2.
- Terracotta accent needs care in future photography/marketing so it doesn't collide with skin tones or wood tones in real photos.

## Best fit

Homeowners who value craftsmanship and a personal relationship over the fastest possible transaction — a good match if Daryl wants the brand to feel more like a trusted local tradesperson than a logistics app.