wooden-poster

byRizal Alfian

Buatkan menjadi poster seperti contoh yang akan aku kirim

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

Page 1 of 10

System Requirements Document for wooden-poster

1. Introduction

wooden-poster turns the user’s previously supplied October menu schedule into a cheerful, colorful poster based on the supplied poster example. The poster must preserve the original menu table’s contents exactly—including dates, portion counts, and menu entries—and keep the information easy to read.

The intended user is the Pembuat Poster Menu, who supplies or has already supplied the October schedule and poster example and needs the schedule presented as a poster.

2. System Overview

The system provides two custom pages: Landing, an anonymous entry page, and Poster, which presents the October menu as a poster. The poster uses the supplied example as a visual and layout reference while retaining the exact contents of the authoritative October menu schedule.

The schedule and example are required source materials. The poster is not complete if the schedule is unavailable, if any source table content is changed or omitted, or if the resulting table is not legible. The supplied example contains visual details such as colorful table sections and decorative food imagery; these are visual references, not verified facts about the October schedule.

No additional personas, account requirements, menu-editing capabilities, or poster-export workflows are established by the source.

Page 2 of 10

2a. Product Interpretation and Delivery Boundary

The current deliverable is an on-screen poster based on the supplied October schedule and poster example. Landing is anonymously accessible; Poster displays the menu poster without requiring an account. The schedule is the authoritative source for poster content, and the example is the authoritative visual reference for the requested cheerful, colorful style and poster layout.

The supplied schedule’s actual rows and values are not present in the available source material for this document. They must be recovered from the previously sent schedule before the poster can be completed. Do not substitute the example image’s September menu or invent October dates, portion counts, or menu entries.

2b. Source Content Inventory

The authoritative content-source directive identifies the previously sent October menu schedule and requires its entire table—dates, portion counts, and menu entries—to be used exactly as supplied. That schedule’s contents are not available in the materials provided for this document. Therefore, no specific dates, counts, or menu entries can be verified or reproduced here.

The supplied poster example is a visual and structure reference, not a content source. Its visible September menu data, organization name, slogans, dates, food imagery, and other text are not to be treated as October schedule facts or copied as poster content unless independently present in the authoritative October schedule.

2c. Page Content and Component Coverage

Page 3 of 10

Landing

  • Information and state
    • Anonymous entry point explaining that the October menu schedule will be presented as a poster using the supplied example as a visual reference.
    • The schedule and example are required inputs to the accepted poster-making outcome.
  • Primary and supporting actions
    • Provide a clear continuation to the poster when the required source materials are available.
    • If the October schedule or example is unavailable, communicate which source is missing and allow the user to continue once it is available. Do not fabricate or silently substitute source content.
  • Domain entities
    • October menu schedule: authoritative poster content, including all original dates, portion counts, and menu entries.
    • Poster example: visual and layout reference.
  • Component responsibilities
    • Entry explanation and source-availability status.
    • Continuation to the poster.
  • States
    • Loading: indicate that the poster source materials are being prepared or checked.
    • Empty: explain that the required schedule or example is not available.
    • Success: provide access to the poster when the required materials are available.
    • Error and recovery: identify unavailable source material and permit continuation after it is recovered. Do not replace missing schedule data with invented or example-image data.
Page 4 of 10

Poster

  • Information and state
    • The October menu poster, preserving every source-table date, portion count, and menu entry exactly.
    • A cheerful, colorful poster treatment based on the supplied example, with the menu table remaining easy to read.
    • The example’s visual organization may inform the poster layout; its September menu content must not replace the October schedule.
  • Primary and supporting actions
    • View the poster and its complete menu table.
    • Continue viewing the poster after source recovery if the schedule was initially unavailable.
  • Domain entities
    • October menu schedule and its original table values.
    • Poster presentation derived from the schedule and visual reference.
  • Component responsibilities
    • Poster title and visual framing appropriate to the October schedule.
    • Menu table that retains all source rows and values without alteration.
    • Color and decorative treatment that supports the requested cheerful style without reducing legibility.
  • States
    • Loading: show that the poster is being prepared from the source schedule.
    • Empty: explain that the poster cannot be completed until the October schedule is available.
    • Success: show the complete poster and readable table.
    • Error and recovery: identify missing or unavailable source content; resume poster presentation when the authoritative schedule is available. Never fill gaps with guessed values or September example content.
Page 5 of 10

3. Functional Requirements

  1. As a Pembuat Poster Menu, I should be able to access the poster-making entry point anonymously, so that I can begin the accepted poster journey without an account.
    Provenance: required_inference from the versioned page and access contract.
    Lifecycle and acceptance: The user opens Landing and sees the poster-making context. The page provides continuation to Poster when the required source materials are available. If a required source is unavailable, the page identifies that condition and the user can continue after recovery. No account or identity flow is required.

  2. As a Pembuat Poster Menu, I should have the previously supplied October menu schedule available as the poster’s content source, so that the poster can use the schedule the user requested.
    Provenance: explicit for using the previously supplied schedule; required_inference for its availability as a prerequisite.
    Lifecycle and acceptance: The schedule is made available to the poster-making journey. Its dates, portion counts, and menu entries remain the authoritative source. If it cannot be accessed, the poster is not completed with guessed or substituted content; the user is informed that the schedule is unavailable and can continue when it is recovered.

  3. As a Pembuat Poster Menu, I should have the supplied poster example available as a visual reference, so that the poster can follow the requested example’s style and layout.
    Provenance: explicit for using the example as the poster reference; required_inference for its availability as a prerequisite.
    Lifecycle and acceptance: The example informs the poster’s visual treatment and layout. If it is unavailable, the user is informed and the poster is not represented as having followed that reference until it is recovered.

  4. As a Pembuat Poster Menu, I should have a poster made from the supplied example, so that the October schedule is presented in the requested poster form.
    Provenance: explicit.
    Lifecycle and acceptance: From Landing, the user continues to Poster when the required sources are available. The poster uses the example as a visual and layout reference and the October schedule as its content source. The poster is the observable result. If a required source is unavailable, the user is informed and can continue after recovery.

  5. As a Pembuat Poster Menu, I should have the poster use a cheerful and colorful style like the supplied example, so that the result reflects the requested visual character.
    Provenance: explicit.
    Lifecycle and acceptance: Poster presents the menu with a cheerful, colorful treatment informed by the example. The treatment must not obscure or compromise the menu table’s readability. If the example is unavailable, the user is informed that the visual reference cannot be applied until it is recovered.

  6. As a Pembuat Poster Menu, I should have the entire October menu table preserved exactly as originally supplied, including dates, portion counts, and menu entries, so that the poster remains faithful to the source schedule.
    Provenance: explicit.
    Lifecycle and acceptance: Poster presents all source-table content without changing, omitting, or inventing dates, portion counts, or menu entries. The available source material for this document does not include the schedule’s actual values; the poster cannot be considered complete until those values are recovered. If the schedule is unavailable, the user is informed and the poster does not substitute the example’s September data.

  7. As a Pembuat Poster Menu, I should be able to read the menu table easily on the poster, so that the schedule remains usable despite its colorful presentation.
    Provenance: explicit.
    Lifecycle and acceptance: Poster presents the complete table with a visual treatment that keeps its contents legible. If the table cannot be presented legibly, the poster is not accepted as complete; the presentation must be corrected without changing the source values.

Page 6 of 10

4. User Personas

Pembuat Poster Menu

Provenance: required_inference in the accepted Planning Scope persona catalog.

The Pembuat Poster Menu has an October menu schedule previously supplied to the project and a poster example to use as a visual reference. Their goal is to turn the schedule into a cheerful, colorful poster while preserving the complete table exactly and keeping it easy to read. They provide or make available the schedule and example, then review the resulting poster. Success is a poster that reflects the example’s visual style and layout while retaining every original date, portion count, and menu entry. The persona has no source-established account, biography, or additional responsibilities.

5. Core User Flows

Create and view the October menu poster

  1. The Pembuat Poster Menu opens Landing anonymously.
  2. The user continues to Poster when the previously supplied October schedule and poster example are available.
  3. The system uses the October schedule as the content source and the example as the visual and layout reference.
  4. The user sees the poster on Poster. Its table retains every source date, portion count, and menu entry exactly, and its cheerful, colorful treatment keeps the table easy to read.
  5. If the schedule or example is unavailable, the user is informed which source is missing. The poster is not completed using invented values or the example’s September menu. The user can continue when the missing source is recovered.
  6. If the table is not legible, the poster is not accepted as complete; its presentation is corrected without changing the source content.
Page 7 of 10

6. Visuals Colors and Theme

The supplied poster example is the visual reference for a cheerful, colorful poster and its layout. The authoritative creative direction specifies a calm, paper-like poster object with color used in restrained, flat accents; this is reconciled with the user’s request by keeping the poster visibly cheerful and colorful while ensuring the table remains the dominant, readable information object. Do not copy the example’s September menu data or unverified organization-specific text.

  • Muse: Kenya Hara.
  • Headline: “Emptiness as content — a wooden poster where the menu is the object.”
  • Palette: warm paper background #F4EFE6; paper-white surface #FFFDF8; charcoal text #26221D; terracotta primary accent #8C3A2E; mustard secondary accent #D98A1F; muted metadata #9C9184. No blue, indigo, violet, or gradients.
  • Color use: use flat color fields and thin rules. Keep the table’s text in charcoal. Use terracotta and mustard as accents, with cheerful color blocks informed by the supplied example only where they do not reduce legibility or alter the source table.
  • Typography: Shippori Mincho, weight 600, for the poster title; weight 400 for section openers. Zen Kaku Gothic New for body and labels. Use tabular figures for dates and portion counts. Do not use Inter, Roboto, Poppins, Montserrat, or a geometric sans as the display face.
  • Type scale: display sizes 132/88/64/44/32/22/16/13px; poster title clamp(56px, 12vw, 132px), line-height 0.92, with 0.02em tracking on the month word. Table body 16px with 1.75 line-height; metadata 13px. Section labels 12–13px, uppercase, 0.18em tracking.
  • Shape and rules: square or near-square forms; paper cards at most 2px radius; table corners 0px; 1px charcoal hairlines at 12–18% opacity; one 2px terracotta rule as the strongest line. Small circular seasonal marks and portion-count chips only; no pill-shaped elements or frosted surfaces.
  • Spacing and layout: single-column poster on a warm paper ground. Minimum margins: 24px at 375px, 64px at 768px, and 96px at 1280px. Reading order: month numeral and title, thin terracotta rule, two-line subtitle, then the dominant menu table with columns for Tanggal / Porsi / Menu. Separate weeks with a full-width hairline and a small mustard stamp at the left margin.
  • Responsive table: at 375px, collapse the three-column table into stacked cards per date: date and portion chip on one line, menu below. Keep all readable text and controls within the viewport and their containers at 375px, 768px, and 1280px. Do not let decoration cover readable content.
  • Imagery and texture: no photography in the hero. Use a subtle SVG paper-grain texture at 4% opacity, flat SVG seasonal marks rather than emoji, and a thin topographic-style ruled line at the foot. Do not add photographs of people or stock food photography to the hero. The supplied example’s imagery may inform visual context but does not authorize copying unverified content or adding unrelated imagery.
  • Avoid: generic indigo/blue-on-white SaaS styling, gradient blobs, frosted glass, hover-lift card grids, rounded pill buttons, large card radii, and competing illustrations.
Page 8 of 10

7. Signature Design Concept

Treat the poster itself as the first-screen object, not as a marketing hero. A warm paper sheet fills the view with generous margins. “OKTOBER” sits at the top in Shippori Mincho, resting on a 2px terracotta rule. A small mustard circular mark accompanies the heading. Beneath it, a concise source line introduces the October schedule, followed immediately by the menu table as the dominant object.

The table’s dates, portion counts, and menu entries come only from the recovered authoritative October schedule. Use the supplied example to inform a cheerful, colorful poster treatment, but do not copy its September data or unverified text. Keep the table legible and complete; at narrow widths, stack each date’s portion and menu information rather than squeezing the columns. A subtle paper grain and fine ruled footer complete the printed-object composition without competing with the menu.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction)
Motion Tempo: still
Hero Dimensionality: flat

Landing Hero Motion Brief

  • Focal subject: the October menu poster itself, with the table as the primary visual object.
  • Input → transformation → outcome thesis: the user arrives at the poster entry point; the available October schedule is presented in the example-informed poster treatment; the user sees the complete, readable menu poster.
  • Motion vocabulary: almost none. Use only the direction’s slow 600ms fade-and-rise (12px) for the title and table rows as they enter, staggered by 40ms, and a 200ms opacity crossfade when a week filter is toggled. Do not add a week-filter capability unless it is part of the accepted poster presentation; no filter is established by the user requirements, so the crossfade applies only if such a control is otherwise present in the accepted design. No parallax, hover-lift, bounce, or continuous looping.
  • First frame: warm paper ground, “OKTOBER” title and terracotta rule, source line, and the first visible rows of the menu table. Do not add a CTA or competing illustration to the poster composition.
  • Reduced motion: with prefers-reduced-motion, replace motion with instant state changes.
Page 9 of 10

9. Non-Functional Requirements

  1. Exact source fidelity — explicit: Preserve the October menu table exactly as supplied, including dates, portion counts, and menu entries. Do not invent or substitute values. The actual schedule values must be recovered before the poster can be considered complete.
  2. Legibility — explicit: Keep the menu table easy to read despite the cheerful, colorful visual treatment.
  3. Visual-reference fidelity — explicit: Use the supplied poster example as the reference for the requested cheerful, colorful style and poster layout. Do not treat its September menu data as October content.
  4. Responsive readability — explicit in the creative direction: Keep readable text and controls whole and within their containers at 375px, 768px, and 1280px. At 375px, use the specified stacked-card table layout so cells do not become unreadable slivers.
  5. Reduced motion — explicit in the creative direction: With prefers-reduced-motion, motion stops and state changes are immediate.
  6. Motion restraint — explicit in the creative direction: Do not use parallax, hover-lift, bounce, or continuous looping.

10. Tech Stack

  • Presentation: [Default — not specified by user] React for the custom pages and poster presentation.
  • Storage: [Default — not specified by user] no persistent storage is required by the accepted behavior; use the supplied schedule and example as source inputs.
  • Deployment: [Default — not specified by user] no deployment platform or container requirement is specified.

11. Assumptions and Constraints

  • The previously sent October schedule is the authoritative content source, but its actual table values are not available in the materials provided for this document. Recover that source before completing the poster. Do not use the example’s September schedule as a substitute.
  • The supplied poster example is a visual and layout reference. Its unverified text, organization details, and menu data are not accepted October poster content.
  • The poster must preserve the complete source table exactly and remain easy to read.
  • The accepted page contract is exactly Landing followed by Poster. Both are anonymously accessible; do not add pages or account requirements.
  • The accepted active-human persona set contains exactly Pembuat Poster Menu.
  • No export, download, editing, sharing, or account-management capability is established by the accepted requirements.
  • The creative direction’s week-filter motion note does not establish a week-filter feature. Do not add one unless separately accepted.
Page 10 of 10

12. Glossary

  • October menu schedule: The previously supplied authoritative table containing the dates, portion counts, and menu entries to be presented on the poster.
  • Poster example: The user-supplied image used as the visual and layout reference, not as the source of October menu data.
  • Source fidelity: Preserving the authoritative schedule’s contents exactly without omission, alteration, or invention.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open entry point anonymously
Landing: Review poster-making context
Landing: Check source availability
Landing: See missing source notice
Landing: Continue once sources recovered
Poster: View October menu poster
Poster: Verify every date, portion, menu
Poster: Read menu table legibly
Poster: See source-missing notice
Poster: Resume viewing after recovery

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open entry point anonymously
Landing: Review poster-making context
Landing: Check source availability
Landing: See missing source notice
Landing: Continue once sources recovered
Poster: View October menu poster
Poster: Verify every date, portion, menu
Poster: Read menu table legibly
Poster: See source-missing notice
Poster: Resume viewing after recovery