System Requirements Document for crochet-rainbow

1. Introduction

Product intent. crochet-rainbow is a first-party product presentation and commerce surface for a single premium handmade object: a crochet rainbow wall art piece built from layered textured yarn arches, tassels, tiny flowers, and clouds. The product exists to present that object with the material honesty and gallery pacing it deserves, and to let a visitor evaluate it and complete a purchase of it.

Audience. Design-literate home decorators and gift-buyers aged roughly 28–48 who collect artisanal, tactile objects, and the maker/seller who crafts and maintains the listing. The presentation must read as a gallery wall rather than a storefront grid: warm, fibrous, layered, earthy, sculptural.

Governing constraint. The product presentation contains no text. This is an explicit, hard, project-wide constraint on the product presentation surface. It is honored throughout this document: the Landing presentation carries no text overlays, no captions, no watermarks, and no copy on the product photography. Text is permitted only where the accepted journeys require functional interaction outside the product presentation itself (identity access, checkout, and listing management), and never as an overlay on the product imagery.

2. System Overview

crochet-rainbow is delivered as a custom first-party web application with application-owned identity and backend integration. It presents one product — the crochet rainbow wall art — and supports two accepted human actors: the Shopper, who evaluates the piece and completes a purchase, and the Shop Owner, who maintains the listing's imagery, product details, price, and presentation.

Current delivery. A public, anonymously reachable Landing surface presents the product imagery and details. Self-service identity access (Sign Up, Login) establishes continuity for purchase and for listing management. A focused Checkout completes the order. A Shop Dashboard gives the Shop Owner a return point for the published listing, and a Product Editor is the focused workspace for maintaining that listing.

Actors. Shopper and Shop Owner are the closed active-human catalog. The application itself, its backend, and any payment or delivery provider are typed non-persona actors.

Ownership. The application owns the Landing presentation, identity access, checkout, and listing management. Payment processing and physical fulfillment are provider/external responsibilities and are not owned by this product's custom UI.

Narrow exclusions. This product presents and sells one crafted object. It does not include a multi-product catalogue, a storefront grid, search, recommendations, reviews, wishlists, or account-management surfaces beyond first-use enrollment and returning verification. No text appears on the product presentation.

2a. Product Interpretation and Delivery Boundary

The authoritative requirement is a product presentation brief: a premium handmade crochet rainbow wall art piece, photographed to high-end Etsy standard on a clean neutral wall under soft natural lighting, with no text. That brief is the product's center of gravity, and the Landing surface is where it is honored literally — imagery, material, palette, and light carry the entire presentation, with no copy laid over the product.

Around that presentation, the accepted journeys require a small, honest commerce lifecycle. A visitor must be able to establish identity once and return to it, because a purchase creates a durable commitment bound to the correct person, and because the Shop Owner must privately own and resume the listing. Those identity interactions are anonymous entry points; the destinations that depend on continuity — Checkout, Shop Dashboard, Product Editor — are protected.

The boundary is deliberately narrow. Everything the product does is in service of presenting and selling this one object. Payment capture and physical delivery are handled by their respective providers, not by custom UI here. Nothing in this document authorizes a broader marketplace, a catalogue, or adjacent account features.

2b. Source Content Inventory

No reference directive in this project declares content_source authority. No source content inventory is included.

2c. Page Content and Component Coverage

Landing

• Information and state. The anonymous public entry. Presents the crochet rainbow wall art: layered textured yarn arches, tassels, tiny flowers, and clouds, photographed straight-on against a clean neutral cream wall with soft natural window light from the upper left and gentle shadow falloff to the lower right. Carries no text on the product presentation.
• Primary actions. View the product presentation; proceed toward purchase (which requires identity continuity and routes to Sign Up or Login).
• Supporting actions. Reveal the tassel detail crop on hover over the product image; view the staggered detail crops (tassel macro, flower macro, cloud macro).
• Domain entities. Product (the crochet rainbow wall art), Product Imagery (hero shot, three macro detail crops, one lifestyle crop), Price.
• Component responsibilities. Full-bleed split hero (left 55% product photograph, right 45% cream field with headline, tassel ornament, and a single terracotta pill CTA); vertical 1px walnut hairline between panels with a small mustard dot at its midpoint; staggered three-up detail row at 0 / 40px / 80px vertical offsets with hairline rules between crops; curved cream section boundaries; walnut hairline + mustard dot dividers; tassel ornament groups as section-end punctuation.
• States. Loading: cream ground with the hero panel reserved at final dimensions, no layout shift. Empty: not applicable — the presentation always carries the product imagery. Success: hero and detail crops render fully; hover crossfade to the tassel detail resolves in 400ms. Error: if imagery fails to load, the cream ground and hairline structure remain intact and the image region retries. Recovery: retry the failed image request; the page remains usable and the CTA remains reachable.

Sign Up

• Information and state. Anonymous self-service enrollment. Establishes a first-use identity for a Shopper or a Shop Owner.
• Primary actions. Submit enrollment details to create an identity.
• Supporting actions. Navigate to Login for returning verification.
• Domain entities. Identity, Role (Shopper or Shop Owner).
• Component responsibilities. Enrollment form; role assignment for the Shop Owner; validation feedback; link to Login.
• States. Loading: submit control in a pending state. Empty: blank form with field-level guidance. Success: identity established and the actor continues to the destination that required continuity. Error: invalid or already-used details are reported inline without losing entered values. Recovery: correct the flagged field and resubmit.

Login

• Information and state. Anonymous returning verification for a Shopper completing a purchase and for the Shop Owner maintaining the listing.
• Primary actions. Submit credentials to verify identity.
• Supporting actions. Navigate to Sign Up for first-use enrollment.
• Domain entities. Identity, Session.
• Component responsibilities. Credential form; error reporting; link to Sign Up.
• States. Loading: submit control in a pending state. Empty: blank form. Success: identity verified and the actor continues to the destination that required continuity. Error: unrecognized credentials reported without disclosing which field failed. Recovery: re-enter credentials or route to Sign Up.

Checkout

• Information and state. Role-restricted focused purchase flow for the crochet rainbow wall art order. Reachable only with established identity continuity.
• Primary actions. Confirm the order and complete payment.
• Supporting actions. Review the item and price before committing; return to the Landing presentation.
• Domain entities. Order, Order Line (the crochet rainbow wall art), Price, Payment (provider-owned), Delivery details.
• Component responsibilities. Order summary; price display in terracotta; payment handoff to the provider; confirmation state.
• States. Loading: order summary resolving. Empty: no order in progress — the actor is directed back to the Landing presentation. Success: payment confirmed and the order recorded against the correct identity. Error: declined or failed payment reported with the order preserved. Recovery: retry payment without re-entering the order.

Shop Dashboard

• Information and state. Role-restricted Shop Owner overview and return point for the published wall art listing.
• Primary actions. Open the Product Editor to maintain the listing.
• Supporting actions. Review the listing's current published state.
• Domain entities. Listing, Publication State, Price.
• Component responsibilities. Listing summary; entry into the Product Editor; publication state indicator.
• States. Loading: listing summary resolving. Empty: no listing yet — the Shop Owner is directed into the Product Editor to create one. Success: the published listing and its state are shown. Error: failure to load the listing is reported with a retry. Recovery: retry loading; the Product Editor remains reachable.

Product Editor

• Information and state. Role-restricted focused workspace for maintaining the listing imagery, product details, price, and presentation.
• Primary actions. Edit listing imagery, product details, price, and presentation; publish the listing.
• Supporting actions. Preview the presentation as a Shopper would see it; discard unsaved changes.
• Domain entities. Listing, Product Imagery (hero shot, tassel macro, flower macro, cloud macro, lifestyle crop), Product Details, Price, Publication State.
• Component responsibilities. Imagery management; detail and price fields; presentation controls; publish action; preview.
• States. Loading: existing listing values resolving. Empty: new listing with empty fields and imagery slots. Success: changes saved and the listing published. Error: validation or save failure reported with entered values preserved. Recovery: correct the flagged input and save again.

3. Functional Requirements

FR-1 — Product listing presentation. As a Shopper, I should be able to view a product listing for premium handmade crochet rainbow wall art featuring layered textured yarn arches, tassels, tiny flowers, and clouds, so that I can evaluate the piece. (explicit)

• Trigger/input: anonymous arrival at the Landing surface.
• Observable result: the product presentation renders with the layered arches, tassels, tiny flowers, and clouds visible.
• Access state: anonymous; no identity required to view.
• Failure/recovery: if imagery fails to load, the cream ground and structure persist and the image request retries.
• Continuation: the Shopper proceeds toward purchase or continues browsing the presentation.

FR-2 — Earthy palette and boho aesthetic. As a Shopper, I should see the presentation rendered in an earthy terracotta, mustard, cream, sage, and dusty pink palette with a sophisticated boho aesthetic, so that the piece reads as the crafted object it is. (explicit)

• Trigger/input: rendering of any product presentation surface.
• Observable result: the palette is applied as specified, with cream as the dominant field and dusty pink reserved for illustrative accents.
• Access state: anonymous.
• Failure/recovery: not applicable to a static presentation property.
• Continuation: the Shopper continues evaluating the piece.

FR-3 — Craftsmanship photography. As a Shopper, I should see intricate craftsmanship showcased through high-end Etsy-style product photography on a clean neutral wall with soft natural lighting, so that I can judge the quality of the handwork. (explicit)

• Trigger/input: rendering of the hero and detail imagery.
• Observable result: the hero shot, the tassel/flower/cloud macro crops, and the lifestyle crop render with soft natural light from the upper left and warm, filmic grade.
• Access state: anonymous.
• Failure/recovery: failed crops retry; the remaining crops and the hero remain visible.
• Continuation: the Shopper moves between the hero and the staggered detail crops.

FR-4 — No text on the product presentation. As a Shopper, I should see the product presentation without any text, so that the imagery carries the presentation alone. (explicit)

• Trigger/input: rendering of the product presentation.
• Observable result: no text overlays, captions, watermarks, or copy appear on the product presentation or its photography.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the Shopper continues evaluating the piece.

FR-5 — Shopper identity continuity. As a Shopper, I should be able to establish identity on first use or verify it on return before protected checkout continuity, so that my purchase remains bound to me. (required_inference)

• Trigger/input: the Shopper chooses to proceed toward purchase from the Landing presentation.
• Observable result: an anonymous enrollment or verification interaction completes and the Shopper continues to Checkout.
• Access state: the enrollment and verification interactions are anonymously reachable; Checkout is protected.
• Failure/recovery: invalid or already-used enrollment details, or unrecognized credentials, are reported inline with entered values preserved; the Shopper corrects and resubmits.
• Continuation: the Shopper proceeds to Checkout with continuity established.

FR-6 — Shop Owner identity continuity. As a Shop Owner, I should be able to establish identity on first use or verify it on return before protected listing management, so that the listing remains privately mine to maintain. (required_inference)

• Trigger/input: the Shop Owner chooses to manage the listing.
• Observable result: an anonymous enrollment or verification interaction completes and the Shop Owner continues to the Shop Dashboard.
• Access state: the enrollment and verification interactions are anonymously reachable; Shop Dashboard and Product Editor are protected.
• Failure/recovery: invalid or already-used enrollment details, or unrecognized credentials, are reported inline with entered values preserved; the Shop Owner corrects and resubmits.
• Continuation: the Shop Owner proceeds to the Shop Dashboard.

FR-7 — Shop Owner role assignment. As a Shop Owner, I should be assigned the role required to access listing management destinations, so that I can reach the Shop Dashboard and Product Editor. (required_inference)

• Trigger/input: completion of Shop Owner enrollment.
• Observable result: the Shop Owner identity carries the role that admits it to listing management.
• Access state: role-restricted destinations become reachable for this identity.
• Failure/recovery: if the role is not applied, the Shop Owner is returned to the access interaction rather than shown a broken destination.
• Continuation: the Shop Owner opens the Shop Dashboard.

FR-8 — Complete the purchase. As a Shopper, I should be able to complete a purchase of the crochet rainbow wall art, so that I can acquire the piece. (required_inference)

• Trigger/input: the Shopper confirms the order in Checkout.
• Observable result: payment is confirmed through the provider and the order is recorded against the Shopper's identity.
• Access state: role-restricted to an established Shopper identity.
• Failure/recovery: a declined or failed payment is reported with the order preserved; the Shopper retries payment without re-entering the order.
• Continuation: the Shopper receives confirmation and the order proceeds to fulfillment.

FR-9 — Maintain the listing. As a Shop Owner, I should be able to maintain the listing's imagery, product details, price, and presentation, so that the published listing stays accurate and available for shoppers to view and buy. (required_inference)

• Trigger/input: the Shop Owner opens the Product Editor from the Shop Dashboard.
• Observable result: edited imagery, details, price, and presentation are saved and the listing is published.
• Access state: role-restricted to the Shop Owner identity.
• Failure/recovery: validation or save failures are reported with entered values preserved; the Shop Owner corrects and saves again.
• Continuation: the Shop Owner returns to the Shop Dashboard and sees the updated publication state.

4. User Personas

Shopper

Product context. A design-literate home decorator or gift-buyer who collects artisanal, tactile objects. They arrive anonymously, most likely from a shared link or a search result, and they judge the piece almost entirely on how it is photographed.

Primary goal. Evaluate the handmade crochet rainbow wall art and complete a purchase of it.

Distinct accepted responsibilities. The Shopper views the product presentation, moves between the hero shot and the staggered macro detail crops to inspect the tassels, tiny flowers, and clouds, and decides whether to buy. When they decide to buy, they establish identity on first use or verify it on return, then confirm the order and complete payment in Checkout.

Relevant inputs or decisions. Whether the craftsmanship reads as intricate at macro scale; whether the palette and boho aesthetic suit their space; whether the price is acceptable; whether to commit to the purchase.

Interactions with other accepted participants. The Shopper's purchase creates an order that the Shop Owner's listing produced. The Shopper does not interact with the Shop Owner directly; the handoff is the published listing and the resulting order.

Observable success. The Shopper can view the full product presentation without any text intruding on it, and can complete a purchase that is confirmed and bound to their identity.

Shop Owner

Product context. The maker/seller who crafts the crochet rainbow wall art and maintains its listing. They work in a focused editing context, not a browsing one, and they return to the listing repeatedly to keep it accurate.

Primary goal. Keep the listing published and available for shoppers to view and buy.

Distinct accepted responsibilities. The Shop Owner establishes identity on first use or verifies it on return, opens the Shop Dashboard as their return point, and works in the Product Editor to maintain the listing's imagery, product details, price, and presentation. They publish the listing and confirm its publication state.

Relevant inputs or decisions. Which photographs represent the piece; how the presentation is composed; what the price is; when the listing is ready to publish.

Interactions with other accepted participants. The Shop Owner's published listing is what the Shopper evaluates and purchases. The Shop Owner does not interact with the Shopper directly.

Observable success. The listing is published with the intended imagery, details, price, and presentation, and shoppers can view and buy it.

5. Core User Flows

Flow 1 — Shopper evaluates the product presentation

1. The Shopper arrives anonymously at the Landing surface.
2. The full-bleed split hero renders: the crochet rainbow wall art photographed straight-on against the cream wall on the left, and the cream field with the headline, tassel ornament, and a single terracotta pill CTA on the right. No text appears on the product presentation.
3. The Shopper scrolls through the gallery-paced sequence. Each section enters with a slow fade and a small upward translate, staggered per element; the hero image drifts on its slow 12s parallax.
4. The Shopper hovers the product image and the tassel detail crop crossfades in over 400ms.
5. The Shopper reaches the staggered three-up detail row — tassel macro, flower macro, cloud macro — offset at 0 / 40px / 80px with hairline rules between them, and inspects the craftsmanship.
6. Result: the Shopper has seen the layered textured yarn arches, tassels, tiny flowers, and clouds in the earthy terracotta, mustard, cream, sage, and dusty pink palette under soft natural light.
7. Failure/recovery: if an image fails to load, the cream ground and hairline structure remain intact and the image request retries; the presentation stays usable.
8. Next step: the Shopper decides whether to purchase.

Flow 2 — Shopper establishes identity and completes a purchase

1. From the Landing presentation, the Shopper chooses the terracotta pill CTA to proceed toward purchase.
2. Because Checkout requires continuity, the Shopper is routed to the anonymous Sign Up surface on first use, or to Login if they have purchased before.
3. On Sign Up, the Shopper submits enrollment details. On success, identity is established and the Shopper continues. On error — invalid or already-used details — the failure is reported inline with entered values preserved, and the Shopper corrects and resubmits.
4. On Login, the Shopper submits credentials. On success, identity is verified and the Shopper continues. On error, unrecognized credentials are reported without disclosing which field failed, and the Shopper re-enters them or routes to Sign Up.
5. The Shopper arrives at Checkout, which is now reachable with continuity established. The order summary shows the crochet rainbow wall art and its price in terracotta.
6. The Shopper reviews the order and confirms it. Payment is handed off to the provider.
7. Result: payment is confirmed and the order is recorded against the Shopper's identity.
8. Failure/recovery: if payment is declined or fails, the failure is reported with the order preserved, and the Shopper retries payment without re-entering the order.
9. Next step: the Shopper receives confirmation; the order proceeds to fulfillment.

Flow 3 — Shop Owner establishes identity and reaches listing management

1. The Shop Owner chooses to manage the listing and is routed to the anonymous Sign Up surface on first use, or to Login if they have managed it before.
2. On Sign Up, the Shop Owner submits enrollment details. On success, identity is established and the Shop Owner role is assigned, admitting this identity to listing management. On error, the failure is reported inline with entered values preserved, and the Shop Owner corrects and resubmits.
3. On Login, the Shop Owner submits credentials. On success, identity is verified and the Shop Owner continues. On error, unrecognized credentials are reported without disclosing which field failed.
4. Failure/recovery: if the Shop Owner role is not applied, the Shop Owner is returned to the access interaction rather than shown a broken destination.
5. The Shop Owner arrives at the Shop Dashboard, their return point for the published listing.
6. Result: the Shop Owner sees the listing summary and its publication state.
7. Failure/recovery: if the listing fails to load, the failure is reported with a retry, and the Product Editor remains reachable.
8. Next step: the Shop Owner opens the Product Editor, or, if no listing exists yet, is directed there to create one.

Flow 4 — Shop Owner maintains and publishes the listing

1. From the Shop Dashboard, the Shop Owner opens the Product Editor.
2. The editor resolves the existing listing values, or presents empty fields and imagery slots for a new listing.
3. The Shop Owner edits the listing imagery — the hero shot and the tassel, flower, cloud, and lifestyle crops — along with the product details, price, and presentation.
4. The Shop Owner previews the presentation as a Shopper would see it, confirming that no text appears on the product presentation.
5. The Shop Owner publishes the listing.
6. Result: the changes are saved and the listing is published.
7. Failure/recovery: if validation or saving fails, the failure is reported with entered values preserved, and the Shop Owner corrects the flagged input and saves again.
8. Next step: the Shop Owner returns to the Shop Dashboard and sees the updated publication state; the published listing is now available for shoppers to view and buy.

6. Visuals Colors and Theme

Muse and headline. After Charles & Ray Eames — warm modernism, yarn as material honesty. Eames' palette logic (walnut, cream, mustard, teal, tomato) maps directly onto the requested terracotta / mustard / cream / sage / dusty pink yarn palette, and the Eames' material-honesty ethos and gallery-like exhibition sequences match a handcrafted textile object. The page reads as a gallery wall, not a storefront grid.

Colour tokens (light mode).

Proportion. 70% cream ground, 15% walnut ink, 8% terracotta, 4% mustard, 3% sage.

Typography. Headings: Jost at 600–700 weight — all-caps for section openers with wide 0.08em tracking; sentence-case for the hero headline at very large scale (clamp(56px, 8vw, 104px)), tight 0.95 line-height, optical size 72. Body: Fraunces at 18px, 400 weight, soft optical size, 1.65 line-height; italic Fraunces for pull-quotes. Scale is a 1.333 modular progression: 104 / 72 / 48 / 28 / 18 / 16. Hero headline 104px (clamped to 56px on mobile), section openers 48px, product name 28px, body 18px, captions 16px.

Shape language. Organic-modern, all curves with intent. Section boundaries are soft arcs — each section top uses a shallow elliptical curve (border-radius: 50% 50% 0 0 / 8% 8% 0 0) in the cream ground, so scrolling feels like walking past hanging objects. Cards use 24px radii with no drop shadow — instead a 1px walnut hairline (#3B2E24 at 12% opacity) and a 4px offset solid shadow in the surface tone. Buttons are pill-shaped (999px radius) with a 2px walnut outline and terracotta fill. Decorative tassel elements are small vertical rounded-rect strips (6×28px, 3px radius) in mustard, sage, and dusty pink, grouped in threes, used as section-end ornaments. No sharp corners anywhere except hairline rules.

Spacing rhythm. Gallery-sequence single column, max-width 1180px, with asymmetric offsets. The hero is a full-bleed split: left 55% product photograph, right 45% stacked composition, all left-aligned. Below, sections alternate offset — the product detail image sits 80px left of centre, its caption block 80px right. A 1px walnut rule at 40% opacity separates each section, with a small mustard dot at the left terminus. The detail section uses a three-up row at staggered vertical offsets (0, 40px, 80px) — never a flat grid of identical cards. The footer is a single centred line of small-caps Jost metadata, no columns.

Imagery style. High-end Etsy-style product photography: the crochet rainbow wall art shot on a clean neutral cream wall (#F2EAD9) with soft natural window light from the upper left, creating gentle shadow falloff to the lower right. Macro detail crops of individual tassels, tiny crochet flowers, and cloud shapes at f/2.8 with shallow depth of field. One lifestyle crop showing the piece hung above a walnut sideboard with a ceramic vase, shot at 35mm. No stock people, no hands, no text overlays, no watermarks. Colour grade: warm, slightly desaturated, filmic — lifted blacks, cream highlights, no blue cast.