System Requirements Document for hari-guru-sedunia

1. Introduction

hari-guru-sedunia is a first-party web application for producing a single social-media poster commemorating 5 Oktober: Hari Guru Sedunia (World Teachers' Day) on behalf of HMJ PPKn, Universitas Halu Oleo (UHO).

The product intent is narrow and explicit: give the poster creator a creative workspace in which to compose a red-dominant, PPKn-identifiable, 4:5 vertical poster that carries the required institutional elements — the UHO logo, the HMJ PPKn logo, the text "Kabinet Lentera Civitas", and the HMJ account details (Instagram hmjppknuho, Facebook hmjppknuho, e-mail hmjppknuho@gmail.com) — and to export it at 1080 × 1350 pixels for Instagram portrait posting.

The audience is the HMJ PPKn UHO poster creator who assembles and exports the artwork, and, downstream, the students and lecturers who see the finished poster on the HMJ Instagram account. The design register is institutional, bold, and unmistakably red, because the poster must read as PPKn.

2. System Overview

The system is a browser-delivered, three-destination application:

• Landing — the anonymous public entry that presents the World Teachers' Day poster-creation experience and the poster's own visual language before design work begins.
• Poster Editor — the creative workspace where the poster is composed: the red-dominant ground, the stacked headline, the yellow diagonal band, the "5 OKTOBER" badge, the logo stamp holders, the "Kabinet Lentera Civitas" credit block, and the HMJ contact strip.
• Export — the completion destination where the finished poster is produced at the required Instagram portrait dimensions.

Actors. The single accepted active human persona is the Poster Creator (HMJ PPKn UHO). No other human role is in scope. There are no system-to-system integrations, no external providers, and no outbound recipients that act on the product.

Accepted behavior. The product composes and exports one poster artefact. It enforces the required content (logos, cabinet text, contact accounts), the required colour dominance (red), and the required output size (1080 × 1350 px, 4:5 portrait). It offers creative latitude in composition, type treatment, and layout within those constraints.

Ownership. All three destinations are application-owned custom pages. No destination requires sign-in; the poster creator works anonymously and the poster is a single-session artefact.

Narrow exclusions. The product does not publish to Instagram or any social network, does not schedule posts, does not manage the HMJ accounts, does not provide analytics, does not maintain a poster library or version history across sessions, and does not offer multi-user collaboration or approval workflows. It produces the poster file; publishing it is the creator's own act on Instagram.

2a. Product Interpretation and Delivery Boundary

The authoritative request is a poster brief, not a website brief: "Buat kan poster 5 Oktober: Hari Guru Sedunia" with six numbered rules. The product therefore treats the poster as the primary artefact and the application as the tool that produces it. Every screen exists to serve the composition and export of that one 1080 × 1350 poster.

Delivery ownership. The poster is composed and exported entirely inside this first-party application. The UHO logo and the HMJ PPKn logo are supplied by the creator as image assets and placed by the application; the application does not fetch them from an external service. The HMJ contact details are fixed content supplied by the source and are rendered as given.

Access ownership. All three destinations are openly reachable. The source states no account requirement, no sign-in, and no private state that must persist between sessions; the poster is composed and exported in one sitting. No identity establishment, no verification, and no account management is introduced.

Current vs. future. Everything in this document is current. Nothing in the source thread describes a later phase, a second poster, a template system, or a publishing integration, and none is added here.

2b. Source Content Inventory

The authoritative source supplies the following fixed content that must appear on the poster. These are the exact values; no substitutes, dummy values, or invented variants are permitted.

Event content

Institutional marks

HMJ PPKn UHO account details

Output specification

2c. Page Content and Component Coverage

Landing

Information and state. The Landing presents the World Teachers' Day poster experience before any design work begins. It shows the poster's own visual language at full strength: the red ground, the stacked headline HARI GURU SEDUNIA, the 5 OKTOBER badge, the black logo band, the Kabinet Lentera Civitas credit block, and the HMJ contact strip. It states the occasion and the output format (1080 × 1350 px, 4:5 portrait for Instagram). It carries no user-specific state and no persisted data.

Primary action. Enter the Poster Editor to begin composing the poster.

Supporting actions. Read the required poster elements as presented on the entry composition; view the HMJ contact details as they will appear on the poster.

Domain entities. Poster (title, occasion date, output dimensions, aspect ratio); Required Element (UHO logo, HMJ PPKn logo, cabinet credit text, Instagram handle, Facebook handle, e-mail address).

Component responsibilities.

• Poster Hero Canvas — renders the composed 4:5 poster preview: red #E3170A ground, flush-left stacked Anton headline, yellow #FFD400 diagonal band behind the second headline line, yellow circular 5 OKTOBER badge pinned upper-right.
• Logo Band — black top band carrying the UHO logo on the left and the HMJ PPKn logo on the right inside small black circular stamp holders, separated by a thin yellow rule.
• Cabinet Credit Block — solid black block holding KABINET LENTERA CIVITAS in white caps with a yellow underline.
• Contact Strip — bottom black strip with the Instagram, Facebook, and e-mail lines in Barlow Semi Condensed, each preceded by a small yellow icon glyph.
• Enter Editor Control — the single primary control that opens the Poster Editor.
• Format Note — the stated output size and ratio (1080 × 1350 px, 4:5 portrait, Instagram).

States.

• Loading — the hero canvas resolves its type and colour blocks; the headline and bands appear as one composed frame rather than progressively reflowing.
• Empty — not applicable; the Landing always renders the composed poster preview from fixed source content.
• Success — the full poster composition is visible and the Enter Editor control is available.
• Error — if the poster preview cannot render, the page still presents the occasion, the required elements as a plain list, the format note, and the Enter Editor control, so the creator can proceed.
• Recovery — the creator can re-enter the Poster Editor at any time; the Landing holds no state that can be lost.

Poster Editor

Information and state. The Poster Editor is the creative workspace. It holds the working poster as a vertical 4:5 stage at 1080 × 1350 px, with a left tool rail and a right layers panel mirroring the poster's four horizontal zones. It tracks the current composition: the red ground, the headline block, the yellow diagonal band, the 5 OKTOBER badge, the two logo stamp holders, the Kabinet Lentera Civitas credit block, and the three contact lines. It tracks which required elements are present and whether the red ground still dominates.

Primary action. Compose the poster and confirm it is ready to export.

Supporting actions. Edit the headline text and its type treatment; move, resize, and restack layers; place the UHO logo and the HMJ PPKn logo into their stamp holders; edit the Kabinet Lentera Civitas credit text; edit the Instagram, Facebook, and e-mail lines; adjust the red ground and the yellow accent band; toggle the 5 OKTOBER badge; reset the composition to the source default.

Domain entities. Poster Canvas (1080 × 1350, 4:5); Layer (type, position, size, stacking order, visibility); Required Element (UHO logo, HMJ PPKn logo, cabinet credit text, Instagram handle, Facebook handle, e-mail address); Colour Role (red ground, black surface, white text, yellow accent, muted small print); Zone (logo band, headline field, cabinet credit block, contact strip).

Component responsibilities.

• Poster Stage — the 1080 × 1350 vertical canvas, rendered at 4:5, holding all layers.
• Tool Rail (left) — the editing controls: text, logo placement, colour role, badge, and reset.
• Layers Panel (right) — the ordered list of layers with visibility and stacking control, grouped by the poster's four zones.
• Headline Control — sets the HARI GURU SEDUNIA text, its Anton treatment, its flush-left two-line stack, and its size within the poster type scale.
• Date Badge Control — toggles and positions the yellow circular 5 OKTOBER badge.
• Logo Placement Control — places the UHO logo and the HMJ PPKn logo into their black circular stamp holders in the top band.
• Cabinet Credit Control — sets the KABINET LENTERA CIVITAS text in the black credit block with its yellow underline.
• Contact Strip Control — sets the Instagram, Facebook, and e-mail lines in the bottom black strip with their yellow icon glyphs.
• Colour Role Control — sets the red ground, black surface, white text, yellow accent, and muted small print.
• Readiness Indicator — reports whether every required element is present and whether the red ground dominates.
• Continue to Export Control — advances to the Export destination.

States.

• Loading — the stage and panels initialise with the source default composition.
• Empty — the initial composition before the creator's edits: red ground, headline, badge, both logo holders, cabinet credit, and contact strip all present at their default placement.
• Success — every required element is present, the red ground dominates, and the readiness indicator confirms the poster is ready to export.
• Error — a required element is missing or unreadable (a logo holder is empty, the cabinet credit text is blank, a contact line is blank, or the headline is empty); the readiness indicator names the missing element and the creator can restore it.
• Recovery — the creator restores the missing element from the tool rail, or resets the composition to the source default and re-edits.

Export

Information and state. The Export destination holds the finished poster and its output specification. It shows the composed poster at 4:5, states the exact output size 1080 × 1350 pixels, and confirms that the required elements — UHO logo, HMJ PPKn logo, Kabinet Lentera Civitas, Instagram hmjppknuho, Facebook hmjppknuho, e-mail hmjppknuho@gmail.com — are present in the exported artwork.

Primary action. Export the poster as a 1080 × 1350 px portrait image file.

Supporting actions. Review the final composition at full poster scale; return to the Poster Editor to make further edits; re-export after an edit.

Domain entities. Export Artefact (image file, 1080 × 1350 px, 4:5); Export Specification (width, height, ratio, intended Instagram portrait use); Required Element Checklist (the six required poster elements).

Component responsibilities.

• Final Poster Preview — the composed poster rendered at 4:5 for final review.
• Export Specification Panel — states 1080 × 1350 px and the 4:5 Instagram portrait ratio.
• Required Element Checklist — confirms the UHO logo, the HMJ PPKn logo, Kabinet Lentera Civitas, and the three HMJ contact lines are present.
• Export Control — produces the 1080 × 1350 px image file.
• Back to Editor Control — returns to the Poster Editor with the composition intact.

States.

• Loading — the final preview renders from the current composition.
• Empty — not reachable; the Export destination always holds the current composition.
• Success — the poster file is produced at exactly 1080 × 1350 px and the creator can save it for Instagram.
• Error — the export cannot complete, or the produced file does not match 1080 × 1350 px; the destination states the failure and offers a retry.
• Recovery — the creator retries the export, or returns to the Poster Editor to correct the composition and exports again.

3. Functional Requirements

FR-1 — Compose a World Teachers' Day poster (explicit) As the Poster Creator (HMJ PPKn UHO), I should compose a poster for 5 Oktober: Hari Guru Sedunia so that HMJ PPKn UHO has a finished commemorative artwork.

• Trigger/input: the creator opens the Poster Editor.
• Observable result: a 4:5 poster canvas exists carrying the World Teachers' Day headline and the 5 Oktober date.
• Access state: openly reachable; no sign-in.
• Failure/recovery: if the canvas fails to initialise, the creator can reset the composition to the source default.
• Continuation: the creator proceeds to place the required elements.

FR-2 — Red-dominant PPKn identity (explicit) As the Poster Creator (HMJ PPKn UHO), I should keep the poster red-dominant, or at minimum carry a red element, so that the poster reads as PPKn.

• Trigger/input: the creator sets the poster's colour roles.
• Observable result: red #E3170A is the dominant ground of the poster, covering roughly 60% of the canvas, with black, white, and yellow as supporting roles.
• Access state: openly reachable.
• Failure/recovery: if the red ground is reduced below dominance, the readiness indicator flags it and the creator restores the red ground.
• Continuation: the creator continues editing with the red identity confirmed.

FR-3 — Place the UHO logo (explicit) As the Poster Creator (HMJ PPKn UHO), I should place the UHO logo on the poster so that Universitas Halu Oleo is identified on the artwork.

• Trigger/input: the creator selects the UHO logo asset and places it in the top logo band.
• Observable result: the UHO logo appears inside a black circular stamp holder on the left of the top black band.
• Access state: openly reachable.
• Failure/recovery: if the logo holder is empty, the readiness indicator names the missing UHO logo and the creator places it.
• Continuation: the creator places the HMJ PPKn logo alongside it.

FR-4 — Place the HMJ PPKn logo (explicit) As the Poster Creator (HMJ PPKn UHO), I should place the HMJ PPKn logo on the poster so that the organising body is identified on the artwork.

• Trigger/input: the creator selects the HMJ PPKn logo asset and places it in the top logo band.
• Observable result: the HMJ PPKn logo appears inside a black circular stamp holder on the right of the top black band, separated from the UHO logo by a thin yellow rule.
• Access state: openly reachable.
• Failure/recovery: if the logo holder is empty, the readiness indicator names the missing HMJ PPKn logo and the creator places it.
• Continuation: the creator proceeds to the cabinet credit.

FR-5 — Include the cabinet credit (explicit) As the Poster Creator (HMJ PPKn UHO), I should include the text "Kabinet Lentera Civitas" on the poster so that the current cabinet is credited.

• Trigger/input: the creator sets the cabinet credit text.
• Observable result: KABINET LENTERA CIVITAS appears in white caps with a yellow underline inside the solid black credit block.
• Access state: openly reachable.
• Failure/recovery: if the credit text is blank, the readiness indicator flags it and the creator restores the text.
• Continuation: the creator proceeds to the contact strip.

FR-6 — Include the HMJ Instagram account (explicit) As the Poster Creator (HMJ PPKn UHO), I should include the Instagram account hmjppknuho on the poster so that viewers can find HMJ PPKn UHO on Instagram.

• Trigger/input: the creator sets the Instagram line in the contact strip.
• Observable result: the line reads hmjppknuho with a small yellow icon glyph, in Barlow Semi Condensed, on the bottom black strip.
• Access state: openly reachable.
• Failure/recovery: if the line is blank or altered from the source value, the readiness indicator flags it and the creator restores hmjppknuho.
• Continuation: the creator sets the remaining contact lines.

FR-7 — Include the HMJ Facebook account (explicit) As the Poster Creator (HMJ PPKn UHO), I should include the Facebook account hmjppknuho on the poster so that viewers can find HMJ PPKn UHO on Facebook.

• Trigger/input: the creator sets the Facebook line in the contact strip.
• Observable result: the line reads hmjppknuho with a small yellow icon glyph, in Barlow Semi Condensed, on the bottom black strip.
• Access state: openly reachable.
• Failure/recovery: if the line is blank or altered from the source value, the readiness indicator flags it and the creator restores hmjppknuho.
• Continuation: the creator sets the remaining contact line.

FR-8 — Include the HMJ e-mail address (explicit) As the Poster Creator (HMJ PPKn UHO), I should include the e-mail address hmjppknuho@gmail.com on the poster so that viewers can contact HMJ PPKn UHO by e-mail.

• Trigger/input: the creator sets the e-mail line in the contact strip.
• Observable result: the line reads hmjppknuho@gmail.com with a small yellow icon glyph, in Barlow Semi Condensed, on the bottom black strip.
• Access state: openly reachable.
• Failure/recovery: if the line is blank or altered from the source value, the readiness indicator flags it and the creator restores hmjppknuho@gmail.com.
• Continuation: the creator proceeds to export.

FR-9 — Export at 1080 × 1350 pixels (explicit) As the Poster Creator (HMJ PPKn UHO), I should export the poster at 1080 × 1350 pixels (4:5 ratio) so that it posts as an Instagram portrait image.

• Trigger/input: the creator triggers the export from the Export destination.
• Observable result: an image file is produced at exactly 1080 × 1350 px, 4:5 portrait.
• Access state: openly reachable.
• Failure/recovery: if the export fails or the produced file does not match 1080 × 1350 px, the destination states the failure and offers a retry.
• Continuation: the creator saves the file and publishes it on the HMJ Instagram account.

FR-10 — Edit as creatively as possible (explicit) As the Poster Creator (HMJ PPKn UHO), I should be able to edit the poster as creatively as possible so that the artwork is not a plain template.

• Trigger/input: the creator uses the tool rail and layers panel.
• Observable result: the creator can freely adjust the headline treatment, the diagonal band, the badge, layer positions and stacking, and the colour roles within the required constraints.
• Access state: openly reachable.
• Failure/recovery: if an edit breaks a required element, the readiness indicator names it and the creator can restore it or reset to the source default.
• Continuation: the creator continues editing until the composition is ready.

FR-11 — Confirm required elements before export (required_inference) As the Poster Creator (HMJ PPKn UHO), I should see whether every required poster element is present before I export, so that no required logo, credit, or contact line is missing from the published poster.

• Trigger/input: the creator reviews the readiness indicator in the Poster Editor and the checklist on the Export destination.
• Observable result: each of the six required elements — UHO logo, HMJ PPKn logo, Kabinet Lentera Civitas, Instagram hmjppknuho, Facebook hmjppknuho, e-mail hmjppknuho@gmail.com — is reported as present or missing.
• Access state: openly reachable.
• Failure/recovery: a missing element is named and the creator restores it from the tool rail.
• Continuation: once all elements are present, the creator exports.
• Rationale: the source makes all six elements mandatory; a usable lifecycle needs an observable check that they are present before the poster leaves the application.

FR-12 — Return to the editor after export (required_inference) As the Poster Creator (HMJ PPKn UHO), I should be able to return to the Poster Editor from the Export destination with my composition intact, so that I can correct or refine the poster and export again.

• Trigger/input: the creator uses the Back to Editor control.
• Observable result: the Poster Editor reopens holding the same composition the creator left.
• Access state: openly reachable.
• Failure/recovery: if the composition is lost, the creator resets to the source default and re-edits.
• Continuation: the creator edits and exports again.
• Rationale: export is a repeatable step in a single-session composition; without a return path the creator would have to rebuild the poster to fix a detail.

4. User Personas

Poster Creator (HMJ PPKn UHO)

Product context. The poster creator is the person inside HMJ PPKn UHO who produces the organisation's social-media artwork. The request arrives as a brief with fixed rules: a poster for 5 Oktober, Hari Guru Sedunia, that must look like PPKn, must carry the UHO and HMJ PPKn logos, must credit Kabinet Lentera Civitas, must print the HMJ accounts, and must come out at Instagram portrait size. The creator works in one sitting, on one poster, and the finished file goes straight to the HMJ Instagram account.

Primary goal. Produce a creative, red-dominant 1080 × 1350 px poster for Hari Guru Sedunia that carries every required institutional element and is ready to publish on Instagram.

Distinct accepted responsibilities.

• Compose the poster's headline HARI GURU SEDUNIA and the 5 OKTOBER date badge as the hero of the artwork.
• Keep the poster red-dominant so it reads as PPKn.
• Place the UHO logo and the HMJ PPKn logo into the poster's logo band.
• Set the Kabinet Lentera Civitas credit text.
• Set the three HMJ contact lines: Instagram hmjppknuho, Facebook hmjppknuho, e-mail hmjppknuho@gmail.com.
• Exercise creative latitude over type treatment, the diagonal band, the badge, layer placement, and colour roles.
• Confirm every required element is present and export the poster at 1080 × 1350 px.

Relevant inputs and decisions. The creator supplies the UHO logo asset and the HMJ PPKn logo asset, decides the headline treatment and the composition's asymmetry, decides how much yellow accent to use against the red ground, and decides when the composition is finished.

Interactions with other accepted participants. There are none inside the product. The creator is the only active human actor. The audience — students and lecturers who see the poster on Instagram — is downstream of the product and does not act within it. The creator's own act of publishing the exported file on the HMJ Instagram account happens outside this application.

Observable success. A single image file at exactly 1080 × 1350 px, 4:5 portrait, in which the red ground dominates, the headline HARI GURU SEDUNIA is the hero, both logos are present in their stamp holders, KABINET LENTERA CIVITAS is credited, and all three HMJ contact lines are legible — ready to post on the HMJ Instagram account.

What makes this role distinct. The creator is simultaneously the brief-holder and the designer: they must satisfy six hard institutional rules while being told to edit "se-kreatif mungkin". Their work is a single composed artefact judged on poster impact and on the completeness of its required metadata, not on repeated data entry or on managing other people's contributions.

5. Core User Flows

Flow 1 — Compose and export the Hari Guru Sedunia poster

Starting context. The poster creator has the UHO logo file and the HMJ PPKn logo file ready, and opens the application to build the 5 Oktober poster.

1. Landing — arrive and read the brief. The creator opens the application and sees the poster's own visual language: the red #E3170A ground, the stacked headline HARI GURU SEDUNIA, the yellow diagonal band, the yellow 5 OKTOBER badge, the black logo band with the UHO and HMJ PPKn stamp holders, the KABINET LENTERA CIVITAS credit block, and the bottom contact strip with the Instagram, Facebook, and e-mail lines. The page states the output format: 1080 × 1350 px, 4:5 portrait, for Instagram.
2. Landing — enter the editor. The creator activates the Enter Editor control. The Poster Editor opens with the source default composition on a 1080 × 1350 vertical stage, a left tool rail, and a right layers panel grouped by the poster's four zones.
3. Poster Editor — set the red ground. The creator sets the colour roles so red #E3170A dominates the canvas, with black #0B0B0B for the type block and metadata band, white #FFFFFF for text, yellow #FFD400 as the single hot accent, and muted #F2E9E4 for the small-print contact lines. The readiness indicator confirms the red ground dominates.
4. Poster Editor — set the headline. The creator sets HARI GURU SEDUNIA in Anton, all caps, stacked in two flush-left lines spanning the poster width, with tight tracking and leading so the words read as one solid block. The creator positions the thick yellow diagonal band so it cuts behind the second headline line.
5. Poster Editor — set the date badge. The creator toggles the yellow circular 5 OKTOBER badge and pins it to the upper-right of the red field.
6. Poster Editor — place the logos. The creator places the UHO logo into the left black circular stamp holder and the HMJ PPKn logo into the right black circular stamp holder in the top black band, separated by a thin yellow rule. Both logos appear as part of the poster system rather than pasted-on assets.
7. Poster Editor — set the cabinet credit. The creator sets KABINET LENTERA CIVITAS in white caps with a yellow underline inside the solid black credit block, reading as a poster credit line.
8. Poster Editor — set the contact strip. The creator sets the three contact lines on the bottom black strip in Barlow Semi Condensed, each preceded by a small yellow icon glyph: Instagram hmjppknuho, Facebook hmjppknuho, e-mail hmjppknuho@gmail.com.
9. Poster Editor — check readiness. The readiness indicator reports that the UHO logo, the HMJ PPKn logo, Kabinet Lentera Civitas, and all three contact lines are present and that the red ground dominates. If any element is flagged missing, the creator restores it from the tool rail and rechecks.
10. Poster Editor — continue to export. The creator activates the Continue to Export control.
11. Export — review the final poster. The Export destination shows the composed poster at 4:5, states the output size 1080 × 1350 px, and lists the required elements as present.
12. Export — produce the file. The creator activates the Export control. The application produces the poster image at exactly 1080 × 1350 px, 4:5 portrait.
13. Export — save and publish. The creator saves the file and posts it on the HMJ Instagram account. Publishing happens on Instagram, outside this application.

Failure and recovery. If a required element is missing or unreadable at step 9, the readiness indicator names it and the creator restores it, or resets the composition to the source default and re-edits. If the export at step 12 fails or the produced file does not match 1080 × 1350 px, the Export destination states the failure and offers a retry.

Continuation. If the creator wants to change the composition after exporting, they use the Back to Editor control; the Poster Editor reopens with the composition intact, and the creator edits and exports again.

Flow 2 — Revise the poster after a first export

Starting context. The creator has already exported a 1080 × 1350 px poster and, on reviewing it, wants a different headline treatment or a stronger red ground.

1. Export — return to the editor. From the Export destination, the creator activates the Back to Editor control.
2. Poster Editor — reopen with the composition intact. The Poster Editor shows the same composition the creator left, with all layers and colour roles preserved.
3. Poster Editor — make the change. The creator adjusts the headline size within the poster type scale, or repositions the yellow diagonal band, or restores the red ground to dominance.
4. Poster Editor — recheck readiness. The readiness indicator confirms every required element is still present and the red ground still dominates.
5. Export — export again. The creator returns to the Export destination and produces a new 1080 × 1350 px file.

Failure and recovery. If the composition is lost when returning to the editor, the creator resets to the source default and re-edits from the required elements.

Continuation. The creator saves the revised file and publishes it on the HMJ Instagram account.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Paula Scher, and the headline is "Typography as architecture — a red poster that shouts Hari Guru Sedunia." The poster is the primary artefact; the application's surfaces carry the same language so the editor reads as the poster's own workspace.

Colour tokens (light mode)

No purple, indigo, pastel, or low-contrast palette is used. No gradient blobs and no soft glows.

Typography

Type scale (1.333 modular): 132 / 96 / 64 / 40 / 24 / 18 / 16. Mobile poster scale: 56 / 40 / 28 / 20 / 16 / 14 / 12.

Poster headline sizes: HARI GURU SEDUNIA at clamp(56px, 14vw, 132px); 5 OKTOBER at clamp(28px, 7vw, 64px).

Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are not used for headings or body.

Shape language

Hard edges only — no border radii on the poster composition. Full-bleed colour blocks, a 6px black rule separating the headline block from the metadata band, and one thick yellow diagonal band at about 8% of the poster height cutting across the red ground behind the headline. Logos sit inside small black circular stamp holders, echoing Scher's poster badges.

Layout rhythm

A single 1080 × 1350 poster canvas arranged as four horizontal zones:

The editor UI mirrors this as a vertical 4:5 stage with a left tool rail and a right layers panel.

Imagery style

No photography. The image is the type itself: the headline is the hero image. Small high-contrast vector cutouts may be used as accents — a simple line-drawn teacher's book, a chalk mark, a graduation cap — rendered in solid yellow or white on the black band. The UHO and HMJ PPKn logos are placed as found, inside black circular stamp holders, so they feel like part of the poster system rather than pasted-on assets.

7. Signature Design Concept

The poster is the first screen. The Landing does not present a website hero; it presents the poster itself as a full-bleed red #E3170A 4:5 canvas.

• The headline is the architecture. HARI GURU SEDUNIA is set in Anton at roughly 132px, stacked in two flush-left lines that span the full 1080px width, in white, with a thick yellow #FFD400 diagonal band cutting behind the second line. The words are the image.
• The logos are stamps, not stickers. Above the headline, a black band holds the UHO logo on the left and the HMJ PPKn logo on the right inside small circular stamp holders, separated by a thin yellow rule.
• The credit is a poster line. Below the headline, a solid black block carries KABINET LENTERA CIVITAS in white caps with a yellow underline, set as a credit rather than a caption.
• The metadata is part of the composition. The bottom black strip carries the three HMJ contact lines in Barlow Semi Condensed, each preceded by a small yellow icon glyph.
• The composition is asymmetric. The headline is flush-left, the yellow band runs from lower-left to upper-right, and the 5 OKTOBER badge sits in the upper-right of the red field.

The result could not be mistaken for a SaaS hero: there is no centred headline, no subtext, no blue button, and no gradient blob. The single primary control — Enter Editor — sits as a hard-edged block in the poster's own black-and-red language.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The poster itself: the stacked Anton headline HARI GURU SEDUNIA on the red #E3170A ground, with the yellow #FFD400 diagonal band behind the second line, the black logo band above, the KABINET LENTERA CIVITAS credit block below, and the contact strip at the bottom.
• Input → transformation → outcome thesis. On load, the headline words slide in from alternating sides with a 60ms stagger and a hard stop — no easing bounce — while the yellow diagonal band wipes across the red ground behind the second line; the outcome is the fully composed poster, with the black bands, the logo stamp holders, the 5 OKTOBER badge, and the contact strip settled in place.
• Motion vocabulary. Type marquees and colour-block wipes only. Hover states swap red and black fills instantly, in the Scher poster tradition. No parallax, no particles, no gradient drift.
• Composed first frame. The red ground fills the 4:5 canvas; the black top band with both logo stamp holders and the thin yellow rule is already in place; the headline's first line is set flush-left; the yellow diagonal band is mid-wipe behind the second line; the 5 OKTOBER badge is pinned upper-right; the black credit block and the contact strip are already settled at the bottom.
• Reduced-motion state. With prefers-reduced-motion, the stagger and the wipe do not run: the poster appears as a single composed still frame with the headline, the diagonal band, the badge, both logo stamp holders, the credit block, and the contact strip all fully visible and whole. Any marquee stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row whose further items are reached by scrolling.

Poster Editor Motion

Dragging a layer across the canvas fires a short yellow colour-block wipe behind the layer. Hover states swap red and black fills instantly. No decorative animation competes with the headline.

9. Non-Functional Requirements

NFR-1 — Output dimensions (explicit) The exported poster must be exactly 1080 × 1350 pixels, a 4:5 portrait ratio, suitable for an Instagram portrait post. Rationale: the source states this as a hard rule.

NFR-2 — Red dominance (explicit) Red #E3170A must be the dominant colour of the poster, covering roughly 60% of the canvas, so the poster reads as PPKn. Rationale: the source states red dominance as a hard rule.

NFR-3 — Required content completeness (explicit) Every exported poster must contain the UHO logo, the HMJ PPKn logo, the text "Kabinet Lentera Civitas", and the three HMJ contact values exactly as given: Instagram hmjppknuho, Facebook hmjppknuho, e-mail hmjppknuho@gmail.com. Rationale: the source states each as a hard rule.

NFR-4 — Legibility of required text (explicit, reinforced by the creative direction) The headline, the 5 OKTOBER badge, the KABINET LENTERA CIVITAS credit, and all three contact lines must remain whole and readable at every viewport — 375px, 768px, and 1280px — staying entirely inside the viewport and their container, wrapping or scaling to fit, with no other element covering any part of them. Rationale: the source requires these elements to be legible on the poster; the creative direction makes this a hard rule.

NFR-5 — Creative latitude (explicit) The editor must permit free creative adjustment of the headline treatment, the diagonal band, the badge, layer placement and stacking, and the colour roles, within the required constraints. Rationale: the source asks for the poster to be edited "se-kreatif mungkin".

NFR-6 — Single-session, no-account operation (required_inference) The poster is composed and exported in one sitting with no sign-in and no persisted account state. Rationale: the source states no account requirement and no durable state that must survive between sessions; the poster is a single artefact produced for immediate publication.

NFR-7 — Browser delivery (required_inference) The application is delivered in the browser so the poster creator can compose and export without installing anything. Rationale: the accepted delivery shape is a custom UI with no stated platform constraint.

10. Tech Stack

• Frontend: React, delivered in the browser. The poster stage, tool rail, and layers panel are React components; the poster canvas is rendered as a 1080 × 1350 (4:5) composition surface.
• Typography: Anton for headings and Barlow Semi Condensed for body and metadata, loaded as web fonts.
• Export: client-side image rendering of the poster canvas to a 1080 × 1350 px image file.
• Backend: none required. The application holds no server-side state, no accounts, and no persistence; the poster is composed and exported in the browser.
• Storage: none required. The composition lives in the session; the exported file is saved by the creator.
• Containerisation: Docker / docker-compose for serving the static application build. Kubernetes is not required, as there is no deployment scale or orchestration need.

11. Assumptions and Constraints

Assumptions

• A-1 (assumption) The poster creator supplies the UHO logo file and the HMJ PPKn logo file as image assets; the application places them but does not source them.
• A-2 (assumption) The poster is composed and exported in a single session; no draft is saved between sessions.
• A-3 (assumption) The exported file is published by the creator on the HMJ Instagram account; the application does not publish it.
• A-4 (assumption) The HMJ contact values are fixed source content and are rendered exactly as given, with no substitution.

Constraints

• C-1 (explicit) The poster must be red-dominant, or at minimum carry a red element, so it reads as PPKn.
• C-2 (explicit) The poster must include the UHO logo and the HMJ PPKn logo.
• C-3 (explicit) The poster must include the text "Kabinet Lentera Civitas".
• C-4 (explicit) The poster must include the HMJ accounts: Instagram hmjppknuho, Facebook hmjppknuho, e-mail hmjppknuho@gmail.com.
• C-5 (explicit) The poster must be 1080 × 1350 pixels (4:5 ratio) or Instagram portrait/vertical post size.
• C-6 (explicit) The poster must be edited as creatively as possible.
• C-7 (explicit) The poster is for 5 Oktober: Hari Guru Sedunia.
• C-8 (explicit, from the creative direction) The generic indigo/blue-on-white SaaS template look is forbidden for this project.
• C-9 (explicit, from the creative direction) Readable text and controls stay whole at 375px, 768px, and 1280px; where a direction asks readable text to be cropped, it stays whole and the gesture is carried by imagery or decoration instead.

Out of scope

• Publishing or scheduling to Instagram or any social network.
• Managing, authenticating, or posting from the HMJ accounts.
• Analytics, engagement tracking, or post-performance reporting.
• A poster library, template gallery, or cross-session version history.
• Multi-user collaboration, review, or approval workflows.
• Any poster other than the 5 Oktober Hari Guru Sedunia poster.

12. Glossary

• Hari Guru Sedunia — World Teachers' Day, commemorated on 5 October; the occasion the poster marks.
• 5 Oktober — 5 October, the date of Hari Guru Sedunia, carried on the poster as the yellow circular date badge.
• PPKn — Pendidikan Pancasila dan Kewarganegaraan (Pancasila and Civic Education); the discipline whose identity the red-dominant poster must convey.
• HMJ PPKn UHO — Himpunan Mahasiswa Jurusan Pendidikan Pancasila dan Kewarganegaraan, Universitas Halu Oleo; the student organisation the poster represents.
• UHO — Universitas Halu Oleo; the university whose logo appears on the poster.
• Kabinet Lentera Civitas — the cabinet name credited on the poster.
• Logo UHO — the Universitas Halu Oleo logo, placed in the left black circular stamp holder of the poster's top band.
• Logo HMJ PPKn — the HMJ PPKn UHO logo, placed in the right black circular stamp holder of the poster's top band.
• Poster canvas — the 1080 × 1350 pixel, 4:5 vertical composition surface on which the poster is built.
• Zone — one of the poster's four horizontal bands: the top logo band, the middle headline field, the cabinet credit block, and the bottom contact strip.
• Stamp holder — the small black circular holder in which each logo sits, so the logos read as part of the poster system.
• Contact strip — the bottom black band carrying the Instagram, Facebook, and e-mail lines with their yellow icon glyphs.
• Readiness indicator — the editor's report of whether every required poster element is present and whether the red ground dominates.
• Export artefact — the produced image file at exactly 1080 × 1350 pixels, 4:5 portrait.