System Requirements Document for hablumminallah-hablumminannas

1. Introduction

hablumminallah-hablumminannas is a personal keepsake tool that turns a user's own photograph into a finished design carrying the phrase "Hablumminallah wa Hablumminannas" as its heading, with the reflective sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." set directly beneath it.

The product intent is singular and craft-like: a person supplies one photograph, the tool composes that photograph together with the two requested texts into a design, the person sees the composed design in full before committing, and then downloads or saves the finished result. The heading sits above, the sentence sits below, and both are reproduced exactly as written in the source — including the source spelling "deiat" in the sentence.

The audience is everyday Indonesian users, family-oriented and mobile-first, who want to make one beautiful object from a personal photo — something to keep, to print, or to share with relatives. The tone is warm, humane, and reflective: a quiet act of remembrance and connection rather than a productivity utility.

2. System Overview

The current delivery is a small, self-contained first-party web experience with four ordered destinations: Landing, Upload Foto, Pratinjau Desain, and Unduh Desain. All four are application-owned custom pages and all four are reachable without an account (access_requirement: none). There is no sign-in, no profile, no saved library, and no server-side persistence of the user's photograph beyond what is needed to compose and deliver the design in the current session.

The single active human actor is Pembuat Desain Kata. That actor performs the whole accepted lifecycle: they arrive at the Landing page, understand what the tool does, provide a photograph on Upload Foto, review the composed design on Pratinjau Desain — where the photograph, the heading, and the sentence are all shown together in full — and then complete the work by downloading or saving the finished design on Unduh Desain.

The accepted behavior is narrow and complete:

• A user-supplied photograph is turned into a design.
• The design displays the heading "Hablumminallah wa Hablumminannas".
• Beneath the heading, the design displays the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." with the source spelling preserved.
• A photograph must be supplied before a design preview can be produced.
• The preview must show the photograph, the heading, and the sentence together and in full before the result is saved or downloaded.

Narrow exclusions. This document does not introduce account creation, authentication, user profiles, saved design libraries, design history, sharing to social platforms, template galleries, multi-photo collages, text editing of the two requested strings, payment, or any administrative surface. None of these are accepted by the source, and none are required to make the accepted lifecycle usable.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The entire accepted experience is delivered by this application as first-party custom UI. There is no provider-owned or external-owned surface in the current scope, and no headless or API-only delivery mode is accepted. The photograph the user supplies is processed to produce the design; the resulting design is delivered back to the user as a downloadable file.

Access ownership. Every accepted destination is anonymous. The source establishes no account, no login, no invitation, and no provisioning requirement, and the accepted lifecycle creates no durable, resumable, actor-specific state that would need to be bound to an identity. A user can complete the whole journey — upload, preview, download — in one sitting without ever identifying themselves. Accordingly, no identity establishment, verification, or session continuity is introduced, and no destination is protected.

Current versus future. Everything described in this document is current. The source contains no future-horizon requirements, no deferred capabilities, and no roadmap items. Anything not listed in Section 3 is out of scope for this generation.

Text fidelity boundary. The two strings are fixed product content, not user-editable fields. The heading is "Hablumminallah wa Hablumminannas". The sentence is "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." The spelling "deiat" is reproduced exactly as the source wrote it; it is not corrected, normalized, or silently replaced. Both strings are rendered in full and remain fully readable at every supported viewport — no part of either string may be cropped, clipped, covered, or pushed off an edge.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares content_source authority, so no source content inventory is produced.

2c. Page Content and Component Coverage

The page inventory below is the supplied versioned page contract, copied exactly and in order: Landing, Upload Foto, Pratinjau Desain, Unduh Desain. Each is application-owned, anonymously reachable, and serves the single accepted persona.

Landing

• Information and state. The anonymous public entry. It explains, before the user starts, that a photograph can be turned into a design carrying the heading "Hablumminallah wa Hablumminannas" with the reflective sentence beneath it. It carries no user data and holds no state beyond the initial reveal of the hero composition.
• Primary action. "Mulai dari fotomu" — a tomato pill CTA that begins the flow and leads to Upload Foto.
• Supporting actions. A quiet path to the same start point from the numbered three-step strip (01 Upload, 02 Susun, 03 Unduh), which sets expectations for what follows.
• Domain entities. None. The Landing page reads no user data and writes none.
• Component responsibilities.
  • Hero phrase block — the heading "Hablumminallah wa Hablumminannas" set as a three-line stacked display headline, flush left, with "Hablumminallah" in warm ink and "wa Hablumminannas" in mid-century tomato red. Rendered whole at every viewport.
  • Ochre hairline rule — a 1.5px gallery hanging line beneath the hero phrase.
  • Supporting sentence block — the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." in Literata at a 52ch measure, reproduced exactly as written.
  • Framed photo placeholder — a warm cream mat with a visible 1.5px ochre inner rule, carrying a hand-drawn arch and sun motif, rotated -3deg and bleeding off the right viewport edge. It is decoration and placeholder only; it is never a substitute for the user's own photograph and it covers no readable text or control.

• Numbered gallery strip — 01 / 02 / 03 in Jost uppercase with ochre hairline rules running the full column width, borrowed from exhibition wall labels.
• States.
  • Loading — the hero phrase reveals word by word over a slow 600ms ease-out on load.
  • Empty — the default state; no user data exists yet.
  • Success — the full hero composition is visible and the CTA is available.
  • Error — not applicable; the page performs no data operation.
  • Recovery — not applicable.
  • Reduced motion — the word-by-word reveal collapses to an instant, fully composed first frame.

Upload Foto

• Information and state. The place where the user provides the photograph that will become the design. It holds one piece of state: whether a usable photograph has been supplied. Until one has, no design preview can be produced.
• Primary action. Choose or drop a photograph into the upload well.
• Supporting actions. Replace the chosen photograph before continuing; continue to Pratinjau Desain once a photograph is present.
• Domain entities. Photograph — a single user-supplied image file. It is the sole input to the design.
• Component responsibilities.
  • Upload well — a single large paper-surface well, centered, with a dashed ochre border, sized generously on a 12-column grid with 24px gutters.
  • Tomato pill button — sits beneath the well, 2px ink outline with a 4px warm offset shadow, and opens the file chooser.
  • Selected-photograph confirmation — once a file is chosen, the well shows that a photograph is present and offers the way forward.
  • Guidance text — a short caption in warm taupe explaining that the photograph will be composed with the heading and the sentence.
• States.
  • Loading — a brief, quiet indication while the chosen file is read.
  • Empty — the well is empty and the way forward is unavailable; this is the default state.
  • Success — a photograph is present and the way forward to Pratinjau Desain is available.
  • Error — the chosen file cannot be read or is not a usable image; the well states this plainly and invites another choice.
  • Recovery — the user chooses a different photograph and the well returns to the success state.
  • Reduced motion — state changes are instant.

Pratinjau Desain

• Information and state. The composed design: the user's photograph together with the heading "Hablumminallah wa Hablumminannas" above it and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." beneath it. This page holds the authoritative composed state that the download will deliver. The preview must show all three elements together and in full before the result is saved or downloaded.
• Primary action. Continue to Unduh Desain once the composed design has been reviewed.
• Supporting actions. Return to Upload Foto to replace the photograph; re-read the exact sentence as written in the ruled control column.
• Domain entities. Composed design — the photograph plus the heading plus the sentence, arranged with the heading above and the sentence below. Heading text — the fixed string "Hablumminallah wa Hablumminannas". Sentence text — the fixed string "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita."
• Component responsibilities.
  • Poster frame — occupies 7 of 12 columns on the left of an asymmetric grid. The user's photograph sits inside a warm cream mat frame with a visible 1.5px ochre inner rule, straightened rather than rotated. The heading is set above the photograph and the sentence below it, both rendered whole and fully readable.
  • Ruled control column — occupies the narrower right side of the grid. Each label is Jost uppercase 11px and each value is Literata 17px, presented as ruled label/value pairs. The sentence the user requested sits in this column exactly as written, so the user can read it in full alongside the composed design.
  • Continue control — a tomato pill leading to Unduh Desain.

• Replace-photograph control — a quiet link back to Upload Foto.
• States.
  • Loading — a gentle 400ms crossfade as the uploaded photograph appears in the preview frame.
  • Empty — no photograph has been supplied; the page states that a photograph is required and points back to Upload Foto. No composed design is shown.
  • Success — the photograph, the heading, and the sentence are all visible together and in full.
  • Error — the photograph could not be composed into a design; the page states this plainly and offers the way back to Upload Foto.
  • Recovery — the user replaces the photograph and the preview recomposes.
  • Reduced motion — the crossfade collapses to an instant state change.

Unduh Desain

• Information and state. The completion surface. It presents the finished design — the same composed photograph, heading, and sentence — and delivers it as a file the user can keep or share.
• Primary action. Download or save the finished design.
• Supporting actions. A quiet "kembali" link returning to the preview.
• Domain entities. Finished design file — the downloadable artifact containing the photograph, the heading, and the sentence.
• Component responsibilities.
  • Centered framed poster — the finished design presented inside a warm mid-century frame with a visible cream mat, so the user sees exactly what they are about to receive.
  • Tomato download button — the primary completion control.
  • Quiet "kembali" link — returns to Pratinjau Desain.
• States.
  • Loading — a brief indication while the finished design file is prepared.
  • Empty — no composed design exists; the page states that a design must be composed first and points back to Upload Foto.
  • Success — the finished design file is delivered to the user.
  • Error — the file could not be prepared or delivered; the page states this plainly and offers to try again.
  • Recovery — retry the download, or return to Pratinjau Desain and continue from there.
  • Reduced motion — state changes are instant.

3. Functional Requirements

FR-1 — Turn a supplied photograph into a design

As a Pembuat Desain Kata I should have the photograph I supply turned into a design so that I end up with a finished keepsake object rather than a raw image.

• Provenance: explicit
• Actor: Pembuat Desain Kata
• Trigger / input: The user supplies a photograph on Upload Foto.
• Observable result / state change: A composed design exists that contains the user's photograph together with the heading and the sentence.
• Access state: Anonymous; no account required.
• Failure / recovery: If the supplied photograph cannot be composed into a design, the user is told plainly and can supply a different photograph.
• Continuation: The user proceeds to Pratinjau Desain to review the composed design.
• Acceptance: Given a supplied photograph, a composed design is produced that contains that photograph.

FR-2 — Display the heading "Hablumminallah wa Hablumminannas"

As a Pembuat Desain Kata I should see the words "Hablumminallah wa Hablumminannas" on the design so that the keepsake carries the phrase I asked for.

• Provenance: explicit
• Actor: Pembuat Desain Kata
• Trigger / input: A composed design exists.
• Observable result / state change: The design displays the heading "Hablumminallah wa Hablumminannas", set above the photograph.
• Access state: Anonymous; no account required.
• Failure / recovery: If the heading is not present or not fully readable, the design is not complete and the user is returned to the preview to resolve it.
• Continuation: The user reviews the heading in place on Pratinjau Desain.
• Acceptance: The exact string "Hablumminallah wa Hablumminannas" appears on the design, above the photograph, rendered whole and fully readable at 375px, 768px, and 1280px.

FR-3 — Display the sentence beneath the heading, with source spelling preserved

As a Pembuat Desain Kata I should see the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." directly beneath the heading so that the design carries the reflection I asked for, exactly as I wrote it.

• Provenance: explicit
• Actor: Pembuat Desain Kata
• Trigger / input: A composed design exists.
• Observable result / state change: The design displays the sentence beneath the heading, reproduced exactly as written in the source, including the spelling "deiat".
• Access state: Anonymous; no account required.
• Failure / recovery: If the sentence is not present, is altered, or is not fully readable, the design is not complete and the user is returned to the preview to resolve it.
• Continuation: The user reviews the sentence in place on Pratinjau Desain.
• Acceptance: The exact string "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." appears beneath the heading, unaltered, rendered whole and fully readable at 375px, 768px, and 1280px.

FR-4 — Require a photograph before a preview can be produced

As a Pembuat Desain Kata I should be asked to provide a photograph before any design preview appears so that I am never shown an incomplete or misleading design.

• Provenance: required_inference
• Actor: Pembuat Desain Kata
• Trigger / input: The user reaches Pratinjau Desain without having supplied a photograph.
• Observable result / state change: No composed design is shown; the page states that a photograph is required and points back to Upload Foto.
• Access state: Anonymous; no account required.
• Failure / recovery: The user supplies a photograph on Upload Foto and returns to the preview.
• Continuation: Once a photograph is present, the preview composes and the user continues to Unduh Desain.
• Acceptance: With no photograph supplied, no composed design is displayed and the way back to Upload Foto is available.

FR-5 — Show the photograph, the heading, and the sentence together and in full before saving or downloading

As a Pembuat Desain Kata I should see my photograph, the heading, and the sentence together and in full before I save or download anything so that I know exactly what I am about to keep.

• Provenance: required_inference
• Actor: Pembuat Desain Kata
• Trigger / input: A photograph has been supplied and a composed design exists.
• Observable result / state change: Pratinjau Desain shows the photograph, the heading above it, and the sentence beneath it, all together and all fully readable, before any save or download action is available.
• Access state: Anonymous; no account required.
• Failure / recovery: If any of the three elements is missing or not fully readable, the design is not presented as ready and the user can replace the photograph or return to the preview.
• Continuation: The user proceeds to Unduh Desain to complete the work.
• Acceptance: On Pratinjau Desain, all three elements are simultaneously visible and fully readable, and the download action is only reachable after this preview.

FR-6 — Download or save the finished design

As a Pembuat Desain Kata I should download or save the finished design so that I can keep it, print it, or share it with my family.

• Provenance: required_inference
• Actor: Pembuat Desain Kata
• Trigger / input: The user acts on the download control on Unduh Desain.
• Observable result / state change: The finished design file — containing the photograph, the heading, and the sentence — is delivered to the user.
• Access state: Anonymous; no account required.
• Failure / recovery: If the file cannot be prepared or delivered, the user is told plainly and can try again or return to Pratinjau Desain.
• Continuation: The user has the finished design and the accepted lifecycle is complete.
• Acceptance: The delivered file contains the user's photograph, the heading "Hablumminallah wa Hablumminannas", and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita."

4. User Personas

Pembuat Desain Kata

Product context. This person is an everyday Indonesian user, family-oriented and mobile-first, who has a personal photograph they care about and a phrase they want carried with it. They are not a designer and are not looking for a design tool; they are looking to make one warm, finished object — something to keep on a wall, to print, or to send to relatives. They arrive with the photograph already in mind and with the two texts already decided.

Primary goal. To end up with a finished design that shows their own photograph together with the heading "Hablumminallah wa Hablumminannas" above it and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." beneath it — both texts complete and readable, and the whole thing downloadable.

Distinct accepted responsibilities. This persona carries the entire accepted lifecycle and is the only active human actor in the product:

• Understanding, from the Landing page, what the tool will produce before starting.
• Supplying the photograph that becomes the design.
• Reviewing the composed design and confirming that the photograph, the heading, and the sentence are all present and fully readable.
• Completing the work by downloading or saving the finished design.
• Recovering when something goes wrong — replacing a photograph that cannot be used, or retrying a download that did not complete.

Relevant inputs and decisions. The photograph is the persona's only input. Their decisions are: whether the photograph they chose is the one they want; whether the composed design shows the heading and the sentence correctly and in full; and whether to keep the result or go back and replace the photograph.

Interactions with other accepted participants. There are none. This persona is the sole active human actor; no other human participant is affected by, awaits, or acts on the outcome. The work is personal and self-contained.

Observable success. The persona holds a finished design file in which their photograph, the heading "Hablumminallah wa Hablumminannas", and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." all appear together, complete, and readable.

What makes this role's work different. The work is not configuration, administration, or collaboration — it is a single act of making one keepsake. The persona's judgment is aesthetic and personal rather than operational: the only thing that matters is whether the finished object looks right and reads right. That is why the preview must be complete before anything is saved, and why the two texts are fixed content rather than fields to be edited.

5. Core User Flows

Flow 1 — Make a keepsake design from a photograph

Starting context. The persona is on the Landing page, anonymously, with a photograph they want to use.

1. The persona arrives at Landing. The hero phrase "Hablumminallah wa Hablumminannas" reveals word by word, with "Hablumminallah" in warm ink and "wa Hablumminannas" in mid-century tomato red, and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." sits beneath an ochre hairline rule. The numbered gallery strip shows 01 Upload, 02 Susun, 03 Unduh.
2. The persona reads the page and understands that their photograph will be turned into a design carrying that heading and that sentence.
3. The persona acts on the tomato pill CTA "Mulai dari fotomu" and moves to Upload Foto.
4. On Upload Foto, the persona chooses a photograph through the tomato pill button beneath the large paper-surface well. The well confirms that a photograph is present.
5. The persona continues to Pratinjau Desain. The uploaded photograph crossfades into the poster frame over a gentle 400ms.
6. On Pratinjau Desain, the persona sees the composed design: their photograph inside a warm cream mat frame with a visible 1.5px ochre inner rule, the heading "Hablumminallah wa Hablumminannas" above it, and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." beneath it. The same sentence also sits in the ruled control column on the right, exactly as written.
7. The persona confirms that the photograph, the heading, and the sentence are all present and fully readable.
8. The persona continues to Unduh Desain, where the finished design is presented inside a centered warm mid-century frame.
9. The persona acts on the tomato download button. The finished design file is delivered.
10. Next step. The persona keeps, prints, or shares the finished design. The accepted lifecycle is complete.

Failure and recovery. If the photograph chosen in step 4 cannot be read or is not a usable image, the well states this plainly and the persona chooses a different photograph, returning to step 4. If the persona reaches Pratinjau Desain without a photograph, no composed design is shown; the page states that a photograph is required and points back to Upload Foto, returning to step 4. If the download in step 9 cannot be prepared or delivered, the page states this plainly and the persona retries, or follows the quiet "kembali" link back to Pratinjau Desain and continues from step 8.

Flow 2 — Replace the photograph before finishing

Starting context. The persona is on Pratinjau Desain with a composed design they are not satisfied with.

1. The persona reviews the composed design and decides the photograph is not the one they want.
2. The persona uses the replace-photograph control and returns to Upload Foto.
3. The persona chooses a different photograph. The well confirms the new selection.
4. The persona returns to Pratinjau Desain. The new photograph crossfades into the poster frame, and the heading and the sentence are recomposed with it.
5. The persona confirms the new composition is correct and continues to Unduh Desain.
6. The persona downloads the finished design.

Failure and recovery. If the replacement photograph cannot be read, the well states this plainly and the persona chooses another, returning to step 3. If the persona abandons the replacement, the previously composed design remains available on Pratinjau Desain.

6. Visuals, Colors and Theme

The authoritative creative direction is warm mid-century modernism, with Charles & Ray Eames as the muse. The headline idea: honest materials, joyful colour inside order, and gallery-like sequencing — a keepsake poster maker should feel like craft and warmth, not like a cold utility. The product is fundamentally about making one beautiful object from a personal photo, which is exactly the Eames mode: a gallery wall of one.

Colour tokens — light mode

Proportion: 65% cream ground, 20% paper surface, 8% ink, 5% tomato, 2% ochre. No blues anywhere in the palette.

Typography

• Headings: Jost. Display headline at 600–700 weight, tight leading (0.95–1.05), slight negative tracking (-0.01em). The phrase "Hablumminallah wa Hablumminannas" is set in Jost 700, mixed case, with the two Arabic-derived terms given extra letter-spacing (0.04em) so they read as ceremonial. Subheads in Jost 500, uppercase, 0.12em tracking.
• Body: Literata.
• Scale: 1.333 modular — display 128px desktop / 56px mobile (clamp(3.5rem, 9vw, 8rem)); h1 64/36; h2 40/28; h3 28/22; body 18/17; caption 14/13; label 12/11 uppercase.

Shape language

Organic-modern mid-century geometry: generous 20–28px radii on cards and the upload well; pill buttons with a 2px ink outline and a solid tomato fill; capsule badges; thin 1.5px ochre rules that act as gallery hanging lines. No blobs, no glass, no neon glows. Hard-edged rectangular photo frames sit inside soft rounded containers — the contrast between the crisp photograph and the warm rounded frame is the signature.

Layout

A gallery-like vertical sequence on the warm cream ground, on a 12-column grid with 24px gutters and generous 80px section breathing room. Landing uses an asymmetric editorial hero with the oversized phrase stacked left and a rotated photo-frame mockup bleeding off the right edge, with a numbered three-step strip below separated by ochre rules. Upload Foto uses a single large paper-surface well, centered, with a dashed ochre border and a tomato pill button beneath. Pratinjau Desain uses a 2-column asymmetric grid — the finished poster in 7 of 12 columns, the ruled label/value control column on the right. Unduh Desain uses a centered framed poster with a tomato download button and a quiet "kembali" link.

Imagery

The user's own uploaded photograph is the hero image, always presented inside a warm mid-century frame with a visible cream mat. Supporting imagery is limited to flat mid-century spot illustrations: a simple hand-drawn camera, a stack of paper, and a small sun/arch motif in ochre and tomato. No stock photos, no 3D renders, no gradient blobs. The poster itself is the product image.

Readability constraint

Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, and no other element covers any part of them. The heading "Hablumminallah wa Hablumminannas" and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." are never cropped, clipped, covered, or run off an edge at any viewport. Where the direction asks for a bleed or a rotation, the gesture is carried by imagery and decoration instead.

7. Signature Design Concept

The gallery wall of one. The Landing page is composed as an exhibition wall rather than a centered SaaS hero. The left seven columns carry the phrase "Hablumminallah wa Hablumminannas" set in Jost 700 at clamp(3.5rem, 9vw, 8rem), stacked on three lines and flush left, with "Hablumminallah" in warm ink and "wa Hablumminannas" in mid-century tomato red — a typographic gesture that spans the viewport width. Beneath it, a 1.5px ochre rule acts as a gallery hanging line, and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." sits in Literata 18px at a 52ch measure. A small tomato pill CTA, "Mulai dari fotomu", is pinned beneath the sentence.

The right five columns hold a large warm-framed photo placeholder — a cream mat with a hand-drawn arch and sun motif — rotated -3deg and bleeding off the right viewport edge. It is decoration and placeholder only: it never covers the phrase, the sentence, or the CTA, and it is never mistaken for the user's own photograph. The background is the cream #F2E9D8 ground with a subtle paper grain. No gradient, no blue, no centered stack.

Below the hero, the numbered gallery strip — 01 Upload, 02 Susun, 03 Unduh — runs in Jost uppercase with ochre hairline rules across the full column width, borrowed from exhibition wall labels, and sets the sequence the user is about to walk through.

The concept recomposes only accepted content, states, and controls: the heading, the sentence, the start action, and the three-step sequence. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

The direction's tempo is restrained and film-like, and it is copied here rather than re-decided. The interaction model is Static because the direction explicitly rules out parallax and particle effects; the motion that remains is restrained, film-like reveal and crossfade work layered over a flat 2D composition.

Landing Hero Motion Brief

• Focal subject. The stacked display phrase "Hablumminallah wa Hablumminannas" on the left, with the warm-framed photo placeholder rotated -3deg and bleeding off the right edge.
• Input → transformation → outcome thesis. On load, the hero phrase reveals word by word over a slow 600ms ease-out; the ochre hairline rule and the supporting sentence settle into place beneath it; the framed placeholder holds its -3deg rotation. The outcome is a fully composed gallery wall in which the phrase, the sentence, and the start action are all readable and available.
• Motion vocabulary. A slow 600ms ease-out word-by-word reveal of the hero phrase; a gentle 400ms crossfade when the uploaded photograph appears in the preview frame; a soft 4px lift with a warm shadow on hover over the poster frame, with no bounce. No marquees, no parallax, no particle effects.
• Composed first frame. The phrase stacked on three lines, flush left, "Hablumminallah" in ink and "wa Hablumminannas" in tomato red; the ochre rule beneath it; the sentence in Literata at a 52ch measure; the tomato pill CTA "Mulai dari fotomu" pinned beneath the sentence; the rotated framed placeholder bleeding off the right edge; the cream ground with subtle paper grain.
• Reduced-motion state. All motion collapses to instant state changes. The hero appears fully composed on first paint, the uploaded photograph appears in the preview frame without a crossfade, and the hover lift is removed. The composition remains fully readable and every control remains available.

9. Non-Functional Requirements

• NFR-1 — Text fidelity. The heading "Hablumminallah wa Hablumminannas" and the sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita." are reproduced exactly as written in the source, including the spelling "deiat". Neither string is corrected, normalized, truncated, or paraphrased. Provenance: explicit. Rationale: the source specifies both strings verbatim.
• NFR-2 — Readability at every viewport. The heading, the sentence, all labels, and all controls remain entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no element covering any part of them. Provenance: explicit (creative direction). Rationale: the direction forbids cropping or covering either string at any viewport.
• NFR-3 — Palette integrity. No blue or indigo appears anywhere in the palette; the ground remains warm cream #F2E9D8 and never white or near-white #FFFFFF. Provenance: explicit (creative direction). Rationale: the direction names blue-on-white as forbidden for this project.
• NFR-4 — Typography integrity. Headings use Jost and body text uses Literata. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are not used for headings or body. Provenance: explicit (creative direction).
• NFR-5 — Reduced motion. With prefers-reduced-motion, all motion collapses to instant state changes and the composition remains fully usable and readable. Provenance: explicit (creative direction).
• NFR-6 — Anonymous access. Every accepted destination is reachable without an account, and no identity establishment or verification is introduced. Provenance: explicit (page contract access_requirement: none). Rationale: the accepted lifecycle creates no durable, resumable, actor-specific state that would need to be bound to an identity.

• NFR-7 — Photograph handling. The user's photograph is used only to compose and deliver the design within the current session. No saved library, history, or sharing surface is created. Provenance: required_inference. Rationale: the accepted lifecycle ends at download and the source accepts no persistence or sharing capability.

10. Tech Stack

• Frontend: React, delivered as a responsive web application. The accepted experience is a four-page anonymous flow with client-side composition of the photograph and the two fixed texts. Provenance: basic_default — not specified by user.
• Backend: Python with FastAPI, serving the application and preparing the finished design file for download. Provenance: basic_default — not specified by user.
• Storage: No durable storage of user photographs or designs is required by the accepted lifecycle; the photograph is held only for the duration of the session. Provenance: required_inference, consistent with NFR-7.
• Containerization: Docker with docker-compose for local and single-host deployment. Provenance: basic_default — not specified by user.
• Orchestration: Kubernetes is not required; the accepted delivery is a single small web application with no scaling or multi-service orchestration requirement. Provenance: basic_default — not specified by user.

11. Assumptions and Constraints

• A-1. The two strings are fixed product content, not user-editable fields. The user does not edit, restyle, or reposition the heading or the sentence. Provenance: required_inference, from the source's unqualified instruction to place these exact words.
• A-2. The source spelling "deiat" in the sentence is intentional and is preserved as written. Provenance: explicit.
• A-3. The user supplies exactly one photograph per design. Multi-photo composition is not accepted. Provenance: required_inference, from the source's singular "foto".
• A-4. The heading is placed above the photograph and the sentence beneath it, as the source states ("dibawah dengan kata ..."). Provenance: explicit.
• A-5. The finished design is delivered as a downloadable file. Provenance: required_inference, from the accepted completion of the lifecycle at Unduh Desain.
• A-6. No account, profile, saved library, design history, social sharing, template gallery, payment, or administrative surface is in scope. Provenance: explicit exclusion by omission — none of these are accepted by the source.
• A-7. The product is delivered as first-party custom UI; no provider-owned, external-owned, or headless surface is accepted. Provenance: explicit (delivery shape custom_ui: true).
• A-8. The four destinations — Landing, Upload Foto, Pratinjau Desain, Unduh Desain — are the complete and ordered page contract. No page is added, removed, merged, split, renamed, or reordered. Provenance: explicit (page contract version 1).
• A-9. The single active human persona is Pembuat Desain Kata. No additional persona is created. Provenance: explicit (closed persona catalog).
• A-10. The creative direction is authoritative for palette, typography, shape, layout, imagery, and motion, and is not overridden by any later user instruction. Provenance: explicit.

12. Glossary

• Hablumminallah wa Hablumminannas — The fixed heading displayed on the design, set above the photograph. Reproduced exactly as written.
• Kalimat penjelas / supporting sentence — The fixed sentence "Bila dekat dengan manusia saja bisa memudahkan segala hal, apalagi deiat sama Allah yang Maha Menguasai setiap detik kehidupan kita.", displayed beneath the heading. Reproduced exactly as written, including the spelling "deiat".
• Pembuat Desain Kata — The single active human persona: the user who supplies a photograph and produces a finished design carrying the heading and the sentence.
• Composed design — The photograph together with the heading above it and the sentence beneath it, as shown on Pratinjau Desain and delivered on Unduh Desain.
• Finished design file — The downloadable artifact produced on Unduh Desain, containing the photograph, the heading, and the sentence.
• Upload well — The large paper-surface drop/choose area on Upload Foto where the user supplies their photograph.
• Poster frame — The warm cream mat frame with a visible 1.5px ochre inner rule in which the user's photograph is presented, rotated -3deg on Landing and straightened on Pratinjau Desain.
• Gallery strip — The numbered 01 / 02 / 03 sequence in Jost uppercase with ochre hairline rules, used as a section transition device.