System Requirements Document for himapsi-unima

1. Introduction

HIMAPSI UNIMA (Himpunan Mahasiswa Program Studi, Universitas Negeri Manado) requires a dedicated website built specifically for the organisation — not a generic campus portal, not a company site, and not a multi-tenant platform. The website exists to give the association a public face and a working publishing surface: a place where the organisation's profile, activities, and published content are presented to the public, and where the kepengurusan (management) can create, update, and publish that content and information.

The product intent is twofold and inseparable:

• Public presence. Students, prospective members, alumni, lecturers, and the general public must be able to find and read HIMAPSI UNIMA's organisational profile, its activities, and its published content without obstruction and without needing an account.
• Organisational publishing. Members of the kepengurusan must be able to sign up, log in, and manage the organisation's content and information so that the public-facing material stays accurate and current.

The audience is therefore the campus and wider public on one side, and the organisation's own management on the other. The website is scoped exclusively to HIMAPSI UNIMA.

2. System Overview

The system is a single first-party web application dedicated to HIMAPSI UNIMA. It delivers:

• An anonymous public entry surface (Landing) that introduces the organisation and routes visitors into its public information.
• Anonymous public reading surfaces for the organisation's profile (Profil), its activities (Kegiatan), and its published content (Konten).
• An application-owned identity path for the kepengurusan: self-service enrollment (Sign Up) and returning verification (Login).
• Protected management surfaces for the kepengurusan: a reviewable content workspace (Content) and a focused authoring surface (Content Editor).

Actors:

• Pengurus HIMAPSI UNIMA — the organisation's management member, who enrolls, verifies, and manages content and organisational information.
• Pengunjung Publik — the public visitor, who reads the organisation's profile, activities, and published content.

The application owns identity for the kepengurusan because durable, resumable, actor-specific management state must remain bound to the correct participant. Public reading surfaces require no identity.

Narrow exclusions: the website is for HIMAPSI UNIMA only. No multi-organisation tenancy, no unrelated campus services, and no capabilities beyond public information presentation and organisational content management are in scope.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The website is first-party and application-owned. All eight surfaces — Landing, Sign Up, Login, Profil, Kegiatan, Konten, Content, and Content Editor — are custom pages owned by the application. There is no provider-owned or external-only surface in the current scope, and no headless delivery mode.

Access ownership. Public reading is anonymous. Landing, Profil, Kegiatan, and Konten are reachable without identity. Sign Up and Login are themselves anonymous entry surfaces — a protected destination cannot own the interaction that establishes access to itself, so enrollment and returning verification are reachable before identity exists. Content and Content Editor are role-restricted to the authenticated Pengurus HIMAPSI UNIMA.

Current versus future. Everything described in this document is current. No future-horizon requirements were accepted in the authoritative thread; nothing here is deferred.

Identity boundary. Application-owned identity is used solely to bind durable management state to the correct pengurus and to gate the two management surfaces. It does not create differentiated permissions among pengurus, and no role-based visibility over shared product state is established by the source.

2c. Page Content and Component Coverage

Landing

• Information/state: Anonymous public entry. Presents HIMAPSI UNIMA as a full-viewport typographic poster — an oversized Anton word stack ("HIMPUNAN / MAHASISWA / PROGRAM STUDI") flush-left, a Scher-red rectangle wiping in behind the lower half with crossing words flipped to white, a rotated all-caps micro-label "UNIMA · MANADO" in a yellow block top-right, and a live type marquee of upcoming activities bottom-right.
• Primary actions: "Jelajahi Kegiatan" primary CTA in a black rectangle sitting on a 4px black rule (routes to Kegiatan). Small black-on-paper login link for pengurus (routes to Login).
• Supporting actions: Navigation into Profil and Konten; navigation into Sign Up for prospective pengurus.
• Domain entities: Organisation identity (HIMAPSI UNIMA), tagline, upcoming activities (title, date, category, location).
• Component responsibilities: Poster hero composition; column-1 all-caps metadata rail; primary CTA block; pengurus login link; activity marquee; public navigation.
• States: Loading — poster frame renders with type stack and colour blocks; marquee items populate as activity data resolves. Empty — if no upcoming activities exist, the marquee region collapses to a static all-caps line stating no scheduled activities, and the hero composition remains intact. Success — hero renders fully; CTA and login link are reachable and legible. Error — if activity data fails to load, the marquee is omitted and the hero, CTA, and navigation remain fully usable. Recovery — visitor can proceed to Kegiatan, Profil, Konten, Login, or Sign Up regardless of marquee state.

Sign Up

• Information/state: Anonymous enrollment surface for a prospective Pengurus HIMAPSI UNIMA. Establishes the first-use identity that will own durable management state.
• Primary actions: Submit enrollment details to create the pengurus account.
• Supporting actions: Navigate to Login for an existing account.
• Domain entities: Pengurus account (identity credentials, organisational association).
• Component responsibilities: Enrollment form; validation feedback; submission control; link to Login.
• States: Loading — form renders; submission control shows in-progress state during account creation. Empty — pristine form with all fields unset. Success — account created and the pengurus proceeds to verification/entry. Error — invalid or incomplete input is reported inline against the offending field; a failed creation reports a recoverable message without discarding entered values. Recovery — the pengurus corrects input and resubmits, or switches to Login.

Login

• Information/state: Anonymous returning-verification surface for an existing Pengurus HIMAPSI UNIMA.
• Primary actions: Submit credentials to verify identity and gain access to the management surfaces.
• Supporting actions: Navigate to Sign Up for a new account.
• Domain entities: Pengurus account credentials; authenticated session.
• Component responsibilities: Credential form; validation feedback; submission control; link to Sign Up.
• States: Loading — form renders; submission control shows in-progress state during verification. Empty — pristine form with all fields unset. Success — identity verified and the pengurus is routed to the management surfaces (Content). Error — unrecognised credentials report a recoverable message without revealing which field was wrong. Recovery — the pengurus retries credentials or switches to Sign Up.

Profil

• Information/state: Anonymous public reading surface presenting HIMAPSI UNIMA's organisational profile and identity. Two-column editorial spread: running narrative on the left, a stacked "fact rail" of numbers in yellow blocks on the right, with a recurring painted-map motif behind the spread.
• Primary actions: Read the organisational profile.
• Supporting actions: Navigate to Kegiatan, Konten, and Landing.
• Domain entities: Organisation profile narrative; organisational facts and figures; painted-map motif.
• Component responsibilities: Editorial narrative column; fact rail of yellow number blocks; painted-map background composition; column-1 metadata rail; public navigation.
• States: Loading — narrative and fact rail render as they resolve. Empty — if a profile section has no published content, that section is omitted rather than shown blank. Success — profile narrative and fact rail render fully and legibly. Error — if profile data fails to load, a recoverable message is shown with a retry path. Recovery — visitor retries or navigates to another public surface.

Kegiatan

• Information/state: Anonymous public reading surface presenting HIMAPSI UNIMA's activities as a dense poster index — full-width horizontal bands separated by 4px black rules, each with a 96px Anton date numeral in the left rail and the title set at 40–64px.
• Primary actions: Read the activity index and individual activity entries.
• Supporting actions: Navigate to Profil, Konten, and Landing.
• Domain entities: Activity (title, date, category, location, description).
• Component responsibilities: Poster-index band list; left-rail date numerals; 4px black rule separators; column-1 metadata rail; public navigation.
• States: Loading — bands render as activity data resolves. Empty — when no activities are published, a poster-scale all-caps statement replaces the index. Success — all published activities render as ruled bands with legible date numerals and titles. Error — if activity data fails to load, a recoverable message with retry is shown. Recovery — visitor retries or navigates to another public surface.

Konten

• Information/state: Anonymous public reading surface presenting HIMAPSI UNIMA's published content.
• Primary actions: Read published content entries.
• Supporting actions: Navigate to Profil, Kegiatan, and Landing.
• Domain entities: Published content entry (title, body, category, publication date).
• Component responsibilities: Published content listing; content reading view; column-1 metadata rail; public navigation.
• States: Loading — content listing renders as entries resolve. Empty — when nothing is published, a poster-scale all-caps statement replaces the listing. Success — published entries render fully and legibly. Error — if content fails to load, a recoverable message with retry is shown. Recovery — visitor retries or navigates to another public surface.

Content

• Information/state: Role-restricted management workspace for the authenticated Pengurus HIMAPSI UNIMA. A paste-up board: left rail of content blocks, centre column, right rail of live preview metadata, all separated by black rules. Shows the organisation's content and information in a reviewable, revisitable state.
• Primary actions: Review existing content and organisational information; select an item to manage.
• Supporting actions: Open Content Editor to create or update; return to public surfaces to verify published result.
• Domain entities: Content item (title, body, category, publication state, last-updated metadata); organisational information records.
• Component responsibilities: Content block rail; centre review column; live preview metadata rail; black rule separators; entry point into Content Editor.
• States: Loading — rails render as content resolves. Empty — when no content exists yet, the workspace shows an all-caps prompt directing the pengurus to create the first item. Success — content items render in the rail with their metadata and publication state. Error — if content fails to load, a recoverable message with retry is shown and the workspace remains navigable. Recovery — pengurus retries, or proceeds to Content Editor to author new content.

Content Editor

• Information/state: Role-restricted focused authoring surface for the authenticated Pengurus HIMAPSI UNIMA. Same poster grid tightened to a paste-up board: left rail of content blocks, centre editing column, right rail of live preview metadata.
• Primary actions: Create new content or organisational information; update existing content; publish the result.
• Supporting actions: Return to Content to review; return to public surfaces to verify the published result.
• Domain entities: Content item under edit (title, body, category, publication state); organisational information under edit.
• Component responsibilities: Editing column; content block rail; live preview metadata rail; save and publish controls; black rule separators.
• States: Loading — editor renders with the selected item's current values, or blank for a new item. Empty — a new, unstarted item shows an empty editing column with the preview rail reflecting the empty state. Success — the pengurus's changes are saved and the item's publication state is reflected in Content and on the public surfaces. Error — a failed save or publish reports a recoverable message and preserves the pengurus's in-progress edits. Recovery — the pengurus retries the save or publish without losing work.

3. Functional Requirements

FR-1 — Dedicated organisation website (explicit) As a Pengurus HIMAPSI UNIMA, I should have a website built specifically for the HIMAPSI UNIMA organisation, so that the association has its own dedicated public presence rather than a shared or generic platform.

• Trigger/input: The website is deployed and reachable.
• Observable result: A first-party website exists whose content and identity are exclusively HIMAPSI UNIMA's.
• Access state: Public entry is anonymous.
• Failure/recovery: Not applicable to the existence of the site itself.
• Continuation: Visitors proceed to Landing; pengurus proceed to Sign Up or Login.

FR-2 — Anonymous public entry (required_inference) As a Pengunjung Publik, I should be able to reach the Landing page without any identity, so that I can understand what HIMAPSI UNIMA is and what the website offers before any protected information is involved.

• Trigger/input: Visitor opens the website.
• Observable result: The Landing poster renders with the organisation's word stack, tagline, and navigation into public surfaces.
• Access state: Anonymous; no identity required.
• Failure/recovery: If activity data for the marquee fails to load, the hero and navigation remain usable.
• Continuation: Visitor proceeds to Kegiatan, Profil, Konten, Login, or Sign Up.

FR-3 — Public organisational profile (required_inference) As a Pengunjung Publik, I should be able to read HIMAPSI UNIMA's organisational profile and identity, so that I understand who the organisation is.

• Trigger/input: Visitor opens Profil.
• Observable result: The profile narrative and fact rail render legibly.
• Access state: Anonymous; no identity required.
• Failure/recovery: If profile data fails to load, a recoverable message with retry is shown.
• Continuation: Visitor navigates to Kegiatan, Konten, or Landing.

FR-4 — Public activity information (required_inference) As a Pengunjung Publik, I should be able to read HIMAPSI UNIMA's activities, so that I know what the organisation is running and has run.

• Trigger/input: Visitor opens Kegiatan.
• Observable result: Published activities render as ruled poster bands with legible date numerals and titles.
• Access state: Anonymous; no identity required.
• Failure/recovery: If activity data fails to load, a recoverable message with retry is shown; when no activities are published, a poster-scale all-caps statement replaces the index.
• Continuation: Visitor navigates to Profil, Konten, or Landing.

FR-5 — Public published content (required_inference) As a Pengunjung Publik, I should be able to read HIMAPSI UNIMA's published content, so that I can follow the organisation's published material.

• Trigger/input: Visitor opens Konten.
• Observable result: Published content entries render fully and legibly.
• Access state: Anonymous; no identity required.
• Failure/recovery: If content fails to load, a recoverable message with retry is shown; when nothing is published, a poster-scale all-caps statement replaces the listing.
• Continuation: Visitor navigates to Profil, Kegiatan, or Landing.

FR-6 — Self-service enrollment (required_inference) As a Pengurus HIMAPSI UNIMA, I should be able to complete self-service enrollment before I first manage content, so that I have an account that owns my management work.

• Trigger/input: Prospective pengurus opens Sign Up and submits enrollment details.
• Observable result: A pengurus account is created and bound to that person.
• Access state: Anonymous entry; the enrollment interaction is reachable without identity.
• Failure/recovery: Invalid or incomplete input is reported inline; a failed creation reports a recoverable message without discarding entered values.
• Continuation: The pengurus proceeds to verification/entry via Login.

FR-7 — Returning verification (required_inference) As a Pengurus HIMAPSI UNIMA, I should be able to verify my identity through Login before accessing the management area, so that my durable management state stays bound to me.

• Trigger/input: Pengurus opens Login and submits credentials.
• Observable result: Identity is verified and the pengurus reaches the management surfaces.
• Access state: Anonymous entry; the verification interaction is reachable without identity.
• Failure/recovery: Unrecognised credentials report a recoverable message without revealing which field was wrong; the pengurus retries or switches to Sign Up.
• Continuation: The pengurus proceeds to Content.

FR-8 — Authorised content management (required_inference) As a Pengurus HIMAPSI UNIMA, I should have authorisation to manage content and organisational information, so that I can keep the organisation's public material accurate and current.

• Trigger/input: An authenticated pengurus opens Content or Content Editor.
• Observable result: The management surfaces are available to the authenticated pengurus; unauthenticated access is refused.
• Access state: Role-restricted to the authenticated Pengurus HIMAPSI UNIMA.
• Failure/recovery: If content fails to load, a recoverable message with retry is shown and the workspace remains navigable.
• Continuation: The pengurus reviews items in Content and opens Content Editor to author.

FR-9 — Review and revisit content (required_inference) As a Pengurus HIMAPSI UNIMA, I should be able to revisit Content to review the organisation's content and information, so that I can see what exists and what state it is in.

• Trigger/input: Authenticated pengurus opens Content.
• Observable result: Content items render in the block rail with their metadata and publication state.
• Access state: Role-restricted to the authenticated Pengurus HIMAPSI UNIMA.
• Failure/recovery: If content fails to load, a recoverable message with retry is shown; when no content exists, an all-caps prompt directs the pengurus to create the first item.
• Continuation: The pengurus opens Content Editor to create or update an item.

FR-10 — Create and update content and organisational information (required_inference) As a Pengurus HIMAPSI UNIMA, I should be able to create and update content and organisational information in Content Editor, so that the organisation's profile, activities, and published content stay current.

• Trigger/input: Authenticated pengurus opens Content Editor, selects an existing item or starts a new one, and edits its values.
• Observable result: The pengurus's changes are saved and the item's publication state is reflected in Content and on the public surfaces.
• Access state: Role-restricted to the authenticated Pengurus HIMAPSI UNIMA.
• Failure/recovery: A failed save or publish reports a recoverable message and preserves the pengurus's in-progress edits.
• Continuation: The pengurus returns to Content to review, or to the public surfaces to verify the published result.

4. User Personas

Pengurus HIMAPSI UNIMA

Product context. A member of the HIMAPSI UNIMA kepengurusan — the organisation's management body. This person is responsible for the organisation's public face: making sure the profile, activities, and published content on the website are present, accurate, and up to date. They work in the organisation's own voice, on behalf of the association, not as an individual.

Primary goal. Keep HIMAPSI UNIMA's content and organisational information published and correct, so that the public sees an accurate organisation.

Distinct accepted responsibilities. This persona is the only actor who writes to the system. They enroll themselves (Sign Up), verify themselves on return (Login), review what exists (Content), and author and publish (Content Editor). Their work is durable and resumable — they leave and come back, and their management state must still belong to them.

Relevant inputs or decisions. Enrollment details at first use; credentials on return; the content and organisational information they choose to create or update; the decision to save and publish.

Interactions with other accepted participants. The pengurus's work is what the Pengunjung Publik reads. Every item the pengurus publishes becomes visible on Profil, Kegiatan, or Konten. The pengurus's success is measured by whether the public can find and read correct information.

Observable success. The pengurus's changes are saved, the item's publication state is reflected in Content, and the published result is visible on the corresponding public surface.

What makes this role different. The pengurus is the only actor with an identity, the only actor with durable state, and the only actor who writes. The public visitor never enrolls, never logs in, and never changes anything.

Pengunjung Publik

Product context. A general visitor to the HIMAPSI UNIMA website — a student, prospective member, alumnus, lecturer, or member of the public. They arrive with no account and no relationship to the system beyond curiosity or need for information.

Primary goal. Find and read the information about HIMAPSI UNIMA that they need — the organisation's profile, its activities, and its published content — without obstruction.

Distinct accepted responsibilities. This persona reads. They navigate the public surfaces, read the profile, browse the activity index, and read published content. They make no commitments and create no state.

Relevant inputs or decisions. Which public surface to open; which activity or content entry to read; whether to continue to another surface.

Interactions with other accepted participants. The visitor is the recipient of the pengurus's published work. What the pengurus publishes is exactly what the visitor reads.

Observable success. The visitor finds and reads the organisation's profile, activities, and published content without encountering a barrier, and can move between public surfaces freely.

What makes this role different. The visitor has no identity, no durable state, and no write access. Their entire journey is anonymous reading, and any failure they encounter must be recoverable without an account.

5. Core User Flows

Flow A — Pengunjung Publik discovers and reads HIMAPSI UNIMA

1. Starting context. The visitor has no account and no prior session. They open the HIMAPSI UNIMA website.
2. Landing. The Landing poster renders: the oversized Anton word stack "HIMPUNAN / MAHASISWA / PROGRAM STUDI" flush-left, the Scher-red rectangle behind the lower half with crossing words flipped to white, the rotated "UNIMA · MANADO" micro-label in the yellow block, and the activity marquee. The visitor reads the organisation's identity from the poster itself.
3. Decision. The visitor chooses where to go. The primary CTA "Jelajahi Kegiatan" sits on the 4px black rule; navigation into Profil and Konten is also available.
4. Reading activities. The visitor selects "Jelajahi Kegiatan" and arrives at Kegiatan. The activity index renders as ruled poster bands, each with a 96px Anton date numeral in the left rail and the title set at 40–64px. The visitor reads the index and individual entries.
5. Observable result. The visitor has read the organisation's activities. If no activities are published, a poster-scale all-caps statement replaces the index and the visitor understands there is nothing scheduled.
6. Continuation. The visitor navigates to Profil to read the organisational profile — the editorial narrative on the left and the fact rail of yellow number blocks on the right — or to Konten to read published content.
7. Failure/recovery. If activity, profile, or content data fails to load, a recoverable message with retry is shown on that surface, and the visitor can retry or move to another public surface. No account is ever required.

Flow B — Pengurus HIMAPSI UNIMA enrolls for the first time

1. Starting context. A member of the kepengurusan has not yet used the website's management features. They open the website and follow the small black-on-paper login link on Landing, then switch to Sign Up.
2. Enrollment. The pengurus opens Sign Up and submits their enrollment details.
3. Observable result. A pengurus account is created and bound to that person.
4. Failure/recovery. If input is invalid or incomplete, the error is reported inline against the offending field. If creation fails, a recoverable message is shown and the entered values are preserved so the pengurus can correct and resubmit.
5. Continuation. The pengurus proceeds to verification/entry via Login.

Flow C — Pengurus HIMAPSI UNIMA returns and verifies

1. Starting context. The pengurus has an existing account and durable management state from previous work. They open Login.
2. Verification. The pengurus submits their credentials.
3. Observable result. Identity is verified and the pengurus reaches the management surfaces.
4. Failure/recovery. If the credentials are unrecognised, a recoverable message is shown without revealing which field was wrong. The pengurus retries, or switches to Sign Up if they do not yet have an account.
5. Continuation. The pengurus proceeds to Content.

Flow D — Pengurus HIMAPSI UNIMA reviews existing content

1. Starting context. The pengurus is authenticated and has arrived at Content.
2. Review. The paste-up board renders: the left rail of content blocks, the centre review column, and the right rail of live preview metadata, separated by black rules. The pengurus reads the items and their publication state.
3. Observable result. The pengurus can see what content and organisational information exists and in what state.
4. Failure/recovery. If content fails to load, a recoverable message with retry is shown and the workspace remains navigable. If no content exists yet, an all-caps prompt directs the pengurus to create the first item.
5. Continuation. The pengurus opens Content Editor to create or update an item.

Flow E — Pengurus HIMAPSI UNIMA creates or updates content and publishes it

1. Starting context. The pengurus is authenticated and has opened Content Editor, either from Content or directly.
2. Selection/input. The pengurus selects an existing item to update, or starts a new one. The editor renders the item's current values, or a blank editing column for a new item, with the live preview metadata rail alongside.
3. Authoring. The pengurus edits the title, body, category, and other values in the centre editing column, watching the preview rail reflect the state.
4. Commitment. The pengurus saves and publishes the item.
5. Observable result. The changes are saved and the item's publication state is reflected in Content and on the corresponding public surface.
6. Failure/recovery. If the save or publish fails, a recoverable message is shown and the pengurus's in-progress edits are preserved. The pengurus retries without losing work.
7. Continuation. The pengurus returns to Content to review, or navigates to the public surface to verify the published result as a Pengunjung Publik would see it.

6. Visuals Colors and Theme

Muse and headline. Paula Scher — Typography as architecture: HIMAPSI UNIMA as a public poster wall. The website is a sequence of posters, not an admin portal. Words are the image; colour blocks collide; type is set at poster scale and read across a courtyard.

Colour tokens (light mode).

Proportion: roughly 55% warm paper, 25% red, 10% yellow, 10% black/white. No blue anywhere — not in links, not in focus rings, not in charts. Focus ring is yellow on black.

Typography.

• Headings: Anton, all-caps, ultra-condensed and stacked. Tight multi-line blocks with line-height: 0.92 and negative tracking (-0.01em to -0.02em), filling the full column width so the word stack itself becomes a shape. Display sizes: clamp(48px, 11vw, 148px) for hero words; clamp(36px, 6.5vw, 88px) for section headlines. Occasional single words rotated 90° in the margin as a poster mark.
• Body: Archivo (400/500/700) — humanist, sturdy, invisible next to Anton. Measure capped at 62ch.
• Micro-labels: Archivo Expanded 700, all-caps, 12–13px with 0.14em tracking, for section kickers and metadata rails.
• Scale (1.5 modular): 148 / 96 / 64 / 40 / 28 / 20 / 17 / 15 / 13.
• Mobile: display starts at 48px, section headlines at 36px, body 17px, labels 13px all-caps.
• Line-height: 0.92 display, 1.15 subheads, 1.6 body.

Shape language. Hard edges only — zero border radius on cards, buttons, inputs, and images. Rectangles, full-bleed colour bands, diagonal dividers cut at 3–4° between sections, and thick 4px black rules as section separators. Buttons are solid rectangles with a 1px black outline offset 4px (a printed-registration shadow). Tags are flat rectangles of yellow or red with black caps. No pills, no soft shadows, no glass.

Layout. Poster grid with an exposed 12-column structure. Public pages alternate: full-bleed type band (red ground, oversized Anton stack) → warm-paper reading section with a single narrow measure → full-bleed image band cropped hard to the grid → yellow collision band with a rotated word. Asymmetric: headlines start in column 2 and bleed to column 12; metadata sits in column 1 as a stacked all-caps rail. Landing opens with a viewport-filling type composition, not a card grid. Kegiatan is a dense poster index of horizontal bands separated by 4px black rules — no identical hover-lift cards anywhere. Profil uses a two-column editorial spread with a stacked fact rail of numbers in yellow blocks. Editor surfaces keep the same grid but tighten to a paste-up board: left rail of content blocks, centre editing column, right rail of live preview metadata, all separated by black rules.

Imagery. Typography is the primary image. Where photography appears it is high-contrast, hard-cropped to the grid, and treated as a poster element: campus and activity photos duotoned to black + Scher red or black + yellow, bled off one edge, never framed in a rounded card. A recurring painted-map motif — a flat, hand-painted-looking abstract map of the faculty/campus as a colour-block composition — sits behind the Profil spread. Icons are flat pictograms in black on yellow blocks. No stock smiling students, no gradient blobs, no 3D renders.

Readable text and controls. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element covers any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Moving and scrollable content may cross the viewport edge by design, judged by whether it actually moves and whether every item becomes fully readable as it passes.

7. Signature Design Concept

The Landing hero is a full-viewport typographic poster — the headline itself is the hero image.

Composition, built only from accepted content and controls:

• A warm-paper ground (#F2E9DC) fills the viewport.
• A single enormous Anton stack sits flush-left, starting at column 2: "HIMPUNAN / MAHASISWA / PROGRAM STUDI" at clamp(48px, 11vw, 148px), line-height: 0.92, each line filling the column width so the block reads as a solid shape.
• Behind lines 2–3, a Scher-red (#E4312B) rectangle wipes in from the left, covering roughly the lower 55% of the viewport. The words that cross it flip to white.
• Top-right: a yellow (#F2B705) rectangle holds a rotated 90° all-caps micro-label "UNIMA · MANADO".
• Bottom-left: a 4px black rule with the primary CTA in a black rectangle — "Jelajahi Kegiatan" in white caps — sitting directly on the rule, plus a small black-on-paper login link for pengurus.
• Bottom-right: a live type marquee of upcoming activities in Archivo Expanded caps scrolling behind the red band.

No centred headline, no subtext paragraph, no blue button, no gradient. The first screen is a poster you could print.

Signature moves carried across the site:

• Exposed 12-column poster grid with a column-1 all-caps metadata rail (date, category, location) set vertically beside every section headline, so every public page reads like a printed programme.
• Kegiatan as a poster index: full-width horizontal bands separated by 4px black rules, each with a 96px Anton date numeral in the left rail; hover hard-cuts the row ground to red and the numeral to yellow.
• Colour-block section transitions: a 3–4° diagonal cut between a red band and the warm-paper section below, with a rotated single word (e.g. "KEGIATAN") sitting in the diagonal gutter.
• Continuous Archivo Expanded caps marquee of organisation news and taglines that crosses the viewport edge, stopping and wrapping into static rows under prefers-reduced-motion.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The oversized Anton word stack "HIMPUNAN / MAHASISWA / PROGRAM STUDI" — the headline is the hero image.
• Input → transformation → outcome thesis. On entry, the Scher-red rectangle wipes in from the left behind the lower half of the word stack; the words that cross it flip from ink black to white; the yellow "UNIMA · MANADO" block and the activity marquee settle into place. The outcome is a composed poster — the organisation's identity stated at poster scale — with the primary CTA and pengurus login link resting on the 4px black rule.
• Motion vocabulary. Poster-mechanical: colour-block wipes (a red rectangle scaling horizontally behind a headline on entrance), staggered word reveals where each line of the Anton stack slides up 24px and fades in 60ms apart, and a continuous type marquee for the organisation's tagline and upcoming activities. Hover on Kegiatan rows flips the row ground from paper to red and the date numeral from black to yellow — instant, hard cut, no easing theatrics beyond 180ms cubic-bezier(0.2, 0, 0, 1).
• Composed first frame. Warm-paper ground; the Anton stack flush-left at column 2; the red rectangle already wiped in behind the lower half with crossing words in white; the yellow rotated micro-label top-right; the 4px black rule with the black CTA rectangle and the pengurus login link bottom-left; the activity marquee bottom-right.
• Reduced-motion state. Under prefers-reduced-motion, all reveals resolve instantly to their final state, the marquee stops and its items wrap into static rows, and the poster composition is fully readable with no motion.

9. Non-Functional Requirements

NFR-1 — Dedicated organisational scope (explicit) The website is dedicated exclusively to the HIMAPSI UNIMA organisation. It does not serve other organisations, other study programmes, or unrelated campus services. Rationale: the authoritative requirement states the website is specifically for HIMAPSI UNIMA.

NFR-2 — Anonymous public readability (required_inference) All public reading surfaces (Landing, Profil, Kegiatan, Konten) must be reachable and fully readable without any identity. Rationale: the Pengunjung Publik's accepted journey is anonymous reading; requiring identity would obstruct it.

NFR-3 — Durable, actor-bound management state (required_inference) Content and organisational information managed by a pengurus must persist durably and remain bound to the correct authenticated participant across sessions. Rationale: the pengurus's accepted work is resumable and revisitable; state must not be lost or misattributed.

NFR-4 — Protected management surfaces (required_inference) Content and Content Editor must be inaccessible to unauthenticated visitors. Rationale: the accepted management lifecycle requires that only the authenticated Pengurus HIMAPSI UNIMA reaches the management surfaces.

NFR-5 — Recoverable failure without data loss (required_inference) A failed save or publish in Content Editor must preserve the pengurus's in-progress edits and present a recoverable message. Rationale: the accepted authoring lifecycle requires that a material failure does not destroy the pengurus's work.

NFR-6 — Readable text and controls at every viewport (explicit, from creative direction) Headlines, wordmarks, labels, numbers, card text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Rationale: the creative direction makes this a hard readability constraint.

NFR-7 — Reduced-motion compliance (explicit, from creative direction) Under prefers-reduced-motion, all reveals must resolve instantly to their final state, the marquee must stop and its items must wrap into static rows, and no content may be hidden by motion. Rationale: the creative direction requires that decorative motion never hides content.

NFR-8 — No blue, no rounded corners, no soft shadows (explicit, from creative direction) No blue or indigo may appear anywhere — not in links, focus rings, buttons, or chart series. Focus states are yellow on black. No rounded corners, pill buttons, soft drop shadows, glassmorphism, or frosted panels. Rationale: the creative direction forbids the generic indigo/blue-on-white SaaS template and specifies hard edges only.

10. Tech Stack

• Frontend: React — a single-page web application rendering the eight custom pages.
• Backend: Python / FastAPI — serving the public content endpoints and the authenticated management endpoints.
• Storage: A persistent datastore appropriate to the content and organisational information records and to application-owned pengurus identity.
• Containerisation: Docker / docker-compose for local and deployment packaging.
• Deployment: Kubernetes only if the deployment requires it; otherwise docker-compose is sufficient.

[Default — not specified by user] The authoritative thread and planning scope do not name a frontend framework, backend framework, datastore, or deployment platform. The above are coherent defaults consistent with the accepted delivery shape (custom UI, application-owned identity, backend integration required). No source-specified technology is overridden.

11. Assumptions and Constraints

Constraints (binding).

• The website is dedicated exclusively to the HIMAPSI UNIMA organisation. (explicit)
• The public reading surfaces are anonymous; the management surfaces are role-restricted to the authenticated Pengurus HIMAPSI UNIMA. (from the page and access contract)
• The visual direction is authoritative: warm-paper ground #F2E9DC, Scher red #E4312B, signal yellow #F2B705, ink black #101010, white surfaces, warm grey #6B6259; Anton for headings, Archivo for body; hard edges only; no blue anywhere. (explicit, from creative direction)
• Readable text and controls stay whole at 375px, 768px, and 1280px. (explicit, from creative direction)

Assumptions (narrow, labeled).

• [Assumption] The Pengurus HIMAPSI UNIMA enrolls via self-service because the source does not establish invitation or external provisioning for starting management use.
• [Assumption] Application-owned identity is used solely to bind durable management state to the correct pengurus and to gate the two management surfaces. No differentiated permissions among pengurus are established by the source.
• [Assumption] The public surfaces present content that the pengurus has published; unpublished or in-progress items are not shown to the Pengunjung Publik.
• [Assumption] No future-horizon requirements were accepted; everything in this document is current.

Explicit exclusions.

• No multi-organisation tenancy or shared platform serving organisations other than HIMAPSI UNIMA.
• No capabilities beyond public information presentation and organisational content management.
• No blue or indigo anywhere in the interface.
• No rounded corners, pill buttons, soft drop shadows, glassmorphism, or frosted panels.
• No stock photography of smiling students in rounded frames, no gradient blobs, no 3D/WebGL decoration.
• No auto-advancing carousel that removes items from reach; no scroll-jacking.

12. Glossary

• HIMAPSI UNIMA — Himpunan Mahasiswa Program Studi, Universitas Negeri Manado; the student association this website is dedicated to.
• Pengurus HIMAPSI UNIMA — a member of the organisation's kepengurusan (management body); the persona who enrolls, verifies, and manages content and organisational information.
• Pengunjung Publik — a public visitor to the website; the persona who reads the organisation's profile, activities, and published content anonymously.
• Kepengurusan — the management body of the organisation.
• Landing — the anonymous public entry surface presenting HIMAPSI UNIMA as a typographic poster.
• Profil — the anonymous public surface presenting the organisation's profile and identity.
• Kegiatan — the anonymous public surface presenting the organisation's activities as a poster index.
• Konten — the anonymous public surface presenting the organisation's published content.
• Content — the role-restricted management workspace where the pengurus reviews content and organisational information.
• Content Editor — the role-restricted focused authoring surface where the pengurus creates and updates content and organisational information.
• Sign Up — the anonymous self-service enrollment surface for a prospective pengurus.
• Login — the anonymous returning-verification surface for an existing pengurus.
• Poster band — a full-width horizontal activity row separated by 4px black rules, with a 96px Anton date numeral in the left rail.
• Fact rail — the stacked column of numbers in yellow blocks on the Profil spread.
• Paste-up board — the tightened editor layout: left rail of content blocks, centre editing column, right rail of live preview metadata, separated by black rules.