System Requirements Document for posting-web

1. Introduction

posting-web is a public website front page for displaying the supplied poster of Pak Ramlan. The poster must be presented at 1080 × 1350 px (4:5 ratio) without cropping Pak Ramlan’s photo or any important text. The page serves both the publisher responsible for presenting the poster and visitors who view it.

2. System Overview

The current product is a single anonymous public front page. Its primary content is the supplied poster, displayed whole in the hero area. The accepted active human personas are Website Owner / Publisher and Site Visitor.

The publisher’s accepted outcome is the poster displayed on the front page at the agreed size without cropping. The visitor’s accepted outcome is being able to see the poster and its important content completely. The current scope does not establish an editing interface, upload workflow, account system, or additional website destinations.

2a. Product Interpretation and Delivery Boundary

The website’s front page is publicly accessible and displays the poster; no sign-in is required to view it. The poster is the supplied image, not a newly generated or substituted image. The accepted presentation size is 1080 × 1350 px (4:5 ratio), and the photo and important text must remain uncropped.

The current delivery is limited to the front page and its poster presentation. The publisher’s responsibility is represented by the resulting public display; no separate publishing controls or content-management workflow are specified.

2c. Page Content and Component Coverage

Landing

• Information and state
  • Public front page with the supplied poster as its primary visual content.
  • Poster presentation uses the accepted 1080 × 1350 px (4:5) dimensions.
  • The poster’s photo of Pak Ramlan and important text remain fully visible and uncropped.
• Primary and supporting actions
  • Visitors open the page and view the poster.
  • The page presents the poster without requiring an account or a visitor action beyond viewing.
• Domain entities
  • Supplied poster image.
  • Poster dimensions and aspect ratio.
  • Poster photo and important text, which must remain intact in the display.
• Component responsibilities
  • The page’s hero area presents the poster as the main content.
  • The image is contained within its presentation area rather than cropped to fill it.
• States and recovery
  • Loading: The poster may be unavailable until its image has loaded.
  • Success: The complete poster is visible at the accepted 4:5 presentation, with the photo and important text intact.
  • Error and recovery: If the poster cannot be displayed, the page must not substitute a cropped or misleading presentation. Restore the poster asset or its availability so the intended complete display can be viewed.
  • Empty: No alternate poster or additional content is specified; the page’s accepted content is the supplied poster.

3. Functional Requirements

1. As a Website Owner / Publisher, I should have the supplied poster displayed on the website’s front page.

   • Provenance: explicit.
   • Trigger or input: The accepted source is the supplied poster and the requested destination is the website front page.
   • Access: The front page is publicly accessible; no publisher sign-in or separate publishing control is specified.
   • Observable result: The poster appears in the front page’s hero area.
   • Failure and recovery: If the poster is unavailable, the intended display is not achieved; restore the poster asset or its availability.
   • Continuation: Once displayed, visitors can view the poster on the front page.

2. As a Website Owner / Publisher, I should have the poster presented at 1080 × 1350 px (4:5 ratio).

   • Provenance: explicit.
   • Trigger or input: The accepted display size is 1080 × 1350 px, with a 4:5 ratio.
   • Access: Applies to the public front-page presentation.
   • Observable result: The poster is presented in the accepted 4:5 format at the specified dimensions.
   • Failure and recovery: A presentation that changes the accepted ratio or size does not meet the requirement; restore the specified presentation.
   • Continuation: Visitors view the poster in that presentation.

3. As a Website Owner / Publisher, I should have the poster’s photo of Pak Ramlan and its important text displayed without cropping or cut-off.

   • Provenance: explicit.
   • Trigger or input: The supplied poster is displayed on the front page.
   • Access: Applies to the public front-page presentation.
   • Observable result: Pak Ramlan’s photo and important text remain complete and visible.
   • Failure and recovery: If the presentation cuts off the photo or important text, adjust the presentation so the complete poster is visible.
   • Continuation: Visitors can view the complete poster.

4. As a Site Visitor, I should be able to view the poster on the website’s front page with its photo and important text intact.

   • Provenance: required_inference, derived from the explicit public front-page display and no-cropping requirements.
   • Trigger or input: The visitor opens the website’s front page.
   • Access: Public; no account is required.
   • Observable result: The visitor sees the supplied poster in the hero area at the accepted 1080 × 1350 px (4:5) presentation, without the photo or important text being cropped.
   • Failure and recovery: If the poster fails to load, the visitor cannot see the intended content; restore poster availability so the complete image can be viewed.
   • Continuation: The visitor can continue viewing the poster on the front page.

4. User Personas

Website Owner / Publisher

• Provenance: required_inference from the accepted Planning Scope persona catalog.
• Product context: Responsible for the requested front-page presentation of the supplied poster.
• Primary goal: Have the poster displayed on the website at the accepted web presentation size without cutting off Pak Ramlan’s photo or important text.
• Distinct accepted responsibilities: The publisher’s accepted responsibility is the poster’s front-page display and its specified size and completeness. No separate editing, upload, or publishing-control workflow is established.
• Relevant inputs or decisions: The supplied poster, the front-page destination, and the accepted 1080 × 1350 px (4:5) presentation.
• Interaction with other accepted participants: The publisher’s intended display is what the Site Visitor views.
• Observable success: The poster appears on the public front page at the accepted size, with the photo and important text intact.

Site Visitor

• Provenance: required_inference from the accepted Planning Scope persona catalog.
• Product context: Arrives at the public website front page to view its poster.
• Primary goal: See the poster clearly and completely.
• Distinct accepted responsibilities: Views the poster as a visitor; no editing or publishing responsibility is specified.
• Relevant inputs or decisions: Opens the front page; no further input is required.
• Interaction with other accepted participants: Receives the poster presentation resulting from the publisher’s requested display.
• Observable success: The complete poster, including Pak Ramlan’s photo and important text, is visible in the accepted 4:5 presentation.

5. Core User Flows

5.1 Publisher’s front-page poster display

1. The Website Owner / Publisher supplies the poster and specifies that it is for the website’s front page.
2. The poster is presented in the Landing page’s hero area at 1080 × 1350 px (4:5 ratio).
3. The presentation keeps Pak Ramlan’s photo and important text uncropped.
4. The publisher’s intended result is observable on the public front page: the poster is displayed whole at the accepted size.
5. If the poster is unavailable or its presentation cuts off important content, restore its availability or adjust the presentation so the complete poster is visible.
6. Site Visitors can then open the Landing page and view the complete poster.

5.2 Visitor views the poster

1. The Site Visitor opens the public Landing page.
2. The page displays the supplied poster in its hero area at the accepted 1080 × 1350 px (4:5) presentation.
3. The visitor sees Pak Ramlan’s photo and the poster’s important text without cropping.
4. If the poster does not load, the intended viewing outcome is unavailable; restore poster availability so the visitor can view the complete image.
5. The visitor continues viewing the poster on the Landing page.

6. Visuals Colors and Theme

Muse: Kenya Hara. Headline: “Emptiness as the frame for one poster.”

The visual direction treats the front page as a quiet, respectful presentation of one poster. The poster is the page’s primary content; surrounding space supports legibility and must not compete with or crop it.

• Palette
  • Background: #F7F5F0.
  • Surface: #FFFFFF.
  • Text: #22201D.
  • Primary: #3E3A34.
  • Accent: #8C6A4A.
  • Muted: #8A857C.
  • Use warm paper and charcoal tones; do not use a generic indigo/blue-on-white SaaS palette.
• Typography
  • Headings: Zen Kaku Gothic New, weights 300–400, with 0.06em tracking.
  • Wordmark: Zen Kaku Gothic New, weight 400, with 0.22em letter spacing.
  • Body: Zen Maru Gothic.
  • Type scale: 40 / 32 / 24 / 18 / 16 / 14 px; body 17 px with 1.75 line height and a 62ch measure.
  • Hero title: clamp(30px, 4.2vw, 52px).
  • Micro-label: 11 px with 0.18em tracking.
  • Use light, quiet hierarchy; avoid bold or oversized display weight that competes with the poster.
• Shape and surfaces
  • Square corners; 0 radius on poster mat, image, and button.
  • Hairline rules: 1 px #DDD8CF.
  • Poster mat: white with a 1 px #DDD8CF border.
  • No shadows, cards, pills, gradients, glows, or blobs.
  • Accent #8C6A4A is limited to the 2 px rule above the caption and the focus ring; it is not a text-background fill.
• Layout
  • Centred single column, maximum width 1180 px.
  • A 12-column grid places the poster in a 7-column area capped at 540 px wide and the narrow text column in 4 columns to its right on desktop.
  • The poster’s 4:5 shape must not exceed 540 × 675 CSS px on desktop.
  • At 768 px and 375 px, stack the text beneath the poster. At 375 px, the poster uses the available width minus 32 px gutters.
  • Masthead height: 96 px, with a wordmark at left and one text link at right, closed by a full-width hairline.
  • Leave approximately 120 px of open space below the masthead before the composition. Use 96 px between sections on desktop and 56 px on mobile.
  • Close the page with a full-width hairline.
• Imagery
  • Use the supplied poster as the page’s single image.
  • Present the 1080 × 1350 source as a complete 4:5 frame, using contain-fit inside the white mat.
  • Do not crop, bleed, overlap, or cover the poster’s photo or readable text at any breakpoint.
  • Do not add decorative photography, textures, illustrations, icons, carousels, or thumbnail grids.
• Responsive readability
  • Keep readable text and controls fully within the viewport and their containers at 375 px, 768 px, and 1280 px; wrap or scale text as needed.
  • No element may cover readable text or controls.
• Motion
  • Still presentation. No entrance animations, parallax, hover lift, marquees, or scroll effects.
  • The only permitted motion is a 200 ms opacity fade on link hover; use the browser-native focus ring in #8C6A4A.
  • prefers-reduced-motion changes nothing because there is no other motion to reduce.

7. Signature Design Concept

Present the supplied poster as a mounted print on the public Landing page. Set it whole inside a pure-white mat with a 1 px warm hairline border, surrounded by generous paper-white space. Keep the poster as the dominant visual element and preserve its complete 4:5 composition. The page’s quiet presentation must not add imagery or decoration that competes with the poster or obscures its photo or text.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The supplied poster of Pak Ramlan, presented as a complete 4:5 image.
• Input → transformation → outcome: A visitor opens the public front page → the page presents the supplied poster at the accepted 1080 × 1350 px (4:5) format without cropping → the visitor can view the photo and important text intact.
• Motion vocabulary: Still, flat, and quiet. No entrance animation, parallax, hover lift, or scroll effect. A 200 ms opacity fade on link hover is the only permitted motion.
• First frame: A calm paper-white page with the poster as the primary visual, contained in its white mat and surrounded by open space.
• Reduced-motion state: The same static arrangement; no motion is needed to access the poster.

9. Non-Functional Requirements

1. Poster integrity — explicit. The front-page presentation must not crop or cut off Pak Ramlan’s photo or important text. This is necessary to preserve the requested poster content.
2. Accepted presentation dimensions — explicit. Present the poster at 1080 × 1350 px (4:5 ratio).
3. Responsive readability — explicit in the supplied creative direction. At 375 px, 768 px, and 1280 px, readable text and controls must remain fully within the viewport and their containers. The poster must remain whole and uncropped at these widths.
4. Public access — required_inference. Visitors must be able to open the front page and view the poster without an account, consistent with the accepted public visitor journey and the Planning Scope’s access_requirement: none.

10. Tech Stack

• Frontend: [Default — not specified by user] React.
• Backend: [Default — not specified by user] None required by the accepted front-page display requirements.
• Storage: [Default — not specified by user] Serve the supplied poster as a static image asset.
• Deployment: [Default — not specified by user] Static website hosting.

11. Assumptions and Constraints

• The supplied image is the poster to be displayed; no replacement image or additional poster is specified.
• The accepted display size is 1080 × 1350 px (4:5 ratio).
• The poster’s photo of Pak Ramlan and important text must remain uncropped and visible.
• The only current page is Landing, as specified by the versioned page contract.
• The page is publicly accessible; no account or publisher sign-in is specified.
• No separate poster-editing, upload, or content-management workflow is included in the accepted scope.
• The visual direction’s masthead link label “Tentang” and download-button label “Unduh poster 1080 × 1350” are visual-direction content, not accepted functional capabilities or destinations. They do not establish additional navigation or download behavior.

12. Glossary

• 4:5 ratio: The poster’s portrait aspect ratio, represented by 1080 × 1350 px.
• Contain-fit: Image presentation that keeps the complete image visible within its available area rather than cropping it.