System Requirements Document for steel-lps

1. Introduction

steel-lps is a catalog-design experience for the catalog designer preparing a visual presentation of LPS charms and accessories. The design must feature exactly five distinct real product models selected from the user-provided product photos, show their varied designs and decorations, and must not explain what “LPS” means.

The supplied photos are the authoritative source for the products. If a selected model is partly obscured or not fully visible, the missing portion may be completed visually only as needed, consistently with the visible product; the real product and its visible identity must not be replaced.

2. System Overview

The system provides an anonymous public entry and a focused design workspace. The catalog designer reviews the supplied product photos, selects exactly five real models, places them in the catalog design, and may complete visually obscured portions of those models. The resulting design presents the selected products and their adornments without explanatory LPS copy.

The two supplied images have distinct roles:

• The screenshot of the user’s design editor is the authoritative content source for the real product photos.
• The catalog reference image informs the presentation style and catalog context. Its illustrated products are not substitutes for the user’s real product photos, and its explanatory LPS text must not be reproduced.

There are no other accepted human participants or external/provider-owned responsibilities in the current scope.

2a. Product Interpretation and Delivery Boundary

The current product is a custom catalog-design experience, not a general-purpose catalog platform. Its accepted work is limited to making the supplied real product photos available in the design workspace, selecting exactly five real models, placing them in the design, and optionally completing portions that are not visible in the photos. The public entry introduces the design workspace; the design itself contains no explanation of what LPS means.

No account, publishing, ordering, inventory, or other adjacent workflow is specified.

2c. Page Content and Component Coverage

Landing

• Information and state: Anonymous entry introducing the catalog-design workspace and its purpose. It may use the approved editorial title “LPS charms”; it must not include an explanation or definition of LPS.
• Primary action: Continue to Diseño.
• Supporting content: A concise visual preview using the supplied real product imagery where available. Do not imply that a preview is the completed five-model selection unless it actually is.
• Components: Editorial heading, brief purpose statement, real-photo preview, and a clear link or button to the design workspace.
• States: Loading presents the entry content when ready; success is the visible entry and working navigation to Diseño. If the preview image cannot load, show a recoverable image-unavailable state without substituting stock or generated product imagery. The designer can continue to Diseño.

Diseño

• Information and state: The supplied product photos, the designer’s selection of exactly five distinct real models, their placement in the catalog composition, and any permitted visual completion of obscured portions. The design must communicate variety in product designs and adornments, not only a keychain format.
• Primary actions: Review the supplied photos; select exactly five real models from them; place those models in the design; optionally complete only portions of a selected model that are not fully visible.
• Supporting actions: Inspect the selected models and their visible details while composing the design. Do not add product explanations defining LPS.
• Domain entities: Supplied product photos; real product models visible in those photos; the five-model selection; catalog design; optional visual completion of obscured portions.
• Components: Photo review area; five-model selection and count; catalog composition showing the selected real products; labels or brief model descriptors where useful, without inventing product facts; optional completion treatment for obscured areas.
• States: Loading makes the supplied photos available. Empty or unavailable-photo state explains that the required source photos could not be loaded and provides a recovery path to retry or restore access to those supplied assets. Selection progress makes the current count clear; the design is not complete until exactly five distinct real models are selected and placed. Success is a catalog design containing exactly those five models. If a model is partly obscured, completion is limited to the unseen portion and must preserve the visible identity. If a photo or model cannot be identified or loaded, the designer can recover by reviewing the supplied photos again; do not silently replace it with generated, stock, or unrelated imagery. The designer can continue refining the accepted design in this workspace.

3. Functional Requirements

1. As a catalog designer, I should be able to open the public entry and continue to the design workspace.

   • Provenance: required_inference — the anonymous entry and navigation are specified in the Planning Scope as necessary to reach the accepted design work.
   • Lifecycle: The designer opens Landing, sees the catalog-design purpose, and chooses to continue to Diseño. The observable result is the design workspace. If the entry or navigation fails to load, the designer can retry; no protected or account-specific state is required.
   • Acceptance: Landing is anonymously reachable, introduces the design workspace, and contains no explanation of what LPS means.

2. As a catalog designer, I should be able to access the real product photos supplied for this request in the design workspace.

   • Provenance: required_inference — the photos must be available to make the explicitly requested selection and placement possible.
   • Lifecycle: On entering Diseño, the designer reviews the supplied product photos. The observable result is that the real product imagery is available for selection. If the photos fail to load, the workspace reports that the required source imagery is unavailable and allows recovery by retrying or restoring access to the supplied assets; it does not substitute generated, stock, or unrelated product images. The designer can continue once the source photos are available.
   • Acceptance: The workspace uses the user-provided product photos as the source for the design.

3. As a catalog designer, I should be able to select exactly five distinct real product models from the supplied photos and place them in the catalog design.

   • Provenance: explicit.
   • Lifecycle: In Diseño, the designer reviews the photos, chooses five distinct real models visible in them, and places those models in the composition. The observable result is a design containing exactly five selected models. If fewer or more than five are selected, the design is not complete; the designer can adjust the selection and continue. If a source image is unavailable or a model cannot be identified, the designer can return to the supplied photos and recover without substituting invented products.
   • Acceptance: The completed design shows exactly five distinct real models selected from the supplied photos. The products shown are not replaced by generated imagery, illustrations, stock photos, or unrelated products.

4. As a catalog designer, I should be able to present the selected models as varied LPS designs and adornments, not only as keychains.

   • Provenance: explicit.
   • Lifecycle: While composing the five-model design in Diseño, the designer presents the real models and their visible design details and adornments. The observable result is a selection that communicates product variety. If the composition hides important visible product details, the designer can adjust the presentation and continue. This requirement does not authorize inventing product features or replacing the real products.
   • Acceptance: The design presents the selected real models with their visible designs and adornments and does not reduce the selection to a keychain-only depiction.

5. As a catalog designer, I should be able to complete a selected model visually when the supplied photo does not show it completely.

   • Provenance: explicit.
   • Lifecycle: In Diseño, when a selected model is partly obscured or not fully visible, the designer may complete only the missing or obscured portion, using the visible product as the reference. The observable result retains the identity and visible details of the real model. If the missing portion cannot be completed consistently with what is visible, the designer can leave it uncompleted rather than alter the visible product or substitute another image.
   • Acceptance: Visual completion is optional, limited to portions not fully visible in the supplied photo, and consistent with the model’s visible identity.

6. As a catalog designer, I should be able to keep the design free of an explanation of what LPS means.

   • Provenance: explicit.
   • Lifecycle: Throughout composition in Diseño, the designer presents the catalog design without explanatory or encyclopedic LPS copy. The observable result is a product-focused design. If explanatory copy is introduced, it must be removed before the design is considered complete.
   • Acceptance: Neither the design nor its catalog copy explains what LPS is.

4. User Personas

Catálogo designer

• Provenance: explicit; the accepted active-human persona in the Planning Scope.
• Product context: Preparing designs for a catalog featuring the user’s LPS charms and accessories.
• Primary goal: Create a catalog design using five real product models from the supplied photos.
• Distinct responsibilities: Review the supplied product imagery, select exactly five distinct models, place them in the design, show their varied designs and adornments, and optionally complete portions that are not fully visible.
• Relevant inputs and decisions: The supplied product photos; which five distinct real models to select; whether a partly obscured model can be completed consistently with its visible details; how to compose the five products without explanatory LPS text.
• Interactions with other participants: None; no other accepted human participant is involved in this workflow.
• Observable success: A catalog design contains exactly five distinct real models from the supplied photos, presents their visible variety and adornments, preserves each model’s visible identity, and does not explain what LPS means.

5. Core User Flows

1. Enter the catalog-design workspace

1. The catalog designer opens Landing anonymously.
2. The designer sees a concise introduction to the catalog-design workspace, without an explanation of LPS.
3. The designer chooses to continue to Diseño.
4. Diseño opens. If navigation or content fails, the designer retries and continues when the workspace is available.

2. Select and compose the five real models

1. The catalog designer opens Diseño and reviews the supplied product photos.
2. If the photos are unavailable, the workspace reports the problem; the designer retries or restores access to the supplied assets. No generated, stock, or unrelated product imagery is substituted.
3. The designer identifies five distinct real models in the supplied photos.
4. The designer selects those five models. If the selection is not exactly five, the designer adjusts it before treating the design as complete.
5. The designer places the five selected models in the catalog composition and presents their visible designs and adornments, showing variety rather than only a keychain format.
6. If a selected model is partly obscured, the designer may complete only the unseen portion consistently with the visible product. If that cannot be done reliably, the designer leaves the obscured portion uncompleted rather than changing the model’s visible identity.
7. The designer checks that the composition contains exactly five real models, that important visible product details remain apparent, and that no text explains what LPS means.
8. The resulting design is the observable completion of this workflow. The designer can continue refining it in Diseño.

6. Visuals Colors and Theme

Muse: Tobias van Schneider. The visual direction is an editorial catalog for colorful, varied LPS charms and accessories, with authentic product photography at the forefront. The presentation should feel approachable and visual, not like a generic grid or SaaS landing page.

• Light-mode palette:
  • Background: #FFF9F7 — pink-tinted ivory.
  • Surface: #FFFFFF — photo frames and content surfaces.
  • Text: #35151D — high-contrast dark wine.
  • Primary: #E85D8D — warm vivid pink for headings, rules, and calls to action.
  • Accent: #F4B84A — sparing soft-yellow editorial details.
  • Muted: #D9C7C9 — subdued supporting details.
• Photography: Use the supplied real product photos as the required source. Select five distinct real models from them. Frame or crop the original photos without replacing the products with illustrations, renders, stock, or generated images. Do not recolor the photographed products. Keep important product details visible. If a model is partly obscured, only its unseen portion may be completed consistently with its visible identity.
• Typography: Bebas Neue for short, high-contrast editorial headings; Nunito for body copy, labels, and supporting text, with sufficient weight for readability.
• Type scale: Main headline clamp(52px, 10vw, 120px); section headings clamp(30px, 5vw, 56px); model names 18–22px; labels and supporting text 15–17px.
• Shape language: Softly rounded photo frames, fine pink rules, and rectangular editorial labels. Small line-drawn hearts or sparkles may decorate empty areas only; they must not cover products, text, or controls.

• Layout: Asymmetric editorial composition with one dominant product photo and four secondary photos of varied proportions. The five selected models must remain identifiable. At narrow widths, reflow into a vertical sequence or fluid two-column arrangement; keep all photos and labels visible and readable. Do not use five identical cards with shadows and hover elevation.
• Responsive readability: At 375px, 768px, and 1280px, keep readable text and controls fully within the viewport and their containers. Wrap or scale content to fit; no element may cover readable text or controls. Product imagery and decoration may bleed or crop only as directed, without hiding important product details.
• Motion: Restrained, brief transitions: staggered appearance of the five photographs and a fade between sections. No bounce or persistent decorative movement. With prefers-reduced-motion, show a usable static composition.

7. Signature Design Concept

Create an editorial first screen for Diseño: a large, left-aligned “LPS charms” headline in vivid pink sits above an asymmetric composition of exactly five real product models selected from the supplied photos. One photo is visually dominant; four secondary photos use varied proportions and white frames with fine pink rules. Place each brief model label outside the visible product area. Small line-drawn hearts and sparkles may annotate empty spaces, never covering a product, label, text, or control.

Use the real supplied product photos as the source, preserving the products’ photographed appearance. The composition should make the variety of designs and adornments apparent without explaining what LPS means. At narrow widths, reflow the five photos into a vertical sequence or fluid two-column layout so each model and label remains identifiable and readable.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The five real product models selected from the user-provided photos.
• Input → transformation → outcome: The catalog designer opens the design workspace; the five selected real models appear in a restrained staggered reveal; the outcome is a readable editorial composition of the selected products. Motion does not imply additional product behavior.
• Motion vocabulary: Brief, sober photo reveals and section fades; no bounce or persistent decorative movement.
• First frame: Pink editorial headline above the asymmetric five-photo composition on pink-tinted ivory, with the dominant photo and four secondary frames arranged so no image covers text or controls.
• Reduced-motion state: Present the same five-model composition statically, with all photos and labels usable and readable.

9. Non-Functional Requirements

1. Source-image fidelity

   • Provenance: explicit.
   • Use the real product photos supplied by the user as the source for the five selected models. Do not substitute generated images that do not represent the user’s products, stock photos, illustrations, or unrelated imagery.

2. Exact selection count

   • Provenance: explicit.
   • The catalog design’s selected product set contains exactly five distinct real models from the supplied photos.

3. Product identity during visual completion

   • Provenance: explicit.
   • If a model is not fully visible, visual completion is permitted only for the missing portion and must remain consistent with the visible model.

4. No LPS explanation

   • Provenance: explicit.
   • Do not include an explanation of what LPS means in the design.

5. Responsive readability

   • Provenance: explicit in the Creative Direction.
   • At 375px, 768px, and 1280px, readable text and controls remain whole and unobstructed. Reflow or scale them as needed. Product imagery may be cropped or bleed only as directed, and important product details must remain visible.

6. Reduced-motion usability
   • Provenance: explicit in the Creative Direction.
   • With prefers-reduced-motion, provide the composition as a usable static arrangement.

10. Tech Stack

• Frontend: React — [Default — not specified by user].
• Backend and storage: No server-side behavior or persistent storage is specified by the accepted requirements. Keep the supplied photos available to the design workspace; do not add a backend or persistence capability solely by convention.
• Deployment: Docker and docker-compose — [Default — not specified by user].

11. Assumptions and Constraints

• The screenshot identified as the authoritative content_source contains the real product photos to use for selecting the five models. The catalog reference image is a style and presentation reference, not a source of replacement product imagery.
• The exact five models are selected from the supplied photos during the design work; no specific model names or five-item list are provided in the source.
• If a selected model is partly obscured, completing the unseen portion is permitted but not required. Do not alter visible product details or invent a different product.
• The design must not explain what LPS means.
• The current scope does not specify accounts, publishing, ordering, inventory, or other adjacent workflows; they are not included as current requirements.

12. Glossary

• LPS: The product label used in the source request. The catalog design must not explain or define it.
• Real product model: A distinct product visible in the user-provided product photos.
• Visual completion: Optional visual completion of only the portion of a selected model that is not fully visible in its supplied photo, consistent with the visible product.