System Requirements Document for perlinsos-digital

1. Introduction

Perlinsos Digital is a technology-based social protection service that connects data from various government sources to support the verification and validation of citizen data. It is presented to the public as an innovation in public service: a portal through which citizens can register (mendaftar), monitor their eligibility results (memantau hasil kelayakan), and submit a sanggah (objection/appeal) when their data is found to be incorrect.

The product intent is to make social-protection determination transparent, tepat sasaran (on-target), and to provide fairer access for society. The system manages crucial citizen data and therefore rests on an explicit legal foundation:

• UUD NRI Tahun 1945, Pasal 28H — constitutional guarantee of the right to social welfare.
• UUD NRI Tahun 1945, Pasal 34 — state responsibility for social welfare.
• UU No. 11 Tahun 2009 tentang Kesejahteraan Sosial — the main umbrella for the organization of social welfare, covering rehabilitation, jaminan (assurance), pemberdayaan (empowerment), perlindungan sosial (social protection), and poverty reduction (penanggulangan kemiskinan).
• Inpres No. 4 Tahun 2025 tentang Data Tunggal Sosial dan Ekonomi Nasional (DTSEN) — strengthens the management of the data.

The audience is the general Indonesian public — ordinary citizens who use the portal on their own smartphones, many on mid-range Android devices, with mixed literacy and high stakes — together with the government-side personnel who verify and validate citizen data. The portal is reached by scanning a QR code displayed on a presentation screen with a smartphone, which opens the Portal Perlinsos Digital directly.

2. System Overview

Perlinsos Digital is delivered as a first-party web portal with application-owned identity. The current delivery covers:

• An anonymously reachable Portal Perlinsos Digital entry point, opened by scanning the presentation QR code with a smartphone, which presents the system's interface directly to visitors for exploration.
• Self-service citizen enrollment and returning verification, so that a citizen can begin a registration, and later return to monitor eligibility and file a sanggah.
• Citizen registration for social protection assistance.
• Citizen eligibility monitoring as a revisitable result.
• Citizen sanggah submission when registered data is incorrect.
• Officer verification and validation of citizen data using the connected government data sources.

Actors. Two accepted active human personas: Masyarakat (Citizen Applicant) and Verifikator / Validator Data (Data Verification Officer). The connected government data sources are external systems, not personas.

Ownership. All accepted human-facing work is owned by first-party custom pages. The linkage of data from multiple government sources is an external/provider responsibility consumed by the Verification page; it is not a first-party capability.

Narrow exclusions. No capability beyond registration, eligibility monitoring, sanggah submission, and officer verification/validation is in current scope. No adjacent account-management capabilities (profile editing, password recovery flows beyond returning verification, notification preferences, role administration) are introduced. No stock photography, no playful illustration, and no blue/indigo-on-white SaaS template treatment are used.

2a. Product Interpretation and Delivery Boundary

The QR code shown on the presentation screen is the entry point: scanning it with a smartphone opens the Portal Perlinsos Digital, which is anonymously reachable and presents the system's interface directly so that visitors can explore it. Protected work — registration, eligibility monitoring, sanggah submission, and officer verification — requires application-owned identity, because a citizen must privately own and resume durable actor-specific state (a submitted registration, its eligibility result, and any sanggah bound to it), and because an officer's verification work must remain bound to the correct authorized participant.

Identity is established truthfully at first use: a citizen who independently begins a registration journey enrolls through self-service on Sign Up; returning citizens and authorized officers verify themselves on Login. The protected destinations cannot own the interaction that establishes access to themselves, so Login and Sign Up are separate, anonymously reachable access boundaries. Officer access additionally requires authorized provisioning or invitation before the verification workflow is reachable.

Current scope is the portal, its identity access surfaces, and the four working destinations. Future horizons are not part of current pages or acceptance.

2b. Source Content Inventory

The authoritative source supplies the following verified factual content, preserved in full:

Istilah / Aturan — Keterangan Singkat

Landasan hukum (as stated):

• UUD NRI Tahun 1945, Pasal 28H dan Pasal 34 — dasar konstitusional pemenuhan kesejahteraan dan jaminan sosial.
• UU No. 11 Tahun 2009 tentang Kesejahteraan Sosial — payung utama penyelenggaraan kesejahteraan sosial, meliputi rehabilitasi, jaminan, pemberdayaan, dan perlindungan sosial, serta penanggulangan kemiskinan.
• Inpres No. 4 Tahun 2025 tentang Data Tunggal Sosial dan Ekonomi Nasional (DTSEN) — penguatan pengelolaan data.

Presentation flow (as stated): 1. Salam Pembuka — Perkenalan diri; 2. Pengantar — Apa itu Perlinsos Digital; 3. Fitur Utama — Pendaftaran, pemantauan kelayakan, pengajuan sanggah; 4. Landasan Hukum — UUD 1945, UU 11/2009, Inpres 4/2025; 5. Demo Portal — Scan QR Code → akses langsung; 6. Penutup — Harapan & ajakan diskusi. Estimasi durasi: total ~5–7 menit; QR Code tampil ~30–45 detik.

Stated aspiration: transparan, tepat sasaran, akses yang lebih adil bagi semua masyarakat.

2c. Page Content and Component Coverage

Portal Perlinsos Digital

• Information/state: the civic masthead — wordmark "PERLINSOS DIGITAL" set flush-left as an oversized Fira Sans Bold headline; the one-line promise "Transparan, tepat sasaran, akses yang lebih adil" in a deep teal band; a numbered wayfinding column listing 01 Daftar / 02 Kelayakan / 03 Sanggah; a single row of three ruled legal chips (UUD 1945, UU 11/2009, Inpres 4/2025) each with its coded colour bar; a schematic map of connected government data sources drawn as transit lines converging on one node; a pictogram set (KTP, KK, rumah, penghasilan) drawn with 2px strokes; documentary-style screenshots of the actual portal UI framed by a hairline; the QR demo block treated as a designed artefact — teal QR module on paper ground inside a hairline frame with a numbered caption and "Pindai untuk membuka Portal" in small caps.
• Primary actions: explore the portal interface directly; proceed to Sign Up to begin a registration; proceed to Login to return to protected work.
• Supporting actions: read the legal foundation as a ruled table (instrumen / pasal / jaminan); follow the numbered wayfinding rail (01–06: Daftar, Kelayakan, Sanggah, Dasar Hukum, Verifikasi, Bantuan).
• Domain entities: legal instrument (UUD 1945 Pasal 28H, UUD 1945 Pasal 34, UU No. 11 Tahun 2009, Inpres No. 4 Tahun 2025 / DTSEN); connected government data source; journey step (Daftar, Kelayakan, Sanggah).
• Component responsibilities: masthead headline block (9-column, flush-left); teal promise band; numbered wayfinding column with orange numerals; three ruled legal chips with coded colour bars; diagrammatic data-source map; pictogram set; hairline-framed UI screenshots; QR artefact block with numbered caption; persistent left wayfinding rail (01–06) that collapses to a horizontally scrollable step-strip under 768px; full-width 4px colour-coded transit rules with numbered line badges.
• States: loading — hairline skeleton rules in place of the data-source map and screenshots; empty — not applicable (static civic content); success — all sections render with rules, chips and captions whole; error — if the diagrammatic map or screenshots fail to load, the ruled frame and its caption remain, with the caption text intact; recovery — the visitor can still proceed to Sign Up or Login, and the legal table remains readable.

Login

• Information/state: returning-verification form for citizens and authorized data verification officers; single-column form max 640px, label above field, always visible; small-caps 600 at 12px with +0.14em tracking for the section label; helper text in muted #6E6A61.
• Primary actions: verify identity to return to protected work; submit credentials.
• Supporting actions: navigate to Sign Up if the visitor has not yet enrolled; return to the Portal Perlinsos Digital entry.
• Domain entities: returning participant (citizen or officer); credential; session.
• Component responsibilities: credential fields with 2px corners and 1px #D9D3C7 hairlines; submit control in deep teal #0F3D3E; focus rings in signal orange #E4572E; inline error region; link to Sign Up.
• States: loading — submit control shows a restrained 120–160ms state transition, no bounce; empty — fields blank with labels visible; success — the participant is returned to the protected destination appropriate to their role (Registration/Eligibility/Appeals for a citizen, Verification for an officer); error — invalid credentials show an inline message in the error region with the field retained; recovery — the participant can correct and resubmit, or move to Sign Up.

Sign Up

• Information/state: self-service enrollment form for a citizen who independently begins a registration journey; single-column form max 640px, label above field, always visible; tabular numerals for NIK and RT/RW.
• Primary actions: establish the citizen's own identity; submit enrollment.
• Supporting actions: navigate to Login if already enrolled; return to the Portal Perlinsos Digital entry.
• Domain entities: citizen identity; NIK; RT/RW; contact detail.
• Component responsibilities: identity fields with 2px corners and 1px #D9D3C7 hairlines; tabular-numeral inputs; submit control in deep teal #0F3D3E; focus rings in signal orange #E4572E; inline validation region; link to Login.
• States: loading — submit control shows a restrained 120–160ms state transition; empty — fields blank with labels visible; success — enrollment completes and the citizen continues into Registration; error — a field-level validation message appears beside the offending field with the entered value retained; recovery — the citizen corrects the field and resubmits, or moves to Login.

Registration

• Information/state: the citizen's registration for social protection assistance; single-column form max 640px, label above field, always visible; aligned label/value pairs with tabular numerals for NIK, RT/RW and income brackets; the numbered wayfinding rail shows the citizen at step 01 Daftar.
• Primary actions: enter and submit registration data for social protection assistance.
• Supporting actions: review entered values before submission; continue to Eligibility after submission.
• Domain entities: registration; citizen data (NIK, KK, rumah, penghasilan, RT/RW); submission timestamp; eligibility status.
• Component responsibilities: single-column form fields with 2px corners and 1px #D9D3C7 hairlines; tabular-numeral inputs; submit control in deep teal #0F3D3E; focus rings in signal orange #E4572E; inline validation region; submission confirmation region.
• States: loading — the submit control shows a restrained 120–160ms state transition while the submission is accepted; empty — no registration exists yet, fields blank with labels visible; success — the registration is recorded and the citizen is directed to Eligibility to monitor the result; error — a field-level or submission-level message appears with entered values retained; recovery — the citizen corrects the data and resubmits without losing prior entries.

Eligibility

• Information/state: the citizen's revisitable eligibility result, presented as a station-sign status plate — a white ruled panel with a 6px colour bar (green Layak / mustard Menunggu Verifikasi / orange Perlu Sanggah), the status in small-caps 12px +0.14em, and a counting-up tabular numeral; the numbered wayfinding rail shows the citizen at step 02 Kelayakan.
• Primary actions: monitor the eligibility result of the submitted registration.
• Supporting actions: proceed to Appeals when the status is Perlu Sanggah; return to Registration to review submitted data.
• Domain entities: eligibility result; status (Layak, Menunggu Verifikasi, Perlu Sanggah); submitted registration; verification outcome.
• Component responsibilities: station-sign status plate with 6px colour bar; small-caps status label; counting-up tabular numeral; ruled panel with 1px #D9D3C7 hairline; link to Appeals; link to Registration.
• States: loading — the status plate renders its ruled frame with the status label pending; empty — no registration has been submitted, with a clear pointer to Registration; success — the status plate wipes in its colour bar left-to-right over 400ms and the numeral counts up, showing Layak, Menunggu Verifikasi, or Perlu Sanggah; error — if the result cannot be retrieved, the ruled panel remains with a message and a retry control; recovery — the citizen retries retrieval, or returns to Registration to confirm submitted data.

Appeals

• Information/state: submission of a sanggah when registered citizen data is incorrect; the numbered wayfinding rail shows the citizen at step 03 Sanggah; the active wayfinding line and the "Ajukan Sanggah" CTA use signal orange #E4572E.
• Primary actions: submit a sanggah describing the incorrect data.
• Supporting actions: reference the eligibility result that triggered the sanggah; review the registered data being disputed.
• Domain entities: sanggah; disputed data field; reason; submission timestamp; sanggah status.
• Component responsibilities: single-column form max 640px with label above field; disputed-field selector; reason field; "Ajukan Sanggah" CTA in signal orange #E4572E; focus rings in signal orange; inline validation region; submission confirmation region.
• States: loading — the CTA shows a restrained 120–160ms state transition while the sanggah is accepted; empty — no sanggah exists yet, with the disputed data shown for reference; success — the sanggah is recorded and confirmed, and the citizen can return to Eligibility to monitor the outcome; error — a field-level or submission-level message appears with entered values retained; recovery — the citizen corrects the sanggah and resubmits, or returns to Eligibility.

Verification

• Information/state: the officer's recurring verification and validation workspace for citizen data, drawing on the connected government data sources; aligned label/value pairs with tabular numerals for NIK, RT/RW and income brackets; data rows use 1px #D9D3C7 hairlines; the numbered wayfinding rail shows the officer at step 05 Verifikasi.
• Primary actions: verify and validate submitted citizen data against the connected government sources.
• Supporting actions: review the citizen's submitted registration data; record the verification outcome that determines the eligibility status.
• Domain entities: citizen data record; connected government data source; verification outcome; validation result; eligibility status.
• Component responsibilities: data table with white surface and 1px #D9D3C7 hairlines; aligned label/value pairs with tabular numerals; source-linkage indicator; outcome recording control in deep teal #0F3D3E; focus rings in signal orange #E4572E; inline error region.
• States: loading — the data table renders its ruled frame with rows pending; empty — no citizen data is awaiting verification, with a clear empty message; success — the verification outcome is recorded and the citizen's eligibility status is updated accordingly; error — if a connected government source cannot be reached, the affected row shows a source-unavailable message while the rest of the table remains usable; recovery — the officer retries the affected source lookup, or records the outcome once the source is reachable.

3. Functional Requirements

FR-01 — Technology-based social protection service connecting government data (explicit) As a Masyarakat (Citizen Applicant), I should have my data verified and validated through a service that connects data from various government sources, so that my eligibility determination is reliable.

• Trigger/input: a submitted registration whose data must be checked.
• Observable result: the citizen's data is verified and validated against connected government sources, and an eligibility status results.
• Access state: the citizen's own protected state; the officer's authorized verification workspace.
• Failure/recovery: if a connected source is unreachable, the affected check is reported as unavailable and can be retried.
• Continuation: the resulting status is visible to the citizen on Eligibility.

FR-02 — Citizen registration (explicit) As a Masyarakat (Citizen Applicant), I should register through the system, so that I can be considered for social protection assistance.

• Trigger/input: the citizen's decision to register, and the citizen data entered on Registration.
• Observable result: a recorded registration bound to the citizen's own identity.
• Access state: protected; requires the citizen's own established identity.
• Failure/recovery: field-level or submission-level errors retain entered values so the citizen can correct and resubmit.
• Continuation: the citizen proceeds to Eligibility to monitor the result.

FR-03 — Citizen eligibility monitoring (explicit) As a Masyarakat (Citizen Applicant), I should monitor my eligibility results, so that I know whether I am Layak, still Menunggu Verifikasi, or Perlu Sanggah.

• Trigger/input: the citizen returning to the portal after submitting a registration.
• Observable result: a revisitable eligibility result shown as a status plate with its colour bar and tabular numeral.
• Access state: protected; requires returning verification.
• Failure/recovery: if the result cannot be retrieved, the ruled panel remains with a message and a retry control.
• Continuation: when the status is Perlu Sanggah, the citizen proceeds to Appeals.

FR-04 — Citizen sanggah submission (explicit) As a Masyarakat (Citizen Applicant), I should submit a sanggah when my data is found to be incorrect, so that inaccurate data can be corrected.

• Trigger/input: an eligibility status of Perlu Sanggah, or the citizen's discovery that registered data is incorrect.
• Observable result: a recorded sanggah bound to the citizen's registration, with a confirmation.
• Access state: protected; requires returning verification.
• Failure/recovery: field-level or submission-level errors retain entered values so the citizen can correct and resubmit.
• Continuation: the citizen returns to Eligibility to monitor the outcome.

FR-05 — QR-code entry to the portal (explicit) As a Masyarakat (Citizen Applicant), I should reach the portal by scanning the QR code displayed on screen with my smartphone, so that I can open the Portal Perlinsos Digital directly.

• Trigger/input: scanning the displayed QR code with a smartphone.
• Observable result: the Portal Perlinsos Digital opens.
• Access state: anonymous; no identity required to reach the entry point.
• Failure/recovery: if the scan does not resolve, the visitor can scan again or reach the portal by its address.
• Continuation: the visitor explores the portal and proceeds to Sign Up or Login.

FR-06 — Portal presents the system interface for exploration (explicit) As a Masyarakat (Citizen Applicant), I should see the system's interface directly through the portal, so that I can explore it.

• Trigger/input: opening the Portal Perlinsos Digital.
• Observable result: the portal interface is presented directly, including the masthead, the numbered wayfinding rail, the legal foundation table, and the diagrammatic data-source map.
• Access state: anonymous.
• Failure/recovery: if a diagram or screenshot fails to load, its ruled frame and caption remain and the legal table stays readable.
• Continuation: the visitor proceeds to Sign Up or Login.

FR-07 — Legal foundation reflected in the product (explicit) As a Masyarakat (Citizen Applicant), I should see the legal foundation on which Perlinsos rests, so that I can trust the service.

• Trigger/input: viewing the portal.
• Observable result: a ruled table (instrumen / pasal / jaminan) presenting UUD NRI 1945 Pasal 28H, UUD NRI 1945 Pasal 34, UU No. 11 Tahun 2009, and Inpres No. 4 Tahun 2025 (DTSEN), each with its coded colour bar.
• Access state: anonymous.
• Failure/recovery: the table remains readable even if other portal media fail to load.
• Continuation: the visitor continues exploring or proceeds to Sign Up or Login.

FR-08 — Transparency, on-target determination, and fairer access (explicit) As a Masyarakat (Citizen Applicant), I should experience a system that is transparent, tepat sasaran, and provides fairer access, so that my determination is fair and understandable.

• Trigger/input: every interaction with the portal.
• Observable result: the citizen can see the status of their registration, the reason for the status, and the path to correct inaccurate data.
• Access state: anonymous for exploration; protected for the citizen's own state.
• Failure/recovery: any failure state names what happened and what the citizen can do next.
• Continuation: the citizen can always continue to the next step of Daftar → Kelayakan → Sanggah.

FR-09 — Citizen self-service enrollment (required_inference) As a Masyarakat (Citizen Applicant), I should establish my own identity through self-service enrollment, so that I can begin and later revisit a registration.

• Trigger/input: the citizen's decision to begin a registration journey without an existing identity.
• Observable result: an established citizen identity that owns the citizen's durable registration state.
• Access state: anonymous entry on Sign Up; the resulting identity protects Registration, Eligibility, and Appeals.
• Failure/recovery: field-level validation messages retain entered values so the citizen can correct and resubmit.
• Continuation: the citizen continues into Registration.

FR-10 — Returning verification (required_inference) As a Masyarakat (Citizen Applicant), I should verify myself when I return, so that I can monitor my eligibility results and submit a later sanggah.

• Trigger/input: the citizen returning to the portal after enrollment.
• Observable result: the citizen's own durable state — registration, eligibility result, and sanggah — is available again.
• Access state: anonymous entry on Login; protected state becomes available only after verification.
• Failure/recovery: invalid credentials show an inline message with the field retained, and the citizen can correct and resubmit or move to Sign Up.
• Continuation: the citizen proceeds to Eligibility or Appeals.

FR-11 — Officer returning verification and authorized provisioning or invitation (required_inference) As a Verifikator / Validator Data (Data Verification Officer), I should be provisioned or invited and then verify myself on return, so that I can access the verification workflow.

• Trigger/input: the officer's authorized provisioning or invitation, followed by returning verification.
• Observable result: access to the Verification workspace bound to the correct authorized officer.
• Access state: anonymous entry on Login; Verification is protected and reachable only by an authorized officer.
• Failure/recovery: invalid credentials show an inline message with the field retained; an unprovisioned participant cannot reach Verification.
• Continuation: the officer proceeds to Verification.

FR-12 — Officer verification and validation of citizen data (required_inference) As a Verifikator / Validator Data (Data Verification Officer), I should verify and validate submitted citizen data against the connected government sources, so that eligibility determinations are reliable and correctly targeted.

• Trigger/input: citizen data awaiting verification.
• Observable result: a recorded verification outcome that determines the citizen's eligibility status.
• Access state: protected; authorized officer only.
• Failure/recovery: if a connected government source cannot be reached, the affected row shows a source-unavailable message while the rest of the table remains usable, and the lookup can be retried.
• Continuation: the recorded outcome becomes visible to the citizen on Eligibility.

FR-13 — QR code leads to the anonymously reachable portal entry point (required_inference) As a Masyarakat (Citizen Applicant), I should land on an anonymously reachable entry point when I scan the QR code, so that I can explore before any identity is required.

• Trigger/input: scanning the QR code.
• Observable result: the Portal Perlinsos Digital is reachable without identity.
• Access state: anonymous.
• Failure/recovery: if the scan does not resolve, the visitor can scan again or reach the portal by its address.
• Continuation: the visitor proceeds to Sign Up or Login for protected work.

4. User Personas

Masyarakat (Citizen Applicant)

Product context. A member of the Indonesian public who uses the Perlinsos Digital portal on their own smartphone — often a mid-range Android device — to seek social protection assistance. They arrive by scanning the QR code shown on a presentation screen, or by returning to the portal later. The stakes are high and the language must be plain: long Indonesian words such as kelayakan and perlindungan must remain readable at small sizes.

Primary goal. To obtain a fair, transparent, and on-target determination of their social assistance eligibility, with a clear path to correct inaccurate data.

Distinct accepted responsibilities. The citizen is the only persona who registers for assistance, monitors their own eligibility result, and files a sanggah. Their work is self-directed and self-owned: they begin a registration journey independently, and they must be able to resume it later.

Relevant inputs or decisions. Their own citizen data — NIK, KK, rumah, penghasilan, RT/RW — entered on Registration; the decision to submit; the decision to file a sanggah when the status is Perlu Sanggah or when they find their data incorrect; the disputed field and the reason for the sanggah.

Interactions with other accepted participants. The citizen's submitted data is the input to the officer's verification work, and the officer's recorded outcome is what the citizen later sees as their eligibility status. The citizen never performs verification, and the officer never registers on the citizen's behalf.

Observable success. The citizen sees a status plate reading Layak, Menunggu Verifikasi, or Perlu Sanggah, with its colour bar and tabular numeral; when the status is Perlu Sanggah, they can file a sanggah and see it confirmed.

Verifikator / Validator Data (Data Verification Officer)

Product context. Government-side personnel who rely on the system's linkage of data from multiple government sources to carry out verification and validation of citizen data. They work in a recurring, case-by-case rhythm rather than a one-time journey, and they reach their workspace only after authorized provisioning or invitation and returning verification.

Primary goal. To confirm whether submitted citizen data is accurate and consistent across sources, so that eligibility determinations are reliable and correctly targeted.

Distinct accepted responsibilities. The officer is the only persona who verifies and validates citizen data and records the verification outcome. Their work is the authoritative check that stands between a citizen's submission and a determination.

Relevant inputs or decisions. The citizen's submitted registration data; the connected government data sources; the decision that the data is accurate and consistent, or that it is not; the recorded outcome.

Interactions with other accepted participants. The officer acts on the citizen's submitted data and produces the outcome the citizen later monitors. The officer does not register, does not monitor eligibility on the citizen's behalf, and does not file sanggah.

Observable success. A recorded verification outcome that updates the citizen's eligibility status, with the source linkage visible and any unreachable source clearly reported.

5. Core User Flows

Flow A — A citizen reaches the portal by scanning the QR code and explores it

1. On the presentation screen, the QR code is displayed. The citizen scans it with their smartphone.
2. The Portal Perlinsos Digital opens anonymously. The civic masthead renders: the wordmark "PERLINSOS DIGITAL" flush-left, the teal band with "Transparan, tepat sasaran, akses yang lebih adil", and the numbered wayfinding column 01 Daftar / 02 Kelayakan / 03 Sanggah.
3. The citizen reads the three ruled legal chips (UUD 1945, UU 11/2009, Inpres 4/2025) and the ruled legal table (instrumen / pasal / jaminan).
4. The citizen views the diagrammatic map of connected government data sources converging on one node, and the hairline-framed screenshots of the portal UI.
5. Observable result: the citizen has seen the system's interface directly and understands the three journey steps.
6. Next step: the citizen proceeds to Sign Up to begin a registration, or to Login if already enrolled.
7. Failure/recovery: if the diagram or a screenshot fails to load, its ruled frame and caption remain and the legal table stays readable; the citizen can still proceed to Sign Up or Login.

Flow B — A citizen enrolls and submits a registration

1. From the Portal Perlinsos Digital, the citizen chooses to begin a registration and arrives at Sign Up.
2. The citizen enters their identity details — NIK, RT/RW, and contact detail — in the single-column form, with tabular numerals for NIK and RT/RW.
3. Decision: the citizen submits the enrollment.
4. Observable result: the citizen's own identity is established, and it now owns their durable registration state.
5. The citizen continues into Registration, where the numbered wayfinding rail shows step 01 Daftar.
6. The citizen enters their registration data for social protection assistance — NIK, KK, rumah, penghasilan, RT/RW — with label above field, always visible.
7. Decision: the citizen reviews the entered values and submits the registration.
8. Observable result: the registration is recorded and bound to the citizen's identity.
9. Next step: the citizen is directed to Eligibility to monitor the result.
10. Failure/recovery: if a field fails validation, a field-level message appears beside it with the entered value retained; the citizen corrects it and resubmits without losing prior entries.

Flow C — A citizen returns, verifies, and monitors eligibility

1. The citizen returns to the portal and arrives at Login.
2. The citizen enters their credentials in the single-column form.
3. Decision: the citizen submits for verification.
4. Observable result: the citizen's own durable state becomes available again.
5. The citizen proceeds to Eligibility, where the numbered wayfinding rail shows step 02 Kelayakan.
6. The station-sign status plate renders: a white ruled panel with a 6px colour bar, the status in small-caps 12px +0.14em, and a counting-up tabular numeral. The colour bar wipes in left-to-right over 400ms.
7. Observable result: the citizen sees one of three statuses — green Layak, mustard Menunggu Verifikasi, or orange Perlu Sanggah.
8. Next step: if the status is Perlu Sanggah, the citizen proceeds to Appeals (Flow D). If the status is Menunggu Verifikasi, the citizen can return later to re-check. If the status is Layak, the journey is complete.
9. Failure/recovery: if the result cannot be retrieved, the ruled panel remains with a message and a retry control; the citizen retries, or returns to Registration to confirm the submitted data.
10. Empty state: if no registration has been submitted, Eligibility shows a clear pointer to Registration.

Flow D — A citizen files a sanggah

1. From Eligibility, the citizen sees the status Perlu Sanggah, or the citizen finds that their registered data is incorrect.
2. The citizen proceeds to Appeals, where the numbered wayfinding rail shows step 03 Sanggah and the active wayfinding line is signal orange.
3. The citizen selects the disputed data field and enters the reason for the sanggah in the single-column form.
4. Decision: the citizen activates the "Ajukan Sanggah" CTA in signal orange #E4572E.
5. Observable result: the sanggah is recorded and bound to the citizen's registration, and a confirmation is shown.
6. Next step: the citizen returns to Eligibility to monitor the outcome.
7. Failure/recovery: if a field fails validation or the submission fails, a message appears with the entered values retained; the citizen corrects the sanggah and resubmits, or returns to Eligibility.

Flow E — An officer verifies and validates citizen data

1. The officer has been provisioned or invited, and arrives at Login.
2. The officer enters their credentials in the single-column form.
3. Decision: the officer submits for verification.
4. Observable result: access to the Verification workspace is granted, bound to the correct authorized officer.
5. The officer proceeds to Verification, where the numbered wayfinding rail shows step 05 Verifikasi.
6. The officer reviews the citizen data awaiting verification in the ruled data table, with aligned label/value pairs and tabular numerals for NIK, RT/RW and income brackets.
7. The officer checks the submitted data against the connected government data sources, using the source-linkage indicator.
8. Decision: the officer determines whether the data is accurate and consistent across sources.
9. Observable result: the officer records the verification outcome, which determines the citizen's eligibility status.
10. Next step: the recorded outcome becomes visible to the citizen on Eligibility; the officer continues with the next case.
11. Failure/recovery: if a connected government source cannot be reached, the affected row shows a source-unavailable message while the rest of the table remains usable; the officer retries the lookup, or records the outcome once the source is reachable.
12. Empty state: if no citizen data is awaiting verification, Verification shows a clear empty message.

6. Visuals Colors and Theme

Muse and headline. Erik Spiekermann — typographic infrastructure for a national social safety net. The language is civic wayfinding: humanist sans as public infrastructure, signal colours used like transit lines, numbered systems, documentary honesty. It reads as state-grade but warm, not cold enterprise.

Mode. Light mode.

Colour tokens by role

Deep teal #0F3D3E is the institutional ink for headers, rules and primary buttons — never blue, never indigo. Signal orange #E4572E is spent sparingly. The three legal instruments get their own coded line colours drawn as 4px transit rules, never as fills behind body text.

Typography

• Headings: Fira Sans — Fira Sans Bold 700 at large civic scale, tight -0.02em tracking, sentence case (not all-caps) for Indonesian readability. Small-caps 600 at 12px with +0.14em tracking for section labels and legal citations.
• Body: Fira Sans.
• Numerals: tabular for NIK, RT/RW, income brackets.
• Scale: 1.25 modular — 64/40/32/24/20/16/14/12 with clamp. Display clamp(40px, 7vw, 88px); h1 clamp(32px, 5vw, 56px); h2 clamp(24px, 3.4vw, 36px); body 17px/1.6; legal small 13px/1.55.

Shape language. Honest civic geometry: 2px corners on inputs and cards (near-square, nothing pill-shaped); 1px #D9D3C7 hairlines; 4px colour-coded rules as the only decoration; rectangular chips and status tags with a 3px left colour bar. No blobs, no glass, no soft shadows — hierarchy comes from rules, weight and colour coding, like a station sign.

Spacing rhythm. Strict 12-column grid with a persistent left wayfinding rail numbered 01–06 (Daftar, Kelayakan, Sanggah, Dasar Hukum, Verifikasi, Bantuan), which becomes a horizontal scrollable step-strip under 768px. Sections are separated by full-width colour-coded transit rules with a numbered line badge. Legal foundation rendered as a ruled table (instrumen / pasal / jaminan), not cards. Forms are single-column max 640px, label above field, always visible. Data rows use aligned label/value pairs with tabular numerals.

Imagery style. No stock photography and no illustration for its own sake. Imagery is diagrammatic: a schematic map of connected government data sources drawn as transit lines converging on one node; a pictogram set (KTP, KK, rumah, penghasilan) drawn with 2px strokes; documentary-style screenshots of the actual portal UI framed by a hairline. The QR code on the presentation screen is treated as a designed artefact — teal module on paper ground, with a numbered caption and a ruled frame.

Avoid. Blue/indigo primaries on white (#2563EB, #4F46E5, #6366F1) and gradient-blob heroes; Inter, Roboto, Poppins, system-ui for any heading or body text; grids of identical hover-lift rounded cards for the three legal instruments or the three features; pill-shaped buttons and 20px+ corner radii; frosted glass panels, blurred gradients, floating dashboard tiles; playful character illustration, emoji, confetti or springy/bouncy easing; photographic stock imagery of smiling officials or families; hero text or controls that bleed or clip at 375px.

Readable text and controls. Headlines, wordmarks, labels, numbers, cards' 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 exactly as the direction asks, as long as it covers no readable text or control. Moving and scrollable content may cross the viewport or container edge by design; with prefers-reduced-motion it stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row (overflow-x: auto).

7. Signature Design Concept

The civic masthead as a route map.

The first screen of the Portal Perlinsos Digital is not a centred SaaS hero. It is a civic masthead built from the direction's hero direction and signature moves, recomposing only accepted content, states and controls:

• Full-bleed warm paper ground (#F4F1EA) across the whole first screen.
• A 4px orange transit rule (#E4572E) running edge to edge at the very top — the first signal that this page is a route, not a brochure.
• The wordmark "PERLINSOS DIGITAL" as an oversized Fira Sans Bold headline set flush-left in a 9-column block at clamp(40px, 7vw, 88px), sentence case, tight -0.02em tracking.
• A deep teal band (#0F3D3E) beneath the headline holding the one-line promise "Transparan, tepat sasaran, akses yang lebih adil" in white 20px.
• A numbered wayfinding column to the right of the headline listing 01 Daftar / 02 Kelayakan / 03 Sanggah with orange numerals — the citizen's route, visible before any identity is required.
• A single row of three ruled legal chips beneath the teal band — UUD 1945, UU 11/2009, Inpres 4/2025 — each with its coded colour bar (#E4572E, #C9A227, #2F6F5E), drawn as 4px transit rules, never as fills behind body text.
• The QR demo block treated as a designed artefact: teal QR module on paper ground inside a hairline frame with a numbered caption and "Pindai untuk membuka Portal" set in small caps.

Mobile (375px). Headline, teal band and chips stack in that order, all text whole and inside the viewport. The numbered wayfinding column collapses into the horizontally scrollable step-strip.

This concept introduces no new behaviour, page, or destination: every element is accepted portal content, and the only controls are the accepted paths to Sign Up and Login.

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject. The civic masthead: the oversized "PERLINSOS DIGITAL" wordmark, the deep teal promise band, and the numbered wayfinding column 01 Daftar / 02 Kelayakan / 03 Sanggah.
• Input → transformation → outcome thesis. The visitor arrives from the scanned QR code → the masthead composes itself in reading order (orange transit rule, wordmark, teal band, numbered route, three ruled legal chips) → the visitor understands the three journey steps and can proceed to Sign Up or Login. No accepted behaviour is invented; the composition only orders accepted content.
• Motion vocabulary. Functional and instant: 120–160ms state transitions, no bounce, no parallax. Scroll-triggered reveals are 8px rise + fade. The only choreographed moment in the product is the eligibility result — a status chip that wipes in its colour bar left-to-right over 400ms with a counting-up tabular numeral — and it belongs to Eligibility, not to the landing hero.
• Composed first frame. Full-bleed warm paper ground; the 4px orange transit rule edge to edge at the top; the wordmark flush-left in a 9-column block; the teal band with the one-line promise in white 20px; the numbered wayfinding column with orange numerals to the right; the three ruled legal chips with their coded colour bars beneath the teal band. All text whole and inside the viewport at 375px, 768px and 1280px.
• Reduced-motion state. Under prefers-reduced-motion, the 8px rise + fade reveals are disabled and all content appears in its final position; the horizontally scrollable step-strip remains scrollable with overflow-x: auto and shows whole items.

9. Non-Functional Requirements

NFR-01 — Legal foundation (explicit) The system manages crucial citizen data and must rest on a strong legal foundation: UUD NRI 1945 Pasal 28H and Pasal 34; UU No. 11 Tahun 2009 tentang Kesejahteraan Sosial; Inpres No. 4 Tahun 2025 tentang Data Tunggal Sosial dan Ekonomi Nasional (DTSEN). Rationale: the source states this as a hard constraint on a system that manages crucial citizen data.

NFR-02 — QR-code entry point (explicit) The portal is reached by scanning a QR code displayed on screen with a smartphone; the QR code is the entry point to the Perlinsos Digital Portal. Rationale: explicit hard constraint in the authoritative source.

NFR-03 — Transparency, on-target determination, and fairer access (explicit) The system must be transparent, tepat sasaran, and provide fairer access for society. Rationale: stated aspiration for the system in the authoritative source.

NFR-04 — Readability for mixed literacy and small screens (required_inference) Headlines, wordmarks, labels, numbers, cards' text and controls 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 audience uses mid-range Android phones with mixed literacy; the direction requires readable text and controls to stay whole at every viewport.

NFR-05 — Accessible contrast (required_inference) Muted #6E6A61 is used for metadata, legal citations and helper text at a 4.6:1 minimum contrast ratio. Rationale: the direction specifies this minimum for legibility of legal citations and helper text.

NFR-06 — Reduced-motion support (required_inference) Under prefers-reduced-motion, scroll-triggered reveals are disabled and moving or scrollable content stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row. Rationale: the direction requires a reduced-motion state; motion must never be the only way to reach content.

NFR-07 — Data linkage across government sources (explicit) The system connects data from various government sources to support verification and validation of citizen data. Rationale: explicit product commitment; the connected sources are external systems consumed by the Verification workspace.

10. Tech Stack

• Frontend: React (web portal), single-page application with the seven accepted pages.
• Backend: Python / FastAPI, providing the registration, eligibility, sanggah, and verification endpoints and the linkage to connected government data sources.
• Storage: relational database for citizen registrations, eligibility results, sanggah records, verification outcomes, and identity records.
• Containerization: Docker and docker-compose for local and single-host deployment.
• Typography: Fira Sans (headings and body), loaded as a webfont with tabular numerals enabled for NIK, RT/RW and income brackets.

[Default — not specified by user] for React, Python/FastAPI, storage, and Docker/docker-compose; the source specifies no technology choices. Kubernetes is not included because the source does not require it.

11. Assumptions and Constraints

Assumptions

• [Default — not specified by user] The portal is a web application reachable by smartphone browser from the scanned QR code.
• [Default — not specified by user] React with a Python/FastAPI backend and a relational database is a coherent implementation of the accepted behavior.
• The connected government data sources are external systems with their own availability; the portal reports their unavailability rather than owning their uptime.

Constraints

• The QR code displayed on screen is the entry point to the Perlinsos Digital Portal, scanned with a smartphone.
• The system manages crucial citizen data and must rest on the stated legal foundation: UUD NRI 1945 Pasal 28H and Pasal 34; UU No. 11 Tahun 2009; Inpres No. 4 Tahun 2025 (DTSEN).
• The portal must be transparent, tepat sasaran, and provide fairer access for society.
• The blue/indigo-on-white SaaS template is forbidden for this project.
• No stock photography, no playful character illustration, no emoji, no confetti, and no springy or bouncy easing.
• Headlines, wordmarks, labels, numbers, cards' text and controls stay whole and inside the viewport at 375px, 768px and 1280px.

Explicit exclusions

• No capability beyond registration, eligibility monitoring, sanggah submission, and officer verification/validation is in current scope.
• No adjacent account-management capabilities are introduced: no profile editing, no role administration, no notification preferences, and no password-recovery flow beyond returning verification.
• No stock photography and no illustration for its own sake.

12. Glossary

• Perlinsos Digital — Layanan perlindungan sosial berbasis teknologi; the technology-based social protection service that connects data from various government sources to support verification and validation of citizen data.
• DTSEN — Data Tunggal Sosial dan Ekonomi Nasional; the single national social and economic data framework established by Inpres No. 4 Tahun 2025.
• UUD NRI 1945 Pasal 28H — Hak atas kesejahteraan sosial; the constitutional guarantee of the right to social welfare.
• UUD NRI 1945 Pasal 34 — Tanggung jawab negara atas kesejahteraan sosial; the state's responsibility for social welfare.
• UU No. 11 Tahun 2009 — Penyelenggaraan kesejahteraan sosial; the main umbrella for the organization of social welfare, covering rehabilitation, jaminan, pemberdayaan, perlindungan sosial, and penanggulangan kemiskinan.
• Inpres No. 4 Tahun 2025 — Data Tunggal Sosial dan Ekonomi Nasional (DTSEN); the presidential instruction strengthening the management of the data.
• Mendaftar — To register; the citizen's act of submitting a registration for social protection assistance.
• Kelayakan — Eligibility; the citizen's monitored result of their submitted registration.
• Sanggah — Objection/appeal; the citizen's submission when registered data is found to be incorrect.
• Layak — Eligible; the green status on the eligibility status plate.
• Menunggu Verifikasi — Awaiting verification; the mustard status on the eligibility status plate.
• Perlu Sanggah — Needs an objection/appeal; the orange status on the eligibility status plate.
• Verifikator / Validator Data — Data Verification Officer; the government-side personnel who verify and validate citizen data against connected government sources.
• NIK — Nomor Induk Kependudukan; the citizen's national identity number, set in tabular numerals.
• KK — Kartu Keluarga; the family card, one of the citizen data items.
• RT/RW — Rukun Tetangga / Rukun Warga; the neighbourhood administrative units, set in tabular numerals.
• Penghasilan — Income; one of the citizen data items, set in tabular numerals.
• Tepat sasaran — On-target; the aspiration that assistance reaches those it is intended for.
• Portal Perlinsos Digital — The anonymously reachable entry point opened by scanning the presentation QR code, which presents the system's interface directly for exploration.