System Requirements Document for fifa-asean-cup

1. Introduction

fifa-asean-cup is a single-purpose flyer creation product. Its intent is to let a creator produce one finished, shareable Instagram Story-sized flyer announcing the FINAL MATCH of the FIFA ASEAN CUP 2026 between INDONESIA and THAILAND, a LIVE NOBAR (nonton bareng / communal watch party) held at CIPTA GRAND CITY BLOK E 28 - 30, and featuring the FINEST RESIDENTS — HANGGI, WULAN, XINZHU.

The audience is twofold: the Flyer Creator, who must assemble the poster and obtain the finished story-format image, and the Flyer Viewer — residents and their guests — who reads the flyer at thumb speed on a phone to learn the match, the kickoff time, the live nobar, and the venue so they can attend.

The product is a poster-making tool, not an event-management or social platform. Its entire scope is: present the supplied event content on a 1080×1920 Instagram Story canvas, keep every supplied detail legible, and let the creator export the finished flyer.

2. System Overview

The current delivery is a small first-party web application with three pages — Landing, Flyer Editor, and Export — all reachable without an account. The flyer itself is the product's centerpiece: a 9:16 poster rendered on a black page, composed entirely of typography and flat colour blocks.

Actors. Two accepted human personas: the Flyer Creator (initiates, composes, and exports the flyer) and the Flyer Viewer (reads the finished flyer to learn the event details). No system, provider, or external actor owns accepted human-facing behavior; the browser's own download/save mechanism is the only external handoff, and it is a delivery mechanism rather than a product actor.

Accepted behavior. The creator opens the product, sees the flyer composition, edits the supplied content fields in the Flyer Editor, and exports the finished Instagram Story image from the Export page. The viewer reads the flyer's content — match, teams, kickoff time, live nobar, venue, and resident names — and understands the event.

Ownership. All three pages are application-owned. The Landing page is the anonymous public entry surface; the Flyer Editor owns the canvas and content controls; the Export page owns obtaining the finished file. No page requires identity, and no differentiated permissions exist.

Narrow exclusions. This product does not manage event registration, ticketing, RSVPs, attendee lists, seating, payments, chat, notifications, social posting, or analytics. It does not host or stream the match. It does not create flyers for any event other than the one described. It does not provide stock photography, illustration, icon sets, or 3D imagery — typography is the image.

2a. Product Interpretation and Delivery Boundary

The product is delivered as a first-party web application with custom UI. All three pages are publicly reachable without an account: the source establishes no identity requirement, no private durable state that must be bound to a returning person, and no commitment, entitlement, or value transfer that must remain attached to a specific participant. The flyer content is fixed event information supplied by the creator, not private per-user data. Accordingly, no sign-in, registration, invitation, or provisioning flow exists, and none is inferred.

The Landing page is the anonymous entry surface: it presents the flyer composition and explains the creation experience before any editing or export. The Flyer Editor is where the creator works on the canvas and its content. The Export page is where the creator obtains the finished story-format flyer. Because the flyer is a single self-contained artifact and the creator's work is a short, single-session composition task, no cross-session resume, saved-project library, or version history is accepted or inferred.

Current horizon: the three pages above, the 1080×1920 canvas, the supplied content, and export of the finished image.

Future horizon (not current): any additional event, template library, multi-flyer management, or social publishing integration. These are explicitly out of current scope and must not appear in current pages or acceptance.

2b. Source Content Inventory

The authoritative source supplies the following exact flyer content, which must appear on the flyer as given:

No other factual entities, collections, dates, contacts, links, or media references are supplied by the source.

2c. Page Content and Component Coverage

Landing

• Information and state. The anonymous public entry surface. Presents the flyer itself as a full-bleed 9:16 poster on a black page, with the flyer's own composition acting as the hero. Explains, in poster typography, that this is the flyer for the FIFA ASEAN CUP 2026 final match nobar and that the visitor can create and export it.
• Primary action. Enter the Flyer Editor to work on the flyer.
• Supporting actions. Read the flyer content in place (match, teams, kickoff time, live nobar, venue, resident names); proceed directly to Export if the flyer is already as desired.
• Domain entities. Flyer (the 1080×1920 poster), Event details (title line, competition, matchup, kickoff time, viewing mode, venue), Finest Residents (label plus three names).
• Component responsibilities.
  • Poster hero — renders the full 9:16 flyer composition: top band with FIFA ASEAN CUP 2026 in small widely-tracked Oswald caps on black with a thin yellow rule beneath; the dominant zone with FINAL MATCH in Anton stacked flush-left overlapping the top edge of a full-bleed red band; inside the red band, INDONESIA and THAILAND stacked with a small VS between them; below the band on black, 20:00 WIB at the largest scale with the yellow LIVE NOBAR badge; the ruled venue block with label LOKASI in muted grey and CIPTA GRAND CITY BLOK E 28 - 30 in white Oswald caps; the footer FINEST RESIDENTS label with the three names separated by yellow bullet squares.
  • Entry control — a single flush-left control that opens the Flyer Editor.
  • Secondary control — a flush-left control that opens the Export page.
• States.
  • Loading: the poster composition renders immediately from static content; no data fetch is required. If web fonts are still loading, text renders in a fallback and snaps to Anton/Oswald on load without layout shift beyond the poster's own reveal.
  • Empty: not applicable — the flyer content is fixed and always present.
  • Success: the poster is fully composed and legible at 375px, 768px, and 1280px; entry and secondary controls are visible and unobstructed.
  • Error: if a web font fails to load, the poster still renders legibly in the fallback stack and the entry controls remain usable.
  • Recovery: reloading the page restores the full composition; no state is lost because none is stored.

Flyer Editor

• Information and state. The working surface for the flyer. Shows the 1080×1920 Instagram Story canvas with all supplied content placed according to the poster layout, and exposes the content fields the creator can adjust. The canvas is the authoritative state of the flyer.
• Primary action. Edit the flyer's content fields and see the canvas update.
• Supporting actions. Reset a field to its supplied value; proceed to Export when the flyer is ready.
• Domain entities. Flyer canvas (1080×1920), Content fields (event title line, competition, matchup, kickoff time, viewing mode, venue, featured group label, resident names), Finest Residents list (three names).
• Component responsibilities.
  • Story canvas — renders the 9:16 poster at the correct aspect ratio, scaled to fit the viewport, with the full poster composition: top band and yellow rule, FINAL MATCH in Anton overlapping the red band, the diagonal red band at −6deg behind INDONESIA / THAILAND with VS between them, 20:00 WIB as the largest element with the thick yellow rule from its baseline to the canvas edge, the LIVE NOBAR yellow badge butted against it, the ruled venue block, and the resident footer row.
  • Content field controls — one control per supplied field, pre-filled with the exact supplied value, flush-left and poster-styled, with no rounded corners.
  • Resident name controls — three controls for HANGGI, WULAN, and XINZHU, presented as a single row separated by yellow bullet squares at desktop and wrapping to a stacked column at 375px.
  • Reset control — restores a field to its supplied value.
  • Export entry control — opens the Export page.
• States.
  • Loading: the canvas renders from the supplied defaults immediately; field controls are pre-filled.
  • Empty: if a field is cleared, the canvas shows that field's slot empty rather than substituting placeholder text; the creator can restore it with the reset control.
  • Success: every supplied detail is present and legible on the canvas at 375px, 768px, and 1280px; no readable text or control is cropped, covered, or run off an edge.
  • Error: if a field's text grows beyond its allotted area, the canvas wraps or scales that text within its container rather than clipping it, and the field control remains usable.
  • Recovery: the reset control restores any field to its supplied value; navigating away and back re-renders the canvas from the current field values.

Export

• Information and state. The completion surface. Shows the finished flyer at 1080×1920 and confirms that the story-format image is ready to obtain.
• Primary action. Obtain the finished Instagram Story flyer as an image file.
• Supporting actions. Return to the Flyer Editor to make further changes; preview the finished flyer at full size.
• Domain entities. Finished flyer (1080×1920 image), Export action.
• Component responsibilities.
  • Finished flyer preview — renders the completed poster at the correct 9:16 aspect ratio, fully legible, with no text or control cropped or covered.
  • Export control — a single flush-left control that produces the finished flyer as a downloadable image at 1080×1920.
  • Return control — a flush-left control that goes back to the Flyer Editor.
• States.
  • Loading: the preview renders from the current flyer state; the export control is available once the preview is composed.
  • Empty: not applicable — the flyer always has content.
  • Success: the finished flyer is produced at 1080×1920 and is readable at thumb speed; the creator can save or share it.
  • Error: if the export cannot complete, the page states that the flyer could not be produced and keeps the export control available to retry; the preview remains visible.
  • Recovery: retrying the export control re-attempts production of the finished flyer; returning to the Flyer Editor preserves the current content.

3. Functional Requirements

FR-1 — Create a flyer in Instagram Story size/format (explicit) As a Flyer Creator, I should create a flyer in Instagram Story size/format so that the finished poster fits an Instagram Story.

• Trigger/input: the creator opens the product and works on the flyer canvas.
• Observable result: the flyer canvas is a 9:16 Instagram Story canvas at 1080×1920, presented as a full-bleed poster.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the canvas cannot render, the creator can reload and the canvas re-renders from the supplied content.
• Continuation: the creator proceeds to edit the flyer's content fields.

FR-2 — Include the FINAL MATCH title line (explicit) As a Flyer Creator, I should have FINAL MATCH appear on the flyer so that the poster announces the final.

• Trigger/input: the flyer canvas renders.
• Observable result: FINAL MATCH appears in Anton, stacked flush-left, overlapping the top edge of the full-bleed red band.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the field is cleared, the slot shows empty and the reset control restores the supplied value.
• Continuation: the creator continues editing the remaining fields.

FR-3 — Include the competition line FIFA ASEAN CUP 2026 (explicit) As a Flyer Creator, I should have FIFA ASEAN CUP 2026 appear on the flyer so that the competition is named.

• Trigger/input: the flyer canvas renders.
• Observable result: FIFA ASEAN CUP 2026 appears in small widely-tracked Oswald caps on black in the top band, with a thin yellow rule beneath it spanning the full width.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the field is cleared, the slot shows empty and the reset control restores the supplied value.
• Continuation: the creator continues editing the remaining fields.

FR-4 — Include the matchup INDONESIA VS THAILAND (explicit) As a Flyer Creator, I should have INDONESIA VS THAILAND appear on the flyer so that the two teams are named.

• Trigger/input: the flyer canvas renders.
• Observable result: INDONESIA and THAILAND are stacked flush-left inside the full-bleed red band, with a small VS set at 40% size between them; the band slices diagonally at −6deg behind the team names and sits behind the type, never over it.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the field is cleared, the slot shows empty and the reset control restores the supplied value.
• Continuation: the creator continues editing the remaining fields.

FR-5 — Include the kickoff time 20:00 WIB (explicit) As a Flyer Creator, I should have 20:00 WIB appear on the flyer so that viewers know when the match starts.

• Trigger/input: the flyer canvas renders.
• Observable result: 20:00 WIB appears below the red band on black as the largest single element on the poster, with a thick yellow rule running from its baseline to the canvas edge.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the field is cleared, the slot shows empty and the reset control restores the supplied value.
• Continuation: the creator continues editing the remaining fields.

FR-6 — Include the LIVE NOBAR badge (explicit) As a Flyer Creator, I should have LIVE NOBAR appear on the flyer so that viewers know the match is watched together live.

• Trigger/input: the flyer canvas renders.
• Observable result: LIVE NOBAR appears in a solid yellow badge rectangle butted directly against the kickoff time — pinned to its right at desktop and stacked beneath it at 375px.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the field is cleared, the slot shows empty and the reset control restores the supplied value.
• Continuation: the creator continues editing the remaining fields.

FR-7 — Include the venue CIPTA GRAND CITY BLOK E 28 - 30 (explicit) As a Flyer Creator, I should have CIPTA GRAND CITY BLOK E 28 - 30 appear on the flyer so that viewers know where to attend.

• Trigger/input: the flyer canvas renders.
• Observable result: a ruled venue block shows the label LOKASI in muted grey and CIPTA GRAND CITY BLOK E 28 - 30 in white Oswald caps.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the field is cleared, the slot shows empty and the reset control restores the supplied value.
• Continuation: the creator continues editing the remaining fields.

FR-8 — Include FINEST RESIDENTS with HANGGI, WULAN, XINZHU (explicit) As a Flyer Creator, I should have FINEST RESIDENTS with the names HANGGI, WULAN, and XINZHU appear on the flyer so that the featured residents are credited.

• Trigger/input: the flyer canvas renders.
• Observable result: the footer shows the FINEST RESIDENTS label with the three names in white Oswald caps separated by solid yellow bullet squares — a single row at 1280px, wrapping to a stacked column at 375px.
• Access state: publicly reachable, no account required.
• Failure/recovery: if a name is cleared, that slot shows empty and the reset control restores the supplied value.
• Continuation: the creator continues editing the remaining fields.

FR-9 — Edit the flyer's content fields (required_inference) As a Flyer Creator, I should edit the flyer's content fields and see the canvas update so that I can adjust the poster before exporting it.

• Trigger/input: the creator changes a content field control in the Flyer Editor.
• Observable result: the corresponding text on the 1080×1920 canvas updates to the new value, staying legible and inside its container.
• Access state: publicly reachable, no account required.
• Failure/recovery: if a field's text grows beyond its allotted area, the canvas wraps or scales that text within its container rather than clipping it; the reset control restores the supplied value.
• Continuation: the creator proceeds to the Export page.

FR-10 — Obtain the finished Instagram Story flyer (required_inference) As a Flyer Creator, I should obtain the finished Instagram Story flyer as an image so that I can share it.

• Trigger/input: the creator uses the export control on the Export page.
• Observable result: the finished flyer is produced at 1080×1920 as an image file that the creator can save or share.
• Access state: publicly reachable, no account required.
• Failure/recovery: if the export cannot complete, the page states that the flyer could not be produced and keeps the export control available to retry; the preview remains visible.
• Continuation: the creator saves or shares the finished flyer.

FR-11 — Read the flyer's event details (required_inference) As a Flyer Viewer, I should read the flyer's event details so that I know the match, the kickoff time, the live nobar, and the venue.

• Trigger/input: the viewer opens the Landing page or receives the exported flyer.
• Observable result: the viewer can read FINAL MATCH, FIFA ASEAN CUP 2026, INDONESIA VS THAILAND, 20:00 WIB, LIVE NOBAR, CIPTA GRAND CITY BLOK E 28 - 30, and FINEST RESIDENTS with HANGGI, WULAN, XINZHU — all legible at thumb speed.
• Access state: publicly reachable, no account required.
• Failure/recovery: if a web font fails to load, the flyer still renders legibly in the fallback stack.
• Continuation: the viewer attends the nobar at the stated venue and time.

4. User Personas

Flyer Creator

Product context. The creator is the person who requested the flyer: they need an Instagram Story-sized poster for the FIFA ASEAN Cup 2026 final match between Indonesia and Thailand, watched together live at Cipta Grand City Blok E 28 - 30, with the Finest Residents credited. They are working on a phone or a desktop browser, in a short single session, and they care about the poster reading loudly and correctly at thumb speed.

Primary goal. Produce a finished, shareable story-format flyer containing all supplied details.

Distinct accepted responsibilities. The creator initiates the flyer, composes it on the 1080×1920 canvas, adjusts the supplied content fields, and obtains the finished image. They are the only actor who edits the flyer or exports it.

Relevant inputs or decisions. The exact supplied content: FINAL MATCH, FIFA ASEAN CUP 2026, INDONESIA VS THAILAND, 20:00 WIB, LIVE NOBAR, CIPTA GRAND CITY BLOK E 28 - 30, FINEST RESIDENTS with HANGGI, WULAN, XINZHU. Their decisions are which fields to adjust and when the flyer is ready to export.

Interactions with other accepted participants. The creator's work produces the artifact that the Flyer Viewer reads. The creator does not interact with the viewer directly inside the product; the handoff is the exported flyer.

Observable success. A finished 1080×1920 flyer image containing every supplied detail, legible at 375px, 768px, and 1280px, with no readable text or control cropped or covered.

Flyer Viewer

Product context. The viewer is a resident or a resident's guest who encounters the flyer — either on the Landing page or as the exported story image — and needs to learn the event details quickly on a phone.

Primary goal. Understand the event details from the flyer so they can attend.

Distinct accepted responsibilities. The viewer reads the flyer's content: the match, the two teams, the kickoff time, the live nobar, the venue, and the featured residents. They do not edit or export anything.

Relevant inputs or decisions. Their input is the flyer itself; their decision is whether and when to attend the nobar at Cipta Grand City Blok E 28 - 30 at 20:00 WIB.

Interactions with other accepted participants. The viewer receives the artifact the Flyer Creator produced. There is no in-product interaction between them.

Observable success. The viewer can state the match, the kickoff time, the live nobar, and the venue after reading the flyer at thumb speed.

5. Core User Flows

Flow A — Flyer Creator composes and exports the flyer

1. The creator opens the product and lands on the Landing page. The page presents the flyer as a full-bleed 9:16 poster on a black ground: the top band with FIFA ASEAN CUP 2026 in small widely-tracked Oswald caps and a thin yellow rule beneath it; FINAL MATCH in Anton stacked flush-left overlapping the top edge of the full-bleed red band; INDONESIA and THAILAND stacked inside the band with a small VS between them; 20:00 WIB below the band as the largest element with the thick yellow rule from its baseline to the canvas edge and the yellow LIVE NOBAR badge butted against it; the ruled venue block with LOKASI and CIPTA GRAND CITY BLOK E 28 - 30; and the footer FINEST RESIDENTS row with HANGGI, WULAN, XINZHU separated by yellow bullet squares.
2. The creator uses the entry control to open the Flyer Editor. The 1080×1920 story canvas renders with all supplied content placed according to the poster layout, and the content field controls are pre-filled with the exact supplied values.
3. The creator reviews the canvas. Every supplied detail is present and legible; the diagonal red band sits behind the team names, never over them.
4. The creator adjusts a content field — for example, the venue line or a resident name. The canvas updates immediately: the changed text re-renders in its slot, wrapping or scaling within its container rather than clipping.
5. If the creator clears a field by mistake, the slot shows empty rather than substituting placeholder text; the creator uses the reset control to restore the supplied value and the canvas re-renders it.
6. When the flyer is as desired, the creator uses the export entry control to open the Export page. The finished flyer preview renders at 1080×1920, fully legible.
7. The creator uses the export control. The finished flyer is produced as a 1080×1920 image file.
8. Failure/recovery: if the export cannot complete, the page states that the flyer could not be produced and keeps the export control available. The creator retries the export control; the preview remains visible throughout.
9. Continuation: the creator saves or shares the finished flyer. If further changes are needed, the return control goes back to the Flyer Editor, where the current content is preserved.

Flow B — Flyer Viewer reads the flyer

1. The viewer encounters the flyer — either by opening the Landing page, where the poster is presented as the hero, or by receiving the exported story image.
2. The viewer reads the top band: FIFA ASEAN CUP 2026, anchored by the thin yellow rule.
3. The viewer reads FINAL MATCH in Anton and then INDONESIA and THAILAND inside the red band, with the small VS between them.
4. The viewer reads 20:00 WIB — the largest element on the poster — and the yellow LIVE NOBAR badge beside it, learning the kickoff time and that the match is watched together live.
5. The viewer reads the ruled venue block: LOKASI and CIPTA GRAND CITY BLOK E 28 - 30.
6. The viewer reads the footer: FINEST RESIDENTS with HANGGI, WULAN, XINZHU.
7. Failure/recovery: if a web font fails to load, the flyer still renders legibly in the fallback stack and the viewer can still read every detail.
8. Continuation: the viewer attends the nobar at Cipta Grand City Blok E 28 - 30 at 20:00 WIB.

6. Visuals Colors and Theme

Muse and headline. Paula Scher — typography as stadium architecture: a poster that shouts the final match. The flyer's content is almost entirely typographic, so a muse whose image is type gives maximum impact with zero dependency on photography. Scher's poster contrast survives the tiny scale of a phone screen.

Mode. Dark mode. Black ground dominates roughly 60% of the canvas so the red and yellow scream.

Colour tokens (exact hex, by role).

No gradients anywhere — flat poster colour only. No blue or indigo in any form.

Typography.

No sentence case anywhere on the flyer. No Inter, Roboto, Arial, Helvetica, Poppins, Lato, Open Sans, or system-ui for any text.

Type scale (poster scale, not UI scale). Mobile (375px frame) → desktop (1280px frame), rendered as a scaled 1080×1920 canvas:

Line-height 0.88 for display, 1.25 for labels.

Shape language. Hard edges only — no border radius anywhere, no soft shadows, no glass. Rectangles are the entire vocabulary: full-bleed colour bands, a thick 6–10px yellow rule under the kickoff time, a solid yellow badge rectangle for LIVE NOBAR, and one diagonal red band that slices across the canvas behind the team names. Rotation is allowed on the diagonal band only (about −6deg). Everything else is flush and orthogonal, poster-style.

Spacing rhythm. Poster rhythm, not UI rhythm: full-bleed bands butt directly against each other; rules are thick and deliberate; the composition is asymmetric, with the red band sitting in the upper-middle third rather than centred.

Imagery style. Typography is the image. No photography, no illustration, no clip art, no 3D. The only non-type graphic elements are flat colour blocks, rules, bullet squares, and one optional halftone-dot texture at 8% opacity over the red band to give it a screen-printed feel. If any image is added later, it must be a high-contrast duotone cutout of a football cropped hard to the grid — never a stock photo of a stadium.

Layout. A single 9:16 canvas (1080×1920) treated as a gig poster read top-to-bottom: (1) top band — FIFA ASEAN CUP 2026 in small widely-tracked Oswald caps on black with a thin yellow rule beneath; (2) the dominant zone — FINAL MATCH in Anton stacked flush-left, overlapping the top edge of a full-bleed red band; (3) inside the red band, INDONESIA and THAILAND stacked with a small VS set at 40% size between them; (4) below the band on black, 20:00 WIB as the biggest number, with LIVE NOBAR in a yellow badge rectangle pinned to its right at desktop and stacked beneath it at 375px; (5) a ruled venue block — label LOKASI in muted grey, CIPTA GRAND CITY BLOK E 28 - 30 in white Oswald caps; (6) footer — FINEST RESIDENTS label with three names in a single row separated by yellow bullet squares, wrapping to a column at 375px. Asymmetric weight: the red band sits in the upper-middle third, not centred, so the poster feels composed rather than templated.

Readable text and controls. Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. No element covers any part of readable text or control. The diagonal band sits behind type, never over it.

7. Signature Design Concept

The flyer is the hero. The first screen is not a web hero — it is the flyer itself, presented as a full-bleed 9:16 poster on a black page, with the flyer's own composition as the hero.

Composition. FINAL MATCH in Anton stacked flush-left across the top third, its baseline overlapping the top edge of a full-bleed red band. Inside the band, INDONESIA and THAILAND stacked at near-full canvas width with a small VS between them. Below on black, 20:00 WIB at the largest scale on the poster with the yellow LIVE NOBAR badge pinned beside it.

Dominant element. The red band plus Anton type, occupying roughly 45% of the canvas height.

Palette roles. Black ground as silence, red band as the shout, yellow as the single hot signal, white for the biggest type only. Nothing is centred, nothing is rounded, nothing is blue.

Signature moves.

• A full-bleed red band slicing the canvas diagonally at −6deg behind the team names, with INDONESIA and THAILAND stacked flush-left and bleeding off the right edge of the band.
• 20:00 WIB set as the single largest element on the poster in Anton, with a thick yellow rule running from its baseline to the canvas edge, and the LIVE NOBAR yellow badge rectangle butted directly against it.
• A footer resident row where HANGGI • WULAN • XINZHU sit as white Oswald caps separated by solid yellow squares, wrapping to a stacked column at 375px and reading as a single line at 1280px.
• A hover/press colour flip on the whole poster: red band → yellow, white type → black, a straight Scher poster swap with no easing theatrics.
• A thin yellow rule directly under FIFA ASEAN CUP 2026 at the top of the canvas, spanning the full width, anchoring the whole composition to the grid.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The flyer itself — the 9:16 poster composition, with the red band and Anton type as the dominant element.
• Input → transformation → outcome thesis. On load, the poster's lines arrive in sequence: each line of Anton type slides up 24px and snaps into place with a hard 120ms ease-out, no bounce; the red diagonal band wipes in from the left behind the type; the yellow LIVE NOBAR badge stamps in last with a 1.06→1.0 scale. The outcome is the fully composed poster, exactly as it will be exported.
• Motion vocabulary. Staggered word reveals; a left-to-right band wipe; a hard stamp-in on the badge; a straight colour swap on hover/press with no easing theatrics; one continuous element — the badge's slow 4s opacity pulse.
• Composed first frame. The black ground with the top band and its thin yellow rule already in place; FINAL MATCH mid-slide; the red band mid-wipe; the badge not yet stamped.
• Reduced-motion state. Under prefers-reduced-motion, everything appears instantly in its final state: no slide, no wipe, no stamp, no pulse.

Hover/press behaviour. On hover or press, the red band flips to yellow and the type to black — a straight Scher poster swap with no easing theatrics.

9. Non-Functional Requirements

NFR-1 — Instagram Story dimensions (explicit) The flyer canvas and the exported image must be 1080×1920 (9:16 Instagram Story format). Rationale: the source explicitly requires Instagram Story size/format.

NFR-2 — Content fidelity (explicit) All supplied text must appear on the flyer exactly as given: FINAL MATCH, FIFA ASEAN CUP 2026, INDONESIA VS THAILAND, 20:00 WIB, LIVE NOBAR, CIPTA GRAND CITY BLOK E 28 - 30, FINEST RESIDENTS with HANGGI, WULAN, XINZHU. Rationale: the source explicitly requires this content as given.

NFR-3 — Thumb-speed legibility (required_inference) The flyer must be readable at thumb speed on a phone. Rationale: the flyer's purpose is to be shared and read on Instagram Stories; the creative direction's poster contrast exists to survive the tiny scale of a phone screen.

NFR-4 — Readable text and controls stay whole (explicit, from the creative direction) Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. No element covers any part of readable text or control. The diagonal band sits behind type, never over it. Rationale: explicit creative-direction constraint.

NFR-5 — Reduced motion (explicit, from the creative direction) Under prefers-reduced-motion, all motion appears instantly in its final state. Rationale: explicit creative-direction constraint.

NFR-6 — No blue or indigo (explicit, from the creative direction) No blue or indigo (#0057FF, #2563EB, #4F46E5, #7C3AED family) anywhere. The palette is black, red, yellow, white only. Rationale: explicit creative-direction constraint; the generic indigo/blue-on-white SaaS template is forbidden for this project.

NFR-7 — No gradients, glass, or rounded corners (explicit, from the creative direction) No gradients, glassmorphism, frosted panels, soft shadows, or rounded corners. Rationale: explicit creative-direction constraint.

NFR-8 — Font discipline (explicit, from the creative direction) Anton for headings, Oswald for body/labels. No Inter, Roboto, Arial, Helvetica, Poppins, Lato, Open Sans, or system-ui for any text. Rationale: explicit creative-direction constraint.

NFR-9 — No account required (required_inference) All three pages are publicly reachable without an account. Rationale: the source establishes no identity requirement, no private durable state bound to a returning person, and no commitment, entitlement, or value transfer that must remain attached to a specific participant.

10. Tech Stack

• Frontend: React (web), rendering the three pages and the 1080×1920 poster canvas.
• Canvas rendering: HTML/CSS poster composition scaled to the 9:16 canvas, with the export producing a 1080×1920 image.
• Fonts: Anton and Oswald, loaded as web fonts with a legible fallback stack.
• Storage: none required — the flyer content is fixed supplied event information and the creator's work is a short single-session composition task; no cross-session persistence is accepted.
• Backend: none required for current scope; the product is a client-side composition and export tool.
• Deployment: static hosting of the built frontend.

No database, authentication service, or container orchestration is required by the accepted scope.

11. Assumptions and Constraints

Assumptions.

• [Assumption — narrow] The creator works in a single session; no saved-project library, version history, or cross-session resume is accepted or inferred.
• [Assumption — narrow] The flyer content is fixed supplied event information, so no per-user private data exists and no account is needed.
• [Assumption — narrow] The exported image is saved or shared by the creator through their own device or browser; the product does not post to Instagram or any social platform.
• [Assumption — narrow] The browser's own download/save mechanism is the delivery handoff for the finished flyer; it is a delivery mechanism, not a product actor.

Constraints.

• The flyer must use Instagram Story size/aspect ratio (1080×1920, 9:16). (explicit)
• All supplied text content must be included as given: FINAL MATCH, FIFA ASEAN CUP 2026, INDONESIA VS THAILAND, 20:00 WIB, LIVE NOBAR, CIPTA GRAND CITY BLOK E 28 - 30, FINEST RESIDENTS with HANGGI, WULAN, XINZHU. (explicit)
• No blue or indigo; no gradients, glassmorphism, frosted panels, soft shadows, or rounded corners; no stock photography of stadiums, crowds, or footballers; no icon sets, emoji, or decorative illustration. (explicit, creative direction)
• No centred headline + subtext + button composition; the poster is flush-left and asymmetric. (explicit, creative direction)
• The diagonal band must sit behind type, never over it. (explicit, creative direction)
• Readable text and controls stay whole at every viewport. (explicit, creative direction)

Out of current scope. Event registration, ticketing, RSVPs, attendee lists, seating, payments, chat, notifications, social posting, analytics, match hosting or streaming, flyers for other events, template libraries, multi-flyer management, and social publishing integrations.

12. Glossary

• Flyer — the single 1080×1920 Instagram Story-sized poster this product produces.
• Instagram Story size/format — the 9:16 aspect ratio at 1080×1920 pixels.
• Nobar — nonton bareng; a communal watch party. Here, the live viewing of the FIFA ASEAN Cup 2026 final at Cipta Grand City Blok E 28 - 30.
• FIFA ASEAN CUP 2026 — the competition named on the flyer.
• Final Match — the match announced by the flyer: Indonesia vs Thailand.
• WIB — Waktu Indonesia Barat; Western Indonesian Time. The kickoff time on the flyer is 20:00 WIB.
• Finest Residents — the featured group label on the flyer, with the names HANGGI, WULAN, and XINZHU.
• Flyer Creator — the accepted persona who composes and exports the flyer.
• Flyer Viewer — the accepted persona who reads the flyer to learn the event details.
• Landing — the anonymous public entry page presenting the flyer composition.
• Flyer Editor — the page owning the 1080×1920 story canvas and the content field controls.
• Export — the page owning obtaining the finished flyer as a 1080×1920 image.