System Requirements Document for lps-llavero

1. Introduction

lps-llavero is a public-facing product catalog design featuring five real LPS charm models selected from the product photos supplied by Tayra Polar. The catalog must make the real products and their varied designs and adornments the focus, and must not explain what an LPS is.

The audience is people viewing the product catalog. The current scope is the catalog design and its five product presentations; it does not include product purchasing, ordering, or other commerce workflows.

2. System Overview

The system delivers one public catalog page. It presents five distinct real charm models selected from the supplied product-photo source. The photos are authoritative for product appearance: use the real photographed models and their visible adornments, and reconstruct only details that are genuinely obscured. Do not substitute generated, stock, or illustrative product imagery.

The accepted active-human persona is Catálogo de productos. This is a required-inference persona representing the catalog’s product-selection and presentation responsibility, not an additional human user or an account role. The catalog is publicly accessible without an application identity.

The supplied existing catalog artwork is a structure and visual-inspiration reference. Its explanatory copy and instructional section are not to be reproduced. The product-photo screenshot is the authoritative content source for selecting the five models. The current scope is limited to presenting those five models in the catalog; no future requirements were supplied.

2a. Product Interpretation and Delivery Boundary

The current delivery is a custom, public Catálogo page. It presents the five selected real products and their actual visible decorative details. If a selected charm is partly obscured, only its unseen portion may be completed consistently with visible evidence. The page does not explain what an LPS is.

The catalog is a presentation experience, not a product-management tool: no editing, product submission, purchasing, or account workflow is included in the accepted scope.

2b. Source Content Inventory

The authoritative content source is the user-provided product-photo screenshot:

• Source file: chat_media/f4133076-5fa5-4d08-9e47-3cd670e86530/83e584da_Screenshot_20261011_082938_com_canva_editor_EditorXV2Activity.jpg
• Source description: Screenshot of a catalog design in a mobile design editor, containing multiple photographs of real LPS charms and their adornments.
• Verified product content: The photos show multiple distinct animal-shaped charms, including pink, purple, turquoise, green, orange, yellow, and pale-colored figures, with varied beads, chains, rings, and other decorative attachments. Several photos show multiple charms together; some show individual charms more clearly.
• Selection requirement: Select five distinct real models from the supplied photos. The source does not provide verified product names or a definitive mapping of five named models to individual photos; do not invent names or product facts. Use concise, non-invented labels only if needed to distinguish the five selected models.
• Image handling: Use the supplied product photos as the source for all five models. Crop only photo backgrounds, never through a charm or its adornments. Complete only genuinely obscured portions, consistently with visible evidence.
• Other supplied image: chat_media/f4133076-5fa5-4d08-9e47-3cd670e86530/da285725_Guía_kawaii_de_charms_LPS.png is an existing catalog design reference for structure and visual inspiration, not an authoritative source for product imagery or product facts. Its explanatory text and instructional section are excluded from the updated design.

2c. Page Content and Component Coverage

Catálogo

• Information and state

  • Public catalog presentation of exactly five distinct real charm models selected from the supplied product photos.
  • Each model is shown with its actual visible design and adornments. Any completion of obscured details is limited to what is necessary to represent the photographed model and must follow visible evidence.
  • No explanation of what an LPS is; no instructional section about how charms are used.
  • Product names are not verified in the source. Do not invent names or other product details.

• Primary and supporting actions

  • The visitor views the five product presentations.
  • The catalog presentation selects and arranges the five models from the supplied photos; this is a design-time content responsibility, not a visitor-facing product-editing control.
  • No purchase, order, or product-management action is in scope.

• Domain entities

  • Five selected real charm models.
  • Supplied product photographs and visible adornments.
  • Catalog presentation and any minimal, non-invented labels needed to distinguish the models.

• Component responsibilities

  • A prominent catalog title and concise catalog subtitle.
  • A five-model product composition: one featured real product photo and four smaller, individually framed real product photos, arranged asymmetrically on wider screens and reflowed into a readable two-column or single-column sequence on narrower screens.
  • Soft-corner white photo frames against a warm blush page ground.
  • Compact, deep-berry product labels beneath images, kept whole and legible. Do not fabricate product names.
  • Sparse mango sparkle or heart accents placed only in empty space, away from products, labels, and controls.
  • No explanatory copy defining LPS and no instructional section.

• Loading, empty, success, error, and recovery states

  • Loading: Keep the catalog structure stable while the supplied product images load; do not replace them with generated, stock, or illustrative product art.
  • Empty: If the required source images are unavailable, do not present invented products as substitutes. The five-model catalog is incomplete until the real source imagery is available.
  • Success: The page displays exactly five distinct models from the supplied product photos, with their visible adornments and any permitted evidence-based completion.
  • Error and recovery: If a source image cannot be accessed or a selected model cannot be verified from the available photos, recover by restoring or resolving the supplied source asset and selecting a verifiable model from it. Do not silently substitute unrelated imagery or invent product details.
  • Responsive and reduced-motion states: Keep all five models and their labels readable at 375px, 768px, and 1280px. With reduced motion, show the complete static arrangement.

3. Functional Requirements

1. As a Catálogo de productos, I should select five distinct real charm models from the supplied product photos, so that the catalog presents the requested five real models.
   • Provenance: explicit
   • Trigger/input: The supplied product-photo screenshot.
   • Access: Public catalog presentation; no application identity is required.
   • Observable result: Exactly five distinct models from the supplied photos are selected for the catalog. The source does not verify product names, so names or other product facts must not be invented.
   • Failure and recovery: If the source photos are unavailable or do not allow a model to be verified, restore or resolve the supplied source imagery and select a verifiable model from it. Do not substitute generated, stock, or illustrative products.
   • Continuation: Present the selected models on the Catálogo page.
   • Acceptance: The catalog contains five distinct models traceable to the supplied product photos.

2. As a Catálogo de productos, I should present the five selected models using their real product photos and visible designs and adornments, so that the catalog reflects the products the user supplied.
   • Provenance: explicit
   • Trigger/input: The five selected models and their supplied product photos.
   • Access: Public catalog presentation; no application identity is required.
   • Observable result: Each selected model is represented using the supplied real product imagery, including its visible design and actual decorative beads or attachments. Images are not replaced with generated, stock, or illustrative product art.
   • Failure and recovery: If an image is missing or cannot be verified, resolve the supplied asset or select a verifiable model from the supplied photos; do not silently substitute unrelated imagery.
   • Continuation: Keep the five product presentations visible and legible on the Catálogo page.
   • Acceptance: All five displayed models come from the supplied product photos and retain their visible adornments.

3. As a Catálogo de productos, I should complete only genuinely obscured portions of a selected model when necessary, so that a partly obscured real product can still be represented without inventing unsupported details.
   • Provenance: explicit
   • Trigger/input: A selected model is partly obscured in the supplied photos.
   • Access: Public catalog presentation; no application identity is required.
   • Observable result: Only the unseen portion necessary to complete the representation is reconstructed, consistently with visible evidence. Visible product details remain authoritative.
   • Failure and recovery: If the obscured portion cannot be completed consistently with visible evidence, do not invent the detail; use a more clearly verifiable model from the supplied photos.
   • Continuation: Present the verified model in the five-model catalog.
   • Acceptance: Any completion is limited to genuinely obscured portions and is consistent with the supplied photos.

4. As a Catálogo de productos, I should omit any explanation of what an LPS is from the catalog design, so that the catalog focuses on the products rather than defining them.
   • Provenance: explicit
   • Trigger/input: Creation or update of the catalog content.
   • Access: Public catalog presentation; no application identity is required.
   • Observable result: The catalog contains no explanation or definition of what an LPS is.
   • Failure and recovery: Remove any such explanatory copy if it appears in the design.
   • Continuation: Keep the catalog focused on the five selected real models.
   • Acceptance: No LPS definition or explanation appears on the Catálogo page.

4. User Personas

Catálogo de productos

• Provenance: required_inference, as supplied in the Planning Scope contract.
• Product context: Represents the accepted responsibility to select and present the user’s real LPS charm products in the catalog. It is a catalog responsibility, not a claim that a separate human role or account exists.
• Primary goal: Present exactly five distinct real models from the supplied product photos, showing their actual designs and adornments.
• Distinct accepted responsibilities: Select five verifiable models; use the real product photos; complete only genuinely obscured details when supported by visible evidence; omit any explanation of what an LPS is.
• Relevant inputs and decisions: The supplied product photos; which five distinct models are verifiable; whether a partly obscured detail can be completed consistently with visible evidence.
• Interactions with other accepted participants: None. No other accepted human participant is involved in the catalog-selection and presentation lifecycle.
• Observable success: The public Catálogo page presents five distinct real models from the supplied photos, with visible adornments, no unsupported product details, and no LPS explanation.

5. Core User Flows

1. Select and present five real models

1. The Catálogo de productos starts with the supplied product-photo screenshot as the source.
2. It identifies five distinct models that can be verified in the photos.
3. If a selected model is partly obscured, it completes only the unseen portion necessary for representation and only when visible evidence supports that completion. If not, it selects a more clearly verifiable model from the supplied photos.
4. It places the five real models in the Catálogo page using their supplied product photos and visible adornments.
5. The public catalog visitor sees exactly five distinct real models. If a source image is unavailable, the catalog remains incomplete until the supplied asset is restored or a verifiable model is selected; no generated, stock, or unrelated image is substituted.

2. Keep the catalog focused on the products

1. The Catálogo de productos prepares the catalog content for the Catálogo page.
2. It omits any explanation of what an LPS is and does not reproduce the reference’s instructional section.
3. The public visitor sees the five product presentations without an LPS definition or explanation.

6. Visuals Colors and Theme

Muse: Karim Rashid. Headline: “Cinco charms reales, cada uno con su propio detalle.”

Use the supplied creative direction’s candy-bright, rounded visual language while keeping the real product photography authoritative. Preserve the affectionate pink mood of the existing catalog reference without copying its explanatory copy or instructional section.

• Light-mode color tokens

  • Page background: #FFF8F7 — warm blush paper.
  • Product-photo surface: #FFFFFF — white behind product photos.
  • Primary/title: #F45B91 — strawberry pink for titles and key rules.
  • Accent: #FFB547 — small mango decorative marks or labels.
  • Text: #4A1726 — deep berry for readable text.
  • Muted: #B98C9A — secondary text and subdued details.
  • Do not place small text directly on pink.

• Typography

  • Headings: Comfortaa, bold for short titles, friendly rounded forms, close but not cramped tracking.
  • Body: Nunito.
  • Responsive display title: 48px mobile to 88px desktop.
  • Section titles: 30–44px.
  • Product labels: 18–22px.
  • Supporting text: 16–18px with 1.45 line-height.
  • Micro-labels: 12–14px.

• Shape and layout

  • Use rounded capsules, soft-corner photo frames, and sparse hand-drawn hearts or sparkle marks.
  • Favor solid color and paper-like surfaces over glossy effects.
  • Use an asymmetric editorial arrangement: one larger featured real product photo and four smaller, individually framed real product photos.
  • Reflow into a readable two-column or single-column sequence at narrower widths.
  • Keep all five product images and labels fully readable at 375px, 768px, and 1280px.
  • Crop only photo backgrounds, never through a charm or its adornments. Do not crop or cover readable text or controls.
  • Decorative shapes must not overlap product details, labels, or controls.

• Imagery

  • Use only the supplied real product photos for the five selected models.
  • Choose distinct visible designs and their actual decorative beads or attachments.
  • Complete only genuinely obscured portions, consistently with visible evidence.
  • Do not use generated product art, unrelated stock imagery, or invented product details.

7. Signature Design Concept

Open the Catálogo page on a warm blush-pink canvas with a large, left-aligned strawberry-pink Comfortaa title and a short hand-drawn underline. Below it, arrange the five selected real product photos as the main event: one verified charm photo occupies roughly half the desktop hero as the featured image, with four smaller distinct product photos in a loose, balanced cluster. Frame each photo in soft-corner white and place its compact berry-colored label beneath it.

Use only the supplied product photos for the five models. Place sparse mango sparkle or heart marks in empty space, never over a charm, its adornments, labels, or controls. Keep the title and any concise catalog subtitle below or above the composition without overlaying products. At 375px, use a 48px title and reflow the five models into a clear vertical sequence with every image and label readable. Do not include an LPS explanation or instructional copy.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The five real charm models selected from the supplied product photos, with one featured charm and four supporting models.
• Input → transformation → outcome thesis: The catalog’s accepted content is the selection of five real models from the supplied photos; the page reveals that fixed five-model composition in sequence, ending with all five models and their labels visible. This presentation does not imply visitor product selection or editing.
• Motion vocabulary: Staggered, short spring-soft entrances and a subtle color shift on interactive product labels. Keep product photos steady and legible; do not animate or obscure product details.
• Composed first frame: Blush-pink catalog canvas, left-aligned strawberry-pink title and underline, with the featured real product photo and the four supporting real product photos arranged as the five-model composition.
• Reduced-motion state: Show the complete static arrangement, with all five models and labels readable. Do not require motion to reveal or access any product.

9. Non-Functional Requirements

1. Real-image fidelity

   • Provenance: explicit
   • Use the supplied real product photos for all five selected models. Do not substitute generated, stock, or illustrative product imagery.
   • Rationale: The user explicitly requires real products from the supplied photos.

2. Evidence-bounded reconstruction

   • Provenance: explicit
   • Complete only genuinely obscured portions, and only consistently with visible evidence. Do not invent product details that cannot be inferred from the photos.
   • Rationale: The user permits completion when a model is not fully visible, while the creative direction limits completion to obscured details supported by the photos.

3. Responsive readability

   • Provenance: explicit in the supplied creative direction.
   • Keep product images, names or labels, and controls fully within the viewport at 375px, 768px, and 1280px. Do not crop through a charm, its adornments, product labels, or readable text.
   • Rationale: The supplied direction specifies these viewport sizes and image-handling constraints.

4. Reduced motion

   • Provenance: explicit in the supplied creative direction.
   • With prefers-reduced-motion, provide a usable static arrangement showing the complete five-model composition.
   • Rationale: The supplied direction specifies a static reduced-motion state.

10. Tech Stack

• Frontend: React — [Default — not specified by user]
• Styling: CSS — [Default — not specified by user]
• Image delivery: Use the supplied product-photo assets; do not replace them with generated or unrelated imagery. — [Default — not specified by user]

11. Assumptions and Constraints

• The supplied product-photo screenshot is the authoritative source for selecting the five real models.
• The screenshot contains multiple product photos, but it does not provide verified product names or a definitive five-model selection. Do not invent names or product facts.
• The existing catalog artwork is a structure and visual-inspiration reference only. Its explanatory copy and instructional section are not part of the updated catalog.
• The catalog is public and requires no application identity, as specified by the supplied page and access contract.
• The current scope is the five-model catalog presentation. No future requirements were supplied.
• No purchase, ordering, product editing, or account-management capability is included.

12. Glossary

• LPS: The product term used by the user for the charms. The catalog must not explain or define it.
• Charm model: One distinct real product design selected from the supplied product photos.
• Product adornments: Visible decorative beads, chains, rings, and other attachments shown with a charm in the supplied photos.