System Requirements Document for dola-ai

1. Introduction

dola-ai is a single-purpose image-editing experience for an Image Owner who wants the “Dola AI” text removed from the bottom-right corner of a supplied image. The edit must preserve all other logos and fill the cleared area with a plain black background. The user asked for the work to be done promptly.

The product audience for the current scope is the Image Owner. The supplied image is a black-and-gold “Tampil Berani TV” logo artwork with a “Dola AI” mark at the bottom right. The requested edit applies to that mark only.

2. System Overview

The current delivery is a custom, two-page experience: an anonymous Landing page and an Editor page. The Image Owner can proceed to the Editor, provide the source image, and receive the edited result. No account or sign-in is required by the supplied access contract.

The accepted work is limited to removing the specified “Dola AI” text, preserving every other logo, filling the cleared area with plain black, and delivering the result promptly. The image owner is the only accepted human persona. No other participant, external provider, or future capability is specified.

2a. Product Interpretation and Delivery Boundary

The Landing page introduces the narrowly scoped image edit and provides a way to begin. The Editor owns the image submission, edit, and result delivery lifecycle. The Image Owner must provide the source image before editing can begin.

The supplied image is the factual reference for the requested edit. The visual reference is not a request to reproduce another website or to add unrelated imagery or product capabilities. The current product does not include general-purpose image editing, other watermark removal, account management, or additional image operations.

2c. Page Content and Component Coverage

Landing

• Information and state: Explain that the product removes only the “Dola AI” text in the bottom-right corner, preserves all other logos, and fills the cleared area with plain black. Provide an anonymous entry point to the Editor.
• Primary action: A single prominent action takes the Image Owner to the Editor.
• Supporting content: A visual preview may communicate the before/after result using the supplied image, without altering or obscuring its other logos. Do not add unrelated images or claims.
• Components: Product wordmark, concise task description, primary action, and optional before/after preview.
• States: Initial content is available without identity establishment. If the Editor cannot be reached, show a clear failure and a way to retry navigation. No user data is collected on this page.

Editor

• Information and state: Show the source image when provided, the requested edit state, and the resulting image when the edit is complete.
• Primary actions: Provide the source image; perform the specified removal; deliver the edited result to the Image Owner.
• Editing responsibilities: Remove only the “Dola AI” text in the bottom-right corner. Preserve all other logos. Fill the removed area with plain black before delivering the result.
• Components: Source-image input, image canvas, editing workspace, progress indication, and result presentation. Any selection or mask used for the edit must target the specified bottom-right text and must not become a general-purpose editing tool.
• Loading and progress: Indicate when the image is being processed. The edit should be carried out promptly.
• Empty state: Before a source image is provided, explain that the Image Owner must provide the image before editing can begin.
• Success state: Present the edited image to the Image Owner and make clear that the requested text was removed, other logos were preserved, and the cleared area is plain black.
• Error and recovery: If no source image is available, do not begin editing; prompt the Image Owner to provide it. If processing fails or the result cannot be delivered, communicate that the edit is incomplete and allow the Image Owner to retry by providing the source image again. Do not present an incomplete edit as successful.

3. Functional Requirements

1. As an Image Owner, I should be able to understand the specific edit before starting.
   Provenance: required_inference
   Lifecycle: From the anonymous Landing page, the Image Owner sees that the requested operation removes only the “Dola AI” text in the bottom-right corner, preserves all other logos, and fills the cleared area with plain black. The Image Owner can continue to the Editor. If the Editor cannot be reached, the page communicates the failure and permits a retry.
   Acceptance: The Landing page communicates the bounded edit and provides access to the Editor without requiring an account.

2. As an Image Owner, I should be able to provide the source image containing the “Dola AI” text before editing begins.
   Provenance: required_inference
   Lifecycle: In the Editor, the Image Owner provides the source image. The workspace shows the supplied image as the input to the requested edit. If no image is provided, editing does not begin and the Image Owner is prompted to provide it. The Image Owner can continue once the source image is available.
   Acceptance: Editing cannot begin without the source image; the Image Owner can see that the image has been received for the requested edit.

3. As an Image Owner, I should have the “Dola AI” text in the bottom-right corner removed.
   Provenance: explicit
   Lifecycle: After the source image is available in the Editor, the system performs the requested removal. The Image Owner can observe processing and then see the edited result. If processing fails, the result is not represented as complete; the Image Owner can retry by providing the source image again and continue through the edit.
   Acceptance: The “Dola AI” text located in the bottom-right corner is removed. No other logo is targeted for removal.

4. As an Image Owner, I should have all other logos in the image kept intact and unmodified.
   Provenance: explicit
   Lifecycle: During the Editor’s image edit, all logos other than the specified “Dola AI” text remain intact and unmodified. The Image Owner sees the result before it is delivered. If the result does not preserve the other logos, it is not treated as a successful completion; the Image Owner can retry the edit from the source image.
   Acceptance: The delivered result retains all other logos intact and unmodified.

5. As an Image Owner, I should have the area where the “Dola AI” text was removed filled with a plain black background.
   Provenance: explicit
   Lifecycle: The Editor fills the cleared area with plain black as part of the edit, before delivering the result. The Image Owner sees the resulting image. If the fill is not plain black or the edit fails, the result is not treated as complete; the Image Owner can retry from the source image.
   Acceptance: The area left by the removed text is filled with a plain black background.

6. As an Image Owner, I should receive the edited result after the requested changes are complete.
   Provenance: required_inference
   Lifecycle: Once the specified text is removed, other logos are preserved, and the cleared area is filled with plain black, the Editor presents the result to the Image Owner. If delivery fails, the Editor communicates that failure and allows a retry from the source image.
   Acceptance: The Image Owner can observe the completed edited image; an incomplete or failed edit is not presented as successful.

7. As an Image Owner, I should have the requested edit carried out promptly.
   Provenance: explicit
   Lifecycle: After the Image Owner provides the source image, the Editor begins the requested edit without unnecessary delay and communicates progress until the result is available or an error is reported. On failure, the Image Owner can retry from the source image.
   Acceptance: The edit begins after the required source image is provided, and the Editor communicates completion or failure rather than leaving the Image Owner without an observable outcome.

4. User Personas

Image Owner

• Provenance: required_inference from the accepted Planning Scope.
• Product context: Owns the supplied image containing “Dola AI” text in the bottom-right corner and other logos that must remain intact.
• Primary goal: Have only the specified text removed, the cleared area filled with plain black, and the edited result delivered promptly.
• Responsibilities and decisions: Provides the source image before editing can begin and reviews the resulting image as the observable completion of the requested edit.
• Interactions with other participants: No other accepted human participant is involved.
• Observable success: Receives an edited image with the “Dola AI” text removed, all other logos intact and unmodified, and the cleared area filled with plain black.

5. Core User Flows

1. Understand and begin the requested edit

1. The Image Owner opens the anonymous Landing page.
2. The page explains that the edit removes only the “Dola AI” text in the bottom-right corner, preserves all other logos, and fills the cleared area with plain black.
3. The Image Owner chooses the action to begin and arrives at Editor.
4. If navigation fails, the Landing page communicates the failure and the Image Owner can retry.

2. Provide the source image and receive the edit

1. The Image Owner opens Editor. No account is required.
2. The Editor indicates that the source image must be provided before editing can begin.
3. The Image Owner provides the source image containing the “Dola AI” text.
4. The Editor shows the supplied image and begins processing promptly.
5. The Editor removes only the “Dola AI” text in the bottom-right corner, keeps all other logos intact and unmodified, and fills the cleared area with plain black.
6. The Editor presents the completed image to the Image Owner. The Image Owner can observe the result and continue from the delivered image.
7. If the source image is missing, the Editor does not begin and prompts the Image Owner to provide it.
8. If processing or delivery fails, the Editor communicates that the edit is incomplete. The Image Owner can retry by providing the source image again; a failed or incomplete result is not presented as successful.

6. Visuals Colors and Theme

The project-wide creative direction is authoritative for visual design. The newest uploaded image is optional visual context only; it does not replace the creative direction or authorize copying its layout or adding product scope.

• Muse and headline: Karim Rashid. Landing headline: “Hapus satu tulisan. Sisanya utuh.”
• Palette: Dark mode with background #0B0A0C, surface #17151A, text #F4F1F6, primary #FF3D9A, confirmation accent #C6FF3D, and metadata muted color #8B8694. Near-black covers approximately 70% of the screen and is also the required plain-black edit fill. Pink is reserved for primary actions, selection, and progress; it is not body text. Lime is reserved for confirmation, including the “logo intact” checkmark and done state.
• Typography: Unbounded, weight 500–700, for headings; tightly tracked at -0.02em, sentence case. Quicksand for body text, 16–18px at weight 500 and 1.65 line-height. Use the specified modular scale: 128 / 72 / 44 / 28 / 20 / 16 / 14. Hero display uses clamp(44px, 9vw, 128px). Labels use 14px Unbounded 500 with +0.06em tracking.
• Shape and surfaces: Full-pill buttons with 999px radius; panels with 32–40px radius and an inset gloss of 0 1px 0 rgba(255,255,255,0.08); a squircle canvas frame; organic lasso shapes rather than rectangular selection. Use curved section boundaries such as an SVG wave or large-radius arc. Avoid sharp corners, hairline grey card borders, and glassmorphism.
• Layout: Landing uses a full-bleed black stage, oversized curved headline on the left, a glossy pink capsule action beneath it, and a before/after squircle preview positioned to the right. Editor uses an asymmetric split: a centered canvas frame at approximately 64% width, a vertical capsule toolbar over its left edge, and a stacked result panel to the right. On tablet and mobile, the toolbar becomes a bottom pill dock and the result panel stacks beneath the canvas. Use a 12-column grid at 1280px, 6 columns at 768px, a single column at 375px, and 24px gutters.
• Imagery: The interface itself is the imagery. The creative direction specifies a sample photograph of a dark poster wall with several logos, including a “Dola AI” mark at bottom right, shown in a glossy squircle frame. Supporting visuals may use glossy pink and lime blobs or capsules as section punctuation and soft-touch black plastic texture behind the footer. Do not use stock people, device mockups, or decorative particles. The supplied “Tampil Berani TV” image is the source image for the requested edit; preserve its other logos.
• Responsive readability: At 375px, 768px, and 1280px, readable text and controls must remain entirely within the viewport and their containers. Wrap or scale content to fit; no other element may cover readable text or controls. Imagery and decoration may be cropped, bled off an edge, rotated, overlapped, or cut as directed, provided they do not cover readable text or controls.
• Avoid: Blue, indigo, violet accents, white or near-white grounds, the listed excluded font families (Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui), sharp 90-degree corners, generic centered SaaS hero stacks, gradient-blob heroes, identical hover-lift card grids, and any small “Dola AI” caption in the bottom-right corner of the page or canvas frame.

7. Signature Design Concept

The Landing page is a matte-black stage with the oversized, flush-left headline “Hapus satu tulisan. Sisanya utuh.” and a single glossy hot-pink capsule action directly beneath it. A tilted squircle preview of the supplied image occupies the right side, with a pink rim and soft pink glow. The preview communicates the accepted edit only: the specified bottom-right “Dola AI” text is removed, the cleared area is plain black, and every other logo remains intact. The image may bleed beyond the viewport edge, but readable text and controls remain fully visible.

The wordmark “dola” sits at the top left. Do not place a small “Dola AI” caption at the bottom-right of the page or canvas frame. A thin lime progress rule may sit along the bottom edge as a visual element, without implying unaccepted functionality.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The supplied black-and-gold “Tampil Berani TV” artwork in a glossy squircle frame, with the “Dola AI” mark visible in the before state and the requested black-filled removal shown in the after state.
• Input → transformation → outcome: The Image Owner begins the edit from the Landing page; the visual preview communicates the accepted transformation—remove only the specified text, preserve other logos, and fill the cleared area with plain black. The preview is illustrative and does not imply that the Landing page edits the image.
• Motion vocabulary: Liquid and soft. Panels rise into place over 420ms using cubic-bezier(0.22,1,0.36,1). Capsule hover adds a moving gloss highlight. The before/after squircle uses a pink wipe; the lasso blob stretches elastically during the edit; the erase action uses a pink wipe that dissolves into flat black; the done state lands with one gentle overshoot.
• Composed first frame: Matte-black stage, large left-aligned headline, pink capsule action below it, and the tilted image preview to the right. Keep all readable text and controls within the viewport. A thin lime rule may mark the bottom edge.
• Reduced motion: Provide a usable static arrangement. Do not rely on motion to reveal content or controls. Replace animated transitions with static before/after presentation or user-controlled scrolling where needed. Do not run continuous animation on the canvas while the user edits.

9. Non-Functional Requirements

1. Prompt execution — explicit: Once the source image is provided, begin the requested edit promptly.
2. Edit integrity — explicit: The edit must remove only the “Dola AI” text in the bottom-right corner; all other logos must remain intact and unmodified.
3. Fill integrity — explicit: Fill the area left by the removed text with a plain black background.
4. Responsive readability — explicit creative direction: At 375px, 768px, and 1280px, readable text and controls remain fully within the viewport and their containers. Imagery and decoration may be cropped or bleed as directed, but must not cover readable text or controls.
5. Reduced motion — explicit creative direction: With reduced motion enabled, provide a usable static arrangement; do not depend on animation to expose content or controls.
6. Canvas motion restraint — explicit creative direction: No particles, bouncing loops, or infinite animation on the canvas while the user edits.

10. Tech Stack

• Presentation and implementation technology: [Default — not specified by user] Use React for the custom web interface.
• Image processing implementation: [Default — not specified by user] Select an implementation capable of performing the specified removal, preserving other logos, and filling the cleared area with plain black. No image-processing technology was specified by the user.
• Storage and deployment: [Default — not specified by user] Use only storage and deployment infrastructure needed to deliver the accepted image-editing lifecycle. No specific storage or deployment technology was specified.

11. Assumptions and Constraints

• The supplied image is the source image for the requested edit.
• The requested removal is limited to the “Dola AI” text in the bottom-right corner; all other logos remain intact and unmodified.
• The cleared area is filled with a plain black background.
• The Image Owner provides the source image before editing begins.
• The Image Owner receives the completed result in the Editor.
• The supplied access contract specifies no identity requirement for Landing or Editor.
• The user requested prompt execution; no numeric processing-time target was specified.
• No future requirements were supplied.
• The visual reference image is optional visual context, not a content source or a request to reproduce its website or layout.

12. Glossary

• Image Owner: The accepted human persona who provides the source image and receives the requested edited result.
• Source image: The image containing the “Dola AI” text that the Image Owner provides for editing.
• Cleared area: The area where the specified “Dola AI” text was removed; it must be filled with plain black.
• Other logos: All logos in the source image except the specified “Dola AI” text; they must remain intact and unmodified.