System Requirements Document for green-gifts

1. Introduction

green-gifts is a realistic, worldwide gift-ordering website. It lets a customer browse a picture-packed catalogue of gift items — flowers, handbags, and many other gift items — choose one, send it to a recipient in any country of the world, pay for it with real money through a real checkout, and then follow the delivery with a detailed tracking link or tracking number.

The product intent is emotional and cross-border at the same time: the sender is buying an occasion, not a parcel, but the site must carry the full weight of real payment, real destination countries, and real shipment tracking. The audience is everyday senders who are not logistics experts, plus the recipients in other countries who receive the gift and may follow its journey themselves.

2. System Overview

green-gifts is delivered as a first-party web application with its own custom interface. It has two accepted human actors: the Gift Sender (Customer), who browses, orders, pays, and tracks, and the Gift Recipient, who is the delivery endpoint in any country and who may use the tracking link or number to follow the shipment addressed to them.

Current accepted behavior:

• A picture-rich catalogue of gift items, including flowers, handbags, and many other gift items.
• Ordering and sending those gift items to any country of the world.
• A real checkout that processes real-money payment.
• A detailed tracking link or tracking number issued for each order, usable by the sender or the recipient.

The application owns customer identity so that a sender can self-enroll, return, and reach their durable order, payment-related order records, and tracking information. Payment is confirmed before an order is treated as placed and before tracking information is issued.

Narrow exclusions: this document does not add adjacent commerce capabilities that the source did not accept — no seller/vendor marketplace, no wishlist or loyalty program, no subscription gifting, no in-app messaging between sender and recipient, no returns/refunds workflow, and no admin back-office. Gift items are the product; the sender is the buyer.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. green-gifts is a first-party custom website. All browsing, gift selection, delivery-detail entry, checkout, order confirmation, and tracking-status presentation are owned by the application's own pages. Real-money payment is processed by an external payment provider; the application owns the checkout experience and the confirmation of a successful payment, while the provider owns the actual money movement. Shipment movement and carrier scan events are owned by external delivery carriers; the application owns the tracking link/number issued to the sender and recipient and the presentation of delivery status.

Access ownership. The application owns customer identity. The Landing page is anonymously reachable. Sign Up and Login are anonymously reachable entry surfaces, because a protected destination cannot own the interaction that establishes access to itself. Catalog, Gift Details, Checkout, Order Confirmation, and Tracking are protected destinations that require an established customer identity, because they carry durable, customer-specific state: the sender's selection, their delivery details, their payment-related order records, and their tracking records. The Gift Recipient reaches tracking through the tracking link or number issued for the order rather than through a separate recipient account.

Current vs future boundary. Everything in this document is current. No future-horizon requirements were accepted in the source.

2b. Source Content Inventory

Not applicable — no reference directive in this request declares content_source authority, so no source content inventory is rendered.

2c. Page Content and Component Coverage

Landing

• Information/state: Anonymous first impression of the gift-sending service: what green-gifts is, who it is for, that gifts can be sent to any country of the world, the gift categories (flowers, handbags, and many other gift items), and how ordering works. Picture-led, with gift imagery carrying the page.
• Primary actions: "Send a gift" — enter the ordering journey. "Track an order" — go to tracking.
• Supporting actions: Navigate to Sign Up; navigate to Login.
• Domain entities: Gift category, gift item (as imagery), destination country, ordering process.
• Component responsibilities: Oversized headline block; stacked, rotated product-photo collage; primary coral pill CTA and secondary ghost link on one line; full-width destination-country marquee band; category chips; entry links to Sign Up and Login.
• States: Loading — imagery and marquee content resolve progressively. Empty — not applicable; the page is static marketing content. Success — page renders with imagery, headline, both CTAs, and the marquee. Error — if imagery fails, the page still renders headline, category text, and both CTAs so the journey remains enterable. Recovery — retry imagery load; the CTAs never depend on imagery.

Sign Up

• Information/state: Anonymous self-service enrollment form for a new Gift Sender (Customer). Explains that an account is needed to place orders and to return to orders and tracking.
• Primary actions: Submit enrollment to create the customer identity.
• Supporting actions: Navigate to Login for an existing customer.
• Domain entities: Customer identity (name, email, password/credential).
• Component responsibilities: Enrollment form; field-level validation messages; submit control; link to Login.
• States: Loading — submit in progress, control disabled. Empty — pristine form. Success — identity established; the customer continues into the ordering journey. Error — invalid or already-used details shown inline against the offending field; the form retains entered values. Recovery — correct the flagged field and resubmit, or switch to Login.

Login

• Information/state: Anonymous returning-verification form for an existing Gift Sender (Customer).
• Primary actions: Submit credentials to verify identity and resume access to durable orders, payment-related order records, and tracking information.
• Supporting actions: Navigate to Sign Up for a new customer.
• Domain entities: Customer identity, credential.
• Component responsibilities: Credential form; error messaging; submit control; link to Sign Up.
• States: Loading — verification in progress, control disabled. Empty — pristine form. Success — identity verified; the customer reaches their orders and tracking. Error — incorrect credentials reported without revealing which field was wrong; entered email retained. Recovery — re-enter credentials and resubmit, or switch to Sign Up.

Catalog

• Information/state: Picture-rich browsing destination for gift items — flowers, handbags, and many other gift items — presented as a dense shelf of product cards with varied heights, each card carrying a product photo on a solid colour plate, a small flat illustrated sticker, and a price pill.
• Primary actions: Open a gift item to view its details.
• Supporting actions: Filter/browse by gift category; scan price pills.
• Domain entities: Gift item (name, photo, price, category), gift category.
• Component responsibilities: Product card grid (2-up at 375px, 3-up at 768px, 4-up at 1280px, varied card heights); category chips; price pills that flip to coral on hover; product imagery.
• States: Loading — card placeholders while items and photos resolve. Empty — no items match the current category; a message and a way back to all items. Success — grid renders with photos, names, and prices. Error — a failed item or image does not break the grid; the remaining cards stay usable. Recovery — retry the failed item/image, or clear the category filter.

Gift Details

• Information/state: Focused view of one selected gift item: its photos, name, price, and description, plus the delivery details needed to send it to the recipient's country.
• Primary actions: Specify the recipient's destination country and delivery details; proceed to Checkout with the selected gift.
• Supporting actions: Return to Catalog to choose a different gift.
• Domain entities: Gift item, recipient destination country, recipient delivery details, order line (selected gift + quantity).
• Component responsibilities: Product photo gallery; price display; destination-country selector covering any country of the world; recipient delivery-detail fields; proceed-to-checkout control; back-to-catalog control.
• States: Loading — item detail and photos resolving. Empty — no gift selected (for example, arriving without a selection); prompt to return to Catalog. Success — gift and delivery details captured; the customer proceeds to Checkout. Error — missing or invalid delivery details flagged inline; an undeliverable destination is reported clearly. Recovery — correct the flagged details and proceed again, or return to Catalog.

Checkout

• Information/state: Protected checkout destination holding the selected gift, the recipient's worldwide delivery information, and the real-money payment step. A sticky order summary rail sits on the right on desktop and becomes an accordion at the top on mobile.
• Primary actions: Confirm delivery information and pay with real money.
• Supporting actions: Review and edit the order summary; return to Gift Details to change the gift.
• Domain entities: Order (selected gift, quantity, price), recipient delivery details, destination country, payment instrument, payment result, order total.
• Component responsibilities: Order summary rail/accordion; delivery-information review; payment entry; pay control; inline validation and payment-result messaging.
• States: Loading — summary and payment surface initializing. Empty — no order in progress; prompt to return to Catalog. Success — payment confirmed; the order is treated as placed and the customer continues to Order Confirmation. Error — declined or failed payment, or invalid delivery information, reported clearly with the order preserved so nothing is lost. Recovery — retry payment or correct the flagged information; the selected gift and delivery details remain intact. Payment surfaces stay still and instant — no bouncy or springy motion here.

Order Confirmation

• Information/state: Completion destination presenting the placed order — the gift, the recipient's destination country, the amount paid, and the detailed tracking link or tracking number issued for the order.
• Primary actions: Copy or open the tracking link/number; go to Tracking.
• Supporting actions: Return to Catalog to send another gift.
• Domain entities: Placed order, payment confirmation, tracking link, tracking number.
• Component responsibilities: Order summary; payment-confirmed indicator; tracking link/number block with the number set in large tabular figures and copyable in one tap; link into Tracking.
• States: Loading — order and tracking details resolving after payment. Empty — no placed order to show; prompt to return to Catalog. Success — order and its tracking link/number are displayed. Error — tracking details not yet available; the placed order is still shown and the tracking block offers a retry. Recovery — retry fetching tracking details; the order record remains reachable afterwards from Tracking.

Tracking

• Information/state: Delivery-status destination for a placed order, usable with the order's tracking link or tracking number by the sender or the recipient. Presents the tracking number in large tabular figures and a horizontal timeline of oversized numbered stops (01 Picked, 02 Customs, 03 Out for delivery, 04 Delivered) on a full-bleed green panel.
• Primary actions: Look up delivery status by tracking link or tracking number; copy the tracking number.
• Supporting actions: Move between the sender's own orders and a specific order's status.
• Domain entities: Tracking number, tracking link, order, delivery status, timeline stop, carrier scan event.
• Component responsibilities: Tracking-number display with one-tap copy; status timeline with a status dot that pulses once on arrival; status detail per stop; order context.
• States: Loading — status and timeline resolving. Empty — no tracking number entered or no order selected; prompt to enter a tracking number or open one of the sender's orders. Success — current status and timeline stops displayed. Error — unknown tracking number, or carrier status temporarily unavailable, reported clearly. Recovery — re-enter or re-check the tracking number, or retry the status lookup; the order record stays reachable.

3. Functional Requirements

FR-1 — Picture-rich gift catalogue (explicit) As a Gift Sender (Customer), I should browse a catalogue packed with pictures of gift items — flowers, handbags, and many other gift items — so that I can see what I am sending before I choose.

• Trigger/input: the customer opens Catalog.
• Observable result: a picture-rich grid of gift items with photos, names, and prices.
• Access state: protected; requires an established customer identity.
• Failure/recovery: a failed item or image does not break the grid; the customer can retry or keep browsing.
• Continuation: the customer opens a gift item to view its details.

FR-2 — Gift item selection and delivery details (explicit) As a Gift Sender (Customer), I should select a gift item and specify the delivery details for the recipient's country so that the gift is addressed correctly.

• Trigger/input: the customer opens a gift item from Catalog and enters the recipient's destination country and delivery details.
• Observable result: the selected gift and its delivery details are captured and ready for checkout.
• Access state: protected; requires an established customer identity.
• Failure/recovery: missing or invalid delivery details are flagged inline; an undeliverable destination is reported clearly and the customer can correct it or choose another gift.
• Continuation: the customer proceeds to Checkout.

FR-3 — Send gifts to any country of the world (explicit) As a Gift Sender (Customer), I should be able to send a gift item to a recipient in any country of the world so that distance does not limit who I can send to.

• Trigger/input: the customer specifies the recipient's destination country during gift selection and checkout.
• Observable result: the order carries a worldwide destination country and proceeds through checkout.
• Access state: protected; requires an established customer identity.
• Failure/recovery: a destination that cannot be served is reported clearly at the point of entry, before payment, so the customer can change the destination or the gift.
• Continuation: the customer completes checkout for the chosen destination.

FR-4 — Real checkout for real-money payment (explicit) As a Gift Sender (Customer), I should complete a real checkout that processes real-money payment so that my order is genuinely purchased.

• Trigger/input: the customer confirms delivery information and submits payment at Checkout.
• Observable result: a real-money payment is processed and its result is reported to the customer.
• Access state: protected; requires an established customer identity.
• Failure/recovery: a declined or failed payment is reported clearly, the order is preserved, and the customer can retry payment or correct the flagged information without losing the selected gift or delivery details.
• Continuation: on a confirmed payment the customer continues to Order Confirmation.

FR-5 — Payment confirmation before the order is placed (required_inference) As a Gift Sender (Customer), I should have my successful real-money payment confirmed before my order is treated as placed and before tracking information is issued, so that I know my order is real and paid for.

• Trigger/input: the payment provider returns a successful payment result for the submitted payment.
• Observable result: the order transitions to placed and tracking information becomes issuable.
• Access state: protected; requires an established customer identity.
• Failure/recovery: without a confirmed successful payment the order is not treated as placed and no tracking information is issued; the customer can retry payment.
• Continuation: the placed order and its tracking information are presented on Order Confirmation.

FR-6 — Detailed tracking link or tracking number per order (explicit) As a Gift Sender (Customer), I should receive a detailed tracking link or tracking number for my ordered items so that I can follow the delivery.

• Trigger/input: a payment-confirmed order is placed.
• Observable result: a detailed tracking link or tracking number is issued and displayed with the placed order.
• Access state: protected; requires an established customer identity.
• Failure/recovery: if tracking details are not yet available, the placed order is still shown and the tracking block offers a retry.
• Continuation: the customer opens Tracking to follow the delivery.

FR-7 — Tracking lookup by link or number (required_inference) As a Gift Sender (Customer) or Gift Recipient, I should be able to use the order's tracking link or tracking number to look up delivery status so that I can see where the gift is.

• Trigger/input: the sender or recipient opens the tracking link or enters the tracking number on Tracking.
• Observable result: the current delivery status and the timeline of stops are displayed for that order.
• Access state: protected destination; the sender reaches it with their established identity, and the recipient reaches it through the tracking link or number issued for the order.
• Failure/recovery: an unknown tracking number or a temporarily unavailable carrier status is reported clearly, and the lookup can be retried.
• Continuation: the sender or recipient re-checks status as the shipment progresses.

FR-8 — Tracking remains usable for the order's lifetime (required_inference) As a Gift Sender (Customer) or Gift Recipient, I should be able to keep using the tracking link or number for the placed order so that I can follow the delivery from dispatch through to delivery.

• Trigger/input: the sender or recipient returns to the tracking link or number at any point during the shipment.
• Observable result: the same order's delivery status is retrievable and reflects the latest available carrier status.
• Access state: protected destination; the sender reaches it with their established identity, and the recipient reaches it through the tracking link or number issued for the order.
• Failure/recovery: if status cannot be retrieved at a given moment, the failure is reported and the lookup can be retried later.
• Continuation: the sender or recipient continues to follow the order until it is delivered.

FR-9 — Self-enrollment (required_inference) As a Gift Sender (Customer), I should be able to enroll myself before placing an order so that I can begin shopping and ordering.

• Trigger/input: a new customer opens Sign Up and submits their enrollment details.
• Observable result: a customer identity is established and the customer can continue into the ordering journey.
• Access state: anonymous entry surface; no prior identity required.
• Failure/recovery: invalid or already-used details are shown inline against the offending field, entered values are retained, and the customer can correct and resubmit or switch to Login.
• Continuation: the customer proceeds to browse the catalogue and place an order.

FR-10 — Returning verification for durable records (required_inference) As a Gift Sender (Customer), I should be able to return and verify my identity so that I can reach my durable order, payment-related order records, and tracking information.

• Trigger/input: a returning customer opens Login and submits their credentials.
• Observable result: identity is verified and the customer's orders and tracking information become reachable.
• Access state: anonymous entry surface; no prior identity required to reach the form.
• Failure/recovery: incorrect credentials are reported without revealing which field was wrong; the entered email is retained and the customer can re-enter credentials or switch to Sign Up.
• Continuation: the customer opens their order and its tracking information.

FR-11 — Recipient receives the gift and can follow it (required_inference) As a Gift Recipient, I should receive the gift item at my location in my country and be able to follow the shipment addressed to me using the tracking link or number, so that I know the gift is coming and when it arrives.

• Trigger/input: the sender's order is placed and shipped to the recipient's country; the recipient uses the tracking link or number.
• Observable result: the recipient sees the delivery status of the gift addressed to them and receives the gift item at their location.
• Access state: the recipient reaches tracking through the tracking link or number issued for the order.
• Failure/recovery: if the recipient cannot retrieve status, the failure is reported and the lookup can be retried; the sender's order record remains the durable source of the tracking link or number.
• Continuation: the recipient receives the gift item at their location.

4. User Personas

Gift Sender (Customer)

Product context. The Gift Sender is a shopper who wants to send a gift item — flowers, a handbag, or one of the many other gift items — to a recipient in any country of the world. They are not a logistics expert; they are buying an occasion and expect the site to handle the cross-border complexity for them.

Primary goal. A paid order placed and a trackable shipment on its way to the recipient's country.

Distinct accepted responsibilities. The sender is the only actor who browses the picture-rich catalogue, selects a gift item, specifies the recipient's destination country and delivery details, completes the real checkout with real-money payment, and receives the detailed tracking link or tracking number for the order. They also self-enroll before ordering and return later to verify their identity and reach their durable order, payment-related order records, and tracking information.

Relevant inputs and decisions. Which gift item to send; which country the recipient is in and what delivery details are needed; whether to proceed to checkout; whether to submit payment; whether to retry after a declined payment; whether to copy or open the tracking link/number.

Interactions with other accepted participants. The sender's order creates the shipment that the Gift Recipient receives, and the tracking link or number the sender receives is the same one the recipient can use to follow the gift. The sender's payment is processed by the external payment provider, and the shipment is carried by external delivery carriers.

Observable success. A payment-confirmed order is placed, a detailed tracking link or tracking number is issued and displayed, and the sender can follow the delivery status through to delivery.

Gift Recipient

Product context. The Gift Recipient is the person in any country who receives the ordered gift item. They are the delivery endpoint of the sender's order and did not place the order themselves.

Primary goal. Receiving the gift item at their location.

Distinct accepted responsibilities. The recipient may use the tracking link or tracking number issued for the order to follow the shipment of the gift addressed to them, and they receive the gift item at their location. Their work is different from the sender's: they do not browse, select, or pay — they follow and receive.

Relevant inputs and decisions. Whether to open the tracking link or enter the tracking number; when to re-check status as the shipment progresses.

Interactions with other accepted participants. The recipient's shipment originates from the Gift Sender's paid order, and the tracking link or number they use is the one issued for that order.

Observable success. The recipient can see the delivery status of the gift addressed to them and receives the gift item at their location.

5. Core User Flows

Flow 1 — New customer enrolls and sends a gift to another country

1. The Gift Sender (Customer) arrives at Landing anonymously and sees what green-gifts is, that gifts can be sent to any country of the world, the gift categories (flowers, handbags, and many other gift items), and how ordering works.
2. The sender chooses Sign Up and submits their enrollment details. The application establishes their customer identity, and the sender continues into the ordering journey.
3. On Catalog, the sender browses the picture-rich grid of gift items with photos, names, and prices, optionally narrowing by gift category.
4. The sender opens a gift item and lands on Gift Details, where they see its photos, name, price, and description.
5. On Gift Details, the sender specifies the recipient's destination country — any country of the world — and the recipient's delivery details. The selected gift and delivery details are captured.
6. The sender proceeds to Checkout, where the order summary rail (desktop) or accordion (mobile) shows the selected gift, quantity, and total alongside the recipient's worldwide delivery information.
7. The sender confirms the delivery information and submits payment. The external payment provider processes the real-money payment.
8. If the payment is declined or fails, the failure is reported clearly, the order is preserved, and the sender retries payment or corrects the flagged information without losing the selected gift or delivery details. If the destination cannot be served, this is reported before payment so the sender can change the destination or the gift.
9. On a confirmed successful payment, the order is treated as placed and tracking information is issued. The sender continues to Order Confirmation.
10. On Order Confirmation, the sender sees the placed order — the gift, the recipient's destination country, the amount paid — and the detailed tracking link or tracking number, set in large tabular figures and copyable in one tap.
11. The sender opens Tracking to follow the delivery, or returns to Catalog to send another gift.

Flow 2 — Returning customer verifies identity and follows an order

1. The Gift Sender (Customer) returns and opens Login anonymously.
2. The sender submits their credentials. If they are incorrect, the failure is reported without revealing which field was wrong, the entered email is retained, and the sender re-enters credentials or switches to Sign Up.
3. On verified identity, the sender reaches their durable order, payment-related order records, and tracking information.
4. The sender opens Tracking for a specific order and sees the tracking number in large tabular figures and the horizontal timeline of oversized numbered stops (01 Picked, 02 Customs, 03 Out for delivery, 04 Delivered) on the full-bleed green panel, with the status dot pulsing once on arrival.
5. If the carrier status is temporarily unavailable, the failure is reported clearly and the sender retries the status lookup; the order record stays reachable.
6. The sender re-checks status as the shipment progresses until it is delivered.

Flow 3 — Recipient follows and receives the gift

1. The Gift Recipient receives the tracking link or tracking number for the gift addressed to them, originating from the Gift Sender's paid order.
2. The recipient opens the tracking link or enters the tracking number on Tracking.
3. The recipient sees the current delivery status and the timeline of stops for that order.
4. If the tracking number is unknown or carrier status is temporarily unavailable, the failure is reported clearly and the recipient retries the lookup.
5. The recipient re-checks status as the shipment progresses.
6. The recipient receives the gift item at their location in their country.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Haraldur Thorleifsson — big-hearted boldness for a borderless gift shop. Headline idea: loud, human, and confident on the surface, rigorously legible underneath.

Colour tokens — light mode

Typography. Headings: Sora, 700–800, tight tracking (-0.02em), sentence case, with occasional all-caps micro-labels in Outfit 600 at +0.14em. Headlines are enormous and friendly: 44px on mobile, 72px at 768px, 112px at 1280px, with the hero line allowed to run the full 12-column width. Numbers — prices and tracking IDs — are always set in Sora 700 with tabular figures. Body: Outfit. Scale is a 1.25 modular with a big top end: 112 / 72 / 44 / 28 / 20 / 17 / 15. Display steps: 112, 72, 44. UI steps: 28, 20, 17. Micro-labels: 13px, 600, +0.14em uppercase. Inter, Roboto, Poppins, Arial, and system-ui are not used for any heading or body text.

Shape language. Chunky and soft: 28px radii on product cards, 40px on hero colour blocks, 999px pill buttons and pill category chips. Colour-blocked sections meet with a hard horizontal edge, but every block keeps one rounded corner (top-left or bottom-right) so the page reads as hand-cut rather than gridded. Illustration sits as flat sticker shapes with a 2px deep-ink outline and a 6px offset shadow — never a soft drop shadow.

Layout. A 12-column grid with deliberate asymmetry: the hero is a 7/5 split between an oversized type block and a stacked photo collage that bleeds off the right edge. The catalogue is a dense 2-up (375px) / 3-up (768px) / 4-up (1280px) card grid with varied card heights so it reads as a shop shelf, not a template grid. Section rhythm alternates cream → full-bleed green → cream → full-bleed coral band. Tracking and checkout use a two-rail layout: sticky order summary on the right (desktop) that becomes an accordion at the top (mobile).

Imagery. Product photography on flat cream or single-colour paper grounds, shot straight-on and cropped tight so bouquets, handbags, hampers, and small keepsakes read as objects on a shelf. Colour-blocked backdrops rotate through green, coral, and sunflower so the catalogue grid has rhythm. Each product card carries one small flat illustrated sticker (a ribbon, a plane, a stamp) in the corner. No lifestyle stock people, no gradient blobs, no device mockups.

Accessibility of text and controls. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control.

7. Signature Design Concept

The hand-cut gift shelf. The public entry is a 7/5 asymmetric split on the cream ground, and it is the first of a stack of hand-cut cards rather than a continuous white scroll.

• Left, 7 columns: an oversized Sora 800 headline — "Send something that arrives smiling." — set flush-left at 44/72/112px and filling the 7 columns edge to edge, with "arrives" set in coral #FF4D3D and underlined by a hand-drawn swash. Beneath it, on one line, a single coral pill CTA ("Send a gift") and a secondary ghost link ("Track an order"). Nothing is centred; there is no subtext column, no gradient, no blob, no blue.
• Right, 5 columns: a stacked collage of three tightly cropped product photos — a bouquet, a handbag, a gift box — on green #0E3B2E, coral #FF4D3D, and sunflower #FFC93C plates, rotated -3°, 2°, and -1°, overlapping each other and bleeding off the right viewport edge so the top photo is clipped by the screen. Decoration only; no text on the images.
• Under the whole hero: a full-width coral band running a slow marquee of destination countries — Lagos → Lisbon → Lima — in Sora 700 caps, pausing on hover and wrapping into a static two-row list under prefers-reduced-motion.
• Below the fold: the catalogue reads as a shelf of chunky 28px-radius plates, each photo on its own solid colour plate with a 2px ink-outlined sticker in the corner and a price pill that flips to coral on hover. Section transitions are hard colour-block edges where each block keeps one rounded corner.

This concept only recomposes accepted content, states, and controls — the headline, the two entry actions, the gift imagery, the destination countries, and the catalogue cards. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the stacked, rotated collage of three tightly cropped product photos (bouquet, handbag, gift box) on green, coral, and sunflower plates, bleeding off the right viewport edge, paired with the oversized flush-left headline.
• Input → transformation → outcome thesis: as the page settles, the three photo plates rise 12px and scale 0.98→1 into their rotated positions while the headline and its coral swash resolve in place; the outcome is a composed first frame in which the headline, the coral "Send a gift" pill, and the ghost "Track an order" link are fully readable and the photo stack is fully placed — the sender can immediately enter the ordering journey or the tracking journey.
• Motion vocabulary: 220–320ms entrances on cubic-bezier(0.2, 0.8, 0.2, 1) with a 12px rise and 0.98→1 scale; product images zoom 1.04 on hover while the price pill flips to coral; a slow horizontal marquee of destination countries runs under the hero; the tracking timeline's status dot pulses once on arrival. No bounce, no parallax on the checkout — payment surfaces stay still and instant.
• Composed first frame: cream ground; flush-left oversized headline with "arrives" in coral and its hand-drawn swash; coral pill CTA and ghost link on one line beneath; the rotated, overlapping, edge-bleeding photo stack on the right; the coral country marquee band running full width beneath the hero.
• Reduced-motion state: entrances resolve instantly to their final positions; the country marquee stops and wraps into a static two-row list so every destination remains fully readable; the tracking status dot does not pulse; hover zooms and pill flips are suppressed. All text and controls remain whole and usable.

9. Non-Functional Requirements

• Worldwide destination coverage (explicit) — the destination-country selection must cover any country of the world, and the order must carry that destination through to checkout. Rationale: the source states gifts must be sendable to any country of the world.
• Real-money payment integrity (explicit) — checkout must process real money through a real payment provider, and the order must not be treated as placed, nor tracking information issued, until a successful payment is confirmed. Rationale: the source requires a real checkout for real money payment, and the order/tracking lifecycle depends on payment confirmation.
• Tracking availability and durability (explicit) — a detailed tracking link or tracking number must be issued for each placed order and must remain usable for delivery-status lookup by the sender or the recipient for the lifetime of the shipment. Rationale: the source requires a detailed tracking link or number for the ordered items.
• Picture-led catalogue (explicit) — the catalogue must be packed with pictures of the gift items, with product imagery as the primary content of each card. Rationale: the source requires the site to be packed with pictures of these items.
• Readable text and controls at every viewport (explicit, from the creative direction) — headlines, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering them. Rationale: the direction's readability rule takes precedence over any cropping gesture, which is carried by imagery and decoration instead.
• Reduced-motion usability (explicit, from the creative direction) — under prefers-reduced-motion, moving and scrollable content must provide a usable static arrangement (wrapping into rows or allowing horizontal scrolling) so every item can be brought fully into view. Rationale: the direction requires a usable static arrangement.
• Payment-surface stillness (explicit, from the creative direction) — checkout, payment, and tracking surfaces must not use bouncy or springy motion. Rationale: the direction requires payment surfaces to stay still and instant.
• Contrast (explicit, from the creative direction) — body text #141B33 on cream/white exceeds 12:1, and white text on #0E3B2E exceeds 13:1. Rationale: the direction specifies these contrast ratios.
• Accent restraint (explicit, from the creative direction) — coral #FF4D3D is the single hot accent and must not exceed roughly 8% of any screen, and must not be used as a large background fill behind long-form body copy. Rationale: the direction specifies this restraint.

10. Tech Stack

• Frontend: React — a first-party custom web interface for Landing, Sign Up, Login, Catalog, Gift Details, Checkout, Order Confirmation, and Tracking.
• Backend: Python / FastAPI — serves the catalogue, customer identity, orders, payment confirmation, and tracking records, and integrates with the external payment provider and external delivery carriers.
• Storage: a persistent database for customer identities, gift items and their imagery references, orders, payment-related order records, and tracking links/numbers.
• Containerization: Docker / docker-compose for local and single-host deployment.
• Orchestration: Kubernetes only if the deployment requires it; not otherwise.

No other technology choices were specified by the user.

11. Assumptions and Constraints

Constraints (binding):

• Gift items must be deliverable to any country of the world.
• Checkout must process real money payment.
• Tracking must be provided as a detailed tracking link or tracking number for the ordered items.
• The generic indigo/blue-on-white SaaS template is forbidden for this project.
• Inter, Roboto, Poppins, Arial, and system-ui are not used for any heading or body text.
• No more than one hot accent colour competes on a single screen.

Assumptions (narrow, labeled):

• Assumption: the application owns customer identity because the sender must privately own and resume durable order, payment-related order records, and tracking information. This is a required_inference from the accepted journey, not a source-stated account requirement.
• Assumption: Sign Up and Login are anonymously reachable entry surfaces, because a protected destination cannot own the interaction that establishes access to itself.
• Assumption: the Gift Recipient reaches Tracking through the tracking link or number issued for the order rather than through a separate recipient account; no recipient account is created.
• Assumption: real-money payment is executed by an external payment provider, and shipment movement and carrier scan events are owned by external delivery carriers; the application owns the checkout experience, the payment-confirmation gate, and the presentation of tracking status.
• Assumption: the tracking link or number is issued at the moment a payment-confirmed order is placed; if carrier details are not yet available, the order is still shown and the tracking block offers a retry.
• Assumption: gift items are the product and the sender is the buyer; no seller/vendor marketplace, wishlist, loyalty program, subscription gifting, in-app messaging, returns/refunds workflow, or admin back-office is in scope.
• Assumption: no future-horizon requirements were accepted; everything in this document is current.

12. Glossary

• Gift Sender (Customer): the accepted human actor who browses the catalogue, selects a gift, specifies delivery details, pays, and receives the tracking link or number.
• Gift Recipient: the accepted human actor in any country who receives the ordered gift item and may use the tracking link or number to follow the shipment addressed to them.
• Gift item: a product offered for sending — flowers, handbags, and many other gift items.
• Gift category: a grouping of gift items used for browsing and filtering.
• Destination country: the recipient's country, selectable from any country of the world.
• Order: the record of a selected gift, its delivery details, its destination country, and its payment result.
• Placed order: an order that has been treated as placed because a successful real-money payment was confirmed.
• Real-money payment: an actual payment processed through an external payment provider at checkout.
• Payment confirmation: the successful payment result that gates the order being treated as placed and tracking information being issued.
• Tracking link / tracking number: the detailed reference issued for a placed order and used to look up delivery status.
• Delivery status: the current state of the shipment and its timeline of stops (01 Picked, 02 Customs, 03 Out for delivery, 04 Delivered).
• Carrier scan event: a shipment movement event recorded by an external delivery carrier and reflected in the delivery status.