# Checkout redesign — rev1

Phase 1 redesign of the cart, the 3-step checkout (Your details, Delivery, Payment)
and the order confirmation, for superhairpieces.com (USD) and superhairpieces.ca (CAD),
desktop and mobile. To be built on a fork of BigCommerce Open Checkout (checkout-js).

## Start here

`README.md` gives the reading order:

1. `brief.md`: goal, personas, pain points, success measures, scope, technical approach.
2. `design-direction.md`: the V2 direction. Rules, tokens, layout, every step, states,
   confirmation, domain differences, accessibility, Phase 2 salon notes.
3. `open-questions.md`: 24 open questions. Values in [BRACKETS] stay as placeholders
   until answered.
4. `screens.md`: index of the 16 frames, with the spec section for each.

Also in this folder:

- `tokens/`: colours, typography (Poppins only), spacing, elevation.
- `assets/`: logo SVGs, charcoal and white.
- `frame-source/`: the design canvas source for each frame. Reference only, it does not
  run outside the canvas. `V2-*` is the approved direction, `Pro-*` is Phase 2 in the
  older style.

If the docs and a frame disagree, `design-direction.md` wins (for example, pickup salons
are never preselected, even though one frame shows one selected).

## Not yet included

`screens/` is empty. The PNG exports listed in `screens.md` still need to be exported
from the design canvas and added in a later revision.

## Changes since the previous revision

First handoff of this project.