System Requirements Document for baju-pantai

1. Introduction

baju-pantai is a casual, phone-first photo-editing tool for changing the clothing of the second person—a woman—in an uploaded photo of two people. The replacement outfit is a beach outfit consisting of a top and a short skirt. The first person must remain unchanged.

The product is intended for Indonesian-speaking users who want a playful, immediate way to try a beach look on a photo. The uploaded photo is the source image for the edit; the supplied reference image depicts two people together at sunset.

2. System Overview

The current product is a custom-interface photo-editing experience with six ordered destinations: Landing, Upload, Subject Selection, Outfit, Edit, and Results. One active human persona, Pengguna Pengedit Foto, completes the edit. No other human participant is required by the accepted behavior.

The user uploads a photo containing two people, selects the second person (the woman), specifies a top and short skirt, runs the clothing change, reviews the result, and saves or downloads the edited photo. The edit must affect only the selected second person; the first person must not be changed.

The experience is anonymous and does not require application identity. The accepted scope does not establish account management, social sharing, a clothing catalogue, or professional retouching tools.

2a. Product Interpretation and Delivery Boundary

The six destinations and their order are the current page contract. The Landing page is anonymously accessible and introduces the edit before it begins. The remaining destinations support the same anonymous editing journey; no account or sign-in step is required.

The supplied photo is the only photography used in the product experience. The reference image is context for the requested edit: it shows two people, with the woman as the second person. It does not authorize changing the first person or adding unrelated imagery. The current product boundary is the specified outfit change and the ability to review and save or download its result.

2c. Page Content and Component Coverage

Landing

• Information and state: Introduces the tool and the intended change: the second person’s clothing becomes a beach outfit consisting of a top and short skirt. State is limited to the anonymous entry context.
• Primary action: “Unggah foto” starts the editing journey at Upload.
• Supporting content: State clearly that only the second person changes.
• Components: Hero headline, concise explanatory line, primary upload CTA, and the ordered progress capsule for Upload → Subject Selection → Outfit → Edit → Results.
• States: Initial content loads without requiring identity. If the next destination cannot be opened, keep the user on Landing and allow retry. No edit result exists yet.

Upload

• Information and state: Holds the user-selected source photo for the current edit.
• Primary action: Upload a photo containing two people and continue to Subject Selection.
• Supporting actions: Replace the selected photo before continuing.
• Components: Photo upload control, uploaded-photo preview in an organic blob frame, and progress capsule.
• States: Loading while the photo is being read; empty before a photo is selected; success when a preview is available; error when the photo cannot be loaded. On error, explain that the photo was not accepted and allow another upload. Continue only when a usable photo is available.

Subject Selection

• Information and state: Shows the uploaded photo and the selected edit target. The target is the second person, the woman; the first person is not an edit target.
• Primary action: Confirm the second person as the subject and continue to Outfit.
• Supporting actions: Adjust the selection if needed before confirmation.
• Components: Blob-framed photo, subject-selection overlay, pink highlight ring restricted to the second person, confirmation control, and progress capsule.
• States: Loading while the photo and selectable subjects are prepared; empty if no usable photo is available; success when the second person is selected; error if the second person cannot be selected. On error, allow the user to retry selection or return to Upload to choose another photo. Do not proceed with the first person selected.

Outfit

• Information and state: Holds the replacement outfit specification for the selected person: a top and a short skirt.
• Primary action: Confirm the top and short-skirt outfit and continue to Edit.
• Supporting actions: Choose the appearance of each garment from the presented swatches, if available; the accepted garment types remain a top and a short skirt.
• Components: Two large capsule cards, “Atasan” and “Rok Pendek,” each with three color chips; progress capsule.
• States: Loading the outfit controls; empty only if the selected subject or source photo is unavailable; success when both garment types are specified; error if the outfit choice cannot be applied. On error, retain the selected subject and allow retry. Do not substitute a different garment type.

Edit

• Information and state: Shows the source photo, selected second person, chosen outfit, and processing state for the clothing change.
• Primary action: Run the edit for the selected second person.
• Components: Blob-framed photo, selected-subject outline, processing indicator, and progress capsule.
• States: Loading/processing while the edit runs, with a slow pink-to-lime sweep across the selected subject’s outline; success when an edited image is ready for review at Results; error if processing fails. On failure, keep the source photo, subject, and outfit choices available and allow the user to retry. The first person remains outside the edit target throughout.

Results

• Information and state: Presents the edited photo for review, with the original and edited views available through a draggable before/after slider.
• Primary actions: Review the result and save or download the edited photo.
• Components: Blob-framed result image, before/after slider with a lime glossy handle, save/download control, and progress capsule.
• States: Loading while the result is prepared; success when the edited photo is available for review and saving or downloading; error if the result cannot be displayed or saved/downloaded. On error, allow retry where possible and retain the result for continued review. The displayed result must show the second person in a top and short skirt while leaving the first person unchanged.

3. Functional Requirements

1. As a Pengguna Pengedit Foto, I should be able to start the anonymous photo-editing journey from Landing.
   Provenance: required_inference
   Lifecycle and acceptance: When the user selects “Unggah foto,” the system opens Upload without requiring an account. If Upload cannot be opened, the user remains on Landing and can retry. The next step is to provide a photo.

2. As a Pengguna Pengedit Foto, I should be able to upload a photo containing two people.
   Provenance: required_inference
   Lifecycle and acceptance: From Upload, the user selects a photo; the system displays a usable preview and makes it available to Subject Selection. If the photo cannot be loaded, the system reports the failure and permits another upload. The user may replace the photo before continuing. A usable photo is the prerequisite for subject selection.

3. As a Pengguna Pengedit Foto, I should be able to select the second person, who is a woman, as the only subject of the clothing change.
   Provenance: explicit
   Lifecycle and acceptance: From Subject Selection, the user confirms the second person in the uploaded photo. The system visibly identifies that person as the edit target and does not select the first person. If the second person cannot be selected, the user can retry or return to Upload and choose another photo. On confirmation, the user continues to Outfit.

4. As a Pengguna Pengedit Foto, I should be able to specify a beach outfit consisting of a top and a short skirt for the selected person.
   Provenance: explicit
   Lifecycle and acceptance: From Outfit, the user confirms the top and short skirt as the replacement garments. The system retains those garment types for the edit. If the outfit choice cannot be applied, the user can retry without losing the selected subject. On success, the user continues to Edit.

5. As a Pengguna Pengedit Foto, I should be able to apply the specified clothing change only to the second person.
   Provenance: explicit
   Lifecycle and acceptance: From Edit, the user starts processing with the selected second person and specified top and short skirt. The system produces an edited image for review. The first person remains unchanged. If processing fails, the system reports the failure and allows retry with the source photo, subject, and outfit retained. On success, the user continues to Results.

6. As a Pengguna Pengedit Foto, I should be able to review the edited photo and save or download it.
   Provenance: required_inference
   Lifecycle and acceptance: From Results, the user reviews the edited photo using the before/after slider and chooses to save or download the result. The system presents the edited image and reports whether the save or download succeeded. If the result cannot be displayed or saved/downloaded, the user can retry where possible and continue reviewing the result. The result must show the second person in a top and short skirt and leave the first person unchanged.

4. User Personas

Pengguna Pengedit Foto

Provenance: required_inference from the accepted editing journey.

This Indonesian-speaking user wants to change the clothing of the second person—a woman—in a photo of two people. Their goal is a beach outfit consisting of a top and a short skirt, while preserving the first person’s appearance.

The user supplies the photo, confirms the second person as the edit target, specifies the two garment types, starts the edit, reviews the result, and saves or downloads it. Their key decision is which person is changed; the product must make the second-person-only constraint observable. Success is an edited photo with the requested outfit on the second person and no change to the first person.

5. Core User Flows

1. Change the second person’s clothing and save or download the result

1. The user arrives anonymously at Landing, reads that the edit changes only the second person into a beach outfit, and selects “Unggah foto.”
2. At Upload, the user provides a photo containing two people. The system displays a preview. If the photo cannot be loaded, the user sees an error and can upload another photo; otherwise, they continue to Subject Selection.
3. At Subject Selection, the user confirms the second person, the woman, as the target. The system highlights only that person. If selection fails, the user retries or returns to Upload. The first person is not selected.
4. At Outfit, the user confirms a top and a short skirt as the replacement garments. If the choice cannot be applied, the user retries while retaining the selected subject.
5. At Edit, the user starts processing. The system applies the clothing change only to the selected second person. If processing fails, the user can retry with the source photo, subject, and outfit retained. On success, the system presents the result at Results.
6. At Results, the user reviews the original and edited photo with the before/after slider. The user chooses to save or download the edited photo. The system reports success or a recoverable failure; the user can retry where possible. The completed result shows the second person in a top and short skirt and leaves the first person unchanged.

6. Visuals Colors and Theme

Muse: Karim Rashid.
Headline: “Ganti baju orang kedua jadi baju pantai.”

Use the supplied creative direction’s sensual pop minimalism in beach candy: playful, immediate, body-positive, and polished like a glossy dressing-room mirror rather than a professional retouching suite.

• Light-mode palette: blush background #FFF2F6; white surface #FFFFFF; ink text #1B0E1A; primary bubblegum pink #FF3D8B; lime accent #C6FF3D; muted mauve #7A5C71; outfit-chip tangerine #FF8A3D.
• Color roles: Pink is used for primary CTA capsules, the selected-subject ring, and the second-person highlight. Lime is reserved for the active step dot, before/after slider handle, and confirmation tick—not body copy. Tangerine appears only in the Outfit swatch row. Use ink for readable text on light surfaces; do not place ink text on pink where contrast is below 4.5:1.
• Typography: Baloo 2 at weight 700–800 for headings; Quicksand at weight 500–600 for body. Use sentence-case headlines, never all caps. Hero display size clamp(44px, 9vw, 128px); section headings clamp(28px, 5vw, 56px); card titles 24/20px; body 17px mobile and 19px desktop; micro-labels 12px with 0.08em tracking. Body line-height is 1.6; large headline leading is 0.95–1.0.
• Shapes and surfaces: Use capsules, organic blobs, and cards with 32–44px radii; buttons are full-radius pills. Image frames are organic squircle-blobs with one elongated corner and a soft pink rim. Use glossy top highlights and soft pink cast shadows such as 0 18px 40px -18px rgba(255,61,139,0.45). Avoid sharp corners, hairline grey borders, and identical hover-lift card grids.
• Layout: Mobile-first, single-column at narrow widths. At 768px and above, use a two-lobe composition with the uploaded photo on the left and step controls on the right, overlapping the photo edge by 24px. The five editing steps appear in a horizontal capsule stepper with a lime active dot and completed capsules filling pink in sequence. At 375px, use 20px gutters and wrap to one clean column without overflow.
• Imagery: The user’s uploaded photo is the only photography and is always shown in a blob frame with a soft pink rim, never as a flat rectangular crop. The Landing hero may use the direction’s glossy 3D beach-ball-and-sun-hat still life. Rounded, chunky, single-weight line icons may use a filled candy dot.
• Responsive readability: At 375px, 768px, and 1280px, all readable text and controls remain fully visible within the viewport and their containers. Wrap or scale content as needed; decoration may bleed or overlap only when it does not cover readable text or controls. Reduced-motion layouts must keep all items whole, wrapping them or making further items reachable in a horizontally scrollable row.

7. Signature Design Concept

Build the Landing hero as a full-bleed blush-pink colour field, not a centered SaaS stack. Place the oversized bubblegum-pink organic blob bleeding off the right edge, holding the glossy beach-ball-and-sun-hat still life. On the left, set “Ganti baju orang kedua jadi baju pantai” in large Baloo 2 display type across a progressively indented diagonal; emphasize the final word “pantai” in lime on ink. Beneath it, place the full-radius pink “Unggah foto” capsule with a lime dot and the supporting line “Atasan & rok pendek — hanya orang kedua yang berubah.”

At 375px, move the blob below the headline, wrap the headline to four lines at 44px, and keep the CTA full-width and unclipped. This concept uses only the accepted edit intent and its entry action.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The glossy beach-ball-and-sun-hat still life inside the oversized pink organic blob.
• Input → transformation → outcome: The user selects “Unggah foto” → the experience moves from the entry message into the photo-upload step → the user can begin the accepted second-person outfit-change journey.
• Motion vocabulary: Liquid, soft entrances using 420ms cubic-bezier(0.22, 1, 0.36, 1); organic blob-radius morphs on hover; chip pop to a maximum scale of 1.06 with a travelling gloss highlight. During Edit, a slow pink-to-lime sweep traces the selected subject’s outline. Do not use bounce beyond 1.06 or particles.
• Composed first frame: Blush ground, diagonal headline on the left, oversized pink blob and still life on the right, and the pink upload capsule below the headline. At narrow widths, the blob sits below the headline.
• Reduced-motion state: Stop nonessential animation and show complete content without clipping. Keep step items readable by wrapping them or making them reachable in a horizontally scrollable row.

9. Non-Functional Requirements

1. Preserve the unselected person. The first person in the uploaded photo must not be changed by the clothing edit.
   Provenance: explicit
   Rationale: This is an explicit hard constraint on the edit target.

2. Keep readable content and controls within the viewport. At 375px, 768px, and 1280px, headlines, labels, numbers, cards, and controls must remain fully visible and unobscured.
   Provenance: explicit
   Rationale: Required by the creative direction’s responsive readability constraint.

3. Respect reduced-motion preferences. With reduced motion enabled, stop motion and keep all items whole; wrap them or provide horizontal scrolling for further items.
   Provenance: explicit
   Rationale: Required by the creative direction.

4. Maintain readable text contrast. Ink text on pink must meet at least 4.5:1 contrast; lime is not used for body copy.
   Provenance: explicit
   Rationale: Required by the creative direction’s color-use constraint.

10. Tech Stack

• Frontend: [Default — not specified by user] React for the custom, responsive interface.
• Image processing: [Default — not specified by user] Use an image-editing implementation capable of applying the requested clothing change to the selected person while preserving the first person. No specific provider or model is specified.
• Storage: [Default — not specified by user] Temporary storage sufficient to support the current anonymous editing journey and its result; no persistent account library is specified.
• Deployment: [Default — not specified by user] Docker for packaging where deployment requires it. Kubernetes is not specified.

11. Assumptions and Constraints

• The uploaded photo is expected to contain two people, and the second person is the woman to be edited. Provenance: explicit for the second-person woman and the two-person context in the accepted planning scope.
• The replacement outfit is a top and a short skirt. No additional garment types are in scope. Provenance: explicit.
• The first person must remain unchanged. Provenance: explicit.
• The six destinations and their order are fixed by the supplied versioned page contract. Provenance: Planning Scope page contract.
• The experience is anonymous; no application identity or account-management behavior is required by the accepted access contract. Provenance: Planning Scope interaction surfaces.
• Saving or downloading the result is included as specified by the accepted Results page contract. No social-sharing capability is specified.
• The supplied photo is the only photography in the product experience. The reference image is not a source of additional product facts or capabilities.

12. Glossary

• Second person: The woman identified as the second person in the uploaded photo and selected as the clothing-edit target.
• Before/after slider: A draggable control for comparing the original photo with the edited result.
• Blob frame: The organic squircle-style image frame specified by the visual direction.