# Screens index

Export each V2 frame from the design canvas (Share > Export, as PNG) into `screens/` with these exact names. Canvas: https://claude.ai/artifact/131ZhkPwDaYu4PHqFx5wTc (ask the owner for access).

Sample names, addresses and prices are placeholders. Anything in [BRACKETS] is an open question.

| File | Canvas frame | What it shows | Spec section |
|---|---|---|---|
| 01-cart.png | V2 cart | Cart with supplies offer, summary, Check out | design-direction 4 |
| 02-step1-details.png | V2 step 1: Your details | New customer: express pay, email, name, phone | 5, Step 1 |
| 03-step2-delivery.png | V2 step 2: Delivery | Ship / Pick up toggle, address, dated speeds, disabled option, gift | 5, Step 2 |
| 04-step3-payment.png | V2 step 3: Payment | Payment rows, joined card fields, Wig Insurance, Pay | 5, Step 3 and 6 |
| 05-payment-error.png | V2 error state: card number | Field error style and message | 7 |
| 06-mobile-step1.png | V2 mobile 1: Your details | Mobile layout, summary bar, fixed button | 3, Mobile |
| 07-mobile-step2.png | V2 mobile 2: Delivery | Mobile delivery | 3 and 5 |
| 08-mobile-step3.png | V2 mobile 3: Payment | Mobile payment, reassurance above button | 3 and 5 |
| 09-mobile-summary-open.png | V2 mobile: summary open | Expanded order summary | 3 and 6 |
| 10-signin-recognised.png | Sign in 1: account recognised | Returning customer recognised | 5, returning customer |
| 11-signin-code.png | Sign in 2: one-time code | Six-digit code entry | 5, returning customer |
| 12-signed-in-addresses.png | Signed in: saved addresses | Saved address rows | 5, Step 2 |
| 13-signed-in-card.png | Signed in: saved card | Saved card with security code | 5, Step 3 |
| 14-confirmation-mobile.png | Mobile: order confirmed, feel-good moment | Confirmation sequence, final state | 8 |
| 15-phase2-salon.png | Salon account checkout, desktop | Phase 2 salon content only (older visual style) | 11 |
| 16-phase2-multi-address.png | Salon: ship to more than one address | Phase 2 multi-address content only (older visual style) | 11 |

Frames 15 and 16 were made before the V2 style. Use them for content and flow, and the V2 rules for the look.

Interactive behaviour (toggles, step changes, sign-in, processing overlay) is easiest to check on the live canvas.