System Requirements Document for pawon-ayu-kuliner

1. Introduction

This document specifies the system requirements for pawon-ayu-kuliner, a first-party web application that produces a single, premium, ready-to-publish culinary marketing pamphlet for the brand PAWON AYU — Masakan Rumahan, Praktis Setiap Saat.

The product intent is to let the Pawon Ayu brand owner compose, preview, and export one vertical 4:5 Instagram-feed pamphlet that presents the Pawon Ayu brand header, two frozen product cards with exact prices, a four-item "MENU FAVORIT HARI INI" grid with exact prices, and an elegant contact/social footer containing a clean empty area reserved for the real ordering QR code. The pamphlet must read as warm, elegant, clean, and professionally art-directed — blending traditional Indonesian home-cooking character with premium modern design — and must be easy to read on a phone screen so it increases prospective customers' interest in placing an order.

The audience is the Pawon Ayu brand owner / marketing designer (the requester), who is the sole active human actor in this generation. Prospective customers are the pamphlet's audience, not system users.

2. System Overview

The system is a browser-delivered application with two pages: an anonymous Landing page that introduces the Pawon Ayu pamphlet-design workspace, and a Pamphlet Editor that is the single cohesive workspace for generating, refining, arranging, and preparing the required Pawon Ayu promotional pamphlet and its editable text areas.

Current delivery is a custom first-party UI. The system renders the pamphlet as a live, on-screen 4:5 vertical composition and produces a high-resolution export artifact. All product names, prices, slogans, and brand information are fixed source data: the system must render them exactly as given and must never alter price amounts, add menu items, or fabricate contact information or a QR code.

The system does not own ordering, payment, delivery, customer accounts, or social-media publishing. The ordering QR code is supplied by the brand owner as a real asset; the system only reserves a clean, empty, correctly sized area for it.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The pamphlet-design workspace is first-party application UI. The brand owner works inside the application to compose and export the pamphlet. No third-party design tool is required to produce the deliverable; the Canva hand-off mentioned in the source is a fallback for text accuracy, not a required integration — the system satisfies it by guaranteeing accurate, uncut, correctly spelled text and by keeping text areas clean and editable.

Access ownership. Both pages are anonymously reachable (access_requirement: none). The accepted work is a single-session design task with no durable private state that must be bound to a returning identity, no commitment or value transfer to a specific participant, and no entitlement to protect. The system therefore does not establish application-owned identity, accounts, login, or session continuity, and it does not add any account-management capability.

Current vs. future. Current scope is exactly the two pages and the pamphlet composition described here. Anything not listed in Section 3 — ordering, payment, inventory, customer messaging, social publishing, multi-pamphlet campaign management, analytics — is out of current scope.

Hard exclusions. No fabricated QR code; no invented phone number or contact detail; no price changes, rounding, or reformatting; no added menu items, products, or social handles beyond Instagram "pawon ayu" and TikTok "pawon ayu"; no cut-off or misspelled text; no blue, indigo, or violet in the palette; no busy ornament, hard-to-read decorative fonts, excessive 3D effects, or cheap-template look.

2b. Source Content Inventory

The authoritative source supplies the following exact brand and catalogue facts. These are the only permitted values for the corresponding fields.

Brand identity

Frozen product section

Menu section — "MENU FAVORIT HARI INI"

Reserved asset slot

No other contact numbers, addresses, links, or media references are supplied, and none may be invented.

2c. Page Content and Component Coverage

Landing

Information and state. Anonymous public entry. Presents the Pawon Ayu brand identity and explains, in one screen, what the pamphlet-design workspace produces: a premium 4:5 vertical Instagram-feed pamphlet for Pawon Ayu containing the brand header, two frozen product cards, the four-item favorite menu grid, and the contact/social footer with a reserved QR area.

Primary action. Enter the Pamphlet Editor to begin composing the pamphlet.

Supporting actions. Read the brand header (logo mark, "PAWON AYU", slogan "Masakan Rumahan, Praktis Setiap Saat"); view a static preview of the pamphlet's section order (header → frozen products → menu → contact footer); read the fixed source facts (product names and prices, menu names and prices, social handles) as reference.

Domain entities. Brand identity (name, slogan, logo mark), pamphlet specification (4:5 vertical, high resolution), section manifest (header, frozen products, menu, footer).

Component responsibilities.

• Walnut header band — full-bleed wood-grain band under a #6B4423 multiply; centered 64px circular Pawon Ayu mark drawn as a gold line illustration of a traditional Javanese roof over a bowl; "PAWON AYU" in Fraunces 900 gold-on-walnut at clamp(46px, 12vw, 104px); slogan "Masakan Rumahan, Praktis Setiap Saat" in Jost 400 uppercase, tracking 0.14em, resting on a full-width 1px gold rule.
• Ornament divider strip — repeating flat geometric Javanese tile row (triangles and half-circles), gold on walnut, 18px tall.
• Section-order preview — a static, non-interactive representation of the pamphlet's four bands in their mandated order, so the owner sees the hierarchy (brand name → products → prices → contact) before entering the editor.
• Source-facts reference block — read-only listing of the exact product names, menu names, prices, slogan, and social handles, so the owner can confirm the fixed data.
• Entry control — a full-pill button that opens the Pamphlet Editor.

States.

• Loading — header band and ornament strip render immediately from static assets; the preview block shows a warm cream skeleton at the correct 4:5 aspect ratio.
• Empty — not applicable; the Landing page has no user-owned collection.
• Success — brand header, ornament divider, section-order preview, source-facts reference, and entry control all render; the entry control is reachable and legible at 375px, 768px, and 1280px.
• Error — if a preview asset fails to load, the affected band renders as a cream placeholder at the correct aspect ratio with its label intact; the entry control remains available.
• Recovery — the owner can retry loading the preview or proceed directly into the Pamphlet Editor; no state is lost because the Landing page holds no editable state.

Pamphlet Editor

Information and state. The single cohesive workspace for the whole pamphlet lifecycle. Displays the live 4:5 vertical pamphlet column (max-width 720px, centered, 24px side margins at 375px and 56px at 1280px) in the mandated order:

1. Walnut header band — Pawon Ayu mark, "PAWON AYU" display type, slogan on a gold hairline.
2. Ornament divider strip.
3. "FROZEN" section label with the two product cards.
4. Ornament divider strip.
5. "MENU FAVORIT HARI INI" section title with the 2×2 menu grid.
6. Sage footer band with the CTA, supporting text, QR placeholder, and three labelled icon rows.

Also displays the current export readiness state (whether all required text is present, uncut, and correctly spelled, and whether the QR area is reserved).

Primary action. Export the finished pamphlet as a high-resolution 4:5 vertical image.

Supporting actions. Edit the editable text areas (brand header text, section labels, CTA and supporting text, footer labels); place or replace the real ordering QR code image in the reserved area; swap or replace the two frozen product photos and the four menu photos; toggle the frozen-product photo crossfade; reorder nothing (section order is fixed); reset the composition to the source defaults.

Domain entities. Pamphlet (single instance, 4:5 vertical), section (header, frozen products, menu, footer), product card (name, price, photo), menu tile (name, price, photo), footer block (CTA, supporting text, QR slot, social icon rows), export artifact (high-resolution image).

Component responsibilities.

• Pamphlet canvas — the live 4:5 vertical column; enforces the fixed section order and the visual hierarchy brand name → products → prices → contact; maintains at least 28px vertical breathing room between blocks.
• Header band editor — edits the header text areas while keeping "PAWON AYU" and the slogan "Masakan Rumahan, Praktis Setiap Saat" as the source values; renders the logo mark slot.
• Frozen product card (×2) — photo occupying the top 62% at 20px radius; product name and a solid walnut price pill chip with gold tabular figures pinned to the card's lower-right corner, overlapping the photo edge by 8px. Card surface #FBF4E8, hairline #6B4423 at 14%, 2px gold rule on the top edge, radius 20px, single warm shadow 0 10px 26px rgba(107,68,35,0.13). Prices are locked to Rp95.000 (Bebek Frozen) and Rp85.000 (Ayam Frozen).
• Menu grid — 2×2 grid of four photo tiles; each tile captioned by a two-line footer inside the tile: menu name in Fraunces 700 and price in gold on the same baseline row, separated by a hairline, always directly beneath the photo. Prices are locked to Rp17.000 (Pepes Pindang), Rp12.000 (Nasi Kuning), Rp10.000 (Soto Daging), Rp31.000 (Nasi Box).
• Footer band — sage ground with walnut text; "Lapar? Yuk, pesan sekarang!" as the largest line in Fraunces 800 walnut; "Hubungi kami untuk pemesanan" beneath; a 120×120px dashed 1px gold QR placeholder captioned "Area QR pemesanan"; three labelled icon rows for Instagram ("pawon ayu"), TikTok ("pawon ayu"), and WhatsApp, proportionally sized.
• Text-integrity checker — continuously verifies that every required string is present, matches the source exactly, is not truncated, and is not misspelled; surfaces any violation before export.
• Export control — produces the high-resolution 4:5 vertical artifact and reports success or failure.
• Reset control — restores the composition to the source defaults.

States.

• Loading — the pamphlet canvas renders its section skeleton in the mandated order while photos and fonts load; each band shows a cream placeholder at its correct aspect ratio.
• Empty — before any photo is placed, each photo slot shows a cream placeholder with its label ("Bebek Frozen", "Ayam Frozen", "Pepes Pindang", "Nasi Kuning", "Soto Daging", "Nasi Box") and its locked price, so the composition is always readable and never blank.
• Success — all six photos placed, all text matching source exactly, QR area reserved, and export produces a high-resolution 4:5 artifact.
• Error — a photo fails to load, a text field is emptied or altered away from its source value, or export fails. The affected element is flagged in place; the text-integrity checker names the specific field; export is blocked while a required string is missing or altered.
• Recovery — the owner restores the flagged field from the source value, replaces the failed photo, or retries export; the reset control restores all source defaults in one action.

3. Functional Requirements

Each requirement is a distinct story point with provenance and observable acceptance.

FR-1 — Produce the Pawon Ayu marketing pamphlet. As a Pawon Ayu Brand Owner / Marketing Designer, I should be able to produce a highly attractive, aesthetic, modern, professional, and appetizing culinary marketing pamphlet for the brand PAWON AYU — Masakan Rumahan, Praktis Setiap Saat.

• Provenance: explicit.
• Trigger/input: the owner opens the Pamphlet Editor.
• Observable result: a single live 4:5 vertical pamphlet composition containing the header, frozen product section, menu section, and contact footer.
• Access state: anonymous; no identity required.
• Failure/recovery: if the canvas fails to initialize, the owner can reload the editor; no composition state is lost because none was created.
• Continuation: the owner proceeds to place photos and verify text.
• Owner: Pamphlet Editor.

FR-2 — Apply the warm traditional-meets-premium design concept. As a Pawon Ayu Brand Owner / Marketing Designer, I should see the pamphlet blend traditional Indonesian home-cooking feel with premium modern design, using a palette of wood brown, warm cream, sage green, and gold accents, so the result looks warm, elegant, clean, and like professional culinary business promotion made by an experienced graphic designer.

• Provenance: explicit.
• Trigger/input: any render of the pamphlet canvas.
• Observable result: the pamphlet uses only the mandated palette roles and reads as warm, elegant, and clean.
• Access state: anonymous.
• Failure/recovery: if a non-palette colour is introduced, the composition is flagged and can be reset to the source palette.
• Continuation: the owner continues composing.
• Owner: Pamphlet Editor.

FR-3 — Render the header section. As a Pawon Ayu Brand Owner / Marketing Designer, I should see a header section that displays the Pawon Ayu logo neatly at the top, the main title "PAWON AYU" in bold, large, elegant, easily readable typography, the slogan "Masakan Rumahan, Praktis Setiap Saat", and a soft natural wood texture background with minimalist Javanese traditional ornaments, conveying a trusted, quality, appetizing local culinary brand.

• Provenance: explicit.
• Trigger/input: the pamphlet canvas renders its first band.
• Observable result: the walnut header band shows the centered Pawon Ayu mark, "PAWON AYU" in Fraunces 900 gold-on-walnut at clamp(46px, 12vw, 104px), and the slogan in Jost 400 uppercase on a full-width 1px gold rule, over a soft wood-grain texture with the flat geometric Javanese ornament strip closing the band.
• Access state: anonymous.
• Failure/recovery: if the wood-grain asset fails, the band renders in solid #6B4423 with all text intact; the owner can retry the asset.
• Continuation: the ornament divider leads into the frozen product section.
• Owner: Pamphlet Editor.

FR-4 — Render the frozen product section. As a Pawon Ayu Brand Owner / Marketing Designer, I should see two frozen food product photos in professional product-photography style with warm studio lighting, clearly visible packaging, and natural shadows — Bebek Frozen Rp95.000 and Ayam Frozen Rp85.000 — placed in a premium card composition with rounded corners, cream background, and contrasting, easily readable price labels.

• Provenance: explicit.
• Trigger/input: the owner places or replaces the two frozen product photos.
• Observable result: two premium cards, each with the photo on top at 20px radius, cream surface, and a solid walnut price pill chip with gold tabular figures — Rp95.000 on the Bebek Frozen card and Rp85.000 on the Ayam Frozen card — pinned to the lower-right corner and overlapping the photo edge by 8px.
• Access state: anonymous.
• Failure/recovery: if a photo fails to load, that card shows a cream placeholder with the product name and locked price; the owner can replace the photo.
• Continuation: the ornament divider leads into the menu section.
• Owner: Pamphlet Editor.

FR-5 — Render the home-restaurant menu section. As a Pawon Ayu Brand Owner / Marketing Designer, I should see a section titled "MENU FAVORIT HARI INI" with four realistic, fresh, delicious, appetizing Indonesian food photos — Pepes Pindang Rp17.000, Nasi Kuning Rp12.000, Soto Daging Rp10.000, Nasi Box Rp31.000 — arranged in a neat, balanced, easily readable grid with each menu name and price directly below its photo.

• Provenance: explicit.
• Trigger/input: the owner places or replaces the four menu photos.
• Observable result: a 2×2 grid of four photo tiles, each captioned by a two-line footer inside the tile with the menu name in Fraunces 700 and the price in gold on the same baseline row, separated by a hairline, always directly beneath the photo.
• Access state: anonymous.
• Failure/recovery: if a photo fails to load, that tile shows a cream placeholder with the menu name and locked price; the owner can replace the photo.
• Continuation: the ornament divider leads into the contact footer.
• Owner: Pamphlet Editor.

FR-6 — Render the contact and social media footer. As a Pawon Ayu Brand Owner / Marketing Designer, I should see an elegant, informative footer containing Instagram: pawon ayu, TikTok: pawon ayu, the call-to-action "Lapar? Yuk, pesan sekarang!", the supporting text "Hubungi kami untuk pemesanan", a clean empty area for placing the real ordering QR code, and proportionally sized Instagram, TikTok, and WhatsApp icons.

• Provenance: explicit.
• Trigger/input: the pamphlet canvas renders its final band.
• Observable result: a sage footer band with walnut text, "Lapar? Yuk, pesan sekarang!" as the largest line in Fraunces 800 walnut, "Hubungi kami untuk pemesanan" beneath, a 120×120px dashed 1px gold QR placeholder captioned "Area QR pemesanan", and three labelled icon rows for Instagram, TikTok, and WhatsApp.
• Access state: anonymous.
• Failure/recovery: if an icon asset fails, the row keeps its label text so the handle remains readable; the owner can retry the asset.
• Continuation: the composition is complete and ready for export.
• Owner: Pamphlet Editor.

FR-7 — Reserve a clean QR area without fabricating a QR code. As a Pawon Ayu Brand Owner / Marketing Designer, I should have a clean, empty, correctly sized area reserved for the real ordering QR code, and the system should never generate a fake QR code or invent a contact number.

• Provenance: explicit.
• Trigger/input: the footer renders.
• Observable result: an empty 120×120px dashed gold placeholder captioned "Area QR pemesanan"; no QR pattern, no phone number, and no contact detail is generated anywhere in the pamphlet.
• Access state: anonymous.
• Failure/recovery: if the owner places an image that is not a QR code, the slot still accepts it as the owner's supplied asset; the system never substitutes a generated code.
• Continuation: the owner places the real QR code image and exports.
• Owner: Pamphlet Editor.

FR-8 — Place the real ordering QR code. As a Pawon Ayu Brand Owner / Marketing Designer, I should be able to place the real ordering QR code image into the reserved area.

• Provenance: required_inference (indispensable mechanic: the source requires a clean empty area for placing the real QR code, which requires a placement action).
• Trigger/input: the owner selects a QR image file.
• Observable result: the supplied image fills the reserved 120×120px area, replacing the dashed placeholder while keeping the caption.
• Access state: anonymous.
• Failure/recovery: if the file is unreadable or the wrong format, the slot keeps the dashed placeholder and reports the failure; the owner can retry.
• Continuation: the owner exports the pamphlet.
• Owner: Pamphlet Editor.

FR-9 — Edit the pamphlet's text areas. As a Pawon Ayu Brand Owner / Marketing Designer, I should be able to edit the pamphlet's text areas so that, if AI image generation cannot render text accurately, the composition is prioritized and clean text areas remain available to be edited again in Canva.

• Provenance: explicit.
• Trigger/input: the owner selects a text field in the editor.
• Observable result: the field becomes editable while its source value remains the default; the text-integrity checker reports any deviation from the source strings.
• Access state: anonymous.
• Failure/recovery: if a field is emptied or altered away from its source value, the checker flags that specific field and blocks export until it is restored.
• Continuation: the owner restores or confirms the value and continues.
• Owner: Pamphlet Editor.

FR-10 — Preserve all product names, prices, slogans, and brand information exactly. As a Pawon Ayu Brand Owner / Marketing Designer, I should have every product name, price, slogan, and brand information written exactly as given in the source data, with no price amount changed, no new menu item added, and no contact information fabricated.

• Provenance: explicit.
• Trigger/input: any render or export of the pamphlet.
• Observable result: the strings "PAWON AYU", "Masakan Rumahan, Praktis Setiap Saat", "Bebek Frozen", "Rp95.000", "Ayam Frozen", "Rp85.000", "MENU FAVORIT HARI INI", "Pepes Pindang", "Rp17.000", "Nasi Kuning", "Rp12.000", "Soto Daging", "Rp10.000", "Nasi Box", "Rp31.000", "pawon ayu", "Lapar? Yuk, pesan sekarang!", and "Hubungi kami untuk pemesanan" appear exactly, with no additions.
• Access state: anonymous.
• Failure/recovery: the checker names the offending field; the owner restores it from the source value or uses reset.
• Continuation: export becomes available once all strings match.
• Owner: Pamphlet Editor.

FR-11 — Guarantee no cut-off or misspelled text. As a Pawon Ayu Brand Owner / Marketing Designer, I should never see text that is cut off or misspelled anywhere in the pamphlet.

• Provenance: explicit.
• Trigger/input: any render at 375px, 768px, or 1280px.
• Observable result: every headline, wordmark, label, number, card text, and control stays entirely inside the viewport and its container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, with no other element covering any part of it.
• Access state: anonymous.
• Failure/recovery: if a string would overflow, it wraps or scales rather than clipping; the checker flags any truncation before export.
• Continuation: the owner exports with confidence.
• Owner: Pamphlet Editor.

FR-12 — Maintain the mandated visual hierarchy and whitespace. As a Pawon Ayu Brand Owner / Marketing Designer, I should see a clear visual hierarchy of brand name, products, prices, then contact, with sufficient whitespace so the design is not cramped.

• Provenance: explicit.
• Trigger/input: any render of the pamphlet canvas.
• Observable result: the four bands appear in the fixed order with at least 28px of vertical breathing room between blocks, and nothing is centered that does not need to be.
• Access state: anonymous.
• Failure/recovery: if a block is compressed below the minimum spacing, the layout is flagged and can be reset.
• Continuation: the owner continues composing.
• Owner: Pamphlet Editor.

FR-13 — Keep food photography as the main attraction. As a Pawon Ayu Brand Owner / Marketing Designer, I should see the food photos as the main attraction of the pamphlet.

• Provenance: explicit.
• Trigger/input: the owner places the six photos.
• Observable result: the two frozen product photos and four menu photos dominate the composition, each inside a cream card with a 20px radius and a 1px walnut hairline, with no photo bled off the pamphlet edge except the header's wood-grain texture band.
• Access state: anonymous.
• Failure/recovery: if a photo is missing, its placeholder keeps the composition readable and the owner can replace it.
• Continuation: the owner exports.
• Owner: Pamphlet Editor.

FR-14 — Export a high-resolution 4:5 vertical pamphlet. As a Pawon Ayu Brand Owner / Marketing Designer, I should be able to export the finished pamphlet as a high-resolution, sharp-detail, professional-quality vertical 4:5 image suitable for the Instagram feed.

• Provenance: explicit.
• Trigger/input: the owner activates the export control.
• Observable result: a high-resolution image artifact with a 4:5 vertical aspect ratio containing the complete composition.
• Access state: anonymous.
• Failure/recovery: if export fails, the editor reports the failure and keeps the composition intact so the owner can retry; export is blocked while any required string is missing or altered.
• Continuation: the owner downloads the artifact and publishes it to the Instagram feed.
• Owner: Pamphlet Editor.

FR-15 — Avoid busy ornament, unreadable fonts, excessive 3D, and cheap-template looks. As a Pawon Ayu Brand Owner / Marketing Designer, I should see the pamphlet avoid overly busy ornaments, hard-to-read decorative fonts, excessive 3D effects, and cheap-template looks, retaining an authentic, trusted Indonesian culinary business feel with a strong brand identity.

• Provenance: explicit.
• Trigger/input: any render of the pamphlet canvas.
• Observable result: ornamentation is limited to the flat geometric Javanese tile strip and three line-drawn icons; headings use Fraunces and body text uses Jost; no 3D text effects appear; the composition reads as art-directed rather than templated.
• Access state: anonymous.
• Failure/recovery: if a non-conforming element is introduced, the composition can be reset to the source defaults.
• Continuation: the owner exports.
• Owner: Pamphlet Editor.

FR-16 — Enter the workspace from the Landing page. As a Pawon Ayu Brand Owner / Marketing Designer, I should be able to reach the pamphlet-design workspace from an anonymous Landing page that explains what the workspace produces.

• Provenance: required_inference (indispensable prerequisite: the accepted work needs an anonymous entry surface that explains the workspace before creation begins).
• Trigger/input: the owner opens the application root.
• Observable result: the Landing page renders the Pawon Ayu brand header, the ornament divider, a static preview of the pamphlet's section order, the source-facts reference, and an entry control.
• Access state: anonymous; no identity required.
• Failure/recovery: if a preview asset fails, the affected band renders as a labeled cream placeholder and the entry control remains available.
• Continuation: the owner activates the entry control and lands in the Pamphlet Editor.
• Owner: Landing.

4. User Personas

Pawon Ayu Brand Owner / Marketing Designer

Product context. The requester is the person responsible for Pawon Ayu's promotional design. They run a small Indonesian culinary business selling frozen products (Bebek Frozen, Ayam Frozen) and daily home-style dishes (Pepes Pindang, Nasi Kuning, Soto Daging, Nasi Box), and they promote it through an Instagram feed viewed mostly on phones. They are not a professional designer and do not want to assemble a pamphlet from scratch in a general-purpose tool; they want a workspace that already knows the brand, the exact catalogue, and the exact prices, and that produces a premium-looking result without design expertise.

Primary goal. Produce one premium, warm, appetizing 4:5 vertical Pawon Ayu promotional pamphlet that is easy to read on a phone screen and increases prospective customers' interest in placing an order.

Distinct accepted responsibilities.

• Compose the pamphlet's four bands in the mandated order: brand header, frozen products, favorite menu, contact footer.
• Place the two frozen product photos and the four menu photos so that food photography is the main attraction.
• Keep every product name, price, slogan, and brand string exactly as given, with no price change, no added menu item, and no fabricated contact information.
• Reserve a clean, empty area for the real ordering QR code and place that real QR code — never a generated or fake one.
• Edit the pamphlet's text areas so the composition stays clean and the text remains editable again in Canva if needed.
• Export a high-resolution 4:5 vertical artifact ready for the Instagram feed.

Relevant inputs and decisions. Which photos to use for the two frozen products and the four menu items; whether to keep or replace the default text values; when the composition is ready to export; whether the QR area is correctly reserved and filled with the real code.

Interactions with other accepted participants. There are no other active human participants in this generation. The pamphlet's audience — prospective customers — is affected by the outcome but does not interact with the system; they encounter the exported pamphlet on Instagram and act on the ordering QR code outside the system. The system itself is the owner's only counterpart, and it acts as a guardrail: it holds the source strings fixed, blocks export when a required string is missing or altered, and never fabricates a QR code or contact detail.

Observable success. A high-resolution 4:5 vertical pamphlet in which the Pawon Ayu header, both frozen product cards with Rp95.000 and Rp85.000, the four-item "MENU FAVORIT HARI INI" grid with Rp17.000, Rp12.000, Rp10.000, and Rp31.000, and the sage contact footer with the CTA, supporting text, reserved QR area, and three social icon rows all render correctly, with no cut-off or misspelled text, at 375px, 768px, and 1280px.

Source-backed constraints. The owner must not change price amounts, add menu items, or invent contact information; must not create a fake QR code; must keep the format at 4:5 vertical; and must avoid busy ornament, hard-to-read decorative fonts, excessive 3D effects, and cheap-template looks.

5. Core User Flows

Flow A — Enter the workspace and understand what will be produced

1. The Pawon Ayu Brand Owner / Marketing Designer opens the application root on a phone browser.
2. The Landing page renders anonymously: the walnut header band with the Pawon Ayu mark, "PAWON AYU" in Fraunces 900 gold-on-walnut, and the slogan "Masakan Rumahan, Praktis Setiap Saat" on a full-width 1px gold rule; the flat geometric Javanese ornament strip; a static preview of the pamphlet's four bands in order; and the read-only source-facts reference listing the exact product names, menu names, prices, slogan, and social handles.
3. The owner reads the section-order preview and confirms the hierarchy: brand name → products → prices → contact.
4. The owner activates the entry control.
5. Observable result: the Pamphlet Editor opens with the live 4:5 vertical pamphlet canvas in the mandated order.
6. Failure/recovery: if a preview asset fails to load, the affected band shows a labeled cream placeholder at the correct aspect ratio and the entry control remains available; the owner proceeds into the editor regardless.
7. Next step: the owner begins placing photos.

Flow B — Compose the frozen product section

1. The owner is in the Pamphlet Editor with the header band already rendered.
2. The owner places the Bebek Frozen photo into the first frozen product card.
3. The owner places the Ayam Frozen photo into the second frozen product card.
4. Observable result: two premium cards render side by side from 560px and as a 1-column stack at 375px, each with the photo on top at 20px radius, a cream surface, and a solid walnut price pill chip with gold tabular figures — Rp95.000 on the Bebek Frozen card and Rp85.000 on the Ayam Frozen card — pinned to the lower-right corner and overlapping the photo edge by 8px.
5. Failure/recovery: if a photo fails to load, that card shows a cream placeholder with the product name and its locked price; the owner replaces the photo and the card recovers.
6. Next step: the owner moves to the menu section.

Flow C — Compose the favorite menu section

1. The owner is in the Pamphlet Editor at the "MENU FAVORIT HARI INI" section.
2. The owner places the four menu photos: Pepes Pindang, Nasi Kuning, Soto Daging, and Nasi Box.
3. Observable result: a 2×2 grid of four photo tiles renders, each captioned by a two-line footer inside the tile with the menu name in Fraunces 700 and the price in gold on the same baseline row, separated by a hairline, always directly beneath the photo — Rp17.000, Rp12.000, Rp10.000, and Rp31.000 respectively. At 375px the grid wraps into a single readable column.
4. Failure/recovery: if a photo fails to load, that tile shows a cream placeholder with the menu name and locked price; the owner replaces the photo and the tile recovers.
5. Next step: the owner moves to the contact footer.

Flow D — Complete the contact footer and reserve the QR area

1. The owner is in the Pamphlet Editor at the footer band.
2. The owner confirms the footer content: Instagram "pawon ayu", TikTok "pawon ayu", the call-to-action "Lapar? Yuk, pesan sekarang!" as the largest line in Fraunces 800 walnut, the supporting text "Hubungi kami untuk pemesanan", and three proportionally sized icon rows for Instagram, TikTok, and WhatsApp.
3. The owner confirms the reserved QR area: a clean, empty 120×120px dashed 1px gold placeholder captioned "Area QR pemesanan".
4. The owner places the real ordering QR code image into the reserved area.
5. Observable result: the supplied QR image fills the 120×120px area, replacing the dashed placeholder while keeping the caption; no generated QR pattern and no invented phone number appear anywhere in the pamphlet.
6. Failure/recovery: if the QR image file is unreadable or the wrong format, the slot keeps the dashed placeholder and reports the failure; the owner retries with a valid file.
7. Next step: the owner verifies text and exports.

Flow E — Verify text integrity and export the pamphlet

1. The owner is in the Pamphlet Editor with all six photos placed and the QR code in place.
2. The owner reviews the composition at 375px, 768px, and 1280px.
3. The text-integrity checker verifies that every required string is present, matches the source exactly, is not truncated, and is not misspelled: "PAWON AYU", "Masakan Rumahan, Praktis Setiap Saat", "Bebek Frozen", "Rp95.000", "Ayam Frozen", "Rp85.000", "MENU FAVORIT HARI INI", "Pepes Pindang", "Rp17.000", "Nasi Kuning", "Rp12.000", "Soto Daging", "Rp10.000", "Nasi Box", "Rp31.000", "pawon ayu", "Lapar? Yuk, pesan sekarang!", and "Hubungi kami untuk pemesanan".
4. Observable result: the checker reports all strings valid and export becomes available.
5. The owner activates the export control.
6. Observable result: a high-resolution 4:5 vertical image artifact is produced containing the complete composition.
7. Failure/recovery: if a field is missing or altered, the checker names that specific field and export is blocked; the owner restores the source value or uses the reset control, then retries. If export itself fails, the editor reports the failure and keeps the composition intact so the owner can retry.
8. Next step: the owner downloads the artifact and publishes it to the Pawon Ayu Instagram feed, where prospective customers view it on their phones and act on the ordering QR code.

Flow F — Refine the pamphlet's text areas for a Canva hand-off

1. The owner is in the Pamphlet Editor and wants to guarantee that text can be edited again in Canva if needed.
2. The owner selects a text field and confirms its value matches the source string.
3. Observable result: the field is editable while its source value remains the default, and the text-integrity checker reports whether the current value still matches the source.
4. Failure/recovery: if the owner empties or alters a field away from its source value, the checker flags that specific field and blocks export until it is restored.
5. Next step: the owner restores or confirms the value, then returns to Flow E to export.

6. Visuals Colors and Theme

The CREATIVE DIRECTION is authoritative for this section. The muse is Charles & Ray Eames; the headline direction is warm mid-century modernism for an Indonesian home kitchen.

Colour tokens (light mode).

Card hairline: #6B4423 at 14%. Card top edge: 2px gold rule. Card shadow: 0 10px 26px rgba(107,68,35,0.13), single layer only. Gold #B98A2E is used at 18px+ only, or on walnut where it reads ~7:1. Approximate area distribution: 55% cream, 22% walnut, 15% card cream, 8% gold + sage combined.

Typography.

• Headings: Fraunces, 700–900, SOFT axis high, WONK on. "PAWON AYU" is all caps, tracking -0.01em, clamp(46px, 12vw, 104px), stacked on two lines at 375px and one line from 768px. Section titles ("MENU FAVORIT HARI INI") are 800 weight, uppercase, tracking 0.06em, clamp(20px, 4.6vw, 34px). Prices use Fraunces 700 with tabular figures so Rp95.000 and Rp85.000 align on the decimal.
• Body: Jost.
• Scale: 1.333 modular on a 16px base — 16 / 21 / 28 / 38 / 50 / 67 / 104. Mobile display 46px, tablet 72px, desktop 104px. Menu names 18px/1.3, prices 20px, body 16px/1.6, footer labels 13px uppercase tracking 0.12em.

Shape language. Eames organic-modern: cards at 20px radius with one soft, warm-tinted shadow and no second layer. Buttons are full pills. Section boundaries are not straight — each band closes with a shallow 40px-radius curve or a single thin gold horizontal rule, echoing a mid-century panel seam. Ornaments are limited to a repeating Javanese-inspired geometric tile row (triangles and half-circles) rendered as a flat 2-colour strip in gold on walnut, 18px tall, used as a divider between header and products and again above the footer.

Spacing rhythm. Single vertical 4:5 poster column, max-width 720px, centered, with 24px side margins at 375px and 56px at 1280px. Every block keeps at least 28px of vertical breathing room.

Imagery style. Warm natural-light food and product photography only. Frozen products: kraft-and-cream packaging on a walnut board, low 45-degree studio light, visible soft shadow, condensation detail on the pack. Menu: overhead and 30-degree close shots on cream ceramic or banana leaf, steam and texture visible, sage-green cloth as the recurring prop. All photos sit inside the cream cards with a 20px radius and a 1px walnut hairline; no photo is bled off the pamphlet edge except the header's wood-grain texture band. Illustration is limited to the flat geometric Javanese tile ornament strip and three line-drawn icons.

7. Signature Design Concept

The public entry is a full-bleed walnut header band, not a centered SaaS hero.

A soft warm-lit wood-grain photograph fills the band at 88% opacity under a #6B4423 multiply, so the grain is felt rather than seen. Centered inside it: a 64px circular Pawon Ayu mark drawn as a gold line illustration of a traditional Javanese roof over a bowl; then "PAWON AYU" in Fraunces 900 gold-on-walnut spanning the full column width at clamp(46px, 12vw, 104px); then the slogan "Masakan Rumahan, Praktis Setiap Saat" in Jost 400 uppercase, tracking 0.14em, sitting on a 1px gold rule that runs the full column width. The band closes with the flat geometric Javanese ornament strip in gold.

Below the fold line, the first product card's warm studio photo already peeks in, so the eye is pulled from brand to food in one scroll.

This concept recomposes only accepted content and controls: the brand mark, the wordmark, the slogan, the ornament strip, and the entry into the editor. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The full-bleed walnut wood-grain header band carrying the Pawon Ayu mark, the "PAWON AYU" wordmark, and the slogan on its gold rule.
• Input → transformation → outcome thesis. As the owner scrolls the Landing page, each section enters with a single 400ms warm fade-and-rise (12px) — the header band settles first, then the ornament strip, then the section-order preview — so the brand reads before the food, and the eye is delivered to the entry control and the first product card peeking below the fold.
• Motion vocabulary. One 400ms warm fade-and-rise (12px) per section on entry; one slow 6s crossfade cycling between the two frozen product photos on the hero card; a 160ms colour swap on the CTA pill. No bounce, no particles, no parallax stacks.
• Composed first frame. The walnut band at full width with the wood grain at 88% opacity under the multiply, the gold circular mark centered, "PAWON AYU" spanning the column in Fraunces 900 gold-on-walnut, the slogan on its full-width 1px gold rule, and the flat geometric Javanese ornament strip closing the band — with the first product card's warm studio photo already visible below the fold line.
• Reduced-motion state. Under prefers-reduced-motion, all reveals resolve instantly, the product crossfade becomes a static side-by-side pair, and the menu grid wraps into a single readable column.

9. Non-Functional Requirements

NFR-1 — Format and resolution. The exported pamphlet must be a vertical 4:5 ratio image at high resolution with sharp detail and professional visual quality, suitable for the Instagram feed. Provenance: explicit. Rationale: the source mandates the 4:5 vertical Instagram-feed format and high-resolution, sharp-detail output.

NFR-2 — Mobile readability. The pamphlet must be easy to read on a phone screen. Provenance: explicit. Rationale: the source states the final desired result is a pamphlet that is easy to read on a phone screen.

NFR-3 — Text integrity. No text may be cut off or misspelled. Every headline, wordmark, label, number, card text, and control must stay entirely inside the viewport and its container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, with no other element covering any part of it. Provenance: explicit. Rationale: the source states no text may be cut off or misspelled.

NFR-4 — Data fidelity. All product names, prices, slogans, and brand information must be written exactly as given; price amounts must not be changed, rounded, or reformatted; no menu item may be added; no contact information may be fabricated. Provenance: explicit. Rationale: the source states these as hard constraints.

NFR-5 — QR and contact integrity. The system must never generate a fake QR code or invent a contact number. The QR area must remain a clean, empty, correctly sized placeholder until the owner places the real code. Provenance: explicit. Rationale: the source explicitly prohibits a fake QR code and invented contact numbers.

NFR-6 — Visual restraint. The design must avoid overly busy ornaments, hard-to-read decorative fonts, excessive 3D effects, and cheap-template looks, and must retain an authentic, trusted Indonesian culinary business feel with a strong brand identity. Provenance: explicit. Rationale: the source states these as visual and layout constraints.

NFR-7 — Palette discipline. The palette is limited to wood brown, warm cream, sage green, and gold accents, blended harmoniously rather than excessively. Blue, indigo, and violet are excluded. Provenance: explicit (palette) and direction-derived (the exclusion of blue/indigo/violet). Rationale: the source mandates the four-colour palette and a harmonious, non-excessive blend.

NFR-8 — Whitespace and hierarchy. The design must maintain a clear visual hierarchy of brand name, products, prices, then contact, with sufficient whitespace so the design is not cramped. Provenance: explicit. Rationale: the source states these as layout requirements.

NFR-9 — Editable text areas. If AI image generation cannot render text accurately, the composition must be prioritized and clean text areas must remain available to be edited again in Canva. Provenance: explicit. Rationale: the source states this as a fallback requirement.

NFR-10 — Anonymous access. Both pages are anonymously reachable; no account, login, or session continuity is required. Provenance: required_inference (from the accepted access contract). Rationale: the accepted work is a single-session design task with no durable private state, commitment, or entitlement to protect.

10. Tech Stack

• Frontend: React (web), delivering the Landing page and the Pamphlet Editor as a custom first-party UI.
• Backend: Python / FastAPI, serving the pamphlet composition, text-integrity checking, and export endpoints.
• Storage: object storage for uploaded photos and the real QR code image, plus the generated export artifacts. No relational database is required for the current single-pamphlet scope.
• Containerization: Docker with docker-compose for local and deployment orchestration.
• Kubernetes: not required for the current scope; the workload is a single frontend and a single backend service.

Provenance: default — not specified by user. The source specifies no technology choices; these are coherent defaults for the accepted delivery shape (custom UI plus generated document artifact).

11. Assumptions and Constraints

Assumptions.

• A-1. The brand owner supplies the two frozen product photos, the four menu photos, and the real ordering QR code image; the system does not source or generate them. [Assumption — not specified by user]
• A-2. The pamphlet is a single instance; the current scope does not require managing multiple pamphlets or campaigns. [Assumption — not specified by user]
• A-3. The Canva hand-off is a fallback for text accuracy, not a required integration; the system satisfies it by guaranteeing accurate, uncut, correctly spelled text and clean, editable text areas. [Assumption — derived from the source's conditional wording]
• A-4. The pamphlet is published to Instagram by the owner outside the system; the system does not publish to social media. [Assumption — not specified by user]

Constraints.

• C-1. All product names, prices, slogans, and brand information must be written exactly as given in the source data.
• C-2. Price amounts must not be changed, rounded, or reformatted: Rp95.000, Rp85.000, Rp17.000, Rp12.000, Rp10.000, Rp31.000 exactly as given.
• C-3. No new menu items, products, or social handles may be added beyond Instagram "pawon ayu" and TikTok "pawon ayu".
• C-4. No contact information may be fabricated, and no fake QR code may be created.
• C-5. No text may be cut off or misspelled.
• C-6. The format must be vertical 4:5 ratio for the Instagram feed.
• C-7. Overly busy ornaments, hard-to-read decorative fonts, excessive 3D effects, and cheap-template looks must be avoided.
• C-8. If AI image generation cannot produce accurate text, the visual composition must be prioritized and clean text areas must be provided to be edited again in Canva.
• C-9. The palette is limited to wood brown, warm cream, sage green, and gold accents; blue, indigo, and violet are excluded.
• C-10. The section order is fixed: brand header, frozen products, favorite menu, contact footer.

12. Glossary

• Pamphlet — the single 4:5 vertical promotional composition produced by the system for Pawon Ayu.
• Frozen product card — a premium card presenting one frozen product photo, its name, and its price chip.
• Menu tile — one cell of the 2×2 "MENU FAVORIT HARI INI" grid, presenting a menu photo with the name and price directly beneath it.
• Price chip — the solid walnut pill containing a gold tabular price figure, pinned to a frozen product card's lower-right corner.
• Ornament strip — the repeating flat geometric Javanese tile row (triangles and half-circles) in gold on walnut, 18px tall, used as a section divider.
• QR area — the clean, empty 120×120px dashed 1px gold placeholder captioned "Area QR pemesanan", reserved for the real ordering QR code.
• Text-integrity checker — the editor component that verifies every required string is present, matches the source exactly, is not truncated, and is not misspelled, and that blocks export while a required string is missing or altered.
• Export artifact — the high-resolution 4:5 vertical image produced by the export control.
• Source value — the exact string supplied by the authoritative source for a given field, which the system must render unchanged.