System Requirements Document for windy-project

1. Introduction

windy-project is a small atelier presentation for three gold-and-crystal decorative lidded vessels. The product intent is derived from the authoritative user requirement thread — a delegated design instruction ("تصميم اخر" / "تصميم خر") accompanied by a single uploaded product photograph — and from the accepted Planning Scope, which classifies the only concrete supplied material as that photograph of three gold-and-crystal decorative lidded vessels on a white surface, carrying a "99dt" overlay and a "TOPACO" watermark.

The audience is the gift/collector shopper browsing on a phone, deciding whether these objects are treasure or trinket, and the store owner who presents these decorative items. The product is a public, anonymous, image-led presentation: a first impression that frames the photograph as a lit artefact, and a viewing destination where the three vessels can be inspected as a collection. No product behavior, delivery, access, roadmap, or hard constraints beyond the supplied material were stated by the user.

2. System Overview

windy-project is delivered as a first-party custom web interface with two anonymously reachable destinations: Landing and Gallery. Both are owned by the application and require no access credential. The system presents the uploaded photograph as its primary content and visual reference, preserves the "TOPACO" watermark and "99dt" overlay as part of the source artefact, and carries bilingual Arabic-first copy alongside Latin display type.

The accepted active human actors are the Shopper and the Store Owner. The Shopper browses the product presentation and selects a desired piece; the Store Owner presents the product imagery and its details so that shoppers see the offered items. No system, provider, or external actor is required for the accepted behavior.

Narrow exclusions: no checkout, payment, cart, order, shipping, account, or inventory-management capability is accepted. No blue or indigo primary/accent, no rounded cards, pills, glass panels, frosted blur, or drop shadows, and no recolouring, cropping through, or overlaying text on the uploaded vessels.

2a. Product Interpretation and Delivery Boundary

The delivery boundary is a public, anonymous, first-party presentation surface. Both accepted destinations are reachable without establishing identity, because the accepted behavior — viewing the photograph and identifying a desired piece — creates no durable actor-specific state, commitment, entitlement, or value transfer that must remain bound to a participant. No application-owned identity is established, and no protected destination exists in the current horizon.

The current horizon covers the Landing first impression and the Gallery viewing sequence. Nothing beyond presenting the three vessels and their details is accepted as current. Future ideas, if any arise, remain outside current pages and acceptance.

2b. Source Content Inventory

The following verified factual content is supplied by the authoritative content_source reference directive (uploaded product photograph, chat_media/23903e33-45b9-4c19-bf81-cd570ac11d3a/15b5fd59_477990641_629364956297277_7856668747497680890_n.jpg):

• Collection: three gold-and-crystal decorative lidded vessels, presented together as one set.
• Vessel 01 — tallest: gold lidded vessel with a pointed finial, a faceted crystal collar beneath the lid, a faceted crystal knop at the mid-stem, and a flared gold foot.
• Vessel 02 — middle: gold lidded vessel with a pointed finial, a faceted crystal collar beneath the lid, a faceted crystal knop at the mid-stem, and a flared gold foot; shorter than Vessel 01.
• Vessel 03 — shortest: gold lidded vessel with a pointed finial, a faceted crystal collar beneath the lid, a faceted crystal knop at the mid-stem, and a flared gold foot; the most compact of the three.
• Materials: gold-finished metal bodies with clear faceted crystal elements.
• Setting in the source photograph: white surface, light neutral background, with a dark red rose and small pale flowers at the upper right.
• Overlay: "99dt" in the upper-right corner.
• Watermark: "TOPACO" across the lower centre of the photograph.
• Media reference: chat_media/23903e33-45b9-4c19-bf81-cd570ac11d3a/15b5fd59_477990641_629364956297277_7856668747497680890_n.jpg (message b4b1bcc5-acec-4ba1-9cf4-0f517a24b41a, created 2026-09-29T11:00:12.996501+00:00).

No further verified facts — dimensions, weights, prices beyond the "99dt" overlay, or provenance — were supplied, and none are invented here.

2c. Page Content and Component Coverage

Landing

• Information and state: the monumental bilingual wordmark "تصميم خر" in Noto Kufi Arabic 700, with "WINDY — OBJECTS" in Playfair Display 700 small-caps gold beneath it; a single line of Arabic body copy; the uploaded photograph presented as a lit rectangle on the warm black ground; a hairline gold baseline rule spanning the viewport width carrying "01 — THREE VESSELS" at its left end and "GOLD · CRYSTAL · 99dt" at its right.
• Primary action: the solid vermilion rectangle button "استعرض المجموعة", leading to Gallery.
• Supporting action: the ghost gold-bordered button "القطع الثلاث", presenting the three-vessel set.
• Domain entities: the collection of three gold-and-crystal lidded vessels; the source photograph as artefact.
• Component responsibilities: bilingual wordmark block (Arabic display above Latin small-caps, both flush left); full-bleed photograph plate with 1px bone hairline frame and soft radial glow behind it; baseline rule acting as running index; two-button action row.
• States: loading — photograph plate holds the black ground until the image resolves; empty — not applicable, the photograph is supplied content; success — wordmark revealed by mask-wipe and photograph crossfaded in from black; error — if the photograph fails to resolve, the plate retains its hairline frame and the wordmark, copy, rule, and both buttons remain fully readable; recovery — the plate is retried on next load without altering layout.

Gallery

• Information and state: a sparse vertical sequence of full-width plates, each with a left-aligned gold index numeral (01/02/03), the Arabic name of the vessel, and a hairline spec list in two-column label/value alignment (material, height, finish, price); a single horizontal row of ghost-rectangle filters.
• Primary action: inspecting a vessel plate and its spec list.
• Supporting action: selecting a filter chip to narrow the sequence; hovering a specimen to swap its photograph for a second crop.
• Domain entities: the three vessels as individual specimens; their material, height, finish, and price attributes; the filter set.
• Component responsibilities: plate sequence with hard-cut zero-radius frames; oversized Playfair Display index numerals flipping from gold to vermilion on hover; photograph crossfade to a detail crop on hover; horizontally scroll-snapping filter row; closing contact block, the only centred element.
• States: loading — plates hold their frames and index numerals while imagery resolves; empty — if a filter yields no matching specimen, the sequence shows the filter row and a gold small-caps notice that no piece matches, with the filter row remaining operable; success — plates fade and lift 16px on scroll-into-view, staggered 80ms; error — a plate whose image fails retains its frame, index numeral, Arabic name, and spec list; recovery — the filter can be cleared to restore the full sequence, and failed imagery is retried on next load.

3. Functional Requirements

FR-1 — Anonymous first impression (explicit) As a Shopper, I should arrive at Landing without any credential and immediately see the monumental bilingual wordmark and the uploaded photograph of the three gold-and-crystal lidded vessels, so that I understand what is being offered before doing anything else.

• Trigger/input: navigating to Landing.
• Observable result: the wordmark "تصميم خر" with "WINDY — OBJECTS" beneath it, the photograph plate, the Arabic body line, the baseline rule, and both buttons are visible.
• Access state: anonymous, no credential required.
• Failure/recovery: if the photograph does not resolve, the frame, wordmark, copy, rule, and buttons remain readable and the image is retried on next load.
• Continuation: the Shopper proceeds to Gallery or to the three-vessel set.

FR-2 — Enter the collection (explicit) As a Shopper, I should activate the solid vermilion button "استعرض المجموعة" on Landing to move into the Gallery sequence, so that I can inspect the vessels as a collection.

• Trigger/input: activating "استعرض المجموعة".
• Observable result: the Gallery sequence of full-width plates is presented.
• Access state: anonymous.
• Failure/recovery: if the destination does not load, the Shopper remains on Landing with both buttons still operable.
• Continuation: the Shopper inspects individual plates.

FR-3 — View the three-vessel set (explicit) As a Shopper, I should activate the ghost gold-bordered button "القطع الثلاث" on Landing to see the three vessels presented together, so that I can judge the set as one collection.

• Trigger/input: activating "القطع الثلاث".
• Observable result: the three-vessel presentation is shown.
• Access state: anonymous.
• Failure/recovery: if the presentation does not load, the Shopper remains on Landing with both buttons still operable.
• Continuation: the Shopper moves into the Gallery sequence or returns to the Landing composition.

FR-4 — Inspect a vessel plate (explicit) As a Shopper, I should read each Gallery plate's gold index numeral, Arabic name, and hairline spec list, so that I can compare material, height, finish, and price across the three vessels.

• Trigger/input: scrolling the Gallery sequence.
• Observable result: each plate fades and lifts 16px into view, staggered 80ms, with its numeral, name, and two-column spec list fully readable.
• Access state: anonymous.
• Failure/recovery: a plate whose image fails retains its frame, numeral, name, and spec list.
• Continuation: the Shopper continues to the next plate or selects a filter.

FR-5 — Hover a specimen for its detail crop (explicit) As a Shopper, I should hover a specimen plate so that its photograph crossfades to a second tighter crop and its index numeral flips from gold to vermilion, so that I can examine the dome and crystal detail.

• Trigger/input: hovering a specimen plate.
• Observable result: a 500ms crossfade to the detail crop and a gold-to-vermilion numeral flip, with no scale, shadow, or bounce.
• Access state: anonymous.
• Failure/recovery: if the detail crop does not resolve, the primary photograph remains displayed and the numeral flip still occurs.
• Continuation: the Shopper moves to another plate or selects a filter.

FR-6 — Filter the sequence (explicit) As a Shopper, I should use the single horizontal row of ghost-rectangle filters to narrow the Gallery sequence, so that I can reach the piece I want.

• Trigger/input: selecting a filter chip.
• Observable result: the active chip is marked in vermilion and the sequence narrows to matching specimens.
• Access state: anonymous.
• Failure/recovery: if no specimen matches, the filter row remains operable and a gold small-caps notice states that no piece matches; clearing the filter restores the full sequence.
• Continuation: the Shopper inspects a matching plate or clears the filter.

FR-7 — Present the product imagery and details (explicit) As a Store Owner, I should have the uploaded photograph and the vessel details presented on Landing and Gallery exactly as supplied, so that shoppers see the offered items.

• Trigger/input: the supplied photograph and its details being rendered.
• Observable result: the photograph appears as a lit rectangle on the warm black ground, uncropped through the vessels, with the "TOPACO" watermark and "99dt" overlay preserved, and the spec lists carry material, height, finish, and price.
• Access state: anonymous.
• Failure/recovery: if imagery fails to resolve, frames, names, and spec lists remain readable.
• Continuation: the Shopper inspects the presented items.

FR-8 — Preserve the source artefact (explicit) As a Store Owner, I should have the photograph never recoloured, never cropped through the vessels, and never overlaid with text, with the "TOPACO" watermark and "99dt" overlay intact, so that the source artefact is presented faithfully.

• Trigger/input: any rendering of the photograph.
• Observable result: the photograph is whole and untouched at 375px, 768px, and 1280px.
• Access state: anonymous.
• Failure/recovery: if a layout would crop through the vessels, the photograph is kept whole and the gesture is carried by decoration instead.
• Continuation: presentation continues unchanged.

FR-9 — Bilingual legibility (explicit) As a Shopper, I should read Arabic display type and Latin display type at equal dignity, never mixed inside one line, so that both scripts are legible at every viewport.

• Trigger/input: viewing any headline, wordmark, label, or body copy.
• Observable result: Arabic display uses Noto Kufi Arabic 700 at 1.15 line-height and 0.02em tracking; Latin display uses Playfair Display 700–900 at 0.92–1.0 leading and -0.02em tracking; both stay entirely inside the viewport and their container.
• Access state: anonymous.
• Failure/recovery: text wraps or scales via clamp() rather than overflowing or being covered.
• Continuation: reading continues.

FR-10 — Reduced-motion presentation (explicit) As a Shopper, I should receive instant, fully-visible content when prefers-reduced-motion is set, so that no choreography is required to read the page.

• Trigger/input: prefers-reduced-motion active.
• Observable result: mask-wipes, crossfades, and scroll reveals collapse to instant; the filter row wraps into two rows with every label whole.
• Access state: anonymous.
• Failure/recovery: not applicable; content is fully visible without motion.
• Continuation: reading and inspection continue.

4. User Personas

Shopper

Product context: a gift/collector shopper browsing on a phone, deciding whether these objects are treasure or trinket. The Shopper arrives anonymously, with no account and no prior relationship to the atelier.

Primary goal: identify the desired piece among the three gold-and-crystal lidded vessels.

Distinct accepted responsibilities: viewing the product presentation and selecting an item. The Shopper reads the monumental bilingual wordmark, inspects the photograph as a lit artefact, moves into the Gallery sequence, reads each plate's index numeral, Arabic name, and hairline spec list, hovers a specimen for its detail crop, and narrows the sequence with the filter row.

Relevant inputs or decisions: which of the three vessels matches the intended gift or collection; whether the material, height, finish, and price shown in the spec list suit the intent; which filter narrows the sequence usefully.

Interactions with other accepted participants: the Shopper is the audience for the Store Owner's presentation. The Shopper's inspection is the observable outcome the Store Owner's presentation serves.

Observable success: the Shopper has identified the desired piece and can name it from its plate.

Store Owner

Product context: the party who presents these decorative items to shoppers. The upload is a seller-style product photo carrying a price/stock-style overlay and a watermark, implying someone who offers the vessels.

Primary goal: shoppers see the offered items.

Distinct accepted responsibilities: presenting the product imagery and its details. The Store Owner's work is the supplied photograph and its attributes — the three vessels as one set, their material, height, finish, and price — rendered faithfully on Landing and Gallery, with the "TOPACO" watermark and "99dt" overlay preserved and the photograph never recoloured, cropped through, or overlaid with text.

Relevant inputs or decisions: the supplied photograph as the authoritative artefact; the vessel details that populate the spec lists.

Interactions with other accepted participants: the Store Owner presents to the Shopper, whose inspection is the outcome of that presentation.

Observable success: the offered items are visible to shoppers exactly as supplied, with the source artefact intact.

5. Core User Flows

Flow A — Shopper arrives and forms a first impression

1. The Shopper opens windy-project on a phone and lands on Landing anonymously, with no credential requested.
2. The hero wordmark "تصميم خر" reveals by a 24px upward mask-wipe over 700ms with cubic-bezier(0.16,1,0.3,1); the photograph then crossfades in from black over 900ms.
3. The Shopper reads the monumental Arabic wordmark, the gold small-caps "WINDY — OBJECTS" line beneath it, and the single line of Arabic body copy.
4. The Shopper sees the uploaded photograph as a lit rectangle on the warm black ground, full-bleed to the right and top edges, with a 1px bone hairline frame and a soft radial glow behind it; all three vessels are fully visible and uncropped.
5. The Shopper reads the gold hairline baseline rule spanning the viewport width: "01 — THREE VESSELS" at its left end, "GOLD · CRYSTAL · 99dt" at its right.
6. Failure/recovery: if the photograph does not resolve, the frame, wordmark, copy, rule, and both buttons remain fully readable; the image is retried on next load without layout change.
7. Continuation: the Shopper chooses between the two buttons.

Flow B — Shopper enters the collection and inspects the vessels

1. From Landing, the Shopper activates the solid vermilion rectangle button "استعرض المجموعة".
2. The Gallery sequence is presented: a sparse vertical sequence of full-width plates.
3. The Shopper scrolls; each plate fades and lifts 16px on scroll-into-view, staggered 80ms.
4. For each plate the Shopper reads the left-aligned gold index numeral (01/02/03), the Arabic name, and the hairline spec list in two-column label/value alignment covering material, height, finish, and price.
5. The Shopper hovers a specimen; its photograph crossfades to a second tighter crop over 500ms and its index numeral flips from gold to vermilion, with no scale, shadow, or bounce.
6. Failure/recovery: a plate whose image fails retains its frame, numeral, name, and spec list; if the detail crop does not resolve, the primary photograph remains displayed.
7. Continuation: the Shopper continues to the next plate or narrows the sequence.

Flow C — Shopper narrows the sequence with filters

1. From Gallery, the Shopper uses the single horizontal row of ghost-rectangle filters.
2. On mobile the row scrolls horizontally with scroll-snap; on desktop it is a single static row.
3. The Shopper selects a chip; the active chip is marked in vermilion and the sequence narrows to matching specimens.
4. Failure/recovery: if no specimen matches, the filter row remains operable and a gold small-caps notice states that no piece matches; clearing the filter restores the full sequence.
5. Continuation: the Shopper inspects a matching plate or clears the filter.

Flow D — Shopper views the three-vessel set

1. From Landing, the Shopper activates the ghost gold-bordered button "القطع الثلاث".
2. The three vessels are presented together as one collection.
3. Failure/recovery: if the presentation does not load, the Shopper remains on Landing with both buttons still operable.
4. Continuation: the Shopper moves into the Gallery sequence or returns to the Landing composition.

Flow E — Shopper reads under reduced motion

1. With prefers-reduced-motion active, the Shopper opens Landing.
2. All content is instant and fully visible: no mask-wipe, no crossfade, no scroll reveal.
3. In Gallery, plates appear fully visible without lift or stagger, and the filter row wraps into two rows with every label whole.
4. Continuation: the Shopper reads and inspects exactly as in Flows B and C.

Flow F — Store Owner presents the offered items

1. The Store Owner supplies the photograph of the three gold-and-crystal lidded vessels and their details.
2. On Landing, the photograph is rendered as a lit rectangle on the warm black ground, uncropped through the vessels, with the "TOPACO" watermark and "99dt" overlay preserved.
3. On Gallery, each vessel receives its plate with index numeral, Arabic name, and hairline spec list carrying material, height, finish, and price.
4. Failure/recovery: if imagery fails to resolve, frames, names, and spec lists remain readable.
5. Observable outcome: the Shopper sees the offered items exactly as supplied, and the source artefact remains whole and untouched at 375px, 768px, and 1280px.

6. Visuals Colors and Theme

The authoritative CREATIVE DIRECTION — Editorial swagger in gold on warm black, muse Tobias van Schneider — governs this section.

Headline: Editorial swagger in gold on warm black.

Mode: dark.

Colour tokens by role:

No white grounds anywhere except the product photograph itself, which sits as a lit rectangle inside the dark room.

Typography:

• Latin display: Playfair Display 700–900, tight leading 0.92–1.0, tracking -0.02em, sentence case at monumental sizes.
• Arabic display: Noto Kufi Arabic 700 at the same optical size, line-height 1.15, tracking 0.02em. The two scripts are never mixed inside one line.
• Latin body: Playfair Display 400 at 17px/1.7.
• Arabic body: Noto Kufi Arabic 400/500 at 17px/1.75.
• Small-caps Latin labels: 11px, letter-spacing 0.18em, gold — the only "chrome" type.
• Numerals: Playfair Display lining figures at 1.4× the label size.

Type scale: 1.5 modular display / 1.25 modular UI. Display 44px mobile → 96px tablet → 168px desktop (clamp(2.75rem, 12vw, 10.5rem)) for the hero wordmark; section titles 32 → 56 → 80px; product name 28 → 40 → 52px; body 17px flat; labels 11px. Arabic display uses the same clamp values with 1.15 line-height and 0.02em tracking.

Radius and shape language: sharp corners everywhere — zero border-radius on cards, buttons, images, and inputs. The only curves in the system are the products' own crystal domes. Rules are hairline 1px in rgba(244,241,234,0.14) or solid gold 1px when they carry hierarchy. Frames are full-bleed rectangles and hard-edged colour plates; no pills, no soft shadows, no glass. Buttons are solid vermilion rectangles with bone-white caps labels, or ghost rectangles with a 1px gold border. The one permitted softness is a very large, very soft radial vignette behind the hero photograph.

Spacing rhythm: asymmetric editorial grid — 12 columns desktop, 6 tablet, 4 mobile. Whitespace between sections is 96px mobile / 160px desktop.

Imagery style: the uploaded photograph is the hero artefact, treated as museum material — a lit rectangle on the warm black ground, never recoloured, never cropped through the vessels, with a subtle dark vignette and a 1px bone hairline frame. Supporting imagery is a second tighter crop of the same photo (dome and crystal detail) and, where a vessel needs its own plate, a monochrome-duotone crop in gold-on-black so the set reads as one collection. No stock people, no gradient blobs, no 3D primitives, no clip art; the only ornament is the photograph itself and the gold rules around it.

7. Signature Design Concept

The public entry is a dark gallery wall, not a SaaS hero.

The first screen is composed as an asymmetric editorial spread. The left column — about 42% width on desktop, full width on mobile — carries the bilingual monumental wordmark: "تصميم خر" set in Noto Kufi Arabic 700 at clamp(2.75rem, 12vw, 10.5rem) in bone-white, with "WINDY — OBJECTS" in Playfair Display 700 small-caps gold beneath it at 11px/0.18em. Below that, a single line of Arabic body copy, then one solid vermilion rectangle button, "استعرض المجموعة", and one ghost gold-bordered button, "القطع الثلاث".

The right column is the uploaded photograph, full-bleed to the right and top edges of the viewport, sitting on the black ground with a soft radial glow behind it, its vessels fully visible and uncropped at every breakpoint. A hairline gold rule runs the full viewport width beneath the composition, with "01 — THREE VESSELS" at its left end and "GOLD · CRYSTAL · 99dt" at its right in gold 11px caps.

The signature moves are: the bilingual monumental wordmark stacked Arabic-above-Latin, both flush left, reading as an editorial masthead rather than a logo lockup; the photograph framed as a lit artefact inside a warm-black room, full-bleed to the right edge with a hairline bone frame and soft internal glow; the gold hairline baseline rule that spans the entire viewport width and doubles as the page's running index, updating per section as you scroll; specimen plates with hard-cut zero-radius frames and oversized Playfair Display index numerals that flip from gold to vermilion on hover while the photograph crossfades to a detail crop; and a filter row of sharp ghost rectangles that scrolls horizontally with scroll-snap on mobile and becomes a single static row on desktop.

There is no centred stack, no subheadline paragraph, no blue, no gradient blob, no floating card.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

Focal subject: the uploaded photograph of the three gold-and-crystal lidded vessels, presented as a lit rectangle on the warm black ground.

Input → transformation → outcome thesis: on load, the hero wordmark reveals by a 24px upward mask-wipe over 700ms with a slow-out cubic-bezier(0.16,1,0.3,1); the photograph then crossfades in from black over 900ms. The outcome is a composed first frame in which the wordmark and the artefact are both fully present and readable.

Motion vocabulary: mask-wipes, crossfades, and scroll reveals only. No bounce, no scale, no continuous loop.

Composed first frame: the bilingual wordmark flush left at monumental scale, the gold small-caps Latin line beneath it, the Arabic body line, the two buttons, and the photograph full-bleed to the right and top edges with its hairline bone frame and soft radial glow — all on the warm black ground, with the gold baseline rule spanning the viewport width beneath.

Reduced-motion state: all choreography collapses to instant, fully-visible content; the filter row wraps into two rows with every label whole.

9. Non-Functional Requirements

NFR-1 — Readable text and needed content stay whole (explicit) Headlines, wordmarks, labels, numbers, item images, cards, 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, with no other element covering any part of them. Crops, bleeds, and off-edge placement are for decoration only: shapes, textures, rules, and background art. Rationale: the direction's full-bleed and asymmetric gestures must not carry readable content off an edge.

NFR-2 — Moving and scrollable content exception (explicit) Moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design, judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes. With prefers-reduced-motion it stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. Rationale: the Gallery filter row is natively scrollable with scroll-snap.

NFR-3 — Source artefact integrity (explicit) The uploaded photograph is never recoloured, never cropped through the vessels, and never overlaid with text. The "TOPACO" watermark and "99dt" overlay are preserved as part of the source artefact; no watermark removal or pixel tampering. Rationale: the photograph is the authoritative content source and the product's hero artefact.

NFR-4 — Bilingual typographic dignity (explicit) Arabic display type and Latin display type are set at equal optical scale and are never mixed inside one line. Arabic display uses Noto Kufi Arabic 700 at 1.15 line-height and 0.02em tracking; Latin display uses Playfair Display 700–900 at 0.92–1.0 leading and -0.02em tracking. Rationale: Arabic-first copy sits alongside Latin display type, and both scripts must carry equal dignity.

NFR-5 — Contrast (explicit) Muted brass-grey #8A8578 carries captions, timestamps, and disabled states at a contrast ratio above 4.5:1 on the black ground. Rationale: legibility of secondary text on the warm black ground.

NFR-6 — Reduced-motion compliance (explicit) All motion collapses to instant, fully-visible content under prefers-reduced-motion. Rationale: the direction's choreography must never gate reading.

NFR-7 — Palette prohibition (explicit) No blue or indigo primary or accent anywhere. The only hot colour is vermilion #E2452B and the only metal is gold #C9A227. The generic indigo/blue-on-white SaaS template is forbidden for this project. Rationale: the direction's emotional register is object-as-artefact, not friendly shop grid.

NFR-8 — Shape prohibition (explicit) No rounded cards, pill buttons, glass panels, frosted blur, or drop shadows. The system is sharp-edged and matte. Rationale: the direction's shape language is zero-radius throughout.

NFR-9 — Composition prohibition (explicit) No centred headline + subtext + button hero compositions, and no gradient-blob or particle backgrounds. No grids of identical hover-lift product cards; the gallery is a sparse vertical editorial sequence with unequal plates. Rationale: the direction's layout is asymmetric and editorial.

NFR-10 — Typeface prohibition (explicit) Inter, Roboto, Arial, Helvetica, Poppins, Lato, Open Sans, and system-ui are not used for any heading or body text. Rationale: the direction's typographic voice is Playfair Display and Noto Kufi Arabic.

NFR-11 — Motion prohibition (explicit) No decorative motion that bounces, scales, or loops continuously; motion is limited to mask-wipes, crossfades, and scroll reveals. Rationale: restrained tempo is the direction's stated register.

10. Tech Stack

• Frontend: React, delivered as a first-party custom web interface. (Default — not specified by user)
• Styling: CSS with custom properties for the colour tokens, clamp() for the type scale, and prefers-reduced-motion media queries. (Default — not specified by user)
• Fonts: Playfair Display and Noto Kufi Arabic, self-hosted or served as web fonts. (Default — not specified by user)
• Backend: Python/FastAPI serving the page content and the supplied photograph. (Default — not specified by user)
• Storage: static asset storage for the uploaded photograph and its derived crops. (Default — not specified by user)
• Containerization: Docker with docker-compose for local and single-host deployment. (Default — not specified by user)

No source-specified technology choices were stated by the user; the above are labeled defaults.

11. Assumptions and Constraints

Assumptions

• A-1: The uploaded photograph is the only product content available, and the three vessels are the complete collection. (required_inference)
• A-2: The "99dt" overlay is a price/stock-style marker and is preserved as part of the source artefact rather than interpreted as a separate data field. (required_inference)
• A-3: The spec list values (material, height, finish, price) are drawn from the supplied photograph and its overlay; no values beyond those verified in the Source Content Inventory are invented. (required_inference)
• A-4: Both accepted destinations are anonymously reachable, because the accepted behavior creates no durable actor-specific state, commitment, entitlement, or value transfer. (required_inference)

Constraints

• C-1: No explicit constraints were stated by the user. (explicit)
• C-2: No checkout, payment, cart, order, shipping, account, or inventory-management capability is accepted. (explicit)
• C-3: The photograph is never recoloured, cropped through the vessels, or overlaid with text; the "TOPACO" watermark and "99dt" overlay are preserved. (explicit)
• C-4: No blue or indigo primary or accent; the only hot colour is vermilion #E2452B and the only metal is gold #C9A227. (explicit)
• C-5: No rounded cards, pill buttons, glass panels, frosted blur, or drop shadows. (explicit)
• C-6: No centred headline + subtext + button hero compositions, and no gradient-blob or particle backgrounds. (explicit)
• C-7: Inter, Roboto, Arial, Helvetica, Poppins, Lato, Open Sans, and system-ui are not used for any heading or body text. (explicit)
• C-8: No decorative motion that bounces, scales, or loops continuously. (explicit)

12. Glossary

• Vessel: one of the three gold-and-crystal decorative lidded objects presented in the uploaded photograph.
• Plate: a full-width Gallery frame presenting one vessel with its index numeral, Arabic name, and hairline spec list.
• Spec list: the two-column label/value list on a plate covering material, height, finish, and price.
• Baseline rule: the gold hairline rule spanning the viewport width that doubles as the page's running index.
• Detail crop: the second, tighter crop of the uploaded photograph showing dome and crystal detail, revealed on hover.
• Source artefact: the uploaded photograph in its original state, including the "TOPACO" watermark and "99dt" overlay.
• Wordmark: the bilingual masthead composed of "تصميم خر" in Noto Kufi Arabic 700 with "WINDY — OBJECTS" in Playfair Display 700 small-caps gold beneath it.