# Checkout redesign: design direction (V2)

Visual reference: https://claude.ai/artifact/131ZhkPwDaYu4PHqFx5wTc (top rows, labelled V2). Values in [BRACKETS] are open questions, see `open-questions.md`. Never invent them.

## 1. Rules

1. One focus at a time. Only the current step is open.
2. Boxes only for the main choice. No cards, no section borders, no dividers between rows.
3. One strong line: a 2px charcoal rule above the total. Nothing else is divided.
4. Labels above fields. Never placeholder-as-label, except inside the joined card block, which has a visible "Card details" label.
5. One primary button per screen, with one reassurance line near it.
6. Very little helper text. Keep only lines that prevent a real mistake.
7. Discounts shown as a crossed-out original price.
8. No scarcity, no countdown pressure, no upsell grids.

## 2. Brand tokens

- Font: Poppins only (400, 500, 600, 700). No serif.
- Colours: text and primary fill #2b2b2b, secondary text #585757, disabled text #8a8a8a, input border #b3b3b3, light stroke #e5e5e5, grey surface #f2f2f2, page #ffffff. No accent colour.
- States only: error #c73a3a (on #fcf1f1), success #067a57 (on #ecfbf5), warning text #8f6c1a on #fff9ec.
- Radius: buttons, inputs, toggles 0px. Alerts 4px. Panels, sheets, modals 8px. Nothing above 8px, no pills.
- Spacing: 4px grid. Steps 40px apart (32px mobile). Fields 20 to 22px apart.
- Light theme only. Icons: Lucide, outlined, only where they add meaning.
- Copy: Canadian spelling (colour), sentence case, second person, no em dashes, no emoji.

## 3. Layout

Desktop (1440 reference):
- Two columns. Left: white, content max 560px, left padding 120px. Right: full-height grey panel, 560px wide, edge to edge, no border.
- Logo top left. No navigation.
- Steps stacked: title (22px, 600). Current and finished titles in #2b2b2b, upcoming in #8a8a8a.
- Finished step: one grey line summary (14px) plus a "Change" link on the right of the title.
- Continue button sits under the current step's fields, left aligned. The right panel has no button in checkout. The cart's right panel does.

Mobile (390 reference):
- Header: logo and "Call us".
- Grey summary bar under the header: "Show order summary" (underlined) and the total. Expands in place. Label changes to "Hide order summary".
- Steps stacked like desktop.
- Primary button fixed to the bottom with a soft top shadow. On the payment step, the reassurance line sits just above it.
- Tap targets at least 44px. Radios 22px.

## 4. Cart

Left: "Your cart" (40px, 700). Items: 112px outcome photo (person wearing the piece, never a bald or "before" image), name, spec, Change and Remove links, crossed-out original price over the sale price.

Supplies offer, only when the cart has a hair system and no attachment supplies: one grey block (8px radius).
- Title: "Ready to wear it the day it arrives?"
- Text: "Add tape, adhesive and remover, matched to your [BASE TYPE] base. [PRICE], ships with your system."
- Button: "Add kit". Once added it becomes a normal line item with Remove, and the block disappears.

Right panel: Subtotal, Shipping "Free", Tax "Calculated at checkout", 2px rule, "Estimated total", then one line with "Or 4 payments of [AMOUNT]" (left) and "You're saving [AMOUNT]" (bold, right). Button "Check out". Under it: "A specialist checks your colour match before it ships." Then Apple Pay, PayPal, Google Pay as white buttons. "Have a promo code?" link. Bottom: "Not the right match?" plus [RETURN AND EXCHANGE POLICY] and "Full policy", then "Questions? 1-866-814-7879".

## 5. Checkout steps

### Step 1, Your details (new customer)
- Express: Apple Pay (charcoal), PayPal, Google Pay (grey). On mobile Apple Pay is full width on top.
- Email. Under it: "Already have an account? Sign in".
- First name and Last name side by side.
- "Phone, for delivery and fit questions".
- Button "Continue".
- The account is created in the background from these details. No password at checkout.
- Finished summary: "Daniel Moreau, daniel.moreau@email.com, (214) 555-0142".

### Step 1, returning customer (email already has an account)
Email shown in a grey bar with "Change".
- Recognised: "Welcome back" and "This email has an account. Sign in to finish your order with your saved address and card." Primary button "Email me a sign-in code". Links: "Use my password", "Continue with Google", "Continue with Apple".
- Code: "We sent a 6-digit code to your email. It works for [VALIDITY]." Six single-digit boxes, numeric keyboard, auto-advance, paste fills all. "Didn't get it? Check your spam folder or send a new code." Button "Sign in". Link "Use my password instead".
- Password: field with "Show". Button "Sign in". "Forgot it? Email me a code instead".
- Finished summary: "Signed in as [Name], [email]" with "Not you?".
- If code login is not feasible, use BigCommerce's existing sign-in link with the same layout and "Email me a sign-in link".

### Step 2, Delivery
- Toggle: "Ship to me" and "Pick up at a salon" ("Pick up" on mobile). Grey track, selected side charcoal with white text. Ship to me is the default. Pickup is never preselected.
- Ship, new customer: Address (with autocomplete), City, State or Province, ZIP or Postal code. Under it: "Shipping within [the US / Canada]. Shop [other domain] for other countries." Country is fixed to the store's country.
- Ship, returning customer: saved addresses as plain radio rows (label, address, "Used last time" on the last one used). "Add a new address" link.
- Speeds as plain radio rows with arrival dates, never business days: "Arrives Tue, Oct 6 to Thu, Oct 8, Free" and "Arrives Fri, Oct 2, [EXPRESS PRICE]".
- Unavailable options stay visible, disabled, with the reason. Example: "Same-day delivery, Only for GTA postal codes" (.ca).
- If items ship from 2 warehouses, say so here before payment, with express priced per package.
- Gift: checkbox "This is a gift" with "We'll leave prices off the packing slip." When checked: "Gift message (optional)".
- Pickup: salons as plain radio rows (name, address, "Ready from [DATE]"). None preselected until the customer picks. Then a warning (4px, #fff9ec): "This order won't be shipped. You'll collect it at the salon."
- Finished summary: "2140 Oak Ridge Dr, Plano. Arrives Tue, Oct 6 to Thu, Oct 8" or "Pick up at [Salon name], ready from [DATE]".

### Step 3, Payment
Plain radio rows, no boxes:
- Card (returning: "Visa ending in 4417, Expires 09/29" with only "Security code" and "Asked each time to keep your card safe."; plus "Use a different card").
- New card: "Card details" label over one joined block: card number full width, expiry and security code side by side, shared borders. Brand names inside or beside the row ("Visa, Mastercard, Amex"), no logo strip.
- "Billing address is the same as shipping" (checked). When unchecked: postal code and country only.
- "Save this card for next time" (unchecked by default).
- PayPal, Apple Pay, Pay over time ("4 payments of [AMOUNT]"), More ways to pay (Zelle, Venmo, Western Union, cheque, pay in store on .com; Western Union, cheque, pay in store on .ca).
- Optional, unchecked: "Add Wig Insurance, [PRICE]" with "[WHAT IT COVERS]. What's covered". Shown once, no pressure.
- Reassurance: "A specialist checks your colour match before we prepare your order."
- Button label follows the method: "Pay US$738.72", "Continue to PayPal", "Pay with Apple Pay", "Choose a plan", "Place order".
- "By paying, you agree to our Terms and Privacy Policy." No checkbox.

## 6. Order summary panel (checkout)

Items (72px photo, name, spec with "Change", crossed-out price). Supplies offer as one text link: "Add tape, adhesive and remover, [PRICE]". Subtotal, Shipping, Wig Insurance if added, Tax (Estimated tax on .com, HST/GST on .ca), 2px rule, Total (28px, 700), "You're saving [AMOUNT]" in bold. "Have a promo code?" link. "Not the right match?" with the policy. "Questions? 1-866-814-7879" at the bottom.

## 7. States

- Errors: field border #c73a3a, message directly under the field in #c73a3a, saying what is wrong and how to fix it. Example: "Check your card number. It should have 16 digits." Never "Something went wrong". Keep the Continue and Pay buttons enabled and move focus to the first field with an error.
- Loading: skeletons shaped like the final rows, not spinners.
- Processing payment: full-screen white overlay with the logo and "We're getting your new look ready".
- Express, shipping options and totals recalculate when the address changes. Show the new value, never "--".

## 8. Confirmation

Mobile reference frame "Mobile: order confirmed, feel-good moment". Sequence, about 2 seconds, plays once:
1. Green check scales in.
2. The wordmark is revealed left to right, like a signature.
3. "You're all set, [First name]", "Your new look arrives in", "[N] days" (56px, 700), dates and "in plain, discreet packaging".
4. Note from a real specialist with photo: "Thank you, [Name]. I'll check your colour match myself before your system is prepared. If anything needs a second look, I'll call you." Signed "[Specialist name], hair specialist".
5. Button "Track my order", link "Add a password for faster reorders", order number and receipt line.

Animate only transform and opacity. Honour prefers-reduced-motion (show the final state immediately). The countdown must come from real shipping estimates.

## 9. Domain differences

| | superhairpieces.com | superhairpieces.ca |
|---|---|---|
| Currency | US$ | CA$ |
| Region field | State | Province |
| Postal field | ZIP code | Postal code |
| Tax label | Estimated tax | HST / GST by province |
| Standard carrier | USPS | Canada Post or UPS |
| Express carrier | FedEx | Purolator |
| Salons | 3 | 7 |
| Same-day | Not offered | GTA only |
| Other payment | Zelle, Venmo, Western Union, cheque, in store | Western Union, cheque, in store |
| Wrong-country link | superhairpieces.ca | superhairpieces.com |

## 10. Accessibility

- WCAG AA contrast everywhere, including grey upcoming step titles and helper text.
- Real buttons, inputs and labels. Visually hidden labels on the joined card fields.
- The toggle is a radio group to screen readers. Disabled options explain why in text.
- Errors announced with role="alert".
- Full keyboard path through every step. The sign-in code boxes support paste.

## 11. Phase 2: salon accounts

Banner: "Business account: [SALON NAME]. Pro pricing applied. Tax exemption on file." Delivery choice: "My salon", "Straight to my client" (plain package, no prices), "Pick up". Saved salon addresses as radio rows. "Client reference (optional), printed on the packing slip" and "PO number (optional), shows on your invoice". "Ship to more than one address": numbered destinations, each with its items, a Move link and its own speed. Pay stays disabled with "Assign all items to continue" until every item has a destination (the one exception to keeping buttons enabled). Saved card with security code. "Charge to my business account" only if [NET TERMS] are approved. Tax row reads "Exempt".