System Requirements Document for noble-bra

1. Introduction

noble-bra is a direct-to-consumer bra store. The product is built around bras ("bra"), replacing the prior "noble-bra" framing; the storefront, catalog, purchase flow, and operator back office all speak in terms of bra products. The audience is body-conscious shoppers (largely women, 20–45) browsing on mobile at night, plus a small internal team that keeps the bra catalog current and fulfills incoming orders. The emotional register is body-positive, optimistic, private, and a little playful — never clinical, never discount-bin, never lingerie-cliché.

The product intent is a bra store that feels like candy, not commerce: a shopper-facing catalog of bras with a protected purchase flow, and a lightweight operator back office for maintaining bra listings and processing orders, all rendered as one continuous soft glossy object.

2. System Overview

noble-bra is a web application with two working halves that share one visual language:

• Shopper side — an anonymous Landing that explains the bra store and leads into the Catalog; a browseable Catalog of available bras; a focused Product Details view for inspecting an individual bra before purchase; and a protected Checkout for selecting and purchasing a bra.
• Operator side — a protected Listings workspace for reviewing and maintaining the bra catalog, a focused Product Editor for creating and editing bra listing data, and an Orders workspace for reviewing and processing incoming bra orders.

Identity is application-owned. Bra shoppers self-enroll through Sign Up before purchasing; bra catalog/store operators are invited or provisioned before accessing operator workflows; returning shoppers and operators verify their identity through Login before protected work. The application backend persists bra listings, shopper purchases, and incoming orders.

2a. Product Interpretation and Delivery Boundary

The authoritative requirement is that the product is built around bras ("bra"), replacing the prior "noble-bra" framing. The user has not specified the product type; the assistant's offered interpretations (online bra store, bra product catalog, or other features) remain unconfirmed options, not accepted commitments. This document therefore treats the bra store and bra catalog as the current delivery shape, and keeps everything outside that shape out of scope.

Current delivery. A first-party web application with custom UI, application-owned identity, and a backend that persists bra listings, shopper purchases, and incoming orders. Anonymous surfaces are Landing, Sign Up, Login, Catalog, and Product Details. Protected surfaces are Checkout (shopper), and Listings, Product Editor, and Orders (operator).

Access ownership. Landing, Sign Up, Login, Catalog, and Product Details are reachable without an established identity. Checkout requires an established shopper identity so a purchase remains bound to the correct participant. Listings, Product Editor, and Orders require an established operator identity, established by invitation or provisioning rather than self-enrollment. Login is the shared returning-verification surface for both shoppers and provisioned operators.

Boundaries. No payment-provider integration, shipping-carrier integration, review system, wishlist, recommendation engine, discount or promotion engine, or account-management surface beyond first-use identity establishment and returning verification is accepted. Nothing in this document should be read as authorizing those.

2b. Source Content Inventory

Not applicable — no reference directive in this request declares content_source.

2c. Page Content and Component Coverage

Landing

• Information/state: Anonymous first impression explaining the bra store and leading shoppers into the catalog. Full-bleed bubblegum-pink field (#FFE9F0) with an oversized flush-left Unbounded headline "FIND YOUR FIT" in ink-plum (#2B1520), stacked across three lines and allowed to run to the right edge of the viewport. Beside and slightly behind it, one large blob-masked photograph of a bra on a rounded pedestal, cropped by the right edge, with a chrome 3D ring and a lime sphere floating at its base. Below the headline, a row of pill size chips (32B, 34C, 36D, 38DD) and a solid hot-pink pill CTA "Shop the collection". A curved pink-to-white divider bows across the bottom of the hero into the next band.
• Primary actions: Enter the Catalog via a size chip; enter the Catalog via "Shop the collection"; proceed to Sign Up; proceed to Login.
• Supporting actions: Read the bra store explanation in the colour-blocked bands below the hero.
• Domain entities: Bra product (as represented in the hero photograph and size chips), size chip value.
• Component responsibilities: Hero band (headline, blob-masked product photograph, chrome ring, lime sphere, curved divider); size-chip row acting as the primary catalog entry point; primary CTA pill; drifting marquee band of pill size chips (32B · 34C · 36D · 38DD); colour-blocked content bands with curved transitions; header with wordmark and Sign Up / Login entry points.
• States: Loading — hero photograph and marquee resolve in place; entrances are 320–520ms cubic-bezier(0.22, 1, 0.36, 1). Empty — not applicable; the hero is static content. Success — shopper selects a size chip or the CTA and arrives at the Catalog. Error — if the hero photograph fails to load, the pink field, headline, size chips, and CTA remain fully readable and usable. Recovery — the shopper can still enter the Catalog through the size chips or the CTA without the photograph.

Sign Up

• Information/state: Anonymous self-service enrollment for shoppers who independently begin using the bra store. Glossy white (#FFFFFF) form panel floating on the bubblegum-pink ground, with rounded 24–40px radii and a 1px white top highlight plus soft pink inner shadow.
• Primary actions: Submit enrollment details to establish a shopper identity.
• Supporting actions: Move to Login if the shopper already has an identity.
• Domain entities: Shopper identity (credential and profile details required to establish it).
• Component responsibilities: Enrollment form panel; field-level validation messaging; submit pill button; link to Login.
• States: Loading — submit pill shows in-progress state while the identity is established. Empty — pristine form with labels and helper text in muted mauve (#8A6577) at 14px or larger. Success — shopper identity is established and the shopper continues into the Catalog or Checkout. Error — invalid or incomplete fields are reported inline against the offending field; a duplicate or rejected enrollment is reported at form level without discarding entered values. Recovery — the shopper corrects the reported fields and resubmits, or moves to Login.

Login

• Information/state: Anonymous returning verification for shoppers and provisioned store operators. Same glossy white panel language on the pink ground.
• Primary actions: Submit credentials to verify identity.
• Supporting actions: Move to Sign Up if the visitor is a shopper without an identity.
• Domain entities: Shopper identity, operator identity.
• Component responsibilities: Credential form panel; field-level validation messaging; submit pill button; link to Sign Up.
• States: Loading — submit pill shows in-progress state while credentials are verified. Empty — pristine form. Success — identity is verified; a shopper continues to the Catalog or Checkout, an operator continues to Listings or Orders. Error — incorrect credentials are reported at form level without revealing which field was wrong; the entered identifier is preserved. Recovery — the visitor retries, or moves to Sign Up if they are a shopper without an identity.

Catalog

• Information/state: Browseable catalog of available bra products. 2-up mobile / 3-up tablet / 4-up desktop grid of tall capsule cards on the pink ground, widening into a 12-column grid at 1280px with 32–48px gutters.
• Primary actions: Open a bra product's Product Details.
• Supporting actions: Scan product cards; read price set in Unbounded; read the lime "in stock" dot.
• Domain entities: Bra product (name, size, colour, price, image, stock state).
• Component responsibilities: Product grid of tall capsule cards, each with a blob-masked image, a lime (#C6FF4A) "in stock" dot, and a price set in Unbounded; capsule chip filters; glossy card treatment with a 1px white top highlight and soft pink inner shadow; hover state that scales the card from 0.96 with a glossy highlight sweeping across.
• States: Loading — cards resolve into the grid with 320–520ms entrances. Empty — no bras are currently listed; the grid area states that plainly and offers a return to Landing. Success — the shopper sees available bras and opens one. Error — if the catalog cannot be loaded, the grid area reports the failure and offers a retry. Recovery — retry reloads the grid; the shopper can also return to Landing.

Product Details

• Information/state: Focused view for inspecting an individual bra product before purchase. Split layout: blob-masked product image left, size/colour/price controls right.
• Primary actions: Select size and colour; proceed to Checkout with the selected bra.
• Supporting actions: Read price, stock state, and product description; return to the Catalog.
• Domain entities: Bra product (name, size, colour, price, image, stock state, description).
• Component responsibilities: Blob-masked product image panel; size selector as capsule chips; colour selector as capsule chips; price display in Unbounded; lime "in stock" indicator; primary pill CTA to proceed to Checkout; back-to-Catalog control.
• States: Loading — image and controls resolve in place. Empty — not applicable for a single product; if the requested bra is no longer listed, the page states that plainly and offers a return to the Catalog. Success — the shopper has a size and colour selected and proceeds to Checkout. Error — if the product cannot be loaded, the page reports the failure and offers a retry or a return to the Catalog. Recovery — retry reloads the product; the shopper can return to the Catalog and choose another bra.

Checkout

• Information/state: Protected purchase flow for selecting and purchasing a bra. Requires an established shopper identity; an unauthenticated visitor is routed to Login and returned here after verification. Glossy white working surface on the pink ground.
• Primary actions: Confirm the selected bra, size, and colour; submit the purchase.
• Supporting actions: Review the order summary; return to Product Details or the Catalog to change the selection.
• Domain entities: Bra product (name, size, colour, price), shopper identity, purchase record.
• Component responsibilities: Order summary panel showing the selected bra, size, colour, and price; purchase confirmation pill button; identity gate that routes unauthenticated visitors to Login and returns them here; confirmation state.
• States: Loading — summary and confirmation control resolve in place. Empty — no bra is selected in this session; the page states that plainly and offers a return to the Catalog. Success — the purchase is recorded and the shopper sees a confirmation of the bra, size, colour, and price purchased. Error — a failed purchase submission is reported at panel level with the selection preserved so the shopper can retry. Recovery — the shopper retries the submission, or returns to Product Details or the Catalog to change the selection.

Listings

• Information/state: Operator workspace for reviewing and maintaining the bra catalog. Requires an established operator identity. Calm two-pane layout: a soft sidebar of capsule nav items and a white working surface, reusing the same rounded panel language as the shopper side, with no photography — rounded white panels, pink data accents, and lime status dots.
• Primary actions: Review the current bra listings; open a listing in the Product Editor; create a new bra listing.
• Supporting actions: Scan listing rows for name, size, price, and stock state; move between Listings and Orders via the capsule sidebar.
• Domain entities: Bra product (name, size, colour, price, image, stock state).
• Component responsibilities: Capsule sidebar navigation; listings table or panel of rounded rows; lime status dots for stock state; pink data accents; control to open a listing in the Product Editor; control to create a new listing.
• States: Loading — listing rows resolve into the working surface. Empty — no bras are listed yet; the surface states that plainly and offers the create-listing control. Success — the operator sees the current bra listings and opens one. Error — if listings cannot be loaded, the working surface reports the failure and offers a retry. Recovery — retry reloads the listings; the operator can move to Orders via the sidebar.

Product Editor

• Information/state: Focused operator workspace for creating and editing bra listing data. Requires an established operator identity. Same rounded panel language, no photography.
• Primary actions: Create a new bra listing; edit an existing bra listing's name, size, price, and image; save the listing.
• Supporting actions: Return to Listings without saving; review validation feedback per field.
• Domain entities: Bra product (name, size, colour, price, image, stock state).
• Component responsibilities: Listing form panel with fields for name, size, price, and image; field-level validation messaging; save pill button; cancel control returning to Listings.
• States: Loading — an existing listing's values resolve into the form. Empty — a new listing form with empty fields and labels. Success — the listing is saved and the operator sees the saved values reflected in Listings. Error — invalid or missing fields are reported inline against the offending field; a failed save is reported at form level without discarding entered values. Recovery — the operator corrects the reported fields and saves again, or cancels back to Listings.

Orders

• Information/state: Operator workspace for reviewing and processing incoming bra orders. Requires an established operator identity. Same rounded panel language, no photography.
• Primary actions: Review incoming bra orders; process an order.
• Supporting actions: Scan order rows for the bra, size, colour, and price purchased; move between Orders and Listings via the capsule sidebar.
• Domain entities: Purchase record (bra product, size, colour, price, shopper identity, order state).
• Component responsibilities: Capsule sidebar navigation; orders panel of rounded rows; pink data accents; lime status dots for order state; control to process an order.
• States: Loading — order rows resolve into the working surface. Empty — no orders have been placed yet; the surface states that plainly. Success — the operator sees incoming orders and processes one, and the order's state reflects the processing. Error — if orders cannot be loaded, the working surface reports the failure and offers a retry; a failed processing action is reported at row level with the order state unchanged. Recovery — retry reloads the orders; the operator can retry processing or move to Listings via the sidebar.

3. Functional Requirements

FR-1 — Bra framing. As a visitor, I should see the product framed around bras ("bra") rather than the previous "noble-bra" naming, so that the store reads as a bra store throughout. (explicit)

• Trigger/input: any surface is opened.
• Observable result: wordmark, headings, labels, and product copy use "bra" framing; no "noble-bra" framing appears.
• Access state: applies to all surfaces, anonymous and protected.
• Failure/recovery: not applicable — this is a framing constraint, not an operation.
• Continuation: the visitor proceeds with whatever surface they opened.

FR-2 — Anonymous first impression. As a bra shopper, I should land on an anonymous first impression that explains the bra store and leads me into the catalog, so that I can start browsing without an identity. (required_inference)

• Trigger/input: the shopper opens the application root.
• Observable result: the Landing surface renders the bra store explanation, the size-chip row, and the "Shop the collection" CTA.
• Access state: anonymous; no identity required.
• Failure/recovery: if the hero photograph fails to load, the pink field, headline, size chips, and CTA remain fully readable and usable.
• Continuation: the shopper enters the Catalog via a size chip or the CTA, or moves to Sign Up or Login.

FR-3 — Self-enrollment. As a bra shopper, I should be able to self-enroll before purchasing, so that my purchase remains bound to me. (required_inference)

• Trigger/input: the shopper opens Sign Up and submits enrollment details.
• Observable result: a shopper identity is established and the shopper continues into the Catalog or Checkout.
• Access state: anonymous entry; the resulting identity is the shopper's own.
• Failure/recovery: invalid or incomplete fields are reported inline against the offending field; a duplicate or rejected enrollment is reported at form level without discarding entered values; the shopper corrects and resubmits, or moves to Login.
• Continuation: the shopper browses the Catalog or proceeds to Checkout.

FR-4 — Operator provisioning. As a bra catalog/store operator, I should be invited or provisioned before accessing operator workflows, so that operator surfaces are not self-service. (required_inference)

• Trigger/input: an operator identity is provisioned or invited outside self-enrollment.
• Observable result: the operator can verify identity through Login and reach Listings, Product Editor, and Orders.
• Access state: operator identity is not obtainable through Sign Up.
• Failure/recovery: an operator without a provisioned identity cannot reach operator surfaces and is directed to Login.
• Continuation: the operator verifies identity and proceeds to Listings or Orders.

FR-5 — Returning verification. As a returning shopper or operator, I should verify my identity before protected work, so that my protected state stays bound to me. (required_inference)

• Trigger/input: the visitor opens Login and submits credentials.
• Observable result: identity is verified; a shopper continues to the Catalog or Checkout, an operator continues to Listings or Orders.
• Access state: anonymous entry; protected destinations remain unavailable until verification succeeds.
• Failure/recovery: incorrect credentials are reported at form level without revealing which field was wrong, and the entered identifier is preserved; the visitor retries or moves to Sign Up if they are a shopper without an identity.
• Continuation: the visitor proceeds to the destination they were seeking.

FR-6 — Browse the bra catalog. As a bra shopper, I should browse a catalog of available bra products, so that I can find the bra I want. (required_inference)

• Trigger/input: the shopper opens the Catalog.
• Observable result: a grid of tall capsule cards renders, each with a blob-masked image, a lime "in stock" dot, and a price set in Unbounded.
• Access state: anonymous; no identity required.
• Failure/recovery: if the catalog cannot be loaded, the grid area reports the failure and offers a retry; the shopper can also return to Landing.
• Continuation: the shopper opens a bra product's Product Details.

FR-7 — Inspect a bra product. As a bra shopper, I should inspect an individual bra product before purchase, so that I can choose the right size and colour. (required_inference)

• Trigger/input: the shopper opens Product Details for a bra.
• Observable result: a split view renders with a blob-masked product image left and size/colour/price controls right.
• Access state: anonymous; no identity required.
• Failure/recovery: if the product cannot be loaded, the page reports the failure and offers a retry or a return to the Catalog; if the bra is no longer listed, the page states that plainly and offers a return to the Catalog.
• Continuation: the shopper selects size and colour and proceeds to Checkout, or returns to the Catalog.

FR-8 — Purchase a bra. As a bra shopper, I should select and purchase a bra through a protected purchase flow, so that I obtain the bra I want. (required_inference)

• Trigger/input: the shopper proceeds to Checkout with a selected bra, size, and colour, and submits the purchase.
• Observable result: the purchase is recorded and the shopper sees a confirmation of the bra, size, colour, and price purchased.
• Access state: protected; an unauthenticated visitor is routed to Login and returned to Checkout after verification.
• Failure/recovery: a failed purchase submission is reported at panel level with the selection preserved so the shopper can retry; if no bra is selected in this session, the page states that plainly and offers a return to the Catalog.
• Continuation: the shopper's purchase appears in the operator's Orders workspace.

FR-9 — Maintain the bra catalog. As a bra catalog/store operator, I should review and maintain the bra catalog, so that listings stay accurate. (required_inference)

• Trigger/input: the operator opens Listings.
• Observable result: the current bra listings render as rounded rows with name, size, price, and stock state, with lime status dots and pink data accents.
• Access state: protected; requires an established operator identity.
• Failure/recovery: if listings cannot be loaded, the working surface reports the failure and offers a retry; the operator can move to Orders via the sidebar.
• Continuation: the operator opens a listing in the Product Editor or creates a new listing.

FR-10 — Create and edit bra listing data. As a bra catalog/store operator, I should create and edit bra listing data, so that the catalog reflects what is actually for sale. (required_inference)

• Trigger/input: the operator opens the Product Editor for a new or existing listing and saves.
• Observable result: the listing's name, size, price, and image are saved and reflected in Listings.
• Access state: protected; requires an established operator identity.
• Failure/recovery: invalid or missing fields are reported inline against the offending field; a failed save is reported at form level without discarding entered values; the operator corrects and saves again, or cancels back to Listings.
• Continuation: the operator returns to Listings and sees the saved values.

FR-11 — Review and process incoming bra orders. As a bra catalog/store operator, I should review and process incoming bra orders, so that shopper orders are fulfilled. (required_inference)

• Trigger/input: the operator opens Orders and processes an order.
• Observable result: incoming orders render as rounded rows showing the bra, size, colour, and price purchased, and the processed order's state reflects the processing.
• Access state: protected; requires an established operator identity.
• Failure/recovery: if orders cannot be loaded, the working surface reports the failure and offers a retry; a failed processing action is reported at row level with the order state unchanged.
• Continuation: the operator continues processing further orders or moves to Listings via the sidebar.

FR-12 — Persist bra listings, purchases, and orders. As the application backend, I should persist bra listings, shopper purchases, and incoming orders, so that catalog state, purchase records, and order state survive across sessions. (required_inference)

• Trigger/input: a listing is saved, a purchase is submitted, or an order is processed.
• Observable result: the corresponding record is durably stored and readable on subsequent visits.
• Access state: system process; no human interaction.
• Failure/recovery: a failed write surfaces as the corresponding page-level error described in FR-8, FR-10, and FR-11.
• Continuation: the persisted state is visible in Listings, Orders, and the shopper's confirmation.

4. User Personas

Bra shopper

Product context. A body-conscious shopper, largely women aged 20–45, browsing on mobile at night. She arrives without an identity, often from a link or a search, and wants to understand the store quickly and get to bras that fit her.

Primary goal. Find and obtain the bra she wants.

Distinct accepted responsibilities. She browses the Catalog, inspects individual bras on Product Details, selects size and colour, and completes a purchase through Checkout. She self-enrolls through Sign Up when she decides to buy, and verifies her identity through Login when she returns. She is the only persona who initiates a purchase.

Relevant inputs or decisions. Which size chip or catalog entry to follow; which bra to open; which size and colour to select; whether to enroll now or continue browsing; whether to confirm the purchase or go back and change the selection.

Interactions with other accepted participants. Her purchase is what creates the incoming order that the bra catalog/store operator reviews and processes in Orders. She never interacts with the operator directly; the handoff is the recorded purchase.

Observable success. She sees a confirmation of the bra, size, colour, and price she purchased, and that purchase appears in the operator's Orders workspace.

Bra catalog/store operator

Product context. A member of the small internal team that keeps the bra store sellable. They work in the back office on the same rounded, glossy panel language as the storefront, but with no photography — rounded white panels, pink data accents, and lime status dots.

Primary goal. Keep the bra catalog current and fulfill shopper orders.

Distinct accepted responsibilities. They review and maintain the bra catalog in Listings, create and edit bra listing data (name, size, price, image) in the Product Editor, and review and process incoming bra orders in Orders. They are the only persona who maintains listings or processes orders.

Relevant inputs or decisions. Which listing to open or create; what name, size, price, and image a bra should carry; whether a listing's saved values are correct; which incoming order to process next.

Interactions with other accepted participants. Their listings are what the bra shopper browses in the Catalog and inspects on Product Details. Their order processing is the downstream response to the shopper's purchase.

Observable success. Listings are accurate and orders are completed — the catalog reflects what is actually for sale, and processed orders show a state that reflects the processing.

5. Core User Flows

Flow A — Bra shopper discovers the store and browses bras

1. The bra shopper opens the application root and lands on Landing (anonymous).
2. She reads the bra store explanation and sees the oversized "FIND YOUR FIT" headline, the blob-masked bra photograph, and the drifting marquee of pill size chips (32B · 34C · 36D · 38DD).
3. She selects a size chip, or presses the "Shop the collection" pill CTA.
4. She arrives at Catalog (anonymous) and sees the grid of tall capsule cards, each with a blob-masked image, a lime "in stock" dot, and a price set in Unbounded.
5. If the catalog cannot be loaded, the grid area reports the failure and offers a retry; she can also return to Landing. Otherwise she continues.
6. She opens a bra and arrives at Product Details.

Flow B — Bra shopper inspects a bra and purchases it

1. On Product Details (anonymous), the bra shopper sees the split view: blob-masked product image left, size/colour/price controls right.
2. She selects a size and a colour from the capsule chips and reads the price in Unbounded.
3. If the bra is no longer listed or cannot be loaded, the page states that plainly and offers a return to the Catalog; she returns to Catalog and chooses another bra. Otherwise she continues.
4. She presses the primary pill CTA to proceed to Checkout.
5. Because Checkout is protected and she has no identity yet, she is routed to Login (anonymous). She has no identity, so she moves to Sign Up.
6. On Sign Up, she submits her enrollment details. If fields are invalid or incomplete, they are reported inline against the offending field and her entered values are preserved; she corrects them and resubmits.
7. Her shopper identity is established and she is returned to Checkout.
8. On Checkout, she reviews the order summary showing the selected bra, size, colour, and price, and submits the purchase.
9. If the submission fails, the failure is reported at panel level with her selection preserved; she retries.
10. She sees a confirmation of the bra, size, colour, and price she purchased. Her purchase is recorded and appears in the operator's Orders workspace.

Flow C — Bra shopper returns and verifies identity

1. The returning bra shopper opens Login (anonymous).
2. She submits her credentials.
3. If the credentials are incorrect, the failure is reported at form level without revealing which field was wrong, and her entered identifier is preserved; she retries.
4. Her identity is verified and she continues to Catalog or Checkout, depending on what she was seeking.

Flow D — Bra catalog/store operator verifies identity and reaches the back office

1. The bra catalog/store operator has been provisioned or invited outside self-enrollment, so no Sign Up path applies to them.
2. They open Login (anonymous) and submit their credentials.
3. If the credentials are incorrect, the failure is reported at form level without revealing which field was wrong, and their entered identifier is preserved; they retry.
4. Their identity is verified and they continue to Listings or Orders.

Flow E — Bra catalog/store operator maintains the bra catalog

1. On Listings (protected, operator identity established), the operator sees the current bra listings as rounded rows with name, size, price, and stock state, with lime status dots and pink data accents.
2. If no bras are listed yet, the surface states that plainly and offers the create-listing control. If listings cannot be loaded, the working surface reports the failure and offers a retry; the operator can also move to Orders via the capsule sidebar.
3. The operator opens an existing listing, or creates a new one, and arrives at Product Editor.
4. On Product Editor, they enter or change the bra's name, size, price, and image and save.
5. If fields are invalid or missing, they are reported inline against the offending field; if the save fails, the failure is reported at form level without discarding entered values. The operator corrects and saves again, or cancels back to Listings.
6. The listing is saved and the operator returns to Listings, where the saved values are reflected.

Flow F — Bra catalog/store operator reviews and processes incoming bra orders

1. On Orders (protected, operator identity established), the operator sees incoming bra orders as rounded rows showing the bra, size, colour, and price purchased, with lime status dots for order state.
2. If no orders have been placed yet, the surface states that plainly. If orders cannot be loaded, the working surface reports the failure and offers a retry; the operator can also move to Listings via the capsule sidebar.
3. The operator processes an order.
4. If the processing action fails, the failure is reported at row level with the order state unchanged; the operator retries.
5. The processed order's state reflects the processing, and the operator continues with further orders or moves to Listings.

6. Visuals Colors and Theme

Muse: Karim Rashid. Sensual pop minimalism for a bra store that feels like candy, not commerce. Organic curves, glossy candy surfaces, optimism as a material — softness without sentimentality, sensuality without sleaze, and a colour point of view that no generic SaaS template can reach. The operator surfaces inherit the same rounded, glossy control language so the whole product reads as one object.

Headline direction: "FIND YOUR FIT" — oversized, flush-left, Unbounded, ink-plum, stacked across three lines and allowed to run to the right edge of the viewport.

Colour tokens (light mode)

No blue anywhere. Violet, indigo, and blue are banned from this palette, including #0057FF, #2563EB, #4F46E5, #6366F1, #7C3AED and neighbours, and no blue-on-white hero.

Typography

• Headings: Unbounded at 600–700 weight, tight tracking (-0.02em), sentence case for headlines and all-caps only for micro-labels. Display sizes are large and soft-cornered in feel, never condensed.
• Body: Quicksand 400–500 at 16–18px with 1.6 line-height for a rounded, friendly read.
• Scale: 1.333 modular — 56 / 42 / 32 / 24 / 18 / 16 / 13.
• Applied sizes: display headline clamp(40px, 7vw, 96px) on the landing hero; page titles clamp(32px, 4vw, 56px); section titles 32/24; product names 20; body 16; labels 13 uppercase with +0.08em tracking.

Shape language

Soft organic geometry: pill buttons, capsule chips, 24–40px card radii, blob-masked imagery, and curved section dividers that bow between pink and white zones. Controls are glossy — a 1px white top highlight and a soft pink inner shadow give every button and card a candy-shell feel. Nothing is square; the only hard edge is the viewport.

Layout

Mobile-first single column that widens into a 12-column grid at 1280px with generous 32–48px gutters. The landing is a sequence of colour-blocked bands (pink ground → white band → pink band) with curved transitions. Catalog uses a 2-up mobile / 3-up tablet / 4-up desktop product grid of tall capsule cards. Product details is a split: blob-masked product image left, size/colour/price controls right. Operator surfaces (Listings, Product Editor, Orders) reuse the same rounded panel language in a calm two-pane layout — a soft sidebar of capsule nav items and a white working surface — so the back office feels like the same product, not a different template.

Imagery

Product-first but art-directed: bras photographed on soft pedestals and rounded plinths against pink and cream seamless grounds, with glossy 3D props (a chrome ring, a lime sphere, a satin ribbon) as sculptural companions. Fabric macro shots — lace, mesh, satin sheen — are masked into blobs and capsules. No stock models in white studios, no flat icon-only cards, no generic gradient blobs. Operator surfaces use the same palette but no photography — just rounded white panels, pink data accents, and lime status dots.

Avoid

Blue, indigo, or violet anywhere; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui for headings or body; gradient-blob heroes and the centred headline + subtext + blue button stack; a grid of identical hover-lift cards with square corners; clinical lingerie clichés (black-and-red "seduction" palettes, lace-on-black stock photography, mannequin torsos in white studios); discount-bin urgency devices (countdown timers, red sale bursts, strikethrough price walls); glassmorphism, frosted panels, and soft multicolour violet→pink→sky gradients; bouncy, springy micro-interactions beyond one soft overshoot — nothing spins, flashes, or wobbles.

7. Signature Design Concept

"FIND YOUR FIT" as a soft glossy object.

The public entry is a full-bleed bubblegum-pink field (#FFE9F0). A single oversized Unbounded headline, "FIND YOUR FIT", is set flush-left in ink-plum (#2B1520) at clamp(40px, 7vw, 96px), stacked across three lines and allowed to run to the right edge of the viewport. Beside and slightly behind it sits one large blob-masked photograph of a bra on a rounded pedestal, cropped by the right edge of the screen, with a chrome 3D ring and a lime sphere floating at its base. Under the headline, a row of pill size chips (32B, 34C, 36D, 38DD) acts as the primary entry point into the catalog, and a solid hot-pink pill CTA "Shop the collection" sits pinned beneath them. A curved pink-to-white divider bows across the bottom of the hero into the next band.

The signature moves that carry the concept:

• The oversized flush-left headline spanning the viewport on the pink ground, with the blob-masked product photograph cropped by the right edge.
• A drifting marquee of pill size chips (32B · 34C · 36D · 38DD) that crosses the hero band and doubles as the catalog entry point.
• Glossy candy controls: every button and card carries a 1px white top highlight and a soft pink inner shadow, so the UI reads as a moulded plastic object.
• Curved section dividers that bow between pink and white bands, so the landing reads as one continuous soft surface rather than stacked rectangles.
• Product cards as tall capsules with a blob-masked image, a lime "in stock" dot, and a price set in Unbounded — never the identical hover-lift card grid.

This concept recomposes only accepted content, states, and controls: the headline, the bra photograph, the size chips, the CTA, and the navigation into Catalog, Sign Up, and Login. It introduces no new behaviour, 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 blob-masked photograph of a bra on a rounded pedestal, cropped by the right edge of the viewport, with a chrome 3D ring and a lime sphere floating at its base — set against the bubblegum-pink field and the flush-left "FIND YOUR FIT" headline.

Input → transformation → outcome thesis. As the shopper arrives, the hero's blob shapes morph slowly behind the headline and the marquee of pill size chips drifts across the band; when the shopper hovers a size chip or the "Shop the collection" pill, the control squashes-and-stretches 4% on press and the card-scale treatment sweeps a glossy highlight across it. The outcome is that the shopper reads the bra store's promise and enters the Catalog through a size chip or the CTA — the same accepted entry points, made to feel like a soft glossy object.

Motion vocabulary. Expressive but liquid: 320–520ms cubic-bezier(0.22, 1, 0.36, 1) entrances; cards that scale from 0.96 with a glossy highlight sweeping across on hover; pill buttons that squash-and-stretch 4% on press; blob shapes that morph slowly behind the hero; a marquee of size chips drifting across one band. No bounce beyond a single soft overshoot; nothing spins or flashes.

Composed first frame. The pink field fills the viewport. "FIND YOUR FIT" sits flush-left in ink-plum, stacked across three lines, running toward the right edge. The blob-masked bra photograph sits beside and slightly behind it, cropped by the right edge, with the chrome ring and lime sphere at its base. The size-chip row and the hot-pink "Shop the collection" pill sit beneath the headline. The curved pink-to-white divider bows across the bottom.

Reduced-motion state. All morphing and the marquee stop; the chip row becomes a horizontally scrollable strip so every size chip can be brought fully into view; entrances collapse to a 120ms fade. The headline, size chips, CTA, and navigation remain fully readable and usable.

9. Non-Functional Requirements

NFR-1 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, cards' 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. (explicit — creative direction)

• Rationale: the direction's readable-text rule takes precedence over any cropping gesture; imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut instead.

NFR-2 — Moving and scrollable content. Marquees, tickers, carousels, and horizontally scrollable rows may cross the viewport or container edge by design; each item must become fully readable as it passes. (explicit — creative direction)

• Rationale: the size-chip marquee is a signature move and doubles as the catalog entry point.

NFR-3 — Reduced motion. With prefers-reduced-motion, provide a usable static arrangement: wrap items into rows or allow horizontal scrolling so each item can be brought fully into view. (explicit — creative direction)

• Rationale: the direction specifies a reduced-motion state for the hero and the marquee.

NFR-4 — Colour and contrast. Body copy uses ink-plum #2B1520 on the pink ground (~13:1) and on white (~14:1). Muted mauve #8A6577 is limited to metadata, labels, and helper text at 14px or larger and is never used for critical text (~4.6:1 on the pink ground). (explicit — creative direction)

• Rationale: the direction states these contrast ratios and the 14px+ restriction explicitly.

NFR-5 — No blue. Blue, indigo, and violet are banned from the palette, including #0057FF, #2563EB, #4F46E5, #6366F1, #7C3AED and neighbours, and no blue-on-white hero. (explicit — creative direction)

NFR-6 — Typography. Headings use Unbounded at 600–700 weight with -0.02em tracking; body uses Quicksand 400–500 at 16–18px with 1.6 line-height. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are not used for headings or body. (explicit — creative direction)

NFR-7 — Persistence. The application backend persists bra listings, shopper purchases, and incoming orders so that catalog state, purchase records, and order state survive across sessions. (required_inference)

• Rationale: required to make the accepted browse, purchase, and order-processing journeys executable.

NFR-8 — Protected state continuity. Checkout, Listings, Product Editor, and Orders remain unavailable until identity is established, so a purchase stays bound to the correct shopper and operator workflows stay bound to provisioned operators. (required_inference)

• Rationale: required to keep durable actor-specific state and value transfers bound to the correct participant.

10. Tech Stack

• Frontend: React (web application with custom UI). (basic_default — not specified by user)
• Backend: Python / FastAPI. (basic_default — not specified by user)
• Storage: A relational database appropriate to persisting bra listings, shopper purchases, and incoming orders. (basic_default — not specified by user)
• Packaging: Docker with docker-compose for local and single-host deployment. (basic_default — not specified by user)
• Orchestration: Kubernetes is not required for the current delivery shape and is not included. (basic_default — not specified by user)

11. Assumptions and Constraints

Constraints

• The product must use "bra" rather than the previous "noble-bra" naming/framing. (explicit)
• The user has not specified the product type; the assistant's offered interpretations (online bra store, bra product catalog, or other features) remain unconfirmed options, not accepted commitments. (explicit)
• No blue, indigo, or violet anywhere in the palette; no blue-on-white hero. (explicit — creative direction)
• Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are not used for headings or body. (explicit — creative direction)
• Readable text and controls stay whole at every viewport; imagery, decoration, and motion carry any cropping gesture. (explicit — creative direction)

Assumptions

• The current delivery shape is a bra store with a shopper-facing catalog and a lightweight operator back office, as the accepted interpretation of the bra framing. (required_inference)
• Bra shoppers self-enroll; bra catalog/store operators are invited or provisioned and do not self-enroll. (required_inference)
• Identity is application-owned, with anonymous entry through Landing, Sign Up, Login, Catalog, and Product Details, and protected access to Checkout, Listings, Product Editor, and Orders. (required_inference)
• A bra listing carries at minimum a name, size, price, and image, and a purchase record carries at minimum the bra, size, colour, price, and shopper identity. (required_inference)
• Payment processing, shipping-carrier integration, reviews, wishlists, recommendations, discounts, and account management beyond first-use identity establishment and returning verification are outside the current delivery shape. (required_inference)

12. Glossary

• Bra — the product this store is built around; the framing that replaces the previous "noble-bra" naming.
• Bra shopper — the accepted persona who browses bras, inspects them, and purchases them.
• Bra catalog/store operator — the accepted persona who maintains bra listings and processes incoming orders.
• Listing — a bra product record in the catalog, carrying at minimum a name, size, price, and image.
• Order — the record created when a bra shopper completes a purchase, reviewed and processed by the operator.
• Size chip — a pill-shaped control carrying a bra size value (for example 32B, 34C, 36D, 38DD) that acts as a catalog entry point.
• Blob mask — the soft organic shape used to crop product imagery, per the shape language.
• Capsule card — the tall, rounded product card used in the Catalog grid, with a blob-masked image, a lime "in stock" dot, and a price set in Unbounded.
• Glossy candy control — a button or card carrying a 1px white top highlight and a soft pink inner shadow, so the UI reads as a moulded plastic object.
• Curved section divider — the bowed transition between pink and white bands on the landing.