System Requirements Document for pc-himmah-langkat

1. Introduction

This document specifies the system requirements for the official website of Pimpinan Cabang Himpunan Mahasiswa Al Washliyah (PC HIMMAH) Langkat — the branch leadership of the Al Washliyah Islamic students' organisation in Langkat Regency, North Sumatra.

The product intent is a single organisational website that serves three purposes at once:

• a public face for the community, prospective members, and the general public, presenting who PC HIMMAH Langkat is, what it does, and how to reach it;
• an internal organ for cadres and members, carrying programs, activities, and announcements they can follow and revisit;
• an announcement board for the branch, publishing news and organisational developments.

The audience is therefore threefold: the branch leadership (pengurus) who maintain the site's content, the members and cadres (anggota/kader) who follow and participate in branch activity, and the general public who need to understand and contact the organisation. The site is delivered as a public, openly readable website with a restricted management area for the branch leadership.

2. System Overview

PC HIMMAH Langkat's website is a first-party web application. Its public surface — Landing, Profile, Programs, News, and Contact — is openly readable by anyone with no account required. Its management surface — Login and Dashboard — is reserved for the branch leadership, whose access is established through internal invitation or provisioning rather than open self-registration.

The system's actors are:

• Pengurus PC HIMMAH Langkat (Branch Leadership Administrator) — the branch leadership, who manage and update the organisation's content and information.
• Anggota / Kader HIMMAH Langkat — members and cadres, who visit to follow activities, programs, and announcements, and to learn how to join or participate.
• Pengunjung Umum / Masyarakat — the general public, students, and external parties seeking information about the organisation, including its profile, contact details, and activities.

The accepted behaviour is: publishing and maintaining the organisation's profile, programs, and news; reading those published materials; finding out how to contact the branch; and learning how to join or participate as a cadre. Content management is performed by the branch leadership inside a restricted Dashboard, reached through a Login verification surface.

Narrow exclusions: the site does not provide open self-service account registration for the public, does not provide member-facing accounts or member-only content areas, and does not provide online payment, donation, or e-commerce capability. No such capability is accepted in the source requirements.

2a. Product Interpretation and Delivery Boundary

The website is delivered as a first-party application owned and operated by PC HIMMAH Langkat. All public pages are anonymously reachable — a visitor never needs an account to read the profile, programs, news, or contact information. This is deliberate: the site's purpose is public information, and gating it would defeat that purpose.

The management area is a separate access boundary. Because the branch leadership must privately own and resume durable, organisation-specific content state, and because published organisational information must remain bound to the correct authorised pengurus, the application owns the identity of its administrators. That identity is not self-service: access is established through an internal invitation or provisioning step performed for the pengurus, and a pengurus who has been provisioned verifies themselves again at the Login surface before managing content. The Login surface is itself anonymously reachable — it is the entry interaction that establishes access to the protected Dashboard, and therefore cannot sit behind the protection it grants.

The Dashboard is restricted to the provisioned branch leadership. This restriction is a role restriction over shared organisational content state, not a general permission system: the accepted scope establishes one administrative role for the branch leadership, and no differentiated sub-roles, approval chains, or delegated permissions are accepted.

Current delivery covers the public information surface and the branch leadership's content management surface. Nothing in the accepted requirements establishes a future phase; no future-horizon capability is claimed here.

2b. Source Content Inventory

No reference directive in this project declares a content_source. There is no verified external factual inventory to reproduce, and no inventory section is included. All organisational facts displayed by the site are entered and maintained by the branch leadership through the Dashboard.

2c. Page Content and Component Coverage

The page inventory below is the final, ordered page contract for this project: Landing, Profile, Programs, News, Contact, Login, Dashboard. Each page appears exactly once.

Landing

• Information and state: The public entry surface. Presents the organisation's identity and the site's purpose, and routes visitors into the rest of the public content. No account or session state is required; the page is fully readable anonymously.
• Primary actions: Read the organisation's headline identity; open the latest news; move into Profile, Programs, News, or Contact; follow the join/participate call to action.
• Supporting actions: Read the branch's full name and address; read the latest three news headlines; follow the header wordmark back to Landing from any public page.
• Domain entities: Organisation identity (name, branch, address), latest news headlines, section navigation.
• Component responsibilities:
  • Header — the two-line wordmark "PC HIMMAH" / "LANGKAT" with a 3px orange rule beneath it, plus the public section navigation.
  • Hero type block — a full-width, flush-left typographic block: line one "HIMMAH LANGKAT", line two "MENGABDI, MENDIDIK, MENYATUKAN"; a narrow right-hand stack carrying the organisation's full name, the branch address in Langkat, and a single orange "Gabung Kader" call to action pinned to the headline baseline.
  • Accent rule and headline ticker — a full-bleed 3px orange rule under the hero carrying a horizontal marquee of the three latest news headlines in 13px uppercase muted type.
  • Left rail — the persistent section rail showing "01 / BERANDA" vertically with its coloured line.
  • Section blocks — numbered, ruled entry blocks that introduce the organisation and link onward to Profile, Programs, News, and Contact.
• States:
  • Loading: the hero type block and header render immediately as static structure; the headline ticker and any news-derived content show a reserved, ruled placeholder band rather than a spinner.
  • Empty: if no news has been published, the accent rule renders without the ticker and the news entry block states plainly that no news has been published yet, with a link to News.
  • Success: the hero, the ticker of the three latest headlines, and the onward section links are all present and readable.
  • Error: if the latest-headlines request fails, the ticker band is omitted and the rest of the page remains fully usable; the news entry block shows a short retry affordance.
  • Recovery: retrying the headlines request re-populates the ticker in place without a full page reload.

Profile

• Information and state: The organisation's identity and background — who PC HIMMAH Langkat is, its position within Himpunan Mahasiswa Al Washliyah, and its branch context in Langkat. Publicly readable, no account required.
• Primary actions: Read the organisation's profile; move to Programs, News, or Contact.
• Supporting actions: Read the branch's full name and address; return to Landing via the wordmark.
• Domain entities: Organisation profile content (identity, background, branch context), organisation structure where published.
• Component responsibilities:
  • Header and left rail — as on all public pages, with the rail showing "01 / PROFIL".
  • Numbered section blocks — profile sections opening with a 12px uppercase label such as "01.1 — TENTANG" followed by a full-width 1px ink hairline.
  • Structure diagram — where the organisation's structure is published, a schematic line diagram in the Spiekermann pictogram style rather than a decorative illustration.
  • Documentary image frames — activity photographs cropped to the grid and framed with a 1px ink hairline.
• States:
  • Loading: section labels and hairlines render as static structure; content areas show ruled placeholder blocks.
  • Empty: if a profile section has not yet been filled in, that section is omitted rather than shown blank; if the whole profile is unpublished, the page states that the profile is being prepared.
  • Success: all published profile sections render in numbered order.
  • Error: a failed content request leaves the page shell and navigation intact and shows a short retry affordance in the affected section.
  • Recovery: retry re-fetches the affected section in place.

Programs

• Information and state: The branch's work programs and activities, presented as a reviewable list that the public and members can return to. Publicly readable, no account required.
• Primary actions: Read the list of programs and activities; open an individual program's detail.
• Supporting actions: Read program metadata (period, status, code); move to Profile, News, or Contact.
• Domain entities: Program (title, description, period, status, program code), activity entries.
• Component responsibilities:
  • Header and left rail — rail showing "02 / PROGRAM".
  • Numbered section blocks — opening with labels such as "02.3 — PROGRAM KERJA" and a full-width 1px ink hairline.
  • Program list — ruled rows with tabular numerals for program codes and dates, no zebra striping.
  • Program timeline — where a program runs over time, a transit-line style timeline with numbered stops.
  • Program detail panel — the expanded description of a selected program.
• States:
  • Loading: the ruled list frame renders with placeholder rows.
  • Empty: if no programs have been published, the page states that no programs have been published yet.
  • Success: all published programs render in ruled rows with their metadata.
  • Error: a failed request leaves the page shell intact and shows a retry affordance in place of the list.
  • Recovery: retry re-fetches the program list in place.

News

• Information and state: The branch's news and announcements, newest first, so that developments can be followed and revisited. Publicly readable, no account required.
• Primary actions: Read the news list; open an individual news item.
• Supporting actions: Read publication dates and metadata; move to Profile, Programs, or Contact.
• Domain entities: News item (title, body, publication date, status), announcement.
• Component responsibilities:
  • Header and left rail — rail showing "03 / BERITA".
  • Numbered section blocks — opening with labels such as "03.1 — BERITA TERBARU" and a full-width 1px ink hairline.
  • News list — ruled entries with tabular-figure dates in muted type.
  • News detail — the full body of a selected item.
• States:
  • Loading: the ruled list frame renders with placeholder entries.
  • Empty: if no news has been published, the page states that no news has been published yet.
  • Success: published items render newest first with their dates.
  • Error: a failed request leaves the page shell intact and shows a retry affordance in place of the list.
  • Recovery: retry re-fetches the news list in place.

Contact

• Information and state: How to reach the branch leadership — the branch's contact details and location in Langkat. Publicly readable, no account required.
• Primary actions: Read the branch's contact details and address.
• Supporting actions: Follow a published contact channel; move to Profile, Programs, or News.
• Domain entities: Contact details (address, published contact channels), branch location.
• Component responsibilities:
  • Header and left rail — rail showing "04 / KONTAK".
  • Numbered section blocks — opening with labels such as "04.1 — HUBUNGI KAMI" and a full-width 1px ink hairline.
  • Contact detail block — the published address and contact channels, set with clear labels.
• States:
  • Loading: section labels and hairlines render as static structure; the detail block shows a ruled placeholder.
  • Empty: if a contact channel has not been published, it is omitted rather than shown blank.
  • Success: all published contact details render with their labels.
  • Error: a failed request leaves the page shell intact and shows a retry affordance in the detail block.
  • Recovery: retry re-fetches the contact details in place.

Login

• Information and state: The verification surface for branch leadership who have already been provisioned. It is anonymously reachable — it is the entry interaction that establishes access to the protected Dashboard, so it cannot itself sit behind that protection. It carries no public content and no registration flow.
• Primary actions: Verify as a provisioned pengurus to reach the Dashboard.
• Supporting actions: Read the guidance that access is established through internal invitation or provisioning; return to the public site.
• Domain entities: Administrator identity (provisioned account), verification credential.
• Component responsibilities:
  • Centred verification panel — the one centred composition in the public-facing layout, holding the identity and credential fields and the submit control.
  • Provisioning guidance — a short statement that access is granted through internal invitation or provisioning, not open registration.
  • Return link — a link back to the public site.
• States:
  • Loading: the panel renders immediately; the submit control shows a pending state while verification is in flight.
  • Empty: not applicable — the panel always presents its fields.
  • Success: a verified pengurus is taken to the Dashboard.
  • Error: invalid or unrecognised credentials produce a clear, non-revealing error message and the fields remain editable for another attempt.
  • Recovery: the pengurus may retry immediately; repeated failures do not lock the surface, and the provisioning guidance remains visible so an unprovisioned person understands why they cannot proceed.

Dashboard

• Information and state: The branch leadership's working area for managing and updating the organisation's content and information as displayed on the public site. Restricted to provisioned pengurus. It shows the current state of the organisation's content — profile, programs, and news — including which items are published, still in draft, or archived.
• Primary actions: Create, edit, publish, and archive profile content, programs, and news items.
• Supporting actions: Review the current content inventory; see each item's status; open an inline edit panel; return to the public site to check the result.
• Domain entities: Profile content, program (title, description, period, status, program code), news item (title, body, publication date, status), content status (published / draft / archived).
• Component responsibilities:
  • Left navigation rail — numbered items for the content areas the pengurus manages, using the same grid as the public pages at a denser rhythm.
  • Ruled data tables — tabular Fira Sans numerals, ruled rows, no zebra striping, with each row's status shown as a small square colour chip (green = published, orange = draft, muted = archived).
  • Inline edit panels — white sheets that open on the paper ground for editing a selected item.
  • Statistic readouts — counts of content items, with numerals that count up once on load when a statistic changes.
• States:
  • Loading: the rail and table frames render as static structure; rows show ruled placeholders.
  • Empty: when a content area has no items yet, the table states that no items exist and offers the create action.
  • Success: saved changes are reflected in the table and, once published, on the corresponding public page.
  • Error: a failed save or load shows a clear message against the affected row or panel, and the pengurus's unsaved input is preserved so it is not lost.
  • Recovery: the pengurus may retry the save directly from the error state; a failed load can be retried without leaving the Dashboard.

3. Functional Requirements

Each requirement below is a distinct story point with its provenance, lifecycle facts, and observable acceptance.

FR-01 — Public organisational website (explicit) As a Pengunjung Umum / Masyarakat, I should be able to open the PC HIMMAH Langkat website and read the organisation's public information without an account, so that I can understand who the organisation is and what it does.

• Trigger/input: the visitor opens the site.
• Observable result: the Landing page renders with the organisation's identity and routes into Profile, Programs, News, and Contact.
• Access state: anonymous; no account or session required.
• Failure/recovery: if a content request fails, the page shell and navigation remain usable and the affected block offers a retry.
• Continuation: the visitor moves into any public section.

FR-02 — Read the organisation profile (explicit) As an Anggota / Kader HIMMAH Langkat or Pengunjung Umum / Masyarakat, I should be able to read the organisation's profile, so that I understand PC HIMMAH Langkat's identity and its position within Himpunan Mahasiswa Al Washliyah.

• Trigger/input: the visitor opens Profile.
• Observable result: the published profile sections render in numbered order.
• Access state: anonymous.
• Failure/recovery: a failed section request leaves the page shell intact and offers a retry for that section.
• Continuation: the visitor moves to Programs, News, or Contact.

FR-03 — Review work programs and activities (explicit) As an Anggota / Kader HIMMAH Langkat or Pengunjung Umum / Masyarakat, I should be able to review the branch's work programs and activities, so that I can follow what the branch is doing and return to it later.

• Trigger/input: the visitor opens Programs.
• Observable result: published programs render as ruled rows with their period, status, and program code.
• Access state: anonymous.
• Failure/recovery: a failed list request leaves the page shell intact and offers a retry in place of the list.
• Continuation: the visitor opens an individual program or moves to another section.

FR-04 — Follow branch news and announcements (explicit) As an Anggota / Kader HIMMAH Langkat or Pengunjung Umum / Masyarakat, I should be able to read the branch's news and announcements, so that I can follow the organisation's latest developments.

• Trigger/input: the visitor opens News, or follows a headline from the Landing ticker.
• Observable result: published news items render newest first with their publication dates.
• Access state: anonymous.
• Failure/recovery: a failed list request leaves the page shell intact and offers a retry in place of the list.
• Continuation: the visitor opens an individual item or moves to another section.

FR-05 — Find out how to contact the branch (explicit) As a Pengunjung Umum / Masyarakat, I should be able to find how to contact the branch leadership, so that I can reach the organisation directly.

• Trigger/input: the visitor opens Contact.
• Observable result: the published address and contact channels render with clear labels.
• Access state: anonymous.
• Failure/recovery: a failed request leaves the page shell intact and offers a retry in the detail block.
• Continuation: the visitor uses a published contact channel or returns to another section.

FR-06 — Learn how to join or participate (explicit) As an Anggota / Kader HIMMAH Langkat or prospective member, I should be able to find out how to join or participate in the branch, so that I can take part in its activities.

• Trigger/input: the visitor follows the join call to action on Landing or reads the relevant published content.
• Observable result: the visitor reaches the published information on joining or participating and the branch's contact channels.
• Access state: anonymous.
• Failure/recovery: if the destination content fails to load, the page shell remains usable and the block offers a retry.
• Continuation: the visitor contacts the branch through a published channel.

FR-07 — Administrator access is provisioned, not self-registered (required_inference) As a Pengurus PC HIMMAH Langkat (Branch Leadership Administrator), I should receive an invitation or provisioning that establishes my access, so that only authorised branch leadership can manage the organisation's content.

• Trigger/input: an internal invitation or provisioning step is performed for the pengurus.
• Observable result: the pengurus holds a provisioned administrator identity that the Login surface recognises.
• Access state: this establishes the identity; the Login surface itself remains anonymously reachable.
• Failure/recovery: a person who has not been provisioned cannot proceed and is told that access is established through internal invitation or provisioning.
• Continuation: the provisioned pengurus verifies at Login.

FR-08 — Verify again before managing content (required_inference) As a Pengurus PC HIMMAH Langkat (Branch Leadership Administrator), I should verify myself at the Login surface before managing content, so that the organisation's published information stays bound to the correct authorised pengurus.

• Trigger/input: the provisioned pengurus submits their identity and credential at Login.
• Observable result: on success the pengurus reaches the Dashboard; on failure a clear, non-revealing error is shown and the fields remain editable.
• Access state: Login is anonymously reachable; the Dashboard is restricted to provisioned pengurus.
• Failure/recovery: the pengurus may retry immediately; the provisioning guidance stays visible.
• Continuation: the verified pengurus works in the Dashboard.

FR-09 — Manage the organisation's profile content (required_inference) As a Pengurus PC HIMMAH Langkat (Branch Leadership Administrator), I should be able to create, edit, publish, and archive the organisation's profile content, so that the public Profile page presents an accurate identity for the branch.

• Trigger/input: the pengurus opens the profile content area in the Dashboard and edits an item.
• Observable result: the saved item appears in the Dashboard table with its status chip, and once published it appears on the public Profile page.
• Access state: restricted to provisioned pengurus.
• Failure/recovery: a failed save shows a clear message against the affected item and preserves the pengurus's unsaved input for retry.
• Continuation: the pengurus continues editing or returns to the public site to check the result.

FR-10 — Manage work programs and activities (required_inference) As a Pengurus PC HIMMAH Langkat (Branch Leadership Administrator), I should be able to create, edit, publish, and archive the branch's work programs and activities, so that the public Programs page reflects what the branch is actually doing.

• Trigger/input: the pengurus opens the programs content area in the Dashboard and edits an item, including its period, status, and program code.
• Observable result: the saved program appears in the Dashboard table with its status chip, and once published it appears on the public Programs page.
• Access state: restricted to provisioned pengurus.
• Failure/recovery: a failed save shows a clear message against the affected row and preserves unsaved input for retry.
• Continuation: the pengurus continues editing or checks the public Programs page.

FR-11 — Manage news and announcements (required_inference) As a Pengurus PC HIMMAH Langkat (Branch Leadership Administrator), I should be able to create, edit, publish, and archive news items and announcements, so that the public News page and the Landing headline ticker carry the branch's latest developments.

• Trigger/input: the pengurus opens the news content area in the Dashboard and edits an item, including its title, body, and publication date.
• Observable result: the saved item appears in the Dashboard table with its status chip; once published it appears on the public News page and, if among the latest three, in the Landing ticker.
• Access state: restricted to provisioned pengurus.
• Failure/recovery: a failed save shows a clear message against the affected row and preserves unsaved input for retry.
• Continuation: the pengurus continues editing or checks the public News page.

FR-12 — Review the current content inventory and status (required_inference) As a Pengurus PC HIMMAH Langkat (Branch Leadership Administrator), I should be able to review the current state of the organisation's content and each item's status, so that I know what is published, what is still a draft, and what has been archived.

• Trigger/input: the pengurus opens the Dashboard.
• Observable result: ruled tables list the content items with tabular-figure metadata and a square status chip per row (green = published, orange = draft, muted = archived).
• Access state: restricted to provisioned pengurus.
• Failure/recovery: a failed load shows a clear message and can be retried without leaving the Dashboard.
• Continuation: the pengurus opens an item for editing.

FR-13 — Return to the public site to check the result (required_inference) As a Pengurus PC HIMMAH Langkat (Branch Leadership Administrator), I should be able to return to the public site from the Dashboard, so that I can confirm how published content appears to visitors.

• Trigger/input: the pengurus follows the link back to the public site.
• Observable result: the public pages render the published content as visitors see it.
• Access state: the public pages remain anonymously readable; the Dashboard remains restricted.
• Failure/recovery: if the public page fails to load, the pengurus can return to the Dashboard and retry.
• Continuation: the pengurus returns to the Dashboard to make further changes.

4. User Personas

Pengurus PC HIMMAH Langkat (Branch Leadership Administrator)

Product context. The pengurus is the branch leadership of PC HIMMAH Langkat — the people accountable for how the organisation presents itself to the public and to its own cadres. Their work on the site is stewardship rather than authorship for its own sake: the site is the branch's public record, and it must be accurate.

Primary goal. Keep the organisation's profile, work programs, and news accurate and available on the public site, so that anyone looking for PC HIMMAH Langkat finds correct, current information.

Distinct accepted responsibilities. The pengurus is the only actor who writes to the system. They create, edit, publish, and archive profile content, programs, and news items; they review the current content inventory and each item's status; and they check the public result of their work. They are also the only actor whose access is provisioned rather than open.

Relevant inputs and decisions. The pengurus decides what is published versus held as a draft versus archived, and supplies the substance of each item — profile text, program title, description, period, status, and program code, and news title, body, and publication date. Their most consequential decision is publication: whether an item is ready to appear on the public site.

Interactions with other accepted participants. The pengurus's work is what the other two personas read. Every published profile section, program, and news item is the pengurus's output consumed by members, cadres, and the general public; the Landing headline ticker is drawn directly from their three most recent published news items. Their access is established for them through internal invitation or provisioning rather than by their own registration.

Observable success. The Dashboard shows the branch's content with clear status chips, and the public pages show exactly what the pengurus published — the profile reads accurately, the programs list reflects real branch activity, and the news page and Landing ticker carry the latest developments.

Source-backed constraints. Access is provisioned, not self-service; the pengurus verifies again at Login before managing content; the Dashboard is restricted to them.

Anggota / Kader HIMMAH Langkat

Product context. Members and cadres are the organisation's own people. They already belong; they come to the site to stay connected to what the branch is doing and to find out how to take part.

Primary goal. Follow the branch's activities, programs, and announcements, and find out how to join or participate.

Distinct accepted responsibilities. The member/cadre reads — they review the branch's work programs and activities, follow news and announcements, read the organisation's profile, and look for how to join or participate. They do not write to the system and hold no account.

Relevant inputs and decisions. Their inputs are their own interests and timing: which program or announcement they want to follow, and whether they intend to participate. Their decision is whether and how to take part.

Interactions with other accepted participants. They consume the pengurus's published content and share the public pages with the general public. When they decide to participate, they reach the branch through the same published contact channels the general public uses.

Observable success. They find relevant, current information about activities and membership, and they can act on it by contacting the branch.

Source-backed constraints. No account is required and none is offered to them; the public pages are openly readable.

Pengunjung Umum / Masyarakat

Product context. The general public — community members, students, and external parties — arrive without prior knowledge of the organisation. They may be looking for who PC HIMMAH Langkat is, what it does, or how to reach it.

Primary goal. Understand the organisation and be able to contact it.

Distinct accepted responsibilities. The general visitor reads the organisation's profile, reviews its programs and activities, reads its news, and finds its contact details. They do not write to the system and hold no account.

Relevant inputs and decisions. Their input is their reason for visiting — curiosity about the organisation, a need to verify its identity, or a need to make contact. Their decision is whether to reach out.

Interactions with other accepted participants. They read the pengurus's published content and share the public pages with members and cadres. Their endpoint is the branch's published contact channels.

Observable success. They can explain who PC HIMMAH Langkat is and can reach the organisation through a published contact channel.

Source-backed constraints. No account is required; the public pages are openly readable.

5. Core User Flows

Flow A — A general visitor understands the organisation and makes contact (Pengunjung Umum / Masyarakat)

1. The visitor arrives at the Landing page with no account and no prior knowledge of the organisation.
2. The visitor reads the hero type block: "HIMMAH LANGKAT" / "MENGABDI, MENDIDIK, MENYATUKAN", with the organisation's full name and branch address in the right-hand stack.
3. The visitor moves to Profile and reads the published profile sections in numbered order, learning who PC HIMMAH Langkat is and its position within Himpunan Mahasiswa Al Washliyah.
4. The visitor moves to Programs and reviews the branch's work programs and activities as ruled rows with their periods and statuses.
5. The visitor moves to News and reads the branch's latest announcements, newest first.
6. The visitor moves to Contact and reads the branch's published address and contact channels.
7. Observable result: the visitor understands the organisation and holds a published channel through which to reach it.
8. Continuation: the visitor uses a published contact channel to reach the branch leadership.

Failure and recovery: if any section's content fails to load, the page shell and navigation remain usable and the affected block offers a retry; the visitor can continue reading the other sections meanwhile.

Flow B — A member or cadre follows branch activity and finds out how to participate (Anggota / Kader HIMMAH Langkat)

1. The member arrives at the Landing page and reads the headline ticker of the three latest news headlines in the accent bar.
2. The member follows a headline into News and reads the full item.
3. The member moves to Programs and reviews the branch's work programs and activities, opening an individual program to read its detail.
4. The member returns to Programs later to re-check a program's period and status — the page is openly readable and requires no account.
5. The member follows the join call to action from Landing and reads the published information on joining or participating.
6. The member moves to Contact and uses a published contact channel to reach the branch leadership about participating.
7. Observable result: the member has followed current branch activity and has a concrete route to participate.
8. Continuation: the member continues to follow the site for new programs and announcements.

Failure and recovery: if the news list or program list fails to load, the member sees a retry affordance in place of the list and can retry without leaving the page.

Flow C — A pengurus is provisioned and verifies access (Pengurus PC HIMMAH Langkat)

1. The branch leadership performs an internal invitation or provisioning step for the pengurus, establishing their administrator identity. This is not open self-registration.
2. The pengurus opens the Login surface, which is anonymously reachable and carries the guidance that access is established through internal invitation or provisioning.
3. The pengurus submits their identity and credential in the centred verification panel.
4. Observable result on success: the pengurus is taken to the restricted Dashboard.
5. Observable result on failure: a clear, non-revealing error message is shown, the fields remain editable, and the provisioning guidance stays visible.
6. Recovery: the pengurus retries immediately; repeated failures do not lock the surface. A person who has not been provisioned understands from the guidance why they cannot proceed.
7. Continuation: the verified pengurus begins managing content.

Flow D — A pengurus publishes a news item and checks the public result (Pengurus PC HIMMAH Langkat)

1. The verified pengurus is in the Dashboard and reviews the ruled content tables, each row carrying a square status chip (green = published, orange = draft, muted = archived).
2. The pengurus opens the news content area and creates a new item, entering its title, body, and publication date in an inline edit panel that opens as a white sheet on the paper ground.
3. The pengurus saves the item as a draft. Observable result: the item appears in the table with an orange draft chip and is not visible on the public site.
4. The pengurus decides the item is ready and publishes it. Observable result: the row's chip turns green.
5. The pengurus follows the link back to the public site and opens News. Observable result: the item appears newest-first with its publication date; because it is among the latest three, it also appears in the Landing headline ticker.
6. Continuation: the pengurus returns to the Dashboard to continue managing content.

Failure and recovery: if the save fails, a clear message appears against the affected row and the pengurus's unsaved input is preserved so it is not lost; the pengurus retries the save directly from the error state.

Flow E — A pengurus updates a work program (Pengurus PC HIMMAH Langkat)

1. The verified pengurus opens the Dashboard and reviews the programs table, with tabular-figure program codes, periods, and status chips.
2. The pengurus opens an existing program in an inline edit panel and updates its description, period, or status.
3. The pengurus saves. Observable result: the updated values appear in the ruled row with tabular numerals.
4. The pengurus publishes the change. Observable result: the public Programs page shows the updated program.
5. Continuation: the pengurus moves on to another content area, or returns to the public site to confirm the result.

Failure and recovery: a failed load of the programs table shows a clear message and can be retried without leaving the Dashboard; a failed save preserves the pengurus's input for retry.

Flow F — A pengurus maintains the organisation profile (Pengurus PC HIMMAH Langkat)

1. The verified pengurus opens the Dashboard and enters the profile content area.
2. The pengurus edits a profile section, or creates a new one, in an inline edit panel.
3. The pengurus saves and publishes. Observable result: the section appears on the public Profile page in its numbered position.
4. The pengurus archives a section that is no longer accurate. Observable result: the row's chip turns muted and the section no longer appears on the public Profile page.
5. Continuation: the pengurus returns to the public site to confirm the profile reads accurately.

Failure and recovery: if a section request fails on the public page, the page shell remains intact and the affected section offers a retry; in the Dashboard, a failed save preserves the pengurus's input.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Erik Spiekermann, and the headline idea is typography as infrastructure — clear columns, numbered systems, and signal colours used like transit lines, with a humanist sans carrying warmth inside order.

Colour tokens — light mode

Contrast: #16181A on #F4EFE6 = 14.4:1; #FFFFFF on #0E6B4A = 6.6:1; #E4572E on #F4EFE6 = 3.4:1 — the accent is used for rules and large type only, never body copy.

Typography

• Headings: Fira Sans Condensed — Condensed 700/800 for display headlines, tight tracking (−0.02em), sentence case for Indonesian readability; small-caps-style uppercase 600 at 12–13px with +0.14em tracking for section labels and column headers. Display sizes are deliberately huge and flush-left, ragged-right. One weight contrast only: 800 display versus 400 body — no 500/600 mush in between.
• Body: Fira Sans.
• Scale: 1.333 modular on a 16px base — 16 / 21 / 28 / 38 / 50 / 67 / 89. Display headline clamp(44px, 9.5vw, 132px); section H2 clamp(30px, 5vw, 56px); card H3 clamp(20px, 2.4vw, 28px); body 16–18px with 1.65 line-height; labels 12px uppercase with +0.14em tracking; numerals set in Fira Sans with tabular figures for dates, counts, and program codes.

Shape language. Rectilinear and honest. 2px radius maximum on buttons and inputs (essentially square), 0px on cards and image frames. Structure is expressed with 1px ink hairlines and 3px coloured rules rather than shadows. Buttons are solid rectangles with uppercase labels; the primary button is green with white text, the secondary is a 1px ink outline on paper. Iconography is pictogram-like: 1.5px stroke, geometric, drawn on a 24px grid, always paired with a label. No pills, no blobs, no soft continuous curves.

Layout. A visible 12-column grid with 24px gutters and a persistent left rail (64px on desktop) carrying the section number and a vertical coloured line, like a transit-line diagram running down the page. Content is flush-left and ragged-right, never centred except the 404 and login. Sections are separated by a full-width 1px ink rule with a 3px green or orange segment aligned to the current section, so the page reads as a numbered system: 01 Profil, 02 Program, 03 Berita, 04 Kontak. Public pages alternate between a full-bleed type block and a white content panel on the paper ground. The Dashboard uses the same grid but inverted in density: a left nav rail with numbered items, a ruled data table with tabular numerals, and inline edit panels that open as white sheets on the paper ground. Mobile collapses to one column with the numbered rail becoming a horizontal sticky strip of section tabs under the header.

Imagery. Documentary and informational rather than decorative: real photographs of branch activities, seminars, and community service, treated with a slight warm desaturation so they sit inside the paper palette; photographs are always cropped to the grid and framed with a 1px ink hairline, never bled with rounded corners. Where photography is unavailable, use Spiekermann-style pictograms and schematic line diagrams (organisation structure as a wayfinding map, program timeline as a transit line with numbered stops). No stock people, no 3D renders, no gradient blobs, no illustration for its own sake.

Explicitly avoided. Blue–indigo primary or accent anywhere (no #2563EB, #4F46E5, #6366F1 and neighbours) and no blue-on-white SaaS look; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body; centred hero with subtext and a rounded blue button; gradient-blob backgrounds; rounded cards with soft shadows and hover-lift; pill buttons and 16px+ radii; glassmorphism, frosted panels, and translucent overlays; photography with rounded corners, drop shadows, or full-bleed bleed behind text; decorative illustration, mascots, 3D renders, and emoji as section markers; marquee or motion that continues under prefers-reduced-motion; text or controls cropped at 375px.

Readable-text integrity. 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, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design and is judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes. Under prefers-reduced-motion it stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling.

7. Signature Design Concept

The public-information poster. The Landing page is composed as a printed public notice rather than a landing page. On the #F4EFE6 paper ground, an 8-of-12-column flush-left headline in Fira Sans Condensed 800 at clamp(44px, 9.5vw, 132px) reads "HIMMAH LANGKAT" on line one in ink #16181A and "MENGABDI, MENDIDIK, MENYATUKAN" on line two in #0E6B4A. To the right, a narrow 4-column stack holds the organisation's full name, the branch address in Langkat, and a single orange #E4572E CTA "Gabung Kader" pinned to the baseline of the headline. Beneath the headline, a full-bleed 3px orange rule runs edge to edge; directly under it, a horizontal ticker of the three latest headlines in 13px uppercase muted type. The left rail shows "01 / BERANDA" vertically. There is no hero image, no gradient, and no centred stack — the headline is the dominant element at every breakpoint, and the composition reads as a numbered system rather than a stack of cards.

The concept recomposes only accepted content and controls: the organisation's identity, its address, the join call to action, the latest published headlines, and the section navigation. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the full-width typographic hero block — "HIMMAH LANGKAT" / "MENGABDI, MENDIDIK, MENYATUKAN" — with the narrow right-hand stack and the orange rule beneath it.
• Input → transformation → outcome thesis: as the page settles, the headline block and its right-hand stack resolve into place with a single 200ms opacity/6px rise on the section header; the orange rule then carries the three latest published headlines in a 40-second horizontal marquee. The transformation is one of arrival and circulation: the organisation's identity lands, and its latest news begins to move past the reader. No accepted behaviour is added — the marquee carries only headlines the pengurus has already published.
• Motion vocabulary: functional and short — 120–180ms ease-out on hover and state change, no bounce, no parallax. One purposeful loop: the 40-second headline marquee in the accent bar. Page transitions are instant. Scroll reveals are limited to a single 200ms opacity/6px rise on section headers. Dashboard statistics count up once on load (600ms, linear) when a statistic changes.
• Composed first frame: the paper ground, the flush-left two-line headline with line two in green, the right-hand stack with the orange CTA pinned to the headline baseline, the full-bleed 3px orange rule beneath, and the left rail reading "01 / BERANDA" vertically — all present and readable before any motion begins.
• Reduced-motion state: under prefers-reduced-motion the marquee stops and wraps into a readable stacked list of the three headlines; the section-header rise is removed; the Dashboard count-up resolves immediately to its final value. Every headline remains fully readable.

9. Non-Functional Requirements

NFR-01 — Public readability without an account (explicit) The Landing, Profile, Programs, News, and Contact pages must be readable by anyone without an account or session. Rationale: the site's accepted purpose is public information for the community, members, and the general public.

NFR-02 — Restricted management area (required_inference) The Dashboard must be reachable only by provisioned and verified branch leadership. Rationale: published organisational information must remain bound to the correct authorised pengurus, and the accepted access contract marks the Dashboard role_restricted.

NFR-03 — Provisioned access, no open registration (required_inference) Administrator access must be established through internal invitation or provisioning, with no open self-service registration surface. Rationale: the accepted access contract establishes administrator identity through invitation or provisioning.

NFR-04 — Readable-text integrity across viewports (explicit) 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: stated directly in the creative direction's readable-text rule.

NFR-05 — Reduced-motion compliance (explicit) Under prefers-reduced-motion, the headline marquee must stop and present its items as a readable stacked list (or a horizontally scrollable row), and no motion may continue. Rationale: stated directly in the creative direction.

NFR-06 — Accessible colour contrast (explicit) Text and controls must meet the contrast ratios established by the palette: #16181A on #F4EFE6 = 14.4:1; #FFFFFF on #0E6B4A = 6.6:1; #E4572E on #F4EFE6 = 3.4:1, with the accent restricted to rules and large type and never used for body copy. Rationale: stated directly in the creative direction.

NFR-07 — Content accuracy between Dashboard and public pages (required_inference) A published item must appear on its corresponding public page with the values the pengurus saved, and an archived item must not appear publicly. Rationale: the pengurus's observable success is that the public pages show exactly what was published.

NFR-08 — Preservation of unsaved administrator input on failure (required_inference) A failed save in the Dashboard must preserve the pengurus's unsaved input so it can be retried without re-entry. Rationale: required to make the accepted content-management lifecycle recoverable.

10. Tech Stack

No technology choices are specified in the authoritative user requirements. The following are coherent defaults for this project, labelled as such.

• Frontend: React — a first-party web application with a public surface and a restricted management surface. [Default — not specified by user]
• Backend: Python / FastAPI — serving the public content endpoints and the restricted content-management endpoints. [Default — not specified by user]
• Storage: a relational database for organisation profile content, programs, news items, and administrator identities, with a content status field (published / draft / archived). [Default — not specified by user]
• Containerisation: Docker with docker-compose for local and single-host deployment. [Default — not specified by user]
• Orchestration: Kubernetes is not required by any accepted requirement and is not included. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions

• A-01 — The branch leadership is a small, known group, so a single administrative role is sufficient; no differentiated sub-roles, approval chains, or delegated permissions are assumed. (required_inference)
• A-02 — Administrator access is established by an internal invitation or provisioning step performed outside the public site; the site provides the verification surface, not the provisioning workflow. (required_inference)
• A-03 — Organisational facts displayed on the site — profile text, program details, news content, address, and contact channels — are supplied by the branch leadership through the Dashboard rather than from an external content source. (required_inference)
• A-04 — The site is Indonesian-language in its content and labels, consistent with the organisation's context and the creative direction's Indonesian section labels. (basic_default)

Constraints

• C-01 — The public pages (Landing, Profile, Programs, News, Contact) are openly readable with no account required. (explicit)
• C-02 — The Dashboard is restricted to provisioned branch leadership. (explicit)
• C-03 — Administrator access is established through internal invitation or provisioning; there is no open self-service registration for the public. (required_inference)
• C-04 — The Login surface is anonymously reachable, because it is the entry interaction that establishes access to the protected Dashboard. (required_inference)
• C-05 — The page inventory is fixed at Landing, Profile, Programs, News, Contact, Login, and Dashboard. (explicit)
• C-06 — The visual direction is binding: the specified palette, Fira Sans Condensed / Fira Sans typography, rectilinear shape language, visible 12-column grid with persistent left rail, and the listed avoidances. (explicit)
• C-07 — No blue–indigo primary or accent, and no generic indigo/blue-on-white SaaS template appearance. (explicit)
• C-08 — No online payment, donation, or e-commerce capability is in scope. (explicit exclusion)
• C-09 — No member-facing accounts or member-only content areas are in scope. (explicit exclusion)

12. Glossary

• PC HIMMAH Langkat — Pimpinan Cabang Himpunan Mahasiswa Al Washliyah Langkat; the branch leadership of the Al Washliyah Islamic students' organisation in Langkat Regency, North Sumatra.
• HIMMAH — Himpunan Mahasiswa Al Washliyah; the Al Washliyah students' organisation.
• Pengurus — The branch leadership of PC HIMMAH Langkat; the persona who manages and updates the organisation's content on the website.
• Anggota / Kader — Members and cadres of HIMMAH Langkat; the persona who follows branch activities, programs, and announcements and seeks to participate.
• Pengunjung Umum / Masyarakat — The general public, students, and external parties; the persona who seeks information about the organisation and a way to contact it.
• Landing — The public entry page of the site, presenting the organisation's identity and routing visitors into the other public sections.
• Profile — The public page presenting the organisation's identity and background.
• Programs — The public page listing the branch's work programs and activities.
• News — The public page carrying the branch's news and announcements, newest first.
• Contact — The public page presenting the branch's address and contact channels.
• Login — The anonymously reachable verification surface where a provisioned pengurus establishes access to the Dashboard.
• Dashboard — The restricted working area where the branch leadership manages and updates the organisation's content.
• Provisioning — The internal invitation or provisioning step through which a pengurus's administrator access is established; not open self-registration.
• Status chip — The small square colour indicator on a Dashboard table row: green = published, orange = draft, muted = archived.
• Left rail — The persistent vertical rail on public pages carrying the section number and name with a coloured line, in the manner of a transit-line diagram.