System Requirements Document for red-girlfriend

1. Introduction

red-girlfriend is a private, single-recipient visual love object. One person — the creator — assembles a small, handmade-feeling web experience out of three things: photographs of the two of them, a love letter, and hidden messages that the recipient uncovers herself. The finished experience is then shared by a link with exactly one intended reader: his girlfriend.

The product intent is not utility. It is devotion made visible. The experience must read as something assembled by hand on a kitchen table — cut paper, ink, thread, tape, imperfection kept on purpose — and never as software. The audience is a single girlfriend opening a link on her phone, and the emotional register is sweet, tender, playful and a little secretive.

The audience for the creator-facing side is equally narrow: one boyfriend, working alone, who wants to put photographs, a letter and a few hidden lines into a shape he can hand over.

2. System Overview

red-girlfriend is a small web application with two faces:

• A creator-facing side where the boyfriend enrolls, signs in, and assembles the durable content of the experience — photographs, the letter, and hidden messages — inside a protected workspace.
• A recipient-facing side: a shared visual experience that the girlfriend opens from a link, containing the photographs, the love letter, and the hidden messages she reveals herself.

The creator's work is durable: it persists across sessions, so he can return, add a photograph, rewrite a line of the letter, or add another hidden message, and the shared experience reflects the current state of his assembly.

The recipient's side is deliberately open — she opens a link and experiences the content. She does not create an account, and she is not asked to sign in.

2a. Product Interpretation and Delivery Boundary

Current delivery. Everything in this document is current and in scope: the anonymous landing surface, creator self-service enrollment and returning verification, the protected creator workspace where photographs, the letter and hidden messages are assembled, and the shared recipient-facing visual experience.

Access ownership. The creator's workspace is application-owned and protected: the durable assembly belongs to one person and must remain bound to him across sessions, so the application establishes and verifies his identity. The landing surface, the enrollment and verification surfaces, and the shared visual experience are reachable without identity establishment — the girlfriend in particular must be able to open the shared link and experience everything without creating anything.

What this is not. red-girlfriend is not a social network, not a gallery for many recipients, not a messaging product, and not a general-purpose card maker. There is one creator and one intended recipient. No capability in this document should be read as extending the product to multiple recipients, public discovery, feeds, comments, reactions, or sharing beyond the single link the creator hands over.

Future. No future-horizon requirements were accepted. Anything not stated in this document is out of scope for the current generation.

2c. Page Content and Component Coverage

The page inventory below is the final, ordered page contract for this generation: Landing, Login, Sign Up, Creator Studio, Visual Experience.

Landing

• Purpose and information. The anonymous first impression. It explains, in the creator's own voice and in the direction's ink-poster register, that this is a personal visual experience made for one person — photographs, a letter, and hidden messages she gets to uncover.
• Primary action. A red underlined text link reading Start with the photographs that carries the visitor forward into the experience path. A secondary, quieter path leads a returning creator to Login and a new creator to Sign Up.
• Supporting actions. Navigation to Login; navigation to Sign Up.
• Domain entities. None owned here; the page is a presentation surface over the product's intent.
• Component responsibilities. Full-bleed ink hero composition carrying the recipient's name set as display type; a single red hairline rule beneath the name; one photograph in a paper mat pinned to the lower right; a mustard washi-tape strip crossing the mat corner; a single uppercase label-maker line reading FOR YOU — OPEN IT SLOWLY; the red underlined text link; a discreet creator entry affordance.
• States.
  • Loading: the hero composition renders as a composed first frame — ink field, name, rule — with the photograph mat arriving in its stop-motion frames.
  • Empty: not applicable; the landing surface always has its composed content.
  • Success: the visitor understands what this is and follows either the experience link or the creator entry.
  • Error / recovery: if the photograph asset fails to load, the mat renders as a paper mat with its hairline and shadow and no image, and every readable string and control remains whole and legible.
  • Reduced motion: the hero is presented as a static composed frame; the photograph mat is already in place; nothing is lost.

Login

• Purpose and information. Returning verification for the creator who already owns a durable assembly.
• Primary action. Submit the creator's credentials to regain access to Creator Studio.
• Supporting actions. Navigate to Sign Up if the visitor has not enrolled; return to Landing.
• Domain entities. Creator identity (email/identifier and secret).
• Component responsibilities. Credential fields; submit control; inline validation messaging; a link across to Sign Up.
• States.
  • Loading: submit control shows a pending state while verification is in flight.
  • Empty: fields render empty with labels visible.
  • Success: the creator is taken to Creator Studio with his assembly intact.
  • Error / recovery: unrecognized credentials produce a clear inline message and the fields remain editable so the creator can correct and resubmit; no partial access to protected state is granted.
  • Reduced motion: all state changes are instant.

Sign Up

• Purpose and information. Self-service enrollment so a creator can begin assembling his own personal visual experience.
• Primary action. Create the creator's identity and enter Creator Studio.
• Supporting actions. Navigate to Login if already enrolled; return to Landing.
• Domain entities. Creator identity (email/identifier and secret).
• Component responsibilities. Enrollment fields; submit control; inline validation messaging; a link across to Login.
• States.
  • Loading: submit control shows a pending state while enrollment is in flight.
  • Empty: fields render empty with labels visible.
  • Success: the creator lands in Creator Studio with an empty assembly ready to fill.
  • Error / recovery: an already-enrolled identifier or an invalid entry produces a clear inline message with a path to Login; the creator can correct and resubmit.
  • Reduced motion: all state changes are instant.

Creator Studio

• Purpose and information. The protected workspace where the creator assembles the durable content of the experience: the photographs, the love letter, and the hidden messages. It shows the current state of the assembly and the shareable path to the recipient.
• Primary action. Add, arrange and edit the photographs, write and edit the letter, and write and edit the hidden messages.
• Supporting actions. Remove or replace a photograph; reorder the photographs; edit or delete a hidden message; copy the shareable link to the visual experience; sign out.
• Domain entities. Photograph (image, caption/label, position in the scatter); Letter (salutation, body, dateline); Hidden message (message text, its place in the experience); the creator's assembly as a whole; the shareable link.
• Component responsibilities. Photograph assembly area presenting each photograph as a physical print on a paper mat with its rotation, hairline and hard offset shadow, plus its washi-tape corner; letter composition area presenting the letter as the one straight, centred paper sheet with its left ink rule, label-maker dateline and red wax-seal circle; hidden-message composition area listing each hidden message with its ink-covered presentation; share control that surfaces the link to the visual experience; sign-out control.
• States.
  • Loading: the workspace renders its sections with their current contents; each section shows its own pending state while its content arrives.

• Empty: with no photographs, the photograph area shows an empty paper ground with an invitation to add the first print; with no letter, the letter sheet shows an unwritten sheet with its dateline and seal; with no hidden messages, the hidden-message area shows an empty ink field with an invitation to write the first one. The share control is present but indicates the experience is not yet ready to share.
• Success: each addition, edit, removal or reorder is reflected immediately in the workspace and persists; the share control surfaces a link that opens the current assembly.
• Error / recovery: a failed upload or save reports the failure against the specific item, leaves the previously saved state intact, and offers a retry; a failed share-link retrieval reports the failure and offers a retry.
• Reduced motion: reveals and mat landings become instant state changes; nothing is lost.

Visual Experience

• Purpose and information. The shared, recipient-facing experience. It presents the photographs as scattered physical prints, the love letter as the one straight object on the page, and the hidden messages as ink-covered lines the recipient uncovers herself.
• Primary action. Reveal a hidden message by scratching off its ink layer — dragging on pointer devices, tapping on touch.
• Supporting actions. Move through the photographs; open the letter by pressing its wax seal; read the letter; continue through the experience.
• Domain entities. Photograph (image, caption/label, rotation, mat); Letter (salutation, body, dateline, seal); Hidden message (message text, ink layer, revealed state).
• Component responsibilities. Scattered photograph stack with overlapping mats, each rotated within its range and carrying its hairline, hard offset shadow and washi-tape corner; the centred letter sheet with its left ink rule, label-maker dateline and red wax-seal circle that folds the sheet open in stop-motion steps; the hidden-message scratch-off surface where an ink layer is erased in irregular hand-drawn patches and the revealed line settles in red; a one-frame Reveal button beside each scratch-off under reduced motion.
• States.
  • Loading: the experience composes its first frame — paper ground, the first prints arriving in their stop-motion frames — while the creator's content loads.
  • Empty: if the creator has not yet added photographs, the experience presents the letter and the hidden messages without a photograph stack; if a section has no content, that section is simply absent rather than showing a broken frame.

• Success: the recipient sees the photographs, opens and reads the letter, and reveals each hidden message, with each revealed line settling in red.
• Error / recovery: if the shared experience cannot be found or its content cannot be loaded, the recipient sees a plain, warm message on the paper ground explaining that the experience is not available, with no broken layout; a failed image renders as its paper mat with hairline and shadow so the composition stays whole.
• Reduced motion: every reveal becomes an instant state change and each scratch-off is accompanied by a Reveal button that swaps the ink layer out in one frame.

3. Functional Requirements

Creator — identity and access

FR-1. Creator self-service enrollment — provenance: required_inference As a creator (boyfriend), I should be able to create my own identity on the Sign Up page so that I can begin assembling a personal visual experience that belongs to me.

• Trigger/input: the creator opens Sign Up and submits an identifier and secret.
• Observable result: a creator identity exists and the creator is taken into Creator Studio with an empty assembly.
• Access state: Sign Up is reachable without prior identity establishment.
• Failure/recovery: an already-enrolled identifier or invalid entry produces a clear inline message with a path to Login; the creator can correct and resubmit.
• Continuation: the creator proceeds to assemble photographs, the letter and hidden messages.

FR-2. Creator returning verification — provenance: required_inference As a creator (boyfriend), I should be able to verify myself on the Login page so that I can return to the assembly I already made.

• Trigger/input: the creator opens Login and submits his credentials.
• Observable result: the creator regains access to Creator Studio with his previously assembled photographs, letter and hidden messages intact.
• Access state: Login is reachable without prior identity establishment; Creator Studio is protected and reachable only after verification.
• Failure/recovery: unrecognized credentials produce a clear inline message, the fields remain editable, and no protected state is exposed.
• Continuation: the creator resumes editing his assembly.

Creator — assembling the experience

FR-3. Add photographs to the experience — provenance: explicit As a creator (boyfriend), I should be able to add photographs of the two of us into my assembly so that the experience contains our real pictures.

• Trigger/input: in Creator Studio, the creator adds a photograph.
• Observable result: the photograph appears in the workspace as a physical print on a paper mat and becomes part of the shared experience.
• Access state: protected; requires the creator's verified identity.
• Failure/recovery: a failed upload reports the failure against that photograph, leaves the previously saved assembly intact, and offers a retry.
• Continuation: the creator adds more photographs, arranges them, or moves on to the letter.

FR-4. Arrange and label the photographs — provenance: explicit As a creator (boyfriend), I should be able to arrange the photographs and give them their labels so that the stack reads the way I want her to see it.

• Trigger/input: in Creator Studio, the creator reorders, removes or replaces a photograph and sets its caption/label.
• Observable result: the order, presence and labels of the photographs in the shared experience match the creator's current arrangement.
• Access state: protected; requires the creator's verified identity.
• Failure/recovery: a failed save reports the failure against the affected photograph and leaves the last saved arrangement intact.
• Continuation: the creator continues arranging or moves on.

FR-5. Write the love letter — provenance: explicit As a creator (boyfriend), I should be able to write a love letter into my assembly so that she receives a real letter, not a caption.

• Trigger/input: in Creator Studio, the creator writes the letter's salutation, body and dateline.
• Observable result: the letter is saved as part of the assembly and appears in the shared experience as the one straight, centred paper sheet with its left ink rule, label-maker dateline and red wax-seal circle.
• Access state: protected; requires the creator's verified identity.
• Failure/recovery: a failed save reports the failure and leaves the last saved letter intact, with a retry.
• Continuation: the creator edits the letter further or moves on to the hidden messages.

FR-6. Write hidden messages — provenance: explicit As a creator (boyfriend), I should be able to write hidden messages into my assembly so that she has something of mine to uncover.

• Trigger/input: in Creator Studio, the creator writes a hidden message and adds it to the assembly.
• Observable result: the hidden message is saved and appears in the shared experience as an ink-covered line awaiting her reveal.
• Access state: protected; requires the creator's verified identity.
• Failure/recovery: a failed save reports the failure against that message and leaves the previously saved messages intact, with a retry.
• Continuation: the creator adds more hidden messages, edits them, or shares the experience.

FR-7. Edit and remove hidden messages — provenance: explicit As a creator (boyfriend), I should be able to edit or remove a hidden message so that only the lines I mean to leave her remain.

• Trigger/input: in Creator Studio, the creator edits or deletes a hidden message.
• Observable result: the shared experience reflects the current set of hidden messages.
• Access state: protected; requires the creator's verified identity.
• Failure/recovery: a failed save or delete reports the failure and leaves the last saved set intact.
• Continuation: the creator continues editing or shares the experience.

FR-8. Share the assembled experience with the recipient — provenance: required_inference As a creator (boyfriend), I should be able to obtain a shareable path to my assembled experience so that I can give it to my girlfriend.

• Trigger/input: in Creator Studio, the creator uses the share control.
• Observable result: the creator receives a link that opens the current assembly as the Visual Experience.
• Access state: protected to obtain; the resulting Visual Experience is reachable by the recipient without identity establishment.
• Failure/recovery: a failed share-link retrieval reports the failure and offers a retry.
• Continuation: the creator hands the link to the recipient.

Recipient — experiencing the gift

FR-9. Open the shared experience — provenance: explicit As a girlfriend (recipient), I should be able to open the shared link and land in the experience so that I can see what he made for me.

• Trigger/input: the recipient opens the shared link.
• Observable result: the Visual Experience loads on her device with the photographs, the letter and the hidden messages.
• Access state: reachable without identity establishment; she is never asked to sign in or create anything.
• Failure/recovery: if the experience cannot be found or its content cannot be loaded, she sees a plain, warm message on the paper ground explaining that the experience is not available, with no broken layout.
• Continuation: she moves through the photographs.

FR-10. See the photographs — provenance: explicit As a girlfriend (recipient), I should be able to see our photographs presented as physical prints so that the experience feels like something he made by hand.

• Trigger/input: the recipient moves through the experience.
• Observable result: the photographs appear as scattered prints on paper mats, each rotated within its range, with its hairline, hard offset shadow and washi-tape corner, overlapping rather than sitting in a grid.
• Access state: no identity required.
• Failure/recovery: a photograph that fails to load renders as its paper mat with hairline and shadow so the composition stays whole.
• Continuation: she continues to the letter or the hidden messages.

FR-11. Open and read the letter — provenance: explicit As a girlfriend (recipient), I should be able to open the letter and read it so that I receive the words he wrote for me.

• Trigger/input: the recipient presses the red wax-seal circle on the letter sheet.
• Observable result: the sheet folds open in stop-motion steps and the letter's salutation, body and dateline are readable.
• Access state: no identity required.
• Failure/recovery: under reduced motion the sheet opens in a single instant state change; if the letter has not been written, the section is simply absent rather than showing a broken frame.
• Continuation: she continues to the hidden messages.

FR-12. Reveal a hidden message — provenance: explicit As a girlfriend (recipient), I should be able to uncover a hidden message myself so that discovering it is something I do, not something I am shown.

• Trigger/input: the recipient drags across the ink layer over a hidden message (or taps on touch).
• Observable result: the ink layer is erased in irregular, hand-drawn patches that grow with each pass, and the revealed line settles in red.
• Access state: no identity required.
• Failure/recovery: under reduced motion a Reveal button sits beside the scratch-off and swaps the ink layer out in one frame; nothing is lost.
• Continuation: she reveals the remaining hidden messages.

FR-13. Continue through the experience at her own pace — provenance: explicit As a girlfriend (recipient), I should be able to move through the photographs, the letter and the hidden messages in one continuous reading so that the experience reads as a single handmade object.

• Trigger/input: the recipient scrolls and interacts.
• Observable result: the sections follow one another on the paper ground, with the letter as the one straight, centred object and the photographs scattered around it.
• Access state: no identity required.
• Failure/recovery: any section without content is simply absent; the remaining sections still read as a whole.
• Continuation: she finishes the experience.

4. User Personas

Creator (boyfriend)

Product context. He is the one who asked for this. He is making a visual love object for exactly one person, working alone, on his own time, and he will come back to it more than once — to add a photograph he just found, to rewrite a line of the letter, to add one more hidden message he thought of at midnight.

Primary goal. A finished, shareable experience that delivers the personal message he intends, and that looks like he made it rather than like a template produced it.

Distinct accepted responsibilities. He enrolls himself and verifies himself on return (FR-1, FR-2). He adds photographs of the two of them (FR-3), arranges them and gives them their labels (FR-4). He writes the love letter (FR-5). He writes hidden messages (FR-6) and edits or removes them (FR-7). He obtains the shareable path and hands it over (FR-8).

Relevant inputs and decisions. Which photographs belong in the stack and in what order; what each photograph's label says; what the letter's salutation, body and dateline say; which lines become hidden messages and which are cut; when the assembly is finished enough to share.

Interactions with other accepted participants. He is the sole initiator of everything the recipient will see. His only handoff is the shareable link, and the quality of that handoff is entirely determined by what he assembled before he sent it.

Observable success. He can return to Creator Studio at any time and find his photographs, letter and hidden messages exactly as he left them; the share control gives him a link that opens the current assembly; the recipient opens it and finds what he meant her to find.

What makes this role different. His work is authoring and custody. He is the only participant with durable private state, the only one who edits, and the only one whose success is measured by what someone else experiences later.

Girlfriend (recipient)

Product context. She receives a link — probably on her phone, probably without warning — and opens it. She has no account, no instructions beyond what the page itself says, and no reason to expect software. What she finds is a page that looks like paper and ink, with her name on it.

Primary goal. To discover and enjoy the personal content made for her, including uncovering the hidden messages herself.

Distinct accepted responsibilities. She opens the shared experience (FR-9), sees the photographs (FR-10), opens the letter by pressing its wax seal and reads it (FR-11), scratches off the ink to reveal each hidden message (FR-12), and moves through the whole thing at her own pace (FR-13).

Relevant inputs and decisions. How long she lingers on each photograph; whether she opens the letter before or after the photographs; how thoroughly she scratches each ink layer; whether she reveals every hidden message or saves some.

Interactions with other accepted participants. She is the sole recipient of the creator's assembly. She never interacts with him inside the product — the product is the message, not the channel. Everything she sees was placed there by him, and her only response is her own experience of it.

Observable success. She sees their photographs as physical prints, reads the letter he wrote, and uncovers each hidden message, with each revealed line settling in red. Nothing asks her to sign in, and nothing is broken or clipped on her phone.

What makes this role different. Her work is discovery, not authoring. She has no durable private state, no editing surface, and no account — and the entire design of the experience exists to make her uncovering feel like a physical gesture rather than a UI interaction.

5. Core User Flows

Flow A — The creator enrolls and begins his assembly

1. Alvin opens Landing and reads the ink-poster hero: the recipient's name set across the full width, the red hairline rule beneath it, the single uppercase line FOR YOU — OPEN IT SLOWLY, and the red underlined link Start with the photographs.
2. He takes the discreet creator entry and arrives at Sign Up.
3. He submits an identifier and a secret.
4. Observable result: his creator identity exists and he lands in Creator Studio with an empty assembly — an empty paper ground where the photographs will go, an unwritten letter sheet with its dateline and seal, and an empty ink field for hidden messages.
5. Failure/recovery: if the identifier is already enrolled or the entry is invalid, he sees a clear inline message with a path to Login, corrects it, and resubmits.
6. Next step: he begins assembling (Flow B).

Flow B — The creator assembles the photographs, the letter and the hidden messages

1. In Creator Studio, Alvin adds a photograph of the two of them.
2. Observable result: the photograph appears as a physical print on a paper mat with its hairline, hard offset shadow and washi-tape corner, and becomes part of the shared experience.
3. He adds more photographs, reorders them into the scattered stack he wants, and sets each one's caption/label.
4. Failure/recovery: if an upload or save fails, the failure is reported against that specific photograph, the previously saved assembly stays intact, and he retries.
5. He moves to the letter and writes its salutation, body and dateline.
6. Observable result: the letter is saved and will appear in the shared experience as the one straight, centred paper sheet with its left ink rule, label-maker dateline and red wax-seal circle.
7. He moves to the hidden messages and writes the first one.
8. Observable result: the hidden message is saved and will appear in the shared experience as an ink-covered line awaiting her reveal.
9. He writes more hidden messages, edits the ones that aren't right, and removes the ones he doesn't mean to leave her.
10. Failure/recovery: a failed save or delete is reported against the affected item and the last saved set stays intact.
11. Next step: he shares the experience (Flow C).

Flow C — The creator shares the experience with her

1. In Creator Studio, Alvin uses the share control.
2. Observable result: he receives a link that opens his current assembly as the Visual Experience.
3. Failure/recovery: if the link cannot be retrieved, the failure is reported and he retries.
4. Next step: he sends the link to his girlfriend. This is the handoff — everything she will experience was fixed at the moment he sent it.

Flow D — The creator returns and revises

1. Alvin opens Login and submits his credentials.
2. Observable result: he regains access to Creator Studio with his photographs, letter and hidden messages exactly as he left them.
3. Failure/recovery: unrecognized credentials produce a clear inline message, the fields stay editable, and no protected state is exposed.
4. He adds a photograph, rewrites a line of the letter, or adds one more hidden message.
5. Observable result: the change persists and the shared experience reflects the current assembly the next time the link is opened.
6. Next step: he signs out, or shares the updated link.

Flow E — The recipient opens the experience

1. Alvin's girlfriend opens the link he sent, on her phone.
2. Observable result: the Visual Experience loads on the paper ground — the first prints arriving in their stop-motion frames — with no sign-in, no account prompt, and nothing asked of her.
3. Failure/recovery: if the experience cannot be found or its content cannot be loaded, she sees a plain, warm message on the paper ground explaining that the experience is not available, with no broken layout.
4. Next step: she moves into the photographs (Flow F).

Flow F — The recipient sees the photographs

1. She moves through the experience.
2. Observable result: their photographs appear as scattered physical prints — each on a paper mat, rotated within its range, with a 2px ink hairline, a hard offset shadow and a semi-transparent washi-tape corner — overlapping each other rather than sitting in a grid.
3. She lingers on a print; hovering nudges its mat 2px and rotates it 1°, a physical nudge rather than a card lift.
4. Failure/recovery: a photograph that fails to load renders as its paper mat with hairline and shadow, so the composition stays whole and nothing readable is clipped or covered.
5. Next step: she continues to the letter (Flow G) or straight to the hidden messages (Flow H).

Flow G — The recipient opens and reads the letter

1. She reaches the letter — the one perfectly straight, perfectly centred object on the page: a paper sheet with a 1px ink rule down its left edge, a label-maker dateline, and a red wax-seal circle at the bottom.
2. She presses the wax seal.
3. Observable result: the sheet folds open in three stop-motion steps and the letter's salutation, body and dateline are readable.
4. Failure/recovery: under reduced motion the sheet opens in a single instant state change; if the creator has not written a letter, the section is simply absent rather than showing a broken frame.
5. Next step: she continues to the hidden messages (Flow H).

Flow H — The recipient uncovers the hidden messages

1. She reaches a hidden message: a line of text covered by an ink layer.
2. She drags across the ink layer with her finger (or taps, on touch).
3. Observable result: the ink is erased in irregular, hand-drawn patches that grow with each pass, and the revealed line settles in red.
4. She keeps scratching until the line is fully uncovered, then moves to the next hidden message and does it again.
5. Failure/recovery: under reduced motion a Reveal button sits beside the scratch-off and swaps the ink layer out in one frame — nothing is lost.
6. Next step: she finishes the remaining messages and the experience.

Flow I — The recipient finishes the experience

1. She reaches the end of the paper ground.
2. Observable result: she has seen their photographs, read his letter, and uncovered every hidden message he left her — each revealed line in red.
3. Failure/recovery: any section the creator left empty is simply absent; the remaining sections still read as one continuous handmade object.
4. Next step: she can scroll back through the experience at her own pace, or close it. Nothing is asked of her and nothing is recorded about her.

6. Visuals Colors and Theme

Muse and headline. Stefan Sagmeister — handmade devotion. Type and image built from real physical material: cut paper, ink, thread, tape, with imperfection kept on purpose and wit as a material. This is a private, one-recipient love object, not a product and not a utility. It must look assembled on a kitchen table.

Palette (light mode).

Proportion. ~70% paper ground, ~20% ink, ~7% red, ~3% mustard. Red on paper is 5.4:1 and ink on paper is 15:1, so every readable string passes at body size.

Typography.

• Headings: Fraunces at high optical size with the SOFT and WONK axes pushed up, so display type has cut-paper curves and one deliberately wrong-looking letterform — it reads as hand-lettered, not set. Headlines are heavy (700–900), tight-tracked (-0.02em), sentence case, unquoted, allowed to break mid-word across lines and to sit at an angle of -3° to +3°.
• Body: Karla 400/500 at a generous 1.7 line-height, always flush left, ragged right, never justified.
• Labels: dates, captions and hidden-message labels are Karla 700 uppercase at 0.14em tracking, small — the label-maker voice.
• Scale: 1.333 modular on a 16px base — 16 / 21 / 28 / 38 / 50 / 67 / 89. Display sizes are fluid: hero name clamp(52px, 12vw, 148px); section headline clamp(34px, 7vw, 84px); letter salutation clamp(30px, 6vw, 60px); body 17–19px; captions 12–13px. Mobile floor is 52px for the hero — it never drops below half the desktop size.

Shape language. Hard edges, no rounded corners on structural elements — paper has corners. Radii appear only where a real object would have them: a stamp's perforated edge, a sticker's die-cut curve, a paperclip's arc. Photographs are never in neat frames: each sits on a #FFFDF8 mat rotated between -4° and +4°, with a 2px ink hairline and a hard offset shadow (6px 6px 0 #1B1714) so it reads as a physical print dropped on the page. Washi-tape strips in #E8B21F and #C8102E, semi-transparent, are the only "soft" element and always overlap a mat corner.

Layout. A single-column reading measure of 62ch, centred on the paper ground, with asymmetric interruptions: every third section is pushed off-centre by 6–14% and rotated 1–2°, so the page never settles into a template rhythm. The hero is a full-bleed ink composition, not a boxed banner. Photos are placed as a scattered stack rather than a grid — two or three per viewport, overlapping by 20–40px, each at its own rotation. The letter is the one perfectly straight, perfectly centred object on the page: a #FFFDF8 sheet with 32px padding, a 1px ink rule down its left edge, and a red wax-seal circle at the bottom. At 375px the scatter collapses to a single vertical stack with rotations clamped to ±1.5° and no overlaps; at 768px two photos may overlap; at 1280px the full asymmetric scatter returns. Every headline, caption, photo label and control stays wholly inside its container at all three widths, wrapping rather than clipping.

Imagery. Real photographs of the two of them, treated as physical prints: warm, slightly grainy, with a paper-texture overlay at 6% and a soft vignette. No stock people, no illustrated characters, no 3D renders. Supporting imagery is genuinely handmade — ink fingerprints as bullet points, torn-paper section dividers, a hand-drawn arrow in #C8102E pointing from a caption to a photo, a pressed-flower scan, halftone dots at 40% where a photo bleeds off the edge. Where a photo bleeds off the page edge it carries only decoration; no readable text or control is ever cropped or overlapped.

Forbidden. The generic indigo/blue-on-white SaaS template is forbidden for this project. Also avoided: rounded-corner cards in a uniform grid with hover-lift shadows; smooth 300–500ms eased fades and bouncy spring micro-interactions; pure white #FFFFFF grounds, cool greys, and any blue or indigo anywhere in the palette; Inter, Roboto, Poppins, system-ui, or any neutral geometric sans for headings or body; gradient-blob heroes, glassmorphism, frosted panels and glow effects; stock photography, illustrated characters and 3D renders standing in for their real photos; a centred headline + subtext + filled blue button at the top of the page.

7. Signature Design Concept

The ink poster that becomes a stack of prints.

The public entry is not a hero banner. It is a full-viewport ink flood: #1B1714 fills the screen, and her name is set in Fraunces at clamp(52px, 12vw, 148px), stacked across five to seven lines that span the full width edge to edge, in #F2E7DA, rotated -2°, with the last line breaking mid-word. A single 2px #C8102E rule runs the full viewport width directly beneath the name. One photograph — theirs, in a #FFFDF8 mat rotated 3° with a hard 6px offset shadow — is pinned to the lower right, bleeding 40px past the right edge at 1280px and tucking fully inside at 375px. A mustard washi-tape strip crosses the mat's top-left corner. Below the name, flush left in the ink field, a single line of Karla 700 uppercase at 0.14em tracking reads FOR YOU — OPEN IT SLOWLY, and beneath it a red underlined text link — not a filled button — reads Start with the photographs. Nothing is centred; nothing floats; no gradient anywhere.

The concept is implementable entirely from accepted content and states: the name is the recipient's name, the photograph is one the creator added, the link is the entry into the experience, and the creator entry is a quiet affordance on the same surface. The poster's ink field is the same ink that covers the hidden messages — the first screen and the last gesture are made of the same material, which is what makes the whole thing read as one handmade object rather than a landing page followed by a feature.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief.

• Focal subject: her name, set as a full-viewport ink poster in Fraunces, with one of their photographs pinned to the lower right in a paper mat.
• Input → transformation → outcome thesis: the visitor arrives on a still ink field; the name's lines arrive in 3–5 discrete 90ms frames like a flipbook, the red hairline rule lands beneath them, and the photograph mat drops into place with a single hard 4px drop and stops dead — the outcome is a composed poster, not an animation that keeps performing.
• Motion vocabulary: stop-motion, frame-based, tactile. Reveals happen in 3–5 discrete steps at a 90ms hold per step, never a smooth 400ms fade. Mats land with a single hard 4px drop and stop dead, no bounce. Hover on a photo lifts its mat 2px and rotates it 1° — a physical nudge, not a card lift.
• Composed first frame: the ink field is already full-bleed, the name's first lines are already set, the red rule is already drawn, and the photograph mat is already in its corner — so the poster reads as a finished object even before any motion runs.
• Reduced-motion state: every reveal becomes an instant state change; the poster is presented as a static composed frame with the name, rule, label line, link and photograph mat all in place. Nothing is lost.

Signature motion — the scratch-off. The hidden-message scratch-off is the centrepiece of the recipient's experience: dragging (or tapping on touch) erases a #1B1714 ink layer over the message in irregular, hand-drawn patches that grow with each pass, and the revealed line settles in #C8102E. Under prefers-reduced-motion the scratch-off gets a Reveal button beside it that swaps the ink layer out in one frame.

The letter's seal. Pressing the red wax-seal circle folds the letter sheet open in three stop-motion steps. Under reduced motion it opens in a single instant state change.

9. Non-Functional Requirements

NFR-1. Durable creator assembly — provenance: required_inference The creator's photographs, letter and hidden messages must persist across sessions so that he can return and find his assembly intact, and so that the shared experience reflects his current assembly. Rationale: the accepted creator journey includes returning verification and revision; without durable state, returning verification has nothing to return to.

NFR-2. Protected creator workspace — provenance: required_inference Creator Studio must be reachable only by the verified creator. No protected state may be exposed before verification, and a failed verification must not grant partial access. Rationale: the assembly is private to one person and must remain bound to him.

NFR-3. Open recipient access — provenance: explicit The Visual Experience must be reachable by the recipient without identity establishment. She must never be asked to sign in, create an account, or provide any information. Rationale: the accepted recipient journey is opening a link and experiencing the content; any identity requirement would break it.

NFR-4. Readable text and controls stay whole at every viewport — provenance: explicit Headlines, wordmarks, labels, numbers, captions, photo labels and controls must stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element may cover any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut exactly as the creative direction asks, as long as they cover no readable text or control. Rationale: the recipient opens this on a phone; a clipped line of the letter or an unreachable control would break the gift.

NFR-5. Reduced-motion parity — provenance: explicit Under prefers-reduced-motion, every reveal becomes an instant state change and each scratch-off gets a Reveal button beside it that swaps the ink layer out in one frame. Nothing is lost. Rationale: the recipient must be able to uncover every hidden message and read the whole letter regardless of motion preference.

NFR-6. Photographic integrity — provenance: explicit Photographs are the creator's own images of the two of them. No stock photography, illustrated characters or 3D renders may stand in for them. Rationale: the experience is a personal love object; substitute imagery would defeat its purpose.

NFR-7. Graceful degradation of missing content — provenance: required_inference Any section the creator has not filled must be simply absent rather than rendering a broken frame, and a photograph that fails to load must render as its paper mat with hairline and shadow so the composition stays whole. Rationale: the creator may share before every section is complete, and the recipient must never see a broken page.

10. Tech Stack

• Frontend: React — a single-page application serving the five surfaces (Landing, Login, Sign Up, Creator Studio, Visual Experience). [Default — not specified by user]
• Backend: Python / FastAPI — one shared backend process serving creator identity, the durable assembly (photographs, letter, hidden messages), and the shared-experience retrieval. [Default — not specified by user]
• Storage: a relational database for creator identity and the assembly records, plus object storage for the uploaded photographs. [Default — not specified by user]
• Packaging: Docker with docker-compose.yml as the inventory of runnable services — frontend, backend, database, and object storage. [Default — not specified by user]
• Typography: Fraunces (headings) and Karla (body) — source-specified by the creative direction.
• Palette: #F2E7DA, #FFFDF8, #1B1714, #C8102E, #E8B21F, #8A7A6B — source-specified by the creative direction.

No Kubernetes is required: the deployment is a small single-instance application with one creator and one recipient.

11. Assumptions and Constraints

Assumptions.

• A-1. There is exactly one creator and exactly one intended recipient. The product is not extended to multiple recipients, public discovery, feeds, comments, reactions, or sharing beyond the single link the creator hands over. [Default — not specified by user]
• A-2. The creator's identity is application-owned and established by self-service enrollment with an identifier and a secret. [Required inference from the accepted creator journey]
• A-3. The recipient reaches the experience by a link the creator sends her through some channel outside the product. The product does not send it. [Required inference from the accepted shareable-path requirement]
• A-4. Photographs are supplied by the creator from his own device. [Default — not specified by user]
• A-5. The recipient opens the experience on a phone; 375px is the primary viewport, with 768px and 1280px also supported. [Default — not specified by user]

Constraints.

• C-1. The generic indigo/blue-on-white SaaS template is forbidden for this project. [Source-stated]
• C-2. No pure white #FFFFFF grounds, no cool greys, and no blue or indigo anywhere in the palette. [Source-stated]
• C-3. No Inter, Roboto, Poppins, system-ui, or any neutral geometric sans for headings or body. [Source-stated]
• C-4. No rounded-corner cards in a uniform grid with hover-lift shadows; no smooth 300–500ms eased fades; no bouncy spring micro-interactions. [Source-stated]
• C-5. No gradient-blob heroes, glassmorphism, frosted panels or glow effects. [Source-stated]
• C-6. No stock photography, illustrated characters or 3D renders standing in for their real photos. [Source-stated]
• C-7. Readable text and controls must stay whole at 375px, 768px and 1280px; imagery and decoration may be cropped, bled, rotated or overlapped, but never over readable text or a control. [Source-stated]
• C-8. The recipient is never asked to sign in or create an account. [Source-stated by the accepted recipient journey]

12. Glossary

• Assembly — the creator's durable set of photographs, letter and hidden messages, held in Creator Studio and rendered as the Visual Experience.
• Creator — the boyfriend; the single authoring participant who enrolls, assembles and shares.
• Hidden message — a line of text the creator writes that appears in the experience under an ink layer the recipient erases herself.
• Ink layer — the #1B1714 covering over a hidden message, erased in irregular hand-drawn patches by dragging or tapping.
• Letter — the love letter the creator writes, presented as the one straight, centred paper sheet with a left ink rule, label-maker dateline and red wax-seal circle.
• Mat — the #FFFDF8 paper mount under each photograph, rotated between -4° and +4°, with a 2px ink hairline and a hard 6px 6px 0 #1B1714 offset shadow.
• Paper ground — the #F2E7DA background that carries the whole experience.
• Recipient — the girlfriend; the single participant who opens the shared link and experiences the content.
• Scratch-off — the gesture by which the recipient uncovers a hidden message; under reduced motion it is replaced by a one-frame Reveal button.
• Shareable path — the link the creator obtains from Creator Studio and hands to the recipient.
• Stop-motion reveal — the frame-based motion language: 3–5 discrete 90ms steps, mats landing with a single hard 4px drop and stopping dead.
• Visual Experience — the shared, recipient-facing surface containing the photographs, the letter and the hidden messages.
• Washi-tape strip — the semi-transparent #E8B21F or #C8102E strip that overlaps a mat corner; the only "soft" element in the shape language.